From e58f8cc42a18bf412e8a8bedfdba09dc0e8d0ccc Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 19 Aug 2024 10:52:27 +0800
Subject: [PATCH 01/23] fix(web): disable link when id undefined (#1104)

---
 web/src/beta/features/Navbar/LeftSection/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/beta/features/Navbar/LeftSection/index.tsx b/web/src/beta/features/Navbar/LeftSection/index.tsx
index 6da1c4484..de3c27cd3 100644
--- a/web/src/beta/features/Navbar/LeftSection/index.tsx
+++ b/web/src/beta/features/Navbar/LeftSection/index.tsx
@@ -50,11 +50,11 @@ const LeftSection: React.FC<Props> = ({
 
   return (
     <Wrapper>
-      <StyledLink to={`/dashboard/${currentWorkspace?.id}`}>
+      <StyledLink to={`/dashboard/${currentWorkspace?.id}`} disabled={!currentWorkspace?.id}>
         <IconButton icon="grid" appearance="simple" size="large" />
       </StyledLink>
       {page !== "editor" && (
-        <StyledLink to={`/scene/${sceneId}/map`}>
+        <StyledLink to={`/scene/${sceneId}/map`} disabled={!sceneId}>
           <IconButton icon="editor" appearance="simple" size="large" />
         </StyledLink>
       )}
@@ -79,10 +79,11 @@ const Wrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.small,
 }));
 
-const StyledLink = styled(Link)(({ theme }) => ({
+const StyledLink = styled(Link)<{ disabled?: boolean }>(({ theme, disabled }) => ({
   display: "flex",
   color: theme.content.main,
   textDecoration: "none",
+  pointerEvents: disabled ? "none" : "all",
   "&:hover": {
     textDecoration: "none",
   },

From 422db8776f334c141ea7229d8f5a907c1e334d4a Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 19 Aug 2024 16:44:36 +0800
Subject: [PATCH 02/23] feat(web): support delete sketch feature (#1105)

---
 .../LayerInspector/FeatureInspector/index.tsx | 24 +++++++++++++++++-
 .../InspectorPanel/LayerInspector/index.tsx   |  9 ++++++-
 .../Editor/Map/InspectorPanel/index.tsx       |  2 ++
 web/src/beta/features/Editor/Map/context.tsx  |  3 ++-
 web/src/beta/features/Editor/hooks/index.ts   |  3 +++
 .../beta/features/Editor/hooks/useSketch.ts   | 19 +++++++++++++-
 .../api/featureCollectionApi/index.ts         | 25 ++++++++++++++++++-
 web/src/services/gql/__gen__/gql.ts           |  5 ++++
 web/src/services/gql/__gen__/graphql.ts       |  8 ++++++
 .../services/gql/queries/featureCollection.ts |  8 ++++++
 web/src/services/i18n/translations/en.yml     |  6 +++--
 web/src/services/i18n/translations/ja.yml     |  6 +++--
 12 files changed, 109 insertions(+), 9 deletions(-)

diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
index b52c8e67b..540e89d4e 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
@@ -3,7 +3,10 @@ import "react18-json-view/src/style.css";
 import "react18-json-view/src/dark.css";
 import JsonView from "react18-json-view";
 
-import { GeoJsonFeatureUpdateProps } from "@reearth/beta/features/Editor/hooks/useSketch";
+import {
+  GeoJsonFeatureDeleteProps,
+  GeoJsonFeatureUpdateProps,
+} from "@reearth/beta/features/Editor/hooks/useSketch";
 import { Button, Collapse, Typography } from "@reearth/beta/lib/reearth-ui";
 import { Geometry } from "@reearth/core";
 import { NLSLayer, SketchFeature } from "@reearth/services/api/layersApi/utils";
@@ -21,6 +24,7 @@ type Props = {
   layer?: NLSLayer;
   sketchFeature?: SketchFeature;
   onGeoJsonFeatureUpdate?: (inp: GeoJsonFeatureUpdateProps) => void;
+  onGeoJsonFeatureDelete?: (inp: GeoJsonFeatureDeleteProps) => void;
 };
 
 export type ValueProp = string | number | boolean | undefined;
@@ -36,6 +40,7 @@ const FeatureData: FC<Props> = ({
   layer,
   sketchFeature,
   onGeoJsonFeatureUpdate,
+  onGeoJsonFeatureDelete,
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -87,6 +92,14 @@ const FeatureData: FC<Props> = ({
     [theme.fonts.sizes.body],
   );
 
+  const handleDeleteSketchFeature = useCallback(() => {
+    if (!layer?.id || !sketchFeature?.id) return;
+    onGeoJsonFeatureDelete?.({
+      layerId: layer.id,
+      featureId: sketchFeature.id,
+    });
+  }, [layer?.id, sketchFeature?.id, onGeoJsonFeatureDelete]);
+
   return (
     <Wrapper>
       {!!layer?.isSketch && (
@@ -134,6 +147,15 @@ const FeatureData: FC<Props> = ({
           <JsonView src={selectedFeature?.properties} theme="vscode" dark style={jsonStyle} />
         </ValueWrapper>
       </Collapse>
+      {!!layer?.isSketch && sketchFeature?.id && (
+        <Button
+          title={t("Delete Feature")}
+          onClick={handleDeleteSketchFeature}
+          size="small"
+          icon="trash"
+          extendWidth
+        />
+      )}
     </Wrapper>
   );
 };
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
index 38c335668..1802ed70a 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
@@ -1,7 +1,10 @@
 import { FC, useCallback, useMemo, useState } from "react";
 
 import { SelectedLayer } from "@reearth/beta/features/Editor/hooks/useLayers";
-import { GeoJsonFeatureUpdateProps } from "@reearth/beta/features/Editor/hooks/useSketch";
+import {
+  GeoJsonFeatureDeleteProps,
+  GeoJsonFeatureUpdateProps,
+} from "@reearth/beta/features/Editor/hooks/useSketch";
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle as LayerStyleType } from "@reearth/services/api/layerStyleApi/utils";
@@ -22,6 +25,7 @@ type Props = {
   sceneId?: string;
   onLayerConfigUpdate?: (inp: LayerConfigUpdateProps) => void;
   onGeoJsonFeatureUpdate?: (inp: GeoJsonFeatureUpdateProps) => void;
+  onGeoJsonFeatureDelete?: (inp: GeoJsonFeatureDeleteProps) => void;
 };
 
 const InspectorTabs: FC<Props> = ({
@@ -31,6 +35,7 @@ const InspectorTabs: FC<Props> = ({
   sceneId,
   onLayerConfigUpdate,
   onGeoJsonFeatureUpdate,
+  onGeoJsonFeatureDelete,
 }) => {
   const selectedFeature = useMemo(() => {
     if (!selectedLayer?.computedFeature?.id) return;
@@ -79,6 +84,7 @@ const InspectorTabs: FC<Props> = ({
             layer={selectedLayer?.layer}
             sketchFeature={selectedSketchFeature}
             onGeoJsonFeatureUpdate={onGeoJsonFeatureUpdate}
+            onGeoJsonFeatureDelete={onGeoJsonFeatureDelete}
           />
         ),
       },
@@ -115,6 +121,7 @@ const InspectorTabs: FC<Props> = ({
       sceneId,
       onLayerConfigUpdate,
       onGeoJsonFeatureUpdate,
+      onGeoJsonFeatureDelete,
     ],
   );
 
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
index e0f256b31..bb4308907 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
@@ -22,6 +22,7 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
     handleFlyTo,
     handleLayerConfigUpdate,
     handleGeoJsonFeatureUpdate,
+    handleGeoJsonFeatureDelete,
   } = useMapPage();
 
   const t = useT();
@@ -52,6 +53,7 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
           selectedLayer={selectedLayer}
           onLayerConfigUpdate={handleLayerConfigUpdate}
           onGeoJsonFeatureUpdate={handleGeoJsonFeatureUpdate}
+          onGeoJsonFeatureDelete={handleGeoJsonFeatureDelete}
         />
       )}
     </Panel>
diff --git a/web/src/beta/features/Editor/Map/context.tsx b/web/src/beta/features/Editor/Map/context.tsx
index bc7c6a97e..d6d40d009 100644
--- a/web/src/beta/features/Editor/Map/context.tsx
+++ b/web/src/beta/features/Editor/Map/context.tsx
@@ -20,7 +20,7 @@ import {
   LayerStyleNameUpdateProps,
   LayerStyleValueUpdateProps,
 } from "../hooks/useLayerStyles";
-import { GeoJsonFeatureUpdateProps } from "../hooks/useSketch";
+import { GeoJsonFeatureDeleteProps, GeoJsonFeatureUpdateProps } from "../hooks/useSketch";
 
 export interface MapPageContextType {
   handleVisualizerResize?: (props: AreaSize) => void;
@@ -52,6 +52,7 @@ export interface MapPageContextType {
   handleLayerStyleValueUpdate?: (inp: LayerStyleValueUpdateProps) => void;
   handleLayerConfigUpdate?: (inp: LayerConfigUpdateProps) => void;
   handleGeoJsonFeatureUpdate?: (inp: GeoJsonFeatureUpdateProps) => void;
+  handleGeoJsonFeatureDelete?: (inp: GeoJsonFeatureDeleteProps) => void;
   handleLayerStyleAdd: (inp: LayerStyleAddProps) => void;
   handleLayerStyleDelete: (id: string) => void;
   handleLayerStyleNameUpdate: (inp: LayerStyleNameUpdateProps) => void;
diff --git a/web/src/beta/features/Editor/hooks/index.ts b/web/src/beta/features/Editor/hooks/index.ts
index c7e5b4818..33cf09877 100644
--- a/web/src/beta/features/Editor/hooks/index.ts
+++ b/web/src/beta/features/Editor/hooks/index.ts
@@ -61,6 +61,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleSketchFeatureCreate,
     sketchType,
     handleGeoJsonFeatureUpdate,
+    handleGeoJsonFeatureDelete,
   } = useSketch({
     tab,
     nlsLayers,
@@ -164,6 +165,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
       handleLayerStyleValueUpdate,
       handleLayerConfigUpdate,
       handleGeoJsonFeatureUpdate,
+      handleGeoJsonFeatureDelete,
       handleLayerStyleAdd,
       handleLayerStyleDelete,
       handleLayerStyleNameUpdate,
@@ -198,6 +200,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
       handleLayerStyleValueUpdate,
       handleLayerConfigUpdate,
       handleGeoJsonFeatureUpdate,
+      handleGeoJsonFeatureDelete,
       handleLayerStyleAdd,
       handleLayerStyleDelete,
       handleLayerStyleNameUpdate,
diff --git a/web/src/beta/features/Editor/hooks/useSketch.ts b/web/src/beta/features/Editor/hooks/useSketch.ts
index 756566ede..0a3efb7d0 100644
--- a/web/src/beta/features/Editor/hooks/useSketch.ts
+++ b/web/src/beta/features/Editor/hooks/useSketch.ts
@@ -29,6 +29,11 @@ export type GeoJsonFeatureUpdateProps = {
   properties?: any;
 };
 
+export type GeoJsonFeatureDeleteProps = {
+  layerId: string;
+  featureId: string;
+};
+
 export default ({
   tab,
   nlsLayers,
@@ -50,7 +55,8 @@ export default ({
     [visualizerRef],
   );
 
-  const { useAddGeoJsonFeature, useUpdateGeoJSONFeature } = useFeatureCollectionFetcher();
+  const { useAddGeoJsonFeature, useUpdateGeoJSONFeature, useDeleteGeoJSONFeature } =
+    useFeatureCollectionFetcher();
 
   const handleSketchLayerAdd = useCallback(
     async (inp: FeatureProps) => {
@@ -128,10 +134,21 @@ export default ({
     [useUpdateGeoJSONFeature],
   );
 
+  const handleGeoJsonFeatureDelete = useCallback(
+    async (inp: GeoJsonFeatureDeleteProps) => {
+      await useDeleteGeoJSONFeature({
+        layerId: inp.layerId,
+        featureId: inp.featureId,
+      });
+    },
+    [useDeleteGeoJSONFeature],
+  );
+
   return {
     sketchType,
     handleSketchTypeChange,
     handleSketchFeatureCreate,
     handleGeoJsonFeatureUpdate,
+    handleGeoJsonFeatureDelete,
   };
 };
diff --git a/web/src/services/api/featureCollectionApi/index.ts b/web/src/services/api/featureCollectionApi/index.ts
index 5df0f93d0..5ac5ad105 100644
--- a/web/src/services/api/featureCollectionApi/index.ts
+++ b/web/src/services/api/featureCollectionApi/index.ts
@@ -5,12 +5,14 @@ import { MutationReturn } from "@reearth/services/api/types";
 import {
   AddGeoJsonFeatureInput,
   AddGeoJsonFeatureMutation,
+  DeleteGeoJsonFeatureInput,
   MutationAddGeoJsonFeatureArgs,
   UpdateGeoJsonFeatureInput,
   UpdateGeoJsonFeatureMutation,
 } from "@reearth/services/gql/__gen__/graphql";
 import {
   ADD_GEOJSON_FEATURE,
+  DELETE_GEOJSON_FEATURE,
   UPDATE_GEOJSON_FEATURE,
 } from "@reearth/services/gql/queries/featureCollection";
 import { useT } from "@reearth/services/i18n";
@@ -59,14 +61,35 @@ export default () => {
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully updated a the layer!") });
+      setNotification({ type: "success", text: t("Successfully updated the layer!") });
 
       return { data, status: "success" };
     },
     [updateGeoJsonFeatureMutation, setNotification, t],
   );
+
+  const [deleteGeoJsonFeatureMutation] = useMutation(DELETE_GEOJSON_FEATURE, {
+    refetchQueries: ["GetScene"],
+  });
+
+  const useDeleteGeoJSONFeature = useCallback(
+    async (input: DeleteGeoJsonFeatureInput) => {
+      if (!input.layerId || !input.featureId) return { status: "error" };
+      const { data, errors } = await deleteGeoJsonFeatureMutation({ variables: { input } });
+      if (errors || !data?.deleteGeoJSONFeature) {
+        setNotification({ type: "error", text: t("Failed to delete the feature.") });
+        return { status: "error", errors };
+      }
+
+      setNotification({ type: "success", text: t("Successfully deleted the feature!") });
+      return { data, status: "success" };
+    },
+    [deleteGeoJsonFeatureMutation, t, setNotification],
+  );
+
   return {
     useAddGeoJsonFeature,
     useUpdateGeoJSONFeature,
+    useDeleteGeoJSONFeature,
   };
 };
diff --git a/web/src/services/gql/__gen__/gql.ts b/web/src/services/gql/__gen__/gql.ts
index 0f8a156b8..c8a2a9102 100644
--- a/web/src/services/gql/__gen__/gql.ts
+++ b/web/src/services/gql/__gen__/gql.ts
@@ -32,6 +32,7 @@ const documents = {
     "\n  mutation RemoveAsset($assetId: ID!) {\n    removeAsset(input: { assetId: $assetId }) {\n      assetId\n    }\n  }\n": types.RemoveAssetDocument,
     "\n  mutation AddGeoJSONFeature($input: AddGeoJSONFeatureInput!) {\n    addGeoJSONFeature(input: $input) {\n      id\n\t\t  type\n\t\t  properties\n    }\n  }\n": types.AddGeoJsonFeatureDocument,
     "\n  mutation UpdateGeoJSONFeature($input: UpdateGeoJSONFeatureInput!) {\n    updateGeoJSONFeature(input: $input) {\n      id\n\t\t  type\n\t\t  properties\n    }\n  }\n": types.UpdateGeoJsonFeatureDocument,
+    "\n  mutation DeleteGeoJSONFeature($input: DeleteGeoJSONFeatureInput!){\n    deleteGeoJSONFeature(input: $input) {\n\t\t  deletedFeatureId\n    }\n  }\n": types.DeleteGeoJsonFeatureDocument,
     "\n  mutation CreateNLSInfobox($input: CreateNLSInfoboxInput!) {\n    createNLSInfobox(input: $input) {\n      layer{\n        id\n      }\n    }\n  }\n": types.CreateNlsInfoboxDocument,
     "\n  mutation RemoveNLSInfobox($input: RemoveNLSInfoboxInput!) {\n    removeNLSInfobox(input: $input) {\n      layer {\n        id\n      }\n    }\n  }\n": types.RemoveNlsInfoboxDocument,
     "\n  mutation AddNLSInfoboxBlock($input: AddNLSInfoboxBlockInput!) {\n    addNLSInfoboxBlock(input: $input) {\n      layer {\n        id\n      }\n    }\n  }\n": types.AddNlsInfoboxBlockDocument,
@@ -177,6 +178,10 @@ export function gql(source: "\n  mutation AddGeoJSONFeature($input: AddGeoJSONFe
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  mutation UpdateGeoJSONFeature($input: UpdateGeoJSONFeatureInput!) {\n    updateGeoJSONFeature(input: $input) {\n      id\n\t\t  type\n\t\t  properties\n    }\n  }\n"): (typeof documents)["\n  mutation UpdateGeoJSONFeature($input: UpdateGeoJSONFeatureInput!) {\n    updateGeoJSONFeature(input: $input) {\n      id\n\t\t  type\n\t\t  properties\n    }\n  }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  mutation DeleteGeoJSONFeature($input: DeleteGeoJSONFeatureInput!){\n    deleteGeoJSONFeature(input: $input) {\n\t\t  deletedFeatureId\n    }\n  }\n"): (typeof documents)["\n  mutation DeleteGeoJSONFeature($input: DeleteGeoJSONFeatureInput!){\n    deleteGeoJSONFeature(input: $input) {\n\t\t  deletedFeatureId\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts
index a72733a97..337a320ef 100644
--- a/web/src/services/gql/__gen__/graphql.ts
+++ b/web/src/services/gql/__gen__/graphql.ts
@@ -3194,6 +3194,13 @@ export type UpdateGeoJsonFeatureMutationVariables = Exact<{
 
 export type UpdateGeoJsonFeatureMutation = { __typename?: 'Mutation', updateGeoJSONFeature: { __typename?: 'Feature', id: string, type: string, properties?: any | null } };
 
+export type DeleteGeoJsonFeatureMutationVariables = Exact<{
+  input: DeleteGeoJsonFeatureInput;
+}>;
+
+
+export type DeleteGeoJsonFeatureMutation = { __typename?: 'Mutation', deleteGeoJSONFeature: { __typename?: 'DeleteGeoJSONFeaturePayload', deletedFeatureId: string } };
+
 export type CreateNlsInfoboxMutationVariables = Exact<{
   input: CreateNlsInfoboxInput;
 }>;
@@ -3686,6 +3693,7 @@ export const CreateAssetDocument = {"kind":"Document","definitions":[{"kind":"Op
 export const RemoveAssetDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RemoveAsset"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"assetId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removeAsset"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"assetId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"assetId"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"assetId"}}]}}]}}]} as unknown as DocumentNode<RemoveAssetMutation, RemoveAssetMutationVariables>;
 export const AddGeoJsonFeatureDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddGeoJSONFeature"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddGeoJSONFeatureInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addGeoJSONFeature"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"properties"}}]}}]}}]} as unknown as DocumentNode<AddGeoJsonFeatureMutation, AddGeoJsonFeatureMutationVariables>;
 export const UpdateGeoJsonFeatureDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateGeoJSONFeature"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateGeoJSONFeatureInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateGeoJSONFeature"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"properties"}}]}}]}}]} as unknown as DocumentNode<UpdateGeoJsonFeatureMutation, UpdateGeoJsonFeatureMutationVariables>;
+export const DeleteGeoJsonFeatureDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteGeoJSONFeature"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteGeoJSONFeatureInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteGeoJSONFeature"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deletedFeatureId"}}]}}]}}]} as unknown as DocumentNode<DeleteGeoJsonFeatureMutation, DeleteGeoJsonFeatureMutationVariables>;
 export const CreateNlsInfoboxDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateNLSInfobox"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateNLSInfoboxInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createNLSInfobox"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<CreateNlsInfoboxMutation, CreateNlsInfoboxMutationVariables>;
 export const RemoveNlsInfoboxDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RemoveNLSInfobox"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoveNLSInfoboxInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removeNLSInfobox"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<RemoveNlsInfoboxMutation, RemoveNlsInfoboxMutationVariables>;
 export const AddNlsInfoboxBlockDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddNLSInfoboxBlock"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddNLSInfoboxBlockInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addNLSInfoboxBlock"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<AddNlsInfoboxBlockMutation, AddNlsInfoboxBlockMutationVariables>;
diff --git a/web/src/services/gql/queries/featureCollection.ts b/web/src/services/gql/queries/featureCollection.ts
index 60b37f8c7..e6c5a62da 100644
--- a/web/src/services/gql/queries/featureCollection.ts
+++ b/web/src/services/gql/queries/featureCollection.ts
@@ -19,3 +19,11 @@ export const UPDATE_GEOJSON_FEATURE = gql(`
     }
   }
 `);
+
+export const DELETE_GEOJSON_FEATURE = gql(`
+  mutation DeleteGeoJSONFeature($input: DeleteGeoJSONFeatureInput!){
+    deleteGeoJSONFeature(input: $input) {
+		  deletedFeatureId
+    }
+  }
+`);
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index f56785dbd..24dca2fcb 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -116,6 +116,7 @@ Save & Apply: ''
 No custom properties: ''
 Geometry: ''
 Properties: ''
+Delete Feature: ''
 Enable Infobox: ''
 Show infobox when the user clicks on a layer: ''
 Layer Style: ''
@@ -310,14 +311,15 @@ One or more assets were successfully deleted.: ''
 Failed to add layer.: ''
 Successfully added a new layer: ''
 Failed to update the layer.: ''
-Successfully updated a the layer!: ''
+Successfully updated the layer!: ''
+Failed to delete the feature.: ''
+Successfully deleted the feature!: ''
 Failed to create block.: ''
 Successfullly created a block!: ''
 Failed to delete block.: ''
 Block was successfully deleted.: ''
 Failed to move block.: ''
 Block was successfully moved.: ''
-Successfully updated the layer!: ''
 Failed to remove the layer.: ''
 Successfully removed the layer!: ''
 Failed to update the custom property schema.: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index 73135650c..fed7ab513 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -116,6 +116,7 @@ Save & Apply: ''
 No custom properties: ''
 Geometry: ジオメトリ
 Properties: プロパティ
+Delete Feature: ''
 Enable Infobox: インフォボックスを有効化
 Show infobox when the user clicks on a layer: フェーチャーをクリックした際にインフォボックスを表示
 Layer Style: レイヤースタイル
@@ -310,14 +311,15 @@ One or more assets were successfully deleted.: アセットが削除されまし
 Failed to add layer.: レイヤーの追加に失敗しました。
 Successfully added a new layer: 新しいレイヤーの追加に成功しました。
 Failed to update the layer.: レイヤーのアップデートに失敗しました。
-Successfully updated a the layer!: レイヤーのアップデートに成功しました！
+Successfully updated the layer!: ''
+Failed to delete the feature.: ''
+Successfully deleted the feature!: ''
 Failed to create block.: ブロックの作成に失敗しました。
 Successfullly created a block!: ブロックの作成に成功しました！
 Failed to delete block.: ブロックの削除に失敗しました。
 Block was successfully deleted.: ブロックの削除に成功しました。
 Failed to move block.: ブロックの移動に失敗しました。
 Block was successfully moved.: ブロックの移動に成功しました。
-Successfully updated the layer!: ''
 Failed to remove the layer.: レイヤーの削除に失敗しました。
 Successfully removed the layer!: ''
 Failed to update the custom property schema.: ''

From b9401d0e67d2deac5363ada9dfcc56ba294d2efb Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Tue, 20 Aug 2024 15:26:28 +0800
Subject: [PATCH 03/23] refactor(web): evict project cache after delete project
 (#1103)

---
 web/src/services/api/projectApi.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
index 8c85738d0..0af5103fc 100644
--- a/web/src/services/api/projectApi.ts
+++ b/web/src/services/api/projectApi.ts
@@ -1,4 +1,4 @@
-import { useLazyQuery, useMutation, useQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client";
 import { useCallback, useMemo } from "react";
 
 import { type PublishStatus } from "@reearth/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks";
@@ -39,6 +39,7 @@ export type Project = ProjectPayload["project"];
 export default () => {
   const t = useT();
   const [, setNotification] = useNotification();
+  const apolloCache = useApolloClient().cache;
 
   const useProjectQuery = useCallback((projectId?: string) => {
     const { data, ...rest } = useQuery(GET_PROJECT, {
@@ -251,10 +252,12 @@ export default () => {
         return { status: "error" };
       }
 
+      apolloCache.evict({ fieldName: "projects" });
+
       setNotification({ type: "success", text: t("Successfully delete project!") });
       return { status: "success" };
     },
-    [deleteProjectMutation, t, setNotification],
+    [apolloCache, deleteProjectMutation, t, setNotification],
   );
 
   const [updateProjectBasicAuthMutation] = useMutation(UPDATE_PROJECT_BASIC_AUTH, {

From 9849751346c1365e42650c9f8ac2614b9e7da5b6 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Tue, 20 Aug 2024 17:16:33 +0800
Subject: [PATCH 04/23] chore(web): upgrade vite plugin cesium (#1106)

---
 web/package.json   |  4 ++--
 web/vite.config.ts | 20 +++++++++++++++++++-
 web/yarn.lock      | 32 ++++++++++++++++----------------
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/web/package.json b/web/package.json
index ed35ae05c..637db38ae 100644
--- a/web/package.json
+++ b/web/package.json
@@ -89,7 +89,7 @@
         "typescript": "5.0.4",
         "typescript-styled-plugin": "0.18.3",
         "vite": "5.3.5",
-        "vite-plugin-cesium": "1.2.22",
+        "vite-plugin-cesium": "1.2.23",
         "vite-plugin-svgr": "4.2.0",
         "vite-tsconfig-paths": "4.2.1",
         "vitest": "1.6.0",
@@ -106,7 +106,7 @@
         "@lexical/react": "0.12.2",
         "@monaco-editor/react": "4.6.0",
         "@popperjs/core": "2.11.8",
-        "@reearth/core": "0.0.7-alpha.6",
+        "@reearth/core": "0.0.7-alpha.11",
         "@rot1024/use-transition": "1.0.0",
         "@sentry/browser": "7.77.0",
         "@seznam/compose-react-refs": "1.0.6",
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 00a753663..517cf0497 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -26,9 +26,27 @@ try {
   // noop
 }
 
+let cesiumVersion = "";
+try {
+  const cesiumPackageJson = JSON.parse(
+    readFileSync(resolve(__dirname, "node_modules", "cesium", "package.json"), "utf-8"),
+  );
+  cesiumVersion = cesiumPackageJson.version;
+} catch {
+  // noop
+}
+
 export default defineConfig({
   envPrefix: "REEARTH_WEB_",
-  plugins: [svgr(), react(), yaml(), cesium(), serverHeaders(), config(), tsconfigPaths()],
+  plugins: [
+    svgr(),
+    react(),
+    yaml(),
+    cesium({ cesiumBaseUrl: cesiumVersion ? `cesium-${cesiumVersion}/` : undefined }),
+    serverHeaders(),
+    config(),
+    tsconfigPaths(),
+  ],
   // https://github.com/storybookjs/storybook/issues/25256
   assetsInclude: ["/sb-preview/runtime.js"],
   define: {
diff --git a/web/yarn.lock b/web/yarn.lock
index 878543687..afef5f4a9 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -8036,9 +8036,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reearth/core@npm:0.0.7-alpha.6":
-  version: 0.0.7-alpha.6
-  resolution: "@reearth/core@npm:0.0.7-alpha.6"
+"@reearth/core@npm:0.0.7-alpha.11":
+  version: 0.0.7-alpha.11
+  resolution: "@reearth/core@npm:0.0.7-alpha.11"
   dependencies:
     "@reearth/cesium-mvt-imagery-provider": "npm:1.5.4"
     "@rot1024/use-transition": "npm:1.0.0"
@@ -8069,7 +8069,7 @@ __metadata:
     react-error-boundary: "npm:4.0.11"
     react-nl2br: "npm:1.0.4"
     react-use: "npm:17.5.0"
-    resium: "npm:^1.18.0"
+    resium: "npm:1.18.1"
     suspend-react: "npm:0.1.3"
     tiny-invariant: "npm:1.3.3"
     use-callback-ref: "npm:1.3.2"
@@ -8077,10 +8077,10 @@ __metadata:
     uuid: "npm:9.0.1"
     xstate: "npm:4.38.2"
   peerDependencies:
-    cesium: 1.x
+    cesium: 1.118.x
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 10c0/b8785d9a72076cdd0470d473ae9abd33107f2f8cf4f51dd6d233b8fa68870387c8aa2ddf8152d0405a6ea5a240fde747860ebc92aa04685b0f31d91123839a2e
+  checksum: 10c0/9efc7b5ef280d89ef4f039d82fa07fbf97c54cfcb321ecf9337e251f77a40313bd027554188f86089a314d3ca0084696358aee136c58fc66c8924a3e42d7f461
   languageName: node
   linkType: hard
 
@@ -8107,7 +8107,7 @@ __metadata:
     "@monaco-editor/react": "npm:4.6.0"
     "@playwright/test": "npm:1.39.0"
     "@popperjs/core": "npm:2.11.8"
-    "@reearth/core": "npm:0.0.7-alpha.6"
+    "@reearth/core": "npm:0.0.7-alpha.11"
     "@rollup/plugin-yaml": "npm:4.1.2"
     "@rot1024/use-transition": "npm:1.0.0"
     "@sentry/browser": "npm:7.77.0"
@@ -8207,7 +8207,7 @@ __metadata:
     use-file-input: "npm:1.0.0"
     uuid: "npm:9.0.1"
     vite: "npm:5.3.5"
-    vite-plugin-cesium: "npm:1.2.22"
+    vite-plugin-cesium: "npm:1.2.23"
     vite-plugin-svgr: "npm:4.2.0"
     vite-tsconfig-paths: "npm:4.2.1"
     vitest: "npm:1.6.0"
@@ -23770,14 +23770,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resium@npm:^1.18.0":
-  version: 1.18.0
-  resolution: "resium@npm:1.18.0"
+"resium@npm:1.18.1":
+  version: 1.18.1
+  resolution: "resium@npm:1.18.1"
   peerDependencies:
     cesium: 1.x
     react: ">=18.2.0"
     react-dom: ">=18.2.0"
-  checksum: 10c0/c4693e4aae6002eca35bce9c5d81df3d013784f2344d5a8b76fb7213acf23b16a7c96e751bf9951ee5ca2bec8fca879f86dc12fad03d5b1f675bdde249b06b77
+  checksum: 10c0/52e29361e3f59469125293d203e8c68baea499338c5bb93d642225817ddafdb30d8874baabbf124a9fea6f3daa8ac13bec71db6d466d5d2c90d103ee1d78ea5f
   languageName: node
   linkType: hard
 
@@ -26712,9 +26712,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-cesium@npm:1.2.22":
-  version: 1.2.22
-  resolution: "vite-plugin-cesium@npm:1.2.22"
+"vite-plugin-cesium@npm:1.2.23":
+  version: 1.2.23
+  resolution: "vite-plugin-cesium@npm:1.2.23"
   dependencies:
     fs-extra: "npm:^9.1.0"
     rollup-plugin-external-globals: "npm:^0.6.1"
@@ -26722,7 +26722,7 @@ __metadata:
   peerDependencies:
     cesium: ^1.95.0
     vite: ">=2.7.1"
-  checksum: 10c0/3c660d45a72908e6293f0ebf86668fad235fa1cd355f9e5e95fb5584cf9ffac2e2fa54c4cbfb74817624ffab210233595f0bdf8378aa4869beb4c234bffdba04
+  checksum: 10c0/5e14c4135d39ce7e84ad12c8315410b4a4f43fc306877687397bf2ccbf783f4388f87619ce2d9374696b1205ffa86e5f3c23820d3214350f1aab5cf097ea44d7
   languageName: node
   linkType: hard
 

From bdf32d6022d99a4637393c8f7fb10e5c3212b386 Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Thu, 22 Aug 2024 09:07:44 +0300
Subject: [PATCH 05/23] fix(web): camera duration bug (#1107)

Co-authored-by: airslice <icesunex@hotmail.com>
---
 .../Editor/Story/PagesPanel/PageItem.tsx      |  1 -
 .../StoryPanel/Block/builtin/Title/index.tsx  | 16 +++++++---
 .../PageIndicator/IndicatorSection.tsx        | 13 ++------
 .../Visualizer/Crust/StoryPanel/hooks.ts      |  8 ++---
 .../beta/ui/components/EntryItem/index.tsx    |  3 +-
 web/src/beta/ui/fields/CamersField/index.tsx  | 12 ++------
 web/src/beta/ui/fields/QuartetInputField.tsx  | 30 ++++++++++++-------
 web/src/beta/ui/fields/TripletInputField.tsx  | 26 +++++++++-------
 web/src/beta/ui/fields/TwinInputField.tsx     | 27 ++++++++++-------
 9 files changed, 74 insertions(+), 62 deletions(-)

diff --git a/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx b/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
index 8160ddabb..0f3670d70 100644
--- a/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
+++ b/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
@@ -133,5 +133,4 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-  maxWidth: "240px",
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
index 8030d0fe3..5d5a9abec 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
@@ -2,11 +2,10 @@ import { FC, useMemo } from "react";
 
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
-import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { isEmptyString } from "@reearth/beta/utils/util";
 import { ValueTypes } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
-import { useTheme } from "@reearth/services/theme";
+import { styled, useTheme } from "@reearth/services/theme";
 
 import { StoryBlock } from "../../../types";
 
@@ -38,11 +37,20 @@ const TitleBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props })
       property={property}
       dndEnabled={false}
       {...props}>
-      <Typography size="h2" color={hasText ? color ?? "black" : theme.content.weak}>
+      <TitleWrapper color={hasText ? color ?? "black" : theme.content.weak}>
         {hasEmptySpace || !title ? t("Untitled") : title}
-      </Typography>
+      </TitleWrapper>
     </BlockWrapper>
   );
 };
 
 export default TitleBlock;
+
+const TitleWrapper = styled("div")<{ color?: string }>(({ color, theme }) => ({
+  color: color,
+  fontSize: theme.fonts.sizes.h2,
+  fontWeight: theme.fonts.weight.regular,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-word",
+}));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
index d37abd1f6..fdc9e32a3 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useMemo, useState } from "react";
+import { FC, useCallback, useMemo } from "react";
 
 import { Popup } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
@@ -11,14 +11,8 @@ type Props = {
 };
 
 const IndicatorSection: FC<Props> = ({ pageNumber, currentPageNumber, title, onPageChange }) => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
-  const handleMouseOut = useCallback(() => setIsHovered(false), []);
-
   const handleClick = useCallback(() => {
     onPageChange(pageNumber);
-    setIsHovered(false);
   }, [pageNumber, onPageChange]);
 
   const isHighlighted = useMemo(
@@ -33,12 +27,10 @@ const IndicatorSection: FC<Props> = ({ pageNumber, currentPageNumber, title, onP
         <Indicator
           highlighted={isHighlighted}
           onClick={handleClick}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseOut}
           isFirstChild={pageNumber === 1}
         />
       }
-      open={isHovered}
+      triggerOnHover
       placement="bottom"
       extendTriggerWidth>
       <PageNameWrapper isHighlighted={isHighlighted}>
@@ -72,4 +64,5 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
+  cursor: "default",
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
index e63670c06..c935611c3 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
@@ -129,12 +129,12 @@ export default (
       }
 
       handlePageTime(newPage);
-
       const cameraAnimation = newPage.property?.cameraAnimation;
-      const destination = cameraAnimation?.cameraPosition?.value;
+
+      const destination = cameraAnimation?.cameraPosition;
       if (!destination) return;
 
-      const duration = cameraAnimation?.cameraDuration?.value ?? DEFAULT_STORY_PAGE_DURATION;
+      const duration = cameraAnimation?.cameraDuration ?? DEFAULT_STORY_PAGE_DURATION;
 
       visualizer.current?.engine.flyTo({ ...destination }, { duration });
     },
@@ -148,7 +148,7 @@ export default (
     const currentIndex = pages.findIndex(p => p.id === currentPageId);
     return {
       currentPage: currentIndex + 1,
-      pageTitles: pages.map(p => p.property?.title?.title?.value),
+      pageTitles: pages.map(p => p.property?.title?.title),
       maxPage: pages.length,
       onPageChange: (pageIndex: number) => handleCurrentPageChange(pages[pageIndex - 1]?.id),
     };
diff --git a/web/src/beta/ui/components/EntryItem/index.tsx b/web/src/beta/ui/components/EntryItem/index.tsx
index 941597651..ef0678f9c 100644
--- a/web/src/beta/ui/components/EntryItem/index.tsx
+++ b/web/src/beta/ui/components/EntryItem/index.tsx
@@ -101,7 +101,8 @@ const Wrapper = styled("div")<{
   borderRadius: theme.radius.small,
   backgroundColor: "transparent",
   minHeight: 28,
-  width: "100%",
+  flex: 1,
+  minWidth: 0,
   cursor: "pointer",
   ...(hovered && {
     backgroundColor: theme.bg[1],
diff --git a/web/src/beta/ui/fields/CamersField/index.tsx b/web/src/beta/ui/fields/CamersField/index.tsx
index d420ee405..9a05cb0e5 100644
--- a/web/src/beta/ui/fields/CamersField/index.tsx
+++ b/web/src/beta/ui/fields/CamersField/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, FC, useEffect } from "react";
+import { useCallback, useState, FC } from "react";
 
 import { useCurrentCamera } from "@reearth/beta/features/Editor/atoms";
 import { Button, ButtonProps, Popup, TextInput } from "@reearth/beta/lib/reearth-ui";
@@ -39,7 +39,7 @@ const CameraField: FC<CameraFieldProps> = ({
   const theme = useTheme();
   const t = useT();
   const [open, setOpen] = useState<"editor" | "capture" | null>(null);
-  const [currentCamera, setCurrentCamera] = useCurrentCamera();
+  const [currentCamera] = useCurrentCamera();
 
   const handleClick = useCallback(
     (panel: "editor" | "capture") => setOpen(current => (current === panel ? null : panel)),
@@ -58,13 +58,12 @@ const CameraField: FC<CameraFieldProps> = ({
 
   const handleFlyto = useCallback(
     (c?: Partial<Camera>) => {
-      if (!value) return;
       const dest = c ?? currentCamera;
       if (dest) {
         onFlyTo?.(dest);
       }
     },
-    [currentCamera, onFlyTo, value],
+    [currentCamera, onFlyTo],
   );
 
   const handleCameraSettingDelete = useCallback(() => {
@@ -72,11 +71,6 @@ const CameraField: FC<CameraFieldProps> = ({
     handleSave();
   }, [value, handleSave]);
 
-  useEffect(() => {
-    if (!value) return;
-    setCurrentCamera(value);
-  }, [setCurrentCamera, value]);
-
   const ZoomToPosition: FC = () => (
     <Button
       icon="capture"
diff --git a/web/src/beta/ui/fields/QuartetInputField.tsx b/web/src/beta/ui/fields/QuartetInputField.tsx
index 1dbded243..b94b4e539 100644
--- a/web/src/beta/ui/fields/QuartetInputField.tsx
+++ b/web/src/beta/ui/fields/QuartetInputField.tsx
@@ -5,14 +5,15 @@ import { styled, useTheme } from "@reearth/services/theme";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
-type commonTurple = [number, number, number, number];
+type CommonTuple = [number, number, number, number];
+
 export type TripletInputFieldProps = CommonFieldProps &
   Omit<NumberInputProps, "onBlur" | "onChange" | "placeholder" | "value"> & {
-    values: commonTurple;
+    values: CommonTuple;
     placeholders?: [string, string, string, string];
     content?: [string, string, string, string];
-    onChange?: (values: commonTurple) => void;
-    onBlur?: (values: commonTurple) => void;
+    onChange?: (values: CommonTuple) => void;
+    onBlur?: (values: CommonTuple) => void;
   };
 
 const TripletInputField: FC<TripletInputFieldProps> = ({
@@ -25,14 +26,21 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
   onBlur,
   ...props
 }) => {
-  const [inputValues, setInputValues] = useState<commonTurple>(values);
+  const [inputValues, setInputValues] = useState<CommonTuple>(values);
 
   const theme = useTheme();
-  const handleChange = useCallback(() => {
-    const newValues = [...inputValues] as commonTurple;
-    setInputValues(newValues);
-    onChange?.(newValues);
-  }, [inputValues, onChange]);
+
+  const handleChange = useCallback(
+    (index: number, newValue: number | undefined) => {
+      if (newValue !== undefined) {
+        const newValues = [...inputValues] as CommonTuple;
+        newValues[index] = newValue;
+        setInputValues(newValues);
+        onChange?.(newValues);
+      }
+    },
+    [inputValues, onChange],
+  );
 
   const handleBlur = useCallback(() => {
     onBlur?.(inputValues);
@@ -50,7 +58,7 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
             <NumberInput
               value={value}
               placeholder={placeholders?.[index]}
-              onChange={handleChange}
+              onChange={newValue => handleChange(index, newValue)}
               onBlur={handleBlur}
               extendWidth
               {...props}
diff --git a/web/src/beta/ui/fields/TripletInputField.tsx b/web/src/beta/ui/fields/TripletInputField.tsx
index bbbe1c541..6d2da8f56 100644
--- a/web/src/beta/ui/fields/TripletInputField.tsx
+++ b/web/src/beta/ui/fields/TripletInputField.tsx
@@ -26,23 +26,27 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
   ...props
 }) => {
   const [inputValues, setInputValues] = useState<commonTurple>(values);
-
   const theme = useTheme();
 
-  const handleChange = useCallback(() => {
-    const newValues = [...inputValues] as commonTurple;
-    setInputValues(newValues);
-    onChange?.(newValues);
-  }, [inputValues, onChange]);
+  useEffect(() => {
+    setInputValues(values);
+  }, [values]);
+
+  const handleChange = useCallback(
+    (index: number, value?: number) => {
+      if (value === undefined || Number.isNaN(value)) return;
+      const newValues = [...inputValues] as commonTurple;
+      newValues[index] = value;
+      setInputValues(newValues);
+      onChange?.(newValues);
+    },
+    [inputValues, onChange],
+  );
 
   const handleBlur = useCallback(() => {
     onBlur?.(inputValues);
   }, [inputValues, onBlur]);
 
-  useEffect(() => {
-    setInputValues(values);
-  }, [values]);
-
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <Wrapper>
@@ -51,7 +55,7 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
             <NumberInput
               value={value}
               placeholder={placeholders?.[index]}
-              onChange={handleChange}
+              onChange={newValue => handleChange(index, newValue)}
               onBlur={handleBlur}
               extendWidth
               {...props}
diff --git a/web/src/beta/ui/fields/TwinInputField.tsx b/web/src/beta/ui/fields/TwinInputField.tsx
index 2c20e1a87..525673a72 100644
--- a/web/src/beta/ui/fields/TwinInputField.tsx
+++ b/web/src/beta/ui/fields/TwinInputField.tsx
@@ -26,22 +26,27 @@ const TwinInputField: FC<TwinInputFieldProps> = ({
   ...props
 }) => {
   const [inputValues, setInputValues] = useState<commonTupleProps>(values);
-
   const theme = useTheme();
-  const handleChange = useCallback(() => {
-    const newValues = [...inputValues] as commonTupleProps;
-    setInputValues(newValues);
-    onChange?.(newValues);
-  }, [inputValues, onChange]);
-
-  const handleBlur = useCallback(() => {
-    onBlur?.(inputValues);
-  }, [inputValues, onBlur]);
 
   useEffect(() => {
     setInputValues(values);
   }, [values]);
 
+  const handleChange = useCallback(
+    (index: number, value?: number) => {
+      if (value === undefined || Number.isNaN(value)) return;
+      const newValues = [...inputValues] as commonTupleProps;
+      newValues[index] = value;
+      setInputValues(newValues);
+      onChange?.(newValues);
+    },
+    [inputValues, onChange],
+  );
+
+  const handleBlur = useCallback(() => {
+    onBlur?.(inputValues);
+  }, [inputValues, onBlur]);
+
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <Wrapper>
@@ -49,7 +54,7 @@ const TwinInputField: FC<TwinInputFieldProps> = ({
           <InputWrapper key={index}>
             <NumberInput
               value={value}
-              onChange={handleChange}
+              onChange={newValue => handleChange(index, newValue)}
               onBlur={handleBlur}
               placeholder={placeholders?.[index]}
               extendWidth

From b34d3a34de84a25c9b0e618acdba4d8e4876ab8c Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Thu, 22 Aug 2024 16:10:33 +0800
Subject: [PATCH 06/23] fix(web): sketch feature id changes when update custom
 property (#1102)

---
 web/package.json                              |   4 +-
 .../Editor/Map/LayersPanel/LayerItem.tsx      |  11 +-
 .../features/Editor/Visualizer/convert.ts     |   2 +
 .../beta/features/Editor/hooks/useSketch.ts   |  24 +-
 .../Published/convert-new-property.ts         |   2 +
 .../Visualizer/Crust/Infobox/hooks.ts         |  12 +-
 .../beta/features/Visualizer/Crust/index.tsx  |   2 +-
 web/yarn.lock                                 | 427 +++++++++++++++++-
 8 files changed, 437 insertions(+), 47 deletions(-)

diff --git a/web/package.json b/web/package.json
index 637db38ae..10b294eb2 100644
--- a/web/package.json
+++ b/web/package.json
@@ -106,7 +106,7 @@
         "@lexical/react": "0.12.2",
         "@monaco-editor/react": "4.6.0",
         "@popperjs/core": "2.11.8",
-        "@reearth/core": "0.0.7-alpha.11",
+        "@reearth/core": "0.0.7-alpha.13",
         "@rot1024/use-transition": "1.0.0",
         "@sentry/browser": "7.77.0",
         "@seznam/compose-react-refs": "1.0.6",
@@ -159,5 +159,5 @@
         "use-file-input": "1.0.0",
         "uuid": "9.0.1"
     },
-    "packageManager": "yarn@4.3.1"
+    "packageManager": "yarn@4.4.0"
 }
diff --git a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
index 354c481f5..61df57363 100644
--- a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
+++ b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
@@ -95,7 +95,7 @@ const LayerItem: FC<LayerItemProps> = ({
       editingLayerNameId !== layer.id
         ? [
             {
-              comp: !layer.isSketch && layer.visible && (
+              comp: layer.visible && (
                 <IconButton
                   key="zoom"
                   icon="crosshair"
@@ -119,14 +119,7 @@ const LayerItem: FC<LayerItemProps> = ({
             },
           ]
         : undefined,
-    [
-      layer.id,
-      layer.isSketch,
-      layer.visible,
-      editingLayerNameId,
-      handleZoomToLayer,
-      handleToggleLayerVisibility,
-    ],
+    [layer.id, layer.visible, editingLayerNameId, handleZoomToLayer, handleToggleLayerVisibility],
   );
 
   const [localTitle, setLocalTitle] = useState(layer.title);
diff --git a/web/src/beta/features/Editor/Visualizer/convert.ts b/web/src/beta/features/Editor/Visualizer/convert.ts
index 2ef5862f0..615e57477 100644
--- a/web/src/beta/features/Editor/Visualizer/convert.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert.ts
@@ -378,6 +378,8 @@ export function processLayers(
           geometry: f.geometry[0],
         })),
       },
+      isSketchLayer: true,
+      idProperty: "id",
     };
 
     return {
diff --git a/web/src/beta/features/Editor/hooks/useSketch.ts b/web/src/beta/features/Editor/hooks/useSketch.ts
index 0a3efb7d0..b950f68d7 100644
--- a/web/src/beta/features/Editor/hooks/useSketch.ts
+++ b/web/src/beta/features/Editor/hooks/useSketch.ts
@@ -51,6 +51,9 @@ export default ({
     (type: SketchType | undefined, from: "editor" | "plugin" = "editor") => {
       setSketchType(type);
       if (from === "editor") visualizerRef.current?.sketch?.setType?.(type);
+      visualizerRef.current?.sketch?.overrideOptions?.({
+        autoResetInteractionMode: false,
+      });
     },
     [visualizerRef],
   );
@@ -75,12 +78,11 @@ export default ({
     async (feature: SketchFeature | null) => {
       // TODO: create a new layer if there is no selected sketch layer
       if (!feature || !selectedLayer?.id || !selectedLayer.isSketch) return;
-      // TODO: support custom properties
-      const customProperties = {};
+
       await handleSketchLayerAdd({
         type: feature.type,
         layerId: selectedLayer?.id,
-        properties: { ...feature.properties, ...customProperties },
+        properties: { ...feature.properties },
         geometry: feature.geometry,
       });
 
@@ -94,9 +96,9 @@ export default ({
     [selectedLayer?.id, selectedLayer?.isSketch, ignoreCoreLayerUnselect, handleSketchLayerAdd],
   );
 
-  // Workaround: we can't get an update from core after nlsLayers got updated.
-  // Therefore we need to get and select the latest sketch feature manually delayed.
   useEffect(() => {
+    // Workaround: we can't get an notice from core after nlsLayers got updated.
+    // Therefore we need to get and select the latest sketch feature manually delayed.
     setTimeout(() => {
       if (pendingSketchSelectionRef.current) {
         const { layerId, featureId } = pendingSketchSelectionRef.current;
@@ -110,12 +112,18 @@ export default ({
         pendingSketchSelectionRef.current = undefined;
         ignoreCoreLayerUnselect.current = false;
       }
-    }, 1);
+    }, 100);
   }, [nlsLayers, pendingSketchSelectionRef, visualizerRef, ignoreCoreLayerUnselect]);
 
   useEffect(() => {
-    setSketchType(undefined);
-  }, [tab]);
+    handleSketchTypeChange(undefined);
+  }, [tab, handleSketchTypeChange]);
+
+  useEffect(() => {
+    if (!selectedLayer?.isSketch) {
+      handleSketchTypeChange(undefined);
+    }
+  }, [selectedLayer, handleSketchTypeChange]);
 
   const handleGeoJsonFeatureUpdate = useCallback(
     async (inp: GeoJsonFeatureUpdateProps) => {
diff --git a/web/src/beta/features/Published/convert-new-property.ts b/web/src/beta/features/Published/convert-new-property.ts
index 97dd68a64..f12274d1b 100644
--- a/web/src/beta/features/Published/convert-new-property.ts
+++ b/web/src/beta/features/Published/convert-new-property.ts
@@ -74,6 +74,8 @@ export function processLayers(
           };
         }),
       },
+      isSketchLayer: true,
+      idProperty: "id",
     };
 
     return {
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts b/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
index 89b842461..d1b5c6f4d 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
@@ -103,14 +103,14 @@ export default ({
 
   useEffect(() => {
     if (infobox) {
-      infobox.blocks && infobox.blocks.length > 0 && setInfoboxBlocks(infobox.blocks);
+      setInfoboxBlocks(infobox.blocks && infobox.blocks.length > 0 ? infobox.blocks : []);
     } else {
-      infoboxBlocks.length && setInfoboxBlocks([]);
-      selectedBlockId !== undefined && setSelectedBlockId(undefined);
-      openBlocksIndex !== undefined && setOpenBlocksIndex(undefined);
-      disableSelection !== undefined && setDisableSelection(false);
+      setInfoboxBlocks([]);
+      setSelectedBlockId(undefined);
+      setOpenBlocksIndex(undefined);
+      setDisableSelection(false);
     }
-  }, [infobox, infoboxBlocks, selectedBlockId, openBlocksIndex, disableSelection]);
+  }, [infobox]);
 
   useEffect(() => {
     if (wrapperRef.current) {
diff --git a/web/src/beta/features/Visualizer/Crust/index.tsx b/web/src/beta/features/Visualizer/Crust/index.tsx
index f3c783289..a3f281b36 100644
--- a/web/src/beta/features/Visualizer/Crust/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/index.tsx
@@ -229,7 +229,7 @@ export default function Crust({
 
   const featuredInfobox = useMemo(() => {
     const selected = layers?.find(l => l.id === selectedLayer?.layerId);
-    return selectedLayerId?.featureId && selectedLayer?.layer?.layer.infobox
+    return selectedLayerId?.featureId && selected?.infobox
       ? {
           property: selected?.infobox?.property,
           blocks: [...(selected?.infobox?.blocks ?? [])],
diff --git a/web/yarn.lock b/web/yarn.lock
index afef5f4a9..e04aa138d 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -12,6 +12,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@alloc/quick-lru@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@alloc/quick-lru@npm:5.2.0"
+  checksum: 10c0/7b878c48b9d25277d0e1a9b8b2f2312a314af806b4129dc902f2bc29ab09b58236e53964689feec187b28c80d2203aff03829754773a707a8a5987f1b7682d92
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -5727,7 +5734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.5":
+"@jridgewell/gen-mapping@npm:^0.3.2, @jridgewell/gen-mapping@npm:^0.3.5":
   version: 0.3.5
   resolution: "@jridgewell/gen-mapping@npm:0.3.5"
   dependencies:
@@ -6503,6 +6510,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/number@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/number@npm:1.1.0"
+  checksum: 10c0/a48e34d5ff1484de1b7cf5d7317fefc831d49e96a2229f300fd37b657bd8cfb59c922830c00ec02838ab21de3b299a523474592e4f30882153412ed47edce6a4
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/primitive@npm:1.0.0"
@@ -6600,6 +6614,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-checkbox@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-checkbox@npm:1.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-presence": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/2d7d35b8319298166905057e9f7fb1d4b51d73bdec6c7c2127d2266e0f053c39586e316ea0da9a24612dfa86b8fc1f5160d4c37f79ae567025b62616de95c2c7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-collapsible@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-collapsible@npm:1.0.0"
@@ -6759,7 +6799,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dialog@npm:^1.0.4":
+"@radix-ui/react-dialog@npm:1.1.1, @radix-ui/react-dialog@npm:^1.0.4":
   version: 1.1.1
   resolution: "@radix-ui/react-dialog@npm:1.1.1"
   dependencies:
@@ -7035,6 +7075,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-icons@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@radix-ui/react-icons@npm:1.3.0"
+  peerDependencies:
+    react: ^16.x || ^17.x || ^18.x
+  checksum: 10c0/581657680e43fd13ff06e01f963e3afa94671d4ce6c3fb126e2c70c993ab8650faa55286974032dbccfecca4db57308fb66d53771d765887e03600cddee84ae5
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-id@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-id@npm:1.0.0"
@@ -7409,6 +7458,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-select@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@radix-ui/react-select@npm:2.1.1"
+  dependencies:
+    "@radix-ui/number": "npm:1.1.0"
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-collection": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.0"
+    "@radix-ui/react-focus-guards": "npm:1.1.0"
+    "@radix-ui/react-focus-scope": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.0"
+    "@radix-ui/react-portal": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-visually-hidden": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.7"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/f12bce67f49f82e44f04d109f53be195d7a415e89e29aa09ec704899d6a7198486f118f3d1e37aa7afd3e14524951752fc79170ac5bd4c831cdc4032ea1c0382
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-select@npm:^1.2.2":
   version: 1.2.2
   resolution: "@radix-ui/react-select@npm:1.2.2"
@@ -7534,6 +7622,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-switch@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-switch@npm:1.1.0"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/49a250371dccce2a06564ce5812ffbd13b7b69fffe8473529a8a344d8caf95d4068f7d47bd257228e35802f008ba66af410b4d8456bc4257da237fa657c74d50
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-tabs@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-tabs@npm:1.0.0"
@@ -7845,6 +7958,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-previous@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-previous@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/9787d24790d4e330715127f2f4db56c4cbed9b0a47f97e11a68582c08a356a53c1ec41c7537382f6fb8d0db25de152770f17430e8eaf0fa59705be97760acbad
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-rect@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-use-rect@npm:1.0.0"
@@ -8036,10 +8162,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reearth/core@npm:0.0.7-alpha.11":
-  version: 0.0.7-alpha.11
-  resolution: "@reearth/core@npm:0.0.7-alpha.11"
+"@reearth/core@npm:0.0.7-alpha.13":
+  version: 0.0.7-alpha.13
+  resolution: "@reearth/core@npm:0.0.7-alpha.13"
   dependencies:
+    "@radix-ui/react-checkbox": "npm:1.1.1"
+    "@radix-ui/react-dialog": "npm:1.1.1"
+    "@radix-ui/react-icons": "npm:1.3.0"
+    "@radix-ui/react-select": "npm:2.1.1"
+    "@radix-ui/react-separator": "npm:1.1.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-switch": "npm:1.1.0"
     "@reearth/cesium-mvt-imagery-provider": "npm:1.5.4"
     "@rot1024/use-transition": "npm:1.0.0"
     "@seznam/compose-react-refs": "npm:1.0.6"
@@ -8069,8 +8202,11 @@ __metadata:
     react-error-boundary: "npm:4.0.11"
     react-nl2br: "npm:1.0.4"
     react-use: "npm:17.5.0"
-    resium: "npm:1.18.1"
+    resium: "npm:1.18.2"
     suspend-react: "npm:0.1.3"
+    tailwind-merge: "npm:2.5.2"
+    tailwindcss: "npm:3.4.10"
+    tailwindcss-animate: "npm:1.0.7"
     tiny-invariant: "npm:1.3.3"
     use-callback-ref: "npm:1.3.2"
     use-custom-compare: "npm:1.4.0"
@@ -8080,7 +8216,7 @@ __metadata:
     cesium: 1.118.x
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 10c0/9efc7b5ef280d89ef4f039d82fa07fbf97c54cfcb321ecf9337e251f77a40313bd027554188f86089a314d3ca0084696358aee136c58fc66c8924a3e42d7f461
+  checksum: 10c0/fa2666d3c443b3864a15a033ad5bdc5b083002eb2e8f9a0f93c766160897ba8f1256c0725ac1b307de5c571e4f101ae15cd321b40a18df226e94e7d6379dc28e
   languageName: node
   linkType: hard
 
@@ -8107,7 +8243,7 @@ __metadata:
     "@monaco-editor/react": "npm:4.6.0"
     "@playwright/test": "npm:1.39.0"
     "@popperjs/core": "npm:2.11.8"
-    "@reearth/core": "npm:0.0.7-alpha.11"
+    "@reearth/core": "npm:0.0.7-alpha.13"
     "@rollup/plugin-yaml": "npm:4.1.2"
     "@rot1024/use-transition": "npm:1.0.0"
     "@sentry/browser": "npm:7.77.0"
@@ -12832,6 +12968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"any-promise@npm:^1.0.0":
+  version: 1.3.0
+  resolution: "any-promise@npm:1.3.0"
+  checksum: 10c0/60f0298ed34c74fef50daab88e8dab786036ed5a7fad02e012ab57e376e0a0b4b29e83b95ea9b5e7d89df762f5f25119b83e00706ecaccb22cfbacee98d74889
+  languageName: node
+  linkType: hard
+
 "anymatch@npm:^3.0.3, anymatch@npm:^3.1.3, anymatch@npm:~3.1.2":
   version: 3.1.3
   resolution: "anymatch@npm:3.1.3"
@@ -12884,6 +13027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"arg@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "arg@npm:5.0.2"
+  checksum: 10c0/ccaf86f4e05d342af6666c569f844bec426595c567d32a8289715087825c2ca7edd8a3d204e4d2fb2aa4602e09a57d0c13ea8c9eea75aac3dbb4af5514e6800e
+  languageName: node
+  linkType: hard
+
 "argparse@npm:^1.0.7":
   version: 1.0.10
   resolution: "argparse@npm:1.0.10"
@@ -13649,6 +13799,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelcase-css@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "camelcase-css@npm:2.0.1"
+  checksum: 10c0/1a1a3137e8a781e6cbeaeab75634c60ffd8e27850de410c162cce222ea331cd1ba5364e8fb21c95e5ca76f52ac34b81a090925ca00a87221355746d049c6e273
+  languageName: node
+  linkType: hard
+
 "camelcase-keys@npm:6.2.2":
   version: 6.2.2
   resolution: "camelcase-keys@npm:6.2.2"
@@ -13898,7 +14055,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.6.0":
+"chokidar@npm:^3.5.3, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -14212,6 +14369,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "commander@npm:4.1.1"
+  checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab
+  languageName: node
+  linkType: hard
+
 "commander@npm:^6.2.1":
   version: 6.2.1
   resolution: "commander@npm:6.2.1"
@@ -15389,6 +15553,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"didyoumean@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "didyoumean@npm:1.2.2"
+  checksum: 10c0/95d0b53d23b851aacff56dfadb7ecfedce49da4232233baecfeecb7710248c4aa03f0aa8995062f0acafaf925adf8536bd7044a2e68316fd7d411477599bc27b
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.6.3":
   version: 29.6.3
   resolution: "diff-sequences@npm:29.6.3"
@@ -15426,6 +15597,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dlv@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "dlv@npm:1.1.3"
+  checksum: 10c0/03eb4e769f19a027fd5b43b59e8a05e3fd2100ac239ebb0bf9a745de35d449e2f25cfaf3aa3934664551d72856f4ae8b7822016ce5c42c2d27c18ae79429ec42
+  languageName: node
+  linkType: hard
+
 "dnd-core@npm:^16.0.1":
   version: 16.0.1
   resolution: "dnd-core@npm:16.0.1"
@@ -19144,7 +19322,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.17.1, jiti@npm:^1.20.0":
+"jiti@npm:^1.17.1, jiti@npm:^1.20.0, jiti@npm:^1.21.0":
   version: 1.21.6
   resolution: "jiti@npm:1.21.6"
   bin:
@@ -19664,13 +19842,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:2.1.0, lilconfig@npm:^2.0.6":
+"lilconfig@npm:2.1.0, lilconfig@npm:^2.0.6, lilconfig@npm:^2.1.0":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
   checksum: 10c0/64645641aa8d274c99338e130554abd6a0190533c0d9eb2ce7ebfaf2e05c7d9961f3ffe2bfa39efd3b60c521ba3dd24fa236fe2775fc38501bf82bf49d4678b8
   languageName: node
   linkType: hard
 
+"lilconfig@npm:^3.0.0":
+  version: 3.1.2
+  resolution: "lilconfig@npm:3.1.2"
+  checksum: 10c0/f059630b1a9bddaeba83059db00c672b64dc14074e9f232adce32b38ca1b5686ab737eb665c5ba3c32f147f0002b4bee7311ad0386a9b98547b5623e87071fbe
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:^1.1.6":
   version: 1.2.4
   resolution: "lines-and-columns@npm:1.2.4"
@@ -21088,6 +21273,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mz@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "mz@npm:2.7.0"
+  dependencies:
+    any-promise: "npm:^1.0.0"
+    object-assign: "npm:^4.0.1"
+    thenify-all: "npm:^1.0.0"
+  checksum: 10c0/103114e93f87362f0b56ab5b2e7245051ad0276b646e3902c98397d18bb8f4a77f2ea4a2c9d3ad516034ea3a56553b60d3f5f78220001ca4c404bd711bd0af39
+  languageName: node
+  linkType: hard
+
 "nano-css@npm:^5.3.1, nano-css@npm:^5.6.1":
   version: 5.6.2
   resolution: "nano-css@npm:5.6.2"
@@ -21379,13 +21575,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:*, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
+"object-assign@npm:*, object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: 10c0/1f4df9945120325d041ccf7b86f31e8bcc14e73d29171e37a7903050e96b81323784ec59f93f102ec635bcf6fa8034ba3ea0a8c7e69fa202b87ae3b6cec5a414
   languageName: node
   linkType: hard
 
+"object-hash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "object-hash@npm:3.0.0"
+  checksum: 10c0/a06844537107b960c1c8b96cd2ac8592a265186bfa0f6ccafe0d34eabdb526f6fa81da1f37c43df7ed13b12a4ae3457a16071603bcd39d8beddb5f08c37b0f47
+  languageName: node
+  linkType: hard
+
 "object-inspect@npm:^1.12.3, object-inspect@npm:^1.13.1":
   version: 1.13.2
   resolution: "object-inspect@npm:1.13.2"
@@ -21990,6 +22193,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pify@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "pify@npm:2.3.0"
+  checksum: 10c0/551ff8ab830b1052633f59cb8adc9ae8407a436e06b4a9718bcb27dc5844b83d535c3a8512b388b6062af65a98c49bdc0dd523d8b2617b188f7c8fee457158dc
+  languageName: node
+  linkType: hard
+
 "pify@npm:^3.0.0":
   version: 3.0.0
   resolution: "pify@npm:3.0.0"
@@ -22004,7 +22214,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pirates@npm:^4.0.4, pirates@npm:^4.0.6":
+"pirates@npm:^4.0.1, pirates@npm:^4.0.4, pirates@npm:^4.0.6":
   version: 4.0.6
   resolution: "pirates@npm:4.0.6"
   checksum: 10c0/00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36
@@ -22143,6 +22353,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-import@npm:^15.1.0":
+  version: 15.1.0
+  resolution: "postcss-import@npm:15.1.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.0.0"
+    read-cache: "npm:^1.0.0"
+    resolve: "npm:^1.1.7"
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 10c0/518aee5c83ea6940e890b0be675a2588db68b2582319f48c3b4e06535a50ea6ee45f7e63e4309f8754473245c47a0372632378d1d73d901310f295a92f26f17b
+  languageName: node
+  linkType: hard
+
+"postcss-js@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "postcss-js@npm:4.0.1"
+  dependencies:
+    camelcase-css: "npm:^2.0.1"
+  peerDependencies:
+    postcss: ^8.4.21
+  checksum: 10c0/af35d55cb873b0797d3b42529514f5318f447b134541844285c9ac31a17497297eb72296902967911bb737a75163441695737300ce2794e3bd8c70c13a3b106e
+  languageName: node
+  linkType: hard
+
+"postcss-load-config@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "postcss-load-config@npm:4.0.2"
+  dependencies:
+    lilconfig: "npm:^3.0.0"
+    yaml: "npm:^2.3.4"
+  peerDependencies:
+    postcss: ">=8.0.9"
+    ts-node: ">=9.0.0"
+  peerDependenciesMeta:
+    postcss:
+      optional: true
+    ts-node:
+      optional: true
+  checksum: 10c0/3d7939acb3570b0e4b4740e483d6e555a3e2de815219cb8a3c8fc03f575a6bde667443aa93369c0be390af845cb84471bf623e24af833260de3a105b78d42519
+  languageName: node
+  linkType: hard
+
 "postcss-loader@npm:^7.2.4":
   version: 7.3.4
   resolution: "postcss-loader@npm:7.3.4"
@@ -22201,6 +22453,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-nested@npm:^6.0.1":
+  version: 6.2.0
+  resolution: "postcss-nested@npm:6.2.0"
+  dependencies:
+    postcss-selector-parser: "npm:^6.1.1"
+  peerDependencies:
+    postcss: ^8.2.14
+  checksum: 10c0/7f9c3f2d764191a39364cbdcec350f26a312431a569c9ef17408021424726b0d67995ff5288405e3724bb7152a4c92f73c027e580ec91e798800ed3c52e2bc6e
+  languageName: node
+  linkType: hard
+
+"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.1.1":
+  version: 6.1.2
+  resolution: "postcss-selector-parser@npm:6.1.2"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/523196a6bd8cf660bdf537ad95abd79e546d54180f9afb165a4ab3e651ac705d0f8b8ce6b3164fb9e3279ce482c5f751a69eb2d3a1e8eb0fd5e82294fb3ef13e
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
   version: 6.1.1
   resolution: "postcss-selector-parser@npm:6.1.1"
@@ -22211,7 +22484,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
+"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 10c0/f4142a4f56565f77c1831168e04e3effd9ffcc5aebaf0f538eee4b2d465adfd4b85a44257bb48418202a63806a7da7fe9f56c330aebb3cac898e46b4cbf49161
@@ -22229,6 +22502,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.23":
+  version: 8.4.41
+  resolution: "postcss@npm:8.4.41"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.1"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/c1828fc59e7ec1a3bf52b3a42f615dba53c67960ed82a81df6441b485fe43c20aba7f4e7c55425762fd99c594ecabbaaba8cf5b30fd79dfec5b52a9f63a2d690
+  languageName: node
+  linkType: hard
+
 "potpack@npm:^1.0.2":
   version: 1.0.2
   resolution: "potpack@npm:1.0.2"
@@ -23390,6 +23674,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"read-cache@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "read-cache@npm:1.0.0"
+  dependencies:
+    pify: "npm:^2.3.0"
+  checksum: 10c0/90cb2750213c7dd7c80cb420654344a311fdec12944e81eb912cd82f1bc92aea21885fa6ce442e3336d9fccd663b8a7a19c46d9698e6ca55620848ab932da814
+  languageName: node
+  linkType: hard
+
 "read-env@npm:2.0.0":
   version: 2.0.0
   resolution: "read-env@npm:2.0.0"
@@ -23770,14 +24063,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resium@npm:1.18.1":
-  version: 1.18.1
-  resolution: "resium@npm:1.18.1"
+"resium@npm:1.18.2":
+  version: 1.18.2
+  resolution: "resium@npm:1.18.2"
   peerDependencies:
     cesium: 1.x
     react: ">=18.2.0"
     react-dom: ">=18.2.0"
-  checksum: 10c0/52e29361e3f59469125293d203e8c68baea499338c5bb93d642225817ddafdb30d8874baabbf124a9fea6f3daa8ac13bec71db6d466d5d2c90d103ee1d78ea5f
+  checksum: 10c0/6130d8cc0cef91ad2d33d69aee18ca0a202e01bfaa44783ae6ceaed9a2b5735b0cc41464767f2ebf53f206aa5a394c562c871a6704c1bb0d0cb5de5a299a68ee
   languageName: node
   linkType: hard
 
@@ -23833,7 +24126,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4":
+"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.2, resolve@npm:^1.22.4":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -23859,7 +24152,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -25207,6 +25500,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sucrase@npm:^3.32.0":
+  version: 3.35.0
+  resolution: "sucrase@npm:3.35.0"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.2"
+    commander: "npm:^4.0.0"
+    glob: "npm:^10.3.10"
+    lines-and-columns: "npm:^1.1.6"
+    mz: "npm:^2.7.0"
+    pirates: "npm:^4.0.1"
+    ts-interface-checker: "npm:^0.1.9"
+  bin:
+    sucrase: bin/sucrase
+    sucrase-node: bin/sucrase-node
+  checksum: 10c0/ac85f3359d2c2ecbf5febca6a24ae9bf96c931f05fde533c22a94f59c6a74895e5d5f0e871878dfd59c2697a75ebb04e4b2224ef0bfc24ca1210735c2ec191ef
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -25301,6 +25612,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:2.5.2":
+  version: 2.5.2
+  resolution: "tailwind-merge@npm:2.5.2"
+  checksum: 10c0/e43a9a468f7ba4ed5b4a399558d96d6270a3d8131dca111cccc803e71cc23885060d18d721f312a24fff0a75c567dbb30b2a87c18aba25eb4255df197d8170ab
+  languageName: node
+  linkType: hard
+
+"tailwindcss-animate@npm:1.0.7":
+  version: 1.0.7
+  resolution: "tailwindcss-animate@npm:1.0.7"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10c0/ec7dbd1631076b97d66a1fbaaa06e0725fccfa63119221e8d87a997b02dcede98ad88bb1ef6665b968f5d260fcefb10592e0299ca70208d365b37761edf5e19a
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:3.4.10":
+  version: 3.4.10
+  resolution: "tailwindcss@npm:3.4.10"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    arg: "npm:^5.0.2"
+    chokidar: "npm:^3.5.3"
+    didyoumean: "npm:^1.2.2"
+    dlv: "npm:^1.1.3"
+    fast-glob: "npm:^3.3.0"
+    glob-parent: "npm:^6.0.2"
+    is-glob: "npm:^4.0.3"
+    jiti: "npm:^1.21.0"
+    lilconfig: "npm:^2.1.0"
+    micromatch: "npm:^4.0.5"
+    normalize-path: "npm:^3.0.0"
+    object-hash: "npm:^3.0.0"
+    picocolors: "npm:^1.0.0"
+    postcss: "npm:^8.4.23"
+    postcss-import: "npm:^15.1.0"
+    postcss-js: "npm:^4.0.1"
+    postcss-load-config: "npm:^4.0.1"
+    postcss-nested: "npm:^6.0.1"
+    postcss-selector-parser: "npm:^6.0.11"
+    resolve: "npm:^1.22.2"
+    sucrase: "npm:^3.32.0"
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 10c0/5212f4d90f21fc21b87008570a37de46af9c955a7c197d0f0e1d888edd5ef597f1f41194bec6b1fdc8a21e9460089d370bf728ce39b13abe93324a768b7043fd
+  languageName: node
+  linkType: hard
+
 "tar-fs@npm:^2.1.1":
   version: 2.1.1
   resolution: "tar-fs@npm:2.1.1"
@@ -25414,6 +25774,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thenify-all@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "thenify-all@npm:1.6.0"
+  dependencies:
+    thenify: "npm:>= 3.1.0 < 4"
+  checksum: 10c0/9b896a22735e8122754fe70f1d65f7ee691c1d70b1f116fda04fea103d0f9b356e3676cb789506e3909ae0486a79a476e4914b0f92472c2e093d206aed4b7d6b
+  languageName: node
+  linkType: hard
+
+"thenify@npm:>= 3.1.0 < 4":
+  version: 3.3.1
+  resolution: "thenify@npm:3.3.1"
+  dependencies:
+    any-promise: "npm:^1.0.0"
+  checksum: 10c0/f375aeb2b05c100a456a30bc3ed07ef03a39cbdefe02e0403fb714b8c7e57eeaad1a2f5c4ecfb9ce554ce3db9c2b024eba144843cd9e344566d9fcee73b04767
+  languageName: node
+  linkType: hard
+
 "threads@npm:1.7.0":
   version: 1.7.0
   resolution: "threads@npm:1.7.0"
@@ -25684,6 +26062,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-interface-checker@npm:^0.1.9":
+  version: 0.1.13
+  resolution: "ts-interface-checker@npm:0.1.13"
+  checksum: 10c0/232509f1b84192d07b81d1e9b9677088e590ac1303436da1e92b296e9be8e31ea042e3e1fd3d29b1742ad2c959e95afe30f63117b8f1bc3a3850070a5142fea7
+  languageName: node
+  linkType: hard
+
 "ts-invariant@npm:^0.10.3":
   version: 0.10.3
   resolution: "ts-invariant@npm:0.10.3"
@@ -27378,7 +27763,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.2.2":
+"yaml@npm:^2.2.2, yaml@npm:^2.3.4":
   version: 2.5.0
   resolution: "yaml@npm:2.5.0"
   bin:

From a930c0a58143d1c75ba70b5b110c94285eb038e4 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Fri, 23 Aug 2024 15:06:47 +0800
Subject: [PATCH 07/23] fix(web): assets upload & sort & size unit (#1111)

---
 web/src/beta/features/AssetsManager/hooks.ts  |  8 +++----
 .../AssetsManager/item/AssetListItem.tsx      | 22 ++++++++++++++++++-
 .../reearth-ui/components/Selector/index.tsx  |  4 ++--
 web/src/beta/ui/fields/AssetField/index.tsx   |  9 --------
 web/src/services/api/assetsApi.ts             |  8 +++++--
 5 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/web/src/beta/features/AssetsManager/hooks.ts b/web/src/beta/features/AssetsManager/hooks.ts
index b4f00bce1..12e022104 100644
--- a/web/src/beta/features/AssetsManager/hooks.ts
+++ b/web/src/beta/features/AssetsManager/hooks.ts
@@ -38,7 +38,7 @@ export default ({
   // sort
   const [sort, setSort] = useState<{ type?: SortType; reverse?: boolean }>({
     type: "date",
-    reverse: false,
+    reverse: true,
   });
   const t = useT();
 
@@ -46,7 +46,7 @@ export default ({
     if (!sort) return undefined;
     switch (sort.type) {
       case "date":
-        return sort.reverse ? "date-reverse" : "date";
+        return sort.reverse ? "date" : "date-reverse";
       case "name":
         return sort.reverse ? "name-reverse" : "name";
       case "size":
@@ -71,10 +71,10 @@ export default ({
   const handleSortChange = useCallback((value: string) => {
     switch (value) {
       case "date":
-        setSort({ type: "date", reverse: false });
+        setSort({ type: "date", reverse: true });
         break;
       case "date-reverse":
-        setSort({ type: "date", reverse: true });
+        setSort({ type: "date", reverse: false });
         break;
       case "name":
         setSort({ type: "name", reverse: false });
diff --git a/web/src/beta/features/AssetsManager/item/AssetListItem.tsx b/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
index 47aa7905a..1f5ad02ab 100644
--- a/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
+++ b/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
@@ -34,6 +34,8 @@ const AssetListItem: FC<AssetItemProps> = ({ asset, selectedAssetIds, onSelect }
     [asset.createdAt],
   );
 
+  const formattedSize = useMemo(() => formatBytes(asset.size), [asset.size]);
+
   return (
     <Wrapper selected={selected} title={asset.name} onClick={handleAssetClick}>
       <Thumbnail>
@@ -50,7 +52,7 @@ const AssetListItem: FC<AssetItemProps> = ({ asset, selectedAssetIds, onSelect }
         <Typography size="body">{formattedDate}</Typography>
       </Col>
       <Col width={30}>
-        <Typography size="body">{asset.size}</Typography>
+        <Typography size="body">{formattedSize}</Typography>
       </Col>
     </Wrapper>
   );
@@ -98,3 +100,21 @@ const Col = styled("div")<{ width: number }>(({ width }) => ({
   flexGrow: 0,
   flexShrink: 0,
 }));
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+
+  let formattedValue;
+
+  if (i === 0) {
+    formattedValue = Math.floor(value).toLocaleString();
+  } else {
+    formattedValue = value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+
+  return `${formattedValue} ${sizes[i]}`;
+}
diff --git a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
index 4a955d43a..fd7d52081 100644
--- a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
@@ -79,9 +79,9 @@ export const Selector: FC<SelectorProps> = ({
         onChange?.(newSelectedArr);
       }
     } else {
-      if (value === selectedValue) setSelectedValue(undefined);
-      else setSelectedValue(value);
       setIsOpen(!isOpen);
+      if (value === selectedValue) return;
+      setSelectedValue(value);
       onChange?.(value);
     }
   };
diff --git a/web/src/beta/ui/fields/AssetField/index.tsx b/web/src/beta/ui/fields/AssetField/index.tsx
index c8315fcbc..92d98b494 100644
--- a/web/src/beta/ui/fields/AssetField/index.tsx
+++ b/web/src/beta/ui/fields/AssetField/index.tsx
@@ -104,15 +104,6 @@ const AssetField: FC<AssetFieldProps> = ({
           onAssetSelect={handleChange}
           assetsTypes={assetsTypes}
         />
-        // <AssetModal
-        //   open={open}
-        //   onModalClose={handleModalClose}
-        //   assetType={entityType}
-        //   currentWorkspace={currentWorkspace}
-        //   currentValue={currentValue}
-        //   fileFormat={fileFormat}
-        //   onSelect={handleChange}
-        // />
       )}
     </CommonField>
   );
diff --git a/web/src/services/api/assetsApi.ts b/web/src/services/api/assetsApi.ts
index 1e5ee3d6f..e854b9fdc 100644
--- a/web/src/services/api/assetsApi.ts
+++ b/web/src/services/api/assetsApi.ts
@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@apollo/client";
+import { useApolloClient, useMutation, useQuery } from "@apollo/client";
 import { useCallback, useMemo } from "react";
 
 import { CreateAssetInput, GetAssetsQueryVariables, GetAssetsQuery } from "@reearth/services/gql";
@@ -11,6 +11,7 @@ export type AssetNodes = NonNullable<GetAssetsQuery["assets"]["nodes"][number]>[
 export default () => {
   const t = useT();
   const [, setNotification] = useNotification();
+  const apolloCache = useApolloClient().cache;
 
   const useAssetsQuery = useCallback((input: GetAssetsQueryVariables) => {
     const { data, loading, networkStatus, fetchMore, ...rest } = useQuery(GET_ASSETS, {
@@ -56,9 +57,12 @@ export default () => {
           text: t("Successfully added one or more assets."),
         });
       }
+
+      apolloCache.evict({ fieldName: "assets" });
+
       return { data: results, result: "success" };
     },
-    [createAssetMutation, t, setNotification],
+    [apolloCache, createAssetMutation, t, setNotification],
   );
 
   const [removeAssetMutation] = useMutation(REMOVE_ASSET, {

From 84caa93091e8c1289614207c3f72af3783cd64a0 Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Fri, 23 Aug 2024 10:54:17 +0300
Subject: [PATCH 08/23] chore(web): remember the open status of Feature
 Inspector Groups (#1109)

---
 .../LayerInspector/FeatureInspector/index.tsx | 43 +++++++++++++++++--
 .../InspectorPanel/SceneSettings/index.tsx    |  4 +-
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
index 540e89d4e..30ecaac60 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
@@ -46,6 +46,37 @@ const FeatureData: FC<Props> = ({
   const theme = useTheme();
   const [fields, setFields] = useState<FieldProp[]>([]);
 
+  // Initialize collapsed state from localStorage
+  const initialCollapsedStates = useMemo(() => {
+    const storedStates: Record<string, boolean> = {};
+    ["customProperties", "geometry", "properties"].forEach(id => {
+      storedStates[id] =
+        localStorage.getItem(`reearth-visualizer-feature-${id}-collapsed`) === "true";
+    });
+    return storedStates;
+  }, []);
+
+  const [collapsedStates, setCollapsedStates] =
+    useState<Record<string, boolean>>(initialCollapsedStates);
+
+  const saveCollapseState = useCallback((storageId: string, state: boolean) => {
+    localStorage.setItem(
+      `reearth-visualizer-feature-${storageId}-collapsed`,
+      JSON.stringify(state),
+    );
+  }, []);
+
+  const handleCollapse = useCallback(
+    (storageId: string, state: boolean) => {
+      saveCollapseState(storageId, state);
+      setCollapsedStates(prevState => ({
+        ...prevState,
+        [storageId]: state,
+      }));
+    },
+    [saveCollapseState],
+  );
+
   useEffect(() => {
     if (!layer?.sketch?.customPropertySchema) return;
     const entries = Object.entries<string>(layer.sketch.customPropertySchema);
@@ -107,7 +138,9 @@ const FeatureData: FC<Props> = ({
           title={t("Custom Properties")}
           size="small"
           background={theme.relative.dim}
-          headerBg={theme.relative.dim}>
+          headerBg={theme.relative.dim}
+          collapsed={collapsedStates.customProperties}
+          onCollapse={state => handleCollapse("customProperties", state)}>
           <FieldsWrapper>
             {fields.map(f => (
               <FieldComponent field={f} key={f.id} setFields={setFields} />
@@ -133,7 +166,9 @@ const FeatureData: FC<Props> = ({
         title={t("Geometry")}
         size="small"
         background={theme.relative.dim}
-        headerBg={theme.relative.dim}>
+        headerBg={theme.relative.dim}
+        collapsed={collapsedStates.geometry}
+        onCollapse={state => handleCollapse("geometry", state)}>
         <ValueWrapper>
           <JsonView src={selectedFeature?.geometry} theme="vscode" dark style={jsonStyle} />
         </ValueWrapper>
@@ -142,7 +177,9 @@ const FeatureData: FC<Props> = ({
         title={t("Properties")}
         size="small"
         background={theme.relative.dim}
-        headerBg={theme.relative.dim}>
+        headerBg={theme.relative.dim}
+        collapsed={collapsedStates.properties}
+        onCollapse={state => handleCollapse("properties", state)}>
         <ValueWrapper>
           <JsonView src={selectedFeature?.properties} theme="vscode" dark style={jsonStyle} />
         </ValueWrapper>
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
index 809d8eb2e..213aa229f 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
@@ -20,8 +20,8 @@ const Settings: FC<Props> = ({ propertyId, propertyItems, onFlyTo }) => {
 
   return (
     <Wrapper>
-      {visibleItems?.map((i, idx) => (
-        <Collapse key={idx} title={i.title ?? t("Settings")} size="small">
+      {visibleItems?.map(i => (
+        <Collapse key={i.schemaGroup} title={i.title ?? t("Settings")} size="small">
           <PropertyItem key={i.id} propertyId={propertyId} item={i} onFlyTo={onFlyTo} />
         </Collapse>
       ))}

From 6bd28ffc3d4065abb8d34c4642377748307decc9 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 26 Aug 2024 16:34:00 +0800
Subject: [PATCH 09/23] refactor(web): layer style container (#1113)

---
 .../Map/LayerStylePanel/LayerStyleItem.tsx    |  85 +++++++++++
 .../Editor/Map/LayerStylePanel/index.tsx      | 141 +++++++++++-------
 web/src/beta/features/Editor/Map/context.tsx  |   2 +-
 .../features/Editor/hooks/useLayerStyles.ts   |   5 +-
 .../components/IconButton/index.tsx           |  15 +-
 web/src/services/i18n/translations/en.yml     |   3 +-
 web/src/services/i18n/translations/ja.yml     |   3 +-
 7 files changed, 185 insertions(+), 69 deletions(-)
 create mode 100644 web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx

diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
new file mode 100644
index 000000000..2fdfedfae
--- /dev/null
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
@@ -0,0 +1,85 @@
+import { FC, MouseEvent, useCallback, useState } from "react";
+
+import { TextInput } from "@reearth/beta/lib/reearth-ui";
+import { EntryItem } from "@reearth/beta/ui/components";
+import { styled } from "@reearth/services/theme";
+
+import { LayerStyleNameUpdateProps } from "../../hooks/useLayerStyles";
+
+type LayerStyleItemProps = {
+  id?: string;
+  name: string;
+  selected?: boolean;
+  onSelect?: () => void;
+  onDelete?: () => void;
+  onOpenChange?: (isOpen: boolean) => void;
+  onLayerStyleNameUpdate: (inp: LayerStyleNameUpdateProps) => void;
+};
+
+const LayerStyleItem: FC<LayerStyleItemProps> = ({
+  id,
+  name,
+  selected,
+  onSelect,
+  onDelete,
+  onLayerStyleNameUpdate,
+}) => {
+  const [localName, setLocalName] = useState(name);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleNameUpdate = useCallback(() => {
+    if (id && localName !== name) {
+      onLayerStyleNameUpdate({ styleId: id, name: localName });
+    }
+    setIsEditing(false);
+  }, [id, name, localName, onLayerStyleNameUpdate]);
+
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      onSelect?.();
+    },
+    [onSelect],
+  );
+
+  return (
+    <EntryItem
+      title={
+        isEditing ? (
+          <TextInput
+            size="small"
+            extendWidth
+            autoFocus
+            value={localName}
+            onChange={setLocalName}
+            onBlur={handleNameUpdate}
+          />
+        ) : (
+          <TitleWrapper onDoubleClick={() => setIsEditing(true)}>{localName}</TitleWrapper>
+        )
+      }
+      highlighted={selected}
+      onClick={handleClick}
+      optionsMenu={[
+        {
+          id: "delete",
+          title: "Delete",
+          icon: "trash" as const,
+          onClick: onDelete,
+        },
+      ]}
+    />
+  );
+};
+
+const TitleWrapper = styled("div")(({ theme }) => ({
+  padding: `0 ${theme.spacing.smallest + 1}px`,
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+}));
+
+export default LayerStyleItem;
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
index b71ef2c5b..546b48ab0 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
@@ -1,22 +1,21 @@
 import { FC, useCallback } from "react";
 
-import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
-import { Button } from "@reearth/beta/lib/reearth-ui";
+import { IconButton } from "@reearth/beta/lib/reearth-ui";
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
-import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 import { useMapPage } from "../context";
 
-import LayerStyleCard from "./LayerStyleCard";
 import LayerStyleEditor from "./LayerStyleEditor";
+import LayerStyleItem from "./LayerStyleItem";
 
 type Props = Pick<PanelProps, "showCollapseArea" | "areaRef">;
 
 const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
   const {
     sceneId,
+    selectedLayer,
     layerStyles,
     selectedLayerStyleId,
     handleLayerStyleAdd,
@@ -24,6 +23,7 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     handleLayerStyleNameUpdate,
     handleLayerStyleSelect,
     handleLayerStyleValueUpdate,
+    handleLayerConfigUpdate,
   } = useMapPage();
 
   const t = useT();
@@ -33,13 +33,22 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
   }, [layerStyles?.length, t, handleLayerStyleAdd]);
 
   const handleSelectLayerStyle = useCallback(
-    (layerStyle?: LayerStyle) => {
-      if (!layerStyle) return;
-      handleLayerStyleSelect(layerStyle.id);
+    (id?: string) => {
+      handleLayerStyleSelect(id);
     },
     [handleLayerStyleSelect],
   );
 
+  const handleApplyLayerStyle = useCallback(() => {
+    if (!selectedLayer?.layer?.id || !selectedLayerStyleId) return;
+    handleLayerConfigUpdate?.({
+      layerId: selectedLayer.layer.id,
+      config: {
+        layerStyleId: selectedLayerStyleId,
+      },
+    });
+  }, [selectedLayer, selectedLayerStyleId, handleLayerConfigUpdate]);
+
   return (
     <Panel
       title={t("Layer Style")}
@@ -48,70 +57,86 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       storageId="editor-map-scene-panel"
       showCollapseArea={showCollapseArea}
       areaRef={areaRef}>
-      <LayerStyleContainer>
-        <Button
-          icon="plus"
-          extendWidth
-          size="small"
-          onClick={handleLayerStyleAddition}
-          title={t("New Style")}
-        />
-        <CatalogListWrapper editorOpened={!!selectedLayerStyleId}>
-          {layerStyles?.map(layerStyle => (
-            <LayerStyleCard
-              id={layerStyle.id}
-              key={layerStyle.id}
-              name={layerStyle.name}
-              onLayerStyleNameUpdate={handleLayerStyleNameUpdate}
-              selected={layerStyle.id === selectedLayerStyleId}
-              actionContent={
-                <PopoverMenuContent
-                  size="sm"
-                  items={[
-                    {
-                      name: t("Delete"),
-                      icon: "bin",
-                      onClick: (e?: React.MouseEvent) => {
-                        e?.stopPropagation();
-                        handleLayerStyleDelete(layerStyle.id);
-                      },
-                    },
-                  ]}
-                />
-              }
-              onSelect={() => handleSelectLayerStyle(layerStyle)}
-            />
-          ))}
-        </CatalogListWrapper>
-      </LayerStyleContainer>
-      {selectedLayerStyleId && (
-        <LayerStyleEditor
-          selectedLayerStyleId={selectedLayerStyleId}
-          sceneId={sceneId}
-          onLayerStyleValueUpdate={handleLayerStyleValueUpdate}
-        />
-      )}
+      <LayerStyleManager onClick={() => handleSelectLayerStyle(undefined)}>
+        <ActionsWrapper>
+          <IconButton
+            icon="plus"
+            size="large"
+            onClick={handleLayerStyleAddition}
+            stopPropagationOnClick
+          />
+          <IconButton
+            icon="return"
+            size="large"
+            disabled={!selectedLayer || !selectedLayerStyleId}
+            onClick={handleApplyLayerStyle}
+            stopPropagationOnClick
+          />
+        </ActionsWrapper>
+        <StylesWrapper>
+          <StylesGrid>
+            {layerStyles?.map(layerStyle => (
+              <LayerStyleItem
+                id={layerStyle.id}
+                key={layerStyle.id}
+                name={layerStyle.name}
+                onLayerStyleNameUpdate={handleLayerStyleNameUpdate}
+                onSelect={() => handleSelectLayerStyle(layerStyle.id)}
+                onDelete={() => handleLayerStyleDelete(layerStyle.id)}
+                selected={layerStyle.id === selectedLayerStyleId}
+              />
+            ))}
+          </StylesGrid>
+        </StylesWrapper>
+      </LayerStyleManager>
+      <LayerStyleEditorWrapper>
+        {selectedLayerStyleId && (
+          <LayerStyleEditor
+            selectedLayerStyleId={selectedLayerStyleId}
+            sceneId={sceneId}
+            onLayerStyleValueUpdate={handleLayerStyleValueUpdate}
+          />
+        )}
+      </LayerStyleEditorWrapper>
     </Panel>
   );
 };
 
 export default StylesPanel;
 
-const LayerStyleContainer = styled("div")(({ theme }) => ({
+const LayerStyleManager = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  flex: 1,
+  height: "30%",
+  maxHeight: 300,
+  gap: theme.spacing.small,
+}));
+
+const ActionsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.small,
-  marginBottom: theme.spacing.small,
 }));
 
-const CatalogListWrapper = styled("div")<{ editorOpened?: boolean }>(({ theme, editorOpened }) => ({
-  display: "grid",
-  gridTemplateColumns: "repeat(auto-fill, minmax(76px, 1fr))",
-  gridGap: `${theme.spacing.small}px`,
-  justifyContent: "space-between",
-  maxHeight: editorOpened ? "200px" : "auto",
+const StylesWrapper = styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
   overflowY: "auto",
   padding: `${theme.spacing.small}px`,
   background: theme.relative.darker,
   borderRadius: `${theme.radius.normal}px`,
 }));
+
+const StylesGrid = styled("div")(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: `${theme.spacing.small}px`,
+}));
+
+const LayerStyleEditorWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flex: 1,
+  height: "70%",
+  paddingTop: theme.spacing.small,
+}));
diff --git a/web/src/beta/features/Editor/Map/context.tsx b/web/src/beta/features/Editor/Map/context.tsx
index d6d40d009..f371a9879 100644
--- a/web/src/beta/features/Editor/Map/context.tsx
+++ b/web/src/beta/features/Editor/Map/context.tsx
@@ -56,7 +56,7 @@ export interface MapPageContextType {
   handleLayerStyleAdd: (inp: LayerStyleAddProps) => void;
   handleLayerStyleDelete: (id: string) => void;
   handleLayerStyleNameUpdate: (inp: LayerStyleNameUpdateProps) => void;
-  handleLayerStyleSelect: (id: string) => void;
+  handleLayerStyleSelect: (id: string | undefined) => void;
 }
 
 const MapPageContext = createContext<MapPageContextType | undefined>(undefined);
diff --git a/web/src/beta/features/Editor/hooks/useLayerStyles.ts b/web/src/beta/features/Editor/hooks/useLayerStyles.ts
index 5b416fd7b..d7c510746 100644
--- a/web/src/beta/features/Editor/hooks/useLayerStyles.ts
+++ b/web/src/beta/features/Editor/hooks/useLayerStyles.ts
@@ -36,10 +36,7 @@ export default function ({ sceneId }: LayerStyleProps) {
   );
 
   const handleLayerStyleSelect = useCallback(
-    (layerId: string | undefined) =>
-      setSelectedLayerStyleId(prevId =>
-        prevId === layerId || layerId === undefined ? undefined : layerId,
-      ),
+    (layerId: string | undefined) => setSelectedLayerStyleId(layerId),
     [setSelectedLayerStyleId],
   );
 
diff --git a/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx b/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
index c99fdea41..1c32aae7b 100644
--- a/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
@@ -1,4 +1,4 @@
-import { FC, MouseEvent } from "react";
+import { FC, MouseEvent, useCallback } from "react";
 
 import { styled } from "@reearth/services/theme";
 
@@ -12,6 +12,7 @@ export type IconButtonProps = {
   disabled?: boolean;
   className?: string;
   iconRotate?: string;
+  stopPropagationOnClick?: boolean;
   onClick?: (e: MouseEvent) => void;
 };
 
@@ -23,8 +24,18 @@ export const IconButton: FC<IconButtonProps> = ({
   active,
   className,
   iconRotate,
+  stopPropagationOnClick,
   onClick,
 }) => {
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      if (stopPropagationOnClick) e.stopPropagation();
+      if (disabled) return;
+      onClick?.(e);
+    },
+    [disabled, stopPropagationOnClick, onClick],
+  );
+
   return (
     <StyledButton
       className={className}
@@ -33,7 +44,7 @@ export const IconButton: FC<IconButtonProps> = ({
       size={size}
       active={active}
       iconRotate={iconRotate}
-      onClick={onClick}>
+      onClick={handleClick}>
       <Icon icon={icon} />
     </StyledButton>
   );
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 24dca2fcb..ce62d0d9b 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -124,8 +124,6 @@ Add Layer from Resource: ''
 Add Sketch Layer: ''
 Layers: ''
 Style_: ''
-New Style: ''
-Delete: ''
 Save: ''
 Main: ''
 Tiles: ''
@@ -231,6 +229,7 @@ Installed Plugins: ''
 Uninstall: ''
 Installed: ''
 Install: ''
+Delete: ''
 You are uninstalling the selected plugin. The data used by this plugin may also be deleted.: ''
 Please be sure before uninstalling.: ''
 No description.: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index fed7ab513..06ecdbfe8 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -124,8 +124,6 @@ Add Layer from Resource: リソースからレイヤーを追加
 Add Sketch Layer: スケッチレイヤーを追加
 Layers: レイヤー
 Style_: スタイル_
-New Style: ''
-Delete: 削除
 Save: 保存
 Main: メイン
 Tiles: タイル
@@ -231,6 +229,7 @@ Installed Plugins: ''
 Uninstall: アンインストール
 Installed: インストール済み
 Install: インストール
+Delete: 削除
 You are uninstalling the selected plugin. The data used by this plugin may also be deleted.: 選択中のプラグインをアンインストールします。このプラグインに紐付いたデータも削除されます。よろしいですか？
 Please be sure before uninstalling.: プラグインをアンインストールする前にご確認ください。
 No description.: ''

From f99bcad6b5f6aec061167d3616cc7f569c03298d Mon Sep 17 00:00:00 2001
From: Piyush Chauhan <42397980+pyshx@users.noreply.github.com>
Date: Mon, 26 Aug 2024 14:12:33 +0530
Subject: [PATCH 10/23] feat(server): starred projects query (#1115)

---
 server/e2e/gql_project_test.go                | 117 ++++++++++++++++++
 server/gql/project.graphql                    |   1 +
 server/internal/adapter/gql/generated.go      | 117 ++++++++++++++++++
 server/internal/adapter/gql/loader_project.go |  22 ++++
 server/internal/adapter/gql/resolver_query.go |   4 +
 .../internal/infrastructure/memory/project.go |  22 ++++
 .../internal/infrastructure/mongo/project.go  |  13 ++
 .../infrastructure/mongo/project_test.go      |  52 ++++++++
 server/internal/usecase/interactor/project.go |   4 +
 server/internal/usecase/interfaces/project.go |   1 +
 server/internal/usecase/repo/project.go       |   1 +
 11 files changed, 354 insertions(+)

diff --git a/server/e2e/gql_project_test.go b/server/e2e/gql_project_test.go
index bf258f9b8..157c24cd1 100644
--- a/server/e2e/gql_project_test.go
+++ b/server/e2e/gql_project_test.go
@@ -4,7 +4,9 @@ import (
 	"net/http"
 	"testing"
 
+	"github.com/gavv/httpexpect/v2"
 	"github.com/reearth/reearth/server/internal/app/config"
+	"github.com/stretchr/testify/assert"
 )
 
 func TestCreateProject(t *testing.T) {
@@ -195,3 +197,118 @@ func TestSortByName(t *testing.T) {
 	edges.Element(3).Object().Value("node").Object().Value("name").Equal("B-project")
 	edges.Element(4).Object().Value("node").Object().Value("name").Equal(seedProjectName)
 }
+
+func TestFindStarredByWorkspace(t *testing.T) {
+
+	e := StartServer(t, &config.Config{
+		Origins: []string{"https://example.com"},
+		AuthSrv: config.AuthSrvConfig{
+			Disabled: true,
+		},
+	}, true, baseSeeder)
+	project1ID := createProject(e, "Project 1")
+	project2ID := createProject(e, "Project 2")
+	project3ID := createProject(e, "Project 3")
+	project4ID := createProject(e, "Project 4")
+
+	starProject(e, project1ID)
+	starProject(e, project3ID)
+
+	requestBody := GraphQLRequest{
+		OperationName: "GetStarredProjects",
+		Query: `
+		query GetStarredProjects($teamId: ID!) {
+			starredProjects(teamId: $teamId) {
+				nodes {
+					id
+					name
+					starred
+				}
+				totalCount
+			}
+		}`,
+		Variables: map[string]any{
+			"teamId": wID,
+		},
+	}
+
+	response := e.POST("/api/graphql").
+		WithHeader("Origin", "https://example.com").
+		WithHeader("X-Reearth-Debug-User", uID.String()).
+		WithHeader("Content-Type", "application/json").
+		WithJSON(requestBody).
+		Expect().
+		Status(http.StatusOK).
+		JSON().
+		Object()
+
+	starredProjects := response.Value("data").Object().Value("starredProjects").Object()
+
+	totalCount := starredProjects.Value("totalCount").Raw()
+	assert.Equal(t, float64(2), totalCount, "Expected 2 starred projects")
+
+	nodes := starredProjects.Value("nodes").Array()
+	nodeCount := int(nodes.Length().Raw())
+	assert.Equal(t, 2, nodeCount, "Expected 2 nodes in the response")
+
+	starredProjectsMap := make(map[string]bool)
+	for _, node := range nodes.Iter() {
+		obj := node.Object()
+		id := obj.Value("id").String().Raw()
+		name := obj.Value("name").String().Raw()
+		starred := obj.Value("starred").Boolean().Raw()
+
+		starredProjectsMap[id] = true
+
+		if id == project1ID {
+			assert.Equal(t, "Project 1", name)
+			assert.True(t, starred)
+		} else if id == project3ID {
+			assert.Equal(t, "Project 3", name)
+			assert.True(t, starred)
+		} else {
+			t.Errorf("Unexpected project in starred projects: %s", id)
+		}
+	}
+
+	assert.True(t, starredProjectsMap[project1ID], "Project 1 should be starred")
+	assert.True(t, starredProjectsMap[project3ID], "Project 3 should be starred")
+	assert.False(t, starredProjectsMap[project2ID], "Project 2 should not be starred")
+	assert.False(t, starredProjectsMap[project4ID], "Project 4 should not be starred")
+
+}
+
+func starProject(e *httpexpect.Expect, projectID string) {
+	updateProjectMutation := GraphQLRequest{
+		OperationName: "UpdateProject",
+		Query: `
+		mutation UpdateProject($projectId: ID!, $starred: Boolean!) {
+			updateProject(input: {projectId: $projectId, starred: $starred}) {
+				project {
+					id
+					starred
+				}
+			}
+		}`,
+		Variables: map[string]any{
+			"projectId": projectID,
+			"starred":   true,
+		},
+	}
+
+	response := e.POST("/api/graphql").
+		WithHeader("Origin", "https://example.com").
+		WithHeader("X-Reearth-Debug-User", uID.String()).
+		WithHeader("Content-Type", "application/json").
+		WithJSON(updateProjectMutation).
+		Expect().
+		Status(http.StatusOK).
+		JSON().
+		Object().
+		Value("data").Object().
+		Value("updateProject").Object().
+		Value("project").Object()
+
+	response.ValueEqual("id", projectID).
+		ValueEqual("starred", true)
+}
diff --git a/server/gql/project.graphql b/server/gql/project.graphql
index 5673d3e05..42a224508 100644
--- a/server/gql/project.graphql
+++ b/server/gql/project.graphql
@@ -124,6 +124,7 @@ type ProjectEdge {
 extend type Query{
   projects(teamId: ID!, includeArchived: Boolean, pagination: Pagination, keyword: String, sort: ProjectSort): ProjectConnection!
   checkProjectAlias(alias: String!): ProjectAliasAvailability!
+  starredProjects(teamId: ID!): ProjectConnection!
 }
 
 extend type Mutation {
diff --git a/server/internal/adapter/gql/generated.go b/server/internal/adapter/gql/generated.go
index 8cb40e6b0..ca41d29db 100644
--- a/server/internal/adapter/gql/generated.go
+++ b/server/internal/adapter/gql/generated.go
@@ -1007,6 +1007,7 @@ type ComplexityRoot struct {
 		PropertySchemas   func(childComplexity int, id []gqlmodel.ID) int
 		Scene             func(childComplexity int, projectID gqlmodel.ID) int
 		SearchUser        func(childComplexity int, nameOrEmail string) int
+		StarredProjects   func(childComplexity int, teamID gqlmodel.ID) int
 	}
 
 	Rect struct {
@@ -1686,6 +1687,7 @@ type QueryResolver interface {
 	Plugins(ctx context.Context, id []gqlmodel.ID) ([]*gqlmodel.Plugin, error)
 	Projects(ctx context.Context, teamID gqlmodel.ID, includeArchived *bool, pagination *gqlmodel.Pagination, keyword *string, sort *gqlmodel.ProjectSort) (*gqlmodel.ProjectConnection, error)
 	CheckProjectAlias(ctx context.Context, alias string) (*gqlmodel.ProjectAliasAvailability, error)
+	StarredProjects(ctx context.Context, teamID gqlmodel.ID) (*gqlmodel.ProjectConnection, error)
 	PropertySchema(ctx context.Context, id gqlmodel.ID) (*gqlmodel.PropertySchema, error)
 	PropertySchemas(ctx context.Context, id []gqlmodel.ID) ([]*gqlmodel.PropertySchema, error)
 	Scene(ctx context.Context, projectID gqlmodel.ID) (*gqlmodel.Scene, error)
@@ -6624,6 +6626,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.SearchUser(childComplexity, args["nameOrEmail"].(string)), true
 
+	case "Query.starredProjects":
+		if e.complexity.Query.StarredProjects == nil {
+			break
+		}
+
+		args, err := ec.field_Query_starredProjects_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Query.StarredProjects(childComplexity, args["teamId"].(gqlmodel.ID)), true
+
 	case "Rect.east":
 		if e.complexity.Rect.East == nil {
 			break
@@ -9529,6 +9543,7 @@ type ProjectEdge {
 extend type Query{
   projects(teamId: ID!, includeArchived: Boolean, pagination: Pagination, keyword: String, sort: ProjectSort): ProjectConnection!
   checkProjectAlias(alias: String!): ProjectAliasAvailability!
+  starredProjects(teamId: ID!): ProjectConnection!
 }
 
 extend type Mutation {
@@ -12670,6 +12685,21 @@ func (ec *executionContext) field_Query_searchUser_args(ctx context.Context, raw
 	return args, nil
 }
 
+func (ec *executionContext) field_Query_starredProjects_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 gqlmodel.ID
+	if tmp, ok := rawArgs["teamId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("teamId"))
+		arg0, err = ec.unmarshalNID2githubᚗcomᚋreearthᚋreearthᚋserverᚋinternalᚋadapterᚋgqlᚋgqlmodelᚐID(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["teamId"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Scene_datasetSchemas_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -44779,6 +44809,71 @@ func (ec *executionContext) fieldContext_Query_checkProjectAlias(ctx context.Con
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_starredProjects(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_starredProjects(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().StarredProjects(rctx, fc.Args["teamId"].(gqlmodel.ID))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*gqlmodel.ProjectConnection)
+	fc.Result = res
+	return ec.marshalNProjectConnection2ᚖgithubᚗcomᚋreearthᚋreearthᚋserverᚋinternalᚋadapterᚋgqlᚋgqlmodelᚐProjectConnection(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_starredProjects(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "edges":
+				return ec.fieldContext_ProjectConnection_edges(ctx, field)
+			case "nodes":
+				return ec.fieldContext_ProjectConnection_nodes(ctx, field)
+			case "pageInfo":
+				return ec.fieldContext_ProjectConnection_pageInfo(ctx, field)
+			case "totalCount":
+				return ec.fieldContext_ProjectConnection_totalCount(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ProjectConnection", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query_starredProjects_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query_propertySchema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_propertySchema(ctx, field)
 	if err != nil {
@@ -72201,6 +72296,28 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "starredProjects":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_starredProjects(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "propertySchema":
 			field := field
diff --git a/server/internal/adapter/gql/loader_project.go b/server/internal/adapter/gql/loader_project.go
index 8ee268446..8b0c34080 100644
--- a/server/internal/adapter/gql/loader_project.go
+++ b/server/internal/adapter/gql/loader_project.go
@@ -79,6 +79,28 @@ func (c *ProjectLoader) CheckAlias(ctx context.Context, alias string) (*gqlmodel
 	return &gqlmodel.ProjectAliasAvailability{Alias: alias, Available: ok}, nil
 }
 
+func (c *ProjectLoader) FindStarredByWorkspace(ctx context.Context, wsID gqlmodel.ID) (*gqlmodel.ProjectConnection, error) {
+	tid, err := gqlmodel.ToID[accountdomain.Workspace](wsID)
+	if err != nil {
+		return nil, err
+	}
+
+	res, err := c.usecase.FindStarredByWorkspace(ctx, tid, getOperator(ctx))
+	if err != nil {
+		return nil, err
+	}
+
+	nodes := make([]*gqlmodel.Project, 0, len(res))
+	for _, p := range res {
+		nodes = append(nodes, gqlmodel.ToProject(p))
+	}
+
+	return &gqlmodel.ProjectConnection{
+		Nodes:      nodes,
+		TotalCount: len(nodes),
+	}, nil
+}
+
 // data loaders
 
 type ProjectDataLoader interface {
diff --git a/server/internal/adapter/gql/resolver_query.go b/server/internal/adapter/gql/resolver_query.go
index a7a4a5885..2ed6d9196 100644
--- a/server/internal/adapter/gql/resolver_query.go
+++ b/server/internal/adapter/gql/resolver_query.go
@@ -255,3 +255,7 @@ func (r *queryResolver) SearchUser(ctx context.Context, nameOrEmail string) (*gq
 func (r *queryResolver) CheckProjectAlias(ctx context.Context, alias string) (*gqlmodel.ProjectAliasAvailability, error) {
 	return loaders(ctx).Project.CheckAlias(ctx, alias)
 }
+
+func (r *queryResolver) StarredProjects(ctx context.Context, teamId gqlmodel.ID) (*gqlmodel.ProjectConnection, error) {
+	return loaders(ctx).Project.FindStarredByWorkspace(ctx, teamId)
+}
diff --git a/server/internal/infrastructure/memory/project.go b/server/internal/infrastructure/memory/project.go
index b4da73f16..13688864f 100644
--- a/server/internal/infrastructure/memory/project.go
+++ b/server/internal/infrastructure/memory/project.go
@@ -83,6 +83,28 @@ func (r *Project) FindByWorkspace(ctx context.Context, id accountdomain.Workspac
 	), nil
 }
 
+func (r *Project) FindStarredByWorkspace(ctx context.Context, id accountdomain.WorkspaceID) ([]*project.Project, error) {
+	r.lock.Lock()
+	defer r.lock.Unlock()
+
+	if !r.f.CanRead(id) {
+		return nil, nil
+	}
+
+	var result []*project.Project
+	for _, p := range r.data {
+		if p.Workspace() == id && p.Starred() {
+			result = append(result, p)
+		}
+	}
+
+	sort.Slice(result, func(i, j int) bool {
+		return result[i].UpdatedAt().After(result[j].UpdatedAt())
+	})
+
+	return result, nil
+}
+
 func (r *Project) FindIDsByWorkspace(ctx context.Context, id accountdomain.WorkspaceID) (res []project.ID, _ error) {
 	r.lock.Lock()
 	defer r.lock.Unlock()
diff --git a/server/internal/infrastructure/mongo/project.go b/server/internal/infrastructure/mongo/project.go
index 6822048b0..cda562ed0 100644
--- a/server/internal/infrastructure/mongo/project.go
+++ b/server/internal/infrastructure/mongo/project.go
@@ -96,6 +96,19 @@ func (r *Project) FindByWorkspace(ctx context.Context, id accountdomain.Workspac
 	return r.paginate(ctx, filter, uFilter.Sort, uFilter.Pagination)
 }
 
+func (r *Project) FindStarredByWorkspace(ctx context.Context, id accountdomain.WorkspaceID) ([]*project.Project, error) {
+	if !r.f.CanRead(id) {
+		return nil, repo.ErrOperationDenied
+	}
+
+	filter := bson.M{
+		"team":    id.String(),
+		"starred": true,
+	}
+
+	return r.find(ctx, filter)
+}
+
 func (r *Project) FindByPublicName(ctx context.Context, name string) (*project.Project, error) {
 	if name == "" {
 		return nil, rerror.ErrNotFound
diff --git a/server/internal/infrastructure/mongo/project_test.go b/server/internal/infrastructure/mongo/project_test.go
index e3eb60473..254108b3c 100644
--- a/server/internal/infrastructure/mongo/project_test.go
+++ b/server/internal/infrastructure/mongo/project_test.go
@@ -139,3 +139,55 @@ func TestProject_FindByPublicName(t *testing.T) {
 	assert.NoError(t, err)
 	assert.Equal(t, prj1, got)
 }
+
+func TestProject_FindStarredByWorkspace(t *testing.T) {
+	c := mongotest.Connect(t)(t)
+	ctx := context.Background()
+
+	wid := accountdomain.NewWorkspaceID()
+	wid2 := accountdomain.NewWorkspaceID()
+
+	pid1 := id.NewProjectID()
+	pid2 := id.NewProjectID()
+	pid3 := id.NewProjectID()
+	pid4 := id.NewProjectID()
+
+	_, _ = c.Collection("project").InsertMany(ctx, []any{
+		bson.M{"id": pid1.String(), "team": wid.String(), "name": "Project 1", "starred": true},
+		bson.M{"id": pid2.String(), "team": wid.String(), "name": "Project 2", "starred": true},
+		bson.M{"id": pid3.String(), "team": wid.String(), "name": "Project 3", "starred": false},
+		bson.M{"id": pid4.String(), "team": wid2.String(), "name": "Project 4", "starred": true},
+	})
+
+	r := NewProject(mongox.NewClientWithDatabase(c))
+
+	t.Run("FindStarredByWorkspace", func(t *testing.T) {
+		got, err := r.FindStarredByWorkspace(ctx, wid)
+		assert.NoError(t, err)
+		assert.Equal(t, 2, len(got))
+		assert.ElementsMatch(t, []id.ProjectID{pid1, pid2}, []id.ProjectID{got[0].ID(), got[1].ID()})
+	})
+
+	t.Run("FindStarredByWorkspace with workspace filter", func(t *testing.T) {
+		r2 := r.Filtered(repo.WorkspaceFilter{
+			Readable: accountdomain.WorkspaceIDList{wid2},
+		})
+		got, err := r2.FindStarredByWorkspace(ctx, wid)
+		assert.Equal(t, repo.ErrOperationDenied, err)
+		assert.Nil(t, got)
+	})
+
+	t.Run("FindStarredByWorkspace with different workspace", func(t *testing.T) {
+		got, err := r.FindStarredByWorkspace(ctx, wid2)
+		assert.NoError(t, err)
+		assert.Equal(t, 1, len(got))
+		assert.Equal(t, pid4, got[0].ID())
+	})
+
+	t.Run("FindStarredByWorkspace with workspace having no starred projects", func(t *testing.T) {
+		emptyWid := accountdomain.NewWorkspaceID()
+		got, err := r.FindStarredByWorkspace(ctx, emptyWid)
+		assert.NoError(t, err)
+		assert.Empty(t, got)
+	})
+}
diff --git a/server/internal/usecase/interactor/project.go b/server/internal/usecase/interactor/project.go
index 03befee35..d42c60a4c 100644
--- a/server/internal/usecase/interactor/project.go
+++ b/server/internal/usecase/interactor/project.go
@@ -73,6 +73,10 @@ func (i *Project) FindByWorkspace(ctx context.Context, id accountdomain.Workspac
 	})
 }
 
+func (i *Project) FindStarredByWorkspace(ctx context.Context, id accountdomain.WorkspaceID, operator *usecase.Operator) ([]*project.Project, error) {
+	return i.projectRepo.FindStarredByWorkspace(ctx, id)
+}
+
 func (i *Project) Create(ctx context.Context, p interfaces.CreateProjectParam, operator *usecase.Operator) (_ *project.Project, err error) {
 	if err := i.CanWriteWorkspace(p.WorkspaceID, operator); err != nil {
 		return nil, err
diff --git a/server/internal/usecase/interfaces/project.go b/server/internal/usecase/interfaces/project.go
index 0f0b9a338..7bfc578f3 100644
--- a/server/internal/usecase/interfaces/project.go
+++ b/server/internal/usecase/interfaces/project.go
@@ -60,6 +60,7 @@ var (
 type Project interface {
 	Fetch(context.Context, []id.ProjectID, *usecase.Operator) ([]*project.Project, error)
 	FindByWorkspace(context.Context, accountdomain.WorkspaceID, *string, *project.SortType, *usecasex.Pagination, *usecase.Operator) ([]*project.Project, *usecasex.PageInfo, error)
+	FindStarredByWorkspace(context.Context, accountdomain.WorkspaceID, *usecase.Operator) ([]*project.Project, error)
 	Create(context.Context, CreateProjectParam, *usecase.Operator) (*project.Project, error)
 	Update(context.Context, UpdateProjectParam, *usecase.Operator) (*project.Project, error)
 	Publish(context.Context, PublishProjectParam, *usecase.Operator) (*project.Project, error)
diff --git a/server/internal/usecase/repo/project.go b/server/internal/usecase/repo/project.go
index f72c44bab..7ba88d180 100644
--- a/server/internal/usecase/repo/project.go
+++ b/server/internal/usecase/repo/project.go
@@ -22,6 +22,7 @@ type Project interface {
 	FindByID(context.Context, id.ProjectID) (*project.Project, error)
 	FindByScene(context.Context, id.SceneID) (*project.Project, error)
 	FindByWorkspace(context.Context, accountdomain.WorkspaceID, ProjectFilter) ([]*project.Project, *usecasex.PageInfo, error)
+	FindStarredByWorkspace(context.Context, accountdomain.WorkspaceID) ([]*project.Project, error)
 	FindByPublicName(context.Context, string) (*project.Project, error)
 	CountByWorkspace(context.Context, accountdomain.WorkspaceID) (int, error)
 	CountPublicByWorkspace(context.Context, accountdomain.WorkspaceID) (int, error)

From 6fc36db62a9379d9a8ff1af863b01f636c98019b Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 26 Aug 2024 18:47:22 +0800
Subject: [PATCH 11/23] refactor(web): clear project cache when update project
 (#1116)

---
 .../ContentsContainer/Projects/index.tsx         |  4 ++--
 web/src/services/api/projectApi.ts               | 16 ++++++++++++----
 web/src/services/i18n/translations/en.yml        |  4 ++--
 web/src/services/i18n/translations/ja.yml        |  4 ++--
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
index 9eca578f8..44da1c086 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -169,12 +169,12 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
               </ProjectNameCell>
               <TimeCell>
                 <Typography size="body" color={theme.content.weak}>
-                  {t("Last modified")}
+                  {t("Updated At")}
                 </Typography>
               </TimeCell>
               <TimeCell>
                 <Typography size="body" color={theme.content.weak}>
-                  {t("Created time")}
+                  {t("Created At")}
                 </Typography>
               </TimeCell>
               <ActionCell />
diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
index 0af5103fc..42f2c82de 100644
--- a/web/src/services/api/projectApi.ts
+++ b/web/src/services/api/projectApi.ts
@@ -171,6 +171,8 @@ export default () => {
         return { status: "error" };
       }
 
+      apolloCache.evict({ fieldName: "projects" });
+
       setNotification({
         type: s === "limited" ? "success" : s == "published" ? "success" : "info",
         text:
@@ -182,7 +184,7 @@ export default () => {
       });
       return { data: data.publishProject.project, status: "success" };
     },
-    [publishProjectMutation, t, setNotification],
+    [apolloCache, publishProjectMutation, t, setNotification],
   );
 
   const [updateProjectMutation] = useMutation(UPDATE_PROJECT, {
@@ -200,10 +202,12 @@ export default () => {
         return { status: "error" };
       }
 
+      apolloCache.evict({ fieldName: "projects" });
+
       setNotification({ type: "success", text: t("Successfully updated project!") });
       return { data: data?.updateProject?.project, status: "success" };
     },
-    [updateProjectMutation, t, setNotification],
+    [apolloCache, updateProjectMutation, t, setNotification],
   );
 
   const [archiveProjectMutation] = useMutation(ARCHIVE_PROJECT, {
@@ -275,10 +279,12 @@ export default () => {
         return { status: "error" };
       }
 
+      apolloCache.evict({ fieldName: "projects" });
+
       setNotification({ type: "success", text: t("Successfully updated project!") });
       return { data: data?.updateProject?.project, status: "success" };
     },
-    [updateProjectBasicAuthMutation, t, setNotification],
+    [apolloCache, updateProjectBasicAuthMutation, t, setNotification],
   );
 
   const [updateProjectAliasMutation] = useMutation(UPDATE_PROJECT_ALIAS);
@@ -294,10 +300,12 @@ export default () => {
         return { status: "error" };
       }
 
+      apolloCache.evict({ fieldName: "projects" });
+
       setNotification({ type: "success", text: t("Successfully updated project!") });
       return { data: data?.updateProject?.project, status: "success" };
     },
-    [updateProjectAliasMutation, t, setNotification],
+    [apolloCache, updateProjectAliasMutation, t, setNotification],
   );
 
   return {
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index ce62d0d9b..37900cd02 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -65,8 +65,8 @@ Last Updated: ''
 New Project: ''
 Search Result for: ''
 Project Name: ''
-Last modified: ''
-Created time: ''
+Updated At: ''
+Created At: ''
 Rename: ''
 Project Setting: ''
 Create new project: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index 06ecdbfe8..f9941c4f0 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -65,8 +65,8 @@ Last Updated: ''
 New Project: 新規プロジェクト
 Search Result for: ''
 Project Name: プロジェクト名
-Last modified: ''
-Created time: ''
+Updated At: ''
+Created At: ''
 Rename: ''
 Project Setting: ''
 Create new project: ''

From c4b6936b7b9430283da527ded61be3606038a9a3 Mon Sep 17 00:00:00 2001
From: Piyush Chauhan <42397980+pyshx@users.noreply.github.com>
Date: Mon, 26 Aug 2024 18:05:36 +0530
Subject: [PATCH 12/23] ci: remove slack notification job for e2e (#1060)

---
 .github/workflows/e2e.yml | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 04b83e6d5..102f54ac1 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -54,16 +54,3 @@ jobs:
             test-results/
           if-no-files-found: ignore
           retention-days: 7
-  slack-notification:
-    if: success() || failure()
-    name: Slack Notification
-    needs:
-      - e2e
-    runs-on: ubuntu-latest
-    steps:
-      - name: Slack Notification
-        uses: Gamesight/slack-workflow-status@master
-        if: always()
-        with:
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          slack_webhook_url: ${{ secrets.SLACK_WEBHOOK_URL }}

From 22bf396c421535c9e9c19bd712742302cd94c33a Mon Sep 17 00:00:00 2001
From: tantaka tomokazu <tantaka.tomokazu@gmail.com>
Date: Tue, 27 Aug 2024 10:19:10 +0900
Subject: [PATCH 13/23] fix(server): sorting of update is not working (#1114)

Co-authored-by: tomokazu tantaka <t.tantaka@eukarya.io>
---
 server/e2e/gql_project_test.go                | 140 ++++++++++++++++++
 .../adapter/gql/gqlmodel/convert_project.go   |   2 +-
 2 files changed, 141 insertions(+), 1 deletion(-)

diff --git a/server/e2e/gql_project_test.go b/server/e2e/gql_project_test.go
index 157c24cd1..aad2e57ad 100644
--- a/server/e2e/gql_project_test.go
+++ b/server/e2e/gql_project_test.go
@@ -312,3 +312,143 @@ func starProject(e *httpexpect.Expect, projectID string) {
 	response.ValueEqual("id", projectID).
 		ValueEqual("starred", true)
 }
+
+func TestSortByUpdatedAt(t *testing.T) {
+
+	e := StartServer(t, &config.Config{
+		Origins: []string{"https://example.com"},
+		AuthSrv: config.AuthSrvConfig{
+			Disabled: true,
+		},
+	}, true, baseSeeder)
+
+	createProject(e, "project1-test")
+	project2ID := createProject(e, "project2-test")
+	createProject(e, "project3-test")
+
+	requestBody := GraphQLRequest{
+		OperationName: "UpdateProject",
+		Query: `mutation UpdateProject($input: UpdateProjectInput!) {
+			updateProject(input: $input) {
+				project {
+					id
+					name
+					description
+					updatedAt
+					__typename
+				}
+				__typename
+			}
+		}`,
+		Variables: map[string]any{
+			"input": map[string]any{
+				"projectId":   project2ID,
+				"description": "test updaet",
+			},
+		},
+	}
+
+	// Update 'project2'
+	e.POST("/api/graphql").
+		WithHeader("Origin", "https://example.com").
+		WithHeader("X-Reearth-Debug-User", uID.String()).
+		WithHeader("Content-Type", "application/json").
+		WithJSON(requestBody).
+		Expect().
+		Status(http.StatusOK).
+		JSON()
+
+	requestBody = GraphQLRequest{
+		OperationName: "GetProjects",
+		Query: `
+		query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {
+			projects(
+				teamId: $teamId
+				pagination: $pagination
+				keyword: $keyword
+				sort: $sort
+			) {
+				edges {
+					node {
+						id
+						...ProjectFragment
+						scene {
+							id
+							__typename
+						}
+						__typename
+					}
+					__typename
+				}
+				nodes {
+					id
+					...ProjectFragment
+					scene {
+						id
+						__typename
+					}
+					__typename
+				}
+				pageInfo {
+					endCursor
+					hasNextPage
+					hasPreviousPage
+					startCursor
+					__typename
+				}
+				totalCount
+				__typename
+			}
+		}
+		fragment ProjectFragment on Project {
+			id
+			name
+			description
+			imageUrl
+			isArchived
+			isBasicAuthActive
+			basicAuthUsername
+			basicAuthPassword
+			publicTitle
+			publicDescription
+			publicImage
+			alias
+			enableGa
+			trackingId
+			publishmentStatus
+			updatedAt
+			createdAt
+			coreSupport
+			starred
+			__typename
+		}`,
+		Variables: map[string]any{
+			"pagination": map[string]any{
+				"first": 3, // Get first 3 itme
+			},
+			"teamId": wID.String(),
+			"sort": map[string]string{
+				"field":     "UPDATEDAT",
+				"direction": "DESC", // Sort DESC by UPDATEDAT
+			},
+		},
+	}
+
+	edges := e.POST("/api/graphql").
+		WithHeader("Origin", "https://example.com").
+		WithHeader("X-Reearth-Debug-User", uID.String()).
+		WithHeader("Content-Type", "application/json").
+		WithJSON(requestBody).
+		Expect().
+		Status(http.StatusOK).
+		JSON().
+		Object().
+		Value("data").Object().
+		Value("projects").Object().
+		Value("edges").Array()
+
+	edges.Length().Equal(3)
+	edges.Element(0).Object().Value("node").Object().Value("name").Equal("project2-test") // 'project2' is first
+	edges.Element(1).Object().Value("node").Object().Value("name").Equal("project3-test")
+	edges.Element(2).Object().Value("node").Object().Value("name").Equal("project1-test")
+}
diff --git a/server/internal/adapter/gql/gqlmodel/convert_project.go b/server/internal/adapter/gql/gqlmodel/convert_project.go
index ae6d8d0c1..01500b4b7 100644
--- a/server/internal/adapter/gql/gqlmodel/convert_project.go
+++ b/server/internal/adapter/gql/gqlmodel/convert_project.go
@@ -77,7 +77,7 @@ func ProjectSortTypeFrom(pst *ProjectSort) *project.SortType {
 	case ProjectSortFieldCreatedat:
 		key = "id"
 	case ProjectSortFieldUpdatedat:
-		key = "updatedAt"
+		key = "updatedat"
 	case ProjectSortFieldName:
 		key = "name"
 	default:

From 51bfe8bb48dd577bab191dc8943b445cf367c9ef Mon Sep 17 00:00:00 2001
From: mulengawilfred <m.wilfred@eukarya.io>
Date: Tue, 27 Aug 2024 08:00:59 +0200
Subject: [PATCH 14/23] chore(web): update web README.md and local env (#1078)

Co-authored-by: airslice <icesunex@hotmail.com>
---
 web/.env.local                   |  9 +++++++++
 web/.gitignore                   |  2 +-
 web/README.md                    | 24 +++++++++++++++++++++---
 web/e2e/utils/config.ts          |  1 -
 web/src/services/config/index.ts |  1 -
 5 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 web/.env.local

diff --git a/web/.env.local b/web/.env.local
new file mode 100644
index 000000000..2ef502033
--- /dev/null
+++ b/web/.env.local
@@ -0,0 +1,9 @@
+# Required
+REEARTH_WEB_API=http://localhost:8080/api
+REEARTH_WEB_PLUGINS=http://localhost:8080/plugins
+REEARTH_WEB_AUTH0_DOMAIN=
+REEARTH_WEB_AUTH0_AUDIENCE=
+REEARTH_WEB_AUTH0_CLIENT_ID=
+
+# Optional
+REEARTH_WEB_CESIUM_ION_TOKEN_URL=
\ No newline at end of file
diff --git a/web/.gitignore b/web/.gitignore
index 04bcd7758..9662ac8a3 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -9,7 +9,7 @@ node_modules
 __screenshots__
 /playwright-report
 /test-results
-/.env*
+/.env
 /reearth-config.json
 /cesium_ion_token.txt
 .idea/*
diff --git a/web/README.md b/web/README.md
index 5628083d1..b9cadc3b0 100644
--- a/web/README.md
+++ b/web/README.md
@@ -1,4 +1,22 @@
-[![ci-web](https://github.com/reearth/reearth-visualizer/actions/workflows/ci_web.yml/badge.svg)](https://github.com/reearth/reearth-visualizer/actions/workflows/ci_web.yml) [![codecov](https://codecov.io/gh/reearth/reearth/branch/main/graph/badge.svg?flag=web-beta,web-utils,web-classic)](https://codecov.io/gh/reearth/reearth)
-
 # reearth/web
-Documentation (coming soon)
+
+Web interface for Re:Earth GIS software built with React 18 and Vite. 
+
+## Getting started
+
+### Development
+
+Add environment variables to .env. A template of the required variables are in `env.local`. 
+Consult the development team for the correct environment variables.
+
+`yarn start` to start the local server. The interface will open on [http://localhost:3000](http://localhost:3000)
+
+`yarn build` TBC
+
+`yarn format` to lint code
+
+`yarn storybook` to open Storybook for web interface's UI on [http://localhost:9001](http://localhost:9001)
+
+`yarn gql` automatically generates typing of GraphQL operations.
+
+`yarn i18n` parses components to provide internationalisation for texts in supported languages.
diff --git a/web/e2e/utils/config.ts b/web/e2e/utils/config.ts
index 8734db8b8..483f21eed 100644
--- a/web/e2e/utils/config.ts
+++ b/web/e2e/utils/config.ts
@@ -9,7 +9,6 @@ export const config = {
   authUrl: process.env["REEARTH_WEB_AUTH0_DOMAIN"],
   signUpSecret: process.env["REEARTH_WEB_E2E_SIGNUP_SECRET"],
   authProvider: process.env["REEARTH_WEB_AUTH_PROVIDER"],
-  developerMode: process.env["REEARTH_WEB_DEVELOPER_MODE"],
   earlyAccessAdmins: process.env["REEARTH_WEB_EARLY_ACCESS_ADMINS"],
 };
 
diff --git a/web/src/services/config/index.ts b/web/src/services/config/index.ts
index 56d0f5193..347dcf48d 100644
--- a/web/src/services/config/index.ts
+++ b/web/src/services/config/index.ts
@@ -19,7 +19,6 @@ export type Config = {
   sentryDsn?: string;
   sentryEnv?: string;
   cesiumIonAccessToken?: string;
-  developerMode?: boolean;
   earlyAccessAdmins?: string[];
   brand?: {
     logoUrl?: string;

From 0395c4ccf104e7408aad0a8f8362ce4f666f07fa Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Tue, 27 Aug 2024 14:08:00 +0800
Subject: [PATCH 15/23] chore(web): upgrade eslint and config (#1112)

---
 .vscode/extensions.json                       |    4 +-
 .vscode/settings.json                         |   29 +-
 web/.eslintignore                             |    7 -
 web/.eslintrc.yml                             |   42 -
 web/.huskyrc.json                             |    2 +-
 web/.prettierignore                           |    2 +
 web/.storybook/preview-head.html              |    7 +-
 web/.storybook/preview.tsx                    |    5 +-
 web/.storybook/public/plugins/block.js        |    2 +-
 web/.storybook/public/sample.geojson          |  500 ++-----
 web/.storybook/public/testdata/sample.gltf    |   90 +-
 web/.storybook/public/tileset/tileset.json    |   65 +-
 web/.vscode/settings.json                     |   10 +-
 web/CODE_OF_CONDUCT.md                        |   26 +-
 web/README.md                                 |    4 +-
 web/bin/pluginDoc.ts                          |   48 +-
 web/codegen.ts                                |    5 +-
 web/e2e/utils/index.ts                        |   11 +-
 web/eslint.config.mjs                         |   40 +
 web/index.html                                |   33 +-
 web/package.json                              |   29 +-
 web/published.html                            |   45 +-
 web/src/app.tsx                               |    7 +-
 .../components/Accordion/AccordionItem.tsx    |   18 +-
 .../components/Accordion/index.stories.tsx    |    8 +-
 .../beta/components/Accordion/index.test.tsx  |   11 +-
 web/src/beta/components/Accordion/index.tsx   |    5 +-
 .../beta/components/Avatar/index.stories.tsx  |    8 +-
 web/src/beta/components/Avatar/index.tsx      |   13 +-
 web/src/beta/components/Box/index.tsx         |   64 +-
 .../beta/components/Button/index.stories.tsx  |   32 +-
 web/src/beta/components/Button/index.tsx      |   42 +-
 web/src/beta/components/CatalogCard/index.tsx |   41 +-
 web/src/beta/components/Collapse/index.tsx    |   15 +-
 .../beta/components/ContentPicker/README.md   |    1 +
 .../beta/components/ContentPicker/index.tsx   |    8 +-
 web/src/beta/components/Divider/index.tsx     |   11 +-
 .../beta/components/DragAndDropList/Item.tsx  |   25 +-
 .../DragAndDropList/index.stories.tsx         |   24 +-
 .../beta/components/DragAndDropList/index.tsx |   12 +-
 .../components/DragAndDropList/scrollItem.tsx |   11 +-
 .../beta/components/Flex/index.stories.tsx    |    6 +-
 web/src/beta/components/Flex/index.tsx        |    6 +-
 .../components/FloatedPanel/index.stories.tsx |    2 +-
 .../beta/components/FloatedPanel/index.tsx    |   18 +-
 .../beta/components/Icon/index.stories.tsx    |    4 +-
 web/src/beta/components/Icon/index.tsx        |   10 +-
 .../beta/components/InsertionBar/index.tsx    |   37 +-
 .../beta/components/InsertionButton/index.tsx |    6 +-
 web/src/beta/components/ListItem/index.tsx    |   31 +-
 web/src/beta/components/Loading/index.tsx     |   26 +-
 .../components/Modal/ModalFrame/index.tsx     |   23 +-
 .../beta/components/Modal/index.stories.tsx   |   53 +-
 web/src/beta/components/Modal/index.tsx       |   37 +-
 web/src/beta/components/NotFound/index.tsx    |   16 +-
 .../beta/components/Popover/index.stories.tsx |   22 +-
 web/src/beta/components/Popover/index.tsx     |  189 +--
 .../components/PopoverMenuContent/index.tsx   |   12 +-
 web/src/beta/components/README.md             |    2 +-
 .../components/RadioGroup/RadioBox/index.tsx  |   23 +-
 .../components/RadioGroup/index.stories.tsx   |   10 +-
 .../components/RangeSlider/index.stories.tsx  |   14 +-
 web/src/beta/components/RangeSlider/index.tsx |    9 +-
 web/src/beta/components/Resizable/hooks.ts    |   24 +-
 .../components/Resizable/index.stories.tsx    |   13 +-
 web/src/beta/components/Resizable/index.tsx   |   44 +-
 .../SettingsButtons/index.stories.tsx         |    2 +-
 .../beta/components/SettingsButtons/index.tsx |   18 +-
 .../SidePanelSectionField/index.tsx           |   24 +-
 .../beta/components/Slide/index.stories.tsx   |    5 +-
 web/src/beta/components/Slide/index.tsx       |    9 +-
 .../beta/components/Slider/index.stories.tsx  |   14 +-
 web/src/beta/components/Slider/index.tsx      |    9 +-
 .../StorytellingPageSectionItem/index.tsx     |   12 +-
 .../components/SubTabButtonList/index.tsx     |    9 +-
 .../components/SwitchButtonList/index.tsx     |   21 +-
 web/src/beta/components/TabButton/index.tsx   |    9 +-
 .../beta/components/TabMenu/index.stories.tsx |   40 +-
 web/src/beta/components/TabMenu/index.tsx     |   35 +-
 web/src/beta/components/Text/index.tsx        |   18 +-
 .../beta/components/Toggle/index.stories.tsx  |   10 +-
 web/src/beta/components/Toggle/index.tsx      |   13 +-
 .../fields/CameraField/CapturePanel/index.tsx |   24 +-
 .../fields/CameraField/EditPanel/hooks.ts     |    5 +-
 .../fields/CameraField/EditPanel/index.tsx    |   11 +-
 .../fields/CameraField/index.stories.tsx      |   17 +-
 .../components/fields/CameraField/index.tsx   |   37 +-
 .../components/fields/CameraField/utils.ts    |    6 +-
 .../components/fields/ColorField/hooks.ts     |   36 +-
 .../components/fields/ColorField/index.tsx    |   38 +-
 .../fields/DateTimeField/EditPanel/hooks.ts   |   25 +-
 .../fields/DateTimeField/EditPanel/index.tsx  |   22 +-
 .../fields/DateTimeField/index.stories.tsx    |    4 +-
 .../components/fields/DateTimeField/index.tsx |   13 +-
 .../fields/ListField/index.stories.tsx        |   10 +-
 .../components/fields/ListField/index.tsx     |   12 +-
 .../components/fields/LocationField/index.tsx |   16 +-
 .../fields/Property/PropertyField/hooks.ts    |   21 +-
 .../fields/Property/PropertyField/index.tsx   |   21 +-
 .../fields/Property/PropertyItem/index.tsx    |   49 +-
 .../Property/PropertyList/index.stories.tsx   |    8 +-
 .../fields/Property/PropertyList/index.tsx    |   21 +-
 .../beta/components/fields/Property/hooks.ts  |   21 +-
 .../components/fields/RangeField/index.tsx    |   19 +-
 .../components/fields/SelectField/index.tsx   |   57 +-
 .../components/fields/SliderField/index.tsx   |   18 +-
 .../fields/SpacingInput/index.stories.tsx     |    2 +-
 .../components/fields/SpacingInput/index.tsx  |   33 +-
 .../fields/TextAreaField/index.stories.tsx    |    8 +-
 .../components/fields/TextAreaField/index.tsx |   17 +-
 .../fields/TimelineField/EditPanel/hooks.ts   |    9 +-
 .../fields/TimelineField/EditPanel/index.tsx  |   23 +-
 .../components/fields/TimelineField/index.tsx |   25 +-
 .../components/fields/ToggleField/index.tsx   |    6 +-
 .../beta/components/fields/URLField/index.tsx |   23 +-
 .../fields/common/NumberInput/index.tsx       |   29 +-
 .../components/fields/common/PanelCommon.tsx  |    9 +-
 .../fields/common/TextInput/index.tsx         |    8 +-
 web/src/beta/components/fields/index.tsx      |   10 +-
 web/src/beta/components/fields/utils.ts       |   17 +-
 web/src/beta/features/Assets/constants.ts     |    3 +-
 web/src/beta/features/Assets/hooks.ts         |   30 +-
 .../features/AssetsManager/AssetsSelector.tsx |   13 +-
 .../beta/features/AssetsManager/constants.ts  |   10 +-
 web/src/beta/features/AssetsManager/hooks.ts  |   71 +-
 web/src/beta/features/AssetsManager/index.tsx |   91 +-
 .../AssetsManager/item/AssetGridItem.tsx      |   50 +-
 .../AssetsManager/item/AssetListItem.tsx      |   48 +-
 .../beta/features/AssetsManager/item/utils.ts |    7 +-
 .../ContentsContainer/Members/ListItem.tsx    |   10 +-
 .../ContentsContainer/Members/index.tsx       |   24 +-
 .../Projects/Project/ProjectGridViewItem.tsx  |   25 +-
 .../Projects/Project/ProjectListViewItem.tsx  |   49 +-
 .../Projects/Project/hooks.ts                 |   13 +-
 .../Projects/ProjectCreatorModal.tsx          |   16 +-
 .../ContentsContainer/Projects/hooks.ts       |   68 +-
 .../ContentsContainer/Projects/index.tsx      |   54 +-
 .../Dashboard/ContentsContainer/index.tsx     |   13 +-
 .../Dashboard/LeftSidePanel/index.tsx         |    7 +-
 .../Dashboard/LeftSidePanel/profile.tsx       |   20 +-
 web/src/beta/features/Dashboard/hooks.ts      |   17 +-
 web/src/beta/features/Dashboard/index.tsx     |   10 +-
 .../Map/DataSourceLayerCreator/CSV/index.tsx  |   25 +-
 .../DataSourceLayerCreator/Common/hooks.tsx   |   12 +-
 .../DataSourceLayerCreator/Common/index.tsx   |   21 +-
 .../ThreeDTiles/index.tsx                     |    9 +-
 .../VectorTiles/index.tsx                     |    9 +-
 .../DataSourceLayerCreator/WmsTiles/index.tsx |   16 +-
 .../DataSourceLayerCreator/index.stories.tsx  |    4 +-
 .../Map/DataSourceLayerCreator/index.tsx      |   25 +-
 .../FeatureInspector/CustomPropertField.tsx   |   23 +-
 .../LayerInspector/FeatureInspector/index.tsx |   52 +-
 .../LayerInspector/InfoboxSettings/index.tsx  |   11 +-
 .../LayerInspector/LayerStyle/index.tsx       |    7 +-
 .../InspectorPanel/LayerInspector/index.tsx   |   27 +-
 .../Map/InspectorPanel/SceneSettings/hooks.ts |   13 +-
 .../InspectorPanel/SceneSettings/index.tsx    |   23 +-
 .../Editor/Map/InspectorPanel/index.tsx       |   11 +-
 .../Map/LayerStylePanel/LayerStyleCard.tsx    |   14 +-
 .../Map/LayerStylePanel/LayerStyleEditor.tsx  |    9 +-
 .../Map/LayerStylePanel/LayerStyleItem.tsx    |    7 +-
 .../Editor/Map/LayerStylePanel/index.tsx      |   13 +-
 .../Editor/Map/LayersPanel/LayerItem.tsx      |   29 +-
 .../features/Editor/Map/LayersPanel/index.tsx |   18 +-
 .../features/Editor/Map/ScenePanel/index.tsx  |   36 +-
 .../Map/SketchLayerCreator/General/index.tsx  |   21 +-
 .../Editor/Map/SketchLayerCreator/index.tsx   |   25 +-
 .../Editor/Map/SketchLayerCreator/type.ts     |    4 +-
 .../Editor/Map/SketchLayerEditor/hooks.ts     |   15 +-
 .../Editor/Map/SketchLayerEditor/index.tsx    |   22 +-
 web/src/beta/features/Editor/Map/context.tsx  |   16 +-
 web/src/beta/features/Editor/Map/index.tsx    |   22 +-
 .../CustomPropertyItem.tsx                    |   23 +-
 .../shared/SketchCustomProperties/hooks.ts    |   30 +-
 .../PublishToolsPanel/PublishModal/hooks.ts   |   47 +-
 .../PublishToolsPanel/PublishModal/index.tsx  |  143 +-
 .../Editor/Publish/PublishToolsPanel/hooks.ts |   35 +-
 .../Publish/PublishToolsPanel/index.tsx       |   35 +-
 .../beta/features/Editor/Publish/context.tsx  |   13 +-
 .../beta/features/Editor/Publish/index.tsx    |   10 +-
 .../Editor/Story/PageSettingsPanel/hooks.ts   |   18 +-
 .../Editor/Story/PageSettingsPanel/index.tsx  |   41 +-
 .../Editor/Story/PagesPanel/PageItem.tsx      |   21 +-
 .../Editor/Story/PagesPanel/index.tsx         |   24 +-
 .../Story/TempContentStory/Action/index.tsx   |   20 +-
 .../PageItemWrapper/index.tsx                 |   15 +-
 .../Story/TempContentStory/index.stories.tsx  |    2 +-
 .../Editor/Story/TempContentStory/index.tsx   |   42 +-
 .../beta/features/Editor/Story/context.tsx    |   13 +-
 web/src/beta/features/Editor/Story/index.tsx  |    9 +-
 .../Editor/Visualizer/convert-infobox.ts      |    6 +-
 .../Editor/Visualizer/convert-story.ts        |   26 +-
 .../features/Editor/Visualizer/convert.ts     |   94 +-
 .../beta/features/Editor/Visualizer/hooks.ts  |  118 +-
 .../beta/features/Editor/Visualizer/index.tsx |    7 +-
 .../Editor/Visualizer/processNewProperty.ts   |   44 +-
 .../Widgets/ContainerSettingsPanel/hooks.ts   |   12 +-
 .../Widgets/ContainerSettingsPanel/index.tsx  |   35 +-
 .../Editor/Widgets/WASToolsPanel/index.tsx    |   13 +-
 .../Widgets/WidgetInspectorPanel/hooks.ts     |    8 +-
 .../Widgets/WidgetManagerPanel/Action.tsx     |   19 +-
 .../Widgets/WidgetManagerPanel/ListItem.tsx   |   10 +-
 .../Widgets/WidgetManagerPanel/hooks.ts       |    5 +-
 .../Widgets/WidgetManagerPanel/index.tsx      |   13 +-
 .../beta/features/Editor/Widgets/context.tsx  |   17 +-
 .../beta/features/Editor/Widgets/index.tsx    |   16 +-
 web/src/beta/features/Editor/hooks/index.ts   |    7 +-
 .../Editor/hooks/useEditorVisualizer.ts       |   10 +-
 .../features/Editor/hooks/useLayerStyles.ts   |   26 +-
 .../beta/features/Editor/hooks/useLayers.ts   |   49 +-
 .../features/Editor/hooks/useProperty.tsx     |   13 +-
 .../beta/features/Editor/hooks/useScene.ts    |   12 +-
 .../beta/features/Editor/hooks/useSketch.ts   |   44 +-
 .../features/Editor/hooks/useStorytelling.ts  |   30 +-
 web/src/beta/features/Editor/hooks/useUI.ts   |   46 +-
 .../beta/features/Editor/hooks/useWidgets.ts  |   19 +-
 web/src/beta/features/Editor/utils.tsx        |    7 +-
 web/src/beta/features/GlobalModal/index.tsx   |    7 +-
 .../beta/features/Modals/AssetModal/index.tsx |   39 +-
 .../features/Modals/LayerStyleModal/hooks.ts  |   29 +-
 .../features/Modals/LayerStyleModal/index.tsx |   25 +-
 .../Navbar/LeftSection/Profile/index.tsx      |    7 +-
 .../features/Navbar/LeftSection/index.tsx     |   46 +-
 web/src/beta/features/Navbar/hooks.ts         |   20 +-
 web/src/beta/features/Navbar/index.tsx        |    8 +-
 web/src/beta/features/Navbar/useDevPlugins.ts |   41 +-
 .../beta/features/Navbar/useRightSection.tsx  |   10 +-
 web/src/beta/features/Notification/hooks.ts   |   25 +-
 web/src/beta/features/Notification/index.tsx  |   24 +-
 .../features/PluginPlayground/Viewer/hooks.ts |    7 +-
 .../PluginPlayground/Viewer/index.tsx         |   13 +-
 .../beta/features/PluginPlayground/index.tsx  |   24 +-
 .../ProjectSettings/MenuList/index.tsx        |   12 +-
 .../beta/features/ProjectSettings/hooks.ts    |   30 +-
 .../beta/features/ProjectSettings/index.tsx   |   16 +-
 .../innerPages/GeneralSettings/index.tsx      |   34 +-
 .../PluginInstall/PluginInstallCardButton.tsx |   10 +-
 .../PluginList/PluginListItem.tsx             |   23 +-
 .../PluginInstall/PluginList/index.tsx        |   11 +-
 .../PluginInstall/PublicRepo/hooks.ts         |    4 +-
 .../PluginInstall/PublicRepo/index.tsx        |    6 +-
 .../PluginInstall/ZipUpload/index.tsx         |   11 +-
 .../PluginSettings/PluginInstall/index.tsx    |    8 +-
 .../innerPages/PluginSettings/hooks.ts        |   34 +-
 .../innerPages/PluginSettings/index.tsx       |    7 +-
 .../PublicSettings/PublicSettingsDetail.tsx   |   45 +-
 .../innerPages/PublicSettings/index.tsx       |   14 +-
 .../StorySettings/StorySettingsDetail.tsx     |   33 +-
 .../innerPages/StorySettings/index.tsx        |    6 +-
 .../ProjectSettings/innerPages/common.tsx     |   25 +-
 .../Published/convert-new-property.ts         |   55 +-
 web/src/beta/features/Published/convert.ts    |   24 +-
 .../Published/googleAnalytics/useGA.ts        |    4 +-
 web/src/beta/features/Published/hooks.ts      |   93 +-
 web/src/beta/features/Published/types.ts      |   14 +-
 web/src/beta/features/README.md               |    6 +-
 .../features/RootPage/PageWrapper/index.tsx   |   16 +-
 web/src/beta/features/RootPage/hooks.ts       |   38 +-
 web/src/beta/features/RootPage/index.tsx      |    9 +-
 .../Infobox/Block/builtin/Image/index.tsx     |   12 +-
 .../Block/builtin/PropertyList/Content.tsx    |   22 +-
 .../PropertyList/CustomFields/index.tsx       |    7 +-
 .../CustomFields/useEvaluateProperties.ts     |   20 +-
 .../builtin/PropertyList/ListEditor/Item.tsx  |   19 +-
 .../builtin/PropertyList/ListEditor/hooks.ts  |   42 +-
 .../builtin/PropertyList/ListEditor/index.tsx |   54 +-
 .../Block/builtin/PropertyList/ListItem.tsx   |   25 +-
 .../Block/builtin/PropertyList/index.tsx      |   12 +-
 .../Infobox/Block/builtin/Text/index.tsx      |   12 +-
 .../Crust/Infobox/Block/builtin/index.ts      |    4 +-
 .../Block/builtin/useExpressionEval.ts        |   27 +-
 .../Visualizer/Crust/Infobox/Block/index.tsx  |   33 +-
 .../Visualizer/Crust/Infobox/constants.ts     |    3 +-
 .../Visualizer/Crust/Infobox/hooks.ts         |   26 +-
 .../Visualizer/Crust/Infobox/index.tsx        |   23 +-
 .../Visualizer/Crust/Infobox/types.ts         |    2 +-
 .../Plugins/Plugin/ModalContainer/index.tsx   |   19 +-
 .../Plugins/Plugin/PopupContainer/index.tsx   |   43 +-
 .../Crust/Plugins/Plugin/hooks/index.ts       |   23 +-
 .../Plugins/Plugin/hooks/usePluginAPI.ts      |   59 +-
 .../Crust/Plugins/Plugin/index.stories.tsx    |    4 +-
 .../Visualizer/Crust/Plugins/Plugin/index.tsx |   18 +-
 .../Crust/Plugins/PluginFrame/IFrame/hooks.ts |   26 +-
 .../PluginFrame/IFrame/index.stories.tsx      |    2 +-
 .../Plugins/PluginFrame/IFrame/index.test.tsx |   63 +-
 .../Plugins/PluginFrame/IFrame/index.tsx      |    6 +-
 .../Plugins/PluginFrame/PluginIFrame/hooks.ts |    5 +-
 .../PluginFrame/PluginIFrame/index.tsx        |   14 +-
 .../PluginFrame/PluginIFrame/useIFrame.ts     |   15 +-
 .../PluginIFrame/usePostMessage.test.ts       |    3 +-
 .../Plugins/PluginFrame/SafeIFrame/hooks.ts   |   19 +-
 .../PluginFrame/SafeIFrame/index.stories.tsx  |    2 +-
 .../Plugins/PluginFrame/SafeIFrame/index.tsx  |    6 +-
 .../PluginFrame/SafeIFrame/utils.test.ts      |    4 +-
 .../Crust/Plugins/PluginFrame/hooks.ts        |   12 +-
 .../Plugins/PluginFrame/index.stories.tsx     |   20 +-
 .../Crust/Plugins/PluginFrame/index.tsx       |   17 +-
 .../Visualizer/Crust/Plugins/context.tsx      |    7 +-
 .../Visualizer/Crust/Plugins/hooks/index.ts   |    7 +-
 .../Crust/Plugins/hooks/useCamera.ts          |   34 +-
 .../Crust/Plugins/hooks/useDeprecated.ts      |   72 +-
 .../Crust/Plugins/hooks/useExtension.ts       |    7 +-
 .../Crust/Plugins/hooks/useLayers.ts          |   38 +-
 .../Crust/Plugins/hooks/useSketch.ts          |   42 +-
 .../Crust/Plugins/hooks/useTimeline.ts        |   14 +-
 .../Crust/Plugins/hooks/useViewer.ts          |   35 +-
 .../Crust/Plugins/pluginAPI/commonReearth.ts  |   23 +-
 .../Crust/Plugins/pluginAPI/exposedReearth.ts |   85 +-
 .../Plugins/pluginAPI/pluginAPIv1Types.ts     |   67 +-
 .../Crust/Plugins/pluginAPI/types/camera.ts   |    5 +-
 .../Crust/Plugins/pluginAPI/types/layers.ts   |   18 +-
 .../Crust/Plugins/pluginAPI/types/timeline.ts |    4 +-
 .../Crust/Plugins/pluginAPI/types/viewer.ts   |   26 +-
 .../Visualizer/Crust/Plugins/storybook.tsx    |   11 +-
 .../Visualizer/Crust/Plugins/types.ts         |   11 +-
 .../Crust/Plugins/useClientStorage.ts         |   14 +-
 .../Crust/Plugins/usePluginInstances.ts       |   59 +-
 .../Visualizer/Crust/Plugins/utils/events.ts  |   49 +-
 .../Block/builtin/Camera/Content.tsx          |   43 +-
 .../Block/builtin/Camera/Editor/hooks.ts      |   56 +-
 .../Block/builtin/Camera/Editor/index.tsx     |   46 +-
 .../StoryPanel/Block/builtin/Camera/index.tsx |   13 +-
 .../StoryPanel/Block/builtin/Image/index.tsx  |   12 +-
 .../Block/builtin/Layer/Content.tsx           |   34 +-
 .../Block/builtin/Layer/Editor/hooks.ts       |   51 +-
 .../Block/builtin/Layer/Editor/index.tsx      |   49 +-
 .../StoryPanel/Block/builtin/Layer/index.tsx  |   13 +-
 .../StoryPanel/Block/builtin/Link/Content.tsx |   34 +-
 .../Block/builtin/Link/Editor/hooks.ts        |   51 +-
 .../Block/builtin/Link/Editor/index.tsx       |   47 +-
 .../StoryPanel/Block/builtin/Link/index.tsx   |   13 +-
 .../Block/builtin/Markdown/Editor.tsx         |   28 +-
 .../Block/builtin/Markdown/index.tsx          |   30 +-
 .../Block/builtin/NextPage/index.tsx          |   15 +-
 .../StoryPanel/Block/builtin/Text/Editor.tsx  |   29 +-
 .../StoryPanel/Block/builtin/Text/index.tsx   |    6 +-
 .../Block/builtin/Timeline/Editor.tsx         |  142 +-
 .../StoryPanel/Block/builtin/Timeline/hook.ts |  120 +-
 .../Block/builtin/Timeline/index.tsx          |   12 +-
 .../StoryPanel/Block/builtin/Title/index.tsx  |   14 +-
 .../Block/builtin/Video/VideoPlayer.tsx       |   13 +-
 .../StoryPanel/Block/builtin/Video/index.tsx  |   20 +-
 .../Crust/StoryPanel/Block/builtin/index.ts   |    4 +-
 .../Crust/StoryPanel/Block/index.tsx          |   21 +-
 .../Visualizer/Crust/StoryPanel/Page/hooks.ts |   30 +-
 .../Crust/StoryPanel/Page/index.tsx           |   41 +-
 .../PageIndicator/IndicatorSection.tsx        |   42 +-
 .../Crust/StoryPanel/PageIndicator/index.tsx  |   10 +-
 .../Crust/StoryPanel/PanelContent/hooks.ts    |   23 +-
 .../Crust/StoryPanel/PanelContent/index.tsx   |   71 +-
 .../Visualizer/Crust/StoryPanel/constants.ts  |   14 +-
 .../Visualizer/Crust/StoryPanel/context.tsx   |    9 +-
 .../Visualizer/Crust/StoryPanel/hooks.ts      |   85 +-
 .../Visualizer/Crust/StoryPanel/index.tsx     |   40 +-
 .../Visualizer/Crust/StoryPanel/utils.ts      |   50 +-
 .../Widget/builtin/Button/MenuButton.tsx      |  152 +-
 .../Widget/builtin/Button/index.stories.tsx   |    2 +-
 .../Widgets/Widget/builtin/Button/index.tsx   |   11 +-
 .../Widget/builtin/Navigator/UI/hooks.ts      |   67 +-
 .../builtin/Navigator/UI/index.stories.tsx    |    4 +-
 .../builtin/Navigator/UI/index.test.tsx       |    5 +-
 .../Widget/builtin/Navigator/UI/index.tsx     |   46 +-
 .../Widget/builtin/Navigator/UI/utils.test.ts |    7 +-
 .../Widgets/Widget/builtin/Navigator/hooks.ts |    7 +-
 .../builtin/Navigator/index.stories.tsx       |    2 +-
 .../builtin/Timeline/UI/ScaleList.test.tsx    |   16 +-
 .../Widget/builtin/Timeline/UI/ScaleList.tsx  |  110 +-
 .../Widget/builtin/Timeline/UI/hooks.ts       |   49 +-
 .../Widget/builtin/Timeline/UI/index.test.tsx |   29 +-
 .../Widget/builtin/Timeline/UI/index.tsx      |   65 +-
 .../Widget/builtin/Timeline/UI/utils.test.ts  |   24 +-
 .../Widget/builtin/Timeline/UI/utils.ts       |   19 +-
 .../Widgets/Widget/builtin/Timeline/hooks.ts  |   81 +-
 .../Widget/builtin/Timeline/index.stories.tsx |    2 +-
 .../Widgets/Widget/builtin/Timeline/index.tsx |    6 +-
 .../Crust/Widgets/Widget/builtin/index.ts     |   33 +-
 .../Widgets/Widget/builtin/unsafeWidgets.ts   |   11 +-
 .../Crust/Widgets/Widget/index.stories.tsx    |    2 +-
 .../Visualizer/Crust/Widgets/Widget/index.tsx |   26 +-
 .../Crust/Widgets/WidgetAlignSystem/Area.tsx  |   49 +-
 .../Widgets/WidgetAlignSystem/MobileZone.tsx  |   50 +-
 .../Crust/Widgets/WidgetAlignSystem/Zone.tsx  |    6 +-
 .../Crust/Widgets/WidgetAlignSystem/hooks.ts  |    8 +-
 .../Crust/Widgets/WidgetAlignSystem/index.tsx |   11 +-
 .../Crust/Widgets/WidgetAlignSystem/types.ts  |   15 +-
 .../Crust/Widgets/WidgetAlignSystem/utils.ts  |   14 +-
 .../Crust/Widgets/index.stories.tsx           |    2 +-
 .../Visualizer/Crust/Widgets/index.tsx        |   34 +-
 .../Crust/Widgets/useWidgetAlignSystem.ts     |  246 ++--
 .../beta/features/Visualizer/Crust/context.ts |   44 +-
 .../beta/features/Visualizer/Crust/hooks.tsx  |   12 +-
 .../Visualizer/Crust/index.stories.tsx        |   13 +-
 .../beta/features/Visualizer/Crust/index.tsx  |   42 +-
 .../features/Visualizer/Crust/theme/index.ts  |    3 +-
 .../beta/features/Visualizer/Crust/utils.ts   |   16 +-
 .../features/Visualizer/FovSlider/hooks.ts    |   13 +-
 .../features/Visualizer/FovSlider/index.tsx   |   13 +-
 web/src/beta/features/Visualizer/hooks.ts     |    8 +-
 web/src/beta/features/Visualizer/index.tsx    |   63 +-
 .../shared/components/ActionPanel/index.tsx   |   94 +-
 .../shared/components/BlockAddBar/index.tsx   |   70 +-
 .../shared/components/BlockWrapper/hooks.ts   |   41 +-
 .../shared/components/BlockWrapper/index.tsx  |  100 +-
 .../components/ContentWrapper/index.tsx       |   78 +-
 .../SelectableArea/ActionPanel/hooks.ts       |   27 +-
 .../SelectableArea/ActionPanel/index.tsx      |   37 +-
 .../shared/components/SelectableArea/hooks.ts |    7 +-
 .../components/SelectableArea/index.tsx       |   23 +-
 .../shared/contexts/editModeContext.tsx       |    9 +-
 .../shared/hooks/useElementOnScreen.tsx       |    2 +-
 .../shared/hooks/useFieldComponent.tsx        |  127 +-
 .../shared/hooks/useTimelineBlock.ts          |   43 +-
 .../beta/features/Visualizer/shared/types.ts  |    5 +-
 .../utils/useOverriddenProperty.test.ts       |    4 +-
 .../Visualizer/utils/useOverriddenProperty.ts |   33 +-
 web/src/beta/hooks/navigationHooks.ts         |   13 +-
 web/src/beta/hooks/useAssetUploader/hooks.tsx |   24 +-
 .../beta/hooks/useManageSwitchState/hooks.tsx |    4 +-
 web/src/beta/lib/README.md                    |    2 +-
 .../beta/lib/lexical/RichTextEditor/index.css |   30 +-
 .../beta/lib/lexical/RichTextEditor/index.tsx |   20 +-
 .../lib/lexical/RichTextEditor/nodes/index.ts |    2 +-
 .../RichTextEditor/plugins/AutoLinkPlugin.tsx |   15 +-
 .../FloatingLinkEditorPlugin/index.tsx        |   44 +-
 .../RichTextEditor/plugins/LinkPlugin.tsx     |   15 +-
 .../plugins/ListMaxIndentLevelPlugin.tsx      |   10 +-
 .../plugins/SwitchEditModePlugin.tsx          |    6 +-
 .../RichTextEditor/plugins/ToolbarPlugin.tsx  |  228 ++-
 .../themes/DefaultLexicalEditorTheme.css      |   16 +-
 .../themes/DefaultLexicalEditorTheme.ts       |   12 +-
 .../lexical/RichTextEditor/ui/ColorPicker.tsx |   56 +-
 .../lexical/RichTextEditor/ui/DropDown.tsx    |   32 +-
 .../RichTextEditor/ui/DropdownColorPicker.tsx |    3 +-
 .../lexical/RichTextEditor/ui/TextInput.tsx   |    2 +-
 .../RichTextEditor/utils/getSelectedNode.ts   |    4 +-
 .../lib/lexical/RichTextEditor/utils/url.ts   |    9 +-
 .../components/Breadcrumb/index.stories.tsx   |   14 +-
 .../components/Breadcrumb/index.tsx           |   14 +-
 .../components/Button/index.stories.tsx       |   30 +-
 .../reearth-ui/components/Button/index.tsx    |  160 ++-
 .../reearth-ui/components/CheckBox/index.tsx  |   27 +-
 .../reearth-ui/components/CodeInput/index.tsx |    7 +-
 .../components/Collapse/index.stories.tsx     |   45 +-
 .../reearth-ui/components/Collapse/index.tsx  |   18 +-
 .../reearth-ui/components/ColorInput/hooks.ts |   19 +-
 .../components/ColorInput/index.stories.tsx   |    6 +-
 .../components/ColorInput/index.tsx           |   28 +-
 .../components/DatePicker/index.tsx           |   14 +-
 .../DragAndDropList/index.stories.tsx         |   60 +-
 .../components/DragAndDropList/index.tsx      |   47 +-
 .../components/Icon/index.stories.tsx         |   36 +-
 .../lib/reearth-ui/components/Icon/index.tsx  |   20 +-
 .../components/IconButton/index.stories.tsx   |   38 +-
 .../components/IconButton/index.tsx           |   58 +-
 .../reearth-ui/components/Loading/index.tsx   |   42 +-
 .../reearth-ui/components/Markdown/index.tsx  |  116 +-
 .../components/Modal/index.stories.tsx        |   56 +-
 .../lib/reearth-ui/components/Modal/index.tsx |   27 +-
 .../components/ModalPanel/index.stories.tsx   |   22 +-
 .../components/ModalPanel/index.tsx           |   41 +-
 .../components/NumberInput/index.tsx          |   26 +-
 .../components/Popup/index.stories.tsx        |   31 +-
 .../lib/reearth-ui/components/Popup/index.tsx |   72 +-
 .../components/PopupMenu/index.stories.tsx    |   11 +-
 .../reearth-ui/components/PopupMenu/index.tsx |  153 +-
 .../components/PopupPanel/index.stories.tsx   |    7 +-
 .../components/PopupPanel/index.tsx           |   19 +-
 .../lib/reearth-ui/components/Radio/index.tsx |   47 +-
 .../components/Selector/index.stories.tsx     |   16 +-
 .../reearth-ui/components/Selector/index.tsx  |   51 +-
 .../components/Switcher/index.stories.tsx     |    4 +-
 .../reearth-ui/components/Switcher/index.tsx  |   11 +-
 .../components/Tabs/index.stories.tsx         |    6 +-
 .../lib/reearth-ui/components/Tabs/index.tsx  |   66 +-
 .../reearth-ui/components/TextArea/index.tsx  |   13 +-
 .../reearth-ui/components/TextInput/index.tsx |   18 +-
 .../components/TimePicker/index.tsx           |   14 +-
 .../components/Typography/index.tsx           |   20 +-
 web/src/beta/pages/Dashboard/index.tsx        |   11 +-
 web/src/beta/pages/EditorPage/index.tsx       |    7 +-
 .../beta/pages/GraphQLPlayground/index.tsx    |    7 +-
 web/src/beta/pages/Page.tsx                   |   23 +-
 .../beta/pages/PluginPlaygroundPage/index.tsx |    6 +-
 .../beta/pages/ProjectSettingsPage/index.tsx  |   19 +-
 web/src/beta/pages/README.md                  |    2 +-
 .../ui/components/EntryItem/index.stories.tsx |    5 +-
 .../beta/ui/components/EntryItem/index.tsx    |   64 +-
 .../components/ManagerBase/ManagerHeader.tsx  |   81 +-
 .../ManagerBase/ManagerHeaderButton.tsx       |    7 +-
 web/src/beta/ui/components/Sidebar/index.tsx  |   20 +-
 web/src/beta/ui/fields/AssetField/index.tsx   |   17 +-
 .../ui/fields/AssetField/useAssetUpload.ts    |   24 +-
 .../ui/fields/CamersField/CapturePanel.tsx    |    6 +-
 .../ui/fields/CamersField/EditorPanel.tsx     |   23 +-
 web/src/beta/ui/fields/CamersField/hooks.ts   |   11 +-
 web/src/beta/ui/fields/CamersField/index.tsx  |   25 +-
 web/src/beta/ui/fields/CheckboxField.tsx      |    9 +-
 web/src/beta/ui/fields/CodeField.tsx          |   11 +-
 web/src/beta/ui/fields/ColorField.tsx         |    9 +-
 web/src/beta/ui/fields/InputField.tsx         |   14 +-
 web/src/beta/ui/fields/ListField/ListItem.tsx |    8 +-
 .../ui/fields/ListField/index.stories.tsx     |   12 +-
 web/src/beta/ui/fields/ListField/index.tsx    |   25 +-
 web/src/beta/ui/fields/NumberField.tsx        |    9 +-
 .../ui/fields/Properties/ProprtyField.tsx     |   27 +-
 web/src/beta/ui/fields/Properties/hooks.ts    |   21 +-
 web/src/beta/ui/fields/Properties/index.tsx   |   62 +-
 web/src/beta/ui/fields/QuartetInputField.tsx  |   11 +-
 web/src/beta/ui/fields/RangeField.tsx         |    9 +-
 web/src/beta/ui/fields/SelectField.tsx        |    9 +-
 web/src/beta/ui/fields/SpacingField.tsx       |   12 +-
 web/src/beta/ui/fields/SwitchField.tsx        |    9 +-
 web/src/beta/ui/fields/TextareaField.tsx      |    9 +-
 .../ui/fields/TimePeriodField/EditModal.tsx   |   19 +-
 .../beta/ui/fields/TimePeriodField/hooks.ts   |    9 +-
 .../beta/ui/fields/TimePeriodField/index.tsx  |   19 +-
 .../ui/fields/TimePointField/EditPanel.tsx    |   16 +-
 .../beta/ui/fields/TimePointField/hooks.ts    |   26 +-
 .../beta/ui/fields/TimePointField/index.tsx   |    6 +-
 web/src/beta/ui/fields/TripletInputField.tsx  |   11 +-
 web/src/beta/ui/fields/TwinInputField.tsx     |   11 +-
 web/src/beta/ui/fields/index.stories.tsx      |    3 +-
 web/src/beta/ui/fields/utils.ts               |   17 +-
 web/src/beta/ui/layout/Area/index.stories.tsx |   18 +-
 web/src/beta/ui/layout/Area/index.tsx         |  171 ++-
 .../beta/ui/layout/Panel/index.stories.tsx    |   11 +-
 web/src/beta/ui/layout/Panel/index.tsx        |   10 +-
 web/src/beta/utils/README.md                  |    2 +-
 web/src/beta/utils/convert-object.ts          |   10 +-
 web/src/beta/utils/deepFind.test.ts           |   12 +-
 web/src/beta/utils/file.ts                    |    4 +-
 web/src/beta/utils/generate-random-string.ts  |    5 +-
 web/src/beta/utils/infinite-scroll.ts         |    5 +-
 web/src/beta/utils/localstorage.ts            |    5 +-
 web/src/beta/utils/moment-timezone.ts         |    2 +-
 web/src/beta/utils/object.ts                  |   14 +-
 web/src/beta/utils/raf.ts                     |    9 +-
 web/src/beta/utils/time.ts                    |    4 +-
 web/src/beta/utils/use-dnd/drag.ts            |    5 +-
 web/src/beta/utils/use-dnd/drop.ts            |   31 +-
 web/src/beta/utils/use-dnd/index.tsx          |    7 +-
 web/src/beta/utils/use-dnd/types.ts           |    7 +-
 web/src/beta/utils/util.ts                    |   24 +-
 web/src/beta/utils/value.ts                   |   36 +-
 web/src/env.d.ts                              |    8 +-
 web/src/services/README.md                    |    2 +-
 web/src/services/api/assetsApi.ts             |   67 +-
 .../api/featureCollectionApi/index.ts         |   44 +-
 web/src/services/api/infoboxApi/blocks.ts     |   46 +-
 web/src/services/api/infoboxApi/index.tsx     |   16 +-
 web/src/services/api/layerStyleApi/index.ts   |   87 +-
 web/src/services/api/layerStyleApi/utils.ts   |    3 +-
 web/src/services/api/layersApi/index.ts       |   97 +-
 web/src/services/api/layersApi/utils.ts       |   14 +-
 web/src/services/api/pluginsApi.ts            |   15 +-
 web/src/services/api/projectApi.ts            |  175 ++-
 web/src/services/api/propertyApi/index.ts     |   47 +-
 web/src/services/api/propertyApi/utils.ts     |   80 +-
 web/src/services/api/sceneApi.ts              |   11 +-
 .../services/api/storytellingApi/blocks.ts    |   92 +-
 web/src/services/api/storytellingApi/index.ts |   58 +-
 web/src/services/api/storytellingApi/pages.ts |   47 +-
 web/src/services/api/storytellingApi/utils.ts |    9 +-
 web/src/services/api/teams/index.ts           |   11 +-
 web/src/services/api/toGqlStatus.ts           |    4 +-
 web/src/services/api/types.ts                 |    2 +-
 web/src/services/api/widgetsApi/index.ts      |   83 +-
 web/src/services/api/widgetsApi/utils.ts      |   40 +-
 web/src/services/api/workspacesApi.ts         |   19 +-
 web/src/services/auth/auth0Auth.ts            |   11 +-
 web/src/services/auth/authProvider.tsx        |   14 +-
 web/src/services/auth/cognitoAuth.ts          |   12 +-
 web/src/services/auth/index.tsx               |   12 +-
 web/src/services/auth/useAuth.ts              |   19 +-
 web/src/services/config/extensions.ts         |   18 +-
 web/src/services/config/index.ts              |   22 +-
 web/src/services/config/passwordPolicy.ts     |    8 +-
 .../services/config/unsafeBuiltinPlugin.ts    |   12 +-
 web/src/services/gql/fragments/layer.ts       |    6 +-
 web/src/services/gql/provider/index.tsx       |   30 +-
 web/src/services/gql/provider/pagination.ts   |   12 +-
 web/src/services/i18n/i18n.ts                 |    1 -
 web/src/services/i18n/locale.ts               |    4 +-
 web/src/services/i18n/publishedProvider.tsx   |    6 +-
 web/src/services/routing/index.tsx            |   17 +-
 web/src/services/state/devPlugins.ts          |    7 +-
 web/src/services/state/index.ts               |    9 +-
 web/src/services/theme/emotion.d.ts           |    1 -
 web/src/services/theme/publishTheme/index.ts  |    4 +-
 web/src/services/theme/publishTheme/utils.ts  |   13 +-
 .../theme/reearthTheme/common/fonts.ts        |    4 +-
 .../theme/reearthTheme/darkTheme/index.ts     |    5 +-
 .../theme/reearthTheme/lightTheme/index.ts    |    5 +-
 web/src/test/setup.ts                         |   11 +-
 web/src/test/utils.tsx                        |    7 +-
 web/src/types.ts                              |   48 +-
 web/src/wdyr.ts                               |    4 +-
 web/tsconfig.json                             |   27 +-
 web/vite.config.ts                            |   25 +-
 web/yarn.lock                                 | 1243 ++++++++++-------
 600 files changed, 11082 insertions(+), 5987 deletions(-)
 delete mode 100644 web/.eslintignore
 delete mode 100644 web/.eslintrc.yml
 create mode 100644 web/eslint.config.mjs

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 0181837e9..ce38e5185 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,7 +4,9 @@
 	// List of extensions which should be recommended for users of this workspace.
 	"recommendations": [
 		"golang.go",
-		"redhat.vscode-yaml"
+		"redhat.vscode-yaml",
+		"dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": []
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ab2e48a8d..7b8d51d19 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,6 @@
 {
   "go.testEnvFile": "${workspaceRoot}/.env",
   "go.lintTool": "golangci-lint",
-  "editor.formatOnSave": true,
   "yaml.format.enable": false,
   "yaml.completion": true,
   "yaml.validate": true,
@@ -17,20 +16,34 @@
   },
   "json.schemas": [
     {
-      "fileMatch": [
-        "/server/pkg/builtin/manifest.json"
-      ],
+      "fileMatch": ["/server/pkg/builtin/manifest.json"],
       "url": "./server/schemas/plugin_manifest.json"
     },
     {
-      "fileMatch": [
-        "/server/pkg/builtin/manifest_*.json"
-      ],
+      "fileMatch": ["/server/pkg/builtin/manifest_*.json"],
       "url": "./server/schemas/plugin_manifest_translation.json"
     }
   ],
   "[yaml]": {
     "editor.formatOnSave": false
   },
-  "prettier.enable": false
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "eslint.enable": true,
+  "eslint.useFlatConfig": true,
+  "prettier.enable": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/web/.eslintignore b/web/.eslintignore
deleted file mode 100644
index 95ced518e..000000000
--- a/web/.eslintignore
+++ /dev/null
@@ -1,7 +0,0 @@
-/build
-/dist
-/coverage
-/storybook-static
-!/.storybook
-/.storybook/public
-/src/services/gql/__gen__
\ No newline at end of file
diff --git a/web/.eslintrc.yml b/web/.eslintrc.yml
deleted file mode 100644
index 0102080ce..000000000
--- a/web/.eslintrc.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-extends:
-  - reearth
-root: true
-rules:
-  no-restricted-imports:
-    - error
-    - paths:
-        - name: lodash
-          message: Use lodash-es instead.
-  import/order:
-    - warn
-    - pathGroups:
-        - pattern: "@reearth/**"
-          group: external
-          position: after
-      pathGroupsExcludedImportTypes: ["builtin"]
-      newlines-between: always
-      alphabetize:
-        order: asc
-        caseInsensitive: true
-overrides:
-  - files:
-      - e2e/**/*
-    extends:
-      - reearth/node
-      - plugin:playwright/playwright-test
-    env:
-      browser: false
-    rules:
-      no-restricted-imports:
-        - error
-        - paths:
-            - name: "@playwright/test"
-              message: Use @reearth/e2e/utils instead.
-  - files:
-      - i18next-parser.config.js
-    extends:
-      - reearth/commonjs
-  - files: src/beta/**
-    rules:
-      "@typescript-eslint/no-explicit-any":
-        - warn
diff --git a/web/.huskyrc.json b/web/.huskyrc.json
index 05ea0d92b..4d077c829 100644
--- a/web/.huskyrc.json
+++ b/web/.huskyrc.json
@@ -2,4 +2,4 @@
   "hooks": {
     "pre-commit": "lint-staged"
   }
-}
\ No newline at end of file
+}
diff --git a/web/.prettierignore b/web/.prettierignore
index ec6d3cdd7..d85205ac1 100644
--- a/web/.prettierignore
+++ b/web/.prettierignore
@@ -1 +1,3 @@
 package.json
+**/__gen__/**
+src/services/i18n/translations/*.yml
\ No newline at end of file
diff --git a/web/.storybook/preview-head.html b/web/.storybook/preview-head.html
index bc16b3abc..c6ce14c85 100644
--- a/web/.storybook/preview-head.html
+++ b/web/.storybook/preview-head.html
@@ -1,7 +1,10 @@
 <style>
   /* enable page scroll for docs page */
-  body:has(#storybook-docs .sbdocs){
+  body:has(#storybook-docs .sbdocs) {
     overflow-y: auto !important;
   }
 </style>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
\ No newline at end of file
+<link
+  href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
+  rel="stylesheet"
+/>
diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
index 215f8c77d..c6f3184ee 100644
--- a/web/.storybook/preview.tsx
+++ b/web/.storybook/preview.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   ApolloProvider,
   ApolloClient,
@@ -21,7 +20,7 @@ import theme from "./theme";
 const mockClient = new ApolloClient({
   link: new ApolloLink(
     () =>
-      new Observable(observer => {
+      new Observable((observer) => {
         observer.complete();
       }),
   ),
@@ -53,7 +52,7 @@ const preview: Preview = {
       Provider: ThemeProvider,
       GlobalStyles,
     }),
-    Story => {
+    (Story) => {
       return (
         <ApolloProvider client={mockClient}>
           <I18nProvider>
diff --git a/web/.storybook/public/plugins/block.js b/web/.storybook/public/plugins/block.js
index 75b4e57be..cf203dd3d 100644
--- a/web/.storybook/public/plugins/block.js
+++ b/web/.storybook/public/plugins/block.js
@@ -34,6 +34,6 @@ reearth.ui.show(html);
 reearth.on("update", () => {
   reearth.ui.postMessage(reearth.block);
 });
-reearth.on("message", msg => {
+reearth.on("message", (msg) => {
   console.log("message received:", msg);
 });
diff --git a/web/.storybook/public/sample.geojson b/web/.storybook/public/sample.geojson
index 5593349c5..8a8185bbc 100644
--- a/web/.storybook/public/sample.geojson
+++ b/web/.storybook/public/sample.geojson
@@ -5,10 +5,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -47.18951431751117,
-          -24.789938520384457
-        ]
+        "coordinates": [-47.18951431751117, -24.789938520384457]
       },
       "properties": {}
     },
@@ -16,10 +13,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          155.84221983372979,
-          74.01264716547318
-        ]
+        "coordinates": [155.84221983372979, 74.01264716547318]
       },
       "properties": {}
     },
@@ -27,10 +21,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          110.07076785868927,
-          -89.46999216488513
-        ]
+        "coordinates": [110.07076785868927, -89.46999216488513]
       },
       "properties": {}
     },
@@ -38,10 +29,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -99.86847083205676,
-          63.7797307132169
-        ]
+        "coordinates": [-99.86847083205676, 63.7797307132169]
       },
       "properties": {}
     },
@@ -49,10 +37,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -113.37578194870969,
-          -76.69367044221802
-        ]
+        "coordinates": [-113.37578194870969, -76.69367044221802]
       },
       "properties": {}
     },
@@ -60,10 +45,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          72.72561073468972,
-          -66.07423396540386
-        ]
+        "coordinates": [72.72561073468972, -66.07423396540386]
       },
       "properties": {}
     },
@@ -71,10 +53,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -40.760352456527926,
-          35.2020395893229
-        ]
+        "coordinates": [-40.760352456527926, 35.2020395893229]
       },
       "properties": {}
     },
@@ -82,10 +61,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          64.5926351271439,
-          -44.17513767822357
-        ]
+        "coordinates": [64.5926351271439, -44.17513767822357]
       },
       "properties": {}
     },
@@ -93,10 +69,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -42.09615220517878,
-          -33.50335584434493
-        ]
+        "coordinates": [-42.09615220517878, -33.50335584434493]
       },
       "properties": {}
     },
@@ -104,10 +77,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -149.22492792801265,
-          21.841224879347543
-        ]
+        "coordinates": [-149.22492792801265, 21.841224879347543]
       },
       "properties": {}
     },
@@ -115,10 +85,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          84.29321157015941,
-          0.07515859608883346
-        ]
+        "coordinates": [84.29321157015941, 0.07515859608883346]
       },
       "properties": {}
     },
@@ -126,10 +93,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -78.3095833369632,
-          4.117647950235579
-        ]
+        "coordinates": [-78.3095833369632, 4.117647950235579]
       },
       "properties": {}
     },
@@ -137,10 +101,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -148.5588515858767,
-          -63.777936872357444
-        ]
+        "coordinates": [-148.5588515858767, -63.777936872357444]
       },
       "properties": {}
     },
@@ -148,10 +109,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -100.10454457712412,
-          86.03524243483149
-        ]
+        "coordinates": [-100.10454457712412, 86.03524243483149]
       },
       "properties": {}
     },
@@ -159,10 +117,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          13.436120209269031,
-          82.41150556167928
-        ]
+        "coordinates": [13.436120209269031, 82.41150556167928]
       },
       "properties": {}
     },
@@ -170,10 +125,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          124.28432367091438,
-          8.144080311051605
-        ]
+        "coordinates": [124.28432367091438, 8.144080311051605]
       },
       "properties": {}
     },
@@ -181,10 +133,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -173.04327936439537,
-          -72.49509733559518
-        ]
+        "coordinates": [-173.04327936439537, -72.49509733559518]
       },
       "properties": {}
     },
@@ -192,10 +141,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -96.18937306090523,
-          -57.13860396512657
-        ]
+        "coordinates": [-96.18937306090523, -57.13860396512657]
       },
       "properties": {}
     },
@@ -203,10 +149,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          94.57455414504705,
-          68.25466741220373
-        ]
+        "coordinates": [94.57455414504705, 68.25466741220373]
       },
       "properties": {}
     },
@@ -214,10 +157,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          81.74710445221764,
-          -70.17136693930061
-        ]
+        "coordinates": [81.74710445221764, -70.17136693930061]
       },
       "properties": {}
     },
@@ -225,10 +165,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -175.60441108831705,
-          -5.460861619300985
-        ]
+        "coordinates": [-175.60441108831705, -5.460861619300985]
       },
       "properties": {}
     },
@@ -236,10 +173,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -141.4436798546378,
-          73.45550273035175
-        ]
+        "coordinates": [-141.4436798546378, 73.45550273035175]
       },
       "properties": {}
     },
@@ -247,10 +181,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -146.00894799433456,
-          68.81252435965777
-        ]
+        "coordinates": [-146.00894799433456, 68.81252435965777]
       },
       "properties": {}
     },
@@ -258,10 +189,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -141.1682273861793,
-          -75.59589534868311
-        ]
+        "coordinates": [-141.1682273861793, -75.59589534868311]
       },
       "properties": {}
     },
@@ -269,10 +197,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -65.48510873602658,
-          63.81204037415824
-        ]
+        "coordinates": [-65.48510873602658, 63.81204037415824]
       },
       "properties": {}
     },
@@ -280,10 +205,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -138.04168562826547,
-          -35.12478156027714
-        ]
+        "coordinates": [-138.04168562826547, -35.12478156027714]
       },
       "properties": {}
     },
@@ -291,10 +213,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -7.345168851766726,
-          10.815197462658052
-        ]
+        "coordinates": [-7.345168851766726, 10.815197462658052]
       },
       "properties": {}
     },
@@ -302,10 +221,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -88.88438521329691,
-          -51.135607358754754
-        ]
+        "coordinates": [-88.88438521329691, -51.135607358754754]
       },
       "properties": {}
     },
@@ -313,10 +229,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          138.43728672485503,
-          -49.28473394997033
-        ]
+        "coordinates": [138.43728672485503, -49.28473394997033]
       },
       "properties": {}
     },
@@ -324,10 +237,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          121.91193801130521,
-          43.62048233138311
-        ]
+        "coordinates": [121.91193801130521, 43.62048233138311]
       },
       "properties": {}
     },
@@ -335,10 +245,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -106.01217795615815,
-          86.58776759386622
-        ]
+        "coordinates": [-106.01217795615815, 86.58776759386622]
       },
       "properties": {}
     },
@@ -346,10 +253,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          155.15099140482403,
-          64.4291884202601
-        ]
+        "coordinates": [155.15099140482403, 64.4291884202601]
       },
       "properties": {}
     },
@@ -357,10 +261,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          6.285539827907183,
-          43.07090989642467
-        ]
+        "coordinates": [6.285539827907183, 43.07090989642467]
       },
       "properties": {}
     },
@@ -368,10 +269,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          173.4289638276471,
-          82.07788534436796
-        ]
+        "coordinates": [173.4289638276471, 82.07788534436796]
       },
       "properties": {}
     },
@@ -379,10 +277,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -135.69217883585586,
-          -85.81180716608387
-        ]
+        "coordinates": [-135.69217883585586, -85.81180716608387]
       },
       "properties": {}
     },
@@ -390,10 +285,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -60.29750446366873,
-          63.14262347620537
-        ]
+        "coordinates": [-60.29750446366873, 63.14262347620537]
       },
       "properties": {}
     },
@@ -401,10 +293,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -62.65524929885156,
-          82.76057831274042
-        ]
+        "coordinates": [-62.65524929885156, 82.76057831274042]
       },
       "properties": {}
     },
@@ -412,10 +301,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          3.647638695141726,
-          60.28437784958815
-        ]
+        "coordinates": [3.647638695141726, 60.28437784958815]
       },
       "properties": {}
     },
@@ -423,10 +309,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          66.07623950766029,
-          -53.519719711469676
-        ]
+        "coordinates": [66.07623950766029, -53.519719711469676]
       },
       "properties": {}
     },
@@ -434,10 +317,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -103.32561477332257,
-          -28.078600679457146
-        ]
+        "coordinates": [-103.32561477332257, -28.078600679457146]
       },
       "properties": {}
     },
@@ -445,10 +325,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          117.02433904022372,
-          -6.075675781895833
-        ]
+        "coordinates": [117.02433904022372, -6.075675781895833]
       },
       "properties": {}
     },
@@ -456,10 +333,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -77.05424621483276,
-          -88.18362440176043
-        ]
+        "coordinates": [-77.05424621483276, -88.18362440176043]
       },
       "properties": {}
     },
@@ -467,10 +341,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -107.24413765555809,
-          -53.31111388966479
-        ]
+        "coordinates": [-107.24413765555809, -53.31111388966479]
       },
       "properties": {}
     },
@@ -478,10 +349,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -46.29469818008551,
-          77.06906016616188
-        ]
+        "coordinates": [-46.29469818008551, 77.06906016616188]
       },
       "properties": {}
     },
@@ -489,10 +357,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          90.62559625004982,
-          -58.12741750202258
-        ]
+        "coordinates": [90.62559625004982, -58.12741750202258]
       },
       "properties": {}
     },
@@ -500,10 +365,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          72.97403970358879,
-          53.71220806128216
-        ]
+        "coordinates": [72.97403970358879, 53.71220806128216]
       },
       "properties": {}
     },
@@ -511,10 +373,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -6.423696645118504,
-          -54.62053611672645
-        ]
+        "coordinates": [-6.423696645118504, -54.62053611672645]
       },
       "properties": {}
     },
@@ -522,10 +381,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -92.57863432629472,
-          39.1899433173881
-        ]
+        "coordinates": [-92.57863432629472, 39.1899433173881]
       },
       "properties": {}
     },
@@ -533,10 +389,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          94.3018895274722,
-          -37.87978124619209
-        ]
+        "coordinates": [94.3018895274722, -37.87978124619209]
       },
       "properties": {}
     },
@@ -544,10 +397,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -59.63452453725998,
-          9.312835101197606
-        ]
+        "coordinates": [-59.63452453725998, 9.312835101197606]
       },
       "properties": {}
     },
@@ -555,10 +405,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          32.74313358469327,
-          -58.71018187460506
-        ]
+        "coordinates": [32.74313358469327, -58.71018187460506]
       },
       "properties": {}
     },
@@ -566,10 +413,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          54.08213637169812,
-          73.56937517387249
-        ]
+        "coordinates": [54.08213637169812, 73.56937517387249]
       },
       "properties": {}
     },
@@ -577,10 +421,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          71.66115695922338,
-          89.34765770532591
-        ]
+        "coordinates": [71.66115695922338, 89.34765770532591]
       },
       "properties": {}
     },
@@ -588,10 +429,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          148.22009937003904,
-          16.440042348147017
-        ]
+        "coordinates": [148.22009937003904, 16.440042348147017]
       },
       "properties": {}
     },
@@ -599,10 +437,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          109.96961209627963,
-          1.317883999627374
-        ]
+        "coordinates": [109.96961209627963, 1.317883999627374]
       },
       "properties": {}
     },
@@ -610,10 +445,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          89.11392432194302,
-          7.187090763173218
-        ]
+        "coordinates": [89.11392432194302, 7.187090763173218]
       },
       "properties": {}
     },
@@ -621,10 +453,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          7.397089922527362,
-          -14.49479933018607
-        ]
+        "coordinates": [7.397089922527362, -14.49479933018607]
       },
       "properties": {}
     },
@@ -632,10 +461,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -63.33632164620309,
-          6.614277893452294
-        ]
+        "coordinates": [-63.33632164620309, 6.614277893452294]
       },
       "properties": {}
     },
@@ -643,10 +469,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          55.60109788024797,
-          -50.53410339369433
-        ]
+        "coordinates": [55.60109788024797, -50.53410339369433]
       },
       "properties": {}
     },
@@ -654,10 +477,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          32.18277610111382,
-          22.619992552016637
-        ]
+        "coordinates": [32.18277610111382, 22.619992552016637]
       },
       "properties": {}
     },
@@ -665,10 +485,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          117.20235858298702,
-          -38.274881672283044
-        ]
+        "coordinates": [117.20235858298702, -38.274881672283044]
       },
       "properties": {}
     },
@@ -676,10 +493,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -148.48865535761198,
-          -45.39820754754232
-        ]
+        "coordinates": [-148.48865535761198, -45.39820754754232]
       },
       "properties": {}
     },
@@ -687,10 +501,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -172.18848840185686,
-          -4.842754863901573
-        ]
+        "coordinates": [-172.18848840185686, -4.842754863901573]
       },
       "properties": {}
     },
@@ -698,10 +509,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          43.00795052700316,
-          -44.82394719401794
-        ]
+        "coordinates": [43.00795052700316, -44.82394719401794]
       },
       "properties": {}
     },
@@ -709,10 +517,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          7.984586790965764,
-          -76.02586619776837
-        ]
+        "coordinates": [7.984586790965764, -76.02586619776837]
       },
       "properties": {}
     },
@@ -720,10 +525,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          68.39612181028589,
-          43.278002948463346
-        ]
+        "coordinates": [68.39612181028589, 43.278002948463346]
       },
       "properties": {}
     },
@@ -731,10 +533,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          132.2033282476544,
-          27.382666929097876
-        ]
+        "coordinates": [132.2033282476544, 27.382666929097876]
       },
       "properties": {}
     },
@@ -742,10 +541,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -162.00643498458444,
-          36.01867885338586
-        ]
+        "coordinates": [-162.00643498458444, 36.01867885338586]
       },
       "properties": {}
     },
@@ -753,10 +549,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          43.346305680126285,
-          51.45674000464121
-        ]
+        "coordinates": [43.346305680126285, 51.45674000464121]
       },
       "properties": {}
     },
@@ -764,10 +557,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          60.99605027146011,
-          -75.43512302422783
-        ]
+        "coordinates": [60.99605027146011, -75.43512302422783]
       },
       "properties": {}
     },
@@ -775,10 +565,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          117.286795694323,
-          -33.18659469474927
-        ]
+        "coordinates": [117.286795694323, -33.18659469474927]
       },
       "properties": {}
     },
@@ -786,10 +573,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -104.77795396770827,
-          -65.654248002992
-        ]
+        "coordinates": [-104.77795396770827, -65.654248002992]
       },
       "properties": {}
     },
@@ -797,10 +581,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -83.81159332418417,
-          89.66881367669653
-        ]
+        "coordinates": [-83.81159332418417, 89.66881367669653]
       },
       "properties": {}
     },
@@ -808,10 +589,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -145.1702655049707,
-          -63.04204514510235
-        ]
+        "coordinates": [-145.1702655049707, -63.04204514510235]
       },
       "properties": {}
     },
@@ -819,10 +597,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          51.73970902606021,
-          72.56187337601145
-        ]
+        "coordinates": [51.73970902606021, 72.56187337601145]
       },
       "properties": {}
     },
@@ -830,10 +605,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -89.51497017142346,
-          -11.642594253819322
-        ]
+        "coordinates": [-89.51497017142346, -11.642594253819322]
       },
       "properties": {}
     },
@@ -841,10 +613,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          78.90593679381274,
-          -37.74321668577914
-        ]
+        "coordinates": [78.90593679381274, -37.74321668577914]
       },
       "properties": {}
     },
@@ -852,10 +621,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -151.65592145690476,
-          83.91736494909414
-        ]
+        "coordinates": [-151.65592145690476, 83.91736494909414]
       },
       "properties": {}
     },
@@ -863,10 +629,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          101.09924453183163,
-          -86.4968375258272
-        ]
+        "coordinates": [101.09924453183163, -86.4968375258272]
       },
       "properties": {}
     },
@@ -874,10 +637,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          89.5887631550857,
-          -70.98316756584224
-        ]
+        "coordinates": [89.5887631550857, -70.98316756584224]
       },
       "properties": {}
     },
@@ -885,10 +645,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          110.88640089233499,
-          -61.394756050132145
-        ]
+        "coordinates": [110.88640089233499, -61.394756050132145]
       },
       "properties": {}
     },
@@ -896,10 +653,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -6.408007048114506,
-          -13.206655474747105
-        ]
+        "coordinates": [-6.408007048114506, -13.206655474747105]
       },
       "properties": {}
     },
@@ -907,10 +661,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -80.34145911471012,
-          47.09413813141
-        ]
+        "coordinates": [-80.34145911471012, 47.09413813141]
       },
       "properties": {}
     },
@@ -918,10 +669,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -98.52823413653272,
-          -75.34243719432504
-        ]
+        "coordinates": [-98.52823413653272, -75.34243719432504]
       },
       "properties": {}
     },
@@ -929,10 +677,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -8.397659944248783,
-          -41.335025921318504
-        ]
+        "coordinates": [-8.397659944248783, -41.335025921318504]
       },
       "properties": {}
     },
@@ -940,10 +685,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          156.84815091050078,
-          25.87816836338686
-        ]
+        "coordinates": [156.84815091050078, 25.87816836338686]
       },
       "properties": {}
     },
@@ -951,10 +693,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          139.09672720530364,
-          37.35325706292393
-        ]
+        "coordinates": [139.09672720530364, 37.35325706292393]
       },
       "properties": {}
     },
@@ -962,10 +701,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          8.793646682558673,
-          -34.68886988597508
-        ]
+        "coordinates": [8.793646682558673, -34.68886988597508]
       },
       "properties": {}
     },
@@ -973,10 +709,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          106.93267903996136,
-          -20.689254088169832
-        ]
+        "coordinates": [106.93267903996136, -20.689254088169832]
       },
       "properties": {}
     },
@@ -984,10 +717,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          76.51651800557826,
-          66.15715833700494
-        ]
+        "coordinates": [76.51651800557826, 66.15715833700494]
       },
       "properties": {}
     },
@@ -995,10 +725,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -179.33101817473622,
-          -24.97493845676012
-        ]
+        "coordinates": [-179.33101817473622, -24.97493845676012]
       },
       "properties": {}
     },
@@ -1006,10 +733,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          43.88474876000892,
-          60.44898938781364
-        ]
+        "coordinates": [43.88474876000892, 60.44898938781364]
       },
       "properties": {}
     },
@@ -1017,10 +741,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          -23.74702773345115,
-          56.44480168552528
-        ]
+        "coordinates": [-23.74702773345115, 56.44480168552528]
       },
       "properties": {}
     },
@@ -1028,10 +749,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          89.1965818771476,
-          -63.127928972824996
-        ]
+        "coordinates": [89.1965818771476, -63.127928972824996]
       },
       "properties": {}
     },
@@ -1039,10 +757,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          139.17803502371603,
-          76.80553072643481
-        ]
+        "coordinates": [139.17803502371603, 76.80553072643481]
       },
       "properties": {}
     },
@@ -1050,10 +765,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          138.04162199308098,
-          -14.6234595277084
-        ]
+        "coordinates": [138.04162199308098, -14.6234595277084]
       },
       "properties": {}
     },
@@ -1061,10 +773,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          174.31317825590452,
-          12.57531175694111
-        ]
+        "coordinates": [174.31317825590452, 12.57531175694111]
       },
       "properties": {}
     },
@@ -1072,10 +781,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          36.826555455819346,
-          15.871073075400028
-        ]
+        "coordinates": [36.826555455819346, 15.871073075400028]
       },
       "properties": {}
     },
@@ -1083,10 +789,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          84.65234855310884,
-          15.736922349868095
-        ]
+        "coordinates": [84.65234855310884, 15.736922349868095]
       },
       "properties": {}
     },
@@ -1094,10 +797,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [
-          97.5413389416346,
-          -58.1831539942764
-        ]
+        "coordinates": [97.5413389416346, -58.1831539942764]
       },
       "properties": {}
     }
diff --git a/web/.storybook/public/testdata/sample.gltf b/web/.storybook/public/testdata/sample.gltf
index e7d915e19..5e7945f84 100644
--- a/web/.storybook/public/testdata/sample.gltf
+++ b/web/.storybook/public/testdata/sample.gltf
@@ -1,70 +1,72 @@
- {
+{
   "scene": 0,
-  "scenes" : [
+  "scenes": [
     {
-      "nodes" : [ 0 ]
+      "nodes": [0]
     }
   ],
-  
-  "nodes" : [
+
+  "nodes": [
     {
-      "mesh" : 0
+      "mesh": 0
     }
   ],
-  
-  "meshes" : [
+
+  "meshes": [
     {
-      "primitives" : [ {
-        "attributes" : {
-          "POSITION" : 1
-        },
-        "indices" : 0
-      } ]
+      "primitives": [
+        {
+          "attributes": {
+            "POSITION": 1
+          },
+          "indices": 0
+        }
+      ]
     }
   ],
 
-  "buffers" : [
+  "buffers": [
     {
-      "uri" : "data:application/octet-stream;base64,AAABAAIAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAACAPwAAAAA=",
-      "byteLength" : 44
+      "uri": "data:application/octet-stream;base64,AAABAAIAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAACAPwAAAAA=",
+      "byteLength": 44
     }
   ],
-  "bufferViews" : [
+  "bufferViews": [
     {
-      "buffer" : 0,
-      "byteOffset" : 0,
-      "byteLength" : 6,
-      "target" : 34963
+      "buffer": 0,
+      "byteOffset": 0,
+      "byteLength": 6,
+      "target": 34963
     },
     {
-      "buffer" : 0,
-      "byteOffset" : 8,
-      "byteLength" : 36,
-      "target" : 34962
+      "buffer": 0,
+      "byteOffset": 8,
+      "byteLength": 36,
+      "target": 34962
     }
   ],
-  "accessors" : [
+  "accessors": [
     {
-      "bufferView" : 0,
-      "byteOffset" : 0,
-      "componentType" : 5123,
-      "count" : 3,
-      "type" : "SCALAR",
-      "max" : [ 2 ],
-      "min" : [ 0 ]
+      "bufferView": 0,
+      "byteOffset": 0,
+      "componentType": 5123,
+      "count": 3,
+      "type": "SCALAR",
+      "max": [2],
+      "min": [0]
     },
     {
-      "bufferView" : 1,
-      "byteOffset" : 0,
-      "componentType" : 5126,
-      "count" : 3,
-      "type" : "VEC3",
-      "max" : [ 1.0, 1.0, 0.0 ],
-      "min" : [ 0.0, 0.0, 0.0 ]
+      "bufferView": 1,
+      "byteOffset": 0,
+      "componentType": 5126,
+      "count": 3,
+      "type": "VEC3",
+      "max": [1.0, 1.0, 0.0],
+      "min": [0.0, 0.0, 0.0]
     }
   ],
-  
-  "asset" : {
-    "version" : "2.0"
+
+  "asset": {
+    "version": "2.0"
   }
 }
diff --git a/web/.storybook/public/tileset/tileset.json b/web/.storybook/public/tileset/tileset.json
index eaddb399a..e18258af7 100644
--- a/web/.storybook/public/tileset/tileset.json
+++ b/web/.storybook/public/tileset/tileset.json
@@ -5,38 +5,13 @@
   "geometricError": 500,
   "root": {
     "transform": [
-      96.86356343768793,
-      24.848542777253734,
-      0,
-      0,
-      -15.986465724980844,
-      62.317780594908875,
-      76.5566922962899,
-      0,
-      19.02322243409411,
-      -74.15554020821229,
-      64.3356267137516,
-      0,
-      1215107.7612304366,
-      -4736682.902037748,
-      4081926.095098698,
-      1
+      96.86356343768793, 24.848542777253734, 0, 0, -15.986465724980844,
+      62.317780594908875, 76.5566922962899, 0, 19.02322243409411,
+      -74.15554020821229, 64.3356267137516, 0, 1215107.7612304366,
+      -4736682.902037748, 4081926.095098698, 1
     ],
     "boundingVolume": {
-      "box": [
-        0,
-        0,
-        0,
-        7.0955,
-        0,
-        0,
-        0,
-        3.1405,
-        0,
-        0,
-        0,
-        5.0375
-      ]
+      "box": [0, 0, 0, 7.0955, 0, 0, 0, 3.1405, 0, 0, 0, 5.0375]
     },
     "geometricError": 1,
     "refine": "REPLACE",
@@ -46,20 +21,7 @@
     "children": [
       {
         "boundingVolume": {
-          "box": [
-            0,
-            0,
-            0,
-            7.0955,
-            0,
-            0,
-            0,
-            3.1405,
-            0,
-            0,
-            0,
-            5.0375
-          ]
+          "box": [0, 0, 0, 7.0955, 0, 0, 0, 3.1405, 0, 0, 0, 5.0375]
         },
         "geometricError": 0.1,
         "content": {
@@ -68,20 +30,7 @@
         "children": [
           {
             "boundingVolume": {
-              "box": [
-                0,
-                0,
-                0,
-                7.0955,
-                0,
-                0,
-                0,
-                3.1405,
-                0,
-                0,
-                0,
-                5.0375
-              ]
+              "box": [0, 0, 0, 7.0955, 0, 0, 0, 3.1405, 0, 0, 0, 5.0375]
             },
             "geometricError": 0,
             "content": {
diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json
index 170b9e5d8..7dee390f2 100644
--- a/web/.vscode/settings.json
+++ b/web/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "yaml.schemas": {
-        "https://json.schemastore.org/github-workflow": "/.github/workflows/**/*.yml"
-    },
-    "vitest.commandLine": "yarn run vitest watch"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "yaml.schemas": {
+    "https://json.schemastore.org/github-workflow": "/.github/workflows/**/*.yml"
+  },
+  "vitest.commandLine": "yarn run vitest watch"
 }
diff --git a/web/CODE_OF_CONDUCT.md b/web/CODE_OF_CONDUCT.md
index ae596ec11..2969f5f5a 100644
--- a/web/CODE_OF_CONDUCT.md
+++ b/web/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
@@ -118,11 +118,11 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage],
 version 2.0, available at
 [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
 
-Community Impact Guidelines were inspired by 
+Community Impact Guidelines were inspired by
 [Mozilla's code of conduct enforcement ladder][Mozilla CoC].
 
 For answers to common questions about this code of conduct, see the FAQ at
-[https://www.contributor-covenant.org/faq][FAQ]. Translations are available 
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
 at [https://www.contributor-covenant.org/translations][translations].
 
 [homepage]: https://www.contributor-covenant.org
diff --git a/web/README.md b/web/README.md
index b9cadc3b0..385c7f884 100644
--- a/web/README.md
+++ b/web/README.md
@@ -1,12 +1,12 @@
 # reearth/web
 
-Web interface for Re:Earth GIS software built with React 18 and Vite. 
+Web interface for Re:Earth GIS software built with React 18 and Vite.
 
 ## Getting started
 
 ### Development
 
-Add environment variables to .env. A template of the required variables are in `env.local`. 
+Add environment variables to .env. A template of the required variables are in `env.local`.
 Consult the development team for the correct environment variables.
 
 `yarn start` to start the local server. The interface will open on [http://localhost:3000](http://localhost:3000)
diff --git a/web/bin/pluginDoc.ts b/web/bin/pluginDoc.ts
index cb8220290..a7423b7b2 100644
--- a/web/bin/pluginDoc.ts
+++ b/web/bin/pluginDoc.ts
@@ -23,13 +23,13 @@ type P = {
 for (const s of program.getSourceFiles()) {
   if (s.fileName.substr(-5) === ".d.ts") continue;
   const decls: D[] = [];
-  ts.forEachChild(s, node => {
+  ts.forEachChild(s, (node) => {
     const d = parse(node);
     if (d) {
       decls.push(d);
     }
   });
-  const res = render(decls, n => decls.findIndex(d => d.name === n) != -1);
+  const res = render(decls, (n) => decls.findIndex((d) => d.name === n) != -1);
   // writeFileSync("./docs/plugin.md", res);
   console.log(res);
 }
@@ -64,11 +64,13 @@ function parse(node: ts.Node): D | undefined {
 
 function render(decls: D[], linkable: (name: string) => boolean): string {
   return decls
-    .flatMap(d => [
+    .flatMap((d) => [
       `# ${d.name}`,
       d.desc,
-      d.properties.map(p => `- ${renderHead(p, linkable)}`).join("\n"),
-      ...d.properties.filter(p => p.desc).flatMap(p => [`## ${renderHead(p, linkable)}`, p.desc]),
+      d.properties.map((p) => `- ${renderHead(p, linkable)}`).join("\n"),
+      ...d.properties
+        .filter((p) => p.desc)
+        .flatMap((p) => [`## ${renderHead(p, linkable)}`, p.desc]),
     ])
     .filter(Boolean)
     .join("\n\n");
@@ -78,17 +80,37 @@ function renderHead(p: P, linkable: (name: string) => boolean): string {
   return [p.name, ": ", renderType(p.type, p.required, linkable)].join("");
 }
 
-function renderType(type: string, required: boolean, linkable: (name: string) => boolean) {
-  const ts = split(type, [") => ", "[]", "?: ", ": ", " & ", " | ", "(", ")", ", "])
-    .map(s =>
+function renderType(
+  type: string,
+  required: boolean,
+  linkable: (name: string) => boolean,
+) {
+  const ts = split(type, [
+    ") => ",
+    "[]",
+    "?: ",
+    ": ",
+    " & ",
+    " | ",
+    "(",
+    ")",
+    ", ",
+  ])
+    .map((s) =>
       typeof s === "string" && linkable(s)
         ? {
             link: s,
           }
         : s,
     )
-    .map(s =>
-      typeof s === "string" ? s : "link" in s ? `[${s.link}](#${s.link})` : "s" in s ? s.s : "",
+    .map((s) =>
+      typeof s === "string"
+        ? s
+        : "link" in s
+          ? `[${s.link}](#${s.link})`
+          : "s" in s
+            ? s.s
+            : "",
     )
     .join("");
   const func = / => /.test(type);
@@ -104,9 +126,9 @@ function split(text: string, splitter: string[]): (string | { s: string })[] {
   if (!text.length) return [];
   const res: (string | { s: string })[] = [];
   let buf = "";
-  for (let i = 0; i < text.length; i++) {
-    buf += text[i];
-    const s = splitter.find(s => buf.includes(s));
+  for (const t of text) {
+    buf += t;
+    const s = splitter.find((s) => buf.includes(s));
     if (s) {
       res.push(buf.slice(0, -s.length), { s: buf.slice(-s.length) });
       buf = "";
diff --git a/web/codegen.ts b/web/codegen.ts
index a9c2e2358..a155e4e02 100644
--- a/web/codegen.ts
+++ b/web/codegen.ts
@@ -7,7 +7,10 @@ const rootGenerateDirectory = `${rootGQLDirectory}__gen__/`;
 const config: CodegenConfig = {
   overwrite: true,
   schema: "../server/gql/*.graphql",
-  documents: [`${rootGQLDirectory}fragments/*.ts`, `${rootGQLDirectory}queries/*.ts`],
+  documents: [
+    `${rootGQLDirectory}fragments/*.ts`,
+    `${rootGQLDirectory}queries/*.ts`,
+  ],
   generates: {
     [rootGenerateDirectory]: {
       preset: "client",
diff --git a/web/e2e/utils/index.ts b/web/e2e/utils/index.ts
index 42cfb8acd..a8b796815 100644
--- a/web/e2e/utils/index.ts
+++ b/web/e2e/utils/index.ts
@@ -1,5 +1,10 @@
 // eslint-disable-next-line no-restricted-imports
-import { type APIRequestContext, request, test as base, type Page } from "@playwright/test";
+import {
+  type APIRequestContext,
+  request,
+  test as base,
+  type Page,
+} from "@playwright/test";
 
 import { config, getAccessToken, type Config } from "./config";
 
@@ -35,7 +40,9 @@ export const test = base.extend<{
       async goto(url, options) {
         const res = await page.goto(url, options);
         if (this.token) {
-          await page.evaluate(`window.REEARTH_E2E_ACCESS_TOKEN = ${JSON.stringify(this.token)};`);
+          await page.evaluate(
+            `window.REEARTH_E2E_ACCESS_TOKEN = ${JSON.stringify(this.token)};`,
+          );
         }
         return res;
       },
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
new file mode 100644
index 000000000..376aa3527
--- /dev/null
+++ b/web/eslint.config.mjs
@@ -0,0 +1,40 @@
+import config from "eslint-config-reearth";
+import playwright from "eslint-plugin-playwright";
+
+/** @type { import("eslint").Linter.Config[] } */
+
+const themeConfig = [
+  {
+    rules: {
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/no-empty-object-type": [
+        "error",
+        {
+          allowInterfaces: "with-single-extends",
+        },
+      ],
+    },
+  },
+];
+
+const e2eConfig = [
+  {
+    files: ["e2e/**/*"],
+    ...playwright.configs["flat/recommended"],
+    rules: {
+      "no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "@playwright/test",
+              message: "Use @reearth/e2e/utils instead.",
+            },
+          ],
+        },
+      ],
+    },
+  },
+];
+
+export default [...config("@reearth"), ...e2eConfig, ...themeConfig];
diff --git a/web/index.html b/web/index.html
index ab4c00810..43379d90c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,21 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Re:Earth</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" href="./src/favicon.ico" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <title>Re:Earth</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
-  <link rel="icon" href="./src/favicon.ico" />
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
 
 <script>
diff --git a/web/package.json b/web/package.json
index 10b294eb2..99e70ae1b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -18,7 +18,8 @@
         "check": "run-p type lint coverage",
         "type": "tsc",
         "lint": "eslint .",
-        "format": "eslint --fix .",
+        "fix": "eslint --fix .",
+        "format": "prettier --write .",
         "storybook": "storybook dev -p 9001",
         "storybook:build": "storybook build --quiet -o dist/storybook",
         "gql": "graphql-codegen",
@@ -42,10 +43,12 @@
         "@graphql-codegen/typescript-react-apollo": "3.3.7",
         "@playwright/test": "1.39.0",
         "@rollup/plugin-yaml": "4.1.2",
+        "@storybook/addon-actions": "7.5.2",
         "@storybook/addon-essentials": "7.5.2",
         "@storybook/addon-styling": "1.3.7",
         "@storybook/addons": "7.5.2",
         "@storybook/manager-api": "7.5.2",
+        "@storybook/preview-api": "7.5.2",
         "@storybook/react": "7.5.2",
         "@storybook/react-vite": "7.5.2",
         "@storybook/theming": "7.5.2",
@@ -55,6 +58,7 @@
         "@types/apollo-upload-client": "18.0.0",
         "@types/carbon__colors": "10.31.2",
         "@types/crypto-js": "4.2.2",
+        "@types/js-yaml": "4",
         "@types/lodash-es": "4.17.10",
         "@types/node": "20.14.12",
         "@types/react": "18.3.3",
@@ -70,8 +74,8 @@
         "@welldone-software/why-did-you-render": "7.0.1",
         "del-cli": "5.1.0",
         "dotenv": "16.3.1",
-        "eslint": "8.40.0",
-        "eslint-config-reearth": "0.2.2",
+        "eslint": "9.9.0",
+        "eslint-config-reearth": "0.3.6",
         "eslint-plugin-playwright": "0.12.0",
         "eslint-plugin-storybook": "0.6.15",
         "husky": "8.0.3",
@@ -79,7 +83,7 @@
         "jsdom": "22.1.0",
         "lint-staged": "13.2.2",
         "npm-run-all": "4.1.5",
-        "prettier": "2.8.8",
+        "prettier": "3.3.3",
         "read-env": "2.0.0",
         "rollup": "4.19.0",
         "rollup-plugin-visualizer": "5.9.2",
@@ -98,18 +102,32 @@
     "dependencies": {
         "@apollo/client": "3.11.2",
         "@auth0/auth0-react": "2.2.2",
+        "@aws-amplify/auth": "5.3.1",
         "@aws-amplify/ui-react": "5.3.1",
         "@carbon/colors": "11.20.1",
         "@emotion/react": "11.11.1",
         "@emotion/styled": "11.11.0",
+        "@floating-ui/dom": "1.6.10",
         "@floating-ui/react": "0.24.7",
-        "@lexical/react": "0.12.2",
+        "@graphiql/toolkit": "0.11.0",
+        "@lexical/code": "0.12.0",
+        "@lexical/hashtag": "0.12.0",
+        "@lexical/link": "0.12.0",
+        "@lexical/list": "0.12.0",
+        "@lexical/mark": "0.12.0",
+        "@lexical/overflow": "0.12.0",
+        "@lexical/react": "0.12.0",
+        "@lexical/rich-text": "0.12.0",
+        "@lexical/selection": "0.12.0",
+        "@lexical/table": "0.12.0",
+        "@lexical/utils": "0.12.0",
         "@monaco-editor/react": "4.6.0",
         "@popperjs/core": "2.11.8",
         "@reearth/core": "0.0.7-alpha.13",
         "@rot1024/use-transition": "1.0.0",
         "@sentry/browser": "7.77.0",
         "@seznam/compose-react-refs": "1.0.6",
+        "@ungap/event-target": "0.2.4",
         "apollo-link-sentry": "3.2.3",
         "apollo-upload-client": "18.0.1",
         "aws-amplify": "5.3.11",
@@ -125,6 +143,7 @@
         "i18next": "22.4.15",
         "i18next-browser-languagedetector": "7.0.1",
         "jotai": "2.9.0",
+        "js-yaml": "4.1.0",
         "jszip": "3.10.1",
         "lexical": "0.12.2",
         "localforage": "1.10.0",
diff --git a/web/published.html b/web/published.html
index e196af30c..43c460237 100644
--- a/web/published.html
+++ b/web/published.html
@@ -1,25 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Re:Earth</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" href="./src/favicon.ico" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <title>Re:Earth</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
-  <link rel="icon" href="./src/favicon.ico" />
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/published.tsx"></script>
-  <script>
-    // https://github.com/aws-amplify/amplify-js/issues/678
-    if (global === undefined) {
-      var global = window;
-    }
-  </script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/published.tsx"></script>
+    <script>
+      // https://github.com/aws-amplify/amplify-js/issues/678
+      if (global === undefined) {
+        var global = window;
+      }
+    </script>
+  </body>
 </html>
diff --git a/web/src/app.tsx b/web/src/app.tsx
index fc82cc03d..cc5422e20 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -1,9 +1,8 @@
-import { Suspense } from "react";
-
 import Loading from "@reearth/beta/components/Loading";
 import GlobalModal from "@reearth/beta/features/GlobalModal";
 import NotificationBanner from "@reearth/beta/features/Notification";
 import { Provider as I18nProvider } from "@reearth/services/i18n";
+import { Suspense } from "react";
 
 import { AuthProvider } from "./services/auth";
 import { Provider as GqlProvider } from "./services/gql";
@@ -16,7 +15,9 @@ export default function App() {
       <GqlProvider>
         <ThemeProvider>
           <I18nProvider>
-            <Suspense fallback={<Loading animationSize={80} animationColor="#3B3CD0" />}>
+            <Suspense
+              fallback={<Loading animationSize={80} animationColor="#3B3CD0" />}
+            >
               <NotificationBanner />
               <GlobalModal />
               <AppRoutes />
diff --git a/web/src/beta/components/Accordion/AccordionItem.tsx b/web/src/beta/components/Accordion/AccordionItem.tsx
index e3790456f..7b66e0f4f 100644
--- a/web/src/beta/components/Accordion/AccordionItem.tsx
+++ b/web/src/beta/components/Accordion/AccordionItem.tsx
@@ -1,3 +1,4 @@
+import { styled, useTheme } from "@reearth/services/theme";
 import React from "react";
 import {
   AccordionItem as AccordionItemComponent,
@@ -7,8 +8,6 @@ import {
   AccordionItemState,
 } from "react-accessible-accordion";
 
-import { styled, useTheme } from "@reearth/services/theme";
-
 import Icon from "../Icon";
 
 export type Props = {
@@ -19,10 +18,21 @@ export type Props = {
   bg?: string;
 };
 
-const AccordionItem: React.FC<Props> = ({ className, id, heading, content, bg }) => {
+const AccordionItem: React.FC<Props> = ({
+  className,
+  id,
+  heading,
+  content,
+  bg,
+}) => {
   const theme = useTheme();
   return (
-    <Wrapper key={id} className={className} bg={bg} data-testid="atoms-accordion-item">
+    <Wrapper
+      key={id}
+      className={className}
+      bg={bg}
+      data-testid="atoms-accordion-item"
+    >
       <AccordionItemComponent>
         <AccordionItemHeading>
           <StyledAccordionItemButton data-testid="atoms-accordion-item-header">
diff --git a/web/src/beta/components/Accordion/index.stories.tsx b/web/src/beta/components/Accordion/index.stories.tsx
index 7dfbbf6ad..7573d6448 100644
--- a/web/src/beta/components/Accordion/index.stories.tsx
+++ b/web/src/beta/components/Accordion/index.stories.tsx
@@ -10,10 +10,14 @@ export default meta;
 
 type Story = StoryObj<typeof Accordion>;
 
-const SampleHeading = <div style={{ color: "white", background: "black" }}>heading</div>;
+const SampleHeading = (
+  <div style={{ color: "white", background: "black" }}>heading</div>
+);
 
 const SampleContent = (
-  <div style={{ color: "white", background: "black", padding: "20px" }}>hoge</div>
+  <div style={{ color: "white", background: "black", padding: "20px" }}>
+    hoge
+  </div>
 );
 
 export const Default: Story = {
diff --git a/web/src/beta/components/Accordion/index.test.tsx b/web/src/beta/components/Accordion/index.test.tsx
index f3436a8f3..4c7c6ac4e 100644
--- a/web/src/beta/components/Accordion/index.test.tsx
+++ b/web/src/beta/components/Accordion/index.test.tsx
@@ -1,6 +1,5 @@
-import { expect, test } from "vitest";
-
 import { fireEvent, render, screen } from "@reearth/test/utils";
+import { expect, test } from "vitest";
 
 import Accordion, { AccordionItemType } from "./index";
 
@@ -36,7 +35,11 @@ test("should display items content", () => {
 
 test("should open when header button is clicked", () => {
   render(<Accordion items={sampleContents} />);
-  expect(screen.getAllByTestId("atoms-accordion-item-content")[0]).not.toBeVisible();
+  expect(
+    screen.getAllByTestId("atoms-accordion-item-content")[0],
+  ).not.toBeVisible();
   fireEvent.click(screen.getAllByTestId("atoms-accordion-item-header")[0]);
-  expect(screen.getAllByTestId("atoms-accordion-item-content")[0]).toBeVisible();
+  expect(
+    screen.getAllByTestId("atoms-accordion-item-content")[0],
+  ).toBeVisible();
 });
diff --git a/web/src/beta/components/Accordion/index.tsx b/web/src/beta/components/Accordion/index.tsx
index 0595e2787..6b29e6dbf 100644
--- a/web/src/beta/components/Accordion/index.tsx
+++ b/web/src/beta/components/Accordion/index.tsx
@@ -28,8 +28,9 @@ const Accordion: React.FC<Props> = ({
       className={className}
       allowZeroExpanded={allowZeroExpanded}
       data-testid="atoms-accordion"
-      allowMultipleExpanded={allowMultipleExpanded}>
-      {items?.map(i => {
+      allowMultipleExpanded={allowMultipleExpanded}
+    >
+      {items?.map((i) => {
         return (
           <AccordionItem
             key={i.id}
diff --git a/web/src/beta/components/Avatar/index.stories.tsx b/web/src/beta/components/Avatar/index.stories.tsx
index dfa48d7f2..cc6d7c60e 100644
--- a/web/src/beta/components/Avatar/index.stories.tsx
+++ b/web/src/beta/components/Avatar/index.stories.tsx
@@ -11,5 +11,9 @@ export default meta;
 type Story = StoryObj<typeof Avatar>;
 
 export const Default: Story = { render: () => <Avatar innerText="ReEarth" /> };
-export const Small: Story = { render: () => <Avatar size="small" innerText="ReEarth" /> };
-export const Large: Story = { render: () => <Avatar size="large" innerText="ReEarth" /> };
+export const Small: Story = {
+  render: () => <Avatar size="small" innerText="ReEarth" />,
+};
+export const Large: Story = {
+  render: () => <Avatar size="large" innerText="ReEarth" />,
+};
diff --git a/web/src/beta/components/Avatar/index.tsx b/web/src/beta/components/Avatar/index.tsx
index 162a9f9a1..8a1c3ed97 100644
--- a/web/src/beta/components/Avatar/index.tsx
+++ b/web/src/beta/components/Avatar/index.tsx
@@ -1,8 +1,7 @@
-import React from "react";
-
 import Flex from "@reearth/beta/components/Flex";
 import Text from "@reearth/beta/components/Text";
 import { styled, useTheme } from "@reearth/services/theme";
+import React from "react";
 
 export type Size = "small" | "large";
 
@@ -33,10 +32,13 @@ const Avatar: React.FC<Props> = ({
       size={size}
       avatar={avatar}
       background={background ?? theme.bg[4]}
-      borderRadius={borderRadius}>
+      borderRadius={borderRadius}
+    >
       {innerText && (
         <Text size="h4" color={theme.content.withBackground}>
-          {typeof innerText === "number" ? `+${innerText.toString()}` : innerText.charAt(0)}
+          {typeof innerText === "number"
+            ? `+${innerText.toString()}`
+            : innerText.charAt(0)}
         </Text>
       )}
     </StyledAvatar>
@@ -52,7 +54,8 @@ const StyledAvatar = styled(Flex)<{
   width: ${({ size }) => (size === "large" ? "64px" : "32px")};
   height: ${({ size }) => (size === "large" ? "64px" : "32px")};
   border-radius: ${({ borderRadius }) => borderRadius ?? "50%"};
-  background: ${({ avatar, background }) => (avatar ? `url(${avatar});` : background)};
+  background: ${({ avatar, background }) =>
+    avatar ? `url(${avatar});` : background};
 `;
 
 export default Avatar;
diff --git a/web/src/beta/components/Box/index.tsx b/web/src/beta/components/Box/index.tsx
index 674614eef..64a4ab175 100644
--- a/web/src/beta/components/Box/index.tsx
+++ b/web/src/beta/components/Box/index.tsx
@@ -1,7 +1,6 @@
-import { CSSProperties } from "react";
-
 import { MetricsSizes, metricsSizes } from "@reearth/beta/utils/metrics";
 import { styled } from "@reearth/services/theme";
+import { CSSProperties } from "react";
 
 export type Props = {
   className?: string;
@@ -43,7 +42,7 @@ type OtherCSSProperties = {
 
 type BoxProps = MetricsProps & BorderProps & OtherCSSProperties;
 
-const Box: React.FC<Props> = props => {
+const Box: React.FC<Props> = (props) => {
   const { className, children, onClick, ...styleProps } = props;
   return (
     <Wrapper className={className} onClick={onClick} {...styleProps}>
@@ -53,37 +52,50 @@ const Box: React.FC<Props> = props => {
 };
 
 const Wrapper = styled.div<BoxProps>`
-  background-color: ${props => props.bg};
-  width: ${props => props.width};
-  margin: ${props => (props.m && props.m in metricsSizes ? `${metricsSizes[props.m]}px}` : "")};
-  margin: ${props => (props.mv && props.mv in metricsSizes ? `${metricsSizes[props.mv]}px 0` : "")};
-  margin: ${props => (props.mh && props.mh in metricsSizes ? `0 ${metricsSizes[props.mh]}px` : "")};
-  margin-top: ${props =>
+  background-color: ${(props) => props.bg};
+  width: ${(props) => props.width};
+  margin: ${(props) =>
+    props.m && props.m in metricsSizes ? `${metricsSizes[props.m]}px}` : ""};
+  margin: ${(props) =>
+    props.mv && props.mv in metricsSizes
+      ? `${metricsSizes[props.mv]}px 0`
+      : ""};
+  margin: ${(props) =>
+    props.mh && props.mh in metricsSizes
+      ? `0 ${metricsSizes[props.mh]}px`
+      : ""};
+  margin-top: ${(props) =>
     props.mt && props.mt in metricsSizes ? `${metricsSizes[props.mt]}px` : ""};
-  margin-bottom: ${props =>
+  margin-bottom: ${(props) =>
     props.mb && props.mb in metricsSizes ? `${metricsSizes[props.mb]}px` : ""};
-  margin-right: ${props =>
+  margin-right: ${(props) =>
     props.mr && props.mr in metricsSizes ? `${metricsSizes[props.mr]}px` : ""};
-  margin-left: ${props =>
+  margin-left: ${(props) =>
     props.ml && props.ml in metricsSizes ? `${metricsSizes[props.ml]}px` : ""};
-  padding: ${props => (props.p && props.p in metricsSizes ? `${metricsSizes[props.p]}px` : "")};
-  padding: ${props =>
-    props.pv && props.pv in metricsSizes ? `${metricsSizes[props.pv]}px 0` : ""};
-  padding: ${props =>
-    props.ph && props.ph in metricsSizes ? `0 ${metricsSizes[props.ph]}px` : ""};
-  padding-top: ${props =>
+  padding: ${(props) =>
+    props.p && props.p in metricsSizes ? `${metricsSizes[props.p]}px` : ""};
+  padding: ${(props) =>
+    props.pv && props.pv in metricsSizes
+      ? `${metricsSizes[props.pv]}px 0`
+      : ""};
+  padding: ${(props) =>
+    props.ph && props.ph in metricsSizes
+      ? `0 ${metricsSizes[props.ph]}px`
+      : ""};
+  padding-top: ${(props) =>
     props.pt && props.pt in metricsSizes ? `${metricsSizes[props.pt]}px` : ""};
-  padding-bottom: ${props =>
+  padding-bottom: ${(props) =>
     props.pb && props.pb in metricsSizes ? `${metricsSizes[props.pb]}px` : ""};
-  padding-right: ${props =>
+  padding-right: ${(props) =>
     props.pr && props.pr in metricsSizes ? `${metricsSizes[props.pr]}px` : ""};
-  padding-left: ${props =>
+  padding-left: ${(props) =>
     props.pl && props.pl in metricsSizes ? `${metricsSizes[props.pl]}px` : ""};
-  border: ${props => props.border};
-  border-radius: ${props => (props.border ? `${props.borderRadius}px` : "")};
-  border-width: ${props => (props.borderWidth ? `${props.borderWidth}px` : "")};
-  border-color: ${props => (props.borderColor ? `${props.borderColor}` : "")};
-  border-style: ${props => (props.borderStyle ? `${props.borderStyle}` : "")};
+  border: ${(props) => props.border};
+  border-radius: ${(props) => (props.border ? `${props.borderRadius}px` : "")};
+  border-width: ${(props) =>
+    props.borderWidth ? `${props.borderWidth}px` : ""};
+  border-color: ${(props) => (props.borderColor ? `${props.borderColor}` : "")};
+  border-style: ${(props) => (props.borderStyle ? `${props.borderStyle}` : "")};
 `;
 
 export default Box;
diff --git a/web/src/beta/components/Button/index.stories.tsx b/web/src/beta/components/Button/index.stories.tsx
index 54cb42cbd..8f5747e9b 100644
--- a/web/src/beta/components/Button/index.stories.tsx
+++ b/web/src/beta/components/Button/index.stories.tsx
@@ -31,7 +31,9 @@ export const SecondarySmall: Story = {
 };
 
 export const SecondaryMedium: Story = {
-  render: () => <Button buttonType="secondary" text="secondary" size="medium" />,
+  render: () => (
+    <Button buttonType="secondary" text="secondary" size="medium" />
+  ),
 };
 
 export const SecondaryDisabled: Story = {
@@ -51,7 +53,9 @@ export const DangerDisabled: Story = {
 };
 
 export const DisabledSmall: Story = {
-  render: () => <Button buttonType="primary" text="disabled" size="small" disabled />,
+  render: () => (
+    <Button buttonType="primary" text="disabled" size="small" disabled />
+  ),
 };
 
 export const DisabledMedium: Story = {
@@ -60,19 +64,37 @@ export const DisabledMedium: Story = {
 
 export const WithLeftIconSmall: Story = {
   render: () => (
-    <Button buttonType="primary" text="Primary" icon="book" size="small" iconPosition="left" />
+    <Button
+      buttonType="primary"
+      text="Primary"
+      icon="book"
+      size="small"
+      iconPosition="left"
+    />
   ),
 };
 
 export const WithRightIconSmall: Story = {
   render: () => (
-    <Button buttonType="secondary" text="Primary" icon="book" size="small" iconPosition="right" />
+    <Button
+      buttonType="secondary"
+      text="Primary"
+      icon="book"
+      size="small"
+      iconPosition="right"
+    />
   ),
 };
 
 export const WithLeftIconMedium: Story = {
   render: () => (
-    <Button buttonType="primary" text="Primary" icon="book" size="medium" iconPosition="left" />
+    <Button
+      buttonType="primary"
+      text="Primary"
+      icon="book"
+      size="medium"
+      iconPosition="left"
+    />
   ),
 };
 
diff --git a/web/src/beta/components/Button/index.tsx b/web/src/beta/components/Button/index.tsx
index 7d1f2f61b..2f28ad5ae 100644
--- a/web/src/beta/components/Button/index.tsx
+++ b/web/src/beta/components/Button/index.tsx
@@ -1,9 +1,8 @@
-import { ReactNode, useMemo } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
 import spacingSizes from "@reearth/services/theme/reearthTheme/common/spacing";
+import { ReactNode, useMemo } from "react";
 
 export type Type = "primary" | "secondary" | "danger";
 
@@ -60,7 +59,8 @@ const Button: React.FC<Props> = ({
       margin={margin}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}>
+      onMouseLeave={onMouseLeave}
+    >
       {iconPosition === "left" && WrappedIcon}
       {size === "medium" ? (
         <Text size="body" customColor>
@@ -93,29 +93,29 @@ const StyledButton = styled.button<ButtonProps>`
     disabled
       ? theme.content.weak
       : buttonType === "danger"
-      ? theme.dangerous.main
-      : buttonType === "primary"
-      ? theme.primary.main
-      : theme.secondary.main};
+        ? theme.dangerous.main
+        : buttonType === "primary"
+          ? theme.primary.main
+          : theme.secondary.main};
   background: inherit;
   color: ${({ buttonType, disabled, theme }) =>
     disabled
       ? theme.content.weak
       : buttonType === "danger"
-      ? theme.dangerous.main
-      : buttonType === "primary"
-      ? theme.primary.main
-      : theme.secondary.strong};
+        ? theme.dangerous.main
+        : buttonType === "primary"
+          ? theme.primary.main
+          : theme.secondary.strong};
   &:active,
   &:hover {
     background: ${({ buttonType, disabled, theme }) =>
       disabled
         ? "inherit"
         : buttonType === "danger"
-        ? theme.dangerous.main
-        : buttonType === "primary"
-        ? theme.primary.main
-        : theme.secondary.main};
+          ? theme.dangerous.main
+          : buttonType === "primary"
+            ? theme.primary.main
+            : theme.secondary.main};
     color: ${({ disabled, theme }) =>
       disabled ? theme.content.weak : theme.content.withBackground};
   }
@@ -144,8 +144,16 @@ const IconWrapper = styled.span<{
   align-items: center;
   user-select: none;
   margin-left: ${({ text, iconPosition, size }) =>
-    text && iconPosition === "right" ? (size === "medium" ? "8px" : "8px") : "none"};
+    text && iconPosition === "right"
+      ? size === "medium"
+        ? "8px"
+        : "8px"
+      : "none"};
   margin-right: ${({ text, iconPosition, size }) =>
-    text && iconPosition === "left" ? (size === "medium" ? "8px" : "8px") : "none"};
+    text && iconPosition === "left"
+      ? size === "medium"
+        ? "8px"
+        : "8px"
+      : "none"};
 `;
 export default Button;
diff --git a/web/src/beta/components/CatalogCard/index.tsx b/web/src/beta/components/CatalogCard/index.tsx
index afada5607..55e827502 100644
--- a/web/src/beta/components/CatalogCard/index.tsx
+++ b/web/src/beta/components/CatalogCard/index.tsx
@@ -1,11 +1,10 @@
 import { Placement } from "@floating-ui/react";
-import React, { ReactNode, useState, useCallback } from "react";
-
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
+import React, { ReactNode, useState, useCallback } from "react";
 
 import { LayerStyleNameUpdateProps } from "../../features/Editor/hooks/useLayerStyles";
 
@@ -64,13 +63,17 @@ const CatalogCard: React.FC<Props> = ({
 
   const handleNameChange = useCallback(
     (newName: string) => {
-      isNameEditable && setNewName(newName);
+      if (isNameEditable) {
+        setNewName(newName);
+      }
     },
     [isNameEditable],
   );
 
   const handleNameSubmit = useCallback(() => {
-    isNameEditable && setIsEditing(false);
+    if (isNameEditable) {
+      setIsEditing(false);
+    }
     onLayerStyleNameUpdate?.({ styleId: id || "", name: newName });
   }, [id, isNameEditable, newName, onLayerStyleNameUpdate]);
 
@@ -101,9 +104,14 @@ const CatalogCard: React.FC<Props> = ({
       isLayerStyleIcon={icon === "layerStyle"}
       onClick={() => onSelect?.(!selected)}
       onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}>
+      onMouseLeave={handleMouseLeave}
+    >
       <ImgWrapper>
-        {!icon ? <PreviewImage url={url} /> : <Icon icon={icon} size={iconSize} />}
+        {!icon ? (
+          <PreviewImage url={url} />
+        ) : (
+          <Icon icon={icon} size={iconSize} />
+        )}
       </ImgWrapper>
 
       {isEditing ? (
@@ -125,7 +133,8 @@ const CatalogCard: React.FC<Props> = ({
         <Popover.Provider
           open={isOpenAction}
           placement={actionPlacement}
-          onOpenChange={handleOpenChange}>
+          onOpenChange={handleOpenChange}
+        >
           {isHovered && (
             <Popover.Trigger asChild>
               <ActionIcon onClick={handleActionClick}>
@@ -143,13 +152,18 @@ const CatalogCard: React.FC<Props> = ({
 const Wrapper = styled.div<{ selected?: boolean; isLayerStyleIcon?: boolean }>`
   display: flex;
   flex-direction: column;
-  background: ${({ theme, isLayerStyleIcon }) => (isLayerStyleIcon ? theme.bg[0] : theme.bg[2])};
+  background: ${({ theme, isLayerStyleIcon }) =>
+    isLayerStyleIcon ? theme.bg[0] : theme.bg[2]};
   box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
-  border: 2px solid ${({ selected, theme }) => (selected ? `${theme.select.main}` : "transparent")};
+  border: 2px solid
+    ${({ selected, theme }) =>
+      selected ? `${theme.select.main}` : "transparent"};
   padding: ${({ theme }) => theme.spacing.small}px;
   width: 100%;
-  max-width: ${({ isLayerStyleIcon }) => (isLayerStyleIcon ? "calc(148px * 0.7)" : "148px")};
-  max-height: ${({ isLayerStyleIcon }) => (isLayerStyleIcon ? "calc(148px * 0.7)" : "148px")};
+  max-width: ${({ isLayerStyleIcon }) =>
+    isLayerStyleIcon ? "calc(148px * 0.7)" : "148px"};
+  max-height: ${({ isLayerStyleIcon }) =>
+    isLayerStyleIcon ? "calc(148px * 0.7)" : "148px"};
   height: 100%;
   position: relative;
   cursor: pointer;
@@ -171,7 +185,7 @@ const ImgWrapper = styled.div`
 const PreviewImage = styled.div<{ url?: string }>`
   width: 100%;
   height: 100%;
-  background-image: ${props => `url(${props.url})`};
+  background-image: ${(props) => `url(${props.url})`};
   background-size: cover;
   background-position: center;
 `;
@@ -183,7 +197,8 @@ const FileName = styled(Text)<{ selected?: boolean }>`
   white-space: nowrap;
   margin-top: ${({ theme }) => theme.spacing.small}px;
   color: inherit;
-  fill: ${({ selected, theme }) => (selected ? `${theme.select.main}` : undefined)};
+  fill: ${({ selected, theme }) =>
+    selected ? `${theme.select.main}` : undefined};
 `;
 
 const StyledTextInput = styled(TextInput)`
diff --git a/web/src/beta/components/Collapse/index.tsx b/web/src/beta/components/Collapse/index.tsx
index 7b960cefb..9c9e00f5b 100644
--- a/web/src/beta/components/Collapse/index.tsx
+++ b/web/src/beta/components/Collapse/index.tsx
@@ -1,6 +1,5 @@
-import { useState, ReactNode, useCallback } from "react";
-
 import { styled, useTheme } from "@reearth/services/theme";
+import { useState, ReactNode, useCallback } from "react";
 
 import Icon from "../Icon";
 import Text from "../Text";
@@ -26,7 +25,12 @@ const Collapse: React.FC<{
             {title}
           </Text>
           {!alwaysOpen && (
-            <ArrowIcon icon="arrowToggle" size={12} color={theme.content.main} opened={opened} />
+            <ArrowIcon
+              icon="arrowToggle"
+              size={12}
+              color={theme.content.main}
+              opened={opened}
+            />
           )}
         </Header>
       )}
@@ -48,12 +52,13 @@ const Header = styled.div<{ clickable?: boolean }>`
 `;
 
 const ArrowIcon = styled(Icon)<{ opened: boolean }>`
-  transform: rotate(${props => (props.opened ? 90 : 180)}deg);
+  transform: rotate(${(props) => (props.opened ? 90 : 180)}deg);
   transition: all 0.2s;
 `;
 
 const Content = styled.div`
-  padding: ${({ theme }) => `${theme.spacing.largest}px ${theme.spacing.super}px`};
+  padding: ${({ theme }) =>
+    `${theme.spacing.largest}px ${theme.spacing.super}px`};
 `;
 
 export default Collapse;
diff --git a/web/src/beta/components/ContentPicker/README.md b/web/src/beta/components/ContentPicker/README.md
index ee76aab7d..83d05a863 100644
--- a/web/src/beta/components/ContentPicker/README.md
+++ b/web/src/beta/components/ContentPicker/README.md
@@ -1,4 +1,5 @@
 # Contents Picker
+
 [![Generic badge](https://img.shields.io/badge/GROUP-infobox-blue.svg)]()
 [![Generic badge](https://img.shields.io/badge/SIZE-molecules-orange.svg)]()
 
diff --git a/web/src/beta/components/ContentPicker/index.tsx b/web/src/beta/components/ContentPicker/index.tsx
index f507fbf85..ad9e9a0db 100644
--- a/web/src/beta/components/ContentPicker/index.tsx
+++ b/web/src/beta/components/ContentPicker/index.tsx
@@ -1,9 +1,8 @@
-import { useRef } from "react";
-import { useClickAway } from "react-use";
-
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
+import { useRef } from "react";
+import { useClickAway } from "react-use";
 
 export interface Item {
   id: string;
@@ -64,7 +63,8 @@ const Wrapper = styled.div`
     height: 0px;
     margin: auto;
     border-style: solid;
-    border-color: transparent transparent ${({ theme }) => theme.bg[2]} transparent;
+    border-color: transparent transparent ${({ theme }) => theme.bg[2]}
+      transparent;
     border-width: 0 10px 10px 10px;
   }
 `;
diff --git a/web/src/beta/components/Divider/index.tsx b/web/src/beta/components/Divider/index.tsx
index fb8bda3f3..91d648d2d 100644
--- a/web/src/beta/components/Divider/index.tsx
+++ b/web/src/beta/components/Divider/index.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-
 import { styled } from "@reearth/services/theme";
+import React from "react";
 
 export type Props = {
   color?: string;
@@ -17,9 +16,11 @@ const StyledDivider = styled.div<{
   margin?: string;
   spaceOnly?: boolean;
 }>`
-  margin: ${props => (props.margin ? props.margin : "35px")} auto;
-  border-bottom: ${props =>
-    props.spaceOnly ? "none" : `1px solid ${props.color ? props.color : props.theme.outline.main}`};
+  margin: ${(props) => (props.margin ? props.margin : "35px")} auto;
+  border-bottom: ${(props) =>
+    props.spaceOnly
+      ? "none"
+      : `1px solid ${props.color ? props.color : props.theme.outline.main}`};
 `;
 
 export default Divider;
diff --git a/web/src/beta/components/DragAndDropList/Item.tsx b/web/src/beta/components/DragAndDropList/Item.tsx
index 288205b0b..f5651613a 100644
--- a/web/src/beta/components/DragAndDropList/Item.tsx
+++ b/web/src/beta/components/DragAndDropList/Item.tsx
@@ -1,7 +1,12 @@
 import type { Identifier } from "dnd-core";
 import type { FC, ReactNode } from "react";
 import { memo, useRef, createContext, useContext } from "react";
-import { ConnectDragPreview, ConnectDragSource, useDrag, useDrop } from "react-dnd";
+import {
+  ConnectDragPreview,
+  ConnectDragSource,
+  useDrag,
+  useDrop,
+} from "react-dnd";
 
 import { styled } from "@reearth/services/theme";
 
@@ -41,7 +46,11 @@ const Item: FC<Props> = ({
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
 
-  const [{ handlerId }, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>({
+  const [{ handlerId }, drop] = useDrop<
+    DragItem,
+    () => void,
+    { handlerId: Identifier | null }
+  >({
     accept: itemGroupKey,
     collect(monitor) {
       return {
@@ -66,7 +75,8 @@ const Item: FC<Props> = ({
       const hoverClientY = clientOffset.y - hoverBoundingRect.top;
 
       // Get vertical middle Y
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
 
       // Dragging downwards
       if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
@@ -87,7 +97,7 @@ const Item: FC<Props> = ({
     item: () => {
       return { id, index };
     },
-    collect: monitor => ({
+    collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
     end: (item, monitor) => {
@@ -103,11 +113,14 @@ const Item: FC<Props> = ({
   drop(contentRef);
 
   return shouldUseCustomHandler ? (
-    <ItemContext.Provider value={{ customDragSource: drag, customDragPreview: preview }}>
+    <ItemContext.Provider
+      value={{ customDragSource: drag, customDragPreview: preview }}
+    >
       <SItem
         customHandler={shouldUseCustomHandler}
         data-handler-id={handlerId}
-        isDragging={isDragging}>
+        isDragging={isDragging}
+      >
         <div ref={contentRef}>{children}</div>
       </SItem>
     </ItemContext.Provider>
diff --git a/web/src/beta/components/DragAndDropList/index.stories.tsx b/web/src/beta/components/DragAndDropList/index.stories.tsx
index 971bb47f5..e5d19d022 100644
--- a/web/src/beta/components/DragAndDropList/index.stories.tsx
+++ b/web/src/beta/components/DragAndDropList/index.stories.tsx
@@ -21,7 +21,7 @@ const dummyItems: DummyItem[] = [...Array(10)].map((_, i) => {
   return { id: str, text: str };
 });
 
-const DummyComponent: typeof DragAndDropList<DummyItem> = args => {
+const DummyComponent: typeof DragAndDropList<DummyItem> = (args) => {
   const [items, setItems] = useState<DummyItem[]>(dummyItems);
   return (
     <DragAndDropList<DummyItem>
@@ -29,10 +29,10 @@ const DummyComponent: typeof DragAndDropList<DummyItem> = args => {
       items={items}
       onItemDrop={(item, index) => {
         // actual use case would be api call or optimistic update
-        setItems(old => {
+        setItems((old) => {
           const items = [...old];
           items.splice(
-            old.findIndex(o => o.id === item.id),
+            old.findIndex((o) => o.id === item.id),
             1,
           );
           items.splice(index, 0, item);
@@ -44,26 +44,34 @@ const DummyComponent: typeof DragAndDropList<DummyItem> = args => {
 };
 
 export const Default: Story = {
-  render: args => {
+  render: (args) => {
     return (
-      <div style={{ maxHeight: "240px", overflowY: "auto", background: "gray", padding: "24px" }}>
+      <div
+        style={{
+          maxHeight: "240px",
+          overflowY: "auto",
+          background: "gray",
+          padding: "24px",
+        }}
+      >
         <DummyComponent {...args} />
       </div>
     );
   },
   args: {
     uniqueKey: "uniqueKey",
-    renderItem: item => (
+    renderItem: (item) => (
       <div
         style={{
           border: "1px solid blue",
           padding: "0.5rem 1rem",
           backgroundColor: "lightgray",
-        }}>
+        }}
+      >
         {item.text}
       </div>
     ),
-    getId: item => item.id.toString(),
+    getId: (item) => item.id.toString(),
     items: dummyItems,
     gap: 16,
   },
diff --git a/web/src/beta/components/DragAndDropList/index.tsx b/web/src/beta/components/DragAndDropList/index.tsx
index 7f882cc8e..99f15223f 100644
--- a/web/src/beta/components/DragAndDropList/index.tsx
+++ b/web/src/beta/components/DragAndDropList/index.tsx
@@ -1,8 +1,7 @@
+import { styled } from "@reearth/services/theme";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useDragDropManager } from "react-dnd";
 
-import { styled } from "@reearth/services/theme";
-
 import Item from "./Item";
 import { useScroll } from "./scrollItem";
 
@@ -47,7 +46,7 @@ function DragAndDropList<Item extends { id: string } = { id: string }>({
   }, [items]);
 
   const onItemMove = useCallback((dragIndex: number, hoverIndex: number) => {
-    setMovingItems(old => {
+    setMovingItems((old) => {
       const items = [...old];
       items.splice(dragIndex, 1);
       items.splice(hoverIndex, 0, old[dragIndex]);
@@ -59,7 +58,9 @@ function DragAndDropList<Item extends { id: string } = { id: string }>({
     (index: number) => {
       const item = movingItems[index];
       if (items[index].id === item.id) return;
-      item && onItemDrop(movingItems[index], index);
+      if (item) {
+        onItemDrop(movingItems[index], index);
+      }
     },
     [items, movingItems, onItemDrop],
   );
@@ -82,7 +83,8 @@ function DragAndDropList<Item extends { id: string } = { id: string }>({
             onItemMove={onItemMove}
             onItemDropOnItem={onItemDropOnItem}
             onItemDropOutside={onItemDropOutside}
-            shouldUseCustomHandler={shouldUseCustomHandler}>
+            shouldUseCustomHandler={shouldUseCustomHandler}
+          >
             {renderItem(item, i)}
           </Item>
         );
diff --git a/web/src/beta/components/DragAndDropList/scrollItem.tsx b/web/src/beta/components/DragAndDropList/scrollItem.tsx
index 02c6d3653..515edf2dd 100644
--- a/web/src/beta/components/DragAndDropList/scrollItem.tsx
+++ b/web/src/beta/components/DragAndDropList/scrollItem.tsx
@@ -10,10 +10,13 @@ export const useScroll = () => {
 
       const mouseY = e.clientY;
       const scrollThreshold = scrollContainer.offsetHeight * 0.4;
-      mouseY < scrollThreshold
-        ? (scrollContainer.scrollTop -= 10)
-        : mouseY > scrollContainer.offsetHeight - scrollThreshold &&
-          (scrollContainer.scrollTop += 10);
+      if (mouseY < scrollThreshold) {
+        scrollContainer.scrollTop -= 10;
+      } else {
+        if (mouseY > scrollContainer.offsetHeight - scrollThreshold) {
+          scrollContainer.scrollTop += 10;
+        }
+      }
     },
     [scrollContainerRef],
   );
diff --git a/web/src/beta/components/Flex/index.stories.tsx b/web/src/beta/components/Flex/index.stories.tsx
index 164a2bda2..60b55608a 100644
--- a/web/src/beta/components/Flex/index.stories.tsx
+++ b/web/src/beta/components/Flex/index.stories.tsx
@@ -13,18 +13,18 @@ const ExampleDiv = () => (
   </>
 );
 
-export const SpaceBetween: Story<Props> = args => (
+export const SpaceBetween: Story<Props> = (args) => (
   <Component {...args}>
     <ExampleDiv />
   </Component>
 );
-export const GapChildren: Story<Props> = args => (
+export const GapChildren: Story<Props> = (args) => (
   <Component {...args}>
     <div>hoge</div>
     <div>fuga</div>
   </Component>
 );
-export const DirectionVertical: Story<Props> = args => (
+export const DirectionVertical: Story<Props> = (args) => (
   <Component {...args}>
     <ExampleDiv />
   </Component>
diff --git a/web/src/beta/components/Flex/index.tsx b/web/src/beta/components/Flex/index.tsx
index a9fc3a80c..3bccfe843 100644
--- a/web/src/beta/components/Flex/index.tsx
+++ b/web/src/beta/components/Flex/index.tsx
@@ -1,6 +1,5 @@
-import { ReactNode, CSSProperties, AriaRole, AriaAttributes } from "react";
-
 import { ariaProps } from "@reearth/beta/utils/aria";
+import { ReactNode, CSSProperties, AriaRole, AriaAttributes } from "react";
 
 export type Props = {
   className?: string;
@@ -60,7 +59,8 @@ const Flex: React.FC<Props> = ({
       }}
       onClick={onClick}
       data-testid={testId}
-      {...aria}>
+      {...aria}
+    >
       {children}
     </div>
   );
diff --git a/web/src/beta/components/FloatedPanel/index.stories.tsx b/web/src/beta/components/FloatedPanel/index.stories.tsx
index 7f0e40b62..f9ab17559 100644
--- a/web/src/beta/components/FloatedPanel/index.stories.tsx
+++ b/web/src/beta/components/FloatedPanel/index.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta<Props> = {
 
 export default meta;
 
-const Template: Story<Props> = args => <FloatedPanel {...args} />;
+const Template: Story<Props> = (args) => <FloatedPanel {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/web/src/beta/components/FloatedPanel/index.tsx b/web/src/beta/components/FloatedPanel/index.tsx
index 9a3a485ca..353b2827d 100644
--- a/web/src/beta/components/FloatedPanel/index.tsx
+++ b/web/src/beta/components/FloatedPanel/index.tsx
@@ -1,11 +1,10 @@
 import { SerializedStyles } from "@emotion/react";
+import useBuffered from "@reearth/beta/utils/use-buffered";
+import { styled } from "@reearth/services/theme";
 import { useTransition, TransitionStatus } from "@rot1024/use-transition";
 import React, { useRef, useEffect } from "react";
 import { useClickAway } from "react-use";
 
-import useBuffered from "@reearth/beta/utils/use-buffered";
-import { styled } from "@reearth/services/theme";
-
 export type Props = {
   className?: string;
   visible?: boolean;
@@ -33,7 +32,7 @@ const FloatedPanel: React.FC<Props> = ({
   onExited,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
-  useClickAway(ref, e => onClickAway?.(e));
+  useClickAway(ref, (e) => onClickAway?.(e));
   const transition = useTransition(!!visible, 200, {
     mountOnEnter: true,
     unmountOnExit: true,
@@ -58,7 +57,8 @@ const FloatedPanel: React.FC<Props> = ({
       onMouseEnter={() => onHover?.(true)}
       onMouseLeave={() => onHover?.(false)}
       transition={transition}
-      styles={bStyles}>
+      styles={bStyles}
+    >
       {bChildren}
     </Wrapper>
   );
@@ -70,9 +70,13 @@ const Wrapper = styled.div<{
 }>`
   position: absolute;
   transition: ${({ transition }) =>
-    transition === "entering" || transition === "exiting" ? "all 0.2s ease" : ""};
+    transition === "entering" || transition === "exiting"
+      ? "all 0.2s ease"
+      : ""};
   transform: ${({ transition }) =>
-    transition === "entering" || transition === "entered" ? "translateX(0%)" : "translateX(100%)"};
+    transition === "entering" || transition === "entered"
+      ? "translateX(0%)"
+      : "translateX(100%)"};
   opacity: ${({ transition }) =>
     transition === "entering" || transition === "entered" ? "1" : "0"};
   ${({ styles }) => styles}
diff --git a/web/src/beta/components/Icon/index.stories.tsx b/web/src/beta/components/Icon/index.stories.tsx
index 1904d5949..d5e5ac4b2 100644
--- a/web/src/beta/components/Icon/index.stories.tsx
+++ b/web/src/beta/components/Icon/index.stories.tsx
@@ -13,4 +13,6 @@ export const Default = () => <Icon icon="file" size={20} />;
 export const Color = () => <Icon icon="file" color="red" size={20} />;
 export const Image = () => <Icon icon={`/sample.svg`} size={20} />;
 export const Svg = () => <Icon icon={icon} size={20} />;
-export const Wrapped = () => <Icon icon={icon} size={20} style={{ background: "green" }} />;
+export const Wrapped = () => (
+  <Icon icon={icon} size={20} style={{ background: "green" }} />
+);
diff --git a/web/src/beta/components/Icon/index.tsx b/web/src/beta/components/Icon/index.tsx
index a60dd609f..15ddef0a5 100644
--- a/web/src/beta/components/Icon/index.tsx
+++ b/web/src/beta/components/Icon/index.tsx
@@ -1,7 +1,13 @@
-import { AriaAttributes, AriaRole, CSSProperties, MouseEvent, memo, useMemo } from "react";
-
 import { ariaProps } from "@reearth/beta/utils/aria";
 import { styled } from "@reearth/services/theme";
+import {
+  AriaAttributes,
+  AriaRole,
+  CSSProperties,
+  MouseEvent,
+  memo,
+  useMemo,
+} from "react";
 
 import Icons from "./icons";
 
diff --git a/web/src/beta/components/InsertionBar/index.tsx b/web/src/beta/components/InsertionBar/index.tsx
index 1f4b51d9c..44455c333 100644
--- a/web/src/beta/components/InsertionBar/index.tsx
+++ b/web/src/beta/components/InsertionBar/index.tsx
@@ -1,8 +1,7 @@
-import { useRef, useCallback, useEffect, ReactNode } from "react";
-import { usePopper } from "react-popper";
-
 import Icon from "@reearth/beta/components/Icon";
 import { styled, css } from "@reearth/services/theme";
+import { useRef, useCallback, useEffect, ReactNode } from "react";
+import { usePopper } from "react-popper";
 
 import Portal from "../Portal";
 
@@ -62,17 +61,26 @@ const InsertionBar: React.FC<Props> = ({
         hovered={!!children}
         pos={pos}
         mode={mode}
-        onClick={handleClick}>
-        <InsertLine className="WORKAROUND_INSERTION_BAR" circleVisible={mode === "dragging"} />
+        onClick={handleClick}
+      >
+        <InsertLine
+          className="WORKAROUND_INSERTION_BAR"
+          circleVisible={mode === "dragging"}
+        />
         <ButtonWrapper
           className="WORKAROUND_INSERTION_BAR"
           visible={mode === "visible"}
-          hovered={!!children}>
+          hovered={!!children}
+        >
           <StyledAddButton onClick={handleClick} icon="plusSquare" size={13} />
         </ButtonWrapper>
       </Wrapper>
       <Portal>
-        <div ref={popperElement} style={{ ...styles.popper }} {...attributes.popper}>
+        <div
+          ref={popperElement}
+          style={{ ...styles.popper }}
+          {...attributes.popper}
+        >
           {children}
         </div>
       </Portal>
@@ -88,12 +96,13 @@ const StyledAddButton = styled(Icon)`
 `;
 
 const ButtonWrapper = styled.div<{ visible?: boolean; hovered?: boolean }>`
-  display: ${props => (props.visible ? "block" : "none")};
+  display: ${(props) => (props.visible ? "block" : "none")};
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: ${({ hovered, theme }) => (hovered ? theme.content.withBackground : theme.content.main)};
+  color: ${({ hovered, theme }) =>
+    hovered ? theme.content.withBackground : theme.content.main};
 `;
 
 const InsertLine = styled.div<{ circleVisible?: boolean }>`
@@ -106,7 +115,7 @@ const InsertLine = styled.div<{ circleVisible?: boolean }>`
   background: ${({ theme }) => theme.select.main};
 
   &::before {
-    display: ${props => (props.circleVisible ? "block" : "none")};
+    display: ${(props) => (props.circleVisible ? "block" : "none")};
     content: "";
     position: absolute;
     left: 0;
@@ -134,14 +143,16 @@ const Wrapper = styled.div<WrapperProps>`
   position: absolute;
   left: 0;
   width: 100%;
-  z-index: ${props => props.theme.zIndexes.visualizer.storyPage.indicator.unselected};
-  top: ${props => (props.pos === "top" ? "0%" : "100%")};
+  z-index: ${(props) =>
+    props.theme.zIndexes.visualizer.storyPage.indicator.unselected};
+  top: ${(props) => (props.pos === "top" ? "0%" : "100%")};
   transform: translateY(-50%);
   height: 15px;
   cursor: pointer;
 
   & .WORKAROUND_INSERTION_BAR {
-    opacity: ${props => (!props.hovered && props.mode === "visible" ? "0" : "1")};
+    opacity: ${(props) =>
+      !props.hovered && props.mode === "visible" ? "0" : "1"};
     transition: all 0.5s;
   }
 
diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx
index fe2306b52..97ad3e765 100644
--- a/web/src/beta/components/InsertionButton/index.tsx
+++ b/web/src/beta/components/InsertionButton/index.tsx
@@ -38,15 +38,15 @@ const Border = styled.object`
   height: 1px;
   width: 100%;
 
-  background: ${props => props.theme.select.main};
+  background: ${(props) => props.theme.select.main};
   border-radius: 1px;
 `;
 
 const StyledIcon = styled(Icon)`
-  background: ${props => props.theme.select.main};
+  background: ${(props) => props.theme.select.main};
   border-radius: 50%;
   padding: 2px;
-  color: ${props => props.theme.bg.transparentBlack};
+  color: ${(props) => props.theme.bg.transparentBlack};
 `;
 
 export default InsertionButton;
diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
index 643416528..eb65c3ea4 100644
--- a/web/src/beta/components/ListItem/index.tsx
+++ b/web/src/beta/components/ListItem/index.tsx
@@ -1,10 +1,9 @@
 import { Placement } from "@floating-ui/react";
-import { FC, MouseEvent, ReactNode } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
+import { FC, MouseEvent, ReactNode } from "react";
 
 type Clamp = "left" | "right";
 
@@ -34,7 +33,12 @@ const ListItem: FC<Props> = ({
   onOpenChange,
 }) => {
   return (
-    <Wrapper border={border} isSelected={isSelected} isOpenAction={isOpenAction} clamp={clamp}>
+    <Wrapper
+      border={border}
+      isSelected={isSelected}
+      isOpenAction={isOpenAction}
+      clamp={clamp}
+    >
       <Inner onClick={onItemClick}>
         {typeof children === "string" ? (
           <StyledText size="footnote">{children}</StyledText>
@@ -46,7 +50,8 @@ const ListItem: FC<Props> = ({
         <Popover.Provider
           open={isOpenAction}
           placement={actionPlacement}
-          onOpenChange={onOpenChange}>
+          onOpenChange={onOpenChange}
+        >
           <Popover.Trigger asChild>
             <Button clamp={clamp} onClick={onActionClick}>
               <Icon icon="actionbutton" size={16} />
@@ -71,16 +76,22 @@ const Wrapper = styled.div<{
   min-height: 36px;
   align-items: center;
   color: ${({ theme }) => theme.content.main};
-  border: 1px solid ${({ border, theme }) => (border ? theme.outline.weakest : "transparent")};
+  border: 1px solid
+    ${({ border, theme }) => (border ? theme.outline.weakest : "transparent")};
   border-radius: ${({ clamp }) =>
-    clamp === "left" ? "0 4px 4px 0" : clamp === "right" ? "4px 0 0 4px" : "4px"};
+    clamp === "left"
+      ? "0 4px 4px 0"
+      : clamp === "right"
+        ? "4px 0 0 4px"
+        : "4px"};
   background: ${({ theme, isSelected, isOpenAction }) =>
     isSelected ? theme.select.main : isOpenAction ? theme.bg[3] : "inherit"};
   transition: all 0.2s;
   cursor: pointer;
 
   :hover {
-    ${({ isSelected, theme }) => !isSelected && `background-color:` + theme.bg[3]}
+    ${({ isSelected, theme }) =>
+      !isSelected && `background-color:` + theme.bg[3]}
   }
 `;
 
@@ -104,5 +115,9 @@ const Button = styled.div<{ clamp?: Clamp }>`
   height: 36px;
   color: ${({ theme }) => theme.content.weak};
   border-radius: ${({ clamp }) =>
-    clamp === "left" ? "0 4px 4px 0" : clamp === "right" ? "4px 0 0 4px" : "4px"};
+    clamp === "left"
+      ? "0 4px 4px 0"
+      : clamp === "right"
+        ? "4px 0 0 4px"
+        : "4px"};
 `;
diff --git a/web/src/beta/components/Loading/index.tsx b/web/src/beta/components/Loading/index.tsx
index c82a636cd..dc1b86bbc 100644
--- a/web/src/beta/components/Loading/index.tsx
+++ b/web/src/beta/components/Loading/index.tsx
@@ -1,8 +1,7 @@
+import { styled, useTheme } from "@reearth/services/theme";
 import React from "react";
 import { RingLoader } from "react-spinners";
 
-import { styled, useTheme } from "@reearth/services/theme";
-
 import Portal from "../Portal";
 
 export type Props = {
@@ -26,26 +25,39 @@ const Loading: React.FC<Props> = ({
 }) => {
   const theme = useTheme();
   const loading = (
-    <LoadingWrapper className={className} fixed={fixed} overlay={overlay} relative={relative}>
-      <RingLoader size={animationSize ?? 33} color={animationColor ?? theme.select.main} />
+    <LoadingWrapper
+      className={className}
+      fixed={fixed}
+      overlay={overlay}
+      relative={relative}
+    >
+      <RingLoader
+        size={animationSize ?? 33}
+        color={animationColor ?? theme.select.main}
+      />
     </LoadingWrapper>
   );
   return portal ? <Portal>{loading}</Portal> : loading;
 };
 
-const LoadingWrapper = styled.div<{ fixed?: boolean; overlay?: boolean; relative?: boolean }>`
+const LoadingWrapper = styled.div<{
+  fixed?: boolean;
+  overlay?: boolean;
+  relative?: boolean;
+}>`
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 14px;
-  position: ${({ fixed, relative }) => (fixed ? "fixed" : relative ? "relative" : "absolute")};
+  position: ${({ fixed, relative }) =>
+    fixed ? "fixed" : relative ? "relative" : "absolute"};
   top: 0;
   left: 0;
   background: ${({ overlay, theme }) => (overlay ? theme.bg[0] : null)};
   opacity: 0.8;
-  z-index: ${props => props.theme.zIndexes.editor.loading};
+  z-index: ${(props) => props.theme.zIndexes.editor.loading};
 `;
 
 export default Loading;
diff --git a/web/src/beta/components/Modal/ModalFrame/index.tsx b/web/src/beta/components/Modal/ModalFrame/index.tsx
index f78f537f8..3e3288f73 100644
--- a/web/src/beta/components/Modal/ModalFrame/index.tsx
+++ b/web/src/beta/components/Modal/ModalFrame/index.tsx
@@ -1,10 +1,9 @@
-import useTransition, { TransitionStatus } from "@rot1024/use-transition";
-import { ReactNode, useRef, useCallback, useMemo } from "react";
-import { useClickAway, useKeyPressEvent } from "react-use";
-
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
+import useTransition, { TransitionStatus } from "@rot1024/use-transition";
+import { ReactNode, useRef, useCallback, useMemo } from "react";
+import { useClickAway, useKeyPressEvent } from "react-use";
 
 export type Props = {
   className?: string;
@@ -15,7 +14,14 @@ export type Props = {
   onClose?: () => void;
 };
 
-const Modal: React.FC<Props> = ({ className, size, isVisible, title, onClose, children }) => {
+const Modal: React.FC<Props> = ({
+  className,
+  size,
+  isVisible,
+  title,
+  onClose,
+  children,
+}) => {
   const ref = useRef<HTMLDivElement>(null);
   useClickAway(ref, () => onClose?.());
 
@@ -44,7 +50,9 @@ const Modal: React.FC<Props> = ({ className, size, isVisible, title, onClose, ch
               <ModalTitle size="body" weight="regular" customColor>
                 {title}
               </ModalTitle>
-              {onClose && <CloseIcon icon="cancel" size={16} onClick={onClose} />}
+              {onClose && (
+                <CloseIcon icon="cancel" size={16} onClick={onClose} />
+              )}
             </HeaderWrapper>
           )}
           <InnerWrapper>{children}</InnerWrapper>
@@ -65,7 +73,8 @@ const Bg = styled.div<{ state: TransitionStatus }>`
   overflow: auto;
   transition: ${({ state }) =>
     state === "entering" || state === "exiting" ? "all 0.3s ease" : ""};
-  opacity: ${({ state }) => (state === "entered" || state === "entering" ? 1 : 0)};
+  opacity: ${({ state }) =>
+    state === "entered" || state === "entering" ? 1 : 0};
 `;
 
 const CenteredWrapper = styled.div<{ width?: string }>`
diff --git a/web/src/beta/components/Modal/index.stories.tsx b/web/src/beta/components/Modal/index.stories.tsx
index fc53f8fa9..086e814fe 100644
--- a/web/src/beta/components/Modal/index.stories.tsx
+++ b/web/src/beta/components/Modal/index.stories.tsx
@@ -17,11 +17,12 @@ type Story = StoryObj<typeof Modal>;
 const ModalContent: React.FC = () => {
   return (
     <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
-      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
-      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
-      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
-      classical literature, discovered the undoubtable source.
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+      roots in a piece of classical Latin literature from 45 BC, making it over
+      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+      College in Virginia, looked up one of the more obscure Latin words,
+      consectetur, from a Lorem Ipsum passage, and going through the cites of
+      the word in classical literature, discovered the undoubtable source.
     </Text>
   );
 };
@@ -30,11 +31,12 @@ const TabContent: ReactNode = (
   <>
     <Text size="h1">Tab Title</Text>
     <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
-      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
-      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
-      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
-      classical literature, discovered the undoubtable source.
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+      roots in a piece of classical Latin literature from 45 BC, making it over
+      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+      College in Virginia, looked up one of the more obscure Latin words,
+      consectetur, from a Lorem Ipsum passage, and going through the cites of
+      the word in classical literature, discovered the undoubtable source.
     </Text>
   </>
 );
@@ -42,11 +44,12 @@ const TabContent2: ReactNode = (
   <>
     <Text size="h1">Tab Title2</Text>
     <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
-      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
-      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
-      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
-      classical literature, discovered the undoubtable source.
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+      roots in a piece of classical Latin literature from 45 BC, making it over
+      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+      College in Virginia, looked up one of the more obscure Latin words,
+      consectetur, from a Lorem Ipsum passage, and going through the cites of
+      the word in classical literature, discovered the undoubtable source.
     </Text>
   </>
 );
@@ -56,11 +59,12 @@ const TabContent3: ReactNode = (
     <Text size="h1">Tab Title3</Text>
     <Text size="h4">Tab subTitle3</Text>
     <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
-      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
-      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
-      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
-      classical literature, discovered the undoubtable source.
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+      roots in a piece of classical Latin literature from 45 BC, making it over
+      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+      College in Virginia, looked up one of the more obscure Latin words,
+      consectetur, from a Lorem Ipsum passage, and going through the cites of
+      the word in classical literature, discovered the undoubtable source.
     </Text>
   </>
 );
@@ -96,7 +100,8 @@ export const Small: Story = {
       isVisible={true}
       title="Small modal"
       button1={<Button text="Confirm" />}
-      button2={<Button text="Cancel" />}>
+      button2={<Button text="Cancel" />}
+    >
       <ModalContent />
     </Modal>
   ),
@@ -109,7 +114,8 @@ export const Medium: Story = {
       isVisible={true}
       title="Medium modal"
       button1={<Button text="Confirm" />}
-      button2={<Button text="Cancel" />}>
+      button2={<Button text="Cancel" />}
+    >
       <ModalContent />
     </Modal>
   ),
@@ -122,7 +128,8 @@ export const Large: Story = {
       isVisible={true}
       title="Large modal"
       button1={<Button text="Confirm" />}
-      button2={<Button text="Cancel" />}>
+      button2={<Button text="Cancel" />}
+    >
       <ModalContent />
     </Modal>
   ),
diff --git a/web/src/beta/components/Modal/index.tsx b/web/src/beta/components/Modal/index.tsx
index a73195570..403ef908f 100644
--- a/web/src/beta/components/Modal/index.tsx
+++ b/web/src/beta/components/Modal/index.tsx
@@ -1,8 +1,9 @@
-import { ReactNode, useCallback, useState } from "react";
-
 import Wrapper from "@reearth/beta/components/Modal/ModalFrame";
-import useManageSwitchState, { SwitchField } from "@reearth/beta/hooks/useManageSwitchState/hooks";
+import useManageSwitchState, {
+  SwitchField,
+} from "@reearth/beta/hooks/useManageSwitchState/hooks";
 import { styled } from "@reearth/services/theme";
+import { ReactNode, useCallback, useState } from "react";
 
 type Size = "sm" | "md" | "lg";
 
@@ -66,24 +67,33 @@ const Modal: React.FC<Props> = ({
       size={size}
       isVisible={isVisible}
       title={title}
-      onClose={onClose}>
+      onClose={onClose}
+    >
       <InnerWrapper>
         {tabs.length > 0 && (
           <NavBarWrapper>
-            {tabs.map(tab => (
-              <Tab key={tab.id} isSelected={tab.active} onClick={() => handleTabChange(tab.id)}>
+            {tabs.map((tab) => (
+              <Tab
+                key={tab.id}
+                isSelected={tab.active}
+                onClick={() => handleTabChange(tab.id)}
+              >
                 {tab.label}
               </Tab>
             ))}
           </NavBarWrapper>
         )}
         <ContentWrapper>
-          {tabs.length > 0 && <Content>{tabs.find(tab => tab.active === true)?.content}</Content>}
+          {tabs.length > 0 && (
+            <Content>
+              {tabs.find((tab) => tab.active === true)?.content}
+            </Content>
+          )}
           {children && <Content isContent={isContent}> {children}</Content>}
           {button1 || button2 ? (
             <ButtonWrapper>
-              {tabs.find(tab => tab.active === true)?.tabButton1 ?? button1}
-              {tabs.find(tab => tab.active === true)?.tabButton2 ?? button2}
+              {tabs.find((tab) => tab.active === true)?.tabButton1 ?? button1}
+              {tabs.find((tab) => tab.active === true)?.tabButton2 ?? button2}
             </ButtonWrapper>
           ) : null}
         </ContentWrapper>
@@ -109,8 +119,10 @@ const Tab = styled.button<{ isSelected?: boolean }>`
   display: flex;
   padding: 4px 8px;
   border-radius: 4px;
-  background: ${({ isSelected, theme }) => (isSelected ? theme.bg[2] : "transparent")};
-  color: ${({ isSelected, theme }) => (isSelected ? theme.content.main : theme.content.weak)};
+  background: ${({ isSelected, theme }) =>
+    isSelected ? theme.bg[2] : "transparent"};
+  color: ${({ isSelected, theme }) =>
+    isSelected ? theme.content.main : theme.content.weak};
 `;
 
 const ContentWrapper = styled.div`
@@ -121,7 +133,8 @@ const ContentWrapper = styled.div`
 
 const Content = styled.div<{ isContent?: boolean }>`
   display: flex;
-  padding: ${({ isContent, theme }) => (isContent ? theme.spacing.normal : theme.spacing.super)}px;
+  padding: ${({ isContent, theme }) =>
+    isContent ? theme.spacing.normal : theme.spacing.super}px;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing.largest}px;
   align-self: stretch;
diff --git a/web/src/beta/components/NotFound/index.tsx b/web/src/beta/components/NotFound/index.tsx
index a8046f5e9..6cc8da6a8 100644
--- a/web/src/beta/components/NotFound/index.tsx
+++ b/web/src/beta/components/NotFound/index.tsx
@@ -10,7 +10,11 @@ type Props = {
   customType?: "error" | "warning";
 };
 
-const NotFound: React.FC<Props> = ({ customHeader, customMessage, customType }) => {
+const NotFound: React.FC<Props> = ({
+  customHeader,
+  customMessage,
+  customType,
+}) => {
   const t = useT();
 
   return (
@@ -18,10 +22,16 @@ const NotFound: React.FC<Props> = ({ customHeader, customMessage, customType })
       <InnerWrapper>
         <IconWrapper>
           <Icon icon="logo" />
-          <Icon icon="cancel" size={110} color={customType === "warning" ? "yellow" : "red"} />
+          <Icon
+            icon="cancel"
+            size={110}
+            color={customType === "warning" ? "yellow" : "red"}
+          />
         </IconWrapper>
         <Text size="h1">{customHeader ?? `404 ${t("Not found")}`}</Text>
-        {customMessage && <CustomMessage size="h3">{customMessage}</CustomMessage>}
+        {customMessage && (
+          <CustomMessage size="h3">{customMessage}</CustomMessage>
+        )}
       </InnerWrapper>
     </Wrapper>
   );
diff --git a/web/src/beta/components/Popover/index.stories.tsx b/web/src/beta/components/Popover/index.stories.tsx
index 4f7d51d52..31ec49c1c 100644
--- a/web/src/beta/components/Popover/index.stories.tsx
+++ b/web/src/beta/components/Popover/index.stories.tsx
@@ -9,23 +9,27 @@ export default {
 type Story = StoryObj<typeof Popover.Provider>;
 
 export const Controlled: Story = {
-  render: args => {
+  render: (args) => {
     return <Popover.Provider {...args} />;
   },
   args: {
     children: (
       <>
         <Popover.Trigger>
-          <div style={{ background: "gray" }}>Trigger(cannot toggle by click)</div>
+          <div style={{ background: "gray" }}>
+            Trigger(cannot toggle by click)
+          </div>
         </Popover.Trigger>
         <Popover.Content>
           <div>
-            If you pass open or onOpenChange, you can handle open state by yourself.
+            If you pass open or onOpenChange, you can handle open state by
+            yourself.
             <br />
-            Which means the PopoverClose component does not change state automatically but still
-            causes event.
+            Which means the PopoverClose component does not change state
+            automatically but still causes event.
             <br />
-            This component set as top placement, but it can automatically adjust position to bottom.
+            This component set as top placement, but it can automatically adjust
+            position to bottom.
           </div>
           <Popover.Close style={{ color: "inherit" }}>Close</Popover.Close>
         </Popover.Content>
@@ -39,7 +43,7 @@ export const Controlled: Story = {
 };
 
 export const Uncontrolled: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <div style={{ maxWidth: "200px", margin: "0 auto" }}>
         <Popover.Provider {...args} />
@@ -54,8 +58,8 @@ export const Uncontrolled: Story = {
         </Popover.Trigger>
         <Popover.Content style={{ background: "gray" }}>
           <div>
-            If you do not pass both open and onOpenChange, automatically managed open state by this
-            component.
+            If you do not pass both open and onOpenChange, automatically managed
+            open state by this component.
           </div>
           <Popover.Close style={{ color: "inherit" }}>Close</Popover.Close>
         </Popover.Content>
diff --git a/web/src/beta/components/Popover/index.tsx b/web/src/beta/components/Popover/index.tsx
index f3b58f22f..b713cd474 100644
--- a/web/src/beta/components/Popover/index.tsx
+++ b/web/src/beta/components/Popover/index.tsx
@@ -4,6 +4,11 @@ import {
   FloatingFocusManager,
   useTransitionStyles,
 } from "@floating-ui/react";
+import {
+  PopoverContext,
+  usePopoverContext,
+} from "@reearth/beta/components/Popover/context";
+import { useTheme } from "@reearth/services/theme";
 import {
   forwardRef,
   isValidElement,
@@ -14,9 +19,6 @@ import {
   type ReactNode,
 } from "react";
 
-import { PopoverContext, usePopoverContext } from "@reearth/beta/components/Popover/context";
-import { useTheme } from "@reearth/services/theme";
-
 import usePopover from "./hooks";
 import { PopoverOptions } from "./types";
 
@@ -29,7 +31,11 @@ export function Provider({
   children: ReactNode;
 } & PopoverOptions) {
   const popover = usePopover({ modal, ...restOptions });
-  return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;
+  return (
+    <PopoverContext.Provider value={popover}>
+      {children}
+    </PopoverContext.Provider>
+  );
 }
 
 type TriggerProps = {
@@ -38,91 +44,114 @@ type TriggerProps = {
   asChild?: boolean;
 };
 
-export const Trigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TriggerProps>(
-  function Trigger({ children, asChild = false, className, ...props }, propRef) {
-    const context = usePopoverContext();
-    const childrenRef = (children as any).ref;
-    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+export const Trigger = forwardRef<
+  HTMLElement,
+  HTMLProps<HTMLElement> & TriggerProps
+>(function Trigger(
+  { children, asChild = false, className, ...props },
+  propRef,
+) {
+  const context = usePopoverContext();
+  const childrenRef = (children as any).ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
-    // `asChild` allows the user to pass any element as the anchor
-    if (asChild && isValidElement(children)) {
-      return cloneElement(
-        children,
-        context.getReferenceProps({
-          ref,
-          ...props,
-          ...children.props,
-          "data-state": context.open ? "open" : "closed",
-        }),
-      );
-    }
-
-    return (
-      <button
-        ref={ref}
-        className={className}
-        type="button"
-        // The user can style the trigger based on the state
-        data-state={context.open ? "open" : "closed"}
-        {...context.getReferenceProps(props)}>
-        {children}
-      </button>
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && isValidElement(children)) {
+    return cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        "data-state": context.open ? "open" : "closed",
+      }),
     );
-  },
-);
+  }
+
+  return (
+    <button
+      ref={ref}
+      className={className}
+      type="button"
+      // The user can style the trigger based on the state
+      data-state={context.open ? "open" : "closed"}
+      {...context.getReferenceProps(props)}
+    >
+      {children}
+    </button>
+  );
+});
 
 type ContentProps = {
   className?: string;
   attachToRoot?: boolean;
 };
 
-export const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement> & ContentProps>(
-  function Content({ style, className, attachToRoot = false, ...props }, propRef) {
-    const { context: floatingContext, ...context } = usePopoverContext();
-    const theme = useTheme();
-    const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    const { isMounted, styles: transitionStyles } = useTransitionStyles(floatingContext, {
+export const Content = forwardRef<
+  HTMLDivElement,
+  HTMLProps<HTMLDivElement> & ContentProps
+>(function Content(
+  { style, className, attachToRoot = false, ...props },
+  propRef,
+) {
+  const { context: floatingContext, ...context } = usePopoverContext();
+  const theme = useTheme();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(
+    floatingContext,
+    {
       duration: 50,
-    });
+    },
+  );
 
-    if (!isMounted) return null;
+  if (!isMounted) return null;
 
-    return (
-      <FloatingPortal
-        // whether to render this inside the Trigger or outside the main div
-        root={attachToRoot ? (context.refs.domReference as MutableRefObject<null>) : null}>
-        <FloatingFocusManager context={floatingContext} modal={context.modal} initialFocus={-1}>
-          <div
-            ref={ref}
-            className={className}
-            style={{
-              ...context.floatingStyles,
-              ...transitionStyles,
-              ...style,
-              zIndex: theme.zIndexes.editor.popover,
-            }}
-            {...context.getFloatingProps(props)}>
-            {props.children}
-          </div>
-        </FloatingFocusManager>
-      </FloatingPortal>
-    );
-  },
-);
+  return (
+    <FloatingPortal
+      // whether to render this inside the Trigger or outside the main div
+      root={
+        attachToRoot
+          ? (context.refs.domReference as MutableRefObject<null>)
+          : null
+      }
+    >
+      <FloatingFocusManager
+        context={floatingContext}
+        modal={context.modal}
+        initialFocus={-1}
+      >
+        <div
+          ref={ref}
+          className={className}
+          style={{
+            ...context.floatingStyles,
+            ...transitionStyles,
+            ...style,
+            zIndex: theme.zIndexes.editor.popover,
+          }}
+          {...context.getFloatingProps(props)}
+        >
+          {props.children}
+        </div>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+});
 
-export const Close = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
-  function PopoverClose(props, ref) {
-    const { setOpen } = usePopoverContext();
-    return (
-      <button
-        type="button"
-        ref={ref}
-        {...props}
-        onClick={event => {
-          props.onClick?.(event);
-          setOpen(false);
-        }}
-      />
-    );
-  },
-);
+export const Close = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>(function PopoverClose(props, ref) {
+  const { setOpen } = usePopoverContext();
+  return (
+    <button
+      type="button"
+      ref={ref}
+      {...props}
+      onClick={(event) => {
+        props.onClick?.(event);
+        setOpen(false);
+      }}
+    />
+  );
+});
diff --git a/web/src/beta/components/PopoverMenuContent/index.tsx b/web/src/beta/components/PopoverMenuContent/index.tsx
index c752ec659..fb9468082 100644
--- a/web/src/beta/components/PopoverMenuContent/index.tsx
+++ b/web/src/beta/components/PopoverMenuContent/index.tsx
@@ -46,7 +46,8 @@ const PopoverMenuContent: React.FC<Props> = ({ size, width, items }) => {
             isLast={i === items.length - 1}
             size={size}
             disabled={!!item.disabled}
-            onClick={item.onClick}>
+            onClick={item.onClick}
+          >
             {item.icon && (
               <SLeftIcon>
                 <Icon icon={item.icon} size={stylesBySize[size].iconSize} />
@@ -73,14 +74,16 @@ const SRoot = styled.div<Pick<Props, "width">>`
 `;
 
 const SRow = styled.button<
-  Pick<Props, "size"> & Pick<MenuItem, "isSelected"> & { isFirst: boolean; isLast: boolean }
+  Pick<Props, "size"> &
+    Pick<MenuItem, "isSelected"> & { isFirst: boolean; isLast: boolean }
 >`
   box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
   gap: 8px;
-  color: ${({ theme, disabled }) => (disabled ? theme.content.weak : theme.content.main)};
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.content.weak : theme.content.main};
   ${({ disabled }) => disabled && "cursor: default;"}
 
   ${({ isFirst }) => !isFirst && "border-top: 1px solid transparent;"}
@@ -88,7 +91,8 @@ const SRow = styled.button<
   ${({ size }) => stylesBySize[size].row ?? ""}
   
   :hover {
-    background: ${({ isSelected, theme, disabled }) => !disabled && !isSelected && theme.bg[2]};
+    background: ${({ isSelected, theme, disabled }) =>
+      !disabled && !isSelected && theme.bg[2]};
   }
 `;
 
diff --git a/web/src/beta/components/README.md b/web/src/beta/components/README.md
index 1ba48727c..3be2b3d02 100644
--- a/web/src/beta/components/README.md
+++ b/web/src/beta/components/README.md
@@ -1 +1 @@
-# All basic components being reused in multiple places in the app
\ No newline at end of file
+# All basic components being reused in multiple places in the app
diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.tsx
index 0d7eb9bfb..7581b9a60 100644
--- a/web/src/beta/components/RadioGroup/RadioBox/index.tsx
+++ b/web/src/beta/components/RadioGroup/RadioBox/index.tsx
@@ -1,6 +1,5 @@
-import { useCallback } from "react";
-
 import { fonts, styled } from "@reearth/services/theme";
+import { useCallback } from "react";
 
 export type Props = {
   selected?: boolean;
@@ -9,7 +8,12 @@ export type Props = {
   onClick?: (value: string) => void;
 };
 
-const RadioBox: React.FC<Props> = ({ selected, keyValue, label, onClick }: Props) => {
+const RadioBox: React.FC<Props> = ({
+  selected,
+  keyValue,
+  label,
+  onClick,
+}: Props) => {
   const handleRadioClick = useCallback(
     (value: string) => {
       onClick?.(value);
@@ -19,7 +23,11 @@ const RadioBox: React.FC<Props> = ({ selected, keyValue, label, onClick }: Props
 
   return (
     <Radio>
-      <RadioInput type="radio" value={keyValue} onClick={() => handleRadioClick(keyValue)} />
+      <RadioInput
+        type="radio"
+        value={keyValue}
+        onClick={() => handleRadioClick(keyValue)}
+      />
       <RadioButton selected={selected}>
         {selected && <RadioIndicator selected={selected} />}
       </RadioButton>
@@ -36,7 +44,8 @@ const RadioIndicator = styled.div<{
   height: 10px;
   border-radius: 50%;
   background-color: white;
-  background-color: ${({ selected, theme }) => (selected ? theme.select.main : theme.content.main)};
+  background-color: ${({ selected, theme }) =>
+    selected ? theme.select.main : theme.content.main};
 `;
 
 const Radio = styled.label`
@@ -66,7 +75,9 @@ const RadioButton = styled.span<{
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 2px solid ${({ selected, theme }) => (selected ? theme.select.main : theme.content.main)};
+  border: 2px solid
+    ${({ selected, theme }) =>
+      selected ? theme.select.main : theme.content.main};
   margin-right: 4px;
   display: flex;
   justify-content: center;
diff --git a/web/src/beta/components/RadioGroup/index.stories.tsx b/web/src/beta/components/RadioGroup/index.stories.tsx
index 52bc11330..ffe3dfe66 100644
--- a/web/src/beta/components/RadioGroup/index.stories.tsx
+++ b/web/src/beta/components/RadioGroup/index.stories.tsx
@@ -22,7 +22,10 @@ const options = [
 export const VerticalRadioGroup: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const handleChange = useCallback((value: string) => updateArgs({ value }), [updateArgs]);
+  const handleChange = useCallback(
+    (value: string) => updateArgs({ value }),
+    [updateArgs],
+  );
 
   return (
     <div>
@@ -39,7 +42,10 @@ VerticalRadioGroup.args = {
 export const HorizontalRadioGroup: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const handleChange = useCallback((value: string) => updateArgs({ value }), [updateArgs]);
+  const handleChange = useCallback(
+    (value: string) => updateArgs({ value }),
+    [updateArgs],
+  );
 
   return (
     <div>
diff --git a/web/src/beta/components/RangeSlider/index.stories.tsx b/web/src/beta/components/RangeSlider/index.stories.tsx
index a131764b9..b1d692d75 100644
--- a/web/src/beta/components/RangeSlider/index.stories.tsx
+++ b/web/src/beta/components/RangeSlider/index.stories.tsx
@@ -1,9 +1,8 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import RangeSlider, { Props } from ".";
 
 const meta: Meta<typeof RangeSlider> = {
@@ -17,7 +16,10 @@ export default meta;
 export const Default: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const handleChange = useCallback((value: number[]) => updateArgs({ value: value }), [updateArgs]);
+  const handleChange = useCallback(
+    (value: number[]) => updateArgs({ value: value }),
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
@@ -25,7 +27,11 @@ export const Default: Story = (args: Props) => {
         <RangeSlider {...args} onChange={handleChange} />
       </div>
       <div>
-        <RangeSlider {...args} max={args.max ? 2 * args.max : undefined} onChange={handleChange} />
+        <RangeSlider
+          {...args}
+          max={args.max ? 2 * args.max : undefined}
+          onChange={handleChange}
+        />
       </div>
       <div>
         <RangeSlider {...args} disabled={true} onChange={handleChange} />
diff --git a/web/src/beta/components/RangeSlider/index.tsx b/web/src/beta/components/RangeSlider/index.tsx
index 283f2e52d..498dd3185 100644
--- a/web/src/beta/components/RangeSlider/index.tsx
+++ b/web/src/beta/components/RangeSlider/index.tsx
@@ -1,8 +1,7 @@
+import { styled } from "@reearth/services/theme";
 import RCSlider from "rc-slider";
 import React, { ComponentProps } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import "rc-slider/assets/index.css";
 
 const RangeSliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider.Range);
@@ -12,7 +11,11 @@ export type Props = {
   max?: number;
 } & ComponentProps<typeof RangeSliderWithTooltip>;
 
-const calculateStep = (min?: number, max?: number, step?: number | null): number => {
+const calculateStep = (
+  min?: number,
+  max?: number,
+  step?: number | null,
+): number => {
   if (step != undefined) {
     return step;
   } else if (min !== undefined && max !== undefined) {
diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts
index 0d065535b..7c596fbc4 100644
--- a/web/src/beta/components/Resizable/hooks.ts
+++ b/web/src/beta/components/Resizable/hooks.ts
@@ -1,6 +1,5 @@
-import React, { useCallback, useState, useEffect, useMemo } from "react";
-
 import { setLocalStorageData } from "@reearth/beta/utils/localstorage";
+import React, { useCallback, useState, useEffect, useMemo } from "react";
 
 export type Direction = "vertical" | "horizontal";
 export type Gutter = "start" | "end";
@@ -26,7 +25,12 @@ const getPositionFromEvent = (e: React.MouseEvent | React.TouchEvent) => {
 const getDelta = (direction: Direction, deltaX: number, deltaY: number) =>
   direction === "vertical" ? deltaX : deltaY;
 
-const getSize = (size: number, delta: number, minSize?: number, maxSize?: number) => {
+const getSize = (
+  size: number,
+  delta: number,
+  minSize?: number,
+  maxSize?: number,
+) => {
   let newSize = size + delta;
   if (minSize !== undefined && newSize < minSize) newSize = minSize;
   if (maxSize !== undefined && newSize > maxSize) newSize = maxSize;
@@ -72,7 +76,9 @@ export default (
   }, [localStorageKey, getLocalStorageParsedState, initialSize]);
 
   const onResizeStart = useCallback(
-    (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
+    (
+      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+    ) => {
       const position = getPositionFromEvent(e);
       if (!position) return;
 
@@ -87,7 +93,8 @@ export default (
     (e: MouseEvent | TouchEvent) => {
       if (!isResizing) return;
 
-      const { clientX: x, clientY: y } = e instanceof MouseEvent ? e : e.touches[0];
+      const { clientX: x, clientY: y } =
+        e instanceof MouseEvent ? e : e.touches[0];
       const deltaX = gutter === "start" ? position.x - x : x - position.x;
       const deltaY = gutter === "start" ? position.y - y : y - position.y;
       const delta = getDelta(direction, deltaX, deltaY);
@@ -130,7 +137,9 @@ export default (
       size,
       minimized,
     };
-    localStorageKey && setLocalStorageData(localStorageKey, storedData);
+    if (localStorageKey) {
+      setLocalStorageData(localStorageKey, storedData);
+    }
   }, [isResizing, localStorageKey, minimized, size]);
 
   const bindEventListeners = useCallback(() => {
@@ -171,11 +180,12 @@ export default (
   const handleResetSize = useCallback(() => {
     setMinimized(false);
     setSize(initialSize);
-    localStorageKey &&
+    if (localStorageKey) {
       setLocalStorageData(localStorageKey, {
         size: initialSize,
         minimized: false,
       });
+    }
   }, [initialSize, localStorageKey]);
 
   return {
diff --git a/web/src/beta/components/Resizable/index.stories.tsx b/web/src/beta/components/Resizable/index.stories.tsx
index 0210be606..e24045981 100644
--- a/web/src/beta/components/Resizable/index.stories.tsx
+++ b/web/src/beta/components/Resizable/index.stories.tsx
@@ -9,7 +9,14 @@ const Container: React.FC<{ children?: ReactNode; style?: CSSProperties }> = ({
 }) => <div style={{ display: "flex", height: 400, ...style }}>{children}</div>;
 const Pane = <div style={{ flex: 1, background: "#ffffff" }} />;
 const Content = (
-  <div style={{ width: "100%", height: "100%", background: "#ffffff", color: "#000000" }}>
+  <div
+    style={{
+      width: "100%",
+      height: "100%",
+      background: "#ffffff",
+      color: "#000000",
+    }}
+  >
     content
   </div>
 );
@@ -25,7 +32,7 @@ export const Vertical: StoryObj<typeof Resizable> = {
     initialSize: 400,
     minSize: 100,
   },
-  render: args => {
+  render: (args) => {
     return (
       <Container style={{ flexDirection: "row" }}>
         <Resizable {...args}>{Content}</Resizable>
@@ -42,7 +49,7 @@ export const Horizontal: StoryObj<typeof Resizable> = {
     initialSize: 350,
     minSize: 200,
   },
-  render: args => {
+  render: (args) => {
     return (
       <Container style={{ flexDirection: "column" }}>
         <Resizable {...args}>{Content}</Resizable>
diff --git a/web/src/beta/components/Resizable/index.tsx b/web/src/beta/components/Resizable/index.tsx
index 661b2e2df..9e5da3995 100644
--- a/web/src/beta/components/Resizable/index.tsx
+++ b/web/src/beta/components/Resizable/index.tsx
@@ -1,7 +1,6 @@
-import { ReactNode } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import { styled } from "@reearth/services/theme";
+import { ReactNode } from "react";
 
 import useHooks, { type Direction, type Gutter } from "./hooks";
 
@@ -49,18 +48,26 @@ const Resizable: React.FC<Props> = ({
                   ? "arrowDown"
                   : "arrowUp"
                 : gutter === "end"
-                ? "arrowRight"
-                : "arrowLeft"
+                  ? "arrowRight"
+                  : "arrowLeft"
             }
           />
         </MinimizedWrapper>
       ) : (
         <StyledResizable direction={direction} size={size} minSize={minSize}>
-          {showTopGutter && <Gutter direction={direction} gutter={gutter} {...gutterProps} />}
-          {showLeftGutter && <Gutter direction={direction} gutter={gutter} {...gutterProps} />}
+          {showTopGutter && (
+            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
+          )}
+          {showLeftGutter && (
+            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
+          )}
           {children}
-          {showRightGutter && <Gutter direction={direction} gutter={gutter} {...gutterProps} />}
-          {showBottomGutter && <Gutter direction={direction} gutter={gutter} {...gutterProps} />}
+          {showRightGutter && (
+            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
+          )}
+          {showBottomGutter && (
+            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
+          )}
         </StyledResizable>
       )}
     </>
@@ -76,9 +83,12 @@ const StyledResizable = styled.div<{
   display: flex;
   align-items: stretch;
   position: relative;
-  flex-direction: ${({ direction }) => (direction === "vertical" ? "row" : "column")};
-  width: ${({ direction, size }) => (direction === "horizontal" ? null : `${size}px`)};
-  height: ${({ direction, size }) => (direction === "vertical" ? null : `${size}px`)};
+  flex-direction: ${({ direction }) =>
+    direction === "vertical" ? "row" : "column"};
+  width: ${({ direction, size }) =>
+    direction === "horizontal" ? null : `${size}px`};
+  height: ${({ direction, size }) =>
+    direction === "vertical" ? null : `${size}px`};
   flex-shrink: 0;
   min-width: ${({ direction, minSize }) =>
     direction === "vertical" && minSize ? `${minSize}px` : null};
@@ -99,10 +109,14 @@ const Gutter = styled.div<{ direction: Direction; gutter: Gutter }>`
   ${({ direction }) => direction === "vertical" && "height: 100%;"}
   ${({ direction }) => direction === "vertical" && "width: 4px;"}
   ${({ direction }) => direction === "vertical" && "cursor: col-resize;"}
-  left: ${({ direction, gutter }) => (direction === "vertical" && gutter === "start" ? 0 : null)};
-  right: ${({ direction, gutter }) => (direction === "vertical" && gutter === "end" ? 0 : null)};
-  top: ${({ direction, gutter }) => (direction === "horizontal" && gutter === "start" ? 0 : null)};
-  bottom: ${({ direction, gutter }) => (direction === "horizontal" && gutter === "end" ? 0 : null)};
+  left: ${({ direction, gutter }) =>
+    direction === "vertical" && gutter === "start" ? 0 : null};
+  right: ${({ direction, gutter }) =>
+    direction === "vertical" && gutter === "end" ? 0 : null};
+  top: ${({ direction, gutter }) =>
+    direction === "horizontal" && gutter === "start" ? 0 : null};
+  bottom: ${({ direction, gutter }) =>
+    direction === "horizontal" && gutter === "end" ? 0 : null};
 `;
 
 const MinimizedWrapper = styled.div<Pick<Props, "direction">>`
diff --git a/web/src/beta/components/SettingsButtons/index.stories.tsx b/web/src/beta/components/SettingsButtons/index.stories.tsx
index 2ad9e5183..a3ac8f8ae 100644
--- a/web/src/beta/components/SettingsButtons/index.stories.tsx
+++ b/web/src/beta/components/SettingsButtons/index.stories.tsx
@@ -18,7 +18,7 @@ export const Default: Story = {
     title: "Audio",
     icon: "audio",
   },
-  render: args => {
+  render: (args) => {
     return (
       <Wrapper>
         <SettingsButtons {...args} />
diff --git a/web/src/beta/components/SettingsButtons/index.tsx b/web/src/beta/components/SettingsButtons/index.tsx
index 42ed78285..539bc83bc 100644
--- a/web/src/beta/components/SettingsButtons/index.tsx
+++ b/web/src/beta/components/SettingsButtons/index.tsx
@@ -10,13 +10,23 @@ export interface Props {
   onSetting?: () => void;
 }
 
-const SettingsButtons: React.FC<Props> = ({ title, icon, onBlock, onEdit, onSetting }) => {
+const SettingsButtons: React.FC<Props> = ({
+  title,
+  icon,
+  onBlock,
+  onEdit,
+  onSetting,
+}) => {
   const theme = useTheme();
 
   return (
     <Wrapper>
       <StyledMainIcon size={16} onClick={onBlock} icon={icon} />
-      <StyledText size={"footnote"} color={theme.content.withBackground} onClick={onBlock}>
+      <StyledText
+        size={"footnote"}
+        color={theme.content.withBackground}
+        onClick={onBlock}
+      >
         {title}
       </StyledText>
       <StyledSubIcon size={12} icon={"editIcon"} onClick={onEdit} />
@@ -30,7 +40,7 @@ const Wrapper = styled.div`
   align-items: center;
 
   height: 100%;
-  background: ${props => props.theme.select.main};
+  background: ${(props) => props.theme.select.main};
 `;
 
 const StyledText = styled(Text)`
@@ -46,7 +56,7 @@ const StyledMainIcon = styled(Icon)`
 const StyledSubIcon = styled(Icon)`
   padding: 4px;
   justify-items: center;
-  border-left: 0.5px solid ${props => props.theme.outline.main};
+  border-left: 0.5px solid ${(props) => props.theme.outline.main};
   cursor: pointer;
 `;
 
diff --git a/web/src/beta/components/SidePanelSectionField/index.tsx b/web/src/beta/components/SidePanelSectionField/index.tsx
index ce67784b2..7470c8ff9 100644
--- a/web/src/beta/components/SidePanelSectionField/index.tsx
+++ b/web/src/beta/components/SidePanelSectionField/index.tsx
@@ -13,11 +13,19 @@ const SidePanelSectionField: React.FC<{
   children?: ReactNode;
   storageKey?: string;
   border?: string;
-}> = ({ className, title, startCollapsed, gap, children, storageKey, border }) => {
+}> = ({
+  className,
+  title,
+  startCollapsed,
+  gap,
+  children,
+  storageKey,
+  border,
+}) => {
   const theme = useTheme();
   const [opened, setOpened] = useState<boolean>(() => {
     const storedValue = localStorage.getItem(storageKey || "");
-    return storedValue ? JSON.parse(storedValue) : !startCollapsed ?? true;
+    return storedValue ? JSON.parse(storedValue) : !startCollapsed;
   });
 
   useEffect(() => {
@@ -31,7 +39,12 @@ const SidePanelSectionField: React.FC<{
           <Text size="body" color={theme.content.main}>
             {title}
           </Text>
-          <ArrowIcon icon="arrowToggle" size={12} color={theme.content.main} opened={opened} />
+          <ArrowIcon
+            icon="arrowToggle"
+            size={12}
+            color={theme.content.main}
+            opened={opened}
+          />
         </Header>
       )}
 
@@ -59,7 +72,7 @@ const Header = styled.div`
 `;
 
 const ArrowIcon = styled(Icon)<{ opened?: boolean }>`
-  transform: rotate(${props => (props.opened ? 90 : 180)}deg);
+  transform: rotate(${(props) => (props.opened ? 90 : 180)}deg);
   transition: all 0.2s;
 `;
 
@@ -68,7 +81,8 @@ const Content = styled.div<{ gap?: number; border?: string }>`
   display: flex;
   flex-direction: column;
   gap: ${({ gap }) => (gap ?? 16) + "px"} 16px;
-  border-top: ${({ border, theme }) => (border ? `1px solid  ${theme.outline.weak}` : "none")};
+  border-top: ${({ border, theme }) =>
+    border ? `1px solid  ${theme.outline.weak}` : "none"};
 `;
 
 export default SidePanelSectionField;
diff --git a/web/src/beta/components/Slide/index.stories.tsx b/web/src/beta/components/Slide/index.stories.tsx
index 1edb0e715..013f26bea 100644
--- a/web/src/beta/components/Slide/index.stories.tsx
+++ b/web/src/beta/components/Slide/index.stories.tsx
@@ -1,8 +1,7 @@
+import { styled } from "@reearth/services/theme";
 import { Meta } from "@storybook/react";
 import { useState } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import Slide from ".";
 
 const Wrapper = styled.div`
@@ -24,7 +23,7 @@ interface DefaultProps {
 export default {
   component: Slide,
   decorators: [
-    Story => {
+    (Story) => {
       const [pos, setPos] = useState(0);
       return <Story pos={pos} setPos={setPos} />;
     },
diff --git a/web/src/beta/components/Slide/index.tsx b/web/src/beta/components/Slide/index.tsx
index 7736105fa..10df8f5f3 100644
--- a/web/src/beta/components/Slide/index.tsx
+++ b/web/src/beta/components/Slide/index.tsx
@@ -1,6 +1,5 @@
-import React, { ReactNode } from "react";
-
 import { styled } from "@reearth/services/theme";
+import React, { ReactNode } from "react";
 
 export type Props = {
   className?: string;
@@ -12,8 +11,10 @@ const Slide: React.FC<Props> = ({ className, children, pos }) => {
   return (
     <Wrapper className={className}>
       <Inner pos={pos}>
-        {React.Children.map(children, child =>
-          React.isValidElement(child) ? <Page key={child.key ?? undefined}>{child}</Page> : null,
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child) ? (
+            <Page key={child.key ?? undefined}>{child}</Page>
+          ) : null,
         )}
       </Inner>
     </Wrapper>
diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
index f5af07fb7..67a48562b 100644
--- a/web/src/beta/components/Slider/index.stories.tsx
+++ b/web/src/beta/components/Slider/index.stories.tsx
@@ -1,9 +1,8 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import Slider, { Props } from ".";
 
 const meta: Meta<typeof Slider> = {
@@ -17,7 +16,10 @@ export default meta;
 export const Default: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const handleChange = useCallback((value: number) => updateArgs({ value: value }), [updateArgs]);
+  const handleChange = useCallback(
+    (value: number) => updateArgs({ value: value }),
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
@@ -25,7 +27,11 @@ export const Default: Story = (args: Props) => {
         <Slider {...args} onChange={handleChange} />
       </div>
       <div>
-        <Slider {...args} max={args.max ? 2 * args.max : undefined} onChange={handleChange} />
+        <Slider
+          {...args}
+          max={args.max ? 2 * args.max : undefined}
+          onChange={handleChange}
+        />
       </div>
       <div>
         <Slider {...args} disabled={true} onChange={handleChange} />
diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
index cbe74192e..f1c458dae 100644
--- a/web/src/beta/components/Slider/index.tsx
+++ b/web/src/beta/components/Slider/index.tsx
@@ -1,8 +1,7 @@
+import { styled } from "@reearth/services/theme";
 import RCSlider from "rc-slider";
 import React, { ComponentProps } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import "rc-slider/assets/index.css";
 
 const SliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider);
@@ -13,7 +12,11 @@ export type Props = {
 } & ComponentProps<typeof SliderWithTooltip>;
 
 const Slider: React.FC<Props> = ({ ...props }) => {
-  const calculatedStep = props.step ? props.step : props.max ? props.max / 10 : 0.1;
+  const calculatedStep = props.step
+    ? props.step
+    : props.max
+      ? props.max / 10
+      : 0.1;
   return (
     <SliderStyled disabled={props.disabled as boolean}>
       <SliderWithTooltip step={calculatedStep} {...props} />
diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.tsx
index dbe790e46..f53632b1d 100644
--- a/web/src/beta/components/StorytellingPageSectionItem/index.tsx
+++ b/web/src/beta/components/StorytellingPageSectionItem/index.tsx
@@ -1,6 +1,5 @@
-import { FC } from "react";
-
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
 
 import Icon from "../Icon";
 import Text from "../Text";
@@ -34,7 +33,8 @@ const StorytellingPageSectionItem: FC<Props> = ({
           onClick={onClick}
           size="footnote"
           color={theme.content.withBackground}
-          otherProperties={{ wordBreak: "break-all" }}>
+          otherProperties={{ wordBreak: "break-all" }}
+        >
           {title}
         </Text>
         <Wrapper>
@@ -65,8 +65,10 @@ const TitleArea = styled.div<{ active?: boolean }>`
   padding: 8px;
   gap: 4px;
 
-  background: ${props => (props.active ? props.theme.select.main : props.theme.bg[2])};
-  border: 1px solid ${props => (props.active ? props.theme.select.main : props.theme.bg[4])};
+  background: ${(props) =>
+    props.active ? props.theme.select.main : props.theme.bg[2]};
+  border: 1px solid
+    ${(props) => (props.active ? props.theme.select.main : props.theme.bg[4])};
   border-radius: 6px;
 
   width: 100%;
diff --git a/web/src/beta/components/SubTabButtonList/index.tsx b/web/src/beta/components/SubTabButtonList/index.tsx
index 919fdc24e..556b3ef3f 100644
--- a/web/src/beta/components/SubTabButtonList/index.tsx
+++ b/web/src/beta/components/SubTabButtonList/index.tsx
@@ -16,7 +16,11 @@ const SubTabButtonList: React.FC<Props> = ({ items, onChange }) => {
   return (
     <>
       {items.map((item, index) => (
-        <SubTabButton key={index} disabled={!!item?.active} onClick={() => onChange?.(item.id)}>
+        <SubTabButton
+          key={index}
+          disabled={!!item?.active}
+          onClick={() => onChange?.(item.id)}
+        >
           <Text size="footnote" color={theme.content.main}>
             {item.name}
           </Text>
@@ -27,7 +31,8 @@ const SubTabButtonList: React.FC<Props> = ({ items, onChange }) => {
 };
 
 const SubTabButton = styled.button<{ disabled: boolean }>`
-  background: ${({ disabled, theme }) => (disabled ? theme.select.main : "inherit")};
+  background: ${({ disabled, theme }) =>
+    disabled ? theme.select.main : "inherit"};
   padding: 8px;
   height: 32px;
   border-radius: 4px 4px 0px 0px;
diff --git a/web/src/beta/components/SwitchButtonList/index.tsx b/web/src/beta/components/SwitchButtonList/index.tsx
index 87823c5ef..71d34c689 100644
--- a/web/src/beta/components/SwitchButtonList/index.tsx
+++ b/web/src/beta/components/SwitchButtonList/index.tsx
@@ -21,10 +21,14 @@ const SwitchButtonList: React.FC<Props> = ({ list, onChange }) => {
           disabled={!!item?.active}
           onClick={() => onChange?.(item.id)}
           first={index === 0}
-          end={index === list.length - 1}>
+          end={index === list.length - 1}
+        >
           <Text
             size="footnote"
-            color={item.active ? theme.content.withBackground : theme.content.main}>
+            color={
+              item.active ? theme.content.withBackground : theme.content.main
+            }
+          >
             {item.text}
           </Text>
         </SwitchButton>
@@ -37,16 +41,17 @@ const SwitchButton = styled.button<{
   first: boolean;
   end: boolean;
 }>`
-  background: ${props => (props.disabled ? props.theme.select.main : props.theme.bg[0])};
+  background: ${(props) =>
+    props.disabled ? props.theme.select.main : props.theme.bg[0]};
   padding: 8px;
   height: 32px;
-  border-top-left-radius: ${props => (props.first ? "4px" : "0px")};
-  border-top-right-radius: ${props => (props.end ? "4px" : "0px")};
-  border-bottom-left-radius: ${props => (props.first ? "4px" : "0px")};
-  border-bottom-right-radius: ${props => (props.end ? "4px" : "0px")};
+  border-top-left-radius: ${(props) => (props.first ? "4px" : "0px")};
+  border-top-right-radius: ${(props) => (props.end ? "4px" : "0px")};
+  border-bottom-left-radius: ${(props) => (props.first ? "4px" : "0px")};
+  border-bottom-right-radius: ${(props) => (props.end ? "4px" : "0px")};
   transition: all 0.5s ease;
   :hover {
-    background: ${props => props.theme.select.main};
+    background: ${(props) => props.theme.select.main};
   }
 `;
 
diff --git a/web/src/beta/components/TabButton/index.tsx b/web/src/beta/components/TabButton/index.tsx
index 76e95d299..032b3a5aa 100644
--- a/web/src/beta/components/TabButton/index.tsx
+++ b/web/src/beta/components/TabButton/index.tsx
@@ -1,7 +1,6 @@
-import type { FC } from "react";
-
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
+import type { FC } from "react";
 
 import Icon, { Icons } from "../Icon";
 
@@ -35,8 +34,10 @@ const Button = styled.button<ButtonProps>`
   padding: 4px 8px;
   gap: 8px;
   border-radius: 4px;
-  color: ${({ selected, theme }) => (selected ? theme.content.main : theme.content.weak)};
-  background: ${({ disabled, theme }) => (disabled ? theme.bg[3] : theme.bg[0])};
+  color: ${({ selected, theme }) =>
+    selected ? theme.content.main : theme.content.weak};
+  background: ${({ disabled, theme }) =>
+    disabled ? theme.bg[3] : theme.bg[0]};
   line-height: 19px;
   white-space: nowrap;
   overflow: hidden;
diff --git a/web/src/beta/components/TabMenu/index.stories.tsx b/web/src/beta/components/TabMenu/index.stories.tsx
index a19375876..9fa5da7fe 100644
--- a/web/src/beta/components/TabMenu/index.stories.tsx
+++ b/web/src/beta/components/TabMenu/index.stories.tsx
@@ -1,11 +1,10 @@
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { ReactNode, CSSProperties } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import Resizable from "@reearth/beta/components/Resizable";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
+import { useArgs } from "@storybook/preview-api";
+import { Meta, StoryObj } from "@storybook/react";
+import { ReactNode, CSSProperties } from "react";
 
 import TabMenu, { Props } from "./index";
 
@@ -18,7 +17,12 @@ type Story = StoryObj<typeof TabMenu>;
 const SampleComponent = () => {
   return (
     <div>
-      <Button margin="auto" buttonType="primary" text="Disabled Sample Button" disabled />
+      <Button
+        margin="auto"
+        buttonType="primary"
+        text="Disabled Sample Button"
+        disabled
+      />
       <JSONTag>
         {JSON.stringify(
           {
@@ -49,7 +53,9 @@ const JSONTag = styled.pre`
 const Container: React.FC<{ children?: ReactNode; style?: CSSProperties }> = ({
   children,
   style,
-}) => <div style={{ display: "flex", height: "100vh", ...style }}>{children}</div>;
+}) => (
+  <div style={{ display: "flex", height: "100vh", ...style }}>{children}</div>
+);
 
 const Pane = (
   <div
@@ -60,10 +66,12 @@ const Pane = (
       fontSize: 24,
       textAlign: "center",
       padding: "25vh 5rem",
-    }}>
+    }}
+  >
     {" "}
-    Whatever the main area holds. The tab panel works only when on the <b>left</b> with{" "}
-    <b>flex 100%</b>. Which is to do with <b>Resizable Component</b> and not the left panel.
+    Whatever the main area holds. The tab panel works only when on the{" "}
+    <b>left</b> with <b>flex 100%</b>. Which is to do with{" "}
+    <b>Resizable Component</b> and not the left panel.
   </div>
 );
 
@@ -75,7 +83,12 @@ export const Default: Story = (args: Props) => {
   return (
     <Container style={{ flexDirection: "row" }}>
       {Pane}
-      <Resizable direction="vertical" gutter="start" initialSize={500} minSize={200}>
+      <Resizable
+        direction="vertical"
+        gutter="start"
+        initialSize={500}
+        minSize={200}
+      >
         <TabMenu {...args} onSelectedTabChange={handleChange} />
       </Resizable>
     </Container>
@@ -84,7 +97,12 @@ export const Default: Story = (args: Props) => {
 
 Default.args = {
   tabs: [
-    { id: "tab1", name: "My infobox", icon: "infobox", component: <SampleComponent /> },
+    {
+      id: "tab1",
+      name: "My infobox",
+      icon: "infobox",
+      component: <SampleComponent />,
+    },
     {
       id: "tab2",
       icon: "marker",
diff --git a/web/src/beta/components/TabMenu/index.tsx b/web/src/beta/components/TabMenu/index.tsx
index 70bbd1cb8..ca0c80f51 100644
--- a/web/src/beta/components/TabMenu/index.tsx
+++ b/web/src/beta/components/TabMenu/index.tsx
@@ -1,8 +1,7 @@
-import { FC, useMemo } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import Icons from "@reearth/beta/components/Icon/icons";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import Text from "../Text";
 
@@ -42,8 +41,13 @@ const TabMenu: FC<Props> = ({
             key={id}
             onClick={() => onSelectedTabChange(id)}
             selected={id === selectedTab}
-            menuAlignment={menuAlignment}>
-            {icon ? <Icon icon={icon} size={20} /> : <TabHeader size="footnote">{name}</TabHeader>}
+            menuAlignment={menuAlignment}
+          >
+            {icon ? (
+              <Icon icon={icon} size={20} />
+            ) : (
+              <TabHeader size="footnote">{name}</TabHeader>
+            )}
           </TabIconWrapper>
         ))}
       </Tabs>
@@ -62,7 +66,8 @@ const TabMenu: FC<Props> = ({
 export default TabMenu;
 
 const Wrapper = styled.div<{ menuAlignment?: menuAlignment }>`
-  display: ${({ menuAlignment }) => (menuAlignment === "top" ? "flex" : "grid")};
+  display: ${({ menuAlignment }) =>
+    menuAlignment === "top" ? "flex" : "grid"};
   grid-template-columns: 28px 1fr;
   flex-flow: column nowrap;
   position: relative;
@@ -72,21 +77,29 @@ const Wrapper = styled.div<{ menuAlignment?: menuAlignment }>`
 
 const Tabs = styled.div<{ menuAlignment?: menuAlignment }>`
   display: flex;
-  flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "row" : "column")} nowrap;
+  flex-flow: ${({ menuAlignment }) =>
+      menuAlignment === "top" ? "row" : "column"}
+    nowrap;
   padding-top: 4px;
   background: ${({ theme }) => theme.bg[0]};
 `;
 
-const TabIconWrapper = styled.div<{ selected: boolean; menuAlignment?: menuAlignment }>`
+const TabIconWrapper = styled.div<{
+  selected: boolean;
+  menuAlignment?: menuAlignment;
+}>`
   padding: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  color: ${({ selected, theme }) => (selected ? theme.content.main : theme.content.weak)};
-  background: ${props => (props.selected ? props.theme.bg[1] : "inherit")};
-  border-top-right-radius: ${({ menuAlignment }) => (menuAlignment === "top" ? "4px" : "0")};
-  border-top-left-radius: ${({ menuAlignment }) => (menuAlignment === "top" ? "4px" : "0")};
+  color: ${({ selected, theme }) =>
+    selected ? theme.content.main : theme.content.weak};
+  background: ${(props) => (props.selected ? props.theme.bg[1] : "inherit")};
+  border-top-right-radius: ${({ menuAlignment }) =>
+    menuAlignment === "top" ? "4px" : "0"};
+  border-top-left-radius: ${({ menuAlignment }) =>
+    menuAlignment === "top" ? "4px" : "0"};
 `;
 
 const TabHeader = styled(Text)`
diff --git a/web/src/beta/components/Text/index.tsx b/web/src/beta/components/Text/index.tsx
index 62657f463..356b44204 100644
--- a/web/src/beta/components/Text/index.tsx
+++ b/web/src/beta/components/Text/index.tsx
@@ -1,5 +1,3 @@
-import { CSSProperties, ReactNode, useMemo } from "react";
-
 import { useTheme } from "@reearth/services/theme";
 import {
   FontWeight,
@@ -7,8 +5,14 @@ import {
   FontSize,
   UniqueTraits,
 } from "@reearth/services/theme/reearthTheme/common/fonts";
+import { CSSProperties, ReactNode, useMemo } from "react";
 
-type NonChangeableProperties = "color" | "fontFamily" | "fontSize" | "lineHeight" | "fontStyle";
+type NonChangeableProperties =
+  | "color"
+  | "fontFamily"
+  | "fontSize"
+  | "lineHeight"
+  | "fontStyle";
 
 type ChangeableProperties = Omit<CSSProperties, NonChangeableProperties>;
 
@@ -46,8 +50,9 @@ const Text: React.FC<Props> = ({
       trait && typographyBySize && trait in typographyBySize
         ? typographyBySize[trait]
         : typographyBySize && weight in typographyBySize
-        ? typographyBySize[weight]
-        : typographyBySize && typographyBySize[size === "h1" ? "medium" : "regular"],
+          ? typographyBySize[weight]
+          : typographyBySize &&
+            typographyBySize[size === "h1" ? "medium" : "regular"],
     [trait, size, typographyBySize, weight],
   );
 
@@ -60,7 +65,8 @@ const Text: React.FC<Props> = ({
         color: customColor ? undefined : color || defaultColor,
       }}
       onClick={onClick}
-      onDoubleClick={onDoubleClick}>
+      onDoubleClick={onDoubleClick}
+    >
       {children}
     </Typography>
   ) : null;
diff --git a/web/src/beta/components/Toggle/index.stories.tsx b/web/src/beta/components/Toggle/index.stories.tsx
index 6215c19e5..2064e892f 100644
--- a/web/src/beta/components/Toggle/index.stories.tsx
+++ b/web/src/beta/components/Toggle/index.stories.tsx
@@ -1,9 +1,8 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import Toggle, { Props } from ".";
 
 const meta: Meta<typeof Toggle> = {
@@ -31,7 +30,12 @@ export const Default: Story = (args: Props) => {
         <Toggle {...args} checked={!args.checked} onChange={handleChange} />
       </div>
       <div>
-        <Toggle {...args} checked={!args.checked} disabled={true} onChange={handleChange} />
+        <Toggle
+          {...args}
+          checked={!args.checked}
+          disabled={true}
+          onChange={handleChange}
+        />
       </div>
     </Wrapper>
   );
diff --git a/web/src/beta/components/Toggle/index.tsx b/web/src/beta/components/Toggle/index.tsx
index aa49be996..5663b6005 100644
--- a/web/src/beta/components/Toggle/index.tsx
+++ b/web/src/beta/components/Toggle/index.tsx
@@ -8,7 +8,11 @@ export type Props = {
 
 const Toggle: React.FC<Props> = ({ checked, onChange, disabled = false }) => (
   <Wrapper>
-    <Switch checked={checked} disabled={disabled} onClick={() => onChange(!checked)}>
+    <Switch
+      checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+    >
       <TopSlider checked={checked} />
     </Switch>
   </Wrapper>
@@ -29,8 +33,11 @@ const Switch = styled.label<{
   cursor: ${({ disabled }) => (!disabled ? "pointer" : "not-allowed")};
   width: 24px;
   height: 14px;
-  background: ${({ checked, theme }) => (checked ? theme.select.main : theme.secondary.main)};
-  border: 1px solid ${({ checked, theme }) => (checked ? theme.select.main : theme.secondary.main)};
+  background: ${({ checked, theme }) =>
+    checked ? theme.select.main : theme.secondary.main};
+  border: 1px solid
+    ${({ checked, theme }) =>
+      checked ? theme.select.main : theme.secondary.main};
   border-radius: 12px;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.5)};
   transition: 0.4s;
diff --git a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx b/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
index 73f6c458c..13ba0e0d2 100644
--- a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
+++ b/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
@@ -20,7 +20,7 @@ type Props = {
 const CapturePanel: React.FC<Props> = ({ camera, onSave, onClose }) => {
   const t = useT();
 
-  const panelContent: { [key: string]: RowType } = useMemo(() => {
+  const panelContent: Record<string, RowType> = useMemo(() => {
     return {
       [t("Current Position")]: [
         { id: "lat", description: t("Latitude"), value: camera?.lat },
@@ -28,20 +28,32 @@ const CapturePanel: React.FC<Props> = ({ camera, onSave, onClose }) => {
         { id: "height", description: t("Height"), value: camera?.height },
       ],
       [t("Current Rotation")]: [
-        { id: "heading", description: t("Heading"), value: radiansToDegrees(camera?.heading ?? 0) },
-        { id: "pitch", description: t("Pitch"), value: radiansToDegrees(camera?.pitch ?? 0) },
-        { id: "roll", description: t("Roll"), value: radiansToDegrees(camera?.roll ?? 0) },
+        {
+          id: "heading",
+          description: t("Heading"),
+          value: radiansToDegrees(camera?.heading ?? 0),
+        },
+        {
+          id: "pitch",
+          description: t("Pitch"),
+          value: radiansToDegrees(camera?.pitch ?? 0),
+        },
+        {
+          id: "roll",
+          description: t("Roll"),
+          value: radiansToDegrees(camera?.roll ?? 0),
+        },
       ],
     };
   }, [t, camera]);
 
   return (
     <PanelCommon title={t("Camera Position Editor")} onClose={onClose}>
-      {Object.keys(panelContent).map(group => (
+      {Object.keys(panelContent).map((group) => (
         <FieldGroup key={group}>
           <Text size="footnote">{group}</Text>
           <InputWrapper>
-            {panelContent[group].map(field => (
+            {panelContent[group].map((field) => (
               <StyledNumberInput
                 key={field.id}
                 inputDescription={field.description}
diff --git a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts b/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
index b9540d0cf..82ceb9e71 100644
--- a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
+++ b/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import type { Camera, RowType } from "../types";
 import { saveFriendlyCamera, userFriendlyCamera } from "../utils";
@@ -38,7 +37,7 @@ export default ({
     [newCamera, onFlyTo],
   );
 
-  const panelContent: { [key: string]: RowType } = useMemo(() => {
+  const panelContent: Record<string, RowType> = useMemo(() => {
     return {
       [t("Location")]: [
         { id: "lat", description: t("Latitude") },
diff --git a/web/src/beta/components/fields/CameraField/EditPanel/index.tsx b/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
index 84945e717..eec75e8ac 100644
--- a/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
+++ b/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
@@ -27,11 +27,11 @@ const EditPanel: React.FC<Props> = ({ camera, onSave, onFlyTo, onClose }) => {
 
   return (
     <PanelCommon title={t("Camera Position Editor")} onClose={onClose}>
-      {Object.keys(panelContent).map(group => (
+      {Object.keys(panelContent).map((group) => (
         <FieldGroup key={group}>
           <Text size="footnote">{group}</Text>
           <InputWrapper>
-            {panelContent[group].map(field => (
+            {panelContent[group].map((field) => (
               <StyledNumberInput
                 key={field.id}
                 value={newCamera?.[field.id] ?? 0}
@@ -46,7 +46,12 @@ const EditPanel: React.FC<Props> = ({ camera, onSave, onFlyTo, onClose }) => {
       <Divider />
       <ButtonWrapper>
         <StyledButton text={t("Cancel")} size="small" onClick={onClose} />
-        <StyledButton text={t("Apply")} size="small" buttonType="primary" onClick={handleSave} />
+        <StyledButton
+          text={t("Apply")}
+          size="small"
+          buttonType="primary"
+          onClick={handleSave}
+        />
       </ButtonWrapper>
     </PanelCommon>
   );
diff --git a/web/src/beta/components/fields/CameraField/index.stories.tsx b/web/src/beta/components/fields/CameraField/index.stories.tsx
index a2f45ff4d..d6175cf33 100644
--- a/web/src/beta/components/fields/CameraField/index.stories.tsx
+++ b/web/src/beta/components/fields/CameraField/index.stories.tsx
@@ -1,10 +1,9 @@
+import { Camera } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { Camera } from "@reearth/beta/utils/value";
-import { styled } from "@reearth/services/theme";
-
 import CameraField, { type Props } from ".";
 
 const meta: Meta<typeof CameraField> = {
@@ -18,9 +17,15 @@ type Story = StoryObj<typeof CameraField>;
 export const Default: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const handleSave = useCallback((value?: Camera) => updateArgs({ value: value }), [updateArgs]);
+  const handleSave = useCallback(
+    (value?: Camera) => updateArgs({ value: value }),
+    [updateArgs],
+  );
 
-  const handleFlyTo = useCallback(() => updateArgs({ value: undefined }), [updateArgs]);
+  const handleFlyTo = useCallback(
+    () => updateArgs({ value: undefined }),
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
@@ -48,7 +53,7 @@ Default.args = {
   value: undefined,
   disabled: false,
   onSave: (value?: Camera) => console.log("saved camera value: ", value),
-  onFlyTo: target => console.log("Fly to", target),
+  onFlyTo: (target) => console.log("Fly to", target),
 };
 
 const Wrapper = styled.div`
diff --git a/web/src/beta/components/fields/CameraField/index.tsx b/web/src/beta/components/fields/CameraField/index.tsx
index dc03d12a6..f7abacc47 100644
--- a/web/src/beta/components/fields/CameraField/index.tsx
+++ b/web/src/beta/components/fields/CameraField/index.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
@@ -10,6 +8,7 @@ import type { Camera } from "@reearth/beta/utils/value";
 import type { FlyTo } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useState } from "react";
 
 import Property from "..";
 
@@ -27,7 +26,14 @@ export type Props = {
   onFlyTo?: FlyTo;
 };
 
-const CameraField: React.FC<Props> = ({ name, description, value, disabled, onSave, onFlyTo }) => {
+const CameraField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  disabled,
+  onSave,
+  onFlyTo,
+}) => {
   const t = useT();
   const [open, setOpen] = useState<Panel>(undefined);
 
@@ -36,7 +42,8 @@ const CameraField: React.FC<Props> = ({ name, description, value, disabled, onSa
   const [currentCamera] = useCurrentCamera();
 
   const handleClick = useCallback(
-    (panel: Panel) => setOpen(current => (current === panel ? undefined : panel)),
+    (panel: Panel) =>
+      setOpen((current) => (current === panel ? undefined : panel)),
     [],
   );
 
@@ -70,12 +77,21 @@ const CameraField: React.FC<Props> = ({ name, description, value, disabled, onSa
           <InputWrapper disabled={disabled}>
             <Input positionSet={!!value}>
               {value && (
-                <ZoomToIcon icon="zoomToLayer" size={10} onClick={() => handleFlyto(value)} />
+                <ZoomToIcon
+                  icon="zoomToLayer"
+                  size={10}
+                  onClick={() => handleFlyto(value)}
+                />
               )}
               <StyledText size="footnote" customColor>
                 {value ? t("Position Set") : t("Not set")}
               </StyledText>
-              <DeleteIcon icon="bin" size={10} disabled={!value} onClick={handleRemoveSetting} />
+              <DeleteIcon
+                icon="bin"
+                size={10}
+                disabled={!value}
+                onClick={handleRemoveSetting}
+              />
             </Input>
             <TriggerButton
               buttonType="secondary"
@@ -99,7 +115,11 @@ const CameraField: React.FC<Props> = ({ name, description, value, disabled, onSa
         </Popover.Trigger>
         <Popover.Content autoFocus={false}>
           {open === "capture" ? (
-            <CapturePanel camera={currentCamera} onSave={handleSave} onClose={handleClose} />
+            <CapturePanel
+              camera={currentCamera}
+              onSave={handleSave}
+              onClose={handleClose}
+            />
           ) : open === "editor" ? (
             <EditPanel
               camera={value}
@@ -136,7 +156,8 @@ const Input = styled.div<{ positionSet?: boolean }>`
   background: ${({ theme }) => theme.bg[1]};
   box-shadow: ${({ theme }) => theme.shadow.input};
 
-  color: ${({ theme, positionSet }) => (positionSet ? theme.content.main : theme.content.weak)};
+  color: ${({ theme, positionSet }) =>
+    positionSet ? theme.content.main : theme.content.weak};
 `;
 
 const StyledText = styled(Text)`
diff --git a/web/src/beta/components/fields/CameraField/utils.ts b/web/src/beta/components/fields/CameraField/utils.ts
index c0d081bf5..e7cd0eefc 100644
--- a/web/src/beta/components/fields/CameraField/utils.ts
+++ b/web/src/beta/components/fields/CameraField/utils.ts
@@ -1,8 +1,10 @@
 import { Camera } from "./types";
 
-export const degreesToRadians = (degrees: number): number => degrees * (Math.PI / 180);
+export const degreesToRadians = (degrees: number): number =>
+  degrees * (Math.PI / 180);
 
-export const radiansToDegrees = (radians: number): number => radians * (180 / Math.PI);
+export const radiansToDegrees = (radians: number): number =>
+  radians * (180 / Math.PI);
 
 export const userFriendlyCamera = (camera: Camera) => ({
   lat: camera.lat,
diff --git a/web/src/beta/components/fields/ColorField/hooks.ts b/web/src/beta/components/fields/ColorField/hooks.ts
index a5b0b12c3..f37e65651 100644
--- a/web/src/beta/components/fields/ColorField/hooks.ts
+++ b/web/src/beta/components/fields/ColorField/hooks.ts
@@ -72,8 +72,8 @@ export default ({ value, onChange }: Params) => {
     const hexPattern = /^#?([a-fA-F0-9]{3,4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/;
     if (!colorState || hexPattern.test(colorState)) {
       handleSave();
-    } else {
-      value && setColor(value);
+    } else if (value) {
+      setColor(value);
     }
   }, [colorState, handleSave, value]);
 
@@ -103,25 +103,39 @@ export default ({ value, onChange }: Params) => {
     }
   }, [value]);
 
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent | TouchEvent) => {
-      if (open && wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+  const handleClickOutside = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (
+        open &&
+        wrapperRef.current &&
+        !wrapperRef.current.contains(e.target as Node)
+      ) {
         if (colorState != value && !open) {
           handleSave();
         }
         handleClose();
         setOpen(false);
       }
-    };
+    },
+    [open, value, colorState, handleSave, handleClose],
+  );
+
+  const handleClickOutsideRef = useRef(handleClickOutside);
+  handleClickOutsideRef.current = handleClickOutside;
 
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("touchstart", handleClickOutside);
+  const handleClickOutsideByRef = useCallback((e: MouseEvent | TouchEvent) => {
+    handleClickOutsideRef.current?.(e);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutsideByRef);
+    document.addEventListener("touchstart", handleClickOutsideByRef);
 
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("touchstart", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutsideByRef);
+      document.removeEventListener("touchstart", handleClickOutsideByRef);
     };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [handleClickOutsideByRef]);
 
   return {
     wrapperRef,
diff --git a/web/src/beta/components/fields/ColorField/index.tsx b/web/src/beta/components/fields/ColorField/index.tsx
index 4ca84c92b..a2426839d 100644
--- a/web/src/beta/components/fields/ColorField/index.tsx
+++ b/web/src/beta/components/fields/ColorField/index.tsx
@@ -1,12 +1,11 @@
-import React from "react";
-import { RgbaColorPicker } from "react-colorful";
-
 import Button from "@reearth/beta/components/Button";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { styled, css, useTheme } from "@reearth/services/theme";
+import React from "react";
+import { RgbaColorPicker } from "react-colorful";
 
 import Property from "..";
 
@@ -16,7 +15,13 @@ import { Props, RGBA } from "./types";
 const channels = ["r", "g", "b", "a"];
 const hexPlaceholder = "#RRGGBBAA";
 
-const ColorField: React.FC<Props> = ({ name, description, value, onChange, className }) => {
+const ColorField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  onChange,
+  className,
+}) => {
   const t = useT();
   const theme = useTheme();
   const {
@@ -57,17 +62,27 @@ const ColorField: React.FC<Props> = ({ name, description, value, onChange, class
           </Popover.Trigger>
           <PickerWrapper>
             <HeaderWrapper>
-              <PickerTitle size="footnote" weight="regular" color={theme.content.main}>
+              <PickerTitle
+                size="footnote"
+                weight="regular"
+                color={theme.content.main}
+              >
                 {t("Color Picker")}
               </PickerTitle>
-              {handleClose && <CloseIcon icon="cancel" size={12} onClick={handleClose} />}
+              {handleClose && (
+                <CloseIcon icon="cancel" size={12} onClick={handleClose} />
+              )}
             </HeaderWrapper>
             <SelectorPickerWrapper>
-              <ColorPicker className="colorPicker" color={rgba} onChange={handleChange} />
+              <ColorPicker
+                className="colorPicker"
+                color={rgba}
+                onChange={handleChange}
+              />
               <RgbaInputWrapper>
                 <Text size="footnote">RGBA</Text>
                 <ValuesWrapper>
-                  {channels.map(channel => (
+                  {channels.map((channel) => (
                     <Input
                       key={channel}
                       name={channel}
@@ -144,8 +159,11 @@ linear-gradient(
 
 const CheckedPattern = styled.div`
   background-color: ${({ theme }) => theme.outline.main};
-  background-image: ${({ theme }) => check(theme.bg[3])}, ${({ theme }) => check(theme.bg[3])};
-  background-position: 0 0, 6px 6px;
+  background-image: ${({ theme }) => check(theme.bg[3])},
+    ${({ theme }) => check(theme.bg[3])};
+  background-position:
+    0 0,
+    6px 6px;
   background-size: 12px 12px;
   ${layerStyle};
 `;
diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts b/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
index 40122617e..2298ae1de 100644
--- a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
+++ b/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
@@ -1,8 +1,7 @@
+import { getUniqueTimezones } from "@reearth/beta/utils/moment-timezone";
 import moment from "moment-timezone";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { getUniqueTimezones } from "@reearth/beta/utils/moment-timezone";
-
 type Props = {
   value?: string;
   onChange?: (value?: string | undefined) => void;
@@ -38,18 +37,27 @@ export default ({ value, onChange, setDateTime }: Props) => {
 
   const handleApplyChange = useCallback(() => {
     const selectedTimezoneInfo = offsetFromUTC.find(
-      info => info.timezone === selectedTimezone.timezone,
+      (info) => info.timezone === selectedTimezone.timezone,
     );
     if (selectedTimezoneInfo) {
       const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
       setDateTime?.(formattedDateTime);
       onChange?.(formattedDateTime);
     }
-  }, [offsetFromUTC, selectedTimezone.timezone, date, time, setDateTime, onChange]);
+  }, [
+    offsetFromUTC,
+    selectedTimezone.timezone,
+    date,
+    time,
+    setDateTime,
+    onChange,
+  ]);
 
   const handleTimezoneSelect = useCallback(
     (newValue: string) => {
-      const updatedTimezone = offsetFromUTC.find(info => info.timezone === newValue);
+      const updatedTimezone = offsetFromUTC.find(
+        (info) => info.timezone === newValue,
+      );
       setSelectedTimezone(updatedTimezone || selectedTimezone);
     },
     [offsetFromUTC, selectedTimezone],
@@ -59,7 +67,8 @@ export default ({ value, onChange, setDateTime }: Props) => {
     if (value) {
       const [parsedDate, timeWithOffset] = value.split("T");
       const [parsedTime, timezoneOffset] = timeWithOffset.split(/[-+]/);
-      const [timezoneOffsetHour, timezoneOffsetMinute] = timezoneOffset.split(":");
+      const [timezoneOffsetHour, timezoneOffsetMinute] =
+        timezoneOffset.split(":");
       const formattedTimezoneOffset =
         timezoneOffsetHour.length === 2
           ? timezoneOffset
@@ -69,13 +78,13 @@ export default ({ value, onChange, setDateTime }: Props) => {
       setDate(parsedDate);
 
       const updatedTimezone = offsetFromUTC.find(
-        info =>
+        (info) =>
           info.offset ===
           (timeWithOffset.includes("-")
             ? `-${formattedTimezoneOffset}`
             : `+${formattedTimezoneOffset}`),
       );
-      updatedTimezone && setSelectedTimezone(updatedTimezone);
+      if (updatedTimezone) setSelectedTimezone(updatedTimezone);
     } else {
       setDate("");
       setTime("");
diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx b/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
index e33cafdcd..85901734a 100644
--- a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
+++ b/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
@@ -1,9 +1,8 @@
-import { useMemo } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import PanelCommon from "@reearth/beta/components/fields/common/PanelCommon";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useMemo } from "react";
 
 import TextInput from "../../common/TextInput";
 import SelectField from "../../SelectField";
@@ -17,7 +16,12 @@ type Props = {
   setDateTime?: (value?: string | undefined) => void;
 };
 
-const EditPanel: React.FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
+const EditPanel: React.FC<Props> = ({
+  onChange,
+  onClose,
+  value,
+  setDateTime,
+}) => {
   const t = useT();
 
   const {
@@ -45,13 +49,18 @@ const EditPanel: React.FC<Props> = ({ onChange, onClose, value, setDateTime }) =
         <TextWrapper>
           <Label>{t("Time")}</Label>
 
-          <Input type="time" value={time} onChange={handleTimeChange} step={1} />
+          <Input
+            type="time"
+            value={time}
+            onChange={handleTimeChange}
+            step={1}
+          />
         </TextWrapper>
         <SelectWrapper>
           <Label>{t("Time Zone")}</Label>
           <CustomSelect
             value={selectedTimezone.timezone}
-            options={offsetFromUTC.map(timezone => ({
+            options={offsetFromUTC.map((timezone) => ({
               key: timezone.timezone,
               label: timezone?.offset,
             }))}
@@ -67,7 +76,8 @@ const EditPanel: React.FC<Props> = ({ onChange, onClose, value, setDateTime }) =
           size="small"
           buttonType="primary"
           onClick={() => {
-            onDateTimeApply(), onClose();
+            onDateTimeApply();
+            onClose();
           }}
           disabled={isButtonDisabled}
         />
diff --git a/web/src/beta/components/fields/DateTimeField/index.stories.tsx b/web/src/beta/components/fields/DateTimeField/index.stories.tsx
index 8d924477b..ed3292200 100644
--- a/web/src/beta/components/fields/DateTimeField/index.stories.tsx
+++ b/web/src/beta/components/fields/DateTimeField/index.stories.tsx
@@ -12,5 +12,7 @@ export default meta;
 type Story = StoryObj<typeof DateTimeField>;
 
 export const DateTimeFieldInput: Story = {
-  render: () => <DateTimeField name="Date Time Field" onChange={action("onchange")} />,
+  render: () => (
+    <DateTimeField name="Date Time Field" onChange={action("onchange")} />
+  ),
 };
diff --git a/web/src/beta/components/fields/DateTimeField/index.tsx b/web/src/beta/components/fields/DateTimeField/index.tsx
index 197362a14..5c5e0e70b 100644
--- a/web/src/beta/components/fields/DateTimeField/index.tsx
+++ b/web/src/beta/components/fields/DateTimeField/index.tsx
@@ -1,11 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useEffect, useState } from "react";
 
 import Property from "..";
 
@@ -66,7 +65,12 @@ const DateTimeField: React.FC<Props> = ({
               <StyledText size="footnote" customColor>
                 {dateTime ? dateTime : "YYYY-MM-DDThh:mm:ss±hh:mm"}
               </StyledText>
-              <DeleteIcon icon="bin" size={10} disabled={!dateTime} onClick={handleRemoveSetting} />
+              <DeleteIcon
+                icon="bin"
+                size={10}
+                disabled={!dateTime}
+                onClick={handleRemoveSetting}
+              />
             </Input>
             <TriggerButton
               buttonType="secondary"
@@ -114,7 +118,8 @@ const Input = styled.div<{ dataTimeSet?: boolean }>`
   background: ${({ theme }) => theme.bg[1]};
   box-shadow: ${({ theme }) => theme.shadow.input};
   width: 65%;
-  color: ${({ theme, dataTimeSet }) => (dataTimeSet ? theme.content.strong : theme.content.weak)};
+  color: ${({ theme, dataTimeSet }) =>
+    dataTimeSet ? theme.content.strong : theme.content.weak};
 `;
 
 const StyledText = styled(Text)`
diff --git a/web/src/beta/components/fields/ListField/index.stories.tsx b/web/src/beta/components/fields/ListField/index.stories.tsx
index 9dba7cae2..d1fa0e953 100644
--- a/web/src/beta/components/fields/ListField/index.stories.tsx
+++ b/web/src/beta/components/fields/ListField/index.stories.tsx
@@ -1,9 +1,8 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import ListField, { Props } from ".";
 
 const meta: Meta<typeof ListField> = {
@@ -41,7 +40,7 @@ export const Default: Story = (args: Props) => {
     (item: { id: string; value: string }, index: number) => {
       const items = [...args.items];
       items.splice(
-        items.findIndex(x => x.id === item.id),
+        items.findIndex((x) => x.id === item.id),
         1,
       );
       items.splice(index, 0, item);
@@ -50,7 +49,10 @@ export const Default: Story = (args: Props) => {
     [updateArgs, args.items],
   );
 
-  const onSelect = useCallback((id: string) => updateArgs({ selected: id }), [updateArgs]);
+  const onSelect = useCallback(
+    (id: string) => updateArgs({ selected: id }),
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
diff --git a/web/src/beta/components/fields/ListField/index.tsx b/web/src/beta/components/fields/ListField/index.tsx
index 78ef434c4..99918ae94 100644
--- a/web/src/beta/components/fields/ListField/index.tsx
+++ b/web/src/beta/components/fields/ListField/index.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useMemo } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import DragAndDropList, {
   Props as DragAndDropProps,
@@ -8,6 +6,7 @@ import Property from "@reearth/beta/components/fields";
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useEffect, useMemo } from "react";
 
 type ListItem = {
   id: string;
@@ -59,7 +58,8 @@ const ListField: React.FC<Props> = ({
   useEffect(() => {
     if (!atLeastOneItem) return;
 
-    const updateSelected = !selected || !items.find(({ id }) => id === selected);
+    const updateSelected =
+      !selected || !items.find(({ id }) => id === selected);
     if (updateSelected) {
       onSelect(items[0]?.id);
     }
@@ -116,9 +116,11 @@ const Item = styled.div<{ selected: boolean }>`
   padding: 0 12px;
   height: 28px;
   cursor: pointer;
-  background: ${({ theme, selected }) => (selected ? theme.select.main : "inherit")};
+  background: ${({ theme, selected }) =>
+    selected ? theme.select.main : "inherit"};
   &:hover {
-    background: ${({ theme, selected }) => (selected ? theme.select.main : theme.bg[2])};
+    background: ${({ theme, selected }) =>
+      selected ? theme.select.main : theme.bg[2]};
   }
 `;
 
diff --git a/web/src/beta/components/fields/LocationField/index.tsx b/web/src/beta/components/fields/LocationField/index.tsx
index 763c121ca..0c268b2d7 100644
--- a/web/src/beta/components/fields/LocationField/index.tsx
+++ b/web/src/beta/components/fields/LocationField/index.tsx
@@ -1,8 +1,7 @@
-import { useCallback, useState } from "react";
-
 import { LatLng } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useState } from "react";
 
 import Property from "..";
 import NumberInput from "../common/NumberInput";
@@ -14,7 +13,12 @@ type Props = {
   onChange?: (location: LatLng) => void;
 };
 
-const LocationField: React.FC<Props> = ({ name, description, value, onChange }) => {
+const LocationField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  onChange,
+}) => {
   const t = useT();
   const [location, setLocation] = useState<LatLng>(value || { lat: 0, lng: 0 });
 
@@ -22,7 +26,7 @@ const LocationField: React.FC<Props> = ({ name, description, value, onChange })
     (coordination: string, newValue: number | undefined) => {
       if (newValue === undefined) return;
 
-      setLocation(prevLocation => ({
+      setLocation((prevLocation) => ({
         ...prevLocation,
         [coordination === "Latitude" ? "lat" : "lng"]: newValue,
       }));
@@ -37,12 +41,12 @@ const LocationField: React.FC<Props> = ({ name, description, value, onChange })
         <NumberInput
           value={location.lat}
           inputDescription={t("Latitude")}
-          onChange={newValue => handleChange("Latitude", newValue)}
+          onChange={(newValue) => handleChange("Latitude", newValue)}
         />
         <NumberInput
           value={location.lng}
           inputDescription={t("Longitude")}
-          onChange={newValue => handleChange("Longitude", newValue)}
+          onChange={(newValue) => handleChange("Longitude", newValue)}
         />
       </Wrapper>
     </Property>
diff --git a/web/src/beta/components/fields/Property/PropertyField/hooks.ts b/web/src/beta/components/fields/Property/PropertyField/hooks.ts
index abc9e321a..968c54a2b 100644
--- a/web/src/beta/components/fields/Property/PropertyField/hooks.ts
+++ b/web/src/beta/components/fields/Property/PropertyField/hooks.ts
@@ -1,16 +1,27 @@
-import { useCallback } from "react";
-
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { usePropertyFetcher } from "@reearth/services/api";
+import { useCallback } from "react";
 
 export default (propertyId: string, schemaGroup: string) => {
-  const { useUpdatePropertyValue, useAddPropertyItem, useRemovePropertyItem, useMovePropertyItem } =
-    usePropertyFetcher();
+  const {
+    useUpdatePropertyValue,
+    useAddPropertyItem,
+    useRemovePropertyItem,
+    useMovePropertyItem,
+  } = usePropertyFetcher();
 
   const handlePropertyValueUpdate = useCallback(
     (fieldId: string, vt: ValueType, itemId?: string) => {
       return async (v?: ValueTypes[ValueType]) => {
-        await useUpdatePropertyValue(propertyId, schemaGroup, itemId, fieldId, "en", v, vt);
+        await useUpdatePropertyValue(
+          propertyId,
+          schemaGroup,
+          itemId,
+          fieldId,
+          "en",
+          v,
+          vt,
+        );
       };
     },
     [propertyId, schemaGroup, useUpdatePropertyValue],
diff --git a/web/src/beta/components/fields/Property/PropertyField/index.tsx b/web/src/beta/components/fields/Property/PropertyField/index.tsx
index c3d4d5599..16d21bc75 100644
--- a/web/src/beta/components/fields/Property/PropertyField/index.tsx
+++ b/web/src/beta/components/fields/Property/PropertyField/index.tsx
@@ -1,8 +1,7 @@
-import { useMemo } from "react";
-
 import { LatLng } from "@reearth/beta/utils/value";
 import { FlyTo } from "@reearth/core";
 import { Field, SchemaField } from "@reearth/services/api/propertyApi/utils";
+import { useMemo } from "react";
 
 import CameraField from "../../CameraField";
 import { Camera } from "../../CameraField/types";
@@ -44,7 +43,11 @@ const PropertyField: React.FC<Props> = ({
     [field?.mergedValue, field?.value, schema.defaultValue],
   );
 
-  const handleChange = handlePropertyValueUpdate(schema.id, schema.type, itemId);
+  const handleChange = handlePropertyValueUpdate(
+    schema.id,
+    schema.type,
+    itemId,
+  );
   return (
     <>
       {schema.type === "string" ? (
@@ -88,8 +91,16 @@ const PropertyField: React.FC<Props> = ({
         <URLField
           key={schema.id}
           name={schema.name}
-          entityType={schema.ui === "image" ? "image" : schema.ui === "file" ? "file" : undefined}
-          fileType={schema.ui === "video" || schema.ui === undefined ? "URL" : "asset"}
+          entityType={
+            schema.ui === "image"
+              ? "image"
+              : schema.ui === "file"
+                ? "file"
+                : undefined
+          }
+          fileType={
+            schema.ui === "video" || schema.ui === undefined ? "URL" : "asset"
+          }
           value={(value as string) ?? ""}
           description={schema.description}
           onChange={handleChange}
diff --git a/web/src/beta/components/fields/Property/PropertyItem/index.tsx b/web/src/beta/components/fields/Property/PropertyItem/index.tsx
index 8566a4c36..17d7baa97 100644
--- a/web/src/beta/components/fields/Property/PropertyItem/index.tsx
+++ b/web/src/beta/components/fields/Property/PropertyItem/index.tsx
@@ -1,9 +1,12 @@
-import { useMemo, useState } from "react";
-
 import { ValueType, ValueTypes, zeroValues } from "@reearth/beta/utils/value";
 import { FlyTo } from "@reearth/core";
-import { Group, GroupListItem, Item } from "@reearth/services/api/propertyApi/utils";
+import {
+  Group,
+  GroupListItem,
+  Item,
+} from "@reearth/services/api/propertyApi/utils";
 import { useT } from "@reearth/services/i18n";
+import { useMemo, useState } from "react";
 
 import PropertyField from "../PropertyField";
 import PropertyList, { ListItem } from "../PropertyList";
@@ -21,7 +24,7 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
   const isList = item && "items" in item;
   const layerMode = useMemo(() => {
     if (!isList || !item?.representativeField) return false;
-    const sf = item.schemaFields.find(f => f.id === item.representativeField);
+    const sf = item.schemaFields.find((f) => f.id === item.representativeField);
     return sf?.type === "ref" && sf.ui === "layer";
   }, [isList, item?.representativeField, item?.schemaFields]);
 
@@ -30,25 +33,28 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
     [item],
   );
 
-  const selectedItem = isList ? groups.find(g => g.id === selected) : groups[0];
+  const selectedItem = isList
+    ? groups.find((g) => g.id === selected)
+    : groups[0];
 
   const propertyListItems = useMemo(
     () =>
       groups
-        .map<ListItem | undefined>(i => {
+        .map<ListItem | undefined>((i) => {
           if (!i.id) return;
 
           const representativeField = item?.representativeField
-            ? i.fields.find(f => f.id === item.representativeField)
+            ? i.fields.find((f) => f.id === item.representativeField)
             : undefined;
           const nameSchemaField = item?.schemaFields?.find(
-            sf => sf.id === item.representativeField,
+            (sf) => sf.id === item.representativeField,
           );
 
-          const value = representativeField?.value || nameSchemaField?.defaultValue;
+          const value =
+            representativeField?.value || nameSchemaField?.defaultValue;
 
           const choice = nameSchemaField?.choices
-            ? nameSchemaField?.choices?.find(c => c.key === value)?.label
+            ? nameSchemaField?.choices?.find((c) => c.key === value)?.label
             : undefined;
 
           const title = valueToString(choice || value);
@@ -65,10 +71,13 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
   const schemaFields = useMemo(
     () =>
       selectedItem
-        ? item?.schemaFields.map(f => {
-            const field = selectedItem?.fields.find(f2 => f2.id === f.id);
-            const condf = f.only && selectedItem?.fields.find(f2 => f2.id === f.only?.field);
-            const condsf = f.only && item.schemaFields.find(f2 => f2.id === f.only?.field);
+        ? item?.schemaFields.map((f) => {
+            const field = selectedItem?.fields.find((f2) => f2.id === f.id);
+            const condf =
+              f.only &&
+              selectedItem?.fields.find((f2) => f2.id === f.only?.field);
+            const condsf =
+              f.only && item.schemaFields.find((f2) => f2.id === f.only?.field);
             const condv =
               condf?.value ??
               condf?.mergedValue ??
@@ -99,8 +108,12 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
         />
       )}
       {!!item &&
-        schemaFields?.map(f => {
-          if ((layerMode && f.schemaField.id === item.representativeField) || f.hidden) return null;
+        schemaFields?.map((f) => {
+          if (
+            (layerMode && f.schemaField.id === item.representativeField) ||
+            f.hidden
+          )
+            return null;
           return (
             <PropertyField
               key={f.schemaField.id}
@@ -119,7 +132,9 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
 
 export default PropertyItem;
 
-const valueToString = (v: ValueTypes[ValueType] | undefined): string | undefined => {
+const valueToString = (
+  v: ValueTypes[ValueType] | undefined,
+): string | undefined => {
   if (typeof v === "string" || typeof v === "number") {
     return v.toString();
   }
diff --git a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx b/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
index 0eeb5896e..4bd92e966 100644
--- a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
+++ b/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
@@ -1,9 +1,8 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import ListField, { Props } from ".";
 
 const meta: Meta<typeof ListField> = {
@@ -17,7 +16,10 @@ type Story = StoryObj<typeof ListField>;
 export const Default: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const onSelect = useCallback((id: string) => updateArgs({ selected: id }), [updateArgs]);
+  const onSelect = useCallback(
+    (id: string) => updateArgs({ selected: id }),
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
diff --git a/web/src/beta/components/fields/Property/PropertyList/index.tsx b/web/src/beta/components/fields/Property/PropertyList/index.tsx
index 7e905afa1..8aea23ee8 100644
--- a/web/src/beta/components/fields/Property/PropertyList/index.tsx
+++ b/web/src/beta/components/fields/Property/PropertyList/index.tsx
@@ -1,11 +1,10 @@
-import { useCallback, useEffect, useMemo } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import DragAndDropList from "@reearth/beta/components/DragAndDropList";
 import Property from "@reearth/beta/components/fields";
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useEffect, useMemo } from "react";
 
 import useHooks from "../hooks";
 
@@ -39,10 +38,11 @@ const PropertyList: React.FC<Props> = ({
 }: Props) => {
   const t = useT();
 
-  const { handleAddPropertyItem, handleRemovePropertyItem, handleMovePropertyItem } = useHooks(
-    propertyId,
-    schemaGroup,
-  );
+  const {
+    handleAddPropertyItem,
+    handleRemovePropertyItem,
+    handleMovePropertyItem,
+  } = useHooks(propertyId, schemaGroup);
 
   const deleteItem = useCallback(() => {
     if (!selected) return;
@@ -63,7 +63,8 @@ const PropertyList: React.FC<Props> = ({
   useEffect(() => {
     if (!atLeastOneItem) return;
 
-    const updateSelected = !selected || !items.find(({ id }) => id === selected);
+    const updateSelected =
+      !selected || !items.find(({ id }) => id === selected);
     if (updateSelected) {
       onSelect(items[0]?.id);
     }
@@ -120,9 +121,11 @@ const Item = styled.div<{ selected: boolean }>`
   padding: 0 12px;
   height: 28px;
   cursor: pointer;
-  background: ${({ theme, selected }) => (selected ? theme.select.main : "inherit")};
+  background: ${({ theme, selected }) =>
+    selected ? theme.select.main : "inherit"};
   &:hover {
-    background: ${({ theme, selected }) => (selected ? theme.select.main : theme.bg[2])};
+    background: ${({ theme, selected }) =>
+      selected ? theme.select.main : theme.bg[2]};
   }
 `;
 
diff --git a/web/src/beta/components/fields/Property/hooks.ts b/web/src/beta/components/fields/Property/hooks.ts
index abc9e321a..968c54a2b 100644
--- a/web/src/beta/components/fields/Property/hooks.ts
+++ b/web/src/beta/components/fields/Property/hooks.ts
@@ -1,16 +1,27 @@
-import { useCallback } from "react";
-
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { usePropertyFetcher } from "@reearth/services/api";
+import { useCallback } from "react";
 
 export default (propertyId: string, schemaGroup: string) => {
-  const { useUpdatePropertyValue, useAddPropertyItem, useRemovePropertyItem, useMovePropertyItem } =
-    usePropertyFetcher();
+  const {
+    useUpdatePropertyValue,
+    useAddPropertyItem,
+    useRemovePropertyItem,
+    useMovePropertyItem,
+  } = usePropertyFetcher();
 
   const handlePropertyValueUpdate = useCallback(
     (fieldId: string, vt: ValueType, itemId?: string) => {
       return async (v?: ValueTypes[ValueType]) => {
-        await useUpdatePropertyValue(propertyId, schemaGroup, itemId, fieldId, "en", v, vt);
+        await useUpdatePropertyValue(
+          propertyId,
+          schemaGroup,
+          itemId,
+          fieldId,
+          "en",
+          v,
+          vt,
+        );
       };
     },
     [propertyId, schemaGroup, useUpdatePropertyValue],
diff --git a/web/src/beta/components/fields/RangeField/index.tsx b/web/src/beta/components/fields/RangeField/index.tsx
index 6acd49099..952966dea 100644
--- a/web/src/beta/components/fields/RangeField/index.tsx
+++ b/web/src/beta/components/fields/RangeField/index.tsx
@@ -1,15 +1,24 @@
-import { useCallback, useEffect, useState } from "react";
-
 import Property from "@reearth/beta/components/fields";
-import RangeSlider, { Props as RangeProps } from "@reearth/beta/components/RangeSlider";
+import RangeSlider, {
+  Props as RangeProps,
+} from "@reearth/beta/components/RangeSlider";
+import { useCallback, useEffect, useState } from "react";
 
 export type Props = {
   name?: string;
   description?: string;
 } & RangeProps;
 
-const RangeField: React.FC<Props> = ({ name, description, value, onChange, ...args }: Props) => {
-  const [internalState, setInternalState] = useState<number[] | undefined>(value);
+const RangeField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  onChange,
+  ...args
+}: Props) => {
+  const [internalState, setInternalState] = useState<number[] | undefined>(
+    value,
+  );
 
   const handleChange = useCallback(
     (value: number[]) => {
diff --git a/web/src/beta/components/fields/SelectField/index.tsx b/web/src/beta/components/fields/SelectField/index.tsx
index dc2828003..d8f62ccdb 100644
--- a/web/src/beta/components/fields/SelectField/index.tsx
+++ b/web/src/beta/components/fields/SelectField/index.tsx
@@ -1,10 +1,9 @@
-import React, { useState, useCallback, useMemo } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import React, { useState, useCallback, useMemo } from "react";
 
 import Property from "..";
 
@@ -53,7 +52,10 @@ const SelectField: React.FC<Props> = ({
 
   const [open, setOpen] = useState(false);
 
-  const handlePopOver = useCallback(() => !disabled && setOpen(!open), [open, disabled]);
+  const handlePopOver = useCallback(
+    () => !disabled && setOpen(!open),
+    [open, disabled],
+  );
 
   const handleClick = useCallback(
     (key: string) => {
@@ -61,9 +63,11 @@ const SelectField: React.FC<Props> = ({
         // handle multiselect
         if (value && Array.isArray(value)) {
           const tempArray = [...value];
-          tempArray.includes(key)
-            ? tempArray.splice(tempArray.indexOf(key), 1)
-            : tempArray.push(key);
+          if (tempArray.includes(key)) {
+            tempArray.splice(tempArray.indexOf(key), 1);
+          } else {
+            tempArray.push(key);
+          }
           onChange(tempArray.length > 0 ? [...tempArray] : undefined);
         } else {
           onChange([key]);
@@ -72,7 +76,7 @@ const SelectField: React.FC<Props> = ({
       }
 
       setOpen(false);
-      key != value && onChange(key);
+      if (key != value) onChange(key);
       return;
     },
     [setOpen, onChange, value, multiSelect],
@@ -81,24 +85,32 @@ const SelectField: React.FC<Props> = ({
   const selected = useMemo(() => {
     return value
       ? Array.isArray(value)
-        ? value.map(key => ({
+        ? value.map((key) => ({
             key,
-            label: options?.find(x => x.key === key)?.label,
+            label: options?.find((x) => x.key === key)?.label,
           }))
-        : options?.find(x => x.key === value)
+        : options?.find((x) => x.key === value)
       : undefined;
   }, [options, value]);
 
   const checkSelected = useCallback(
     (key: string) => {
-      return value ? (Array.isArray(value) ? value.includes(key) : value === key) : false;
+      return value
+        ? Array.isArray(value)
+          ? value.includes(key)
+          : value === key
+        : false;
     },
     [value],
   );
 
   return (
     <Property name={name} description={description} className={className}>
-      <Popover.Provider open={open} placement="bottom-start" onOpenChange={handlePopOver}>
+      <Popover.Provider
+        open={open}
+        placement="bottom-start"
+        onOpenChange={handlePopOver}
+      >
         <ProviderWrapper multiSelect={Array.isArray(value) && value.length > 0}>
           <Popover.Trigger asChild>
             <InputWrapper disabled={disabled} onClick={handlePopOver}>
@@ -117,9 +129,13 @@ const SelectField: React.FC<Props> = ({
               <OptionWrapper
                 key={key}
                 onClick={() => handleClick(key)}
-                selected={checkSelected(key)}>
+                selected={checkSelected(key)}
+              >
                 {multiSelect && (
-                  <CheckIcon icon={checkSelected(key) ? "checkmark" : "plus"} size={12} />
+                  <CheckIcon
+                    icon={checkSelected(key) ? "checkmark" : "plus"}
+                    size={12}
+                  />
                 )}
                 <Text size="footnote">{value}</Text>
               </OptionWrapper>
@@ -174,11 +190,14 @@ const Select = styled.div<{ open: boolean; selected: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: ${({ theme, selected }) => (selected ? theme.content.main : theme.content.weaker)};
+  color: ${({ theme, selected }) =>
+    selected ? theme.content.main : theme.content.weaker};
   background: ${({ theme }) => theme.bg[1]};
   box-shadow: ${({ theme }) => theme.shadow.input};
   border: ${({ theme, open }) =>
-    open ? `1px solid ${theme.select.strong}` : `1px solid ${theme.outline.weak}`};
+    open
+      ? `1px solid ${theme.select.strong}`
+      : `1px solid ${theme.outline.weak}`};
 
   &:focus {
     border: 1px solid ${({ theme }) => theme.select.strong};
@@ -194,7 +213,8 @@ const ArrowIcon = styled(Icon)<{ open: boolean }>`
   position: absolute;
   right: 10px;
   top: 50%;
-  transform: ${({ open }) => (open ? "translateY(-50%) scaleY(-1)" : "translateY(-50%)")};
+  transform: ${({ open }) =>
+    open ? "translateY(-50%) scaleY(-1)" : "translateY(-50%)"};
   color: ${({ theme }) => theme.content.main};
 `;
 
@@ -220,7 +240,8 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
   background: ${({ theme, selected }) => (selected ? theme.bg[2] : "inherit")};
 
   &:hover {
-    background: ${({ theme, selected }) => (selected ? theme.bg[2] : theme.select.main)};
+    background: ${({ theme, selected }) =>
+      selected ? theme.bg[2] : theme.select.main};
   }
 `;
 
diff --git a/web/src/beta/components/fields/SliderField/index.tsx b/web/src/beta/components/fields/SliderField/index.tsx
index 18689c83c..35e174039 100644
--- a/web/src/beta/components/fields/SliderField/index.tsx
+++ b/web/src/beta/components/fields/SliderField/index.tsx
@@ -1,14 +1,19 @@
-import { useCallback, useEffect, useState } from "react";
-
 import Property from "@reearth/beta/components/fields";
 import Slider, { Props as SliderProps } from "@reearth/beta/components/Slider";
+import { useCallback, useEffect, useState } from "react";
 
 export type Props = {
   name?: string;
   description?: string;
 } & SliderProps;
 
-const SliderField: React.FC<Props> = ({ name, description, value, onChange, ...args }: Props) => {
+const SliderField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  onChange,
+  ...args
+}: Props) => {
   const [internalState, setInternalState] = useState(value);
 
   const handleChange = useCallback(
@@ -24,7 +29,12 @@ const SliderField: React.FC<Props> = ({ name, description, value, onChange, ...a
 
   return (
     <Property name={name} description={description}>
-      <Slider value={internalState} onChange={handleChange} onAfterChange={onChange} {...args} />
+      <Slider
+        value={internalState}
+        onChange={handleChange}
+        onAfterChange={onChange}
+        {...args}
+      />
     </Property>
   );
 };
diff --git a/web/src/beta/components/fields/SpacingInput/index.stories.tsx b/web/src/beta/components/fields/SpacingInput/index.stories.tsx
index a5ae5dc7e..40d16d6a5 100644
--- a/web/src/beta/components/fields/SpacingInput/index.stories.tsx
+++ b/web/src/beta/components/fields/SpacingInput/index.stories.tsx
@@ -6,7 +6,7 @@ export default {
   component: SpacingInput,
 } as Meta;
 
-const Template: Story = args => <SpacingInput {...args} />;
+const Template: Story = (args) => <SpacingInput {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/web/src/beta/components/fields/SpacingInput/index.tsx b/web/src/beta/components/fields/SpacingInput/index.tsx
index 05b18db79..47aa54c9c 100644
--- a/web/src/beta/components/fields/SpacingInput/index.tsx
+++ b/web/src/beta/components/fields/SpacingInput/index.tsx
@@ -1,6 +1,5 @@
-import { useMemo, useState } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { useMemo, useState } from "react";
 
 import Property from "..";
 import NumberInput from "../common/NumberInput";
@@ -25,14 +24,23 @@ type Props = {
 
 type Position = keyof SpacingValues;
 
-const SpacingInput: React.FC<Props> = ({ name, description, value, min, max, onChange }) => {
+const SpacingInput: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  min,
+  max,
+  onChange,
+}) => {
   const [spacingValues, setSpacingValues] = useState<SpacingValues>(
     value || { top: 0, left: 0, right: 0, bottom: 0 },
   );
 
   const memoizedSpacingValues = useMemo(
     () =>
-      SPACING_POSITIONS.map(position => getSpacingPosition(spacingValues, position as Position)),
+      SPACING_POSITIONS.map((position) =>
+        getSpacingPosition(spacingValues, position as Position),
+      ),
     [spacingValues],
   );
 
@@ -54,7 +62,9 @@ const SpacingInput: React.FC<Props> = ({ name, description, value, min, max, onC
             min={min}
             max={max}
             expandWithContent
-            onChange={newValue => handleInputChange(position as Position, newValue)}
+            onChange={(newValue) =>
+              handleInputChange(position as Position, newValue)
+            }
           />
         ))}
       </StyledRectangle>
@@ -79,12 +89,15 @@ const SpacingField = styled(NumberInput)<{ position: string }>`
     position === "top"
       ? "top: 0; left: 50%; transform: translateX(-50%);"
       : position === "left"
-      ? "left: 0; top: 50%; transform: translateY(-50%);"
-      : position === "right"
-      ? "right: 0; top: 50%; transform: translateY(-50%);"
-      : "bottom: 0; left: 50%; transform: translateX(-50%);"};
+        ? "left: 0; top: 50%; transform: translateY(-50%);"
+        : position === "right"
+          ? "right: 0; top: 50%; transform: translateY(-50%);"
+          : "bottom: 0; left: 50%; transform: translateX(-50%);"};
 `;
 
-function getSpacingPosition(spacingValue: SpacingValues, position: Position): number {
+function getSpacingPosition(
+  spacingValue: SpacingValues,
+  position: Position,
+): number {
   return spacingValue[position];
 }
diff --git a/web/src/beta/components/fields/TextAreaField/index.stories.tsx b/web/src/beta/components/fields/TextAreaField/index.stories.tsx
index e7ead5521..afefe8b2f 100644
--- a/web/src/beta/components/fields/TextAreaField/index.stories.tsx
+++ b/web/src/beta/components/fields/TextAreaField/index.stories.tsx
@@ -1,9 +1,8 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import TextAreaField, { Props } from ".";
 
 const meta: Meta<typeof TextAreaField> = {
@@ -17,7 +16,10 @@ type Story = StoryObj<typeof TextAreaField>;
 export const Default: Story = (args: Props) => {
   const [_, updateArgs] = useArgs();
 
-  const handleChange = useCallback((value: string) => updateArgs({ value: value }), [updateArgs]);
+  const handleChange = useCallback(
+    (value: string) => updateArgs({ value: value }),
+    [updateArgs],
+  );
 
   return (
     <Wrapper>
diff --git a/web/src/beta/components/fields/TextAreaField/index.tsx b/web/src/beta/components/fields/TextAreaField/index.tsx
index 696137d8f..22180cc05 100644
--- a/web/src/beta/components/fields/TextAreaField/index.tsx
+++ b/web/src/beta/components/fields/TextAreaField/index.tsx
@@ -1,8 +1,14 @@
-import { debounce } from "lodash-es";
-import { useCallback, useLayoutEffect, useRef, useMemo, useState, useEffect } from "react";
-
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { debounce } from "lodash-es";
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useMemo,
+  useState,
+  useEffect,
+} from "react";
 
 import Property from "..";
 
@@ -71,7 +77,10 @@ const TextAreaField: React.FC<Props> = ({
   );
 };
 
-const StyledTextArea = styled.textarea<{ minHeight: number; disabled: boolean }>`
+const StyledTextArea = styled.textarea<{
+  minHeight: number;
+  disabled: boolean;
+}>`
   padding: 4px 8px;
   width: 100%;
   resize: none;
diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts b/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
index dccb75d29..0d1a070fb 100644
--- a/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
+++ b/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
@@ -9,7 +9,12 @@ type Props = {
   setTimelineValues?: (value?: TimelineFieldProp) => void;
 };
 
-export default ({ timelineValues, onChange, onClose, setTimelineValues }: Props) => {
+export default ({
+  timelineValues,
+  onChange,
+  onClose,
+  setTimelineValues,
+}: Props) => {
   const [warning, setWarning] = useState(false);
 
   const handleOnChange = useCallback(
@@ -90,7 +95,7 @@ export default ({ timelineValues, onChange, onClose, setTimelineValues }: Props)
 
   const isDisabled = useMemo(() => {
     if (timelineValues) {
-      return Object.values(timelineValues).every(value => value !== "");
+      return Object.values(timelineValues).every((value) => value !== "");
     }
     return false;
   }, [timelineValues]);
diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
index 02df4370a..d4c4c3a5a 100644
--- a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
+++ b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
@@ -1,11 +1,10 @@
-import { useMemo } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import Icon from "@reearth/beta/components/Icon";
 import Modal from "@reearth/beta/components/Modal";
 import { getTimeZone } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useMemo } from "react";
 
 import { TimelineFieldProp } from "..";
 import DateTimeField from "../../DateTimeField";
@@ -50,7 +49,8 @@ const EditPanel = ({
     const currentTimezone = getTimeZone(timelineValues?.currentTime);
     const endTimezone = getTimeZone(timelineValues?.endTime);
 
-    const areTimezonesEqual = startTimezone === currentTimezone && currentTimezone === endTimezone;
+    const areTimezonesEqual =
+      startTimezone === currentTimezone && currentTimezone === endTimezone;
 
     return areTimezonesEqual;
   }, [timelineValues]);
@@ -60,7 +60,9 @@ const EditPanel = ({
       isVisible={isVisible}
       size="sm"
       title={t("Timeline Settings")}
-      button1={<Button text={t("Cancel")} buttonType="secondary" onClick={onClose} />}
+      button1={
+        <Button text={t("Cancel")} buttonType="secondary" onClick={onClose} />
+      }
       button2={
         <Button
           text={t("Apply")}
@@ -68,12 +70,13 @@ const EditPanel = ({
           disabled={!isDisabled || warning || !timezoneMatches}
           onClick={onAppyChange}
         />
-      }>
+      }
+    >
       <FieldsWrapper>
         <CustomDateTimeField
           name={t("* Start Time")}
           description={t("Start time for the timeline")}
-          onChange={newValue => handleOnChange(newValue || "", "startTime")}
+          onChange={(newValue) => handleOnChange(newValue || "", "startTime")}
           value={timelineValues?.startTime}
           fieldName={"startTime"}
           disableField={disabledFields.includes("startTime")}
@@ -83,7 +86,7 @@ const EditPanel = ({
         <CustomDateTimeField
           name={t("* Current Time")}
           description={t("Current time should be between start and end time")}
-          onChange={newValue => handleOnChange(newValue || "", "currentTime")}
+          onChange={(newValue) => handleOnChange(newValue || "", "currentTime")}
           value={timelineValues?.currentTime}
           disableField={disabledFields.includes("currentTime")}
           fieldName={"currentTime"}
@@ -92,7 +95,7 @@ const EditPanel = ({
         />
         <CustomDateTimeField
           name={t("* End Time")}
-          onChange={newValue => handleOnChange(newValue || "", "endTime")}
+          onChange={(newValue) => handleOnChange(newValue || "", "endTime")}
           description={t("End time for the timeline")}
           value={timelineValues?.endTime}
           fieldName={"endTime"}
@@ -103,7 +106,9 @@ const EditPanel = ({
         {warning && (
           <DangerItem>
             <Icon icon="alert" size={30} />
-            {t("Please make sure the Current time must between the Start time and End Time.")}
+            {t(
+              "Please make sure the Current time must between the Start time and End Time.",
+            )}
           </DangerItem>
         )}
       </FieldsWrapper>
diff --git a/web/src/beta/components/fields/TimelineField/index.tsx b/web/src/beta/components/fields/TimelineField/index.tsx
index 04d888feb..61121d143 100644
--- a/web/src/beta/components/fields/TimelineField/index.tsx
+++ b/web/src/beta/components/fields/TimelineField/index.tsx
@@ -1,10 +1,9 @@
-import { useCallback, useEffect, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useEffect, useState } from "react";
 
 import Property from "..";
 
@@ -23,7 +22,12 @@ export type Props = {
   onChange?: (value?: TimelineFieldProp) => void;
 };
 
-const TimelineField: React.FC<Props> = ({ name, description, value, onChange }) => {
+const TimelineField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  onChange,
+}) => {
   const [openModal, setOpenModal] = useState(false);
   const t = useT();
 
@@ -49,13 +53,19 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })
           <Input dataTimeSet={!!timelineValues}>
             <Timeline>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.startTime ? timelineValues?.startTime : t("not set")}
+                {timelineValues?.startTime
+                  ? timelineValues?.startTime
+                  : t("not set")}
               </TextWrapper>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.currentTime ? timelineValues?.currentTime : t("not set")}
+                {timelineValues?.currentTime
+                  ? timelineValues?.currentTime
+                  : t("not set")}
               </TextWrapper>
               <TextWrapper size="footnote" customColor>
-                {timelineValues?.endTime ? timelineValues?.endTime : t("not set")}
+                {timelineValues?.endTime
+                  ? timelineValues?.endTime
+                  : t("not set")}
               </TextWrapper>
             </Timeline>
             <DeleteIcon
@@ -114,7 +124,8 @@ const Input = styled.div<{ dataTimeSet?: boolean }>`
   color: ${({ theme }) => theme.content.strong};
   background: ${({ theme }) => theme.bg[1]};
   box-shadow: ${({ theme }) => theme.shadow.input};
-  color: ${({ theme, dataTimeSet }) => (dataTimeSet ? theme.content.strong : theme.content.weak)};
+  color: ${({ theme, dataTimeSet }) =>
+    dataTimeSet ? theme.content.strong : theme.content.weak};
 `;
 
 const Timeline = styled.div`
diff --git a/web/src/beta/components/fields/ToggleField/index.tsx b/web/src/beta/components/fields/ToggleField/index.tsx
index ba57dd7f8..348e4522a 100644
--- a/web/src/beta/components/fields/ToggleField/index.tsx
+++ b/web/src/beta/components/fields/ToggleField/index.tsx
@@ -6,7 +6,11 @@ export type Props = {
   description?: string;
 } & ToggleProps;
 
-const ToggleField: React.FC<Props> = ({ name, description, ...args }: Props) => (
+const ToggleField: React.FC<Props> = ({
+  name,
+  description,
+  ...args
+}: Props) => (
   <Property name={name} description={description}>
     <Toggle {...args} />
   </Property>
diff --git a/web/src/beta/components/fields/URLField/index.tsx b/web/src/beta/components/fields/URLField/index.tsx
index 64a30d65a..600e68f05 100644
--- a/web/src/beta/components/fields/URLField/index.tsx
+++ b/web/src/beta/components/fields/URLField/index.tsx
@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import Property from "@reearth/beta/components/fields";
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
-import { FILE_FORMATS, IMAGE_FORMATS } from "@reearth/beta/features/Assets/constants";
+import {
+  FILE_FORMATS,
+  IMAGE_FORMATS,
+} from "@reearth/beta/features/Assets/constants";
 import { AcceptedFileFormat } from "@reearth/beta/features/Assets/types";
 import AssetModal from "@reearth/beta/features/Modals/AssetModal";
 import LayerStyleModal from "@reearth/beta/features/Modals/LayerStyleModal";
@@ -12,6 +13,7 @@ import { checkIfFileType } from "@reearth/beta/utils/util";
 import { useT } from "@reearth/services/i18n";
 import { useNotification, useWorkspace } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
+import React, { useCallback, useEffect, useState } from "react";
 
 export type Props = {
   value?: string;
@@ -47,7 +49,10 @@ const URLField: React.FC<Props> = ({
         onChange?.(inputValue, name);
       } else if (
         fileType === "asset" &&
-        !(checkIfFileType(inputValue, FILE_FORMATS) || checkIfFileType(inputValue, IMAGE_FORMATS))
+        !(
+          checkIfFileType(inputValue, FILE_FORMATS) ||
+          checkIfFileType(inputValue, IMAGE_FORMATS)
+        )
       ) {
         setNotification({
           type: "error",
@@ -78,7 +83,11 @@ const URLField: React.FC<Props> = ({
 
   return (
     <Property name={name} description={description}>
-      <TextInput value={currentValue} onChange={handleChange} placeholder={t("Not set")} />
+      <TextInput
+        value={currentValue}
+        onChange={handleChange}
+        placeholder={t("Not set")}
+      />
       {fileType === "asset" && (
         <ButtonWrapper>
           <SelectionButton
@@ -95,7 +104,9 @@ const URLField: React.FC<Props> = ({
           />
         </ButtonWrapper>
       )}
-      {fileType === "layerStyle" && <SelectionButton icon="layerStyle" onClick={handleClick} />}
+      {fileType === "layerStyle" && (
+        <SelectionButton icon="layerStyle" onClick={handleClick} />
+      )}
       {open && entityType !== "layerStyle" && (
         <AssetModal
           open={open}
diff --git a/web/src/beta/components/fields/common/NumberInput/index.tsx b/web/src/beta/components/fields/common/NumberInput/index.tsx
index 2f60a2c13..198283d09 100644
--- a/web/src/beta/components/fields/common/NumberInput/index.tsx
+++ b/web/src/beta/components/fields/common/NumberInput/index.tsx
@@ -1,10 +1,9 @@
-import { useState, useCallback, useRef, useEffect } from "react";
-
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
 import { styled, useTheme } from "@reearth/services/theme";
 import spacingSizes from "@reearth/services/theme/reearthTheme/common/spacing";
+import { useState, useCallback, useRef, useEffect } from "react";
 
 export type Props = {
   className?: string;
@@ -47,7 +46,10 @@ const NumberInput: React.FC<Props> = ({
   useEffect(() => {
     // Calculate and set the minimum width for the input field
     if (inputRef.current && expandWithContent) {
-      const minWidth = Math.max(spacingSizes.smallest, inputRef.current.value.length * 10);
+      const minWidth = Math.max(
+        spacingSizes.smallest,
+        inputRef.current.value.length * 10,
+      );
       inputRef.current.style.width = `${minWidth}px`;
     }
   }, [expandWithContent]);
@@ -62,11 +64,17 @@ const NumberInput: React.FC<Props> = ({
         setInnerValue(undefined);
         onChange(undefined);
       } else if (typeof max === "number" && isFinite(max) && newValue > max) {
-        setNotification({ type: "warning", text: t("You have passed the maximum value.") });
+        setNotification({
+          type: "warning",
+          text: t("You have passed the maximum value."),
+        });
         setInnerValue(undefined);
         onChange(undefined);
       } else if (typeof min === "number" && isFinite(min) && newValue < min) {
-        setNotification({ type: "warning", text: t("You have passed the minimum value.") });
+        setNotification({
+          type: "warning",
+          text: t("You have passed the minimum value."),
+        });
         setInnerValue(undefined);
         onChange(undefined);
       } else if (!isNaN(newValue)) {
@@ -135,7 +143,8 @@ const NumberInput: React.FC<Props> = ({
           <TextWrapper
             size="footnote"
             color={theme.content.weak}
-            otherProperties={{ userSelect: "none" }}>
+            otherProperties={{ userSelect: "none" }}
+          >
             {suffix}
           </TextWrapper>
         )}
@@ -154,7 +163,10 @@ const Wrapper = styled.div`
   min-width: 0;
 `;
 
-const InputWrapper = styled.div<{ inactive: boolean; expandWithContent?: boolean }>`
+const InputWrapper = styled.div<{
+  inactive: boolean;
+  expandWithContent?: boolean;
+}>`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -165,7 +177,8 @@ const InputWrapper = styled.div<{ inactive: boolean; expandWithContent?: boolean
   padding: ${spacingSizes.smallest}px ${spacingSizes.small}px;
   gap: 12px;
   box-shadow: ${({ theme }) => theme.shadow.input};
-  color: ${({ inactive, theme }) => (inactive ? theme.content.weak : theme.content.main)};
+  color: ${({ inactive, theme }) =>
+    inactive ? theme.content.weak : theme.content.main};
   ${({ expandWithContent }) => expandWithContent && "min-width: min-content;"}
 
   :focus-within {
diff --git a/web/src/beta/components/fields/common/PanelCommon.tsx b/web/src/beta/components/fields/common/PanelCommon.tsx
index 442573337..49a6351ff 100644
--- a/web/src/beta/components/fields/common/PanelCommon.tsx
+++ b/web/src/beta/components/fields/common/PanelCommon.tsx
@@ -1,8 +1,7 @@
-import { ReactNode } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled, useTheme } from "@reearth/services/theme";
+import { ReactNode } from "react";
 
 type Props = {
   title: string;
@@ -15,7 +14,11 @@ const PanelCommon: React.FC<Props> = ({ title, children, onClose }) => {
   return (
     <Wrapper>
       <HeaderWrapper>
-        <PickerTitle size="footnote" weight="regular" color={theme.content.main}>
+        <PickerTitle
+          size="footnote"
+          weight="regular"
+          color={theme.content.main}
+        >
           {title}
         </PickerTitle>
         <CloseIcon icon="cancel" size={12} onClick={onClose} />
diff --git a/web/src/beta/components/fields/common/TextInput/index.tsx b/web/src/beta/components/fields/common/TextInput/index.tsx
index 626d19d31..5bfe78526 100644
--- a/web/src/beta/components/fields/common/TextInput/index.tsx
+++ b/web/src/beta/components/fields/common/TextInput/index.tsx
@@ -1,6 +1,10 @@
-import { HTMLInputTypeAttribute, useCallback, useEffect, useState } from "react";
-
 import { styled } from "@reearth/services/theme";
+import {
+  HTMLInputTypeAttribute,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 
 export type Props = {
   className?: string;
diff --git a/web/src/beta/components/fields/index.tsx b/web/src/beta/components/fields/index.tsx
index 96f2a242c..a2f511301 100644
--- a/web/src/beta/components/fields/index.tsx
+++ b/web/src/beta/components/fields/index.tsx
@@ -1,6 +1,5 @@
-import { ReactNode } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { ReactNode } from "react";
 
 import Text from "../Text";
 
@@ -11,7 +10,12 @@ type Props = {
   className?: string;
 };
 
-const Property: React.FC<Props> = ({ name, description, children, className }) => {
+const Property: React.FC<Props> = ({
+  name,
+  description,
+  children,
+  className,
+}) => {
   return (
     <Wrapper className={className}>
       {name && <Text size="footnote">{name}</Text>}
diff --git a/web/src/beta/components/fields/utils.ts b/web/src/beta/components/fields/utils.ts
index 9543d0d4f..2320297f7 100644
--- a/web/src/beta/components/fields/utils.ts
+++ b/web/src/beta/components/fields/utils.ts
@@ -1,20 +1,27 @@
-import { Field, Item, SchemaField } from "@reearth/services/api/propertyApi/utils";
+import {
+  Field,
+  Item,
+  SchemaField,
+} from "@reearth/services/api/propertyApi/utils";
 
 export const filterVisibleItems = (items?: Item[]) => {
   if (!items) return;
 
-  return items.filter(i => {
+  return items.filter((i) => {
     if (!i.only) return true;
     const res = searchField(items, i.only.field);
     return res && (res[1]?.value ?? res[0].defaultValue) === i.only.value;
   });
 };
 
-const searchField = (items: Item[], fid: string): [SchemaField, Field | undefined] | undefined => {
+const searchField = (
+  items: Item[],
+  fid: string,
+): [SchemaField, Field | undefined] | undefined => {
   for (const i of items) {
-    const sf2 = i.schemaFields.find(f => f.id === fid);
+    const sf2 = i.schemaFields.find((f) => f.id === fid);
     if (!("fields" in i)) return;
-    const field = i.fields.find(f => f.id === fid);
+    const field = i.fields.find((f) => f.id === fid);
     if (sf2) {
       return [sf2, field];
     }
diff --git a/web/src/beta/features/Assets/constants.ts b/web/src/beta/features/Assets/constants.ts
index 32c867e06..f34141b38 100644
--- a/web/src/beta/features/Assets/constants.ts
+++ b/web/src/beta/features/Assets/constants.ts
@@ -1,5 +1,6 @@
 // TODO: Remove this file
 
-export const FILE_FORMATS = ".kml,.czml,.topojson,.geojson,.json,.gltf,.glb,.csv";
+export const FILE_FORMATS =
+  ".kml,.czml,.topojson,.geojson,.json,.gltf,.glb,.csv";
 
 export const IMAGE_FORMATS = ".jpg,.jpeg,.png,.gif,.svg,.tiff,.webp";
diff --git a/web/src/beta/features/Assets/hooks.ts b/web/src/beta/features/Assets/hooks.ts
index 99cc48146..5a3bcfff8 100644
--- a/web/src/beta/features/Assets/hooks.ts
+++ b/web/src/beta/features/Assets/hooks.ts
@@ -1,11 +1,13 @@
 import { useApolloClient } from "@apollo/client";
-import { useCallback, useState, useRef, useMemo, useEffect } from "react";
-
 import { Asset, SortType } from "@reearth/beta/features/Assets/types";
-import { autoFillPage, onScrollToBottom } from "@reearth/beta/utils/infinite-scroll";
+import {
+  autoFillPage,
+  onScrollToBottom,
+} from "@reearth/beta/utils/infinite-scroll";
 import { useAssetsFetcher } from "@reearth/services/api";
 import { Maybe } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useState, useRef, useMemo, useEffect } from "react";
 
 // TODO: Remove this file
 
@@ -26,7 +28,8 @@ function pagination(
   sort?: { type?: Maybe<SortType>; reverse?: boolean },
   endCursor?: string | null,
 ) {
-  const reverseOrder = !sort?.type || sort?.type === "date" ? !sort?.reverse : !!sort?.reverse;
+  const reverseOrder =
+    !sort?.type || sort?.type === "date" ? !sort?.reverse : !!sort?.reverse;
 
   return {
     after: !reverseOrder ? endCursor : undefined,
@@ -52,12 +55,13 @@ export default ({
 
   const { useAssetsQuery, useRemoveAssets } = useAssetsFetcher();
 
-  const { assets, hasMoreAssets, loading, isRefetching, endCursor, fetchMore } = useAssetsQuery({
-    teamId: workspaceId ?? "",
-    pagination: pagination(sort),
-    // sort: toGQLEnum(sort?.type),
-    keyword: searchTerm,
-  });
+  const { assets, hasMoreAssets, loading, isRefetching, endCursor, fetchMore } =
+    useAssetsQuery({
+      teamId: workspaceId ?? "",
+      pagination: pagination(sort),
+      // sort: toGQLEnum(sort?.type),
+      keyword: searchTerm,
+    });
 
   useEffect(() => {
     return () => {
@@ -68,7 +72,9 @@ export default ({
 
   const t = useT();
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
-  const [localSearchTerm, setLocalSearchTerm] = useState<string>(searchTerm ?? "");
+  const [localSearchTerm, setLocalSearchTerm] = useState<string>(
+    searchTerm ?? "",
+  );
   const openDeleteModal = useCallback(() => setDeleteModalVisible(true), []);
   const closeDeleteModal = useCallback(() => setDeleteModalVisible(false), []);
   const assetsWrapperRef = useRef<HTMLDivElement>(null);
@@ -113,7 +119,7 @@ export default ({
 
   const handleRemove = useCallback(async () => {
     if (selectedAssets?.length) {
-      const { status } = await useRemoveAssets(selectedAssets.map(a => a.id));
+      const { status } = await useRemoveAssets(selectedAssets.map((a) => a.id));
       if (status === "success") {
         selectAsset([]);
       }
diff --git a/web/src/beta/features/AssetsManager/AssetsSelector.tsx b/web/src/beta/features/AssetsManager/AssetsSelector.tsx
index ca602655e..076f01915 100644
--- a/web/src/beta/features/AssetsManager/AssetsSelector.tsx
+++ b/web/src/beta/features/AssetsManager/AssetsSelector.tsx
@@ -1,8 +1,7 @@
-import { FC, useCallback, useState } from "react";
-
 import { Button, Modal, ModalPanel } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useState } from "react";
 
 import { Asset } from "./types";
 
@@ -14,7 +13,12 @@ export type AssetsSelectorProps = AssetsManagerProps & {
   onAssetSelect?: (url?: string, name?: string) => void;
 };
 
-const AssetsSelector: FC<AssetsSelectorProps> = ({ opened, onClose, onAssetSelect, ...props }) => {
+const AssetsSelector: FC<AssetsSelectorProps> = ({
+  opened,
+  onClose,
+  onAssetSelect,
+  ...props
+}) => {
   const t = useT();
 
   const [selectedAssets, setSelectedAssets] = useState<Asset[]>([]);
@@ -43,7 +47,8 @@ const AssetsSelector: FC<AssetsSelectorProps> = ({ opened, onClose, onAssetSelec
               onClick={handleSelectFinish}
             />
           </>
-        }>
+        }
+      >
         <Wrapper>
           <AssetsManager
             {...props}
diff --git a/web/src/beta/features/AssetsManager/constants.ts b/web/src/beta/features/AssetsManager/constants.ts
index a042c406d..2faf06786 100644
--- a/web/src/beta/features/AssetsManager/constants.ts
+++ b/web/src/beta/features/AssetsManager/constants.ts
@@ -1,4 +1,12 @@
-export const IMAGE_FILE_TYPES = ["jpg", "jpeg", "png", "gif", "svg", "tiff", "webp"] as const;
+export const IMAGE_FILE_TYPES = [
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "svg",
+  "tiff",
+  "webp",
+] as const;
 
 export const GIS_FILE_TYPES = [
   "geojson",
diff --git a/web/src/beta/features/AssetsManager/hooks.ts b/web/src/beta/features/AssetsManager/hooks.ts
index 12e022104..0e7a9073d 100644
--- a/web/src/beta/features/AssetsManager/hooks.ts
+++ b/web/src/beta/features/AssetsManager/hooks.ts
@@ -1,11 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import useFileInput from "use-file-input";
-
 import { BreadcrumbItem } from "@reearth/beta/lib/reearth-ui";
 import { ManagerLayout } from "@reearth/beta/ui/components/ManagerBase";
 import { useAssetsFetcher } from "@reearth/services/api";
 import { AssetSortField, SortDirection } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import useFileInput from "use-file-input";
 
 import {
   FileType,
@@ -99,31 +98,37 @@ export default ({
   }, []);
 
   // assets
-  const { useAssetsQuery, useRemoveAssets, useCreateAssets } = useAssetsFetcher();
-  const { assets, hasMoreAssets, isRefetching, endCursor, loading, fetchMore } = useAssetsQuery({
-    teamId: workspaceId ?? "",
-    pagination: {
-      first: ASSETS_PER_PAGE,
-    },
-    sort: {
-      direction: sort.reverse ? SortDirection.Desc : SortDirection.Asc,
-      field: typeToGQLField[sort.type ?? "date"],
-    },
-    keyword: searchTerm,
-  });
+  const { useAssetsQuery, useRemoveAssets, useCreateAssets } =
+    useAssetsFetcher();
+  const { assets, hasMoreAssets, isRefetching, endCursor, loading, fetchMore } =
+    useAssetsQuery({
+      teamId: workspaceId ?? "",
+      pagination: {
+        first: ASSETS_PER_PAGE,
+      },
+      sort: {
+        direction: sort.reverse ? SortDirection.Desc : SortDirection.Asc,
+        field: typeToGQLField[sort.type ?? "date"],
+      },
+      keyword: searchTerm,
+    });
 
   const assetsExts = useMemo(
     () =>
       assetsTypes
-        ?.map(t => (t === "image" ? IMAGE_FILE_TYPES : t === "file" ? GIS_FILE_TYPES : t))
+        ?.map((t) =>
+          t === "image" ? IMAGE_FILE_TYPES : t === "file" ? GIS_FILE_TYPES : t,
+        )
         .flat(),
     [assetsTypes],
   );
 
   const filteredAssets = useMemo(() => {
     if (!assetsExts || !assets) return assets;
-    return assets.filter(a =>
-      assetsExts.includes((a.url.split(".").pop()?.toLowerCase() as FileType) ?? ""),
+    return assets.filter((a) =>
+      assetsExts.includes(
+        (a.url.split(".").pop()?.toLowerCase() as FileType) ?? "",
+      ),
     );
   }, [assets, assetsExts]);
 
@@ -195,7 +200,10 @@ export default ({
     const handleScroll = () => {
       if (childElement) {
         const isScrolledToBottom =
-          childElement.scrollHeight - parentElement.scrollTop - parentElement.clientHeight < 50;
+          childElement.scrollHeight -
+            parentElement.scrollTop -
+            parentElement.clientHeight <
+          50;
         if (isScrolledToBottom) {
           loadMoreRef.current?.();
         }
@@ -224,14 +232,19 @@ export default ({
 
   // upload
   // currently use in dashboard only therefore we can set multiple to true always
-  const handleAssetUpload = useFileInput(files => handleAssetsCreate?.(files), {
-    accept: GENERAL_FILE_TYPE_ACCEPT_STRING,
-    multiple: true,
-  });
+  const handleAssetUpload = useFileInput(
+    (files) => handleAssetsCreate?.(files),
+    {
+      accept: GENERAL_FILE_TYPE_ACCEPT_STRING,
+      multiple: true,
+    },
+  );
 
   // layout
   const [layout, setLayout] = useState(
-    ["grid", "list"].includes(localStorage.getItem(ASSETS_LAYOUT_STORAGE_KEY) ?? "")
+    ["grid", "list"].includes(
+      localStorage.getItem(ASSETS_LAYOUT_STORAGE_KEY) ?? "",
+    )
       ? (localStorage.getItem(ASSETS_LAYOUT_STORAGE_KEY) as ManagerLayout)
       : "grid",
   );
@@ -244,7 +257,9 @@ export default ({
 
   // path
   // TODO: support path with folder
-  const [paths, _setPaths] = useState<BreadcrumbItem[]>([{ id: "assets", title: "Assets" }]);
+  const [paths, _setPaths] = useState<BreadcrumbItem[]>([
+    { id: "assets", title: "Assets" },
+  ]);
   const handlePathClick = useCallback((_id?: string) => {}, []);
 
   // select
@@ -256,7 +271,7 @@ export default ({
       if (allowMultipleSelection && ctrlPressed.current && assetId) {
         selectAsset(
           selectedAssetIds.includes(assetId)
-            ? selectedAssetIds.filter(a => a !== assetId)
+            ? selectedAssetIds.filter((a) => a !== assetId)
             : [...selectedAssetIds, assetId],
         );
       } else {
@@ -289,7 +304,9 @@ export default ({
   useEffect(() => {
     if (!onSelectChange) return;
     onSelectChange(
-      selectedAssetIds.map(id => assets.find(a => a.id === id)).filter(a => !!a) as Asset[],
+      selectedAssetIds
+        .map((id) => assets.find((a) => a.id === id))
+        .filter((a) => !!a) as Asset[],
     );
   }, [selectedAssetIds, assets, onSelectChange]);
 
diff --git a/web/src/beta/features/AssetsManager/index.tsx b/web/src/beta/features/AssetsManager/index.tsx
index 1da62c7af..483efd858 100644
--- a/web/src/beta/features/AssetsManager/index.tsx
+++ b/web/src/beta/features/AssetsManager/index.tsx
@@ -1,5 +1,3 @@
-import { FC } from "react";
-
 import { Breadcrumb, Loading, Typography } from "@reearth/beta/lib/reearth-ui";
 import {
   ManagerContent,
@@ -10,6 +8,7 @@ import {
 } from "@reearth/beta/ui/components/ManagerBase";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { AcceptedAssetsTypes } from "./constants";
 import useHooks from "./hooks";
@@ -89,7 +88,9 @@ const AssetsManager: FC<AssetsManagerProps> = ({
         searchPlaceholder={t("Search in all assets library")}
         enableDelete={enableDelete}
         deleteText={`${selectedAssetIds.length} ${
-          selectedAssetIds.length > 1 ? t("Assets selected") : t("Asset selected")
+          selectedAssetIds.length > 1
+            ? t("Assets selected")
+            : t("Asset selected")
         }`}
         selectedIds={selectedAssetIds}
         onCancelSelect={() => handleAssetSelect(undefined)}
@@ -126,7 +127,7 @@ const AssetsManager: FC<AssetsManagerProps> = ({
               <AssetsContent size={size} ref={assetsContentRef}>
                 {/* TODO: Group of folders */}
                 <AssetsGroup layout={layout} size={size}>
-                  {filteredAssets?.map(asset =>
+                  {filteredAssets?.map((asset) =>
                     layout === "grid" ? (
                       <AssetGridItem
                         key={asset.id}
@@ -162,17 +163,21 @@ const AssetsManager: FC<AssetsManagerProps> = ({
 
 export default AssetsManager;
 
-const ContentWrapper = styled("div")<{ size: AssetsManagerSize }>(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing.normal,
-  flex: 1,
-  height: 0,
-}));
+const ContentWrapper = styled("div")<{ size: AssetsManagerSize }>(
+  ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.normal,
+    flex: 1,
+    height: 0,
+  }),
+);
 
-const PathWrapper = styled("div")<{ size: AssetsManagerSize }>(({ theme, size }) => ({
-  padding: `0 ${size === "large" ? theme.spacing.large : theme.spacing.small}px`,
-}));
+const PathWrapper = styled("div")<{ size: AssetsManagerSize }>(
+  ({ theme, size }) => ({
+    padding: `0 ${size === "large" ? theme.spacing.large : theme.spacing.small}px`,
+  }),
+);
 
 const AssetsWrapper = styled("div")(() => ({
   position: "relative",
@@ -183,14 +188,16 @@ const AssetsWrapper = styled("div")(() => ({
   overflow: "auto",
 }));
 
-const AssetsContent = styled("div")<{ size: AssetsManagerSize }>(({ theme, size }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing.normal,
-  padding: `${theme.spacing.smallest}px ${
-    size === "large" ? theme.spacing.large : theme.spacing.small
-  }px ${size === "large" ? theme.spacing.large : theme.spacing.small}px`,
-}));
+const AssetsContent = styled("div")<{ size: AssetsManagerSize }>(
+  ({ theme, size }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.normal,
+    padding: `${theme.spacing.smallest}px ${
+      size === "large" ? theme.spacing.large : theme.spacing.small
+    }px ${size === "large" ? theme.spacing.large : theme.spacing.small}px`,
+  }),
+);
 
 const LayoutWrapper = styled("div")(() => ({
   display: "flex",
@@ -199,24 +206,25 @@ const LayoutWrapper = styled("div")(() => ({
   height: 0,
 }));
 
-const AssetsGroup = styled("div")<{ layout: ManagerLayout; size: AssetsManagerSize }>(
-  ({ theme, layout, size }) => ({
-    ...(layout === "grid"
-      ? {
-          display: "grid",
-          gap: theme.spacing.normal,
-          gridTemplateColumns: `repeat(auto-fill, minmax(${size === "medium" ? 96 : 144}px, 1fr))`,
-        }
-      : {}),
-    ...(layout === "list"
-      ? {
-          display: "flex",
-          flexDirection: "column",
-          gap: theme.spacing.small,
-        }
-      : {}),
-  }),
-);
+const AssetsGroup = styled("div")<{
+  layout: ManagerLayout;
+  size: AssetsManagerSize;
+}>(({ theme, layout, size }) => ({
+  ...(layout === "grid"
+    ? {
+        display: "grid",
+        gap: theme.spacing.normal,
+        gridTemplateColumns: `repeat(auto-fill, minmax(${size === "medium" ? 96 : 144}px, 1fr))`,
+      }
+    : {}),
+  ...(layout === "list"
+    ? {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing.small,
+      }
+    : {}),
+}));
 
 const ListHeader = styled("div")<{ size: AssetsManagerSize; width: number }>(
   ({ theme, size, width }) => ({
@@ -224,7 +232,8 @@ const ListHeader = styled("div")<{ size: AssetsManagerSize; width: number }>(
     alignItems: "center",
     boxSizing: "border-box",
     padding: `${theme.spacing.smallest}px ${
-      (size === "large" ? theme.spacing.large : theme.spacing.small) + theme.spacing.smallest
+      (size === "large" ? theme.spacing.large : theme.spacing.small) +
+      theme.spacing.smallest
     }px`,
     gap: theme.spacing.small,
     width: width,
diff --git a/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx b/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx
index c6f23a2dc..2f58cb632 100644
--- a/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx
+++ b/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx
@@ -1,13 +1,19 @@
-import { FC, MouseEvent, useCallback, useMemo } from "react";
-
 import { Icon, Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, MouseEvent, useCallback, useMemo } from "react";
 
 import { AssetItemProps } from "./type";
 import { getAssetType } from "./utils";
 
-const AssetGridItem: FC<AssetItemProps> = ({ asset, selectedAssetIds, onSelect }) => {
-  const selected = useMemo(() => selectedAssetIds.includes(asset.id), [selectedAssetIds, asset.id]);
+const AssetGridItem: FC<AssetItemProps> = ({
+  asset,
+  selectedAssetIds,
+  onSelect,
+}) => {
+  const selected = useMemo(
+    () => selectedAssetIds.includes(asset.id),
+    [selectedAssetIds, asset.id],
+  );
 
   const type = useMemo(() => getAssetType(asset), [asset]);
 
@@ -32,7 +38,9 @@ const AssetGridItem: FC<AssetItemProps> = ({ asset, selectedAssetIds, onSelect }
           ) : (
             <IconWrapper>
               <Icon icon="fileFilled" color={theme.content.weak} size={64} />
-              <StyledTypography size="body">{ext?.toUpperCase()}</StyledTypography>
+              <StyledTypography size="body">
+                {ext?.toUpperCase()}
+              </StyledTypography>
             </IconWrapper>
           )}
         </Thumbnail>
@@ -46,22 +54,24 @@ const AssetGridItem: FC<AssetItemProps> = ({ asset, selectedAssetIds, onSelect }
 
 export default AssetGridItem;
 
-const Wrapper = styled("div")<{ selected?: boolean }>(({ theme, selected }) => ({
-  display: "flex",
-  flexDirection: "column",
-  boxSizing: "border-box",
-  width: "100%",
-  padding: theme.spacing.smallest,
-  borderRadius: theme.radius.small,
-  gap: theme.spacing.smallest,
-  cursor: "pointer",
-  backgroundColor: selected ? theme.select.main : "transparent",
-  transition: "background-color 0.1s ease",
-  ["&:hover"]: {
-    background: selected ? theme.select.main : theme.relative.light,
+const Wrapper = styled("div")<{ selected?: boolean }>(
+  ({ theme, selected }) => ({
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    width: "100%",
+    padding: theme.spacing.smallest,
     borderRadius: theme.radius.small,
-  },
-}));
+    gap: theme.spacing.smallest,
+    cursor: "pointer",
+    backgroundColor: selected ? theme.select.main : "transparent",
+    transition: "background-color 0.1s ease",
+    ["&:hover"]: {
+      background: selected ? theme.select.main : theme.relative.light,
+      borderRadius: theme.radius.small,
+    },
+  }),
+);
 
 const ThumbnailWrapper = styled("div")(() => ({
   position: "relative",
diff --git a/web/src/beta/features/AssetsManager/item/AssetListItem.tsx b/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
index 1f5ad02ab..75b016e7b 100644
--- a/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
+++ b/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
@@ -1,13 +1,19 @@
-import { FC, MouseEvent, useCallback, useMemo } from "react";
-
 import { Icon, Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, MouseEvent, useCallback, useMemo } from "react";
 
 import { AssetItemProps } from "./type";
 import { getAssetType } from "./utils";
 
-const AssetListItem: FC<AssetItemProps> = ({ asset, selectedAssetIds, onSelect }) => {
-  const selected = useMemo(() => selectedAssetIds.includes(asset.id), [selectedAssetIds, asset.id]);
+const AssetListItem: FC<AssetItemProps> = ({
+  asset,
+  selectedAssetIds,
+  onSelect,
+}) => {
+  const selected = useMemo(
+    () => selectedAssetIds.includes(asset.id),
+    [selectedAssetIds, asset.id],
+  );
 
   const type = useMemo(() => getAssetType(asset), [asset]);
 
@@ -60,23 +66,25 @@ const AssetListItem: FC<AssetItemProps> = ({ asset, selectedAssetIds, onSelect }
 
 export default AssetListItem;
 
-const Wrapper = styled("div")<{ selected?: boolean }>(({ theme, selected }) => ({
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  boxSizing: "border-box",
-  padding: theme.spacing.smallest,
-  borderRadius: theme.radius.small,
-  gap: theme.spacing.small,
-  cursor: "pointer",
-  backgroundColor: selected ? theme.select.main : "transparent",
-  transition: "background-color 0.1s ease",
-  overflow: "hidden",
-  ["&:hover"]: {
-    background: selected ? theme.select.main : theme.relative.light,
+const Wrapper = styled("div")<{ selected?: boolean }>(
+  ({ theme, selected }) => ({
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    boxSizing: "border-box",
+    padding: theme.spacing.smallest,
     borderRadius: theme.radius.small,
-  },
-}));
+    gap: theme.spacing.small,
+    cursor: "pointer",
+    backgroundColor: selected ? theme.select.main : "transparent",
+    transition: "background-color 0.1s ease",
+    overflow: "hidden",
+    ["&:hover"]: {
+      background: selected ? theme.select.main : theme.relative.light,
+      borderRadius: theme.radius.small,
+    },
+  }),
+);
 
 const Thumbnail = styled("div")(() => ({
   width: 20,
diff --git a/web/src/beta/features/AssetsManager/item/utils.ts b/web/src/beta/features/AssetsManager/item/utils.ts
index 6d3aacdd0..efc9655fb 100644
--- a/web/src/beta/features/AssetsManager/item/utils.ts
+++ b/web/src/beta/features/AssetsManager/item/utils.ts
@@ -1,4 +1,9 @@
-import { GIS_FILE_TYPES, GisType, IMAGE_FILE_TYPES, ImageType } from "../constants";
+import {
+  GIS_FILE_TYPES,
+  GisType,
+  IMAGE_FILE_TYPES,
+  ImageType,
+} from "../constants";
 import { Asset } from "../types";
 
 export function getAssetType(asset: Asset): "image" | "file" {
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx
index 0f19400b8..193a68820 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx
@@ -1,7 +1,6 @@
-import { FC } from "react";
-
 import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { Member } from "../../type";
 
@@ -9,7 +8,9 @@ const ListItem: FC<{ member: Member }> = ({ member }) => {
   return (
     <StyledListItem>
       <Avatar>
-        <Typography size="body">{member.user?.name.charAt(0).toUpperCase()}</Typography>
+        <Typography size="body">
+          {member.user?.name.charAt(0).toUpperCase()}
+        </Typography>
       </Avatar>
       <TypographyWrapper>
         <Typography size="body">{member.user?.name}</Typography>
@@ -19,7 +20,8 @@ const ListItem: FC<{ member: Member }> = ({ member }) => {
       </TypographyWrapper>
       <TypographyWrapper>
         <Typography size="body">
-          {member.role.charAt(0).toUpperCase() + member.role.slice(1).toLowerCase()}
+          {member.role.charAt(0).toUpperCase() +
+            member.role.slice(1).toLowerCase()}
         </Typography>
       </TypographyWrapper>
     </StyledListItem>
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx
index 6e2089160..d1e236784 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx
@@ -1,17 +1,20 @@
-import { FC, useEffect, useState } from "react";
-
 import { Button, TextInput, Typography } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useEffect, useState } from "react";
 
 import { Workspace } from "../../type";
 
 import ListItem from "./ListItem";
 
-const Members: FC<{ currentWorkspace?: Workspace }> = ({ currentWorkspace }) => {
+const Members: FC<{ currentWorkspace?: Workspace }> = ({
+  currentWorkspace,
+}) => {
   const t = useT();
   const [searchQuery, setSearchQuery] = useState<string>("");
-  const [filteredMembers, setFilteredMembers] = useState<Workspace["members"] | null>(null);
+  const [filteredMembers, setFilteredMembers] = useState<
+    Workspace["members"] | null
+  >(null);
 
   const handleMemberSearch = () => {
     if (!currentWorkspace?.members) {
@@ -19,7 +22,7 @@ const Members: FC<{ currentWorkspace?: Workspace }> = ({ currentWorkspace }) =>
     }
 
     const filtered = currentWorkspace.members.filter(
-      member =>
+      (member) =>
         member?.user?.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
         member?.user?.email?.toLowerCase().includes(searchQuery.toLowerCase()),
     );
@@ -28,7 +31,8 @@ const Members: FC<{ currentWorkspace?: Workspace }> = ({ currentWorkspace }) =>
 
   const handleSearchInputChange = (value: string) => {
     setSearchQuery(value);
-    if (value === "" && currentWorkspace?.members) setFilteredMembers(currentWorkspace.members);
+    if (value === "" && currentWorkspace?.members)
+      setFilteredMembers(currentWorkspace.members);
   };
 
   useEffect(() => {
@@ -55,10 +59,14 @@ const Members: FC<{ currentWorkspace?: Workspace }> = ({ currentWorkspace }) =>
       </Search>
       <ListWrapper>
         {filteredMembers && filteredMembers?.length > 0 ? (
-          filteredMembers?.map(member => <ListItem key={member.userId} member={member} />)
+          filteredMembers?.map((member) => (
+            <ListItem key={member.userId} member={member} />
+          ))
         ) : (
           <TemplateWrapper>
-            <Typography size="body">{t("No Member match your search.")}</Typography>
+            <Typography size="body">
+              {t("No Member match your search.")}
+            </Typography>
           </TemplateWrapper>
         )}
       </ListWrapper>
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
index 69a42ae7a..1be95e348 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
@@ -1,7 +1,6 @@
-import { FC } from "react";
-
 import { Button, PopupMenu, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
 
 import useHooks from "./hooks";
 import { ProjectProps } from "./types";
@@ -39,19 +38,21 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
       <CardImage
         backgroundImage={project.imageUrl}
         onDoubleClick={onProjectOpen}
-        onClick={e => onProjectSelect?.(e, project.id)}
+        onClick={(e) => onProjectSelect?.(e, project.id)}
         isHovered={isHovered ?? false}
         onMouseEnter={() => handleProjectHover?.(true)}
         onMouseLeave={() => handleProjectHover?.(false)}
-        isSelected={selectedProjectId === project.id}>
+        isSelected={selectedProjectId === project.id}
+      >
         <StarButtonWrapper
           isStarred={isStarred ?? false}
           isHovered={isHovered ?? false}
-          isSelected={selectedProjectId === project.id}>
+          isSelected={selectedProjectId === project.id}
+        >
           <Button
             iconButton
             icon={isStarred ? "starFilled" : "star"}
-            onClick={e => handleProjectStarClick?.(e)}
+            onClick={(e) => handleProjectStarClick?.(e)}
             iconColor={isStarred ? theme.warning.main : theme.content.main}
             appearance="simple"
           />
@@ -61,7 +62,9 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
         {publishStatus && <PublishStatus />}
         <CardTitleWrapper>
           {!isEditing ? (
-            <CardTitle onDoubleClick={handleProjectNameDoubleClick}>{projectName}</CardTitle>
+            <CardTitle onDoubleClick={handleProjectNameDoubleClick}>
+              {projectName}
+            </CardTitle>
           ) : (
             <TextInput
               onChange={handleProjectNameChange}
@@ -74,7 +77,9 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
         </CardTitleWrapper>
         <PopupMenu
           menu={popupMenu}
-          label={<Button icon="dotsThreeVertical" iconButton appearance="simple" />}
+          label={
+            <Button icon="dotsThreeVertical" iconButton appearance="simple" />
+          }
         />
       </CardFooter>
     </Card>
@@ -99,7 +104,9 @@ const CardImage = styled("div")<{
 }>(({ theme, backgroundImage, isHovered }) => ({
   flex: 1,
   position: "relative",
-  background: backgroundImage ? `url(${backgroundImage}) center/cover` : theme.bg[1],
+  background: backgroundImage
+    ? `url(${backgroundImage}) center/cover`
+    : theme.bg[1],
   borderRadius: theme.radius.normal,
   boxSizing: "border-box",
   cursor: "pointer",
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
index 0c439caef..9e6ce24ce 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
@@ -1,8 +1,12 @@
-import { FC, MouseEvent, useMemo } from "react";
-
-import { Button, PopupMenu, TextInput, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  PopupMenu,
+  TextInput,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { convertTimeToString } from "@reearth/beta/utils/time";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, MouseEvent, useMemo } from "react";
 
 import useHooks from "./hooks";
 import { ProjectProps } from "./types";
@@ -46,22 +50,24 @@ const ProjectListViewItem: FC<ProjectProps> = ({
 
   return (
     <StyledRow
-      onClick={e => onProjectSelect?.(e, project.id)}
+      onClick={(e) => onProjectSelect?.(e, project.id)}
       isHovered={isHovered ?? false}
       onDoubleClick={onProjectOpen}
       onMouseEnter={() => handleProjectHover?.(true)}
       onMouseLeave={() => handleProjectHover?.(false)}
-      isSelected={selectedProjectId === project.id}>
+      isSelected={selectedProjectId === project.id}
+    >
       <ActionCell>
         <FlexItem>
           <StarButtonWrapper
             isStarred={isStarred ?? false}
             isHovered={isHovered ?? false}
-            isSelected={selectedProjectId === project.id}>
+            isSelected={selectedProjectId === project.id}
+          >
             <Button
               iconButton
               icon={isStarred ? "starFilled" : "star"}
-              onClick={e => handleProjectStarClick?.(e)}
+              onClick={(e) => handleProjectStarClick?.(e)}
               iconColor={isStarred ? theme.warning.main : theme.content.main}
               appearance="simple"
             />
@@ -72,7 +78,9 @@ const ProjectListViewItem: FC<ProjectProps> = ({
       <ProjectNameCell>
         <PublishStatus status={publishStatus} />
         {!isEditing ? (
-          <TitleWrapper onDoubleClick={handleProjectNameDoubleClick}>{projectName}</TitleWrapper>
+          <TitleWrapper onDoubleClick={handleProjectNameDoubleClick}>
+            {projectName}
+          </TitleWrapper>
         ) : (
           <TextInput
             onChange={handleProjectNameChange}
@@ -92,10 +100,13 @@ const ProjectListViewItem: FC<ProjectProps> = ({
       <ActionCell
         onClick={(e: MouseEvent) => {
           e.stopPropagation();
-        }}>
+        }}
+      >
         <PopupMenu
           menu={popupMenu}
-          label={<Button icon="dotsThreeVertical" iconButton appearance="simple" />}
+          label={
+            <Button icon="dotsThreeVertical" iconButton appearance="simple" />
+          }
         />
       </ActionCell>
     </StyledRow>
@@ -118,7 +129,9 @@ const StyledRow = styled("div")<{ isSelected: boolean; isHovered: boolean }>(
 
 const ProjectImage = styled("div")<{ backgroundImage?: string | null }>(
   ({ theme, backgroundImage }) => ({
-    background: backgroundImage ? `url(${backgroundImage}) center/cover` : theme.bg[1],
+    background: backgroundImage
+      ? `url(${backgroundImage}) center/cover`
+      : theme.bg[1],
     borderRadius: theme.radius.normal,
     height: "32px",
     width: "55px",
@@ -142,12 +155,14 @@ const ProjectNameCell = styled("div")(({ theme }) => ({
   flex: 1,
 }));
 
-const PublishStatus = styled("div")<{ status?: boolean }>(({ status, theme }) => ({
-  height: "12px",
-  width: "12px",
-  borderRadius: "50%",
-  background: status ? theme.publish.main : "transparent",
-}));
+const PublishStatus = styled("div")<{ status?: boolean }>(
+  ({ status, theme }) => ({
+    height: "12px",
+    width: "12px",
+    borderRadius: "50%",
+    background: status ? theme.publish.main : "transparent",
+  }),
+);
 
 const TimeCell = styled("div")(() => ({
   flex: 0.5,
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
index 9d89948ea..e2e4a15ac 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
@@ -1,8 +1,7 @@
-import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
-
 import { PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
 import useDoubleClick from "@reearth/beta/utils/use-double-click";
 import { useT } from "@reearth/services/i18n";
+import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
 
 import { Project as ProjectType } from "../../../type";
 
@@ -13,7 +12,12 @@ type Props = {
   onProjectSelect?: (e?: MouseEvent<Element>, projectId?: string) => void;
 };
 
-export default ({ project, selectedProjectId, onProjectUpdate, onProjectSelect }: Props) => {
+export default ({
+  project,
+  selectedProjectId,
+  onProjectUpdate,
+  onProjectSelect,
+}: Props) => {
   const t = useT();
 
   const [isEditing, setIsEditing] = useState(false);
@@ -37,7 +41,8 @@ export default ({ project, selectedProjectId, onProjectUpdate, onProjectSelect }
 
   const handleProjectNameEdit = useCallback(() => {
     setIsEditing?.(true);
-    if (selectedProjectId !== project.id || selectedProjectId) onProjectSelect?.(undefined);
+    if (selectedProjectId !== project.id || selectedProjectId)
+      onProjectSelect?.(undefined);
   }, [onProjectSelect, project.id, selectedProjectId]);
 
   useEffect(() => {
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
index 753f2ac5a..44d1d29bc 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
@@ -1,5 +1,3 @@
-import { FC, useCallback, useState } from "react";
-
 import URLField from "@reearth/beta/components/fields/URLField";
 import {
   Button,
@@ -11,13 +9,16 @@ import {
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useState } from "react";
 
 import { Project } from "../../type";
 
 type ProjectCreatorModalProps = {
   visible: boolean;
   onClose?: () => void;
-  onProjectCreate: (data: Pick<Project, "name" | "description" | "imageUrl">) => void;
+  onProjectCreate: (
+    data: Pick<Project, "name" | "description" | "imageUrl">,
+  ) => void;
 };
 
 const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
@@ -66,7 +67,8 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
               disabled={!projectName}
             />
           </>
-        }>
+        }
+      >
         <ContentWrapper>
           <Form>
             <FormInputWrapper>
@@ -76,7 +78,7 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
               <TextInput
                 value={projectName}
                 placeholder={t("Text")}
-                onChange={value => handleOnChange("projectName", value)}
+                onChange={(value) => handleOnChange("projectName", value)}
               />
             </FormInputWrapper>
             <FormInputWrapper>
@@ -87,7 +89,7 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
                 value={description}
                 placeholder={t("Write down your content")}
                 rows={4}
-                onChange={value => handleOnChange("description", value)}
+                onChange={(value) => handleOnChange("description", value)}
               />
             </FormInputWrapper>
             <URLField
@@ -95,7 +97,7 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
               fileType="asset"
               entityType="image"
               value={imageUrl}
-              onChange={value => handleOnChange("asset", value || "")}
+              onChange={(value) => handleOnChange("asset", value || "")}
             />
           </Form>
         </ContentWrapper>
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
index 93cf27ac5..2b413cb86 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
@@ -1,8 +1,8 @@
-import { useCallback, useMemo, useState, MouseEvent, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-
 import { ManagerLayout } from "@reearth/beta/ui/components/ManagerBase";
-import { autoFillPage, onScrollToBottom } from "@reearth/beta/utils/infinite-scroll";
+import {
+  autoFillPage,
+  onScrollToBottom,
+} from "@reearth/beta/utils/infinite-scroll";
 import { useProjectFetcher } from "@reearth/services/api";
 import {
   ProjectSortField,
@@ -10,6 +10,15 @@ import {
   SortDirection,
   Visualizer,
 } from "@reearth/services/gql";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  MouseEvent,
+  useEffect,
+  useRef,
+} from "react";
+import { useNavigate } from "react-router-dom";
 
 import { Project } from "../../type";
 
@@ -17,10 +26,16 @@ const PROJECTS_VIEW_STATE_STORAGE_KEY = `reearth-visualizer-dashboard-project-vi
 
 const PROJECTS_PER_PAGE = 16;
 
-export type SortType = "date" | "date-reversed" | "name" | "name-reverse" | "date-updated";
+export type SortType =
+  | "date"
+  | "date-reversed"
+  | "name"
+  | "name-reverse"
+  | "date-updated";
 
 export default (workspaceId?: string) => {
-  const { useProjectsQuery, useUpdateProject, useCreateProject } = useProjectFetcher();
+  const { useProjectsQuery, useUpdateProject, useCreateProject } =
+    useProjectFetcher();
   const navigate = useNavigate();
 
   const [searchTerm, setSearchTerm] = useState<string>();
@@ -28,20 +43,26 @@ export default (workspaceId?: string) => {
 
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const { projects, loading, isRefetching, hasMoreProjects, endCursor, fetchMore } =
-    useProjectsQuery({
-      teamId: workspaceId || "",
-      pagination: {
-        first: pagination(sortValue).first,
-      },
-      sort: pagination(sortValue).sortBy,
-      keyword: searchTerm,
-    });
+  const {
+    projects,
+    loading,
+    isRefetching,
+    hasMoreProjects,
+    endCursor,
+    fetchMore,
+  } = useProjectsQuery({
+    teamId: workspaceId || "",
+    pagination: {
+      first: pagination(sortValue).first,
+    },
+    sort: pagination(sortValue).sortBy,
+    keyword: searchTerm,
+  });
 
   const filtedProjects = useMemo(() => {
     return (projects ?? [])
-      .filter(project => project?.coreSupport === true)
-      .map<Project | undefined>(project =>
+      .filter((project) => project?.coreSupport === true)
+      .map<Project | undefined>((project) =>
         project
           ? {
               id: project.id,
@@ -109,7 +130,10 @@ export default (workspaceId?: string) => {
 
   // favourite projects
   const favoriteProjects: Project[] = useMemo(
-    () => (filtedProjects ? filtedProjects.filter(project => !!project?.starred) : []),
+    () =>
+      filtedProjects
+        ? filtedProjects.filter((project) => !!project?.starred)
+        : [],
     [filtedProjects],
   );
 
@@ -164,7 +188,9 @@ export default (workspaceId?: string) => {
     (e?: MouseEvent, projectId?: string) => {
       e?.stopPropagation();
       if (projectId) {
-        setSelectedProject(filtedProjects.find(project => project.id === projectId));
+        setSelectedProject(
+          filtedProjects.find((project) => project.id === projectId),
+        );
       } else {
         setSelectedProject(undefined);
       }
@@ -174,7 +200,9 @@ export default (workspaceId?: string) => {
 
   // layout
   const [layout, setLayout] = useState(
-    ["grid", "list"].includes(localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) ?? "")
+    ["grid", "list"].includes(
+      localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) ?? "",
+    )
       ? (localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) as ManagerLayout)
       : "grid",
   );
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
index 44da1c086..61351a521 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -1,9 +1,11 @@
-import { FC, useMemo } from "react";
-
 import { Breadcrumb, Loading, Typography } from "@reearth/beta/lib/reearth-ui";
-import { ManagerHeader, ManagerHeaderButton } from "@reearth/beta/ui/components/ManagerBase";
+import {
+  ManagerHeader,
+  ManagerHeaderButton,
+} from "@reearth/beta/ui/components/ManagerBase";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import useHooks from "./hooks";
 import ProjectGridViewItem from "./Project/ProjectGridViewItem";
@@ -73,16 +75,22 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
       />
       <ProjectsWrapper
         ref={wrapperRef}
-        onScroll={e => {
-          !isLoading && hasMoreProjects && handleScrollToBottom(e, handleGetMoreProjects);
-        }}>
+        onScroll={(e) => {
+          if (!isLoading && hasMoreProjects)
+            handleScrollToBottom(e, handleGetMoreProjects);
+        }}
+      >
         <BreadcrumbContainer>
           {favoriteProjects.length > 0 && (
             <Breadcrumb
               items={[
                 {
                   title: (
-                    <Typography size="h5" weight="bold" color={theme.content.weak}>
+                    <Typography
+                      size="h5"
+                      weight="bold"
+                      color={theme.content.weak}
+                    >
                       Stars
                     </Typography>
                   ),
@@ -91,7 +99,11 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                   ? [
                       {
                         title: (
-                          <Typography size="h5" weight="bold" color={theme.content.weak}>
+                          <Typography
+                            size="h5"
+                            weight="bold"
+                            color={theme.content.weak}
+                          >
                             {`${t("Search Result for")} "${searchTerm}"`}
                           </Typography>
                         ),
@@ -106,7 +118,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
           <ProjectsContainer>
             {favoriteProjects.length > 0 && (
               <ProjectsGrid>
-                {favoriteProjects.map(project => (
+                {favoriteProjects.map((project) => (
                   <ProjectGridViewItem
                     key={project.id}
                     project={project}
@@ -126,7 +138,8 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                       size="h5"
                       weight="bold"
                       color={theme.content.weak}
-                      onClick={() => handleSearch(undefined)}>
+                      onClick={() => handleSearch(undefined)}
+                    >
                       All Projects
                     </Typography>
                   ),
@@ -135,7 +148,11 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                   ? [
                       {
                         title: (
-                          <Typography size="h5" weight="bold" color={theme.content.weak}>
+                          <Typography
+                            size="h5"
+                            weight="bold"
+                            color={theme.content.weak}
+                          >
                             {`${t("Search Result for")} "${searchTerm}"`}
                           </Typography>
                         ),
@@ -145,7 +162,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
               ]}
             />
             <ProjectsGrid>
-              {filtedProjects.map(project => (
+              {filtedProjects.map((project) => (
                 <ProjectGridViewItem
                   key={project.id}
                   project={project}
@@ -182,7 +199,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
             <FlexTableBody>
               <ProjectsContainer>
                 {favoriteProjects.length > 0 &&
-                  favoriteProjects.map(project => (
+                  favoriteProjects.map((project) => (
                     <FlexTableRow key={project.id}>
                       <ProjectListViewItem
                         key={project.id}
@@ -202,7 +219,8 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                           size="h5"
                           weight="bold"
                           color={theme.content.weak}
-                          onClick={() => handleSearch(undefined)}>
+                          onClick={() => handleSearch(undefined)}
+                        >
                           All Projects
                         </Typography>
                       ),
@@ -211,7 +229,11 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                       ? [
                           {
                             title: (
-                              <Typography size="h5" weight="bold" color={theme.content.weak}>
+                              <Typography
+                                size="h5"
+                                weight="bold"
+                                color={theme.content.weak}
+                              >
                                 {searchTerm}
                               </Typography>
                             ),
@@ -220,7 +242,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                       : []),
                   ]}
                 />
-                {filtedProjects.map(project => (
+                {filtedProjects.map((project) => (
                   <FlexTableRow key={project.id}>
                     <ProjectListViewItem
                       key={project.id}
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
index 65db5d2a1..9b75ddfe4 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
@@ -1,7 +1,6 @@
-import { FC } from "react";
-
 import AssetsManager from "@reearth/beta/features/AssetsManager";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { Workspace } from "../type";
 
@@ -13,11 +12,17 @@ export type ContainerProps = {
   tab?: string;
   currentWorkspace?: Workspace;
 };
-const ContentsContainer: FC<ContainerProps> = ({ tab, workspaceId, currentWorkspace }) => {
+const ContentsContainer: FC<ContainerProps> = ({
+  tab,
+  workspaceId,
+  currentWorkspace,
+}) => {
   return (
     <Wrapper>
       {tab === "projects" && <Projects workspaceId={workspaceId} />}
-      {tab === "asset" && <AssetsManager workspaceId={workspaceId} size="large" />}
+      {tab === "asset" && (
+        <AssetsManager workspaceId={workspaceId} size="large" />
+      )}
       {tab === "members" && <Members currentWorkspace={currentWorkspace} />}
     </Wrapper>
   );
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
index 9909cbf67..a0b4fcaa4 100644
--- a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
+++ b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
@@ -1,5 +1,3 @@
-import { FC } from "react";
-
 import {
   SidebarMenuItem,
   SidebarSection,
@@ -7,6 +5,7 @@ import {
   SidebarWrapper,
 } from "@reearth/beta/ui/components/Sidebar";
 import { useT } from "@reearth/services/i18n";
+import { FC } from "react";
 
 import { TabItems, Workspace } from "../type";
 
@@ -46,7 +45,7 @@ const LeftSidePanel: FC<Props> = ({
           onWorkspaceChange={onWorkspaceChange}
         />
         <>
-          {topTabs?.map(tab => (
+          {topTabs?.map((tab) => (
             <SidebarMenuItem
               key={tab.id}
               path={tab.path}
@@ -60,7 +59,7 @@ const LeftSidePanel: FC<Props> = ({
       </SidebarSection>
       <SidebarSection>
         <>
-          {bottomTabs?.map(tab => (
+          {bottomTabs?.map((tab) => (
             <SidebarMenuItem
               key={tab.id}
               path={tab.path}
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
index 6cd726a11..152661816 100644
--- a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
+++ b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
@@ -1,9 +1,13 @@
-import { FC } from "react";
-
-import { Icon, PopupMenu, PopupMenuItem, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  Icon,
+  PopupMenu,
+  PopupMenuItem,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import { ProjectType } from "@reearth/types";
+import { FC } from "react";
 
 import { Workspace } from "../type";
 
@@ -39,7 +43,7 @@ export const Profile: FC<ProfileProp> = ({
       id: "workspace",
       title: t("Switch WorkSpace"),
       icon: "arrowLeftRight",
-      subItem: workspaces?.map(w => {
+      subItem: workspaces?.map((w) => {
         return {
           customSubMenuLabel: w.personal ? t("Personal") : t("Team Workspace"),
           customSubMenuOrder: w.personal ? 0 : 1,
@@ -64,7 +68,9 @@ export const Profile: FC<ProfileProp> = ({
     <ProfileWrapper>
       {isPersonal && (
         <Avatar>
-          <Typography size="body">{currentUser?.charAt(0).toUpperCase()}</Typography>
+          <Typography size="body">
+            {currentUser?.charAt(0).toUpperCase()}
+          </Typography>
         </Avatar>
       )}
       <Typography size="body" weight="bold">
@@ -72,7 +78,9 @@ export const Profile: FC<ProfileProp> = ({
       </Typography>
       <div>
         <PopupMenu
-          label={<Icon color={theme.content.weak} icon="caretDown" size="small" />}
+          label={
+            <Icon color={theme.content.weak} icon="caretDown" size="small" />
+          }
           menu={popupMenu}
         />
       </div>
diff --git a/web/src/beta/features/Dashboard/hooks.ts b/web/src/beta/features/Dashboard/hooks.ts
index 788a1b41d..68a9e7ddf 100644
--- a/web/src/beta/features/Dashboard/hooks.ts
+++ b/web/src/beta/features/Dashboard/hooks.ts
@@ -1,9 +1,8 @@
-import { useCallback, useEffect, useMemo } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-
 import { useMeFetcher } from "@reearth/services/api";
 import { useAuth } from "@reearth/services/auth";
 import { useWorkspace } from "@reearth/services/state";
+import { useCallback, useEffect, useMemo } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { TabItems, Workspace } from "./type";
 
@@ -21,7 +20,9 @@ export default ({ workspaceId, topTabItems, bottomTabsItems }: Props) => {
   const [currentWorkspace, setCurrentWorkspace] = useWorkspace();
 
   const workspaces = (data?.teams as Workspace[]) ?? [];
-  const workspace = workspaces.find(workspace => workspace.id === workspaceId);
+  const workspace = workspaces.find(
+    (workspace) => workspace.id === workspaceId,
+  );
   const isPersonal = !!workspaceId && workspaceId === data?.myTeam?.id;
 
   const { tab } = useParams<{
@@ -32,10 +33,12 @@ export default ({ workspaceId, topTabItems, bottomTabsItems }: Props) => {
   const topTabs = useMemo(
     () =>
       topTabItems
-        .filter(tab => !(isPersonal && tab.id === "members"))
-        .map(tab => ({
+        .filter((tab) => !(isPersonal && tab.id === "members"))
+        .map((tab) => ({
           ...tab,
-          path: tab.path || `/dashboard/${workspaceId}/${tab.id === "project" ? "" : tab.id}`,
+          path:
+            tab.path ||
+            `/dashboard/${workspaceId}/${tab.id === "project" ? "" : tab.id}`,
         })),
     [topTabItems, isPersonal, workspaceId],
   );
diff --git a/web/src/beta/features/Dashboard/index.tsx b/web/src/beta/features/Dashboard/index.tsx
index 95d352b3b..74b226282 100644
--- a/web/src/beta/features/Dashboard/index.tsx
+++ b/web/src/beta/features/Dashboard/index.tsx
@@ -1,9 +1,8 @@
-import { FC } from "react";
-
 import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/beta/ui/components/Sidebar";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
 
 import ContentsContainer from "./ContentsContainer";
 import useHooks from "./hooks";
@@ -22,7 +21,12 @@ export const topTabItems: Omit<TabItems[], "active"> = [
 ];
 
 export const bottomTabsItems: Omit<TabItems[], "active"> = [
-  { id: "plugin", text: "Plugin Playground", icon: "puzzlePiece", disabled: true },
+  {
+    id: "plugin",
+    text: "Plugin Playground",
+    icon: "puzzlePiece",
+    disabled: true,
+  },
   { id: "documentary", text: "Documentary", icon: "book", disabled: true },
   { id: "community", text: "Community", icon: "usersFour", disabled: true },
   { id: "help", text: "Help & Support", icon: "question", disabled: true },
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
index 81d6bff25..554a65ee8 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
@@ -1,5 +1,3 @@
-import { FC, useCallback, useMemo, useState } from "react";
-
 import {
   InputGroup,
   SubmitWrapper,
@@ -7,10 +5,16 @@ import {
   InputsWrapper,
   ContentWrapper,
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
-import { Button, Icon, RadioGroup, TextInput } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  Icon,
+  RadioGroup,
+  TextInput,
+} from "@reearth/beta/lib/reearth-ui";
 import { AssetField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useMemo, useState } from "react";
 
 import { DataProps, SourceType, DataSourceOptType } from "..";
 import { generateTitle } from "../util";
@@ -42,7 +46,10 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
       visible: true,
       config: {
         data: {
-          url: (sourceType === "url" || sourceType === "local") && value !== "" ? value : undefined,
+          url:
+            (sourceType === "url" || sourceType === "local") && value !== ""
+              ? value
+              : undefined,
           type: "csv",
           csv: {
             latColumn: lat,
@@ -89,7 +96,11 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         {sourceType == "url" && (
           <InputGroup label={t("Resource URL")}>
             <InputsWrapper>
-              <TextInput placeholder="https://" value={value} onChange={handleValueChange} />
+              <TextInput
+                placeholder="https://"
+                value={value}
+                onChange={handleValueChange}
+              />
             </InputsWrapper>
           </InputGroup>
         )}
@@ -107,7 +118,7 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
               <TextInput
                 value={lat}
                 placeholder={t("Column Name")}
-                onChange={value => setLat(value)}
+                onChange={(value) => setLat(value)}
               />
             </InputsWrapper>
           </InputGroup>
@@ -116,7 +127,7 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
               <TextInput
                 value={lng}
                 placeholder={t("Column Name")}
-                onChange={value => setLng(value)}
+                onChange={(value) => setLng(value)}
               />
             </InputsWrapper>
           </InputGroup>
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
index d0b83f307..0f26febd2 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
@@ -1,8 +1,7 @@
-import { useState, useMemo, useCallback } from "react";
-
 import { GisType } from "@reearth/beta/features/AssetsManager/constants";
 import { DataType } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
+import { useState, useMemo, useCallback } from "react";
 
 import { DataProps, DataSourceOptType, SourceType } from "..";
 import { generateTitle } from "../util";
@@ -55,11 +54,12 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
       if (fileFormat === "geojson") {
         try {
           parsedValue = JSON.parse(value);
-        } catch (error) {
+        } catch (_error) {
           parsedValue = value;
         }
       } else {
-        parsedValue = "data:text/plain;charset=UTF-8," + encodeURIComponent(value);
+        parsedValue =
+          "data:text/plain;charset=UTF-8," + encodeURIComponent(value);
       }
     }
 
@@ -74,8 +74,8 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
             (sourceType === "url" || sourceType === "local") && value !== ""
               ? value
               : fileFormat === "czml" || fileFormat === "kml"
-              ? parsedValue
-              : undefined,
+                ? parsedValue
+                : undefined,
           type: fileFormat.toLowerCase() as DataType,
           value: parsedValue,
           geojson: {
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
index 32d008c39..836ef456c 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
@@ -1,5 +1,3 @@
-import { FC } from "react";
-
 import {
   InputGroup,
   SubmitWrapper,
@@ -17,6 +15,7 @@ import {
 } from "@reearth/beta/lib/reearth-ui";
 import { AssetField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
+import { FC } from "react";
 
 import { DataProps } from "..";
 
@@ -46,7 +45,8 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
       <ContentWrapper>
         <InputGroup
           label={t("File Format")}
-          description={t("File format of the data source you want to add.")}>
+          description={t("File format of the data source you want to add.")}
+        >
           <Selector
             value={fileFormat}
             options={fileFormatOptions}
@@ -75,7 +75,11 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         {sourceType == "url" && (
           <InputGroup label={t("Resource URL")}>
             <InputsWrapper>
-              <TextInput placeholder={t("Input Text")} value={value} onChange={handleValueChange} />
+              <TextInput
+                placeholder={t("Input Text")}
+                value={value}
+                onChange={handleValueChange}
+              />
             </InputsWrapper>
           </InputGroup>
         )}
@@ -93,7 +97,10 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         )}
         {fileFormat === "geojson" && (
           <InputGroup label={t("Prioritize Performance")}>
-            <Switcher value={prioritizePerformance} onChange={v => setPrioritizePerformance(v)} />
+            <Switcher
+              value={prioritizePerformance}
+              onChange={(v) => setPrioritizePerformance(v)}
+            />
           </InputGroup>
         )}
       </ContentWrapper>
@@ -103,7 +110,9 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           appearance="primary"
           onClick={handleSubmit}
           disabled={
-            ((sourceType === "url" || sourceType === "value" || sourceType === "local") &&
+            ((sourceType === "url" ||
+              sourceType === "value" ||
+              sourceType === "local") &&
               !value) ||
             !isValidExtension()
           }
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
index 6eab9a240..15db8da72 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
@@ -1,5 +1,3 @@
-import { FC, useState } from "react";
-
 import {
   InputGroup,
   SubmitWrapper,
@@ -9,6 +7,7 @@ import {
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import { Button, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
+import { FC, useState } from "react";
 
 import { DataProps } from "..";
 import { generateTitle } from "../util";
@@ -38,7 +37,11 @@ const ThreeDTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
       <ContentWrapper>
         <InputGroup label={t("Resource URL")}>
           <InputsWrapper>
-            <TextInput placeholder="https://" value={value} onChange={value => setValue(value)} />
+            <TextInput
+              placeholder="https://"
+              value={value}
+              onChange={(value) => setValue(value)}
+            />
           </InputsWrapper>
         </InputGroup>
       </ContentWrapper>
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx
index b7151b769..f0ba2c090 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx
@@ -1,5 +1,3 @@
-import { FC, useCallback, useState } from "react";
-
 import {
   ContentWrapper,
   InputGroup,
@@ -13,6 +11,7 @@ import {
 import { Button, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useState } from "react";
 
 import { DataProps } from "..";
 import { generateTitle } from "../util";
@@ -29,7 +28,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const handleLayerNameAdd = () => {
     if (layerName.trim() !== "") {
       const exist = layerNameList.some((layer: string) => layer === layerName);
-      if (!exist) setLayerNameList(prev => [...prev, layerName]);
+      if (!exist) setLayerNameList((prev) => [...prev, layerName]);
       setLayerName("");
     }
   };
@@ -79,7 +78,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
             <TextInput
               placeholder="https://"
               value={mvtUrlValue}
-              onChange={value => handleValueChange(value)}
+              onChange={(value) => handleValueChange(value)}
             />
           </InputsWrapper>
         </InputGroup>
@@ -106,7 +105,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
                     value={layerName}
                     extendWidth
                     onBlur={handleBlur}
-                    onChange={value => setLayerName(value)}
+                    onChange={(value) => setLayerName(value)}
                   />
                   <Button
                     icon="close"
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx
index 61b3ac9c8..50f90ea3b 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx
@@ -1,5 +1,3 @@
-import { FC, useCallback, useState } from "react";
-
 import {
   ContentWrapper,
   InputGroup,
@@ -13,6 +11,7 @@ import {
 import { Button, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useState } from "react";
 
 import { DataProps } from "..";
 import { generateTitle } from "../util";
@@ -28,8 +27,10 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
 
   const handleLayerNameAdd = () => {
     if (layerNameValue.trim() !== "") {
-      const exist = layersNameList.some((layer: string) => layer === layerNameValue);
-      if (!exist) setLayersNameList(prev => [...prev, layerNameValue]);
+      const exist = layersNameList.some(
+        (layer: string) => layer === layerNameValue,
+      );
+      if (!exist) setLayersNameList((prev) => [...prev, layerNameValue]);
       setLayerNameValue("");
     }
   };
@@ -64,7 +65,8 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         data: {
           url: wmsUrlValue !== "" ? wmsUrlValue : undefined,
           type: "wms",
-          layers: LayerNameList.length === 1 ? layersNameList[0] : layersNameList,
+          layers:
+            LayerNameList.length === 1 ? layersNameList[0] : layersNameList,
         },
       },
     });
@@ -79,7 +81,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
             <TextInput
               placeholder="https://"
               value={wmsUrlValue}
-              onChange={value => handleValueChange(value)}
+              onChange={(value) => handleValueChange(value)}
             />
           </InputsWrapper>
         </InputGroup>
@@ -106,7 +108,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
                     value={layerNameValue}
                     extendWidth
                     onBlur={handleBlur}
-                    onChange={value => setLayerNameValue(value)}
+                    onChange={(value) => setLayerNameValue(value)}
                   />
                   <Button
                     icon="close"
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx
index 561405504..9ef2b6419 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx
@@ -2,7 +2,9 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import DataSourceLayerCreator from ".";
 
-const meta: Meta<typeof DataSourceLayerCreator> = { component: DataSourceLayerCreator };
+const meta: Meta<typeof DataSourceLayerCreator> = {
+  component: DataSourceLayerCreator,
+};
 export default meta;
 type Story = StoryObj<typeof DataSourceLayerCreator>;
 export const Default: Story = { args: {} };
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
index e511ee049..64c44f88f 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
@@ -1,8 +1,7 @@
-import { FC } from "react";
-
 import { Modal, ModalPanel, TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { LayerAddProps } from "../../hooks/useLayers";
 
@@ -25,14 +24,20 @@ export type DataSourceOptType = {
   value: SourceType;
 }[];
 
-const DataSourceLayerCreator: FC<DataProps> = ({ sceneId, onClose, onSubmit }) => {
+const DataSourceLayerCreator: FC<DataProps> = ({
+  sceneId,
+  onClose,
+  onSubmit,
+}) => {
   const t = useT();
 
   const tabsItem: TabItem[] = [
     {
       id: "asset",
       name: t("Common"),
-      children: <CommonAsset sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+      children: (
+        <CommonAsset sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
+      ),
     },
     {
       id: "csv",
@@ -42,17 +47,23 @@ const DataSourceLayerCreator: FC<DataProps> = ({ sceneId, onClose, onSubmit }) =
     {
       id: "wms",
       name: t("WMS"),
-      children: <WmsTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+      children: (
+        <WmsTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
+      ),
     },
     {
       id: "vectorTiles",
       name: t("Vector Tile"),
-      children: <VectorTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+      children: (
+        <VectorTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
+      ),
     },
     {
       id: "threeDTiles",
       name: t("3D Tiles"),
-      children: <ThreeDTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+      children: (
+        <ThreeDTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
+      ),
     },
   ];
 
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx
index 886e856fa..f9ffefe07 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx
@@ -1,15 +1,24 @@
-import { useCallback } from "react";
-
-import { FILE_TYPES, IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
-import { AssetField, InputField, NumberField, SwitchField } from "@reearth/beta/ui/fields";
+import {
+  FILE_TYPES,
+  IMAGE_TYPES,
+} from "@reearth/beta/features/AssetsManager/constants";
+import {
+  AssetField,
+  InputField,
+  NumberField,
+  SwitchField,
+} from "@reearth/beta/ui/fields";
 import TextAreaField from "@reearth/beta/ui/fields/TextareaField";
 import { useT } from "@reearth/services/i18n";
+import { useCallback } from "react";
 
 import { FieldProp, ValueProp } from ".";
 
 type Props = {
   field: FieldProp;
-  setFields?: (v: FieldProp[] | ((prevFields: FieldProp[]) => FieldProp[])) => void;
+  setFields?: (
+    v: FieldProp[] | ((prevFields: FieldProp[]) => FieldProp[]),
+  ) => void;
 };
 
 export const FieldComponent = ({ field, setFields }: Props) => {
@@ -17,9 +26,9 @@ export const FieldComponent = ({ field, setFields }: Props) => {
 
   const handleChange = useCallback(
     (value: ValueProp) => {
-      setFields?.(prevFields => {
+      setFields?.((prevFields) => {
         if (!prevFields) return [];
-        return prevFields.map(prevField => {
+        return prevFields.map((prevField) => {
           if (prevField.id === field.id) {
             return { ...prevField, value };
           }
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
index 30ecaac60..a03ebef50 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
@@ -1,7 +1,6 @@
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import "react18-json-view/src/style.css";
 import "react18-json-view/src/dark.css";
-import JsonView from "react18-json-view";
 
 import {
   GeoJsonFeatureDeleteProps,
@@ -12,6 +11,7 @@ import { Geometry } from "@reearth/core";
 import { NLSLayer, SketchFeature } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import JsonView from "react18-json-view";
 
 import { FieldComponent } from "./CustomPropertField";
 
@@ -49,15 +49,17 @@ const FeatureData: FC<Props> = ({
   // Initialize collapsed state from localStorage
   const initialCollapsedStates = useMemo(() => {
     const storedStates: Record<string, boolean> = {};
-    ["customProperties", "geometry", "properties"].forEach(id => {
+    ["customProperties", "geometry", "properties"].forEach((id) => {
       storedStates[id] =
-        localStorage.getItem(`reearth-visualizer-feature-${id}-collapsed`) === "true";
+        localStorage.getItem(`reearth-visualizer-feature-${id}-collapsed`) ===
+        "true";
     });
     return storedStates;
   }, []);
 
-  const [collapsedStates, setCollapsedStates] =
-    useState<Record<string, boolean>>(initialCollapsedStates);
+  const [collapsedStates, setCollapsedStates] = useState<
+    Record<string, boolean>
+  >(initialCollapsedStates);
 
   const saveCollapseState = useCallback((storageId: string, state: boolean) => {
     localStorage.setItem(
@@ -69,7 +71,7 @@ const FeatureData: FC<Props> = ({
   const handleCollapse = useCallback(
     (storageId: string, state: boolean) => {
       saveCollapseState(storageId, state);
-      setCollapsedStates(prevState => ({
+      setCollapsedStates((prevState) => ({
         ...prevState,
         [storageId]: state,
       }));
@@ -104,14 +106,23 @@ const FeatureData: FC<Props> = ({
   const handleSubmit = useCallback(() => {
     if (!selectedFeature || !sketchFeature?.id || !layer?.id) return;
     const newProperties = { ...selectedFeature.properties };
-    Object.assign(newProperties, ...fields.map(f => ({ [f.title]: f.value })));
+    Object.assign(
+      newProperties,
+      ...fields.map((f) => ({ [f.title]: f.value })),
+    );
     onGeoJsonFeatureUpdate?.({
       layerId: layer.id,
       featureId: sketchFeature.id,
       geometry: selectedFeature.geometry,
       properties: newProperties,
     });
-  }, [layer?.id, fields, onGeoJsonFeatureUpdate, selectedFeature, sketchFeature?.id]);
+  }, [
+    layer?.id,
+    fields,
+    onGeoJsonFeatureUpdate,
+    selectedFeature,
+    sketchFeature?.id,
+  ]);
 
   const jsonStyle = useMemo(
     () => ({
@@ -140,9 +151,10 @@ const FeatureData: FC<Props> = ({
           background={theme.relative.dim}
           headerBg={theme.relative.dim}
           collapsed={collapsedStates.customProperties}
-          onCollapse={state => handleCollapse("customProperties", state)}>
+          onCollapse={(state) => handleCollapse("customProperties", state)}
+        >
           <FieldsWrapper>
-            {fields.map(f => (
+            {fields.map((f) => (
               <FieldComponent field={f} key={f.id} setFields={setFields} />
             ))}
             {fields.length > 0 && (
@@ -168,9 +180,15 @@ const FeatureData: FC<Props> = ({
         background={theme.relative.dim}
         headerBg={theme.relative.dim}
         collapsed={collapsedStates.geometry}
-        onCollapse={state => handleCollapse("geometry", state)}>
+        onCollapse={(state) => handleCollapse("geometry", state)}
+      >
         <ValueWrapper>
-          <JsonView src={selectedFeature?.geometry} theme="vscode" dark style={jsonStyle} />
+          <JsonView
+            src={selectedFeature?.geometry}
+            theme="vscode"
+            dark
+            style={jsonStyle}
+          />
         </ValueWrapper>
       </Collapse>
       <Collapse
@@ -179,9 +197,15 @@ const FeatureData: FC<Props> = ({
         background={theme.relative.dim}
         headerBg={theme.relative.dim}
         collapsed={collapsedStates.properties}
-        onCollapse={state => handleCollapse("properties", state)}>
+        onCollapse={(state) => handleCollapse("properties", state)}
+      >
         <ValueWrapper>
-          <JsonView src={selectedFeature?.properties} theme="vscode" dark style={jsonStyle} />
+          <JsonView
+            src={selectedFeature?.properties}
+            theme="vscode"
+            dark
+            style={jsonStyle}
+          />
         </ValueWrapper>
       </Collapse>
       {!!layer?.isSketch && sketchFeature?.id && (
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx
index c84d0b3ad..e3cc5afae 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx
@@ -1,10 +1,9 @@
-import { FC } from "react";
-
 import { SwitchField } from "@reearth/beta/ui/fields";
 import PropertyItem from "@reearth/beta/ui/fields/Properties";
 import { NLSInfobox } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import useHooks from "./hooks";
 
@@ -24,8 +23,12 @@ const Infobox: FC<Props> = ({ selectedLayerId, infobox }) => {
   return (
     <Wrapper>
       {visibleItems ? (
-        visibleItems.map(i => (
-          <PropertyItem key={i.id ?? ""} propertyId={infobox?.property?.id} item={i} />
+        visibleItems.map((i) => (
+          <PropertyItem
+            key={i.id ?? ""}
+            propertyId={infobox?.property?.id}
+            item={i}
+          />
         ))
       ) : (
         <SwitchField
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx
index 3e9a02e9b..668ce7147 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx
@@ -1,9 +1,8 @@
-import { FC, useCallback, useMemo } from "react";
-
 import { SelectField } from "@reearth/beta/ui/fields";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { useT } from "@reearth/services/i18n";
+import { FC, useCallback, useMemo } from "react";
 
 import { LayerConfigUpdateProps } from "../../../../hooks/useLayers";
 
@@ -25,7 +24,7 @@ const LayerStyleTab: FC<LayerStyleSelectorProps> = ({
   const layerStyleOptions = useMemo(
     () => [
       { value: "", label: "NO STYLE" },
-      ...(layerStyles?.map(ls => ({ value: ls.id, label: ls.name })) ?? []),
+      ...(layerStyles?.map((ls) => ({ value: ls.id, label: ls.name })) ?? []),
     ],
     [layerStyles],
   );
@@ -44,7 +43,7 @@ const LayerStyleTab: FC<LayerStyleSelectorProps> = ({
   );
 
   const currentValue = useMemo(
-    () => layers?.find(a => a.id === selectedLayerId)?.config?.layerStyleId,
+    () => layers?.find((a) => a.id === selectedLayerId)?.config?.layerStyleId,
     [layers, selectedLayerId],
   );
 
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
index 1802ed70a..f2273bf4c 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
@@ -1,5 +1,3 @@
-import { FC, useCallback, useMemo, useState } from "react";
-
 import { SelectedLayer } from "@reearth/beta/features/Editor/hooks/useLayers";
 import {
   GeoJsonFeatureDeleteProps,
@@ -8,6 +6,7 @@ import {
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle as LayerStyleType } from "@reearth/services/api/layerStyleApi/utils";
+import { FC, useCallback, useMemo, useState } from "react";
 
 import { LayerConfigUpdateProps } from "../../../hooks/useLayers";
 
@@ -16,7 +15,8 @@ import FeatureInspector from "./FeatureInspector";
 import InfoboxSettings from "./InfoboxSettings";
 import LayerStyle from "./LayerStyle";
 
-const LAYER_INSPECTOR_TAB_STORAGE_KEY = "reearth-visualizer-map-layer-inspector-tab";
+const LAYER_INSPECTOR_TAB_STORAGE_KEY =
+  "reearth-visualizer-map-layer-inspector-tab";
 
 type Props = {
   layerStyles?: LayerStyleType[];
@@ -43,9 +43,9 @@ const InspectorTabs: FC<Props> = ({
       selectedLayer.layer?.config?.data?.type === "3dtiles" ||
       selectedLayer.layer?.config?.data?.type === "mvt"
         ? selectedLayer.computedFeature
-        : selectedLayer.computedLayer?.features?.find(
-            f => f.id === selectedLayer.computedFeature?.id,
-          ) ?? {};
+        : (selectedLayer.computedLayer?.features?.find(
+            (f) => f.id === selectedLayer.computedFeature?.id,
+          ) ?? {});
 
     if (!id) return;
     return {
@@ -65,7 +65,9 @@ const InspectorTabs: FC<Props> = ({
 
     const selectedFeatureId = selectedFeature.properties.id;
 
-    return features?.find(feature => feature.properties.id === selectedFeatureId);
+    return features?.find(
+      (feature) => feature.properties.id === selectedFeatureId,
+    );
   }, [selectedLayer, selectedFeature]);
 
   const tabItems: TabItem[] = useMemo(
@@ -73,7 +75,9 @@ const InspectorTabs: FC<Props> = ({
       {
         id: "dataSource",
         icon: "data",
-        children: selectedLayer?.layer && <DataSource selectedLayer={selectedLayer.layer} />,
+        children: selectedLayer?.layer && (
+          <DataSource selectedLayer={selectedLayer.layer} />
+        ),
       },
       {
         id: "featureInspector",
@@ -135,7 +139,12 @@ const InspectorTabs: FC<Props> = ({
   }, []);
 
   return (
-    <Tabs tabs={tabItems} currentTab={currentTab} position="left" onChange={handleTabChange} />
+    <Tabs
+      tabs={tabItems}
+      currentTab={currentTab}
+      position="left"
+      onChange={handleTabChange}
+    />
   );
 };
 
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts
index d07abae09..d135f04cf 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts
@@ -1,7 +1,6 @@
-import { useState, useEffect, useMemo, useCallback } from "react";
-
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { Page } from "@reearth/services/api/storytellingApi/utils";
+import { useState, useEffect, useMemo, useCallback } from "react";
 
 type SettingProps = {
   onPageUpdate?: (id: string, layers: string[]) => void;
@@ -18,7 +17,7 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
   }, [selectedPage]);
 
   const allLayersSelected = useMemo(() => {
-    const allLayerIds = layers?.map(layer => layer.id) || [];
+    const allLayerIds = layers?.map((layer) => layer.id) || [];
     return selectedLayerIds.length >= allLayerIds.length;
   }, [layers, selectedLayerIds.length]);
 
@@ -33,9 +32,9 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
   const handleLayerCheck = useCallback(
     (layerId: string) => {
       if (!pageId) return;
-      setCheckedLayer(prev => {
+      setCheckedLayer((prev) => {
         const updatedLayers = prev.includes(layerId)
-          ? prev.filter(id => id !== layerId)
+          ? prev.filter((id) => id !== layerId)
           : [...prev, layerId];
 
         onPageUpdate?.(pageId, updatedLayers);
@@ -47,7 +46,9 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
 
   const handleAllLayersCheck = useCallback(() => {
     if (!pageId) return;
-    const updatedCheckedLayers = allCheckedLayers ? [] : layers?.map(layer => layer.id) || [];
+    const updatedCheckedLayers = allCheckedLayers
+      ? []
+      : layers?.map((layer) => layer.id) || [];
     setCheckedLayer(updatedCheckedLayers);
     setAllCheckedLayers(!allCheckedLayers);
     onPageUpdate?.(pageId, updatedCheckedLayers);
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
index 213aa229f..17eccd847 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
@@ -1,5 +1,3 @@
-import { FC, useMemo } from "react";
-
 import { Collapse } from "@reearth/beta/lib/reearth-ui";
 import PropertyItem from "@reearth/beta/ui/fields/Properties";
 import { filterVisibleItems } from "@reearth/beta/ui/fields/utils";
@@ -7,6 +5,7 @@ import type { FlyTo } from "@reearth/core";
 import type { Item } from "@reearth/services/api/propertyApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 type Props = {
   propertyId: string;
@@ -16,13 +15,25 @@ type Props = {
 
 const Settings: FC<Props> = ({ propertyId, propertyItems, onFlyTo }) => {
   const t = useT();
-  const visibleItems = useMemo(() => filterVisibleItems(propertyItems), [propertyItems]);
+  const visibleItems = useMemo(
+    () => filterVisibleItems(propertyItems),
+    [propertyItems],
+  );
 
   return (
     <Wrapper>
-      {visibleItems?.map(i => (
-        <Collapse key={i.schemaGroup} title={i.title ?? t("Settings")} size="small">
-          <PropertyItem key={i.id} propertyId={propertyId} item={i} onFlyTo={onFlyTo} />
+      {visibleItems?.map((i) => (
+        <Collapse
+          key={i.schemaGroup}
+          title={i.title ?? t("Settings")}
+          size="small"
+        >
+          <PropertyItem
+            key={i.id}
+            propertyId={propertyId}
+            item={i}
+            onFlyTo={onFlyTo}
+          />
         </Collapse>
       ))}
     </Wrapper>
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
index bb4308907..cd9c1cfde 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
@@ -1,7 +1,6 @@
-import { FC, useMemo } from "react";
-
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
+import { FC, useMemo } from "react";
 
 import { useMapPage } from "../context";
 
@@ -27,7 +26,10 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
 
   const t = useT();
 
-  const scenePropertyId = useMemo(() => scene?.property?.id, [scene?.property?.id]);
+  const scenePropertyId = useMemo(
+    () => scene?.property?.id,
+    [scene?.property?.id],
+  );
 
   return (
     <Panel
@@ -37,7 +39,8 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
       alwaysOpen
       noPadding={!!selectedLayer}
       areaRef={areaRef}
-      showCollapseArea={showCollapseArea}>
+      showCollapseArea={showCollapseArea}
+    >
       {!!selectedSceneSetting && scenePropertyId && (
         <SceneSettings
           propertyId={scenePropertyId}
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx
index 6e09271e9..49614ebbe 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx
@@ -1,5 +1,3 @@
-import { ReactNode, useCallback, useEffect, useState } from "react";
-
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
@@ -7,6 +5,7 @@ import Text from "@reearth/beta/components/Text";
 import type { LayerStyleNameUpdateProps } from "@reearth/beta/features/Editor/hooks/useLayerStyles";
 import useDoubleClick from "@reearth/beta/utils/use-double-click";
 import { styled } from "@reearth/services/theme";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 
 type Props = {
   id?: string;
@@ -92,7 +91,8 @@ const LayerStyleCard: React.FC<Props> = ({
       selected={selected}
       onClick={handleSingleClick}
       onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}>
+      onMouseLeave={handleMouseLeave}
+    >
       <MainWrapper>
         <Icon icon="layerStyle" />
         {actionContent && (
@@ -108,7 +108,10 @@ const LayerStyleCard: React.FC<Props> = ({
           </Popover.Provider>
         )}
       </MainWrapper>
-      <BottomWrapper isHovered={isHovered || isOpenAction} isSelected={selected}>
+      <BottomWrapper
+        isHovered={isHovered || isOpenAction}
+        isSelected={selected}
+      >
         {isEditing ? (
           <StyledTextInput
             value={newName}
@@ -139,7 +142,8 @@ const Wrapper = styled.div<{ selected?: boolean }>`
   cursor: pointer;
   transition: all 0.3s;
 
-  border-color: ${({ selected, theme }) => (selected ? `${theme.select.main}` : "transparent")};
+  border-color: ${({ selected, theme }) =>
+    selected ? `${theme.select.main}` : "transparent"};
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx
index 2760ce947..2793a7a6b 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx
@@ -1,9 +1,8 @@
-import { FC, useCallback, useState, useEffect } from "react";
-
 import { Button, CodeInput } from "@reearth/beta/lib/reearth-ui";
 import { useLayerStylesFetcher } from "@reearth/services/api";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useState, useEffect } from "react";
 
 import { LayerStyleValueUpdateProps } from "../../hooks/useLayerStyles";
 
@@ -25,7 +24,9 @@ const LayerStyleEditor: FC<LayerStyleEditorProps> = ({
   const { layerStyles = [] } = useGetLayerStylesQuery({ sceneId });
 
   useEffect(() => {
-    const selectedLayerStyle = layerStyles.find(a => a.id === selectedLayerStyleId);
+    const selectedLayerStyle = layerStyles.find(
+      (a) => a.id === selectedLayerStyleId,
+    );
     if (selectedLayerStyle?.value) {
       setStyleCode(JSON.stringify(selectedLayerStyle.value, null, 2));
     }
@@ -33,7 +34,7 @@ const LayerStyleEditor: FC<LayerStyleEditorProps> = ({
 
   const handleSubmit = useCallback(() => {
     if (onLayerStyleValueUpdate && styleCode && JSON.parse(styleCode)) {
-      selectedLayerStyleId &&
+      if (selectedLayerStyleId)
         onLayerStyleValueUpdate({
           styleId: selectedLayerStyleId,
           value: JSON.parse(styleCode),
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
index 2fdfedfae..878fb76c1 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
@@ -1,8 +1,7 @@
-import { FC, MouseEvent, useCallback, useState } from "react";
-
 import { TextInput } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
 import { styled } from "@reearth/services/theme";
+import { FC, MouseEvent, useCallback, useState } from "react";
 
 import { LayerStyleNameUpdateProps } from "../../hooks/useLayerStyles";
 
@@ -55,7 +54,9 @@ const LayerStyleItem: FC<LayerStyleItemProps> = ({
             onBlur={handleNameUpdate}
           />
         ) : (
-          <TitleWrapper onDoubleClick={() => setIsEditing(true)}>{localName}</TitleWrapper>
+          <TitleWrapper onDoubleClick={() => setIsEditing(true)}>
+            {localName}
+          </TitleWrapper>
         )
       }
       highlighted={selected}
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
index 546b48ab0..895cd4fb0 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
@@ -1,9 +1,8 @@
-import { FC, useCallback } from "react";
-
 import { IconButton } from "@reearth/beta/lib/reearth-ui";
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback } from "react";
 
 import { useMapPage } from "../context";
 
@@ -29,7 +28,10 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
   const t = useT();
 
   const handleLayerStyleAddition = useCallback(() => {
-    handleLayerStyleAdd({ name: `${t("Style_")}${layerStyles?.length ?? 0 + 1}`, value: {} });
+    handleLayerStyleAdd({
+      name: `${t("Style_")}${layerStyles?.length ?? 0 + 1}`,
+      value: {},
+    });
   }, [layerStyles?.length, t, handleLayerStyleAdd]);
 
   const handleSelectLayerStyle = useCallback(
@@ -56,7 +58,8 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       alwaysOpen
       storageId="editor-map-scene-panel"
       showCollapseArea={showCollapseArea}
-      areaRef={areaRef}>
+      areaRef={areaRef}
+    >
       <LayerStyleManager onClick={() => handleSelectLayerStyle(undefined)}>
         <ActionsWrapper>
           <IconButton
@@ -75,7 +78,7 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
         </ActionsWrapper>
         <StylesWrapper>
           <StylesGrid>
-            {layerStyles?.map(layerStyle => (
+            {layerStyles?.map((layerStyle) => (
               <LayerStyleItem
                 id={layerStyle.id}
                 key={layerStyle.id}
diff --git a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
index 61df57363..46ec15735 100644
--- a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
+++ b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
@@ -1,3 +1,11 @@
+import {
+  IconButton,
+  PopupMenuItem,
+  TextInput,
+} from "@reearth/beta/lib/reearth-ui";
+import { EntryItem, EntryItemAction } from "@reearth/beta/ui/components";
+import { NLSLayer } from "@reearth/services/api/layersApi/utils";
+import { styled } from "@reearth/services/theme";
 import {
   Dispatch,
   FC,
@@ -9,11 +17,6 @@ import {
   useState,
 } from "react";
 
-import { IconButton, PopupMenuItem, TextInput } from "@reearth/beta/lib/reearth-ui";
-import { EntryItem, EntryItemAction } from "@reearth/beta/ui/components";
-import { NLSLayer } from "@reearth/services/api/layersApi/utils";
-import { styled } from "@reearth/services/theme";
-
 import { useMapPage } from "../context";
 
 interface LayerItemProps {
@@ -119,7 +122,13 @@ const LayerItem: FC<LayerItemProps> = ({
             },
           ]
         : undefined,
-    [layer.id, layer.visible, editingLayerNameId, handleZoomToLayer, handleToggleLayerVisibility],
+    [
+      layer.id,
+      layer.visible,
+      editingLayerNameId,
+      handleZoomToLayer,
+      handleToggleLayerVisibility,
+    ],
   );
 
   const [localTitle, setLocalTitle] = useState(layer.title);
@@ -128,7 +137,13 @@ const LayerItem: FC<LayerItemProps> = ({
     setEditingLayerNameId("");
     if (!localTitle || localTitle === layer.title) return;
     handleLayerNameUpdate({ layerId: layer.id, name: localTitle });
-  }, [layer.id, layer.title, localTitle, handleLayerNameUpdate, setEditingLayerNameId]);
+  }, [
+    layer.id,
+    layer.title,
+    localTitle,
+    handleLayerNameUpdate,
+    setEditingLayerNameId,
+  ]);
 
   const handleLayerItemClick = useCallback(() => {
     if (layer.id === selectedLayerId) return;
diff --git a/web/src/beta/features/Editor/Map/LayersPanel/index.tsx b/web/src/beta/features/Editor/Map/LayersPanel/index.tsx
index c7263464d..2352f3c4c 100644
--- a/web/src/beta/features/Editor/Map/LayersPanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/LayersPanel/index.tsx
@@ -1,15 +1,19 @@
-import { FC, useCallback, useMemo, useState } from "react";
-
-import { Button, PopupMenu, DragAndDropList } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  PopupMenu,
+  DragAndDropList,
+} from "@reearth/beta/lib/reearth-ui";
 import { Panel } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useMemo, useState } from "react";
 
 import { useMapPage } from "../context";
 
 import LayerItem from "./LayerItem";
 
-const LAYERS_DRAG_HANDLE_CLASS_NAME = "reearth-visualizer-editor-layers-drag-handle";
+const LAYERS_DRAG_HANDLE_CLASS_NAME =
+  "reearth-visualizer-editor-layers-drag-handle";
 
 const LayersPanel: FC = () => {
   const {
@@ -48,7 +52,7 @@ const LayersPanel: FC = () => {
 
   const DraggableLayerItems = useMemo(
     () =>
-      layers.map(layer => ({
+      layers.map((layer) => ({
         id: layer.id,
         content: (
           <LayerItem
@@ -81,7 +85,9 @@ const LayersPanel: FC = () => {
     <Panel title={t("Layers")} storageId="editor-map-layers-panel" extend>
       <Wrapper>
         <PopupMenu
-          label={<Button icon="plus" title="New Layer" size="small" extendWidth />}
+          label={
+            <Button icon="plus" title="New Layer" size="small" extendWidth />
+          }
           extendTriggerWidth
           placement="bottom-end"
           menu={newLayerMenu}
diff --git a/web/src/beta/features/Editor/Map/ScenePanel/index.tsx b/web/src/beta/features/Editor/Map/ScenePanel/index.tsx
index 10e06764d..4480b06fe 100644
--- a/web/src/beta/features/Editor/Map/ScenePanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/ScenePanel/index.tsx
@@ -1,17 +1,17 @@
-import { FC, useCallback } from "react";
-
 import { EntryItem } from "@reearth/beta/ui/components";
 import { Panel } from "@reearth/beta/ui/layout";
 import { ScenePropertyCollection } from "@reearth/services/api/sceneApi";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback } from "react";
 
 import { useMapPage } from "../context";
 
 const ScenePanel: FC = () => {
   const t = useT();
 
-  const { scene, selectedSceneSetting, handleSceneSettingSelect } = useMapPage();
+  const { scene, selectedSceneSetting, handleSceneSettingSelect } =
+    useMapPage();
 
   // TODO-VizUI: use EntryItem
   const handleTranslatedCollectionName = useCallback(
@@ -19,16 +19,16 @@ const ScenePanel: FC = () => {
       return name === "main"
         ? t("Main")
         : name === "tiles"
-        ? t("Tiles")
-        : name === "terrain"
-        ? t("Terrain")
-        : name === "globe"
-        ? t("Globe")
-        : name === "sky"
-        ? t("Sky")
-        : name === "camera"
-        ? t("Camera")
-        : t("Unknown scene setting");
+          ? t("Tiles")
+          : name === "terrain"
+            ? t("Terrain")
+            : name === "globe"
+              ? t("Globe")
+              : name === "sky"
+                ? t("Sky")
+                : name === "camera"
+                  ? t("Camera")
+                  : t("Unknown scene setting");
     },
     [t],
   );
@@ -36,12 +36,18 @@ const ScenePanel: FC = () => {
   return (
     <Panel title={t("Scene")} storageId="editor-map-scene-panel">
       <Wrapper>
-        {[...new Set(scene?.property?.schema?.groups.map(({ collection }) => collection))].map(
+        {[
+          ...new Set(
+            scene?.property?.schema?.groups.map(({ collection }) => collection),
+          ),
+        ].map(
           (collection, index) =>
             collection && (
               <EntryItem
                 key={index}
-                title={handleTranslatedCollectionName(collection as ScenePropertyCollection)}
+                title={handleTranslatedCollectionName(
+                  collection as ScenePropertyCollection,
+                )}
                 highlighted={selectedSceneSetting === collection}
                 onClick={() => handleSceneSettingSelect(collection)}
               />
diff --git a/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx
index 0385882e2..8ba65941d 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx
+++ b/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx
@@ -1,10 +1,14 @@
-import { FC } from "react";
-
 import { Selector, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { useT } from "@reearth/services/i18n";
+import { FC } from "react";
 
-import { ContentWrapper, InputGroup, InputsWrapper, Wrapper } from "../../shared/SharedComponent";
+import {
+  ContentWrapper,
+  InputGroup,
+  InputsWrapper,
+  Wrapper,
+} from "../../shared/SharedComponent";
 
 export interface Props {
   layerName?: string;
@@ -28,7 +32,11 @@ const General: FC<Props> = ({
       <ContentWrapper>
         <InputGroup label={t("Layer Name")}>
           <InputsWrapper>
-            <TextInput placeholder={t(" Text")} value={layerName} onChange={onLayerNameChange} />
+            <TextInput
+              placeholder={t(" Text")}
+              value={layerName}
+              onChange={onLayerNameChange}
+            />
           </InputsWrapper>
         </InputGroup>
 
@@ -36,7 +44,10 @@ const General: FC<Props> = ({
           <Selector
             value={layerStyle}
             maxHeight={250}
-            options={layerStyleOption?.map(v => ({ label: v.name, value: v.id }))}
+            options={layerStyleOption?.map((v) => ({
+              label: v.name,
+              value: v.id,
+            }))}
             onChange={onLayerStyleChange}
           />
         </InputGroup>
diff --git a/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx
index 752cb4c2b..abfb6e69f 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx
+++ b/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx
@@ -1,8 +1,13 @@
-import { FC, useCallback, useState } from "react";
-
-import { Button, Modal, ModalPanel, TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  Modal,
+  ModalPanel,
+  TabItem,
+  Tabs,
+} from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useState } from "react";
 
 import SketchCustomProperties from "../shared/SketchCustomProperties";
 
@@ -24,9 +29,16 @@ export const dataTypes: SketchLayerDataType[] = [
   "Boolean",
 ];
 
-const SketchLayerCreator: FC<SketchLayerProps> = ({ sceneId, layerStyles, onClose, onSubmit }) => {
+const SketchLayerCreator: FC<SketchLayerProps> = ({
+  sceneId,
+  layerStyles,
+  onClose,
+  onSubmit,
+}) => {
   const t = useT();
-  const [customProperties, setCustomProperties] = useState<CustomPropertyProp[]>([]);
+  const [customProperties, setCustomProperties] = useState<
+    CustomPropertyProp[]
+  >([]);
   const [propertiesList, setPropertiesList] = useState<PropertyListProp[]>([]);
   const [layerName, setLayerName] = useState("");
   const [layerStyle, setLayerStyle] = useState("");
@@ -112,7 +124,8 @@ const SketchLayerCreator: FC<SketchLayerProps> = ({ sceneId, layerStyles, onClos
               disabled={!layerName}
             />
           </>
-        }>
+        }
+      >
         <Wrapper>
           <Tabs tabs={tabsItem} />
         </Wrapper>
diff --git a/web/src/beta/features/Editor/Map/SketchLayerCreator/type.ts b/web/src/beta/features/Editor/Map/SketchLayerCreator/type.ts
index e94df307a..dab05228c 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerCreator/type.ts
+++ b/web/src/beta/features/Editor/Map/SketchLayerCreator/type.ts
@@ -2,9 +2,7 @@ import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 
 import { LayerAddProps } from "../../hooks/useLayers";
 
-export type CustomPropertyProp = {
-  [key: string]: string;
-};
+export type CustomPropertyProp = Record<string, string>;
 export type SketchLayerDataType =
   | "Text"
   | "TextArea"
diff --git a/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts b/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts
index 715ac2f4f..7077e75fa 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts
+++ b/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts
@@ -1,8 +1,7 @@
-import { useCallback, useEffect, useMemo } from "react";
-import { v4 as uuidv4 } from "uuid";
-
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { UpdateCustomPropertySchemaInput } from "@reearth/services/gql";
+import { useCallback, useEffect, useMemo } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 import { CustomPropertyProps } from "../SketchLayerCreator/type";
 
@@ -15,8 +14,12 @@ export default function useHooks({
   setPropertiesList,
   onClose,
   onCustomPropertySchemaUpdate,
-}: Pick<CustomPropertyProps, "customProperties" | "setPropertiesList"> & SketchLayerEditorProp) {
-  const sketchLayers = useMemo(() => layers.filter(({ isSketch }) => isSketch), [layers]);
+}: Pick<CustomPropertyProps, "customProperties" | "setPropertiesList"> &
+  SketchLayerEditorProp) {
+  const sketchLayers = useMemo(
+    () => layers.filter(({ isSketch }) => isSketch),
+    [layers],
+  );
 
   const handleClose = useCallback(() => {
     if (onClose) setPropertiesList?.([]);
@@ -61,7 +64,7 @@ export default function useHooks({
 
   useEffect(() => {
     if (setPropertiesList) {
-      const layer = sketchLayers.find(layer => layer.id === layerId);
+      const layer = sketchLayers.find((layer) => layer.id === layerId);
       if (layer) {
         const newPropertiesList = processCustomProperties(layer);
         setPropertiesList(newPropertiesList);
diff --git a/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx
index 30aefc534..aeb818bc6 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx
+++ b/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx
@@ -1,13 +1,15 @@
-import { FC, useState } from "react";
-
 import { Button, Modal, ModalPanel } from "@reearth/beta/lib/reearth-ui";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { UpdateCustomPropertySchemaInput } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useState } from "react";
 
 import SketchCustomProperties from "../shared/SketchCustomProperties";
-import { CustomPropertyProp, PropertyListProp } from "../SketchLayerCreator/type";
+import {
+  CustomPropertyProp,
+  PropertyListProp,
+} from "../SketchLayerCreator/type";
 
 import useHooks from "./hooks";
 
@@ -27,7 +29,9 @@ const SketchLayerEditor: FC<SketchLayerEditorProp> = ({
   onCustomPropertySchemaUpdate,
 }) => {
   const t = useT();
-  const [customProperties, setCustomProperties] = useState<CustomPropertyProp[]>([]);
+  const [customProperties, setCustomProperties] = useState<
+    CustomPropertyProp[]
+  >([]);
   const [propertiesList, setPropertiesList] = useState<PropertyListProp[]>([]);
   const { handleClose, handleSubmit } = useHooks({
     layers,
@@ -46,9 +50,15 @@ const SketchLayerEditor: FC<SketchLayerEditorProp> = ({
         actions={
           <>
             <Button onClick={handleClose} size="normal" title="Cancel" />
-            <Button size="normal" title="Apply" appearance="primary" onClick={handleSubmit} />
+            <Button
+              size="normal"
+              title="Apply"
+              appearance="primary"
+              onClick={handleSubmit}
+            />
           </>
-        }>
+        }
+      >
         <Wrapper>
           <SketchCustomProperties
             customProperties={customProperties}
diff --git a/web/src/beta/features/Editor/Map/context.tsx b/web/src/beta/features/Editor/Map/context.tsx
index f371a9879..9b787a254 100644
--- a/web/src/beta/features/Editor/Map/context.tsx
+++ b/web/src/beta/features/Editor/Map/context.tsx
@@ -1,5 +1,3 @@
-import { createContext, useContext, ReactNode } from "react";
-
 import { AreaSize } from "@reearth/beta/ui/layout";
 import { FlyTo, SketchType } from "@reearth/core";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
@@ -7,6 +5,7 @@ import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { Item } from "@reearth/services/api/propertyApi/utils";
 import { Scene } from "@reearth/services/api/sceneApi";
 import { UpdateCustomPropertySchemaInput } from "@reearth/services/gql";
+import { createContext, useContext, ReactNode } from "react";
 
 import {
   LayerConfigUpdateProps,
@@ -20,7 +19,10 @@ import {
   LayerStyleNameUpdateProps,
   LayerStyleValueUpdateProps,
 } from "../hooks/useLayerStyles";
-import { GeoJsonFeatureDeleteProps, GeoJsonFeatureUpdateProps } from "../hooks/useSketch";
+import {
+  GeoJsonFeatureDeleteProps,
+  GeoJsonFeatureUpdateProps,
+} from "../hooks/useSketch";
 
 export interface MapPageContextType {
   handleVisualizerResize?: (props: AreaSize) => void;
@@ -38,7 +40,9 @@ export interface MapPageContextType {
   openCustomPropertySchema: () => void;
   layerId?: string;
   handleCustomPropertySchemaClick?: (id?: string) => void;
-  handleCustomPropertySchemaUpdate?: (inp: UpdateCustomPropertySchemaInput) => void;
+  handleCustomPropertySchemaUpdate?: (
+    inp: UpdateCustomPropertySchemaInput,
+  ) => void;
   handleLayerVisibilityUpdate: (inp: LayerVisibilityUpdateProps) => void;
   handleFlyTo?: FlyTo;
   sketchEnabled: boolean;
@@ -68,7 +72,9 @@ export const MapPageProvider = ({
   value: MapPageContextType;
   children: ReactNode;
 }) => {
-  return <MapPageContext.Provider value={value}>{children}</MapPageContext.Provider>;
+  return (
+    <MapPageContext.Provider value={value}>{children}</MapPageContext.Provider>
+  );
 };
 
 export const useMapPage = (): MapPageContextType => {
diff --git a/web/src/beta/features/Editor/Map/index.tsx b/web/src/beta/features/Editor/Map/index.tsx
index 938857eab..ae21af3cc 100644
--- a/web/src/beta/features/Editor/Map/index.tsx
+++ b/web/src/beta/features/Editor/Map/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useRef } from "react";
-
 import { Window, Area, AreaRef } from "@reearth/beta/ui/layout";
+import { FC, useRef } from "react";
 
 import { useMapPage } from "./context";
 import InspectorPanel from "./InspectorPanel";
@@ -19,7 +18,11 @@ const Map: FC = () => {
   return (
     <Window ref={windowRef}>
       <Area extend asWrapper>
-        <Area direction="column" resizableEdge="right" storageId="editor-map-left-area">
+        <Area
+          direction="column"
+          resizableEdge="right"
+          storageId="editor-map-left-area"
+        >
           <ScenePanel />
           <LayersPanel />
         </Area>
@@ -27,20 +30,27 @@ const Map: FC = () => {
           <Area initialHeight={34}>
             <ToolsPanel />
           </Area>
-          <Area extend onResize={handleVisualizerResize} windowRef={windowRef} passive />
+          <Area
+            extend
+            onResize={handleVisualizerResize}
+            windowRef={windowRef}
+            passive
+          />
         </Area>
         <Area
           direction="column"
           resizableEdge="left"
           storageId="editor-map-sec-right-area"
-          ref={secRightAreaRef}>
+          ref={secRightAreaRef}
+        >
           <InspectorPanel showCollapseArea areaRef={secRightAreaRef} />
         </Area>
         <Area
           direction="column"
           resizableEdge="left"
           storageId="editor-map-right-area"
-          ref={rightAreaRef}>
+          ref={rightAreaRef}
+        >
           <LayerStylePanel showCollapseArea areaRef={rightAreaRef} />
         </Area>
       </Area>
diff --git a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx
index 30bfcf86a..1ee045478 100644
--- a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx
+++ b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx
@@ -1,8 +1,12 @@
-import { FC, useCallback, useState } from "react";
-
-import { Button, Selector, TextInput, Icon } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  Selector,
+  TextInput,
+  Icon,
+} from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useState } from "react";
 
 import { dataTypes } from "../../SketchLayerCreator";
 import { CustomPropertyItemProps } from "../../SketchLayerCreator/type";
@@ -20,7 +24,9 @@ const CustomPropertyItem: FC<CustomPropertyItemProps> = ({
   const t = useT();
   const theme = useTheme();
 
-  const [customPropertyTitle, setCustomPropertyTitle] = useState(customPropertyItem.key);
+  const [customPropertyTitle, setCustomPropertyTitle] = useState(
+    customPropertyItem.key,
+  );
   const [dataType, setDataType] = useState(customPropertyItem.value);
 
   const handleTitleChange = useCallback((value: string) => {
@@ -61,17 +67,20 @@ const CustomPropertyItem: FC<CustomPropertyItemProps> = ({
       <ProjectItemCol
         style={{
           justifyContent: "space-between",
-        }}>
+        }}
+      >
         {customPropertyItem.value.trim() === "" || isEditType ? (
           <Selector
             size="small"
             value={dataType}
             placeholder={t("Please select one type")}
-            options={dataTypes.map(v => ({ value: v, label: v }))}
+            options={dataTypes.map((v) => ({ value: v, label: v }))}
             onChange={handleTypeChange}
           />
         ) : (
-          <TitleWrapper onDoubleClick={() => onDoubleClick?.("type")}>{dataType}</TitleWrapper>
+          <TitleWrapper onDoubleClick={() => onDoubleClick?.("type")}>
+            {dataType}
+          </TitleWrapper>
         )}
       </ProjectItemCol>
       <Button
diff --git a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts
index da2659edd..d985fa2d1 100644
--- a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts
+++ b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts
@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 
-import { CustomPropertyProps, PropertyListProp } from "../../SketchLayerCreator/type";
+import {
+  CustomPropertyProps,
+  PropertyListProp,
+} from "../../SketchLayerCreator/type";
 
 export default function useHooks({
   customProperties,
@@ -17,7 +20,7 @@ export default function useHooks({
     (idx: number) => (newKeyValue?: string) => {
       if (!propertiesList) return;
 
-      const newList = propertiesList.map(i => ({ ...i } as PropertyListProp));
+      const newList = propertiesList.map((i) => ({ ...i }) as PropertyListProp);
       newList[idx].key = newKeyValue ?? "";
       setPropertiesList?.(newList);
       if (editTitleIndex === idx) setEditTitleIndex(null);
@@ -28,7 +31,9 @@ export default function useHooks({
   const handleTypeChange = useCallback(
     (idx: number) => (value?: string | string[]) => {
       if (!propertiesList) return;
-      const newList = propertiesList?.map(i => ({ ...i } as PropertyListProp));
+      const newList = propertiesList?.map(
+        (i) => ({ ...i }) as PropertyListProp,
+      );
       newList[idx].value = (value as string) ?? "";
       setPropertiesList?.(newList);
       if (editTypeIndex === idx) setEditTypeIndex(null);
@@ -71,10 +76,15 @@ export default function useHooks({
 
   const handlePropertyDrop = useCallback(
     (item: PropertyListProp, targetIndex: number) => {
-      if (!propertiesList || targetIndex < 0 || targetIndex >= propertiesList.length) return;
+      if (
+        !propertiesList ||
+        targetIndex < 0 ||
+        targetIndex >= propertiesList.length
+      )
+        return;
 
       const newList = [...propertiesList];
-      const currentIndex = newList.findIndex(li => li.id === item.id);
+      const currentIndex = newList.findIndex((li) => li.id === item.id);
       if (currentIndex === -1) return; // Item not found
 
       // Remove the item from its current position
@@ -91,8 +101,12 @@ export default function useHooks({
   useEffect(() => {
     if (setCustomProperties) {
       if (!propertiesList) return;
-      const filteredList = propertiesList.filter(item => item.key !== "" && item.value !== "");
-      const propertyList = filteredList.map(item => ({ [item.key]: item.value }));
+      const filteredList = propertiesList.filter(
+        (item) => item.key !== "" && item.value !== "",
+      );
+      const propertyList = filteredList.map((item) => ({
+        [item.key]: item.value,
+      }));
       setCustomProperties(propertyList);
     }
   }, [propertiesList, setCustomProperties]);
@@ -104,7 +118,7 @@ export default function useHooks({
   const handleMoveEnd = useCallback(
     (itemId?: string, newIndex?: number) => {
       if (itemId !== undefined && newIndex !== undefined) {
-        const itemToMove = propertiesList?.find(item => item.id === itemId);
+        const itemToMove = propertiesList?.find((item) => item.id === itemId);
         if (itemToMove) {
           handlePropertyDrop(itemToMove, newIndex);
         }
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts
index 5769cb628..42832b880 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts
@@ -1,6 +1,5 @@
-import { useState, useEffect, useCallback } from "react";
-
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
+import { useState, useEffect, useCallback } from "react";
 
 import { publishingType } from "./";
 
@@ -16,7 +15,10 @@ export default (
   publishing?: publishingType,
   publishStatus?: PublishStatus,
   defaultAlias?: string,
-  onPublish?: (alias: string | undefined, publishStatus: PublishStatus) => void | Promise<void>,
+  onPublish?: (
+    alias: string | undefined,
+    publishStatus: PublishStatus,
+  ) => void | Promise<void>,
   onClose?: () => void,
   onAliasValidate?: (alias: string) => void,
   onCopyToClipBoard?: () => void,
@@ -39,7 +41,7 @@ export default (
   const handleCopyToClipBoard = useCallback(
     (key: keyof CopiedItemKey, value: string | undefined) => () => {
       if (!value) return;
-      setCopiedKey(prevState => ({
+      setCopiedKey((prevState) => ({
         ...prevState,
         [key]: true,
       }));
@@ -67,13 +69,19 @@ export default (
     [onAliasValidate],
   );
 
+  const generateAlias = useCallback(() => {
+    const str = generateRandomString(10);
+    changeAlias(str);
+    return str;
+  }, []);
+
   const onAliasChange = useCallback(
     (value?: string) => {
       const a = value || generateAlias();
       changeAlias(a);
       validate(a);
     },
-    [validate], // eslint-disable-line react-hooks/exhaustive-deps
+    [validate, generateAlias],
   );
 
   const handleClose = useCallback(() => {
@@ -83,31 +91,38 @@ export default (
       setStatusChange(false);
       setOptions(defaultAlias ? false : true);
     }, 500);
-  }, [onClose, defaultAlias]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const generateAlias = useCallback(() => {
-    const str = generateRandomString(10);
-    changeAlias(str);
-    return str;
-  }, []);
+  }, [onClose, defaultAlias, onAliasChange]);
 
   useEffect(() => {
     onAliasChange(defaultAlias);
-  }, [defaultAlias]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [defaultAlias, onAliasChange]);
 
   const handlePublish = useCallback(async () => {
     if (!publishing) return;
-    const a = publishing !== "unpublishing" ? alias || generateAlias() : undefined;
+    const a =
+      publishing !== "unpublishing" ? alias || generateAlias() : undefined;
 
     const mode =
-      publishing === "unpublishing" ? "unpublished" : !searchIndex ? "limited" : "published";
+      publishing === "unpublishing"
+        ? "unpublished"
+        : !searchIndex
+          ? "limited"
+          : "published";
     await onPublish?.(a, mode);
     if (publishing === "unpublishing") {
       handleClose?.();
     } else {
       setStatusChange(true);
     }
-  }, [alias, generateAlias, onPublish, publishing, searchIndex, setStatusChange, handleClose]);
+  }, [
+    alias,
+    generateAlias,
+    onPublish,
+    publishing,
+    searchIndex,
+    setStatusChange,
+    handleClose,
+  ]);
 
   return {
     statusChanged,
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx
index 8a4976d0d..331d3380d 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx
@@ -1,5 +1,3 @@
-import { useMemo, FC } from "react";
-
 import {
   Button,
   Icon,
@@ -10,6 +8,7 @@ import {
 import { CommonField, SwitchField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { useMemo, FC } from "react";
 
 import { usePublishPage } from "../../context";
 
@@ -28,7 +27,10 @@ type Props = {
   publishing?: publishingType;
   validatingAlias?: boolean;
   url?: string[];
-  onPublish: (alias: string | undefined, publishStatus: PublishStatus) => void | Promise<void>;
+  onPublish: (
+    alias: string | undefined,
+    publishStatus: PublishStatus,
+  ) => void | Promise<void>;
   onClose?: () => void;
   onCopyToClipBoard?: () => void;
   onAliasValidate?: (alias: string) => void;
@@ -79,11 +81,14 @@ const PublishModal: FC<Props> = ({
   );
 
   const purl = useMemo(() => {
-    return (url?.[0] ?? "") + (alias?.replace("/", "") ?? "") + (url?.[1] ?? "");
+    return (
+      (url?.[0] ?? "") + (alias?.replace("/", "") ?? "") + (url?.[1] ?? "")
+    );
   }, [alias, url]);
 
   const embedCode = useMemo(
-    () => `<iframe width="560" height="315" src="${purl}" frameBorder="0"></iframe>;`,
+    () =>
+      `<iframe width="560" height="315" src="${purl}" frameBorder="0"></iframe>;`,
     [purl],
   );
 
@@ -99,24 +104,24 @@ const PublishModal: FC<Props> = ({
     return statusChanged
       ? t("Congratulations!")
       : publishing === "publishing"
-      ? isStory
-        ? t(`Publish your story`)
-        : t(`Publish your scene`)
-      : publishing === "updating"
-      ? isStory
-        ? t(`Update your story`)
-        : t(`Update your scene`)
-      : "";
+        ? isStory
+          ? t(`Publish your story`)
+          : t(`Publish your scene`)
+        : publishing === "updating"
+          ? isStory
+            ? t(`Update your story`)
+            : t(`Update your scene`)
+          : "";
   }, [t, statusChanged, publishing, isStory]);
 
   const primaryButtonText = useMemo(() => {
     return statusChanged
       ? t("Ok")
       : publishing === "publishing"
-      ? t("Publish")
-      : publishing === "updating"
-      ? t("Update")
-      : t("Unpublish");
+        ? t("Publish")
+        : publishing === "updating"
+          ? t("Update")
+          : t("Unpublish");
   }, [t, statusChanged, publishing]);
 
   const secondaryButtonText = useMemo(
@@ -134,12 +139,12 @@ const PublishModal: FC<Props> = ({
             `Your published scene will be updated. This means all current changes will overwrite the current published scene.`,
           )
       : isStory
-      ? t(
-          `Your story will be published. This means anybody with the below URL will be able to view this story.`,
-        )
-      : t(
-          `Your scene will be published. This means anybody with the below URL will be able to view this scene.`,
-        );
+        ? t(
+            `Your story will be published. This means anybody with the below URL will be able to view this story.`,
+          )
+        : t(
+            `Your scene will be published. This means anybody with the below URL will be able to view this scene.`,
+          );
   }, [t, publishing, isStory]);
 
   const actions = useMemo(
@@ -178,11 +183,14 @@ const PublishModal: FC<Props> = ({
         title={modalTitleText}
         actions={actions}
         onCancel={handleClose}
-        appearance={isPublishing ? "normal" : "simple"}>
+        appearance={isPublishing ? "normal" : "simple"}
+      >
         {statusChanged ? (
           <Section>
             <Subtitle size="body">
-              {isStory ? t(`Your story has been published!`) : t(`Your scene has been published!`)}
+              {isStory
+                ? t(`Your story has been published!`)
+                : t(`Your scene has been published!`)}
             </Subtitle>
             <CommonField
               commonTitle={t("Public URL")}
@@ -190,15 +198,20 @@ const PublishModal: FC<Props> = ({
                 isStory
                   ? t(`* Anyone can see your story with this URL`)
                   : t(`* Anyone can see your scene with this URL`)
-              }>
+              }
+            >
               <UrlWrapper justify="space-between">
-                <UrlText publicUrl={true} onClick={() => window.open(purl, "_blank")}>
+                <UrlText
+                  publicUrl={true}
+                  onClick={() => window.open(purl, "_blank")}
+                >
                   {purl}
                 </UrlText>
                 <Typography
                   size="body"
                   color={theme.primary.main}
-                  onClick={handleCopyToClipBoard("url", purl)}>
+                  onClick={handleCopyToClipBoard("url", purl)}
+                >
                   {t("Copy")}
                 </Typography>
               </UrlWrapper>
@@ -207,13 +220,15 @@ const PublishModal: FC<Props> = ({
               commonTitle={t("Embed Code")}
               description={t(
                 `* Please use this code if you want to embed your story into a webpage`,
-              )}>
+              )}
+            >
               <UrlWrapper justify="space-between">
                 <UrlText>{embedCode}</UrlText>
                 <Typography
                   size="body"
                   color={theme.primary.main}
-                  onClick={handleCopyToClipBoard("embedCode", embedCode)}>
+                  onClick={handleCopyToClipBoard("embedCode", embedCode)}
+                >
                   {t("Copy")}
                 </Typography>
               </UrlWrapper>
@@ -238,13 +253,17 @@ const PublishModal: FC<Props> = ({
               </DomainText>
               <Button
                 size="small"
-                onClick={() => onNavigateToSettings?.("public", isStory ? storyId : "")}
+                onClick={() =>
+                  onNavigateToSettings?.("public", isStory ? storyId : "")
+                }
                 title={t("Go to settings")}
               />
             </div>
             <SwitchField
               commonTitle={t("Search engine indexing")}
-              description={t("Page will be available as result on search engines")}
+              description={t(
+                "Page will be available as result on search engines",
+              )}
               onChange={handleSearchIndexChange}
             />
           </Section>
@@ -276,14 +295,16 @@ const PublishModal: FC<Props> = ({
 
 export default PublishModal;
 
-const Section = styled("div")<{ disabled?: boolean }>(({ disabled, theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  padding: theme.spacing.normal,
-  gap: theme.spacing.large,
-  opacity: disabled ? 0.6 : 1,
-  cursor: disabled ? "not-allowed" : "auto",
-}));
+const Section = styled("div")<{ disabled?: boolean }>(
+  ({ disabled, theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.spacing.normal,
+    gap: theme.spacing.large,
+    opacity: disabled ? 0.6 : 1,
+    cursor: disabled ? "not-allowed" : "auto",
+  }),
+);
 
 const Subtitle = styled(Typography)({
   textAlign: "left",
@@ -295,26 +316,30 @@ const DomainWrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.smallest,
 }));
 
-const UrlWrapper = styled("div")<{ justify?: string }>(({ justify, theme }) => ({
-  display: "flex",
-  justifyContent: justify ?? "center",
-  alignItems: "center",
-  border: `1px solid ${theme.outline.weak}`,
-  borderRadius: "4px",
-  padding: `${theme.spacing.small}px ${theme.spacing.large}px`,
-  cursor: "pointer",
-}));
+const UrlWrapper = styled("div")<{ justify?: string }>(
+  ({ justify, theme }) => ({
+    display: "flex",
+    justifyContent: justify ?? "center",
+    alignItems: "center",
+    border: `1px solid ${theme.outline.weak}`,
+    borderRadius: "4px",
+    padding: `${theme.spacing.small}px ${theme.spacing.large}px`,
+    cursor: "pointer",
+  }),
+);
 
-const UrlText = styled("div")<{ publicUrl?: boolean }>(({ publicUrl, theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  cursor: "pointer",
-  fontSize: "12px",
-  whiteSpace: "break-spaces",
-  color: publicUrl ? theme.primary.main : "inherit",
-  fontWeight: publicUrl ? "bold" : "normal",
-}));
+const UrlText = styled("div")<{ publicUrl?: boolean }>(
+  ({ publicUrl, theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer",
+    fontSize: "12px",
+    whiteSpace: "break-spaces",
+    color: publicUrl ? theme.primary.main : "inherit",
+    fontWeight: publicUrl ? "bold" : "normal",
+  }),
+);
 
 const DomainText = styled("div")(({ theme }) => ({
   marginBottom: `${theme.spacing.small}px`,
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts b/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts
index 9726ba0ed..fcbb6539d 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts
@@ -1,8 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-
 import { useSettingsNavigation } from "@reearth/beta/hooks";
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
-import { useProjectFetcher, useStorytellingFetcher } from "@reearth/services/api";
+import {
+  useProjectFetcher,
+  useStorytellingFetcher,
+} from "@reearth/services/api";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { publishingType } from "./PublishModal";
 import { type PublishStatus } from "./PublishModal/hooks";
@@ -45,7 +47,7 @@ export default ({
 
   const project: SelectedProject | undefined = useMemo(() => {
     if (selectedProjectType === "story") {
-      const story = stories?.find(s => s.id === storyId);
+      const story = stories?.find((s) => s.id === storyId);
       return story
         ? {
             id: story.id,
@@ -70,10 +72,15 @@ export default ({
   const generateAlias = useCallback(() => generateRandomString(10), []);
 
   const [validAlias, setValidAlias] = useState(false);
-  const alias = useMemo(() => project?.alias ?? generateAlias(), [project?.alias, generateAlias]);
+  const alias = useMemo(
+    () => project?.alias ?? generateAlias(),
+    [project?.alias, generateAlias],
+  );
 
-  const [checkProjectAlias, { loading: validatingAlias, data: checkProjectAliasData }] =
-    useProjectAliasCheckLazyQuery();
+  const [
+    checkProjectAlias,
+    { loading: validatingAlias, data: checkProjectAliasData },
+  ] = useProjectAliasCheckLazyQuery();
 
   const publishmentStatuses = useMemo(() => {
     return [
@@ -83,7 +90,7 @@ export default ({
         type: "default",
         published: isPublished(mapProject?.publishmentStatus),
       },
-      ...(stories?.map(s => ({
+      ...(stories?.map((s) => ({
         id: s.id,
         title: "Story",
         type: "story",
@@ -118,16 +125,18 @@ export default ({
       project?.publishmentStatus === "PUBLIC"
         ? "published"
         : project?.publishmentStatus === "LIMITED"
-        ? "limited"
-        : "unpublished",
+          ? "limited"
+          : "unpublished",
     [project?.publishmentStatus],
   );
 
   const handleProjectPublish = useCallback(
     async (alias: string | undefined, publishStatus: PublishStatus) => {
-      selectedProjectType === "story"
-        ? await usePublishStory(publishStatus, project?.id, alias)
-        : await usePublishProject(publishStatus, project?.id, alias);
+      if (selectedProjectType === "story") {
+        await usePublishStory(publishStatus, project?.id, alias);
+      } else {
+        await usePublishProject(publishStatus, project?.id, alias);
+      }
     },
     [project?.id, selectedProjectType, usePublishStory, usePublishProject],
   );
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx b/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx
index 3d2bfe7ba..411cfaef0 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx
@@ -1,11 +1,10 @@
-import { FC } from "react";
-
 import { Button } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
 import { Panel } from "@reearth/beta/ui/layout";
 import { config } from "@reearth/services/config";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { usePublishPage } from "../context";
 
@@ -13,8 +12,13 @@ import useHooks from "./hooks";
 import PublishModal from "./PublishModal";
 
 const PublishToolsPanel: FC = () => {
-  const { storyId, projectId, sceneId, selectedProjectType, handleProjectTypeChange } =
-    usePublishPage();
+  const {
+    storyId,
+    projectId,
+    sceneId,
+    selectedProjectType,
+    handleProjectTypeChange,
+  } = usePublishPage();
   const t = useT();
 
   const {
@@ -33,10 +37,14 @@ const PublishToolsPanel: FC = () => {
     handleNavigationToSettings,
   } = useHooks({ storyId, projectId, sceneId, selectedProjectType });
 
-  const sceneStatus = publishmentStatuses.find(status => status?.type === "default")?.published
+  const sceneStatus = publishmentStatuses.find(
+    (status) => status?.type === "default",
+  )?.published
     ? "published"
     : "unpublished";
-  const storyStatus = publishmentStatuses.find(status => status?.type === "story")?.published
+  const storyStatus = publishmentStatuses.find(
+    (status) => status?.type === "story",
+  )?.published
     ? "published"
     : "unpublished";
 
@@ -149,12 +157,15 @@ const TabButtonWrapper = styled("div")(({ theme }) => ({
   width: "116px",
 }));
 
-const PublishStatus = styled("div")<{ status: string }>(({ theme, status }) => ({
-  width: "8px",
-  height: "8px",
-  backgroundColor: status !== "unpublished" ? "#24A148" : theme.content.weaker,
-  borderRadius: "50%",
-}));
+const PublishStatus = styled("div")<{ status: string }>(
+  ({ theme, status }) => ({
+    width: "8px",
+    height: "8px",
+    backgroundColor:
+      status !== "unpublished" ? "#24A148" : theme.content.weaker,
+    borderRadius: "50%",
+  }),
+);
 
 const StatusWrapper = styled("div")({
   width: "8px",
diff --git a/web/src/beta/features/Editor/Publish/context.tsx b/web/src/beta/features/Editor/Publish/context.tsx
index eb946aa3d..fa1f4794a 100644
--- a/web/src/beta/features/Editor/Publish/context.tsx
+++ b/web/src/beta/features/Editor/Publish/context.tsx
@@ -1,6 +1,5 @@
-import { createContext, useContext, ReactNode } from "react";
-
 import { AreaSize } from "@reearth/beta/ui/layout";
+import { createContext, useContext, ReactNode } from "react";
 
 import { ProjectType } from "./PublishToolsPanel/hooks";
 
@@ -13,7 +12,9 @@ export interface PublishPageContextType {
   handleProjectTypeChange: (type: ProjectType) => void;
 }
 
-const PublishPageContext = createContext<PublishPageContextType | undefined>(undefined);
+const PublishPageContext = createContext<PublishPageContextType | undefined>(
+  undefined,
+);
 
 export const PublishPageProvider = ({
   value,
@@ -22,7 +23,11 @@ export const PublishPageProvider = ({
   value: PublishPageContextType;
   children: ReactNode;
 }) => {
-  return <PublishPageContext.Provider value={value}>{children}</PublishPageContext.Provider>;
+  return (
+    <PublishPageContext.Provider value={value}>
+      {children}
+    </PublishPageContext.Provider>
+  );
 };
 
 export const usePublishPage = (): PublishPageContextType => {
diff --git a/web/src/beta/features/Editor/Publish/index.tsx b/web/src/beta/features/Editor/Publish/index.tsx
index 78e2fa12c..ce1916d65 100644
--- a/web/src/beta/features/Editor/Publish/index.tsx
+++ b/web/src/beta/features/Editor/Publish/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useRef } from "react";
-
 import { Window, Area } from "@reearth/beta/ui/layout";
+import { FC, useRef } from "react";
 
 import { usePublishPage } from "./context";
 import PublishToolsPanel from "./PublishToolsPanel";
@@ -16,7 +15,12 @@ const Publish: FC = () => {
           <Area initialHeight={44}>
             <PublishToolsPanel />
           </Area>
-          <Area extend onResize={handleVisualizerResize} windowRef={windowRef} passive />
+          <Area
+            extend
+            onResize={handleVisualizerResize}
+            windowRef={windowRef}
+            passive
+          />
         </Area>
       </Area>
     </Window>
diff --git a/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts b/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
index 926b16fee..d2bb7204f 100644
--- a/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
@@ -1,8 +1,7 @@
-import { useState, useEffect, useMemo, useCallback } from "react";
-
 import { filterVisibleItems } from "@reearth/beta/components/fields/utils";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { Page } from "@reearth/services/api/storytellingApi/utils";
+import { useState, useEffect, useMemo, useCallback } from "react";
 
 type SettingProps = {
   onPageUpdate?: (id: string, layers: string[]) => void;
@@ -13,10 +12,13 @@ type SettingProps = {
 export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
   const pageId = useMemo(() => selectedPage?.id, [selectedPage?.id]);
 
-  const selectedLayerIds = useMemo(() => selectedPage?.layersIds || [], [selectedPage]);
+  const selectedLayerIds = useMemo(
+    () => selectedPage?.layersIds || [],
+    [selectedPage],
+  );
 
   const allLayersSelected = useMemo(() => {
-    const allLayerIds = layers?.map(layer => layer.id) || [];
+    const allLayerIds = layers?.map((layer) => layer.id) || [];
     return selectedLayerIds.length >= allLayerIds.length;
   }, [layers, selectedLayerIds.length]);
 
@@ -32,7 +34,7 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
     (layerId: string) => {
       if (!pageId) return;
       const updatedLayers = checkedLayers.includes(layerId)
-        ? checkedLayers.filter(id => id !== layerId)
+        ? checkedLayers.filter((id) => id !== layerId)
         : [...checkedLayers, layerId];
 
       setCheckedLayers(updatedLayers);
@@ -43,7 +45,9 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
 
   const handleAllLayersCheck = useCallback(() => {
     if (!pageId) return;
-    const updatedCheckedLayers = allCheckedLayers ? [] : layers?.map(layer => layer.id) || [];
+    const updatedCheckedLayers = allCheckedLayers
+      ? []
+      : layers?.map((layer) => layer.id) || [];
     setAllCheckedLayers(!allCheckedLayers);
     setCheckedLayers(updatedCheckedLayers);
     onPageUpdate?.(pageId, updatedCheckedLayers);
@@ -53,7 +57,7 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
     () =>
       filterVisibleItems(
         selectedPage?.property.items?.filter(
-          p => p.schemaGroup !== "panel" && p.schemaGroup !== "title",
+          (p) => p.schemaGroup !== "panel" && p.schemaGroup !== "title",
         ),
       ),
     [selectedPage?.property],
diff --git a/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx b/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx
index dd2740eea..9b41ea311 100644
--- a/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx
@@ -1,5 +1,3 @@
-import { FC } from "react";
-
 import { Collapse } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
 import CheckBoxField from "@reearth/beta/ui/fields/CheckboxField";
@@ -7,6 +5,7 @@ import PropertyItem from "@reearth/beta/ui/fields/Properties";
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { useStoryPage } from "../context";
 
@@ -15,14 +14,20 @@ import useHooks from "./hooks";
 type Props = Pick<PanelProps, "showCollapseArea" | "areaRef">;
 
 const PageSettingsPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
-  const { selectedStoryPage, layers, handleStoryPageUpdate, tab, handleFlyTo } = useStoryPage();
-
-  const { allCheckedLayers, checkedLayers, visibleItems, handleAllLayersCheck, handleLayerCheck } =
-    useHooks({
-      layers,
-      selectedPage: selectedStoryPage,
-      onPageUpdate: handleStoryPageUpdate,
-    });
+  const { selectedStoryPage, layers, handleStoryPageUpdate, tab, handleFlyTo } =
+    useStoryPage();
+
+  const {
+    allCheckedLayers,
+    checkedLayers,
+    visibleItems,
+    handleAllLayersCheck,
+    handleLayerCheck,
+  } = useHooks({
+    layers,
+    selectedPage: selectedStoryPage,
+    onPageUpdate: handleStoryPageUpdate,
+  });
 
   const t = useT();
 
@@ -33,7 +38,8 @@ const PageSettingsPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       extend
       alwaysOpen
       showCollapseArea={showCollapseArea}
-      areaRef={areaRef}>
+      areaRef={areaRef}
+    >
       {selectedStoryPage && (
         <Wrapper>
           {tab == "story" && (
@@ -41,17 +47,24 @@ const PageSettingsPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
               {layers && layers.length > 0 && (
                 <LayerWrapper>
                   <AllLayers>
-                    <CheckBoxField onChange={handleAllLayersCheck} value={allCheckedLayers} />
+                    <CheckBoxField
+                      onChange={handleAllLayersCheck}
+                      value={allCheckedLayers}
+                    />
                     <Title>{t("All Layers")}</Title>
                   </AllLayers>
                   <LayerList>
-                    {layers.map(layer => (
+                    {layers.map((layer) => (
                       <Layer key={layer.id}>
                         <CheckBoxField
                           onChange={() => handleLayerCheck(layer.id)}
                           value={checkedLayers.includes(layer.id)}
                         />
-                        <EntryItem icon="file" title={layer.title} disableHover />
+                        <EntryItem
+                          icon="file"
+                          title={layer.title}
+                          disableHover
+                        />
                       </Layer>
                     ))}
                   </LayerList>
diff --git a/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx b/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
index 0f3670d70..449444514 100644
--- a/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
+++ b/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
@@ -1,5 +1,3 @@
-import { FC, useCallback, useMemo, useState } from "react";
-
 import { getFieldValue } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { TextInput } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
@@ -7,6 +5,7 @@ import { isEmptyString } from "@reearth/beta/utils/util";
 import { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useMemo, useState } from "react";
 
 import { useStoryPage } from "../context";
 
@@ -17,7 +16,12 @@ interface PageItemProps {
   pageCount?: number;
 }
 
-const PageItem: FC<PageItemProps> = ({ storyPage, pageCount, dragHandleClassName, isDragging }) => {
+const PageItem: FC<PageItemProps> = ({
+  storyPage,
+  pageCount,
+  dragHandleClassName,
+  isDragging,
+}) => {
   const t = useT();
   const {
     selectedStoryPage,
@@ -26,8 +30,11 @@ const PageItem: FC<PageItemProps> = ({ storyPage, pageCount, dragHandleClassName
     handlePropertyValueUpdate,
   } = useStoryPage();
 
-  const title = (getFieldValue(storyPage.property.items ?? [], "title", "title") ??
-    t("Untitled")) as string;
+  const title = (getFieldValue(
+    storyPage.property.items ?? [],
+    "title",
+    "title",
+  ) ?? t("Untitled")) as string;
   const hasEmptySpace = isEmptyString(title);
 
   const [editingPageNameId, setEditingPageNameId] = useState("");
@@ -92,7 +99,9 @@ const PageItem: FC<PageItemProps> = ({ storyPage, pageCount, dragHandleClassName
               onBlur={handleTitleUpdate}
             />
           ) : (
-            <TitleWrapper onDoubleClick={() => setEditingPageNameId(storyPage.id)}>
+            <TitleWrapper
+              onDoubleClick={() => setEditingPageNameId(storyPage.id)}
+            >
               {hasEmptySpace || !title ? t("Untitled") : title}
             </TitleWrapper>
           )
diff --git a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
index b633d2462..c5a351eb0 100644
--- a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
+++ b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
@@ -1,20 +1,23 @@
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
-
 import { Button, DragAndDropList } from "@reearth/beta/lib/reearth-ui";
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import { useStoryPage } from "../context";
 
 import PageItem from "./PageItem";
 
 type Props = Pick<PanelProps, "showCollapseArea" | "areaRef">;
-const PAGES_DRAG_HANDLE_CLASS_NAME = "reearth-visualizer-editor-story-page-drag-handle";
+const PAGES_DRAG_HANDLE_CLASS_NAME =
+  "reearth-visualizer-editor-story-page-drag-handle";
 
 const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
-  const { storyPages, handleStoryPageAdd, handleStoryPageMove } = useStoryPage();
+  const { storyPages, handleStoryPageAdd, handleStoryPageMove } =
+    useStoryPage();
 
-  const [openedPageId, setOpenedPageId] = useState<string | undefined>(undefined);
+  const [openedPageId, setOpenedPageId] = useState<string | undefined>(
+    undefined,
+  );
 
   const [isDragging, setIsDragging] = useState(false);
   const [storyPageitems, setStoryPageitems] = useState(storyPages ?? []);
@@ -42,9 +45,9 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
   const handleMoveEnd = useCallback(
     async (itemId?: string, newIndex?: number) => {
       if (itemId !== undefined && newIndex !== undefined) {
-        setStoryPageitems(old => {
+        setStoryPageitems((old) => {
           const items = [...old];
-          const currentIndex = old.findIndex(o => o.id === itemId);
+          const currentIndex = old.findIndex((o) => o.id === itemId);
           if (currentIndex !== -1) {
             const [movedItem] = items.splice(currentIndex, 1);
             items.splice(newIndex, 0, movedItem);
@@ -69,7 +72,8 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       alwaysOpen
       storageId="editor-story-pages-panel"
       showCollapseArea={showCollapseArea}
-      areaRef={areaRef}>
+      areaRef={areaRef}
+    >
       <ButtonWrapper>
         <Button
           icon="plus"
@@ -79,7 +83,9 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
           onClick={() => handleStoryPageAdd(false)}
         />
       </ButtonWrapper>
-      <Wrapper onScroll={openedPageId ? () => setOpenedPageId(undefined) : undefined}>
+      <Wrapper
+        onScroll={openedPageId ? () => setOpenedPageId(undefined) : undefined}
+      >
         {!!DraggableStoryPageItems && (
           <DragAndDropList
             items={DraggableStoryPageItems}
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
index 57cb47f18..312df7ed9 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
@@ -1,8 +1,7 @@
-import { ComponentProps, FC } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
+import { ComponentProps, FC } from "react";
 
 type IconProps = ComponentProps<typeof Icon>;
 
@@ -14,13 +13,22 @@ type Props = {
   onClick: () => void;
 };
 
-const StorySidePanelAction: FC<Props> = ({ icon, iconSize, iconColor, title, onClick }) => {
+const StorySidePanelAction: FC<Props> = ({
+  icon,
+  iconSize,
+  iconColor,
+  title,
+  onClick,
+}) => {
   return (
     <Wrapper onClick={onClick} type="button">
       <IconWrapper>
         <Icon icon={icon} size={iconSize ?? 12} color={iconColor} />
       </IconWrapper>
-      <Text size={"footnote"} otherProperties={{ wordBreak: "break-all", textAlign: "left" }}>
+      <Text
+        size={"footnote"}
+        otherProperties={{ wordBreak: "break-all", textAlign: "left" }}
+      >
         {title}
       </Text>
     </Wrapper>
@@ -39,11 +47,11 @@ const Wrapper = styled.button`
   min-height: 28px;
   transition: all 0.15s;
 
-  background: ${props => props.theme.bg[1]};
+  background: ${(props) => props.theme.bg[1]};
   border: 1px solid ${({ theme }) => theme.outline.weaker};
 
   :hover {
-    background: ${props => props.theme.bg[2]};
+    background: ${(props) => props.theme.bg[2]};
   }
   user-select: none;
   cursor: pointer;
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
index 3ffb5c960..8a8806a49 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
@@ -1,8 +1,7 @@
-import { FC, ReactNode } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
@@ -10,7 +9,11 @@ type Props = {
   isSwipeable: boolean;
 };
 
-const StorySidePanelPageWrapper: FC<Props> = ({ children, pageCount, isSwipeable }) => {
+const StorySidePanelPageWrapper: FC<Props> = ({
+  children,
+  pageCount,
+  isSwipeable,
+}) => {
   const theme = useTheme();
 
   return (
@@ -20,7 +23,11 @@ const StorySidePanelPageWrapper: FC<Props> = ({ children, pageCount, isSwipeable
           <Text size="footnote">{pageCount}</Text>
         </div>
         <div>
-          <Icon icon={isSwipeable ? "swiper" : "square"} color={theme.content.weak} size={12} />
+          <Icon
+            icon={isSwipeable ? "swiper" : "square"}
+            color={theme.content.weak}
+            size={12}
+          />
         </div>
       </Left>
       <Right>{children}</Right>
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx b/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
index 0e2fdc6df..664666bdc 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
@@ -9,7 +9,7 @@ export default {
 type Story = StoryObj<typeof ContentStory>;
 
 export const Default: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <div style={{ height: "100vh" }}>
         <ContentStory {...args} />
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
index cca9dcaad..2d711804e 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
@@ -1,11 +1,10 @@
-import { useState } from "react";
-
 import DragAndDropList from "@reearth/beta/components/DragAndDropList";
 import ListItem from "@reearth/beta/components/ListItem";
 import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import Action from "@reearth/beta/features/Editor/Story/TempContentStory/Action";
 import PageItemWrapper from "@reearth/beta/features/Editor/Story/TempContentStory/PageItemWrapper";
 import { styled } from "@reearth/services/theme";
+import { useState } from "react";
 
 type Props = {
   onStorySelect: (id: string) => void;
@@ -28,7 +27,9 @@ const ContentStory: React.FC<Props> = ({
   onStoryClickSettings,
   onStoryRename,
 }) => {
-  const [openedPageId, setOpenedPageId] = useState<string | undefined>(undefined);
+  const [openedPageId, setOpenedPageId] = useState<string | undefined>(
+    undefined,
+  );
   const [items, setItems] = useState(
     [...Array(100)].map((_, i) => ({
       id: i.toString(),
@@ -38,31 +39,38 @@ const ContentStory: React.FC<Props> = ({
   );
   return (
     <SContent>
-      <SContentUp onScroll={openedPageId ? () => setOpenedPageId(undefined) : undefined}>
+      <SContentUp
+        onScroll={openedPageId ? () => setOpenedPageId(undefined) : undefined}
+      >
         <DragAndDropList
           uniqueKey="LeftPanelPages"
           gap={8}
           items={items}
-          getId={item => item.id}
+          getId={(item) => item.id}
           onItemDrop={(item, index) => {
-            setItems(old => {
+            setItems((old) => {
               const items = [...old];
               items.splice(
-                old.findIndex(o => o.id === item.id),
+                old.findIndex((o) => o.id === item.id),
                 1,
               );
               items.splice(index, 0, item);
               return items;
             });
           }}
-          renderItem={item => {
+          renderItem={(item) => {
             return (
-              <PageItemWrapper pageCount={item.index + 1} isSwipeable={item.index % 2 === 0}>
+              <PageItemWrapper
+                pageCount={item.index + 1}
+                isSwipeable={item.index % 2 === 0}
+              >
                 <ListItem
                   border
                   onItemClick={() => onStorySelect(item.id)}
-                  onActionClick={() => setOpenedPageId(old => (old ? undefined : item.id))}
-                  onOpenChange={isOpen => {
+                  onActionClick={() =>
+                    setOpenedPageId((old) => (old ? undefined : item.id))
+                  }
+                  onOpenChange={(isOpen) => {
                     setOpenedPageId(isOpen ? item.id : undefined);
                   }}
                   isSelected={item.index === 0}
@@ -98,7 +106,8 @@ const ContentStory: React.FC<Props> = ({
                         },
                       ]}
                     />
-                  }>
+                  }
+                >
                   Page
                 </ListItem>
               </PageItemWrapper>
@@ -109,8 +118,10 @@ const ContentStory: React.FC<Props> = ({
           <ListItem
             key={i}
             onItemClick={() => onStorySelect(i.toString())}
-            onActionClick={() => setOpenedPageId(old => (old ? undefined : i.toString()))}
-            onOpenChange={isOpen => {
+            onActionClick={() =>
+              setOpenedPageId((old) => (old ? undefined : i.toString()))
+            }
+            onOpenChange={(isOpen) => {
               setOpenedPageId(isOpen ? i.toString() : undefined);
             }}
             isSelected={false}
@@ -146,7 +157,8 @@ const ContentStory: React.FC<Props> = ({
                   },
                 ]}
               />
-            }>
+            }
+          >
             Story
           </ListItem>
         ))}
diff --git a/web/src/beta/features/Editor/Story/context.tsx b/web/src/beta/features/Editor/Story/context.tsx
index 77aa81c9b..5017b6e40 100644
--- a/web/src/beta/features/Editor/Story/context.tsx
+++ b/web/src/beta/features/Editor/Story/context.tsx
@@ -1,10 +1,9 @@
-import { createContext, useContext, ReactNode } from "react";
-
 import { AreaSize } from "@reearth/beta/ui/layout";
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { FlyTo } from "@reearth/core";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { Page } from "@reearth/services/api/storytellingApi/utils";
+import { createContext, useContext, ReactNode } from "react";
 
 import { Tab } from "../../Navbar";
 
@@ -32,7 +31,9 @@ export interface StoryPageContextType {
   handleStoryPageUpdate?: (id: string, layers: string[]) => void;
 }
 
-const StoryPageContext = createContext<StoryPageContextType | undefined>(undefined);
+const StoryPageContext = createContext<StoryPageContextType | undefined>(
+  undefined,
+);
 
 export const StoryPageProvider = ({
   value,
@@ -41,7 +42,11 @@ export const StoryPageProvider = ({
   value: StoryPageContextType;
   children: ReactNode;
 }) => {
-  return <StoryPageContext.Provider value={value}>{children}</StoryPageContext.Provider>;
+  return (
+    <StoryPageContext.Provider value={value}>
+      {children}
+    </StoryPageContext.Provider>
+  );
 };
 
 export const useStoryPage = (): StoryPageContextType => {
diff --git a/web/src/beta/features/Editor/Story/index.tsx b/web/src/beta/features/Editor/Story/index.tsx
index fa59e2be7..811ac301c 100644
--- a/web/src/beta/features/Editor/Story/index.tsx
+++ b/web/src/beta/features/Editor/Story/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useRef } from "react";
-
 import { Window, Area, AreaRef } from "@reearth/beta/ui/layout";
+import { FC, useRef } from "react";
 
 import { useStoryPage } from "./context";
 import PageSettingsPanel from "./PageSettingsPanel";
@@ -20,7 +19,8 @@ const Story: FC = () => {
           direction="column"
           resizableEdge="right"
           storageId="editor-story-left-area"
-          ref={leftAreaRef}>
+          ref={leftAreaRef}
+        >
           <PagesPanel showCollapseArea areaRef={leftAreaRef} />
         </Area>
         <Area
@@ -34,7 +34,8 @@ const Story: FC = () => {
           direction="column"
           resizableEdge="left"
           storageId="editor-story-right-area"
-          ref={rightAreaRef}>
+          ref={rightAreaRef}
+        >
           <PageSettingsPanel showCollapseArea areaRef={rightAreaRef} />
         </Area>
       </Area>
diff --git a/web/src/beta/features/Editor/Visualizer/convert-infobox.ts b/web/src/beta/features/Editor/Visualizer/convert-infobox.ts
index 82ad28bb2..4eb2eb4e3 100644
--- a/web/src/beta/features/Editor/Visualizer/convert-infobox.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert-infobox.ts
@@ -9,15 +9,13 @@ import { processProperty as processNewProperty } from "./processNewProperty";
 export default (
   orig: NLSInfobox | null | undefined,
   parent: NLSInfobox | null | undefined,
-  blockNames?: {
-    [key: string]: string;
-  },
+  blockNames?: Record<string, string>,
 ): Layer["infobox"] => {
   const used = orig || parent;
   if (!used) return;
   return {
     property: processNewProperty(parent?.property, orig?.property),
-    blocks: used.blocks?.map<InfoboxBlock>(b => ({
+    blocks: used.blocks?.map<InfoboxBlock>((b) => ({
       id: b.id,
       name: blockNames?.[b.extensionId] ?? "Infobox Block",
       pluginId: b.pluginId,
diff --git a/web/src/beta/features/Editor/Visualizer/convert-story.ts b/web/src/beta/features/Editor/Visualizer/convert-story.ts
index 9f0080e5e..8ec7059a7 100644
--- a/web/src/beta/features/Editor/Visualizer/convert-story.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert-story.ts
@@ -5,26 +5,32 @@ import {
 } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
 import { convert } from "@reearth/services/api/propertyApi/utils";
 import { Scene } from "@reearth/services/api/sceneApi";
-import { StoryPage as GqlStoryPage, StoryBlock as GqlStoryBlock } from "@reearth/services/gql";
+import {
+  StoryPage as GqlStoryPage,
+  StoryBlock as GqlStoryBlock,
+} from "@reearth/services/gql";
 
 import { processProperty } from "./convert";
 import { processProperty as processNewProperty } from "./processNewProperty";
 
-export const convertStory = (scene?: Scene, storyId?: string): Story | undefined => {
-  const story = scene?.stories.find(s => s.id === storyId);
+export const convertStory = (
+  scene?: Scene,
+  storyId?: string,
+): Story | undefined => {
+  const story = scene?.stories.find((s) => s.id === storyId);
   const installedBlockNames = (scene?.plugins ?? [])
-    .flatMap(p =>
+    .flatMap((p) =>
       (p.plugin?.extensions ?? [])
-        .filter(e => e.type === "StoryBlock")
-        .map(e => ({ [e.extensionId]: e.translatedName ?? e.name }))
-        .filter((e): e is { [key: string]: string } => !!e),
+        .filter((e) => e.type === "StoryBlock")
+        .map((e) => ({ [e.extensionId]: e.translatedName ?? e.name }))
+        .filter((e): e is Record<string, string> => !!e),
     )
-    .reduce((result, obj) => ({ ...result, ...obj }), {});
+    .reduce((result, obj) => Object.assign(result, obj), {});
 
   if (!story) return undefined;
 
   const storyPages = (pages: GqlStoryPage[]): StoryPage[] =>
-    pages.map(p => ({
+    pages.map((p) => ({
       id: p.id,
       title: p.title,
       propertyId: p.propertyId,
@@ -33,7 +39,7 @@ export const convertStory = (scene?: Scene, storyId?: string): Story | undefined
       blocks: storyBlocks(p.blocks),
     }));
   const storyBlocks = (blocks: GqlStoryBlock[]): StoryBlock[] =>
-    blocks.map(b => ({
+    blocks.map((b) => ({
       id: b.id,
       pluginId: b.pluginId,
       extensionId: b.extensionId,
diff --git a/web/src/beta/features/Editor/Visualizer/convert.ts b/web/src/beta/features/Editor/Visualizer/convert.ts
index 615e57477..420f03543 100644
--- a/web/src/beta/features/Editor/Visualizer/convert.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert.ts
@@ -12,7 +12,10 @@ import {
   isBuiltinWidget,
 } from "@reearth/beta/features/Visualizer/Crust/Widgets";
 import { WidgetAreaPadding } from "@reearth/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types";
-import { DEFAULT_LAYER_STYLE, valueTypeFromGQL } from "@reearth/beta/utils/value";
+import {
+  DEFAULT_LAYER_STYLE,
+  valueTypeFromGQL,
+} from "@reearth/beta/utils/value";
 import { LayerAppearanceTypes } from "@reearth/core";
 import type { Layer } from "@reearth/core";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
@@ -69,7 +72,7 @@ export const convertWidgets = (
     }
   | undefined => {
   const layoutConstraint = scene?.plugins
-    ?.map(p =>
+    ?.map((p) =>
       p.plugin?.extensions.reduce<{
         [w in string]: WidgetLayoutConstraint & { floating: boolean };
       }>(
@@ -92,7 +95,11 @@ export const convertWidgets = (
     .reduce((a, b) => ({ ...a, ...b }), {});
 
   const floating = scene?.widgets
-    ?.filter(w => w.enabled && layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating)
+    ?.filter(
+      (w) =>
+        w.enabled &&
+        layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating,
+    )
     .map(
       (w): Widget => ({
         id: w.id,
@@ -104,7 +111,11 @@ export const convertWidgets = (
     );
 
   const widgets = scene?.widgets
-    ?.filter(w => w.enabled && !layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating)
+    ?.filter(
+      (w) =>
+        w.enabled &&
+        !layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating,
+    )
     .map(
       (w): Widget => ({
         id: w.id,
@@ -127,7 +138,9 @@ export const convertWidgets = (
     };
   };
 
-  const widgetSection = (section?: Maybe<WidgetSectionType>): WidgetSection | undefined => {
+  const widgetSection = (
+    section?: Maybe<WidgetSectionType>,
+  ): WidgetSection | undefined => {
     const top = widgetArea(section?.top);
     const middle = widgetArea(section?.middle);
     const bottom = widgetArea(section?.bottom);
@@ -143,7 +156,7 @@ export const convertWidgets = (
     const align = area?.align.toLowerCase() as Alignment | undefined;
     const padding = area?.padding as WidgetAreaPadding | undefined;
     const areaWidgets: Widget[] | undefined = area?.widgetIds
-      .map<Widget | undefined>(w => widgets?.find(w2 => w === w2.id))
+      .map<Widget | undefined>((w) => widgets?.find((w2) => w === w2.id))
       .filter((w): w is Widget => !!w);
     if (!areaWidgets || (areaWidgets && areaWidgets.length < 1)) return;
     return {
@@ -162,8 +175,8 @@ export const convertWidgets = (
   };
 
   const ownBuiltinWidgets = scene?.widgets
-    ?.filter(w => w.enabled)
-    .map(w => {
+    ?.filter((w) => w.enabled)
+    .map((w) => {
       return `${w.pluginId}/${w.extensionId}` as keyof BuiltinWidgets;
     })
     .filter(isBuiltinWidget);
@@ -200,8 +213,8 @@ export const processProperty = (
       ...a,
       [b.schemaGroupId]: {
         schema: b,
-        orig: orig?.items.find(i => i.schemaGroupId === b.schemaGroupId),
-        parent: parent?.items.find(i => i.schemaGroupId === b.schemaGroupId),
+        orig: orig?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
+        parent: parent?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
       },
     }),
     {},
@@ -216,7 +229,13 @@ export const processProperty = (
           }
           return [
             key,
-            processPropertyGroups(schema, undefined, undefined, linkedDatasetId, datasets),
+            processPropertyGroups(
+              schema,
+              undefined,
+              undefined,
+              linkedDatasetId,
+              datasets,
+            ),
           ];
         }
 
@@ -227,8 +246,14 @@ export const processProperty = (
           const used = orig || parent;
           return [
             key,
-            used?.groups.map(g => ({
-              ...processPropertyGroups(schema, g, undefined, linkedDatasetId, datasets),
+            used?.groups.map((g) => ({
+              ...processPropertyGroups(
+                schema,
+                g,
+                undefined,
+                linkedDatasetId,
+                datasets,
+              ),
               id: g.id,
             })),
           ];
@@ -238,7 +263,16 @@ export const processProperty = (
           (!orig || orig.__typename === "PropertyGroup") &&
           (!parent || parent.__typename === "PropertyGroup")
         ) {
-          return [key, processPropertyGroups(schema, parent, orig, linkedDatasetId, datasets)];
+          return [
+            key,
+            processPropertyGroups(
+              schema,
+              parent,
+              orig,
+              linkedDatasetId,
+              datasets,
+            ),
+          ];
         }
         return [key, null];
       })
@@ -267,8 +301,8 @@ const processPropertyGroups = (
       ...a,
       [b.fieldId]: {
         schema: b,
-        parent: parent?.fields.find(i => i.fieldId === b.fieldId),
-        orig: original?.fields.find(i => i.fieldId === b.fieldId),
+        parent: parent?.fields.find((i) => i.fieldId === b.fieldId),
+        orig: original?.fields.find((i) => i.fieldId === b.fieldId),
       },
     }),
     {},
@@ -283,7 +317,15 @@ const processPropertyGroups = (
         const datasetSchemaId = used?.links?.[0]?.datasetSchemaId;
         const datasetFieldId = used?.links?.[0]?.datasetSchemaFieldId;
         if (datasetSchemaId && linkedDatasetId && datasetFieldId) {
-          return [key, datasetValue(datasets, datasetSchemaId, linkedDatasetId, datasetFieldId)];
+          return [
+            key,
+            datasetValue(
+              datasets,
+              datasetSchemaId,
+              linkedDatasetId,
+              datasetFieldId,
+            ),
+          ];
         }
 
         return [key, valueFromGQL(used.value, used.type)?.value];
@@ -307,7 +349,7 @@ export const datasetValue = (
   })?.[0];
 
   if (!fieldName) return;
-  return dataset.datasets.find(d => d[""] === datasetId)?.[fieldName];
+  return dataset.datasets.find((d) => d[""] === datasetId)?.[fieldName];
 };
 
 export const valueFromGQL = (val: any, type: GQLValueType) => {
@@ -347,13 +389,11 @@ export function processLayers(
   newLayers?: NLSLayer[],
   layerStyles?: LayerStyle[],
   parent?: RawNLSLayer | null | undefined,
-  infoboxBlockNames?: {
-    [key: string]: string;
-  },
+  infoboxBlockNames?: Record<string, string>,
 ): Layer[] | undefined {
   const getLayerStyleValue = (id?: string) => {
     const layerStyleValue: Partial<LayerAppearanceTypes> = layerStyles?.find(
-      a => a.id === id,
+      (a) => a.id === id,
     )?.value;
     if (typeof layerStyleValue === "object") {
       try {
@@ -366,14 +406,14 @@ export function processLayers(
     return DEFAULT_LAYER_STYLE;
   };
 
-  return newLayers?.map(nlsLayer => {
+  return newLayers?.map((nlsLayer) => {
     const layerStyle = getLayerStyleValue(nlsLayer.config?.layerStyleId);
 
     const sketchLayerData = nlsLayer.isSketch && {
       ...nlsLayer.config.data,
       value: {
         type: "FeatureCollection",
-        features: nlsLayer.sketch?.featureCollection?.features.map(f => ({
+        features: nlsLayer.sketch?.featureCollection?.features.map((f) => ({
           ...f,
           geometry: f.geometry[0],
         })),
@@ -389,7 +429,11 @@ export function processLayers(
       visible: nlsLayer.visible,
       sketch: nlsLayer.sketch,
       isSketch: nlsLayer.isSketch,
-      infobox: convertInfobox(nlsLayer.infobox, parent?.infobox, infoboxBlockNames),
+      infobox: convertInfobox(
+        nlsLayer.infobox,
+        parent?.infobox,
+        infoboxBlockNames,
+      ),
       properties: nlsLayer.config?.properties,
       defines: nlsLayer.config?.defines,
       events: nlsLayer.config?.events,
diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
index a737fec01..0287a7677 100644
--- a/web/src/beta/features/Editor/Visualizer/hooks.ts
+++ b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -1,12 +1,18 @@
-import { useMemo, useEffect, useCallback, useState, MutableRefObject } from "react";
-
-import type { Alignment, Location } from "@reearth/beta/features/Visualizer/Crust";
+import type {
+  Alignment,
+  Location,
+} from "@reearth/beta/features/Visualizer/Crust";
 import {
   convertData,
   sceneProperty2ViewerPropertyMapping,
 } from "@reearth/beta/utils/convert-object";
 import { Camera } from "@reearth/beta/utils/value";
-import type { LatLng, ComputedLayer, ComputedFeature, ViewerProperty } from "@reearth/core";
+import type {
+  LatLng,
+  ComputedLayer,
+  ComputedFeature,
+  ViewerProperty,
+} from "@reearth/core";
 import {
   useLayersFetcher,
   useSceneFetcher,
@@ -17,6 +23,13 @@ import {
   useInfoboxFetcher,
 } from "@reearth/services/api";
 import { config } from "@reearth/services/config";
+import {
+  useMemo,
+  useEffect,
+  useCallback,
+  useState,
+  MutableRefObject,
+} from "react";
 
 import { useCurrentCamera } from "../atoms";
 import type { LayerSelectProps, SelectedLayer } from "../hooks/useLayers";
@@ -50,8 +63,12 @@ export default ({
   const { useGetLayerStylesQuery } = useLayerStylesFetcher();
   const { useSceneQuery } = useSceneFetcher();
   const { useCreateStoryBlock, useDeleteStoryBlock } = useStorytellingFetcher();
-  const { useUpdatePropertyValue, useAddPropertyItem, useMovePropertyItem, useRemovePropertyItem } =
-    usePropertyFetcher();
+  const {
+    useUpdatePropertyValue,
+    useAddPropertyItem,
+    useMovePropertyItem,
+    useRemovePropertyItem,
+  } = usePropertyFetcher();
   const {
     useInstallableInfoboxBlocksQuery,
     useCreateInfoboxBlock,
@@ -73,7 +90,9 @@ export default ({
   const { scene } = useSceneQuery({ sceneId });
 
   const [zoomedLayerId, zoomToLayer] = useState<string | undefined>(undefined);
-  const [initialCamera, setInitialCamera] = useState<Camera | undefined>(undefined);
+  const [initialCamera, setInitialCamera] = useState<Camera | undefined>(
+    undefined,
+  );
 
   const { viewerProperty, cesiumIonAccessToken } = useMemo(() => {
     const sceneProperty = processProperty(scene?.property);
@@ -83,7 +102,10 @@ export default ({
     }
     return {
       viewerProperty: sceneProperty
-        ? (convertData(sceneProperty, sceneProperty2ViewerPropertyMapping) as ViewerProperty)
+        ? (convertData(
+            sceneProperty,
+            sceneProperty2ViewerPropertyMapping,
+          ) as ViewerProperty)
         : undefined,
       cesiumIonAccessToken,
     };
@@ -93,28 +115,42 @@ export default ({
     setCurrentCamera(initialCamera);
   }, [initialCamera, setCurrentCamera]);
 
-  const { installableInfoboxBlocks } = useInstallableInfoboxBlocksQuery({ sceneId });
+  const { installableInfoboxBlocks } = useInstallableInfoboxBlocksQuery({
+    sceneId,
+  });
 
   const infoboxBlockNames = useMemo(
     () =>
       installableInfoboxBlocks
-        ?.map(ib => ({ [ib.extensionId]: ib.name }))
-        .filter((bn): bn is { [key: string]: string } => !!bn)
-        .reduce((result, obj) => ({ ...result, ...obj }), {}),
+        ?.map((ib) => ({ [ib.extensionId]: ib.name }))
+        .filter((bn): bn is Record<string, string> => !!bn)
+        .reduce((result, obj) => {
+          Object.assign(result, obj);
+          return result;
+        }, {}),
     [installableInfoboxBlocks],
   );
 
   const layers = useMemo(() => {
-    const processedLayers = processLayers(nlsLayers, layerStyles, undefined, infoboxBlockNames);
+    const processedLayers = processLayers(
+      nlsLayers,
+      layerStyles,
+      undefined,
+      infoboxBlockNames,
+    );
     if (!showStoryPanel) return processedLayers;
-    return processedLayers?.map(layer => ({
+    return processedLayers?.map((layer) => ({
       ...layer,
       visible: true,
     }));
   }, [nlsLayers, layerStyles, infoboxBlockNames, showStoryPanel]);
 
   const handleCoreLayerSelect = useCallback(
-    (layerId?: string, computedLayer?: ComputedLayer, computedFeature?: ComputedFeature) => {
+    (
+      layerId?: string,
+      computedLayer?: ComputedLayer,
+      computedFeature?: ComputedFeature,
+    ) => {
       if (
         (!layerId && !computedFeature && !selectedLayer) ??
         (layerId === selectedLayer?.layer?.id || !computedFeature)
@@ -142,7 +178,10 @@ export default ({
   const widgets = useMemo(() => convertWidgets(scene), [scene]);
 
   const handleWidgetUpdate = useCallback(
-    async (id: string, update: { location?: Location; extended?: boolean; index?: number }) => {
+    async (
+      id: string,
+      update: { location?: Location; extended?: boolean; index?: number },
+    ) => {
       await useUpdateWidget(id, update, sceneId);
     },
     [sceneId, useUpdateWidget],
@@ -151,7 +190,12 @@ export default ({
   const handleWidgetAlignSystemUpdate = useCallback(
     async (location: Location, align: Alignment) => {
       await useUpdateWidgetAlignSystem(
-        { zone: location.zone, section: location.section, area: location.area, align },
+        {
+          zone: location.zone,
+          section: location.section,
+          area: location.area,
+          align,
+        },
         sceneId,
       );
     },
@@ -161,10 +205,10 @@ export default ({
   // Plugin
   const pluginProperty = useMemo(
     () =>
-      scene?.plugins.reduce<{ [key: string]: any }>(
-        (a, b) => ({ ...a, [b.pluginId]: processProperty(b.property) }),
-        {},
-      ),
+      scene?.plugins.reduce<Record<string, any>>((a, b) => {
+        a[b.pluginId] = processProperty(b.property);
+        return a;
+      }, {}),
     [scene?.plugins],
   );
 
@@ -216,7 +260,12 @@ export default ({
   );
 
   const handleStoryBlockCreate = useCallback(
-    async (pageId?: string, extensionId?: string, pluginId?: string, index?: number) => {
+    async (
+      pageId?: string,
+      extensionId?: string,
+      pluginId?: string,
+      index?: number,
+    ) => {
       if (!extensionId || !pluginId || !storyId || !pageId) return;
       await useCreateStoryBlock({
         pluginId,
@@ -247,7 +296,15 @@ export default ({
       v?: any,
     ) => {
       if (!propertyId || !schemaItemId || !fieldId || !vt) return;
-      await useUpdatePropertyValue(propertyId, schemaItemId, itemId, fieldId, "en", v, vt);
+      await useUpdatePropertyValue(
+        propertyId,
+        schemaItemId,
+        itemId,
+        fieldId,
+        "en",
+        v,
+        vt,
+      );
     },
     [useUpdatePropertyValue],
   );
@@ -261,8 +318,14 @@ export default ({
   );
 
   const handlePropertyItemMove = useCallback(
-    async (propertyId?: string, schemaGroupId?: string, itemId?: string, index?: number) => {
-      if (!propertyId || !schemaGroupId || !itemId || index === undefined) return;
+    async (
+      propertyId?: string,
+      schemaGroupId?: string,
+      itemId?: string,
+      index?: number,
+    ) => {
+      if (!propertyId || !schemaGroupId || !itemId || index === undefined)
+        return;
       await useMovePropertyItem(propertyId, schemaGroupId, itemId, index);
     },
     [useMovePropertyItem],
@@ -293,7 +356,10 @@ export default ({
     document.title = title;
   }, [isBuilt, title]);
 
-  const handleMount = useCallback(() => onVisualizerReady(true), [onVisualizerReady]);
+  const handleMount = useCallback(
+    () => onVisualizerReady(true),
+    [onVisualizerReady],
+  );
 
   return {
     viewerProperty,
diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx
index 14dda0033..183b81eae 100644
--- a/web/src/beta/features/Editor/Visualizer/index.tsx
+++ b/web/src/beta/features/Editor/Visualizer/index.tsx
@@ -1,5 +1,3 @@
-import { MutableRefObject, SetStateAction } from "react";
-
 import Visualizer from "@reearth/beta/features/Visualizer";
 import { type InteractionModeType } from "@reearth/beta/features/Visualizer/Crust";
 import {
@@ -10,6 +8,7 @@ import { SketchFeature, SketchType } from "@reearth/core";
 import type { MapRef } from "@reearth/core";
 import type { Story } from "@reearth/services/api/storytellingApi/utils";
 import { WidgetAreaState } from "@reearth/services/state";
+import { MutableRefObject, SetStateAction } from "react";
 
 import type { LayerSelectProps, SelectedLayer } from "../hooks/useLayers";
 
@@ -36,7 +35,9 @@ export type Props = {
   onVisualizerReady: (value: boolean) => void;
   onCoreLayerSelect: (props: LayerSelectProps) => void;
   setSelectedStoryPageId: (value: string | undefined) => void;
-  selectWidgetArea: (update?: SetStateAction<WidgetAreaState | undefined>) => void;
+  selectWidgetArea: (
+    update?: SetStateAction<WidgetAreaState | undefined>,
+  ) => void;
 };
 
 const EditorVisualizer: React.FC<Props> = ({
diff --git a/web/src/beta/features/Editor/Visualizer/processNewProperty.ts b/web/src/beta/features/Editor/Visualizer/processNewProperty.ts
index b15630d29..e5911cdd1 100644
--- a/web/src/beta/features/Editor/Visualizer/processNewProperty.ts
+++ b/web/src/beta/features/Editor/Visualizer/processNewProperty.ts
@@ -32,8 +32,8 @@ export const processProperty = (
       ...a,
       [b.schemaGroupId]: {
         schema: b,
-        orig: orig?.items.find(i => i.schemaGroupId === b.schemaGroupId),
-        parent: parent?.items.find(i => i.schemaGroupId === b.schemaGroupId),
+        orig: orig?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
+        parent: parent?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
       },
     }),
     {},
@@ -48,7 +48,13 @@ export const processProperty = (
           }
           return [
             key,
-            processPropertyGroups(schema, undefined, undefined, linkedDatasetId, datasets),
+            processPropertyGroups(
+              schema,
+              undefined,
+              undefined,
+              linkedDatasetId,
+              datasets,
+            ),
           ];
         }
 
@@ -59,8 +65,14 @@ export const processProperty = (
           const used = orig || parent;
           return [
             key,
-            used?.groups.map(g => ({
-              ...processPropertyGroups(schema, g, undefined, linkedDatasetId, datasets),
+            used?.groups.map((g) => ({
+              ...processPropertyGroups(
+                schema,
+                g,
+                undefined,
+                linkedDatasetId,
+                datasets,
+              ),
               id: g.id,
             })),
           ];
@@ -70,7 +82,16 @@ export const processProperty = (
           (!orig || orig.__typename === "PropertyGroup") &&
           (!parent || parent.__typename === "PropertyGroup")
         ) {
-          return [key, processPropertyGroups(schema, parent, orig, linkedDatasetId, datasets)];
+          return [
+            key,
+            processPropertyGroups(
+              schema,
+              parent,
+              orig,
+              linkedDatasetId,
+              datasets,
+            ),
+          ];
         }
         return [key, null];
       })
@@ -99,8 +120,8 @@ const processPropertyGroups = (
       ...a,
       [b.fieldId]: {
         schema: b,
-        parent: parent?.fields.find(i => i.fieldId === b.fieldId),
-        orig: original?.fields.find(i => i.fieldId === b.fieldId),
+        parent: parent?.fields.find((i) => i.fieldId === b.fieldId),
+        orig: original?.fields.find((i) => i.fieldId === b.fieldId),
       },
     }),
     {},
@@ -139,7 +160,12 @@ const processPropertyGroups = (
           key,
           {
             ...fieldMeta,
-            value: datasetValue(datasets, datasetSchemaId, linkedDatasetId, datasetFieldId),
+            value: datasetValue(
+              datasets,
+              datasetSchemaId,
+              linkedDatasetId,
+              datasetFieldId,
+            ),
           },
         ];
       }
diff --git a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts
index 7d0a0127e..5fbaf3cb1 100644
--- a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts
@@ -1,11 +1,12 @@
-import { SetStateAction, useCallback } from "react";
-
 import { useWidgetsFetcher } from "@reearth/services/api";
 import { WidgetAreaState } from "@reearth/services/state";
+import { SetStateAction, useCallback } from "react";
 
 type Props = {
   sceneId?: string;
-  selectWidgetArea: (update?: SetStateAction<WidgetAreaState | undefined>) => void;
+  selectWidgetArea: (
+    update?: SetStateAction<WidgetAreaState | undefined>,
+  ) => void;
 };
 
 export default ({ sceneId, selectWidgetArea }: Props) => {
@@ -14,7 +15,10 @@ export default ({ sceneId, selectWidgetArea }: Props) => {
   const handleWidgetAreaStateChange = useCallback(
     async (widgetAreaState?: WidgetAreaState) => {
       if (!sceneId || !widgetAreaState) return;
-      const results = await useUpdateWidgetAlignSystem(widgetAreaState, sceneId);
+      const results = await useUpdateWidgetAlignSystem(
+        widgetAreaState,
+        sceneId,
+      );
       if (results.status === "success") {
         selectWidgetArea(widgetAreaState);
       }
diff --git a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
index 381549e4d..7e60ae1c4 100644
--- a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
@@ -11,9 +11,16 @@ import { useWidgetsPage } from "../context";
 import useHooks from "./hooks";
 
 const ContainerSettingsPanel: FC = () => {
-  const { sceneId, selectedWidgetArea: widgetArea, selectWidgetArea } = useWidgetsPage();
+  const {
+    sceneId,
+    selectedWidgetArea: widgetArea,
+    selectWidgetArea,
+  } = useWidgetsPage();
 
-  const { handleWidgetAreaStateChange } = useHooks({ sceneId, selectWidgetArea });
+  const { handleWidgetAreaStateChange } = useHooks({
+    sceneId,
+    selectWidgetArea,
+  });
 
   const t = useT();
 
@@ -23,12 +30,12 @@ const ContainerSettingsPanel: FC = () => {
         <NumberField
           commonTitle={t("Padding top")}
           value={widgetArea?.padding?.top.toString()}
-          onBlur={newVal => {
+          onBlur={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                top: Number(newVal) ?? 0,
+                top: Number(newVal),
               },
             });
           }}
@@ -36,12 +43,12 @@ const ContainerSettingsPanel: FC = () => {
         <NumberField
           commonTitle={t("Padding right")}
           value={widgetArea?.padding?.right.toString()}
-          onBlur={newVal => {
+          onBlur={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                right: Number(newVal) ?? 0,
+                right: Number(newVal),
               },
             });
           }}
@@ -49,12 +56,12 @@ const ContainerSettingsPanel: FC = () => {
         <NumberField
           commonTitle={t("Padding bottom")}
           value={widgetArea?.padding?.bottom.toString()}
-          onBlur={newVal => {
+          onBlur={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                bottom: Number(newVal) ?? 0,
+                bottom: Number(newVal),
               },
             });
           }}
@@ -62,12 +69,12 @@ const ContainerSettingsPanel: FC = () => {
         <NumberField
           commonTitle={t("Padding left")}
           value={widgetArea?.padding?.left.toString()}
-          onBlur={newVal => {
+          onBlur={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                left: Number(newVal) ?? 0,
+                left: Number(newVal),
               },
             });
           }}
@@ -76,17 +83,17 @@ const ContainerSettingsPanel: FC = () => {
         <NumberField
           commonTitle={t("Gap spacing")}
           value={(widgetArea?.gap ?? 6).toString()}
-          onBlur={newVal => {
+          onBlur={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
-              gap: Number(newVal) ?? 0,
+              gap: Number(newVal),
             });
           }}
         />
         <SwitchField
           commonTitle={t("Align centered")}
           value={!!widgetArea?.centered}
-          onChange={newVal => {
+          onChange={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
               centered: newVal,
@@ -96,7 +103,7 @@ const ContainerSettingsPanel: FC = () => {
         <ColorField
           commonTitle={t("Background color")}
           value={widgetArea?.background}
-          onChange={newVal => {
+          onChange={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
               background: newVal,
diff --git a/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx b/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx
index 009eebbfb..e5500cbd5 100644
--- a/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx
@@ -1,9 +1,8 @@
-import { FC, useEffect } from "react";
-
 import { Switcher, Typography } from "@reearth/beta/lib/reearth-ui";
 import { Panel } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useEffect } from "react";
 
 import { useWidgetsPage } from "../context";
 
@@ -29,10 +28,16 @@ const WASToolsPanel: FC = () => {
   return (
     <Panel extend>
       <StyledSecondaryNav>
-        <Devices selectedDevice={selectedDevice} onDeviceChange={handleDeviceChange} />
+        <Devices
+          selectedDevice={selectedDevice}
+          onDeviceChange={handleDeviceChange}
+        />
         <AlignSystem>
           <Typography size="body">{t("Align System")}</Typography>
-          <Switcher value={showWASEditor} onChange={handleShowWASEditorToggle} />
+          <Switcher
+            value={showWASEditor}
+            onChange={handleShowWASEditorToggle}
+          />
         </AlignSystem>
       </StyledSecondaryNav>
     </Panel>
diff --git a/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts b/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts
index b77abdea4..8e2a3bc58 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts
@@ -1,7 +1,6 @@
-import { useMemo } from "react";
-
 import { filterVisibleItems } from "@reearth/beta/ui/fields/utils";
 import { useWidgetsFetcher } from "@reearth/services/api";
+import { useMemo } from "react";
 
 import { SelectedWidget } from "../../hooks/useWidgets";
 
@@ -17,7 +16,10 @@ export default ({ sceneId, selectedWidget }: Props) => {
 
   const visibleItems = useMemo(
     () =>
-      filterVisibleItems(installedWidgets?.find(w => w.id === selectedWidget?.id)?.property.items),
+      filterVisibleItems(
+        installedWidgets?.find((w) => w.id === selectedWidget?.id)?.property
+          .items,
+      ),
     [installedWidgets, selectedWidget],
   );
 
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx
index cf32b48ff..25a4a6102 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx
@@ -1,14 +1,21 @@
-import { FC, useCallback, useMemo, useState } from "react";
-
-import { Button, IconName, PopupMenu, PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  IconName,
+  PopupMenu,
+  PopupMenuItem,
+} from "@reearth/beta/lib/reearth-ui";
 import { InstallableWidget } from "@reearth/services/api/widgetsApi/utils";
+import { FC, useCallback, useMemo, useState } from "react";
 
 type ActionAreaProps = {
   installableWidgets?: InstallableWidget[];
   onWidgetAdd: (id?: string | undefined) => Promise<void>;
 };
 
-const ActionArea: FC<ActionAreaProps> = ({ installableWidgets, onWidgetAdd }) => {
+const ActionArea: FC<ActionAreaProps> = ({
+  installableWidgets,
+  onWidgetAdd,
+}) => {
   const [open, setOpen] = useState(false);
 
   const handleWidgetAdd = useCallback(
@@ -22,8 +29,8 @@ const ActionArea: FC<ActionAreaProps> = ({ installableWidgets, onWidgetAdd }) =>
   const items: PopupMenuItem[] = useMemo(
     () =>
       (installableWidgets ?? [])
-        .filter(w => !w.disabled)
-        .map(w => ({
+        .filter((w) => !w.disabled)
+        .map((w) => ({
           id: `${w.pluginId}/${w.extensionId}`,
           title: w.title,
           icon: w.icon as IconName,
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx
index 18a25e30d..c659721f8 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx
@@ -1,8 +1,7 @@
-import { FC, useMemo } from "react";
-
 import { EntryItem } from "@reearth/beta/ui/components";
 import { InstalledWidget } from "@reearth/services/api/widgetsApi/utils";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 type ListItemProps = {
   item: InstalledWidget;
@@ -11,7 +10,12 @@ type ListItemProps = {
   onItemSelect?: (id: string) => void;
 };
 
-const ListItem: FC<ListItemProps> = ({ item, selected, onItemDelete, onItemSelect }) => {
+const ListItem: FC<ListItemProps> = ({
+  item,
+  selected,
+  onItemDelete,
+  onItemSelect,
+}) => {
   const optionsMenu = useMemo(
     () => [
       {
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts
index 4d81755c0..20586268d 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts
@@ -1,6 +1,5 @@
-import { useCallback } from "react";
-
 import { useWidgetsFetcher } from "@reearth/services/api";
+import { useCallback } from "react";
 
 import { SelectedWidget } from "../../hooks/useWidgets";
 
@@ -36,7 +35,7 @@ export default ({ sceneId, selectWidget }: Props) => {
   );
 
   const handleWidgetSelection = (id: string) => {
-    const w = installedWidgets?.find(w => w.id === id);
+    const w = installedWidgets?.find((w) => w.id === id);
     if (!w) return;
     selectWidget({
       id: w.id,
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx
index 0f99ed396..8606e282c 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx
@@ -1,8 +1,7 @@
-import { FC } from "react";
-
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { useWidgetsPage } from "../context";
 
@@ -34,11 +33,15 @@ const WidgetManagerPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       extend
       storageId="editor-widgets-widget-manager-panel"
       showCollapseArea={showCollapseArea}
-      areaRef={areaRef}>
+      areaRef={areaRef}
+    >
       <Wrapper>
-        <ActionArea installableWidgets={installableWidgets} onWidgetAdd={handleWidgetAdd} />
+        <ActionArea
+          installableWidgets={installableWidgets}
+          onWidgetAdd={handleWidgetAdd}
+        />
         <InstalledWidgetsList>
-          {installedWidgets?.map(w => (
+          {installedWidgets?.map((w) => (
             <ListItem
               key={w.id}
               item={w}
diff --git a/web/src/beta/features/Editor/Widgets/context.tsx b/web/src/beta/features/Editor/Widgets/context.tsx
index 46fd0f8a9..95af40a81 100644
--- a/web/src/beta/features/Editor/Widgets/context.tsx
+++ b/web/src/beta/features/Editor/Widgets/context.tsx
@@ -1,8 +1,7 @@
-import { createContext, useContext, ReactNode, SetStateAction } from "react";
-
 import { AreaSize } from "@reearth/beta/ui/layout";
 import { FlyTo } from "@reearth/core";
 import { WidgetAreaState } from "@reearth/services/state";
+import { createContext, useContext, ReactNode, SetStateAction } from "react";
 
 import { SelectedWidget } from "../hooks/useWidgets";
 
@@ -14,7 +13,9 @@ export interface WidgetsPageContextType {
   selectedDevice?: Device;
   handleShowWASEditorToggle: () => void;
   handleDeviceChange: (device: Device) => void;
-  selectWidgetArea: (update?: SetStateAction<WidgetAreaState | undefined>) => void;
+  selectWidgetArea: (
+    update?: SetStateAction<WidgetAreaState | undefined>,
+  ) => void;
   sceneId?: string;
   selectedWidget?: SelectedWidget;
   selectWidget: (value: SelectedWidget | undefined) => void;
@@ -22,7 +23,9 @@ export interface WidgetsPageContextType {
   handleFlyTo?: FlyTo;
 }
 
-const WidgetsPageContext = createContext<WidgetsPageContextType | undefined>(undefined);
+const WidgetsPageContext = createContext<WidgetsPageContextType | undefined>(
+  undefined,
+);
 
 export const WidgetsPageProvider = ({
   value,
@@ -31,7 +34,11 @@ export const WidgetsPageProvider = ({
   value: WidgetsPageContextType;
   children: ReactNode;
 }) => {
-  return <WidgetsPageContext.Provider value={value}>{children}</WidgetsPageContext.Provider>;
+  return (
+    <WidgetsPageContext.Provider value={value}>
+      {children}
+    </WidgetsPageContext.Provider>
+  );
 };
 
 export const useWidgetsPage = (): WidgetsPageContextType => {
diff --git a/web/src/beta/features/Editor/Widgets/index.tsx b/web/src/beta/features/Editor/Widgets/index.tsx
index a53c7b847..380b86006 100644
--- a/web/src/beta/features/Editor/Widgets/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useRef } from "react";
-
 import { Window, Area, AreaRef } from "@reearth/beta/ui/layout";
+import { FC, useRef } from "react";
 
 import ContainerSettingsPanel from "./ContainerSettingsPanel";
 import { useWidgetsPage } from "./context";
@@ -9,7 +8,8 @@ import WidgetInspectorPanel from "./WidgetInspectorPanel";
 import WidgetManagerPanel from "./WidgetManagerPanel";
 
 const Widgets: FC = () => {
-  const { handleVisualizerResize, selectedWidgetArea, selectedWidget } = useWidgetsPage();
+  const { handleVisualizerResize, selectedWidgetArea, selectedWidget } =
+    useWidgetsPage();
 
   const windowRef = useRef<HTMLDivElement>(null);
   const rightAreaRef = useRef<AreaRef>(null);
@@ -21,13 +21,19 @@ const Widgets: FC = () => {
           <Area initialHeight={34}>
             <WASToolsPanel />
           </Area>
-          <Area extend onResize={handleVisualizerResize} windowRef={windowRef} passive />
+          <Area
+            extend
+            onResize={handleVisualizerResize}
+            windowRef={windowRef}
+            passive
+          />
         </Area>
         <Area
           direction="column"
           resizableEdge="left"
           storageId="editor-widgets-right-area"
-          ref={rightAreaRef}>
+          ref={rightAreaRef}
+        >
           <WidgetManagerPanel showCollapseArea areaRef={rightAreaRef} />
           {selectedWidget && <WidgetInspectorPanel />}
           {selectedWidgetArea && <ContainerSettingsPanel />}
diff --git a/web/src/beta/features/Editor/hooks/index.ts b/web/src/beta/features/Editor/hooks/index.ts
index 33cf09877..ec366e71b 100644
--- a/web/src/beta/features/Editor/hooks/index.ts
+++ b/web/src/beta/features/Editor/hooks/index.ts
@@ -70,7 +70,12 @@ export default ({ sceneId, projectId, tab }: Props) => {
     visualizerRef,
   });
 
-  const { handleSceneSettingSelect, scene, selectedSceneSetting, sceneSettings } = useScene({
+  const {
+    handleSceneSettingSelect,
+    scene,
+    selectedSceneSetting,
+    sceneSettings,
+  } = useScene({
     sceneId,
   });
 
diff --git a/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts b/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts
index 21a71024a..65667ce07 100644
--- a/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts
+++ b/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts
@@ -1,7 +1,6 @@
-import { useCallback, useRef, useState } from "react";
-
 import { AreaSize } from "@reearth/beta/ui/layout";
 import { FlyTo, MapRef } from "@reearth/core";
+import { useCallback, useRef, useState } from "react";
 
 export default () => {
   const visualizerRef = useRef<MapRef | null>(null);
@@ -14,7 +13,12 @@ export default () => {
   );
 
   // Visualizer Size
-  const [visualizerSize, setVisualizerSize] = useState({ width: 0, height: 0, left: 0, top: 0 });
+  const [visualizerSize, setVisualizerSize] = useState({
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0,
+  });
   const isVisualizerResizing = useRef(false);
 
   const handleVisualizerResize = useCallback((size: AreaSize) => {
diff --git a/web/src/beta/features/Editor/hooks/useLayerStyles.ts b/web/src/beta/features/Editor/hooks/useLayerStyles.ts
index d7c510746..5ac78200b 100644
--- a/web/src/beta/features/Editor/hooks/useLayerStyles.ts
+++ b/web/src/beta/features/Editor/hooks/useLayerStyles.ts
@@ -1,8 +1,7 @@
-import { useCallback, useMemo, useState } from "react";
-
 import { LayerAppearanceTypes } from "@reearth/core";
 import { useLayerStylesFetcher } from "@reearth/services/api";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useMemo, useState } from "react";
 
 type LayerStyleProps = {
   sceneId: string;
@@ -25,13 +24,19 @@ export type LayerStyleValueUpdateProps = {
 
 export default function ({ sceneId }: LayerStyleProps) {
   const t = useT();
-  const { useAddLayerStyle, useGetLayerStylesQuery, useRemoveLayerStyle, useUpdateLayerStyle } =
-    useLayerStylesFetcher();
-  const [selectedLayerStyleId, setSelectedLayerStyleId] = useState<string | undefined>(undefined);
+  const {
+    useAddLayerStyle,
+    useGetLayerStylesQuery,
+    useRemoveLayerStyle,
+    useUpdateLayerStyle,
+  } = useLayerStylesFetcher();
+  const [selectedLayerStyleId, setSelectedLayerStyleId] = useState<
+    string | undefined
+  >(undefined);
   const { layerStyles } = useGetLayerStylesQuery({ sceneId });
 
   const selectedLayerStyle = useMemo(
-    () => layerStyles.find(l => l.id === selectedLayerStyleId) || undefined,
+    () => layerStyles.find((l) => l.id === selectedLayerStyleId) || undefined,
     [layerStyles, selectedLayerStyleId],
   );
 
@@ -42,7 +47,7 @@ export default function ({ sceneId }: LayerStyleProps) {
 
   const handleLayerStyleDelete = useCallback(
     async (styleId: string) => {
-      const deletedPageIndex = layerStyles.findIndex(l => l.id === styleId);
+      const deletedPageIndex = layerStyles.findIndex((l) => l.id === styleId);
       if (deletedPageIndex === undefined) return;
 
       await useRemoveLayerStyle({
@@ -52,7 +57,12 @@ export default function ({ sceneId }: LayerStyleProps) {
         setSelectedLayerStyleId(undefined);
       }
     },
-    [layerStyles, selectedLayerStyleId, setSelectedLayerStyleId, useRemoveLayerStyle],
+    [
+      layerStyles,
+      selectedLayerStyleId,
+      setSelectedLayerStyleId,
+      useRemoveLayerStyle,
+    ],
   );
 
   const handleLayerStyleAdd = useCallback(
diff --git a/web/src/beta/features/Editor/hooks/useLayers.ts b/web/src/beta/features/Editor/hooks/useLayers.ts
index bdd279e24..d0a16362a 100644
--- a/web/src/beta/features/Editor/hooks/useLayers.ts
+++ b/web/src/beta/features/Editor/hooks/useLayers.ts
@@ -1,10 +1,21 @@
-import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-import type { MapRef, ComputedFeature, ComputedLayer, LayerSimple } from "@reearth/core";
+import type {
+  MapRef,
+  ComputedFeature,
+  ComputedLayer,
+  LayerSimple,
+} from "@reearth/core";
 import { useLayersFetcher } from "@reearth/services/api";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { UpdateCustomPropertySchemaInput } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 type LayerProps = {
   sceneId: string;
@@ -56,7 +67,11 @@ export type SelectedLayer = {
   computedFeature?: ComputedFeature;
 };
 
-export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerProps) {
+export default function ({
+  sceneId,
+  isVisualizerReady,
+  visualizerRef,
+}: LayerProps) {
   const t = useT();
   const {
     useGetLayersQuery,
@@ -73,7 +88,9 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
 
   useEffect(() => {
     if (!originNlsLayers) return;
-    setSortedLayerIds(prev => (prev.length > 0 ? prev : originNlsLayers.map(l => l.id)));
+    setSortedLayerIds((prev) =>
+      prev.length > 0 ? prev : originNlsLayers.map((l) => l.id),
+    );
   }, [originNlsLayers]);
 
   const nlsLayers: NLSLayer[] = useMemo(
@@ -81,15 +98,17 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
       originNlsLayers
         ? [
             ...(sortedLayerIds
-              .map(id => originNlsLayers.find(l => l.id === id))
+              .map((id) => originNlsLayers.find((l) => l.id === id))
               .filter(Boolean) as NLSLayer[]),
-            ...originNlsLayers.filter(l => !sortedLayerIds.includes(l.id)),
+            ...originNlsLayers.filter((l) => !sortedLayerIds.includes(l.id)),
           ]
         : [],
     [originNlsLayers, sortedLayerIds],
   );
 
-  const [selectedLayer, setSelectedLayer] = useState<SelectedLayer | undefined>();
+  const [selectedLayer, setSelectedLayer] = useState<
+    SelectedLayer | undefined
+  >();
   const [layerId, setLayerId] = useState<string | undefined>();
 
   const handleLayerSelect = useCallback(
@@ -100,7 +119,7 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
       setTimeout(() => {
         if (props?.layerId) {
           setSelectedLayer({
-            layer: nlsLayers.find(l => l.id === props.layerId),
+            layer: nlsLayers.find((l) => l.id === props.layerId),
             computedLayer: props?.computedLayer,
             computedFeature: props?.computedFeature,
           });
@@ -133,7 +152,7 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
 
       if (props?.layerId) {
         setSelectedLayer({
-          layer: nlsLayers.find(l => l.id === props.layerId),
+          layer: nlsLayers.find((l) => l.id === props.layerId),
           computedLayer: props?.computedLayer,
           computedFeature: props?.computedFeature,
         });
@@ -146,7 +165,7 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
 
   const handleLayerDelete = useCallback(
     async (layerId: string) => {
-      const deletedPageIndex = nlsLayers.findIndex(l => l.id === layerId);
+      const deletedPageIndex = nlsLayers.findIndex((l) => l.id === layerId);
       if (deletedPageIndex === undefined) return;
 
       await useRemoveNLSLayer({
@@ -155,7 +174,7 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
       if (layerId === selectedLayer?.layer?.id) {
         handleLayerSelect(undefined);
       }
-      setSortedLayerIds(prev => {
+      setSortedLayerIds((prev) => {
         const newSortedLayerIds = [...prev];
         newSortedLayerIds.splice(deletedPageIndex, 1);
         return newSortedLayerIds;
@@ -209,9 +228,9 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
   );
 
   useEffect(() => {
-    setSelectedLayer(prev => {
+    setSelectedLayer((prev) => {
       if (prev?.layer) {
-        const layer = nlsLayers.find(l => l.id === prev.layer?.id);
+        const layer = nlsLayers.find((l) => l.id === prev.layer?.id);
         return layer
           ? {
               ...prev,
@@ -225,7 +244,7 @@ export default function ({ sceneId, isVisualizerReady, visualizerRef }: LayerPro
 
   // TODO: support by gql mutation
   const handleLayerMove = useCallback((inp: LayerMoveProps) => {
-    setSortedLayerIds(prev => {
+    setSortedLayerIds((prev) => {
       const newSortedLayerIds = [...prev];
       const index = newSortedLayerIds.indexOf(inp.layerId);
       if (index !== -1) {
diff --git a/web/src/beta/features/Editor/hooks/useProperty.tsx b/web/src/beta/features/Editor/hooks/useProperty.tsx
index 9b30dee45..3c3f14e42 100644
--- a/web/src/beta/features/Editor/hooks/useProperty.tsx
+++ b/web/src/beta/features/Editor/hooks/useProperty.tsx
@@ -1,6 +1,5 @@
-import { useCallback } from "react";
-
 import { usePropertyFetcher } from "@reearth/services/api";
+import { useCallback } from "react";
 
 export default () => {
   const { useUpdatePropertyValue } = usePropertyFetcher();
@@ -14,7 +13,15 @@ export default () => {
       v?: any,
     ) => {
       if (!propertyId || !schemaItemId || !fieldId || !vt) return;
-      await useUpdatePropertyValue(propertyId, schemaItemId, itemId, fieldId, "en", v, vt);
+      await useUpdatePropertyValue(
+        propertyId,
+        schemaItemId,
+        itemId,
+        fieldId,
+        "en",
+        v,
+        vt,
+      );
     },
     [useUpdatePropertyValue],
   );
diff --git a/web/src/beta/features/Editor/hooks/useScene.ts b/web/src/beta/features/Editor/hooks/useScene.ts
index 9c8348c60..6510dac8c 100644
--- a/web/src/beta/features/Editor/hooks/useScene.ts
+++ b/web/src/beta/features/Editor/hooks/useScene.ts
@@ -1,7 +1,6 @@
-import { useState, useCallback, useMemo } from "react";
-
 import { useSceneFetcher } from "@reearth/services/api";
 import { convert } from "@reearth/services/api/propertyApi/utils";
+import { useState, useCallback, useMemo } from "react";
 
 type SceneProps = {
   sceneId?: string;
@@ -9,11 +8,16 @@ type SceneProps = {
 
 export default function ({ sceneId }: SceneProps) {
   const { useSceneQuery } = useSceneFetcher();
-  const [selectedSceneSetting, setSelectedSceneSetting] = useState<string | undefined>(undefined);
+  const [selectedSceneSetting, setSelectedSceneSetting] = useState<
+    string | undefined
+  >(undefined);
 
   const { scene } = useSceneQuery({ sceneId });
   const sceneSettings = useMemo(
-    () => convert(scene?.property)?.filter(item => item.collection === selectedSceneSetting),
+    () =>
+      convert(scene?.property)?.filter(
+        (item) => item.collection === selectedSceneSetting,
+      ),
     [scene?.property, selectedSceneSetting],
   );
   const handleSceneSettingSelect = useCallback(
diff --git a/web/src/beta/features/Editor/hooks/useSketch.ts b/web/src/beta/features/Editor/hooks/useSketch.ts
index b950f68d7..2540a013b 100644
--- a/web/src/beta/features/Editor/hooks/useSketch.ts
+++ b/web/src/beta/features/Editor/hooks/useSketch.ts
@@ -1,9 +1,14 @@
-import { MutableRefObject, useCallback, useEffect, useRef, useState } from "react";
-
 import { MapRef } from "@reearth/beta/features/Visualizer/Crust/types";
 import { SketchFeature, SketchType, Geometry } from "@reearth/core";
 import { useFeatureCollectionFetcher } from "@reearth/services/api";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import { Tab } from "../../Navbar";
 
@@ -41,12 +46,14 @@ export default ({
   visualizerRef,
   ignoreCoreLayerUnselect,
 }: Props) => {
-  const [sketchType, setSketchType] = useState<SketchType | undefined>(undefined);
-
-  const pendingSketchSelectionRef = useRef<{ layerId: string; featureId: string } | undefined>(
+  const [sketchType, setSketchType] = useState<SketchType | undefined>(
     undefined,
   );
 
+  const pendingSketchSelectionRef = useRef<
+    { layerId: string; featureId: string } | undefined
+  >(undefined);
+
   const handleSketchTypeChange = useCallback(
     (type: SketchType | undefined, from: "editor" | "plugin" = "editor") => {
       setSketchType(type);
@@ -58,8 +65,11 @@ export default ({
     [visualizerRef],
   );
 
-  const { useAddGeoJsonFeature, useUpdateGeoJSONFeature, useDeleteGeoJSONFeature } =
-    useFeatureCollectionFetcher();
+  const {
+    useAddGeoJsonFeature,
+    useUpdateGeoJSONFeature,
+    useDeleteGeoJSONFeature,
+  } = useFeatureCollectionFetcher();
 
   const handleSketchLayerAdd = useCallback(
     async (inp: FeatureProps) => {
@@ -93,7 +103,12 @@ export default ({
 
       ignoreCoreLayerUnselect.current = true;
     },
-    [selectedLayer?.id, selectedLayer?.isSketch, ignoreCoreLayerUnselect, handleSketchLayerAdd],
+    [
+      selectedLayer?.id,
+      selectedLayer?.isSketch,
+      ignoreCoreLayerUnselect,
+      handleSketchLayerAdd,
+    ],
   );
 
   useEffect(() => {
@@ -104,8 +119,10 @@ export default ({
         const { layerId, featureId } = pendingSketchSelectionRef.current;
         const layer = visualizerRef?.current?.layers
           ?.layers?.()
-          ?.find(l => l.id === layerId)?.computed;
-        const feature = layer?.features?.find(f => f.properties?.id === featureId);
+          ?.find((l) => l.id === layerId)?.computed;
+        const feature = layer?.features?.find(
+          (f) => f.properties?.id === featureId,
+        );
         if (feature) {
           visualizerRef?.current?.layers.selectFeature(layerId, feature?.id);
         }
@@ -113,7 +130,12 @@ export default ({
         ignoreCoreLayerUnselect.current = false;
       }
     }, 100);
-  }, [nlsLayers, pendingSketchSelectionRef, visualizerRef, ignoreCoreLayerUnselect]);
+  }, [
+    nlsLayers,
+    pendingSketchSelectionRef,
+    visualizerRef,
+    ignoreCoreLayerUnselect,
+  ]);
 
   useEffect(() => {
     handleSketchTypeChange(undefined);
diff --git a/web/src/beta/features/Editor/hooks/useStorytelling.ts b/web/src/beta/features/Editor/hooks/useStorytelling.ts
index 1c7d6f6fd..63c3550a8 100644
--- a/web/src/beta/features/Editor/hooks/useStorytelling.ts
+++ b/web/src/beta/features/Editor/hooks/useStorytelling.ts
@@ -1,8 +1,7 @@
-import { useState, useCallback, useMemo, useRef } from "react";
-
 import { StoryPanelRef } from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
 import useStorytellingAPI from "@reearth/services/api/storytellingApi";
 import { useT } from "@reearth/services/i18n";
+import { useState, useCallback, useMemo, useRef } from "react";
 
 type Props = {
   sceneId: string;
@@ -12,7 +11,9 @@ export default function ({ sceneId }: Props) {
   const t = useT();
 
   const storyPanelRef = useRef<StoryPanelRef | null>(null);
-  const [selectedStoryPageId, setSelectedStoryPageId] = useState<string | undefined>(undefined);
+  const [selectedStoryPageId, setSelectedStoryPageId] = useState<
+    string | undefined
+  >(undefined);
 
   const {
     useStoriesQuery,
@@ -25,19 +26,24 @@ export default function ({ sceneId }: Props) {
   } = useStorytellingAPI();
 
   const { stories } = useStoriesQuery({ sceneId });
-  const { installableStoryBlocks } = useInstallableStoryBlocksQuery({ sceneId });
+  const { installableStoryBlocks } = useInstallableStoryBlocksQuery({
+    sceneId,
+  });
 
-  const selectedStory = useMemo(() => (stories?.length ? stories[0] : undefined), [stories]);
+  const selectedStory = useMemo(
+    () => (stories?.length ? stories[0] : undefined),
+    [stories],
+  );
 
   const currentStoryPage = useMemo(
-    () => selectedStory?.pages?.find(p => p.id === selectedStoryPageId),
+    () => selectedStory?.pages?.find((p) => p.id === selectedStoryPageId),
     [selectedStory?.pages, selectedStoryPageId],
   );
 
   const handleCurrentStoryPageChange = useCallback(
     (pageId?: string) => {
       if (selectedStoryPageId && selectedStoryPageId === pageId) return;
-      const newPage = selectedStory?.pages?.find(p => p.id === pageId);
+      const newPage = selectedStory?.pages?.find((p) => p.id === pageId);
       if (newPage) {
         storyPanelRef?.current?.handleCurrentPageChange(pageId);
       }
@@ -54,7 +60,7 @@ export default function ({ sceneId }: Props) {
     async (pageId: string) => {
       if (!selectedStory) return;
       const pages = selectedStory?.pages ?? [];
-      const deletedPageIndex = pages.findIndex(p => p.id === pageId);
+      const deletedPageIndex = pages.findIndex((p) => p.id === pageId);
 
       await useDeleteStoryPage({
         sceneId,
@@ -67,7 +73,13 @@ export default function ({ sceneId }: Props) {
         );
       }
     },
-    [selectedStory, sceneId, selectedStoryPageId, handleCurrentStoryPageChange, useDeleteStoryPage],
+    [
+      selectedStory,
+      sceneId,
+      selectedStoryPageId,
+      handleCurrentStoryPageChange,
+      useDeleteStoryPage,
+    ],
   );
 
   const handleStoryPageAdd = useCallback(
diff --git a/web/src/beta/features/Editor/hooks/useUI.ts b/web/src/beta/features/Editor/hooks/useUI.ts
index ee2b51dcc..23cd703b6 100644
--- a/web/src/beta/features/Editor/hooks/useUI.ts
+++ b/web/src/beta/features/Editor/hooks/useUI.ts
@@ -20,9 +20,8 @@ export default ({
   handleCoreLayerSelect,
   handleSceneSettingSelect,
 }: Props) => {
-  const [currentProjectType, setCurrentProjectType] = useState<VisualizerProjectType>(
-    tab === "story" ? "story" : "default",
-  );
+  const [currentProjectType, setCurrentProjectType] =
+    useState<VisualizerProjectType>(tab === "story" ? "story" : "default");
 
   const handleProjectTypeChange = useCallback(
     (projectType: VisualizerProjectType) => setCurrentProjectType(projectType),
@@ -74,21 +73,44 @@ export default ({
   );
 
   // modals
-  const [dataSourceLayerCreatorShown, setDataSourceLayerShown] = useState(false);
-  const openDataSourceLayerCreator = useCallback(() => setDataSourceLayerShown(true), []);
-  const closeDataSourceLayerCreator = useCallback(() => setDataSourceLayerShown(false), []);
+  const [dataSourceLayerCreatorShown, setDataSourceLayerShown] =
+    useState(false);
+  const openDataSourceLayerCreator = useCallback(
+    () => setDataSourceLayerShown(true),
+    [],
+  );
+  const closeDataSourceLayerCreator = useCallback(
+    () => setDataSourceLayerShown(false),
+    [],
+  );
 
   const [sketchLayerCreatorShown, setSketchLayerCreatorShown] = useState(false);
-  const openSketchLayerCreator = useCallback(() => setSketchLayerCreatorShown(true), []);
-  const closeSketchLayerCreator = useCallback(() => setSketchLayerCreatorShown(false), []);
+  const openSketchLayerCreator = useCallback(
+    () => setSketchLayerCreatorShown(true),
+    [],
+  );
+  const closeSketchLayerCreator = useCallback(
+    () => setSketchLayerCreatorShown(false),
+    [],
+  );
 
-  const [customPropertySchemaShown, setCustomPropertySchemaShown] = useState(false);
-  const openCustomPropertySchema = useCallback(() => setCustomPropertySchemaShown(true), []);
-  const closeCustomPropertySchema = useCallback(() => setCustomPropertySchemaShown(false), []);
+  const [customPropertySchemaShown, setCustomPropertySchemaShown] =
+    useState(false);
+  const openCustomPropertySchema = useCallback(
+    () => setCustomPropertySchemaShown(true),
+    [],
+  );
+  const closeCustomPropertySchema = useCallback(
+    () => setCustomPropertySchemaShown(false),
+    [],
+  );
 
   // devices - not in use
   const [selectedDevice, setDevice] = useState<Device>("desktop");
-  const handleDeviceChange = useCallback((newDevice: Device) => setDevice(newDevice), []);
+  const handleDeviceChange = useCallback(
+    (newDevice: Device) => setDevice(newDevice),
+    [],
+  );
   // const visualizerWidth = useMemo(
   //   () => (tab === "widgets" ? devices[selectedDevice] : "100%"),
   //   [tab, selectedDevice],
diff --git a/web/src/beta/features/Editor/hooks/useWidgets.ts b/web/src/beta/features/Editor/hooks/useWidgets.ts
index 23f0f3f16..9648148b9 100644
--- a/web/src/beta/features/Editor/hooks/useWidgets.ts
+++ b/web/src/beta/features/Editor/hooks/useWidgets.ts
@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useState } from "react";
-
 import { WidgetAreaState } from "@reearth/services/state";
+import { useCallback, useEffect, useState } from "react";
 
 import { Tab } from "../../Navbar";
 
@@ -16,10 +15,12 @@ type Props = {
 };
 
 export default ({ tab }: Props) => {
-  const [showWASEditor, setShowWASEditor] = useState<boolean | undefined>(undefined);
+  const [showWASEditor, setShowWASEditor] = useState<boolean | undefined>(
+    undefined,
+  );
 
   const handleShowWASEditorToggle = useCallback(
-    () => setShowWASEditor(show => !show),
+    () => setShowWASEditor((show) => !show),
     [setShowWASEditor],
   );
 
@@ -29,10 +30,12 @@ export default ({ tab }: Props) => {
     }
   }, [tab, showWASEditor, setShowWASEditor]);
 
-  const [selectedWidget, setSelectedWidget] = useState<SelectedWidget | undefined>(undefined);
-  const [selectedWidgetArea, setSelectedWidgetArea] = useState<WidgetAreaState | undefined>(
-    undefined,
-  );
+  const [selectedWidget, setSelectedWidget] = useState<
+    SelectedWidget | undefined
+  >(undefined);
+  const [selectedWidgetArea, setSelectedWidgetArea] = useState<
+    WidgetAreaState | undefined
+  >(undefined);
 
   return {
     showWASEditor,
diff --git a/web/src/beta/features/Editor/utils.tsx b/web/src/beta/features/Editor/utils.tsx
index 90f424229..537af8570 100644
--- a/web/src/beta/features/Editor/utils.tsx
+++ b/web/src/beta/features/Editor/utils.tsx
@@ -44,7 +44,7 @@ export const Input = styled.input`
   border-radius: 4px;
   outline: none;
   padding: 5px 10px;
-  color: ${props => props.theme.content.main};
+  color: ${(props) => props.theme.content.main};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -96,7 +96,7 @@ export const TextArea = styled.textarea`
   outline: none;
   resize: none;
   padding: 5px 10px;
-  color: ${props => props.theme.content.main};
+  color: ${(props) => props.theme.content.main};
 `;
 
 export const LayerWrapper = styled.div`
@@ -111,7 +111,8 @@ export const DeleteLayerIcon = styled(Icon)<{ disabled?: boolean }>`
   padding: 7px 6px;
   border-radius: 4px;
   outline: none;
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)}; // Reduce opacity for disabled state
+  opacity: ${({ disabled }) =>
+    disabled ? 0.5 : 1}; // Reduce opacity for disabled state
 `;
 
 export const AddLayerWrapper = styled.div`
diff --git a/web/src/beta/features/GlobalModal/index.tsx b/web/src/beta/features/GlobalModal/index.tsx
index f1994c0da..191f8a392 100644
--- a/web/src/beta/features/GlobalModal/index.tsx
+++ b/web/src/beta/features/GlobalModal/index.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useState } from "react";
-
 import { useAuth } from "@reearth/services/auth";
 import { config } from "@reearth/services/config";
 import { useLang as useCurrentLang } from "@reearth/services/i18n";
@@ -8,6 +6,7 @@ import {
   useCurrentTheme as useCurrentTheme,
   useNotification,
 } from "@reearth/services/state";
+import { useCallback, useEffect, useState } from "react";
 
 const GlobalModal: React.FC = () => {
   const extensions = config()?.extensions?.globalModal;
@@ -21,7 +20,7 @@ const GlobalModal: React.FC = () => {
 
   useEffect(() => {
     if (accessToken) return;
-    getAccessToken().then(token => {
+    getAccessToken().then((token) => {
       setAccessToken(token);
     });
   }, [accessToken, getAccessToken]);
@@ -34,7 +33,7 @@ const GlobalModal: React.FC = () => {
 
   return (
     <>
-      {extensions?.map(ext => (
+      {extensions?.map((ext) => (
         <ext.component
           key={ext.id}
           lang={currentLang}
diff --git a/web/src/beta/features/Modals/AssetModal/index.tsx b/web/src/beta/features/Modals/AssetModal/index.tsx
index 2a2bea571..2b3bf2204 100644
--- a/web/src/beta/features/Modals/AssetModal/index.tsx
+++ b/web/src/beta/features/Modals/AssetModal/index.tsx
@@ -1,5 +1,3 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import AssetCard from "@reearth/beta/components/CatalogCard";
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
@@ -7,15 +5,19 @@ import SelectField from "@reearth/beta/components/fields/SelectField";
 import Loading from "@reearth/beta/components/Loading";
 import Modal from "@reearth/beta/components/Modal";
 import Text from "@reearth/beta/components/Text";
-import { FILE_FORMATS, IMAGE_FORMATS } from "@reearth/beta/features/Assets/constants";
+import {
+  FILE_FORMATS,
+  IMAGE_FORMATS,
+} from "@reearth/beta/features/Assets/constants";
 import useHooks from "@reearth/beta/features/Assets/hooks";
 import { AcceptedFileFormat, Asset } from "@reearth/beta/features/Assets/types";
 import { checkIfFileType } from "@reearth/beta/utils/util";
 import { useT } from "@reearth/services/i18n";
 import { useNotification, Workspace } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-const getValue: { [key: string]: string } = {
+const getValue: Record<string, string> = {
   "date-reverse": "date",
   "name-reverse": "name",
   "size-reverse": "size",
@@ -71,7 +73,7 @@ const ChooseAssetModal: React.FC<Props> = ({
       return assets;
     }
 
-    return assets?.filter(asset => {
+    return assets?.filter((asset) => {
       const isFile = checkIfFileType(asset.url, FILE_FORMATS);
       const isImage = checkIfFileType(asset.url, IMAGE_FORMATS);
 
@@ -85,7 +87,7 @@ const ChooseAssetModal: React.FC<Props> = ({
   }, [assetType, assets, fileFormat]);
 
   const handleReset = useCallback(() => {
-    const selectedAsset = assets?.find(a => a.url === currentValue);
+    const selectedAsset = assets?.find((a) => a.url === currentValue);
     if (selectedAsset) {
       selectAsset([selectedAsset]);
     }
@@ -153,13 +155,14 @@ const ChooseAssetModal: React.FC<Props> = ({
             handleSelectButtonClick();
           }}
         />
-      }>
+      }
+    >
       <ControlWarpper>
         <SortWrapper>
           <Text size="footnote">{t("Sort By")}</Text>
           <SelectField
             value={selectedSortOption}
-            options={sortOptions.map(option => ({
+            options={sortOptions.map((option) => ({
               key: option.value,
               label: option.label,
             }))}
@@ -167,7 +170,10 @@ const ChooseAssetModal: React.FC<Props> = ({
           />
         </SortWrapper>
         <SearchWarpper>
-          <TextInput value={localSearchTerm} onChange={handleSearchInputChange} />
+          <TextInput
+            value={localSearchTerm}
+            onChange={handleSearchInputChange}
+          />
           <SearchButton icon="search" margin="0" onClick={handleSearch} />
         </SearchWarpper>
       </ControlWarpper>
@@ -185,11 +191,14 @@ const ChooseAssetModal: React.FC<Props> = ({
         ) : (
           <AssetListWrapper
             ref={assetsWrapperRef}
-            onScroll={e =>
-              !isAssetsLoading && hasMoreAssets && onScrollToBottom?.(e, handleGetMoreAssets)
-            }>
+            onScroll={(e) =>
+              !isAssetsLoading &&
+              hasMoreAssets &&
+              onScrollToBottom?.(e, handleGetMoreAssets)
+            }
+          >
             <AssetList>
-              {filteredAssets?.map(a => (
+              {filteredAssets?.map((a) => (
                 <AssetCard
                   key={a.id}
                   name={a.name}
@@ -197,8 +206,8 @@ const ChooseAssetModal: React.FC<Props> = ({
                     checkIfFileType(a.url, FILE_FORMATS)
                       ? "file"
                       : checkIfFileType(a.url, IMAGE_FORMATS)
-                      ? undefined
-                      : "assetNoSupport"
+                        ? undefined
+                        : "assetNoSupport"
                   }
                   url={a.url}
                   onSelect={() => onSelectAsset?.(a)}
diff --git a/web/src/beta/features/Modals/LayerStyleModal/hooks.ts b/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
index 2474ade96..99772b202 100644
--- a/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
+++ b/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
@@ -1,8 +1,10 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
-
-import { autoFillPage, onScrollToBottom } from "@reearth/beta/utils/infinite-scroll";
+import {
+  autoFillPage,
+  onScrollToBottom,
+} from "@reearth/beta/utils/infinite-scroll";
 import { useLayerStylesFetcher } from "@reearth/services/api";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 
 const LayerStylesPerPage = 20;
 
@@ -20,11 +22,14 @@ export default ({ sceneId }: { sceneId?: string }) => {
   const isGettingMore = useRef(false);
 
   const { useGetLayerStylesQuery } = useLayerStylesFetcher();
-  const { layerStyles, loading, isRefetching, fetchMore } = useGetLayerStylesQuery({ sceneId });
+  const { layerStyles, loading, isRefetching, fetchMore } =
+    useGetLayerStylesQuery({ sceneId });
   const [selectedLayerStyles, selectLayerStyle] = useState<LayerStyle[]>([]);
 
   const [searchTerm, setSearchTerm] = useState<string>();
-  const [localSearchTerm, setLocalSearchTerm] = useState<string>(searchTerm ?? "");
+  const [localSearchTerm, setLocalSearchTerm] = useState<string>(
+    searchTerm ?? "",
+  );
 
   const handleSearchInputChange = useCallback(
     (value: string) => {
@@ -33,7 +38,10 @@ export default ({ sceneId }: { sceneId?: string }) => {
     [setLocalSearchTerm],
   );
 
-  const handleSearchTerm = useCallback((term?: string) => setSearchTerm(term), []);
+  const handleSearchTerm = useCallback(
+    (term?: string) => setSearchTerm(term),
+    [],
+  );
 
   const handleSearch = useCallback(() => {
     if (!localSearchTerm || localSearchTerm.length < 1) {
@@ -46,7 +54,9 @@ export default ({ sceneId }: { sceneId?: string }) => {
   const handleSelectLayerStyle = useCallback(
     (layerStyle?: LayerStyle) => {
       if (!layerStyle) return;
-      selectLayerStyle(!selectedLayerStyles.includes(layerStyle) ? [layerStyle] : []);
+      selectLayerStyle(
+        !selectedLayerStyles.includes(layerStyle) ? [layerStyle] : [],
+      );
     },
     [selectLayerStyle, selectedLayerStyles],
   );
@@ -63,7 +73,10 @@ export default ({ sceneId }: { sceneId?: string }) => {
     }
   }, [fetchMore, isGettingMore]);
 
-  const isLayerStylesLoading = useMemo(() => loading ?? isRefetching, [loading, isRefetching]);
+  const isLayerStylesLoading = useMemo(
+    () => loading ?? isRefetching,
+    [loading, isRefetching],
+  );
 
   useEffect(() => {
     if (layerStylesWrapperRef.current && !isLayerStylesLoading) {
diff --git a/web/src/beta/features/Modals/LayerStyleModal/index.tsx b/web/src/beta/features/Modals/LayerStyleModal/index.tsx
index 7f1f84e34..5a5b6e74a 100644
--- a/web/src/beta/features/Modals/LayerStyleModal/index.tsx
+++ b/web/src/beta/features/Modals/LayerStyleModal/index.tsx
@@ -1,5 +1,3 @@
-import React, { useCallback } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import CatalogCard from "@reearth/beta/components/CatalogCard";
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
@@ -10,6 +8,7 @@ import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
+import React, { useCallback } from "react";
 
 import useHooks from "./hooks";
 
@@ -21,7 +20,12 @@ export type Props = {
 };
 
 // TODO: Remove this file
-const ChooseLayerStyleModal: React.FC<Props> = ({ open, sceneId, onClose, onSelect }) => {
+const ChooseLayerStyleModal: React.FC<Props> = ({
+  open,
+  sceneId,
+  onClose,
+  onSelect,
+}) => {
   const t = useT();
   const [, setNotification] = useNotification();
 
@@ -70,10 +74,14 @@ const ChooseLayerStyleModal: React.FC<Props> = ({ open, sceneId, onClose, onSele
           text={t("Cancel")}
           onClick={() => onClose?.()}
         />
-      }>
+      }
+    >
       <ControlWarpper>
         <SearchWarpper>
-          <TextInput value={localSearchTerm} onChange={handleSearchInputChange} />
+          <TextInput
+            value={localSearchTerm}
+            onChange={handleSearchInputChange}
+          />
           <SearchButton icon="search" margin="0" onClick={handleSearch} />
         </SearchWarpper>
       </ControlWarpper>
@@ -91,15 +99,16 @@ const ChooseLayerStyleModal: React.FC<Props> = ({ open, sceneId, onClose, onSele
         ) : (
           <LayerStyleListWrapper
             ref={layerStylesWrapperRef}
-            onScroll={e => !isLayerStylesLoading && onScrollToBottom?.(e)}>
+            onScroll={(e) => !isLayerStylesLoading && onScrollToBottom?.(e)}
+          >
             <LayerStyleList>
-              {layerStyles?.map(a => (
+              {layerStyles?.map((a) => (
                 <CatalogCard
                   key={a.id}
                   name={a.name}
                   icon={"layerStyle"}
                   onSelect={() => handleSelectLayerStyle?.(a as LayerStyle)}
-                  selected={selectedLayerStyles.some(ua => ua.id === a.id)}
+                  selected={selectedLayerStyles.some((ua) => ua.id === a.id)}
                 />
               ))}
             </LayerStyleList>
diff --git a/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx b/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx
index 03b33c0fe..e58db8d07 100644
--- a/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx
+++ b/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx
@@ -1,8 +1,7 @@
-import { useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-
 import { PopupMenu, PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
+import { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { Workspace } from "../../types";
 
@@ -40,7 +39,7 @@ const HeaderProfile: React.FC<Props> = ({
     {
       icon: "switch",
       id: "switchWorkspace",
-      subItem: workspaces.map(w => {
+      subItem: workspaces.map((w) => {
         return {
           customSubMenuLabel: w.personal ? t("Personal") : t("Team Workspace"),
           customSubMenuOrder: w.personal ? 0 : 1,
diff --git a/web/src/beta/features/Navbar/LeftSection/index.tsx b/web/src/beta/features/Navbar/LeftSection/index.tsx
index de3c27cd3..53a101c67 100644
--- a/web/src/beta/features/Navbar/LeftSection/index.tsx
+++ b/web/src/beta/features/Navbar/LeftSection/index.tsx
@@ -1,9 +1,12 @@
-import { useMemo } from "react";
-import { Link } from "react-router-dom";
-
-import { IconButton, PopupMenu, PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
+import {
+  IconButton,
+  PopupMenu,
+  PopupMenuItem,
+} from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
 
 import { Project, Workspace } from "../types";
 
@@ -36,13 +39,17 @@ const LeftSection: React.FC<Props> = ({
         icon: "setting",
         id: "setting",
         title: t("Project settings"),
-        path: currentProject?.id ? `/settings/project/${currentProject.id}` : "",
+        path: currentProject?.id
+          ? `/settings/project/${currentProject.id}`
+          : "",
       },
       {
         icon: "plugin",
         id: "plugin",
         title: t("Plugin"),
-        path: currentProject?.id ? `/settings/project/${currentProject.id}/plugins` : "",
+        path: currentProject?.id
+          ? `/settings/project/${currentProject.id}/plugins`
+          : "",
       },
     ],
     [currentProject?.id, t],
@@ -50,7 +57,10 @@ const LeftSection: React.FC<Props> = ({
 
   return (
     <Wrapper>
-      <StyledLink to={`/dashboard/${currentWorkspace?.id}`} disabled={!currentWorkspace?.id}>
+      <StyledLink
+        to={`/dashboard/${currentWorkspace?.id}`}
+        disabled={!currentWorkspace?.id}
+      >
         <IconButton icon="grid" appearance="simple" size="large" />
       </StyledLink>
       {page !== "editor" && (
@@ -65,7 +75,9 @@ const LeftSection: React.FC<Props> = ({
         onWorkspaceChange={onWorkspaceChange}
       />
       <Separator>/</Separator>
-      {currentProject && <PopupMenu label={currentProject.name} menu={menuItems} />}
+      {currentProject && (
+        <PopupMenu label={currentProject.name} menu={menuItems} />
+      )}
     </Wrapper>
   );
 };
@@ -79,15 +91,17 @@ const Wrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.small,
 }));
 
-const StyledLink = styled(Link)<{ disabled?: boolean }>(({ theme, disabled }) => ({
-  display: "flex",
-  color: theme.content.main,
-  textDecoration: "none",
-  pointerEvents: disabled ? "none" : "all",
-  "&:hover": {
+const StyledLink = styled(Link)<{ disabled?: boolean }>(
+  ({ theme, disabled }) => ({
+    display: "flex",
+    color: theme.content.main,
     textDecoration: "none",
-  },
-}));
+    pointerEvents: disabled ? "none" : "all",
+    "&:hover": {
+      textDecoration: "none",
+    },
+  }),
+);
 
 const Separator = styled.div(({ theme }) => ({
   color: theme.content.weak,
diff --git a/web/src/beta/features/Navbar/hooks.ts b/web/src/beta/features/Navbar/hooks.ts
index 00e4fc801..6de6bc2cc 100644
--- a/web/src/beta/features/Navbar/hooks.ts
+++ b/web/src/beta/features/Navbar/hooks.ts
@@ -1,12 +1,17 @@
-import { useMemo, useCallback, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-
 import { useWorkspaceFetcher, useProjectFetcher } from "@reearth/services/api";
 import { useAuth } from "@reearth/services/auth";
 import { useWorkspace } from "@reearth/services/state";
 import { ProjectType } from "@reearth/types";
+import { useMemo, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 
-export default ({ projectId, workspaceId }: { projectId?: string; workspaceId?: string }) => {
+export default ({
+  projectId,
+  workspaceId,
+}: {
+  projectId?: string;
+  workspaceId?: string;
+}) => {
   const navigate = useNavigate();
   const { logout: handleLogout } = useAuth();
 
@@ -21,7 +26,10 @@ export default ({ projectId, workspaceId }: { projectId?: string; workspaceId?:
   const { project } = useProjectQuery(projectId);
 
   useEffect(() => {
-    if (!currentWorkspace || (workspace && workspace.id !== currentWorkspace?.id)) {
+    if (
+      !currentWorkspace ||
+      (workspace && workspace.id !== currentWorkspace?.id)
+    ) {
       setCurrentWorkspace(workspace);
     }
   }, [currentWorkspace, setCurrentWorkspace, workspace]);
@@ -48,7 +56,7 @@ export default ({ projectId, workspaceId }: { projectId?: string; workspaceId?:
 
   const handleWorkspaceChange = useCallback(
     (id: string) => {
-      const newWorkspace = workspaces?.find(team => team.id === id);
+      const newWorkspace = workspaces?.find((team) => team.id === id);
       if (newWorkspace && workspaceId !== newWorkspace.id) {
         setCurrentWorkspace(newWorkspace);
         navigate(`/dashboard/${newWorkspace.id}`);
diff --git a/web/src/beta/features/Navbar/index.tsx b/web/src/beta/features/Navbar/index.tsx
index e1e3c96af..cf2e431a0 100644
--- a/web/src/beta/features/Navbar/index.tsx
+++ b/web/src/beta/features/Navbar/index.tsx
@@ -29,7 +29,13 @@ const Navbar: React.FC<Props> = ({
   currentTab = "map",
   page = "editor",
 }) => {
-  const { currentProject, workspace, workspaces, handleLogout, handleWorkspaceChange } = useHook({
+  const {
+    currentProject,
+    workspace,
+    workspaces,
+    handleLogout,
+    handleWorkspaceChange,
+  } = useHook({
     projectId,
     workspaceId,
   });
diff --git a/web/src/beta/features/Navbar/useDevPlugins.ts b/web/src/beta/features/Navbar/useDevPlugins.ts
index 6ba3db445..1b54fc2de 100644
--- a/web/src/beta/features/Navbar/useDevPlugins.ts
+++ b/web/src/beta/features/Navbar/useDevPlugins.ts
@@ -1,10 +1,12 @@
-import * as yaml from "js-yaml";
-import { useCallback, useEffect } from "react";
-
 import { fetchAndZipFiles } from "@reearth/beta/utils/file";
 import { usePluginsFetcher } from "@reearth/services/api";
 import { config } from "@reearth/services/config";
-import { useDevPluginExtensionRenderKey, useDevPluginExtensions } from "@reearth/services/state";
+import {
+  useDevPluginExtensionRenderKey,
+  useDevPluginExtensions,
+} from "@reearth/services/state";
+import * as yaml from "js-yaml";
+import { useCallback, useEffect } from "react";
 
 type ReearthYML = {
   id: string;
@@ -19,12 +21,14 @@ type Props = {
 };
 
 export default ({ sceneId }: Props) => {
-  const [devPluginExtensions, setDevPluginExtensions] = useDevPluginExtensions();
-  const [_, updateDevPluginExtensionRenderKey] = useDevPluginExtensionRenderKey();
+  const [devPluginExtensions, setDevPluginExtensions] =
+    useDevPluginExtensions();
+  const [_, updateDevPluginExtensionRenderKey] =
+    useDevPluginExtensionRenderKey();
   const { useUploadPluginWithFile } = usePluginsFetcher();
 
   const handleDevPluginExtensionsReload = useCallback(() => {
-    updateDevPluginExtensionRenderKey(prev => prev + 1);
+    updateDevPluginExtensionRenderKey((prev) => prev + 1);
   }, [updateDevPluginExtensionRenderKey]);
 
   const handleInstallPluginFromFile = useCallback(
@@ -41,7 +45,7 @@ export default ({ sceneId }: Props) => {
     const { devPluginUrls } = config() ?? {};
     if (!devPluginUrls || devPluginUrls.length === 0) return;
 
-    devPluginUrls.forEach(async url => {
+    devPluginUrls.forEach(async (url) => {
       const file: File | undefined = await getPluginZipFromUrl(url);
       if (!file) return;
       handleInstallPluginFromFile(file);
@@ -54,23 +58,32 @@ export default ({ sceneId }: Props) => {
 
     const fetchExtensions = async () => {
       const extensions = await Promise.all(
-        devPluginUrls.map(async url => {
+        devPluginUrls.map(async (url) => {
           const response = await fetch(`${url}/reearth.yml`);
           if (!response.ok) {
             throw new Error(`Failed to fetch the file: ${response.statusText}`);
           }
           const yamlText = await response.text();
           const data = yaml.load(yamlText) as ReearthYML;
-          return data.extensions?.map(e => ({ id: e.id, url: `${url}/${e.id}.js` })) ?? [];
+          return (
+            data.extensions?.map((e) => ({
+              id: e.id,
+              url: `${url}/${e.id}.js`,
+            })) ?? []
+          );
         }),
       );
-      setDevPluginExtensions(extensions.flatMap(e => e));
+      setDevPluginExtensions(extensions.flatMap((e) => e));
     };
 
     fetchExtensions();
   }, [setDevPluginExtensions]);
 
-  return { devPluginExtensions, handleDevPluginsInstall, handleDevPluginExtensionsReload };
+  return {
+    devPluginExtensions,
+    handleDevPluginsInstall,
+    handleDevPluginExtensionsReload,
+  };
 };
 
 async function getPluginZipFromUrl(url: string) {
@@ -82,7 +95,9 @@ async function getPluginZipFromUrl(url: string) {
     const yamlText = await response.text();
     const data = yaml.load(yamlText) as ReearthYML;
 
-    const extensionUrls = data?.extensions?.map(extensions => `${url}/${extensions.id}.js`);
+    const extensionUrls = data?.extensions?.map(
+      (extensions) => `${url}/${extensions.id}.js`,
+    );
     if (!extensionUrls) return;
 
     const file = await fetchAndZipFiles(
diff --git a/web/src/beta/features/Navbar/useRightSection.tsx b/web/src/beta/features/Navbar/useRightSection.tsx
index e209abb9f..b4ecbbcfa 100644
--- a/web/src/beta/features/Navbar/useRightSection.tsx
+++ b/web/src/beta/features/Navbar/useRightSection.tsx
@@ -1,10 +1,9 @@
-import { useMemo } from "react";
-
 import TabButton from "@reearth/beta/components/TabButton";
 import { useEditorNavigation } from "@reearth/beta/hooks/navigationHooks";
 import { IconButton } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useMemo } from "react";
 
 import useDevPlugins from "./useDevPlugins";
 
@@ -19,8 +18,11 @@ type Props = {
 const useRightSide = ({ currentTab, page, sceneId }: Props) => {
   const t = useT();
   const handleEditorNavigation = useEditorNavigation({ sceneId });
-  const { devPluginExtensions, handleDevPluginsInstall, handleDevPluginExtensionsReload } =
-    useDevPlugins({ sceneId });
+  const {
+    devPluginExtensions,
+    handleDevPluginsInstall,
+    handleDevPluginExtensionsReload,
+  } = useDevPlugins({ sceneId });
 
   const rightSide = useMemo(() => {
     if (page === "editor") {
diff --git a/web/src/beta/features/Notification/hooks.ts b/web/src/beta/features/Notification/hooks.ts
index b0a1104ed..154627a9b 100644
--- a/web/src/beta/features/Notification/hooks.ts
+++ b/web/src/beta/features/Notification/hooks.ts
@@ -1,7 +1,10 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
-
 import { useT, useLang } from "@reearth/services/i18n";
-import { useError, useNotification, Notification } from "@reearth/services/state";
+import {
+  useError,
+  useNotification,
+  Notification,
+} from "@reearth/services/state";
+import { useState, useEffect, useCallback, useMemo } from "react";
 
 export type PolicyItems =
   | "layer"
@@ -29,7 +32,8 @@ export default () => {
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const policyLimitNotifications = window.REEARTH_CONFIG?.policy?.limitNotifications;
+  const policyLimitNotifications =
+    window.REEARTH_CONFIG?.policy?.limitNotifications;
 
   const errorHeading = t("Error");
   const warningHeading = t("Warning");
@@ -40,8 +44,8 @@ export default () => {
       notification?.type === "error"
         ? errorHeading
         : notification?.type === "warning"
-        ? warningHeading
-        : noticeHeading,
+          ? warningHeading
+          : noticeHeading,
     [notification?.type, errorHeading, warningHeading, noticeHeading],
   );
 
@@ -52,9 +56,11 @@ export default () => {
   useEffect(() => {
     if (!error) return;
     if (error.message?.includes("policy violation") && error.message) {
-      const limitedItem = policyItems.find(i => error.message?.includes(i));
+      const limitedItem = policyItems.find((i) => error.message?.includes(i));
       const policyItem =
-        limitedItem && policyLimitNotifications ? policyLimitNotifications[limitedItem] : undefined;
+        limitedItem && policyLimitNotifications
+          ? policyLimitNotifications[limitedItem]
+          : undefined;
       const message = policyItem
         ? typeof policyItem === "string"
           ? policyItem
@@ -89,7 +95,8 @@ export default () => {
   ]);
 
   useEffect(() => {
-    if (!notification || notification?.duration === "persistent" || isHovered) return;
+    if (!notification || notification?.duration === "persistent" || isHovered)
+      return;
     let notificationTimeout = 2000;
 
     if (notification.duration) {
diff --git a/web/src/beta/features/Notification/index.tsx b/web/src/beta/features/Notification/index.tsx
index 48897358b..e020e184d 100644
--- a/web/src/beta/features/Notification/index.tsx
+++ b/web/src/beta/features/Notification/index.tsx
@@ -12,7 +12,8 @@ export type Notification = {
 };
 
 const NotificationBanner: React.FC = () => {
-  const { isHovered, visible, notification, setModal, setIsHovered } = useHooks();
+  const { isHovered, visible, notification, setModal, setIsHovered } =
+    useHooks();
   const theme = useTheme();
 
   return (
@@ -22,7 +23,8 @@ const NotificationBanner: React.FC = () => {
       visible={visible}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      type={notification?.type}>
+      type={notification?.type}
+    >
       <HeadingArea>
         <Text size="body" color={theme.content.strong} weight="bold">
           {notification?.heading}
@@ -41,7 +43,8 @@ const NotificationBanner: React.FC = () => {
         <Text
           size="footnote"
           color={theme.content.strong}
-          otherProperties={{ padding: "8px 0 0 0" }}>
+          otherProperties={{ padding: "8px 0 0 0" }}
+        >
           {notification?.text}
         </Text>
       )}
@@ -66,17 +69,20 @@ const StyledNotificationBanner = styled.div<{
   width: 312px;
   padding: 4px 8px;
   border-radius: 6px;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+  box-shadow:
+    rgba(0, 0, 0, 0.3) 0px 19px 38px,
+    rgba(0, 0, 0, 0.22) 0px 15px 12px;
   background-color: ${({ type, theme }) =>
     type === "error"
       ? theme.dangerous.main
       : type === "warning"
-      ? theme.warning.main
-      : type === "success"
-      ? theme.select.strong
-      : theme.secondary.main};
+        ? theme.warning.main
+        : type === "success"
+          ? theme.select.strong
+          : theme.secondary.main};
   color: ${({ theme }) => theme.content.main};
-  z-index: ${({ theme, visible }) => (visible ? theme.zIndexes.editor.notificationBar : 0)};
+  z-index: ${({ theme, visible }) =>
+    visible ? theme.zIndexes.editor.notificationBar : 0};
   opacity: ${({ visible }) => (visible ? "1" : "0")};
   transition: all 0.5s;
   pointer-events: ${({ visible }) => (visible ? "auto" : "none")};
diff --git a/web/src/beta/features/PluginPlayground/Viewer/hooks.ts b/web/src/beta/features/PluginPlayground/Viewer/hooks.ts
index e2096352a..d068b7d61 100644
--- a/web/src/beta/features/PluginPlayground/Viewer/hooks.ts
+++ b/web/src/beta/features/PluginPlayground/Viewer/hooks.ts
@@ -1,14 +1,15 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-
 import { Camera } from "@reearth/beta/utils/value";
 import { MapRef, ViewerProperty } from "@reearth/core";
 import { config } from "@reearth/services/config";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 export default () => {
   // Refrence: hooks of Editor/Visualizer/hooks.ts and Publish/hooks.ts
   const visualizerRef = useRef<MapRef | null>(null);
   const [ready, setReady] = useState(false);
-  const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(undefined);
+  const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(
+    undefined,
+  );
 
   const engineMeta = useMemo(
     () => ({
diff --git a/web/src/beta/features/PluginPlayground/Viewer/index.tsx b/web/src/beta/features/PluginPlayground/Viewer/index.tsx
index 43655ea9e..918ce6aee 100644
--- a/web/src/beta/features/PluginPlayground/Viewer/index.tsx
+++ b/web/src/beta/features/PluginPlayground/Viewer/index.tsx
@@ -1,12 +1,17 @@
-import { FC } from "react";
-
 import Visualizer from "@reearth/beta/features/Visualizer";
+import { FC } from "react";
 
 import useHooks from "./hooks";
 
 const Viewer: FC = () => {
-  const { visualizerRef, viewerProperty, ready, engineMeta, currentCamera, setCurrentCamera } =
-    useHooks();
+  const {
+    visualizerRef,
+    viewerProperty,
+    ready,
+    engineMeta,
+    currentCamera,
+    setCurrentCamera,
+  } = useHooks();
 
   return (
     <Visualizer
diff --git a/web/src/beta/features/PluginPlayground/index.tsx b/web/src/beta/features/PluginPlayground/index.tsx
index 3f63710c5..40602ce73 100644
--- a/web/src/beta/features/PluginPlayground/index.tsx
+++ b/web/src/beta/features/PluginPlayground/index.tsx
@@ -1,12 +1,12 @@
-import { FC } from "react";
-
 import { Tabs } from "@reearth/beta/lib/reearth-ui";
 import { Area, Window } from "@reearth/beta/ui/layout";
+import { FC } from "react";
 
 import useHooks from "./hooks";
 
 const PluginPlayground: FC = () => {
-  const { MainAreaTabs, BottomAreaTabs, SubRightAreaTabs, RightAreaTabs } = useHooks();
+  const { MainAreaTabs, BottomAreaTabs, SubRightAreaTabs, RightAreaTabs } =
+    useHooks();
 
   return (
     <Window>
@@ -15,14 +15,26 @@ const PluginPlayground: FC = () => {
           <Area extend>
             <Tabs position="top" tabs={MainAreaTabs} />
           </Area>
-          <Area resizableEdge="top" initialHeight={100} storageId="plugin-playground-bottom-area">
+          <Area
+            resizableEdge="top"
+            initialHeight={100}
+            storageId="plugin-playground-bottom-area"
+          >
             <Tabs position="top" tabs={BottomAreaTabs} />
           </Area>
         </Area>
-        <Area direction="column" resizableEdge="left" storageId="plugin-playground-sub-right-area">
+        <Area
+          direction="column"
+          resizableEdge="left"
+          storageId="plugin-playground-sub-right-area"
+        >
           <Tabs position="top" tabs={SubRightAreaTabs} />
         </Area>
-        <Area direction="column" resizableEdge="left" storageId="plugin-playground-right-area">
+        <Area
+          direction="column"
+          resizableEdge="left"
+          storageId="plugin-playground-right-area"
+        >
           <Tabs position="top" tabs={RightAreaTabs} />
         </Area>
       </Area>
diff --git a/web/src/beta/features/ProjectSettings/MenuList/index.tsx b/web/src/beta/features/ProjectSettings/MenuList/index.tsx
index 8c143cf43..901759e68 100644
--- a/web/src/beta/features/ProjectSettings/MenuList/index.tsx
+++ b/web/src/beta/features/ProjectSettings/MenuList/index.tsx
@@ -1,7 +1,6 @@
-import { Link } from "react-router-dom";
-
 import Text from "@reearth/beta/components/Text";
 import { styled, useTheme } from "@reearth/services/theme";
+import { Link } from "react-router-dom";
 
 export const MenuItem: React.FC<{
   text?: string;
@@ -19,7 +18,11 @@ export const MenuItem: React.FC<{
     </MenuItemWrapper>
   );
 
-  return !linkTo ? content : <StyledLinkButton to={linkTo}>{content}</StyledLinkButton>;
+  return !linkTo ? (
+    content
+  ) : (
+    <StyledLinkButton to={linkTo}>{content}</StyledLinkButton>
+  );
 };
 
 export const MenuList = styled.div`
@@ -40,7 +43,8 @@ const MenuItemWrapper = styled.div<{ active?: boolean }>`
   background-color: ${({ active, theme }) => (active ? theme.select.main : "")};
   transition: all 0.3s ease;
   &:hover {
-    background-color: ${({ active, theme }) => (active ? theme.select.main : theme.bg[2])};
+    background-color: ${({ active, theme }) =>
+      active ? theme.select.main : theme.bg[2]};
   }
 `;
 
diff --git a/web/src/beta/features/ProjectSettings/hooks.ts b/web/src/beta/features/ProjectSettings/hooks.ts
index 2408fcf64..abff458ff 100644
--- a/web/src/beta/features/ProjectSettings/hooks.ts
+++ b/web/src/beta/features/ProjectSettings/hooks.ts
@@ -1,10 +1,9 @@
-import { useCallback, useMemo, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-
 import { useProjectFetcher, useSceneFetcher } from "@reearth/services/api";
 import useStorytellingAPI from "@reearth/services/api/storytellingApi";
 import { useAuth } from "@reearth/services/auth";
 import { config } from "@reearth/services/config";
+import { useCallback, useMemo, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { GeneralSettingsType } from "./innerPages/GeneralSettings";
 import {
@@ -77,13 +76,20 @@ export default ({ projectId }: Props) => {
   );
   const { useStoriesQuery } = useStorytellingAPI();
   const { stories = [] } = useStoriesQuery({ sceneId: scene?.id });
-  const currentStory = useMemo(() => (stories?.length ? stories[0] : undefined), [stories]);
+  const currentStory = useMemo(
+    () => (stories?.length ? stories[0] : undefined),
+    [stories],
+  );
 
   const { useUpdateStory } = useStorytellingAPI();
   const handleUpdateStory = useCallback(
     async (settings: PublicSettingsType & StorySettingsType) => {
       if (!scene?.id || !currentStory?.id) return;
-      await useUpdateStory({ storyId: currentStory.id, sceneId: scene.id, ...settings });
+      await useUpdateStory({
+        storyId: currentStory.id,
+        sceneId: scene.id,
+        ...settings,
+      });
     },
     [useUpdateStory, currentStory?.id, scene?.id],
   );
@@ -91,14 +97,22 @@ export default ({ projectId }: Props) => {
   const handleUpdateStoryBasicAuth = useCallback(
     async (settings: PublicBasicAuthSettingsType) => {
       if (!scene?.id || !currentStory?.id) return;
-      await useUpdateStory({ storyId: currentStory.id, sceneId: scene.id, ...settings });
+      await useUpdateStory({
+        storyId: currentStory.id,
+        sceneId: scene.id,
+        ...settings,
+      });
     },
     [useUpdateStory, currentStory?.id, scene?.id],
   );
   const handleUpdateStoryAlias = useCallback(
     async (settings: PublicAliasSettingsType) => {
       if (!scene?.id || !currentStory?.id) return;
-      await useUpdateStory({ storyId: currentStory.id, sceneId: scene.id, ...settings });
+      await useUpdateStory({
+        storyId: currentStory.id,
+        sceneId: scene.id,
+        ...settings,
+      });
     },
     [useUpdateStory, currentStory?.id, scene?.id],
   );
@@ -107,7 +121,7 @@ export default ({ projectId }: Props) => {
   const [accessToken, setAccessToken] = useState<string>();
 
   useEffect(() => {
-    getAccessToken().then(token => {
+    getAccessToken().then((token) => {
       setAccessToken(token);
     });
   }, [getAccessToken]);
diff --git a/web/src/beta/features/ProjectSettings/index.tsx b/web/src/beta/features/ProjectSettings/index.tsx
index dbfca2a79..3c6fb37bd 100644
--- a/web/src/beta/features/ProjectSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/index.tsx
@@ -1,5 +1,3 @@
-import { useMemo } from "react";
-
 import Navbar from "@reearth/beta/features/Navbar";
 import {
   DEFAULT_SIDEBAR_WIDTH,
@@ -10,6 +8,7 @@ import {
 } from "@reearth/beta/ui/components/Sidebar";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useMemo } from "react";
 
 import useHooks from "./hooks";
 import GeneralSettings from "./innerPages/GeneralSettings";
@@ -27,7 +26,7 @@ export const projectSettingTabs = [
 export type projectSettingsTab = (typeof projectSettingTabs)[number]["id"];
 
 export function isProjectSettingTab(tab: string): tab is projectSettingsTab {
-  return projectSettingTabs.map(f => f.id).includes(tab as never);
+  return projectSettingTabs.map((f) => f.id).includes(tab as never);
 }
 
 type Props = {
@@ -62,7 +61,7 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
 
   const tabs = useMemo(
     () =>
-      projectSettingTabs.map(tab => ({
+      projectSettingTabs.map((tab) => ({
         id: tab.id,
         icon: tab.icon,
         text: t(tab.text),
@@ -73,12 +72,17 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
 
   return (
     <Wrapper>
-      <Navbar projectId={projectId} workspaceId={workspaceId} sceneId={sceneId} page="settings" />
+      <Navbar
+        projectId={projectId}
+        workspaceId={workspaceId}
+        sceneId={sceneId}
+        page="settings"
+      />
       <MainSection>
         <LeftSidePanel>
           <SidebarWrapper>
             <SidebarSection>
-              {tabs?.map(t => (
+              {tabs?.map((t) => (
                 <SidebarMenuItem
                   key={t.id}
                   path={t.path}
diff --git a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
index c7a3f22ff..f315434a7 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useState, useMemo, FC } from "react";
-
 import defaultBetaProjectImage from "@reearth/beta/components/Icon/Icons/defaultBetaProjectImage.png";
 import { IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
 import {
@@ -13,6 +11,7 @@ import {
 import { InputField, AssetField, TextareaField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useState, useMemo, FC } from "react";
 
 import {
   InnerPage,
@@ -43,12 +42,20 @@ type Props = {
   onDeleteProject: () => void;
 };
 
-const GeneralSettings: FC<Props> = ({ project, onUpdateProject, onDeleteProject }) => {
+const GeneralSettings: FC<Props> = ({
+  project,
+  onUpdateProject,
+  onDeleteProject,
+}) => {
   const t = useT();
 
   const [localName, setLocalName] = useState(project?.name ?? "");
-  const [localDescription, setLocalDescription] = useState(project?.description ?? "");
-  const [localImageUrl, setLocalImageUrl] = useState<string | undefined>(project?.imageUrl ?? "");
+  const [localDescription, setLocalDescription] = useState(
+    project?.description ?? "",
+  );
+  const [localImageUrl, setLocalImageUrl] = useState<string | undefined>(
+    project?.imageUrl ?? "",
+  );
 
   const handleSubmit = useCallback(() => {
     onUpdateProject({
@@ -76,7 +83,7 @@ const GeneralSettings: FC<Props> = ({ project, onUpdateProject, onDeleteProject
               <InputField
                 commonTitle={t("Project Name")}
                 value={project.name}
-                onChange={name => setLocalName(name)}
+                onChange={(name) => setLocalName(name)}
               />
               <TextareaField
                 commonTitle={t("Description")}
@@ -98,7 +105,11 @@ const GeneralSettings: FC<Props> = ({ project, onUpdateProject, onDeleteProject
                 </SettingsRowItem>
               </SettingsRow>
               <ButtonWrapper>
-                <Button title={t("Submit")} appearance="primary" onClick={handleSubmit} />
+                <Button
+                  title={t("Submit")}
+                  appearance="primary"
+                  onClick={handleSubmit}
+                />
               </ButtonWrapper>
             </SettingsFields>
           </Collapse>
@@ -144,7 +155,8 @@ const GeneralSettings: FC<Props> = ({ project, onUpdateProject, onDeleteProject
               disabled={deleteDisabled}
               onClick={onDeleteProject}
             />,
-          ]}>
+          ]}
+        >
           <ModalContentWrapper>
             <Typography size="body" weight="bold">
               {project?.name}
@@ -155,8 +167,10 @@ const GeneralSettings: FC<Props> = ({ project, onUpdateProject, onDeleteProject
               )}
             </Typography>
             <Divider />
-            <Typography size="body">{t("Please type your project name to continue.")}</Typography>
-            <TextInput onChange={name => setDeleteInputName(name)} />
+            <Typography size="body">
+              {t("Please type your project name to continue.")}
+            </Typography>
+            <TextInput onChange={(name) => setDeleteInputName(name)} />
           </ModalContentWrapper>
         </ModalPanel>
       </Modal>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
index d10f4ef55..6d573be0b 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
@@ -1,8 +1,7 @@
-import React from "react";
-
 import Text from "@reearth/beta/components/Text";
 import { Icon, IconName } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import React from "react";
 
 export type Props = {
   className?: string;
@@ -11,7 +10,12 @@ export type Props = {
   onClick?: () => void;
 };
 
-const PluginInstallCardButton: React.FC<Props> = ({ className, icon, text, onClick }) => (
+const PluginInstallCardButton: React.FC<Props> = ({
+  className,
+  icon,
+  text,
+  onClick,
+}) => (
   <StyledButton onClick={onClick} className={className}>
     <Icon icon={icon} size={126} />
     <Text size="h4">{text}</Text>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx
index 8a2141e4d..fe5d0d214 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx
@@ -1,5 +1,3 @@
-import { FC, useState } from "react";
-
 import {
   Button,
   Icon,
@@ -11,6 +9,7 @@ import {
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useState } from "react";
 
 import { type PluginItem } from ".";
 
@@ -54,13 +53,19 @@ const PluginListItem: FC<PluginListItemProps> = ({
         <Button
           appearance={isInstalled && hovered ? "dangerous" : "secondary"}
           icon={isInstalled ? (hovered ? "trash" : "check") : "install"}
-          title={isInstalled ? (hovered ? t("Uninstall") : t("Installed")) : t("Install")}
+          title={
+            isInstalled
+              ? hovered
+                ? t("Uninstall")
+                : t("Installed")
+              : t("Install")
+          }
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
           minWidth={153}
           onClick={
             isInstalled
-              ? e => {
+              ? (e) => {
                   setIsModalOpen(true);
                   e.stopPropagation();
                 }
@@ -88,7 +93,8 @@ const PluginListItem: FC<PluginListItemProps> = ({
                   uninstallPlugin(pluginId);
                 }}
               />,
-            ]}>
+            ]}
+          >
             <WarningIcon>
               <Icon icon="warning" size={24} />
             </WarningIcon>
@@ -97,7 +103,9 @@ const PluginListItem: FC<PluginListItemProps> = ({
                 "You are uninstalling the selected plugin. The data used by this plugin may also be deleted.",
               )}
             </Typography>
-            <Typography size="body">{t("Please be sure before uninstalling.")}</Typography>
+            <Typography size="body">
+              {t("Please be sure before uninstalling.")}
+            </Typography>
           </ModalPanel>
         </Modal>
       </Header>
@@ -108,7 +116,8 @@ const PluginListItem: FC<PluginListItemProps> = ({
               backgroundColor={theme.bg.base}
               styles={{
                 color: theme.content.main,
-              }}>
+              }}
+            >
               {bodyMarkdown}
             </Markdown>
           ) : (
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx
index c16dfc115..eb5fcdb48 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx
@@ -1,8 +1,7 @@
-import { FC } from "react";
-
 import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import PluginListItem from "./PluginListItem";
 
@@ -29,8 +28,12 @@ const PluginList: FC<PluginListProps> = ({ plugins, uninstallPlugin }) => {
         <Typography size="body">{t("Installed Plugins")}</Typography>
       </InstalledHeader>
       <ListWrapper>
-        {plugins.map(p => (
-          <PluginListItem key={p.pluginId} plugin={p} uninstallPlugin={uninstallPlugin} />
+        {plugins.map((p) => (
+          <PluginListItem
+            key={p.pluginId}
+            plugin={p}
+            uninstallPlugin={uninstallPlugin}
+          />
         ))}
       </ListWrapper>
     </Wrapper>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts
index 38158f44d..33a65c072 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts
@@ -1,6 +1,8 @@
 import { useCallback, useState } from "react";
 
-export const validateUrl = (url: string): { result: boolean; message: string } => {
+export const validateUrl = (
+  url: string,
+): { result: boolean; message: string } => {
   if (!url) {
     return { result: false, message: "Error: Thie field is required" };
   }
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx
index 098119e13..06a7a53b1 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import {
   Button,
   IconName,
@@ -11,6 +9,7 @@ import {
 import { InputField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { useTheme } from "@reearth/services/theme";
+import React from "react";
 
 import PluginInstallCardButton from "../PluginInstallCardButton";
 
@@ -65,7 +64,8 @@ const PublicRepo: React.FC<Props> = ({
               disabled={!repoUrl}
               onClick={handleSubmit}
             />,
-          ]}>
+          ]}
+        >
           {loading && <Loading overlay />}
           <InputField
             commonTitle={t("Repository url:")}
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx
index 274e26112..d0b71df29 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx
@@ -1,8 +1,7 @@
+import { IconName, Loading } from "@reearth/beta/lib/reearth-ui";
 import React from "react";
 import useFileInput from "use-file-input";
 
-import { IconName, Loading } from "@reearth/beta/lib/reearth-ui";
-
 import PluginInstallCardButton from "../PluginInstallCardButton";
 
 export type Props = {
@@ -14,7 +13,7 @@ export type Props = {
 
 const ZipUpload: React.FC<Props> = ({ icon, buttonText, onSend, loading }) => {
   const accept = ".zip";
-  const handleClick = useFileInput(files => onSend?.(files), {
+  const handleClick = useFileInput((files) => onSend?.(files), {
     accept,
     multiple: false,
   });
@@ -23,7 +22,11 @@ const ZipUpload: React.FC<Props> = ({ icon, buttonText, onSend, loading }) => {
       {loading ? (
         <Loading overlay />
       ) : (
-        <PluginInstallCardButton icon={icon} text={buttonText} onClick={handleClick} />
+        <PluginInstallCardButton
+          icon={icon}
+          text={buttonText}
+          onClick={handleClick}
+        />
       )}
     </>
   );
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx
index 6a399e54f..05a890f91 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx
@@ -1,7 +1,6 @@
-import React from "react";
-
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import React from "react";
 
 import PluginList, { PluginItem } from "./PluginList";
 import PublicRepo from "./PublicRepo";
@@ -38,7 +37,10 @@ const PluginInstall: React.FC<Props> = ({
           onSend={installFromPublicRepo}
         />
       </ButtonsWrapper>
-      <PluginList plugins={installedPlugins} uninstallPlugin={uninstallPlugin} />
+      <PluginList
+        plugins={installedPlugins}
+        uninstallPlugin={uninstallPlugin}
+      />
     </Wrapper>
   );
 };
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts
index eb15560e2..903826a4e 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts
@@ -1,7 +1,6 @@
-import { useCallback, useMemo } from "react";
-
 import { usePluginsFetcher } from "@reearth/services/api";
 import { ScenePlugin } from "@reearth/services/gql";
+import { useCallback, useMemo } from "react";
 
 export type MarketplacePlugin = {
   id: string;
@@ -10,15 +9,28 @@ export type MarketplacePlugin = {
   author?: string;
 };
 
-export default ({ sceneId, plugins }: { sceneId?: string; plugins?: ScenePlugin[] }) => {
-  const { useInstallPlugin, useUpgradePlugin, useUploadPlugin, useUninstallPlugin } =
-    usePluginsFetcher();
+export default ({
+  sceneId,
+  plugins,
+}: {
+  sceneId?: string;
+  plugins?: ScenePlugin[];
+}) => {
+  const {
+    useInstallPlugin,
+    useUpgradePlugin,
+    useUploadPlugin,
+    useUninstallPlugin,
+  } = usePluginsFetcher();
 
   const marketplacePlugins = useMemo(
     () =>
       plugins
         ?.filter(
-          p => p.plugin && p.plugin?.id !== "reearth" && p.plugin.id.split("~", 3).length < 3,
+          (p) =>
+            p.plugin &&
+            p.plugin?.id !== "reearth" &&
+            p.plugin.id.split("~", 3).length < 3,
         )
         .map((p): MarketplacePlugin | undefined => {
           if (!p.plugin) return;
@@ -38,11 +50,15 @@ export default ({ sceneId, plugins }: { sceneId?: string; plugins?: ScenePlugin[
     () =>
       plugins
         ?.filter(
-          p => p.plugin && p.plugin.id !== "reearth" && p.plugin.id.split("~", 3).length == 3,
+          (p) =>
+            p.plugin &&
+            p.plugin.id !== "reearth" &&
+            p.plugin.id.split("~", 3).length == 3,
         )
-        .map(p => ({
+        .map((p) => ({
           title: p.plugin?.translatedName ?? p.plugin?.name ?? "",
-          bodyMarkdown: p.plugin?.translatedDescription ?? p.plugin?.description ?? "",
+          bodyMarkdown:
+            p.plugin?.translatedDescription ?? p.plugin?.description ?? "",
           author: p.plugin?.author ?? "",
           isInstalled: true,
           pluginId: p.plugin?.id ?? "",
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx
index e51c1ec52..c5eb8026b 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx
@@ -1,10 +1,9 @@
-import { useMemo } from "react";
-
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { Extension } from "@reearth/services/config/extensions";
 import { ScenePlugin } from "@reearth/services/gql";
 import { useT, useLang } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useMemo } from "react";
 
 import { InnerPage, ArchivedSettingNotice } from "../common";
 
@@ -51,7 +50,7 @@ const PluginSettings: React.FC<Props> = ({
         children: (
           <>
             {accessToken &&
-              extensions?.library?.map(ext => (
+              extensions?.library?.map((ext) => (
                 <ext.component
                   key={ext.id}
                   theme={"dark"}
@@ -71,7 +70,7 @@ const PluginSettings: React.FC<Props> = ({
         children: (
           <>
             {accessToken &&
-              extensions?.installed?.map(ext => (
+              extensions?.installed?.map((ext) => (
                 <ext.component
                   key={ext.id}
                   theme={"dark"}
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
index b568394be..62091d989 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useState } from "react";
-
 import defaultBetaProjectImage from "@reearth/beta/components/Icon/Icons/defaultBetaProjectImage.png";
 import { IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
 import { Button, Collapse } from "@reearth/beta/lib/reearth-ui";
@@ -7,6 +5,7 @@ import { AssetField, InputField, SwitchField } from "@reearth/beta/ui/fields";
 import TextAreaField from "@reearth/beta/ui/fields/TextareaField";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useCallback, useState } from "react";
 
 import { useGA } from "../../../Published/googleAnalytics/useGA";
 import { SettingsFields, ButtonWrapper } from "../common";
@@ -91,14 +90,14 @@ const PublicSettingsDetail: React.FC<Props> = ({
             commonTitle={t("Title")}
             value={settingsItem.publicTitle}
             onChange={(publicTitle: string) => {
-              setLocalPublicInfo(s => ({ ...s, publicTitle }));
+              setLocalPublicInfo((s) => ({ ...s, publicTitle }));
             }}
           />
           <TextAreaField
             commonTitle={t("Description")}
             value={localPublicInfo.publicDescription ?? ""}
             onChange={(publicDescription: string) => {
-              setLocalPublicInfo(s => ({ ...s, publicDescription }));
+              setLocalPublicInfo((s) => ({ ...s, publicDescription }));
             }}
           />
           <ThumbnailField>
@@ -107,18 +106,24 @@ const PublicSettingsDetail: React.FC<Props> = ({
               inputMethod="asset"
               assetsTypes={IMAGE_TYPES}
               value={localPublicInfo.publicImage}
-              onChange={publicImage => {
-                setLocalPublicInfo(s => ({ ...s, publicImage }));
+              onChange={(publicImage) => {
+                setLocalPublicInfo((s) => ({ ...s, publicImage }));
               }}
             />
             <StyledImage
               src={
-                !localPublicInfo.publicImage ? defaultBetaProjectImage : localPublicInfo.publicImage
+                !localPublicInfo.publicImage
+                  ? defaultBetaProjectImage
+                  : localPublicInfo.publicImage
               }
             />
           </ThumbnailField>
           <ButtonWrapper>
-            <Button title={t("Submit")} appearance="primary" onClick={handleSubmitPublicInfo} />
+            <Button
+              title={t("Submit")}
+              appearance="primary"
+              onClick={handleSubmitPublicInfo}
+            />
           </ButtonWrapper>
         </SettingsFields>
       </Collapse>
@@ -127,15 +132,15 @@ const PublicSettingsDetail: React.FC<Props> = ({
           <SwitchField
             commonTitle={t("Enable Basic Authorization")}
             value={localBasicAuthorization.isBasicAuthActive}
-            onChange={isBasicAuthActive => {
-              setBasicAuthorization(s => ({ ...s, isBasicAuthActive }));
+            onChange={(isBasicAuthActive) => {
+              setBasicAuthorization((s) => ({ ...s, isBasicAuthActive }));
             }}
           />
           <InputField
             commonTitle={t("Username")}
             value={settingsItem.basicAuthUsername}
             onChange={(basicAuthUsername: string) => {
-              setBasicAuthorization(s => ({ ...s, basicAuthUsername }));
+              setBasicAuthorization((s) => ({ ...s, basicAuthUsername }));
             }}
             disabled={!localBasicAuthorization.isBasicAuthActive}
           />
@@ -143,7 +148,7 @@ const PublicSettingsDetail: React.FC<Props> = ({
             commonTitle={t("Password")}
             value={settingsItem.basicAuthPassword}
             onChange={(basicAuthPassword: string) => {
-              setBasicAuthorization(s => ({ ...s, basicAuthPassword }));
+              setBasicAuthorization((s) => ({ ...s, basicAuthPassword }));
             }}
             disabled={!localBasicAuthorization.isBasicAuthActive}
           />
@@ -169,7 +174,11 @@ const PublicSettingsDetail: React.FC<Props> = ({
             )}
           />
           <ButtonWrapper>
-            <Button title={t("Submit")} appearance="primary" onClick={handleSubmitAlias} />
+            <Button
+              title={t("Submit")}
+              appearance="primary"
+              onClick={handleSubmitAlias}
+            />
           </ButtonWrapper>
         </SettingsFields>
       </Collapse>
@@ -179,18 +188,22 @@ const PublicSettingsDetail: React.FC<Props> = ({
             commonTitle={t("Enable Google Analytics")}
             value={localGA.enableGa ?? false}
             onChange={(enableGa: boolean) => {
-              setLocalGA(s => ({ ...s, enableGa }));
+              setLocalGA((s) => ({ ...s, enableGa }));
             }}
           />
           <InputField
             commonTitle={t("Tracking ID")}
             value={settingsItem.trackingId}
             onChange={(trackingId: string) => {
-              setLocalGA(s => ({ ...s, trackingId }));
+              setLocalGA((s) => ({ ...s, trackingId }));
             }}
           />
           <ButtonWrapper>
-            <Button title={t("Submit")} appearance="primary" onClick={handleSubmitGA} />
+            <Button
+              title={t("Submit")}
+              appearance="primary"
+              onClick={handleSubmitGA}
+            />
           </ButtonWrapper>
         </SettingsFields>
       </Collapse>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
index 533eb0463..e665e7c17 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useMemo, useState } from "react";
-
 import {
   SidebarMenuItem,
   SidebarSection,
@@ -7,8 +5,14 @@ import {
 } from "@reearth/beta/ui/components/Sidebar";
 import { Story } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useMemo, useState } from "react";
 
-import { InnerPage, SettingsWrapper, ArchivedSettingNotice, InnerSidebar } from "../common";
+import {
+  InnerPage,
+  SettingsWrapper,
+  ArchivedSettingNotice,
+  InnerSidebar,
+} from "../common";
 
 import PublicSettingsDetail from "./PublicSettingsDetail";
 
@@ -86,7 +90,7 @@ const PublicSettings: React.FC<Props> = ({
         path: `/settings/project/${project.id}/public/`,
         active: selectedTab === "map",
       },
-      ...stories.map(s => ({
+      ...stories.map((s) => ({
         id: s.id,
         title: (!s.title || s.title) === "Default" ? t("Story") : s.title,
         icon: "sidebar" as const,
@@ -104,7 +108,7 @@ const PublicSettings: React.FC<Props> = ({
       <InnerSidebar>
         <SidebarWrapper>
           <SidebarSection>
-            {menu?.map(s => (
+            {menu?.map((s) => (
               <SidebarMenuItem
                 key={s.id}
                 text={s.title}
diff --git a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx
index 6751abc08..8d46fd002 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx
@@ -1,11 +1,15 @@
-import { useCallback, useState } from "react";
-
 import { Button, Collapse } from "@reearth/beta/lib/reearth-ui";
 import { ColorField, SelectField } from "@reearth/beta/ui/fields";
 import { Position } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useState } from "react";
 
-import { SettingsFields, ButtonWrapper, SettingsRow, SettingsRowItem } from "../common";
+import {
+  SettingsFields,
+  ButtonWrapper,
+  SettingsRow,
+  SettingsRowItem,
+} from "../common";
 
 import { StorySettingsType } from ".";
 
@@ -14,13 +18,18 @@ type Props = {
   onUpdateStory: (settings: StorySettingsType) => void;
 };
 
-const StorySettingsDetail: React.FC<Props> = ({ settingsItem, onUpdateStory }) => {
+const StorySettingsDetail: React.FC<Props> = ({
+  settingsItem,
+  onUpdateStory,
+}) => {
   const t = useT();
 
-  const [localPanelPosition, setLocalPanelPosition] = useState<Position | undefined>(
-    settingsItem.panelPosition,
+  const [localPanelPosition, setLocalPanelPosition] = useState<
+    Position | undefined
+  >(settingsItem.panelPosition);
+  const [backgroundColor, setBackgroundColor] = useState<string | undefined>(
+    settingsItem?.bgColor,
   );
-  const [backgroundColor, setBackgroundColor] = useState<string | undefined>(settingsItem?.bgColor);
   const handleSubmit = useCallback(() => {
     onUpdateStory({
       panelPosition: localPanelPosition,
@@ -48,19 +57,23 @@ const StorySettingsDetail: React.FC<Props> = ({ settingsItem, onUpdateStory }) =
               commonTitle={t("Panel Position")}
               value={localPanelPosition}
               options={options}
-              onChange={value => setLocalPanelPosition(value as Position)}
+              onChange={(value) => setLocalPanelPosition(value as Position)}
             />
           </SettingsRowItem>
           <SettingsRowItem>
             <ColorField
               commonTitle={t("Background Color")}
               value={backgroundColor}
-              onChange={value => setBackgroundColor(value)}
+              onChange={(value) => setBackgroundColor(value)}
             />
           </SettingsRowItem>
         </SettingsRow>
         <ButtonWrapper>
-          <Button title={t("Submit")} appearance="primary" onClick={handleSubmit} />
+          <Button
+            title={t("Submit")}
+            appearance="primary"
+            onClick={handleSubmit}
+          />
         </ButtonWrapper>
       </SettingsFields>
     </Collapse>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx
index 2b7fdfe3d..3358ab5e3 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx
@@ -15,7 +15,11 @@ type Props = {
   onUpdateStory: (settings: StorySettingsType) => void;
 };
 
-const StorySettings: React.FC<Props> = ({ currentStory, isArchived, onUpdateStory }) => {
+const StorySettings: React.FC<Props> = ({
+  currentStory,
+  isArchived,
+  onUpdateStory,
+}) => {
   return (
     <InnerPage>
       <SettingsWrapper>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/common.tsx b/web/src/beta/features/ProjectSettings/innerPages/common.tsx
index ee6fa4834..1c62666ba 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/common.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/common.tsx
@@ -2,16 +2,17 @@ import { Collapse, Typography } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
-export const InnerPage = styled("div")<{ wide?: boolean; transparent?: boolean }>(
-  ({ wide, transparent, theme }) => ({
-    boxSizing: "border-box",
-    display: "flex",
-    width: "100%",
-    maxWidth: wide ? 950 : 750,
-    backgroundColor: transparent ? "none" : theme.bg[1],
-    borderRadius: theme.radius.normal,
-  }),
-);
+export const InnerPage = styled("div")<{
+  wide?: boolean;
+  transparent?: boolean;
+}>(({ wide, transparent, theme }) => ({
+  boxSizing: "border-box",
+  display: "flex",
+  width: "100%",
+  maxWidth: wide ? 950 : 750,
+  backgroundColor: transparent ? "none" : theme.bg[1],
+  borderRadius: theme.radius.normal,
+}));
 
 export const InnerSidebar = styled("div")(({ theme }) => ({
   display: "flex",
@@ -52,7 +53,9 @@ export const Thumbnail = styled("div")<{ src?: string }>(({ src, theme }) => ({
   width: "100%",
   paddingBottom: "52.3%",
   fontSize: 0,
-  background: src ? `url(${src}) center/contain no-repeat` : theme.relative.dark,
+  background: src
+    ? `url(${src}) center/contain no-repeat`
+    : theme.relative.dark,
   borderRadius: theme.radius.small,
 }));
 
diff --git a/web/src/beta/features/Published/convert-new-property.ts b/web/src/beta/features/Published/convert-new-property.ts
index f12274d1b..16317ab38 100644
--- a/web/src/beta/features/Published/convert-new-property.ts
+++ b/web/src/beta/features/Published/convert-new-property.ts
@@ -1,16 +1,19 @@
-import { mapValues } from "lodash-es";
-
 import { InfoboxBlock } from "@reearth/beta/features/Visualizer/Crust/Infobox/types";
 import { DEFAULT_LAYER_STYLE } from "@reearth/beta/utils/value";
 import { Layer, LayerAppearanceTypes } from "@reearth/core";
-import { NLSInfobox, NLSLayer, SketchFeature } from "@reearth/services/api/layersApi/utils";
+import {
+  NLSInfobox,
+  NLSLayer,
+  SketchFeature,
+} from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
+import { mapValues } from "lodash-es";
 
 export const processNewProperty = (p: any): any => {
   if (typeof p !== "object") return p;
-  return mapValues(p, g => {
+  return mapValues(p, (g) => {
     return Array.isArray(g)
-      ? g.map(h => ({
+      ? g.map((h) => ({
           ...processNewPropertyGroup(h),
           id: h.id,
         }))
@@ -20,17 +23,27 @@ export const processNewProperty = (p: any): any => {
 
 function processNewPropertyGroup(g: any): any {
   if (typeof g !== "object") return g;
-  return mapValues(g, v => {
+  return mapValues(g, (v) => {
     if (Array.isArray(v)) {
       return {
-        value: v.map(vv =>
-          typeof v === "object" && v && "lat" in v && "lng" in v && "altitude" in v // For compability
+        value: v.map((vv) =>
+          typeof v === "object" &&
+          v &&
+          "lat" in v &&
+          "lng" in v &&
+          "altitude" in v // For compability
             ? { value: { ...vv, height: vv.altitude } }
             : vv,
         ),
       };
     }
-    if (typeof v === "object" && v && "lat" in v && "lng" in v && "altitude" in v) {
+    if (
+      typeof v === "object" &&
+      v &&
+      "lat" in v &&
+      "lng" in v &&
+      "altitude" in v
+    ) {
       return {
         value: {
           ...v,
@@ -48,7 +61,7 @@ export function processLayers(
 ): Layer[] | undefined {
   const getLayerStyleValue = (id?: string) => {
     const layerStyleValue: Partial<LayerAppearanceTypes> = layerStyles?.find(
-      a => a.id === id,
+      (a) => a.id === id,
     )?.value;
     if (typeof layerStyleValue === "object") {
       try {
@@ -61,18 +74,20 @@ export function processLayers(
     return DEFAULT_LAYER_STYLE;
   };
 
-  return newLayers?.map(nlsLayer => {
+  return newLayers?.map((nlsLayer) => {
     const layerStyle = getLayerStyleValue(nlsLayer.config?.layerStyleId);
     const sketchLayerData = nlsLayer.isSketch && {
       ...nlsLayer.config.data,
       value: {
         type: "FeatureCollection",
-        features: nlsLayer.sketch?.featureCollection?.features.map((feature: SketchFeature) => {
-          return {
-            ...feature,
-            geometry: feature.geometry[0],
-          };
-        }),
+        features: nlsLayer.sketch?.featureCollection?.features.map(
+          (feature: SketchFeature) => {
+            return {
+              ...feature,
+              geometry: feature.geometry[0],
+            };
+          },
+        ),
       },
       isSketchLayer: true,
       idProperty: "id",
@@ -93,11 +108,13 @@ export function processLayers(
   });
 }
 
-function convertInfobox(infobox: NLSInfobox | null | undefined): Layer["infobox"] {
+function convertInfobox(
+  infobox: NLSInfobox | null | undefined,
+): Layer["infobox"] {
   if (!infobox) return;
   return {
     property: processNewProperty(infobox.property),
-    blocks: infobox.blocks?.map<InfoboxBlock>(b => ({
+    blocks: infobox.blocks?.map<InfoboxBlock>((b) => ({
       id: b.id,
       // name: blockNames?.[b.extensionId] ?? "Infobox Block",
       pluginId: b.pluginId,
diff --git a/web/src/beta/features/Published/convert.ts b/web/src/beta/features/Published/convert.ts
index 726403e38..b28294270 100644
--- a/web/src/beta/features/Published/convert.ts
+++ b/web/src/beta/features/Published/convert.ts
@@ -2,23 +2,35 @@ import { mapValues } from "lodash-es";
 
 export const processProperty = (p: any): any => {
   if (typeof p !== "object") return p;
-  return mapValues(p, g =>
-    Array.isArray(g) ? g.map(h => processPropertyGroup(h)) : processPropertyGroup(g),
+  return mapValues(p, (g) =>
+    Array.isArray(g)
+      ? g.map((h) => processPropertyGroup(h))
+      : processPropertyGroup(g),
   );
 };
 
 const processPropertyGroup = (g: any): any => {
   if (typeof g !== "object") return g;
-  return mapValues(g, v => {
+  return mapValues(g, (v) => {
     // For compability
     if (Array.isArray(v)) {
-      return v.map(vv =>
-        typeof v === "object" && v && "lat" in v && "lng" in v && "altitude" in v
+      return v.map((vv) =>
+        typeof v === "object" &&
+        v &&
+        "lat" in v &&
+        "lng" in v &&
+        "altitude" in v
           ? { ...vv, height: vv.altitude }
           : vv,
       );
     }
-    if (typeof v === "object" && v && "lat" in v && "lng" in v && "altitude" in v) {
+    if (
+      typeof v === "object" &&
+      v &&
+      "lat" in v &&
+      "lng" in v &&
+      "altitude" in v
+    ) {
       return {
         ...v,
         height: v.altitude,
diff --git a/web/src/beta/features/Published/googleAnalytics/useGA.ts b/web/src/beta/features/Published/googleAnalytics/useGA.ts
index 0e869a680..8782cbab0 100644
--- a/web/src/beta/features/Published/googleAnalytics/useGA.ts
+++ b/web/src/beta/features/Published/googleAnalytics/useGA.ts
@@ -14,7 +14,9 @@ export const useGA = ({ enableGa, trackingId }: GeneralGASettingsType) => {
     if (!isEnabled || !trackingId) return;
 
     const loadGaModule = async () => {
-      const gaModule = isGa4TrackingId(trackingId) ? await import("./ga4") : await import("./ga");
+      const gaModule = isGa4TrackingId(trackingId)
+        ? await import("./ga4")
+        : await import("./ga");
       gaModule.initialize(trackingId);
       gaModule.pageview(window.location.pathname);
     };
diff --git a/web/src/beta/features/Published/hooks.ts b/web/src/beta/features/Published/hooks.ts
index 1a6f29ce2..91002c8c0 100644
--- a/web/src/beta/features/Published/hooks.ts
+++ b/web/src/beta/features/Published/hooks.ts
@@ -1,5 +1,3 @@
-import { useState, useMemo, useEffect, useRef } from "react";
-
 import {
   InternalWidget,
   WidgetAlignSystem,
@@ -15,6 +13,7 @@ import {
 import type { Camera } from "@reearth/beta/utils/value";
 import { ViewerProperty, MapRef } from "@reearth/core";
 import { config } from "@reearth/services/config";
+import { useState, useMemo, useEffect, useRef } from "react";
 
 import { WidgetThemeOptions } from "../Visualizer/Crust/theme";
 
@@ -34,24 +33,34 @@ export default (alias?: string) => {
   const [data, setData] = useState<PublishedData>();
   const [ready, setReady] = useState(false);
   const [error, setError] = useState(false);
-  const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(undefined);
-  const [initialCamera, setInitialCamera] = useState<Camera | undefined>(undefined);
+  const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(
+    undefined,
+  );
+  const [initialCamera, setInitialCamera] = useState<Camera | undefined>(
+    undefined,
+  );
 
-  const { viewerProperty, widgetThemeOptions, cesiumIonAccessToken } = useMemo(() => {
-    const sceneProperty = processProperty(data?.property);
-    const widgetThemeOptions = sceneProperty?.theme as WidgetThemeOptions | undefined;
-    const cesiumIonAccessToken = sceneProperty?.default?.ion;
-    if (sceneProperty?.camera?.camera) {
-      setInitialCamera(sceneProperty?.camera?.camera);
-    }
-    return {
-      viewerProperty: sceneProperty
-        ? (convertData(sceneProperty, sceneProperty2ViewerPropertyMapping) as ViewerProperty)
-        : undefined,
-      widgetThemeOptions,
-      cesiumIonAccessToken,
-    };
-  }, [data?.property]);
+  const { viewerProperty, widgetThemeOptions, cesiumIonAccessToken } =
+    useMemo(() => {
+      const sceneProperty = processProperty(data?.property);
+      const widgetThemeOptions = sceneProperty?.theme as
+        | WidgetThemeOptions
+        | undefined;
+      const cesiumIonAccessToken = sceneProperty?.default?.ion;
+      if (sceneProperty?.camera?.camera) {
+        setInitialCamera(sceneProperty?.camera?.camera);
+      }
+      return {
+        viewerProperty: sceneProperty
+          ? (convertData(
+              sceneProperty,
+              sceneProperty2ViewerPropertyMapping,
+            ) as ViewerProperty)
+          : undefined,
+        widgetThemeOptions,
+        cesiumIonAccessToken,
+      };
+    }, [data?.property]);
 
   useEffect(() => {
     setCurrentCamera(initialCamera);
@@ -59,10 +68,10 @@ export default (alias?: string) => {
 
   const pluginProperty = useMemo(
     () =>
-      Object.keys(data?.plugins ?? {}).reduce<{ [key: string]: any }>(
-        (a, b) => ({ ...a, [b]: processProperty(data?.plugins?.[b]?.property) }),
-        {},
-      ),
+      Object.keys(data?.plugins ?? {}).reduce<Record<string, any>>((a, b) => {
+        a[b] = processProperty(data?.plugins?.[b]?.property);
+        return a;
+      }, {}),
     [data?.plugins],
   );
 
@@ -81,7 +90,8 @@ export default (alias?: string) => {
       for (const z of ["inner", "outer"] as const) {
         for (const s of ["left", "center", "right"] as const) {
           for (const a of ["top", "middle", "bottom"] as const) {
-            for (const w of data.widgetAlignSystem?.[z]?.[s]?.[a]?.widgetIds ?? []) {
+            for (const w of data.widgetAlignSystem?.[z]?.[s]?.[a]?.widgetIds ??
+              []) {
               widgetsInWas.add(w);
             }
           }
@@ -90,7 +100,7 @@ export default (alias?: string) => {
     }
 
     const floatingWidgets = data?.widgets
-      .filter(w => !widgetsInWas.has(w.id))
+      .filter((w) => !widgetsInWas.has(w.id))
       .map(
         (w): InternalWidget => ({
           id: w.id,
@@ -102,7 +112,7 @@ export default (alias?: string) => {
       );
 
     const widgets = data?.widgets
-      .filter(w => widgetsInWas.has(w.id))
+      .filter((w) => widgetsInWas.has(w.id))
       .map(
         (w): InternalWidget => ({
           id: w.id,
@@ -133,7 +143,9 @@ export default (alias?: string) => {
       const align = area?.align.toLowerCase() as WidgetAlignment | undefined;
       const padding = area?.padding as WidgetAreaPadding | undefined;
       const areaWidgets: InternalWidget[] | undefined = area?.widgetIds
-        .map<InternalWidget | undefined>(w => widgets?.find(w2 => w === w2.id))
+        .map<
+          InternalWidget | undefined
+        >((w) => widgets?.find((w2) => w === w2.id))
         .filter((w): w is InternalWidget => !!w);
       return {
         align: align ?? "start",
@@ -150,10 +162,16 @@ export default (alias?: string) => {
       };
     };
 
-    const ownBuiltinWidgets = data.widgets.reduce<(keyof BuiltinWidgets)[]>((res, next) => {
-      const id = `${next.pluginId}/${next.extensionId}`;
-      return isBuiltinWidget(id) && widgetsInWas.has(next.id) ? [...res, id] : res;
-    }, []);
+    const ownBuiltinWidgets = data.widgets.reduce<(keyof BuiltinWidgets)[]>(
+      (res, next) => {
+        const id = `${next.pluginId}/${next.extensionId}`;
+        if (isBuiltinWidget(id) && widgetsInWas.has(next.id)) {
+          res.push(id);
+        }
+        return res;
+      },
+      [],
+    );
 
     return {
       floating: floatingWidgets,
@@ -168,7 +186,10 @@ export default (alias?: string) => {
   }, [data]);
 
   const actualAlias = useMemo(
-    () => alias || new URLSearchParams(window.location.search).get("alias") || undefined,
+    () =>
+      alias ||
+      new URLSearchParams(window.location.search).get("alias") ||
+      undefined,
     [alias],
   );
 
@@ -181,13 +202,13 @@ export default (alias?: string) => {
           title: s.title,
           position: s.position,
           bgColor: s.bgColor || "#f1f1f1",
-          pages: s.pages.map(p => {
+          pages: s.pages.map((p) => {
             return {
               id: p.id,
               swipeable: p.swipeable,
               layerIds: p.layers,
               property: processProperty(p.property),
-              blocks: p.blocks.map(b => {
+              blocks: p.blocks.map((b) => {
                 return {
                   id: b.id,
                   pluginId: b.pluginId,
@@ -203,7 +224,7 @@ export default (alias?: string) => {
 
   const layers = useMemo(() => {
     const processedLayers = processLayers(
-      data?.nlsLayers?.map(l => ({
+      data?.nlsLayers?.map((l) => ({
         id: l.id,
         title: l.title,
         config: l.config,
@@ -217,7 +238,7 @@ export default (alias?: string) => {
     );
     if (!story) return processedLayers;
 
-    return processedLayers?.map(layer => ({
+    return processedLayers?.map((layer) => ({
       ...layer,
       visible: true,
     }));
diff --git a/web/src/beta/features/Published/types.ts b/web/src/beta/features/Published/types.ts
index 08976bfbc..9649edf2f 100644
--- a/web/src/beta/features/Published/types.ts
+++ b/web/src/beta/features/Published/types.ts
@@ -1,5 +1,10 @@
 import { SceneProperty } from "@reearth/beta/types";
-import type { DataRange, DataType, Geometry, TimeInterval } from "@reearth/core";
+import type {
+  DataRange,
+  DataType,
+  Geometry,
+  TimeInterval,
+} from "@reearth/core";
 import { SketchFeature } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 
@@ -133,7 +138,12 @@ export type WidgetArea = {
 
 export type WidgetAlignment = "start" | "centered" | "end";
 
-export type WidgetAreaPadding = { top: number; bottom: number; left: number; right: number };
+export type WidgetAreaPadding = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
 
 export type Feature = {
   id: string;
diff --git a/web/src/beta/features/README.md b/web/src/beta/features/README.md
index 8ac2e7d5c..844784472 100644
--- a/web/src/beta/features/README.md
+++ b/web/src/beta/features/README.md
@@ -1,4 +1,4 @@
-# App-specific features 
+# App-specific features
 
 A feature is self-contained. It contains everything inside its subdirectories except for any shared components which will be in `components/`.
 
@@ -16,5 +16,5 @@ features/
       ...
 ```
 
-Here we have the Editor as a feature. To make the Editor work, the Visualizer, SidePanels, and the VisualizerNav are all necessary to make the Editor work. 
-Any Buttons, Icons, etc will be generic and imported from `components/`.
\ No newline at end of file
+Here we have the Editor as a feature. To make the Editor work, the Visualizer, SidePanels, and the VisualizerNav are all necessary to make the Editor work.
+Any Buttons, Icons, etc will be generic and imported from `components/`.
diff --git a/web/src/beta/features/RootPage/PageWrapper/index.tsx b/web/src/beta/features/RootPage/PageWrapper/index.tsx
index 5c1edc640..1f345b3f4 100644
--- a/web/src/beta/features/RootPage/PageWrapper/index.tsx
+++ b/web/src/beta/features/RootPage/PageWrapper/index.tsx
@@ -1,10 +1,12 @@
-import React from "react";
-import { RingLoader } from "react-spinners";
-
 import Flex from "@reearth/beta/components/Flex";
 import Icon from "@reearth/beta/components/Icon";
 import { styled, useTheme } from "@reearth/services/theme";
-import { brandBlue, brandRed } from "@reearth/services/theme/reearthTheme/common/colors";
+import {
+  brandBlue,
+  brandRed,
+} from "@reearth/services/theme/reearthTheme/common/colors";
+import React from "react";
+import { RingLoader } from "react-spinners";
 
 export type Props = {
   loading?: boolean;
@@ -19,7 +21,8 @@ const RootPage: React.FC<Props> = ({ loading }) => {
       align="center"
       direction="column"
       gap={100}
-      bg={window.REEARTH_CONFIG?.brand?.background}>
+      bg={window.REEARTH_CONFIG?.brand?.background}
+    >
       {window.REEARTH_CONFIG?.brand?.logoUrl ? (
         <img src={window.REEARTH_CONFIG.brand.logoUrl} style={{ width: 200 }} />
       ) : (
@@ -33,7 +36,8 @@ const RootPage: React.FC<Props> = ({ loading }) => {
 const Wrapper = styled(Flex)<{ bg?: string }>`
   height: 100%;
   background: ${({ bg }) =>
-    bg || `linear-gradient(70deg, ${brandBlue} 10%, ${brandRed} 60%, ${brandBlue} 90%)`};
+    bg ||
+    `linear-gradient(70deg, ${brandBlue} 10%, ${brandRed} 60%, ${brandBlue} 90%)`};
 `;
 
 export default RootPage;
diff --git a/web/src/beta/features/RootPage/hooks.ts b/web/src/beta/features/RootPage/hooks.ts
index b5d3e26ec..61e0a7921 100644
--- a/web/src/beta/features/RootPage/hooks.ts
+++ b/web/src/beta/features/RootPage/hooks.ts
@@ -1,18 +1,27 @@
-import axios from "axios";
-import { useCallback, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-
 import { useGetTeamsQuery } from "@reearth/services/api/teams";
 import { useAuth, useCleanUrl } from "@reearth/services/auth";
 import { useT } from "@reearth/services/i18n";
-import { useWorkspace, useNotification, useUserId } from "@reearth/services/state";
+import {
+  useWorkspace,
+  useNotification,
+  useUserId,
+} from "@reearth/services/state";
+import axios from "axios";
+import { useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 
 export type Mode = "layer" | "widget";
 
 export default () => {
   const t = useT();
   const navigate = useNavigate();
-  const { isAuthenticated, isLoading, error: authError, login, logout } = useAuth();
+  const {
+    isAuthenticated,
+    isLoading,
+    error: authError,
+    login,
+    logout,
+  } = useAuth();
   const [error, isErrorChecked] = useCleanUrl();
   const [currentWorkspace, setCurrentWorkspace] = useWorkspace();
   const [currentUserId, setCurrentUserId] = useUserId();
@@ -35,13 +44,17 @@ export default () => {
       if (res.status === 200) {
         setNotification({
           type: "success",
-          text: t("Your account has been successfully verified! Feel free to login now."),
+          text: t(
+            "Your account has been successfully verified! Feel free to login now.",
+          ),
         });
         navigate("/login");
       } else {
         setNotification({
           type: "error",
-          text: t("Could not verify your signup. Please start the process over."),
+          text: t(
+            "Could not verify your signup. Please start the process over.",
+          ),
         });
         navigate("/signup");
       }
@@ -53,7 +66,9 @@ export default () => {
     if (!isErrorChecked || error) return;
 
     if (window.location.search) {
-      const searchParam = new URLSearchParams(window.location.search).toString().split("=");
+      const searchParam = new URLSearchParams(window.location.search)
+        .toString()
+        .split("=");
       if (searchParam[0] === "user-verification-token") {
         verifySignup(searchParam[1]);
       } else if (searchParam[0] === "pwd-reset-token") {
@@ -83,7 +98,10 @@ export default () => {
   ]);
 
   useEffect(() => {
-    if (isErrorChecked && (authError || (isAuthenticated && !loading && data?.me === null))) {
+    if (
+      isErrorChecked &&
+      (authError || (isAuthenticated && !loading && data?.me === null))
+    ) {
       logout();
     }
   }, [authError, data?.me, isAuthenticated, isErrorChecked, loading, logout]);
diff --git a/web/src/beta/features/RootPage/index.tsx b/web/src/beta/features/RootPage/index.tsx
index cbf869022..dc24bab7c 100644
--- a/web/src/beta/features/RootPage/index.tsx
+++ b/web/src/beta/features/RootPage/index.tsx
@@ -1,14 +1,17 @@
-import React from "react";
-
 import Loading from "@reearth/beta/components/Loading";
 import PageWrapper from "@reearth/beta/features/RootPage/PageWrapper";
+import React from "react";
 
 import useHooks from "./hooks";
 
 const RootPage: React.FC = () => {
   const { isLoading, isAuthenticated, error } = useHooks();
 
-  return isLoading ? <Loading /> : !isAuthenticated ? <PageWrapper loading={!error} /> : null;
+  return isLoading ? (
+    <Loading />
+  ) : !isAuthenticated ? (
+    <PageWrapper loading={!error} />
+  ) : null;
 };
 
 export default RootPage;
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
index bd1719dfc..36d695e9f 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
@@ -1,14 +1,17 @@
-import { FC, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import type { ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import { InfoboxBlock } from "../../../types";
 import useExpressionEval from "../useExpressionEval";
 
-const ImageBlock: FC<BlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }) => {
+const ImageBlock: FC<BlockProps<InfoboxBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
     [block?.property?.default?.src],
@@ -23,7 +26,8 @@ const ImageBlock: FC<BlockProps<InfoboxBlock>> = ({ block, isSelected, ...props
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
+      {...props}
+    >
       {evaluatedSrc !== undefined ? <Image src={evaluatedSrc} /> : null}
     </BlockWrapper>
   );
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx
index 0ee3947ae..0c796ed18 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx
@@ -24,7 +24,10 @@ type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -43,10 +46,12 @@ const Content: FC<Props> = ({ block, isEditable, ...props }) => {
 
   const { selectedComputedFeature } = useContext(coreContext);
 
-  const displayTypeField: DisplayTypeField = block?.property?.default?.displayType;
+  const displayTypeField: DisplayTypeField =
+    block?.property?.default?.displayType;
 
   const propertyListField: PropertyListField =
-    displayTypeField?.value === "custom" && block?.property?.default?.propertyList;
+    displayTypeField?.value === "custom" &&
+    block?.property?.default?.propertyList;
 
   const properties = useMemo(() => {
     if (displayTypeField?.value === "custom") {
@@ -56,14 +61,21 @@ const Content: FC<Props> = ({ block, isEditable, ...props }) => {
     } else {
       return filterChildObjectsToEnd(selectedComputedFeature?.properties);
     }
-  }, [displayTypeField, propertyListField, selectedComputedFeature?.properties]);
+  }, [
+    displayTypeField,
+    propertyListField,
+    selectedComputedFeature?.properties,
+  ]);
 
   return (
     <Wrapper>
       {!context?.editMode ? (
         displayTypeField?.value === "custom" ? (
           properties ? (
-            <CustomFields properties={properties} extensionId={block?.extensionId} />
+            <CustomFields
+              properties={properties}
+              extensionId={block?.extensionId}
+            />
           ) : (
             <Template icon={block?.extensionId} height={120} />
           )
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx
index 81de4745d..19549ef97 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx
@@ -1,6 +1,5 @@
-import { FC } from "react";
-
 import Template from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/Template";
+import { FC } from "react";
 
 import { PropertyListItem } from "../ListEditor";
 import ListItem from "../ListItem";
@@ -18,7 +17,9 @@ const CustomFields: FC<Props> = ({ extensionId, properties }) => {
   return (
     <>
       {evaluatedProperties && evaluatedProperties.length > 0 ? (
-        evaluatedProperties.map(ep => <ListItem key={ep.id} keyValue={ep.key} value={ep.value} />)
+        evaluatedProperties.map((ep) => (
+          <ListItem key={ep.id} keyValue={ep.key} value={ep.value} />
+        ))
       ) : (
         <Template icon={extensionId} height={120} />
       )}
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts
index 64c622260..2029ff0b0 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts
@@ -1,22 +1,22 @@
+import { evalExpression, useVisualizer, Feature } from "@reearth/core";
 import { isEqual } from "lodash-es";
 import { useEffect, useState } from "react";
 
-import { evalExpression, useVisualizer, Feature } from "@reearth/core";
-
 import { PropertyListItem } from "../ListEditor";
 
 export default (properties: PropertyListItem[] | undefined) => {
   const [isReady, setIsReady] = useState(false);
-  const [currentValue, setCurrentValue] = useState<PropertyListItem[] | undefined>(properties);
+  const [currentValue, setCurrentValue] = useState<
+    PropertyListItem[] | undefined
+  >(properties);
 
-  const [evaluatedProperties, setEvaluatedResult] = useState<PropertyListItem[] | undefined>(
-    undefined,
-  );
+  const [evaluatedProperties, setEvaluatedResult] = useState<
+    PropertyListItem[] | undefined
+  >(undefined);
 
   const visualizer = useVisualizer();
 
   // We want the useEffect to be called on each render to make sure evaluatedProperties is up to date
-  // eslint-disable-next-line
   useEffect(() => {
     if (!isReady) {
       setIsReady(true);
@@ -38,7 +38,7 @@ export default (properties: PropertyListItem[] | undefined) => {
         metaData: selectedFeature.metaData,
         range: selectedFeature.range,
       };
-      const es = currentValue?.map(v => {
+      const es = currentValue?.map((v) => {
         const ev = evalExpression(
           {
             expression: v.value,
@@ -58,7 +58,7 @@ export default (properties: PropertyListItem[] | undefined) => {
         setEvaluatedResult(es as PropertyListItem[]);
       }
     }
-  });
+  }, [isReady, currentValue, properties, evaluatedProperties, visualizer]);
 
-  return evaluatedProperties?.filter(ep => ep !== undefined);
+  return evaluatedProperties?.filter((ep) => ep !== undefined);
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx
index 6fe0d958b..bc6e86456 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx
@@ -1,7 +1,6 @@
-import { FC, useCallback, useState } from "react";
-
 import { Button, Icon, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useState } from "react";
 
 import { PropertyListItem } from ".";
 
@@ -13,7 +12,13 @@ type Props = {
   onItemRemove: () => void;
 };
 
-const EditorItem: FC<Props> = ({ item, handleClassName, onKeyBlur, onValueBlur, onItemRemove }) => {
+const EditorItem: FC<Props> = ({
+  item,
+  handleClassName,
+  onKeyBlur,
+  onValueBlur,
+  onItemRemove,
+}) => {
   const [currentKeyValue, setCurrentKeyValue] = useState<string>(item.key);
   const [currentValue, setCurrentValue] = useState<string>(item.value);
 
@@ -54,7 +59,13 @@ const EditorItem: FC<Props> = ({ item, handleClassName, onKeyBlur, onValueBlur,
         onChange={handleValueChange}
         onBlur={handleValueBlur}
       />
-      <Button icon="trash" iconButton appearance="simple" size="small" onClick={onItemRemove} />
+      <Button
+        icon="trash"
+        iconButton
+        appearance="simple"
+        size="small"
+        onClick={onItemRemove}
+      />
     </Field>
   );
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts
index 7ff6328b1..b67b3edf5 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts
@@ -40,7 +40,10 @@ export default ({
   );
 
   useEffect(() => {
-    if (propertyListField?.value && !isEqual(propertyListField.value, currentPropertyList)) {
+    if (
+      propertyListField?.value &&
+      !isEqual(propertyListField.value, currentPropertyList)
+    ) {
       setCurrentPropertyList(propertyListField?.value);
     }
   }, [propertyListField?.value, currentPropertyList]);
@@ -59,20 +62,24 @@ export default ({
     async (idx: number) => {
       if (propertyListField) {
         const newValue = propertyListField.value?.filter((_, i) => i !== idx);
-        await handlePropertyValueUpdate("propertyList", propertyListField.type)(newValue);
+        await handlePropertyValueUpdate(
+          "propertyList",
+          propertyListField.type,
+        )(newValue);
       }
     },
     [propertyListField, handlePropertyValueUpdate],
   );
 
   const handlePropertyListUpdate = useCallback(
-    (newList: ListItem[]) => handlePropertyValueUpdate("propertyList", "array")(newList),
+    (newList: ListItem[]) =>
+      handlePropertyValueUpdate("propertyList", "array")(newList),
     [handlePropertyValueUpdate],
   );
 
   const handleKeyBlur = useCallback(
     (idx: number) => (newKeyValue?: string) => {
-      const newList = currentPropertyList.map(i => ({ ...i } as ListItem));
+      const newList = currentPropertyList.map((i) => ({ ...i }) as ListItem);
       newList[idx].key = newKeyValue ?? "";
       setCurrentPropertyList(newList);
       handlePropertyListUpdate(newList);
@@ -82,7 +89,7 @@ export default ({
 
   const handleValueBlur = useCallback(
     (idx: number) => (newValue?: string) => {
-      const newList = currentPropertyList.map(i => ({ ...i } as ListItem));
+      const newList = currentPropertyList.map((i) => ({ ...i }) as ListItem);
       newList[idx].value = newValue ?? "";
       setCurrentPropertyList(newList);
       handlePropertyListUpdate(newList);
@@ -91,7 +98,8 @@ export default ({
   );
 
   const handleDisplayTypeUpdate = useCallback(
-    (value?: string | string[]) => handlePropertyValueUpdate("displayType", "string")(value),
+    (value?: string | string[]) =>
+      handlePropertyValueUpdate("displayType", "string")(value),
     [handlePropertyValueUpdate],
   );
 
@@ -121,14 +129,23 @@ export default ({
       },
       targetIndex: number,
     ) => {
-      const itemIndex = currentPropertyList.findIndex(li => li.id === item.id);
+      const itemIndex = currentPropertyList.findIndex(
+        (li) => li.id === item.id,
+      );
       if (itemIndex === -1) return;
 
       const newList = [...currentPropertyList];
       newList.splice(itemIndex, 1);
       newList.splice(targetIndex, 0, item);
       setCurrentPropertyList(newList);
-      await onPropertyUpdate?.(propertyId, "default", "propertyList", undefined, "array", newList);
+      await onPropertyUpdate?.(
+        propertyId,
+        "default",
+        "propertyList",
+        undefined,
+        "array",
+        newList,
+      );
     },
     [currentPropertyList, onPropertyUpdate, propertyId],
   );
@@ -136,7 +153,9 @@ export default ({
   const handleMoveEnd = useCallback(
     (itemId?: string, newIndex?: number) => {
       if (itemId !== undefined && newIndex !== undefined) {
-        const itemToMove = currentPropertyList?.find(item => item.id === itemId);
+        const itemToMove = currentPropertyList?.find(
+          (item) => item.id === itemId,
+        );
         if (itemToMove) {
           handleItemDrop(itemToMove, newIndex);
         }
@@ -161,5 +180,8 @@ export default ({
 };
 
 function generateUniqueId() {
-  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+  return (
+    Math.random().toString(36).substring(2, 15) +
+    Math.random().toString(36).substring(2, 15)
+  );
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx
index a5b5f3db5..08f0bc39b 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx
@@ -1,9 +1,12 @@
-import { FC, useMemo } from "react";
-
-import { Button, DragAndDropList, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  DragAndDropList,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { SelectField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import useHooks from "./hooks";
 import EditorItem from "./Item";
@@ -36,7 +39,10 @@ type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -71,7 +77,12 @@ const ListEditor: FC<Props> = ({
     handleMoveStart,
     handleMoveEnd,
     handlePropertyValueRemove,
-  } = useHooks({ propertyId, propertyListField, displayTypeField, onPropertyUpdate });
+  } = useHooks({
+    propertyId,
+    propertyListField,
+    displayTypeField,
+    onPropertyUpdate,
+  });
 
   const DraggableCurrentPropertyList = useMemo(
     () =>
@@ -88,7 +99,12 @@ const ListEditor: FC<Props> = ({
           />
         ),
       })),
-    [currentPropertyList, handleKeyBlur, handleValueBlur, handlePropertyValueRemove],
+    [
+      currentPropertyList,
+      handleKeyBlur,
+      handleValueBlur,
+      handlePropertyValueRemove,
+    ],
   );
 
   return (
@@ -99,18 +115,20 @@ const ListEditor: FC<Props> = ({
         options={displayOptions || []}
         onChange={handleDisplayTypeUpdate}
       />
-      {propertyListField && currentPropertyList && currentPropertyList.length > 0 && (
-        <>
-          <Typography size="footnote">{propertyListField.title}</Typography>
-          <FieldWrapper>
-            <DragAndDropList
-              items={DraggableCurrentPropertyList}
-              onMoveStart={handleMoveStart}
-              onMoveEnd={handleMoveEnd}
-            />
-          </FieldWrapper>
-        </>
-      )}
+      {propertyListField &&
+        currentPropertyList &&
+        currentPropertyList.length > 0 && (
+          <>
+            <Typography size="footnote">{propertyListField.title}</Typography>
+            <FieldWrapper>
+              <DragAndDropList
+                items={DraggableCurrentPropertyList}
+                onMoveStart={handleMoveStart}
+                onMoveEnd={handleMoveEnd}
+              />
+            </FieldWrapper>
+          </>
+        )}
       {displayTypeField?.value === "custom" && (
         <Button
           title={t("New Field")}
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx
index f13cf63e4..a0ceb3d5b 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx
@@ -1,7 +1,6 @@
-import { FC } from "react";
-
 import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
 
 const ListItem: FC<{ index?: number; keyValue?: string; value?: string }> = ({
   index,
@@ -27,16 +26,18 @@ const ListItem: FC<{ index?: number; keyValue?: string; value?: string }> = ({
 
 export default ListItem;
 
-const PropertyWrapper = styled("div")<{ isEven?: boolean }>(({ isEven, theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  gap: theme.spacing.large,
-  background: isEven ? "#F4F4F4" : "#ffffff",
-  padding: `${theme.spacing.small}px ${theme.spacing.large}px`,
-  boxSizing: "border-box",
-  wordBreak: "break-word",
-  width: "100%",
-}));
+const PropertyWrapper = styled("div")<{ isEven?: boolean }>(
+  ({ isEven, theme }) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    gap: theme.spacing.large,
+    background: isEven ? "#F4F4F4" : "#ffffff",
+    padding: `${theme.spacing.small}px ${theme.spacing.large}px`,
+    boxSizing: "border-box",
+    wordBreak: "break-word",
+    width: "100%",
+  }),
+);
 
 const TextWrapper = styled("div")(() => ({
   flex: 1,
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/index.tsx
index d6f660414..163957267 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/index.tsx
@@ -1,13 +1,16 @@
-import { memo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import { memo } from "react";
 
 import { InfoboxBlock } from "../../../types";
 
 import Content from "./Content";
 
-const PropertyList: React.FC<BlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }) => {
+const PropertyList: React.FC<BlockProps<InfoboxBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   return (
     <BlockWrapper
       name={block?.name}
@@ -16,7 +19,8 @@ const PropertyList: React.FC<BlockProps<InfoboxBlock>> = ({ block, isSelected, .
       propertyId={block?.propertyId}
       property={block?.property}
       settingsEnabled={false}
-      {...props}>
+      {...props}
+    >
       <Content block={block} {...props} />
     </BlockWrapper>
   );
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx
index 33744bd1f..e7e9fac68 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx
@@ -1,14 +1,17 @@
-import { FC } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import type { ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { InfoboxBlock } from "../../../types";
 import useExpressionEval from "../useExpressionEval";
 
-const TextBlock: FC<BlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }) => {
+const TextBlock: FC<BlockProps<InfoboxBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const src = block?.property?.default?.text?.value as ValueTypes["string"];
 
   const evaluatedSrc = useExpressionEval(src);
@@ -20,7 +23,8 @@ const TextBlock: FC<BlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
+      {...props}
+    >
       {evaluatedSrc !== undefined ? <Text>{evaluatedSrc}</Text> : null}
     </BlockWrapper>
   );
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
index 057b993e4..a977357f1 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
@@ -29,7 +29,9 @@ const reearthBuiltin: BuiltinInfoboxBlocks<Component> = {
 
 const builtin = merge({}, reearthBuiltin);
 
-export const isBuiltinInfoboxBlock = (id: string): id is keyof BuiltinInfoboxBlocks => {
+export const isBuiltinInfoboxBlock = (
+  id: string,
+): id is keyof BuiltinInfoboxBlocks => {
   return !!builtin[id as keyof BuiltinInfoboxBlocks];
 };
 
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
index ac4017b29..5cb3487fa 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
@@ -1,19 +1,21 @@
-import { useEffect, useState } from "react";
-
 import { useVisualizer, evalExpression, Feature } from "@reearth/core";
+import { useEffect, useState } from "react";
 
 export default (value: unknown | undefined) => {
   const [isReady, setIsReady] = useState(false);
   const [currentValue, setCurrentValue] = useState<unknown | undefined>(value);
 
-  const [lastFeatureSelected, setLastFeatureSelected] = useState<string | undefined>(undefined);
+  const [lastFeatureSelected, setLastFeatureSelected] = useState<
+    string | undefined
+  >(undefined);
 
-  const [evaluatedResult, setEvaluatedResult] = useState<string | undefined>(undefined);
+  const [evaluatedResult, setEvaluatedResult] = useState<string | undefined>(
+    undefined,
+  );
 
   const visualizer = useVisualizer();
 
   // We want the useEffect to be called on each render to make sure evaluatedResult is up to date
-  // eslint-disable-next-line
   useEffect(() => {
     if (!isReady) {
       setIsReady(true);
@@ -45,13 +47,24 @@ export default (value: unknown | undefined) => {
         undefined,
         simpleFeature,
       );
-      if ((es && typeof es === "string") || typeof es === "number" || typeof es === "boolean") {
+      if (
+        (es && typeof es === "string") ||
+        typeof es === "number" ||
+        typeof es === "boolean"
+      ) {
         if (es.toString() !== evaluatedResult) {
           setEvaluatedResult(es.toString());
         }
       }
     }
-  });
+  }, [
+    isReady,
+    currentValue,
+    value,
+    evaluatedResult,
+    visualizer,
+    lastFeatureSelected,
+  ]);
 
   return evaluatedResult;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx
index b084ee631..649154f19 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx
@@ -1,8 +1,10 @@
-import { useCallback, type ComponentType, type ReactNode, memo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
-import type { CommonBlockProps, BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import type {
+  CommonBlockProps,
+  BlockProps,
+} from "@reearth/beta/features/Visualizer/shared/types";
 import type { Layer } from "@reearth/core";
+import { useCallback, type ComponentType, type ReactNode, memo } from "react";
 // import { styled } from "@reearth/services/theme";
 
 import { InfoboxBlock } from "../types";
@@ -17,16 +19,26 @@ export type Props = {
 
 export type Component = ComponentType<CommonBlockProps<InfoboxBlock>>;
 
-const InfoboxBlockComponent = ({ renderBlock, onRemove, ...props }: Props): JSX.Element | null => {
+const InfoboxBlockComponent = ({
+  renderBlock,
+  onRemove,
+  ...props
+}: Props): JSX.Element | null => {
   const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
-  const Builtin = isBuiltinInfoboxBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;
+  const Builtin = isBuiltinInfoboxBlock(builtinBlockId)
+    ? builtin[builtinBlockId]
+    : undefined;
   const handleRemove = useCallback(
     () => props.block?.id && onRemove?.(props.block.id),
     [props.block?.id, onRemove],
   );
 
   return Builtin ? (
-    <Builtin {...props} minHeight={120} onRemove={onRemove ? handleRemove : undefined} />
+    <Builtin
+      {...props}
+      minHeight={120}
+      onRemove={onRemove ? handleRemove : undefined}
+    />
   ) : props.block ? (
     <BlockWrapper
       {...props}
@@ -38,8 +50,13 @@ const InfoboxBlockComponent = ({ renderBlock, onRemove, ...props }: Props): JSX.
       property={props.block.property}
       propertyId={props.block.propertyId}
       propertyItemsForPluginBlock={props.block.propertyItemsForPluginBlock}
-      onRemove={onRemove ? handleRemove : undefined}>
-      {renderBlock?.({ block: props.block, layer: props.layer, onClick: props.onClick })}
+      onRemove={onRemove ? handleRemove : undefined}
+    >
+      {renderBlock?.({
+        block: props.block,
+        layer: props.layer,
+        onClick: props.onClick,
+      })}
     </BlockWrapper>
   ) : null;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts b/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
index 18b50cec5..ed0cd2d03 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
@@ -8,7 +8,8 @@ export const GAP_DEFAULT_VALUE = 20;
 // Infobox Blocks
 export const IMAGE_BUILTIN_INFOBOX_BLOCK_ID = "reearth/imageInfoboxBetaBlock";
 export const TEXT_BUILTIN_INFOBOX_BLOCK_ID = "reearth/textInfoboxBetaBlock";
-export const PROPERTY_BUILTIN_INFOBOX_BLOCK_ID = "reearth/propertyInfoboxBetaBlock";
+export const PROPERTY_BUILTIN_INFOBOX_BLOCK_ID =
+  "reearth/propertyInfoboxBetaBlock";
 
 export const AVAILABLE_INFOBOX_BLOCK_IDS = [
   IMAGE_BUILTIN_INFOBOX_BLOCK_ID,
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts b/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
index d1b5c6f4d..c0d91e447 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
 import type { EditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Infobox } from "./types";
 
@@ -70,16 +69,21 @@ export default ({
   );
 
   const handleBlockCreate = useCallback(
-    (index: number) => async (extensionId?: string | undefined, pluginId?: string | undefined) => {
-      if (!extensionId || !pluginId) return;
-      await onBlockCreate?.(pluginId, extensionId, index);
-    },
+    (index: number) =>
+      async (
+        extensionId?: string | undefined,
+        pluginId?: string | undefined,
+      ) => {
+        if (!extensionId || !pluginId) return;
+        await onBlockCreate?.(pluginId, extensionId, index);
+      },
     [onBlockCreate],
   );
 
   const handleBlockSelect = useCallback(
     (blockId?: string) => {
-      if (!isEditable || blockId === selectedBlockId || disableSelection) return;
+      if (!isEditable || blockId === selectedBlockId || disableSelection)
+        return;
       setSelectedBlockId(blockId);
     },
     [selectedBlockId, isEditable, disableSelection],
@@ -103,7 +107,9 @@ export default ({
 
   useEffect(() => {
     if (infobox) {
-      setInfoboxBlocks(infobox.blocks && infobox.blocks.length > 0 ? infobox.blocks : []);
+      setInfoboxBlocks(
+        infobox.blocks && infobox.blocks.length > 0 ? infobox.blocks : [],
+      );
     } else {
       setInfoboxBlocks([]);
       setSelectedBlockId(undefined);
@@ -121,9 +127,9 @@ export default ({
   const handleMoveEnd = useCallback(
     async (itemId?: string, newIndex?: number) => {
       if (itemId !== undefined && newIndex !== undefined) {
-        setInfoboxBlocks(old => {
+        setInfoboxBlocks((old) => {
           const items = [...old];
-          const currentIndex = old.findIndex(o => o.id === itemId);
+          const currentIndex = old.findIndex((o) => o.id === itemId);
           if (currentIndex !== -1) {
             const [movedItem] = items.splice(currentIndex, 1);
             items.splice(newIndex, 0, movedItem);
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx
index eca6d6a4f..6889505a5 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx
@@ -1,5 +1,3 @@
-import { FC, Fragment, ReactNode, memo, useMemo } from "react";
-
 import BlockAddBar from "@reearth/beta/features/Visualizer/shared/components/BlockAddBar";
 import { EditModeProvider } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
 import { InstallableBlock } from "@reearth/beta/features/Visualizer/shared/types";
@@ -7,6 +5,7 @@ import { DragAndDropList } from "@reearth/beta/lib/reearth-ui";
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { Spacing } from "@reearth/core";
 import { styled } from "@reearth/services/theme";
+import { FC, Fragment, ReactNode, memo, useMemo } from "react";
 
 import InfoboxBlockComponent from "./Block";
 import {
@@ -24,7 +23,8 @@ export type InstallableInfoboxBlock = InstallableBlock & {
   type?: "InfoboxBlock";
 };
 
-const INFOBOX_DRAG_HANDLE_CLASS_NAME = "reearth-visualizer-editor-infobox-drag-handle";
+const INFOBOX_DRAG_HANDLE_CLASS_NAME =
+  "reearth-visualizer-editor-infobox-drag-handle";
 
 export type Props = {
   infobox?: Infobox;
@@ -36,7 +36,11 @@ export type Props = {
     extensionId: string,
     index?: number | undefined,
   ) => Promise<void>;
-  onBlockMove?: (id: string, targetIndex: number, blockId?: string) => Promise<void>;
+  onBlockMove?: (
+    id: string,
+    targetIndex: number,
+    blockId?: string,
+  ) => Promise<void>;
   onBlockDelete?: (id?: string) => Promise<void>;
   onPropertyUpdate?: (
     propertyId?: string,
@@ -46,7 +50,10 @@ export type Props = {
     vt?: ValueType,
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -157,7 +164,11 @@ const Infobox: FC<Props> = ({
 
   return showInfobox ? (
     <EditModeProvider value={editModeContext}>
-      <Wrapper ref={wrapperRef} position={positionField?.value} padding={paddingField?.value}>
+      <Wrapper
+        ref={wrapperRef}
+        position={positionField?.value}
+        padding={paddingField?.value}
+      >
         {isEditable && !disableSelection && (
           <BlockAddBar
             id="top-bar"
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/types.ts b/web/src/beta/features/Visualizer/Crust/Infobox/types.ts
index 9c316cde5..443520986 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/types.ts
@@ -49,5 +49,5 @@ export type PropertyItem<T> = {
   value?: T;
   min?: number;
   max?: number;
-  choices?: { [key: string]: string }[];
+  choices?: Record<string, string>[];
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx
index c6e790e6e..b5d369332 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx
@@ -1,3 +1,4 @@
+import { styled } from "@reearth/services/theme";
 import {
   forwardRef,
   ForwardRefRenderFunction,
@@ -6,8 +7,6 @@ import {
   useCallback,
 } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 export type PluginModalInfo = {
   id?: string;
   background?: string;
@@ -19,10 +18,10 @@ type Props = {
   shownPluginModalInfo?: PluginModalInfo;
 };
 
-const ModalContainer: ForwardRefRenderFunction<HTMLDivElement | undefined, Props> = (
-  { onPluginModalShow, shownPluginModalInfo },
-  ref,
-) => {
+const ModalContainer: ForwardRefRenderFunction<
+  HTMLDivElement | undefined,
+  Props
+> = ({ onPluginModalShow, shownPluginModalInfo }, ref) => {
   const innerRef = useRef<HTMLDivElement>(null);
 
   useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);
@@ -55,7 +54,9 @@ const Wrapper = styled("div")<{ visible: boolean }>(({ visible, theme }) => ({
   top: " 50%",
   transform: "translate(-50%, -50%)",
   visibility: visible ? "visible" : "hidden",
-  zIndex: visible ? theme.zIndexes.visualizer.pluginModal : theme.zIndexes.hidden,
+  zIndex: visible
+    ? theme.zIndexes.visualizer.pluginModal
+    : theme.zIndexes.hidden,
   transition: "opacity 0.25s",
   opacity: visible ? "1" : "0",
 }));
@@ -70,7 +71,9 @@ const Background = styled("div")<{ visible: boolean; background?: string }>(
     height: "100%",
     background: background,
     visibility: visible ? "visible" : "hidden",
-    zIndex: visible ? theme.zIndexes.visualizer.pluginModal : theme.zIndexes.hidden,
+    zIndex: visible
+      ? theme.zIndexes.visualizer.pluginModal
+      : theme.zIndexes.hidden,
   }),
 );
 
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx
index 5f24948c5..a71c250ba 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx
@@ -1,4 +1,5 @@
 import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
+import { styled } from "@reearth/services/theme";
 import {
   forwardRef,
   ForwardRefRenderFunction,
@@ -8,8 +9,6 @@ import {
   RefObject,
 } from "react";
 
-import { styled } from "@reearth/services/theme";
-
 import type { PopupPosition } from "../../pluginAPI/types";
 
 type AxesOffsets = {
@@ -29,28 +28,32 @@ type Props = {
   shownPluginPopupInfo?: PluginPopupInfo;
 };
 
-const PopupContainer: ForwardRefRenderFunction<HTMLDivElement | undefined, Props> = (
-  { shownPluginPopupInfo },
-  ref,
-) => {
+const PopupContainer: ForwardRefRenderFunction<
+  HTMLDivElement | undefined,
+  Props
+> = ({ shownPluginPopupInfo }, ref) => {
   const innerRef = useRef<HTMLDivElement>(null);
 
   useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);
 
   useEffect(() => {
     if (!shownPluginPopupInfo?.ref?.current || !innerRef.current) return;
-    return autoUpdate(shownPluginPopupInfo?.ref?.current, innerRef.current, () => {
-      if (!shownPluginPopupInfo?.ref?.current || !innerRef.current) return;
-      computePosition(shownPluginPopupInfo?.ref?.current, innerRef.current, {
-        placement: shownPluginPopupInfo.position ?? "bottom-start",
-        middleware: [offset(shownPluginPopupInfo.offset ?? 0)],
-      }).then(({ x, y }) => {
-        if (innerRef.current) {
-          innerRef.current.style.left = `${x}px`;
-          innerRef.current.style.top = `${y}px`;
-        }
-      });
-    });
+    return autoUpdate(
+      shownPluginPopupInfo?.ref?.current,
+      innerRef.current,
+      () => {
+        if (!shownPluginPopupInfo?.ref?.current || !innerRef.current) return;
+        computePosition(shownPluginPopupInfo?.ref?.current, innerRef.current, {
+          placement: shownPluginPopupInfo.position ?? "bottom-start",
+          middleware: [offset(shownPluginPopupInfo.offset ?? 0)],
+        }).then(({ x, y }) => {
+          if (innerRef.current) {
+            innerRef.current.style.left = `${x}px`;
+            innerRef.current.style.top = `${y}px`;
+          }
+        });
+      },
+    );
   }, [shownPluginPopupInfo]);
 
   return <Wrapper visible={!!shownPluginPopupInfo?.id} ref={innerRef} />;
@@ -59,7 +62,9 @@ const PopupContainer: ForwardRefRenderFunction<HTMLDivElement | undefined, Props
 const Wrapper = styled("div")<{ visible: boolean }>(({ visible, theme }) => ({
   position: "absolute",
   visibility: visible ? "visible" : "hidden",
-  zIndex: visible ? theme.zIndexes.visualizer.pluginPopup : theme.zIndexes.hidden,
+  zIndex: visible
+    ? theme.zIndexes.visualizer.pluginPopup
+    : theme.zIndexes.hidden,
   transition: "opacity 0.25s",
   opacity: visible ? "1" : "0",
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts
index b96f626fe..495c550f1 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts
@@ -1,9 +1,11 @@
+import { type Layer } from "@reearth/core";
+import {
+  useDevPluginExtensionRenderKey,
+  useDevPluginExtensions,
+} from "@reearth/services/state";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
 
-import { type Layer } from "@reearth/core";
-import { useDevPluginExtensionRenderKey, useDevPluginExtensions } from "@reearth/services/state";
-
 import type { InfoboxBlock as Block } from "../../../Infobox/types";
 import type { MapRef } from "../../../types";
 import type { Widget } from "../../../Widgets";
@@ -78,7 +80,14 @@ export default function ({
     [onVisibilityChange, widget?.id, block?.id],
   );
 
-  const { staticExposed, isMarshalable, onPreInit, onDispose, onModalClose, onPopupClose } =
+  const {
+    staticExposed,
+    isMarshalable,
+    onPreInit,
+    onDispose,
+    onModalClose,
+    onPopupClose,
+  } =
     usePluginAPI({
       extensionId,
       extensionType,
@@ -145,14 +154,14 @@ export default function ({
 
   const devPluginExtensionSrc = useMemo(() => {
     if (!devPluginExtensions) return;
-    return devPluginExtensions.find(e => e.id === extensionId)?.url;
+    return devPluginExtensions.find((e) => e.id === extensionId)?.url;
   }, [devPluginExtensions, extensionId]);
 
   const src = useMemo(
     () =>
       pluginId && extensionId
-        ? devPluginExtensionSrc ??
-          `${pluginBaseUrl}/${`${pluginId}/${extensionId}`.replace(/\.\./g, "")}.js`
+        ? (devPluginExtensionSrc ??
+          `${pluginBaseUrl}/${`${pluginId}/${extensionId}`.replace(/\.\./g, "")}.js`)
         : undefined,
     [devPluginExtensionSrc, pluginBaseUrl, pluginId, extensionId],
   );
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts
index d02bc74f1..cdd0cabf4 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts
@@ -1,10 +1,12 @@
+import { type Layer } from "@reearth/core";
 import type { Options } from "quickjs-emscripten-sync";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import type { MutableRefObject, RefObject } from "react";
 
-import { type Layer } from "@reearth/core";
-
-import type { InfoboxBlock as Block, InfoboxBlock } from "../../../Infobox/types";
+import type {
+  InfoboxBlock as Block,
+  InfoboxBlock,
+} from "../../../Infobox/types";
 import { StoryBlock } from "../../../StoryPanel/types";
 import type { MapRef } from "../../../types";
 import { useGet } from "../../../utils";
@@ -89,7 +91,7 @@ export function usePluginAPI({
   const getBlock = useGet(block);
   const getWidget = useGet(widget);
 
-  const useEventRef = <T extends { [x: string]: any[] }>() =>
+  const useEventRef = <T extends Record<string, any[]>>() =>
     useRef<[Events<T>, EventEmitter<T>, (() => void) | undefined]>();
   const viewerEventsRef = useEventRef<ViewerEventType>();
   const selectionModeEventsRef = useEventRef<SelectionModeEventType>();
@@ -99,9 +101,12 @@ export function usePluginAPI({
   const sketchEventsRef = useEventRef<SketchEventType>();
 
   const uiEvents = useRef<[Events<UIEventType>, EventEmitter<UIEventType>]>();
-  const modalEvents = useRef<[Events<ModalEventType>, EventEmitter<ModalEventType>]>();
-  const popupEvents = useRef<[Events<PopupEventType>, EventEmitter<PopupEventType>]>();
-  const extensionEvents = useRef<[Events<ExtensionEventType>, EventEmitter<ExtensionEventType>]>();
+  const modalEvents =
+    useRef<[Events<ModalEventType>, EventEmitter<ModalEventType>]>();
+  const popupEvents =
+    useRef<[Events<PopupEventType>, EventEmitter<PopupEventType>]>();
+  const extensionEvents =
+    useRef<[Events<ExtensionEventType>, EventEmitter<ExtensionEventType>]>();
 
   const pluginMessageSender = useCallback((msg: any) => {
     extensionEvents.current?.[1]("extensionMessage", msg);
@@ -138,15 +143,29 @@ export function usePluginAPI({
 
     initAndMergeEvents(ctx.cameraEvents, cameraEventsRef, ["move"]);
 
-    initAndMergeEvents(ctx.timelineEvents, timelineEventsRef, ["tick", "commit"]);
+    initAndMergeEvents(ctx.timelineEvents, timelineEventsRef, [
+      "tick",
+      "commit",
+    ]);
 
-    initAndMergeEvents(ctx.layersEvents, layersEventsRef, ["select", "edit", "visible", "load"]);
+    initAndMergeEvents(ctx.layersEvents, layersEventsRef, [
+      "select",
+      "edit",
+      "visible",
+      "load",
+    ]);
 
-    initAndMergeEvents(ctx.sketchEvents, sketchEventsRef, ["create", "toolChange"]);
+    initAndMergeEvents(ctx.sketchEvents, sketchEventsRef, [
+      "create",
+      "toolChange",
+    ]);
 
     const instanceId = widget?.id ?? block?.id;
     if (instanceId) {
-      ctx?.pluginInstances.addPluginMessageSender(instanceId, pluginMessageSender);
+      ctx?.pluginInstances.addPluginMessageSender(
+        instanceId,
+        pluginMessageSender,
+      );
       ctx.pluginInstances.runTimesCache.increment(instanceId);
     }
   }, [
@@ -225,7 +244,9 @@ export function usePluginAPI({
     [mapRef],
   );
 
-  const staticExposed = useMemo((): ((api: IFrameAPI) => GlobalThis) | undefined => {
+  const staticExposed = useMemo(():
+    | ((api: IFrameAPI) => GlobalThis)
+    | undefined => {
     return ({ main, modal, popup, messages, startEventLoop }: IFrameAPI) => {
       return exposedReearth({
         commonReearth: ctx.reearth,
@@ -262,7 +283,9 @@ export function usePluginAPI({
         render: (html, { extended, ...options } = {}) => {
           main.render(html, options);
           onRender?.(
-            typeof extended !== "undefined" || options ? { extended, ...options } : undefined,
+            typeof extended !== "undefined" || options
+              ? { extended, ...options }
+              : undefined,
           );
           setUIVisibility(true);
         },
@@ -295,7 +318,7 @@ export function usePluginAPI({
         closeModal: () => {
           onPluginModalShow?.();
         },
-        updateModal: options => {
+        updateModal: (options) => {
           modal.resize(options.width, options.height);
           onPluginModalShow?.({
             id: widget?.id ?? block?.id,
@@ -340,7 +363,7 @@ export function usePluginAPI({
         closePopup: () => {
           onPluginPopupShow?.();
         },
-        updatePopup: options => {
+        updatePopup: (options) => {
           const opt = { ...options, position: options?.position ?? "bottom" };
           if (options.width !== undefined || options.height !== undefined) {
             popup.resize(options.width, options.height);
@@ -439,9 +462,11 @@ export function usePluginAPI({
   };
 }
 
-function initAndMergeEvents<T extends { [x: string]: any[] }>(
+function initAndMergeEvents<T extends Record<string, any[]>>(
   ctxEvents: Events<T> | undefined,
-  eventsRef: MutableRefObject<[Events<T>, EventEmitter<T>, (() => void) | undefined] | undefined>,
+  eventsRef: MutableRefObject<
+    [Events<T>, EventEmitter<T>, (() => void) | undefined] | undefined
+  >,
   eventKeys: (keyof T)[],
 ) {
   const e = events<T>();
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx
index 8abecaeec..17d65a813 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx
@@ -9,7 +9,7 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-export const Default: Story<Props> = args => (
+export const Default: Story<Props> = (args) => (
   <Provider>
     <div style={{ background: "#fff" }}>
       <Component {...args} />
@@ -24,7 +24,7 @@ Default.args = {
   visible: true,
 };
 
-export const Headless: Story<Props> = args => (
+export const Headless: Story<Props> = (args) => (
   <Provider>
     <Component {...args} />
   </Provider>
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx
index ee8ed05c8..ef8bfd127 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx
@@ -1,6 +1,5 @@
-import { type RefObject } from "react";
-
 import type { Layer } from "@reearth/core";
+import { type RefObject } from "react";
 
 import type { InfoboxBlock as Block } from "../../Infobox/types";
 import type { MapRef } from "../../types";
@@ -11,8 +10,14 @@ import useHooks from "./hooks";
 import type { PluginModalInfo } from "./ModalContainer";
 import type { PluginPopupInfo } from "./PopupContainer";
 
-export { default as PopupContainer, type PluginPopupInfo } from "./PopupContainer";
-export { default as ModalContainer, type PluginModalInfo } from "./ModalContainer";
+export {
+  default as PopupContainer,
+  type PluginPopupInfo,
+} from "./PopupContainer";
+export {
+  default as ModalContainer,
+  type PluginModalInfo,
+} from "./ModalContainer";
 
 export type CommonProps = {
   pluginProperty?: any; // Taken from Visualizer
@@ -25,7 +30,10 @@ export type CommonProps = {
   onPluginPopupShow?: (popupInfo?: PluginPopupInfo) => void;
 };
 
-export type ExternalPluginProps = Pick<CommonProps, "pluginProperty" | "pluginBaseUrl">;
+export type ExternalPluginProps = Pick<
+  CommonProps,
+  "pluginProperty" | "pluginBaseUrl"
+>;
 
 export type Props = {
   mapRef?: RefObject<MapRef>;
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts
index 2be70955a..b62fc41c6 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts
@@ -12,7 +12,10 @@ import {
 
 export type RefType = {
   postMessage: (message: any) => void;
-  resize: (width: string | number | undefined, height: string | number | undefined) => void;
+  resize: (
+    width: string | number | undefined,
+    height: string | number | undefined,
+  ) => void;
 };
 
 export type AutoResize = "both" | "width-only" | "height-only";
@@ -50,13 +53,14 @@ export default function useHook({
 } {
   const loaded = useRef(false);
   const iFrameRef = useRef<HTMLIFrameElement>(null);
-  const [iFrameSize, setIFrameSize] = useState<[string | undefined, string | undefined]>();
+  const [iFrameSize, setIFrameSize] =
+    useState<[string | undefined, string | undefined]>();
   const pendingMesages = useRef<any[]>([]);
 
   useImperativeHandle(
     ref,
     (): RefType => ({
-      postMessage: message => {
+      postMessage: (message) => {
         if (!loaded.current || !iFrameRef.current?.contentWindow) {
           pendingMesages.current.push(message);
           return;
@@ -64,8 +68,10 @@ export default function useHook({
         iFrameRef.current.contentWindow.postMessage(message, "*");
       },
       resize: (width, height) => {
-        const width2 = typeof width === "number" ? width + "px" : width ?? undefined;
-        const height2 = typeof height === "number" ? height + "px" : height ?? undefined;
+        const width2 =
+          typeof width === "number" ? width + "px" : (width ?? undefined);
+        const height2 =
+          typeof height === "number" ? height + "px" : (height ?? undefined);
         setIFrameSize(width2 || height2 ? [width2, height2] : undefined);
       },
     }),
@@ -74,7 +80,8 @@ export default function useHook({
 
   useEffect(() => {
     const cb = (ev: MessageEvent<any>) => {
-      if (!iFrameRef.current || ev.source !== iFrameRef.current.contentWindow) return;
+      if (!iFrameRef.current || ev.source !== iFrameRef.current.contentWindow)
+        return;
       if (ev.data?.[autoResizeMessageKey]) {
         const { width, height } = ev.data[autoResizeMessageKey];
         if (typeof width !== "number" || typeof height !== "number") return;
@@ -205,14 +212,17 @@ export default function useHook({
   };
 }
 
-function execScripts(scripts: Iterable<HTMLScriptElement>, asyncScript: boolean) {
+function execScripts(
+  scripts: Iterable<HTMLScriptElement>,
+  asyncScript: boolean,
+) {
   const isAsync = (script: HTMLScriptElement) =>
     script.getAttribute("type") === "module" ||
     script.getAttribute("async") ||
     script.getAttribute("defer");
 
   return Array.from(scripts)
-    .filter(script => (asyncScript ? isAsync(script) : !isAsync(script)))
+    .filter((script) => (asyncScript ? isAsync(script) : !isAsync(script)))
     .reduce((chain, oldScript) => {
       return chain.then(() => runScript(oldScript));
     }, Promise.resolve());
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
index 443214c9a..c1e270229 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
@@ -12,7 +12,7 @@ export default {
   // parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-export const Default: Story<Props> = args => {
+export const Default: Story<Props> = (args) => {
   const ref = useRef<Ref>(null);
   const postMessage = () => {
     ref.current?.postMessage({ foo: new Date().toISOString() });
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
index cc523e577..46badb1d0 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
@@ -1,5 +1,8 @@
 import { render, screen } from "@testing-library/react";
-import { expect, test } from "vitest";
+import { createRef } from "react";
+import { expect, test, vi } from "vitest";
+
+import { RefType } from "./hooks";
 
 import Component from ".";
 
@@ -12,48 +15,54 @@ test("works", async () => {
   const [promise, resolve] = deferred();
   rerender(<Component html="<h1>Hoge</h1>" onLoad={resolve} />);
   expect(screen.getByTestId("iframe")).toBeInTheDocument();
-  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
-    "",
-  );
+  expect(
+    (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
+      .innerHTML,
+  ).toBe("");
   await promise;
-  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
-    "<h1>Hoge</h1>",
-  );
+  expect(
+    (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
+      .innerHTML,
+  ).toBe("<h1>Hoge</h1>");
 
   // Update html prop
   const [promise2, resolve2] = deferred();
   rerender(<Component html="<h1>Foo</h1>" onLoad={resolve2} />);
   expect(screen.getByTestId("iframe")).toBeInTheDocument();
-  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
-    "",
-  );
+  expect(
+    (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
+      .innerHTML,
+  ).toBe("");
   await promise2;
-  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
-    "<h1>Foo</h1>",
-  );
+  expect(
+    (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
+      .innerHTML,
+  ).toBe("<h1>Foo</h1>");
 });
 
 // This unit test will be failed because JSDOM does not support script evaluation in iframes.
 // Check out this component via Storybook instead.
 //
-// test("host -> iframe -> host", async () => {
-//   const ref = createRef<Ref>();
-//   const html = `<script>window.addEventListener("message", e => parent.postMessage(e.data, "*"));</script>`;
-//   const [promise, resolve] = deferred();
-//   const [promise2, resolve2] = deferred();
-//   const onMessage = vi.fn<[any], void>(() => resolve2());
-//   render(<Component ref={ref} html={html} onLoad={resolve} onMessage={onMessage} />);
+test.skip("host -> iframe -> host", async () => {
+  const ref = createRef<RefType>();
+  const html = `<script>window.addEventListener("message", e => parent.postMessage(e.data, "*"));</script>`;
+  const [promise, resolve] = deferred();
+  const [promise2, resolve2] = deferred();
+  const onMessage = vi.fn<[any]>(() => resolve2());
+  render(
+    <Component ref={ref} html={html} onLoad={resolve} onMessage={onMessage} />,
+  );
 
-//   await promise;
+  await promise;
 
-//   expect(onMessage).toBeCalledTimes(0);
-//   ref.current.postMessage({ foo: "bar" });
+  expect(onMessage).toBeCalledTimes(0);
+  ref.current?.postMessage({ foo: "bar" });
 
-//   await promise2;
+  await promise2;
 
-//   expect(onMessage).toBeCalledTimes(1);
-//   expect(onMessage).toBeCalledWith({ foo: "bar" });
-// });
+  expect(onMessage).toBeCalledTimes(1);
+  expect(onMessage).toBeCalledWith({ foo: "bar" });
+});
 
 const deferred = (): [Promise<void>, () => void, () => void] => {
   let resolve: () => void = () => {};
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx
index 86feaa95c..751f21ff2 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx
@@ -1,5 +1,9 @@
 import composeRefs from "@seznam/compose-react-refs";
-import { IframeHTMLAttributes, ForwardRefRenderFunction, forwardRef } from "react";
+import {
+  IframeHTMLAttributes,
+  ForwardRefRenderFunction,
+  forwardRef,
+} from "react";
 import type { RefObject } from "react";
 
 import useHook, { RefType, AutoResize as AutoResizeType } from "./hooks";
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
index 653241b26..9c8f0c349 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
@@ -24,7 +24,10 @@ export default function useHooks({
   enabled?: boolean;
   onRender?: (type: string) => void;
 }) {
-  const handleRender = useCallback(() => type && onRender?.(type), [type, onRender]);
+  const handleRender = useCallback(
+    () => type && onRender?.(type),
+    [type, onRender],
+  );
 
   const {
     ref: IFrameRef,
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
index 88bed6526..53f79a415 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
@@ -1,4 +1,10 @@
-import { forwardRef, ForwardRefRenderFunction, IframeHTMLAttributes, ReactNode, memo } from "react";
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  IframeHTMLAttributes,
+  ReactNode,
+  memo,
+} from "react";
 import type { RefObject } from "react";
 import { createPortal } from "react-dom";
 
@@ -72,7 +78,11 @@ const PluginIFrame: ForwardRefRenderFunction<Ref, Props> = (
     </>
   );
 
-  return enabled ? (container ? createPortal(children, container) : children) : null;
+  return enabled
+    ? container
+      ? createPortal(children, container)
+      : children
+    : null;
 };
 
 export default memo(forwardRef(PluginIFrame));
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
index f6b8b0879..3cd5f6ec3 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
@@ -14,7 +14,10 @@ export type IFrameAPI = {
       onAutoResized?: () => void;
     },
   ) => void;
-  resize: (width: string | number | undefined, height: string | number | undefined) => void;
+  resize: (
+    width: string | number | undefined,
+    height: string | number | undefined,
+  ) => void;
   postMessage: (message: any) => void;
 };
 
@@ -52,7 +55,10 @@ export default function useIFrame({
   const api = useMemo<IFrameAPI>(
     () => ({
       render: (html, { visible = true, ...options } = {}) => {
-        setIFrameState([html, { visible: !!iframeCanBeVisible && !!visible, ...options }]);
+        setIFrameState([
+          html,
+          { visible: !!iframeCanBeVisible && !!visible, ...options },
+        ]);
         onRender?.();
       },
       resize: (width, height) => {
@@ -64,7 +70,10 @@ export default function useIFrame({
   );
 
   useEffect(() => {
-    setIFrameState(([html, options]) => [html, { ...options, visible: !!iframeCanBeVisible }]);
+    setIFrameState(([html, options]) => [
+      html,
+      { ...options, visible: !!iframeCanBeVisible },
+    ]);
   }, [iframeCanBeVisible]);
 
   useEffect(() => {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
index 6274fe997..a2d72989b 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
@@ -14,7 +14,8 @@ test("usePostMessage", () => {
   };
 
   const { result, rerender } = renderHook(
-    ({ iFrame, pending }: { iFrame: P; pending?: boolean }) => usePostMessage(iFrame, pending),
+    ({ iFrame, pending }: { iFrame: P; pending?: boolean }) =>
+      usePostMessage(iFrame, pending),
     {
       initialProps: { iFrame: nullIFrame },
     },
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
index 24f6b4f8b..18e13b14b 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
@@ -14,7 +14,10 @@ import { insertToBody } from "./utils";
 
 export type RefType = {
   postMessage: (message: any) => void;
-  resize: (width: string | number | undefined, height: string | number | undefined) => void;
+  resize: (
+    width: string | number | undefined,
+    height: string | number | undefined,
+  ) => void;
 };
 
 export type AutoResize = "both" | "width-only" | "height-only";
@@ -53,13 +56,14 @@ export default function useHook({
 } {
   const loaded = useRef(false);
   const iFrameRef = useRef<HTMLIFrameElement>(null);
-  const [iFrameSize, setIFrameSize] = useState<[string | undefined, string | undefined]>();
+  const [iFrameSize, setIFrameSize] =
+    useState<[string | undefined, string | undefined]>();
   const pendingMesages = useRef<any[]>([]);
 
   useImperativeHandle(
     ref,
     (): RefType => ({
-      postMessage: message => {
+      postMessage: (message) => {
         if (!loaded.current || !iFrameRef.current?.contentWindow) {
           pendingMesages.current.push(message);
           return;
@@ -67,8 +71,10 @@ export default function useHook({
         iFrameRef.current.contentWindow.postMessage(message, "*");
       },
       resize: (width, height) => {
-        const width2 = typeof width === "number" ? width + "px" : width ?? undefined;
-        const height2 = typeof height === "number" ? height + "px" : height ?? undefined;
+        const width2 =
+          typeof width === "number" ? width + "px" : (width ?? undefined);
+        const height2 =
+          typeof height === "number" ? height + "px" : (height ?? undefined);
         setIFrameSize(width2 || height2 ? [width2, height2] : undefined);
       },
     }),
@@ -77,7 +83,8 @@ export default function useHook({
 
   useEffect(() => {
     const cb = (ev: MessageEvent<any>) => {
-      if (!iFrameRef.current || ev.source !== iFrameRef.current.contentWindow) return;
+      if (!iFrameRef.current || ev.source !== iFrameRef.current.contentWindow)
+        return;
       if (ev.data?.[autoResizeMessageKey]) {
         const { width, height } = ev.data[autoResizeMessageKey];
         if (typeof width !== "number" || typeof height !== "number") return;
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
index 443214c9a..c1e270229 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
@@ -12,7 +12,7 @@ export default {
   // parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-export const Default: Story<Props> = args => {
+export const Default: Story<Props> = (args) => {
   const ref = useRef<Ref>(null);
   const postMessage = () => {
     ref.current?.postMessage({ foo: new Date().toISOString() });
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
index 6f516f63d..afded3f36 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
@@ -1,5 +1,9 @@
 import composeRefs from "@seznam/compose-react-refs";
-import { IframeHTMLAttributes, ForwardRefRenderFunction, forwardRef } from "react";
+import {
+  IframeHTMLAttributes,
+  ForwardRefRenderFunction,
+  forwardRef,
+} from "react";
 import type { RefObject } from "react";
 
 import useHook, { RefType, AutoResize as AutoResizeType } from "./hooks";
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
index 190e5869b..4ab84772f 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
@@ -5,7 +5,9 @@ import { insertToBody } from "./utils";
 test("insertScriptToBody", () => {
   const script = `<script id="insert-script"></script>`;
   const html1 = `<div></div>`;
-  expect(insertToBody(html1, script)).toEqual(`<div></div><script id="insert-script"></script>`);
+  expect(insertToBody(html1, script)).toEqual(
+    `<div></div><script id="insert-script"></script>`,
+  );
 
   const html2 = `<html><body></body></html>`;
   expect(insertToBody(html2, script)).toEqual(
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts
index 3a2cfabf3..9767e019e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts
@@ -20,7 +20,7 @@ export type Options = {
   isMarshalable?: boolean | "json" | ((obj: any) => boolean | "json");
   ref?: ForwardedRef<Ref>;
   mainIFrameRef?: RefObject<IFrameRef>;
-  exposed?: ((api: API) => { [key: string]: any }) | { [key: string]: any };
+  exposed?: ((api: API) => Record<string, any>) | Record<string, any>;
   onError?: (err: any) => void;
   onPreInit?: () => void;
   onDispose?: () => void;
@@ -111,8 +111,8 @@ export default function useHook({
   const handleMessage = useCallback(
     (msg: any) => {
       try {
-        messageEvents.forEach(e => e(msg));
-        messageOnceEvents.forEach(e => e(msg));
+        messageEvents.forEach((e) => e(msg));
+        messageOnceEvents.forEach((e) => e(msg));
       } catch (e) {
         onError(e);
       }
@@ -176,9 +176,11 @@ export default function useHook({
     (async () => {
       const ctx = (await getQuickJS()).newContext();
       arena.current = new Arena(ctx, {
-        isMarshalable: target =>
+        isMarshalable: (target) =>
           defaultIsMarshalable(target) ||
-          (typeof isMarshalable === "function" ? isMarshalable(target) : "json"),
+          (typeof isMarshalable === "function"
+            ? isMarshalable(target)
+            : "json"),
         experimentalContextEx: true,
       });
 
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx
index 93015b4a4..2a44208f9 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx
@@ -9,9 +9,9 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-export const Default: Story<Props> = args => <Component {...args} />;
+export const Default: Story<Props> = (args) => <Component {...args} />;
 
-let cb: (message: any) => void | undefined;
+let cb: (message: any) => void;
 
 Default.args = {
   src: `/plugins/plugin.js`,
@@ -28,7 +28,7 @@ Default.args = {
       log: action("console.log"),
     },
     reearth: {
-      on(type: string, value: (message: any) => void | undefined) {
+      on(type: string, value: (message: any) => void) {
         if (type === "message") {
           cb = value;
         }
@@ -45,7 +45,7 @@ Default.args = {
   },
 };
 
-export const HiddenIFrame: Story<Props> = args => <Component {...args} />;
+export const HiddenIFrame: Story<Props> = (args) => <Component {...args} />;
 
 HiddenIFrame.args = {
   src: `/plugins/hidden.js`,
@@ -62,7 +62,7 @@ HiddenIFrame.args = {
       log: action("console.log"),
     },
     reearth: {
-      on(type: string, value: (message: any) => void | undefined) {
+      on(type: string, value: (message: any) => void) {
         if (type === "message") {
           cb = value;
         }
@@ -79,7 +79,7 @@ HiddenIFrame.args = {
   },
 };
 
-export const SourceCode: Story<Props> = args => <Component {...args} />;
+export const SourceCode: Story<Props> = (args) => <Component {...args} />;
 
 SourceCode.args = {
   sourceCode: `console.log("Hello")`,
@@ -90,15 +90,17 @@ SourceCode.args = {
   },
 };
 
-export const AutoResize: Story<Props> = args => {
+export const AutoResize: Story<Props> = (args) => {
   const ref = useRef<Ref>(null);
   return (
     <Component
       {...args}
-      onMessage={msg => {
+      onMessage={(msg) => {
         ref.current
           ?.arena()
-          ?.evalCode(`"onmessage" in globalThis && globalThis.onmessage(${JSON.stringify(msg)})`);
+          ?.evalCode(
+            `"onmessage" in globalThis && globalThis.onmessage(${JSON.stringify(msg)})`,
+          );
       }}
       ref={ref}
     />
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx
index 0a5a23170..2646a1baa 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx
@@ -1,4 +1,9 @@
-import { forwardRef, ForwardRefRenderFunction, IframeHTMLAttributes, ReactNode } from "react";
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  IframeHTMLAttributes,
+  ReactNode,
+} from "react";
 import type { RefObject } from "react";
 
 import useHook, { defaultIsMarshalable, IFrameType, API, Ref } from "./hooks";
@@ -24,7 +29,7 @@ export type Props = {
   popupVisible?: boolean;
   externalRef?: RefObject<HTMLIFrameElement>;
   isMarshalable?: boolean | "json" | ((target: any) => boolean | "json");
-  exposed?: ((api: API) => { [key: string]: any }) | { [key: string]: any };
+  exposed?: ((api: API) => Record<string, any>) | Record<string, any>;
   onMessage?: (message: any) => void;
   onPreInit?: () => void;
   onError?: (err: any) => void;
@@ -59,7 +64,13 @@ const Plugin: ForwardRefRenderFunction<Ref, Props> = (
   },
   ref,
 ) => {
-  const { mainIFrameRef, modalIFrameRef, popupIFrameRef, loaded, handleMessage } = useHook({
+  const {
+    mainIFrameRef,
+    modalIFrameRef,
+    popupIFrameRef,
+    loaded,
+    handleMessage,
+  } = useHook({
     src,
     sourceCode,
     skip,
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx
index 54e86295d..77797471b 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx
@@ -4,9 +4,10 @@ import type { Context } from "./types";
 
 const PluginContext = createContext<Context | undefined>(undefined);
 
-export const PluginProvider: FC<PropsWithChildren<{ value: Context }>> = ({ children, value }) => (
-  <PluginContext.Provider value={value}>{children}</PluginContext.Provider>
-);
+export const PluginProvider: FC<PropsWithChildren<{ value: Context }>> = ({
+  children,
+  value,
+}) => <PluginContext.Provider value={value}>{children}</PluginContext.Provider>;
 
 export const usePluginContext = (): Context => {
   const ctx = useContext(PluginContext);
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
index e6c506685..ae59dccea 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
@@ -154,9 +154,10 @@ export default function ({
 
   const { clientStorage } = useData();
 
-  const { deprecated, cameraDeprecated, layersDeprecated, sketchDeprecated } = useDeprecated({
-    built,
-  });
+  const { deprecated, cameraDeprecated, layersDeprecated, sketchDeprecated } =
+    useDeprecated({
+      built,
+    });
 
   const value = useMemo<Context>(
     () => ({
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts
index 8d0b0545f..a1789d70a 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts
@@ -1,7 +1,10 @@
+import {
+  CameraPosition as CoreCameraPosition,
+  CameraOptions,
+  FlyTo,
+} from "@reearth/core";
 import { useCallback, useMemo } from "react";
 
-import { CameraPosition as CoreCameraPosition, CameraOptions, FlyTo } from "@reearth/core";
-
 import { useVisualizerCamera } from "../../../atoms";
 import { useGet } from "../../utils";
 import {
@@ -39,7 +42,10 @@ export default ({
   const getCameraFov = useGet(camera?.fov);
   const getCameraAspectRatio = useGet(camera?.aspectRatio);
 
-  const getCameraViewport = useCallback(() => engineRef?.getViewport(), [engineRef]);
+  const getCameraViewport = useCallback(
+    () => engineRef?.getViewport(),
+    [engineRef],
+  );
 
   const zoomIn = useCallback(
     (amount: number) => {
@@ -78,7 +84,10 @@ export default ({
         range?: number;
       },
     ) => {
-      return engineRef?.flyToBBox([bbox.west, bbox.south, bbox.east, bbox.north], options);
+      return engineRef?.flyToBBox(
+        [bbox.west, bbox.south, bbox.east, bbox.north],
+        options,
+      );
     },
     [engineRef],
   );
@@ -91,7 +100,8 @@ export default ({
   );
 
   const enableScreenSpaceCameraController = useCallback(
-    (enabled?: boolean) => engineRef?.enableScreenSpaceCameraController(!!enabled),
+    (enabled?: boolean) =>
+      engineRef?.enableScreenSpaceCameraController(!!enabled),
     [engineRef],
   );
 
@@ -131,7 +141,10 @@ export default ({
   );
 
   const move = useCallback(
-    (direction: "forward" | "backward" | "up" | "down" | "left" | "right", amount: number) => {
+    (
+      direction: "forward" | "backward" | "up" | "down" | "left" | "right",
+      amount: number,
+    ) => {
       if (direction === "forward") {
         engineRef?.moveForward(amount);
       } else if (direction === "backward") {
@@ -182,13 +195,18 @@ export default ({
       callback: (...args: CameraEventType[T]) => void,
       options?: { once?: boolean },
     ) => {
-      return options?.once ? cameraEvents.once(type, callback) : cameraEvents.on(type, callback);
+      return options?.once
+        ? cameraEvents.once(type, callback)
+        : cameraEvents.on(type, callback);
     },
     [cameraEvents],
   );
 
   const cameraEventsOff = useCallback(
-    <T extends keyof CameraEventType>(type: T, callback: (...args: CameraEventType[T]) => void) => {
+    <T extends keyof CameraEventType>(
+      type: T,
+      callback: (...args: CameraEventType[T]) => void,
+    ) => {
       return cameraEvents.off(type, callback);
     },
     [cameraEvents],
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts
index c68e081f3..ccae8b100 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts
@@ -12,7 +12,7 @@ export default ({ built }: Props) => {
     addWarning(d, "engineName", "reearth.engineName");
 
     const visualizer = {};
-    ["engine", "camera", "property", "overrideProperty"].forEach(name => {
+    ["engine", "camera", "property", "overrideProperty"].forEach((name) => {
       addWarning(visualizer, name, `reearth.visualizer.${name}`);
     });
     addProperty(d, "visualizer", visualizer);
@@ -32,7 +32,7 @@ export default ({ built }: Props) => {
       "isPositionVisible",
       "toWindowPosition",
       "pickManyFromViewport",
-    ].forEach(name => {
+    ].forEach((name) => {
       addWarning(scene, name, `reearth.scene.${name}`);
     });
     addProperty(d, "scene", scene);
@@ -54,33 +54,35 @@ export default ({ built }: Props) => {
       "setSpeed",
       "setStepType",
       "setRangeType",
-    ].forEach(name => {
+    ].forEach((name) => {
       addWarning(clock, name, `reearth.clock.${name}`);
     });
     addProperty(d, "clock", clock);
 
     const interactionMode = {};
-    ["mode", "override"].forEach(name => {
+    ["mode", "override"].forEach((name) => {
       addWarning(interactionMode, name, `reearth.interactionMode.${name}`);
     });
     addProperty(d, "interactionMode", interactionMode);
 
     const plugins = {};
-    ["instances", "postMessage"].forEach(name => {
+    ["instances", "postMessage"].forEach((name) => {
       addWarning(plugins, name, `reearth.plugins.${name}`);
     });
     addProperty(d, "plugins", plugins);
 
     const plugin = {};
-    ["id", "extensionId", "extensionType", "property"].forEach(name => {
+    ["id", "extensionId", "extensionType", "property"].forEach((name) => {
       addWarning(plugin, name, `reearth.plugin.${name}`);
     });
     addProperty(d, "plugin", plugin);
 
     const clientStorage = {};
-    ["getAsync", "setAsync", "deleteAsync", "keysAsync", "dropStore"].forEach(name => {
-      addWarning(clientStorage, name, `reearth.clientStorage.${name}`);
-    });
+    ["getAsync", "setAsync", "deleteAsync", "keysAsync", "dropStore"].forEach(
+      (name) => {
+        addWarning(clientStorage, name, `reearth.clientStorage.${name}`);
+      },
+    );
 
     addEventWarning(d, "on");
     addEventWarning(d, "off");
@@ -107,7 +109,7 @@ export default ({ built }: Props) => {
       "flyToGround",
       "overrideScreenSpaceController",
       "forceHorizontalRoll",
-    ].forEach(name => {
+    ].forEach((name) => {
       addWarning(d, name, `reearth.camera.${name}`);
     });
     return d;
@@ -128,7 +130,7 @@ export default ({ built }: Props) => {
       "defaultInfobox",
       "isLayer",
       "overriddenProperties",
-    ].forEach(name => {
+    ].forEach((name) => {
       addWarning(d, name, `reearth.layers.${name}`);
     });
     return d;
@@ -146,7 +148,7 @@ export default ({ built }: Props) => {
       "enableRelativeHeight",
       "allowRightClickToAbort",
       "allowAutoResetInteractionMode",
-    ].forEach(name => {
+    ].forEach((name) => {
       addWarning(d, name, `reearth.sketch.${name}`);
     });
     return d;
@@ -169,16 +171,23 @@ const deprecatedMap = {
   "reearth.scene.inEditor": "reearth.viewer.env.inEditor",
   "reearth.scene.built": "reearth.viewer.env.isBuilt",
   "reearth.scene.captureScreen": "reearth.viewer.viewport.capture",
-  "reearth.scene.getLocationFromScreen": "reearth.viewer.tools.getLocationFromScreenCoordinate",
-  "reearth.scene.sampleTerrainHeight": "reearth.viewer.tools.getTerrainHeightAsync",
+  "reearth.scene.getLocationFromScreen":
+    "reearth.viewer.tools.getLocationFromScreenCoordinate",
+  "reearth.scene.sampleTerrainHeight":
+    "reearth.viewer.tools.getTerrainHeightAsync",
   "reearth.scene.computeGlobeHeight": "reearth.viewer.tools.getGlobeHeight",
   "reearth.scene.getGlobeHeight": "reearth.viewer.tools.getGlobeHeightByCamera",
   "reearth.scene.toXYZ": "reearth.viewer.tools.cartographicToCartesian",
-  "reearth.scene.toLngLatHeight": "reearth.viewer.tools.cartesianToCartographic",
-  "reearth.scene.convertScreenToPositionOffset": "reearth.viewer.tools.transformByOffsetOnScreen",
-  "reearth.scene.isPositionVisible": "reearth.viewer.tools.isPositionVisibleOnGlobe",
-  "reearth.scene.toWindowPosition": "reearth.viewer.tools.getScreenCoordinateFromPosition",
-  "reearth.scene.pickManyFromViewport": "reearth.layers.getFeaturesFromViewport",
+  "reearth.scene.toLngLatHeight":
+    "reearth.viewer.tools.cartesianToCartographic",
+  "reearth.scene.convertScreenToPositionOffset":
+    "reearth.viewer.tools.transformByOffsetOnScreen",
+  "reearth.scene.isPositionVisible":
+    "reearth.viewer.tools.isPositionVisibleOnGlobe",
+  "reearth.scene.toWindowPosition":
+    "reearth.viewer.tools.getScreenCoordinateFromPosition",
+  "reearth.scene.pickManyFromViewport":
+    "reearth.layers.getFeaturesFromViewport",
   "reearth.clock.startTime": "reearth.timeline.startTime",
   "reearth.clock.stopTime": "reearth.timeline.stopTime",
   "reearth.clock.currentTime": "reearth.timeline.currentTime",
@@ -198,7 +207,8 @@ const deprecatedMap = {
   "reearth.interactionMode.override": "reearth.viewer.interactionMode.override",
   "reearth.plugins.instances": "reearth.extensions.list",
   "reearth.plugins.postMessage": "reearth.extensions.postMessage",
-  "reearth.plugin.id": "reearth.extension.widget.pluginId or reearth.extension.block.pluginId",
+  "reearth.plugin.id":
+    "reearth.extension.widget.pluginId or reearth.extension.block.pluginId",
   "reearth.plugin.extensionId":
     "reearth.extension.widget.extensionId or reearth.extension.block.extensionId",
   "reearth.plugin.property":
@@ -206,20 +216,24 @@ const deprecatedMap = {
   "reearth.camera.getFovInfo": "reearth.camera.getGlobeIntersection",
   "reearth.camera.flyToBBox": "reearth.camera.flyToBoundingBox",
   "reearth.camera.rotateOnCenter": "reearth.camera.rotateAround",
-  "reearth.camera.lookHorizontal": "reearth.camera.overrideScreenSpaceCameraController",
-  "reearth.camera.lookVertical": "reearth.camera.overrideScreenSpaceCameraController",
+  "reearth.camera.lookHorizontal":
+    "reearth.camera.overrideScreenSpaceCameraController",
+  "reearth.camera.lookVertical":
+    "reearth.camera.overrideScreenSpaceCameraController",
   "reearth.camera.moveForward": "reearth.camera.move",
   "reearth.camera.moveBackward": "reearth.camera.move",
   "reearth.camera.moveUp": "reearth.camera.move",
   "reearth.camera.moveDown": "reearth.camera.move",
   "reearth.camera.moveLeft": "reearth.camera.move",
   "reearth.camera.moveRight": "reearth.camera.move",
-  "reearth.camera.flyToGround": "reearth.camera.flyTo with manully getting the target height",
+  "reearth.camera.flyToGround":
+    "reearth.camera.flyTo with manully getting the target height",
   "reearth.camera.overrideScreenSpaceController":
     "reearth.camera.overrideScreenSpaceCameraController",
   "reearth.layers.overrideProperty": "reearth.layers.override",
   "reearth.layers.overriddenProperties": "reearth.layers.overridden",
-  "reearth.camera.forceHorizontalRoll": "reearth.camera.enableForceHorizontalRoll",
+  "reearth.camera.forceHorizontalRoll":
+    "reearth.camera.enableForceHorizontalRoll",
   "reearth.sketch.setType": "reearth.sketch.setTool",
   "reearth.sketch.setColor": "reearth.sketch.overrideOptions",
   "reearth.sketch.disableShadow": "reearth.sketch.overrideOptions",
@@ -227,12 +241,14 @@ const deprecatedMap = {
   "reearth.sketch.createDataOnly": "reearth.sketch.overrideOptions",
   "reearth.sketch.enableRelativeHeight": "reearth.sketch.overrideOptions",
   "reearth.sketch.allowRightClickToAbort": "reearth.sketch.overrideOptions",
-  "reearth.sketch.allowAutoResetInteractionMode": "reearth.sketch.overrideOptions",
+  "reearth.sketch.allowAutoResetInteractionMode":
+    "reearth.sketch.overrideOptions",
   "reearth.clientStorage.getAsync": "reearth.data.clientStorage.getAsync",
   "reearth.clientStorage.setAsync": "reearth.data.clientStorage.setAsync",
   "reearth.clientStorage.deleteAsync": "reearth.data.clientStorage.deleteAsync",
   "reearth.clientStorage.keysAsync": "reearth.data.clientStorage.keysAsync",
-  "reearth.clientStorage.dropStore": "reearth.data.clientStorage.dropStoreAsync",
+  "reearth.clientStorage.dropStore":
+    "reearth.data.clientStorage.dropStoreAsync",
   "event update": "update event on reearth.ui",
   "event close": "close event on reearth.ui",
   "event cameramove": "move event on reearth.camera",
@@ -295,7 +311,9 @@ function addEventWarning(obj: object, name: string, isOnce = false) {
       return (eventName: string) => {
         warning(
           `event ${eventName}`,
-          isOnce ? "Please use method on with option {once: true} instead of once." : "",
+          isOnce
+            ? "Please use method on with option {once: true} instead of once."
+            : "",
         );
       };
     },
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts
index d8d3c0490..4c9ae3c93 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts
@@ -9,12 +9,15 @@ export default ({
   floatingWidgets,
   selectedLayer,
   selectedStory,
-}: Pick<Props, "alignSystem" | "floatingWidgets" | "selectedLayer" | "selectedStory">) => {
+}: Pick<
+  Props,
+  "alignSystem" | "floatingWidgets" | "selectedLayer" | "selectedStory"
+>) => {
   const pluginInstances = usePluginInstances({
     alignSystem,
     floatingWidgets,
     infoboxBlocks: selectedLayer?.layer?.infobox?.blocks,
-    storyBlocks: selectedStory?.pages.flatMap(p => p.blocks),
+    storyBlocks: selectedStory?.pages.flatMap((p) => p.blocks),
   });
 
   const getPluginInstances = useGet(pluginInstances);
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts
index 8201acdce..f25be90e6 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts
@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo } from "react";
-
 import { ComputedFeature, NaiveLayer } from "@reearth/core";
+import { useCallback, useEffect, useMemo } from "react";
 
 import { useGet } from "../../utils";
 import { LayersEventType } from "../pluginAPI/types";
@@ -64,7 +63,9 @@ export default ({
   );
 
   const layersInViewport = useCallback(() => {
-    return layersRef?.findAll(layer => !!engineRef?.inViewport(layer?.property?.default?.location));
+    return layersRef?.findAll(
+      (layer) => !!engineRef?.inViewport(layer?.property?.default?.location),
+    );
   }, [engineRef, layersRef]);
 
   const selectLayer = useCallback(
@@ -96,7 +97,12 @@ export default ({
       rect: [x: number, y: number, width: number, height: number],
       condition?: (f: ComputedFeature) => boolean,
     ) => {
-      return engineRef?.pickManyFromViewport([rect[0], rect[1]], rect[2], rect[3], condition);
+      return engineRef?.pickManyFromViewport(
+        [rect[0], rect[1]],
+        rect[2],
+        rect[3],
+        condition,
+      );
     },
     [engineRef],
   );
@@ -120,8 +126,13 @@ export default ({
 
   useEmit<LayersEventType>(
     {
-      select: useMemo<[layerId: string | undefined, featureId: string | undefined]>(
-        () => (selectedLayer ? [selectedLayer.id, selectedFeature?.id] : [undefined, undefined]),
+      select: useMemo<
+        [layerId: string | undefined, featureId: string | undefined]
+      >(
+        () =>
+          selectedLayer
+            ? [selectedLayer.id, selectedFeature?.id]
+            : [undefined, undefined],
         [selectedLayer, selectedFeature],
       ),
     },
@@ -129,19 +140,19 @@ export default ({
   );
 
   useEffect(() => {
-    onLayerEdit?.(e => {
+    onLayerEdit?.((e) => {
       emit("edit", e);
     });
   }, [emit, onLayerEdit]);
 
   useEffect(() => {
-    onLayerVisibility?.(e => {
+    onLayerVisibility?.((e) => {
       emit("visible", e);
     });
   }, [emit, onLayerVisibility]);
 
   useEffect(() => {
-    onLayerLoad?.(e => {
+    onLayerLoad?.((e) => {
       emit("load", e);
     });
   }, [emit, onLayerLoad]);
@@ -152,13 +163,18 @@ export default ({
       callback: (...args: LayersEventType[T]) => void,
       options?: { once?: boolean },
     ) => {
-      return options?.once ? layersEvents.once(type, callback) : layersEvents.on(type, callback);
+      return options?.once
+        ? layersEvents.once(type, callback)
+        : layersEvents.on(type, callback);
     },
     [layersEvents],
   );
 
   const layersEventsOff = useCallback(
-    <T extends keyof LayersEventType>(type: T, callback: (...args: LayersEventType[T]) => void) => {
+    <T extends keyof LayersEventType>(
+      type: T,
+      callback: (...args: LayersEventType[T]) => void,
+    ) => {
       return layersEvents.off(type, callback);
     },
     [layersEvents],
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
index 35ef62484..a7139c35e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
-
 import { SketchOptions, SketchType } from "@reearth/core";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import { SketchEventType } from "../pluginAPI/types";
 import { Props } from "../types";
@@ -10,18 +9,29 @@ export default ({
   mapRef,
   onSketchPluginFeatureCreate,
   onSketchTypeChange,
-}: Pick<Props, "mapRef" | "onSketchPluginFeatureCreate" | "onSketchTypeChange">) => {
-  const getSketchTool = useCallback(() => mapRef?.current?.sketch?.getType(), [mapRef]);
+}: Pick<
+  Props,
+  "mapRef" | "onSketchPluginFeatureCreate" | "onSketchTypeChange"
+>) => {
+  const getSketchTool = useCallback(
+    () => mapRef?.current?.sketch?.getType(),
+    [mapRef],
+  );
 
   const setSketchTool = useCallback(
-    (type: SketchType | undefined) => mapRef?.current?.sketch?.setType(type, "plugin"),
+    (type: SketchType | undefined) =>
+      mapRef?.current?.sketch?.setType(type, "plugin"),
     [mapRef],
   );
 
-  const getSketchOptions = useCallback(() => mapRef?.current?.sketch?.getOptions(), [mapRef]);
+  const getSketchOptions = useCallback(
+    () => mapRef?.current?.sketch?.getOptions(),
+    [mapRef],
+  );
 
   const overrideSketchOptions = useCallback(
-    (options: SketchOptions) => mapRef?.current?.sketch?.overrideOptions(options),
+    (options: SketchOptions) =>
+      mapRef?.current?.sketch?.overrideOptions(options),
     [mapRef],
   );
 
@@ -29,8 +39,11 @@ export default ({
 
   const sketchPluginFeatureCreateEventBinded = useRef(false);
   useEffect(() => {
-    if (!sketchPluginFeatureCreateEventBinded.current && onSketchPluginFeatureCreate) {
-      onSketchPluginFeatureCreate?.(e => {
+    if (
+      !sketchPluginFeatureCreateEventBinded.current &&
+      onSketchPluginFeatureCreate
+    ) {
+      onSketchPluginFeatureCreate?.((e) => {
         emit("create", e);
       });
       sketchPluginFeatureCreateEventBinded.current = true;
@@ -40,7 +53,7 @@ export default ({
   const sketchTypeChangeEventBinded = useRef(false);
   useEffect(() => {
     if (!sketchTypeChangeEventBinded.current && onSketchTypeChange) {
-      onSketchTypeChange?.(e => {
+      onSketchTypeChange?.((e) => {
         emit("toolChange", e);
       });
       sketchTypeChangeEventBinded.current = true;
@@ -53,13 +66,18 @@ export default ({
       callback: (...args: SketchEventType[T]) => void,
       options?: { once?: boolean },
     ) => {
-      return options?.once ? sketchEvents.once(type, callback) : sketchEvents.on(type, callback);
+      return options?.once
+        ? sketchEvents.once(type, callback)
+        : sketchEvents.on(type, callback);
     },
     [sketchEvents],
   );
 
   const sketchEventsOff = useCallback(
-    <T extends keyof SketchEventType>(type: T, callback: (...args: SketchEventType[T]) => void) => {
+    <T extends keyof SketchEventType>(
+      type: T,
+      callback: (...args: SketchEventType[T]) => void,
+    ) => {
       return sketchEvents.off(type, callback);
     },
     [sketchEvents],
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts
index 9b449c30b..7c6a0ecd6 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts
@@ -9,13 +9,13 @@ export default ({ timelineManagerRef }: Pick<Props, "timelineManagerRef">) => {
   const [timelineEvents, emit] = useMemo(() => events<TimelineEventType>(), []);
 
   useEffect(() => {
-    timelineManagerRef?.current?.onTick(e => {
+    timelineManagerRef?.current?.onTick((e) => {
       emit("tick", e);
     });
   }, [timelineManagerRef, emit]);
 
   useEffect(() => {
-    timelineManagerRef?.current?.onCommit(e => {
+    timelineManagerRef?.current?.onCommit((e) => {
       emit("commit", e);
     });
   }, [timelineManagerRef, emit]);
@@ -79,7 +79,11 @@ export default ({ timelineManagerRef }: Pick<Props, "timelineManagerRef">) => {
           committer: { source: "pluginAPI", id: "window" },
         });
       },
-      setTime: (time: { start: Date | string; stop: Date | string; current: Date | string }) => {
+      setTime: (time: {
+        start: Date | string;
+        stop: Date | string;
+        current: Date | string;
+      }) => {
         timelineManagerRef?.current?.commit({
           cmd: "SET_TIME",
           payload: { ...time },
@@ -107,7 +111,9 @@ export default ({ timelineManagerRef }: Pick<Props, "timelineManagerRef">) => {
           committer: { source: "pluginAPI", id: "window" },
         });
       },
-      tick: timelineManagerRef?.current?.tick as (() => Date | undefined) | undefined,
+      tick: timelineManagerRef?.current?.tick as
+        | (() => Date | undefined)
+        | undefined,
       on: timelineEventsOn,
       off: timelineEventsOff,
     };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts
index a726f2017..56e544dad 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts
@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo } from "react";
-
 import { MouseEventHandles, MouseEvents } from "@reearth/core";
+import { useCallback, useEffect, useMemo } from "react";
 
 import { useGet } from "../../utils";
 import {
@@ -66,19 +65,19 @@ export default ({
   );
 
   useEffect(() => {
-    onLayerSelectWithRectStart?.(e => {
+    onLayerSelectWithRectStart?.((e) => {
       emitSelectionModeEvent("marqueeStart", e);
     });
   }, [emitSelectionModeEvent, onLayerSelectWithRectStart]);
 
   useEffect(() => {
-    onLayerSelectWithRectMove?.(e => {
+    onLayerSelectWithRectMove?.((e) => {
       emitSelectionModeEvent("marqueeMove", e);
     });
   }, [emitSelectionModeEvent, onLayerSelectWithRectMove]);
 
   useEffect(() => {
-    onLayerSelectWithRectEnd?.(e => {
+    onLayerSelectWithRectEnd?.((e) => {
       emitSelectionModeEvent("marqueeEnd", e);
     });
   }, [emitSelectionModeEvent, onLayerSelectWithRectEnd]);
@@ -116,7 +115,12 @@ export default ({
           off: selectionModeEventsOff,
         },
       }),
-      [interactionMode, overrideInteractionMode, selectionModeEventsOn, selectionModeEventsOff],
+      [
+        interactionMode,
+        overrideInteractionMode,
+        selectionModeEventsOn,
+        selectionModeEventsOff,
+      ],
     ),
   );
 
@@ -189,8 +193,14 @@ export default ({
   );
 
   const transformByOffsetOnScreen = useCallback(
-    (rawPosition: [x: number, y: number, z: number], screenOffset: [x: number, y: number]) => {
-      return engineRef?.convertScreenToPositionOffset(rawPosition, screenOffset);
+    (
+      rawPosition: [x: number, y: number, z: number],
+      screenOffset: [x: number, y: number],
+    ) => {
+      return engineRef?.convertScreenToPositionOffset(
+        rawPosition,
+        screenOffset,
+      );
     },
     [engineRef],
   );
@@ -262,13 +272,18 @@ export default ({
       callback: (...args: ViewerEventType[T]) => void,
       options?: { once?: boolean },
     ) => {
-      return options?.once ? viewerEvents.once(type, callback) : viewerEvents.on(type, callback);
+      return options?.once
+        ? viewerEvents.once(type, callback)
+        : viewerEvents.on(type, callback);
     },
     [viewerEvents],
   );
 
   const viewerEventsOff = useCallback(
-    <T extends keyof ViewerEventType>(type: T, callback: (...args: ViewerEventType[T]) => void) => {
+    <T extends keyof ViewerEventType>(
+      type: T,
+      callback: (...args: ViewerEventType[T]) => void,
+    ) => {
       return viewerEvents.off(type, callback);
     },
     [viewerEvents],
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts
index 8ba6d5294..0f10034ec 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts
@@ -4,7 +4,10 @@ import { LazyLayer, MapRef } from "@reearth/core";
 import { REEATH_PLUGIN_API_VERSION } from "./constaint";
 import { GlobalThis, Reearth } from "./types";
 
-export type CommonReearth = Omit<Reearth, "ui" | "modal" | "popup" | "extension" | "data"> & {
+export type CommonReearth = Omit<
+  Reearth,
+  "ui" | "modal" | "popup" | "extension" | "data"
+> & {
   extension: Pick<Reearth["extension"], "list">;
 };
 
@@ -273,12 +276,22 @@ export function commonReearth({
         return getLayers()?.overriddenLayers?.();
       },
       get find() {
-        return (cb: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean) =>
-          getLayers()?.find(cb);
+        return (
+          cb: (
+            layer: LazyLayer,
+            index: number,
+            parents: LazyLayer[],
+          ) => boolean,
+        ) => getLayers()?.find(cb);
       },
       get findAll() {
-        return (cb: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean) =>
-          getLayers()?.findAll(cb);
+        return (
+          cb: (
+            layer: LazyLayer,
+            index: number,
+            parents: LazyLayer[],
+          ) => boolean,
+        ) => getLayers()?.findAll(cb);
       },
       get findById() {
         return (id: string) => getLayers()?.findById(id);
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts
index 8d95987e2..527bd5a3f 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts
@@ -90,7 +90,11 @@ export function exposedReearth({
   getBlock?: () => Reearth["extension"]["block"] | undefined;
   getLayer?: () => Layer | undefined;
   startEventLoop?: () => void;
-  pluginPostMessage: (extentionId: string, msg: unknown, sender: string) => void;
+  pluginPostMessage: (
+    extentionId: string,
+    msg: unknown,
+    sender: string,
+  ) => void;
   extensionEventsOn: Reearth["extension"]["on"];
   extensionEventsOff: Reearth["extension"]["off"];
   // data
@@ -105,13 +109,20 @@ export function exposedReearth({
       viewer: merge(commonReearth.viewer, {
         get overrideProperty() {
           return (property: ViewerProperty) => {
-            overrideViewerProperty?.(plugin ? `${plugin.id}/${plugin.extensionId}` : "", property);
+            overrideViewerProperty?.(
+              plugin ? `${plugin.id}/${plugin.extensionId}` : "",
+              property,
+            );
           };
         },
         tools: merge(commonReearth.viewer.tools, {
           get getTerrainHeightAsync() {
             return async (lng: number, lat: number) => {
-              const result = await commonReearth?.viewer?.tools?.getTerrainHeightAsync?.(lng, lat);
+              const result =
+                await commonReearth?.viewer?.tools?.getTerrainHeightAsync?.(
+                  lng,
+                  lat,
+                );
               startEventLoop?.();
               return result;
             };
@@ -131,8 +142,8 @@ export function exposedReearth({
                   (plugin?.extensionType === "widget"
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
-                    ? getBlock?.()?.id
-                    : "") ?? "",
+                      ? getBlock?.()?.id
+                      : "") ?? "",
               },
             });
           };
@@ -147,13 +158,17 @@ export function exposedReearth({
                   (plugin?.extensionType === "widget"
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
-                    ? getBlock?.()?.id
-                    : "") ?? "",
+                      ? getBlock?.()?.id
+                      : "") ?? "",
               },
             });
         },
         get setTime() {
-          return (time: { start: Date | string; stop: Date | string; current: Date | string }) =>
+          return (time: {
+            start: Date | string;
+            stop: Date | string;
+            current: Date | string;
+          }) =>
             timelineManagerRef?.current?.commit({
               cmd: "SET_TIME",
               payload: { ...time },
@@ -163,8 +178,8 @@ export function exposedReearth({
                   (plugin?.extensionType === "widget"
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
-                    ? getBlock?.()?.id
-                    : "") ?? "",
+                      ? getBlock?.()?.id
+                      : "") ?? "",
               },
             });
         },
@@ -179,8 +194,8 @@ export function exposedReearth({
                   (plugin?.extensionType === "widget"
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
-                    ? getBlock?.()?.id
-                    : "") ?? "",
+                      ? getBlock?.()?.id
+                      : "") ?? "",
               },
             });
         },
@@ -195,8 +210,8 @@ export function exposedReearth({
                   (plugin?.extensionType === "widget"
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
-                    ? getBlock?.()?.id
-                    : "") ?? "",
+                      ? getBlock?.()?.id
+                      : "") ?? "",
               },
             });
         },
@@ -211,8 +226,8 @@ export function exposedReearth({
                   (plugin?.extensionType === "widget"
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
-                    ? getBlock?.()?.id
-                    : "") ?? "",
+                      ? getBlock?.()?.id
+                      : "") ?? "",
               },
             });
         },
@@ -248,10 +263,13 @@ export function exposedReearth({
             const sender =
               (plugin?.extensionType === "widget"
                 ? getWidget?.()?.id
-                : ["infoboxBlock", "storyBlock", "block"].includes(plugin?.extensionType ?? "")
-                ? getBlock?.()?.id
-                : "") ?? "";
-            return (id: string, msg: unknown) => pluginPostMessage(id, msg, sender);
+                : ["infoboxBlock", "storyBlock", "block"].includes(
+                      plugin?.extensionType ?? "",
+                    )
+                  ? getBlock?.()?.id
+                  : "") ?? "";
+            return (id: string, msg: unknown) =>
+              pluginPostMessage(id, msg, sender);
           },
           on: extensionEventsOn,
           off: extensionEventsOff,
@@ -263,7 +281,8 @@ export function exposedReearth({
               },
             }
           : {},
-        plugin?.extensionType === "infoboxBlock" || plugin?.extensionType === "storyBlock"
+        plugin?.extensionType === "infoboxBlock" ||
+          plugin?.extensionType === "storyBlock"
           ? {
               get block() {
                 return {
@@ -282,8 +301,8 @@ export function exposedReearth({
                 (plugin?.extensionType === "widget"
                   ? getWidget?.()?.id
                   : plugin?.extensionType === "block"
-                  ? getBlock?.()?.id
-                  : "") ?? "",
+                    ? getBlock?.()?.id
+                    : "") ?? "",
                 key,
               );
               promise.finally(() => {
@@ -295,13 +314,15 @@ export function exposedReearth({
           get setAsync() {
             return (key: string, value: unknown) => {
               const localValue =
-                typeof value === "object" ? JSON.parse(JSON.stringify(value)) : value;
+                typeof value === "object"
+                  ? JSON.parse(JSON.stringify(value))
+                  : value;
               const promise = clientStorage.setAsync(
                 (plugin?.extensionType === "widget"
                   ? getWidget?.()?.id
                   : plugin?.extensionType === "block"
-                  ? getBlock?.()?.id
-                  : "") ?? "",
+                    ? getBlock?.()?.id
+                    : "") ?? "",
                 key,
                 localValue,
               );
@@ -317,8 +338,8 @@ export function exposedReearth({
                 (plugin?.extensionType === "widget"
                   ? getWidget?.()?.id
                   : plugin?.extensionType === "block"
-                  ? getBlock?.()?.id
-                  : "") ?? "",
+                    ? getBlock?.()?.id
+                    : "") ?? "",
                 key,
               );
               promise.finally(() => {
@@ -333,8 +354,8 @@ export function exposedReearth({
                 (plugin?.extensionType === "widget"
                   ? getWidget?.()?.id
                   : plugin?.extensionType === "block"
-                  ? getBlock?.()?.id
-                  : "") ?? "",
+                    ? getBlock?.()?.id
+                    : "") ?? "",
               );
               promise.finally(() => {
                 startEventLoop?.();
@@ -348,8 +369,8 @@ export function exposedReearth({
                 (plugin?.extensionType === "widget"
                   ? getWidget?.()?.id
                   : plugin?.extensionType === "block"
-                  ? getBlock?.()?.id
-                  : "") ?? "",
+                    ? getBlock?.()?.id
+                    : "") ?? "",
               );
               promise.finally(() => {
                 startEventLoop?.();
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts
index dd42ad356..0a65fc272 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts
@@ -85,8 +85,10 @@ export type Reearth = {
       | "overriddenLayers"
     > & {
       readonly layersInViewport?: () => LazyLayer[] | undefined;
-      readonly overriddenProperties?: { [id: string]: any };
-      readonly overrideProperty?: (properties: LayerSimple["properties"] | undefined) => void;
+      readonly overriddenProperties?: Record<string, any>;
+      readonly overrideProperty?: (
+        properties: LayerSimple["properties"] | undefined,
+      ) => void;
       readonly overridden?: OverriddenLayer[];
       readonly add?: (layer: NaiveLayer) => string | undefined;
       readonly delete?: WrappedRef<LayersRef>["deleteLayer"];
@@ -94,12 +96,20 @@ export type Reearth = {
         layerId: string | undefined,
         reason?: LayerSelectionReason | undefined,
       ) => void;
-      findFeatureById?: (layerId: string, featureId: string) => Feature | undefined;
-      findFeaturesByIds?: (layerId: string, featureId: string[]) => Feature[] | undefined;
+      findFeatureById?: (
+        layerId: string,
+        featureId: string,
+      ) => Feature | undefined;
+      findFeaturesByIds?: (
+        layerId: string,
+        featureId: string[],
+      ) => Feature[] | undefined;
       bringToFront?: (layerId: string) => void;
       sendToBack?: (layerId: string) => void;
       selectFeature?: (layerId?: string, featureId?: string) => void;
-      selectFeatures?: (layers: { layerId?: string; featureId?: string[] }[]) => void;
+      selectFeatures?: (
+        layers: { layerId?: string; featureId?: string[] }[],
+      ) => void;
       selectionReason?: LayerSelectionReason;
       // For compat
       overriddenInfobox?: LayerSelectionReason["defaultInfobox"];
@@ -145,14 +155,24 @@ export type CommonBlock = {
 export type Scene = {
   readonly inEditor: boolean;
   readonly built: boolean;
-  readonly captureScreen: (type?: string, encoderOptions?: number) => string | undefined;
+  readonly captureScreen: (
+    type?: string,
+    encoderOptions?: number,
+  ) => string | undefined;
   readonly getLocationFromScreen: (
     x: number,
     y: number,
     withTerrain?: boolean,
   ) => LatLngHeight | undefined;
-  readonly sampleTerrainHeight: (lng: number, lat: number) => Promise<number | undefined>;
-  readonly computeGlobeHeight: (lng: number, lat: number, height?: number) => number | undefined;
+  readonly sampleTerrainHeight: (
+    lng: number,
+    lat: number,
+  ) => Promise<number | undefined>;
+  readonly computeGlobeHeight: (
+    lng: number,
+    lat: number,
+    height?: number,
+  ) => number | undefined;
   readonly getGlobeHeight: () => void;
   readonly toXYZ: (
     lng: number,
@@ -170,7 +190,9 @@ export type Scene = {
     rawPosition: [x: number, y: number, z: number],
     screenOffset: [x: number, y: number],
   ) => [x: number, y: number, z: number] | undefined;
-  readonly isPositionVisible: (position: [x: number, y: number, z: number]) => boolean;
+  readonly isPositionVisible: (
+    position: [x: number, y: number, z: number],
+  ) => boolean;
   readonly toWindowPosition: (
     position: [x: number, y: number, z: number],
   ) => [x: number, y: number] | undefined;
@@ -192,7 +214,10 @@ export type Camera = {
   /** Current camera position */
   readonly position: CameraPosition | undefined;
   readonly viewport: Rect | undefined;
-  readonly getFovInfo: (options: { withTerrain?: boolean; calcViewSize?: boolean }) =>
+  readonly getFovInfo: (options: {
+    withTerrain?: boolean;
+    calcViewSize?: boolean;
+  }) =>
     | {
         center?: LatLngHeight;
         viewSize?: number;
@@ -201,7 +226,10 @@ export type Camera = {
   readonly zoomIn: (amount: number, options?: CameraOptions) => void;
   readonly zoomOut: (amount: number, options?: CameraOptions) => void;
   /** Moves the camera position to the specified destination. */
-  readonly flyTo: (destination: string | FlyToDestination, options?: CameraOptions) => void;
+  readonly flyTo: (
+    destination: string | FlyToDestination,
+    options?: CameraOptions,
+  ) => void;
   readonly flyToBBox: (
     bbox: [number, number, number, number],
     options?: CameraOptions & {
@@ -211,9 +239,14 @@ export type Camera = {
     },
   ) => void;
   readonly rotateOnCenter: (radian: number) => void;
-  readonly overrideScreenSpaceController: (options: ScreenSpaceCameraControllerOptions) => void;
+  readonly overrideScreenSpaceController: (
+    options: ScreenSpaceCameraControllerOptions,
+  ) => void;
   /** Moves the camera position to look at the specified destination. */
-  readonly lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
+  readonly lookAt: (
+    destination: LookAtDestination,
+    options?: CameraOptions,
+  ) => void;
   /** Rotate the camera around the center of earth. */
   readonly rotateRight: (radian: number) => void;
   /** Move the angle of camera around the center of earth. */
@@ -247,7 +280,7 @@ export type Clock = {
   speed?: number;
   stepType?: "rate" | "fixed";
   rangeType?: "unbounded" | "clamped" | "bounced";
-  readonly tick?: () => Date | void;
+  readonly tick?: () => Date;
   readonly play?: () => void;
   readonly pause?: () => void;
   readonly setTime?: (time: {
@@ -256,7 +289,9 @@ export type Clock = {
     current: Date | string;
   }) => void;
   readonly setSpeed?: (speed: number) => void;
-  readonly setRangeType?: (rangeType: "unbounded" | "clamped" | "bounced") => void;
+  readonly setRangeType?: (
+    rangeType: "unbounded" | "clamped" | "bounced",
+  ) => void;
   readonly setStepType?: (stepType: "rate" | "fixed") => void;
 };
 
@@ -475,4 +510,4 @@ export type Sketch = {
 };
 
 /** Cesium API: available only when the plugin is a primitive */
-export type Cesium = {};
+export type Cesium = object;
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts
index 90466531b..1fde6ca3e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts
@@ -24,7 +24,10 @@ export declare type Camera = {
     destination: LookAtDestination,
     options?: CameraMoveOptions & { fov?: number },
   ) => void;
-  readonly getGlobeIntersection: (options: { withTerrain?: boolean; calcViewSize?: boolean }) =>
+  readonly getGlobeIntersection: (options: {
+    withTerrain?: boolean;
+    calcViewSize?: boolean;
+  }) =>
     | {
         center?: LatLngHeight;
         viewSize?: number;
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts
index ac8e9eb57..5bc3dd903 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts
@@ -35,13 +35,23 @@ export declare type Layers = {
     fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean,
   ) => LazyLayer[] | undefined;
   readonly findById: (layerId: string) => LazyLayer | undefined;
-  readonly findByIds: (...layerIds: string[]) => (LazyLayer | undefined)[] | undefined;
-  readonly findFeatureById?: (layerId: string, featureId: string) => Feature | undefined;
-  readonly findFeaturesByIds?: (layerId: string, featureId: string[]) => Feature[] | undefined;
+  readonly findByIds: (
+    ...layerIds: string[]
+  ) => (LazyLayer | undefined)[] | undefined;
+  readonly findFeatureById?: (
+    layerId: string,
+    featureId: string,
+  ) => Feature | undefined;
+  readonly findFeaturesByIds?: (
+    layerId: string,
+    featureId: string[],
+  ) => Feature[] | undefined;
   readonly layersInViewport?: () => LazyLayer[] | undefined;
   readonly select?: (layerId: string | undefined) => void;
   readonly selectFeature?: (layerId?: string, featureId?: string) => void;
-  readonly selectFeatures?: (layers: { layerId?: string; featureId?: string[] }[]) => void;
+  readonly selectFeatures?: (
+    layers: { layerId?: string; featureId?: string[] }[],
+  ) => void;
   readonly selected?: ComputedLayer;
   readonly selectedFeature?: ComputedFeature;
   readonly bringToFront?: (layerId: string) => void;
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts
index 0cb2d665d..332e2c345 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts
@@ -16,7 +16,9 @@ export declare type Timeline = {
   }) => void;
   readonly setSpeed?: (speed: number) => void;
   readonly setStepType?: (stepType: "rate" | "fixed") => void;
-  readonly setRangeType?: (rangeType: "unbounded" | "clamped" | "bounced") => void;
+  readonly setRangeType?: (
+    rangeType: "unbounded" | "clamped" | "bounced",
+  ) => void;
   readonly on: TimelineEvents["on"];
   readonly off: TimelineEvents["off"];
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts
index 753538789..44d57cca1 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts
@@ -34,7 +34,11 @@ export declare type LayerSelectWithRectMove = LayerSelectWithRect & {
 
 export declare type LayerSelectWithRectStart = LayerSelectWithRect;
 
-export declare type InteractionModeType = "default" | "move" | "selection" | "sketch";
+export declare type InteractionModeType =
+  | "default"
+  | "move"
+  | "selection"
+  | "sketch";
 
 export declare type Viewer = {
   readonly property: ViewerProperty | undefined;
@@ -43,7 +47,10 @@ export declare type Viewer = {
   readonly interactionMode: InteractionMode;
   readonly env: Env;
   readonly tools: Tools;
-  readonly capture: (type?: string, encoderOptions?: number) => string | undefined;
+  readonly capture: (
+    type?: string,
+    encoderOptions?: number,
+  ) => string | undefined;
   readonly on: ViewerEvents["on"];
   readonly off: ViewerEvents["off"];
 };
@@ -83,8 +90,15 @@ export declare type Tools = {
   readonly getScreenCoordinateFromPosition: (
     position: [x: number, y: number, z: number],
   ) => [x: number, y: number] | undefined;
-  readonly getTerrainHeightAsync: (lng: number, lat: number) => Promise<number | undefined>;
-  readonly getGlobeHeight: (lng: number, lat: number, height?: number) => number | undefined;
+  readonly getTerrainHeightAsync: (
+    lng: number,
+    lat: number,
+  ) => Promise<number | undefined>;
+  readonly getGlobeHeight: (
+    lng: number,
+    lat: number,
+    height?: number,
+  ) => number | undefined;
   readonly getGlobeHeightByCamera: () => number | undefined;
   readonly cartographicToCartesian: (
     lng: number,
@@ -102,7 +116,9 @@ export declare type Tools = {
     rawPosition: [x: number, y: number, z: number],
     screenOffset: [x: number, y: number],
   ) => [x: number, y: number, z: number] | undefined;
-  readonly isPositionVisibleOnGlobe: (position: [x: number, y: number, z: number]) => boolean;
+  readonly isPositionVisibleOnGlobe: (
+    position: [x: number, y: number, z: number],
+  ) => boolean;
 };
 
 export declare type ViewerEventType = {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx
index ab71c4114..3fc50910e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx
@@ -1,8 +1,7 @@
+import { Layer } from "@reearth/core";
 import { action } from "@storybook/addon-actions";
 import type { ReactNode } from "react";
 
-import { Layer } from "@reearth/core";
-
 import { PluginProvider } from "./context";
 import type { Context } from "./types";
 
@@ -142,8 +141,12 @@ export const context: Context = {
       rotateRight: act("rotateRight"),
       orbit: act("orbit"),
       getGlobeIntersection: act("getGlobeIntersection"),
-      enableScreenSpaceCameraController: act("enableScreenSpaceCameraController"),
-      overrideScreenSpaceCameraController: act("overrideScreenSpaceCameraController"),
+      enableScreenSpaceCameraController: act(
+        "enableScreenSpaceCameraController",
+      ),
+      overrideScreenSpaceCameraController: act(
+        "overrideScreenSpaceCameraController",
+      ),
       move: act("move"),
       moveOverTerrain: act("moveOverTerrain"),
       setView: act("setView"),
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
index 09f06857e..7d3922f2c 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
@@ -1,5 +1,3 @@
-import type { PropsWithChildren, RefObject } from "react";
-
 import type {
   ComputedFeature,
   SelectedFeatureInfo,
@@ -17,6 +15,7 @@ import type {
   SketchType,
   TimelineManagerRef,
 } from "@reearth/core";
+import type { PropsWithChildren, RefObject } from "react";
 
 import { Story } from "../StoryPanel";
 import type { MapRef, InteractionModeType } from "../types";
@@ -54,8 +53,12 @@ export type Props = PropsWithChildren<{
   overrideViewerProperty?: (id: string, property: ViewerProperty) => void;
   overrideInteractionMode?: (mode: InteractionModeType) => void;
   onLayerEdit?: (cb: (e: LayerEditEvent) => void) => void;
-  onLayerSelectWithRectStart?: (cb: (e: LayerSelectWithRectStart) => void) => void;
-  onLayerSelectWithRectMove?: (cb: (e: LayerSelectWithRectMove) => void) => void;
+  onLayerSelectWithRectStart?: (
+    cb: (e: LayerSelectWithRectStart) => void,
+  ) => void;
+  onLayerSelectWithRectMove?: (
+    cb: (e: LayerSelectWithRectMove) => void,
+  ) => void;
   onLayerSelectWithRectEnd?: (cb: (e: LayerSelectWithRectEnd) => void) => void;
   onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;
   onSketchTypeChange?: (cb: (type: SketchType | undefined) => void) => void;
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts b/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts
index 319686579..84c5742dc 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts
@@ -3,7 +3,11 @@ import { useRef, useMemo, useCallback } from "react";
 
 export type ClientStorage = {
   getAsync: (extensionInstanceId: string, key: string) => Promise<any>;
-  setAsync: (extensionInstanceId: string, key: string, value: any) => Promise<void>;
+  setAsync: (
+    extensionInstanceId: string,
+    key: string,
+    value: any,
+  ) => Promise<void>;
   deleteAsync: (extensionInstanceId: string, key: string) => Promise<void>;
   keysAsync: (extensionInstanceId: string) => Promise<string[]>;
   dropStore: (extensionInstanceId: string) => Promise<void>;
@@ -101,7 +105,9 @@ export default () => {
                 resolve(value);
               })
               .catch((err: any) => {
-                console.log(`err get client storage keys for ${extensionInstanceId}: ${err}`);
+                console.log(
+                  `err get client storage keys for ${extensionInstanceId}: ${err}`,
+                );
                 reject();
               });
           }
@@ -118,7 +124,9 @@ export default () => {
               .dropInstance()
               .then(() => resolve())
               .catch((err: any) => {
-                console.log(`err drop client storage for ${extensionInstanceId}: ${err}`);
+                console.log(
+                  `err drop client storage for ${extensionInstanceId}: ${err}`,
+                );
                 reject();
               })
               .finally(() => {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts b/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts
index 78e515789..cd30637c5 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts
@@ -3,7 +3,11 @@ import { useEffect, useRef, useMemo, type MutableRefObject } from "react";
 import type { InfoboxBlock } from "../Infobox/types";
 import { StoryBlock } from "../StoryPanel/types";
 import type { WidgetAlignSystem } from "../Widgets";
-import type { InternalWidget, WidgetSection, WidgetZone } from "../Widgets/WidgetAlignSystem";
+import type {
+  InternalWidget,
+  WidgetSection,
+  WidgetZone,
+} from "../Widgets/WidgetAlignSystem";
 
 import type { PluginExtensionInstance } from "./pluginAPI/types";
 
@@ -17,7 +21,10 @@ export type Props = {
 export type PluginInstances = {
   meta: MutableRefObject<PluginExtensionInstance[]>;
   postMessage: (id: string, msg: any, sender: string) => void;
-  addPluginMessageSender: (id: string, msgSender: (msg: string) => void) => void;
+  addPluginMessageSender: (
+    id: string,
+    msgSender: (msg: string) => void,
+  ) => void;
   removePluginMessageSender: (id: string) => void;
   runTimesCache: {
     get: (id: string) => number | undefined;
@@ -28,15 +35,22 @@ export type PluginInstances = {
   };
 };
 
-export default ({ alignSystem, floatingWidgets, infoboxBlocks, storyBlocks }: Props) => {
+export default ({
+  alignSystem,
+  floatingWidgets,
+  infoboxBlocks,
+  storyBlocks,
+}: Props) => {
   const pluginInstancesMeta = useRef<PluginExtensionInstance[]>([]);
 
   const runTimesCache = useMemo<Map<string, number>>(() => new Map(), []);
   const runTimesCacheHandler = useMemo(
     () => ({
       get: (id: string) => runTimesCache.get(id) || 0,
-      increment: (id: string) => runTimesCache.set(id, runTimesCacheHandler.get(id) + 1),
-      decrement: (id: string) => runTimesCache.set(id, runTimesCacheHandler.get(id) - 1),
+      increment: (id: string) =>
+        runTimesCache.set(id, runTimesCacheHandler.get(id) + 1),
+      decrement: (id: string) =>
+        runTimesCache.set(id, runTimesCacheHandler.get(id) - 1),
       clear: (id: string) => runTimesCache.set(id, 0),
       clearAll: () => runTimesCache.clear(),
     }),
@@ -47,16 +61,16 @@ export default ({ alignSystem, floatingWidgets, infoboxBlocks, storyBlocks }: Pr
     const instances: PluginExtensionInstance[] = [];
 
     if (alignSystem) {
-      Object.keys(alignSystem).forEach(zoneName => {
+      Object.keys(alignSystem).forEach((zoneName) => {
         const zone = alignSystem[zoneName as keyof WidgetAlignSystem];
         if (zone) {
-          Object.keys(zone).forEach(sectionName => {
+          Object.keys(zone).forEach((sectionName) => {
             const section = zone[sectionName as keyof WidgetZone];
             if (section) {
-              Object.keys(section).forEach(areaName => {
+              Object.keys(section).forEach((areaName) => {
                 const area = section[areaName as keyof WidgetSection];
                 if (area?.widgets) {
-                  area?.widgets.forEach(widget => {
+                  area?.widgets.forEach((widget) => {
                     instances.push({
                       id: widget.id,
                       pluginId: widget.pluginId ?? "",
@@ -77,7 +91,7 @@ export default ({ alignSystem, floatingWidgets, infoboxBlocks, storyBlocks }: Pr
     }
 
     if (floatingWidgets) {
-      floatingWidgets.forEach(widget => {
+      floatingWidgets.forEach((widget) => {
         instances.push({
           id: widget.id,
           pluginId: widget.pluginId ?? "",
@@ -92,7 +106,7 @@ export default ({ alignSystem, floatingWidgets, infoboxBlocks, storyBlocks }: Pr
     }
 
     if (infoboxBlocks) {
-      infoboxBlocks.forEach(block => {
+      infoboxBlocks.forEach((block) => {
         instances.push({
           id: block.id,
           pluginId: block.pluginId ?? "",
@@ -107,7 +121,7 @@ export default ({ alignSystem, floatingWidgets, infoboxBlocks, storyBlocks }: Pr
     }
 
     if (storyBlocks) {
-      storyBlocks.forEach(block => {
+      storyBlocks.forEach((block) => {
         instances.push({
           id: block.id,
           pluginId: block.pluginId ?? "",
@@ -122,9 +136,17 @@ export default ({ alignSystem, floatingWidgets, infoboxBlocks, storyBlocks }: Pr
     }
 
     pluginInstancesMeta.current = instances;
-  }, [alignSystem, floatingWidgets, infoboxBlocks, storyBlocks, runTimesCacheHandler]);
-
-  const pluginMessageSenders = useRef<Map<string, (msg: any) => void>>(new Map());
+  }, [
+    alignSystem,
+    floatingWidgets,
+    infoboxBlocks,
+    storyBlocks,
+    runTimesCacheHandler,
+  ]);
+
+  const pluginMessageSenders = useRef<Map<string, (msg: any) => void>>(
+    new Map(),
+  );
 
   const pluginInstances = useMemo(() => {
     return {
@@ -139,11 +161,14 @@ export default ({ alignSystem, floatingWidgets, infoboxBlocks, storyBlocks }: Pr
           } catch (err) {
             reject(err);
           }
-        }).catch(err => {
+        }).catch((err) => {
           console.error(`plugin postMessage error (${sender} -> ${id})`, err);
         });
       },
-      addPluginMessageSender: (id: string, msgSender: (msg: string) => void) => {
+      addPluginMessageSender: (
+        id: string,
+        msgSender: (msg: string) => void,
+      ) => {
         pluginMessageSenders.current?.set(id, msgSender);
       },
       removePluginMessageSender: (id: string) => {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts b/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts
index 7bbe7c218..a50030f62 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts
@@ -2,25 +2,35 @@ import EventTarget from "@ungap/event-target";
 import { useEffect } from "react";
 
 export type EventCallback<T extends any[] = any[]> = (...args: T) => void;
-export type EventEmitter<E extends { [P in string]: any[] } = { [P in string]: any[] }> = <
-  T extends keyof E,
->(
-  type: T,
-  ...args: E[T]
-) => void;
+export type EventEmitter<
+  E extends { [P in string]: any[] } = { [P in string]: any[] },
+> = <T extends keyof E>(type: T, ...args: E[T]) => void;
 
-export type Events<E extends { [P in string]: any[] } = { [P in string]: any[] }> = {
-  readonly on: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
-  readonly off: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
-  readonly once: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
+export type Events<
+  E extends { [P in string]: any[] } = { [P in string]: any[] },
+> = {
+  readonly on: <T extends keyof E>(
+    type: T,
+    callback: EventCallback<E[T]>,
+  ) => void;
+  readonly off: <T extends keyof E>(
+    type: T,
+    callback: EventCallback<E[T]>,
+  ) => void;
+  readonly once: <T extends keyof E>(
+    type: T,
+    callback: EventCallback<E[T]>,
+  ) => void;
 };
 
-export function events<E extends { [P in string]: any[] } = { [P in string]: any[] }>(): [
-  Events<E>,
-  EventEmitter<E>,
-] {
+export function events<
+  E extends { [P in string]: any[] } = { [P in string]: any[] },
+>(): [Events<E>, EventEmitter<E>] {
   const e = new EventTarget();
-  const callbacks = new Map<keyof E, Map<EventCallback<E[keyof E]>, (e: Event) => void>>();
+  const callbacks = new Map<
+    keyof E,
+    Map<EventCallback<E[keyof E]>, (e: Event) => void>
+  >();
   const getEventCallback = <T extends keyof E>(
     type: T,
     cb: EventCallback<E[T]>,
@@ -84,11 +94,9 @@ export function events<E extends { [P in string]: any[] } = { [P in string]: any
   ];
 }
 
-export function mergeEvents<E extends { [x: string]: any[] } = { [x: string]: any[] }>(
-  source: Events<E>,
-  dest: EventEmitter<E>,
-  types: (keyof E)[],
-): () => void {
+export function mergeEvents<
+  E extends Record<string, any[]> = Record<string, any[]>,
+>(source: Events<E>, dest: EventEmitter<E>, types: (keyof E)[]): () => void {
   const cbs = types.reduce<{ [T in keyof E]: EventCallback<E[T]> }>((a, b) => {
     a[b] = (...args: E[typeof b]) => {
       dest(b, ...args);
@@ -113,6 +121,7 @@ export function useEmit<T extends { [K in string]: any[] }>(
 ) {
   for (const k of Object.keys(values)) {
     const args = values[k];
+    // TODO: fix this
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (!args) return;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx
index c3bf493ab..a76c61863 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx
@@ -1,10 +1,9 @@
-import { FC, useCallback, useContext, useMemo, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { useVisualizer } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useContext, useMemo, useState } from "react";
 
 import CameraEditor, { type CameraBlock as CameraBlockType } from "./Editor";
 
@@ -20,7 +19,10 @@ type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -48,7 +50,10 @@ const Content: FC<Props> = ({
   const visualizer = useVisualizer();
   const [selected, setSelected] = useState<string>(cameraButtons[0]?.id);
 
-  const handleFlyTo = useMemo(() => visualizer.current?.engine.flyTo, [visualizer]);
+  const handleFlyTo = useMemo(
+    () => visualizer.current?.engine.flyTo,
+    [visualizer],
+  );
 
   const handleClick = useCallback(
     (itemId: string) => {
@@ -56,9 +61,11 @@ const Content: FC<Props> = ({
         setSelected(itemId);
         return;
       }
-      const item = cameraButtons.find(i => i.id === itemId);
+      const item = cameraButtons.find((i) => i.id === itemId);
       if (!item?.cameraPosition?.value) return;
-      handleFlyTo?.(item.cameraPosition?.value, { duration: item.cameraDuration?.value || 2 });
+      handleFlyTo?.(item.cameraPosition?.value, {
+        duration: item.cameraDuration?.value || 2,
+      });
     },
     [cameraButtons, isEditable, handleFlyTo],
   );
@@ -112,15 +119,17 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   maxWidth: "400px",
 }));
 
-const StyledButton = styled(Button)<{ color?: string; bgColor?: string; userSelected?: boolean }>(
-  ({ color, bgColor, userSelected, theme }) => ({
-    color: userSelected ? bgColor ?? theme.content.strong : color,
-    backgroundColor: userSelected ? color ?? theme.primary.main : bgColor,
-    borderColor: color,
+const StyledButton = styled(Button)<{
+  color?: string;
+  bgColor?: string;
+  userSelected?: boolean;
+}>(({ color, bgColor, userSelected, theme }) => ({
+  color: userSelected ? (bgColor ?? theme.content.strong) : color,
+  backgroundColor: userSelected ? (color ?? theme.primary.main) : bgColor,
+  borderColor: color,
 
-    ":hover": {
-      color: bgColor,
-      backgroundColor: color ?? theme.primary.main,
-    },
-  }),
-);
+  ":hover": {
+    color: bgColor,
+    backgroundColor: color ?? theme.primary.main,
+  },
+}));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts
index 5791f090b..0df438b23 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts
@@ -1,10 +1,9 @@
-import { debounce } from "lodash-es";
-import { useCallback, useMemo } from "react";
-
 import { ValueTypes } from "@reearth/beta/utils/value";
 import type { Camera } from "@reearth/core";
 import { useVisualizer } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
+import { debounce } from "lodash-es";
+import { useCallback, useMemo } from "react";
 
 import type { Field } from "../../../../types";
 
@@ -37,7 +36,10 @@ export default ({
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -53,14 +55,33 @@ export default ({
   const visualizer = useVisualizer();
   const t = useT();
 
-  const handleFlyTo = useMemo(() => visualizer.current?.engine.flyTo, [visualizer]);
+  const handleFlyTo = useMemo(
+    () => visualizer.current?.engine.flyTo,
+    [visualizer],
+  );
 
-  const editorProperties = useMemo(() => items.find(i => i.id === selected), [items, selected]);
+  const editorProperties = useMemo(
+    () => items.find((i) => i.id === selected),
+    [items, selected],
+  );
 
   const handlePropertyValueUpdate = useCallback(
-    (schemaGroupId: string, propertyId: string, fieldId: string, vt: any, itemId?: string) => {
+    (
+      schemaGroupId: string,
+      propertyId: string,
+      fieldId: string,
+      vt: any,
+      itemId?: string,
+    ) => {
       return async (v?: any) => {
-        await onPropertyUpdate?.(propertyId, schemaGroupId, fieldId, itemId, vt, v);
+        await onPropertyUpdate?.(
+          propertyId,
+          schemaGroupId,
+          fieldId,
+          itemId,
+          vt,
+          v,
+        );
       };
     },
     [onPropertyUpdate],
@@ -75,15 +96,28 @@ export default ({
     ) => {
       if (!propertyId || !itemId) return;
 
-      handlePropertyValueUpdate("default", propertyId, fieldId, fieldType, itemId)(updatedValue);
+      handlePropertyValueUpdate(
+        "default",
+        propertyId,
+        fieldId,
+        fieldType,
+        itemId,
+      )(updatedValue);
     },
     [propertyId, handlePropertyValueUpdate],
   );
 
-  const debounceOnUpdate = useMemo(() => debounce(handleUpdate, 500), [handleUpdate]);
+  const debounceOnUpdate = useMemo(
+    () => debounce(handleUpdate, 500),
+    [handleUpdate],
+  );
 
   const listItems = useMemo(
-    () => items.map(({ id, title }) => ({ id, title: title?.value ?? t("New Camera Button") })),
+    () =>
+      items.map(({ id, title }) => ({
+        id,
+        title: title?.value ?? t("New Camera Button"),
+      })),
     [items, t],
   );
 
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx
index a66d20c59..668cd4dd7 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx
@@ -1,5 +1,3 @@
-import { FC } from "react";
-
 import {
   CameraField,
   ColorField,
@@ -10,6 +8,7 @@ import {
 import { Camera } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import useHooks, { type CameraBlock } from "./hooks";
 
@@ -28,7 +27,10 @@ export type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -91,19 +93,25 @@ const CameraBlockEditor: FC<Props> = ({
             commonTitle={editorProperties?.title?.title}
             description={editorProperties?.title?.description}
             value={editorProperties?.title?.value}
-            onBlur={value => debounceOnUpdate(selected, "title", "string", value)}
+            onBlur={(value) =>
+              debounceOnUpdate(selected, "title", "string", value)
+            }
           />
           <ColorField
             commonTitle={editorProperties?.color?.title}
             description={editorProperties?.color?.description}
             value={editorProperties?.color?.value}
-            onChange={value => debounceOnUpdate(selected, "color", "string", value)}
+            onChange={(value) =>
+              debounceOnUpdate(selected, "color", "string", value)
+            }
           />
           <ColorField
             commonTitle={editorProperties?.bgColor?.title}
             description={editorProperties?.bgColor?.description}
             value={editorProperties?.bgColor?.value}
-            onChange={value => debounceOnUpdate(selected, "bgColor", "string", value)}
+            onChange={(value) =>
+              debounceOnUpdate(selected, "bgColor", "string", value)
+            }
           />
         </FieldGroup>
       </GroupWrapper>
@@ -113,14 +121,18 @@ const CameraBlockEditor: FC<Props> = ({
           commonTitle={editorProperties?.cameraPosition?.title}
           description={editorProperties?.cameraPosition?.description}
           value={editorProperties?.cameraPosition?.value as Camera}
-          onSave={value => handleUpdate(selected, "cameraPosition", "camera", value as Camera)}
+          onSave={(value) =>
+            handleUpdate(selected, "cameraPosition", "camera", value as Camera)
+          }
           onFlyTo={handleFlyTo}
         />
         <NumberField
           commonTitle={editorProperties?.cameraDuration?.title}
           description={editorProperties?.cameraDuration?.description}
           value={editorProperties?.cameraDuration?.value}
-          onBlur={value => handleUpdate(selected, "cameraDuration", "number", value || 0)}
+          onBlur={(value) =>
+            handleUpdate(selected, "cameraDuration", "number", value || 0)
+          }
         />
       </FieldGroup>
     </EditorWrapper>
@@ -139,13 +151,15 @@ const GroupWrapper = styled("div")(() => ({
   gridGap: "10px",
 }));
 
-const FieldGroup = styled("div")<{ disabled: boolean }>(({ theme, disabled }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing.small,
-  opacity: disabled ? 0.6 : 1,
-  cursor: disabled ? "not-allowed" : "inherit",
-  pointerEvents: disabled ? "none" : "inherit",
-}));
+const FieldGroup = styled("div")<{ disabled: boolean }>(
+  ({ theme, disabled }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.small,
+    opacity: disabled ? 0.6 : 1,
+    cursor: disabled ? "not-allowed" : "inherit",
+    pointerEvents: disabled ? "none" : "inherit",
+  }),
+);
 
 export default CameraBlockEditor;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx
index a5d9aa1a7..a827bd69c 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx
@@ -1,7 +1,6 @@
-import { FC, useEffect, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import { FC, useEffect, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
@@ -10,7 +9,12 @@ import { type CameraBlock as CameraBlockType } from "./Editor";
 
 export type Props = BlockProps<StoryBlock>;
 
-const CameraBlock: FC<Props> = ({ block, isSelected, onPropertyItemAdd, ...props }) => {
+const CameraBlock: FC<Props> = ({
+  block,
+  isSelected,
+  onPropertyItemAdd,
+  ...props
+}) => {
   const cameraButtons = useMemo(
     () => (block?.property?.default ?? []) as CameraBlockType[],
     [block?.property?.default],
@@ -33,7 +37,8 @@ const CameraBlock: FC<Props> = ({ block, isSelected, onPropertyItemAdd, ...props
       property={block?.property}
       settingsEnabled={false}
       onPropertyItemAdd={onPropertyItemAdd}
-      {...props}>
+      {...props}
+    >
       <Content
         cameraButtons={cameraButtons}
         propertyId={block?.propertyId}
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx
index 6ec74419f..afbb84502 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx
@@ -1,13 +1,16 @@
-import { FC, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import type { ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
-const ImageBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props }) => {
+const ImageBlock: FC<BlockProps<StoryBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
     [block?.property?.default?.src],
@@ -20,7 +23,8 @@ const ImageBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props })
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
+      {...props}
+    >
       {src && <Image src={src} />}
     </BlockWrapper>
   );
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx
index 18e4bd4d5..62d5eab76 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx
@@ -1,10 +1,9 @@
-import { FC, useCallback, useContext, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { useBlockContext } from "@reearth/beta/features/Visualizer/shared/contexts/blockContext";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useContext, useState } from "react";
 
 import LayerEditor, { type LayerBlock as LayerBlockType } from "./Editor";
 
@@ -20,7 +19,10 @@ type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -56,7 +58,7 @@ const Content: FC<Props> = ({
         setSelected(itemId);
         return;
       }
-      const item = layerButtons.find(i => i.id === itemId);
+      const item = layerButtons.find((i) => i.id === itemId);
 
       if (!item?.showLayers?.value) return;
 
@@ -117,15 +119,17 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   maxWidth: "400px",
 }));
 
-const StyledButton = styled(Button)<{ color?: string; bgColor?: string; userSelected?: boolean }>(
-  ({ color, bgColor, userSelected, theme }) => ({
-    color: userSelected ? bgColor ?? theme.content.strong : color,
-    backgroundColor: userSelected ? color ?? theme.primary.main : bgColor,
-    borderColor: color,
+const StyledButton = styled(Button)<{
+  color?: string;
+  bgColor?: string;
+  userSelected?: boolean;
+}>(({ color, bgColor, userSelected, theme }) => ({
+  color: userSelected ? (bgColor ?? theme.content.strong) : color,
+  backgroundColor: userSelected ? (color ?? theme.primary.main) : bgColor,
+  borderColor: color,
 
-    ":hover": {
-      color: bgColor,
-      backgroundColor: color ?? theme.primary.main,
-    },
-  }),
-);
+  ":hover": {
+    color: bgColor,
+    backgroundColor: color ?? theme.primary.main,
+  },
+}));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts
index 130e80b99..9bc980ccd 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts
@@ -1,8 +1,7 @@
-import { debounce } from "lodash-es";
-import { useCallback, useMemo } from "react";
-
 import { useVisualizer } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
+import { debounce } from "lodash-es";
+import { useCallback, useMemo } from "react";
 
 import type { Field } from "../../../../types";
 
@@ -33,7 +32,10 @@ export default ({
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -57,12 +59,28 @@ export default ({
       })) || [],
     [visualizer],
   );
-  const editorProperties = useMemo(() => items.find(i => i.id === selected), [items, selected]);
+  const editorProperties = useMemo(
+    () => items.find((i) => i.id === selected),
+    [items, selected],
+  );
 
   const handlePropertyValueUpdate = useCallback(
-    (schemaGroupId: string, propertyId: string, fieldId: string, vt: any, itemId?: string) => {
+    (
+      schemaGroupId: string,
+      propertyId: string,
+      fieldId: string,
+      vt: any,
+      itemId?: string,
+    ) => {
       return async (v?: any) => {
-        await onPropertyUpdate?.(propertyId, schemaGroupId, fieldId, itemId, vt, v);
+        await onPropertyUpdate?.(
+          propertyId,
+          schemaGroupId,
+          fieldId,
+          itemId,
+          vt,
+          v,
+        );
       };
     },
     [onPropertyUpdate],
@@ -72,15 +90,28 @@ export default ({
     (itemId: string, fieldId: string, fieldType: any, updatedValue: any) => {
       if (!propertyId || !itemId) return;
 
-      handlePropertyValueUpdate("default", propertyId, fieldId, fieldType, itemId)(updatedValue);
+      handlePropertyValueUpdate(
+        "default",
+        propertyId,
+        fieldId,
+        fieldType,
+        itemId,
+      )(updatedValue);
     },
     [propertyId, handlePropertyValueUpdate],
   );
 
-  const debounceOnUpdate = useMemo(() => debounce(handleUpdate, 500), [handleUpdate]);
+  const debounceOnUpdate = useMemo(
+    () => debounce(handleUpdate, 500),
+    [handleUpdate],
+  );
 
   const listItems = useMemo(
-    () => items.map(({ id, title }) => ({ id, title: title?.value ?? t("New Layers Button") })),
+    () =>
+      items.map(({ id, title }) => ({
+        id,
+        title: title?.value ?? t("New Layers Button"),
+      })),
     [items, t],
   );
 
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx
index fdf81633d..cbe78d441 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx
@@ -1,8 +1,12 @@
-import { FC } from "react";
-
-import { ColorField, InputField, ListField, SelectField } from "@reearth/beta/ui/fields";
+import {
+  ColorField,
+  InputField,
+  ListField,
+  SelectField,
+} from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import useHooks, { type LayerBlock } from "./hooks";
 
@@ -21,7 +25,10 @@ export type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -83,19 +90,25 @@ const CameraBlockEditor: FC<Props> = ({
             commonTitle={editorProperties?.title?.title}
             description={editorProperties?.title?.description}
             value={editorProperties?.title?.value}
-            onBlur={value => debounceOnUpdate(selected, "title", "string", value)}
+            onBlur={(value) =>
+              debounceOnUpdate(selected, "title", "string", value)
+            }
           />
           <ColorField
             commonTitle={editorProperties?.color?.title}
             description={editorProperties?.color?.description}
             value={editorProperties?.color?.value}
-            onChange={value => debounceOnUpdate(selected, "color", "string", value)}
+            onChange={(value) =>
+              debounceOnUpdate(selected, "color", "string", value)
+            }
           />
           <ColorField
             commonTitle={editorProperties?.bgColor?.title}
             description={editorProperties?.bgColor?.description}
             value={editorProperties?.bgColor?.value}
-            onChange={value => debounceOnUpdate(selected, "bgColor", "string", value)}
+            onChange={(value) =>
+              debounceOnUpdate(selected, "bgColor", "string", value)
+            }
           />
         </FieldGroup>
       </GroupWrapper>
@@ -106,7 +119,9 @@ const CameraBlockEditor: FC<Props> = ({
           description={editorProperties?.showLayers?.description}
           options={layers}
           value={editorProperties?.showLayers?.value}
-          onChange={value => debounceOnUpdate(selected, "showLayers", "array", value)}
+          onChange={(value) =>
+            debounceOnUpdate(selected, "showLayers", "array", value)
+          }
           multiple
         />
       </FieldGroup>
@@ -126,12 +141,14 @@ const GroupWrapper = styled("div")(() => ({
   gridGap: "10px",
 }));
 
-const FieldGroup = styled("div")<{ disabled: boolean }>(({ theme, disabled }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing.small,
-  opacity: disabled ? 0.6 : 1,
-  cursor: disabled ? "not-allowed" : "inherit",
-  pointerEvents: disabled ? "none" : "inherit",
-}));
+const FieldGroup = styled("div")<{ disabled: boolean }>(
+  ({ theme, disabled }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.small,
+    opacity: disabled ? 0.6 : 1,
+    cursor: disabled ? "not-allowed" : "inherit",
+    pointerEvents: disabled ? "none" : "inherit",
+  }),
+);
 export default CameraBlockEditor;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx
index fab20df03..c95e40a5d 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx
@@ -1,7 +1,6 @@
-import { useMemo, useEffect } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import { useMemo, useEffect } from "react";
 
 import { StoryBlock } from "../../../types";
 
@@ -10,7 +9,12 @@ import { type LayerBlock as LayerBlockType } from "./Editor";
 
 export type Props = BlockProps<StoryBlock>;
 
-const LayerBlock: React.FC<Props> = ({ block, isSelected, onPropertyItemAdd, ...props }) => {
+const LayerBlock: React.FC<Props> = ({
+  block,
+  isSelected,
+  onPropertyItemAdd,
+  ...props
+}) => {
   const layerButtons = useMemo(
     () => (block?.property?.default ?? []) as LayerBlockType[],
     [block?.property?.default],
@@ -33,7 +37,8 @@ const LayerBlock: React.FC<Props> = ({ block, isSelected, onPropertyItemAdd, ...
       property={block?.property}
       settingsEnabled={false}
       onPropertyItemAdd={onPropertyItemAdd}
-      {...props}>
+      {...props}
+    >
       <Content
         layerButtons={layerButtons}
         propertyId={block?.propertyId}
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx
index abe1744e0..5d8b41b30 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx
@@ -1,9 +1,8 @@
-import { FC, useCallback, useContext, useState } from "react";
-
 import Button from "@reearth/beta/components/Button";
 import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useContext, useState } from "react";
 
 import LinkEditor, { type LinkBlock as LinkBlockType } from "./Editor";
 
@@ -19,7 +18,10 @@ type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -52,7 +54,7 @@ const Content: FC<Props> = ({
         setSelected(itemId);
         return;
       }
-      const item = linkButtons.find(i => i.id === itemId);
+      const item = linkButtons.find((i) => i.id === itemId);
 
       if (!item?.url?.value) return;
       window.open(item.url.value, "_blank");
@@ -109,15 +111,17 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   maxWidth: "400px",
 }));
 
-const StyledButton = styled(Button)<{ color?: string; bgColor?: string; userSelected?: boolean }>(
-  ({ color, bgColor, userSelected, theme }) => ({
-    color: userSelected ? bgColor ?? theme.content.strong : color,
-    backgroundColor: userSelected ? color ?? theme.primary.main : bgColor,
-    borderColor: color,
+const StyledButton = styled(Button)<{
+  color?: string;
+  bgColor?: string;
+  userSelected?: boolean;
+}>(({ color, bgColor, userSelected, theme }) => ({
+  color: userSelected ? (bgColor ?? theme.content.strong) : color,
+  backgroundColor: userSelected ? (color ?? theme.primary.main) : bgColor,
+  borderColor: color,
 
-    ":hover": {
-      color: bgColor,
-      backgroundColor: color ?? theme.primary.main,
-    },
-  }),
-);
+  ":hover": {
+    color: bgColor,
+    backgroundColor: color ?? theme.primary.main,
+  },
+}));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts
index 8e5e82935..cfd15138a 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts
@@ -1,8 +1,7 @@
-import { debounce } from "lodash-es";
-import { useCallback, useMemo } from "react";
-
 import { ValueTypes } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
+import { debounce } from "lodash-es";
+import { useCallback, useMemo } from "react";
 
 import type { Field } from "../../../../types";
 
@@ -34,7 +33,10 @@ export default ({
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -49,12 +51,28 @@ export default ({
 }) => {
   const t = useT();
 
-  const editorProperties = useMemo(() => items.find(i => i.id === selected), [items, selected]);
+  const editorProperties = useMemo(
+    () => items.find((i) => i.id === selected),
+    [items, selected],
+  );
 
   const handlePropertyValueUpdate = useCallback(
-    (schemaGroupId: string, propertyId: string, fieldId: string, vt: any, itemId?: string) => {
+    (
+      schemaGroupId: string,
+      propertyId: string,
+      fieldId: string,
+      vt: any,
+      itemId?: string,
+    ) => {
       return async (v?: any) => {
-        await onPropertyUpdate?.(propertyId, schemaGroupId, fieldId, itemId, vt, v);
+        await onPropertyUpdate?.(
+          propertyId,
+          schemaGroupId,
+          fieldId,
+          itemId,
+          vt,
+          v,
+        );
       };
     },
     [onPropertyUpdate],
@@ -69,15 +87,28 @@ export default ({
     ) => {
       if (!propertyId || !itemId) return;
 
-      handlePropertyValueUpdate("default", propertyId, fieldId, fieldType, itemId)(updatedValue);
+      handlePropertyValueUpdate(
+        "default",
+        propertyId,
+        fieldId,
+        fieldType,
+        itemId,
+      )(updatedValue);
     },
     [propertyId, handlePropertyValueUpdate],
   );
 
-  const debounceOnUpdate = useMemo(() => debounce(handleUpdate, 500), [handleUpdate]);
+  const debounceOnUpdate = useMemo(
+    () => debounce(handleUpdate, 500),
+    [handleUpdate],
+  );
 
   const listItems = useMemo(
-    () => items.map(({ id, title }) => ({ id, title: title?.value ?? t("New Link Button") })),
+    () =>
+      items.map(({ id, title }) => ({
+        id,
+        title: title?.value ?? t("New Link Button"),
+      })),
     [items, t],
   );
 
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx
index 768d7e300..231af3837 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx
@@ -1,8 +1,12 @@
-import { FC } from "react";
-
-import { AssetField, ColorField, InputField, ListField } from "@reearth/beta/ui/fields";
+import {
+  AssetField,
+  ColorField,
+  InputField,
+  ListField,
+} from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import useHooks, { type LinkBlock } from "./hooks";
 
@@ -21,7 +25,10 @@ export type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -82,19 +89,25 @@ const LinkBlockEditor: FC<Props> = ({
             commonTitle={editorProperties?.title?.title}
             description={editorProperties?.title?.description}
             value={editorProperties?.title?.value}
-            onBlur={value => debounceOnUpdate(selected, "title", "string", value)}
+            onBlur={(value) =>
+              debounceOnUpdate(selected, "title", "string", value)
+            }
           />
           <ColorField
             commonTitle={editorProperties?.color?.title}
             description={editorProperties?.color?.description}
             value={editorProperties?.color?.value}
-            onChange={value => debounceOnUpdate(selected, "color", "string", value)}
+            onChange={(value) =>
+              debounceOnUpdate(selected, "color", "string", value)
+            }
           />
           <ColorField
             commonTitle={editorProperties?.bgColor?.title}
             description={editorProperties?.bgColor?.description}
             value={editorProperties?.bgColor?.value}
-            onChange={value => debounceOnUpdate(selected, "bgColor", "string", value)}
+            onChange={(value) =>
+              debounceOnUpdate(selected, "bgColor", "string", value)
+            }
           />
         </FieldGroup>
       </GroupWrapper>
@@ -104,7 +117,7 @@ const LinkBlockEditor: FC<Props> = ({
         inputMethod={"URL"}
         value={editorProperties?.url?.value?.toString() ?? ""}
         placeholder="http://"
-        onChange={value => debounceOnUpdate(selected, "url", "url", value)}
+        onChange={(value) => debounceOnUpdate(selected, "url", "url", value)}
       />
     </EditorWrapper>
   );
@@ -125,13 +138,15 @@ const GroupWrapper = styled("div")(() => ({
   gridGap: "10px",
 }));
 
-const FieldGroup = styled("div")<{ disabled: boolean }>(({ theme, disabled }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing.small,
-  opacity: disabled ? 0.6 : 1,
-  cursor: disabled ? "not-allowed" : "inherit",
-  pointerEvents: disabled ? "none" : "inherit",
-}));
+const FieldGroup = styled("div")<{ disabled: boolean }>(
+  ({ theme, disabled }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing.small,
+    opacity: disabled ? 0.6 : 1,
+    cursor: disabled ? "not-allowed" : "inherit",
+    pointerEvents: disabled ? "none" : "inherit",
+  }),
+);
 
 export default LinkBlockEditor;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx
index 9eee7fd56..2c6695f3a 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx
@@ -1,7 +1,6 @@
-import { FC, useEffect, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import { FC, useEffect, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
@@ -10,7 +9,12 @@ import { type LinkBlock as LinkBlockType } from "./Editor";
 
 export type Props = BlockProps<StoryBlock>;
 
-const LinkBlock: FC<Props> = ({ block, isSelected, onPropertyItemAdd, ...props }) => {
+const LinkBlock: FC<Props> = ({
+  block,
+  isSelected,
+  onPropertyItemAdd,
+  ...props
+}) => {
   const linkButtons = useMemo(
     () => (block?.property?.default ?? []) as LinkBlockType[],
     [block?.property?.default],
@@ -33,7 +37,8 @@ const LinkBlock: FC<Props> = ({ block, isSelected, onPropertyItemAdd, ...props }
       property={block?.property}
       settingsEnabled={false}
       onPropertyItemAdd={onPropertyItemAdd}
-      {...props}>
+      {...props}
+    >
       <Content
         linkButtons={linkButtons}
         propertyId={block?.propertyId}
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx
index 716e947b1..cf007da23 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx
@@ -1,10 +1,17 @@
-import { debounce } from "lodash-es";
-import { useContext, useCallback, useLayoutEffect, useRef, useMemo, useState, FC } from "react";
-
 import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { Markdown } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { debounce } from "lodash-es";
+import {
+  useContext,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useMemo,
+  useState,
+  FC,
+} from "react";
 
 export type Props = {
   text: string;
@@ -18,7 +25,10 @@ const MdBlockEditor: FC<Props> = ({ text, onUpdate }) => {
 
   const [value, setValue] = useState(text);
 
-  const debouncedHandleTextUpdate = useMemo(() => debounce(onUpdate, 1000), [onUpdate]);
+  const debouncedHandleTextUpdate = useMemo(
+    () => debounce(onUpdate, 1000),
+    [onUpdate],
+  );
 
   const onChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -37,9 +47,15 @@ const MdBlockEditor: FC<Props> = ({ text, onUpdate }) => {
   }, [value, context?.editMode]);
 
   return context?.editMode ? (
-    <StyledTextArea placeholder={t("Add markdown text here")} value={value} onChange={onChange} />
+    <StyledTextArea
+      placeholder={t("Add markdown text here")}
+      value={value}
+      onChange={onChange}
+    />
   ) : (
-    <StyledMarkdown empty={!value}>{value || t("Add markdown text here")}</StyledMarkdown>
+    <StyledMarkdown empty={!value}>
+      {value || t("Add markdown text here")}
+    </StyledMarkdown>
   );
 };
 
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx
index 4dd3a5c5f..5304b3abf 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx
@@ -1,8 +1,7 @@
-import { FC, useCallback, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import { ValueTypes } from "@reearth/beta/utils/value";
+import { FC, useCallback, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
@@ -17,9 +16,22 @@ const MdBlock: FC<Props> = ({ block, isSelected, ...props }) => {
   );
 
   const handlePropertyValueUpdate = useCallback(
-    (schemaGroupId: string, propertyId: string, fieldId: string, vt: any, itemId?: string) => {
+    (
+      schemaGroupId: string,
+      propertyId: string,
+      fieldId: string,
+      vt: any,
+      itemId?: string,
+    ) => {
       return async (v?: any) => {
-        await props.onPropertyUpdate?.(propertyId, schemaGroupId, fieldId, itemId, vt, v);
+        await props.onPropertyUpdate?.(
+          propertyId,
+          schemaGroupId,
+          fieldId,
+          itemId,
+          vt,
+          v,
+        );
       };
     },
     [props],
@@ -28,7 +40,12 @@ const MdBlock: FC<Props> = ({ block, isSelected, ...props }) => {
   const handleTextUpdate = useCallback(
     (text: string) => {
       if (!block?.propertyId) return;
-      handlePropertyValueUpdate("default", block?.propertyId, "text", "string")(text);
+      handlePropertyValueUpdate(
+        "default",
+        block?.propertyId,
+        "text",
+        "string",
+      )(text);
     },
     [block?.propertyId, handlePropertyValueUpdate],
   );
@@ -41,7 +58,8 @@ const MdBlock: FC<Props> = ({ block, isSelected, ...props }) => {
       propertyId={block?.propertyId}
       property={block?.property}
       settingsEnabled={false}
-      {...props}>
+      {...props}
+    >
       <MdEditor text={text} onUpdate={handleTextUpdate} />
     </BlockWrapper>
   );
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx
index c04d179b7..5d8f3080e 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx
@@ -1,20 +1,24 @@
-import { FC, useCallback } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import { Icon } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback } from "react";
 
 import { usePanelContext } from "../../../context";
 import { StoryBlock } from "../../../types";
 import { getIconName } from "../../../utils";
 
-const NextPage: FC<BlockProps<StoryBlock>> = ({ block, pageId, isSelected, ...props }) => {
+const NextPage: FC<BlockProps<StoryBlock>> = ({
+  block,
+  pageId,
+  isSelected,
+  ...props
+}) => {
   const { pageIds, onJumpToPage } = usePanelContext();
 
   const handlePageChange = useCallback(() => {
     if (!pageId) return;
-    const pageIndex = pageIds?.findIndex(id => id === pageId);
+    const pageIndex = pageIds?.findIndex((id) => id === pageId);
     if (pageIndex === undefined) return;
     onJumpToPage?.(pageIndex + 1);
   }, [pageId, pageIds, onJumpToPage]);
@@ -26,7 +30,8 @@ const NextPage: FC<BlockProps<StoryBlock>> = ({ block, pageId, isSelected, ...pr
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
+      {...props}
+    >
       <Wrapper>
         <Button onClick={handlePageChange}>
           <StyledIcon icon={getIconName(block?.extensionId)} size="normal" />
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx
index c4bee1690..1f683e69f 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx
@@ -1,8 +1,7 @@
-import { debounce } from "lodash-es";
-import { useMemo, useContext, useCallback, FC } from "react";
-
 import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import RichTextEditor from "@reearth/beta/lib/lexical/RichTextEditor";
+import { debounce } from "lodash-es";
+import { useMemo, useContext, useCallback, FC } from "react";
 
 export type Props = {
   text?: string;
@@ -18,13 +17,31 @@ export type Props = {
   ) => Promise<void>;
 };
 
-const TextBlockEditor: FC<Props> = ({ text, propertyId, isEditable, onPropertyUpdate }) => {
+const TextBlockEditor: FC<Props> = ({
+  text,
+  propertyId,
+  isEditable,
+  onPropertyUpdate,
+}) => {
   const context = useContext(BlockContext);
 
   const handlePropertyValueUpdate = useCallback(
-    (schemaGroupId: string, propertyId: string, fieldId: string, vt: any, itemId?: string) => {
+    (
+      schemaGroupId: string,
+      propertyId: string,
+      fieldId: string,
+      vt: any,
+      itemId?: string,
+    ) => {
       return async (v?: any) => {
-        await onPropertyUpdate?.(propertyId, schemaGroupId, fieldId, itemId, vt, v);
+        await onPropertyUpdate?.(
+          propertyId,
+          schemaGroupId,
+          fieldId,
+          itemId,
+          vt,
+          v,
+        );
       };
     },
     [onPropertyUpdate],
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx
index 7f23ec8d5..42fe7e8ae 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx
@@ -1,9 +1,8 @@
-import { FC, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import RichText from "@reearth/beta/lib/lexical/RichTextEditor";
 import { ValueTypes } from "@reearth/beta/utils/value";
+import { FC, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
@@ -28,7 +27,8 @@ const TextBlock: FC<Props> = ({ block, isSelected, ...props }) => {
       propertyId={block?.propertyId}
       property={block?.property}
       settingsEnabled={false}
-      {...props}>
+      {...props}
+    >
       {props.isEditable ? (
         <TextBlockEditor
           text={text}
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx
index 6ae062f02..26cc37d0c 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx
@@ -106,7 +106,8 @@ const TimelineEditor = ({
             <PlayButton
               isClicked={true}
               isPlaying={isPlayingReversed}
-              onClick={toggleIsPlayingReversed}>
+              onClick={toggleIsPlayingReversed}
+            >
               <Icon icon="timelinePlayLeft" size={14} />
             </PlayButton>
             <PlayButton
@@ -116,10 +117,15 @@ const TimelineEditor = ({
                 if (isPlaying || isPlayingReversed || isPause) {
                   toggleIsPause();
                 }
-              }}>
+              }}
+            >
               <Icon icon="pause" size={14} />
             </PlayButton>
-            <PlayButton isClicked={true} isPlaying={isPlaying} onClick={toggleIsPlaying}>
+            <PlayButton
+              isClicked={true}
+              isPlaying={isPlaying}
+              onClick={toggleIsPlaying}
+            >
               <Icon icon="timelinePlayRight" size={14} />
             </PlayButton>
           </PlayControl>
@@ -134,7 +140,8 @@ const TimelineEditor = ({
                   <Select>{selected && t(`${selected}`)}</Select>
                   <ArrowIcon icon="arrowDown" open={isOpen} size={16} />
                 </InputWrapper>
-              }>
+              }
+            >
               <SelectorWrapper>
                 {playSpeedOptions?.map((playSpeed, key) => (
                   <InputOptions
@@ -142,7 +149,8 @@ const TimelineEditor = ({
                     value={playSpeed.seconds}
                     onClick={() => {
                       handleOnSelect(playSpeed.timeString, playSpeed.seconds);
-                    }}>
+                    }}
+                  >
                     {playSpeed.timeString}
                   </InputOptions>
                 ))}
@@ -150,13 +158,16 @@ const TimelineEditor = ({
             </Popup>
           </PopoverWrapper>
         </TimelineControl>
-        <CurrentTime isMinimized={isMinimized}>{!!currentTime && formattedCurrentTime}</CurrentTime>
+        <CurrentTime isMinimized={isMinimized}>
+          {!!currentTime && formattedCurrentTime}
+        </CurrentTime>
       </TimelineWrapper>
       <TimelineSlider>
         <ScaleList
           onClick={handleOnClick}
           onMouseMove={handleOnMouseMove}
-          onMouseUp={handleOnEndMove}>
+          onMouseUp={handleOnEndMove}
+        >
           {[...Array(11)].map((_, idx) => (
             <Scale key={idx}>
               {idx === 0 ? (
@@ -186,7 +197,8 @@ const TimelineEditor = ({
           isPlaying={isPlaying || isPlayingReversed || isPause}
           style={{
             left: `${sliderPosition}%`,
-          }}>
+          }}
+        >
           <Icon icon="slider" />
         </IconWrapper>
       </TimelineSlider>
@@ -205,43 +217,53 @@ const Wrapper = styled("div")(({ theme }) => ({
   userSelect: "none",
 }));
 
-const TimelineWrapper = styled("div")<{ isMinimized: boolean }>(({ isMinimized, theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  paddingBottom: theme.spacing.small - 2,
-  gap: isMinimized ? "" : "25px",
-  flexDirection: isMinimized ? "column" : "row",
-}));
+const TimelineWrapper = styled("div")<{ isMinimized: boolean }>(
+  ({ isMinimized, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    paddingBottom: theme.spacing.small - 2,
+    gap: isMinimized ? "" : "25px",
+    flexDirection: isMinimized ? "column" : "row",
+  }),
+);
 
-const TimelineControl = styled("div")<{ isMinimized: boolean }>(({ isMinimized }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: isMinimized ? "0" : "18px",
-  width: isMinimized ? "100%" : "auto",
-}));
+const TimelineControl = styled("div")<{ isMinimized: boolean }>(
+  ({ isMinimized }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: isMinimized ? "0" : "18px",
+    width: isMinimized ? "100%" : "auto",
+  }),
+);
 
-const StyledIcon = styled("div")<{ activeBlock: boolean }>(({ activeBlock, theme }) => ({
-  color: theme.content.strong,
-  cursor: "pointer",
-  background: activeBlock ? theme.select.main : theme.bg[4],
-  padding: `${theme.spacing.smallest}px ${theme.spacing.small - 2}px ${theme.spacing.micro}px `,
-  borderRadius: `${theme.radius.normal}px 0 ${theme.radius.large}px 0`,
-  marginBottom: "6px",
-}));
+const StyledIcon = styled("div")<{ activeBlock: boolean }>(
+  ({ activeBlock, theme }) => ({
+    color: theme.content.strong,
+    cursor: "pointer",
+    background: activeBlock ? theme.select.main : theme.bg[4],
+    padding: `${theme.spacing.smallest}px ${theme.spacing.small - 2}px ${theme.spacing.micro}px `,
+    borderRadius: `${theme.radius.normal}px 0 ${theme.radius.large}px 0`,
+    marginBottom: "6px",
+  }),
+);
 
-const PlayControl = styled("div")<{ isMinimized: boolean }>(({ isMinimized, theme }) => ({
-  display: "flex",
-  gap: theme.spacing.small + 2,
-  marginLeft: isMinimized ? "auto" : "0",
-}));
+const PlayControl = styled("div")<{ isMinimized: boolean }>(
+  ({ isMinimized, theme }) => ({
+    display: "flex",
+    gap: theme.spacing.small + 2,
+    marginLeft: isMinimized ? "auto" : "0",
+  }),
+);
 
-const CurrentTime = styled("div")<{ isMinimized: boolean }>(({ isMinimized, theme }) => ({
-  color: theme.content.weaker,
-  paddingRight: isMinimized ? "8px" : "0",
-  fontSize: "12px",
-  marginLeft: isMinimized ? "auto" : "0",
-}));
+const CurrentTime = styled("div")<{ isMinimized: boolean }>(
+  ({ isMinimized, theme }) => ({
+    color: theme.content.weaker,
+    paddingRight: isMinimized ? "8px" : "0",
+    fontSize: "12px",
+    marginLeft: isMinimized ? "auto" : "0",
+  }),
+);
 
 const PlayButton = styled("div")<{ isPlaying?: boolean; isClicked?: boolean }>(
   ({ isPlaying, isClicked, theme }) => ({
@@ -271,9 +293,11 @@ const Select = styled("div")(({ theme }) => ({
   color: theme.content.weaker,
 }));
 
-const PopoverWrapper = styled("div")<{ isMinimized: boolean }>(({ isMinimized, theme }) => ({
-  padding: isMinimized ? `0 ${theme.spacing.small + 2}px` : "0",
-}));
+const PopoverWrapper = styled("div")<{ isMinimized: boolean }>(
+  ({ isMinimized, theme }) => ({
+    padding: isMinimized ? `0 ${theme.spacing.small + 2}px` : "0",
+  }),
+);
 
 const SelectorWrapper = styled("div")(({ theme }) => ({
   minWidth: "100px",
@@ -319,12 +343,14 @@ const ScaleList = styled("div")(() => ({
   cursor: "pointer",
 }));
 
-const IconWrapper = styled("div")<{ isPlaying: boolean }>(({ isPlaying, theme }) => ({
-  position: "absolute",
-  top: "4px",
-  cursor: "pointer",
-  color: isPlaying ? theme.select.main : "",
-}));
+const IconWrapper = styled("div")<{ isPlaying: boolean }>(
+  ({ isPlaying, theme }) => ({
+    position: "absolute",
+    top: "4px",
+    cursor: "pointer",
+    color: isPlaying ? theme.select.main : "",
+  }),
+);
 
 const Scale = styled("div")(({ theme }) => ({
   height: "5px",
@@ -335,10 +361,12 @@ const Scale = styled("div")(({ theme }) => ({
   width: "calc(100% / 11)",
 }));
 
-const ScaleLabel = styled("div")<{ isMinimized: boolean }>(({ isMinimized }) => ({
-  fontSize: isMinimized ? "8px" : "10px",
-  position: "relative",
-  bottom: "28px",
-  right: "16px",
-  width: "34px",
-}));
+const ScaleLabel = styled("div")<{ isMinimized: boolean }>(
+  ({ isMinimized }) => ({
+    fontSize: isMinimized ? "8px" : "10px",
+    position: "relative",
+    bottom: "28px",
+    right: "16px",
+    width: "34px",
+  }),
+);
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts
index 55e3cd5ed..b39f7d48d 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts
@@ -1,13 +1,3 @@
-import {
-  ChangeEventHandler,
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
 import {
   calculatePaddingValue,
   convertPositionToTime,
@@ -18,6 +8,15 @@ import {
 import { DEFAULT_BLOCK_PADDING } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper/hooks";
 import { getNewDate } from "@reearth/beta/features/Visualizer/shared/hooks/useTimelineBlock";
 import { TickEventCallback, TimelineCommitter } from "@reearth/core";
+import {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { PaddingProp } from "./Editor";
 
@@ -45,10 +44,12 @@ type TimelineProps = {
   onSpeedChange?: (speed: number, committerId?: string) => void;
   onPause: (committerId: string) => void;
   onTimeChange?: (time: Date, committerId?: string) => void;
-  onCommit?: (cb: (committer: TimelineCommitter) => void) => void | undefined;
-  removeOnCommitEventListener?: (cb: (committer: TimelineCommitter) => void) => void | undefined;
-  onTick?: (cb: TickEventCallback) => void | undefined;
-  removeTickEventListener?: (cb: TickEventCallback) => void | undefined;
+  onCommit?: (cb: (committer: TimelineCommitter) => void) => void;
+  removeOnCommitEventListener?: (
+    cb: (committer: TimelineCommitter) => void,
+  ) => void;
+  onTick?: (cb: TickEventCallback) => void;
+  removeTickEventListener?: (cb: TickEventCallback) => void;
   setCurrentTime?: (t: number) => void;
 };
 
@@ -92,7 +93,11 @@ export default ({
 
   const [selected, setSelected] = useState("1sec/sec");
   const formattedCurrentTime = useMemo(() => {
-    const textDate = formatDateForTimeline(currentTime, { detail: true }, timezone);
+    const textDate = formatDateForTimeline(
+      currentTime,
+      { detail: true },
+      timezone,
+    );
 
     return textDate;
   }, [currentTime, timezone]);
@@ -123,23 +128,28 @@ export default ({
     return {
       padding: {
         ...property?.panel?.padding,
-        value: calculatePaddingValue(DEFAULT_BLOCK_PADDING, property?.panel?.padding?.value),
+        value: calculatePaddingValue(
+          DEFAULT_BLOCK_PADDING,
+          property?.panel?.padding?.value,
+        ),
       },
     };
   }, [property?.panel]);
 
   const handlePopOver = useCallback(() => {
-    !inEditor && setIsOpen(!isOpen);
+    if (!inEditor) setIsOpen(!isOpen);
   }, [inEditor, isOpen]);
 
   const handleOnSelect = useCallback(
     (value: string, second: number) => {
       if (!inEditor) {
         setIsOpen(false);
-        value !== selected && setSelected(value);
-        isPlayingReversed
-          ? onSpeedChange?.(second * -1, committer.id)
-          : onSpeedChange?.(second, committer.id);
+        if (value !== selected) setSelected(value);
+        if (isPlayingReversed) {
+          onSpeedChange?.(second * -1, committer.id);
+        } else {
+          onSpeedChange?.(second, committer.id);
+        }
       }
     },
     [committer.id, inEditor, isPlayingReversed, onSpeedChange, selected],
@@ -147,13 +157,13 @@ export default ({
 
   useEffect(() => {
     if (isSelected)
-      setCommiter(prev => {
+      setCommiter((prev) => {
         return { source: prev.source, id: blockId };
       });
   }, [blockId, isSelected]);
 
   const handleOnSpeedChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    e => {
+    (e) => {
       onSpeedChange?.(parseInt(e.currentTarget.value, 10), committer.id);
     },
     [committer, onSpeedChange],
@@ -167,7 +177,7 @@ export default ({
       }
       onPlay?.(committer);
       setIsActive(true);
-      committer?.id && setActiveBlock(committer.id);
+      if (committer?.id) setActiveBlock(committer.id);
       onTimeChange?.(new Date(currentTime), committer.id);
       onSpeedChange?.(Math.abs(speed), committer.id);
       setIsPlaying(true);
@@ -193,7 +203,7 @@ export default ({
       onPlay?.(committer);
       setIsActive(true);
       setIsPlayingReversed(true);
-      committer?.id && setActiveBlock(committer.id);
+      if (committer?.id) setActiveBlock(committer.id);
       onTimeChange?.(new Date(currentTime), committer.id);
       onSpeedChange?.(Math.abs(speed) * -1, committer.id);
     }
@@ -215,7 +225,7 @@ export default ({
         setIsPlayingReversed?.(false);
         setIsPlaying?.(false);
       }
-      committer?.id && onPause?.(committer.id);
+      if (committer?.id) onPause?.(committer.id);
       setIsPause(true);
     }
   }, [committer.id, inEditor, isPlaying, isPlayingReversed, onPause]);
@@ -231,10 +241,18 @@ export default ({
     if (!range) return;
     onTimeChange?.(new Date(range?.start), committer.id);
     setCurrentTime?.(range?.start);
-    isPlaying && setIsPlaying(false);
-    isPlayingReversed && setIsPlayingReversed(false);
-    committer.id && onPause(committer.id);
-  }, [range, onTimeChange, committer.id, setCurrentTime, isPlaying, isPlayingReversed, onPause]);
+    if (isPlaying) setIsPlaying(false);
+    if (isPlayingReversed) setIsPlayingReversed(false);
+    if (committer.id) onPause(committer.id);
+  }, [
+    range,
+    onTimeChange,
+    committer.id,
+    setCurrentTime,
+    isPlaying,
+    isPlayingReversed,
+    onPause,
+  ]);
 
   const handleOnResetAndPlay = useCallback(() => {
     if (!range) return;
@@ -277,18 +295,26 @@ export default ({
         return;
       }
       if (target && target.style.pointerEvents === "none" && !inEditor) {
-        const conv = convertPositionToTime(e as unknown as MouseEvent, range.start, range.end);
-        committer?.id && handleOnDrag(new Date(conv), committer?.id);
+        const conv = convertPositionToTime(
+          e as unknown as MouseEvent,
+          range.start,
+          range.end,
+        );
+        if (committer?.id) handleOnDrag(new Date(conv), committer?.id);
       }
     },
     [committer?.id, handleOnDrag, inEditor, range, target],
   );
 
   const handleOnClick: MouseEventHandler = useCallback(
-    e => {
+    (e) => {
       if (!inEditor && range) {
-        const conv = convertPositionToTime(e as unknown as MouseEvent, range.start, range.end);
-        committer?.id && handleOnDrag(new Date(conv), committer?.id);
+        const conv = convertPositionToTime(
+          e as unknown as MouseEvent,
+          range.start,
+          range.end,
+        );
+        if (committer?.id) handleOnDrag(new Date(conv), committer?.id);
       }
     },
     [inEditor, range, committer?.id, handleOnDrag],
@@ -298,7 +324,8 @@ export default ({
     (committer: TimelineCommitter) => {
       if (
         isActive &&
-        (committer.source !== "storyTimelineBlock" || committer.id !== activeBlock) &&
+        (committer.source !== "storyTimelineBlock" ||
+          committer.id !== activeBlock) &&
         range
       ) {
         setActiveBlock(" ");
@@ -306,9 +333,13 @@ export default ({
         setIsPlaying(false);
         setIsPlayingReversed(false);
         const currentTimeValue = timelineValues?.currentTime ?? "";
-        timelineValues
-          ? setCurrentTime?.(getNewDate(new Date(currentTimeValue.substring(0, 19))).getTime())
-          : setCurrentTime?.(range?.start);
+        if (timelineValues) {
+          setCurrentTime?.(
+            getNewDate(new Date(currentTimeValue.substring(0, 19))).getTime(),
+          );
+        } else {
+          setCurrentTime?.(range?.start);
+        }
       }
       setIsPause(false);
     },
@@ -317,8 +348,12 @@ export default ({
 
   useEffect(() => {
     if (
-      (range && isPlaying && JSON.stringify(currentTime) >= JSON.stringify(range?.end)) ||
-      (range && isPlayingReversed && JSON.stringify(currentTime) <= JSON.stringify(range.start))
+      (range &&
+        isPlaying &&
+        JSON.stringify(currentTime) >= JSON.stringify(range?.end)) ||
+      (range &&
+        isPlayingReversed &&
+        JSON.stringify(currentTime) <= JSON.stringify(range.start))
     ) {
       if (playMode === "loop") {
         return handleOnResetAndPlay();
@@ -392,7 +427,8 @@ export default ({
       if (!inEditor) {
         const totalRange = range?.end - range.start;
         const currentPosition = currentTime - range.start;
-        let positionPercentage = (currentPosition / totalRange) * 90 + initialPosition;
+        let positionPercentage =
+          (currentPosition / totalRange) * 90 + initialPosition;
 
         positionPercentage = Math.round(positionPercentage);
         positionPercentage = Math.max(positionPercentage, initialPosition);
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx
index 68bd296ba..224b90159 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx
@@ -1,7 +1,6 @@
-import { FC, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import { FC, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
@@ -13,7 +12,11 @@ export type TimelineValues = {
   endTime: string;
 };
 
-const TimelineBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props }) => {
+const TimelineBlock: FC<BlockProps<StoryBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const timeline = useMemo(() => {
     return {
       timelineValues: block?.property?.default?.timelineSetting?.value,
@@ -35,7 +38,8 @@ const TimelineBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
+      {...props}
+    >
       <TimelineEditor
         inEditor={!!props.isEditable}
         padding={props.padding}
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
index 5d5a9abec..43f68cd63 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
@@ -1,15 +1,18 @@
-import { FC, useMemo } from "react";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import { isEmptyString } from "@reearth/beta/utils/util";
 import { ValueTypes } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
-const TitleBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props }) => {
+const TitleBlock: FC<BlockProps<StoryBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const t = useT();
 
   const property = useMemo(() => block?.property, [block?.property]);
@@ -36,8 +39,9 @@ const TitleBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props })
       propertyId={block?.propertyId}
       property={property}
       dndEnabled={false}
-      {...props}>
-      <TitleWrapper color={hasText ? color ?? "black" : theme.content.weak}>
+      {...props}
+    >
+      <TitleWrapper color={hasText ? (color ?? "black") : theme.content.weak}>
         {hasEmptySpace || !title ? t("Untitled") : title}
       </TitleWrapper>
     </BlockWrapper>
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx
index c6d35c8e0..b5d35eb84 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx
@@ -1,8 +1,7 @@
+import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 import Player from "react-player";
 
-import { styled } from "@reearth/services/theme";
-
 type Props = {
   isSelected?: boolean;
   src?: string;
@@ -12,7 +11,15 @@ const VideoPlayer: FC<Props> = ({ isSelected, src, inEditor }) => {
   return (
     <StyledWrapper>
       {inEditor && <Overlay />}
-      <Player url={src} width="100%" playsinline pip controls light isselected={isSelected} />
+      <Player
+        url={src}
+        width="100%"
+        playsinline
+        pip
+        controls
+        light
+        isselected={isSelected}
+      />
     </StyledWrapper>
   );
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx
index 5f7babc96..82357fa52 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx
@@ -1,13 +1,16 @@
-import { FC, useMemo } from "react";
-
 import VideoPlayer from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer";
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import type { ValueTypes } from "@reearth/beta/utils/value";
+import { FC, useMemo } from "react";
 
 import { StoryBlock } from "../../../types";
 
-const VideoBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props }) => {
+const VideoBlock: FC<BlockProps<StoryBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
     [block?.property?.default?.src?.value],
@@ -20,8 +23,15 @@ const VideoBlock: FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props })
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
-      {src && <VideoPlayer isSelected={isSelected} src={src} inEditor={!!props.isEditable} />}
+      {...props}
+    >
+      {src && (
+        <VideoPlayer
+          isSelected={isSelected}
+          src={src}
+          inEditor={!!props.isEditable}
+        />
+      )}
     </BlockWrapper>
   );
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts
index d918e0bbb..afd1c5512 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts
@@ -57,7 +57,9 @@ const reearthBuiltin: BuiltinStoryBlocks<Component> = {
 
 const builtin = merge({}, reearthBuiltin);
 
-export const isBuiltinStoryBlock = (id: string): id is keyof BuiltinStoryBlocks => {
+export const isBuiltinStoryBlock = (
+  id: string,
+): id is keyof BuiltinStoryBlocks => {
   return !!builtin[id as keyof BuiltinStoryBlocks];
 };
 
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx
index 37dde17d2..c9eba02e5 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx
@@ -1,7 +1,9 @@
-import { useCallback, type ComponentType, type ReactNode } from "react";
-
-import type { CommonBlockProps, BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import type {
+  CommonBlockProps,
+  BlockProps,
+} from "@reearth/beta/features/Visualizer/shared/types";
 import type { Layer } from "@reearth/core";
+import { useCallback, type ComponentType, type ReactNode } from "react";
 
 import BlockWrapper from "../../../shared/components/BlockWrapper";
 import { StoryBlock } from "../types";
@@ -22,7 +24,9 @@ export default function StoryBlockComponent({
   ...props
 }: Props): JSX.Element | null {
   const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
-  const Builtin = isBuiltinStoryBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;
+  const Builtin = isBuiltinStoryBlock(builtinBlockId)
+    ? builtin[builtinBlockId]
+    : undefined;
   const handleRemove = useCallback(
     () => props.block?.id && onRemove?.(props.block.id),
     [props.block?.id, onRemove],
@@ -42,8 +46,13 @@ export default function StoryBlockComponent({
       propertyId={props.block.propertyId}
       dragHandleClassName={props.dragHandleClassName}
       propertyItemsForPluginBlock={props.block.propertyItemsForPluginBlock}
-      onRemove={onRemove ? handleRemove : undefined}>
-      {renderBlock?.({ block: props.block, layer: props.layer, onClick: props.onClick })}
+      onRemove={onRemove ? handleRemove : undefined}
+    >
+      {renderBlock?.({
+        block: props.block,
+        layer: props.layer,
+        onClick: props.onClick,
+      })}
     </BlockWrapper>
   ) : null;
 }
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts
index 3c2aa0525..0e075a277 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts
@@ -1,8 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-
 import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { DEFAULT_STORY_PAGE_GAP, DEFAULT_STORY_PAGE_PADDING } from "../constants";
+import {
+  DEFAULT_STORY_PAGE_GAP,
+  DEFAULT_STORY_PAGE_PADDING,
+} from "../constants";
 import { StoryPage } from "../types";
 import { calculatePaddingValue } from "../utils";
 
@@ -74,8 +76,17 @@ export default ({
   const titleProperty = useMemo(
     () => ({
       title: {
-        title: { value: property?.title?.title, title: "Title", type: "string" },
-        color: { value: property?.title?.color, title: "Color", type: "string", ui: "color" },
+        title: {
+          value: property?.title?.title,
+          title: "Title",
+          type: "string",
+        },
+        color: {
+          value: property?.title?.color,
+          title: "Color",
+          type: "string",
+          ui: "color",
+        },
       },
       panel: {
         padding: {
@@ -92,17 +103,18 @@ export default ({
   const titleId = useMemo(() => `${page?.id}/title`, [page?.id]);
 
   const handleBlockCreate = useCallback(
-    (index: number) => (extensionId?: string | undefined, pluginId?: string | undefined) =>
-      onBlockCreate?.(extensionId, pluginId, index),
+    (index: number) =>
+      (extensionId?: string | undefined, pluginId?: string | undefined) =>
+        onBlockCreate?.(extensionId, pluginId, index),
     [onBlockCreate],
   );
 
   const handleMoveEnd = useCallback(
     async (itemId?: string, newIndex?: number) => {
       if (itemId !== undefined && newIndex !== undefined) {
-        setStoryBlocks(old => {
+        setStoryBlocks((old) => {
           const items = [...old];
-          const currentIndex = old.findIndex(o => o.id === itemId);
+          const currentIndex = old.findIndex((o) => o.id === itemId);
           if (currentIndex !== -1) {
             const [movedItem] = items.splice(currentIndex, 1);
             items.splice(newIndex, 0, movedItem);
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx
index d43e69c5c..085142d9a 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx
@@ -1,5 +1,3 @@
-import { FC, Fragment, MutableRefObject, ReactNode, useEffect, useMemo } from "react";
-
 import BlockAddBar from "@reearth/beta/features/Visualizer/shared/components/BlockAddBar";
 import ContentWrapper from "@reearth/beta/features/Visualizer/shared/components/ContentWrapper";
 import SelectableArea from "@reearth/beta/features/Visualizer/shared/components/SelectableArea";
@@ -9,6 +7,14 @@ import type { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import type { InstallableStoryBlock } from "@reearth/services/api/storytellingApi/blocks";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import {
+  FC,
+  Fragment,
+  MutableRefObject,
+  ReactNode,
+  useEffect,
+  useMemo,
+} from "react";
 
 import { BlockProps } from "../../../shared/types";
 import StoryBlock from "../Block";
@@ -32,7 +38,10 @@ type Props = {
   isAutoScrolling?: MutableRefObject<boolean>;
   scrollTimeoutRef: MutableRefObject<NodeJS.Timeout | undefined>;
   children?: ReactNode;
-  onCurrentPageChange?: (pageId: string, disableScrollIntoView?: boolean) => void;
+  onCurrentPageChange?: (
+    pageId: string,
+    disableScrollIntoView?: boolean,
+  ) => void;
   onPageSettingsToggle?: () => void;
   onPageSelect?: (pageId?: string | undefined) => void;
   onBlockCreate?: (
@@ -52,7 +61,10 @@ type Props = {
   ) => Promise<void>;
   onBlockMove?: (id: string, targetIndex: number, blockId: string) => void;
   onBlockDoubleClick?: (blockId?: string) => void;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -66,7 +78,8 @@ type Props = {
   ) => Promise<void>;
   renderBlock?: (block: BlockProps<StoryBlockType>) => ReactNode;
 };
-const PAGE_DRAG_HANDLE_CLASS_NAME = "reearth-visualizer-editor-page-drag-handle";
+const PAGE_DRAG_HANDLE_CLASS_NAME =
+  "reearth-visualizer-editor-page-drag-handle";
 
 const StoryPanel: FC<Props> = ({
   page,
@@ -122,7 +135,9 @@ const StoryPanel: FC<Props> = ({
       const id = containerRef.current?.id;
       if (id) {
         if (isAutoScrolling?.current) {
-          const wrapperElement = document.getElementById(STORY_PANEL_CONTENT_ELEMENT_ID);
+          const wrapperElement = document.getElementById(
+            STORY_PANEL_CONTENT_ELEMENT_ID,
+          );
 
           wrapperElement?.addEventListener("scroll", () => {
             clearTimeout(scrollTimeoutRef.current);
@@ -135,7 +150,13 @@ const StoryPanel: FC<Props> = ({
         }
       }
     }
-  }, [isIntersecting, containerRef, isAutoScrolling, scrollTimeoutRef, onCurrentPageChange]);
+  }, [
+    isIntersecting,
+    containerRef,
+    isAutoScrolling,
+    scrollTimeoutRef,
+    onCurrentPageChange,
+  ]);
 
   const DraggableStoryBlockItems = useMemo(
     () =>
@@ -215,7 +236,8 @@ const StoryPanel: FC<Props> = ({
       onPropertyUpdate={onPropertyUpdate}
       onPropertyItemAdd={onPropertyItemAdd}
       onPropertyItemDelete={onPropertyItemDelete}
-      onPropertyItemMove={onPropertyItemMove}>
+      onPropertyItemMove={onPropertyItemMove}
+    >
       <ContentWrapper
         id={page?.id}
         ref={containerRef}
@@ -223,7 +245,8 @@ const StoryPanel: FC<Props> = ({
         minPaddingInEditor={MIN_STORY_PAGE_PADDING_IN_EDITOR}
         padding={panelSettings?.padding?.value}
         minGapInEditor={MIN_STORY_PAGE_GAP_IN_EDITOR}
-        gap={panelSettings?.gap?.value}>
+        gap={panelSettings?.gap?.value}
+      >
         <PageTitleWrapper>
           {(isEditable || titleProperty?.title?.title?.value) && (
             // The title block is a pseudo block.
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
index fdc9e32a3..df393dd12 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
@@ -1,7 +1,6 @@
-import { FC, useCallback, useMemo } from "react";
-
 import { Popup } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useMemo } from "react";
 
 type Props = {
   title?: string;
@@ -10,7 +9,12 @@ type Props = {
   onPageChange: (page: number) => void;
 };
 
-const IndicatorSection: FC<Props> = ({ pageNumber, currentPageNumber, title, onPageChange }) => {
+const IndicatorSection: FC<Props> = ({
+  pageNumber,
+  currentPageNumber,
+  title,
+  onPageChange,
+}) => {
   const handleClick = useCallback(() => {
     onPageChange(pageNumber);
   }, [pageNumber, onPageChange]);
@@ -32,7 +36,8 @@ const IndicatorSection: FC<Props> = ({ pageNumber, currentPageNumber, title, onP
       }
       triggerOnHover
       placement="bottom"
-      extendTriggerWidth>
+      extendTriggerWidth
+    >
       <PageNameWrapper isHighlighted={isHighlighted}>
         <TitleWrapper>{title}</TitleWrapper>
       </PageNameWrapper>
@@ -42,22 +47,25 @@ const IndicatorSection: FC<Props> = ({ pageNumber, currentPageNumber, title, onP
 
 export default IndicatorSection;
 
-const Indicator = styled("div")<{ highlighted: boolean; isFirstChild: boolean }>(
-  ({ highlighted, isFirstChild, theme }) => ({
-    height: "100%",
-    width: "100%",
-    background: highlighted ? theme.primary.strong : "#78a9ff",
-    cursor: "pointer",
-    borderLeft: !isFirstChild ? "1px solid #ffffff" : "none",
+const Indicator = styled("div")<{
+  highlighted: boolean;
+  isFirstChild: boolean;
+}>(({ highlighted, isFirstChild, theme }) => ({
+  height: "100%",
+  width: "100%",
+  background: highlighted ? theme.primary.strong : "#78a9ff",
+  cursor: "pointer",
+  borderLeft: !isFirstChild ? "1px solid #ffffff" : "none",
+}));
+
+const PageNameWrapper = styled("div")<{ isHighlighted: boolean }>(
+  ({ isHighlighted, theme }) => ({
+    background: isHighlighted ? theme.primary.strong : "#78a9ff",
+    padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+    maxWidth: "255px",
   }),
 );
 
-const PageNameWrapper = styled("div")<{ isHighlighted: boolean }>(({ isHighlighted, theme }) => ({
-  background: isHighlighted ? theme.primary.strong : "#78a9ff",
-  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
-  maxWidth: "255px",
-}));
-
 const TitleWrapper = styled("div")(({ theme }) => ({
   fontSize: theme.fonts.sizes.footnote,
   fontWeight: theme.fonts.weight.regular,
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx
index 020043244..1367d8dca 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx
@@ -1,7 +1,6 @@
-import { FC } from "react";
-
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import IndicatorSection from "./IndicatorSection";
 
@@ -12,7 +11,12 @@ type Props = {
   onPageChange: (page: number) => void;
 };
 
-const StoryPageIndicator: FC<Props> = ({ currentPage, pageTitles, maxPage, onPageChange }) => {
+const StoryPageIndicator: FC<Props> = ({
+  currentPage,
+  pageTitles,
+  maxPage,
+  onPageChange,
+}) => {
   const t = useT();
   return (
     <Wrapper>
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts
index 1ab99b3b7..876f0d928 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts
@@ -1,6 +1,12 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-
 import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants";
 
@@ -17,7 +23,10 @@ export default ({
     pluginId?: string | undefined,
     index?: number | undefined,
   ) => Promise<void>;
-  onBlockDelete?: (pageId?: string | undefined, blockId?: string | undefined) => Promise<void>;
+  onBlockDelete?: (
+    pageId?: string | undefined,
+    blockId?: string | undefined,
+  ) => Promise<void>;
 }) => {
   const editModeContext = useEditModeContext();
   const scrollTimeoutRef = useRef<NodeJS.Timeout>();
@@ -46,13 +55,17 @@ export default ({
   );
 
   useLayoutEffect(() => {
-    const pageWrapperElement = document.getElementById(STORY_PANEL_CONTENT_ELEMENT_ID);
+    const pageWrapperElement = document.getElementById(
+      STORY_PANEL_CONTENT_ELEMENT_ID,
+    );
     if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block
   }, [setPageGap]);
 
   useEffect(() => {
     const resizeCallback = () => {
-      const pageWrapperElement = document.getElementById(STORY_PANEL_CONTENT_ELEMENT_ID);
+      const pageWrapperElement = document.getElementById(
+        STORY_PANEL_CONTENT_ELEMENT_ID,
+      );
       if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block
     };
     window.addEventListener("resize", resizeCallback);
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx
index 54c837e9e..28662d0e9 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx
@@ -1,14 +1,16 @@
-import { FC, MutableRefObject, ReactNode } from "react";
-
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import type { InstallableStoryBlock } from "@reearth/services/api/storytellingApi/blocks";
 import { styled } from "@reearth/services/theme";
+import { FC, MutableRefObject, ReactNode } from "react";
 
 import { BlockProps } from "../../../shared/types";
 import StoryPage from "../Page";
 import { StoryBlock } from "../types";
 
-import useHooks, { STORY_PANEL_CONTENT_ELEMENT_ID, type StoryPage as StoryPageType } from "./hooks";
+import useHooks, {
+  STORY_PANEL_CONTENT_ELEMENT_ID,
+  type StoryPage as StoryPageType,
+} from "./hooks";
 
 export type Props = {
   pages?: StoryPageType[];
@@ -21,7 +23,10 @@ export type Props = {
   isEditable?: boolean;
   onPageSettingsToggle?: () => void;
   onPageSelect?: (pageId?: string | undefined) => void;
-  onCurrentPageChange?: (pageId: string, disableScrollIntoView?: boolean) => void;
+  onCurrentPageChange?: (
+    pageId: string,
+    disableScrollIntoView?: boolean,
+  ) => void;
   onBlockCreate?: (
     pageId?: string | undefined,
     extensionId?: string | undefined,
@@ -29,7 +34,10 @@ export type Props = {
     index?: number | undefined,
   ) => Promise<void>;
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
-  onBlockDelete?: (pageId?: string | undefined, blockId?: string | undefined) => Promise<void>;
+  onBlockDelete?: (
+    pageId?: string | undefined,
+    blockId?: string | undefined,
+  ) => Promise<void>;
   onBlockSelect?: (blockId?: string) => void;
   onBlockDoubleClick?: (blockId?: string) => void;
   onPropertyUpdate?: (
@@ -40,7 +48,10 @@ export type Props = {
     vt?: ValueType,
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -78,18 +89,24 @@ const StoryContent: FC<Props> = ({
   onPropertyItemDelete,
   renderBlock,
 }) => {
-  const { pageGap, scrollTimeoutRef, disableSelection, handleBlockCreate, handleBlockDelete } =
-    useHooks({
-      onBlockCreate,
-      onBlockDelete,
-    });
+  const {
+    pageGap,
+    scrollTimeoutRef,
+    disableSelection,
+    handleBlockCreate,
+    handleBlockDelete,
+  } = useHooks({
+    onBlockCreate,
+    onBlockDelete,
+  });
 
   return (
     <PagesWrapper
       id={STORY_PANEL_CONTENT_ELEMENT_ID}
       showingIndicator={showingIndicator}
-      isEditable={isEditable && !disableSelection}>
-      {pages?.map(p => (
+      isEditable={isEditable && !disableSelection}
+    >
+      {pages?.map((p) => (
         <StoryPage
           key={p.id}
           page={p}
@@ -112,7 +129,8 @@ const StoryContent: FC<Props> = ({
           onPropertyItemAdd={onPropertyItemAdd}
           onPropertyItemMove={onPropertyItemMove}
           onPropertyItemDelete={onPropertyItemDelete}
-          renderBlock={renderBlock}>
+          renderBlock={renderBlock}
+        >
           <PageGap height={pageGap} onClick={() => onPageSelect?.(p.id)} />
         </StoryPage>
       ))}
@@ -122,18 +140,19 @@ const StoryContent: FC<Props> = ({
 
 export default StoryContent;
 
-const PagesWrapper = styled("div")<{ showingIndicator?: boolean; isEditable?: boolean }>(
-  ({ showingIndicator, isEditable }) => ({
-    height: showingIndicator ? "calc(100% - 8px)" : "100%",
-    overflowY: "auto",
-    cursor: isEditable ? "pointer" : "default",
-    ["::-webkit-scrollbar"]: {
-      display: "none",
-    },
-    scrollbarWidth: "none",
-    msOverflowStyle: "none",
-  }),
-);
+const PagesWrapper = styled("div")<{
+  showingIndicator?: boolean;
+  isEditable?: boolean;
+}>(({ showingIndicator, isEditable }) => ({
+  height: showingIndicator ? "calc(100% - 8px)" : "100%",
+  overflowY: "auto",
+  cursor: isEditable ? "pointer" : "default",
+  ["::-webkit-scrollbar"]: {
+    display: "none",
+  },
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+}));
 
 const PageGap = styled("div")<{ height?: number }>(({ height }) => ({
   height: height ? `${height}px` : "70vh",
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts
index 315edc0a6..330faea66 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts
@@ -7,9 +7,19 @@ export const STORY_PANEL_CONTENT_ELEMENT_ID = "story-page-content";
 // Story Page
 export const DEFAULT_STORY_PAGE_DURATION = 2;
 export const DEFAULT_STORY_PAGE_GAP = 20;
-export const DEFAULT_STORY_PAGE_PADDING: Spacing = { top: 20, bottom: 20, left: 20, right: 20 };
+export const DEFAULT_STORY_PAGE_PADDING: Spacing = {
+  top: 20,
+  bottom: 20,
+  left: 20,
+  right: 20,
+};
 export const MIN_STORY_PAGE_GAP_IN_EDITOR = 4;
-export const MIN_STORY_PAGE_PADDING_IN_EDITOR: Spacing = { top: 4, bottom: 4, left: 4, right: 4 };
+export const MIN_STORY_PAGE_PADDING_IN_EDITOR: Spacing = {
+  top: 4,
+  bottom: 4,
+  left: 4,
+  right: 4,
+};
 
 // Story Block
 export const TITLE_BUILTIN_STORY_BLOCK_ID = "reearth/titleStoryBlock"; // pseudo storyblock. Uninstallable. Top of each page.
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/context.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/context.tsx
index 28d54e067..e865aa115 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/context.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/context.tsx
@@ -7,10 +7,11 @@ export type StoryPanelContext = {
 
 const PanelContext = createContext<StoryPanelContext | undefined>(undefined);
 
-export const PanelProvider: FC<PropsWithChildren<{ value: StoryPanelContext }>> = ({
-  children,
-  value,
-}) => <PanelContext.Provider value={value}>{children}</PanelContext.Provider>;
+export const PanelProvider: FC<
+  PropsWithChildren<{ value: StoryPanelContext }>
+> = ({ children, value }) => (
+  <PanelContext.Provider value={value}>{children}</PanelContext.Provider>
+);
 
 export const usePanelContext = (): StoryPanelContext => {
   const ctx = useContext(PanelContext);
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
index c935611c3..2fa1a68d6 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
@@ -1,18 +1,37 @@
-import { Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-
-import type { Story, StoryPage } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
+import type {
+  Story,
+  StoryPage,
+} from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
 import { useVisualizer } from "@reearth/core";
+import {
+  Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { MapRef } from "../../Crust/types";
 
-import { DEFAULT_STORY_PAGE_DURATION, STORY_PANEL_CONTENT_ELEMENT_ID } from "./constants";
+import {
+  DEFAULT_STORY_PAGE_DURATION,
+  STORY_PANEL_CONTENT_ELEMENT_ID,
+} from "./constants";
 import { formatISO8601 } from "./utils";
 
-export type { Story, StoryPage } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
+export type {
+  Story,
+  StoryPage,
+} from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
 
 export type StoryPanelRef = {
   currentPageId?: string;
-  handleCurrentPageChange: (pageId?: string, disableScrollIntoView?: boolean) => void;
+  handleCurrentPageChange: (
+    pageId?: string,
+    disableScrollIntoView?: boolean,
+  ) => void;
 };
 
 export default (
@@ -49,7 +68,7 @@ export default (
 
   const handlePageSettingsToggle = useCallback(() => {
     if (!selectedPageId && !isEditable) return;
-    setShowPageSettings(show => !show);
+    setShowPageSettings((show) => !show);
   }, [selectedPageId, isEditable]);
 
   const handlePageSelect = useCallback(
@@ -65,7 +84,8 @@ export default (
 
   const handleBlockSelect = useCallback(
     (blockId?: string) => {
-      if (!isEditable || blockId === selectedBlockId || disableSelection) return;
+      if (!isEditable || blockId === selectedBlockId || disableSelection)
+        return;
       if (selectedPageId) {
         setSelectedPageId(undefined);
       }
@@ -87,7 +107,8 @@ export default (
       return visualizer?.current?.timeline?.current?.commit({
         cmd: "SET_TIME",
         payload: {
-          start: visualizer?.current?.timeline?.current?.computedTimeline?.start,
+          start:
+            visualizer?.current?.timeline?.current?.computedTimeline?.start,
           current: time,
           stop: visualizer?.current?.timeline?.current?.computedTimeline?.stop,
         },
@@ -101,7 +122,9 @@ export default (
     (page: StoryPage) => {
       const timePointField = page.property?.timePoint;
       if (!timePointField?.timePoint?.value) return;
-      return onTimeChange?.(new Date(formatISO8601(timePointField?.timePoint?.value) ?? ""));
+      return onTimeChange?.(
+        new Date(formatISO8601(timePointField?.timePoint?.value) ?? ""),
+      );
     },
     [onTimeChange],
   );
@@ -134,36 +157,52 @@ export default (
       const destination = cameraAnimation?.cameraPosition;
       if (!destination) return;
 
-      const duration = cameraAnimation?.cameraDuration ?? DEFAULT_STORY_PAGE_DURATION;
+      const duration =
+        cameraAnimation?.cameraDuration ?? DEFAULT_STORY_PAGE_DURATION;
 
       visualizer.current?.engine.flyTo({ ...destination }, { duration });
     },
-    [currentPageId, selectedStory?.pages, onStoryPageChange, handlePageTime, visualizer],
+    [
+      currentPageId,
+      selectedStory?.pages,
+      onStoryPageChange,
+      handlePageTime,
+      visualizer,
+    ],
   );
 
   const pageInfo = useMemo(() => {
     const pages = selectedStory?.pages ?? [];
     if ((pages?.length ?? 0) < 2) return;
 
-    const currentIndex = pages.findIndex(p => p.id === currentPageId);
+    const currentIndex = pages.findIndex((p) => p.id === currentPageId);
     return {
       currentPage: currentIndex + 1,
-      pageTitles: pages.map(p => p.property?.title?.title),
+      pageTitles: pages.map((p) => p.property?.title?.title),
       maxPage: pages.length,
-      onPageChange: (pageIndex: number) => handleCurrentPageChange(pages[pageIndex - 1]?.id),
+      onPageChange: (pageIndex: number) =>
+        handleCurrentPageChange(pages[pageIndex - 1]?.id),
     };
   }, [selectedStory, currentPageId, handleCurrentPageChange]);
 
   const handleLayerReset = useCallback(
     (vizRef?: MapRef | null) => {
       if (!vizRef) return;
-      const currentLayerIds = vizRef.layers.layers()?.map(l => l.id);
+      const currentLayerIds = vizRef.layers.layers()?.map((l) => l.id);
 
       const currentPage = getPage(currentPageId, selectedStory?.pages);
       if (currentPage) {
         if (currentLayerIds) {
-          vizRef.layers.show(...currentLayerIds.filter(id => currentPage.layerIds?.includes(id)));
-          vizRef.layers.hide(...currentLayerIds.filter(id => !currentPage.layerIds?.includes(id)));
+          vizRef.layers.show(
+            ...currentLayerIds.filter((id) =>
+              currentPage.layerIds?.includes(id),
+            ),
+          );
+          vizRef.layers.hide(
+            ...currentLayerIds.filter(
+              (id) => !currentPage.layerIds?.includes(id),
+            ),
+          );
         }
       }
     },
@@ -184,7 +223,11 @@ export default (
       layers?.show(...(layerIds ?? []));
       const allLayers = layers?.layers() ?? [];
       // Hide the rest
-      layers?.hide(...(allLayers.map(({ id }) => id).filter(id => !layerIds?.includes(id)) ?? []));
+      layers?.hide(
+        ...(allLayers
+          .map(({ id }) => id)
+          .filter((id) => !layerIds?.includes(id)) ?? []),
+      );
     },
     [visualizer, layerOverride?.extensionId, handleLayerReset],
   );
@@ -201,7 +244,7 @@ export default (
   // On page change, update visible layers in the viz based on page's initial settings.
   useEffect(() => {
     const vizRef = visualizer?.current;
-    const currentLayerIds = vizRef?.layers.layers()?.map(l => l.id);
+    const currentLayerIds = vizRef?.layers.layers()?.map((l) => l.id);
     handleLayerReset(vizRef);
 
     return () => {
@@ -237,5 +280,5 @@ export default (
 const getPage = (id?: string, pages?: StoryPage[]) => {
   if (!pages?.length) return;
   if (!id) return pages[0]; // If no ID, set first page
-  return pages.find(p => p.id === id);
+  return pages.find((p) => p.id === id);
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx
index b0c24e353..687edc1bf 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx
@@ -1,11 +1,13 @@
-import { forwardRef, memo, ReactNode, Ref, RefObject, useMemo } from "react";
-import { createPortal } from "react-dom";
-
 import { BlockProvider } from "@reearth/beta/features/Visualizer/shared/contexts/blockContext";
 import { EditModeProvider } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
-import { BlockProps, InstallableBlock } from "@reearth/beta/features/Visualizer/shared/types";
+import {
+  BlockProps,
+  InstallableBlock,
+} from "@reearth/beta/features/Visualizer/shared/types";
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { forwardRef, memo, ReactNode, Ref, RefObject, useMemo } from "react";
+import { createPortal } from "react-dom";
 
 import { STORY_PANEL_WIDTH } from "./constants";
 import { PanelProvider, StoryPanelContext } from "./context";
@@ -33,7 +35,10 @@ export type StoryPanelProps = {
     index?: number | undefined,
   ) => Promise<void>;
   onStoryBlockMove?: (id: string, targetId: number, blockId: string) => void;
-  onStoryBlockDelete?: (pageId?: string | undefined, blockId?: string | undefined) => Promise<void>;
+  onStoryBlockDelete?: (
+    pageId?: string | undefined,
+    blockId?: string | undefined,
+  ) => Promise<void>;
   onPropertyValueUpdate?: (
     propertyId?: string,
     schemaItemId?: string,
@@ -42,7 +47,10 @@ export type StoryPanelProps = {
     vt?: ValueType,
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -105,7 +113,7 @@ export const StoryPanel = memo(
 
       const panelContext: StoryPanelContext = useMemo(
         () => ({
-          pageIds: selectedStory?.pages.map(p => p.id),
+          pageIds: selectedStory?.pages.map((p) => p.id),
           onJumpToPage: (pageIndex: number) => {
             const pageId = selectedStory?.pages[pageIndex].id;
             if (!pageId) return;
@@ -113,7 +121,9 @@ export const StoryPanel = memo(
             if (!element) return;
             setCurrentPageId(pageId);
             setLayerOverride(undefined);
-            element.scrollIntoView({ behavior: "instant" } as unknown as ScrollToOptions); // TODO: when typescript is updated to 5.1, remove this cast
+            element.scrollIntoView({
+              behavior: "instant",
+            } as unknown as ScrollToOptions); // TODO: when typescript is updated to 5.1, remove this cast
           },
         }),
         [selectedStory?.pages, setCurrentPageId, setLayerOverride],
@@ -186,9 +196,11 @@ export const StoryPanel = memo(
 
 export default StoryPanel;
 
-const PanelWrapper = styled("div")<{ bgColor?: string }>(({ bgColor, theme }) => ({
-  flex: `0 0 ${STORY_PANEL_WIDTH}px`,
-  background: bgColor,
-  width: `${STORY_PANEL_WIDTH}px`,
-  color: theme.content.weak,
-}));
+const PanelWrapper = styled("div")<{ bgColor?: string }>(
+  ({ bgColor, theme }) => ({
+    flex: `0 0 ${STORY_PANEL_WIDTH}px`,
+    background: bgColor,
+    width: `${STORY_PANEL_WIDTH}px`,
+    color: theme.content.weak,
+  }),
+);
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
index 3bc92ff48..7274e1221 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
@@ -3,18 +3,26 @@ import { ValueTypes, ValueType } from "@reearth/beta/utils/value";
 import type { Spacing } from "@reearth/core";
 import type { Item } from "@reearth/services/api/propertyApi/utils";
 
-export const getFieldValue = (items: Item[], fieldId: string, fieldGroup?: string) => {
-  const d = items.find(i => i.schemaGroup === (fieldGroup ?? "default")) ?? items[0];
+export const getFieldValue = (
+  items: Item[],
+  fieldId: string,
+  fieldGroup?: string,
+) => {
+  const d =
+    items.find((i) => i.schemaGroup === (fieldGroup ?? "default")) ?? items[0];
   const isList = d && "items" in d;
-  const schemaField = d?.schemaFields.find(sf => sf.id === fieldId);
+  const schemaField = d?.schemaFields.find((sf) => sf.id === fieldId);
   return !isList
-    ? d?.fields.find(f => f.id === schemaField?.id)?.value
-    : d.items.map(item => ({
+    ? d?.fields.find((f) => f.id === schemaField?.id)?.value
+    : d.items.map((item) => ({
         id: item.id,
-        ...item.fields.reduce((obj: { [id: string]: ValueTypes[ValueType] | undefined }, field) => {
-          obj[field.id] = field.value;
-          return obj;
-        }, {}),
+        ...item.fields.reduce(
+          (obj: Record<string, ValueTypes[ValueType] | undefined>, field) => {
+            obj[field.id] = field.value;
+            return obj;
+          },
+          {},
+        ),
       }));
 };
 
@@ -23,7 +31,10 @@ export const calculatePaddingValue = (
   value?: Spacing,
   editorMode?: boolean,
 ) => {
-  const calculateValue = (position: keyof Spacing, v?: number): { [key: string]: number } => {
+  const calculateValue = (
+    position: keyof Spacing,
+    v?: number,
+  ): Record<string, number> => {
     if (v === undefined) {
       return {
         [position]: editorMode ? defaultValue[position] : 0,
@@ -37,7 +48,7 @@ export const calculatePaddingValue = (
   return value
     ? Object.assign(
         {},
-        ...Object.keys(value).map(p =>
+        ...Object.keys(value).map((p) =>
           calculateValue(p as keyof Spacing, value[p as keyof Spacing]),
         ),
       )
@@ -75,7 +86,8 @@ export const formatDateForTimeline = (
 ) => {
   const localTimezoneOffset = new Date().getTimezoneOffset();
   const d = new Date(
-    time + (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000,
+    time +
+      (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000,
   );
 
   const year = d.getFullYear();
@@ -98,7 +110,8 @@ export const formatDateForSliderTimeline = (
 ) => {
   const localTimezoneOffset = new Date().getTimezoneOffset();
   const d = new Date(
-    time + (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000,
+    time +
+      (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000,
   );
 
   const month = MONTH_LABEL_LIST[d.getMonth()];
@@ -160,7 +173,11 @@ export const formatRangeDateAndTime = (data: string) => {
   };
 };
 
-export const convertPositionToTime = (e: MouseEvent, start: number, end: number) => {
+export const convertPositionToTime = (
+  e: MouseEvent,
+  start: number,
+  end: number,
+) => {
   const curTar = e.currentTarget as HTMLElement;
   const width = curTar.scrollWidth - 32;
   const rect = curTar.getBoundingClientRect();
@@ -188,7 +205,10 @@ export const formatISO8601 = (time: string) => {
   const splitZone = timezone.split(":");
   if (splitZone[0].length === 2) {
     return time
-      .replace(timezone, `${splitZone[0][0]}0${splitZone[0][1]}:${splitZone[1]}`)
+      .replace(
+        timezone,
+        `${splitZone[0][0]}0${splitZone[0][1]}:${splitZone[1]}`,
+      )
       .replace(" ", "");
   }
   return time.replace(" ", "");
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx
index 315accc69..b0d9ad930 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx
@@ -1,11 +1,10 @@
-import { useRef, useCallback, useState } from "react";
-import { usePopper } from "react-popper";
-
 import Flex from "@reearth/beta/components/Flex";
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled, mask } from "@reearth/services/theme";
 import spacingSizes from "@reearth/services/theme/reearthTheme/common/spacing";
+import { useRef, useCallback, useState } from "react";
+import { usePopper } from "react-popper";
 
 import type { Camera, FlyToDestination, Theme } from "../../types";
 
@@ -40,7 +39,10 @@ export type Props = {
   };
   align?: "end" | "start" | "centered";
   theme?: Theme;
-  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (
+    target: string | FlyToDestination,
+    options?: { duration?: number },
+  ) => void;
 };
 
 export default function MenuButton({
@@ -55,55 +57,74 @@ export default function MenuButton({
 
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
-  const { styles, attributes } = usePopper(referenceElement.current, popperElement.current, {
-    placement:
-      location?.area === "bottom"
-        ? location?.section === "left" || (location?.section === "center" && align !== "end")
-          ? "top-start"
-          : "top-end"
-        : location?.area === "middle"
-        ? location?.section === "left"
-          ? align === "end"
+  const { styles, attributes } = usePopper(
+    referenceElement.current,
+    popperElement.current,
+    {
+      placement:
+        location?.area === "bottom"
+          ? location?.section === "left" ||
+            (location?.section === "center" && align !== "end")
             ? "top-start"
-            : "bottom-start"
-          : align === "end"
-          ? "top-end"
-          : "bottom-end"
-        : location?.section === "right" || align === "end"
-        ? "bottom-end"
-        : "bottom-start",
-    modifiers: [
-      {
-        name: "eventListeners",
-        enabled: !visibleMenuButton,
-        options: {
-          scroll: false,
-          resize: false,
+            : "top-end"
+          : location?.area === "middle"
+            ? location?.section === "left"
+              ? align === "end"
+                ? "top-start"
+                : "bottom-start"
+              : align === "end"
+                ? "top-end"
+                : "bottom-end"
+            : location?.section === "right" || align === "end"
+              ? "bottom-end"
+              : "bottom-start",
+      modifiers: [
+        {
+          name: "eventListeners",
+          enabled: !visibleMenuButton,
+          options: {
+            scroll: false,
+            resize: false,
+          },
         },
-      },
-      {
-        name: "offset",
-        options: {
-          offset: [0, 2],
+        {
+          name: "offset",
+          options: {
+            offset: [0, 2],
+          },
         },
-      },
-    ],
-  });
+      ],
+    },
+  );
 
   const handleClick = useCallback(
     (b: Button | MenuItem) => () => {
-      const t = "buttonType" in b ? b.buttonType : "menuType" in b ? b.menuType : undefined;
+      const t =
+        "buttonType" in b
+          ? b.buttonType
+          : "menuType" in b
+            ? b.menuType
+            : undefined;
       if (t === "menu") {
         setVisibleMenuButton(!visibleMenuButton);
         return;
       } else if (t === "camera") {
         const camera =
-          "buttonCamera" in b ? b.buttonCamera : "menuCamera" in b ? b.menuCamera : undefined;
+          "buttonCamera" in b
+            ? b.buttonCamera
+            : "menuCamera" in b
+              ? b.menuCamera
+              : undefined;
         if (camera) {
           onFlyTo?.(camera, { duration: 2 });
         }
       } else {
-        let link = "buttonLink" in b ? b.buttonLink : "menuLink" in b ? b.menuLink : undefined;
+        let link =
+          "buttonLink" in b
+            ? b.buttonLink
+            : "menuLink" in b
+              ? b.menuLink
+              : undefined;
         if (link) {
           const splitLink = link?.split("/");
           if (splitLink?.[0] !== "http:" && splitLink?.[0] !== "https:") {
@@ -123,32 +144,41 @@ export default function MenuButton({
         publishedTheme={theme}
         button={b}
         onClick={b && handleClick(b)}
-        ref={referenceElement}>
-        {(b?.buttonStyle === "icon" || b?.buttonStyle === "texticon") && b?.buttonIcon && (
-          <img src={b?.buttonIcon} width={20} height={20} />
-        )}
+        ref={referenceElement}
+      >
+        {(b?.buttonStyle === "icon" || b?.buttonStyle === "texticon") &&
+          b?.buttonIcon && <img src={b?.buttonIcon} width={20} height={20} />}
         {b?.buttonStyle !== "icon" && (
           <Text
             size="footnote"
             customColor
             otherProperties={{
-              marginLeft: b?.buttonIcon && b?.buttonStyle === "texticon" ? "5px" : undefined,
-            }}>
+              marginLeft:
+                b?.buttonIcon && b?.buttonStyle === "texticon"
+                  ? "5px"
+                  : undefined,
+            }}
+          >
             {b?.buttonTitle}
           </Text>
         )}
       </Button>
-      <MenuWrapper ref={popperElement} style={{ ...styles.popper }} {...attributes.popper}>
+      <MenuWrapper
+        ref={popperElement}
+        style={{ ...styles.popper }}
+        {...attributes.popper}
+      >
         {visibleMenuButton && (
           <MenuInnerWrapper publishedTheme={theme} button={b}>
-            {menuItems?.map(i => (
+            {menuItems?.map((i) => (
               <MenuItem
                 align="center"
                 publishedTheme={theme}
                 key={i.id}
                 item={i}
                 button={b}
-                onClick={handleClick(i)}>
+                onClick={handleClick(i)}
+              >
                 <Flex align="center">
                   {i.menuIcon && <Icon icon={i.menuIcon} size={20} />}
                   <Text
@@ -156,7 +186,8 @@ export default function MenuButton({
                     customColor
                     otherProperties={{
                       marginLeft: i.menuIcon ? "5px" : undefined,
-                    }}>
+                    }}
+                  >
                     {i.menuTitle}
                   </Text>
                 </Flex>
@@ -173,7 +204,8 @@ const Wrapper = styled.div<{ button?: Button; publishedTheme?: Theme }>`
   border-radius: ${spacingSizes["smallest"]}px;
   &,
   > div {
-    background-color: ${({ button, publishedTheme }) => button?.buttonBgcolor || publishedTheme};
+    background-color: ${({ button, publishedTheme }) =>
+      button?.buttonBgcolor || publishedTheme};
   }
 `;
 
@@ -185,7 +217,8 @@ const Button = styled.div<{ button?: Button; publishedTheme?: Theme }>`
   padding: 0 10px;
   line-height: 35px;
   box-sizing: border-box;
-  color: ${({ button, publishedTheme }) => button?.buttonColor || publishedTheme?.mainText};
+  color: ${({ button, publishedTheme }) =>
+    button?.buttonColor || publishedTheme?.mainText};
   cursor: pointer;
   align-items: center;
   user-select: none;
@@ -204,10 +237,14 @@ const MenuWrapper = styled.div`
   -webkit-overflow-scrolling: touch;
 `;
 
-const MenuInnerWrapper = styled.div<{ button?: Button; publishedTheme?: Theme }>`
+const MenuInnerWrapper = styled.div<{
+  button?: Button;
+  publishedTheme?: Theme;
+}>`
   min-width: 35px;
   width: 100%;
-  color: ${({ button, publishedTheme }) => button?.buttonColor || publishedTheme?.mainText};
+  color: ${({ button, publishedTheme }) =>
+    button?.buttonColor || publishedTheme?.mainText};
   white-space: nowrap;
 `;
 
@@ -218,10 +255,13 @@ const MenuItem = styled(Flex)<{
 }>`
   min-height: ${({ item }) => (item?.menuType === "border" ? null : "25px")};
   border-radius: ${({ item }) => (item?.menuType === "border" ? null : "3px")};
-  padding: ${({ item }) => (item?.menuType === "border" ? "0 10px" : "2px 10px")};
+  padding: ${({ item }) =>
+    item?.menuType === "border" ? "0 10px" : "2px 10px"};
   cursor: ${({ item }) => (item?.menuType === "border" ? null : "pointer")};
   background: ${({ publishedTheme, item, button }) =>
-    item?.menuType === "border" ? mask(button?.buttonBgcolor) || publishedTheme?.mask : null};
+    item?.menuType === "border"
+      ? mask(button?.buttonBgcolor) || publishedTheme?.mask
+      : null};
   border-bottom: ${({ item, publishedTheme, button }) =>
     item?.menuType === "border"
       ? `1px solid ${button?.buttonColor || publishedTheme?.weakText}`
@@ -230,6 +270,8 @@ const MenuItem = styled(Flex)<{
 
   &:hover {
     background: ${({ publishedTheme, item, button }) =>
-      item?.menuType === "border" ? null : mask(button?.buttonBgcolor) || publishedTheme?.mask};
+      item?.menuType === "border"
+        ? null
+        : mask(button?.buttonBgcolor) || publishedTheme?.mask};
   }
 `;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx
index 789a44b48..7d8b7d18c 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx
@@ -10,7 +10,7 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-export const Default: Story<Props> = args => <Button {...args} />;
+export const Default: Story<Props> = (args) => <Button {...args} />;
 
 Default.args = {
   widget: {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx
index b7b7c483c..9a415f8fb 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx
@@ -2,7 +2,10 @@ import { styled } from "@reearth/services/theme";
 
 import type { ComponentProps as WidgetProps } from "../..";
 
-import MenuButton, { Button as ButtonType, MenuItem as MenuItemType } from "./MenuButton";
+import MenuButton, {
+  Button as ButtonType,
+  MenuItem as MenuItemType,
+} from "./MenuButton";
 
 export type Props = WidgetProps<Property>;
 export type Button = ButtonType;
@@ -12,7 +15,11 @@ export type Property = {
   menu?: MenuItem[];
 };
 
-const Menu = ({ widget, theme, context: { onFlyTo } = {} }: Props): JSX.Element | null => {
+const Menu = ({
+  widget,
+  theme,
+  context: { onFlyTo } = {},
+}: Props): JSX.Element | null => {
   const { default: button, menu: menuItems } = widget.property ?? {};
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts
index a262d5bcc..ab94ad49e 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts
@@ -1,4 +1,10 @@
-import { MouseEventHandler, useCallback, useEffect, useRef, useState } from "react";
+import {
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import { calculateDegreeOfCompass } from "./utils";
 
@@ -37,34 +43,35 @@ export const useNavigator = ({
   const onStartOrbitRef = useReferredValue(onStartOrbit);
   const onEndOrbitRef = useReferredValue(onEndOrbit);
 
-  const handleOnMouseDownCompass: MouseEventHandler<HTMLDivElement> = useCallback(
-    e => {
-      const compass = compassRef.current;
-      if (!compass) {
-        return;
-      }
-      const rect = compass.getBoundingClientRect();
-      const degree = calculateDegreeOfCompass(
-        {
-          x: rect.x,
-          y: rect.y,
-          height: compass.clientHeight,
-          width: compass.clientWidth,
-        },
-        { x: e.clientX, y: e.clientY },
-      );
-      isRotatingRef.current = true;
-      setCompassDegree(degree);
-      onRotateRef.current?.(degree);
-    },
-    [onRotateRef],
-  );
+  const handleOnMouseDownCompass: MouseEventHandler<HTMLDivElement> =
+    useCallback(
+      (e) => {
+        const compass = compassRef.current;
+        if (!compass) {
+          return;
+        }
+        const rect = compass.getBoundingClientRect();
+        const degree = calculateDegreeOfCompass(
+          {
+            x: rect.x,
+            y: rect.y,
+            height: compass.clientHeight,
+            width: compass.clientWidth,
+          },
+          { x: e.clientX, y: e.clientY },
+        );
+        isRotatingRef.current = true;
+        setCompassDegree(degree);
+        onRotateRef.current?.(degree);
+      },
+      [onRotateRef],
+    );
 
   const rotateCompassWhileMovingAngle = useCallback(() => {
     if (!isMovingAngleRef.current) {
       return;
     }
-    setCompassDegree(prevDegree => {
+    setCompassDegree((prevDegree) => {
       const next = shouldIncrementCompassDegreeOnMovingAngle.current
         ? prevDegree + 1
         : prevDegree - 1;
@@ -74,7 +81,7 @@ export const useNavigator = ({
   }, [isMovingAngleRef]);
 
   const handleOnMouseDownAngle: MouseEventHandler<HTMLDivElement> = useCallback(
-    e => {
+    (e) => {
       const compass = compassRef.current;
       if (!compass) {
         return;
@@ -97,7 +104,12 @@ export const useNavigator = ({
 
       rotateCompassWhileMovingAngle();
     },
-    [rotateCompassWhileMovingAngle, onMoveOrbitRef, isMovingAngleRef, onStartOrbitRef],
+    [
+      rotateCompassWhileMovingAngle,
+      onMoveOrbitRef,
+      isMovingAngleRef,
+      onStartOrbitRef,
+    ],
   );
 
   useEffect(() => {
@@ -138,7 +150,8 @@ export const useNavigator = ({
       setCompassFocusDegree(degree);
       onMoveOrbitRef.current?.(degree);
 
-      shouldIncrementCompassDegreeOnMovingAngle.current = 0 <= degree && degree <= 180;
+      shouldIncrementCompassDegreeOnMovingAngle.current =
+        0 <= degree && degree <= 180;
     };
     const handleOnMouseUp = () => {
       isRotatingRef.current = false;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx
index 754b5a41e..4d9842d90 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx
@@ -7,4 +7,6 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-export const Normal: Story<Props> = ({ ...args }) => <Navigator {...args} degree={0} />;
+export const Normal: Story<Props> = ({ ...args }) => (
+  <Navigator {...args} degree={0} />
+);
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx
index ec389f1e3..4003a24ef 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx
@@ -1,6 +1,5 @@
-import { expect, test, vitest } from "vitest";
-
 import { fireEvent, render, screen } from "@reearth/test/utils";
+import { expect, test, vitest } from "vitest";
 
 import Navigator from ".";
 
@@ -78,7 +77,6 @@ test("it should orbit by mouse operation", async () => {
   const compassFocus = screen.queryByTestId("compassFocus");
   expect(compassFocus).toBeInTheDocument();
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   expect(compassFocus).toHaveStyle({ transform: "rotate(90deg)" });
   expect(onStartOrbitMock).toBeCalled();
   expect(onMoveOrbitMock).toBeCalledWith(90);
@@ -86,7 +84,6 @@ test("it should orbit by mouse operation", async () => {
   onMoveOrbitMock.mockReset();
 
   fireEvent.mouseMove(window);
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   expect(compassFocus).toHaveStyle({ transform: "rotate(90deg)" });
   expect(onMoveOrbitMock).toBeCalledWith(90);
 
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx
index f067fd9fc..54baed9cc 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx
@@ -1,8 +1,7 @@
-import { memo } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { memo } from "react";
 
 import type { Theme } from "../../../types";
 
@@ -66,7 +65,10 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
     <Container>
       <CompassContainer>
         <Compass ref={compassRef}>
-          <CompassIcon onMouseDown={handleOnMouseDownCompass} publishedTheme={theme}>
+          <CompassIcon
+            onMouseDown={handleOnMouseDownCompass}
+            publishedTheme={theme}
+          >
             <Icon
               icon="compass"
               aria-label={t("aria-label-compass")}
@@ -79,12 +81,20 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
               style={{
                 transform: `rotate(${compassFocusDegree}deg)`,
               }}
-              data-testid="compassFocus">
+              data-testid="compassFocus"
+            >
               <Icon icon="compassFocus" color={theme?.select} size={30} />
             </CompassFocusIcon>
           )}
-          <AngleIcon onMouseDown={handleOnMouseDownAngle} publishedTheme={theme}>
-            <Icon icon="navigatorAngle" aria-label={t("aria-label-adjust-angle")} size={32} />
+          <AngleIcon
+            onMouseDown={handleOnMouseDownAngle}
+            publishedTheme={theme}
+          >
+            <Icon
+              icon="navigatorAngle"
+              aria-label={t("aria-label-adjust-angle")}
+              size={32}
+            />
           </AngleIcon>
         </Compass>
         {onClickHelp && <Help onClick={onClickHelp}>?</Help>}
@@ -94,7 +104,11 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
           <Icon icon="plus" aria-label={t("aria-label-zoom-in")} size={16} />
         </ToolIconButton>
         <ToolIconButton onClick={onRestoreRotate} publishedTheme={theme}>
-          <Icon icon="house" aria-label={t("aria-label-Go-to-the-home-position")} size={16} />
+          <Icon
+            icon="house"
+            aria-label={t("aria-label-Go-to-the-home-position")}
+            size={16}
+          />
         </ToolIconButton>
         <ToolIconButton onClick={onZoomOut} publishedTheme={theme}>
           <Icon icon="minus" aria-label={t("aria-label-zoom-out")} size={16} />
@@ -142,9 +156,11 @@ const CompassIcon = styled.div<{ publishedTheme?: Theme }>`
   left: 0;
   width: 64px;
   height: 64px;
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   & path {
-    fill: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+    fill: ${({ theme, publishedTheme }) =>
+      publishedTheme?.mainText || theme.content.main};
   }
   & circle {
     stroke: ${({ theme, publishedTheme }) =>
@@ -163,10 +179,12 @@ const CompassFocusIcon = styled.div`
 
 const AngleIcon = styled.div<{ publishedTheme?: Theme }>`
   & circle {
-    fill: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.bg[0]};
+    fill: ${({ theme, publishedTheme }) =>
+      publishedTheme?.background || theme.bg[0]};
   }
   & g {
-    stroke: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+    stroke: ${({ theme, publishedTheme }) =>
+      publishedTheme?.mainText || theme.content.main};
   }
   display: inline-block;
   height: 32px;
@@ -177,13 +195,15 @@ const Tool = styled.div<{ publishedTheme?: Theme }>`
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.bg[0]};
+  background: ${({ theme, publishedTheme }) =>
+    publishedTheme?.background || theme.bg[0]};
   border-radius: 16px;
   margin-top: 8px;
 `;
 
 const ToolIconButton = styled.button<{ publishedTheme?: Theme }>`
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   height: 32px;
   width: 32px;
   display: grid;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts
index 14585809b..4e606a965 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts
@@ -10,7 +10,12 @@ const compassPosition = {
 };
 
 test("it should be 0˚ when x axis is half of width and y axis is 0", () => {
-  expect(calculateDegreeOfCompass(compassPosition, { x: compassPosition.width / 2, y: 0 })).toBe(0);
+  expect(
+    calculateDegreeOfCompass(compassPosition, {
+      x: compassPosition.width / 2,
+      y: 0,
+    }),
+  ).toBe(0);
 });
 
 test("it should be 90˚ when x axis equals to width and y axis half of height", () => {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts
index 95b3f1603..8f0fde538 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts
@@ -21,7 +21,10 @@ export default function ({
   onZoomOut?: (amount: number) => void;
   onCameraOrbit?: (orbit: number) => void;
   onCameraRotateRight?: (radian: number) => void;
-  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (
+    target: string | FlyToDestination,
+    options?: { duration?: number },
+  ) => void;
 }) {
   const [degree, setDegree] = useState(0);
   const [isHelpOpened, setIsHelpOpened] = useState(false);
@@ -50,7 +53,7 @@ export default function ({
     }
   }, [initialCamera, onFlyTo]);
   const handleOnClickHelp = useCallback(() => {
-    setIsHelpOpened(prev => !prev);
+    setIsHelpOpened((prev) => !prev);
   }, []);
 
   const handleOnZoomIn = useCallback(() => {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx
index 6dc4ed3f4..d53e000fb 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx
@@ -9,7 +9,7 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-const Template: Story<Props> = args => <Component {...args} />;
+const Template: Story<Props> = (args) => <Component {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
index a1972db6c..6a0399be4 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
@@ -1,9 +1,13 @@
-import { expect, test } from "vitest";
-
 import { truncMinutes } from "@reearth/beta/utils/time";
 import { render, screen } from "@reearth/test/utils";
+import { expect, test } from "vitest";
 
-import { EPOCH_SEC, GAP_HORIZONTAL, HOURS_SECS, SCALE_INTERVAL } from "./constants";
+import {
+  EPOCH_SEC,
+  GAP_HORIZONTAL,
+  HOURS_SECS,
+  SCALE_INTERVAL,
+} from "./constants";
 import ScaleList from "./ScaleList";
 
 const START_DATE = new Date("2022-07-03T12:21:21.100");
@@ -44,7 +48,7 @@ test("it should render memory and date label", () => {
     "Jul 04 2022 10:00:00.00",
   ];
 
-  expectedStrongScaleLabelList.forEach(label => {
+  expectedStrongScaleLabelList.forEach((label) => {
     expect(screen.getByText(label)).toBeInTheDocument();
   });
 });
@@ -81,7 +85,7 @@ test("it should render memory and date label when scaleInterval is changed", ()
     "Jul 04 2022 09:00:00.00",
   ];
 
-  expectedStrongScaleLabelList.forEach(label => {
+  expectedStrongScaleLabelList.forEach((label) => {
     expect(screen.getByText(label)).toBeInTheDocument();
   });
 });
@@ -133,7 +137,7 @@ test("it should render memory and date label when strongScaleMinutes is changed"
     "Jul 04 2022 09:00:00.00",
   ];
 
-  expectedStrongScaleLabelList.forEach(label => {
+  expectedStrongScaleLabelList.forEach((label) => {
     expect(screen.getByText(label)).toBeInTheDocument();
   });
 });
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
index 1166f5b86..34efb19a1 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
@@ -1,9 +1,13 @@
-import { memo } from "react";
-
 import Text from "@reearth/beta/components/Text";
 import { PublishTheme, styled } from "@reearth/services/theme";
+import { memo } from "react";
 
-import { EPOCH_SEC, STRONG_SCALE_WIDTH, NORMAL_SCALE_WIDTH, PADDING_HORIZONTAL } from "./constants";
+import {
+  EPOCH_SEC,
+  STRONG_SCALE_WIDTH,
+  NORMAL_SCALE_WIDTH,
+  PADDING_HORIZONTAL,
+} from "./constants";
 import { formatDateForTimeline } from "./utils";
 
 type Props = {
@@ -11,7 +15,11 @@ type Props = {
   gapHorizontal: number;
 } & ScaleListInnerProps;
 
-const ScaleList: React.FC<Props> = ({ publishedTheme, gapHorizontal, ...props }) => {
+const ScaleList: React.FC<Props> = ({
+  publishedTheme,
+  gapHorizontal,
+  ...props
+}) => {
   return (
     <ScaleContainer style={{ gap: `0 ${gapHorizontal}px` }}>
       <ScaleListInner publishedTheme={publishedTheme} {...props} />
@@ -28,50 +36,59 @@ type ScaleListInnerProps = {
   strongScaleMinutes: number;
 };
 
-const ScaleListInner: React.FC<ScaleListInnerProps> = memo(function ScaleListPresenter({
-  publishedTheme,
-  start,
-  scaleCount,
-  hoursCount,
-  scaleInterval,
-  strongScaleMinutes,
-}) {
-  const lastStrongScaleIdx = scaleCount - strongScaleMinutes;
-  return (
-    <>
-      {[...Array(scaleCount + 1)].map((_, idx) => {
-        const isHour = idx % hoursCount === 0;
-        const isStrongScale = idx % strongScaleMinutes === 0;
-        if (isStrongScale && idx < lastStrongScaleIdx) {
-          const label = formatDateForTimeline(start.getTime() + idx * EPOCH_SEC * scaleInterval, {
-            detail: true,
-          });
+const ScaleListInner: React.FC<ScaleListInnerProps> = memo(
+  function ScaleListPresenter({
+    publishedTheme,
+    start,
+    scaleCount,
+    hoursCount,
+    scaleInterval,
+    strongScaleMinutes,
+  }) {
+    const lastStrongScaleIdx = scaleCount - strongScaleMinutes;
+    return (
+      <>
+        {[...Array(scaleCount + 1)].map((_, idx) => {
+          const isHour = idx % hoursCount === 0;
+          const isStrongScale = idx % strongScaleMinutes === 0;
+          if (isStrongScale && idx < lastStrongScaleIdx) {
+            const label = formatDateForTimeline(
+              start.getTime() + idx * EPOCH_SEC * scaleInterval,
+              {
+                detail: true,
+              },
+            );
 
+            return (
+              <LabeledScale key={idx}>
+                <ScaleLabel
+                  size="footnote"
+                  customColor
+                  publishedTheme={publishedTheme}
+                >
+                  {label}
+                </ScaleLabel>
+                <Scale
+                  isHour={isHour}
+                  isStrongScale={isStrongScale}
+                  publishedTheme={publishedTheme}
+                />
+              </LabeledScale>
+            );
+          }
           return (
-            <LabeledScale key={idx}>
-              <ScaleLabel size="footnote" customColor publishedTheme={publishedTheme}>
-                {label}
-              </ScaleLabel>
-              <Scale
-                isHour={isHour}
-                isStrongScale={isStrongScale}
-                publishedTheme={publishedTheme}
-              />
-            </LabeledScale>
+            <Scale
+              key={idx}
+              isHour={isHour}
+              isStrongScale={isStrongScale}
+              publishedTheme={publishedTheme}
+            />
           );
-        }
-        return (
-          <Scale
-            key={idx}
-            isHour={isHour}
-            isStrongScale={isStrongScale}
-            publishedTheme={publishedTheme}
-          />
-        );
-      })}
-    </>
-  );
-});
+        })}
+      </>
+    );
+  },
+);
 
 export type StyledColorProps = {
   publishedTheme: PublishTheme | undefined;
@@ -104,7 +121,8 @@ const ScaleLabel = styled(Text)<StyledColorProps>`
   position: absolute;
   top: 0;
   left: 0;
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   white-space: nowrap;
 `;
 
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts
index 31126b8eb..d47567cd6 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts
@@ -1,3 +1,4 @@
+import { truncMinutes } from "@reearth/beta/utils/time";
 import React, {
   ChangeEventHandler,
   MouseEvent,
@@ -11,8 +12,6 @@ import React, {
   WheelEventHandler,
 } from "react";
 
-import { truncMinutes } from "@reearth/beta/utils/time";
-
 import {
   BORDER_WIDTH,
   DAY_SECS,
@@ -67,7 +66,7 @@ const useTimelineInteraction = ({
     setIsMouseDown(false);
   }, []);
   const handleOnMouseMove: MouseEventHandler = useCallback(
-    e => {
+    (e) => {
       if (!isMouseDown || !onDrag || !e.target) {
         return;
       }
@@ -99,7 +98,7 @@ const useTimelineInteraction = ({
   }, [handleOnMouseUp]);
 
   const handleOnClick: MouseEventHandler = useCallback(
-    e => {
+    (e) => {
       if (!onClick) return;
       onClick(convertPositionToTime(e, { start, end }));
     },
@@ -107,12 +106,14 @@ const useTimelineInteraction = ({
   );
 
   const handleOnWheel: WheelEventHandler = useCallback(
-    e => {
+    (e) => {
       const { deltaX, deltaY } = e;
       const isHorizontal = Math.abs(deltaX) > 0 || Math.abs(deltaX) < 0;
       if (isHorizontal) return;
 
-      setZoom(() => Math.min(Math.max(1, zoom + deltaY * -0.01), MAX_ZOOM_RATIO));
+      setZoom(() =>
+        Math.min(Math.max(1, zoom + deltaY * -0.01), MAX_ZOOM_RATIO),
+      );
     },
     [zoom, setZoom],
   );
@@ -121,7 +122,7 @@ const useTimelineInteraction = ({
     const elm = scaleElement.current;
     if (!elm) return;
 
-    const obs = new ResizeObserver(m => {
+    const obs = new ResizeObserver((m) => {
       const target = m[0].target;
       setScaleWidth(target.clientWidth);
     });
@@ -157,7 +158,7 @@ const useTimelinePlayer = ({
   const [isPlayingReversed, setIsPlayingReversed] = useState(false);
   const syncCurrentTimeRef = useRef(currentTime);
   const handleOnSpeedChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    e => {
+    (e) => {
       onSpeedChange?.(parseInt(e.currentTarget.value, 10));
     },
     [onSpeedChange],
@@ -167,7 +168,7 @@ const useTimelinePlayer = ({
       setIsPlayingReversed(false);
       onPlayReversed?.(false);
     }
-    setIsPlaying(p => !p);
+    setIsPlaying((p) => !p);
     onPlay?.(!isPlaying);
   }, [isPlayingReversed, onPlay, isPlaying, onPlayReversed]);
   const toggleIsPlayingReversed = useCallback(() => {
@@ -175,7 +176,7 @@ const useTimelinePlayer = ({
       setIsPlaying(false);
       onPlay?.(false);
     }
-    setIsPlayingReversed(p => !p);
+    setIsPlayingReversed((p) => !p);
     onPlayReversed?.(!isPlayingReversed);
   }, [isPlaying, isPlayingReversed, onPlay, onPlayReversed]);
   const formattedCurrentTime = useMemo(() => {
@@ -254,7 +255,9 @@ export const useTimeline = ({
     const range = getRange(_range);
     if (process.env.NODE_ENV !== "production") {
       if (range.start > range.end) {
-        throw new Error("Out of range error. `range.start` should be less than `range.end`");
+        throw new Error(
+          "Out of range error. `range.start` should be less than `range.end`",
+        );
       }
     }
     return {
@@ -277,7 +280,8 @@ export const useTimeline = ({
     strongScaleMinutes,
     gap: gapHorizontal,
   } = useMemo(
-    () => calcScaleInterval(epochDiff, zoom, { gap: zoomedGap, width: scaleWidth }),
+    () =>
+      calcScaleInterval(epochDiff, zoom, { gap: zoomedGap, width: scaleWidth }),
     [epochDiff, zoom, scaleWidth, zoomedGap],
   );
 
@@ -286,14 +290,24 @@ export const useTimeline = ({
 
   // Convert scale count to pixel.
   const currentPosition = useMemo(() => {
-    const diff = Math.min((currentTime - start) / EPOCH_SEC / scaleInterval, scaleCount);
+    const diff = Math.min(
+      (currentTime - start) / EPOCH_SEC / scaleInterval,
+      scaleCount,
+    );
     const strongScaleCount = diff / strongScaleMinutes - 1;
     return Math.max(
       (diff - strongScaleCount) * (NORMAL_SCALE_WIDTH + gapHorizontal) +
         strongScaleCount * (STRONG_SCALE_WIDTH + gapHorizontal),
       0,
     );
-  }, [currentTime, start, scaleCount, gapHorizontal, scaleInterval, strongScaleMinutes]);
+  }, [
+    currentTime,
+    start,
+    scaleCount,
+    gapHorizontal,
+    scaleInterval,
+    strongScaleMinutes,
+  ]);
 
   const events = useTimelineInteraction({
     range,
@@ -304,7 +318,12 @@ export const useTimeline = ({
     scaleElement,
     setScaleWidth,
   });
-  const player = useTimelinePlayer({ currentTime, onPlay, onPlayReversed, onSpeedChange });
+  const player = useTimelinePlayer({
+    currentTime,
+    onPlay,
+    onPlayReversed,
+    onSpeedChange,
+  });
 
   return {
     startDate,
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
index 60e035420..7ed8bb155 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
@@ -1,8 +1,7 @@
+import { render, screen, fireEvent } from "@reearth/test/utils";
 import { useState } from "react";
 import { expect, test, vi, vitest } from "vitest";
 
-import { render, screen, fireEvent } from "@reearth/test/utils";
-
 import { PADDING_HORIZONTAL, BORDER_WIDTH, GAP_HORIZONTAL } from "./constants";
 
 import Timeline from ".";
@@ -75,7 +74,11 @@ test("it should get time from mouse moved position", () => {
 
   // Check initial position
   expect(
-    Math.abs(Math.trunc(parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10))),
+    Math.abs(
+      Math.trunc(
+        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10),
+      ),
+    ),
   ).toBe(0);
 
   // It should not move
@@ -83,7 +86,11 @@ test("it should get time from mouse moved position", () => {
     clientX,
   });
   expect(
-    Math.abs(Math.trunc(parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10))),
+    Math.abs(
+      Math.trunc(
+        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10),
+      ),
+    ),
   ).toBe(0);
 
   // It should move
@@ -110,7 +117,10 @@ test("it should get correct strongScaleHours from amount of scroll", () => {
     deltaY: -50,
   });
   expect(
-    parseInt(slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "", 10),
+    parseInt(
+      slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "",
+      10,
+    ),
   ).toBe(GAP_HORIZONTAL * 1.5);
 
   // Reset gap and increase memory.
@@ -118,14 +128,19 @@ test("it should get correct strongScaleHours from amount of scroll", () => {
     deltaY: -50,
   });
   expect(
-    parseInt(slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "", 10),
+    parseInt(
+      slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "",
+      10,
+    ),
   ).toBe(GAP_HORIZONTAL);
 });
 
 test("it should invoke onPlay or onPlayReversed when play button is clicked", async () => {
   const mockOnPlay = vitest.fn();
   const mockOnPlayReversed = vitest.fn();
-  render(<TimelineWrapper onPlay={mockOnPlay} onPlayReversed={mockOnPlayReversed} />);
+  render(
+    <TimelineWrapper onPlay={mockOnPlay} onPlayReversed={mockOnPlayReversed} />,
+  );
 
   // TODO: get element by label text
   // Click play button
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx
index 5ea6981f3..9c8d83815 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx
@@ -1,8 +1,7 @@
-import { memo } from "react";
-
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
 import { styled, PublishTheme } from "@reearth/services/theme";
+import { memo } from "react";
 
 import { BORDER_WIDTH, PADDING_HORIZONTAL, KNOB_SIZE } from "./constants";
 import { useTimeline } from "./hooks";
@@ -89,7 +88,8 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
           <PlayButton
             publishedTheme={theme}
             isPlaying={isPlayingReversed}
-            onClick={toggleIsPlayingReversed}>
+            onClick={toggleIsPlayingReversed}
+          >
             <Icon icon="playLeft" size={16} />
           </PlayButton>
         </li>
@@ -98,13 +98,18 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
             isRight
             publishedTheme={theme}
             isPlaying={isPlaying}
-            onClick={toggleIsPlaying}>
+            onClick={toggleIsPlaying}
+          >
             <Icon icon="playRight" size={16} />
           </PlayButton>
         </li>
         <li>
           <InputRangeLabel>
-            <InputRangeLabelText size="footnote" customColor publishedTheme={theme}>
+            <InputRangeLabelText
+              size="footnote"
+              customColor
+              publishedTheme={theme}
+            >
               X{speed}
             </InputRangeLabelText>
             <InputRange
@@ -135,7 +140,8 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
         {...events}
         ref={scaleElement}
         shouldScroll={shouldScroll}
-        publishedTheme={theme}>
+        publishedTheme={theme}
+      >
         <ScaleList
           start={startDate}
           scaleCount={scaleCount}
@@ -150,7 +156,8 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
           publishedTheme={theme}
           style={{
             left: currentPosition + PADDING_HORIZONTAL - KNOB_SIZE / 2,
-          }}>
+          }}
+        >
           <Icon icon="ellipse" size={KNOB_SIZE} />
         </IconWrapper>
       </ScaleBox>
@@ -163,7 +170,8 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
 });
 
 const Container = styled.div<StyledColorProps>`
-  background: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.bg[0]};
+  background: ${({ theme, publishedTheme }) =>
+    publishedTheme?.background || theme.bg[0]};
   width: 100%;
   height: 40px;
   display: flex;
@@ -175,14 +183,18 @@ const Container = styled.div<StyledColorProps>`
 `;
 
 const OpenButton = styled.button<StyledColorProps>`
-  background: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.bg[0]};
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  background: ${({ theme, publishedTheme }) =>
+    publishedTheme?.background || theme.bg[0]};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   padding: 8px 12px;
 `;
 
 const CloseButton = styled.button<StyledColorProps>`
-  background: ${({ theme, publishedTheme }) => publishedTheme?.select || theme.select.main};
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  background: ${({ theme, publishedTheme }) =>
+    publishedTheme?.select || theme.select.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -203,24 +215,31 @@ const ToolBox = styled.ul`
   }
 `;
 
-const PlayButton = styled.button<{ isRight?: boolean; isPlaying?: boolean } & StyledColorProps>`
+const PlayButton = styled.button<
+  { isRight?: boolean; isPlaying?: boolean } & StyledColorProps
+>`
   border-radius: 50%;
   border-width: 1px;
   border-style: solid;
   border-color: ${({ theme, isPlaying, publishedTheme }) =>
-    isPlaying ? publishedTheme?.select : publishedTheme?.mainText || theme.content.main};
+    isPlaying
+      ? publishedTheme?.select
+      : publishedTheme?.mainText || theme.content.main};
   width: 22px;
   height: 22px;
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: ${({ isRight, theme }) => (isRight ? `${theme.spacing.small}px` : 0)};
+  margin-left: ${({ isRight, theme }) =>
+    isRight ? `${theme.spacing.small}px` : 0};
   background: ${({ isPlaying, publishedTheme, theme }) =>
     isPlaying ? publishedTheme?.select || theme.select.main : "transparent"};
 
   @media (max-width: 768px) {
-    margin-left: ${({ isRight, theme }) => (isRight ? `${theme.spacing.smallest}px` : 0)};
+    margin-left: ${({ isRight, theme }) =>
+      isRight ? `${theme.spacing.smallest}px` : 0};
   }
 `;
 
@@ -232,7 +251,8 @@ const InputRangeLabel = styled.label`
 `;
 
 const InputRangeLabelText = styled(Text)<StyledColorProps>`
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   /* space for preventing layout shift by increasing speed label. */
   width: 37px;
   text-align: right;
@@ -247,7 +267,8 @@ const InputRange = styled.input<StyledColorProps>`
   border: none;
   ::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background: ${({ theme, publishedTheme }) => publishedTheme?.select || theme.select.main};
+    background: ${({ theme, publishedTheme }) =>
+      publishedTheme?.select || theme.select.main};
     height: 10px;
     width: 10px;
     border-radius: 50%;
@@ -272,7 +293,8 @@ const CurrentTimeWrapper = styled.div`
 `;
 
 const CurrentTime = styled(Text)<StyledColorProps>`
-  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.content.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.mainText || theme.content.main};
   line-height: 16px;
   white-space: pre-line;
 `;
@@ -318,7 +340,8 @@ const ScaleBox = styled.div<StyledColorProps & { shouldScroll: boolean }>`
 const IconWrapper = styled.div<StyledColorProps>`
   position: absolute;
   top: 2px;
-  color: ${({ theme, publishedTheme }) => publishedTheme?.select || theme.select.main};
+  color: ${({ theme, publishedTheme }) =>
+    publishedTheme?.select || theme.select.main};
 `;
 
 export default Timeline;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts
index 4a5e9bd81..0045f45d3 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts
@@ -4,10 +4,14 @@ import { calcScaleInterval } from "./utils";
 
 test("calcScaleInterval()", () => {
   expect(
-    calcScaleInterval(new Date("2023-01-02").getTime() - new Date("2023-01-01").getTime(), 1, {
-      gap: 10,
-      width: 300,
-    }),
+    calcScaleInterval(
+      new Date("2023-01-02").getTime() - new Date("2023-01-01").getTime(),
+      1,
+      {
+        gap: 10,
+        width: 300,
+      },
+    ),
   ).toEqual({
     gap: 10.358333333333333,
     scaleCount: 24,
@@ -15,10 +19,14 @@ test("calcScaleInterval()", () => {
     strongScaleMinutes: 10,
   });
   expect(
-    calcScaleInterval(new Date("2023-01-02").getTime() - new Date("2023-01-01").getTime(), 2, {
-      gap: 10,
-      width: 300,
-    }),
+    calcScaleInterval(
+      new Date("2023-01-02").getTime() - new Date("2023-01-01").getTime(),
+      2,
+      {
+        gap: 10,
+        width: 300,
+      },
+    ),
   ).toEqual({
     gap: 10,
     scaleCount: 48,
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts
index 88082ccd8..09864dce6 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts
@@ -23,7 +23,10 @@ const MONTH_LABEL_LIST = [
   "Dec",
 ];
 
-export const formatDateForTimeline = (time: number, options: { detail?: boolean } = {}) => {
+export const formatDateForTimeline = (
+  time: number,
+  options: { detail?: boolean } = {},
+) => {
   const d = new Date(time);
   const year = d.getFullYear();
   const month = MONTH_LABEL_LIST[d.getMonth()];
@@ -63,7 +66,8 @@ export const calcScaleInterval = (
   const numberOfScales = Math.round(timelineWidth / scaleWidth) - 1;
   // Scale interval to round time like 30 mins, 1 hour
   const scaleInterval =
-    roundScaleInterval(rangeDiff / (MINUTES_SEC * EPOCH_SEC) / numberOfScales) * MINUTES_SEC;
+    roundScaleInterval(rangeDiff / (MINUTES_SEC * EPOCH_SEC) / numberOfScales) *
+    MINUTES_SEC;
   const zoomedScaleInterval = Math.max(scaleInterval / zoom, MINUTES_SEC);
 
   // convert epoch diff to minutes.
@@ -74,16 +78,21 @@ export const calcScaleInterval = (
   const initialDisplayedWidth =
     (scaleCount - strongScaleCount) * scaleWidth +
     strongScaleCount * (styles.gap + STRONG_SCALE_WIDTH);
-  const initialRemainingGap = (timelineWidth - initialDisplayedWidth) / scaleCount;
+  const initialRemainingGap =
+    (timelineWidth - initialDisplayedWidth) / scaleCount;
 
   // To fit scale in initial width, adjusted gap is added only when zoom level is 1.
   const nextGap = zoom === 1 ? styles.gap + initialRemainingGap : styles.gap;
 
   // Adjust strong scale position
-  const diffLabelWidth = Math.max(SCALE_LABEL_WIDTH - nextGap * DEFAULT_STRONG_SCALE_MINUTES, 0);
+  const diffLabelWidth = Math.max(
+    SCALE_LABEL_WIDTH - nextGap * DEFAULT_STRONG_SCALE_MINUTES,
+    0,
+  );
   const strongScaleMinutes =
     DEFAULT_STRONG_SCALE_MINUTES +
-    Math.floor(diffLabelWidth / DEFAULT_STRONG_SCALE_MINUTES) * ADDITIONAL_STRONG_SCALE_MINUTES;
+    Math.floor(diffLabelWidth / DEFAULT_STRONG_SCALE_MINUTES) *
+      ADDITIONAL_STRONG_SCALE_MINUTES;
 
   return {
     scaleCount: Math.trunc(scaleCount),
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts
index ab89b0bae..a0e5e9ac1 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts
@@ -1,7 +1,10 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-
 import type { TimeEventHandler } from "@reearth/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI";
-import { TickEvent, TickEventCallback, TimelineManagerRef } from "@reearth/core";
+import {
+  TickEvent,
+  TickEventCallback,
+  TimelineManagerRef,
+} from "@reearth/core";
+import { useState, useCallback, useEffect, useRef } from "react";
 
 import type { Widget } from "../../types";
 
@@ -53,9 +56,11 @@ export const useTimeline = ({
     getOrNewDate(timelineManagerRef?.current?.timeline?.current).getTime(),
   );
   const isClockInitialized = useRef(false);
-  const clockStartTime = timelineManagerRef?.current?.timeline?.start?.getTime();
+  const clockStartTime =
+    timelineManagerRef?.current?.timeline?.start?.getTime();
   const clockStopTime = timelineManagerRef?.current?.timeline?.stop?.getTime();
-  const clockSpeed = timelineManagerRef?.current?.options?.multiplier || DEFAULT_SPEED;
+  const clockSpeed =
+    timelineManagerRef?.current?.options?.multiplier || DEFAULT_SPEED;
 
   const [speed, setSpeed] = useState(clockSpeed);
 
@@ -75,10 +80,10 @@ export const useTimeline = ({
       const cur = isRangeChanged
         ? t
         : t > range.end
-        ? range.start
-        : t < range.start
-        ? range.end
-        : t;
+          ? range.start
+          : t < range.start
+            ? range.end
+            : t;
 
       if (lastTime.current !== cur) {
         lastTime.current = cur;
@@ -90,7 +95,7 @@ export const useTimeline = ({
   );
 
   const handleTimeEvent: TimeEventHandler = useCallback(
-    currentTime => {
+    (currentTime) => {
       const t = new Date(currentTime);
       onTimeChange?.(t);
       setCurrentTime(currentTime);
@@ -131,7 +136,9 @@ export const useTimeline = ({
       const absSpeed = Math.abs(speed);
       // Maybe we need to throttle changing speed.
       onSpeedChange?.(
-        (timelineManagerRef?.current?.options?.multiplier ?? 1) > 0 ? absSpeed : absSpeed * -1,
+        (timelineManagerRef?.current?.options?.multiplier ?? 1) > 0
+          ? absSpeed
+          : absSpeed * -1,
       );
     },
     [onSpeedChange, timelineManagerRef],
@@ -147,28 +154,44 @@ export const useTimeline = ({
     }
   }, [onSpeedChange, onTick]);
 
-  const handleRange = useCallback((start: number | undefined, stop: number | undefined) => {
-    setRange(prev => {
-      const next = makeRange(start, stop);
-      if (prev.start !== next.start || prev.end !== next.end) {
-        return next;
-      }
-      return prev;
-    });
-  }, []);
+  const handleRange = useCallback(
+    (start: number | undefined, stop: number | undefined) => {
+      setRange((prev) => {
+        const next = makeRange(start, stop);
+        if (prev.start !== next.start || prev.end !== next.end) {
+          return next;
+        }
+        return prev;
+      });
+    },
+    [],
+  );
 
-  const overriddenStart = timelineManagerRef?.current?.computedTimeline?.start?.getTime();
-  const overriddenStop = timelineManagerRef?.current?.computedTimeline?.stop?.getTime();
+  const overriddenStart =
+    timelineManagerRef?.current?.computedTimeline?.start?.getTime();
+  const overriddenStop =
+    timelineManagerRef?.current?.computedTimeline?.stop?.getTime();
 
   // Sync cesium clock.
   useEffect(() => {
-    handleRange(overriddenStart ?? clockStartTime, overriddenStop ?? clockStopTime);
+    handleRange(
+      overriddenStart ?? clockStartTime,
+      overriddenStop ?? clockStopTime,
+    );
     setSpeed(Math.abs(clockSpeed));
-  }, [clockStartTime, clockStopTime, clockSpeed, overriddenStart, overriddenStop, handleRange]);
+  }, [
+    clockStartTime,
+    clockStopTime,
+    clockSpeed,
+    overriddenStart,
+    overriddenStop,
+    handleRange,
+  ]);
 
   useEffect(() => {
     const h: TickEventCallback = (d, c) => {
-      const isDifferentRange = range.start !== c.start.getTime() || range.end !== c.stop.getTime();
+      const isDifferentRange =
+        range.start !== c.start.getTime() || range.end !== c.stop.getTime();
       if (isDifferentRange) {
         handleRange(c.start.getTime(), c.stop.getTime());
       }
@@ -193,10 +216,14 @@ export const useTimeline = ({
     onTimeChangeRef.current = onTimeChange;
   }, [onTimeChange]);
 
-  const overriddenCurrentTime = timelineManagerRef?.current?.computedTimeline?.current?.getTime();
+  const overriddenCurrentTime =
+    timelineManagerRef?.current?.computedTimeline?.current?.getTime();
   useEffect(() => {
     if (overriddenCurrentTime) {
-      const t = Math.max(Math.min(range.end, overriddenCurrentTime), range.start);
+      const t = Math.max(
+        Math.min(range.end, overriddenCurrentTime),
+        range.start,
+      );
       setCurrentTime(t);
       // onTimeChangeRef.current?.(new Date(t));
     }
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx
index dfcbdc3b2..a406aa26c 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx
@@ -9,7 +9,7 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-const Template: Story<Props> = args => <Component {...args} />;
+const Template: Story<Props> = (args) => <Component {...args} />;
 
 export const Default = Template.bind({});
 
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx
index fbc08738c..ee4970e54 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx
@@ -54,10 +54,12 @@ const Widget = styled.div<{
   opened?: boolean;
 }>`
   max-width: 100vw;
-  width: ${({ extended, opened }) => (extended && opened ? "100%" : opened ? "720px" : "auto")};
+  width: ${({ extended, opened }) =>
+    extended && opened ? "100%" : opened ? "720px" : "auto"};
 
   @media (max-width: 768px) {
-    width: ${({ extended, opened }) => (extended && opened ? "100%" : opened ? "90vw" : "auto")};
+    width: ${({ extended, opened }) =>
+      extended && opened ? "100%" : opened ? "90vw" : "auto"};
   }
 `;
 
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts
index 9e860e8a9..855947fbc 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts
@@ -1,15 +1,18 @@
-import { merge } from "lodash-es";
-
 import {
   BUTTON_BUILTIN_WIDGET_ID,
   NAVIGATOR_BUILTIN_WIDGET_ID,
 } from "@reearth/services/api/widgetsApi/utils";
 import { config } from "@reearth/services/config";
+import { merge } from "lodash-es";
 
 import Button from "./Button";
 import Navigator from "./Navigator";
 // import Timeline from "./Timeline";
-import { Component, unsafeBuiltinWidgets, type UnsafeBuiltinWidgets } from "./unsafeWidgets";
+import {
+  Component,
+  unsafeBuiltinWidgets,
+  type UnsafeBuiltinWidgets,
+} from "./unsafeWidgets";
 
 export type ReEarthBuiltinWidgets<T = unknown> = Record<
   | typeof BUTTON_BUILTIN_WIDGET_ID
@@ -18,17 +21,19 @@ export type ReEarthBuiltinWidgets<T = unknown> = Record<
   T
 >;
 
-export type BuiltinWidgets<T = unknown> = ReEarthBuiltinWidgets<T> & UnsafeBuiltinWidgets<T>;
+export type BuiltinWidgets<T = unknown> = ReEarthBuiltinWidgets<T> &
+  UnsafeBuiltinWidgets<T>;
 
-const REEARTH_BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> = {
-  [BUTTON_BUILTIN_WIDGET_ID]: {},
-  // [TIMELINE_BUILTIN_WIDGET_ID]: {
-  //   animation: true,
-  // },
-  [NAVIGATOR_BUILTIN_WIDGET_ID]: {
-    animation: true,
-  },
-};
+const REEARTH_BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> =
+  {
+    [BUTTON_BUILTIN_WIDGET_ID]: {},
+    // [TIMELINE_BUILTIN_WIDGET_ID]: {
+    //   animation: true,
+    // },
+    [NAVIGATOR_BUILTIN_WIDGET_ID]: {
+      animation: true,
+    },
+  };
 
 const BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> =
   REEARTH_BUILTIN_WIDGET_OPTIONS;
@@ -53,7 +58,7 @@ const builtin = () => {
 };
 
 export const getBuiltinWidgetOptions = (id: string) => {
-  Object.keys(unsafeBuiltinWidgets() ?? {}).map(uw => {
+  Object.keys(unsafeBuiltinWidgets() ?? {}).map((uw) => {
     BUILTIN_WIDGET_OPTIONS[uw] = {};
   });
   return BUILTIN_WIDGET_OPTIONS[id as keyof BuiltinWidgets];
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts
index 2646f83e1..15310c32a 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts
@@ -1,7 +1,6 @@
-import { merge } from "lodash-es";
-
 import { config } from "@reearth/services/config";
 import { type UnsafeBuiltinPlugin } from "@reearth/services/config/unsafeBuiltinPlugin";
+import { merge } from "lodash-es";
 
 import type { Component } from "..";
 
@@ -16,8 +15,8 @@ function processUnsafeBuiltinWidgets(plugin?: UnsafeBuiltinPlugin[]) {
   if (!plugin) return;
 
   const unsafeWidgets: UnsafeBuiltinWidgets<Component> | undefined = plugin
-    .map(p =>
-      p.widgets?.map(w => {
+    .map((p) =>
+      p.widgets?.map((w) => {
         return {
           widgetId: `${p.id}/${w.extensionId}`,
           ...w,
@@ -25,8 +24,8 @@ function processUnsafeBuiltinWidgets(plugin?: UnsafeBuiltinPlugin[]) {
       }),
     )
     .reduce((a, b) => {
-      const newObject: { [key: string]: Component } = {};
-      b?.forEach(w => {
+      const newObject: Record<string, Component> = {};
+      b?.forEach((w) => {
         newObject[w.widgetId] = w.component;
       });
       return merge(a, newObject);
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx
index 4af699afe..fd19cf44f 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx
@@ -10,7 +10,7 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-export const Default: Story<Props> = args => <Widget {...args} />;
+export const Default: Story<Props> = (args) => <Widget {...args} />;
 
 Default.args = {
   widget: {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx
index b82ed0352..4162d1083 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx
@@ -1,7 +1,6 @@
-import { ComponentType, ReactNode, useMemo } from "react";
-
 import type { TickEvent } from "@reearth/core";
 import { TimelineManagerRef, TimelineCommitter } from "@reearth/core";
+import { ComponentType, ReactNode, useMemo } from "react";
 
 import builtin, { isBuiltinWidget } from "./builtin";
 import type {
@@ -17,7 +16,11 @@ import type {
 } from "./types";
 
 export type { WidgetLayout } from "../types";
-export { isBuiltinWidget, type BuiltinWidgets, getBuiltinWidgetOptions } from "./builtin";
+export {
+  isBuiltinWidget,
+  type BuiltinWidgets,
+  getBuiltinWidgetOptions,
+} from "./builtin";
 
 export type Props = {
   widget: InternalWidget;
@@ -45,8 +48,14 @@ export type Context = {
     featureId?: string;
   };
   is2d?: boolean;
-  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
-  onLookAt?: (camera: LookAtDestination, options?: { duration?: number }) => void;
+  onFlyTo?: (
+    target: string | FlyToDestination,
+    options?: { duration?: number },
+  ) => void;
+  onLookAt?: (
+    camera: LookAtDestination,
+    options?: { duration?: number },
+  ) => void;
   onLayerSelect?: (
     layerId: string | undefined,
     featureId: string | undefined,
@@ -99,13 +108,16 @@ export default function WidgetComponent({
   if (!w) return null;
 
   const builtinWidgetId = `${w.pluginId}/${w.extensionId}`;
-  const Builtin = isBuiltinWidget(builtinWidgetId) ? builtin()[builtinWidgetId] : undefined;
+  const Builtin = isBuiltinWidget(builtinWidgetId)
+    ? builtin()[builtinWidgetId]
+    : undefined;
 
   return Builtin ? (
     <div
       style={{
         pointerEvents: editing ? "none" : "auto",
-      }}>
+      }}
+    >
       <Builtin {...props} editing={editing} widget={w} />
     </div>
   ) : (
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx
index 89bcab775..a3144a409 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx
@@ -1,10 +1,9 @@
+import { useTheme } from "@reearth/services/theme";
 import { omit, pick } from "lodash-es";
 import { ReactNode, useCallback, useMemo, useState } from "react";
 import { GridArea, GridItem } from "react-align";
 import { useDeepCompareEffect } from "react-use";
 
-import { useTheme } from "@reearth/services/theme";
-
 import type {
   Alignment,
   WidgetAreaPadding,
@@ -72,7 +71,10 @@ export default function Area({
     }),
     [align, area, section, zone],
   );
-  const { overriddenExtended, handleExtend } = useOverriddenExtended({ layout, widgets });
+  const { overriddenExtended, handleExtend } = useOverriddenExtended({
+    layout,
+    widgets,
+  });
 
   return !(zone === "inner" && section === "center" && area === "middle") ? (
     <GridArea
@@ -98,14 +100,16 @@ export default function Area({
       vertical={area === "middle"}
       stretch={area === "middle"}
       bottom={(section === "right" && area !== "top") || area === "bottom"}
-      realignable={(area === "middle" || section === "center") && !!widgets?.length}
+      realignable={
+        (area === "middle" || section === "center") && !!widgets?.length
+      }
       align={
         widgets?.length
           ? area === "middle" || section === "center"
             ? align
             : section === "right"
-            ? "end"
-            : undefined
+              ? "end"
+              : undefined
           : undefined
       }
       style={{
@@ -126,21 +130,22 @@ export default function Area({
         backgroundColor: backgroundColor
           ? backgroundColor
           : area === "middle"
-          ? theme.placeHolder.main_2
-          : theme.placeHolder.main_1,
+            ? theme.placeHolder.main_2
+            : theme.placeHolder.main_1,
         border:
           `${selectedWidgetArea?.zone}/${selectedWidgetArea?.section}/${selectedWidgetArea?.area}` ===
           `${zone}/${section}/${area}`
             ? `1.2px dashed #00FFFF`
             : area === "middle"
-            ? `1px solid ${theme.primary.weak}`
-            : `1px solid #E95518`,
+              ? `1px solid ${theme.primary.weak}`
+              : `1px solid #E95518`,
         gap: gap,
         alignItems: centered ? "center" : "unset",
       }}
-      iconColor={area === "middle" ? "#4770FF" : "#E95518"}>
+      iconColor={area === "middle" ? "#4770FF" : "#E95518"}
+    >
       {widgets
-        ?.filter(widget => !isInvisibleBuiltin(widget, isMobile))
+        ?.filter((widget) => !isInvisibleBuiltin(widget, isMobile))
         .map((widget, i) => {
           const constraint =
             widget.pluginId && widget.extensionId
@@ -159,7 +164,8 @@ export default function Area({
               extended={extended ?? widget.extended}
               extendable={extendable2}
               style={{ pointerEvents: "none", margin: 0 }}
-              editorStyle={{ margin: 0 }}>
+              editorStyle={{ margin: 0 }}
+            >
               {({ editing }) =>
                 renderWidget?.({
                   widget,
@@ -183,25 +189,30 @@ function useOverriddenExtended({
   layout: WidgetLayout;
   widgets: InternalWidget[] | undefined;
 }) {
-  const extendable = layout.location.section === "center" || layout.location.area === "middle";
-  const [overriddenExtended, overrideExtend] = useState<{ [id in string]?: boolean }>({});
+  const extendable =
+    layout.location.section === "center" || layout.location.area === "middle";
+  const [overriddenExtended, overrideExtend] = useState<{
+    [id in string]?: boolean;
+  }>({});
   const handleExtend = useCallback(
     (id: string, extended: boolean | undefined) => {
-      overrideExtend(oe =>
+      overrideExtend((oe) =>
         oe[id] === extended
           ? oe
           : {
               ...omit(oe, id),
-              ...(typeof extended === "undefined" || !extendable ? {} : { [id]: extended }),
+              ...(typeof extended === "undefined" || !extendable
+                ? {}
+                : { [id]: extended }),
             },
       );
     },
     [extendable],
   );
 
-  const widgetIds = widgets?.map(w => w.id) ?? [];
+  const widgetIds = widgets?.map((w) => w.id) ?? [];
   useDeepCompareEffect(() => {
-    overrideExtend(oe => pick(oe, Object.keys(widgetIds)));
+    overrideExtend((oe) => pick(oe, Object.keys(widgetIds)));
   }, [widgetIds]);
 
   return {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
index bfebb6a5c..8bbfdb677 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
@@ -1,13 +1,17 @@
-import { ReactNode, useState, useMemo, useEffect } from "react";
-import { GridSection } from "react-align";
-
 import Icon from "@reearth/beta/components/Icon";
 import Slide from "@reearth/beta/components/Slide";
 import { styled } from "@reearth/services/theme";
+import { ReactNode, useState, useMemo, useEffect } from "react";
+import { GridSection } from "react-align";
 
 import Area, { WidgetAreaType } from "./Area";
 import { WAS_AREAS } from "./constants";
-import type { WidgetZone, WidgetLayoutConstraint, Theme, WidgetProps } from "./types";
+import type {
+  WidgetZone,
+  WidgetLayoutConstraint,
+  Theme,
+  WidgetProps,
+} from "./types";
 import { filterSections } from "./utils";
 
 export type Props = {
@@ -18,7 +22,7 @@ export type Props = {
   theme?: Theme;
   built?: boolean;
   isMobile?: boolean;
-  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  layoutConstraint?: Record<string, WidgetLayoutConstraint>;
   invisibleWidgetIDs?: string[];
   renderWidget?: (props: WidgetProps) => ReactNode;
   onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
@@ -38,10 +42,17 @@ export default function MobileZone({
   onWidgetAreaSelect,
 }: Props) {
   const filteredSections = useMemo(() => {
-    return filterSections(zone, invisibleWidgetIDs, s => s === "center" && children);
+    return filterSections(
+      zone,
+      invisibleWidgetIDs,
+      (s) => s === "center" && children,
+    );
   }, [zone, children, invisibleWidgetIDs]);
 
-  const initialPos = useMemo(() => (filteredSections.length === 3 ? 1 : 0), [filteredSections]);
+  const initialPos = useMemo(
+    () => (filteredSections.length === 3 ? 1 : 0),
+    [filteredSections],
+  );
 
   const [pos, setPos] = useState(initialPos);
 
@@ -52,9 +63,9 @@ export default function MobileZone({
   return (
     <>
       <StyledSlide pos={pos} filteredSections={filteredSections.length > 1}>
-        {filteredSections.map(s => (
+        {filteredSections.map((s) => (
           <GridSection key={s} stretch>
-            {WAS_AREAS.map(a =>
+            {WAS_AREAS.map((a) =>
               s === "center" && children && a === "middle" ? (
                 <div key={a} style={{ display: "flex", flex: "1 0 auto" }}>
                   {children}
@@ -68,7 +79,14 @@ export default function MobileZone({
                   area={a}
                   widgets={zone?.[s]?.[a]?.widgets}
                   align={zone?.[s]?.[a]?.align ?? "start"}
-                  padding={zone?.[s]?.[a]?.padding ?? { top: 6, bottom: 6, left: 6, right: 6 }}
+                  padding={
+                    zone?.[s]?.[a]?.padding ?? {
+                      top: 6,
+                      bottom: 6,
+                      left: 6,
+                      right: 6,
+                    }
+                  }
                   gap={zone?.[s]?.[a]?.gap ?? 6}
                   centered={zone?.[s]?.[a]?.centered ?? false}
                   backgroundColor={zone?.[s]?.[a]?.background ?? "unset"}
@@ -86,7 +104,9 @@ export default function MobileZone({
       {filteredSections.length > 1 ? (
         <Controls publishedTheme={theme}>
           <Control leftIcon onClick={() => pos > 0 && setPos(pos - 1)}>
-            {pos > 0 && <Icon icon="arrowLongLeft" size={24} color={theme?.mainIcon} />}
+            {pos > 0 && (
+              <Icon icon="arrowLongLeft" size={24} color={theme?.mainIcon} />
+            )}
           </Control>
           <InnerControlWrapper>
             {filteredSections.map((_, i) => (
@@ -95,7 +115,10 @@ export default function MobileZone({
               </Control>
             ))}
           </InnerControlWrapper>
-          <Control rightIcon onClick={() => pos < filteredSections.length - 1 && setPos(pos + 1)}>
+          <Control
+            rightIcon
+            onClick={() => pos < filteredSections.length - 1 && setPos(pos + 1)}
+          >
             {pos < filteredSections.length - 1 && (
               <Icon icon="arrowLongRight" size={24} color={theme?.mainIcon} />
             )}
@@ -143,5 +166,6 @@ const PageIcon = styled.div<{ current?: boolean; publishedTheme?: Theme }>`
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: ${({ current, publishedTheme }) => (current ? publishedTheme?.mainIcon : null)};
+  background: ${({ current, publishedTheme }) =>
+    current ? publishedTheme?.mainIcon : null};
 `;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx
index 413482bae..66568e48d 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx
@@ -13,7 +13,7 @@ export type Props = {
   zone?: WidgetZone;
   zoneName: "inner" | "outer";
   invisibleWidgetIDs?: string[];
-  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  layoutConstraint?: Record<string, WidgetLayoutConstraint>;
   isMobile?: boolean;
   built?: boolean;
   renderWidget?: (props: WidgetProps) => ReactNode;
@@ -33,9 +33,9 @@ export default function Zone({
 }: Props) {
   return (
     <>
-      {WAS_SECTIONS.map(s => (
+      {WAS_SECTIONS.map((s) => (
         <GridSection key={s} stretch={s === "center"}>
-          {WAS_AREAS.map(a =>
+          {WAS_AREAS.map((a) =>
             s === "center" && children && a === "middle" ? (
               <div key={a} style={{ display: "flex", flex: "1 0 auto" }}>
                 {children}
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts
index 123614863..65dfe8b15 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts
@@ -14,7 +14,13 @@ export default function ({
   onAlignmentUpdate?: (location: Location, align: Alignment) => void;
 }) {
   const handleMove = useCallback(
-    (id: string, area: string, index: number, prevArea: string, _prevIndex: number) => {
+    (
+      id: string,
+      area: string,
+      index: number,
+      prevArea: string,
+      _prevIndex: number,
+    ) => {
       const location = area !== prevArea ? getLocationFromId(area) : undefined;
       onWidgetLayoutUpdate?.(id, { index, location });
     },
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx
index fe1405951..7bed01c08 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx
@@ -1,8 +1,7 @@
+import { styled } from "@reearth/services/theme";
 import React, { ReactNode, useMemo } from "react";
 import { GridWrapper } from "react-align";
 
-import { styled } from "@reearth/services/theme";
-
 import useHooks from "./hooks";
 import MobileZone from "./MobileZone";
 import type {
@@ -38,7 +37,7 @@ export type Props = {
   invisibleWidgetIDs?: string[];
   editing?: boolean;
   built?: boolean;
-  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  layoutConstraint?: Record<string, WidgetLayoutConstraint>;
   isMobile?: boolean;
   theme?: Theme;
   renderWidget?: (props: WidgetProps) => ReactNode;
@@ -87,7 +86,8 @@ const WidgetAlignSystem: React.FC<Props> = ({
         editing={editing}
         onMove={handleMove}
         onAlignChange={handleAlignmentChange}
-        onExtend={handleExtend}>
+        onExtend={handleExtend}
+      >
         <Zone
           zoneName="outer"
           selectedWidgetArea={selectedWidgetArea}
@@ -98,7 +98,8 @@ const WidgetAlignSystem: React.FC<Props> = ({
           built={built}
           isMobile={isMobile}
           renderWidget={renderWidget}
-          onWidgetAreaSelect={onWidgetAreaSelect}>
+          onWidgetAreaSelect={onWidgetAreaSelect}
+        >
           {(!isMobile || hasInner) && (
             <ZoneComponent
               zoneName="inner"
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts
index 66cc9dfcd..e38643052 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts
@@ -4,7 +4,13 @@ import type { InternalWidget, WidgetAlignment, WidgetLocation } from "../types";
 
 export type { Alignment } from "react-align";
 
-export type { Theme, Widget, InternalWidget, WidgetAlignment, WidgetLocation } from "../types";
+export type {
+  Theme,
+  Widget,
+  InternalWidget,
+  WidgetAlignment,
+  WidgetLocation,
+} from "../types";
 
 export type Location = {
   zone: "inner" | "outer";
@@ -12,7 +18,12 @@ export type Location = {
   area: "top" | "middle" | "bottom";
 };
 
-export type WidgetAreaPadding = { top: number; bottom: number; left: number; right: number };
+export type WidgetAreaPadding = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
 
 export type WidgetArea = {
   align?: Alignment;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts
index 5f1791712..675fbf152 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts
@@ -9,13 +9,19 @@ export const filterSections = (
   cb?: (s: (typeof WAS_SECTIONS)[number]) => void,
 ) => {
   return WAS_SECTIONS.filter(
-    s =>
-      WAS_AREAS.filter(a => zone?.[s]?.[a]?.widgets?.some(w => !invisibleWidgetIDs?.includes(w.id)))
-        .length || cb?.(s),
+    (s) =>
+      WAS_AREAS.filter((a) =>
+        zone?.[s]?.[a]?.widgets?.some(
+          (w) => !invisibleWidgetIDs?.includes(w.id),
+        ),
+      ).length || cb?.(s),
   );
 };
 
-export const isInvisibleBuiltin = (widget: InternalWidget, isMobile?: boolean) => {
+export const isInvisibleBuiltin = (
+  widget: InternalWidget,
+  isMobile?: boolean,
+) => {
   const defaultVisible = widget.property?.default?.visible;
   return (
     isBuiltinWidget(`${widget.pluginId}/${widget.extensionId}`) &&
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx
index 306e7055b..28376a789 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx
@@ -12,7 +12,7 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-const Template: Story<Props> = args => (
+const Template: Story<Props> = (args) => (
   <div style={{ width: "100%", height: "100%" }}>
     <Component {...args} />
   </div>
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx
index c3fdb3d32..751adcb48 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx
@@ -1,6 +1,12 @@
 import { Fragment, ReactNode, useCallback } from "react";
 
-import type { InternalWidget, Theme, Widget, WidgetLayout, WidgetLocationOptions } from "./types";
+import type {
+  InternalWidget,
+  Theme,
+  Widget,
+  WidgetLayout,
+  WidgetLocationOptions,
+} from "./types";
 import useWidgetAlignSystem from "./useWidgetAlignSystem";
 import WidgetComponent, { type Context } from "./Widget";
 import WidgetAlignSystem, {
@@ -26,13 +32,18 @@ export type {
 export type { Context, BuiltinWidgets } from "./Widget";
 export { isBuiltinWidget } from "./Widget";
 
-export type { Widget, InternalWidget, WidgetLocationOptions, WidgetAlignment } from "./types";
+export type {
+  Widget,
+  InternalWidget,
+  WidgetLocationOptions,
+  WidgetAlignment,
+} from "./types";
 
 export type Props = {
   alignSystem?: WidgetAlignSystemType;
   floatingWidgets?: InternalWidget[];
   selectedWidgetArea?: WidgetAreaType;
-  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  layoutConstraint?: Record<string, WidgetLayoutConstraint>;
   editing?: boolean;
   isMobile?: boolean;
   theme?: Theme;
@@ -80,11 +91,14 @@ export default function Widgets({
   onWidgetLayoutUpdate,
   onWidgetAreaSelect,
 }: Props): JSX.Element | null {
-  const { overriddenAlignSystem, invisibleWidgetIDs, onPluginWidgetVisibilityChange } =
-    useWidgetAlignSystem({
-      alignSystem,
-      isMobile,
-    });
+  const {
+    overriddenAlignSystem,
+    invisibleWidgetIDs,
+    onPluginWidgetVisibilityChange,
+  } = useWidgetAlignSystem({
+    alignSystem,
+    isMobile,
+  });
 
   const renderWidgetInternal = useCallback(
     ({ editing, extended, layout, widget, onExtend }: WasWidgetProps) => (
@@ -99,7 +113,7 @@ export default function Widgets({
         isBuilt={isBuilt}
         isMobile={isMobile}
         context={context}
-        renderWidget={widget2 =>
+        renderWidget={(widget2) =>
           renderWidget?.({
             widget: widget2,
             editing,
@@ -140,7 +154,7 @@ export default function Widgets({
         onWidgetLayoutUpdate={onWidgetLayoutUpdate}
         onWidgetAreaSelect={onWidgetAreaSelect}
       />
-      {floatingWidgets?.map(w => (
+      {floatingWidgets?.map((w) => (
         <Fragment key={w.id}>
           {renderWidgetInternal({
             widget: w,
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts b/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts
index f8c77e4d6..db69925f9 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts
@@ -1,6 +1,10 @@
 import { useEffect, useState, useCallback } from "react";
 
-import { WAS_SECTIONS, WAS_AREAS, WAS_ZONES } from "./WidgetAlignSystem/constants";
+import {
+  WAS_SECTIONS,
+  WAS_AREAS,
+  WAS_ZONES,
+} from "./WidgetAlignSystem/constants";
 import { isInvisibleBuiltin } from "./WidgetAlignSystem/utils";
 
 import {
@@ -19,137 +23,155 @@ export default ({
   alignSystem: WidgetAlignSystem | undefined;
   isMobile?: boolean;
 }) => {
-  const [overriddenAlignSystem, setOverrideAlignSystem] = useState<WidgetAlignSystem | undefined>(
-    alignSystem,
-  );
+  const [overriddenAlignSystem, setOverrideAlignSystem] = useState<
+    WidgetAlignSystem | undefined
+  >(alignSystem);
 
   // NOTE: This is invisible list of widget.
   //       The reason why we use invisible list is prevent initializing cost.
   const [invisibleWidgetIDs, setInvisibleWidgetIDs] = useState<string[]>([]);
-  const [invisiblePluginWidgetIDs, setInvisiblePluginWidgetIDs] = useState<string[]>([]);
+  const [invisiblePluginWidgetIDs, setInvisiblePluginWidgetIDs] = useState<
+    string[]
+  >([]);
 
   useEffect(() => {
     const invisibleBuiltinWidgetIDs: string[] = [];
-    WAS_ZONES.forEach(zone => {
-      WAS_SECTIONS.forEach(section => {
-        WAS_AREAS.forEach(area => {
-          overriddenAlignSystem?.[zone]?.[section]?.[area]?.widgets?.forEach(w => {
-            if (isInvisibleBuiltin(w, isMobile)) invisibleBuiltinWidgetIDs.push(w.id);
-          });
+    WAS_ZONES.forEach((zone) => {
+      WAS_SECTIONS.forEach((section) => {
+        WAS_AREAS.forEach((area) => {
+          overriddenAlignSystem?.[zone]?.[section]?.[area]?.widgets?.forEach(
+            (w) => {
+              if (isInvisibleBuiltin(w, isMobile))
+                invisibleBuiltinWidgetIDs.push(w.id);
+            },
+          );
         });
       });
     });
 
-    setInvisibleWidgetIDs([...invisibleBuiltinWidgetIDs, ...invisiblePluginWidgetIDs]);
+    setInvisibleWidgetIDs([
+      ...invisibleBuiltinWidgetIDs,
+      ...invisiblePluginWidgetIDs,
+    ]);
   }, [isMobile, overriddenAlignSystem, invisiblePluginWidgetIDs]);
 
-  const onPluginWidgetVisibilityChange = useCallback((widgetId: string, v: boolean) => {
-    setInvisiblePluginWidgetIDs(a => {
-      if (!a.includes(widgetId) && !v) {
-        return [...a, widgetId];
-      }
-      if (a.includes(widgetId) && v) {
-        return a.filter(i => i !== widgetId);
-      }
-      return a;
-    });
-  }, []);
-
-  const moveWidget = useCallback((widgetId: string, options: WidgetLocationOptions) => {
-    if (
-      !WAS_ZONES.includes(options.zone) ||
-      !WAS_SECTIONS.includes(options.section) ||
-      !WAS_AREAS.includes(options.area) ||
-      (options.section === "center" && options.area === "middle")
-    )
-      return;
-
-    let widget: InternalWidget | undefined;
-
-    setOverrideAlignSystem(alignSystem => {
-      if (!alignSystem) return alignSystem;
-      Object.keys(alignSystem).forEach(zoneName_ => {
-        const zoneName = zoneName_ as keyof WidgetAlignSystem;
-        const zone = alignSystem[zoneName];
-        if (zone) {
-          Object.keys(zone).forEach(sectionName_ => {
-            const sectionName = sectionName_ as keyof WidgetZone;
-            const section = zone[sectionName];
-            if (section) {
-              Object.keys(section).forEach(areaName_ => {
-                const areaName = areaName_ as keyof WidgetSection;
-                const area = section[areaName];
-                if (!widget && area?.widgets) {
-                  const sourceIndex = area.widgets.findIndex(w => w.id === widgetId);
-                  if (sourceIndex !== -1) {
-                    [widget] = area.widgets.splice(sourceIndex, 1);
-                  }
-                }
-              });
-            }
-          });
-        }
-      });
-      return { ...alignSystem };
-    });
-
-    setTimeout(() => {
-      setOverrideAlignSystem(alignSystem => {
-        if (!alignSystem || !widget) return alignSystem;
-        if (!alignSystem[options.zone]) {
-          alignSystem[options.zone] = {
-            left: undefined,
-            center: undefined,
-            right: undefined,
-          };
+  const onPluginWidgetVisibilityChange = useCallback(
+    (widgetId: string, v: boolean) => {
+      setInvisiblePluginWidgetIDs((a) => {
+        if (!a.includes(widgetId) && !v) {
+          return [...a, widgetId];
         }
-
-        const targetZone = alignSystem[options.zone] as WidgetZone;
-        if (!targetZone[options.section]) {
-          targetZone[options.section] = {
-            top: undefined,
-            middle: undefined,
-            bottom: undefined,
-          };
-        }
-
-        const targetSection = targetZone[options.section] as WidgetSection;
-        if (!targetSection[options.area]) {
-          targetSection[options.area] = {
-            align: "start",
-            widgets: [],
-          };
+        if (a.includes(widgetId) && v) {
+          return a.filter((i) => i !== widgetId);
         }
+        return a;
+      });
+    },
+    [],
+  );
 
-        const targetArea = targetSection[options.area] as WidgetArea;
-        if (!targetArea.widgets) targetArea.widgets = [];
-        if (options.method === "insert") {
-          targetArea.widgets.unshift(widget);
-        } else {
-          targetArea.widgets.push(widget);
-        }
+  const moveWidget = useCallback(
+    (widgetId: string, options: WidgetLocationOptions) => {
+      if (
+        !WAS_ZONES.includes(options.zone) ||
+        !WAS_SECTIONS.includes(options.section) ||
+        !WAS_AREAS.includes(options.area) ||
+        (options.section === "center" && options.area === "middle")
+      )
+        return;
+
+      let widget: InternalWidget | undefined;
+
+      setOverrideAlignSystem((alignSystem) => {
+        if (!alignSystem) return alignSystem;
+        Object.keys(alignSystem).forEach((zoneName_) => {
+          const zoneName = zoneName_ as keyof WidgetAlignSystem;
+          const zone = alignSystem[zoneName];
+          if (zone) {
+            Object.keys(zone).forEach((sectionName_) => {
+              const sectionName = sectionName_ as keyof WidgetZone;
+              const section = zone[sectionName];
+              if (section) {
+                Object.keys(section).forEach((areaName_) => {
+                  const areaName = areaName_ as keyof WidgetSection;
+                  const area = section[areaName];
+                  if (!widget && area?.widgets) {
+                    const sourceIndex = area.widgets.findIndex(
+                      (w) => w.id === widgetId,
+                    );
+                    if (sourceIndex !== -1) {
+                      [widget] = area.widgets.splice(sourceIndex, 1);
+                    }
+                  }
+                });
+              }
+            });
+          }
+        });
+        return { ...alignSystem };
+      });
 
-        if (targetArea.widgets.length) {
-          const next = {
-            ...alignSystem,
-            [options.zone]: {
-              ...alignSystem[options.zone],
-              [options.section]: {
-                ...(alignSystem[options.zone]?.[options.section] || {}),
-                [options.area]: {
-                  ...(alignSystem[options.zone]?.[options.section]?.[options.area] || {}),
-                  widgets: [...targetArea.widgets],
+      setTimeout(() => {
+        setOverrideAlignSystem((alignSystem) => {
+          if (!alignSystem || !widget) return alignSystem;
+          if (!alignSystem[options.zone]) {
+            alignSystem[options.zone] = {
+              left: undefined,
+              center: undefined,
+              right: undefined,
+            };
+          }
+
+          const targetZone = alignSystem[options.zone] as WidgetZone;
+          if (!targetZone[options.section]) {
+            targetZone[options.section] = {
+              top: undefined,
+              middle: undefined,
+              bottom: undefined,
+            };
+          }
+
+          const targetSection = targetZone[options.section] as WidgetSection;
+          if (!targetSection[options.area]) {
+            targetSection[options.area] = {
+              align: "start",
+              widgets: [],
+            };
+          }
+
+          const targetArea = targetSection[options.area] as WidgetArea;
+          if (!targetArea.widgets) targetArea.widgets = [];
+          if (options.method === "insert") {
+            targetArea.widgets.unshift(widget);
+          } else {
+            targetArea.widgets.push(widget);
+          }
+
+          if (targetArea.widgets.length) {
+            const next = {
+              ...alignSystem,
+              [options.zone]: {
+                ...alignSystem[options.zone],
+                [options.section]: {
+                  ...(alignSystem[options.zone]?.[options.section] || {}),
+                  [options.area]: {
+                    ...(alignSystem[options.zone]?.[options.section]?.[
+                      options.area
+                    ] || {}),
+                    widgets: [...targetArea.widgets],
+                  },
                 },
               },
-            },
-          };
-          return { ...next };
-        }
+            };
+            return { ...next };
+          }
 
-        return alignSystem;
-      });
-    }, 0);
-  }, []);
+          return alignSystem;
+        });
+      }, 0);
+    },
+    [],
+  );
 
   useEffect(() => {
     setOverrideAlignSystem(alignSystem);
diff --git a/web/src/beta/features/Visualizer/Crust/context.ts b/web/src/beta/features/Visualizer/Crust/context.ts
index 980631d9e..5d12b41be 100644
--- a/web/src/beta/features/Visualizer/Crust/context.ts
+++ b/web/src/beta/features/Visualizer/Crust/context.ts
@@ -1,7 +1,10 @@
-import { RefObject, useMemo } from "react";
-
 import { Camera } from "@reearth/beta/utils/value";
-import { TimelineManagerRef, TimelineCommitter, ViewerProperty } from "@reearth/core";
+import {
+  TimelineManagerRef,
+  TimelineCommitter,
+  ViewerProperty,
+} from "@reearth/core";
+import { RefObject, useMemo } from "react";
 
 import { MapRef } from "./types";
 import { Context as WidgetContext } from "./Widgets";
@@ -22,7 +25,13 @@ export const useWidgetContext = ({
         initialCamera,
         timelineManagerRef,
       }),
-    [mapRef, viewerProperty, initialCamera, selectedLayerId, timelineManagerRef],
+    [
+      mapRef,
+      viewerProperty,
+      initialCamera,
+      selectedLayerId,
+      timelineManagerRef,
+    ],
   );
 
 export function widgetContextFromMapRef({
@@ -58,7 +67,8 @@ export function widgetContextFromMapRef({
         return undefined;
       }
       // For compat
-      const location = l.property?.default?.location ?? l.property?.default?.position;
+      const location =
+        l.property?.default?.location ?? l.property?.default?.position;
       return {
         title: l.title,
         lat: location?.lat,
@@ -79,12 +89,18 @@ export function widgetContextFromMapRef({
     onPause: (committer?: TimelineCommitter) =>
       timelineManagerRef?.current?.commit({
         cmd: "PAUSE",
-        committer: { source: committer?.source ?? "widgetContext", id: committer?.id },
+        committer: {
+          source: committer?.source ?? "widgetContext",
+          id: committer?.id,
+        },
       }),
     onPlay: (committer?: TimelineCommitter) =>
       timelineManagerRef?.current?.commit({
         cmd: "PLAY",
-        committer: { source: committer?.source ?? "widgetContext", id: committer?.id },
+        committer: {
+          source: committer?.source ?? "widgetContext",
+          id: committer?.id,
+        },
       }),
     onSpeedChange: (speed, committer?: TimelineCommitter) =>
       timelineManagerRef?.current?.commit({
@@ -93,10 +109,13 @@ export function widgetContextFromMapRef({
           multiplier: speed,
           stepType: "rate",
         },
-        committer: { source: committer?.source ?? "widgetContext", id: committer?.id },
+        committer: {
+          source: committer?.source ?? "widgetContext",
+          id: committer?.id,
+        },
       }),
-    onTick: cb => timelineManagerRef?.current?.onTick(cb),
-    removeTickEventListener: cb => timelineManagerRef?.current?.offTick(cb),
+    onTick: (cb) => timelineManagerRef?.current?.onTick(cb),
+    removeTickEventListener: (cb) => timelineManagerRef?.current?.offTick(cb),
     onTimeChange: (time, committer?: TimelineCommitter) =>
       timelineManagerRef?.current?.commit({
         cmd: "SET_TIME",
@@ -105,7 +124,10 @@ export function widgetContextFromMapRef({
           current: time,
           stop: timelineManagerRef.current?.computedTimeline.stop,
         },
-        committer: { source: committer?.source ?? "widgetContext", id: committer?.id },
+        committer: {
+          source: committer?.source ?? "widgetContext",
+          id: committer?.id,
+        },
       }),
     onZoomIn: (...args) => engine()?.zoomIn(...args),
     onZoomOut: (...args) => engine()?.zoomOut(...args),
diff --git a/web/src/beta/features/Visualizer/Crust/hooks.tsx b/web/src/beta/features/Visualizer/Crust/hooks.tsx
index 07cb9d2c7..f57bd4940 100644
--- a/web/src/beta/features/Visualizer/Crust/hooks.tsx
+++ b/web/src/beta/features/Visualizer/Crust/hooks.tsx
@@ -57,7 +57,11 @@ export default function useHook({
 
   const renderWidget = useCallback(
     (widgetProps: WidgetProps): ReactNode => (
-      <Widget widgetProps={widgetProps} commonPluginProps={commonPluginProps} mapRef={mapRef} />
+      <Widget
+        widgetProps={widgetProps}
+        commonPluginProps={commonPluginProps}
+        mapRef={mapRef}
+      />
     ),
     [mapRef, commonPluginProps],
   );
@@ -89,12 +93,12 @@ const Widget: FC<{
   const autoResize = widget?.extended?.vertically
     ? "width-only"
     : widget?.extended?.horizontally
-    ? "height-only"
-    : "both";
+      ? "height-only"
+      : "both";
 
   const onExtend = widgetProps.onExtend;
   const handleOnRender = useCallback<NonNullable<PluginProps["onRender"]>>(
-    options => {
+    (options) => {
       onExtend?.(widget.id, options?.extended);
     },
     [onExtend, widget.id],
diff --git a/web/src/beta/features/Visualizer/Crust/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/index.stories.tsx
index 28bbd56d6..15d0a3ea8 100644
--- a/web/src/beta/features/Visualizer/Crust/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/index.stories.tsx
@@ -1,8 +1,13 @@
+import {
+  Map,
+  engines,
+  Engine,
+  InteractionModeType,
+  INTERACTION_MODES,
+} from "@reearth/core";
 import { Meta, Story } from "@storybook/react";
 import { useRef } from "react";
 
-import { Map, engines, Engine, InteractionModeType, INTERACTION_MODES } from "@reearth/core";
-
 import { MapRef } from "./types";
 
 import Component, { Props } from ".";
@@ -12,7 +17,9 @@ export default {
   parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
-const Template: Story<Props & { engine: Engine; interactionMode: InteractionModeType }> = args => {
+const Template: Story<
+  Props & { engine: Engine; interactionMode: InteractionModeType }
+> = (args) => {
   const ref = useRef<MapRef>(null);
   return (
     <>
diff --git a/web/src/beta/features/Visualizer/Crust/index.tsx b/web/src/beta/features/Visualizer/Crust/index.tsx
index a3f281b36..a903981e3 100644
--- a/web/src/beta/features/Visualizer/Crust/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/index.tsx
@@ -1,5 +1,3 @@
-import { useMemo, type RefObject, useContext } from "react";
-
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import {
   coreContext,
@@ -9,12 +7,17 @@ import {
   type Camera,
   type MapRef,
 } from "@reearth/core";
+import { useMemo, type RefObject, useContext } from "react";
 
 import { useWidgetContext } from "./context";
 import useHooks from "./hooks";
 import Infobox, { InstallableInfoboxBlock } from "./Infobox";
 import { Infobox as InfoboxType } from "./Infobox/types";
-import Plugins, { type ExternalPluginProps, ModalContainer, PopupContainer } from "./Plugins";
+import Plugins, {
+  type ExternalPluginProps,
+  ModalContainer,
+  PopupContainer,
+} from "./Plugins";
 import StoryPanel, { InstallableStoryBlock, StoryPanelRef } from "./StoryPanel";
 import { Story } from "./StoryPanel/types";
 import { WidgetThemeOptions, usePublishTheme } from "./theme";
@@ -67,7 +70,7 @@ export type Props = {
   widgetThemeOptions?: WidgetThemeOptions;
   widgetAlignSystem?: WidgetAlignSystemType;
   widgetAlignSystemEditing?: boolean;
-  widgetLayoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  widgetLayoutConstraint?: Record<string, WidgetLayoutConstraint>;
   floatingWidgets?: InternalWidget[];
   selectedWidgetArea?: WidgetAreaType;
   // infobox
@@ -92,7 +95,11 @@ export type Props = {
     extensionId: string,
     index?: number | undefined,
   ) => Promise<void>;
-  onInfoboxBlockMove?: (id: string, targetIndex: number, layerId?: string) => Promise<void>;
+  onInfoboxBlockMove?: (
+    id: string,
+    targetIndex: number,
+    layerId?: string,
+  ) => Promise<void>;
   onInfoboxBlockDelete?: (id?: string) => Promise<void>;
   // Infobox
   onPropertyUpdate?: (
@@ -103,7 +110,10 @@ export type Props = {
     vt?: ValueType,
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -129,7 +139,10 @@ export type Props = {
     index?: number | undefined,
   ) => Promise<void>;
   onStoryBlockMove?: (id: string, targetId: number, blockId: string) => void;
-  onStoryBlockDelete?: (pageId?: string | undefined, blockId?: string | undefined) => Promise<void>;
+  onStoryBlockDelete?: (
+    pageId?: string | undefined,
+    blockId?: string | undefined,
+  ) => Promise<void>;
   onPropertyValueUpdate?: (
     propertyId?: string,
     schemaItemId?: string,
@@ -205,7 +218,10 @@ export default function Crust({
   const widgetTheme = usePublishTheme(widgetThemeOptions);
 
   const selectedLayerId = useMemo(
-    () => ({ layerId: selectedLayer?.layerId, featureId: selectedLayer?.featureId }),
+    () => ({
+      layerId: selectedLayer?.layerId,
+      featureId: selectedLayer?.featureId,
+    }),
     [selectedLayer?.featureId, selectedLayer?.layerId],
   );
 
@@ -228,7 +244,7 @@ export default function Crust({
   });
 
   const featuredInfobox = useMemo(() => {
-    const selected = layers?.find(l => l.id === selectedLayer?.layerId);
+    const selected = layers?.find((l) => l.id === selectedLayer?.layerId);
     return selectedLayerId?.featureId && selected?.infobox
       ? {
           property: selected?.infobox?.property,
@@ -265,7 +281,8 @@ export default function Crust({
       onLayerVisibility={onLayerVisibility}
       onLayerLoad={onLayerLoad}
       onSketchTypeChange={onSketchTypeChange}
-      onCameraForceHorizontalRollChange={handleCameraForceHorizontalRollChange}>
+      onCameraForceHorizontalRollChange={handleCameraForceHorizontalRollChange}
+    >
       <Widgets
         isMobile={viewport?.isMobile}
         isBuilt={isBuilt}
@@ -288,7 +305,10 @@ export default function Crust({
         shownPluginModalInfo={shownPluginModalInfo}
         onPluginModalShow={onPluginModalShow}
       />
-      <PopupContainer shownPluginPopupInfo={shownPluginPopupInfo} ref={pluginPopupContainerRef} />
+      <PopupContainer
+        shownPluginPopupInfo={shownPluginPopupInfo}
+        ref={pluginPopupContainerRef}
+      />
       <Infobox
         infobox={featuredInfobox}
         installableInfoboxBlocks={installableInfoboxBlocks}
diff --git a/web/src/beta/features/Visualizer/Crust/theme/index.ts b/web/src/beta/features/Visualizer/Crust/theme/index.ts
index 00441e9fb..1f83fd9bc 100644
--- a/web/src/beta/features/Visualizer/Crust/theme/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/theme/index.ts
@@ -43,7 +43,8 @@ export function usePublishTheme(sceneThemeOptions?: WidgetThemeOptions): Theme {
 }
 
 export function publishTheme(sceneThemeOptions?: WidgetThemeOptions): Theme {
-  const premadeTheme = premade[sceneThemeOptions?.themeType || defaultThemeType];
+  const premadeTheme =
+    premade[sceneThemeOptions?.themeType || defaultThemeType];
   if (premadeTheme) return premadeTheme;
 
   const options = {
diff --git a/web/src/beta/features/Visualizer/Crust/utils.ts b/web/src/beta/features/Visualizer/Crust/utils.ts
index 744a9caca..75a86004d 100644
--- a/web/src/beta/features/Visualizer/Crust/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/utils.ts
@@ -1,6 +1,5 @@
-import { useCallback, useRef } from "react";
-
 import { css } from "@reearth/services/theme";
+import { useCallback, useRef } from "react";
 
 import { Typography } from "./types";
 
@@ -20,22 +19,25 @@ export const getCSSFontFamily = (f?: string) => {
   return !f
     ? undefined
     : f === "YuGothic"
-    ? `"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic"`
-    : f;
+      ? `"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic"`
+      : f;
 };
 
 export const toCSSFont = (t?: Typography, d?: Typography) => {
   const ff = getCSSFontFamily(t?.fontFamily ?? d?.fontFamily)
     ?.replace("'", '"')
     .trim();
-  return `${t?.italic ?? d?.italic ? "italic " : ""}${
-    t?.bold ?? d?.bold ? "bold " : (t?.fontWeight ?? d?.fontWeight ?? "") + " "
+  return `${(t?.italic ?? d?.italic) ? "italic " : ""}${
+    (t?.bold ?? d?.bold)
+      ? "bold "
+      : (t?.fontWeight ?? d?.fontWeight ?? "") + " "
   }${t?.fontSize ?? d?.fontSize ?? 16}px ${
     ff ? (ff.includes(`"`) ? ff : `"${ff}"`) : "sans-serif"
   }`;
 };
 
-export const toTextDecoration = (t?: Typography) => (t?.underline ? "underline" : "none");
+export const toTextDecoration = (t?: Typography) =>
+  t?.underline ? "underline" : "none";
 
 export function useGet<T>(value: T): () => T {
   const ref = useRef<T>(value);
diff --git a/web/src/beta/features/Visualizer/FovSlider/hooks.ts b/web/src/beta/features/Visualizer/FovSlider/hooks.ts
index f672df028..6ee53fb4b 100644
--- a/web/src/beta/features/Visualizer/FovSlider/hooks.ts
+++ b/web/src/beta/features/Visualizer/FovSlider/hooks.ts
@@ -1,6 +1,5 @@
-import { useCallback } from "react";
-
 import { Camera } from "@reearth/beta/utils/value";
+import { useCallback } from "react";
 
 type Params = {
   onIsCapturingChange?: (isCapturing: boolean) => void;
@@ -9,17 +8,21 @@ type Params = {
 };
 
 export default ({ onIsCapturingChange, camera, onFovChange }: Params) => {
-  const finishCapture = useCallback(() => onIsCapturingChange?.(false), [onIsCapturingChange]);
+  const finishCapture = useCallback(
+    () => onIsCapturingChange?.(false),
+    [onIsCapturingChange],
+  );
 
   const updateFov = useCallback(
-    (fov: number) => onFovChange?.(Math.max(0.01, Math.min(fov, Math.PI - 10 ** -10))),
+    (fov: number) =>
+      onFovChange?.(Math.max(0.01, Math.min(fov, Math.PI - 10 ** -10))),
     [onFovChange],
   );
 
   const isAwayTarget = useCallback((e: Event) => {
     const target = e.target as HTMLElement | null;
     const popups = Array.from(document.querySelectorAll("[data-camera-popup]"));
-    return !popups.some(element => element.contains(target));
+    return !popups.some((element) => element.contains(target));
   }, []);
 
   const handleClickAway = useCallback(
diff --git a/web/src/beta/features/Visualizer/FovSlider/index.tsx b/web/src/beta/features/Visualizer/FovSlider/index.tsx
index b54d1eb13..4d0a617ca 100644
--- a/web/src/beta/features/Visualizer/FovSlider/index.tsx
+++ b/web/src/beta/features/Visualizer/FovSlider/index.tsx
@@ -1,11 +1,10 @@
-import React from "react";
-
 import FloatedPanel from "@reearth/beta/components/FloatedPanel";
 import Slider from "@reearth/beta/components/Slider";
 import Text from "@reearth/beta/components/Text";
 import { Camera } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import React from "react";
 
 import useHooks from "./hooks";
 
@@ -16,7 +15,12 @@ type Props = {
   onFovChange?: (fov: number) => void;
 };
 
-const FovSlider: React.FC<Props> = ({ visible, onIsCapturingChange, camera, onFovChange }) => {
+const FovSlider: React.FC<Props> = ({
+  visible,
+  onIsCapturingChange,
+  camera,
+  onFovChange,
+}) => {
   const t = useT();
 
   const { updateFov, handleClickAway } = useHooks({
@@ -34,7 +38,8 @@ const FovSlider: React.FC<Props> = ({ visible, onIsCapturingChange, camera, onFo
           <Text
             size="footnote"
             color={theme.content.withBackground}
-            otherProperties={{ marginRight: "16px" }}>
+            otherProperties={{ marginRight: "16px" }}
+          >
             {t("Angle")}
           </Text>
           <FieldForm>
diff --git a/web/src/beta/features/Visualizer/hooks.ts b/web/src/beta/features/Visualizer/hooks.ts
index 337cd65cb..b0dcdb4c0 100644
--- a/web/src/beta/features/Visualizer/hooks.ts
+++ b/web/src/beta/features/Visualizer/hooks.ts
@@ -1,7 +1,6 @@
-import { useCallback, useLayoutEffect, useMemo, useRef } from "react";
-
 import { Camera } from "@reearth/beta/utils/value";
 import { ViewerProperty, ComputedFeature, ComputedLayer } from "@reearth/core";
+import { useCallback, useLayoutEffect, useMemo, useRef } from "react";
 
 import { useVisualizerCamera } from "./atoms";
 import { BuiltinWidgets } from "./Crust";
@@ -25,12 +24,13 @@ export default function useHooks({
 }) {
   const shouldRender = useMemo(() => {
     const shouldWidgetAnimate = ownBuiltinWidgets?.some(
-      id => !!getBuiltinWidgetOptions(id).animation,
+      (id) => !!getBuiltinWidgetOptions(id).animation,
     );
     return shouldWidgetAnimate;
   }, [ownBuiltinWidgets]);
 
-  const [overriddenViewerProperty, overrideViewerProperty] = useOverriddenProperty(viewerProperty);
+  const [overriddenViewerProperty, overrideViewerProperty] =
+    useOverriddenProperty(viewerProperty);
 
   const storyWrapperRef = useRef<HTMLDivElement>(null);
 
diff --git a/web/src/beta/features/Visualizer/index.tsx b/web/src/beta/features/Visualizer/index.tsx
index 6bdeb8615..c41001626 100644
--- a/web/src/beta/features/Visualizer/index.tsx
+++ b/web/src/beta/features/Visualizer/index.tsx
@@ -1,7 +1,10 @@
 import styled from "@emotion/styled";
-import { FC, MutableRefObject, SetStateAction } from "react";
-
-import { Camera, LatLng, ValueType, ValueTypes } from "@reearth/beta/utils/value";
+import {
+  Camera,
+  LatLng,
+  ValueType,
+  ValueTypes,
+} from "@reearth/beta/utils/value";
 import {
   type SketchFeature,
   type SketchType,
@@ -14,6 +17,7 @@ import {
 } from "@reearth/core";
 import { config } from "@reearth/services/config";
 import { WidgetAreaState } from "@reearth/services/state";
+import { FC, MutableRefObject, SetStateAction } from "react";
 
 import Crust from "./Crust";
 import { InstallableInfoboxBlock } from "./Crust/Infobox";
@@ -21,7 +25,12 @@ import { InstallableStoryBlock, StoryPanelRef } from "./Crust/StoryPanel";
 import { Position, Story } from "./Crust/StoryPanel/types";
 import { WidgetThemeOptions } from "./Crust/theme";
 import { InteractionModeType, MapRef } from "./Crust/types";
-import { Alignment, Widget, WidgetAlignSystem, WidgetLayoutConstraint } from "./Crust/Widgets";
+import {
+  Alignment,
+  Widget,
+  WidgetAlignSystem,
+  WidgetLayoutConstraint,
+} from "./Crust/Widgets";
 import type { Location } from "./Crust/Widgets";
 import useHooks from "./hooks";
 
@@ -40,18 +49,10 @@ type VisualizerProps = {
     })[];
     alignSystem?: WidgetAlignSystem;
     ownBuiltinWidgets: string[];
-    layoutConstraint?:
-      | {
-          [x: string]: WidgetLayoutConstraint;
-        }
-      | undefined;
+    layoutConstraint?: Record<string, WidgetLayoutConstraint> | undefined;
   };
   viewerProperty?: ViewerProperty;
-  pluginProperty?:
-    | {
-        [key: string]: any;
-      }
-    | undefined;
+  pluginProperty?: Record<string, any> | undefined;
   story?: Story;
   zoomedLayerId?: string;
   visualizerRef?: MutableRefObject<MapRef | null>;
@@ -64,7 +65,11 @@ type VisualizerProps = {
     layer: ComputedLayer | undefined,
     feature: ComputedFeature | undefined,
   ) => void;
-  handleLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
+  handleLayerDrop?: (
+    layerId: string,
+    propertyKey: string,
+    position: LatLng | undefined,
+  ) => void;
   handleZoomToLayer?: (layerId: string | undefined) => void;
   handleSketchTypeChange?: (type: SketchType | undefined) => void;
   handleSketchFeatureCreate?: (feature: SketchFeature | null) => void;
@@ -81,8 +86,13 @@ type VisualizerProps = {
       index?: number | undefined;
     },
   ) => Promise<void>;
-  handleWidgetAlignSystemUpdate?: (location: Location, align: Alignment) => Promise<void>;
-  selectWidgetArea?: (update?: SetStateAction<WidgetAreaState | undefined>) => void;
+  handleWidgetAlignSystemUpdate?: (
+    location: Location,
+    align: Alignment,
+  ) => Promise<void>;
+  selectWidgetArea?: (
+    update?: SetStateAction<WidgetAreaState | undefined>,
+  ) => void;
   // infobox
   installableInfoboxBlocks?: InstallableInfoboxBlock[];
   handleInfoboxBlockCreate?: (
@@ -96,14 +106,21 @@ type VisualizerProps = {
   showStoryPanel?: boolean;
   storyPanelRef?: MutableRefObject<StoryPanelRef | null>;
   installableStoryBlocks?: InstallableStoryBlock[];
-  handleStoryPageChange?: (id?: string, disableScrollIntoView?: boolean) => void;
+  handleStoryPageChange?: (
+    id?: string,
+    disableScrollIntoView?: boolean,
+  ) => void;
   handleStoryBlockCreate?: (
     pageId?: string | undefined,
     extensionId?: string | undefined,
     pluginId?: string | undefined,
     index?: number | undefined,
   ) => Promise<void>;
-  handleStoryBlockMove?: (id: string, targetId: number, blockId: string) => void;
+  handleStoryBlockMove?: (
+    id: string,
+    targetId: number,
+    blockId: string,
+  ) => void;
   handleStoryBlockDelete?: (
     pageId?: string | undefined,
     blockId?: string | undefined,
@@ -116,7 +133,10 @@ type VisualizerProps = {
     vt?: ValueType,
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
-  handlePropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  handlePropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   handlePropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -215,7 +235,8 @@ const Visualizer: FC<VisualizerProps> = ({
         onZoomToLayer={handleZoomToLayer}
         onSketchTypeChangeProp={handleSketchTypeChange}
         onSketchFeatureCreate={handleSketchFeatureCreate}
-        onMount={handleMount}>
+        onMount={handleMount}
+      >
         <Crust
           engineName={engine}
           isBuilt={!!isBuilt}
diff --git a/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx b/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx
index ab02f14c3..e28ffbba4 100644
--- a/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx
@@ -1,5 +1,3 @@
-import { Dispatch, FC, Fragment, MouseEvent, SetStateAction } from "react";
-
 import {
   Icon,
   IconName,
@@ -10,6 +8,7 @@ import {
 } from "@reearth/beta/lib/reearth-ui";
 import { stopClickPropagation } from "@reearth/beta/utils/events";
 import { styled } from "@reearth/services/theme";
+import { Dispatch, FC, Fragment, MouseEvent, SetStateAction } from "react";
 
 import { FieldComponent } from "../../hooks/useFieldComponent";
 
@@ -20,7 +19,11 @@ export type ActionItem = {
   onClick?: (e?: MouseEvent<HTMLDivElement>) => void;
 };
 
-export type ActionPosition = "left-top" | "left-bottom" | "right-top" | "right-bottom";
+export type ActionPosition =
+  | "left-top"
+  | "left-bottom"
+  | "right-top"
+  | "right-bottom";
 
 type Props = {
   isSelected?: boolean;
@@ -49,7 +52,10 @@ type Props = {
     v?: any,
   ) => Promise<void>;
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -88,13 +94,20 @@ const ActionPanel: FC<Props> = ({
   onPropertyItemDelete,
   onPopupMenuClick,
 }) => (
-  <Wrapper isSelected={isSelected} position={position} onClick={stopClickPropagation}>
+  <Wrapper
+    isSelected={isSelected}
+    position={position}
+    onClick={stopClickPropagation}
+  >
     {dndEnabled && (
       <DndHandle className={dragHandleClassName}>
         <Icon icon="dotsSixVertical" size="normal" />
       </DndHandle>
     )}
-    <BlockOptions isSelected={isSelected} onClick={!isSelected ? onClick : undefined}>
+    <BlockOptions
+      isSelected={isSelected}
+      onClick={!isSelected ? onClick : undefined}
+    >
       {actionItems.map(
         (a, idx) =>
           !a.hide && (
@@ -105,7 +118,11 @@ const ActionPanel: FC<Props> = ({
                     <PopupMenu
                       label={
                         <OptionWrapper showPointer={!isSelected || !!a.onClick}>
-                          <OptionIcon icon={a.icon} size="normal" border={idx !== 0} />
+                          <OptionIcon
+                            icon={a.icon}
+                            size="normal"
+                            border={idx !== 0}
+                          />
                           {a.name && <TitleWrapper>{a.name}</TitleWrapper>}
                         </OptionWrapper>
                       }
@@ -121,7 +138,8 @@ const ActionPanel: FC<Props> = ({
                       open={showSettings && isSelected}
                       onOpenChange={onSettingsToggle}
                       placement="bottom-end"
-                      offset={16}>
+                      offset={16}
+                    >
                       <PopupContent>
                         <PopupPanel
                           title={settingsTitle}
@@ -130,27 +148,32 @@ const ActionPanel: FC<Props> = ({
                             setOpenMenu(true);
                             onSettingsToggle?.();
                           }}
-                          width={200}>
+                          width={200}
+                        >
                           {propertyId && contentSettings && (
                             <SettingsContent>
                               <FieldsWrapper>
-                                {Object.keys(contentSettings).map((fieldId, index) => {
-                                  const field = contentSettings[fieldId];
-                                  const groupId = overrideGroupId || "panel";
-                                  return (
-                                    <FieldComponent
-                                      key={index}
-                                      propertyId={propertyId}
-                                      groupId={groupId}
-                                      fieldId={fieldId}
-                                      field={field}
-                                      onPropertyUpdate={onPropertyUpdate}
-                                      onPropertyItemAdd={onPropertyItemAdd}
-                                      onPropertyItemMove={onPropertyItemMove}
-                                      onPropertyItemDelete={onPropertyItemDelete}
-                                    />
-                                  );
-                                })}
+                                {Object.keys(contentSettings).map(
+                                  (fieldId, index) => {
+                                    const field = contentSettings[fieldId];
+                                    const groupId = overrideGroupId || "panel";
+                                    return (
+                                      <FieldComponent
+                                        key={index}
+                                        propertyId={propertyId}
+                                        groupId={groupId}
+                                        fieldId={fieldId}
+                                        field={field}
+                                        onPropertyUpdate={onPropertyUpdate}
+                                        onPropertyItemAdd={onPropertyItemAdd}
+                                        onPropertyItemMove={onPropertyItemMove}
+                                        onPropertyItemDelete={
+                                          onPropertyItemDelete
+                                        }
+                                      />
+                                    );
+                                  },
+                                )}
                               </FieldsWrapper>
                             </SettingsContent>
                           )}
@@ -160,7 +183,10 @@ const ActionPanel: FC<Props> = ({
                   )}
                 </>
               ) : (
-                <OptionWrapper showPointer={!isSelected || !!a.onClick} onClick={a.onClick}>
+                <OptionWrapper
+                  showPointer={!isSelected || !!a.onClick}
+                  onClick={a.onClick}
+                >
                   <OptionIcon icon={a.icon} size="normal" border={idx !== 0} />
                   {a.name && <TitleWrapper>{a.name}</TitleWrapper>}
                 </OptionWrapper>
@@ -186,9 +212,19 @@ const Wrapper = styled("div")<{
   height: "24px",
   position: "absolute",
   maxWidth: "100%",
-  left: position === "left-top" ? "-1px" : position === "left-bottom" ? "0" : "auto",
+  left:
+    position === "left-top"
+      ? "-1px"
+      : position === "left-bottom"
+        ? "0"
+        : "auto",
   top: position === "left-top" || position === "right-top" ? "-25px" : "0",
-  right: position === "right-bottom" ? "0" : position === "right-top" ? "-1px" : "auto",
+  right:
+    position === "right-bottom"
+      ? "0"
+      : position === "right-top"
+        ? "-1px"
+        : "auto",
 }));
 
 const FieldsWrapper = styled("div")(({ theme }) => ({
diff --git a/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx b/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx
index 3373048f6..cc5373f5e 100644
--- a/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx
@@ -1,7 +1,6 @@
-import { FC, useEffect, useMemo } from "react";
-
 import { Icon, PopupMenu, PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC, useEffect, useMemo } from "react";
 
 import { getIconName } from "../../../Crust/StoryPanel/utils";
 import { InstallableBlock } from "../../types";
@@ -29,7 +28,7 @@ const BlockAddBar: FC<Props> = ({
 }) => {
   const items: PopupMenuItem[] = useMemo(
     () =>
-      installableBlocks?.map?.(b => {
+      installableBlocks?.map?.((b) => {
         return {
           id: `${b.extensionId}-${b.pluginId}`,
           title: b.name,
@@ -43,7 +42,10 @@ const BlockAddBar: FC<Props> = ({
     [installableBlocks, onBlockAdd, onBlockOpen],
   );
 
-  const persist = useMemo(() => alwaysShow || openBlocks, [alwaysShow, openBlocks]);
+  const persist = useMemo(
+    () => alwaysShow || openBlocks,
+    [alwaysShow, openBlocks],
+  );
 
   useEffect(() => {
     if (!id) return;
@@ -61,8 +63,9 @@ const BlockAddBar: FC<Props> = ({
         id={id}
         height={showAreaHeight}
         persist={persist}
-        onClick={e => e.stopPropagation()}
-        onMouseOver={e => e.stopPropagation()}>
+        onClick={(e) => e.stopPropagation()}
+        onMouseOver={(e) => e.stopPropagation()}
+      >
         <PopupMenu
           placement="bottom-start"
           openMenu={openBlocks}
@@ -84,23 +87,25 @@ const Wrapper = styled("div")(({ theme }) => ({
   zIndex: theme.zIndexes.visualizer.storyBlockAddBar,
 }));
 
-const Bar = styled("div")<{ height?: number; persist?: boolean }>(({ height, persist, theme }) => ({
-  position: "absolute",
-  left: 0,
-  right: 0,
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing.small + 2,
-  height: height ? `${height}px` : "1px",
-  cursor: "pointer",
-  "&:hover > *": {
-    opacity: "100%",
-  },
-  "& > *": {
-    opacity: persist ? "100%" : "0%",
-    transition: "opacity 0.4s",
-  },
-}));
+const Bar = styled("div")<{ height?: number; persist?: boolean }>(
+  ({ height, persist, theme }) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing.small + 2,
+    height: height ? `${height}px` : "1px",
+    cursor: "pointer",
+    "&:hover > *": {
+      opacity: "100%",
+    },
+    "& > *": {
+      opacity: persist ? "100%" : "0%",
+      transition: "opacity 0.4s",
+    },
+  }),
+);
 
 const StyledIcon = styled(Icon)<{ persist?: boolean }>(({ theme }) => ({
   color: theme.content.main,
@@ -118,7 +123,8 @@ const Line = styled("div")<{ persist?: boolean }>(({ theme }) => ({
 export default BlockAddBar;
 
 const showWhenCloseToElement =
-  (id?: string, persist?: boolean, parentWidth?: number) => (event: MouseEvent) => {
+  (id?: string, persist?: boolean, parentWidth?: number) =>
+  (event: MouseEvent) => {
     if (!id) return;
 
     const targetElement = document.getElementById(id) as HTMLElement;
@@ -148,18 +154,18 @@ const showWhenCloseToElement =
     // If the cursor is close enough to the target element, show it; otherwise, hide it
     if (distanceX < xProximityThreshold && distanceY < yProximityThreshold) {
       const children = targetElement.children;
-      for (let i = 0; i < children.length; i++) {
-        const child = children[i] as HTMLElement;
-        if (child.style.opacity === "100%") return;
-        child.style.opacity = "100%";
+      for (const child of children) {
+        const element = child as HTMLElement;
+        if (element.style.opacity === "100%") return;
+        element.style.opacity = "100%";
       }
     } else {
       if (persist) return;
       const children = targetElement.children;
-      for (let i = 0; i < children.length; i++) {
-        const child = children[i] as HTMLElement;
-        if (child.style.opacity === "0%") return;
-        child.style.opacity = "0%";
+      for (const child of children) {
+        const element = child as HTMLElement;
+        if (element.style.opacity === "0%") return;
+        element.style.opacity = "0%";
       }
     }
   };
diff --git a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts
index 91495280f..7924ad23e 100644
--- a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts
+++ b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts
@@ -1,12 +1,23 @@
-import { useCallback, useMemo, useState, MouseEvent, useEffect } from "react";
-
 import useDoubleClick from "@reearth/beta/utils/use-double-click";
 import { Spacing } from "@reearth/core";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  MouseEvent,
+  useEffect,
+  useRef,
+} from "react";
 
 import { calculatePaddingValue } from "../../../Crust/StoryPanel/utils";
 import { useEditModeContext } from "../../contexts/editModeContext";
 
-export const DEFAULT_BLOCK_PADDING: Spacing = { top: 0, bottom: 0, left: 0, right: 0 };
+export const DEFAULT_BLOCK_PADDING: Spacing = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
 
 export default ({
   name,
@@ -48,17 +59,27 @@ export default ({
     [editModeContext],
   );
 
+  const handleSelectionDisable = useCallback(() => {
+    editModeContext?.onSelectionDisable?.(false);
+  }, [editModeContext]);
+
+  const handleSelectionDisableRef = useRef(handleSelectionDisable);
+  handleSelectionDisableRef.current = handleSelectionDisable;
+
   useEffect(
     () => () => {
       // This is necessary to prevent the selection from being permanently disabled when the block is unmounted
       if (editMode && disableSelection) {
-        editModeContext?.onSelectionDisable?.(false);
+        handleSelectionDisableRef.current?.();
       }
     },
-    [editMode, disableSelection], // eslint-disable-line react-hooks/exhaustive-deps
+    [editMode, disableSelection],
   );
 
-  const handleSettingsToggle = useCallback(() => setShowSettings?.(s => !s), []);
+  const handleSettingsToggle = useCallback(
+    () => setShowSettings?.((s) => !s),
+    [],
+  );
 
   const title = useMemo(() => name ?? property?.title, [name, property?.title]);
 
@@ -83,10 +104,14 @@ export default ({
     [showSettings, isSelected, editMode, handleSingleClick],
   );
 
-  const defaultSettings = useMemo(() => property?.default ?? property?.title, [property]);
+  const defaultSettings = useMemo(
+    () => property?.default ?? property?.title,
+    [property],
+  );
 
   const groupId = useMemo(
-    () => (property?.default ? "default" : property?.title ? "title" : undefined),
+    () =>
+      property?.default ? "default" : property?.title ? "title" : undefined,
     [property],
   );
 
diff --git a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx
index 021c358e2..6a0d98512 100644
--- a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx
@@ -1,11 +1,10 @@
-import { FC, ReactNode, createContext, memo } from "react";
-
 import { Collapse } from "@reearth/beta/lib/reearth-ui";
 import PropertyItem from "@reearth/beta/ui/fields/Properties";
 import { stopClickPropagation } from "@reearth/beta/utils/events";
 import { FlyTo } from "@reearth/core";
 import { Item } from "@reearth/services/api/propertyApi/utils";
 import { styled } from "@reearth/services/theme";
+import { FC, ReactNode, createContext, memo } from "react";
 
 import Template from "../../../Crust/StoryPanel/Block/Template";
 import { FieldComponent } from "../../hooks/useFieldComponent";
@@ -13,7 +12,9 @@ import SelectableArea from "../SelectableArea";
 
 import useHooks from "./hooks";
 
-export const BlockContext = createContext<{ editMode?: boolean } | undefined>(undefined);
+export const BlockContext = createContext<{ editMode?: boolean } | undefined>(
+  undefined,
+);
 
 type Spacing = {
   top: number;
@@ -48,7 +49,10 @@ type Props = {
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -119,13 +123,15 @@ const BlockWrapper: FC<Props> = ({
         dndEnabled={dndEnabled}
         dragHandleClassName={dragHandleClassName}
         showSettings={showSettings}
-        contentSettings={isPluginBlock ? pluginBlockSettings : generalBlockSettings}
+        contentSettings={
+          isPluginBlock ? pluginBlockSettings : generalBlockSettings
+        }
         isPluginBlock={isPluginBlock}
         editMode={editMode}
         isEditable={isEditable}
         hideHoverUI={disableSelection}
         overrideGroupId={groupId === "title" ? groupId : undefined}
-        onClick={e => {
+        onClick={(e) => {
           handleBlockClick(e);
         }}
         onDoubleClick={handleDoubleClick}
@@ -136,41 +142,55 @@ const BlockWrapper: FC<Props> = ({
         onPropertyUpdate={onPropertyUpdate}
         onPropertyItemAdd={onPropertyItemAdd}
         onPropertyItemMove={onPropertyItemMove}
-        onPropertyItemDelete={onPropertyItemDelete}>
+        onPropertyItemDelete={onPropertyItemDelete}
+      >
         <Block
           padding={generalBlockSettings?.padding?.value}
           isEditable={isEditable}
-          disableSelection={disableSelection}>
-          {children ?? (isEditable && <Template icon={icon} height={minHeight} />)}
-          {!editMode && isEditable && <Overlay disableSelection={disableSelection} />}
+          disableSelection={disableSelection}
+        >
+          {children ??
+            (isEditable && <Template icon={icon} height={minHeight} />)}
+          {!editMode && isEditable && (
+            <Overlay disableSelection={disableSelection} />
+          )}
         </Block>
-        {editMode && groupId && propertyId && settingsEnabled && !isPluginBlock && (
-          <EditorPanel onClick={stopClickPropagation}>
-            <FieldsWrapper>
-              {Object.keys(defaultSettings).map((fieldId, idx) => {
-                const field = defaultSettings[fieldId];
-                return (
-                  <FieldComponent
-                    key={groupId + propertyId + idx}
-                    propertyId={propertyId}
-                    groupId={groupId}
-                    fieldId={fieldId}
-                    field={field}
-                    onPropertyUpdate={onPropertyUpdate}
-                    onPropertyItemAdd={onPropertyItemAdd}
-                    onPropertyItemMove={onPropertyItemMove}
-                    onPropertyItemDelete={onPropertyItemDelete}
-                  />
-                );
-              })}
-            </FieldsWrapper>
-          </EditorPanel>
-        )}
+        {editMode &&
+          groupId &&
+          propertyId &&
+          settingsEnabled &&
+          !isPluginBlock && (
+            <EditorPanel onClick={stopClickPropagation}>
+              <FieldsWrapper>
+                {Object.keys(defaultSettings).map((fieldId, idx) => {
+                  const field = defaultSettings[fieldId];
+                  return (
+                    <FieldComponent
+                      key={groupId + propertyId + idx}
+                      propertyId={propertyId}
+                      groupId={groupId}
+                      fieldId={fieldId}
+                      field={field}
+                      onPropertyUpdate={onPropertyUpdate}
+                      onPropertyItemAdd={onPropertyItemAdd}
+                      onPropertyItemMove={onPropertyItemMove}
+                      onPropertyItemDelete={onPropertyItemDelete}
+                    />
+                  );
+                })}
+              </FieldsWrapper>
+            </EditorPanel>
+          )}
         {editMode && propertyId && settingsEnabled && isPluginBlock && (
           <EditorPanel onClick={stopClickPropagation}>
             {propertyItemsForPluginBlock?.map((i, idx) => (
               <Collapse title={i.title} key={idx}>
-                <PropertyItem key={i.id} propertyId={propertyId} item={i} onFlyTo={onFlyTo} />
+                <PropertyItem
+                  key={i.id}
+                  propertyId={propertyId}
+                  item={i}
+                  onFlyTo={onFlyTo}
+                />
               </Collapse>
             ))}
           </EditorPanel>
@@ -204,12 +224,14 @@ const EditorPanel = styled("div")(({ theme }) => ({
   background: theme.bg[1],
 }));
 
-const Overlay = styled("div")<{ disableSelection?: boolean }>(({ disableSelection }) => ({
-  position: "absolute",
-  height: "100%",
-  width: "100%",
-  cursor: !disableSelection ? "pointer" : undefined,
-}));
+const Overlay = styled("div")<{ disableSelection?: boolean }>(
+  ({ disableSelection }) => ({
+    position: "absolute",
+    height: "100%",
+    width: "100%",
+    cursor: !disableSelection ? "pointer" : undefined,
+  }),
+);
 
 const FieldsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
diff --git a/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx b/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx
index fdf5228c0..010c5c0b8 100644
--- a/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx
@@ -1,7 +1,6 @@
-import { ForwardRefRenderFunction, ReactNode, forwardRef } from "react";
-
 import { Spacing } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { ForwardRefRenderFunction, ReactNode, forwardRef } from "react";
 
 export type Props = {
   children?: ReactNode;
@@ -14,17 +13,28 @@ export type Props = {
 };
 
 const ContentWrapper: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { id, isEditable, minPaddingInEditor, minGapInEditor, padding, gap, children },
+  {
+    id,
+    isEditable,
+    minPaddingInEditor,
+    minGapInEditor,
+    padding,
+    gap,
+    children,
+  },
   ref,
 ) => (
   <Wrapper
     id={id}
     ref={ref}
     isEditable={isEditable}
-    minPaddingInEditor={minPaddingInEditor ?? { top: 0, left: 0, right: 0, bottom: 0 }}
+    minPaddingInEditor={
+      minPaddingInEditor ?? { top: 0, left: 0, right: 0, bottom: 0 }
+    }
     padding={padding ?? { top: 0, left: 0, right: 0, bottom: 0 }}
     minGapInEditor={minGapInEditor ?? 0}
-    gap={gap}>
+    gap={gap}
+  >
     {children}
   </Wrapper>
 );
@@ -37,26 +47,38 @@ const Wrapper = styled("div")<{
   isEditable?: boolean;
   minPaddingInEditor: Spacing;
   minGapInEditor: number;
-}>(({ padding, gap, isEditable, minGapInEditor, minPaddingInEditor, theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  color: theme.content.weaker,
-  gap: gap !== undefined && isEditable && gap < minGapInEditor ? `${minGapInEditor}px` : `${gap}px`,
-  paddingTop:
-    isEditable && padding.top < minPaddingInEditor.top
-      ? `${minPaddingInEditor.top}px`
-      : `${padding.top}px`,
-  paddingBottom:
-    isEditable && padding.bottom < minPaddingInEditor.bottom
-      ? `${minPaddingInEditor.bottom}px`
-      : `${padding.bottom}px`,
-  paddingLeft:
-    isEditable && padding.left < minPaddingInEditor.left
-      ? `${minPaddingInEditor.left}px`
-      : `${padding.left}px`,
-  paddingRight:
-    isEditable && padding.right < minPaddingInEditor.right
-      ? `${minPaddingInEditor.right}px`
-      : `${padding.right}px`,
-  boxSizing: "border-box",
-}));
+}>(
+  ({
+    padding,
+    gap,
+    isEditable,
+    minGapInEditor,
+    minPaddingInEditor,
+    theme,
+  }) => ({
+    display: "flex",
+    flexDirection: "column",
+    color: theme.content.weaker,
+    gap:
+      gap !== undefined && isEditable && gap < minGapInEditor
+        ? `${minGapInEditor}px`
+        : `${gap}px`,
+    paddingTop:
+      isEditable && padding.top < minPaddingInEditor.top
+        ? `${minPaddingInEditor.top}px`
+        : `${padding.top}px`,
+    paddingBottom:
+      isEditable && padding.bottom < minPaddingInEditor.bottom
+        ? `${minPaddingInEditor.bottom}px`
+        : `${padding.bottom}px`,
+    paddingLeft:
+      isEditable && padding.left < minPaddingInEditor.left
+        ? `${minPaddingInEditor.left}px`
+        : `${padding.left}px`,
+    paddingRight:
+      isEditable && padding.right < minPaddingInEditor.right
+        ? `${minPaddingInEditor.right}px`
+        : `${padding.right}px`,
+    boxSizing: "border-box",
+  }),
+);
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts
index 31f85e34f..7ec155001 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts
@@ -1,8 +1,14 @@
-import { Dispatch, MouseEvent, SetStateAction, useCallback, useMemo, useState } from "react";
-
 import { getIconName } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { IconName, PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
+import {
+  Dispatch,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 import type { ActionItem } from "../../ActionPanel";
 
@@ -82,7 +88,11 @@ export default ({
       },
     ];
 
-    if (onEditModeToggle && !!contentSettings && Object.keys(contentSettings).length !== 0) {
+    if (
+      onEditModeToggle &&
+      !!contentSettings &&
+      Object.keys(contentSettings).length !== 0
+    ) {
       menuItems.push({
         icon: editMode ? "exit" : "editMode",
         hide: !isSelected,
@@ -99,7 +109,16 @@ export default ({
     }
 
     return menuItems;
-  }, [title, icon, isSelected, editMode, contentSettings, t, onEditModeToggle, onSettingsToggle]);
+  }, [
+    title,
+    icon,
+    isSelected,
+    editMode,
+    contentSettings,
+    t,
+    onEditModeToggle,
+    onSettingsToggle,
+  ]);
 
   const handlePopupMenuClick = useCallback((e: MouseEvent) => {
     e.stopPropagation();
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx
index afb4dd2b2..86d7f28f5 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx
@@ -34,7 +34,10 @@ type Props = {
     v?: any,
   ) => Promise<void>;
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -63,19 +66,25 @@ const ActionPanel: FC<Props> = ({
   onRemove,
   ...actionProps
 }) => {
-  const { settingsTitle, popupMenuItem, actionItems, openMenu, setOpenMenu, handlePopupMenuClick } =
-    useHooks({
-      title,
-      icon,
-      isSelected,
-      editMode,
-      contentSettings,
-      isPluginBlock,
-      setShowPadding,
-      onEditModeToggle,
-      onSettingsToggle,
-      onRemove,
-    });
+  const {
+    settingsTitle,
+    popupMenuItem,
+    actionItems,
+    openMenu,
+    setOpenMenu,
+    handlePopupMenuClick,
+  } = useHooks({
+    title,
+    icon,
+    isSelected,
+    editMode,
+    contentSettings,
+    isPluginBlock,
+    setShowPadding,
+    onEditModeToggle,
+    onSettingsToggle,
+    onRemove,
+  });
 
   return (
     <ActionPanelUI
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts b/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts
index 799e17923..b3e108dcb 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts
@@ -7,7 +7,12 @@ type Props = {
   onClickAway?: () => void;
 };
 
-export default ({ editMode, isSelected, onEditModeToggle, onClickAway }: Props) => {
+export default ({
+  editMode,
+  isSelected,
+  onEditModeToggle,
+  onClickAway,
+}: Props) => {
   const [showPadding, setShowPadding] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
 
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx b/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx
index 0363c0dca..fb97a4a96 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx
@@ -1,7 +1,6 @@
-import { FC, MouseEvent, ReactNode } from "react";
-
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { FC, MouseEvent, ReactNode } from "react";
 
 import ClickAwayListener from "../../../Crust/StoryPanel/ClickAwayListener";
 
@@ -40,7 +39,10 @@ type Props = {
     vt?: ValueType,
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -83,7 +85,13 @@ const SelectableArea: FC<Props> = ({
   onPropertyItemMove,
   onPropertyItemDelete,
 }) => {
-  const { showPadding, isHovered, handleHoverChange, setShowPadding, handleClickAway } = useHooks({
+  const {
+    showPadding,
+    isHovered,
+    handleHoverChange,
+    setShowPadding,
+    handleClickAway,
+  } = useHooks({
     editMode,
     isSelected,
     onEditModeToggle,
@@ -100,7 +108,8 @@ const SelectableArea: FC<Props> = ({
         noBorder={noBorder}
         hideHoverUI={hideHoverUI}
         onMouseOver={handleHoverChange(true)}
-        onMouseOut={handleHoverChange(false)}>
+        onMouseOut={handleHoverChange(false)}
+      >
         <div onClick={onClick} onDoubleClick={onDoubleClick}>
           {children}
         </div>
@@ -142,7 +151,9 @@ const Wrapper = styled("div")<{
   noBorder?: boolean;
   hideHoverUI?: boolean;
 }>(({ isSelected, noBorder, hideHoverUI, theme }) => ({
-  border: !noBorder ? `1px solid ${isSelected ? theme.select.main : "transparent"}` : "none",
+  border: !noBorder
+    ? `1px solid ${isSelected ? theme.select.main : "transparent"}`
+    : "none",
   padding: "1px",
   position: "relative",
   transition: "all 0.3s",
diff --git a/web/src/beta/features/Visualizer/shared/contexts/editModeContext.tsx b/web/src/beta/features/Visualizer/shared/contexts/editModeContext.tsx
index 509484f9e..e83844970 100644
--- a/web/src/beta/features/Visualizer/shared/contexts/editModeContext.tsx
+++ b/web/src/beta/features/Visualizer/shared/contexts/editModeContext.tsx
@@ -7,10 +7,11 @@ export type EditModeContext = {
 
 const EditModeContext = createContext<EditModeContext | undefined>(undefined);
 
-export const EditModeProvider: FC<PropsWithChildren<{ value: EditModeContext }>> = ({
-  children,
-  value,
-}) => <EditModeContext.Provider value={value}>{children}</EditModeContext.Provider>;
+export const EditModeProvider: FC<
+  PropsWithChildren<{ value: EditModeContext }>
+> = ({ children, value }) => (
+  <EditModeContext.Provider value={value}>{children}</EditModeContext.Provider>
+);
 
 export const useEditModeContext = (): EditModeContext => {
   const ctx = useContext(EditModeContext);
diff --git a/web/src/beta/features/Visualizer/shared/hooks/useElementOnScreen.tsx b/web/src/beta/features/Visualizer/shared/hooks/useElementOnScreen.tsx
index 74024cc74..610678c67 100644
--- a/web/src/beta/features/Visualizer/shared/hooks/useElementOnScreen.tsx
+++ b/web/src/beta/features/Visualizer/shared/hooks/useElementOnScreen.tsx
@@ -6,7 +6,7 @@ export const useElementOnScreen = (options: IntersectionObserverInit) => {
 
   useEffect(() => {
     const elementRef = containerRef.current;
-    const observer = new IntersectionObserver(entries => {
+    const observer = new IntersectionObserver((entries) => {
       const [entry] = entries;
       setIsIntersecting(entry.isIntersecting);
     }, options);
diff --git a/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx b/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx
index e8c35acf1..1de3a8fc4 100644
--- a/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx
+++ b/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx
@@ -1,5 +1,3 @@
-import { useCallback, useMemo } from "react";
-
 import {
   AssetField,
   CameraField,
@@ -15,6 +13,7 @@ import {
   TwinInputField,
 } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useMemo } from "react";
 
 export const FieldComponent = ({
   propertyId,
@@ -35,7 +34,10 @@ export const FieldComponent = ({
     vt?: any,
     v?: any,
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
@@ -50,9 +52,22 @@ export const FieldComponent = ({
 }) => {
   const t = useT();
   const handlePropertyValueUpdate = useCallback(
-    (schemaGroupId: string, propertyId: string, fieldId: string, vt: any, itemId?: string) => {
+    (
+      schemaGroupId: string,
+      propertyId: string,
+      fieldId: string,
+      vt: any,
+      itemId?: string,
+    ) => {
       return async (v?: any) => {
-        await onPropertyUpdate?.(propertyId, schemaGroupId, fieldId, itemId, vt, v);
+        await onPropertyUpdate?.(
+          propertyId,
+          schemaGroupId,
+          fieldId,
+          itemId,
+          vt,
+          v,
+        );
       };
     },
     [onPropertyUpdate],
@@ -63,8 +78,8 @@ export const FieldComponent = ({
       field.ui === "image"
         ? ["image" as const]
         : field.ui === "file"
-        ? ["file" as const]
-        : undefined,
+          ? ["file" as const]
+          : undefined,
     [field.ui],
   );
 
@@ -76,7 +91,12 @@ export const FieldComponent = ({
       description={field?.description}
       min={field?.min}
       max={field?.max}
-      onBlur={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+      onBlur={handlePropertyValueUpdate(
+        groupId,
+        propertyId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : field?.type === "bool" ? (
     <SwitchField
@@ -84,7 +104,12 @@ export const FieldComponent = ({
       commonTitle={field?.title}
       value={!!field?.value}
       description={field?.description}
-      onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+      onChange={handlePropertyValueUpdate(
+        groupId,
+        propertyId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : field?.type === "latlng" ? (
     <TwinInputField
@@ -92,7 +117,12 @@ export const FieldComponent = ({
       commonTitle={field?.title}
       values={[field?.value?.lat, field?.value?.lng]}
       description={field?.description}
-      onBlur={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+      onBlur={handlePropertyValueUpdate(
+        groupId,
+        propertyId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : field?.type === "camera" ? (
     <CameraField
@@ -100,7 +130,12 @@ export const FieldComponent = ({
       commonTitle={field?.commonTitle}
       value={field?.value}
       description={field?.description}
-      onSave={handlePropertyValueUpdate(propertyId, groupId, fieldId, field?.type)}
+      onSave={handlePropertyValueUpdate(
+        propertyId,
+        groupId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : field?.type === "number" ? (
     <NumberField
@@ -109,17 +144,29 @@ export const FieldComponent = ({
       description={field?.description}
       min={field?.min}
       max={field?.max}
-      onBlur={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+      onBlur={handlePropertyValueUpdate(
+        groupId,
+        propertyId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : field?.type === "url" ? (
     <AssetField
       key={field.id}
       commonTitle={field.name}
       assetsTypes={assetsTypes}
-      inputMethod={field.ui === "video" || field.ui === undefined ? "URL" : "asset"}
+      inputMethod={
+        field.ui === "video" || field.ui === undefined ? "URL" : "asset"
+      }
       value={field.value}
       description={field.description}
-      onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+      onChange={handlePropertyValueUpdate(
+        groupId,
+        propertyId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : field?.type === "string" ? (
     field?.ui === "datetime" ? (
@@ -128,7 +175,12 @@ export const FieldComponent = ({
         commonTitle={field?.title}
         description={field?.description}
         value={field?.value}
-        onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+        onChange={handlePropertyValueUpdate(
+          groupId,
+          propertyId,
+          fieldId,
+          field?.type,
+        )}
       />
     ) : field?.ui === "color" ? (
       <ColorField
@@ -136,7 +188,12 @@ export const FieldComponent = ({
         commonTitle={field?.title}
         description={field?.description}
         value={field?.value}
-        onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+        onChange={handlePropertyValueUpdate(
+          groupId,
+          propertyId,
+          fieldId,
+          field?.type,
+        )}
       />
     ) : field?.ui === "selection" || field?.choices ? (
       <SelectField
@@ -145,12 +202,19 @@ export const FieldComponent = ({
         value={field?.value}
         description={field.description}
         options={
-          field?.choices.map(({ key, title }: { key: string; title: string }) => ({
-            value: key,
-            label: title,
-          })) || []
+          field?.choices.map(
+            ({ key, title }: { key: string; title: string }) => ({
+              value: key,
+              label: title,
+            }),
+          ) || []
         }
-        onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+        onChange={handlePropertyValueUpdate(
+          groupId,
+          propertyId,
+          fieldId,
+          field?.type,
+        )}
       />
     ) : (
       <InputField
@@ -158,7 +222,12 @@ export const FieldComponent = ({
         commonTitle={field?.title}
         value={field?.value}
         description={field?.description}
-        onBlur={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+        onBlur={handlePropertyValueUpdate(
+          groupId,
+          propertyId,
+          fieldId,
+          field?.type,
+        )}
       />
     )
   ) : field?.type === "timeline" ? (
@@ -167,7 +236,12 @@ export const FieldComponent = ({
       commonTitle={field?.title}
       value={field?.value}
       description={field?.description}
-      onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+      onChange={handlePropertyValueUpdate(
+        groupId,
+        propertyId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : field?.type === "array" && field?.ui === "range" ? (
     <RangeField
@@ -179,7 +253,12 @@ export const FieldComponent = ({
       max={field.max}
       content={["min", "max"]}
       description={field.description}
-      onBlur={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
+      onBlur={handlePropertyValueUpdate(
+        groupId,
+        propertyId,
+        fieldId,
+        field?.type,
+      )}
     />
   ) : (
     <div>{t("Unsupported field type")}</div>
diff --git a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
index 335b16add..933aa0b29 100644
--- a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
+++ b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
@@ -1,7 +1,10 @@
+import {
+  useVisualizer,
+  TickEventCallback,
+  TimelineCommitter,
+} from "@reearth/core";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { useVisualizer, TickEventCallback, TimelineCommitter } from "@reearth/core";
-
 import { TimelineValues } from "../../Crust/StoryPanel/Block/builtin/Timeline";
 import {
   convertOptionToSeconds,
@@ -28,7 +31,10 @@ const timeRange = (startTime?: number, stopTime?: number) => {
   return {
     start: startTime || now,
     end: stopTime || stopTime || calculateEndTime(new Date()),
-    mid: calculateMidTime(startTime || now, stopTime || calculateEndTime(new Date())),
+    mid: calculateMidTime(
+      startTime || now,
+      stopTime || calculateEndTime(new Date()),
+    ),
   };
 };
 
@@ -36,22 +42,35 @@ export default (timelineValues?: TimelineValues) => {
   const visualizerContext = useVisualizer();
 
   const playSpeedOptions = useMemo(() => {
-    const speedOpt = ["1sec/sec", "0.5min/sec", "1min/sec", "0.1hr/sec", "0.5hr/sec", "1hr/sec"];
+    const speedOpt = [
+      "1sec/sec",
+      "0.5min/sec",
+      "1min/sec",
+      "0.1hr/sec",
+      "0.5hr/sec",
+      "1hr/sec",
+    ];
     return convertOptionToSeconds(speedOpt);
   }, []);
 
   const [speed, setSpeed] = useState(playSpeedOptions[0].seconds);
 
   const [currentTime, setCurrentTime] = useState(
-    getNewDate(visualizerContext?.current?.timeline?.current?.timeline?.current).getTime(),
+    getNewDate(
+      visualizerContext?.current?.timeline?.current?.timeline?.current,
+    ).getTime(),
   );
 
   const [timezone, setTimezone] = useState<string>(formatTimezone(currentTime));
 
   const range = useMemo(() => {
     if (timelineValues) {
-      const startTime = getNewDate(new Date(formatISO8601(timelineValues?.startTime))).getTime();
-      const endTime = getNewDate(new Date(formatISO8601(timelineValues?.endTime))).getTime();
+      const startTime = getNewDate(
+        new Date(formatISO8601(timelineValues?.startTime)),
+      ).getTime();
+      const endTime = getNewDate(
+        new Date(formatISO8601(timelineValues?.endTime)),
+      ).getTime();
       return timeRange(startTime, endTime);
     } else {
       return timeRange(
@@ -112,11 +131,13 @@ export default (timelineValues?: TimelineValues) => {
   );
 
   const onTick = useCallback(
-    (cb: TickEventCallback) => visualizerContext?.current?.timeline?.current?.onTick(cb),
+    (cb: TickEventCallback) =>
+      visualizerContext?.current?.timeline?.current?.onTick(cb),
     [visualizerContext],
   );
   const removeTickEventListener = useCallback(
-    (cb: TickEventCallback) => visualizerContext?.current?.timeline?.current?.offTick(cb),
+    (cb: TickEventCallback) =>
+      visualizerContext?.current?.timeline?.current?.offTick(cb),
     [visualizerContext],
   );
 
@@ -148,7 +169,9 @@ export default (timelineValues?: TimelineValues) => {
       return setCurrentTime(t);
     } else {
       return setCurrentTime(
-        getNewDate(visualizerContext?.current?.timeline?.current?.timeline?.current).getTime(),
+        getNewDate(
+          visualizerContext?.current?.timeline?.current?.timeline?.current,
+        ).getTime(),
       );
     }
   }, [timelineValues, visualizerContext]);
diff --git a/web/src/beta/features/Visualizer/shared/types.ts b/web/src/beta/features/Visualizer/shared/types.ts
index 08f249846..74a5df42b 100644
--- a/web/src/beta/features/Visualizer/shared/types.ts
+++ b/web/src/beta/features/Visualizer/shared/types.ts
@@ -46,7 +46,10 @@ export type CommonBlockProps<T = any> = {
     vt?: ValueType,
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
-  onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
+  onPropertyItemAdd?: (
+    propertyId?: string,
+    schemaGroupId?: string,
+  ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
diff --git a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts
index cbbc41e96..f8df5f725 100644
--- a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts
+++ b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts
@@ -4,7 +4,9 @@ import { expect, test } from "vitest";
 import { useOverriddenProperty } from "./useOverriddenProperty";
 
 test("overriddenProperty", () => {
-  const { result } = renderHook(() => useOverriddenProperty({ a: 1, b: 2, c: { c1: 3 } }));
+  const { result } = renderHook(() =>
+    useOverriddenProperty({ a: 1, b: 2, c: { c1: 3 } }),
+  );
   const [mergedProperty, overrideProperty] = result.current;
   expect(mergedProperty).toEqual({ a: 1, b: 2, c: { c1: 3 } });
 
diff --git a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts
index 3bc2e403b..ff415f27c 100644
--- a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts
+++ b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts
@@ -1,26 +1,29 @@
 import { cloneDeep, mergeWith, omit } from "lodash-es";
 import { useCallback, useMemo, useState } from "react";
 
-export function useOverriddenProperty<T extends {}>(
+export function useOverriddenProperty<T extends object>(
   property: T | undefined,
 ): [T, (pluginId: string, property: T) => void] {
-  const [overriddenProperties, setOverrideProperty] = useState<{
-    [pluginId: string]: any;
-  }>({});
+  const [overriddenProperties, setOverrideProperty] = useState<
+    Record<string, any>
+  >({});
   const { overriddenPropertyCommon, overriddenProperty } = useMemo(() => {
-    const { "": overriddenPropertyCommon, ...overriddenProperty } = overriddenProperties;
+    const { "": overriddenPropertyCommon, ...overriddenProperty } =
+      overriddenProperties;
     return { overriddenPropertyCommon, overriddenProperty };
   }, [overriddenProperties]);
 
   const overrideProperty = useCallback((pluginId: string, property: any) => {
-    setOverrideProperty(p => (property ? { ...p, [pluginId || ""]: property } : omit(p, pluginId)));
+    setOverrideProperty((p) =>
+      property ? { ...p, [pluginId || ""]: property } : omit(p, pluginId),
+    );
   }, []);
 
   const mergedProperty = useMemo(() => {
-    return [overriddenPropertyCommon, ...Object.values(overriddenProperty)].reduce(
-      (p, v) => mergeProperty(p, v),
-      property,
-    );
+    return [
+      overriddenPropertyCommon,
+      ...Object.values(overriddenProperty),
+    ].reduce((p, v) => mergeProperty(p, v), property);
   }, [property, overriddenPropertyCommon, overriddenProperty]);
 
   return [mergedProperty, overrideProperty];
@@ -31,7 +34,13 @@ export function mergeProperty(a: any, b: any) {
   return mergeWith(
     a2,
     b,
-    (s: any, v: any, _k: string | number | symbol, _obj: any, _src: any, stack: { size: number }) =>
-      stack.size > 0 || Array.isArray(v) ? v ?? s : undefined,
+    (
+      s: any,
+      v: any,
+      _k: string | number | symbol,
+      _obj: any,
+      _src: any,
+      stack: { size: number },
+    ) => (stack.size > 0 || Array.isArray(v) ? (v ?? s) : undefined),
   );
 }
diff --git a/web/src/beta/hooks/navigationHooks.ts b/web/src/beta/hooks/navigationHooks.ts
index 65e3e7302..8c6484dff 100644
--- a/web/src/beta/hooks/navigationHooks.ts
+++ b/web/src/beta/hooks/navigationHooks.ts
@@ -1,8 +1,7 @@
+import { Tab } from "@reearth/beta/features/Navbar";
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { Tab } from "@reearth/beta/features/Navbar";
-
 export const useEditorNavigation = ({ sceneId }: { sceneId?: string }) => {
   const navigate = useNavigate();
 
@@ -17,13 +16,19 @@ export const useEditorNavigation = ({ sceneId }: { sceneId?: string }) => {
   return sceneId ? handleNavigate : undefined;
 };
 
-export const useSettingsNavigation = ({ projectId }: { projectId?: string }) => {
+export const useSettingsNavigation = ({
+  projectId,
+}: {
+  projectId?: string;
+}) => {
   const navigate = useNavigate();
 
   const handleNavigate = useCallback(
     (page?: "public" | "story" | "asset" | "plugin", subId?: string) => {
       if (!projectId || !page) return;
-      navigate(`/settings/project/${projectId}/${page}${subId ? `/${subId}` : ""}`);
+      navigate(
+        `/settings/project/${projectId}/${page}${subId ? `/${subId}` : ""}`,
+      );
     },
     [projectId, navigate],
   );
diff --git a/web/src/beta/hooks/useAssetUploader/hooks.tsx b/web/src/beta/hooks/useAssetUploader/hooks.tsx
index de80b5612..80d3977bd 100644
--- a/web/src/beta/hooks/useAssetUploader/hooks.tsx
+++ b/web/src/beta/hooks/useAssetUploader/hooks.tsx
@@ -1,8 +1,7 @@
-import { useCallback, useMemo } from "react";
-import useFileInput from "use-file-input";
-
 import { AcceptedFileFormat } from "@reearth/beta/features/Assets/types";
 import { useAssetsFetcher } from "@reearth/services/api";
+import { useCallback, useMemo } from "react";
+import useFileInput from "use-file-input";
 
 import { FILE_FORMATS, IMAGE_FORMATS } from "../../features/Assets/constants";
 
@@ -23,10 +22,10 @@ export default ({
     return assetType === "image"
       ? IMAGE_FORMATS
       : assetType === "file"
-      ? fileFormat
-        ? `.${fileFormat?.toLocaleLowerCase()}`
-        : FILE_FORMATS
-      : IMAGE_FORMATS + "," + FILE_FORMATS;
+        ? fileFormat
+          ? `.${fileFormat?.toLocaleLowerCase()}`
+          : FILE_FORMATS
+        : IMAGE_FORMATS + "," + FILE_FORMATS;
   }, [assetType, fileFormat]);
 
   const handleAssetsCreate = useCallback(
@@ -43,10 +42,13 @@ export default ({
     },
     [workspaceId, useCreateAssets, onAssetSelect],
   );
-  const handleFileUpload = useFileInput(files => handleAssetsCreate?.(files), {
-    accept: acceptedExtension,
-    multiple: true,
-  });
+  const handleFileUpload = useFileInput(
+    (files) => handleAssetsCreate?.(files),
+    {
+      accept: acceptedExtension,
+      multiple: true,
+    },
+  );
 
   return { handleFileUpload };
 };
diff --git a/web/src/beta/hooks/useManageSwitchState/hooks.tsx b/web/src/beta/hooks/useManageSwitchState/hooks.tsx
index 691c2acbe..9465343f7 100644
--- a/web/src/beta/hooks/useManageSwitchState/hooks.tsx
+++ b/web/src/beta/hooks/useManageSwitchState/hooks.tsx
@@ -15,8 +15,8 @@ export const useManageSwitchState = <T,>({ fields }: Props<T>) => {
     setFieldsState(fields);
   }, [fields]);
   const handleActivate = useCallback((id: string) => {
-    setFieldsState(f =>
-      f.map(v => ({
+    setFieldsState((f) =>
+      f.map((v) => ({
         ...v,
         active: v.id === id,
       })),
diff --git a/web/src/beta/lib/README.md b/web/src/beta/lib/README.md
index 747b0409e..9233c0057 100644
--- a/web/src/beta/lib/README.md
+++ b/web/src/beta/lib/README.md
@@ -1 +1 @@
-# Interfaces for direct access to libraries being used (will make any future library changes easy) (ie axios, etc)(aka the “facade pattern” for the nerds) <- Maybe not needed. Could combine lib and services
\ No newline at end of file
+# Interfaces for direct access to libraries being used (will make any future library changes easy) (ie axios, etc)(aka the “facade pattern” for the nerds) <- Maybe not needed. Could combine lib and services
diff --git a/web/src/beta/lib/lexical/RichTextEditor/index.css b/web/src/beta/lib/lexical/RichTextEditor/index.css
index 6e707f757..cbfdaffad 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/index.css
+++ b/web/src/beta/lib/lexical/RichTextEditor/index.css
@@ -1,4 +1,4 @@
-@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap';
+@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap";
 
 .lexical.editor-container {
   position: relative;
@@ -13,21 +13,21 @@
   z-index: -1;
 }
 
-.lexical .editor-inner{
+.lexical .editor-inner {
   position: relative;
   cursor: auto;
 }
 
-.lexical .editor-input{
+.lexical .editor-input {
   outline: none;
   padding: 8px;
 }
 
-.lexical .editor-input-minheight{
+.lexical .editor-input-minheight {
   min-height: 200px;
 }
 
-.lexical .editor-placeholder{
+.lexical .editor-placeholder {
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -72,7 +72,7 @@
 }
 
 .lexical .editor-dev-button::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 10px;
   right: 10px;
@@ -120,7 +120,7 @@
 }
 
 .lexical .test-recorder-button::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 8px;
   right: 8px;
@@ -646,7 +646,7 @@
   color: red;
 }
 
-.lexical .dropdown-wrapper{
+.lexical .dropdown-wrapper {
   position: relative;
 }
 
@@ -654,7 +654,9 @@
   z-index: 100;
   display: block;
   position: fixed;
-  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   border-radius: 8px;
   min-height: 40px;
@@ -881,11 +883,11 @@
   transition: transform 0.2s;
 }
 
-.lexical .switch button[aria-checked='true'] {
+.lexical .switch button[aria-checked="true"] {
   background-color: rgb(24, 119, 242);
 }
 
-.lexical .switch button[aria-checked='true'] span {
+.lexical .switch button[aria-checked="true"] span {
   transform: translateX(20px);
 }
 
@@ -1158,7 +1160,7 @@
   overflow: hidden;
 }
 
-.lexical .toolbar-line{
+.lexical .toolbar-line {
   display: flex;
   vertical-align: middle;
 }
@@ -1292,7 +1294,7 @@
 }
 
 .lexical .sticky-note:after {
-  content: '';
+  content: "";
   position: absolute;
   z-index: -1;
   right: -0px;
@@ -1438,7 +1440,7 @@
 }
 
 .lexical hr:after {
-  content: '';
+  content: "";
   display: block;
   height: 2px;
   background-color: #ccc;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/index.tsx b/web/src/beta/lib/lexical/RichTextEditor/index.tsx
index e4bf95ed2..957a29fef 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/index.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/index.tsx
@@ -5,11 +5,11 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
 import { EditorState } from "lexical";
 import { useMemo, useCallback, useRef } from "react";
 
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
 import "./index.css";
 
 import Nodes from "./nodes";
@@ -30,7 +30,12 @@ type Props = {
   onChange?: (text: EditorStateJSONString) => void;
 };
 
-const RichTextEditor: React.FC<Props> = ({ editMode, text, scrollableContainerId, onChange }) => {
+const RichTextEditor: React.FC<Props> = ({
+  editMode,
+  text,
+  scrollableContainerId,
+  onChange,
+}) => {
   const t = useT();
   const editorStateJSONStringRef = useRef<EditorStateJSONString>();
 
@@ -71,7 +76,10 @@ const RichTextEditor: React.FC<Props> = ({ editMode, text, scrollableContainerId
     <LexicalComposer initialConfig={editorConfig}>
       <div className="lexical editor-container" ref={editorRef}>
         {editMode && (
-          <ToolbarPlugin containerRef={editorRef} scrollableContainerId={scrollableContainerId} />
+          <ToolbarPlugin
+            containerRef={editorRef}
+            scrollableContainerId={scrollableContainerId}
+          />
         )}
         <div className="editor-inner">
           <RichTextPlugin
@@ -116,7 +124,7 @@ const isEditorStateJSONString = (str?: string) => {
   if (!str) return false;
   try {
     return JSON.parse(str).root !== undefined;
-  } catch (e) {
+  } catch (_e) {
     return false;
   }
 };
@@ -125,7 +133,7 @@ const isContentEmpty = (str?: string) => {
   if (!str) return true;
   try {
     return JSON.parse(str).root.children[0].children[0].text === "";
-  } catch (e) {
+  } catch (_e) {
     return true;
   }
 };
diff --git a/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts b/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
index ec75b6d75..8e5df8564 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
@@ -9,7 +9,7 @@ import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 import type { Klass, LexicalNode } from "lexical";
 
-const PlaygroundNodes: Array<Klass<LexicalNode>> = [
+const PlaygroundNodes: Klass<LexicalNode>[] = [
   HeadingNode,
   ListNode,
   ListItemNode,
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
index fa7ff040d..06609d22b 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
@@ -45,12 +45,15 @@ export default function AutoLinkPluginWithMathers() {
 
   useEffect(() => {
     if (!editor) return;
-    const removeNodeListener = editor.registerNodeTransform(AutoLinkNode, node => {
-      if (!node) return;
-      const dom = editor.getElementByKey(node.__key);
-      if (!dom) return;
-      dom.setAttribute("target", "_blank");
-    });
+    const removeNodeListener = editor.registerNodeTransform(
+      AutoLinkNode,
+      (node) => {
+        if (!node) return;
+        const dom = editor.getElementByKey(node.__key);
+        if (!dom) return;
+        dom.setAttribute("target", "_blank");
+      },
+    );
     return () => removeNodeListener();
   }, [editor]);
   return <AutoLinkPlugin matchers={MATCHERS} />;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
index dc14f6a39..2029fb93d 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
@@ -1,6 +1,10 @@
 import "./index.css";
 
-import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import {
+  $isAutoLinkNode,
+  $isLinkNode,
+  TOGGLE_LINK_COMMAND,
+} from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import {
@@ -97,7 +101,8 @@ function FloatingLinkEditor({
 
   useEffect(() => {
     const scrollerElem =
-      document.getElementById(scrollableContainerId ?? "") ?? anchorElem.parentElement;
+      document.getElementById(scrollableContainerId ?? "") ??
+      anchorElem.parentElement;
 
     const update = () => {
       editor.getEditorState().read(() => {
@@ -118,7 +123,12 @@ function FloatingLinkEditor({
         scrollerElem.removeEventListener("scroll", update);
       }
     };
-  }, [anchorElem.parentElement, editor, scrollableContainerId, updateLinkEditor]);
+  }, [
+    anchorElem.parentElement,
+    editor,
+    scrollableContainerId,
+    updateLinkEditor,
+  ]);
 
   useEffect(() => {
     return mergeRegister(
@@ -162,7 +172,9 @@ function FloatingLinkEditor({
     }
   }, [isEditMode]);
 
-  const monitorInputInteraction = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const monitorInputInteraction = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
     if (event.key === "Enter") {
       event.preventDefault();
       handleLinkSubmission();
@@ -189,10 +201,10 @@ function FloatingLinkEditor({
             ref={inputRef}
             className="link-input"
             value={editedLinkUrl}
-            onChange={event => {
+            onChange={(event) => {
               setEditedLinkUrl(event.target.value);
             }}
-            onKeyDown={event => {
+            onKeyDown={(event) => {
               monitorInputInteraction(event);
             }}
           />
@@ -201,7 +213,7 @@ function FloatingLinkEditor({
               className="link-cancel"
               role="button"
               tabIndex={0}
-              onMouseDown={event => event.preventDefault()}
+              onMouseDown={(event) => event.preventDefault()}
               onClick={() => {
                 setEditMode(false);
               }}
@@ -211,21 +223,25 @@ function FloatingLinkEditor({
               className="link-confirm"
               role="button"
               tabIndex={0}
-              onMouseDown={event => event.preventDefault()}
+              onMouseDown={(event) => event.preventDefault()}
               onClick={handleLinkSubmission}
             />
           </div>
         </>
       ) : (
         <div className="link-view">
-          <a href={sanitizeUrl(linkUrl)} target="_blank" rel="noopener noreferrer">
+          <a
+            href={sanitizeUrl(linkUrl)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             {linkUrl}
           </a>
           <div
             className="link-edit"
             role="button"
             tabIndex={0}
-            onMouseDown={event => event.preventDefault()}
+            onMouseDown={(event) => event.preventDefault()}
             onClick={() => {
               setEditedLinkUrl(linkUrl);
               setEditMode(true);
@@ -235,7 +251,7 @@ function FloatingLinkEditor({
             className="link-trash"
             role="button"
             tabIndex={0}
-            onMouseDown={event => event.preventDefault()}
+            onMouseDown={(event) => event.preventDefault()}
             onClick={() => {
               editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
             }}
@@ -309,5 +325,9 @@ export default function FloatingLinkEditorPlugin({
   scrollableContainerId?: string;
 }): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
-  return useFloatingLinkEditorToolbar(editor, anchorElem, scrollableContainerId);
+  return useFloatingLinkEditorToolbar(
+    editor,
+    anchorElem,
+    scrollableContainerId,
+  );
 }
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
index c0116f531..e3fd8acbc 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
@@ -8,12 +8,15 @@ export default function LinkOnBlankPlugin() {
 
   useEffect(() => {
     if (!editor) return;
-    const removeNodeListener = editor.registerNodeTransform(LinkNode, node => {
-      if (!node) return;
-      const dom = editor.getElementByKey(node.__key);
-      if (!dom) return;
-      dom.setAttribute("target", "_blank");
-    });
+    const removeNodeListener = editor.registerNodeTransform(
+      LinkNode,
+      (node) => {
+        if (!node) return;
+        const dom = editor.getElementByKey(node.__key);
+        if (!dom) return;
+        dom.setAttribute("target", "_blank");
+      },
+    );
     return () => removeNodeListener();
   }, [editor]);
   return <LinkPlugin />;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
index 8b85d28fd..aeed6ea75 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
@@ -20,7 +20,9 @@ function getElementNodesInSelection(selection: RangeSelection) {
     ]);
   }
 
-  return new Set(nodesInSelection.map(n => ($isElementNode(n) ? n : n.getParentOrThrow())));
+  return new Set(
+    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow())),
+  );
 }
 
 function isIndentPermitted(maxDepth: number) {
@@ -52,7 +54,11 @@ function isIndentPermitted(maxDepth: number) {
   return totalDepth <= maxDepth;
 }
 
-export default function ListMaxIndentLevelPlugin({ maxDepth }: { maxDepth?: number }) {
+export default function ListMaxIndentLevelPlugin({
+  maxDepth,
+}: {
+  maxDepth?: number;
+}) {
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
index 1919ae7a4..ff8dd0658 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
@@ -1,7 +1,11 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useEffect } from "react";
 
-export default function CodeHighlightPlugin({ editable }: { editable: boolean }) {
+export default function CodeHighlightPlugin({
+  editable,
+}: {
+  editable: boolean;
+}) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     return editor?.setEditable(editable);
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
index fdff78f18..02c748c49 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
@@ -28,6 +28,7 @@ import {
   $getNearestNodeOfType,
   mergeRegister,
 } from "@lexical/utils";
+import { useT } from "@reearth/services/i18n";
 import type { ElementFormatType, LexicalEditor, RangeSelection } from "lexical";
 import {
   $createParagraphNode,
@@ -52,8 +53,6 @@ import {
 } from "lexical";
 import { useCallback, useEffect, useState, useMemo, RefObject } from "react";
 
-import { useT } from "@reearth/services/i18n";
-
 import DropDown, { DropDownItem } from "../ui/DropDown";
 import DropdownColorPicker from "../ui/DropdownColorPicker";
 import { getSelectedNode } from "../utils/getSelectedNode";
@@ -61,7 +60,7 @@ import { sanitizeUrl } from "../utils/url";
 
 const IS_APPLE = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 
-const rootTypeToRootName = {
+const _rootTypeToRootName = {
   root: "Root",
   table: "Table",
 };
@@ -109,7 +108,11 @@ const LINE_HEIGHT_OPTIONS: [string, string][] = [
 
 // Fix for $patchStyleText not updating the style correctly
 // https://github.com/facebook/lexical/issues/4491#issuecomment-1701890592
-function $customPatchStyleText(selection: RangeSelection, cssProperty: string, cssValue: string) {
+function $customPatchStyleText(
+  selection: RangeSelection,
+  cssProperty: string,
+  cssValue: string,
+) {
   $patchStyleText(selection, { [cssProperty]: cssValue });
 
   const newStyle = replaceCssStyle(selection.style, cssProperty, cssValue);
@@ -123,18 +126,18 @@ function replaceCssStyle(
 ): string {
   const cssArr = existingCssStyle
     .split(";")
-    .filter(prop => !!prop)
-    .map(prop => prop.trim());
+    .filter((prop) => !!prop)
+    .map((prop) => prop.trim());
 
   let found = false;
 
-  const newCssArr = cssArr.map(prop => {
+  const newCssArr = cssArr.map((prop) => {
     const propertySplit = prop.split(":");
     if (propertySplit.length !== 2) {
       return "";
     }
 
-    const [property, value] = propertySplit.map(p => p.trim());
+    const [property, value] = propertySplit.map((p) => p.trim());
 
     if (property === cssProperty) {
       found = true;
@@ -149,7 +152,7 @@ function replaceCssStyle(
     newCssArr.push(`${cssProperty}: ${newCssValue}`);
   }
 
-  return newCssArr.filter(value => value !== "").join("; ");
+  return newCssArr.filter((value) => value !== "").join("; ");
 }
 
 function dropDownActiveClass(active: boolean) {
@@ -167,9 +170,9 @@ function BlockFormatDropDown({
 }: {
   containerRef: RefObject<HTMLDivElement>;
   scrollableContainerId?: string;
-  blockTypeToBlockName: { [key: string]: string };
+  blockTypeToBlockName: Record<string, string>;
   blockType: keyof typeof blockTypeToBlockName;
-  rootType: keyof typeof rootTypeToRootName;
+  rootType: keyof typeof _rootTypeToRootName;
   editor: LexicalEditor;
   disabled?: boolean;
 }): JSX.Element {
@@ -177,7 +180,10 @@ function BlockFormatDropDown({
   const formatParagraph = () => {
     editor.update(() => {
       const selection = $getSelection();
-      if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+      if (
+        $isRangeSelection(selection) ||
+        DEPRECATED_$isGridSelection(selection)
+      ) {
         $setBlocksType(selection, () => $createParagraphNode());
       }
     });
@@ -187,7 +193,10 @@ function BlockFormatDropDown({
     if (blockType !== headingSize) {
       editor.update(() => {
         const selection = $getSelection();
-        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+        if (
+          $isRangeSelection(selection) ||
+          DEPRECATED_$isGridSelection(selection)
+        ) {
           $setBlocksType(selection, () => $createHeadingNode(headingSize));
         }
       });
@@ -214,7 +223,10 @@ function BlockFormatDropDown({
     if (blockType !== "quote") {
       editor.update(() => {
         const selection = $getSelection();
-        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+        if (
+          $isRangeSelection(selection) ||
+          DEPRECATED_$isGridSelection(selection)
+        ) {
           $setBlocksType(selection, () => $createQuoteNode());
         }
       });
@@ -229,46 +241,54 @@ function BlockFormatDropDown({
       buttonClassName="toolbar-item block-controls"
       buttonIconClassName={"icon block-type " + blockType}
       buttonLabel={blockTypeToBlockName[blockType]}
-      buttonAriaLabel="Formatting options for text style">
+      buttonAriaLabel="Formatting options for text style"
+    >
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "paragraph")}
-        onClick={formatParagraph}>
+        onClick={formatParagraph}
+      >
         <i className="icon paragraph" />
         <span className="text">{t("Normal")}</span>
       </DropDownItem>
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "h1")}
-        onClick={() => formatHeading("h1")}>
+        onClick={() => formatHeading("h1")}
+      >
         <i className="icon h1" />
         <span className="text">{t("Heading 1")}</span>
       </DropDownItem>
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "h2")}
-        onClick={() => formatHeading("h2")}>
+        onClick={() => formatHeading("h2")}
+      >
         <i className="icon h2" />
         <span className="text">{t("Heading 2")}</span>
       </DropDownItem>
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "h3")}
-        onClick={() => formatHeading("h3")}>
+        onClick={() => formatHeading("h3")}
+      >
         <i className="icon h3" />
         <span className="text">{t("Heading 3")}</span>
       </DropDownItem>
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "bullet")}
-        onClick={formatBulletList}>
+        onClick={formatBulletList}
+      >
         <i className="icon bullet-list" />
         <span className="text">{t("Bullet List")}</span>
       </DropDownItem>
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "number")}
-        onClick={formatNumberedList}>
+        onClick={formatNumberedList}
+      >
         <i className="icon numbered-list" />
         <span className="text">{t("Numbered List")}</span>
       </DropDownItem>
       <DropDownItem
         className={"item " + dropDownActiveClass(blockType === "quote")}
-        onClick={formatQuote}>
+        onClick={formatQuote}
+      >
         <i className="icon quote" />
         <span className="text">{t("Quote")}</span>
       </DropDownItem>
@@ -322,18 +342,24 @@ function FontDropDown({
       disabled={disabled}
       buttonClassName={"toolbar-item " + style}
       buttonLabel={value}
-      buttonIconClassName={style === "font-family" ? "icon block-type font-family" : ""}
-      buttonAriaLabel={buttonAriaLabel}>
-      {(style === "font-family" ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(([option, text]) => (
-        <DropDownItem
-          className={`item ${dropDownActiveClass(value === option)} ${
-            style === "font-size" ? "fontsize-item" : ""
-          }`}
-          onClick={() => handleClick(option)}
-          key={option}>
-          <span className="text">{text}</span>
-        </DropDownItem>
-      ))}
+      buttonIconClassName={
+        style === "font-family" ? "icon block-type font-family" : ""
+      }
+      buttonAriaLabel={buttonAriaLabel}
+    >
+      {(style === "font-family" ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(
+        ([option, text]) => (
+          <DropDownItem
+            className={`item ${dropDownActiveClass(value === option)} ${
+              style === "font-size" ? "fontsize-item" : ""
+            }`}
+            onClick={() => handleClick(option)}
+            key={option}
+          >
+            <span className="text">{text}</span>
+          </DropDownItem>
+        ),
+      )}
     </DropDown>
   );
 }
@@ -373,12 +399,14 @@ function LineHeightDropDown({
       disabled={disabled}
       buttonClassName={"toolbar-item " + style}
       buttonIconClassName={"icon block-type lineheight"}
-      buttonAriaLabel={t("Formatting options for line height")}>
+      buttonAriaLabel={t("Formatting options for line height")}
+    >
       {LINE_HEIGHT_OPTIONS.map(([option, text]) => (
         <DropDownItem
           className={`item ${dropDownActiveClass(value === option)} ${"lineheight-item"}`}
           onClick={() => handleClick(option)}
-          key={option}>
+          key={option}
+        >
           <span className="text">{text}</span>
         </DropDownItem>
       ))}
@@ -403,9 +431,7 @@ function ElementFormatDropdown({
 }) {
   const t = useT();
 
-  const formatOptions: {
-    [key: string]: { icon: string; name: string };
-  } = useMemo(
+  const formatOptions: Record<string, { icon: string; name: string }> = useMemo(
     () => ({
       center: {
         icon: "center-align",
@@ -435,12 +461,14 @@ function ElementFormatDropdown({
       buttonLabel={formatOptions[value]?.name}
       buttonIconClassName={`icon ${formatOptions[value]?.icon}`}
       buttonClassName="toolbar-item spaced alignment"
-      buttonAriaLabel="Formatting options for text alignment">
+      buttonAriaLabel="Formatting options for text alignment"
+    >
       <DropDownItem
         onClick={() => {
           editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
         }}
-        className="item">
+        className="item"
+      >
         <i className="icon left-align" />
         <span className="text">{t("Left Align")}</span>
       </DropDownItem>
@@ -448,7 +476,8 @@ function ElementFormatDropdown({
         onClick={() => {
           editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
         }}
-        className="item">
+        className="item"
+      >
         <i className="icon center-align" />
         <span className="text">{t("Center Align")}</span>
       </DropDownItem>
@@ -456,7 +485,8 @@ function ElementFormatDropdown({
         onClick={() => {
           editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
         }}
-        className="item">
+        className="item"
+      >
         <i className="icon right-align" />
         <span className="text">{t("Right Align")}</span>
       </DropDownItem>
@@ -464,7 +494,8 @@ function ElementFormatDropdown({
         onClick={() => {
           editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
         }}
-        className="item">
+        className="item"
+      >
         <i className="icon justify-align" />
         <span className="text">{t("Justify Align")}</span>
       </DropDownItem>
@@ -473,7 +504,8 @@ function ElementFormatDropdown({
         onClick={() => {
           editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
         }}
-        className="item">
+        className="item"
+      >
         <i className={"icon " + (isRTL ? "indent" : "outdent")} />
         <span className="text">{t("Outdent")}</span>
       </DropDownItem>
@@ -481,7 +513,8 @@ function ElementFormatDropdown({
         onClick={() => {
           editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
         }}
-        className="item">
+        className="item"
+      >
         <i className={"icon " + (isRTL ? "outdent" : "indent")} />
         <span className="text">{t("Indent")}</span>
       </DropDownItem>
@@ -498,8 +531,10 @@ export default function ToolbarPlugin({
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const [activeEditor, setActiveEditor] = useState(editor);
-  const [blockType, setBlockType] = useState<keyof typeof blockTypeToBlockName>("paragraph");
-  const [rootType, setRootType] = useState<keyof typeof rootTypeToRootName>("root");
+  const [blockType, setBlockType] =
+    useState<keyof typeof blockTypeToBlockName>("paragraph");
+  const [rootType, setRootType] =
+    useState<keyof typeof _rootTypeToRootName>("root");
   const [fontSize, setFontSize] = useState<string>("16px");
   const [fontColor, setFontColor] = useState<string>("#000");
   const [lineHeight, setLineHeight] = useState<string>("1.2");
@@ -540,7 +575,7 @@ export default function ToolbarPlugin({
       let element =
         anchorNode.getKey() === "root"
           ? anchorNode
-          : $findMatchingParent(anchorNode, e => {
+          : $findMatchingParent(anchorNode, (e) => {
               const parent = e.getParent();
               return parent !== null && $isRootOrShadowRoot(parent);
             });
@@ -580,26 +615,49 @@ export default function ToolbarPlugin({
 
       if (elementDOM !== null) {
         if ($isListNode(element)) {
-          const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);
-          const type = parentList ? parentList.getListType() : element.getListType();
+          const parentList = $getNearestNodeOfType<ListNode>(
+            anchorNode,
+            ListNode,
+          );
+          const type = parentList
+            ? parentList.getListType()
+            : element.getListType();
           if (type in blockTypeToBlockName) {
             setBlockType(type as keyof typeof blockTypeToBlockName);
           }
         } else {
-          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          const type = $isHeadingNode(element)
+            ? element.getTag()
+            : element.getType();
           if (type in blockTypeToBlockName) {
             setBlockType(type as keyof typeof blockTypeToBlockName);
           }
         }
       }
       // Handle buttons
-      setFontSize($getSelectionStyleValueForProperty(selection, "font-size", "16px"));
-      setFontColor($getSelectionStyleValueForProperty(selection, "color", "#000"));
-      setBgColor($getSelectionStyleValueForProperty(selection, "background-color", "#fff"));
-      setFontFamily($getSelectionStyleValueForProperty(selection, "font-family", "Arial"));
-      setLineHeight($getSelectionStyleValueForProperty(selection, "line-height", "1.2"));
+      setFontSize(
+        $getSelectionStyleValueForProperty(selection, "font-size", "16px"),
+      );
+      setFontColor(
+        $getSelectionStyleValueForProperty(selection, "color", "#000"),
+      );
+      setBgColor(
+        $getSelectionStyleValueForProperty(
+          selection,
+          "background-color",
+          "#fff",
+        ),
+      );
+      setFontFamily(
+        $getSelectionStyleValueForProperty(selection, "font-family", "Arial"),
+      );
+      setLineHeight(
+        $getSelectionStyleValueForProperty(selection, "line-height", "1.2"),
+      );
       setElementFormat(
-        ($isElementNode(node) ? node.getFormatType() : parent?.getFormatType()) || "left",
+        ($isElementNode(node)
+          ? node.getFormatType()
+          : parent?.getFormatType()) || "left",
       );
     }
   }, [activeEditor, blockTypeToBlockName]);
@@ -618,7 +676,7 @@ export default function ToolbarPlugin({
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerEditableListener(editable => {
+      editor.registerEditableListener((editable) => {
         setIsEditable(editable);
       }),
       activeEditor.registerUpdateListener(({ editorState }) => {
@@ -628,7 +686,7 @@ export default function ToolbarPlugin({
       }),
       activeEditor.registerCommand<boolean>(
         CAN_UNDO_COMMAND,
-        payload => {
+        (payload) => {
           setCanUndo(payload);
           return false;
         },
@@ -636,7 +694,7 @@ export default function ToolbarPlugin({
       ),
       activeEditor.registerCommand<boolean>(
         CAN_REDO_COMMAND,
-        payload => {
+        (payload) => {
           setCanRedo(payload);
           return false;
         },
@@ -648,13 +706,16 @@ export default function ToolbarPlugin({
   useEffect(() => {
     return activeEditor.registerCommand(
       KEY_MODIFIER_COMMAND,
-      payload => {
+      (payload) => {
         const event: KeyboardEvent = payload;
         const { code, ctrlKey, metaKey } = event;
 
         if (code === "KeyK" && (ctrlKey || metaKey)) {
           event.preventDefault();
-          return activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
+          return activeEditor.dispatchCommand(
+            TOGGLE_LINK_COMMAND,
+            sanitizeUrl("https://"),
+          );
         }
         return false;
       },
@@ -747,7 +808,8 @@ export default function ToolbarPlugin({
           title={IS_APPLE ? "Undo (⌘Z)" : "Undo (Ctrl+Z)"}
           type="button"
           className="toolbar-item spaced"
-          aria-label="Undo">
+          aria-label="Undo"
+        >
           <i className="format undo" />
         </button>
         <button
@@ -758,7 +820,8 @@ export default function ToolbarPlugin({
           title={IS_APPLE ? "Redo (⌘Y)" : "Redo (Ctrl+Y)"}
           type="button"
           className="toolbar-item"
-          aria-label="Redo">
+          aria-label="Redo"
+        >
           <i className="format redo" />
         </button>
         <Divider />
@@ -823,7 +886,8 @@ export default function ToolbarPlugin({
           className={"toolbar-item spaced " + (isBold ? "active" : "")}
           title={IS_APPLE ? "Bold (⌘B)" : "Bold (Ctrl+B)"}
           type="button"
-          aria-label={`Format text as bold. Shortcut: ${IS_APPLE ? "⌘B" : "Ctrl+B"}`}>
+          aria-label={`Format text as bold. Shortcut: ${IS_APPLE ? "⌘B" : "Ctrl+B"}`}
+        >
           <i className="format bold" />
         </button>
         <button
@@ -834,7 +898,8 @@ export default function ToolbarPlugin({
           className={"toolbar-item spaced " + (isItalic ? "active" : "")}
           title={IS_APPLE ? "Italic (⌘I)" : "Italic (Ctrl+I)"}
           type="button"
-          aria-label={`Format text as italics. Shortcut: ${IS_APPLE ? "⌘I" : "Ctrl+I"}`}>
+          aria-label={`Format text as italics. Shortcut: ${IS_APPLE ? "⌘I" : "Ctrl+I"}`}
+        >
           <i className="format italic" />
         </button>
         <button
@@ -845,7 +910,8 @@ export default function ToolbarPlugin({
           className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
           title={IS_APPLE ? "Underline (⌘U)" : "Underline (Ctrl+U)"}
           type="button"
-          aria-label={`Format text to underlined. Shortcut: ${IS_APPLE ? "⌘U" : "Ctrl+U"}`}>
+          aria-label={`Format text to underlined. Shortcut: ${IS_APPLE ? "⌘U" : "Ctrl+U"}`}
+        >
           <i className="format underline" />
         </button>
         <button
@@ -856,7 +922,8 @@ export default function ToolbarPlugin({
           className={"toolbar-item spaced " + (isCode ? "active" : "")}
           title={t("Insert Code Block")}
           type="button"
-          aria-label="Insert code block">
+          aria-label="Insert code block"
+        >
           <i className="format code" />
         </button>
         <button
@@ -865,7 +932,8 @@ export default function ToolbarPlugin({
           className={"toolbar-item spaced " + (isLink ? "active" : "")}
           aria-label="Insert link"
           title={t("Insert Link")}
-          type="button">
+          type="button"
+        >
           <i className="format link" />
         </button>
         <DropdownColorPicker
@@ -897,14 +965,19 @@ export default function ToolbarPlugin({
           buttonClassName="toolbar-item spaced"
           buttonLabel=""
           buttonAriaLabel="Formatting options for additional text styles"
-          buttonIconClassName="icon dropdown-more">
+          buttonIconClassName="icon dropdown-more"
+        >
           <DropDownItem
             onClick={() => {
-              activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+              activeEditor.dispatchCommand(
+                FORMAT_TEXT_COMMAND,
+                "strikethrough",
+              );
             }}
             className={"item " + dropDownActiveClass(isStrikethrough)}
             title="Strikethrough"
-            aria-label="Format text with a strikethrough">
+            aria-label="Format text with a strikethrough"
+          >
             <i className="icon strikethrough" />
             <span className="text">{t("Strikethrough")}</span>
           </DropDownItem>
@@ -914,7 +987,8 @@ export default function ToolbarPlugin({
             }}
             className={"item " + dropDownActiveClass(isSubscript)}
             title="Subscript"
-            aria-label="Format text with a subscript">
+            aria-label="Format text with a subscript"
+          >
             <i className="icon subscript" />
             <span className="text">{t("Subscript")}</span>
           </DropDownItem>
@@ -924,7 +998,8 @@ export default function ToolbarPlugin({
             }}
             className={"item " + dropDownActiveClass(isSuperscript)}
             title="Superscript"
-            aria-label="Format text with a superscript">
+            aria-label="Format text with a superscript"
+          >
             <i className="icon superscript" />
             <span className="text">{t("Superscript")}</span>
           </DropDownItem>
@@ -932,7 +1007,8 @@ export default function ToolbarPlugin({
             onClick={clearFormatting}
             className="item"
             title="Clear text formatting"
-            aria-label="Clear all text formatting">
+            aria-label="Clear all text formatting"
+          >
             <i className="icon clear" />
             <span className="text">{t("Clear Formatting")}</span>
           </DropDownItem>
diff --git a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
index 816d6724e..bf38b7e93 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
+++ b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
@@ -187,7 +187,7 @@
   background-position: center;
   background-repeat: no-repeat;
   display: block;
-  content: ' ';
+  content: " ";
   position: absolute;
   top: 0;
   left: 0;
@@ -215,7 +215,7 @@
   background-position: center;
   background-repeat: no-repeat;
   display: block;
-  content: ' ';
+  content: " ";
   position: absolute;
   top: 0;
   left: 0;
@@ -320,7 +320,7 @@
 }
 .DefaultLexicalEditorTheme__listItemUnchecked:before,
 .DefaultLexicalEditorTheme__listItemChecked:before {
-  content: '';
+  content: "";
   width: 16px;
   height: 16px;
   top: 2px;
@@ -330,8 +330,8 @@
   background-size: cover;
   position: absolute;
 }
-.DefaultLexicalEditorTheme__listItemUnchecked[dir='rtl']:before,
-.DefaultLexicalEditorTheme__listItemChecked[dir='rtl']:before {
+.DefaultLexicalEditorTheme__listItemUnchecked[dir="rtl"]:before,
+.DefaultLexicalEditorTheme__listItemChecked[dir="rtl"]:before {
   left: auto;
   right: 0;
 }
@@ -351,7 +351,7 @@
   background-repeat: no-repeat;
 }
 .DefaultLexicalEditorTheme__listItemChecked:after {
-  content: '';
+  content: "";
   cursor: pointer;
   border-color: #fff;
   border-style: solid;
@@ -434,7 +434,7 @@
   position: absolute;
 }
 .DefaultLexicalEditorTheme__blockCursor:after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   top: -2px;
@@ -446,4 +446,4 @@
   to {
     visibility: hidden;
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
index d887b1246..e3c95d8f5 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
@@ -84,13 +84,16 @@ const theme: EditorThemeClasses = {
   tableAddRows: "DefaultLexicalEditorTheme__tableAddRows",
   tableCell: "DefaultLexicalEditorTheme__tableCell",
   tableCellActionButton: "DefaultLexicalEditorTheme__tableCellActionButton",
-  tableCellActionButtonContainer: "DefaultLexicalEditorTheme__tableCellActionButtonContainer",
+  tableCellActionButtonContainer:
+    "DefaultLexicalEditorTheme__tableCellActionButtonContainer",
   tableCellEditing: "DefaultLexicalEditorTheme__tableCellEditing",
   tableCellHeader: "DefaultLexicalEditorTheme__tableCellHeader",
-  tableCellPrimarySelected: "DefaultLexicalEditorTheme__tableCellPrimarySelected",
+  tableCellPrimarySelected:
+    "DefaultLexicalEditorTheme__tableCellPrimarySelected",
   tableCellResizer: "DefaultLexicalEditorTheme__tableCellResizer",
   tableCellSelected: "DefaultLexicalEditorTheme__tableCellSelected",
-  tableCellSortedIndicator: "DefaultLexicalEditorTheme__tableCellSortedIndicator",
+  tableCellSortedIndicator:
+    "DefaultLexicalEditorTheme__tableCellSortedIndicator",
   tableResizeRuler: "DefaultLexicalEditorTheme__tableCellResizeRuler",
   tableSelected: "DefaultLexicalEditorTheme__tableSelected",
   tableSelection: "DefaultLexicalEditorTheme__tableSelection",
@@ -102,7 +105,8 @@ const theme: EditorThemeClasses = {
     subscript: "DefaultLexicalEditorTheme__textSubscript",
     superscript: "DefaultLexicalEditorTheme__textSuperscript",
     underline: "DefaultLexicalEditorTheme__textUnderline",
-    underlineStrikethrough: "DefaultLexicalEditorTheme__textUnderlineStrikethrough",
+    underlineStrikethrough:
+      "DefaultLexicalEditorTheme__textUnderlineStrikethrough",
   },
 };
 
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
index 56fd6ca62..6e34d01ec 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
@@ -31,7 +31,10 @@ const basicColors = [
 const WIDTH = 214;
 const HEIGHT = 150;
 
-export default function ColorPicker({ color, onChange }: Readonly<ColorPickerProps>): JSX.Element {
+export default function ColorPicker({
+  color,
+  onChange,
+}: Readonly<ColorPickerProps>): JSX.Element {
   const [selfColor, setSelfColor] = useState(transformColor("hex", color));
   const [inputColor, setInputColor] = useState(color);
   const innerDivRef = useRef(null);
@@ -94,10 +97,14 @@ export default function ColorPicker({ color, onChange }: Readonly<ColorPickerPro
   }, [color]);
 
   return (
-    <div className="color-picker-wrapper" style={{ width: WIDTH }} ref={innerDivRef}>
+    <div
+      className="color-picker-wrapper"
+      style={{ width: WIDTH }}
+      ref={innerDivRef}
+    >
       <TextInput label="Hex" onChange={onSetHex} value={inputColor} />
       <div className="color-picker-basic-color">
-        {basicColors.map(basicColor => (
+        {basicColors.map((basicColor) => (
           <button
             className={basicColor === selfColor.hex ? " active" : ""}
             key={basicColor}
@@ -112,7 +119,8 @@ export default function ColorPicker({ color, onChange }: Readonly<ColorPickerPro
       <MoveWrapper
         className="color-picker-saturation"
         style={{ backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)` }}
-        onChange={onMoveSaturation}>
+        onChange={onMoveSaturation}
+      >
         <div
           className="color-picker-saturation_cursor"
           style={{
@@ -131,7 +139,10 @@ export default function ColorPicker({ color, onChange }: Readonly<ColorPickerPro
           }}
         />
       </MoveWrapper>
-      <div className="color-picker-color" style={{ backgroundColor: selfColor.hex }} />
+      <div
+        className="color-picker-color"
+        style={{ backgroundColor: selfColor.hex }}
+      />
     </div>
   );
 }
@@ -148,7 +159,12 @@ interface MoveWrapperProps {
   children: JSX.Element;
 }
 
-function MoveWrapper({ className, style, onChange, children }: MoveWrapperProps) {
+function MoveWrapper({
+  className,
+  style,
+  onChange,
+  children,
+}: MoveWrapperProps) {
   const divRef = useRef<HTMLDivElement>(null);
 
   const move = (e: React.MouseEvent | MouseEvent): void => {
@@ -184,7 +200,12 @@ function MoveWrapper({ className, style, onChange, children }: MoveWrapperProps)
   };
 
   return (
-    <div ref={divRef} className={className} style={style} onMouseDown={onMouseDown}>
+    <div
+      ref={divRef}
+      className={className}
+      style={style}
+      onMouseDown={onMouseDown}
+    >
       {children}
     </div>
   );
@@ -238,10 +259,13 @@ export function toHex(value: string): string {
 function hex2rgb(hex: string): RGB {
   const rbgArr = (
     hex
-      .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => "#" + r + r + g + g + b + b)
+      .replace(
+        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+        (_m, r, g, b) => "#" + r + r + g + g + b + b,
+      )
       .substring(1)
       .match(/.{2}/g) || []
-  ).map(x => parseInt(x, 16));
+  ).map((x) => parseInt(x, 16));
 
   return {
     b: rbgArr[2],
@@ -259,8 +283,11 @@ function rgb2hsv({ r, g, b }: RGB): HSV {
   const d = max - Math.min(r, g, b);
 
   const h = d
-    ? (max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? 2 + (b - r) / d : 4 + (r - g) / d) *
-      60
+    ? (max === r
+        ? (g - b) / d + (g < b ? 6 : 0)
+        : max === g
+          ? 2 + (b - r) / d
+          : 4 + (r - g) / d) * 60
     : 0;
   const s = max ? (d / max) * 100 : 0;
   const v = max * 100;
@@ -287,10 +314,13 @@ function hsv2rgb({ h, s, v }: HSV): RGB {
 }
 
 function rgb2hex({ b, g, r }: RGB): string {
-  return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("");
+  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
 }
 
-function transformColor<M extends keyof Color, C extends Color[M]>(format: M, color: C): Color {
+function transformColor<M extends keyof Color, C extends Color[M]>(
+  format: M,
+  color: C,
+): Color {
   let hex: Color["hex"] = toHex("#121212");
   let rgb: Color["rgb"] = hex2rgb(hex);
   let hsv: Color["hsv"] = rgb2hsv(rgb);
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
index 02b5b610a..a553de9a8 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
@@ -46,7 +46,13 @@ export function DropDownItem({
   }, [ref, registerItem]);
 
   return (
-    <button className={className} onClick={onClick} ref={ref} title={title} type="button">
+    <button
+      className={className}
+      onClick={onClick}
+      ref={ref}
+      title={title}
+      type="button"
+    >
       {children}
     </button>
   );
@@ -62,11 +68,12 @@ function DropDownItems({
   onClose: () => void;
 }) {
   const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();
-  const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();
+  const [highlightedItem, setHighlightedItem] =
+    useState<React.RefObject<HTMLButtonElement>>();
 
   const registerItem = useCallback(
     (itemRef: React.RefObject<HTMLButtonElement>) => {
-      setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));
+      setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
     },
     [setItems],
   );
@@ -83,13 +90,13 @@ function DropDownItems({
     if (key === "Escape" || key === "Tab") {
       onClose();
     } else if (key === "ArrowUp") {
-      setHighlightedItem(prev => {
+      setHighlightedItem((prev) => {
         if (!prev) return items[0];
         const index = items.indexOf(prev) - 1;
         return items[index === -1 ? items.length - 1 : index];
       });
     } else if (key === "ArrowDown") {
-      setHighlightedItem(prev => {
+      setHighlightedItem((prev) => {
         if (!prev) return items[0];
         return items[items.indexOf(prev) + 1];
       });
@@ -184,7 +191,13 @@ export default function DropDown({
     return () => {
       container.removeEventListener("click", handle);
     };
-  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf, containerRef]);
+  }, [
+    dropDownRef,
+    buttonRef,
+    showDropDown,
+    stopCloseOnClickSelf,
+    containerRef,
+  ]);
 
   useEffect(() => {
     const container = scrollableContainerId
@@ -221,9 +234,12 @@ export default function DropDown({
         aria-label={buttonAriaLabel || buttonLabel}
         className={buttonClassName}
         onClick={() => setShowDropDown(!showDropDown)}
-        ref={buttonRef}>
+        ref={buttonRef}
+      >
         {buttonIconClassName && <span className={buttonIconClassName} />}
-        {buttonLabel && <span className="text dropdown-button-text">{buttonLabel}</span>}
+        {buttonLabel && (
+          <span className="text dropdown-button-text">{buttonLabel}</span>
+        )}
         <i className="chevron-down" />
       </button>
 
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/DropdownColorPicker.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/DropdownColorPicker.tsx
index 110676d6b..07753ddda 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/DropdownColorPicker.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/DropdownColorPicker.tsx
@@ -32,7 +32,8 @@ export default function DropdownColorPicker({
       disabled={disabled}
       containerRef={containerRef}
       scrollableContainerId={scrollableContainerId}
-      stopCloseOnClickSelf={stopCloseOnClickSelf}>
+      stopCloseOnClickSelf={stopCloseOnClickSelf}
+    >
       <ColorPicker color={color} onChange={onChange} />
     </DropDown>
   );
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
index 3139c978e..6edcdd1f7 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
@@ -27,7 +27,7 @@ export default function TextInput({
         className="Input__input"
         placeholder={placeholder}
         value={value}
-        onChange={e => {
+        onChange={(e) => {
           onChange(e.target.value);
         }}
         data-test-id={dataTestId}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
index 78a99a168..85850df51 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
@@ -1,7 +1,9 @@
 import { $isAtNodeEnd } from "@lexical/selection";
 import { ElementNode, RangeSelection, TextNode } from "lexical";
 
-export function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
+export function getSelectedNode(
+  selection: RangeSelection,
+): TextNode | ElementNode {
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorNode = selection.anchor.getNode();
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
index 5e026ddd5..cef0c1836 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
@@ -1,9 +1,14 @@
-const SUPPORTED_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "sms:", "tel:"]);
+const SUPPORTED_URL_PROTOCOLS = new Set([
+  "http:",
+  "https:",
+  "mailto:",
+  "sms:",
+  "tel:",
+]);
 
 export function sanitizeUrl(url: string): string {
   try {
     const parsedUrl = new URL(url);
-    // eslint-disable-next-line no-script-url
     if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
       return "about:blank";
     }
diff --git a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
index 790cf4348..193bb9c78 100644
--- a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
@@ -1,7 +1,9 @@
+import {
+  PopupMenu,
+  PopupMenuItem as PopupItems,
+} from "@reearth/beta/lib/reearth-ui";
 import { Meta, StoryObj } from "@storybook/react";
 
-import { PopupMenu, PopupMenuItem as PopupItems } from "@reearth/beta/lib/reearth-ui";
-
 import { Breadcrumb, BreadcrumbProp, BreadcrumbItem } from "./";
 
 const meta: Meta<BreadcrumbProp> = {
@@ -81,12 +83,16 @@ const itemMenu: BreadcrumbItem[] = [
 ];
 
 const renderPopupMenu = (items: BreadcrumbItem[], level: number) => {
-  return items.map(item => {
+  return items.map((item) => {
     if (item.subItem) {
       return {
         ...item,
         title: (
-          <PopupMenu label={item.title} menu={item.subItem as PopupItems[]} nested={level > 0} />
+          <PopupMenu
+            label={item.title}
+            menu={item.subItem as PopupItems[]}
+            nested={level > 0}
+          />
         ),
         subItem: undefined,
       };
diff --git a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
index 30d54e23f..c2876804c 100644
--- a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
@@ -1,7 +1,6 @@
-import { FC, ReactNode } from "react";
-
 import { Icon, IconName, Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, ReactNode } from "react";
 
 import { PopupMenuItem } from "../PopupMenu";
 
@@ -33,11 +32,18 @@ export const Breadcrumb: FC<BreadcrumbProp> = ({
           <Item onClick={() => onClick?.(item.id)}>
             {typeof item.title === "string" ? (
               <>
-                {item.icon && <Icon icon={item.icon} size="small" color={theme.content.weak} />}
+                {item.icon && (
+                  <Icon
+                    icon={item.icon}
+                    size="small"
+                    color={theme.content.weak}
+                  />
+                )}
                 <Typography
                   weight="bold"
                   size={size === "normal" ? "body" : "h5"}
-                  color={theme.content.weak}>
+                  color={theme.content.weak}
+                >
                   {item.title}
                 </Typography>
               </>
diff --git a/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
index d099db8a1..7c412c86f 100644
--- a/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
@@ -14,7 +14,11 @@ export const Default: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
       <Button title="Secondary" onClick={action("secondary-click")} />
-      <Button title="Secondary Small" size="small" onClick={action("secondary-small-click")} />
+      <Button
+        title="Secondary Small"
+        size="small"
+        onClick={action("secondary-small-click")}
+      />
       <Button title="Secondary Disabled" disabled={true} />
       <Button
         title="Secondary Icon Button"
@@ -32,7 +36,11 @@ export const Default: Story = {
         minWidth={300}
         onClick={action("secondary-min-width-click")}
       />
-      <Button iconButton={true} icon="settingFilled" onClick={action("secondary-icon-click")} />
+      <Button
+        iconButton={true}
+        icon="settingFilled"
+        onClick={action("secondary-icon-click")}
+      />
       <Button
         iconButton={true}
         icon="settingFilled"
@@ -46,7 +54,11 @@ export const Default: Story = {
 export const Primary: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-      <Button title="Primary" appearance="primary" onClick={action("primary-click")} />
+      <Button
+        title="Primary"
+        appearance="primary"
+        onClick={action("primary-click")}
+      />
       <Button
         title="Primary Small"
         appearance="primary"
@@ -98,7 +110,11 @@ export const Primary: Story = {
 export const Dangerous: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-      <Button title="Dangerous" appearance="dangerous" onClick={action("dangerous-click")} />
+      <Button
+        title="Dangerous"
+        appearance="dangerous"
+        onClick={action("dangerous-click")}
+      />
       <Button
         title="Dangerous Small"
         appearance="dangerous"
@@ -150,7 +166,11 @@ export const Dangerous: Story = {
 export const Simple: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-      <Button title="Simple" appearance="simple" onClick={action("simple-click")} />
+      <Button
+        title="Simple"
+        appearance="simple"
+        onClick={action("simple-click")}
+      />
       <Button
         title="Simple Small"
         appearance="simple"
diff --git a/web/src/beta/lib/reearth-ui/components/Button/index.tsx b/web/src/beta/lib/reearth-ui/components/Button/index.tsx
index ae2f309e1..531b42d47 100644
--- a/web/src/beta/lib/reearth-ui/components/Button/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Button/index.tsx
@@ -1,6 +1,5 @@
-import { FC, MouseEvent } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { FC, MouseEvent } from "react";
 
 import { IconName, Icon } from "../Icon";
 
@@ -48,7 +47,8 @@ export const Button: FC<ButtonProps> = ({
       background={background}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}>
+      onMouseLeave={onMouseLeave}
+    >
       {icon && <Icon icon={icon} color={iconColor} />}
       {!iconButton && title}
       {iconRight && <Icon icon={iconRight} />}
@@ -63,75 +63,93 @@ const StyledButton = styled("button")<{
   extendWidth?: boolean;
   minWidth?: number;
   background?: string;
-}>(({ appearance, size, iconButton, extendWidth, minWidth, background, theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: `${theme.spacing.small}px`,
-  border:
-    appearance === "simple"
-      ? "none"
-      : `1px solid ${
-          appearance === "secondary"
-            ? `${theme.outline.weak}`
-            : appearance === "primary"
-            ? `${theme.primary.main}`
-            : `${theme.dangerous.main}`
-        }`,
-  padding:
-    size === "small"
-      ? iconButton
-        ? `${theme.spacing.micro}px`
-        : `${theme.spacing.smallest}px ${theme.spacing.small}px`
-      : iconButton
-      ? `${theme.spacing.small}px`
-      : `${theme.spacing.small}px ${theme.spacing.large}px`,
-  borderRadius: size === "small" ? `${theme.radius.small}px` : `${theme.radius.normal}px`,
-  color:
-    appearance === "primary"
-      ? `${theme.primary.main}`
-      : appearance === "dangerous"
-      ? `${theme.dangerous.main}`
-      : `${theme.content.main}`,
-  backgroundColor:
-    background && appearance !== "simple" && iconButton
-      ? background
-      : appearance === "simple"
-      ? "transparent"
-      : `${theme.bg[1]}`,
-  width: !extendWidth ? "fit-content" : "100%",
-  minWidth: minWidth ? `${minWidth}px` : "",
-  boxShadow: appearance === "simple" ? "none" : theme.shadow.button,
-  ["&:hover"]:
-    background && appearance !== "simple" && iconButton
-      ? {}
-      : {
-          borderColor: "transparent",
-          color: `${theme.content.withBackground}`,
-          backgroundColor: appearance === "simple" ? "transparent" : `${theme[appearance].weak}`,
-        },
-  ["&:active"]: {
-    borderColor: "transparent",
-    color: `${theme.content.withBackground}`,
+}>(
+  ({
+    appearance,
+    size,
+    iconButton,
+    extendWidth,
+    minWidth,
+    background,
+    theme,
+  }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: `${theme.spacing.small}px`,
+    border:
+      appearance === "simple"
+        ? "none"
+        : `1px solid ${
+            appearance === "secondary"
+              ? `${theme.outline.weak}`
+              : appearance === "primary"
+                ? `${theme.primary.main}`
+                : `${theme.dangerous.main}`
+          }`,
+    padding:
+      size === "small"
+        ? iconButton
+          ? `${theme.spacing.micro}px`
+          : `${theme.spacing.smallest}px ${theme.spacing.small}px`
+        : iconButton
+          ? `${theme.spacing.small}px`
+          : `${theme.spacing.small}px ${theme.spacing.large}px`,
+    borderRadius:
+      size === "small" ? `${theme.radius.small}px` : `${theme.radius.normal}px`,
+    color:
+      appearance === "primary"
+        ? `${theme.primary.main}`
+        : appearance === "dangerous"
+          ? `${theme.dangerous.main}`
+          : `${theme.content.main}`,
     backgroundColor:
       background && appearance !== "simple" && iconButton
         ? background
         : appearance === "simple"
-        ? "transparent"
-        : `${theme[appearance].main}`,
-    boxShadow: "none",
-  },
-  ["&:disabled"]: {
-    cursor: "not-allowed",
-    borderColor: "transparent",
-    color: `${theme.content.weaker}`,
-    backgroundColor: appearance !== "simple" ? `${theme.bg[1]}` : "transparent",
-    border: appearance === "simple" ? `1px solid transparent` : `1px solid ${theme.content.weaker}`,
-    boxShadow: "none",
-  },
-  ["& svg"]: {
-    width: iconButton && size === "small" ? "12px" : "16px",
-    height: iconButton && size === "small" ? "12px" : "16px",
-  },
-}));
+          ? "transparent"
+          : `${theme.bg[1]}`,
+    width: !extendWidth ? "fit-content" : "100%",
+    minWidth: minWidth ? `${minWidth}px` : "",
+    boxShadow: appearance === "simple" ? "none" : theme.shadow.button,
+    ["&:hover"]:
+      background && appearance !== "simple" && iconButton
+        ? {}
+        : {
+            borderColor: "transparent",
+            color: `${theme.content.withBackground}`,
+            backgroundColor:
+              appearance === "simple"
+                ? "transparent"
+                : `${theme[appearance].weak}`,
+          },
+    ["&:active"]: {
+      borderColor: "transparent",
+      color: `${theme.content.withBackground}`,
+      backgroundColor:
+        background && appearance !== "simple" && iconButton
+          ? background
+          : appearance === "simple"
+            ? "transparent"
+            : `${theme[appearance].main}`,
+      boxShadow: "none",
+    },
+    ["&:disabled"]: {
+      cursor: "not-allowed",
+      borderColor: "transparent",
+      color: `${theme.content.weaker}`,
+      backgroundColor:
+        appearance !== "simple" ? `${theme.bg[1]}` : "transparent",
+      border:
+        appearance === "simple"
+          ? `1px solid transparent`
+          : `1px solid ${theme.content.weaker}`,
+      boxShadow: "none",
+    },
+    ["& svg"]: {
+      width: iconButton && size === "small" ? "12px" : "16px",
+      height: iconButton && size === "small" ? "12px" : "16px",
+    },
+  }),
+);
diff --git a/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx b/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx
index 29104243e..7aa1fb64c 100644
--- a/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx
@@ -1,7 +1,6 @@
-import { FC, useEffect, useState } from "react";
-
 import { Icon } from "@reearth/beta/lib/reearth-ui/components/Icon/index";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useEffect, useState } from "react";
 
 export type CheckBoxProps = {
   value?: boolean;
@@ -38,14 +37,16 @@ export const CheckBox: FC<CheckBoxProps> = ({ value, disabled, onChange }) => {
   );
 };
 
-const BoxField = styled("div")<{ disabled?: boolean }>(({ disabled, theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  boxSizing: "border-box",
-  width: "16px",
-  height: "16px",
-  border: `1px solid ${theme.outline.weak}`,
-  borderRadius: "4px",
-  cursor: disabled ? "not-allowed" : "pointer",
-}));
+const BoxField = styled("div")<{ disabled?: boolean }>(
+  ({ disabled, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    width: "16px",
+    height: "16px",
+    border: `1px solid ${theme.outline.weak}`,
+    borderRadius: "4px",
+    cursor: disabled ? "not-allowed" : "pointer",
+  }),
+);
diff --git a/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx b/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
index 6146a70c2..617f458a9 100644
--- a/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
@@ -1,7 +1,6 @@
 import MonacoEditor, { OnMount } from "@monaco-editor/react";
-import { FC, useMemo, useCallback, useState, useEffect } from "react";
-
 import { fonts, styled, useTheme } from "@reearth/services/theme";
+import { FC, useMemo, useCallback, useState, useEffect } from "react";
 
 export type CodeInputProps = {
   value?: string;
@@ -110,8 +109,8 @@ const EditorWrapper = styled("div")<{
   border: disabled
     ? `1px solid ${theme.outline.weak}`
     : isActive
-    ? `1px solid ${theme.select.strong}`
-    : `1px solid ${theme.outline.weak}`,
+      ? `1px solid ${theme.select.strong}`
+      : `1px solid ${theme.outline.weak}`,
   borderRadius: theme.radius.small,
   cursor: disabled ? "not-allowed" : "text",
   boxShadow: theme.shadow.input,
diff --git a/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx
index 61b4f6a99..633f3d1a2 100644
--- a/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx
@@ -11,7 +11,14 @@ type Story = StoryObj<typeof Collapse>;
 
 export const Default: Story = {
   render: () => (
-    <div style={{ width: "500px", display: "flex", flexDirection: "column", gap: "12px" }}>
+    <div
+      style={{
+        width: "500px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
       <Collapse title="Default Collapse">
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
@@ -21,7 +28,14 @@ export const Default: Story = {
 
 export const Small: Story = {
   render: () => (
-    <div style={{ width: "500px", display: "flex", flexDirection: "column", gap: "12px" }}>
+    <div
+      style={{
+        width: "500px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
       <Collapse title="Small Collapse" size="small">
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
@@ -31,7 +45,14 @@ export const Small: Story = {
 
 export const NoPadding: Story = {
   render: () => (
-    <div style={{ width: "500px", display: "flex", flexDirection: "column", gap: "12px" }}>
+    <div
+      style={{
+        width: "500px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
       <Collapse title="No Padding Collapse" noPadding>
         <p>User can manage the content freely.</p>
       </Collapse>
@@ -41,7 +62,14 @@ export const NoPadding: Story = {
 
 export const HeaderBg: Story = {
   render: () => (
-    <div style={{ width: "500px", display: "flex", flexDirection: "column", gap: "12px" }}>
+    <div
+      style={{
+        width: "500px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
       <Collapse title="Customized Header Background" headerBg="#3B3CD0">
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
@@ -51,7 +79,14 @@ export const HeaderBg: Story = {
 
 export const InitialAsCollapsed: Story = {
   render: () => (
-    <div style={{ width: "500px", display: "flex", flexDirection: "column", gap: "12px" }}>
+    <div
+      style={{
+        width: "500px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
       <Collapse title="Collapsed" collapsed={true}>
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
diff --git a/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx b/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
index 821325cb2..045577051 100644
--- a/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
@@ -1,6 +1,5 @@
-import { FC, ReactNode, useCallback, useEffect, useState } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { FC, ReactNode, useCallback, useEffect, useState } from "react";
 
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
@@ -49,7 +48,8 @@ export const Collapse: FC<CollapseProps> = ({
         isCollapsed={isCollapsed}
         size={size}
         headerBg={headerBg}
-        disabled={disabled}>
+        disabled={disabled}
+      >
         <Typography size="body">{title}</Typography>
         <ActionsWapper>
           {actions}
@@ -95,8 +95,8 @@ const StyledHeader = styled("div")<{
     size === "normal"
       ? `${theme.spacing.small}px`
       : size === "large"
-      ? `${theme.spacing.large}px`
-      : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+        ? `${theme.spacing.large}px`
+        : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
   minHeight: size === "normal" ? "34px" : "28px",
   justifyContent: "space-between",
   alignItems: "center",
@@ -123,10 +123,10 @@ const ChildWrapper = styled("div")<{
   padding: noPadding
     ? 0
     : size === "normal"
-    ? `${theme.spacing.normal}px`
-    : size === "large"
-    ? `${theme.spacing.super}px`
-    : `${theme.spacing.small}px`,
+      ? `${theme.spacing.normal}px`
+      : size === "large"
+        ? `${theme.spacing.super}px`
+        : `${theme.spacing.small}px`,
   borderRadius: `0px 0px ${theme.radius.small}px ${theme.radius.small}px`,
   flexGrow: 1,
   display: "flex",
diff --git a/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts b/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts
index 68d8f8366..102f2f714 100644
--- a/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts
+++ b/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts
@@ -10,7 +10,9 @@ const useColorPicker = ({
   onChange,
 }: Pick<ColorInputProps, "value" | "alphaDisabled" | "onChange">) => {
   const [colorValue, setColorValue] = useState<string | undefined>(value);
-  const [pickerColor, setPickerColor] = useState<RgbaColor>(tinycolor(value).toRgb());
+  const [pickerColor, setPickerColor] = useState<RgbaColor>(
+    tinycolor(value).toRgb(),
+  );
 
   const [open, setOpen] = useState(false);
   const [isSwatchFocused, setSwatchFocused] = useState(false);
@@ -30,7 +32,10 @@ const useColorPicker = ({
   }, []);
 
   const handleHexInputBlur = useCallback(() => {
-    const hexPattern = /^#?([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/.test(colorValue || "");
+    const hexPattern =
+      /^#?([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/.test(
+        colorValue || "",
+      );
     const color = !colorValue || hexPattern ? colorValue : value;
     setPickerColor(tinycolor(color).toRgb());
     onChange?.(color || "");
@@ -59,14 +64,20 @@ const useColorPicker = ({
 
   const handlePickerApply = useCallback(() => {
     const color =
-      "#" + (alphaDisabled ? tinycolor(pickerColor).toHex() : tinycolor(pickerColor).toHex8());
+      "#" +
+      (alphaDisabled
+        ? tinycolor(pickerColor).toHex()
+        : tinycolor(pickerColor).toHex8());
     setColorValue(color);
     onChange?.(color || "");
     handlePickerClose();
   }, [onChange, handlePickerClose, alphaDisabled, pickerColor]);
 
   const channels = useMemo(
-    () => (alphaDisabled ? ["r", "g", "b"] : ["r", "g", "b", "a"]) as (keyof RgbaColor)[],
+    () =>
+      (alphaDisabled
+        ? ["r", "g", "b"]
+        : ["r", "g", "b", "a"]) as (keyof RgbaColor)[],
     [alphaDisabled],
   );
 
diff --git a/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx
index 5a847d113..19d9f827b 100644
--- a/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx
@@ -15,21 +15,21 @@ export const Default: Story = {
 };
 
 export const AlphaDisabled: Story = {
-  render: arg => <ColorInput onChange={action("onChange")} {...arg} />,
+  render: (arg) => <ColorInput onChange={action("onChange")} {...arg} />,
   args: {
     alphaDisabled: true,
   },
 };
 
 export const Disabled: Story = {
-  render: arg => <ColorInput {...arg} />,
+  render: (arg) => <ColorInput {...arg} />,
   args: {
     disabled: true,
   },
 };
 
 export const Small: Story = {
-  render: arg => <ColorInput onChange={action("onChange")} {...arg} />,
+  render: (arg) => <ColorInput onChange={action("onChange")} {...arg} />,
   args: {
     size: "small",
   },
diff --git a/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx b/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx
index f2612e1e1..b44c0e68c 100644
--- a/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx
@@ -1,6 +1,3 @@
-import { FC } from "react";
-import { RgbaColorPicker } from "react-colorful";
-
 import {
   Button,
   NumberInput,
@@ -9,6 +6,8 @@ import {
   PopupPanel,
 } from "@reearth/beta/lib/reearth-ui/components";
 import { fonts, styled } from "@reearth/services/theme";
+import { FC } from "react";
+import { RgbaColorPicker } from "react-colorful";
 
 import useHooks from "./hooks";
 
@@ -64,13 +63,19 @@ export const ColorInput: FC<ColorInputProps> = ({
             size={size}
             disabled={disabled}
           />
-        }>
+        }
+      >
         <PopupPanel
           title="Color Picker"
           onCancel={handlePickerCancel}
           actions={
             <ActionsWrapper>
-              <Button extendWidth size="small" title="Cancel" onClick={handlePickerCancel} />
+              <Button
+                extendWidth
+                size="small"
+                title="Cancel"
+                onClick={handlePickerCancel}
+              />
               <Button
                 extendWidth
                 size="small"
@@ -79,7 +84,8 @@ export const ColorInput: FC<ColorInputProps> = ({
                 onClick={handlePickerApply}
               />
             </ActionsWrapper>
-          }>
+          }
+        >
           <ColorPickerWrapper>
             <ColorPicker
               className="colorPicker"
@@ -89,11 +95,11 @@ export const ColorInput: FC<ColorInputProps> = ({
             />
             <Format>{alphaDisabled ? "RGB" : "RGBA"}</Format>
             <ChannelsWrapper>
-              {channels.map(channel => (
+              {channels.map((channel) => (
                 <NumberInput
                   key={channel}
                   value={pickerColor[channel]}
-                  onChange={value => handlePickerInputChange(channel, value)}
+                  onChange={(value) => handlePickerInputChange(channel, value)}
                   max={channel === "a" ? 1 : 255}
                   min={0}
                 />
@@ -137,7 +143,9 @@ const Swatch = styled("div")<{
   flexShrink: 0,
   borderRadius: theme.radius.small,
   boxShadow: theme.shadow.input,
-  border: status ? `1px solid ${theme.select.main}` : `1px solid ${theme.outline.weak}`,
+  border: status
+    ? `1px solid ${theme.select.main}`
+    : `1px solid ${theme.outline.weak}`,
   backgroundImage: alphaDisabled
     ? ""
     : `linear-gradient(45deg, ${theme.bg[2]} 25%, transparent 25%), linear-gradient(-45deg, ${theme.bg[2]} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${theme.bg[2]} 75%), linear-gradient(-45deg, transparent 75%, ${theme.bg[2]} 75%)`,
@@ -161,7 +169,7 @@ const Swatch = styled("div")<{
 }));
 
 const ColorPicker = styled(RgbaColorPicker, {
-  shouldForwardProp: prop => prop !== "alphaDisabled",
+  shouldForwardProp: (prop) => prop !== "alphaDisabled",
 })<{ alphaDisabled?: boolean }>(({ theme, alphaDisabled }) => ({
   gap: theme.spacing.normal,
   ".react-colorful__saturation-pointer": {
diff --git a/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx b/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
index 4822fdb2d..1683f624b 100644
--- a/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useCallback, useEffect, useState, ChangeEvent } from "react";
-
 import { fonts, styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState, ChangeEvent } from "react";
 
 export type DatePickerProps = {
   value?: string;
@@ -10,7 +9,12 @@ export type DatePickerProps = {
   onBlur?: (text: string) => void;
 };
 
-export const DatePicker: FC<DatePickerProps> = ({ value, disabled, onChange, onBlur }) => {
+export const DatePicker: FC<DatePickerProps> = ({
+  value,
+  disabled,
+  onChange,
+  onBlur,
+}) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const [isFocused, setIsFocused] = useState(false);
 
@@ -55,7 +59,9 @@ const Wrapper = styled("div")<{
 }>(({ theme, status }) => {
   return {
     border:
-      status === "active" ? `1px solid ${theme.select.main}` : `1px solid ${theme.outline.weak}`,
+      status === "active"
+        ? `1px solid ${theme.select.main}`
+        : `1px solid ${theme.outline.weak}`,
     borderRadius: theme.radius.small,
     background: theme.bg[1],
     display: "flex",
diff --git a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
index 1bd1447de..c89122fd0 100644
--- a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
@@ -33,7 +33,7 @@ const MockListContainer = styled("div")(({ theme }) => ({
   border: theme.outline.main,
 }));
 
-const DefaultComponent: typeof DragAndDropList<Item> = args => {
+const DefaultComponent: typeof DragAndDropList<Item> = (args) => {
   const [list1, setList1] = useState<Item[]>([
     { id: "1", content: <MockItem>Item 1</MockItem> },
     { id: "2", content: <MockItem>Item 2</MockItem> },
@@ -47,9 +47,15 @@ const DefaultComponent: typeof DragAndDropList<Item> = args => {
   );
 };
 
-export const Default: Story<{}> = () => {
+export const Default: Story = () => {
   return (
-    <div style={{ padding: "24px", display: "flex", justifyContent: "space-around" }}>
+    <div
+      style={{
+        padding: "24px",
+        display: "flex",
+        justifyContent: "space-around",
+      }}
+    >
       <DefaultComponent />
     </div>
   );
@@ -57,7 +63,7 @@ export const Default: Story<{}> = () => {
 
 const handleClassName = "asldkfja";
 
-const HandleComponent: typeof DragAndDropList<Item> = args => {
+const HandleComponent: typeof DragAndDropList<Item> = (args) => {
   const [list1, setList1] = useState<Item[]>([
     {
       id: "1",
@@ -95,15 +101,21 @@ const HandleComponent: typeof DragAndDropList<Item> = args => {
   );
 };
 
-export const Handle: Story<{}> = () => {
+export const Handle: Story = () => {
   return (
-    <div style={{ padding: "24px", display: "flex", justifyContent: "space-around" }}>
+    <div
+      style={{
+        padding: "24px",
+        display: "flex",
+        justifyContent: "space-around",
+      }}
+    >
       <HandleComponent handleClassName={handleClassName} />
     </div>
   );
 };
 
-const SharedComponent: typeof DragAndDropList<Item> = args => {
+const SharedComponent: typeof DragAndDropList<Item> = (args) => {
   const [list1, setList1] = useState<Item[]>([
     { id: "1", content: <MockItem>Item 1</MockItem> },
     { id: "2", content: <MockItem>Item 2</MockItem> },
@@ -119,26 +131,48 @@ const SharedComponent: typeof DragAndDropList<Item> = args => {
   return (
     <>
       <MockListContainer>
-        <DragAndDropList items={list1} setItems={setList1} group="shared-group" {...args} />
+        <DragAndDropList
+          items={list1}
+          setItems={setList1}
+          group="shared-group"
+          {...args}
+        />
       </MockListContainer>
       <MockListContainer>
-        <DragAndDropList items={list2} setItems={setList2} group="shared-group" {...args} />
+        <DragAndDropList
+          items={list2}
+          setItems={setList2}
+          group="shared-group"
+          {...args}
+        />
       </MockListContainer>
     </>
   );
 };
 
-export const Shared: Story<{}> = () => {
+export const Shared: Story = () => {
   return (
-    <div style={{ padding: "24px", display: "flex", justifyContent: "space-around" }}>
+    <div
+      style={{
+        padding: "24px",
+        display: "flex",
+        justifyContent: "space-around",
+      }}
+    >
       <SharedComponent />
     </div>
   );
 };
 
-export const Copy: Story<{}> = () => {
+export const Copy: Story = () => {
   return (
-    <div style={{ padding: "24px", display: "flex", justifyContent: "space-around" }}>
+    <div
+      style={{
+        padding: "24px",
+        display: "flex",
+        justifyContent: "space-around",
+      }}
+    >
       <SharedComponent group={{ name: "shared", pull: "clone" }} />
     </div>
   );
diff --git a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx
index 0e1a37ea5..641fb19ae 100644
--- a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx
@@ -1,4 +1,5 @@
 // DragAndDropList.tsx
+import { styled } from "@reearth/services/theme";
 import React, { useCallback } from "react";
 import {
   ReactSortable,
@@ -9,8 +10,6 @@ import {
   SortableEvent,
 } from "react-sortablejs";
 
-import { styled } from "@reearth/services/theme";
-
 export interface DragAndDropListProps<T extends ItemInterface> {
   items?: T[];
   setItems?: React.Dispatch<React.SetStateAction<T[]>>;
@@ -37,7 +36,11 @@ export const DragAndDropList = <T extends ItemInterface>({
   onMoveStart,
   onMoveEnd,
 }: DragAndDropListProps<T>) => {
-  const handleSetList = (newState: ItemInterface[], _sortable: Sortable | null, _store: Store) => {
+  const handleSetList = (
+    newState: ItemInterface[],
+    _sortable: Sortable | null,
+    _store: Store,
+  ) => {
     setItems?.(newState as T[]);
   };
 
@@ -64,9 +67,13 @@ export const DragAndDropList = <T extends ItemInterface>({
       ghostClass={GHOST_CLASSNAME}
       filter={`.${NO_DRAG_CLASSNAME}`}
       onStart={handleStart}
-      onEnd={handleEnd}>
-      {items?.map(item => (
-        <ItemWrapper key={item.id} className={dragDisabled ? NO_DRAG_CLASSNAME : ""}>
+      onEnd={handleEnd}
+    >
+      {items?.map((item) => (
+        <ItemWrapper
+          key={item.id}
+          className={dragDisabled ? NO_DRAG_CLASSNAME : ""}
+        >
           {item.content}
         </ItemWrapper>
       ))}
@@ -76,17 +83,21 @@ export const DragAndDropList = <T extends ItemInterface>({
 
 export default DragAndDropList;
 
-const StyledReactSortable = styled(ReactSortable)<{ gap?: "normal" | "small" | number }>(
-  ({ theme, gap }) => ({
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    gap:
-      gap === "small" ? theme.spacing.smallest : gap === "normal" ? theme.spacing.small : gap ?? 0,
-    [`.${GHOST_CLASSNAME}`]: {
-      opacity: 0,
-    },
-  }),
-);
+const StyledReactSortable = styled(ReactSortable)<{
+  gap?: "normal" | "small" | number;
+}>(({ theme, gap }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  gap:
+    gap === "small"
+      ? theme.spacing.smallest
+      : gap === "normal"
+        ? theme.spacing.small
+        : (gap ?? 0),
+  [`.${GHOST_CLASSNAME}`]: {
+    opacity: 0,
+  },
+}));
 
 const ItemWrapper = styled("div")(() => ({}));
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx
index 7487ea69c..e6821fa3c 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx
@@ -21,29 +21,49 @@ export const AllIcons: Story = {
           gap: "8px",
           width: "500px",
           marginBottom: "20px",
-        }}>
-        {Object.keys(IconList).map(iconName => {
+        }}
+      >
+        {Object.keys(IconList).map((iconName) => {
           const typedIconName = iconName as IconName;
           return (
             <div
               key={iconName}
-              style={{ display: "flex", flexDirection: "row", gap: "8px", cursor: "pointer" }}
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "8px",
+                cursor: "pointer",
+              }}
               title={iconName}
-              onClick={() => copyToClipboard(iconName)}>
+              onClick={() => copyToClipboard(iconName)}
+            >
               <Icon icon={typedIconName} />
             </div>
           );
         })}
       </div>
-      <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", width: "500px" }}>
-        {Object.keys(IconList).map(iconName => {
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "8px",
+          width: "500px",
+        }}
+      >
+        {Object.keys(IconList).map((iconName) => {
           const typedIconName = iconName as IconName;
           return (
             <div
               key={iconName}
-              style={{ display: "flex", flexDirection: "row", gap: "8px", cursor: "pointer" }}
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "8px",
+                cursor: "pointer",
+              }}
               title={iconName}
-              onClick={() => copyToClipboard(iconName)}>
+              onClick={() => copyToClipboard(iconName)}
+            >
               <Icon icon={typedIconName} size="large" color="#ff0000" />
             </div>
           );
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/index.tsx b/web/src/beta/lib/reearth-ui/components/Icon/index.tsx
index 6c5e47688..2046bc6b9 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Icon/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useMemo } from "react";
-
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import Icons from "./icons";
 
@@ -13,7 +12,12 @@ export type IconProps = {
   className?: string;
 };
 
-export const Icon: FC<IconProps> = ({ icon, size = "normal", color, className }) => {
+export const Icon: FC<IconProps> = ({
+  icon,
+  size = "normal",
+  color,
+  className,
+}) => {
   const theme = useTheme();
   const SvgIcon = useMemo(() => {
     const SvgComponent = Icons[icon as IconName];
@@ -22,12 +26,16 @@ export const Icon: FC<IconProps> = ({ icon, size = "normal", color, className })
       color?: string;
       size: "large" | "normal" | "small" | number;
     }>`
-      width: ${({ size }) => `${typeof size === "string" ? theme.icon[size] : size}px`};
-      height: ${({ size }) => `${typeof size === "string" ? theme.icon[size] : size}px`};
+      width: ${({ size }) =>
+        `${typeof size === "string" ? theme.icon[size] : size}px`};
+      height: ${({ size }) =>
+        `${typeof size === "string" ? theme.icon[size] : size}px`};
       color: ${({ color }) => color};
       transition-property: color, background;
     `;
   }, [icon, theme]);
 
-  return SvgIcon ? <SvgIcon size={size} color={color} className={className} /> : null;
+  return SvgIcon ? (
+    <SvgIcon size={size} color={color} className={className} />
+  ) : null;
 };
diff --git a/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx
index 5182d3feb..2bf0ad172 100644
--- a/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx
@@ -20,29 +20,55 @@ export const Default: Story = {
 };
 
 export const Primary: Story = {
-  render: () => <IconButton icon="polyline" appearance="primary" onClick={action("onClick")} />,
+  render: () => (
+    <IconButton
+      icon="polyline"
+      appearance="primary"
+      onClick={action("onClick")}
+    />
+  ),
 };
 
 export const Simple: Story = {
-  render: () => <IconButton icon="polyline" appearance="simple" onClick={action("onClick")} />,
+  render: () => (
+    <IconButton
+      icon="polyline"
+      appearance="simple"
+      onClick={action("onClick")}
+    />
+  ),
 };
 
 export const Disabled: Story = {
   render: () => (
-    <IconButton icon="polyline" appearance="simple" disabled onClick={action("onClick")} />
+    <IconButton
+      icon="polyline"
+      appearance="simple"
+      disabled
+      onClick={action("onClick")}
+    />
   ),
 };
 
 export const Large: Story = {
-  render: () => <IconButton icon="polyline" size="large" onClick={action("onClick")} />,
+  render: () => (
+    <IconButton icon="polyline" size="large" onClick={action("onClick")} />
+  ),
 };
 
 export const Small: Story = {
-  render: () => <IconButton icon="polyline" size="small" onClick={action("onClick")} />,
+  render: () => (
+    <IconButton icon="polyline" size="small" onClick={action("onClick")} />
+  ),
 };
 
 export const Active: Story = {
   render: () => (
-    <IconButton icon="polyline" appearance="primary" active onClick={action("onClick")} />
+    <IconButton
+      icon="polyline"
+      appearance="primary"
+      active
+      onClick={action("onClick")}
+    />
   ),
 };
diff --git a/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx b/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
index 1c32aae7b..39779f87a 100644
--- a/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
@@ -1,6 +1,5 @@
-import { FC, MouseEvent, useCallback } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { FC, MouseEvent, useCallback } from "react";
 
 import { IconName, Icon } from "../Icon";
 
@@ -44,7 +43,8 @@ export const IconButton: FC<IconButtonProps> = ({
       size={size}
       active={active}
       iconRotate={iconRotate}
-      onClick={handleClick}>
+      onClick={handleClick}
+    >
       <Icon icon={icon} />
     </StyledButton>
   );
@@ -62,26 +62,49 @@ const StyledButton = styled("button")<{
   justifyContent: "center",
   flexShrink: 0,
   width:
-    size === "smallest" ? "16px" : size === "small" ? "20px" : size === "large" ? "36px" : "24px",
+    size === "smallest"
+      ? "16px"
+      : size === "small"
+        ? "20px"
+        : size === "large"
+          ? "36px"
+          : "24px",
   height:
-    size === "smallest" ? "16px" : size === "small" ? "20px" : size === "large" ? "36px" : "24px",
-  borderRadius: size === "small" ? `${theme.radius.small}px` : `${theme.radius.normal}px`,
+    size === "smallest"
+      ? "16px"
+      : size === "small"
+        ? "20px"
+        : size === "large"
+          ? "36px"
+          : "24px",
+  borderRadius:
+    size === "small" ? `${theme.radius.small}px` : `${theme.radius.normal}px`,
   color: active
     ? `${theme.content.withBackground}`
     : appearance === "primary"
-    ? `${theme.primary.main}`
-    : appearance === "dangerous"
-    ? `${theme.dangerous.main}`
-    : `${theme.content.main}`,
+      ? `${theme.primary.main}`
+      : appearance === "dangerous"
+        ? `${theme.dangerous.main}`
+        : `${theme.content.main}`,
   backgroundColor: active
     ? `${theme["primary"].weak}`
     : appearance === "simple"
-    ? "transparent"
-    : `${theme.bg[1]}`,
+      ? "transparent"
+      : `${theme.bg[1]}`,
   boxShadow: appearance !== "simple" ? theme.shadow.button : "none",
   ["svg"]: {
-    width: size === "small" || size === "smallest" ? "12px" : size === "large" ? "20px" : "16px",
-    height: size === "small" || size === "smallest" ? "12px" : size === "large" ? "20px" : "16px",
+    width:
+      size === "small" || size === "smallest"
+        ? "12px"
+        : size === "large"
+          ? "20px"
+          : "16px",
+    height:
+      size === "small" || size === "smallest"
+        ? "12px"
+        : size === "large"
+          ? "20px"
+          : "16px",
     transform: iconRotate ? `rotate(${iconRotate})` : "none",
     transition: "transform 0.1s",
   },
@@ -90,12 +113,13 @@ const StyledButton = styled("button")<{
     backgroundColor: active
       ? `${theme["primary"].weak}`
       : appearance === "simple"
-      ? "transparent"
-      : `${theme[appearance].weak}`,
+        ? "transparent"
+        : `${theme[appearance].weak}`,
   },
   ["&:active"]: {
     color: `${theme.content.withBackground}`,
-    backgroundColor: appearance === "simple" ? "transparent" : `${theme[appearance].main}`,
+    backgroundColor:
+      appearance === "simple" ? "transparent" : `${theme[appearance].main}`,
     boxShadow: "none",
   },
   ["&:disabled"]: {
diff --git a/web/src/beta/lib/reearth-ui/components/Loading/index.tsx b/web/src/beta/lib/reearth-ui/components/Loading/index.tsx
index bd01d62a1..0a046979d 100644
--- a/web/src/beta/lib/reearth-ui/components/Loading/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Loading/index.tsx
@@ -1,8 +1,7 @@
+import { styled, useTheme } from "@reearth/services/theme";
 import { FC } from "react";
 import { RingLoader } from "react-spinners";
 
-import { styled, useTheme } from "@reearth/services/theme";
-
 export type LoadingProps = {
   animationSize?: number;
   animationColor?: string;
@@ -22,24 +21,29 @@ export const Loading: FC<LoadingProps> = ({
 
   return (
     <LoadingWrapper fixed={fixed} overlay={overlay} relative={relative}>
-      <RingLoader size={animationSize ?? 33} color={animationColor ?? theme.select.main} />
+      <RingLoader
+        size={animationSize ?? 33}
+        color={animationColor ?? theme.select.main}
+      />
     </LoadingWrapper>
   );
 };
 
-const LoadingWrapper = styled("div")<{ fixed?: boolean; overlay?: boolean; relative?: boolean }>(
-  ({ theme, fixed, relative, overlay }) => ({
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexDirection: "column",
-    background: overlay ? theme.bg[1] : "",
-    position: fixed ? "fixed" : relative ? "relative" : "absolute",
-    top: 0,
-    left: 0,
-    opacity: "0.8",
-    zIndex: theme.zIndexes.editor.loading,
-  }),
-);
+const LoadingWrapper = styled("div")<{
+  fixed?: boolean;
+  overlay?: boolean;
+  relative?: boolean;
+}>(({ theme, fixed, relative, overlay }) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  flexDirection: "column",
+  background: overlay ? theme.bg[1] : "",
+  position: fixed ? "fixed" : relative ? "relative" : "absolute",
+  top: 0,
+  left: 0,
+  opacity: "0.8",
+  zIndex: theme.zIndexes.editor.loading,
+}));
diff --git a/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx b/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx
index d6e195d10..0477a0358 100644
--- a/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx
@@ -1,11 +1,10 @@
+import { Typography, typographyStyles } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
 import { FC, useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import gfm from "remark-gfm";
 import tinycolor from "tinycolor2";
 
-import { Typography, typographyStyles } from "@reearth/beta/utils/value";
-import { styled } from "@reearth/services/theme";
-
 export type Props = {
   className?: string;
   children?: string;
@@ -36,56 +35,77 @@ export const Markdown: FC<Props> = ({
       styles={styles}
       dark={dark}
       onClick={onClick}
-      onDoubleClick={onDoubleClick}>
-      <ReactMarkdown remarkPlugins={plugins} className={className} linkTarget="_blank">
+      onDoubleClick={onDoubleClick}
+    >
+      <ReactMarkdown
+        remarkPlugins={plugins}
+        className={className}
+        linkTarget="_blank"
+      >
         {children || ""}
       </ReactMarkdown>
     </Wrapper>
   );
 };
 
-const Wrapper = styled("div")<{ styles?: Typography; dark: boolean }>(({ styles, dark }) => ({
-  backgroundColor: "transparent",
-  color: "inherit",
-  fontFamily: "inherit",
-  fontSize: "inherit",
-  lineHeight: "inherit",
-  ...typographyStyles(styles),
-  ["h1"]: {
-    borderBottom: "none",
-  },
-  ["h2"]: {
-    borderBottom: "none",
-  },
-  ["code"]: {
-    backgroundColor: dark ? "rgba(240, 246, 252, 0.15)" : "rgba(27, 31, 35, 0.05)",
-  },
-  [".highlight pre"]: {
-    backgroundColor: dark ? "rgba(22, 27, 34, 0.1)" : "rgba(246, 248, 250, 0.1)",
-  },
-  ["pre"]: {
-    backgroundColor: dark ? "rgba(22, 27, 34, 0.1)" : "rgba(246, 248, 250, 0.1)",
-  },
-  ["table tr"]: {
-    backgroundColor: "inherit",
-    borderTopColor: dark ? "rgba(39, 67, 75, 0.1)" : "rgba(198, 203, 209, 0.1)",
-  },
-  ["table tr nthOfType(2n)"]: {
-    backgroundColor: dark ? "rgba(22, 27, 34, 0.1)" : "rgba(246, 248, 250, 0.1)",
-  },
-  ["table td"]: {
-    borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)",
-  },
-  ["table th"]: {
-    borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)",
-  },
-  ["blockquote"]: {
-    color: dark ? "rgba(139, 148, 158, 0.6)" : "rgba(106, 115, 125, 0.6)",
-    borderLeftColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)",
-  },
-  ["hr"]: {
-    backgroundColor: dark ? "rgba(48, 54, 61, 0.1" : "rgba(225, 228, 232, 0.1)",
-  },
-}));
+const Wrapper = styled("div")<{ styles?: Typography; dark: boolean }>(
+  ({ styles, dark }) => ({
+    backgroundColor: "transparent",
+    color: "inherit",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    ...typographyStyles(styles),
+    ["h1"]: {
+      borderBottom: "none",
+    },
+    ["h2"]: {
+      borderBottom: "none",
+    },
+    ["code"]: {
+      backgroundColor: dark
+        ? "rgba(240, 246, 252, 0.15)"
+        : "rgba(27, 31, 35, 0.05)",
+    },
+    [".highlight pre"]: {
+      backgroundColor: dark
+        ? "rgba(22, 27, 34, 0.1)"
+        : "rgba(246, 248, 250, 0.1)",
+    },
+    ["pre"]: {
+      backgroundColor: dark
+        ? "rgba(22, 27, 34, 0.1)"
+        : "rgba(246, 248, 250, 0.1)",
+    },
+    ["table tr"]: {
+      backgroundColor: "inherit",
+      borderTopColor: dark
+        ? "rgba(39, 67, 75, 0.1)"
+        : "rgba(198, 203, 209, 0.1)",
+    },
+    ["table tr nthOfType(2n)"]: {
+      backgroundColor: dark
+        ? "rgba(22, 27, 34, 0.1)"
+        : "rgba(246, 248, 250, 0.1)",
+    },
+    ["table td"]: {
+      borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)",
+    },
+    ["table th"]: {
+      borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)",
+    },
+    ["blockquote"]: {
+      color: dark ? "rgba(139, 148, 158, 0.6)" : "rgba(106, 115, 125, 0.6)",
+      borderLeftColor: dark
+        ? "rgba(59, 67, 75, 0.1)"
+        : "rgba(223, 226, 229, 0.1)",
+    },
+    ["hr"]: {
+      backgroundColor: dark
+        ? "rgba(48, 54, 61, 0.1"
+        : "rgba(225, 228, 232, 0.1)",
+    },
+  }),
+);
 
 const isDark = (hex: string): boolean => tinycolor(hex).isDark();
diff --git a/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx
index 6e96bec90..23fa697d8 100644
--- a/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx
@@ -13,7 +13,10 @@ const meta: Meta<ModalProps> = {
 export default meta;
 type Story = StoryObj<typeof ModalComponent>;
 
-const Modal: FC<ModalProps> = ({ size, children }: Omit<ModalProps, "visible">) => {
+const Modal: FC<ModalProps> = ({
+  size,
+  children,
+}: Omit<ModalProps, "visible">) => {
   const [visible, setVisible] = useState(false);
 
   const handleOpen = useCallback(() => {
@@ -30,15 +33,27 @@ const Modal: FC<ModalProps> = ({ size, children }: Omit<ModalProps, "visible">)
       {visible && (
         <ModalComponent size={size} visible={visible}>
           {children ? (
-            <div style={{ padding: "24px", borderRadius: "4px", background: "#262626" }}>
+            <div
+              style={{
+                padding: "24px",
+                borderRadius: "4px",
+                background: "#262626",
+              }}
+            >
               {children}
               <div
                 style={{
                   justifyContent: "flex-end",
                   display: "flex",
                   paddingTop: "10px",
-                }}>
-                <Button onClick={handleClose} size="normal" title="Okay" appearance="primary" />
+                }}
+              >
+                <Button
+                  onClick={handleClose}
+                  size="normal"
+                  title="Okay"
+                  appearance="primary"
+                />
               </div>
             </div>
           ) : (
@@ -50,13 +65,16 @@ const Modal: FC<ModalProps> = ({ size, children }: Omit<ModalProps, "visible">)
                   <Button onClick={handleClose} size="normal" title="Cancel" />
                   <Button size="normal" title="Apply" appearance="primary" />
                 </>
-              }>
+              }
+            >
               <div style={{ padding: "24px" }}>
-                Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
-                literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
-                professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
-                Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of
-                the word in classical literature, discovered the undoubtable source.
+                Lorem Ipsum is not simply random text. It has roots in a piece
+                of classical Latin literature from 45 BC, making it over 2000
+                years old. Richard McClintock, a Latin professor at
+                Hampden-Sydney College in Virginia, looked up one of the more
+                obscure Latin words, consectetur, from a Lorem Ipsum passage,
+                and going through the cites of the word in classical literature,
+                discovered the undoubtable source.
               </div>
             </ModalPanel>
           )}
@@ -67,15 +85,17 @@ const Modal: FC<ModalProps> = ({ size, children }: Omit<ModalProps, "visible">)
 };
 
 export const SmallSize: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <Modal {...args} size="small">
         <div>
-          <h5 style={{ margin: 0, fontSize: "16px", lineHeight: "24px" }}>Title</h5>
-          Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
-          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
-          professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
-          bvncfyutghjkm,
+          <h5 style={{ margin: 0, fontSize: "16px", lineHeight: "24px" }}>
+            Title
+          </h5>
+          Lorem Ipsum is not simply random text. It has roots in a piece of
+          classical Latin literature from 45 BC, making it over 2000 years old.
+          Richard McClintock, a Latin professor at Hampden-Sydney College in
+          Virginia, looked up one of the more obscure bvncfyutghjkm,
         </div>
       </Modal>
     );
@@ -86,7 +106,7 @@ export const SmallSize: Story = {
 };
 
 export const MediumSize: Story = {
-  render: args => {
+  render: (args) => {
     return <Modal {...args} size="medium" />;
   },
   args: {
@@ -95,7 +115,7 @@ export const MediumSize: Story = {
 };
 
 export const LargeSize: Story = {
-  render: args => {
+  render: (args) => {
     return <Modal {...args} size="large" />;
   },
   args: {
diff --git a/web/src/beta/lib/reearth-ui/components/Modal/index.tsx b/web/src/beta/lib/reearth-ui/components/Modal/index.tsx
index c9884bcdd..2114d7e3b 100644
--- a/web/src/beta/lib/reearth-ui/components/Modal/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Modal/index.tsx
@@ -1,6 +1,5 @@
-import { FC, ReactNode, useMemo, useRef } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { FC, ReactNode, useMemo, useRef } from "react";
 
 export type ModalProps = {
   visible: boolean;
@@ -20,8 +19,8 @@ export const Modal: FC<ModalProps> = ({ visible, children, size }) => {
       size === "small"
         ? DEFAULT_SMALL_WIDTH
         : size === "large"
-        ? DEFAULT_LARGE_WIDTH
-        : DEFAULT_MEDIUM_WIDTH,
+          ? DEFAULT_LARGE_WIDTH
+          : DEFAULT_MEDIUM_WIDTH,
     [size],
   );
 
@@ -46,12 +45,14 @@ const Wrapper = styled("div")(({ theme }) => ({
   zIndex: theme.zIndexes.editor.modal.bg,
 }));
 
-const ContentWrapper = styled("div")<{ modalWidth?: number }>(({ modalWidth }) => ({
-  margin: "0 auto",
-  height: "100%",
-  width: `${modalWidth}px`,
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-}));
+const ContentWrapper = styled("div")<{ modalWidth?: number }>(
+  ({ modalWidth }) => ({
+    margin: "0 auto",
+    height: "100%",
+    width: `${modalWidth}px`,
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+  }),
+);
diff --git a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx
index 2645b0643..32d06f54a 100644
--- a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx
@@ -14,18 +14,26 @@ export default meta;
 type Story = StoryObj<typeof ModalPanel>;
 
 const MockChild: FC = () => (
-  <div style={{ color: "#e0e0e0", fontSize: "14px", width: "417px", padding: "24px" }}>
+  <div
+    style={{
+      color: "#e0e0e0",
+      fontSize: "14px",
+      width: "417px",
+      padding: "24px",
+    }}
+  >
     <p>
-      Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
-      from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at
-      Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
-      consectetur, from a Lorem Ipsum passage,
+      Lorem Ipsum is not simply random text. It has roots in a piece of
+      classical Latin literature from 45 BC, making it over 2000 years old.
+      Richard McClintock, a Latin professor at Hampden-Sydney College in
+      Virginia, looked up one of the more obscure Latin words, consectetur, from
+      a Lorem Ipsum passage,
     </p>
   </div>
 );
 
 export const Default: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <div style={{ width: "fit-content" }}>
         <ModalPanel {...args} />
@@ -40,7 +48,7 @@ export const Default: Story = {
 };
 
 export const MultipleActions: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <div style={{ width: "490px" }}>
         <ModalPanel {...args} />
diff --git a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
index 894fe449b..aa5d6fbbd 100644
--- a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
@@ -1,7 +1,6 @@
-import { FC, ReactNode } from "react";
-
 import { Button } from "@reearth/beta/lib/reearth-ui";
 import { fonts, styled } from "@reearth/services/theme";
+import { FC, ReactNode } from "react";
 
 export type ModalPanelProps = {
   title?: string;
@@ -25,7 +24,13 @@ export const ModalPanel: FC<ModalPanelProps> = ({
       {appearance !== "simple" && (
         <HeaderWrapper>
           <Title>{title}</Title>
-          <Button iconButton icon="close" size="small" onClick={onCancel} appearance="simple" />
+          <Button
+            iconButton
+            icon="close"
+            size="small"
+            onClick={onCancel}
+            appearance="simple"
+          />
         </HeaderWrapper>
       )}
       {layout === "common" ? (
@@ -33,7 +38,11 @@ export const ModalPanel: FC<ModalPanelProps> = ({
       ) : (
         <Content>{children}</Content>
       )}
-      {actions && <ActionWrapper showBorder={appearance !== "simple"}>{actions}</ActionWrapper>}
+      {actions && (
+        <ActionWrapper showBorder={appearance !== "simple"}>
+          {actions}
+        </ActionWrapper>
+      )}
     </Wrapper>
   );
 };
@@ -68,17 +77,19 @@ const Content = styled("div")(() => ({
   alignSelf: "stretch",
 }));
 
-const ActionWrapper = styled("div")<{ showBorder: boolean }>(({ theme, showBorder }) => ({
-  padding: theme.spacing.normal,
-  background: theme.bg[1],
-  borderBottomRightRadius: theme.radius.large,
-  borderBottomLeftRadius: theme.radius.large,
-  justifyContent: "flex-end",
-  display: "flex",
-  alignItems: "flex-start",
-  borderTop: showBorder ? `1px solid ${theme.outline.weaker}` : "none",
-  gap: theme.spacing.normal,
-}));
+const ActionWrapper = styled("div")<{ showBorder: boolean }>(
+  ({ theme, showBorder }) => ({
+    padding: theme.spacing.normal,
+    background: theme.bg[1],
+    borderBottomRightRadius: theme.radius.large,
+    borderBottomLeftRadius: theme.radius.large,
+    justifyContent: "flex-end",
+    display: "flex",
+    alignItems: "flex-start",
+    borderTop: showBorder ? `1px solid ${theme.outline.weaker}` : "none",
+    gap: theme.spacing.normal,
+  }),
+);
 
 const CommonLayout = styled("div")(({ theme }) => ({
   width: "100%",
diff --git a/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx b/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
index 1e056a2bb..f36627278 100644
--- a/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
@@ -1,6 +1,5 @@
-import { useState, useCallback, useEffect, FC, ChangeEvent } from "react";
-
 import { fonts, styled } from "@reearth/services/theme";
+import { useState, useCallback, useEffect, FC, ChangeEvent } from "react";
 
 export type NumberInputProps = {
   value?: number | string;
@@ -29,7 +28,9 @@ export const NumberInput: FC<NumberInputProps> = ({
   onChange,
   onBlur,
 }) => {
-  const [currentValue, setCurrentValue] = useState<string>(value?.toString() ?? "");
+  const [currentValue, setCurrentValue] = useState<string>(
+    value?.toString() ?? "",
+  );
   const [isFocused, setIsFocused] = useState(false);
 
   useEffect(() => {
@@ -53,7 +54,9 @@ export const NumberInput: FC<NumberInputProps> = ({
           }
         }
         setCurrentValue(validatedValue);
-        onChange?.(currentValue === "" ? undefined : parseFloat(validatedValue));
+        onChange?.(
+          currentValue === "" ? undefined : parseFloat(validatedValue),
+        );
       }
     },
     [max, min, onChange],
@@ -77,7 +80,11 @@ export const NumberInput: FC<NumberInputProps> = ({
   }, []);
 
   return (
-    <Wrapper size={size} status={isFocused ? "active" : "default"} extendWidth={extendWidth}>
+    <Wrapper
+      size={size}
+      status={isFocused ? "active" : "default"}
+      extendWidth={extendWidth}
+    >
       <StyledInput
         value={currentValue}
         disabled={disabled}
@@ -99,7 +106,9 @@ const Wrapper = styled("div")<{
 }>(({ size, theme, status, extendWidth }) => {
   return {
     border:
-      status === "active" ? `1px solid ${theme.select.main}` : `1px solid ${theme.outline.weak}`,
+      status === "active"
+        ? `1px solid ${theme.select.main}`
+        : `1px solid ${theme.outline.weak}`,
     borderRadius: theme.radius.small,
     background: theme.bg[1],
     display: "flex",
@@ -123,7 +132,10 @@ const StyledInput = styled("input")<{
   outline: "none",
   border: "none",
   background: "none",
-  color: disabled && appearance !== "readonly" ? theme.content.weaker : theme.content.main,
+  color:
+    disabled && appearance !== "readonly"
+      ? theme.content.weaker
+      : theme.content.main,
   flex: 1,
   cursor: disabled || appearance === "readonly" ? "not-allowed" : "auto",
   fontSize: fonts.sizes.body,
diff --git a/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx
index d985464db..9dc6f6ff9 100644
--- a/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx
@@ -1,8 +1,7 @@
+import { fonts, styled } from "@reearth/services/theme";
 import { Meta, StoryObj } from "@storybook/react";
 import { FC, useCallback, useState } from "react";
 
-import { fonts, styled } from "@reearth/services/theme";
-
 import { Button } from "../Button";
 
 import { Popup, PopupProps } from ".";
@@ -18,7 +17,8 @@ const MockChild: FC = () => (
   <Container>
     <Title>Title</Title>
     <Content>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum
     </Content>
   </Container>
 );
@@ -27,7 +27,8 @@ const MockChildWithClose: FC<{ onClose: () => void }> = ({ onClose }) => (
   <Container>
     <Title>Title</Title>
     <Content>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum
     </Content>
     <Button title="Close" onClick={onClose} />
   </Container>
@@ -60,7 +61,7 @@ const Wrapper = styled("div")(({ theme }) => ({
 }));
 
 export const BasicTrigger: Story = {
-  render: args => {
+  render: (args) => {
     return <Popup {...args} />;
   },
   args: {
@@ -71,14 +72,20 @@ export const BasicTrigger: Story = {
   parameters: {
     docs: {
       description: {
-        story: "When passing a string as a trigger, it will be rendered as a button.",
+        story:
+          "When passing a string as a trigger, it will be rendered as a button.",
       },
     },
   },
 };
 
 export const CustomTrigger: Story = {
-  render: args => <Popup {...args} trigger={<Button title="Click me" appearance="primary" />} />,
+  render: (args) => (
+    <Popup
+      {...args}
+      trigger={<Button title="Click me" appearance="primary" />}
+    />
+  ),
   args: {
     placement: "bottom",
     children: <MockChild />,
@@ -86,7 +93,7 @@ export const CustomTrigger: Story = {
 };
 
 export const MultipleTrigger: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <Wrapper>
         <Popup trigger="Click me" {...args} />
@@ -101,7 +108,7 @@ export const MultipleTrigger: Story = {
 };
 
 export const Placement: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <div
         style={{
@@ -111,7 +118,8 @@ export const Placement: Story = {
           gridTemplateColumns: "1fr 1fr 1fr",
           justifyItems: "center",
           alignItems: "center",
-        }}>
+        }}
+      >
         <Popup {...args} trigger="top-start" placement="top-start" />
         <Popup {...args} trigger="top" placement="top" />
         <Popup {...args} trigger="top-end" placement="top-end" />
@@ -145,7 +153,8 @@ const ControlledComponent: FC = () => {
     <Popup
       trigger={<Button title="Click me" appearance="primary" />}
       open={open}
-      onOpenChange={setOpen}>
+      onOpenChange={setOpen}
+    >
       <MockChildWithClose onClose={handleClose} />
     </Popup>
   );
diff --git a/web/src/beta/lib/reearth-ui/components/Popup/index.tsx b/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
index 63d21b978..b4f87ae26 100644
--- a/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
@@ -6,11 +6,10 @@ import {
   OffsetOptions,
   ShiftOptions,
 } from "@floating-ui/react";
-import { forwardRef, useCallback, type HTMLProps, type ReactNode } from "react";
-import { createContext, useContext } from "react";
-
 import { Button } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { forwardRef, useCallback, type HTMLProps, type ReactNode } from "react";
+import { createContext, useContext } from "react";
 
 import usePopover from "./hooks";
 
@@ -34,7 +33,10 @@ type TriggerProps = {
 };
 
 const Trigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TriggerProps>(
-  function PopoverTrigger({ children, disabled, extendWidth, ...props }, propRef) {
+  function PopoverTrigger(
+    { children, disabled, extendWidth, ...props },
+    propRef,
+  ) {
     const context = usePopoverContext();
     const childrenRef = (children as any)?.ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
@@ -44,37 +46,38 @@ const Trigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TriggerProps>(
         disabled={disabled}
         extendWidth={extendWidth}
         ref={ref}
-        {...context.getReferenceProps(props)}>
+        {...context.getReferenceProps(props)}
+      >
         {typeof children === "string" ? <Button title={children} /> : children}
       </TriggerWrapper>
     );
   },
 );
 
-const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function Content(
-  { style, ...props },
-  propRef,
-) {
-  const { context: floatingContext, ...context } = usePopoverContext();
-  const ref = useMergeRefs([context.refs.setFloating, propRef]);
-  if (!floatingContext.open) return null;
+const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  function Content({ style, ...props }, propRef) {
+    const { context: floatingContext, ...context } = usePopoverContext();
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    if (!floatingContext.open) return null;
 
-  return (
-    <FloatingPortal>
-      <FloatingFocusManager context={floatingContext}>
-        <ContentWrapper
-          ref={ref}
-          style={{
-            ...context.floatingStyles,
-            ...style,
-          }}
-          {...context.getFloatingProps(props)}>
-          {props.children}
-        </ContentWrapper>
-      </FloatingFocusManager>
-    </FloatingPortal>
-  );
-});
+    return (
+      <FloatingPortal>
+        <FloatingFocusManager context={floatingContext}>
+          <ContentWrapper
+            ref={ref}
+            style={{
+              ...context.floatingStyles,
+              ...style,
+            }}
+            {...context.getFloatingProps(props)}
+          >
+            {props.children}
+          </ContentWrapper>
+        </FloatingFocusManager>
+      </FloatingPortal>
+    );
+  },
+);
 
 export type PopupProps = {
   children?: ReactNode;
@@ -118,12 +121,13 @@ export const Popup = ({
   );
 };
 
-const TriggerWrapper = styled("div")<{ disabled?: boolean; extendWidth?: boolean }>(
-  ({ disabled, extendWidth }) => ({
-    width: extendWidth ? "100%" : "fit-content",
-    pointerEvents: disabled ? "none" : "auto",
-  }),
-);
+const TriggerWrapper = styled("div")<{
+  disabled?: boolean;
+  extendWidth?: boolean;
+}>(({ disabled, extendWidth }) => ({
+  width: extendWidth ? "100%" : "fit-content",
+  pointerEvents: disabled ? "none" : "auto",
+}));
 
 const ContentWrapper = styled("div")(({ theme }) => ({
   zIndex: theme.zIndexes.editor.popover,
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
index 6772a84bf..9634188ab 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
@@ -126,7 +126,12 @@ export const CustomLabel: Story = {
 export const MultilevelMenu: Story = {
   render: () => (
     <div style={{ margin: "5px", height: "120px" }}>
-      <PopupMenu label="Multilevel Menu" icon="data" menu={multlevelItems} width={200} />
+      <PopupMenu
+        label="Multilevel Menu"
+        icon="data"
+        menu={multlevelItems}
+        width={200}
+      />
     </div>
   ),
 };
@@ -135,7 +140,9 @@ export const IconsMenu: Story = {
   render: () => (
     <div style={{ margin: "5px", height: "120px" }}>
       <PopupMenu
-        label={<Button appearance="primary" iconButton={true} icon="settingFilled" />}
+        label={
+          <Button appearance="primary" iconButton={true} icon="settingFilled" />
+        }
         menu={menuItems}
       />
     </div>
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
index b70f459a3..a96f2a000 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
@@ -1,9 +1,14 @@
+import {
+  Popup,
+  Icon,
+  Typography,
+  IconName,
+  PopupProps,
+} from "@reearth/beta/lib/reearth-ui";
+import { styled, useTheme } from "@reearth/services/theme";
 import { FC, ReactNode, useCallback, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
-import { Popup, Icon, Typography, IconName, PopupProps } from "@reearth/beta/lib/reearth-ui";
-import { styled, useTheme } from "@reearth/services/theme";
-
 const MULTLEVEL_OFFSET = 12;
 const DEFAULT_OFFSET = 4;
 const DEFAULT_MENU_WIDTH = 180;
@@ -13,9 +18,7 @@ export type CustomSubMenu = {
   menuItem: PopupMenuItem;
 };
 
-interface Accumulator {
-  [key: string]: PopupMenuItem[];
-}
+type Accumulator = Record<string, PopupMenuItem[]>;
 
 export type PopupMenuItem = {
   customSubMenuLabel?: string;
@@ -82,7 +85,16 @@ export const PopupMenu: FC<PopupMenuProps> = ({
   );
 
   const renderSingleItem = (item: PopupMenuItem, index: number) => {
-    const { icon, id, hasBorderBottom, onClick, path, selected, subItem, title } = item;
+    const {
+      icon,
+      id,
+      hasBorderBottom,
+      onClick,
+      path,
+      selected,
+      subItem,
+      title,
+    } = item;
     return (
       <Item
         hasBorderBottom={!!hasBorderBottom}
@@ -91,9 +103,14 @@ export const PopupMenu: FC<PopupMenuProps> = ({
         onClick={() => {
           onClick?.(id);
           handlePopOver(false);
-        }}>
+        }}
+      >
         {icon && (
-          <Icon icon={icon} size="small" color={iconColor ? iconColor : theme.content.weak} />
+          <Icon
+            icon={icon}
+            size="small"
+            color={iconColor ? iconColor : theme.content.weak}
+          />
         )}
         <SubItem>
           {subItem ? (
@@ -105,7 +122,9 @@ export const PopupMenu: FC<PopupMenuProps> = ({
           ) : (
             <Typography size="body">{title}</Typography>
           )}
-          {selected && <Icon icon="check" size="small" color={theme.content.main} />}
+          {selected && (
+            <Icon icon="check" size="small" color={theme.content.main} />
+          )}
         </SubItem>
       </Item>
     );
@@ -114,7 +133,10 @@ export const PopupMenu: FC<PopupMenuProps> = ({
   const renderSubMenuItems = (subMenuItems: PopupMenuItem[]) => {
     const groups = subMenuItems
       .sort((a, b) => {
-        if (a.customSubMenuOrder !== undefined && b.customSubMenuOrder !== undefined) {
+        if (
+          a.customSubMenuOrder !== undefined &&
+          b.customSubMenuOrder !== undefined
+        ) {
           return a.customSubMenuOrder - b.customSubMenuOrder;
         }
         return 0;
@@ -135,8 +157,12 @@ export const PopupMenu: FC<PopupMenuProps> = ({
       <PopupMenuWrapper width={width} nested={nested}>
         {customSubMenu.map((item, index) => (
           <Group key={index}>
-            <SubMenuHeader>{customSubMenu[index][0].customSubMenuLabel}</SubMenuHeader>
-            {item.map((subItem, subIndex) => renderSingleItem(subItem, subIndex))}
+            <SubMenuHeader>
+              {customSubMenu[index][0].customSubMenuLabel}
+            </SubMenuHeader>
+            {item.map((subItem, subIndex) =>
+              renderSingleItem(subItem, subIndex),
+            )}
           </Group>
         ))}
       </PopupMenuWrapper>
@@ -158,7 +184,11 @@ export const PopupMenu: FC<PopupMenuProps> = ({
       <LabelWrapper size={size} nested={!!nested}>
         {icon && <Icon icon={icon} size="small" />}
         <Label nested={!!nested}>{label}</Label>
-        <Icon color={theme.content.weak} icon={nested ? "caretRight" : "caretDown"} size="small" />
+        <Icon
+          color={theme.content.weak}
+          icon={nested ? "caretRight" : "caretDown"}
+          size="small"
+        />
       </LabelWrapper>
     ) : label ? (
       label
@@ -170,7 +200,9 @@ export const PopupMenu: FC<PopupMenuProps> = ({
   return (
     <Popup
       open={open}
-      placement={placement ? placement : nested ? "right-start" : "bottom-start"}
+      placement={
+        placement ? placement : nested ? "right-start" : "bottom-start"
+      }
       offset={nested ? MULTLEVEL_OFFSET : DEFAULT_OFFSET}
       onOpenChange={handlePopOver}
       triggerOnHover={triggerOnHover || nested ? true : false}
@@ -180,21 +212,24 @@ export const PopupMenu: FC<PopupMenuProps> = ({
         <TriggerWrapper onClick={() => handlePopOver()} nested={nested}>
           {renderTrigger()}
         </TriggerWrapper>
-      }>
-      {nested && !!menu.find(item => item.hasCustomSubMenu)
+      }
+    >
+      {nested && !!menu.find((item) => item.hasCustomSubMenu)
         ? renderSubMenuItems(menu)
         : renderMenuItems(menu)}
     </Popup>
   );
 };
 
-const TriggerWrapper = styled("div")<{ nested?: boolean }>(({ nested, theme }) => ({
-  cursor: "pointer",
-  display: "flex",
-  gap: theme.spacing.smallest,
-  alignItems: "center",
-  justifyContent: nested ? "space-between" : "normal",
-}));
+const TriggerWrapper = styled("div")<{ nested?: boolean }>(
+  ({ nested, theme }) => ({
+    cursor: "pointer",
+    display: "flex",
+    gap: theme.spacing.smallest,
+    alignItems: "center",
+    justifyContent: nested ? "space-between" : "normal",
+  }),
+);
 
 const PopupMenuWrapper = styled("div")<{ width?: number; nested?: boolean }>(
   ({ width, nested, theme }) => ({
@@ -227,24 +262,25 @@ const PopupMenuWrapper = styled("div")<{ width?: number; nested?: boolean }>(
   }),
 );
 
-const Item = styled("div")<{ hasBorderBottom: boolean; size?: "small" | "normal" }>(
-  ({ hasBorderBottom, size, theme }) => ({
-    display: "flex",
-    gap: theme.spacing.small,
-    alignItems: "center",
-    padding:
-      size === "small"
-        ? `${theme.spacing.micro}px ${theme.spacing.smallest}px`
-        : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
-    borderRadius: `${theme.radius.smallest}px`,
-    borderBottom: hasBorderBottom ? `1px solid ${theme.outline.weaker}` : "",
-    cursor: "pointer",
-    backgroundColor: "transparent",
-    "&:hover": {
-      backgroundColor: `${theme.bg[2]}`,
-    },
-  }),
-);
+const Item = styled("div")<{
+  hasBorderBottom: boolean;
+  size?: "small" | "normal";
+}>(({ hasBorderBottom, size, theme }) => ({
+  display: "flex",
+  gap: theme.spacing.small,
+  alignItems: "center",
+  padding:
+    size === "small"
+      ? `${theme.spacing.micro}px ${theme.spacing.smallest}px`
+      : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+  borderRadius: `${theme.radius.smallest}px`,
+  borderBottom: hasBorderBottom ? `1px solid ${theme.outline.weaker}` : "",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  "&:hover": {
+    backgroundColor: `${theme.bg[2]}`,
+  },
+}));
 
 const StyledLink = styled(Link)(() => ({
   textDecoration: "none",
@@ -274,25 +310,26 @@ const Label = styled("p")<{ nested: boolean }>(({ nested, theme }) => ({
   fontWeight: nested ? "normal" : "bold",
 }));
 
-const LabelWrapper = styled("div")<{ size?: "small" | "normal"; nested: boolean }>(
-  ({ size, nested, theme }) => ({
-    display: "flex",
-    padding: nested
-      ? "0px"
-      : size === "small"
+const LabelWrapper = styled("div")<{
+  size?: "small" | "normal";
+  nested: boolean;
+}>(({ size, nested, theme }) => ({
+  display: "flex",
+  padding: nested
+    ? "0px"
+    : size === "small"
       ? `${theme.spacing.micro}px ${theme.spacing.small}px`
       : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
-    borderRadius: "4px",
-    flex: 1,
-    alignItems: "center",
-    "&:hover": {
-      background: theme.bg[2],
-      p: {
-        color: theme.content.main,
-      },
+  borderRadius: "4px",
+  flex: 1,
+  alignItems: "center",
+  "&:hover": {
+    background: theme.bg[2],
+    p: {
+      color: theme.content.main,
     },
-  }),
-);
+  },
+}));
 
 const Group = styled("div")(({ theme }) => ({
   display: "flex",
diff --git a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx
index 8f71cfa18..7ef4d3fe9 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx
@@ -33,7 +33,9 @@ export const Action: Story = {
   args: {
     title: "Panel Title",
     children: <MockChild />,
-    actions: <Button extendWidth size="small" title="Apply" appearance="primary" />,
+    actions: (
+      <Button extendWidth size="small" title="Apply" appearance="primary" />
+    ),
   },
 };
 
@@ -48,7 +50,8 @@ export const MultipleActions: Story = {
           justifyContent: "center",
           alignItems: "flex-start",
           gap: "8px",
-        }}>
+        }}
+      >
         <Button extendWidth size="small" title="Cancel" />
         <Button extendWidth size="small" title="Apply" appearance="primary" />
       </div>
diff --git a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
index 620ad8cde..742fcaeed 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
@@ -1,7 +1,6 @@
-import { FC, ReactNode } from "react";
-
 import { Button } from "@reearth/beta/lib/reearth-ui";
 import { fonts, styled } from "@reearth/services/theme";
+import { FC, ReactNode } from "react";
 
 const DEFAULT_PANEL_WIDTH = 286;
 
@@ -13,12 +12,24 @@ export type PopupPanelProps = {
   onCancel?: () => void;
 };
 
-export const PopupPanel: FC<PopupPanelProps> = ({ title, width, children, actions, onCancel }) => {
+export const PopupPanel: FC<PopupPanelProps> = ({
+  title,
+  width,
+  children,
+  actions,
+  onCancel,
+}) => {
   return (
     <Wrapper width={width}>
       <HeaderWrapper>
         <Title>{title}</Title>
-        <Button iconButton icon="close" size="small" onClick={onCancel} appearance="simple" />
+        <Button
+          iconButton
+          icon="close"
+          size="small"
+          onClick={onCancel}
+          appearance="simple"
+        />
       </HeaderWrapper>
       <Content>{children}</Content>
       {actions && <ActionWrapper>{actions}</ActionWrapper>}
diff --git a/web/src/beta/lib/reearth-ui/components/Radio/index.tsx b/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
index 40135576f..73e4a7eff 100644
--- a/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
@@ -1,6 +1,5 @@
-import { FC } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 export type RadioProps = {
   value?: string;
@@ -10,7 +9,13 @@ export type RadioProps = {
   onChange?: (value: string) => void;
 };
 
-export const Radio: FC<RadioProps> = ({ value, label, disabled, checked, onChange }) => {
+export const Radio: FC<RadioProps> = ({
+  value,
+  label,
+  disabled,
+  checked,
+  onChange,
+}) => {
   const handleChange = () => {
     if (disabled) return;
     onChange?.(value || "");
@@ -39,21 +44,25 @@ const RadioWrapper = styled("div")(({ theme }) => ({
   alignItems: "center",
 }));
 
-const RadioIndicator = styled("div")<{ checked?: boolean }>(({ checked, theme }) => ({
-  width: "6px",
-  height: "6px",
-  borderRadius: "50%",
-  background: checked ? theme.select.main : theme.content.main,
-}));
+const RadioIndicator = styled("div")<{ checked?: boolean }>(
+  ({ checked, theme }) => ({
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    background: checked ? theme.select.main : theme.content.main,
+  }),
+);
 
-const RadioLabel = styled("div")<{ disabled?: boolean }>(({ disabled, theme }) => ({
-  color: disabled ? theme.content.weak : theme.content.main,
-  fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
-  minWidth: "40px",
-  cursor: disabled ? "not-allowed" : "pointer",
-  flexGrow: 1,
-}));
+const RadioLabel = styled("div")<{ disabled?: boolean }>(
+  ({ disabled, theme }) => ({
+    color: disabled ? theme.content.weak : theme.content.main,
+    fontSize: theme.fonts.sizes.body,
+    fontWeight: theme.fonts.weight.regular,
+    minWidth: "40px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    flexGrow: 1,
+  }),
+);
 
 const RadioInput = styled("input")(() => ({
   position: "absolute",
@@ -70,8 +79,8 @@ const RadioButton = styled("div")<{ checked?: boolean; disabled?: boolean }>(
     border: disabled
       ? `1px solid ${theme.content.weak}`
       : checked
-      ? `1px solid ${theme.select.main}`
-      : `1px solid ${theme.content.main}`,
+        ? `1px solid ${theme.select.main}`
+        : `1px solid ${theme.content.main}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
diff --git a/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx
index 0b4aac8d1..355530e7a 100644
--- a/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx
@@ -57,10 +57,22 @@ export const NoOptions: Story = {
 export const Disabled: Story = {
   render: () => {
     return (
-      <div style={{ width: "100%", gap: "8px", display: "flex", flexDirection: "column" }}>
+      <div
+        style={{
+          width: "100%",
+          gap: "8px",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         <Selector options={options} disabled />
         <Selector options={options} value="item_1" disabled />
-        <Selector options={options} value={["item_1", "item_2"]} multiple disabled />
+        <Selector
+          options={options}
+          value={["item_1", "item_2"]}
+          multiple
+          disabled
+        />
       </div>
     );
   },
diff --git a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
index fd7d52081..e13f0df41 100644
--- a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
@@ -1,6 +1,13 @@
-import { FC, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
-
 import { styled, useTheme } from "@reearth/services/theme";
+import {
+  FC,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { Button } from "../Button";
 import { Icon } from "../Icon";
@@ -30,9 +37,9 @@ export const Selector: FC<SelectorProps> = ({
 }) => {
   const theme = useTheme();
   const selectorRef = useRef<HTMLDivElement>(null);
-  const [selectedValue, setSelectedValue] = useState<string | string[] | undefined>(
-    value ?? (multiple ? [] : undefined),
-  );
+  const [selectedValue, setSelectedValue] = useState<
+    string | string[] | undefined
+  >(value ?? (multiple ? [] : undefined));
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selectorWidth, setSelectorWidth] = useState<number>();
 
@@ -45,7 +52,7 @@ export const Selector: FC<SelectorProps> = ({
   useEffect(() => {
     const selectorElement = selectorRef.current;
     if (!selectorElement) return;
-    const resizeObserver = new ResizeObserver(entries => {
+    const resizeObserver = new ResizeObserver((entries) => {
       if (!entries || entries.length === 0) return;
       const { width } = entries[0].contentRect;
       setSelectorWidth(width);
@@ -70,7 +77,7 @@ export const Selector: FC<SelectorProps> = ({
   const handleChange = (value: string) => {
     if (multiple && Array.isArray(selectedValue)) {
       if (selectedValue.includes(value)) {
-        const newSelectedArr = selectedValue.filter(val => val !== value);
+        const newSelectedArr = selectedValue.filter((val) => val !== value);
         setSelectedValue(newSelectedArr);
         onChange?.(newSelectedArr);
       } else {
@@ -91,7 +98,7 @@ export const Selector: FC<SelectorProps> = ({
       e.stopPropagation();
       if (value === undefined) return;
       if (Array.isArray(selectedValue) && selectedValue.length) {
-        const newSelectedArr = selectedValue.filter(val => val !== value);
+        const newSelectedArr = selectedValue.filter((val) => val !== value);
         setSelectedValue(newSelectedArr);
         onChange?.(newSelectedArr);
       }
@@ -101,9 +108,11 @@ export const Selector: FC<SelectorProps> = ({
 
   const selectedLabels = useMemo(() => {
     if (Array.isArray(selectedValue)) {
-      return selectedValue.map(val => optionValues.find(item => item.value === val)?.label);
+      return selectedValue.map(
+        (val) => optionValues.find((item) => item.value === val)?.label,
+      );
     }
-    return [optionValues.find(item => item.value === selectedValue)?.label];
+    return [optionValues.find((item) => item.value === selectedValue)?.label];
   }, [optionValues, selectedValue]);
 
   const renderTrigger = () => {
@@ -113,18 +122,20 @@ export const Selector: FC<SelectorProps> = ({
         isMultiple={multiple}
         isOpen={isOpen}
         disabled={disabled}
-        width={selectorWidth}>
+        width={selectorWidth}
+      >
         {!selectedValue?.length ? (
           <Typography size="body" color={theme.content.weaker}>
             {placeholder}
           </Typography>
         ) : multiple ? (
           <SelectedItems>
-            {selectedLabels.map(val => (
+            {selectedLabels.map((val) => (
               <SelectedItem key={val}>
                 <Typography
                   size="body"
-                  color={disabled ? theme.content.weaker : theme.content.main}>
+                  color={disabled ? theme.content.weaker : theme.content.main}
+                >
                   {val}
                 </Typography>
                 {!disabled && (
@@ -133,7 +144,9 @@ export const Selector: FC<SelectorProps> = ({
                     icon="close"
                     appearance="simple"
                     size="small"
-                    onClick={(e: MouseEvent<HTMLElement>) => handleUnselect(e, val)}
+                    onClick={(e: MouseEvent<HTMLElement>) =>
+                      handleUnselect(e, val)
+                    }
                   />
                 )}
               </SelectedItem>
@@ -159,7 +172,8 @@ export const Selector: FC<SelectorProps> = ({
         open={isOpen}
         onOpenChange={setIsOpen}
         disabled={disabled}
-        placement="bottom-start">
+        placement="bottom-start"
+      >
         <DropDownWrapper maxHeight={maxHeight} width={selectorWidth}>
           {optionValues.length === 0 ? (
             <DropDownItem>
@@ -172,7 +186,8 @@ export const Selector: FC<SelectorProps> = ({
               <DropDownItem
                 key={item.value ?? ""}
                 isSelected={isSelected(item.value)}
-                onClick={() => handleChange(item.value)}>
+                onClick={() => handleChange(item.value)}
+              >
                 <Typography size="body" color={theme.content.main}>
                   {item.label ?? item.value}
                 </Typography>
@@ -275,7 +290,9 @@ const DropDownItem = styled("div")<{
   alignItems: "center",
   justifyContent: "space-between",
   gap: `${theme.spacing.small}px`,
-  backgroundColor: !isSelected ? `${theme.bg[1]}` : `${theme.select.weak} !important`,
+  backgroundColor: !isSelected
+    ? `${theme.bg[1]}`
+    : `${theme.select.weak} !important`,
   padding: `${theme.spacing.micro}px ${theme.spacing.smallest}px`,
   borderRadius: `${theme.radius.smallest}px`,
   cursor: "pointer",
diff --git a/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx
index 7b68a2569..95454709d 100644
--- a/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx
@@ -16,5 +16,7 @@ export const Default: Story = {
 };
 
 export const Disabled: Story = {
-  render: () => <Switcher value={false} onChange={action("onChange")} disabled />,
+  render: () => (
+    <Switcher value={false} onChange={action("onChange")} disabled />
+  ),
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx b/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx
index 62cd1d049..4e3c9223c 100644
--- a/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useEffect, useState } from "react";
-
 import { styled } from "@reearth/services/theme";
+import { FC, useEffect, useState } from "react";
 
 export type SwitcherProps = {
   value?: boolean;
@@ -37,8 +36,8 @@ const SwitcherContainer = styled.div<{ isOn: boolean; disabled?: boolean }>(
     backgroundColor: disabled
       ? theme.outline.weaker
       : isOn
-      ? theme.primary.main
-      : theme.outline.weaker,
+        ? theme.primary.main
+        : theme.outline.weaker,
     display: "flex",
     alignItems: "center",
     boxShadow: theme.shadow.input,
@@ -54,7 +53,9 @@ const SwitcherCircle = styled.div<{ isOn: boolean; disabled?: boolean }>(
     width: "12px",
     height: "12px",
     borderRadius: "50%",
-    backgroundColor: disabled ? theme.outline.weak : theme.content.withBackground,
+    backgroundColor: disabled
+      ? theme.outline.weak
+      : theme.content.withBackground,
     transition: "transform 0.3s",
     transform: isOn ? "translateX(10px)" : "translateX(0)",
   }),
diff --git a/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx
index 97494b8c8..255168d0f 100644
--- a/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx
@@ -62,7 +62,7 @@ const tabsIcons: TabItem[] = [
 ];
 
 export const Default: Story = {
-  render: arg => (
+  render: (arg) => (
     <div style={{ width: "500px", marginTop: "10px", marginLeft: "10px" }}>
       <Tabs {...arg} />
     </div>
@@ -74,7 +74,7 @@ export const Default: Story = {
 };
 
 export const LeftSideTabs: Story = {
-  render: arg => (
+  render: (arg) => (
     <div style={{ width: "500px" }}>
       <Tabs {...arg} />
     </div>
@@ -87,7 +87,7 @@ export const LeftSideTabs: Story = {
 };
 
 export const IconTabs: Story = {
-  render: arg => (
+  render: (arg) => (
     <div style={{ width: "500px", height: "100vh" }}>
       <Tabs {...arg} />
     </div>
diff --git a/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx b/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx
index 6d7434a91..8174efa43 100644
--- a/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx
@@ -1,7 +1,13 @@
-import { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-
 import { Icon, IconName, Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import {
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 export type TabItem = {
   id: string;
@@ -58,18 +64,24 @@ export const Tabs: FC<TabsProps> = ({
             onClick={() => handleTabChange?.(id)}
             selected={id === activeTab}
             position={position}
-            tabStyle={tabStyle}>
+            tabStyle={tabStyle}
+          >
             {icon && (
               <Icon
                 icon={icon}
-                color={id === activeTab ? theme.content.main : theme.content.weak}
+                color={
+                  id === activeTab ? theme.content.main : theme.content.weak
+                }
               />
             )}
             {name && (
               <Typography
                 size="body"
                 weight="regular"
-                color={id === activeTab ? theme.content.main : theme.content.weak}>
+                color={
+                  id === activeTab ? theme.content.main : theme.content.weak
+                }
+              >
                 {name}
               </Typography>
             )}
@@ -81,25 +93,27 @@ export const Tabs: FC<TabsProps> = ({
   );
 };
 
-const Wrapper = styled("div")<{ position?: "top" | "left"; background?: string }>(
-  ({ position, background, theme }) => ({
-    display: "flex",
-    flexFlow: position === "top" ? "column nowrap" : "row nowrap",
-    background: background || theme.bg[1],
-    height: "100%",
-    width: "100%",
-  }),
-);
+const Wrapper = styled("div")<{
+  position?: "top" | "left";
+  background?: string;
+}>(({ position, background, theme }) => ({
+  display: "flex",
+  flexFlow: position === "top" ? "column nowrap" : "row nowrap",
+  background: background || theme.bg[1],
+  height: "100%",
+  width: "100%",
+}));
 
-const TabsMenu = styled("div")<{ position?: "top" | "left"; tabStyle?: "normal" | "separated" }>(
-  ({ position, tabStyle, theme }) => ({
-    display: "flex",
-    flexFlow: position === "top" ? "row nowrap" : "column nowrap",
-    background: theme.bg[0],
-    padding: tabStyle === "normal" ? " " : theme.spacing.large,
-    gap: theme.spacing.micro,
-  }),
-);
+const TabsMenu = styled("div")<{
+  position?: "top" | "left";
+  tabStyle?: "normal" | "separated";
+}>(({ position, tabStyle, theme }) => ({
+  display: "flex",
+  flexFlow: position === "top" ? "row nowrap" : "column nowrap",
+  background: theme.bg[0],
+  padding: tabStyle === "normal" ? " " : theme.spacing.large,
+  gap: theme.spacing.micro,
+}));
 
 const Tab = styled("div")<{
   position?: "top" | "left";
@@ -113,9 +127,11 @@ const Tab = styled("div")<{
   background: selected ? theme.bg[1] : "inherit",
   padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
   borderRadius: tabStyle === "separated" ? theme.radius.small : 0,
-  borderTopRightRadius: position === "top" && tabStyle === "normal" ? theme.radius.small : "",
+  borderTopRightRadius:
+    position === "top" && tabStyle === "normal" ? theme.radius.small : "",
   borderTopLeftRadius: tabStyle === "normal" ? theme.radius.small : "",
-  borderBottomLeftRadius: position === "left" && tabStyle === "normal" ? theme.radius.small : "",
+  borderBottomLeftRadius:
+    position === "left" && tabStyle === "normal" ? theme.radius.small : "",
 }));
 
 const Content = styled("div")(({ theme }) => ({
diff --git a/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx b/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
index 41844b14e..49e5d8535 100644
--- a/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useCallback, useEffect, useState, ChangeEvent } from "react";
-
 import { fonts, styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState, ChangeEvent } from "react";
 
 export type TextAreaProps = {
   value?: string;
@@ -54,7 +53,10 @@ export const TextArea: FC<TextAreaProps> = ({
 
   return (
     <Wrapper>
-      <TextAreaWrapper appearance={appearance} status={isFocused ? "active" : "default"}>
+      <TextAreaWrapper
+        appearance={appearance}
+        status={isFocused ? "active" : "default"}
+      >
         <StyledTextArea
           resizable={resizable}
           rows={rows}
@@ -109,7 +111,10 @@ const StyledTextArea = styled.textarea<{
   resize: resizable === "height" ? "vertical" : "none",
   overflow: resizable === "height" ? "scroll" : "auto",
   flex: 1,
-  color: disabled && appearance !== "readonly" ? theme.content.weaker : theme.content.main,
+  color:
+    disabled && appearance !== "readonly"
+      ? theme.content.weaker
+      : theme.content.main,
   cursor: disabled || appearance === "readonly" ? "not-allowed" : "auto",
   colorScheme: theme.colorSchema,
   fontSize: fonts.sizes.body,
diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
index c96e53cbd..23de94b5a 100644
--- a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
@@ -1,6 +1,13 @@
-import { FC, useCallback, useEffect, useState, ChangeEvent, ReactNode, KeyboardEvent } from "react";
-
 import { fonts, styled } from "@reearth/services/theme";
+import {
+  FC,
+  useCallback,
+  useEffect,
+  useState,
+  ChangeEvent,
+  ReactNode,
+  KeyboardEvent,
+} from "react";
 
 export type TextInputProps = {
   value?: string;
@@ -63,7 +70,8 @@ export const TextInput: FC<TextInputProps> = ({
       size={size}
       appearance={appearance}
       extendWidth={extendWidth}
-      status={isFocused || autoFocus ? "active" : "default"}>
+      status={isFocused || autoFocus ? "active" : "default"}
+    >
       {leftAction && (
         <ActionsWrapper>
           {leftAction.map((Action, i) => (
@@ -100,8 +108,8 @@ const Wrapper = styled("div")<{
         ? `1px solid transparent`
         : `1px solid ${theme.select.main}`
       : status === "active"
-      ? `1px solid ${theme.select.main}`
-      : `1px solid ${theme.outline.weak}`;
+        ? `1px solid ${theme.select.main}`
+        : `1px solid ${theme.outline.weak}`;
 
   return {
     border: borderStyle,
diff --git a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
index c08991bf3..f15796853 100644
--- a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
@@ -1,6 +1,5 @@
-import { FC, useCallback, useEffect, useState, ChangeEvent } from "react";
-
 import { fonts, styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState, ChangeEvent } from "react";
 
 export type TimePickerProps = {
   value?: string;
@@ -10,7 +9,12 @@ export type TimePickerProps = {
   onBlur?: (text: string) => void;
 };
 
-export const TimePicker: FC<TimePickerProps> = ({ value, disabled, onChange, onBlur }) => {
+export const TimePicker: FC<TimePickerProps> = ({
+  value,
+  disabled,
+  onChange,
+  onBlur,
+}) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const [isFocused, setIsFocused] = useState(false);
 
@@ -56,7 +60,9 @@ const Wrapper = styled("div")<{
 }>(({ theme, status }) => {
   return {
     border:
-      status === "active" ? `1px solid ${theme.select.main}` : `1px solid ${theme.outline.weak}`,
+      status === "active"
+        ? `1px solid ${theme.select.main}`
+        : `1px solid ${theme.outline.weak}`,
     borderRadius: theme.radius.small,
     background: theme.bg[1],
     display: "flex",
diff --git a/web/src/beta/lib/reearth-ui/components/Typography/index.tsx b/web/src/beta/lib/reearth-ui/components/Typography/index.tsx
index f9dcac6c5..f0e97f3be 100644
--- a/web/src/beta/lib/reearth-ui/components/Typography/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Typography/index.tsx
@@ -1,5 +1,3 @@
-import { FC, ReactNode, useMemo, CSSProperties } from "react";
-
 import { useTheme } from "@reearth/services/theme";
 import {
   FontSize,
@@ -7,8 +5,14 @@ import {
   UniqueTraits,
   typography,
 } from "@reearth/services/theme/reearthTheme/common/fonts";
+import { FC, ReactNode, useMemo, CSSProperties } from "react";
 
-type NonChangeableProperties = "color" | "fontFamily" | "fontSize" | "lineHeight" | "fontStyle";
+type NonChangeableProperties =
+  | "color"
+  | "fontFamily"
+  | "fontSize"
+  | "lineHeight"
+  | "fontStyle";
 
 type ChangeableProperties = Omit<CSSProperties, NonChangeableProperties>;
 
@@ -40,8 +44,8 @@ export const Typography: FC<TypographyProps> = ({
       trait && trait in themeTypographyBySize
         ? themeTypographyBySize[trait]
         : weight in themeTypographyBySize
-        ? themeTypographyBySize[weight]
-        : themeTypographyBySize[size === "h1" ? "bold" : "regular"],
+          ? themeTypographyBySize[weight]
+          : themeTypographyBySize[size === "h1" ? "bold" : "regular"],
     [trait, size, weight, themeTypographyBySize],
   );
 
@@ -57,7 +61,11 @@ export const Typography: FC<TypographyProps> = ({
   );
 
   return ThemeTypography ? (
-    <ThemeTypography style={memoizedStyle} onClick={onClick} className={className}>
+    <ThemeTypography
+      style={memoizedStyle}
+      onClick={onClick}
+      className={className}
+    >
       {children}
     </ThemeTypography>
   ) : null;
diff --git a/web/src/beta/pages/Dashboard/index.tsx b/web/src/beta/pages/Dashboard/index.tsx
index bb47b36bc..4b94bb86c 100644
--- a/web/src/beta/pages/Dashboard/index.tsx
+++ b/web/src/beta/pages/Dashboard/index.tsx
@@ -4,12 +4,15 @@ import { useParams } from "react-router-dom";
 import Dashboard from "@reearth/beta/features/Dashboard";
 import Page from "@reearth/beta/pages/Page";
 
-type Props = {};
-
-const DashboardPage: FC<Props> = () => {
+const DashboardPage: FC = () => {
   const { workspaceId } = useParams();
 
-  return <Page workspaceId={workspaceId} renderItem={props => <Dashboard {...props} />} />;
+  return (
+    <Page
+      workspaceId={workspaceId}
+      renderItem={(props) => <Dashboard {...props} />}
+    />
+  );
 };
 
 export default DashboardPage;
diff --git a/web/src/beta/pages/EditorPage/index.tsx b/web/src/beta/pages/EditorPage/index.tsx
index 5bae7b20f..540f0fc58 100644
--- a/web/src/beta/pages/EditorPage/index.tsx
+++ b/web/src/beta/pages/EditorPage/index.tsx
@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { useParams } from "react-router-dom";
 
 import NotFound from "@reearth/beta/components/NotFound";
@@ -5,9 +6,7 @@ import Editor from "@reearth/beta/features/Editor";
 import { isTab } from "@reearth/beta/features/Navbar";
 import Page from "@reearth/beta/pages/Page";
 
-type Props = {};
-
-const EditorPage: React.FC<Props> = () => {
+const EditorPage: FC = () => {
   const { sceneId, tab } = useParams<{ sceneId: string; tab: string }>();
 
   return !sceneId || !tab || !isTab(tab) ? (
@@ -15,7 +14,7 @@ const EditorPage: React.FC<Props> = () => {
   ) : (
     <Page
       sceneId={sceneId}
-      renderItem={props => <Editor tab={tab} sceneId={sceneId} {...props} />}
+      renderItem={(props) => <Editor tab={tab} sceneId={sceneId} {...props} />}
     />
   );
 };
diff --git a/web/src/beta/pages/GraphQLPlayground/index.tsx b/web/src/beta/pages/GraphQLPlayground/index.tsx
index 9d7f28a60..910250047 100644
--- a/web/src/beta/pages/GraphQLPlayground/index.tsx
+++ b/web/src/beta/pages/GraphQLPlayground/index.tsx
@@ -1,10 +1,9 @@
 import { createGraphiQLFetcher } from "@graphiql/toolkit";
-import { GraphiQL } from "graphiql";
-import { useEffect, useState } from "react";
-
 import Filled from "@reearth/beta/components/Filled";
 import Text from "@reearth/beta/components/Text";
 import { useAuth } from "@reearth/services/auth";
+import { GraphiQL } from "graphiql";
+import { useEffect, useState } from "react";
 import "graphiql/graphiql.css";
 
 const fetcher = createGraphiQLFetcher({
@@ -15,7 +14,7 @@ export default function GraphQLPlayground(_: { path?: string }): JSX.Element {
   const { getAccessToken } = useAuth();
   const [headers, setHeaders] = useState<string>();
   useEffect(() => {
-    getAccessToken().then(a => {
+    getAccessToken().then((a) => {
       setHeaders(JSON.stringify({ Authorization: `Bearer ${a}` }, null, 2));
     });
   }, [getAccessToken]);
diff --git a/web/src/beta/pages/Page.tsx b/web/src/beta/pages/Page.tsx
index 696e3ca89..9e5a01b27 100644
--- a/web/src/beta/pages/Page.tsx
+++ b/web/src/beta/pages/Page.tsx
@@ -1,7 +1,10 @@
-import React, { ReactNode, useMemo } from "react";
-
-import { useMeFetcher, useProjectFetcher, useSceneFetcher } from "@reearth/services/api";
+import {
+  useMeFetcher,
+  useProjectFetcher,
+  useSceneFetcher,
+} from "@reearth/services/api";
 import { AuthenticatedPage } from "@reearth/services/auth";
+import React, { ReactNode, useMemo } from "react";
 
 import Loading from "../components/Loading";
 
@@ -18,7 +21,12 @@ type Props = {
   renderItem: (props: RenderItemProps) => ReactNode;
 };
 
-const PageWrapper: React.FC<Props> = ({ sceneId, projectId, workspaceId, renderItem }) => {
+const PageWrapper: React.FC<Props> = ({
+  sceneId,
+  projectId,
+  workspaceId,
+  renderItem,
+}) => {
   const { useMeQuery } = useMeFetcher();
   const { useProjectQuery } = useProjectFetcher();
   const { useSceneQuery } = useSceneFetcher();
@@ -57,7 +65,12 @@ const PageWrapper: React.FC<Props> = ({ sceneId, projectId, workspaceId, renderI
   );
 };
 
-const Page: React.FC<Props> = ({ sceneId, projectId, workspaceId, renderItem }) => (
+const Page: React.FC<Props> = ({
+  sceneId,
+  projectId,
+  workspaceId,
+  renderItem,
+}) => (
   <AuthenticatedPage>
     <PageWrapper
       sceneId={sceneId}
diff --git a/web/src/beta/pages/PluginPlaygroundPage/index.tsx b/web/src/beta/pages/PluginPlaygroundPage/index.tsx
index c7c1674a1..a45e1f840 100644
--- a/web/src/beta/pages/PluginPlaygroundPage/index.tsx
+++ b/web/src/beta/pages/PluginPlaygroundPage/index.tsx
@@ -1,8 +1,8 @@
-import PluginPlayground from "@reearth/beta/features/PluginPlayground";
+import { FC } from "react";
 
-type Props = {};
+import PluginPlayground from "@reearth/beta/features/PluginPlayground";
 
-const PluginPlaygroundPage: React.FC<Props> = () => {
+const PluginPlaygroundPage: FC = () => {
   return <PluginPlayground />;
 };
 
diff --git a/web/src/beta/pages/ProjectSettingsPage/index.tsx b/web/src/beta/pages/ProjectSettingsPage/index.tsx
index 6746ce275..a6245001e 100644
--- a/web/src/beta/pages/ProjectSettingsPage/index.tsx
+++ b/web/src/beta/pages/ProjectSettingsPage/index.tsx
@@ -1,13 +1,13 @@
-import { useMemo } from "react";
+import { FC, useMemo } from "react";
 import { useParams } from "react-router-dom";
 
 import NotFound from "@reearth/beta/components/NotFound";
-import ProjectSettings, { isProjectSettingTab } from "@reearth/beta/features/ProjectSettings";
+import ProjectSettings, {
+  isProjectSettingTab,
+} from "@reearth/beta/features/ProjectSettings";
 import Page from "@reearth/beta/pages/Page";
 
-type Props = {};
-
-const ProjectSettingsPage: React.FC<Props> = () => {
+const ProjectSettingsPage: FC = () => {
   const { projectId, tab, subId } = useParams<{
     projectId: string;
     tab?: string;
@@ -21,8 +21,13 @@ const ProjectSettingsPage: React.FC<Props> = () => {
   ) : (
     <Page
       projectId={projectId}
-      renderItem={props => (
-        <ProjectSettings projectId={projectId} tab={namedTab} subId={subId} {...props} />
+      renderItem={(props) => (
+        <ProjectSettings
+          projectId={projectId}
+          tab={namedTab}
+          subId={subId}
+          {...props}
+        />
       )}
     />
   );
diff --git a/web/src/beta/pages/README.md b/web/src/beta/pages/README.md
index 0639525c8..35f63e996 100644
--- a/web/src/beta/pages/README.md
+++ b/web/src/beta/pages/README.md
@@ -1,4 +1,4 @@
-#  Top-level components
+# Top-level components
 
 The main pages of the app. They should be single files (`hooks.ts` files only if completely necessary) and simple.
 Here is where we will wrap in the Auth provider when necessary and build up the page from its features.
diff --git a/web/src/beta/ui/components/EntryItem/index.stories.tsx b/web/src/beta/ui/components/EntryItem/index.stories.tsx
index 24fbce01b..ea10fec14 100644
--- a/web/src/beta/ui/components/EntryItem/index.stories.tsx
+++ b/web/src/beta/ui/components/EntryItem/index.stories.tsx
@@ -1,13 +1,12 @@
-import { Meta, StoryObj } from "@storybook/react";
-
 import { IconButton } from "@reearth/beta/lib/reearth-ui";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { EntryItem } from ".";
 
 const meta: Meta<typeof EntryItem> = {
   component: EntryItem,
   decorators: [
-    Story => (
+    (Story) => (
       <div style={{ width: 300 }}>
         <Story />
       </div>
diff --git a/web/src/beta/ui/components/EntryItem/index.tsx b/web/src/beta/ui/components/EntryItem/index.tsx
index ef0678f9c..c6d50ed77 100644
--- a/web/src/beta/ui/components/EntryItem/index.tsx
+++ b/web/src/beta/ui/components/EntryItem/index.tsx
@@ -1,7 +1,19 @@
-import { FC, MouseEvent, ReactNode, useCallback, useEffect, useState } from "react";
-
-import { Icon, IconButton, IconName, PopupMenu, PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
+import {
+  Icon,
+  IconButton,
+  IconName,
+  PopupMenu,
+  PopupMenuItem,
+} from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import {
+  FC,
+  MouseEvent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 
 export interface EntryItemAction {
   comp: ReactNode;
@@ -59,8 +71,12 @@ export const EntryItem: FC<EntryItemProps> = ({
       onClick={onClick}
       hovered={hovered}
       highlight={highlighted}
-      smallPaddingRight={!!optionsMenu}>
-      <MainContent className={dragHandleClassName} asDragHandle={!!dragHandleClassName}>
+      smallPaddingRight={!!optionsMenu}
+    >
+      <MainContent
+        className={dragHandleClassName}
+        asDragHandle={!!dragHandleClassName}
+      >
         {icon && (
           <IconWrapper>
             <Icon icon={icon} size="small" />
@@ -69,11 +85,19 @@ export const EntryItem: FC<EntryItemProps> = ({
         {typeof title === "string" ? <Title>{title}</Title> : title}
       </MainContent>
       <Actions>
-        {actions?.map(a => (highlighted || hovered || a.keepVisible) && a.comp)}
+        {actions?.map(
+          (a) => (highlighted || hovered || a.keepVisible) && a.comp,
+        )}
         {!!optionsMenu && (
           <OptionsWrapper onClick={handleOptionsClick}>
             <PopupMenu
-              label={<IconButton icon="dotsThreeVertical" size="small" appearance="simple" />}
+              label={
+                <IconButton
+                  icon="dotsThreeVertical"
+                  size="small"
+                  appearance="simple"
+                />
+              }
               placement="bottom-start"
               menu={optionsMenu}
               width={optionsMenuWidth}
@@ -114,22 +138,24 @@ const Wrapper = styled("div")<{
     backgroundColor: highlight
       ? theme.select.strong
       : hovered
-      ? theme.relative.light
-      : "transparent",
+        ? theme.relative.light
+        : "transparent",
   },
 }));
 
-const MainContent = styled("div")<{ asDragHandle?: boolean }>(({ theme, asDragHandle }) => ({
-  flex: 1,
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing.smallest,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  ...(asDragHandle && {
-    cursor: "pointer",
+const MainContent = styled("div")<{ asDragHandle?: boolean }>(
+  ({ theme, asDragHandle }) => ({
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing.smallest,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    ...(asDragHandle && {
+      cursor: "pointer",
+    }),
   }),
-}));
+);
 
 const Title = styled("div")(({ theme }) => ({
   width: "100%",
diff --git a/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx b/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx
index 32cf0bf24..c9636a618 100644
--- a/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx
+++ b/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx
@@ -1,8 +1,20 @@
-import { FC, KeyboardEvent, MouseEvent, ReactNode, useCallback, useMemo, useState } from "react";
-
-import { IconButton, Selector, TextInput, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  IconButton,
+  Selector,
+  TextInput,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import {
+  FC,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 type ManagerHeaderSize = "medium" | "large";
 export type ManagerLayout = "grid" | "list";
@@ -126,16 +138,25 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
       <Tools>
         {showDelete && (
           <DeleteBar>
-            <IconButton icon="close" appearance="simple" onClick={handleCancelSelect} />
+            <IconButton
+              icon="close"
+              appearance="simple"
+              onClick={handleCancelSelect}
+            />
             <Typography size="body">{deleteText ?? t("Delete")}</Typography>
-            <IconButton icon="trash" appearance="simple" onClick={handleDelete} />
+            <IconButton
+              icon="trash"
+              appearance="simple"
+              onClick={handleDelete}
+            />
           </DeleteBar>
         )}
         {!showDelete && showSearch && (
           <Search
             size={size}
             onMouseEnter={() => setSearchHovered(true)}
-            onMouseLeave={() => setSearchHovered(false)}>
+            onMouseLeave={() => setSearchHovered(false)}
+          >
             <TextInput
               size="normal"
               extendWidth
@@ -150,7 +171,11 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
         {!showDelete && sortOptions && (
           <Sort>
             <Typography size="body">{t("Sort:")}</Typography>
-            <Selector value={sortValue} options={sortOptions} onChange={handleSortChange} />
+            <Selector
+              value={sortValue}
+              options={sortOptions}
+              onChange={handleSortChange}
+            />
           </Sort>
         )}
         {!showDelete && (
@@ -159,13 +184,13 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
               icon="grid"
               appearance="simple"
               active={layout === "grid"}
-              onClick={e => handleLayoutChange(e, "grid")}
+              onClick={(e) => handleLayoutChange(e, "grid")}
             />
             <IconButton
               icon="list"
               appearance="simple"
               active={layout === "list"}
-              onClick={e => handleLayoutChange(e, "list")}
+              onClick={(e) => handleLayoutChange(e, "list")}
             />
           </Layouts>
         )}
@@ -174,17 +199,19 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
   );
 };
 
-const Wrapper = styled("div")<{ size: ManagerHeaderSize }>(({ theme, size }) => ({
-  flex: 1,
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  padding: size === "medium" ? theme.spacing.normal : theme.spacing.largest,
-  minHeight: size === "medium" ? "56px" : "76px",
-  boxSizing: "border-box",
-  flexGrow: 0,
-}));
+const Wrapper = styled("div")<{ size: ManagerHeaderSize }>(
+  ({ theme, size }) => ({
+    flex: 1,
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: size === "medium" ? theme.spacing.normal : theme.spacing.largest,
+    minHeight: size === "medium" ? "56px" : "76px",
+    boxSizing: "border-box",
+    flexGrow: 0,
+  }),
+);
 
 const Actions = styled("div")(({ theme }) => ({
   display: "flex",
@@ -212,12 +239,14 @@ const Layouts = styled("div")(({ theme }) => ({
   gap: theme.spacing.small,
 }));
 
-const Search = styled("div")<{ size: ManagerHeaderSize }>(({ theme, size }) => ({
-  display: "flex",
-  gap: theme.spacing.small,
-  maxWidth: size === "large" ? 250 : undefined,
-  flex: 1,
-}));
+const Search = styled("div")<{ size: ManagerHeaderSize }>(
+  ({ theme, size }) => ({
+    display: "flex",
+    gap: theme.spacing.small,
+    maxWidth: size === "large" ? 250 : undefined,
+    flex: 1,
+  }),
+);
 
 const DeleteBar = styled("div")(({ theme }) => ({
   display: "flex",
diff --git a/web/src/beta/ui/components/ManagerBase/ManagerHeaderButton.tsx b/web/src/beta/ui/components/ManagerBase/ManagerHeaderButton.tsx
index 8aab96127..1334dcee4 100644
--- a/web/src/beta/ui/components/ManagerBase/ManagerHeaderButton.tsx
+++ b/web/src/beta/ui/components/ManagerBase/ManagerHeaderButton.tsx
@@ -1,6 +1,5 @@
-import { FC } from "react";
-
 import { Button, ButtonProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 export type ManagerHeaderButtonProps = ButtonProps & {
   managerSize?: "medium" | "large";
@@ -10,5 +9,7 @@ export const ManagerHeaderButton: FC<ManagerHeaderButtonProps> = ({
   managerSize = "medium",
   ...props
 }) => {
-  return <Button size={managerSize === "medium" ? "small" : "normal"} {...props} />;
+  return (
+    <Button size={managerSize === "medium" ? "small" : "normal"} {...props} />
+  );
 };
diff --git a/web/src/beta/ui/components/Sidebar/index.tsx b/web/src/beta/ui/components/Sidebar/index.tsx
index 09ef9b468..4569a09ae 100644
--- a/web/src/beta/ui/components/Sidebar/index.tsx
+++ b/web/src/beta/ui/components/Sidebar/index.tsx
@@ -1,9 +1,8 @@
-import { FC } from "react";
-import { Link } from "react-router-dom";
-
 import { IconName, Icon, Typography } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
+import { Link } from "react-router-dom";
 
 export type SidebarMenuItemProps = {
   text?: string;
@@ -35,7 +34,10 @@ export const SidebarMenuItem: FC<SidebarMenuItemProps> = ({
             color={active ? theme.content.main : theme.content.weak}
           />
         )}
-        <Typography size="body" color={disabled ? theme.content.weak : theme.content.main}>
+        <Typography
+          size="body"
+          color={disabled ? theme.content.weak : theme.content.main}
+        >
           {text}
         </Typography>
       </MenuWrapper>
@@ -43,10 +45,12 @@ export const SidebarMenuItem: FC<SidebarMenuItemProps> = ({
   );
 };
 
-const StyledLinkButton = styled(Link)<{ disabled?: boolean }>(({ disabled }) => ({
-  pointerEvents: disabled ? "none" : "auto",
-  textDecoration: "none",
-}));
+const StyledLinkButton = styled(Link)<{ disabled?: boolean }>(
+  ({ disabled }) => ({
+    pointerEvents: disabled ? "none" : "auto",
+    textDecoration: "none",
+  }),
+);
 
 const MenuWrapper = styled("div")<{ active?: boolean; disabled?: boolean }>(
   ({ active, theme, disabled }) => ({
diff --git a/web/src/beta/ui/fields/AssetField/index.tsx b/web/src/beta/ui/fields/AssetField/index.tsx
index 92d98b494..d5c23d2e9 100644
--- a/web/src/beta/ui/fields/AssetField/index.tsx
+++ b/web/src/beta/ui/fields/AssetField/index.tsx
@@ -1,5 +1,3 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
 import AssetsSelector from "@reearth/beta/features/AssetsManager/AssetsSelector";
 import {
   AcceptedAssetsTypes,
@@ -11,6 +9,7 @@ import { TextInput, Button } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { useNotification, useWorkspace } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "../CommonField";
 
@@ -46,7 +45,9 @@ const AssetField: FC<AssetFieldProps> = ({
         onChange?.(url, name);
       } else if (
         inputMethod === "asset" &&
-        ![...IMAGE_FILE_TYPES, ...GIS_FILE_TYPES].includes((url.split(".").pop() as FileType) ?? "")
+        ![...IMAGE_FILE_TYPES, ...GIS_FILE_TYPES].includes(
+          (url.split(".").pop() as FileType) ?? "",
+        )
       ) {
         setNotification({
           type: "error",
@@ -85,7 +86,13 @@ const AssetField: FC<AssetFieldProps> = ({
         />
         {inputMethod === "asset" && (
           <ButtonWrapper>
-            <Button icon={"image"} size="small" title="Choose" onClick={handleClick} extendWidth />
+            <Button
+              icon={"image"}
+              size="small"
+              title="Choose"
+              onClick={handleClick}
+              extendWidth
+            />
             <Button
               icon={"uploadSimple"}
               size="small"
@@ -111,7 +118,7 @@ const AssetField: FC<AssetFieldProps> = ({
 
 export default AssetField;
 
-const AssetWrapper = styled("div")<{}>(({ theme }) => ({
+const AssetWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: `${theme.spacing.smallest}px`,
diff --git a/web/src/beta/ui/fields/AssetField/useAssetUpload.ts b/web/src/beta/ui/fields/AssetField/useAssetUpload.ts
index 7e9a15024..57ca8db30 100644
--- a/web/src/beta/ui/fields/AssetField/useAssetUpload.ts
+++ b/web/src/beta/ui/fields/AssetField/useAssetUpload.ts
@@ -1,6 +1,3 @@
-import { useCallback, useMemo } from "react";
-import useFileInput from "use-file-input";
-
 import {
   type AcceptedAssetsTypes,
   GIS_FILE_TYPES,
@@ -8,6 +5,8 @@ import {
   GENERAL_FILE_TYPE_ACCEPT_STRING,
 } from "@reearth/beta/features/AssetsManager/constants";
 import { useAssetsFetcher } from "@reearth/services/api";
+import { useCallback, useMemo } from "react";
+import useFileInput from "use-file-input";
 
 export default ({
   workspaceId,
@@ -26,7 +25,13 @@ export default ({
     return assetsTypes && assetsTypes.length > 0
       ? "." +
           assetsTypes
-            .map(t => (t === "image" ? IMAGE_FILE_TYPES : t === "file" ? GIS_FILE_TYPES : t))
+            .map((t) =>
+              t === "image"
+                ? IMAGE_FILE_TYPES
+                : t === "file"
+                  ? GIS_FILE_TYPES
+                  : t,
+            )
             .flat()
             .join(",.")
       : GENERAL_FILE_TYPE_ACCEPT_STRING;
@@ -49,10 +54,13 @@ export default ({
     },
     [workspaceId, useCreateAssets, onAssetSelect],
   );
-  const handleFileUpload = useFileInput(files => handleAssetsCreate?.(files), {
-    accept: acceptedExtension,
-    multiple,
-  });
+  const handleFileUpload = useFileInput(
+    (files) => handleAssetsCreate?.(files),
+    {
+      accept: acceptedExtension,
+      multiple,
+    },
+  );
 
   return { handleFileUpload };
 };
diff --git a/web/src/beta/ui/fields/CamersField/CapturePanel.tsx b/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
index 8cad41705..6f6d87057 100644
--- a/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
+++ b/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
@@ -1,8 +1,7 @@
-import { FC, useCallback } from "react";
-
 import { Button, PopupPanel } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback } from "react";
 
 import TripletInputField from "../TripletInputField";
 
@@ -32,7 +31,8 @@ const CapturePanel: FC<PanelProps> = ({ camera, onSave, onClose }) => {
             onClick={handleSave}
           />
         </ButtonWrapper>
-      }>
+      }
+    >
       <GroupWrapper>
         <TripletInputField
           values={[camera?.lat ?? 0, camera?.lng ?? 0, camera?.height ?? 0]}
diff --git a/web/src/beta/ui/fields/CamersField/EditorPanel.tsx b/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
index 282baabe9..1e84805ce 100644
--- a/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
+++ b/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
@@ -1,8 +1,12 @@
-import { FC } from "react";
-
-import { Button, NumberInput, PopupPanel, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  NumberInput,
+  PopupPanel,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import TripletInputField from "../TripletInputField";
 import TwinInputField from "../TwinInputField";
@@ -45,7 +49,8 @@ const EditPanel: FC<PanelProps> = ({ camera, onSave, onFlyTo, onClose }) => {
             onClick={handleSave}
           />
         </ButtonWrapper>
-      }>
+      }
+    >
       <GroupWrapper>
         <TwinInputField
           values={[newCamera?.lat ?? 0, newCamera?.lng ?? 0]}
@@ -60,13 +65,17 @@ const EditPanel: FC<PanelProps> = ({ camera, onSave, onFlyTo, onClose }) => {
           <NumberInput
             unit={"km"}
             value={newCamera?.height ?? 0}
-            onChange={value => handleFieldChange("height", value)}
-            onBlur={value => handleFieldBlur("height", value)}
+            onChange={(value) => handleFieldChange("height", value)}
+            onBlur={(value) => handleFieldBlur("height", value)}
           />
         </InputWrapper>
         <TripletInputField
           commonTitle={t("Rotation")}
-          values={[newCamera?.heading ?? 0, newCamera?.pitch ?? 0, newCamera?.roll ?? 0]}
+          values={[
+            newCamera?.heading ?? 0,
+            newCamera?.pitch ?? 0,
+            newCamera?.roll ?? 0,
+          ]}
           content={[t("Heading"), t("Pitch"), t("Roll")]}
           placeholders={[t("value"), t("value"), t("value")]}
           onChange={handleTrippleFieldChange}
diff --git a/web/src/beta/ui/fields/CamersField/hooks.ts b/web/src/beta/ui/fields/CamersField/hooks.ts
index e5a8f1733..0a40a946d 100644
--- a/web/src/beta/ui/fields/CamersField/hooks.ts
+++ b/web/src/beta/ui/fields/CamersField/hooks.ts
@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useState } from "react";
-
 import { Camera } from "@reearth/beta/utils/value";
+import { useCallback, useEffect, useState } from "react";
 
-export const degreesToRadians = (degrees: number): number => degrees * (Math.PI / 180);
+export const degreesToRadians = (degrees: number): number =>
+  degrees * (Math.PI / 180);
 
-export const radiansToDegrees = (radians: number): number => radians * (180 / Math.PI);
+export const radiansToDegrees = (radians: number): number =>
+  radians * (180 / Math.PI);
 
 export const handleCameraeRadianToDegree = (camera: Camera) => ({
   lat: camera.lat,
@@ -60,7 +61,7 @@ export default ({
   );
 
   const handleFieldChange = useCallback((key: keyof Camera, value?: number) => {
-    setNewCamera(prev => (prev ? { ...prev, [key]: value } : undefined));
+    setNewCamera((prev) => (prev ? { ...prev, [key]: value } : undefined));
   }, []);
 
   const handleSave = useCallback(() => {
diff --git a/web/src/beta/ui/fields/CamersField/index.tsx b/web/src/beta/ui/fields/CamersField/index.tsx
index 9a05cb0e5..b2c68e1dd 100644
--- a/web/src/beta/ui/fields/CamersField/index.tsx
+++ b/web/src/beta/ui/fields/CamersField/index.tsx
@@ -1,11 +1,15 @@
-import { useCallback, useState, FC } from "react";
-
 import { useCurrentCamera } from "@reearth/beta/features/Editor/atoms";
-import { Button, ButtonProps, Popup, TextInput } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  ButtonProps,
+  Popup,
+  TextInput,
+} from "@reearth/beta/lib/reearth-ui";
 import type { Camera } from "@reearth/beta/utils/value";
 import type { FlyTo } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { useCallback, useState, FC } from "react";
 
 import CommonField, { CommonFieldProps } from "../CommonField";
 
@@ -42,7 +46,8 @@ const CameraField: FC<CameraFieldProps> = ({
   const [currentCamera] = useCurrentCamera();
 
   const handleClick = useCallback(
-    (panel: "editor" | "capture") => setOpen(current => (current === panel ? null : panel)),
+    (panel: "editor" | "capture") =>
+      setOpen((current) => (current === panel ? null : panel)),
     [],
   );
 
@@ -118,7 +123,8 @@ const CameraField: FC<CameraFieldProps> = ({
           }
           open={open === "editor"}
           offset={4}
-          placement="bottom-start">
+          placement="bottom-start"
+        >
           {open === "editor" && (
             <EditPanel
               camera={value}
@@ -141,9 +147,14 @@ const CameraField: FC<CameraFieldProps> = ({
           }
           open={open === "capture"}
           offset={4}
-          placement="bottom-start">
+          placement="bottom-start"
+        >
           {open === "capture" && (
-            <CapturePanel camera={currentCamera} onSave={handleSave} onClose={handleClose} />
+            <CapturePanel
+              camera={currentCamera}
+              onSave={handleSave}
+              onClose={handleClose}
+            />
           )}
         </Popup>
       </InputWrapper>
diff --git a/web/src/beta/ui/fields/CheckboxField.tsx b/web/src/beta/ui/fields/CheckboxField.tsx
index 391acf7e9..7ff3a4858 100644
--- a/web/src/beta/ui/fields/CheckboxField.tsx
+++ b/web/src/beta/ui/fields/CheckboxField.tsx
@@ -1,12 +1,15 @@
-import { FC } from "react";
-
 import { CheckBox, CheckBoxProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type CheckBoxFieldProps = CommonFieldProps & CheckBoxProps;
 
-const CheckBoxField: FC<CheckBoxFieldProps> = ({ commonTitle, description, ...props }) => {
+const CheckBoxField: FC<CheckBoxFieldProps> = ({
+  commonTitle,
+  description,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <CheckBox {...props} />
diff --git a/web/src/beta/ui/fields/CodeField.tsx b/web/src/beta/ui/fields/CodeField.tsx
index 4c2345dc6..823430221 100644
--- a/web/src/beta/ui/fields/CodeField.tsx
+++ b/web/src/beta/ui/fields/CodeField.tsx
@@ -1,14 +1,19 @@
-import { FC } from "react";
-
 import { CodeInput, CodeInputProps } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type CodeFieldProps = CommonFieldProps &
   CodeInputProps & { height?: number; width?: number };
 
-const CodeField: FC<CodeFieldProps> = ({ commonTitle, description, height, width, ...props }) => {
+const CodeField: FC<CodeFieldProps> = ({
+  commonTitle,
+  description,
+  height,
+  width,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <CodeInputWrapper height={height} width={width}>
diff --git a/web/src/beta/ui/fields/ColorField.tsx b/web/src/beta/ui/fields/ColorField.tsx
index 1a4f087e7..fb721da37 100644
--- a/web/src/beta/ui/fields/ColorField.tsx
+++ b/web/src/beta/ui/fields/ColorField.tsx
@@ -1,12 +1,15 @@
-import { FC } from "react";
-
 import { ColorInput, ColorInputProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type ColorInputFieldProps = CommonFieldProps & ColorInputProps;
 
-const ColorInputField: FC<ColorInputFieldProps> = ({ commonTitle, description, ...props }) => {
+const ColorInputField: FC<ColorInputFieldProps> = ({
+  commonTitle,
+  description,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <ColorInput {...props} />
diff --git a/web/src/beta/ui/fields/InputField.tsx b/web/src/beta/ui/fields/InputField.tsx
index 42bac5081..ef7276bbd 100644
--- a/web/src/beta/ui/fields/InputField.tsx
+++ b/web/src/beta/ui/fields/InputField.tsx
@@ -1,13 +1,19 @@
-import { FC } from "react";
-
 import { TextInput, TextInputProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type InputFieldProps = CommonFieldProps &
-  Pick<TextInputProps, "value" | "placeholder" | "onChange" | "onBlur" | "disabled" | "appearance">;
+  Pick<
+    TextInputProps,
+    "value" | "placeholder" | "onChange" | "onBlur" | "disabled" | "appearance"
+  >;
 
-const InputField: FC<InputFieldProps> = ({ commonTitle, description, ...props }) => {
+const InputField: FC<InputFieldProps> = ({
+  commonTitle,
+  description,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <TextInput {...props} />
diff --git a/web/src/beta/ui/fields/ListField/ListItem.tsx b/web/src/beta/ui/fields/ListField/ListItem.tsx
index a6b256378..3030bc72a 100644
--- a/web/src/beta/ui/fields/ListField/ListItem.tsx
+++ b/web/src/beta/ui/fields/ListField/ListItem.tsx
@@ -1,8 +1,7 @@
-import { FC, useCallback, useMemo, useState } from "react";
-
 import { PopupMenuItem, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useMemo, useState } from "react";
 
 import { ListItemProps } from ".";
 
@@ -81,7 +80,10 @@ const ListItem: FC<ItemProps> = ({
               />
             ) : (
               <TitleWrapper
-                onDoubleClick={isEditable ? () => setItemNameRenameId(item.id) : undefined}>
+                onDoubleClick={
+                  isEditable ? () => setItemNameRenameId(item.id) : undefined
+                }
+              >
                 {item.title}
               </TitleWrapper>
             )
diff --git a/web/src/beta/ui/fields/ListField/index.stories.tsx b/web/src/beta/ui/fields/ListField/index.stories.tsx
index 75e5f6acf..ab7e3c168 100644
--- a/web/src/beta/ui/fields/ListField/index.stories.tsx
+++ b/web/src/beta/ui/fields/ListField/index.stories.tsx
@@ -35,11 +35,14 @@ export const Default: Story = (args: ListFieldProps) => {
     [updateArgs, args.items],
   );
 
-  const handleSelect = useCallback((id: string) => updateArgs({ selected: id }), [updateArgs]);
+  const handleSelect = useCallback(
+    (id: string) => updateArgs({ selected: id }),
+    [updateArgs],
+  );
 
   const handleItemMove = useCallback(
     (id: string, targetIndex: number) => {
-      const currentIndex = args.items.findIndex(item => item.id === id);
+      const currentIndex = args.items.findIndex((item) => item.id === id);
       if (currentIndex === -1 || currentIndex === targetIndex) return;
 
       const updatedItems = [...args.items];
@@ -52,7 +55,7 @@ export const Default: Story = (args: ListFieldProps) => {
   );
   const handleItemNameUpdate = useCallback(
     (id: string, newTitle: string) => {
-      const updatedItems = args.items.map(item =>
+      const updatedItems = args.items.map((item) =>
         item.id === id ? { ...item, title: newTitle } : item,
       );
       updateArgs({ items: updatedItems });
@@ -68,7 +71,8 @@ export const Default: Story = (args: ListFieldProps) => {
         gap: "10px",
         width: "500px",
         margin: "0 auto",
-      }}>
+      }}
+    >
       <ListField
         {...args}
         atLeastOneItem={true}
diff --git a/web/src/beta/ui/fields/ListField/index.tsx b/web/src/beta/ui/fields/ListField/index.tsx
index 8f98ea508..3a1f25ef7 100644
--- a/web/src/beta/ui/fields/ListField/index.tsx
+++ b/web/src/beta/ui/fields/ListField/index.tsx
@@ -1,13 +1,13 @@
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
-
 import { Button, DragAndDropList } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "../CommonField";
 
 import ListItem from "./ListItem";
 
-const LIST_FIELD_DRAG_HANDLE_CLASS_NAME = "reearth-visualizer-editor-list-field-drag-handle";
+const LIST_FIELD_DRAG_HANDLE_CLASS_NAME =
+  "reearth-visualizer-editor-list-field-drag-handle";
 
 export type ListItemProps = {
   id: string;
@@ -43,7 +43,8 @@ const ListField: FC<ListFieldProps> = ({
 
   useEffect(() => {
     if (!atLeastOneItem) return;
-    const updateSelected = !selected || !items.find(({ id }) => id === selected);
+    const updateSelected =
+      !selected || !items.find(({ id }) => id === selected);
     if (updateSelected) {
       onItemSelect?.(items[0]?.id);
     }
@@ -53,9 +54,9 @@ const ListField: FC<ListFieldProps> = ({
   const handleMoveEnd = useCallback(
     (itemId?: string, newIndex?: number) => {
       if (itemId !== undefined && newIndex !== undefined) {
-        setListItems(old => {
+        setListItems((old) => {
           const items = [...old];
-          const currentIndex = old.findIndex(o => o.id === itemId);
+          const currentIndex = old.findIndex((o) => o.id === itemId);
           if (currentIndex !== -1) {
             const [movedItem] = items.splice(currentIndex, 1);
             items.splice(newIndex, 0, movedItem);
@@ -75,7 +76,7 @@ const ListField: FC<ListFieldProps> = ({
 
   const DraggableListItems = useMemo(
     () =>
-      listItems.map(item => ({
+      listItems.map((item) => ({
         id: item.id,
         content: (
           <ListItem
@@ -90,7 +91,15 @@ const ListField: FC<ListFieldProps> = ({
           />
         ),
       })),
-    [listItems, isDragging, selected, isEditable, onItemDelete, onItemSelect, onItemNameUpdate],
+    [
+      listItems,
+      isDragging,
+      selected,
+      isEditable,
+      onItemDelete,
+      onItemSelect,
+      onItemNameUpdate,
+    ],
   );
 
   const handleMoveStart = useCallback(() => {
diff --git a/web/src/beta/ui/fields/NumberField.tsx b/web/src/beta/ui/fields/NumberField.tsx
index 127d777ea..1d5c4dbd7 100644
--- a/web/src/beta/ui/fields/NumberField.tsx
+++ b/web/src/beta/ui/fields/NumberField.tsx
@@ -1,11 +1,14 @@
-import { FC } from "react";
-
 import { NumberInput, NumberInputProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type NumberFieldProps = CommonFieldProps & NumberInputProps;
-const NumberField: FC<NumberFieldProps> = ({ commonTitle, description, ...props }) => {
+const NumberField: FC<NumberFieldProps> = ({
+  commonTitle,
+  description,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <NumberInput {...props} />
diff --git a/web/src/beta/ui/fields/Properties/ProprtyField.tsx b/web/src/beta/ui/fields/Properties/ProprtyField.tsx
index 39a932c63..b0964f0fb 100644
--- a/web/src/beta/ui/fields/Properties/ProprtyField.tsx
+++ b/web/src/beta/ui/fields/Properties/ProprtyField.tsx
@@ -1,8 +1,7 @@
-import { FC, useMemo } from "react";
-
 import { Camera, LatLng } from "@reearth/beta/utils/value";
 import { FlyTo } from "@reearth/core";
 import { Field, SchemaField } from "@reearth/services/api/propertyApi/utils";
+import { FC, useMemo } from "react";
 
 import {
   AssetField,
@@ -30,7 +29,14 @@ type Props = {
   onFlyTo?: FlyTo;
 };
 
-const PropertyField: FC<Props> = ({ propertyId, itemId, field, schemaGroup, schema, onFlyTo }) => {
+const PropertyField: FC<Props> = ({
+  propertyId,
+  itemId,
+  field,
+  schemaGroup,
+  schema,
+  onFlyTo,
+}) => {
   const { handlePropertyItemUpdate } = useHooks(propertyId, schemaGroup);
 
   const value = useMemo(
@@ -44,8 +50,8 @@ const PropertyField: FC<Props> = ({ propertyId, itemId, field, schemaGroup, sche
         ? schema.ui === "image"
           ? ["image" as const]
           : schema.ui === "file"
-          ? ["file" as const]
-          : undefined
+            ? ["file" as const]
+            : undefined
         : undefined,
     [schema.type, schema.ui],
   );
@@ -76,7 +82,12 @@ const PropertyField: FC<Props> = ({ propertyId, itemId, field, schemaGroup, sche
             commonTitle={schema.name}
             value={(value as string) ?? ""}
             description={schema.description}
-            options={schema?.choices?.map(({ key, label }) => ({ value: key, label: label })) || []}
+            options={
+              schema?.choices?.map(({ key, label }) => ({
+                value: key,
+                label: label,
+              })) || []
+            }
             onChange={handleChange}
           />
         ) : schema.ui === "buttons" ? (
@@ -95,7 +106,9 @@ const PropertyField: FC<Props> = ({ propertyId, itemId, field, schemaGroup, sche
           key={schema.id}
           commonTitle={schema.name}
           assetsTypes={assetTypes}
-          inputMethod={schema.ui === "video" || schema.ui === undefined ? "URL" : "asset"}
+          inputMethod={
+            schema.ui === "video" || schema.ui === undefined ? "URL" : "asset"
+          }
           value={(value as string) ?? ""}
           description={schema.description}
           onChange={handleChange}
diff --git a/web/src/beta/ui/fields/Properties/hooks.ts b/web/src/beta/ui/fields/Properties/hooks.ts
index 1d2225104..d0a4760de 100644
--- a/web/src/beta/ui/fields/Properties/hooks.ts
+++ b/web/src/beta/ui/fields/Properties/hooks.ts
@@ -1,16 +1,27 @@
-import { useCallback } from "react";
-
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { usePropertyFetcher } from "@reearth/services/api";
+import { useCallback } from "react";
 
 export default (propertyId: string, schemaGroup: string) => {
-  const { useUpdatePropertyValue, useAddPropertyItem, useRemovePropertyItem, useMovePropertyItem } =
-    usePropertyFetcher();
+  const {
+    useUpdatePropertyValue,
+    useAddPropertyItem,
+    useRemovePropertyItem,
+    useMovePropertyItem,
+  } = usePropertyFetcher();
 
   const handlePropertyItemUpdate = useCallback(
     (fieldId: string, vt: ValueType, itemId?: string) => {
       return async (v?: ValueTypes[ValueType]) => {
-        await useUpdatePropertyValue(propertyId, schemaGroup, itemId, fieldId, "en", v, vt);
+        await useUpdatePropertyValue(
+          propertyId,
+          schemaGroup,
+          itemId,
+          fieldId,
+          "en",
+          v,
+          vt,
+        );
       };
     },
     [propertyId, schemaGroup, useUpdatePropertyValue],
diff --git a/web/src/beta/ui/fields/Properties/index.tsx b/web/src/beta/ui/fields/Properties/index.tsx
index 5518189ae..0e4eab973 100644
--- a/web/src/beta/ui/fields/Properties/index.tsx
+++ b/web/src/beta/ui/fields/Properties/index.tsx
@@ -1,10 +1,13 @@
-import { FC, useMemo, useState } from "react";
-
 import { ValueType, ValueTypes, zeroValues } from "@reearth/beta/utils/value";
 import { FlyTo } from "@reearth/core";
-import { Group, GroupListItem, Item } from "@reearth/services/api/propertyApi/utils";
+import {
+  Group,
+  GroupListItem,
+  Item,
+} from "@reearth/services/api/propertyApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo, useState } from "react";
 
 import ListField, { ListItemProps } from "../ListField";
 
@@ -20,15 +23,16 @@ type Props = {
 const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
   const t = useT();
   const [selected, select] = useState<string>();
-  const { handlePropertyItemDelete, handlePropertyItemAdd, handlePropertyItemMove } = useHooks(
-    propertyId,
-    item?.schemaGroup || "",
-  );
+  const {
+    handlePropertyItemDelete,
+    handlePropertyItemAdd,
+    handlePropertyItemMove,
+  } = useHooks(propertyId, item?.schemaGroup || "");
 
   const isList = item && "items" in item;
   const layerMode = useMemo(() => {
     if (!isList || !item?.representativeField) return false;
-    const sf = item.schemaFields.find(f => f.id === item.representativeField);
+    const sf = item.schemaFields.find((f) => f.id === item.representativeField);
     return sf?.type === "ref" && sf.ui === "layer";
   }, [isList, item?.representativeField, item?.schemaFields]);
 
@@ -37,25 +41,28 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
     [item],
   );
 
-  const selectedItem = isList ? groups.find(g => g.id === selected) : groups[0];
+  const selectedItem = isList
+    ? groups.find((g) => g.id === selected)
+    : groups[0];
 
   const propertyListItems = useMemo(
     () =>
       groups
-        .map<ListItemProps | undefined>(i => {
+        .map<ListItemProps | undefined>((i) => {
           if (!i.id) return;
 
           const representativeField = item?.representativeField
-            ? i.fields.find(f => f.id === item.representativeField)
+            ? i.fields.find((f) => f.id === item.representativeField)
             : undefined;
           const nameSchemaField = item?.schemaFields?.find(
-            sf => sf.id === item.representativeField,
+            (sf) => sf.id === item.representativeField,
           );
 
-          const value = representativeField?.value || nameSchemaField?.defaultValue;
+          const value =
+            representativeField?.value || nameSchemaField?.defaultValue;
 
           const choice = nameSchemaField?.choices
-            ? nameSchemaField?.choices?.find(c => c.key === value)?.label
+            ? nameSchemaField?.choices?.find((c) => c.key === value)?.label
             : undefined;
 
           const title = valueToString(choice || value);
@@ -72,10 +79,13 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
   const schemaFields = useMemo(
     () =>
       selectedItem
-        ? item?.schemaFields.map(f => {
-            const field = selectedItem?.fields.find(f2 => f2.id === f.id);
-            const condf = f.only && selectedItem?.fields.find(f2 => f2.id === f.only?.field);
-            const condsf = f.only && item.schemaFields.find(f2 => f2.id === f.only?.field);
+        ? item?.schemaFields.map((f) => {
+            const field = selectedItem?.fields.find((f2) => f2.id === f.id);
+            const condf =
+              f.only &&
+              selectedItem?.fields.find((f2) => f2.id === f.only?.field);
+            const condsf =
+              f.only && item.schemaFields.find((f2) => f2.id === f.only?.field);
             const condv =
               condf?.value ??
               condf?.mergedValue ??
@@ -95,7 +105,9 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
     <FieldsWrapper>
       {isList && !!item && (
         <ListField
-          commonTitle={item.title || (item.id === "default" ? "defaultItemName" : "")}
+          commonTitle={
+            item.title || (item.id === "default" ? "defaultItemName" : "")
+          }
           items={propertyListItems}
           selected={selected}
           onItemSelect={select}
@@ -107,8 +119,12 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
         />
       )}
       {!!item &&
-        schemaFields?.map(f => {
-          if ((layerMode && f.schemaField.id === item.representativeField) || f.hidden) return null;
+        schemaFields?.map((f) => {
+          if (
+            (layerMode && f.schemaField.id === item.representativeField) ||
+            f.hidden
+          )
+            return null;
           return (
             <PropertyField
               key={f.schemaField.id}
@@ -127,7 +143,9 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
 
 export default PropertyItem;
 
-const valueToString = (v: ValueTypes[ValueType] | undefined): string | undefined => {
+const valueToString = (
+  v: ValueTypes[ValueType] | undefined,
+): string | undefined => {
   if (typeof v === "string" || typeof v === "number") {
     return v.toString();
   }
diff --git a/web/src/beta/ui/fields/QuartetInputField.tsx b/web/src/beta/ui/fields/QuartetInputField.tsx
index b94b4e539..cddd65eef 100644
--- a/web/src/beta/ui/fields/QuartetInputField.tsx
+++ b/web/src/beta/ui/fields/QuartetInputField.tsx
@@ -1,7 +1,10 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
-import { NumberInput, NumberInputProps, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  NumberInput,
+  NumberInputProps,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
@@ -58,7 +61,7 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
             <NumberInput
               value={value}
               placeholder={placeholders?.[index]}
-              onChange={newValue => handleChange(index, newValue)}
+              onChange={(newValue) => handleChange(index, newValue)}
               onBlur={handleBlur}
               extendWidth
               {...props}
diff --git a/web/src/beta/ui/fields/RangeField.tsx b/web/src/beta/ui/fields/RangeField.tsx
index b4e101bb7..701dbe21c 100644
--- a/web/src/beta/ui/fields/RangeField.tsx
+++ b/web/src/beta/ui/fields/RangeField.tsx
@@ -1,7 +1,10 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
-import { NumberInput, NumberInputProps, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  NumberInput,
+  NumberInputProps,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
diff --git a/web/src/beta/ui/fields/SelectField.tsx b/web/src/beta/ui/fields/SelectField.tsx
index 187e5421a..26ecebcf2 100644
--- a/web/src/beta/ui/fields/SelectField.tsx
+++ b/web/src/beta/ui/fields/SelectField.tsx
@@ -1,12 +1,15 @@
-import { FC } from "react";
-
 import { Selector, SelectorProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type SelectorFieldProps = CommonFieldProps & SelectorProps;
 
-const SelectorField: FC<SelectorFieldProps> = ({ commonTitle, description, ...props }) => {
+const SelectorField: FC<SelectorFieldProps> = ({
+  commonTitle,
+  description,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <Selector {...props} />
diff --git a/web/src/beta/ui/fields/SpacingField.tsx b/web/src/beta/ui/fields/SpacingField.tsx
index ac6036048..2fe9c389d 100644
--- a/web/src/beta/ui/fields/SpacingField.tsx
+++ b/web/src/beta/ui/fields/SpacingField.tsx
@@ -1,7 +1,6 @@
-import { FC, useCallback, useMemo, useState } from "react";
-
 import { NumberInput, NumberInputProps } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useMemo, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
@@ -34,7 +33,10 @@ const SpacingField: FC<SpacingFieldProps> = ({
   );
 
   const processedSpacingValues = useMemo(
-    () => spacingPosition.map(position => spacingValues[position as keyof SpacingValues]),
+    () =>
+      spacingPosition.map(
+        (position) => spacingValues[position as keyof SpacingValues],
+      ),
     [spacingValues],
   );
 
@@ -53,7 +55,9 @@ const SpacingField: FC<SpacingFieldProps> = ({
       <CenteredInput key={index} position={position}>
         <NumberInput
           value={processedSpacingValues[index]}
-          onChange={value => handleChange(position as keyof SpacingValues, value)}
+          onChange={(value) =>
+            handleChange(position as keyof SpacingValues, value)
+          }
           onBlur={handleBlur}
           unit="px"
           {...props}
diff --git a/web/src/beta/ui/fields/SwitchField.tsx b/web/src/beta/ui/fields/SwitchField.tsx
index 12beb50a4..6e385b666 100644
--- a/web/src/beta/ui/fields/SwitchField.tsx
+++ b/web/src/beta/ui/fields/SwitchField.tsx
@@ -1,12 +1,15 @@
-import { FC } from "react";
-
 import { Switcher, SwitcherProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type SwitchFieldProps = CommonFieldProps & SwitcherProps;
 
-const SwitchField: FC<SwitchFieldProps> = ({ commonTitle, description, ...props }) => {
+const SwitchField: FC<SwitchFieldProps> = ({
+  commonTitle,
+  description,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <Switcher {...props} />
diff --git a/web/src/beta/ui/fields/TextareaField.tsx b/web/src/beta/ui/fields/TextareaField.tsx
index f76d63d74..6889e184f 100644
--- a/web/src/beta/ui/fields/TextareaField.tsx
+++ b/web/src/beta/ui/fields/TextareaField.tsx
@@ -1,12 +1,15 @@
-import { FC } from "react";
-
 import { TextArea, TextAreaProps } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
 export type TextAreaFieldProps = CommonFieldProps & TextAreaProps;
 
-const TextAreaField: FC<TextAreaFieldProps> = ({ commonTitle, description, ...props }) => {
+const TextAreaField: FC<TextAreaFieldProps> = ({
+  commonTitle,
+  description,
+  ...props
+}) => {
   return (
     <CommonField commonTitle={commonTitle} description={description}>
       <TextArea {...props} />
diff --git a/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx b/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
index dc0fdc60d..516157373 100644
--- a/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
+++ b/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
@@ -1,9 +1,8 @@
-import { FC, useMemo } from "react";
-
 import { getTimeZone } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { Button, Icon, Modal, ModalPanel } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import TimePointField from "../TimePointField";
 
@@ -49,7 +48,8 @@ const EditModal: FC<EditPanelProps> = ({
     const currentTimezone = getTimeZone(timePeriodValues?.currentTime);
     const endTimezone = getTimeZone(timePeriodValues?.endTime);
 
-    const checkTimezones = startTimezone === currentTimezone && currentTimezone === endTimezone;
+    const checkTimezones =
+      startTimezone === currentTimezone && currentTimezone === endTimezone;
     return checkTimezones;
   }, [timePeriodValues]);
 
@@ -69,12 +69,13 @@ const EditModal: FC<EditPanelProps> = ({
               onClick={handleSubmit}
             />
           </>
-        }>
+        }
+      >
         <FieldsWrapper>
           <TimePointField
             commonTitle={t("* Start Time")}
             description={t("Start time for the timeline")}
-            onChange={newValue => handleChange(newValue || "", "startTime")}
+            onChange={(newValue) => handleChange(newValue || "", "startTime")}
             value={timePeriodValues?.startTime}
             fieldName={"startTime"}
             disabledField={disabledFields.includes("startTime")}
@@ -84,7 +85,7 @@ const EditModal: FC<EditPanelProps> = ({
           <TimePointField
             commonTitle={t("* Current Time")}
             description={t("Current time should be between start and end time")}
-            onChange={newValue => handleChange(newValue || "", "currentTime")}
+            onChange={(newValue) => handleChange(newValue || "", "currentTime")}
             value={timePeriodValues?.currentTime}
             disabledField={disabledFields.includes("currentTime")}
             fieldName={"currentTime"}
@@ -93,7 +94,7 @@ const EditModal: FC<EditPanelProps> = ({
           />
           <TimePointField
             commonTitle={t("* End Time")}
-            onChange={newValue => handleChange(newValue || "", "endTime")}
+            onChange={(newValue) => handleChange(newValue || "", "endTime")}
             description={t("End time for the timeline")}
             value={timePeriodValues?.endTime}
             fieldName={"endTime"}
@@ -104,7 +105,9 @@ const EditModal: FC<EditPanelProps> = ({
           {warning && (
             <Warning>
               <Icon icon="warning" size="large" />
-              {t("Please make sure the Current time must between the Start time and End Time.")}
+              {t(
+                "Please make sure the Current time must between the Start time and End Time.",
+              )}
             </Warning>
           )}
         </FieldsWrapper>
diff --git a/web/src/beta/ui/fields/TimePeriodField/hooks.ts b/web/src/beta/ui/fields/TimePeriodField/hooks.ts
index cd2b9d876..f88efc9bd 100644
--- a/web/src/beta/ui/fields/TimePeriodField/hooks.ts
+++ b/web/src/beta/ui/fields/TimePeriodField/hooks.ts
@@ -9,7 +9,12 @@ type Props = {
   setTimePeriodValues?: (value?: TimePeriodFieldProp) => void;
 };
 
-export default ({ timePeriodValues, onChange, onClose, setTimePeriodValues }: Props) => {
+export default ({
+  timePeriodValues,
+  onChange,
+  onClose,
+  setTimePeriodValues,
+}: Props) => {
   const [warning, setWarning] = useState(false);
 
   const handleChange = useCallback(
@@ -89,7 +94,7 @@ export default ({ timePeriodValues, onChange, onClose, setTimePeriodValues }: Pr
 
   const isDisabled = useMemo(() => {
     if (timePeriodValues) {
-      return Object.values(timePeriodValues).every(value => value !== "");
+      return Object.values(timePeriodValues).every((value) => value !== "");
     }
     return false;
   }, [timePeriodValues]);
diff --git a/web/src/beta/ui/fields/TimePeriodField/index.tsx b/web/src/beta/ui/fields/TimePeriodField/index.tsx
index e90216934..9ab5a6fed 100644
--- a/web/src/beta/ui/fields/TimePeriodField/index.tsx
+++ b/web/src/beta/ui/fields/TimePeriodField/index.tsx
@@ -1,8 +1,7 @@
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
-
 import { Button, Typography } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "../CommonField";
 
@@ -45,8 +44,15 @@ const TimePeriodField: FC<TimePeriodFieldProps> = ({
   }, [value]);
 
   const checkAllFieldsSet = useMemo(
-    () => timePeriodValues?.startTime && timePeriodValues?.currentTime && timePeriodValues?.endTime,
-    [timePeriodValues?.currentTime, timePeriodValues?.endTime, timePeriodValues?.startTime],
+    () =>
+      timePeriodValues?.startTime &&
+      timePeriodValues?.currentTime &&
+      timePeriodValues?.endTime,
+    [
+      timePeriodValues?.currentTime,
+      timePeriodValues?.endTime,
+      timePeriodValues?.startTime,
+    ],
   );
 
   return (
@@ -69,7 +75,8 @@ const TimePeriodField: FC<TimePeriodFieldProps> = ({
                   {timePeriodValues?.startTime && timePeriodValues?.startTime}
                 </Typography>
                 <Typography size="body">
-                  {timePeriodValues?.currentTime && timePeriodValues?.currentTime}
+                  {timePeriodValues?.currentTime &&
+                    timePeriodValues?.currentTime}
                 </Typography>
                 <Typography size="body">
                   {timePeriodValues?.endTime && timePeriodValues?.endTime}
@@ -114,7 +121,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   width: "100%",
 }));
 
-const TimePeriodWrapper = styled("div")<{}>(({ theme }) => ({
+const TimePeriodWrapper = styled("div")(({ theme }) => ({
   border: `1px solid ${theme.outline.weak}`,
   borderRadius: theme.radius.small,
   background: theme.bg[1],
diff --git a/web/src/beta/ui/fields/TimePointField/EditPanel.tsx b/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
index 79c29ffe1..285c70c20 100644
--- a/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
+++ b/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
@@ -1,8 +1,13 @@
-import { FC } from "react";
-
-import { Button, DatePicker, PopupPanel, Selector, TimePicker } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  DatePicker,
+  PopupPanel,
+  Selector,
+  TimePicker,
+} from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import useHooks from "./hooks";
 
@@ -42,7 +47,8 @@ const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
             onClick={handleApply}
           />
         </ButtonWrapper>
-      }>
+      }
+    >
       <EditorWrapper>
         <Wrapper>
           <Label>{t("Date")}</Label>
@@ -61,7 +67,7 @@ const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
           <InputWrapper>
             <Selector
               value={selectedTimezone.timezone}
-              options={offsetFromUTC.map(timezone => ({
+              options={offsetFromUTC.map((timezone) => ({
                 label: timezone.offset,
                 value: timezone?.timezone,
               }))}
diff --git a/web/src/beta/ui/fields/TimePointField/hooks.ts b/web/src/beta/ui/fields/TimePointField/hooks.ts
index 8325d5c50..47e9b7266 100644
--- a/web/src/beta/ui/fields/TimePointField/hooks.ts
+++ b/web/src/beta/ui/fields/TimePointField/hooks.ts
@@ -1,8 +1,7 @@
+import { getUniqueTimezones } from "@reearth/beta/utils/moment-timezone";
 import moment from "moment-timezone";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { getUniqueTimezones } from "@reearth/beta/utils/moment-timezone";
-
 type Props = {
   value?: string;
   onChange?: (value?: string | undefined) => void;
@@ -39,7 +38,9 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
 
   const handleTimezoneSelect = useCallback(
     (newValue: string | string[]) => {
-      const updatedTimezone = offsetFromUTC.find(info => info.timezone === newValue);
+      const updatedTimezone = offsetFromUTC.find(
+        (info) => info.timezone === newValue,
+      );
       setSelectedTimezone(updatedTimezone || selectedTimezone);
     },
     [offsetFromUTC, selectedTimezone],
@@ -47,7 +48,7 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
 
   const handleApply = useCallback(() => {
     const selectedTimezoneInfo = offsetFromUTC.find(
-      info => info.timezone === selectedTimezone.timezone,
+      (info) => info.timezone === selectedTimezone.timezone,
     );
     if (selectedTimezoneInfo) {
       const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
@@ -55,13 +56,22 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
       onChange?.(formattedDateTime);
     }
     onClose?.();
-  }, [offsetFromUTC, onClose, selectedTimezone.timezone, date, time, setDateTime, onChange]);
+  }, [
+    offsetFromUTC,
+    onClose,
+    selectedTimezone.timezone,
+    date,
+    time,
+    setDateTime,
+    onChange,
+  ]);
 
   useEffect(() => {
     if (value) {
       const [parsedDate, timeWithOffset] = value.split("T");
       const [parsedTime, timezoneOffset] = timeWithOffset.split(/[-+]/);
-      const [timezoneOffsetHour, timezoneOffsetMinute] = timezoneOffset.split(":");
+      const [timezoneOffsetHour, timezoneOffsetMinute] =
+        timezoneOffset.split(":");
       const formattedTimezoneOffset =
         timezoneOffsetHour.length === 2
           ? timezoneOffset
@@ -71,13 +81,13 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
       setDate(parsedDate);
 
       const updatedTimezone = offsetFromUTC.find(
-        info =>
+        (info) =>
           info.offset ===
           (timeWithOffset.includes("-")
             ? `-${formattedTimezoneOffset}`
             : `+${formattedTimezoneOffset}`),
       );
-      updatedTimezone && setSelectedTimezone(updatedTimezone);
+      if (updatedTimezone) setSelectedTimezone(updatedTimezone);
     } else {
       setDate("");
       setTime("");
diff --git a/web/src/beta/ui/fields/TimePointField/index.tsx b/web/src/beta/ui/fields/TimePointField/index.tsx
index 8ae994f73..369504746 100644
--- a/web/src/beta/ui/fields/TimePointField/index.tsx
+++ b/web/src/beta/ui/fields/TimePointField/index.tsx
@@ -1,8 +1,7 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
 import { Button, Popup, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "../CommonField";
 
@@ -86,7 +85,8 @@ const TimePointField: FC<TimePointFieldProps> = ({
           }
           open={open}
           offset={8}
-          placement="bottom-end">
+          placement="bottom-end"
+        >
           {open && (
             <EditPanel
               setDateTime={setDateTime}
diff --git a/web/src/beta/ui/fields/TripletInputField.tsx b/web/src/beta/ui/fields/TripletInputField.tsx
index 6d2da8f56..0eb3f5b94 100644
--- a/web/src/beta/ui/fields/TripletInputField.tsx
+++ b/web/src/beta/ui/fields/TripletInputField.tsx
@@ -1,7 +1,10 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
-import { NumberInput, NumberInputProps, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  NumberInput,
+  NumberInputProps,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
@@ -55,7 +58,7 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
             <NumberInput
               value={value}
               placeholder={placeholders?.[index]}
-              onChange={newValue => handleChange(index, newValue)}
+              onChange={(newValue) => handleChange(index, newValue)}
               onBlur={handleBlur}
               extendWidth
               {...props}
diff --git a/web/src/beta/ui/fields/TwinInputField.tsx b/web/src/beta/ui/fields/TwinInputField.tsx
index 525673a72..05efff89f 100644
--- a/web/src/beta/ui/fields/TwinInputField.tsx
+++ b/web/src/beta/ui/fields/TwinInputField.tsx
@@ -1,7 +1,10 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
-import { NumberInput, NumberInputProps, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  NumberInput,
+  NumberInputProps,
+  Typography,
+} from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
@@ -54,7 +57,7 @@ const TwinInputField: FC<TwinInputFieldProps> = ({
           <InputWrapper key={index}>
             <NumberInput
               value={value}
-              onChange={newValue => handleChange(index, newValue)}
+              onChange={(newValue) => handleChange(index, newValue)}
               onBlur={handleBlur}
               placeholder={placeholders?.[index]}
               extendWidth
diff --git a/web/src/beta/ui/fields/index.stories.tsx b/web/src/beta/ui/fields/index.stories.tsx
index 21a9226ae..74afb8291 100644
--- a/web/src/beta/ui/fields/index.stories.tsx
+++ b/web/src/beta/ui/fields/index.stories.tsx
@@ -38,7 +38,8 @@ export const Components: Story = {
         maxWidth: "500px",
         padding: "24px",
         margin: "0 auto",
-      }}>
+      }}
+    >
       <CommonField
         commonTitle="CommonField"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
diff --git a/web/src/beta/ui/fields/utils.ts b/web/src/beta/ui/fields/utils.ts
index 9543d0d4f..2320297f7 100644
--- a/web/src/beta/ui/fields/utils.ts
+++ b/web/src/beta/ui/fields/utils.ts
@@ -1,20 +1,27 @@
-import { Field, Item, SchemaField } from "@reearth/services/api/propertyApi/utils";
+import {
+  Field,
+  Item,
+  SchemaField,
+} from "@reearth/services/api/propertyApi/utils";
 
 export const filterVisibleItems = (items?: Item[]) => {
   if (!items) return;
 
-  return items.filter(i => {
+  return items.filter((i) => {
     if (!i.only) return true;
     const res = searchField(items, i.only.field);
     return res && (res[1]?.value ?? res[0].defaultValue) === i.only.value;
   });
 };
 
-const searchField = (items: Item[], fid: string): [SchemaField, Field | undefined] | undefined => {
+const searchField = (
+  items: Item[],
+  fid: string,
+): [SchemaField, Field | undefined] | undefined => {
   for (const i of items) {
-    const sf2 = i.schemaFields.find(f => f.id === fid);
+    const sf2 = i.schemaFields.find((f) => f.id === fid);
     if (!("fields" in i)) return;
-    const field = i.fields.find(f => f.id === fid);
+    const field = i.fields.find((f) => f.id === fid);
     if (sf2) {
       return [sf2, field];
     }
diff --git a/web/src/beta/ui/layout/Area/index.stories.tsx b/web/src/beta/ui/layout/Area/index.stories.tsx
index 89c2aa8da..4bd3337bf 100644
--- a/web/src/beta/ui/layout/Area/index.stories.tsx
+++ b/web/src/beta/ui/layout/Area/index.stories.tsx
@@ -22,7 +22,8 @@ export const Default: StoryObj<typeof Area> = {
           direction="column"
           resizableEdge="right"
           backgroundColor={colors[0]}
-          resizeHandleColor={resizeHandleColor}>
+          resizeHandleColor={resizeHandleColor}
+        >
           Left
         </Area>
         <Area direction="column" extend asWrapper>
@@ -35,7 +36,8 @@ export const Default: StoryObj<typeof Area> = {
           <Area
             resizableEdge="top"
             resizeHandleColor={resizeHandleColor}
-            backgroundColor={colors[0]}>
+            backgroundColor={colors[0]}
+          >
             Center-Bottom
           </Area>
         </Area>
@@ -43,7 +45,8 @@ export const Default: StoryObj<typeof Area> = {
           direction="column"
           resizableEdge="left"
           resizeHandleColor={resizeHandleColor}
-          backgroundColor={colors[3]}>
+          backgroundColor={colors[3]}
+        >
           Right
         </Area>
       </Area>
@@ -64,7 +67,8 @@ export const Complicated: StoryObj<typeof Area> = {
             resizableEdge="right"
             resizeHandleColor={resizeHandleColor}
             initialWidth={200}
-            backgroundColor={colors[1]}>
+            backgroundColor={colors[1]}
+          >
             Left
           </Area>
           <Area direction="column" extend asWrapper>
@@ -85,7 +89,8 @@ export const Complicated: StoryObj<typeof Area> = {
               resizableEdge="top"
               resizeHandleColor={resizeHandleColor}
               initialHeight={50}
-              backgroundColor={colors[5]}>
+              backgroundColor={colors[5]}
+            >
               Center-Bottom
             </Area>
           </Area>
@@ -94,7 +99,8 @@ export const Complicated: StoryObj<typeof Area> = {
             resizableEdge="left"
             initialWidth={200}
             resizeHandleColor={resizeHandleColor}
-            backgroundColor={colors[6]}>
+            backgroundColor={colors[6]}
+          >
             Right
           </Area>
           <Area
diff --git a/web/src/beta/ui/layout/Area/index.tsx b/web/src/beta/ui/layout/Area/index.tsx
index 35294863b..eadbd247c 100644
--- a/web/src/beta/ui/layout/Area/index.tsx
+++ b/web/src/beta/ui/layout/Area/index.tsx
@@ -1,3 +1,5 @@
+import { IconButton } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/theme";
 import {
   MouseEvent as ReactMouseEvent,
   ReactNode,
@@ -11,9 +13,6 @@ import {
   useState,
 } from "react";
 
-import { IconButton } from "@reearth/beta/lib/reearth-ui";
-import { styled } from "@reearth/services/theme";
-
 import { Panel } from "../Panel";
 
 type ResizableEdge = "top" | "right" | "bottom" | "left";
@@ -74,8 +73,12 @@ export const Area = forwardRef<AreaRef, AreaProps>(
     },
     ref,
   ) => {
-    const sizeStorageKey = storageId ? `reearth-visualizer-${storageId}-size` : undefined;
-    const collapsedStorageKey = storageId ? `reearth-visualizer-${storageId}-collapsed` : undefined;
+    const sizeStorageKey = storageId
+      ? `reearth-visualizer-${storageId}-size`
+      : undefined;
+    const collapsedStorageKey = storageId
+      ? `reearth-visualizer-${storageId}-collapsed`
+      : undefined;
 
     const [size, setSize] = useState({
       width: Number(
@@ -95,7 +98,9 @@ export const Area = forwardRef<AreaRef, AreaProps>(
     });
 
     const [collapsed, setCollapsed] = useState<boolean>(
-      collapsedStorageKey ? localStorage.getItem(collapsedStorageKey) === "1" : false,
+      collapsedStorageKey
+        ? localStorage.getItem(collapsedStorageKey) === "1"
+        : false,
     );
 
     const resizableRef = useRef<HTMLDivElement>(null);
@@ -112,20 +117,20 @@ export const Area = forwardRef<AreaRef, AreaProps>(
 
         const rect = resizableRef.current.getBoundingClientRect();
 
-        setSize(prevSize => {
+        setSize((prevSize) => {
           let width =
             resizableEdge === "right"
               ? e.clientX - rect.left + 1
               : resizableEdge === "left"
-              ? rect.right - e.clientX + 1
-              : prevSize.width;
+                ? rect.right - e.clientX + 1
+                : prevSize.width;
 
           let height =
             resizableEdge === "bottom"
               ? e.clientY - rect.top + 1
               : resizableEdge === "top"
-              ? rect.bottom - e.clientY + 1
-              : prevSize.height;
+                ? rect.bottom - e.clientY + 1
+                : prevSize.height;
 
           if (
             (resizableEdge === "left" || resizableEdge === "right") &&
@@ -180,7 +185,13 @@ export const Area = forwardRef<AreaRef, AreaProps>(
           };
         });
       },
-      [isResizing, resizableEdge, sizeStorageKey, collapsedStorageKey, direction],
+      [
+        isResizing,
+        resizableEdge,
+        sizeStorageKey,
+        collapsedStorageKey,
+        direction,
+      ],
     );
 
     const onMouseUp = () => {
@@ -206,13 +217,14 @@ export const Area = forwardRef<AreaRef, AreaProps>(
       if (!onResize) return;
       const area = resizableRef.current;
       if (!area) return;
-      const areaObserver = new ResizeObserver(entries => {
+      const areaObserver = new ResizeObserver((entries) => {
         if (!entries || entries.length === 0) return;
         const { width, height } = entries[0].contentRect;
         const areaRect = resizableRef.current?.getBoundingClientRect();
         const windowRect = windowRef?.current?.getBoundingClientRect();
         const top = areaRect && windowRect ? areaRect.top - windowRect.top : 0;
-        const left = areaRect && windowRect ? areaRect.left - windowRect.left : 0;
+        const left =
+          areaRect && windowRect ? areaRect.left - windowRect.left : 0;
         onResize({ width, height, top, left });
       });
       areaObserver.observe(area);
@@ -224,8 +236,10 @@ export const Area = forwardRef<AreaRef, AreaProps>(
 
     const isValidEdge = useMemo(
       () =>
-        (direction === "row" && (resizableEdge === "top" || resizableEdge === "bottom")) ||
-        (direction === "column" && (resizableEdge === "left" || resizableEdge === "right")),
+        (direction === "row" &&
+          (resizableEdge === "top" || resizableEdge === "bottom")) ||
+        (direction === "column" &&
+          (resizableEdge === "left" || resizableEdge === "right")),
       [direction, resizableEdge],
     );
 
@@ -234,12 +248,21 @@ export const Area = forwardRef<AreaRef, AreaProps>(
       if (collapsedStorageKey) {
         localStorage.setItem(collapsedStorageKey, "0");
       }
-      setSize(prevSize => {
-        const w = direction === "column" ? initialWidth ?? DEFAULT_WIDTH : prevSize.width;
-        const h = direction === "row" ? initialHeight ?? DEFAULT_HEIGHT : prevSize.height;
+      setSize((prevSize) => {
+        const w =
+          direction === "column"
+            ? (initialWidth ?? DEFAULT_WIDTH)
+            : prevSize.width;
+        const h =
+          direction === "row"
+            ? (initialHeight ?? DEFAULT_HEIGHT)
+            : prevSize.height;
 
         if (sizeStorageKey) {
-          localStorage.setItem(sizeStorageKey, direction === "row" ? h.toString() : w.toString());
+          localStorage.setItem(
+            sizeStorageKey,
+            direction === "row" ? h.toString() : w.toString(),
+          );
         }
 
         return {
@@ -247,14 +270,20 @@ export const Area = forwardRef<AreaRef, AreaProps>(
           height: h,
         };
       });
-    }, [direction, sizeStorageKey, collapsedStorageKey, initialWidth, initialHeight]);
+    }, [
+      direction,
+      sizeStorageKey,
+      collapsedStorageKey,
+      initialWidth,
+      initialHeight,
+    ]);
 
     const collapse = useCallback(() => {
       setCollapsed(true);
       if (collapsedStorageKey) {
         localStorage.setItem(collapsedStorageKey, "1");
       }
-      setSize(prevSize => {
+      setSize((prevSize) => {
         const width = direction === "column" ? COLLAPSED_SIZE : prevSize.width;
         const height = direction === "row" ? COLLAPSED_SIZE : prevSize.height;
 
@@ -287,7 +316,8 @@ export const Area = forwardRef<AreaRef, AreaProps>(
         height={size.height}
         backgroundColor={backgroundColor}
         asWrapper={asWrapper}
-        passive={passive}>
+        passive={passive}
+      >
         {!collapsed && children}
         {resizableEdge && isValidEdge && !collapsed && (
           <ResizeHandle
@@ -322,51 +352,66 @@ const StyledArea = styled("div")<{
   backgroundColor?: string;
   asWrapper?: boolean;
   passive?: boolean;
-}>(({ theme, direction, extend, width, height, backgroundColor, asWrapper, passive }) => ({
-  position: "relative",
-  display: "flex",
-  flexDirection: direction,
-  justifyContent: "space-between",
-  height: direction === "row" && !extend ? height : "100%",
-  width: direction === "column" && !extend ? width : "100%",
-  flexGrow: extend ? 1 : 0,
-  flexShrink: extend ? 1 : 0,
-  overflow: "hidden",
-  backgroundColor: backgroundColor
-    ? backgroundColor
-    : asWrapper || passive
-    ? "transparent"
-    : theme.bg.base,
-  boxSizing: "border-box",
-  pointerEvents: asWrapper || passive ? "none" : "auto",
-  ...(!asWrapper && {
-    padding: theme.spacing.micro / 2,
-    gap: theme.spacing.micro,
+}>(
+  ({
+    theme,
+    direction,
+    extend,
+    width,
+    height,
+    backgroundColor,
+    asWrapper,
+    passive,
+  }) => ({
+    position: "relative",
     display: "flex",
     flexDirection: direction,
+    justifyContent: "space-between",
+    height: direction === "row" && !extend ? height : "100%",
+    width: direction === "column" && !extend ? width : "100%",
+    flexGrow: extend ? 1 : 0,
+    flexShrink: extend ? 1 : 0,
+    overflow: "hidden",
+    backgroundColor: backgroundColor
+      ? backgroundColor
+      : asWrapper || passive
+        ? "transparent"
+        : theme.bg.base,
+    boxSizing: "border-box",
+    pointerEvents: asWrapper || passive ? "none" : "auto",
+    ...(!asWrapper && {
+      padding: theme.spacing.micro / 2,
+      gap: theme.spacing.micro,
+      display: "flex",
+      flexDirection: direction,
+    }),
+    maxHeight: "100%",
+    maxWidth: "100%",
   }),
-  maxHeight: "100%",
-  maxWidth: "100%",
-}));
+);
 
-const ResizeHandle = styled("div")<{ edge: ResizableEdge; color?: string }>(({ edge, color }) => ({
-  position: "absolute",
-  width: edge === "left" || edge === "right" ? 4 : "100%",
-  height: edge === "top" || edge === "bottom" ? 4 : "100%",
-  left: edge === "right" ? "calc(100% - 4px)" : edge === "left" ? "0" : 0,
-  top: edge === "bottom" ? "calc(100% - 4px)" : edge === "top" ? "0" : 0,
-  cursor: edge === "right" || edge === "left" ? "ew-resize" : "ns-resize",
-  zIndex: 1,
-  background: color ?? "none",
-}));
+const ResizeHandle = styled("div")<{ edge: ResizableEdge; color?: string }>(
+  ({ edge, color }) => ({
+    position: "absolute",
+    width: edge === "left" || edge === "right" ? 4 : "100%",
+    height: edge === "top" || edge === "bottom" ? 4 : "100%",
+    left: edge === "right" ? "calc(100% - 4px)" : edge === "left" ? "0" : 0,
+    top: edge === "bottom" ? "calc(100% - 4px)" : edge === "top" ? "0" : 0,
+    cursor: edge === "right" || edge === "left" ? "ew-resize" : "ns-resize",
+    zIndex: 1,
+    background: color ?? "none",
+  }),
+);
 
-const StyledIconButton = styled(IconButton)<{ vertical?: boolean }>(({ vertical }) => ({
-  height: "100%",
-  width: "100%",
-  ["svg"]: {
-    transform: vertical ? "rotate(90deg)" : "none",
-  },
-}));
+const StyledIconButton = styled(IconButton)<{ vertical?: boolean }>(
+  ({ vertical }) => ({
+    height: "100%",
+    width: "100%",
+    ["svg"]: {
+      transform: vertical ? "rotate(90deg)" : "none",
+    },
+  }),
+);
 
 export const Window = styled("div")(({ theme }) => ({
   flex: 1,
diff --git a/web/src/beta/ui/layout/Panel/index.stories.tsx b/web/src/beta/ui/layout/Panel/index.stories.tsx
index 5868330fb..96b1ee63b 100644
--- a/web/src/beta/ui/layout/Panel/index.stories.tsx
+++ b/web/src/beta/ui/layout/Panel/index.stories.tsx
@@ -5,8 +5,15 @@ import { Panel } from ".";
 const meta: Meta<typeof Panel> = {
   component: Panel,
   decorators: [
-    Story => (
-      <div style={{ width: 300, height: 300, display: "flex", flexDirection: "column" }}>
+    (Story) => (
+      <div
+        style={{
+          width: 300,
+          height: 300,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         <Story />
       </div>
     ),
diff --git a/web/src/beta/ui/layout/Panel/index.tsx b/web/src/beta/ui/layout/Panel/index.tsx
index 8d3db22cc..50d18ed54 100644
--- a/web/src/beta/ui/layout/Panel/index.tsx
+++ b/web/src/beta/ui/layout/Panel/index.tsx
@@ -1,7 +1,6 @@
-import { FC, MouseEvent, ReactNode, useCallback, useMemo } from "react";
-
 import { Collapse, IconButton } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, MouseEvent, ReactNode, useCallback, useMemo } from "react";
 
 import { AreaRef } from "../Area";
 
@@ -32,7 +31,9 @@ export const Panel: FC<PanelProps> = ({
 }) => {
   const theme = useTheme();
 
-  const storageKey = storageId ? `reearth-visualizer-${storageId}-collapsed` : undefined;
+  const storageKey = storageId
+    ? `reearth-visualizer-${storageId}-collapsed`
+    : undefined;
 
   const initialCollapsed = useMemo(
     () => !!(storageKey ? localStorage.getItem(storageKey) === "1" : collapsed),
@@ -92,7 +93,8 @@ export const Panel: FC<PanelProps> = ({
           noPadding={noPadding}
           disabled={alwaysOpen}
           actions={actions}
-          onCollapse={handleCollapse}>
+          onCollapse={handleCollapse}
+        >
           {children}
         </Collapse>
       ) : (
diff --git a/web/src/beta/utils/README.md b/web/src/beta/utils/README.md
index 049b4fc7a..7fa99f65b 100644
--- a/web/src/beta/utils/README.md
+++ b/web/src/beta/utils/README.md
@@ -1,3 +1,3 @@
 # Utility functions used throughout the app
 
-Any utils that are not used in multiple places don't need to go here.
\ No newline at end of file
+Any utils that are not used in multiple places don't need to go here.
diff --git a/web/src/beta/utils/convert-object.ts b/web/src/beta/utils/convert-object.ts
index 0e1ed6d76..80da71f73 100644
--- a/web/src/beta/utils/convert-object.ts
+++ b/web/src/beta/utils/convert-object.ts
@@ -3,7 +3,10 @@ type AnyObject = Record<string, any>;
 
 // Helper function to get nested property value
 function getNestedProperty(obj: AnyObject, keys: string[]): any {
-  return keys.reduce((acc, key) => (acc?.[key] !== undefined ? acc[key] : undefined), obj);
+  return keys.reduce(
+    (acc, key) => (acc?.[key] !== undefined ? acc[key] : undefined),
+    obj,
+  );
 }
 
 // Helper function to set nested properties
@@ -34,7 +37,7 @@ export function convertData(source: AnyObject, mapping: Mapping): AnyObject {
 
     if (value !== undefined) {
       if (isArray(value) && typeof targetKey === "object") {
-        const convertedArray = value.map(item =>
+        const convertedArray = value.map((item) =>
           isObject(item) ? convertData(item, targetKey[1]) : item,
         );
         const targetKeys = targetKey[0].split(".");
@@ -72,7 +75,8 @@ export const sceneProperty2ViewerPropertyMapping: Mapping = {
   "terrain.terrainCesiumIonAccessToken": "assets.cesium.terrain.ionAccessToken",
   "terrain.terrainCesiumIonUrl": "assets.cesium.terrain.ionUrl",
   "terrain.terrainExaggeration": "scene.verticalExaggeration",
-  "terrain.terrainExaggerationRelativeHeight": "scene.verticalExaggerationRelativeHeight",
+  "terrain.terrainExaggerationRelativeHeight":
+    "scene.verticalExaggerationRelativeHeight",
   "terrain.depthTestAgainstTerrain": "globe.depthTestAgainstTerrain",
   "globeLighting.globeLighting": "globe.enableLighting",
   "globeShadow.globeShadow": "scene.shadow.enabled",
diff --git a/web/src/beta/utils/deepFind.test.ts b/web/src/beta/utils/deepFind.test.ts
index c14d824dd..289ddee3e 100644
--- a/web/src/beta/utils/deepFind.test.ts
+++ b/web/src/beta/utils/deepFind.test.ts
@@ -6,24 +6,24 @@ test("find an element", () => {
   expect(
     deepFind<string | string[]>(
       ["a", ["b", "c"], "d"],
-      e => e === "c",
-      e => (Array.isArray(e) ? e : []),
+      (e) => e === "c",
+      (e) => (Array.isArray(e) ? e : []),
     ),
   ).toEqual(["c", [1, 1]]);
 
   expect(
     deepFind<string | string[]>(
       ["a", ["b", "c"], "d"],
-      e => e === "e",
-      e => (Array.isArray(e) ? e : []),
+      (e) => e === "e",
+      (e) => (Array.isArray(e) ? e : []),
     ),
   ).toEqual([undefined, []]);
 
   expect(
     deepFind<string | string[]>(
       ["a", ["b", "c"], "d"],
-      e => e === "a",
-      e => (Array.isArray(e) ? e : []),
+      (e) => e === "a",
+      (e) => (Array.isArray(e) ? e : []),
     ),
   ).toEqual(["a", [0]]);
 });
diff --git a/web/src/beta/utils/file.ts b/web/src/beta/utils/file.ts
index 67359cd45..4b92ea636 100644
--- a/web/src/beta/utils/file.ts
+++ b/web/src/beta/utils/file.ts
@@ -28,10 +28,10 @@ export async function fetchAndZipFiles(urls: string[], zipFileName: string) {
 
   await zip
     .generateAsync({ type: "blob" })
-    .then(blob => {
+    .then((blob) => {
       file = new File([blob], zipFileName);
     })
-    .catch(error => {
+    .catch((error) => {
       console.error("Error generating ZIP file:", error);
     });
 
diff --git a/web/src/beta/utils/generate-random-string.ts b/web/src/beta/utils/generate-random-string.ts
index 43255a4ce..04564a0f6 100644
--- a/web/src/beta/utils/generate-random-string.ts
+++ b/web/src/beta/utils/generate-random-string.ts
@@ -1,7 +1,8 @@
-const usableChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+const usableChars =
+  "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 const generateRandomString = (len: number): string => {
   return Array.from(window.crypto.getRandomValues(new Uint8Array(len)))
-    .map(n => usableChars[n % len])
+    .map((n) => usableChars[n % len])
     .join("")
     .toLowerCase();
 };
diff --git a/web/src/beta/utils/infinite-scroll.ts b/web/src/beta/utils/infinite-scroll.ts
index b57df6d2a..258912833 100644
--- a/web/src/beta/utils/infinite-scroll.ts
+++ b/web/src/beta/utils/infinite-scroll.ts
@@ -4,7 +4,10 @@ export function autoFillPage(
   ref: MutableRefObject<HTMLDivElement | undefined | null>,
   onLoadMore?: () => void,
 ) {
-  if (ref.current && ref.current?.scrollHeight <= document.documentElement.clientHeight) {
+  if (
+    ref.current &&
+    ref.current?.scrollHeight <= document.documentElement.clientHeight
+  ) {
     onLoadMore?.();
   }
 }
diff --git a/web/src/beta/utils/localstorage.ts b/web/src/beta/utils/localstorage.ts
index bb9b1ce12..fcd6a92a5 100644
--- a/web/src/beta/utils/localstorage.ts
+++ b/web/src/beta/utils/localstorage.ts
@@ -1,4 +1,7 @@
-export const setLocalStorageData = (localStorageKey: string, storedData: any) => {
+export const setLocalStorageData = (
+  localStorageKey: string,
+  storedData: any,
+) => {
   if (!localStorageKey) return;
 
   localStorage.setItem(localStorageKey, JSON.stringify(storedData));
diff --git a/web/src/beta/utils/moment-timezone.ts b/web/src/beta/utils/moment-timezone.ts
index 640f756f3..1ff6ed164 100644
--- a/web/src/beta/utils/moment-timezone.ts
+++ b/web/src/beta/utils/moment-timezone.ts
@@ -8,7 +8,7 @@ type TimezoneInfo = {
 export const getUniqueTimezones = (timezones: string[]): TimezoneInfo[] => {
   const uniqueTimezones: TimezoneInfo[] = [];
   const seenOffsets = new Set<string>();
-  timezones.forEach(timezone => {
+  timezones.forEach((timezone) => {
     const offset = moment.tz(timezone).utcOffset() / 60;
 
     if (Number.isInteger(offset)) {
diff --git a/web/src/beta/utils/object.ts b/web/src/beta/utils/object.ts
index 998fe595c..641f625a4 100644
--- a/web/src/beta/utils/object.ts
+++ b/web/src/beta/utils/object.ts
@@ -1,4 +1,7 @@
-export function delayedObject<T extends {}>(obj: T, excludedKeys?: string[]): Readonly<T> {
+export function delayedObject<T extends object>(
+  obj: T,
+  excludedKeys?: string[],
+): Readonly<T> {
   const res: any = {};
   const descs = Object.keys(obj).reduce<PropertyDescriptorMap>(
     (a, b) => ({
@@ -52,8 +55,13 @@ export function clone<T>(obj: T): T {
   return obj2;
 }
 
-type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [T[P]] }[Exclude<keyof T, keyof any[]>];
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
+type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [T[P]] }[Exclude<
+  keyof T,
+  keyof any[]
+>];
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I,
+) => void
   ? I
   : never;
 type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;
diff --git a/web/src/beta/utils/raf.ts b/web/src/beta/utils/raf.ts
index f6ae60cfb..9244f4d97 100644
--- a/web/src/beta/utils/raf.ts
+++ b/web/src/beta/utils/raf.ts
@@ -2,7 +2,10 @@ import { easing as tweenEasing, IEasingMap } from "ts-easing";
 
 export type Easing = keyof IEasingMap;
 
-export function interval(callback: (t: number) => boolean, delay?: number): () => void {
+export function interval(
+  callback: (t: number) => boolean,
+  delay?: number,
+): () => void {
   let prev = 0;
   let raf = 0;
   let to = 0;
@@ -34,7 +37,7 @@ export function intervalDuring(
   delay?: number,
 ): () => void {
   if (duration < 0) return () => {};
-  return interval(d => {
+  return interval((d) => {
     const t = Math.min(1, duration === 0 ? 1 : d / duration);
     callback(t);
     return t < 1;
@@ -49,7 +52,7 @@ export function tweenInterval(
 ): () => void {
   const e = typeof easing === "function" ? easing : tweenEasing[easing];
   return intervalDuring(
-    d => {
+    (d) => {
       callback(e(d), d);
     },
     duration,
diff --git a/web/src/beta/utils/time.ts b/web/src/beta/utils/time.ts
index 036c50397..9f11edffc 100644
--- a/web/src/beta/utils/time.ts
+++ b/web/src/beta/utils/time.ts
@@ -1,4 +1,6 @@
-export const convertTime = (time: string | Date | undefined): Date | undefined => {
+export const convertTime = (
+  time: string | Date | undefined,
+): Date | undefined => {
   if (!time) return;
   if (time instanceof Date) {
     return !isNaN(time.getTime()) ? time : undefined;
diff --git a/web/src/beta/utils/use-dnd/drag.ts b/web/src/beta/utils/use-dnd/drag.ts
index b9c003b29..a6911430d 100644
--- a/web/src/beta/utils/use-dnd/drag.ts
+++ b/web/src/beta/utils/use-dnd/drag.ts
@@ -21,8 +21,9 @@ export const useDrag = <T extends ItemType = ItemType>(
       type: item?.type ?? "null",
       item: item ?? { type: "null" },
       canDrag: !!item && !disabled,
-      end: (item, monitor) => end?.(item as Item<T>, monitor.getDropResult() ?? undefined),
-      collect: monitor => ({
+      end: (item, monitor) =>
+        end?.(item as Item<T>, monitor.getDropResult() ?? undefined),
+      collect: (monitor) => ({
         isDragging: monitor.isDragging(),
       }),
     }),
diff --git a/web/src/beta/utils/use-dnd/drop.ts b/web/src/beta/utils/use-dnd/drop.ts
index b8cc40e8e..52be6ae9d 100644
--- a/web/src/beta/utils/use-dnd/drop.ts
+++ b/web/src/beta/utils/use-dnd/drop.ts
@@ -1,5 +1,9 @@
 import { useMemo, useCallback } from "react";
-import { useDrop as useDndDrop, DropTargetHookSpec, DropTargetMonitor } from "react-dnd";
+import {
+  useDrop as useDndDrop,
+  DropTargetHookSpec,
+  DropTargetMonitor,
+} from "react-dnd";
 
 import { Item, ItemType, Dropper } from "./types";
 
@@ -10,7 +14,10 @@ export type Context = {
   canDrop: boolean;
 };
 
-export type DropOptions<T extends ItemType = ItemType, E extends HTMLElement = HTMLElement> = {
+export type DropOptions<
+  T extends ItemType = ItemType,
+  E extends HTMLElement = HTMLElement,
+> = {
   accept: T | T[];
   canDrop?: (item: Item<T>) => boolean;
   hover?: (item: Item<T>, context: Context) => void;
@@ -20,7 +27,10 @@ export type DropOptions<T extends ItemType = ItemType, E extends HTMLElement = H
   wrapperRef?: React.RefObject<E>;
 };
 
-export const useDrop = <T extends ItemType = ItemType, E extends HTMLElement = HTMLElement>({
+export const useDrop = <
+  T extends ItemType = ItemType,
+  E extends HTMLElement = HTMLElement,
+>({
   accept,
   hover,
   canDrop,
@@ -31,7 +41,9 @@ export const useDrop = <T extends ItemType = ItemType, E extends HTMLElement = H
 }: DropOptions<T, E>) => {
   const calcContext = useCallback(
     (monitor: DropTargetMonitor) => {
-      const offset = wrapperRef?.current ? monitor.getClientOffset() : undefined;
+      const offset = wrapperRef?.current
+        ? monitor.getClientOffset()
+        : undefined;
       const wrapperOffset = wrapperRef?.current
         ? wrapperRef.current.getBoundingClientRect()
         : undefined;
@@ -72,8 +84,12 @@ export const useDrop = <T extends ItemType = ItemType, E extends HTMLElement = H
           }
         : undefined,
       canDrop: (item: Item<T>, monitor) =>
-        !disabled && (!shallow || monitor.isOver({ shallow: true })) && (!canDrop || canDrop(item)),
-      drop: drop ? (item: Item<T>, monitor) => drop(item, calcContext(monitor)) : undefined,
+        !disabled &&
+        (!shallow || monitor.isOver({ shallow: true })) &&
+        (!canDrop || canDrop(item)),
+      drop: drop
+        ? (item: Item<T>, monitor) => drop(item, calcContext(monitor))
+        : undefined,
       collect(monitor) {
         const isOver = monitor.isOver({ shallow });
         const canDrop = monitor.canDrop();
@@ -88,6 +104,7 @@ export const useDrop = <T extends ItemType = ItemType, E extends HTMLElement = H
     [accept, calcContext, canDrop, disabled, drop, hover, shallow],
   );
 
-  const [{ isOver, canDrop: canDrop2, isDroppable, isNotDroppable }, ref] = useDndDrop(options);
+  const [{ isOver, canDrop: canDrop2, isDroppable, isNotDroppable }, ref] =
+    useDndDrop(options);
   return { ref, isOver, canDrop: canDrop2, isDroppable, isNotDroppable };
 };
diff --git a/web/src/beta/utils/use-dnd/index.tsx b/web/src/beta/utils/use-dnd/index.tsx
index 106b5f6a5..e91339905 100644
--- a/web/src/beta/utils/use-dnd/index.tsx
+++ b/web/src/beta/utils/use-dnd/index.tsx
@@ -11,10 +11,13 @@ export * from "./drop";
 export const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => (
   <DndProvider
     backend={HTML5Backend}
-    options={{ enableMouseEvents: true, enableTouchEvents: true }}>
+    options={{ enableMouseEvents: true, enableTouchEvents: true }}
+  >
     {children}
   </DndProvider>
 );
 
 export const useDraggingItemType = () =>
-  useDragLayer(monitor => (monitor.isDragging() ? (monitor.getItemType() as ItemType) : null));
+  useDragLayer((monitor) =>
+    monitor.isDragging() ? (monitor.getItemType() as ItemType) : null,
+  );
diff --git a/web/src/beta/utils/use-dnd/types.ts b/web/src/beta/utils/use-dnd/types.ts
index c8e462d8c..73c35f28b 100644
--- a/web/src/beta/utils/use-dnd/types.ts
+++ b/web/src/beta/utils/use-dnd/types.ts
@@ -1,4 +1,9 @@
-export type ItemType = "layerItem" | "layerGroup" | "primitive" | "block" | "null";
+export type ItemType =
+  | "layerItem"
+  | "layerGroup"
+  | "primitive"
+  | "block"
+  | "null";
 
 export type Item<T extends ItemType = ItemType> = {
   null: { type: "null" };
diff --git a/web/src/beta/utils/util.ts b/web/src/beta/utils/util.ts
index 43bccdcc8..990e7a021 100644
--- a/web/src/beta/utils/util.ts
+++ b/web/src/beta/utils/util.ts
@@ -1,6 +1,5 @@
-import { useRef } from "react";
-
 import { Args, Args3, Args2 } from "@reearth/types";
+import { useRef } from "react";
 
 /**
  * Often we want to make an array of keys of an object type,
@@ -11,9 +10,10 @@ export const objKeys = <T>(obj: { [k in keyof T]: 0 }): (keyof T)[] => {
   return Object.keys(obj) as (keyof T)[];
 };
 
-export const isPresent = <V>(v: V | undefined): v is V => typeof v !== "undefined";
+export const isPresent = <V>(v: V | undefined): v is V =>
+  typeof v !== "undefined";
 
-export const partitionObject = <T extends {}, K extends keyof T>(
+export const partitionObject = <T extends object, K extends keyof T>(
   obj: T,
   keys: K[],
 ): [Pick<T, K>, Omit<T, K>] => {
@@ -29,8 +29,13 @@ export const partitionObject = <T extends {}, K extends keyof T>(
   return [a, b];
 };
 
-export const bindFunc = <F extends (a: A, ...args: any[]) => any, A>(f?: F, a?: A) =>
-  isPresent(f) && isPresent(a) ? (...args: Args<F>) => f(a, ...args) : undefined;
+export const bindFunc = <F extends (a: A, ...args: any[]) => any, A>(
+  f?: F,
+  a?: A,
+) =>
+  isPresent(f) && isPresent(a)
+    ? (...args: Args<F>) => f(a, ...args)
+    : undefined;
 
 export const bindFunc2 = <F extends (a: A, b: B, ...args: any[]) => any, A, B>(
   f?: F,
@@ -41,7 +46,12 @@ export const bindFunc2 = <F extends (a: A, b: B, ...args: any[]) => any, A, B>(
     ? (...args: Args2<F>) => f(a, b, ...args)
     : undefined;
 
-export const bindFunc3 = <F extends (a: A, b: B, c: C, ...args: any[]) => any, A, B, C>(
+export const bindFunc3 = <
+  F extends (a: A, b: B, c: C, ...args: any[]) => any,
+  A,
+  B,
+  C,
+>(
   f?: F,
   a?: A,
   b?: B,
diff --git a/web/src/beta/utils/value.ts b/web/src/beta/utils/value.ts
index 987a04034..50f46e3ca 100644
--- a/web/src/beta/utils/value.ts
+++ b/web/src/beta/utils/value.ts
@@ -1,8 +1,7 @@
-import { Color } from "cesium";
-
 import { LayerAppearanceTypes } from "@reearth/core";
 import { ValueType as GQLValueType } from "@reearth/services/gql";
 import { css } from "@reearth/services/theme";
+import { Color } from "cesium";
 
 export type LatLng = {
   lat: number;
@@ -117,7 +116,7 @@ export type ValueTypes = {
   ref: string;
   tiletype: string;
   spacing: Spacing;
-  array: Array;
+  array: any[];
   timeline: Timeline;
 };
 
@@ -187,39 +186,52 @@ export const valueTypeFromGQL = (t: GQLValueType): ValueType => {
 };
 
 export const valueTypeToGQL = (t: ValueType): GQLValueType | undefined => {
-  return (Object.keys(valueTypeMapper) as GQLValueType[]).find(k => valueTypeMapper[k] === t);
+  return (Object.keys(valueTypeMapper) as GQLValueType[]).find(
+    (k) => valueTypeMapper[k] === t,
+  );
 };
 
-export const toGQLSimpleValue = (v: unknown): string | number | boolean | undefined => {
-  return typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : undefined;
+export const toGQLSimpleValue = (
+  v: unknown,
+): string | number | boolean | undefined => {
+  return typeof v === "string" ||
+    typeof v === "number" ||
+    typeof v === "boolean"
+    ? v
+    : undefined;
 };
 
 export const getCSSFontFamily = (f?: string) => {
   return !f
     ? undefined
     : f === "YuGothic"
-    ? `"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic"`
-    : f;
+      ? `"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic"`
+      : f;
 };
 
 export const toCSSFont = (t?: Typography, d?: Typography) => {
   const ff = getCSSFontFamily(t?.fontFamily ?? d?.fontFamily)
     ?.replace("'", '"')
     .trim();
-  return `${t?.italic ?? d?.italic ? "italic " : ""}${
-    t?.bold ?? d?.bold ? "bold " : (t?.fontWeight ?? d?.fontWeight ?? "") + " "
+  return `${(t?.italic ?? d?.italic) ? "italic " : ""}${
+    (t?.bold ?? d?.bold)
+      ? "bold "
+      : (t?.fontWeight ?? d?.fontWeight ?? "") + " "
   }${t?.fontSize ?? d?.fontSize ?? 16}px ${
     ff ? (ff.includes(`"`) ? ff : `"${ff}"`) : "sans-serif"
   }`;
 };
 
-export const toTextDecoration = (t?: Typography) => (t?.underline ? "underline" : "none");
+export const toTextDecoration = (t?: Typography) =>
+  t?.underline ? "underline" : "none";
 
 export const toColor = (c?: string) => {
   if (!c || typeof c !== "string") return undefined;
 
   // support alpha
-  const m = c.match(/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/);
+  const m = c.match(
+    /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/,
+  );
   if (!m) return Color.fromCssColorString(c);
 
   const alpha = parseInt(m[4] ? m[4].repeat(2) : m[2], 16) / 255;
diff --git a/web/src/env.d.ts b/web/src/env.d.ts
index 5fdc82dd2..c915b6af4 100644
--- a/web/src/env.d.ts
+++ b/web/src/env.d.ts
@@ -17,9 +17,9 @@ declare global {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface ImportMetaEnv {}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type ImportMetaEnv = {};
 
-interface ImportMeta {
+type ImportMeta = {
   readonly env: ImportMetaEnv;
-}
+};
diff --git a/web/src/services/README.md b/web/src/services/README.md
index 25b4d0a0f..f216ce8b3 100644
--- a/web/src/services/README.md
+++ b/web/src/services/README.md
@@ -1 +1 @@
-# All code for interfacing with external APIs (in my mind, current `theme`, `state`, `gql`, `auth` directories could move here more or less as-is)
\ No newline at end of file
+# All code for interfacing with external APIs (in my mind, current `theme`, `state`, `gql`, `auth` directories could move here more or less as-is)
diff --git a/web/src/services/api/assetsApi.ts b/web/src/services/api/assetsApi.ts
index e854b9fdc..c5228f097 100644
--- a/web/src/services/api/assetsApi.ts
+++ b/web/src/services/api/assetsApi.ts
@@ -1,12 +1,21 @@
 import { useApolloClient, useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
-import { CreateAssetInput, GetAssetsQueryVariables, GetAssetsQuery } from "@reearth/services/gql";
-import { CREATE_ASSET, GET_ASSETS, REMOVE_ASSET } from "@reearth/services/gql/queries/asset";
+import {
+  CreateAssetInput,
+  GetAssetsQueryVariables,
+  GetAssetsQuery,
+} from "@reearth/services/gql";
+import {
+  CREATE_ASSET,
+  GET_ASSETS,
+  REMOVE_ASSET,
+} from "@reearth/services/gql/queries/asset";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback, useMemo } from "react";
 
-export type AssetNodes = NonNullable<GetAssetsQuery["assets"]["nodes"][number]>[];
+export type AssetNodes = NonNullable<
+  GetAssetsQuery["assets"]["nodes"][number]
+>[];
 
 export default () => {
   const t = useT();
@@ -14,24 +23,40 @@ export default () => {
   const apolloCache = useApolloClient().cache;
 
   const useAssetsQuery = useCallback((input: GetAssetsQueryVariables) => {
-    const { data, loading, networkStatus, fetchMore, ...rest } = useQuery(GET_ASSETS, {
-      variables: input,
-      skip: !input.teamId,
-    });
+    const { data, loading, networkStatus, fetchMore, ...rest } = useQuery(
+      GET_ASSETS,
+      {
+        variables: input,
+        skip: !input.teamId,
+      },
+    );
 
     const assets = useMemo(
-      () => data?.assets.edges?.map(e => e.node) as AssetNodes,
+      () => data?.assets.edges?.map((e) => e.node) as AssetNodes,
       [data?.assets],
     );
 
     const hasMoreAssets = useMemo(
-      () => data?.assets.pageInfo?.hasNextPage || data?.assets.pageInfo?.hasPreviousPage,
+      () =>
+        data?.assets.pageInfo?.hasNextPage ||
+        data?.assets.pageInfo?.hasPreviousPage,
       [data?.assets],
     );
     const isRefetching = useMemo(() => networkStatus < 7, [networkStatus]);
-    const endCursor = useMemo(() => data?.assets.pageInfo?.endCursor, [data?.assets]);
+    const endCursor = useMemo(
+      () => data?.assets.pageInfo?.endCursor,
+      [data?.assets],
+    );
 
-    return { assets, hasMoreAssets, isRefetching, endCursor, loading, fetchMore, ...rest };
+    return {
+      assets,
+      hasMoreAssets,
+      isRefetching,
+      endCursor,
+      loading,
+      fetchMore,
+      ...rest,
+    };
   }, []);
 
   const [createAssetMutation] = useMutation(CREATE_ASSET, {
@@ -43,10 +68,12 @@ export default () => {
       if (!file || !teamId) return;
 
       const results = await Promise.all(
-        Array.from(file).map(f => createAssetMutation({ variables: { teamId, file: f } })),
+        Array.from(file).map((f) =>
+          createAssetMutation({ variables: { teamId, file: f } }),
+        ),
       );
 
-      if (!results || results.some(r => r.errors)) {
+      if (!results || results.some((r) => r.errors)) {
         setNotification({
           type: "error",
           text: t("Failed to add one or more assets."),
@@ -72,10 +99,12 @@ export default () => {
   const useRemoveAssets = useCallback(
     async (assetIds: string[]) => {
       const results = await Promise.all(
-        assetIds.map(assetId => removeAssetMutation({ variables: { assetId } })),
+        assetIds.map((assetId) =>
+          removeAssetMutation({ variables: { assetId } }),
+        ),
       );
 
-      if (!results || results.some(r => r.errors)) {
+      if (!results || results.some((r) => r.errors)) {
         setNotification({
           type: "error",
           text: t("Failed to delete one or more assets."),
@@ -87,7 +116,9 @@ export default () => {
         });
       }
 
-      return { status: !results || results.some(r => r.errors) ? "error" : "success" };
+      return {
+        status: !results || results.some((r) => r.errors) ? "error" : "success",
+      };
     },
     [removeAssetMutation, t, setNotification],
   );
diff --git a/web/src/services/api/featureCollectionApi/index.ts b/web/src/services/api/featureCollectionApi/index.ts
index 5ac5ad105..85578035b 100644
--- a/web/src/services/api/featureCollectionApi/index.ts
+++ b/web/src/services/api/featureCollectionApi/index.ts
@@ -1,6 +1,4 @@
 import { useMutation } from "@apollo/client";
-import { useCallback } from "react";
-
 import { MutationReturn } from "@reearth/services/api/types";
 import {
   AddGeoJsonFeatureInput,
@@ -17,6 +15,7 @@ import {
 } from "@reearth/services/gql/queries/featureCollection";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback } from "react";
 
 import { SceneQueryProps } from "../sceneApi";
 
@@ -33,14 +32,21 @@ export default () => {
     refetchQueries: ["GetScene"],
   });
   const useAddGeoJsonFeature = useCallback(
-    async (input: AddGeoJsonFeatureInput): Promise<MutationReturn<AddGeoJsonFeatureMutation>> => {
-      const { data, errors } = await addGeoJsonFeatureMutation({ variables: { input } });
+    async (
+      input: AddGeoJsonFeatureInput,
+    ): Promise<MutationReturn<AddGeoJsonFeatureMutation>> => {
+      const { data, errors } = await addGeoJsonFeatureMutation({
+        variables: { input },
+      });
       if (errors || !data?.addGeoJSONFeature.id) {
         setNotification({ type: "error", text: t("Failed to add layer.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully added a new layer") });
+      setNotification({
+        type: "success",
+        text: t("Successfully added a new layer"),
+      });
       return { data, status: "success" };
     },
     [addGeoJsonFeatureMutation, setNotification, t],
@@ -55,13 +61,21 @@ export default () => {
       input: UpdateGeoJsonFeatureInput,
     ): Promise<MutationReturn<UpdateGeoJsonFeatureMutation>> => {
       if (!input.layerId) return { status: "error" };
-      const { data, errors } = await updateGeoJsonFeatureMutation({ variables: { input } });
+      const { data, errors } = await updateGeoJsonFeatureMutation({
+        variables: { input },
+      });
       if (errors || !data?.updateGeoJSONFeature) {
-        setNotification({ type: "error", text: t("Failed to update the layer.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update the layer."),
+        });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully updated the layer!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated the layer!"),
+      });
 
       return { data, status: "success" };
     },
@@ -75,13 +89,21 @@ export default () => {
   const useDeleteGeoJSONFeature = useCallback(
     async (input: DeleteGeoJsonFeatureInput) => {
       if (!input.layerId || !input.featureId) return { status: "error" };
-      const { data, errors } = await deleteGeoJsonFeatureMutation({ variables: { input } });
+      const { data, errors } = await deleteGeoJsonFeatureMutation({
+        variables: { input },
+      });
       if (errors || !data?.deleteGeoJSONFeature) {
-        setNotification({ type: "error", text: t("Failed to delete the feature.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to delete the feature."),
+        });
         return { status: "error", errors };
       }
 
-      setNotification({ type: "success", text: t("Successfully deleted the feature!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully deleted the feature!"),
+      });
       return { data, status: "success" };
     },
     [deleteGeoJsonFeatureMutation, t, setNotification],
diff --git a/web/src/services/api/infoboxApi/blocks.ts b/web/src/services/api/infoboxApi/blocks.ts
index 865aefd09..2480971ad 100644
--- a/web/src/services/api/infoboxApi/blocks.ts
+++ b/web/src/services/api/infoboxApi/blocks.ts
@@ -1,6 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import { AVAILABLE_INFOBOX_BLOCK_IDS } from "@reearth/beta/features/Visualizer/Crust/Infobox/constants";
 import {
   AddNlsInfoboxBlockInput,
@@ -23,6 +21,7 @@ import {
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback, useMemo } from "react";
 
 import { Item } from "../propertyApi/utils";
 import { SceneQueryProps } from "../sceneApi";
@@ -64,7 +63,10 @@ export default () => {
         skip: !sceneId,
       });
 
-      const installableInfoboxBlocks = useMemo(() => getInstallableInfoboxBlocks(data), [data]);
+      const installableInfoboxBlocks = useMemo(
+        () => getInstallableInfoboxBlocks(data),
+        [data],
+      );
 
       return { installableInfoboxBlocks, ...rest };
     },
@@ -77,14 +79,21 @@ export default () => {
   >(ADD_NLSINFOBOX_BLOCK, { refetchQueries: ["GetScene"] });
 
   const useCreateInfoboxBlock = useCallback(
-    async (input: AddNlsInfoboxBlockInput): Promise<MutationReturn<AddNlsInfoboxBlockMutation>> => {
-      const { data, errors } = await createInfoboxBlockMutation({ variables: { input } });
+    async (
+      input: AddNlsInfoboxBlockInput,
+    ): Promise<MutationReturn<AddNlsInfoboxBlockMutation>> => {
+      const { data, errors } = await createInfoboxBlockMutation({
+        variables: { input },
+      });
       if (errors || !data?.addNLSInfoboxBlock) {
         setNotification({ type: "error", text: t("Failed to create block.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfullly created a block!") });
+      setNotification({
+        type: "success",
+        text: t("Successfullly created a block!"),
+      });
 
       return { data, status: "success" };
     },
@@ -100,13 +109,18 @@ export default () => {
     async (
       input: RemoveNlsInfoboxBlockInput,
     ): Promise<MutationReturn<RemoveNlsInfoboxBlockMutation>> => {
-      const { data, errors } = await removeInfoboxBlockMutation({ variables: { input } });
+      const { data, errors } = await removeInfoboxBlockMutation({
+        variables: { input },
+      });
       if (errors || !data?.removeNLSInfoboxBlock) {
         setNotification({ type: "error", text: t("Failed to delete block.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "info", text: t("Block was successfully deleted.") });
+      setNotification({
+        type: "info",
+        text: t("Block was successfully deleted."),
+      });
 
       return { data, status: "success" };
     },
@@ -122,13 +136,18 @@ export default () => {
     async (
       input: MoveNlsInfoboxBlockInput,
     ): Promise<MutationReturn<MoveNlsInfoboxBlockMutation>> => {
-      const { data, errors } = await moveInfoboxBlockMutation({ variables: { input } });
+      const { data, errors } = await moveInfoboxBlockMutation({
+        variables: { input },
+      });
       if (errors || !data?.moveNLSInfoboxBlock) {
         setNotification({ type: "error", text: t("Failed to move block.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "info", text: t("Block was successfully moved.") });
+      setNotification({
+        type: "info",
+        text: t("Block was successfully moved."),
+      });
 
       return { data, status: "success" };
     },
@@ -144,13 +163,14 @@ export default () => {
 };
 
 const getInstallableInfoboxBlocks = (rawScene?: GetSceneQuery) => {
-  const scene = rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
+  const scene =
+    rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
   return scene?.plugins
-    .map(p => {
+    .map((p) => {
       const plugin = p.plugin;
       return plugin?.extensions
         .filter(
-          e =>
+          (e) =>
             e.type === PluginExtensionType.InfoboxBlock &&
             (AVAILABLE_INFOBOX_BLOCK_IDS.includes(`reearth/${e.extensionId}`) ||
               plugin.id !== "reearth"),
diff --git a/web/src/services/api/infoboxApi/index.tsx b/web/src/services/api/infoboxApi/index.tsx
index 89d110df0..eb6fba89d 100644
--- a/web/src/services/api/infoboxApi/index.tsx
+++ b/web/src/services/api/infoboxApi/index.tsx
@@ -1,6 +1,4 @@
 import { useMutation } from "@apollo/client";
-import { useCallback } from "react";
-
 import {
   CreateNlsInfoboxInput,
   CreateNlsInfoboxMutation,
@@ -9,6 +7,7 @@ import {
 import { CREATE_NLSINFOBOX } from "@reearth/services/gql/queries/infobox";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback } from "react";
 
 import { SceneQueryProps } from "../sceneApi";
 import { MutationReturn } from "../types";
@@ -26,14 +25,21 @@ export default () => {
     MutationCreateNlsInfoboxArgs
   >(CREATE_NLSINFOBOX, { refetchQueries: ["GetScene"] });
   const useCreateNLSInfobox = useCallback(
-    async (input: CreateNlsInfoboxInput): Promise<MutationReturn<CreateNlsInfoboxMutation>> => {
-      const { data, errors } = await createNLSInfoboxMutation({ variables: { input } });
+    async (
+      input: CreateNlsInfoboxInput,
+    ): Promise<MutationReturn<CreateNlsInfoboxMutation>> => {
+      const { data, errors } = await createNLSInfoboxMutation({
+        variables: { input },
+      });
       if (errors || !data?.createNLSInfobox?.layer?.id) {
         setNotification({ type: "error", text: t("Failed to add layer.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully added a new layer") });
+      setNotification({
+        type: "success",
+        text: t("Successfully added a new layer"),
+      });
 
       return { data, status: "success" };
     },
diff --git a/web/src/services/api/layerStyleApi/index.ts b/web/src/services/api/layerStyleApi/index.ts
index 27837b584..6f9380a02 100644
--- a/web/src/services/api/layerStyleApi/index.ts
+++ b/web/src/services/api/layerStyleApi/index.ts
@@ -1,6 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import { MutationReturn } from "@reearth/services/api/types";
 import {
   AddStyleMutation,
@@ -19,6 +17,7 @@ import {
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback, useMemo } from "react";
 
 import { SceneQueryProps } from "../sceneApi";
 
@@ -30,33 +29,47 @@ export default () => {
   const t = useT();
   const [, setNotification] = useNotification();
 
-  const useGetLayerStylesQuery = useCallback(({ sceneId, lang }: LayerStylesQueryProps) => {
-    const { data, loading, networkStatus, fetchMore, ...rest } = useQuery(GET_SCENE, {
-      variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId,
-    });
-
-    const isRefetching = useMemo(() => networkStatus === 3, [networkStatus]);
-    const layerStyles = useMemo(() => getLayerStyles(data) ?? [], [data]);
+  const useGetLayerStylesQuery = useCallback(
+    ({ sceneId, lang }: LayerStylesQueryProps) => {
+      const { data, loading, networkStatus, fetchMore, ...rest } = useQuery(
+        GET_SCENE,
+        {
+          variables: { sceneId: sceneId ?? "", lang },
+          skip: !sceneId,
+        },
+      );
 
-    return { layerStyles, loading, isRefetching, fetchMore, ...rest };
-  }, []);
+      const isRefetching = useMemo(() => networkStatus === 3, [networkStatus]);
+      const layerStyles = useMemo(() => getLayerStyles(data) ?? [], [data]);
 
-  const [addLayerStyleMutation] = useMutation<AddStyleMutation, MutationAddStyleArgs>(
-    ADD_LAYERSTYLE,
-    {
-      refetchQueries: ["GetScene"],
+      return { layerStyles, loading, isRefetching, fetchMore, ...rest };
     },
+    [],
   );
+
+  const [addLayerStyleMutation] = useMutation<
+    AddStyleMutation,
+    MutationAddStyleArgs
+  >(ADD_LAYERSTYLE, {
+    refetchQueries: ["GetScene"],
+  });
   const useAddLayerStyle = useCallback(
     async (input: AddStyleInput): Promise<MutationReturn<AddStyleMutation>> => {
-      const { data, errors } = await addLayerStyleMutation({ variables: { input } });
+      const { data, errors } = await addLayerStyleMutation({
+        variables: { input },
+      });
       if (errors || !data?.addStyle?.style?.id) {
-        setNotification({ type: "error", text: t("Failed to add layer style.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to add layer style."),
+        });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully added a new layer style!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully added a new layer style!"),
+      });
 
       return { data, status: "success" };
     },
@@ -67,15 +80,25 @@ export default () => {
     refetchQueries: ["GetScene"],
   });
   const useUpdateLayerStyle = useCallback(
-    async (input: UpdateStyleInput): Promise<MutationReturn<UpdateStyleMutation>> => {
+    async (
+      input: UpdateStyleInput,
+    ): Promise<MutationReturn<UpdateStyleMutation>> => {
       if (!input.styleId) return { status: "error" };
-      const { data, errors } = await updateLayerStyleMutation({ variables: { input } });
+      const { data, errors } = await updateLayerStyleMutation({
+        variables: { input },
+      });
       if (errors || !data?.updateStyle) {
-        setNotification({ type: "error", text: t("Failed to update the layerStyle.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update the layerStyle."),
+        });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully updated a the layerStyle!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated a the layerStyle!"),
+      });
 
       return { data, status: "success" };
     },
@@ -86,15 +109,25 @@ export default () => {
     refetchQueries: ["GetScene"],
   });
   const useRemoveLayerStyle = useCallback(
-    async (input: RemoveStyleInput): Promise<MutationReturn<RemoveStyleMutation>> => {
+    async (
+      input: RemoveStyleInput,
+    ): Promise<MutationReturn<RemoveStyleMutation>> => {
       if (!input.styleId) return { status: "error" };
-      const { data, errors } = await removeLayerStyleMutation({ variables: { input } });
+      const { data, errors } = await removeLayerStyleMutation({
+        variables: { input },
+      });
       if (errors || !data?.removeStyle) {
-        setNotification({ type: "error", text: t("Failed to delete the layer style.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to delete the layer style."),
+        });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully deleted the layer style!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully deleted the layer style!"),
+      });
 
       return { data, status: "success" };
     },
diff --git a/web/src/services/api/layerStyleApi/utils.ts b/web/src/services/api/layerStyleApi/utils.ts
index 1f300744e..d4aac0507 100644
--- a/web/src/services/api/layerStyleApi/utils.ts
+++ b/web/src/services/api/layerStyleApi/utils.ts
@@ -7,7 +7,8 @@ export type LayerStyle = {
 };
 
 export const getLayerStyles = (rawScene?: GetSceneQuery) => {
-  const scene = rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
+  const scene =
+    rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
 
   return scene?.styles?.map((s): LayerStyle => {
     return {
diff --git a/web/src/services/api/layersApi/index.ts b/web/src/services/api/layersApi/index.ts
index 893b567e1..4a8bfe0d4 100644
--- a/web/src/services/api/layersApi/index.ts
+++ b/web/src/services/api/layersApi/index.ts
@@ -1,6 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import { MutationReturn } from "@reearth/services/api/types";
 import {
   AddNlsLayerSimpleMutation,
@@ -22,6 +20,7 @@ import {
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback, useMemo } from "react";
 
 import { SceneQueryProps } from "../sceneApi";
 
@@ -33,16 +32,19 @@ export default () => {
   const t = useT();
   const [, setNotification] = useNotification();
 
-  const useGetLayersQuery = useCallback(({ sceneId, lang }: LayerQueryProps) => {
-    const { data, ...rest } = useQuery(GET_SCENE, {
-      variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId,
-    });
+  const useGetLayersQuery = useCallback(
+    ({ sceneId, lang }: LayerQueryProps) => {
+      const { data, ...rest } = useQuery(GET_SCENE, {
+        variables: { sceneId: sceneId ?? "", lang },
+        skip: !sceneId,
+      });
 
-    const nlsLayers = useMemo(() => getLayers(data), [data]);
+      const nlsLayers = useMemo(() => getLayers(data), [data]);
 
-    return { nlsLayers, ...rest };
-  }, []);
+      return { nlsLayers, ...rest };
+    },
+    [],
+  );
 
   const [addNLSLayerSimpleMutation] = useMutation<
     AddNlsLayerSimpleMutation,
@@ -51,65 +53,104 @@ export default () => {
     refetchQueries: ["GetScene"],
   });
   const useAddNLSLayerSimple = useCallback(
-    async (input: AddNlsLayerSimpleInput): Promise<MutationReturn<AddNlsLayerSimpleMutation>> => {
-      const { data, errors } = await addNLSLayerSimpleMutation({ variables: { input } });
+    async (
+      input: AddNlsLayerSimpleInput,
+    ): Promise<MutationReturn<AddNlsLayerSimpleMutation>> => {
+      const { data, errors } = await addNLSLayerSimpleMutation({
+        variables: { input },
+      });
       if (errors || !data?.addNLSLayerSimple?.layers?.id) {
         setNotification({ type: "error", text: t("Failed to add layer.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully added a new layer") });
+      setNotification({
+        type: "success",
+        text: t("Successfully added a new layer"),
+      });
 
       return { data, status: "success" };
     },
     [addNLSLayerSimpleMutation, setNotification, t],
   );
 
-  const [updateNLSLayerMutation] = useMutation(UPDATE_NLSLAYER, { refetchQueries: ["GetScene"] });
+  const [updateNLSLayerMutation] = useMutation(UPDATE_NLSLAYER, {
+    refetchQueries: ["GetScene"],
+  });
   const useUpdateNLSLayer = useCallback(
-    async (input: UpdateNlsLayerInput): Promise<MutationReturn<UpdateNlsLayerMutation>> => {
+    async (
+      input: UpdateNlsLayerInput,
+    ): Promise<MutationReturn<UpdateNlsLayerMutation>> => {
       if (!input.layerId) return { status: "error" };
-      const { data, errors } = await updateNLSLayerMutation({ variables: { input } });
+      const { data, errors } = await updateNLSLayerMutation({
+        variables: { input },
+      });
       if (errors || !data?.updateNLSLayer) {
-        setNotification({ type: "error", text: t("Failed to update the layer.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update the layer."),
+        });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully updated the layer!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated the layer!"),
+      });
 
       return { data, status: "success" };
     },
     [updateNLSLayerMutation, t, setNotification],
   );
 
-  const [removeNLSLayerMutation] = useMutation(REMOVE_NLSLAYER, { refetchQueries: ["GetScene"] });
+  const [removeNLSLayerMutation] = useMutation(REMOVE_NLSLAYER, {
+    refetchQueries: ["GetScene"],
+  });
   const useRemoveNLSLayer = useCallback(
-    async (input: RemoveNlsLayerInput): Promise<MutationReturn<RemoveNlsLayerMutation>> => {
+    async (
+      input: RemoveNlsLayerInput,
+    ): Promise<MutationReturn<RemoveNlsLayerMutation>> => {
       if (!input.layerId) return { status: "error" };
-      const { data, errors } = await removeNLSLayerMutation({ variables: { input } });
+      const { data, errors } = await removeNLSLayerMutation({
+        variables: { input },
+      });
       if (errors || !data?.removeNLSLayer) {
-        setNotification({ type: "error", text: t("Failed to remove the layer.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to remove the layer."),
+        });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully removed the layer!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully removed the layer!"),
+      });
 
       return { data, status: "success" };
     },
     [removeNLSLayerMutation, t, setNotification],
   );
 
-  const [updateCustomPropertiesMutation] = useMutation(UPDATE_CUSTOM_PROPERTY_SCHEMA, {
-    refetchQueries: ["GetScene"],
-  });
+  const [updateCustomPropertiesMutation] = useMutation(
+    UPDATE_CUSTOM_PROPERTY_SCHEMA,
+    {
+      refetchQueries: ["GetScene"],
+    },
+  );
   const useUpdateCustomProperties = useCallback(
     async (
       input: UpdateCustomPropertySchemaInput,
     ): Promise<MutationReturn<UpdateCustomPropertiesMutation>> => {
       if (!input.layerId) return { status: "error" };
-      const { data, errors } = await updateCustomPropertiesMutation({ variables: { input } });
+      const { data, errors } = await updateCustomPropertiesMutation({
+        variables: { input },
+      });
       if (errors || !data?.updateCustomProperties) {
-        setNotification({ type: "error", text: t("Failed to update the custom property schema.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update the custom property schema."),
+        });
 
         return { status: "error", errors };
       }
diff --git a/web/src/services/api/layersApi/utils.ts b/web/src/services/api/layersApi/utils.ts
index ad9c1dd76..1c66ffec0 100644
--- a/web/src/services/api/layersApi/utils.ts
+++ b/web/src/services/api/layersApi/utils.ts
@@ -10,7 +10,12 @@ export type NLSInfobox = {
 
 export type SketchGeometry = {
   type: string;
-  coordinates?: number[] | number[][] | number[][][] | number[][][][] | number[][][][];
+  coordinates?:
+    | number[]
+    | number[][]
+    | number[][][]
+    | number[][][][]
+    | number[][][][];
 };
 
 export type SketchFeature = {
@@ -57,7 +62,7 @@ const getGeometryCoordinates = (geometry: Geometry) => {
 
 const convertGeometry = (geometry: Geometry) => {
   return geometry["__typename"] === "GeometryCollection"
-    ? geometry.geometries.map(g => ({
+    ? geometry.geometries.map((g) => ({
         type: g.type,
         coordinates: getGeometryCoordinates(g),
       }))
@@ -75,7 +80,7 @@ export const convertSketchFeatureCollection = (
   return featureCollection
     ? {
         type: featureCollection.type,
-        features: featureCollection.features.map(f => ({
+        features: featureCollection.features.map((f) => ({
           id: f.id,
           type: f.type,
           properties: f.properties,
@@ -86,7 +91,8 @@ export const convertSketchFeatureCollection = (
 };
 
 export const getLayers = (rawScene?: GetSceneQuery) => {
-  const scene = rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
+  const scene =
+    rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
 
   return scene?.newLayers?.map((l): NLSLayer => {
     return {
diff --git a/web/src/services/api/pluginsApi.ts b/web/src/services/api/pluginsApi.ts
index 182e61d4b..d718f7ab5 100644
--- a/web/src/services/api/pluginsApi.ts
+++ b/web/src/services/api/pluginsApi.ts
@@ -1,6 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import {
   INSTALL_PLUGIN,
   UPGRADE_PLUGIN,
@@ -10,6 +8,7 @@ import {
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT, useLang } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback, useMemo } from "react";
 
 import { WidgetLayout } from "./widgetsApi";
 
@@ -62,13 +61,13 @@ export default () => {
         () =>
           data?.node?.__typename === "Scene"
             ? (data.node.plugins
-                .map(p => {
+                .map((p) => {
                   if (!p.plugin) return;
 
                   return {
                     id: p.plugin.id,
                     name: p.plugin.name,
-                    extensions: p.plugin.extensions.map(e => {
+                    extensions: p.plugin.extensions.map((e) => {
                       return {
                         pluginId: p.plugin?.id,
                         ...e,
@@ -83,7 +82,7 @@ export default () => {
                       : {},
                   };
                 })
-                .filter(p => !!p) as Plugin[])
+                .filter((p) => !!p) as Plugin[])
             : undefined,
         [data?.node],
       );
@@ -160,19 +159,19 @@ export default () => {
 
       const results = await Promise.all(
         files
-          ? Array.from(files).map(f =>
+          ? Array.from(files).map((f) =>
               uploadPluginMutation({
                 variables: { sceneId: sceneId, file: f },
               }),
             )
-          : Array.from([url]).map(u =>
+          : Array.from([url]).map((u) =>
               uploadPluginMutation({
                 variables: { sceneId: sceneId, url: u },
               }),
             ),
       );
 
-      if (!results || results.some(r => r.errors)) {
+      if (!results || results.some((r) => r.errors)) {
         setNotification({
           type: "error",
           text: t("Failed to install plugin."),
diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
index 42f2c82de..5e61bb798 100644
--- a/web/src/services/api/projectApi.ts
+++ b/web/src/services/api/projectApi.ts
@@ -1,6 +1,9 @@
-import { useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
+import {
+  useApolloClient,
+  useLazyQuery,
+  useMutation,
+  useQuery,
+} from "@apollo/client";
 import { type PublishStatus } from "@reearth/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks";
 import { GetProjectsQueryVariables } from "@reearth/services/gql";
 import {
@@ -26,6 +29,7 @@ import {
 } from "@reearth/services/gql/queries/project";
 import { CREATE_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useMemo } from "react";
 
 import { useNotification } from "../state";
 
@@ -62,11 +66,19 @@ export default () => {
       notifyOnNetworkStatusChange: true,
     });
 
-    const projects = useMemo(() => data?.projects?.edges.map(e => e.node), [data?.projects]);
+    const projects = useMemo(
+      () => data?.projects?.edges.map((e) => e.node),
+      [data?.projects],
+    );
 
     const hasMoreProjects = useMemo(
-      () => data?.projects.pageInfo?.hasNextPage || data?.projects.pageInfo?.hasPreviousPage,
-      [data?.projects.pageInfo?.hasNextPage, data?.projects.pageInfo?.hasPreviousPage],
+      () =>
+        data?.projects.pageInfo?.hasNextPage ||
+        data?.projects.pageInfo?.hasPreviousPage,
+      [
+        data?.projects.pageInfo?.hasNextPage,
+        data?.projects.pageInfo?.hasPreviousPage,
+      ],
     );
     const isRefetching = useMemo(() => networkStatus < 7, [networkStatus]);
     const endCursor = useMemo(
@@ -82,7 +94,9 @@ export default () => {
   }, []);
 
   const [createNewProject] = useMutation(CREATE_PROJECT);
-  const [createScene] = useMutation(CREATE_SCENE, { refetchQueries: ["GetProjects"] });
+  const [createScene] = useMutation(CREATE_SCENE, {
+    refetchQueries: ["GetProjects"],
+  });
   const { useCreateStory, useCreateStoryPage } = useStorytellingFetcher();
 
   const useCreateProject = useCallback(
@@ -94,18 +108,22 @@ export default () => {
       description?: string,
       imageUrl?: string,
     ): Promise<MutationReturn<Partial<Project>>> => {
-      const { data: projectResults, errors: projectErrors } = await createNewProject({
-        variables: {
-          teamId: workspaceId,
-          visualizer,
-          name,
-          description: description ?? "",
-          imageUrl: imageUrl ?? "",
-          coreSupport: !!coreSupport,
-        },
-      });
+      const { data: projectResults, errors: projectErrors } =
+        await createNewProject({
+          variables: {
+            teamId: workspaceId,
+            visualizer,
+            name,
+            description: description ?? "",
+            imageUrl: imageUrl ?? "",
+            coreSupport: !!coreSupport,
+          },
+        });
       if (projectErrors || !projectResults?.createProject) {
-        setNotification({ type: "error", text: t("Failed to create project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to create project."),
+        });
 
         return { status: "error" };
       }
@@ -114,7 +132,10 @@ export default () => {
         variables: { projectId: projectResults?.createProject.project.id },
       });
       if (sceneErrors || !sceneResults?.createScene) {
-        setNotification({ type: "error", text: t("Failed to create project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to create project."),
+        });
         return { status: "error" };
       }
 
@@ -124,7 +145,10 @@ export default () => {
         index: 0,
       });
       if (storyErrors || !storyResult?.createStory) {
-        setNotification({ type: "error", text: t("Failed to create project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to create project."),
+        });
         return { status: "error" };
       } else if (storyResult?.createStory?.story.id) {
         const { errors: storyPageErrors } = await useCreateStoryPage({
@@ -141,18 +165,26 @@ export default () => {
         }
       }
 
-      setNotification({ type: "success", text: t("Successfully created project!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully created project!"),
+      });
       return { data: projectResults.createProject.project, status: "success" };
     },
-    [createNewProject, createScene, useCreateStory, t, setNotification, useCreateStoryPage],
+    [
+      createNewProject,
+      createScene,
+      useCreateStory,
+      t,
+      setNotification,
+      useCreateStoryPage,
+    ],
   );
 
-  const [publishProjectMutation, { loading: publishProjectLoading }] = useMutation(
-    PUBLISH_PROJECT,
-    {
+  const [publishProjectMutation, { loading: publishProjectLoading }] =
+    useMutation(PUBLISH_PROJECT, {
       refetchQueries: ["GetProject"],
-    },
-  );
+    });
 
   const usePublishProject = useCallback(
     async (s: PublishStatus, projectId?: string, alias?: string) => {
@@ -166,7 +198,10 @@ export default () => {
 
       if (errors || !data?.publishProject) {
         console.log("GraphQL: Failed to publish project", errors);
-        setNotification({ type: "error", text: t("Failed to publish project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to publish project."),
+        });
 
         return { status: "error" };
       }
@@ -174,13 +209,18 @@ export default () => {
       apolloCache.evict({ fieldName: "projects" });
 
       setNotification({
-        type: s === "limited" ? "success" : s == "published" ? "success" : "info",
+        type:
+          s === "limited" ? "success" : s == "published" ? "success" : "info",
         text:
           s === "limited"
             ? t("Successfully published your scene!")
             : s == "published"
-            ? t("Successfully published your project with search engine indexing!")
-            : t("Successfully unpublished your scene. Now nobody can access your scene."),
+              ? t(
+                  "Successfully published your project with search engine indexing!",
+                )
+              : t(
+                  "Successfully unpublished your scene. Now nobody can access your scene.",
+                ),
       });
       return { data: data.publishProject.project, status: "success" };
     },
@@ -193,18 +233,26 @@ export default () => {
   const useUpdateProject = useCallback(
     async (input: UpdateProjectInput) => {
       if (!input.projectId) return { status: "error" };
-      const { data, errors } = await updateProjectMutation({ variables: { ...input } });
+      const { data, errors } = await updateProjectMutation({
+        variables: { ...input },
+      });
 
       if (errors || !data?.updateProject) {
         console.log("GraphQL: Failed to update project", errors);
-        setNotification({ type: "error", text: t("Failed to update project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update project."),
+        });
 
         return { status: "error" };
       }
 
       apolloCache.evict({ fieldName: "projects" });
 
-      setNotification({ type: "success", text: t("Successfully updated project!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated project!"),
+      });
       return { data: data?.updateProject?.project, status: "success" };
     },
     [apolloCache, updateProjectMutation, t, setNotification],
@@ -216,7 +264,9 @@ export default () => {
   const useArchiveProject = useCallback(
     async (input: ArchiveProjectMutationVariables) => {
       if (!input.projectId) return { status: "error" };
-      const { data, errors } = await archiveProjectMutation({ variables: { ...input } });
+      const { data, errors } = await archiveProjectMutation({
+        variables: { ...input },
+      });
 
       if (errors || !data?.updateProject) {
         console.log("GraphQL: Failed to archive project", errors);
@@ -234,7 +284,9 @@ export default () => {
         type: "success",
         text: input.archived
           ? t("Successfully archive project!")
-          : t("Successfully unarchived the project. You can now edit this project."),
+          : t(
+              "Successfully unarchived the project. You can now edit this project.",
+            ),
       });
       return { status: "success" };
     },
@@ -247,41 +299,60 @@ export default () => {
   const useDeleteProject = useCallback(
     async (input: DeleteProjectInput) => {
       if (!input.projectId) return { status: "error" };
-      const { data, errors } = await deleteProjectMutation({ variables: { ...input } });
+      const { data, errors } = await deleteProjectMutation({
+        variables: { ...input },
+      });
 
       if (errors || !data?.deleteProject) {
         console.log("GraphQL: Failed to delete project", errors);
-        setNotification({ type: "error", text: t("Failed to delete project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to delete project."),
+        });
 
         return { status: "error" };
       }
 
       apolloCache.evict({ fieldName: "projects" });
 
-      setNotification({ type: "success", text: t("Successfully delete project!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully delete project!"),
+      });
       return { status: "success" };
     },
     [apolloCache, deleteProjectMutation, t, setNotification],
   );
 
-  const [updateProjectBasicAuthMutation] = useMutation(UPDATE_PROJECT_BASIC_AUTH, {
-    refetchQueries: ["GetProject"],
-  });
+  const [updateProjectBasicAuthMutation] = useMutation(
+    UPDATE_PROJECT_BASIC_AUTH,
+    {
+      refetchQueries: ["GetProject"],
+    },
+  );
   const useUpdateProjectBasicAuth = useCallback(
     async (input: UpdateProjectBasicAuthMutationVariables) => {
       if (!input.projectId) return { status: "error" };
-      const { data, errors } = await updateProjectBasicAuthMutation({ variables: { ...input } });
+      const { data, errors } = await updateProjectBasicAuthMutation({
+        variables: { ...input },
+      });
 
       if (errors || !data?.updateProject) {
         console.log("GraphQL: Failed to update project", errors);
-        setNotification({ type: "error", text: t("Failed to update project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update project."),
+        });
 
         return { status: "error" };
       }
 
       apolloCache.evict({ fieldName: "projects" });
 
-      setNotification({ type: "success", text: t("Successfully updated project!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated project!"),
+      });
       return { data: data?.updateProject?.project, status: "success" };
     },
     [apolloCache, updateProjectBasicAuthMutation, t, setNotification],
@@ -291,18 +362,26 @@ export default () => {
   const useUpdateProjectAlias = useCallback(
     async (input: UpdateProjectAliasMutationVariables) => {
       if (!input.projectId) return { status: "error" };
-      const { data, errors } = await updateProjectAliasMutation({ variables: { ...input } });
+      const { data, errors } = await updateProjectAliasMutation({
+        variables: { ...input },
+      });
 
       if (errors || !data?.updateProject) {
         console.log("GraphQL: Failed to update project", errors);
-        setNotification({ type: "error", text: t("Failed to update project.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update project."),
+        });
 
         return { status: "error" };
       }
 
       apolloCache.evict({ fieldName: "projects" });
 
-      setNotification({ type: "success", text: t("Successfully updated project!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated project!"),
+      });
       return { data: data?.updateProject?.project, status: "success" };
     },
     [apolloCache, updateProjectAliasMutation, t, setNotification],
diff --git a/web/src/services/api/propertyApi/index.ts b/web/src/services/api/propertyApi/index.ts
index 57b4ac753..79d1ce97d 100644
--- a/web/src/services/api/propertyApi/index.ts
+++ b/web/src/services/api/propertyApi/index.ts
@@ -1,7 +1,10 @@
 import { useMutation } from "@apollo/client";
-import { useCallback } from "react";
-
-import { ValueType, ValueTypes, valueToGQL, valueTypeToGQL } from "@reearth/beta/utils/value";
+import {
+  ValueType,
+  ValueTypes,
+  valueToGQL,
+  valueTypeToGQL,
+} from "@reearth/beta/utils/value";
 import { PropertyItemPayload } from "@reearth/services/gql";
 import {
   UPDATE_PROPERTY_VALUE,
@@ -11,6 +14,7 @@ import {
 } from "@reearth/services/gql/queries/property";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback } from "react";
 
 import { MutationReturn } from "../types";
 
@@ -53,11 +57,17 @@ export default () => {
 
       if (errors || !data?.updatePropertyValue) {
         console.log("GraphQL: Failed to update property", errors);
-        setNotification({ type: "error", text: t("Failed to update property.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update property."),
+        });
 
         return { status: "error" };
       }
-      setNotification({ type: "success", text: t("Successfully updated the property value!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated the property value!"),
+      });
       return {
         data: data.updatePropertyValue.property,
         status: "success",
@@ -70,7 +80,9 @@ export default () => {
     async (
       propertyId: string,
       schemaGroupId: string,
-    ): Promise<MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>> => {
+    ): Promise<
+      MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>
+    > => {
       const { data, errors } = await addPropertyItem({
         variables: {
           propertyId,
@@ -81,7 +93,10 @@ export default () => {
 
       if (errors || !data?.addPropertyItem?.property?.id) {
         console.log("GraphQL: Failed to update property", errors);
-        setNotification({ type: "error", text: t("Failed to update property.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update property."),
+        });
 
         return { data: undefined, status: "error" };
       }
@@ -99,7 +114,9 @@ export default () => {
       propertyId: string,
       schemaGroupId: string,
       itemId: string,
-    ): Promise<MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>> => {
+    ): Promise<
+      MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>
+    > => {
       const { data, errors } = await removePropertyItem({
         variables: {
           propertyId,
@@ -111,7 +128,10 @@ export default () => {
 
       if (errors || !data?.removePropertyItem?.property?.id) {
         console.log("GraphQL: Failed to update property", errors);
-        setNotification({ type: "error", text: t("Failed to update property.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update property."),
+        });
 
         return { data: undefined, status: "error" };
       }
@@ -130,7 +150,9 @@ export default () => {
       schemaGroupId: string,
       itemId: string,
       index: number,
-    ): Promise<MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>> => {
+    ): Promise<
+      MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>
+    > => {
       const { data, errors } = await movePropertyItem({
         variables: {
           propertyId,
@@ -143,7 +165,10 @@ export default () => {
 
       if (errors || !data?.movePropertyItem?.property?.id) {
         console.log("GraphQL: Failed to update property", errors);
-        setNotification({ type: "error", text: t("Failed to update property.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update property."),
+        });
 
         return { data: undefined, status: "error" };
       }
diff --git a/web/src/services/api/propertyApi/utils.ts b/web/src/services/api/propertyApi/utils.ts
index 09e58eb41..7ede62e44 100644
--- a/web/src/services/api/propertyApi/utils.ts
+++ b/web/src/services/api/propertyApi/utils.ts
@@ -1,4 +1,9 @@
-import { ValueType, ValueTypes, valueFromGQL, valueTypeFromGQL } from "@reearth/beta/utils/value";
+import {
+  ValueType,
+  ValueTypes,
+  valueFromGQL,
+  valueTypeFromGQL,
+} from "@reearth/beta/utils/value";
 
 import {
   Maybe,
@@ -67,12 +72,13 @@ export type SchemaFieldType<T extends ValueType = ValueType> = {
   max?: number;
 };
 
-export type SchemaField<T extends ValueType = ValueType> = SchemaFieldType<T> & {
-  only?: {
-    field: string;
-    value: string | boolean;
+export type SchemaField<T extends ValueType = ValueType> =
+  SchemaFieldType<T> & {
+    only?: {
+      field: string;
+      value: string | boolean;
+    };
   };
-};
 
 export type ItemCommon = {
   id?: string;
@@ -127,9 +133,11 @@ export const convert = (
   } = property;
 
   return schemaGroups
-    .map(g => {
-      const item = items.find(i => i.schemaGroupId === g.schemaGroupId);
-      const mergedGroup = merged?.groups.find(i => i.schemaGroupId === g.schemaGroupId);
+    .map((g) => {
+      const item = items.find((i) => i.schemaGroupId === g.schemaGroupId);
+      const mergedGroup = merged?.groups.find(
+        (i) => i.schemaGroupId === g.schemaGroupId,
+      );
       return toItem(g, item, mergedGroup);
     })
     .filter((g): g is Item => !!g);
@@ -138,11 +146,19 @@ export const convert = (
 const toItem = (
   schemaGroup: PropertySchemaGroupFragmentFragment,
   item?: PropertyItemFragmentFragment,
-  merged?: MergedPropertyGroupFragmentFragment | MergedPropertyGroupCommonFragmentFragment,
+  merged?:
+    | MergedPropertyGroupFragmentFragment
+    | MergedPropertyGroupCommonFragmentFragment,
 ): Item | undefined => {
   const common: Pick<
     Item,
-    "id" | "schemaGroup" | "title" | "collection" | "only" | "schemaFields" | "representativeField"
+    | "id"
+    | "schemaGroup"
+    | "title"
+    | "collection"
+    | "only"
+    | "schemaFields"
+    | "representativeField"
   > = {
     id: item?.id,
     schemaGroup: schemaGroup.schemaGroupId,
@@ -162,7 +178,7 @@ const toItem = (
           name: f.translatedTitle,
           description: f.translatedDescription,
           only: toCond(f.isAvailableIf),
-          choices: f.choices?.map(c => ({
+          choices: f.choices?.map((c) => ({
             key: c.key,
             label: c.translatedTitle,
           })),
@@ -176,13 +192,16 @@ const toItem = (
   };
 
   if (schemaGroup.isList) {
-    const items = (item && "groups" in item ? item.groups : []).map((item2, i): GroupListItem => {
-      const mergedGroup = merged && "groups" in merged ? merged.groups[i] : undefined;
-      return {
-        id: item2.id,
-        fields: toFields(schemaGroup, item2, mergedGroup),
-      };
-    });
+    const items = (item && "groups" in item ? item.groups : []).map(
+      (item2, i): GroupListItem => {
+        const mergedGroup =
+          merged && "groups" in merged ? merged.groups[i] : undefined;
+        return {
+          id: item2.id,
+          fields: toFields(schemaGroup, item2, mergedGroup),
+        };
+      },
+    );
     return {
       ...common,
       items,
@@ -198,18 +217,22 @@ const toItem = (
 const toFields = (
   schemaGroup: PropertySchemaGroupFragmentFragment,
   item?: PropertyItemFragmentFragment,
-  merged?: MergedPropertyGroupFragmentFragment | MergedPropertyGroupCommonFragmentFragment,
+  merged?:
+    | MergedPropertyGroupFragmentFragment
+    | MergedPropertyGroupCommonFragmentFragment,
 ) =>
   schemaGroup.fields
     .map(
-      f =>
+      (f) =>
         [
           f,
-          item && "fields" in item ? item.fields.find(f2 => f2.fieldId === f.fieldId) : undefined,
-          merged?.fields.find(f2 => f2.fieldId === f.fieldId),
+          item && "fields" in item
+            ? item.fields.find((f2) => f2.fieldId === f.fieldId)
+            : undefined,
+          merged?.fields.find((f2) => f2.fieldId === f.fieldId),
         ] as const,
     )
-    .map(f => toField(f[0], f[1], f[2]))
+    .map((f) => toField(f[0], f[1], f[2]))
     .filter((f): f is Field => !!f);
 
 const toField = (
@@ -217,7 +240,10 @@ const toField = (
   field?: Pick<PropertyField, "fieldId" | "value"> & {
     links?: Links;
   },
-  merged?: Pick<MergedPropertyField, "fieldId" | "actualValue" | "overridden"> & {
+  merged?: Pick<
+    MergedPropertyField,
+    "fieldId" | "actualValue" | "overridden"
+  > & {
     links?: Links;
   },
 ): Field | undefined => {
@@ -255,7 +281,9 @@ const toField = (
   };
 };
 
-export const toUi = (ui: PropertySchemaFieldUi | null | undefined): SchemaField["ui"] => {
+export const toUi = (
+  ui: PropertySchemaFieldUi | null | undefined,
+): SchemaField["ui"] => {
   switch (ui) {
     case PropertySchemaFieldUi.Color:
       return "color";
diff --git a/web/src/services/api/sceneApi.ts b/web/src/services/api/sceneApi.ts
index 651ffb905..0dc9fdf99 100644
--- a/web/src/services/api/sceneApi.ts
+++ b/web/src/services/api/sceneApi.ts
@@ -1,13 +1,18 @@
 import { useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
+import { useCallback, useMemo } from "react";
 
 import { Scene as GqlScene } from "../gql";
 
 import { PluginExtensionType } from "./pluginsApi";
 
-export type ScenePropertyCollection = "main" | "tiles" | "terrain" | "globe" | "sky" | "camera";
+export type ScenePropertyCollection =
+  | "main"
+  | "tiles"
+  | "terrain"
+  | "globe"
+  | "sky"
+  | "camera";
 
 export type ScenePlugin = {
   id?: string;
diff --git a/web/src/services/api/storytellingApi/blocks.ts b/web/src/services/api/storytellingApi/blocks.ts
index 1e329c40e..5a73fcb25 100644
--- a/web/src/services/api/storytellingApi/blocks.ts
+++ b/web/src/services/api/storytellingApi/blocks.ts
@@ -1,6 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import { MutationReturn } from "@reearth/services/api/types";
 import {
   CreateStoryBlockInput,
@@ -23,6 +21,7 @@ import {
 } from "@reearth/services/gql/queries/storytelling";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
+import { useCallback, useMemo } from "react";
 
 import { Item, convert } from "../propertyApi/utils";
 import { SceneQueryProps } from "../sceneApi";
@@ -56,16 +55,22 @@ export default () => {
   const [, setNotification] = useNotification();
   const t = useT();
 
-  const useInstallableStoryBlocksQuery = useCallback(({ sceneId, lang }: StoryBlockQueryProps) => {
-    const { data, ...rest } = useQuery(GET_SCENE, {
-      variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId,
-    });
+  const useInstallableStoryBlocksQuery = useCallback(
+    ({ sceneId, lang }: StoryBlockQueryProps) => {
+      const { data, ...rest } = useQuery(GET_SCENE, {
+        variables: { sceneId: sceneId ?? "", lang },
+        skip: !sceneId,
+      });
 
-    const installableStoryBlocks = useMemo(() => getInstallableStoryBlocks(data), [data]);
+      const installableStoryBlocks = useMemo(
+        () => getInstallableStoryBlocks(data),
+        [data],
+      );
 
-    return { installableStoryBlocks, ...rest };
-  }, []);
+      return { installableStoryBlocks, ...rest };
+    },
+    [],
+  );
 
   const useInstalledStoryBlocksQuery = useCallback(
     ({
@@ -98,14 +103,21 @@ export default () => {
   >(CREATE_STORY_BLOCK, { refetchQueries: ["GetScene"] });
 
   const useCreateStoryBlock = useCallback(
-    async (input: CreateStoryBlockInput): Promise<MutationReturn<CreateStoryBlockMutation>> => {
-      const { data, errors } = await createStoryBlockMutation({ variables: { input } });
+    async (
+      input: CreateStoryBlockInput,
+    ): Promise<MutationReturn<CreateStoryBlockMutation>> => {
+      const { data, errors } = await createStoryBlockMutation({
+        variables: { input },
+      });
       if (errors || !data?.createStoryBlock) {
         setNotification({ type: "error", text: t("Failed to create block.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfullly created a block!") });
+      setNotification({
+        type: "success",
+        text: t("Successfullly created a block!"),
+      });
 
       return { data, status: "success" };
     },
@@ -118,34 +130,48 @@ export default () => {
   >(REMOVE_STORY_BLOCK, { refetchQueries: ["GetScene"] });
 
   const useDeleteStoryBlock = useCallback(
-    async (input: RemoveStoryBlockInput): Promise<MutationReturn<RemoveStoryBlockMutation>> => {
-      const { data, errors } = await removeStoryBlockMutation({ variables: { input } });
+    async (
+      input: RemoveStoryBlockInput,
+    ): Promise<MutationReturn<RemoveStoryBlockMutation>> => {
+      const { data, errors } = await removeStoryBlockMutation({
+        variables: { input },
+      });
       if (errors || !data?.removeStoryBlock) {
         setNotification({ type: "error", text: t("Failed to delete block.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "info", text: t("Block was successfully deleted.") });
+      setNotification({
+        type: "info",
+        text: t("Block was successfully deleted."),
+      });
 
       return { data, status: "success" };
     },
     [removeStoryBlockMutation, setNotification, t],
   );
 
-  const [moveStoryBlockMutation] = useMutation<MoveStoryBlockMutation, MutationMoveStoryBlockArgs>(
-    MOVE_STORY_BLOCK,
-    { refetchQueries: ["GetScene"] },
-  );
+  const [moveStoryBlockMutation] = useMutation<
+    MoveStoryBlockMutation,
+    MutationMoveStoryBlockArgs
+  >(MOVE_STORY_BLOCK, { refetchQueries: ["GetScene"] });
 
   const useMoveStoryBlock = useCallback(
-    async (input: MoveStoryBlockInput): Promise<MutationReturn<MoveStoryBlockMutation>> => {
-      const { data, errors } = await moveStoryBlockMutation({ variables: { input } });
+    async (
+      input: MoveStoryBlockInput,
+    ): Promise<MutationReturn<MoveStoryBlockMutation>> => {
+      const { data, errors } = await moveStoryBlockMutation({
+        variables: { input },
+      });
       if (errors || !data?.moveStoryBlock) {
         setNotification({ type: "error", text: t("Failed to move block.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "info", text: t("Block was successfully moved.") });
+      setNotification({
+        type: "info",
+        text: t("Block was successfully moved."),
+      });
 
       return { data, status: "success" };
     },
@@ -161,12 +187,13 @@ export default () => {
 };
 
 const getInstallableStoryBlocks = (rawScene?: GetSceneQuery) => {
-  const scene = rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
+  const scene =
+    rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
   return scene?.plugins
-    .map(p => {
+    .map((p) => {
       const plugin = p.plugin;
       return plugin?.extensions
-        .filter(e => e.type === PluginExtensionType.StoryBlock)
+        .filter((e) => e.type === PluginExtensionType.StoryBlock)
         .map((e): InstallableStoryBlock => {
           return {
             name: e.translatedName ?? e.name,
@@ -189,14 +216,19 @@ export const getInstalledStoryBlocks = (
   pageId?: string,
 ): InstalledStoryBlock[] | undefined => {
   if (!rawScene?.node || !storyId || !pageId) return;
-  const scene = rawScene.node.__typename === "Scene" ? rawScene.node : undefined;
+  const scene =
+    rawScene.node.__typename === "Scene" ? rawScene.node : undefined;
 
-  const page = scene?.stories.find(s => s.id === storyId)?.pages.find(p => p.id === pageId);
+  const page = scene?.stories
+    .find((s) => s.id === storyId)
+    ?.pages.find((p) => p.id === pageId);
 
   const installableStoryBlocks = getInstallableStoryBlocks(rawScene);
 
-  return page?.blocks.map(b => {
-    const block = installableStoryBlocks?.find(isb => isb.extensionId === b.extensionId);
+  return page?.blocks.map((b) => {
+    const block = installableStoryBlocks?.find(
+      (isb) => isb.extensionId === b.extensionId,
+    );
 
     return {
       id: b.id,
diff --git a/web/src/services/api/storytellingApi/index.ts b/web/src/services/api/storytellingApi/index.ts
index f23579576..7d6110e3d 100644
--- a/web/src/services/api/storytellingApi/index.ts
+++ b/web/src/services/api/storytellingApi/index.ts
@@ -1,6 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import { PublishStatus } from "@reearth/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks";
 import { MutationReturn } from "@reearth/services/api/types";
 import {
@@ -16,6 +14,7 @@ import {
   UPDATE_STORY,
 } from "@reearth/services/gql/queries/storytelling";
 import { useT } from "@reearth/services/i18n";
+import { useCallback, useMemo } from "react";
 
 import { useNotification } from "../../state";
 import { SceneQueryProps } from "../sceneApi";
@@ -42,42 +41,58 @@ export default () => {
     return { stories, ...rest };
   }, []);
 
-  const [createStoryMutation] = useMutation<CreateStoryMutation, MutationCreateStoryArgs>(
-    CREATE_STORY,
-  );
+  const [createStoryMutation] = useMutation<
+    CreateStoryMutation,
+    MutationCreateStoryArgs
+  >(CREATE_STORY);
   const useCreateStory = useCallback(
-    async (input: CreateStoryInput): Promise<MutationReturn<CreateStoryMutation>> => {
-      const { data, errors } = await createStoryMutation({ variables: { input } });
+    async (
+      input: CreateStoryInput,
+    ): Promise<MutationReturn<CreateStoryMutation>> => {
+      const { data, errors } = await createStoryMutation({
+        variables: { input },
+      });
       if (errors || !data?.createStory?.story?.id) {
         setNotification({ type: "error", text: t("Failed to create story.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully created a story!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully created a story!"),
+      });
 
       return { data, status: "success" };
     },
     [createStoryMutation, setNotification, t],
   );
 
-  const [updateStoryMutation] = useMutation(UPDATE_STORY, { refetchQueries: ["GetScene"] });
+  const [updateStoryMutation] = useMutation(UPDATE_STORY, {
+    refetchQueries: ["GetScene"],
+  });
   const useUpdateStory = useCallback(
     async (input: UpdateStoryInput) => {
       if (!input.storyId) return { status: "error" };
-      const { data, errors } = await updateStoryMutation({ variables: { input } });
+      const { data, errors } = await updateStoryMutation({
+        variables: { input },
+      });
       if (errors || !data?.updateStory) {
         setNotification({ type: "error", text: t("Failed to update story.") });
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfully updated a story!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully updated a story!"),
+      });
 
       return { data, status: "success" };
     },
     [updateStoryMutation, t, setNotification],
   );
 
-  const [publishStoryMutation, { loading: publishStoryLoading }] = useMutation(PUBLISH_STORY);
+  const [publishStoryMutation, { loading: publishStoryLoading }] =
+    useMutation(PUBLISH_STORY);
 
   const usePublishStory = useCallback(
     async (s: PublishStatus, storyId?: string, alias?: string) => {
@@ -96,21 +111,30 @@ export default () => {
       }
 
       setNotification({
-        type: s === "limited" ? "success" : s == "published" ? "success" : "info",
+        type:
+          s === "limited" ? "success" : s == "published" ? "success" : "info",
         text:
           s === "limited"
             ? t("Successfully published your story!")
             : s == "published"
-            ? t("Successfully published your story with search engine indexing!")
-            : t("Successfully unpublished your story. Now nobody can access your story."),
+              ? t(
+                  "Successfully published your story with search engine indexing!",
+                )
+              : t(
+                  "Successfully unpublished your story. Now nobody can access your story.",
+                ),
       });
       return { data: data.publishStory.story, status: "success" };
     },
     [publishStoryMutation, t, setNotification],
   );
 
-  const { useCreateStoryPage, useDeleteStoryPage, useMoveStoryPage, useUpdateStoryPage } =
-    usePages();
+  const {
+    useCreateStoryPage,
+    useDeleteStoryPage,
+    useMoveStoryPage,
+    useUpdateStoryPage,
+  } = usePages();
 
   const {
     useInstallableStoryBlocksQuery,
diff --git a/web/src/services/api/storytellingApi/pages.ts b/web/src/services/api/storytellingApi/pages.ts
index 29e0d93e0..c7823d44e 100644
--- a/web/src/services/api/storytellingApi/pages.ts
+++ b/web/src/services/api/storytellingApi/pages.ts
@@ -1,6 +1,4 @@
 import { useMutation } from "@apollo/client";
-import { useCallback } from "react";
-
 import { MutationReturn } from "@reearth/services/api/types";
 import {
   CreateStoryPageInput,
@@ -24,6 +22,7 @@ import {
   UPDATE_STORY_PAGE,
 } from "@reearth/services/gql/queries/storytelling";
 import { useT } from "@reearth/services/i18n";
+import { useCallback } from "react";
 
 import { useNotification } from "../../state";
 
@@ -39,7 +38,9 @@ export default () => {
   >(CREATE_STORY_PAGE, { refetchQueries: ["GetScene"] });
 
   const useCreateStoryPage = useCallback(
-    async (input: CreateStoryPageInput): Promise<MutationReturn<CreateStoryPageMutation>> => {
+    async (
+      input: CreateStoryPageInput,
+    ): Promise<MutationReturn<CreateStoryPageMutation>> => {
       const { data, errors } = await createStoryPageMutation({
         variables: {
           input,
@@ -50,7 +51,10 @@ export default () => {
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfullly created a page!") });
+      setNotification({
+        type: "success",
+        text: t("Successfullly created a page!"),
+      });
 
       return { data, status: "success" };
     },
@@ -63,7 +67,9 @@ export default () => {
   >(DELETE_STORY_PAGE, { refetchQueries: ["GetScene"] });
 
   const useDeleteStoryPage = useCallback(
-    async (input: DeleteStoryPageInput): Promise<MutationReturn<DeleteStoryPageMutation>> => {
+    async (
+      input: DeleteStoryPageInput,
+    ): Promise<MutationReturn<DeleteStoryPageMutation>> => {
       const { data, errors } = await deleteStoryPageMutation({
         variables: {
           input,
@@ -74,20 +80,25 @@ export default () => {
 
         return { status: "error", errors };
       }
-      setNotification({ type: "info", text: t("Page was successfully deleted.") });
+      setNotification({
+        type: "info",
+        text: t("Page was successfully deleted."),
+      });
 
       return { data, status: "success" };
     },
     [deleteStoryPageMutation, setNotification, t],
   );
 
-  const [moveStoryPageMutation] = useMutation<MoveStoryPageMutation, MutationMoveStoryPageArgs>(
-    MOVE_STORY_PAGE,
-    { refetchQueries: ["GetScene"] },
-  );
+  const [moveStoryPageMutation] = useMutation<
+    MoveStoryPageMutation,
+    MutationMoveStoryPageArgs
+  >(MOVE_STORY_PAGE, { refetchQueries: ["GetScene"] });
 
   const useMoveStoryPage = useCallback(
-    async (input: MoveStoryPageInput): Promise<MutationReturn<MoveStoryPageMutation>> => {
+    async (
+      input: MoveStoryPageInput,
+    ): Promise<MutationReturn<MoveStoryPageMutation>> => {
       const { data, errors } = await moveStoryPageMutation({
         variables: {
           input,
@@ -98,7 +109,10 @@ export default () => {
 
         return { status: "error", errors };
       }
-      setNotification({ type: "info", text: t("Page was successfully moved.") });
+      setNotification({
+        type: "info",
+        text: t("Page was successfully moved."),
+      });
 
       return { data, status: "success" };
     },
@@ -111,7 +125,9 @@ export default () => {
   >(UPDATE_STORY_PAGE, { refetchQueries: ["GetScene"] });
 
   const useUpdateStoryPage = useCallback(
-    async (input: UpdateStoryPageInput): Promise<MutationReturn<UpdateStoryPageMutation>> => {
+    async (
+      input: UpdateStoryPageInput,
+    ): Promise<MutationReturn<UpdateStoryPageMutation>> => {
       const { data, errors } = await updateStoryPageMutation({
         variables: {
           input,
@@ -122,7 +138,10 @@ export default () => {
 
         return { status: "error", errors };
       }
-      setNotification({ type: "success", text: t("Successfullly updated a page!") });
+      setNotification({
+        type: "success",
+        text: t("Successfullly updated a page!"),
+      });
 
       return { data, status: "success" };
     },
diff --git a/web/src/services/api/storytellingApi/utils.ts b/web/src/services/api/storytellingApi/utils.ts
index 2110f3181..4bbfaae58 100644
--- a/web/src/services/api/storytellingApi/utils.ts
+++ b/web/src/services/api/storytellingApi/utils.ts
@@ -44,21 +44,22 @@ export type Story = {
 };
 
 export const getStories = (rawScene?: GetSceneQuery) => {
-  const scene = rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
-  return scene?.stories.map(s => {
+  const scene =
+    rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
+  return scene?.stories.map((s) => {
     return {
       ...s,
       publishmentStatus: s.publishmentStatus,
       panelPosition: s.panelPosition,
       bgColor: s.bgColor,
-      pages: s.pages.map(p => {
+      pages: s.pages.map((p) => {
         return {
           ...p,
           property: {
             id: p.property?.id,
             items: convert(p.property, null),
           },
-          blocks: p.blocks.map(b => {
+          blocks: p.blocks.map((b) => {
             return {
               ...b,
               property: {
diff --git a/web/src/services/api/teams/index.ts b/web/src/services/api/teams/index.ts
index 12381aa33..92c847b7c 100644
--- a/web/src/services/api/teams/index.ts
+++ b/web/src/services/api/teams/index.ts
@@ -1,11 +1,16 @@
 import * as Apollo from "@apollo/client";
-
-import { GetTeamsQuery, GetTeamsQueryVariables } from "@reearth/services/gql/__gen__/graphql";
+import {
+  GetTeamsQuery,
+  GetTeamsQueryVariables,
+} from "@reearth/services/gql/__gen__/graphql";
 import { GetTeamsDocument } from "@reearth/services/gql/queries/teams";
 
 export function useGetTeamsQuery(
   baseOptions?: Apollo.QueryHookOptions<GetTeamsQuery, GetTeamsQueryVariables>,
 ) {
   const options = { ...baseOptions };
-  return Apollo.useQuery<GetTeamsQuery, GetTeamsQueryVariables>(GetTeamsDocument, options);
+  return Apollo.useQuery<GetTeamsQuery, GetTeamsQueryVariables>(
+    GetTeamsDocument,
+    options,
+  );
 }
diff --git a/web/src/services/api/toGqlStatus.ts b/web/src/services/api/toGqlStatus.ts
index e07027bd7..0326a8030 100644
--- a/web/src/services/api/toGqlStatus.ts
+++ b/web/src/services/api/toGqlStatus.ts
@@ -5,6 +5,6 @@ export const toGqlStatus = (status?: PublishStatus) => {
   return status === "limited"
     ? PublishmentStatus.Limited
     : status == "published"
-    ? PublishmentStatus.Public
-    : PublishmentStatus.Private;
+      ? PublishmentStatus.Public
+      : PublishmentStatus.Private;
 };
diff --git a/web/src/services/api/types.ts b/web/src/services/api/types.ts
index 19153dd3b..ed142ce50 100644
--- a/web/src/services/api/types.ts
+++ b/web/src/services/api/types.ts
@@ -8,5 +8,5 @@ export type QueryReturn<T> = {
 export type MutationReturn<T> = {
   data?: T | null | undefined;
   status: "success" | "error";
-  errors?: ReadonlyArray<GraphQLFormattedError>;
+  errors?: readonly GraphQLFormattedError[];
 };
diff --git a/web/src/services/api/widgetsApi/index.ts b/web/src/services/api/widgetsApi/index.ts
index ba489e589..363baffb1 100644
--- a/web/src/services/api/widgetsApi/index.ts
+++ b/web/src/services/api/widgetsApi/index.ts
@@ -1,6 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback, useMemo } from "react";
-
 import {
   SceneWidget,
   WidgetAreaAlign,
@@ -17,6 +15,7 @@ import {
 } from "@reearth/services/gql/queries/widget";
 import { useT } from "@reearth/services/i18n";
 import { WidgetAreaState, useNotification } from "@reearth/services/state";
+import { useCallback, useMemo } from "react";
 
 import { SceneQueryProps } from "../sceneApi";
 import { MutationReturn } from "../types";
@@ -56,32 +55,46 @@ export default () => {
   const t = useT();
   const [, setNotification] = useNotification();
 
-  const useInstallableWidgetsQuery = useCallback(({ sceneId, lang }: WidgetQueryProps) => {
-    const { data, ...rest } = useQuery(GET_SCENE, {
-      variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId,
-    });
+  const useInstallableWidgetsQuery = useCallback(
+    ({ sceneId, lang }: WidgetQueryProps) => {
+      const { data, ...rest } = useQuery(GET_SCENE, {
+        variables: { sceneId: sceneId ?? "", lang },
+        skip: !sceneId,
+      });
 
-    const installableWidgets = useMemo(() => getInstallableWidgets(data), [data]);
+      const installableWidgets = useMemo(
+        () => getInstallableWidgets(data),
+        [data],
+      );
 
-    return { installableWidgets, ...rest };
-  }, []);
+      return { installableWidgets, ...rest };
+    },
+    [],
+  );
 
-  const useInstalledWidgetsQuery = useCallback(({ sceneId, lang }: WidgetQueryProps) => {
-    const { data, ...rest } = useQuery(GET_SCENE, {
-      variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId,
-    });
+  const useInstalledWidgetsQuery = useCallback(
+    ({ sceneId, lang }: WidgetQueryProps) => {
+      const { data, ...rest } = useQuery(GET_SCENE, {
+        variables: { sceneId: sceneId ?? "", lang },
+        skip: !sceneId,
+      });
 
-    const installedWidgets = useMemo(() => getInstalledWidgets(data), [data]);
+      const installedWidgets = useMemo(() => getInstalledWidgets(data), [data]);
 
-    return { installedWidgets, ...rest };
-  }, []);
+      return { installedWidgets, ...rest };
+    },
+    [],
+  );
 
-  const [addWidgetMutation] = useMutation(ADD_WIDGET, { refetchQueries: ["GetScene"] });
+  const [addWidgetMutation] = useMutation(ADD_WIDGET, {
+    refetchQueries: ["GetScene"],
+  });
 
   const useAddWidget = useCallback(
-    async (sceneId?: string, id?: string): Promise<MutationReturn<Partial<Widget>>> => {
+    async (
+      sceneId?: string,
+      id?: string,
+    ): Promise<MutationReturn<Partial<Widget>>> => {
       if (!sceneId || !id)
         return {
           status: "error",
@@ -107,7 +120,9 @@ export default () => {
     [addWidgetMutation, setNotification, t],
   );
 
-  const [updateWidget] = useMutation(UPDATE_WIDGET, { refetchQueries: ["GetScene"] });
+  const [updateWidget] = useMutation(UPDATE_WIDGET, {
+    refetchQueries: ["GetScene"],
+  });
 
   const useUpdateWidget = useCallback(
     async (
@@ -116,7 +131,9 @@ export default () => {
       sceneId?: string,
     ) => {
       if (!sceneId) {
-        console.log("GraphQL: Failed to update widget because there is no sceneId provided");
+        console.log(
+          "GraphQL: Failed to update widget because there is no sceneId provided",
+        );
         setNotification({ type: "error", text: t("Failed to update widget.") });
         return {
           status: "error",
@@ -131,7 +148,8 @@ export default () => {
           location: update.location
             ? {
                 zone: update.location.zone?.toUpperCase() as WidgetZoneType,
-                section: update.location.section?.toUpperCase() as WidgetSectionType,
+                section:
+                  update.location.section?.toUpperCase() as WidgetSectionType,
                 area: update.location.area?.toUpperCase() as WidgetAreaType,
               }
             : undefined,
@@ -155,7 +173,9 @@ export default () => {
     [updateWidget, setNotification, t],
   );
 
-  const [removeWidget] = useMutation(REMOVE_WIDGET, { refetchQueries: ["GetScene"] });
+  const [removeWidget] = useMutation(REMOVE_WIDGET, {
+    refetchQueries: ["GetScene"],
+  });
 
   const useRemoveWidget = useCallback(
     async (
@@ -201,7 +221,10 @@ export default () => {
         console.log(
           "GraphQL: Failed to update the widget align system because there is no sceneId provided",
         );
-        setNotification({ type: "error", text: t("Failed to update widget alignment.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to update widget alignment."),
+        });
         return {
           status: "error",
         };
@@ -224,8 +247,14 @@ export default () => {
       });
 
       if (errors || !data?.updateWidgetAlignSystem) {
-        console.log("GraphQL: Failed to update the widget align system", errors);
-        setNotification({ type: "error", text: t("Failed to update the widget align system.") });
+        console.log(
+          "GraphQL: Failed to update the widget align system",
+          errors,
+        );
+        setNotification({
+          type: "error",
+          text: t("Failed to update the widget align system."),
+        });
 
         return { status: "error" };
       }
diff --git a/web/src/services/api/widgetsApi/utils.ts b/web/src/services/api/widgetsApi/utils.ts
index 8653b1453..0f634f831 100644
--- a/web/src/services/api/widgetsApi/utils.ts
+++ b/web/src/services/api/widgetsApi/utils.ts
@@ -5,7 +5,10 @@ export const BUTTON_BUILTIN_WIDGET_ID = "reearth/button";
 export const NAVIGATOR_BUILTIN_WIDGET_ID = "reearth/navigator";
 // export const TIMELINE_BUILTIN_WIDGET_ID = "reearth/timeline";
 
-export const AVAILABLE_WIDGET_IDS = [BUTTON_BUILTIN_WIDGET_ID, NAVIGATOR_BUILTIN_WIDGET_ID];
+export const AVAILABLE_WIDGET_IDS = [
+  BUTTON_BUILTIN_WIDGET_ID,
+  NAVIGATOR_BUILTIN_WIDGET_ID,
+];
 
 export type InstallableWidget = {
   pluginId: string;
@@ -32,16 +35,18 @@ export type InstalledWidget = {
 };
 
 export const getInstallableWidgets = (rawScene?: GetSceneQuery) => {
-  const scene = rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
+  const scene =
+    rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
 
   return scene?.plugins
-    ?.map(p => {
+    ?.map((p) => {
       const plugin = p.plugin;
       return plugin?.extensions
         .filter(
-          e =>
+          (e) =>
             e.type === PluginExtensionType.Widget &&
-            (AVAILABLE_WIDGET_IDS.includes(`reearth/${e.extensionId}`) || plugin.id !== "reearth"),
+            (AVAILABLE_WIDGET_IDS.includes(`reearth/${e.extensionId}`) ||
+              plugin.id !== "reearth"),
         )
         .map((e): InstallableWidget => {
           return {
@@ -49,22 +54,33 @@ export const getInstallableWidgets = (rawScene?: GetSceneQuery) => {
             extensionId: e.extensionId,
             title: e.translatedName,
             description: e.description,
-            icon: e.icon || (plugin.id === "reearth" && e.extensionId) || "plugin",
+            icon:
+              e.icon || (plugin.id === "reearth" && e.extensionId) || "plugin",
             disabled:
-              (e.singleOnly && !!scene?.widgets?.find(w => w.extensionId === e.extensionId)) ??
+              (e.singleOnly &&
+                !!scene?.widgets?.find(
+                  (w) => w.extensionId === e.extensionId,
+                )) ??
               undefined,
           };
         })
-        .filter((w): w is InstallableWidget => !!w && !w.title.includes("legacy"));
+        .filter(
+          (w): w is InstallableWidget => !!w && !w.title.includes("legacy"),
+        );
     })
     .reduce<InstallableWidget[]>((a, b) => (b ? [...a, ...b] : a), []);
 };
 
-export const getInstalledWidgets = (rawScene?: GetSceneQuery): InstalledWidget[] | undefined => {
-  const scene = rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
+export const getInstalledWidgets = (
+  rawScene?: GetSceneQuery,
+): InstalledWidget[] | undefined => {
+  const scene =
+    rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
 
-  return scene?.widgets?.map(w => {
-    const e = getInstallableWidgets(rawScene)?.find(e => e.extensionId === w.extensionId);
+  return scene?.widgets?.map((w) => {
+    const e = getInstallableWidgets(rawScene)?.find(
+      (e) => e.extensionId === w.extensionId,
+    );
 
     return {
       id: w.id,
diff --git a/web/src/services/api/workspacesApi.ts b/web/src/services/api/workspacesApi.ts
index 32e4d2e5e..84f9bf0d2 100644
--- a/web/src/services/api/workspacesApi.ts
+++ b/web/src/services/api/workspacesApi.ts
@@ -1,10 +1,9 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useCallback } from "react";
-
 import { CreateTeamPayload } from "@reearth/services/gql/__gen__/graphql";
 import { GET_ME } from "@reearth/services/gql/queries/user";
 import { CREATE_WORKSPACE } from "@reearth/services/gql/queries/workspace";
 import { useT } from "@reearth/services/i18n";
+import { useCallback } from "react";
 
 import { useNotification } from "../state";
 
@@ -18,7 +17,7 @@ export default () => {
 
   const useWorkspaceQuery = useCallback((workspaceId?: string) => {
     const { data, ...rest } = useQuery(GET_ME);
-    const workspace = data?.me?.teams.find(t => t.id === workspaceId);
+    const workspace = data?.me?.teams.find((t) => t.id === workspaceId);
 
     return { workspace, ...rest };
   }, []);
@@ -35,15 +34,23 @@ export default () => {
 
   const useCreateWorkspace = useCallback(
     async (name: string): Promise<MutationReturn<Partial<Team>>> => {
-      const { data, errors } = await createWorkspaceMutation({ variables: { name } });
+      const { data, errors } = await createWorkspaceMutation({
+        variables: { name },
+      });
       if (errors || !data?.createTeam) {
         console.log("GraphQL: Failed to create workspace", errors);
-        setNotification({ type: "error", text: t("Failed to create workspace.") });
+        setNotification({
+          type: "error",
+          text: t("Failed to create workspace."),
+        });
 
         return { status: "error" };
       }
 
-      setNotification({ type: "success", text: t("Successfully created workspace!") });
+      setNotification({
+        type: "success",
+        text: t("Successfully created workspace!"),
+      });
       return { data: data.createTeam.team, status: "success" };
     },
     [createWorkspaceMutation, setNotification, t],
diff --git a/web/src/services/auth/auth0Auth.ts b/web/src/services/auth/auth0Auth.ts
index df605cd2d..cfe532e4d 100644
--- a/web/src/services/auth/auth0Auth.ts
+++ b/web/src/services/auth/auth0Auth.ts
@@ -1,5 +1,4 @@
 import { useAuth0 } from "@auth0/auth0-react";
-
 import { e2eAccessToken, logOutFromTenant } from "@reearth/services/config";
 
 import type { AuthHook } from "./authHook";
@@ -7,8 +6,14 @@ import type { AuthHook } from "./authHook";
 export const errorKey = "reeartherror";
 
 export const useAuth0Auth = (): AuthHook => {
-  const { isAuthenticated, error, isLoading, loginWithRedirect, logout, getAccessTokenSilently } =
-    useAuth0();
+  const {
+    isAuthenticated,
+    error,
+    isLoading,
+    loginWithRedirect,
+    logout,
+    getAccessTokenSilently,
+  } = useAuth0();
 
   return {
     isAuthenticated: !!e2eAccessToken() || (isAuthenticated && !error),
diff --git a/web/src/services/auth/authProvider.tsx b/web/src/services/auth/authProvider.tsx
index 0002ff7ba..650b9e506 100644
--- a/web/src/services/auth/authProvider.tsx
+++ b/web/src/services/auth/authProvider.tsx
@@ -1,8 +1,11 @@
 import { Auth0Provider } from "@auth0/auth0-react";
+import {
+  getAuthInfo,
+  getSignInCallbackUrl,
+  logInToTenant,
+} from "@reearth/services/config";
 import React, { createContext, ReactNode, useState } from "react";
 
-import { getAuthInfo, getSignInCallbackUrl, logInToTenant } from "@reearth/services/config";
-
 import { useAuth0Auth } from "./auth0Auth";
 import type { AuthHook } from "./authHook";
 import { useCognitoAuth } from "./cognitoAuth";
@@ -19,7 +22,9 @@ const CognitoWrapper = ({ children }: { children: ReactNode }) => {
   return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
 };
 
-export const AuthProvider: React.FC<{ children?: ReactNode }> = ({ children }) => {
+export const AuthProvider: React.FC<{ children?: ReactNode }> = ({
+  children,
+}) => {
   const [authInfo] = useState(() => {
     logInToTenant(); // note that it includes side effect
     return getAuthInfo();
@@ -41,7 +46,8 @@ export const AuthProvider: React.FC<{ children?: ReactNode }> = ({ children }) =
         }}
         useRefreshTokens
         useRefreshTokensFallback
-        cacheLocation="localstorage">
+        cacheLocation="localstorage"
+      >
         <Auth0Wrapper>{children}</Auth0Wrapper>
       </Auth0Provider>
     ) : null;
diff --git a/web/src/services/auth/cognitoAuth.ts b/web/src/services/auth/cognitoAuth.ts
index 5dbc4ca1b..5fd5d5e5a 100644
--- a/web/src/services/auth/cognitoAuth.ts
+++ b/web/src/services/auth/cognitoAuth.ts
@@ -1,7 +1,6 @@
 import { Auth } from "@aws-amplify/auth";
-import { useState, useEffect } from "react";
-
 import { logOutFromTenant } from "@reearth/services/config";
+import { useState, useEffect } from "react";
 
 import type { AuthHook } from "./authHook";
 
@@ -52,5 +51,12 @@ export const useCognitoAuth = (): AuthHook => {
     }
   };
 
-  return { isAuthenticated: !!user, isLoading, error, getAccessToken, login, logout };
+  return {
+    isAuthenticated: !!user,
+    isLoading,
+    error,
+    getAccessToken,
+    login,
+    logout,
+  };
 };
diff --git a/web/src/services/auth/index.tsx b/web/src/services/auth/index.tsx
index ee1dda021..0e88a1118 100644
--- a/web/src/services/auth/index.tsx
+++ b/web/src/services/auth/index.tsx
@@ -7,7 +7,9 @@ import { useAuthenticationRequired } from "./useAuth";
 export { AuthProvider } from "./authProvider";
 export { useAuth, useCleanUrl, useAuthenticationRequired } from "./useAuth";
 
-const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({ children }) => {
+const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({
+  children,
+}) => {
   const [isAuthenticated] = useAuthenticationRequired(); // TODO: show error
   return isAuthenticated && children ? <>{children}</> : null;
 };
@@ -17,9 +19,13 @@ const withAuthorisation = (): ((props: any) => React.FC<any>) => {
   if (authProvider === "cognito") {
     return withAuthenticator as unknown as (props: any) => React.FC<any>;
   } else if (authProvider === "auth0") {
-    return withAuthenticationRequired as unknown as (props: any) => React.FC<any>;
+    return withAuthenticationRequired as unknown as (
+      props: any,
+    ) => React.FC<any>;
   }
   return (props: any) => props;
 };
 
-export const AuthenticatedPage = withAuthorisation()(AuthenticationRequiredPage);
+export const AuthenticatedPage = withAuthorisation()(
+  AuthenticationRequiredPage,
+);
diff --git a/web/src/services/auth/useAuth.ts b/web/src/services/auth/useAuth.ts
index aefac4b31..e28291b4f 100644
--- a/web/src/services/auth/useAuth.ts
+++ b/web/src/services/auth/useAuth.ts
@@ -6,14 +6,9 @@ import { AuthContext } from "./authProvider";
 export const errorKey = "reeartherror";
 
 export const useAuth = () => {
-  let auth = useContext(AuthContext);
-
-  if (!auth) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    auth = useAuth0Auth();
-  }
-
-  return auth;
+  const auth = useContext(AuthContext);
+  const auth0Auth = useAuth0Auth();
+  return auth ? auth : auth0Auth;
 };
 
 export function useCleanUrl(): [string | undefined, boolean] {
@@ -47,7 +42,13 @@ export function useCleanUrl(): [string | undefined, boolean] {
 }
 
 export function useAuthenticationRequired(): [boolean, string | undefined] {
-  const { isAuthenticated, isLoading, error: authError, login, logout } = useAuth();
+  const {
+    isAuthenticated,
+    isLoading,
+    error: authError,
+    login,
+    logout,
+  } = useAuth();
 
   useEffect(() => {
     if (isLoading || isAuthenticated) {
diff --git a/web/src/services/config/extensions.ts b/web/src/services/config/extensions.ts
index 508c370b2..18aaf19c0 100644
--- a/web/src/services/config/extensions.ts
+++ b/web/src/services/config/extensions.ts
@@ -69,7 +69,9 @@ export type Extensions = {
   globalModal?: Extension<"global-modal">[];
 };
 
-export async function loadExtensions(urls?: string[]): Promise<Extensions | undefined> {
+export async function loadExtensions(
+  urls?: string[],
+): Promise<Extensions | undefined> {
   if (!urls) return undefined;
 
   // Entry point for publication extensions is @reearth/classic/components/molecules/Settings/Project/PublishSection/hooks.ts
@@ -85,15 +87,19 @@ export async function loadExtensions(urls?: string[]): Promise<Extensions | unde
 
   for (const url of urls) {
     try {
-      const newExtensions: Extension[] = (await import(/* @vite-ignore */ url)).default;
-      newExtensions.forEach(ext => {
-        if (ext.type === "dataset-import") datasetImport.push(ext as Extension<"dataset-import">);
-        else if (ext.type === "publication") publication.push(ext as Extension<"publication">);
+      const newExtensions: Extension[] = (await import(/* @vite-ignore */ url))
+        .default;
+      newExtensions.forEach((ext) => {
+        if (ext.type === "dataset-import")
+          datasetImport.push(ext as Extension<"dataset-import">);
+        else if (ext.type === "publication")
+          publication.push(ext as Extension<"publication">);
         else if (ext.type === "plugin-library")
           pluginLibrary.push(ext as Extension<"plugin-library">);
         else if (ext.type === "plugin-installed")
           pluginInstalled.push(ext as Extension<"plugin-installed">);
-        else if (ext.type === "global-modal") globalModal.push(ext as Extension<"global-modal">);
+        else if (ext.type === "global-modal")
+          globalModal.push(ext as Extension<"global-modal">);
       });
     } catch (e) {
       console.error("extension load failed", e);
diff --git a/web/src/services/config/index.ts b/web/src/services/config/index.ts
index 347dcf48d..b03cf0e15 100644
--- a/web/src/services/config/index.ts
+++ b/web/src/services/config/index.ts
@@ -5,9 +5,17 @@ import { configureCognito } from "./aws";
 import { defaultConfig } from "./defaultConfig";
 import { type Extensions, loadExtensions } from "./extensions";
 import { type PasswordPolicy, convertPasswordPolicy } from "./passwordPolicy";
-import { type UnsafeBuiltinPlugin, loadUnsafeBuiltinPlugins } from "./unsafeBuiltinPlugin";
-
-export { getAuthInfo, getSignInCallbackUrl, logInToTenant, logOutFromTenant } from "./authInfo";
+import {
+  type UnsafeBuiltinPlugin,
+  loadUnsafeBuiltinPlugins,
+} from "./unsafeBuiltinPlugin";
+
+export {
+  getAuthInfo,
+  getSignInCallbackUrl,
+  logInToTenant,
+  logOutFromTenant,
+} from "./authInfo";
 
 export type Config = {
   version?: string;
@@ -82,7 +90,7 @@ export default async function loadConfig() {
 
   if (config?.passwordPolicy) {
     config.passwordPolicy = convertPasswordPolicy(
-      config.passwordPolicy as { [key: string]: string },
+      config.passwordPolicy as Record<string, string>,
     );
   }
 
@@ -92,7 +100,9 @@ export default async function loadConfig() {
   }
 
   if (config.unsafePluginUrls) {
-    config.unsafeBuiltinPlugins = await loadUnsafeBuiltinPlugins(config.unsafePluginUrls);
+    config.unsafeBuiltinPlugins = await loadUnsafeBuiltinPlugins(
+      config.unsafePluginUrls,
+    );
   }
 
   window.REEARTH_CONFIG = config;
@@ -104,7 +114,7 @@ async function loadCesiumIonToken(): Promise<string> {
     const res = await fetch("/cesium_ion_token.txt");
     const token = (await res.text()).trim();
     return token.length === DEFAULT_CESIUM_ION_TOKEN_LENGTH ? token : "";
-  } catch (e) {
+  } catch (_e) {
     // ignore
     return "";
   }
diff --git a/web/src/services/config/passwordPolicy.ts b/web/src/services/config/passwordPolicy.ts
index 35ab52ce5..f0c3326c3 100644
--- a/web/src/services/config/passwordPolicy.ts
+++ b/web/src/services/config/passwordPolicy.ts
@@ -7,9 +7,9 @@ export type PasswordPolicy = {
   highSecurity?: RegExp;
 };
 
-export function convertPasswordPolicy(passwordPolicy?: {
-  [key: string]: string;
-}): { [key: string]: RegExp | undefined } | undefined {
+export function convertPasswordPolicy(
+  passwordPolicy?: Record<string, string>,
+): Record<string, RegExp | undefined> | undefined {
   if (!passwordPolicy) return;
   return Object.fromEntries(
     Object.entries(passwordPolicy)
@@ -21,6 +21,6 @@ export function convertPasswordPolicy(passwordPolicy?: {
           return [k, undefined];
         }
       })
-      .filter(i => !!i[1]),
+      .filter((i) => !!i[1]),
   );
 }
diff --git a/web/src/services/config/unsafeBuiltinPlugin.ts b/web/src/services/config/unsafeBuiltinPlugin.ts
index e98235b4c..1de423a40 100644
--- a/web/src/services/config/unsafeBuiltinPlugin.ts
+++ b/web/src/services/config/unsafeBuiltinPlugin.ts
@@ -23,17 +23,21 @@ export type UnsafeBuiltinWidgets<T = unknown> = Record<string, T>;
 export const loadUnsafeBuiltinPlugins = async (urls: string[]) => {
   return (
     await Promise.allSettled(
-      urls.map(async url => {
+      urls.map(async (url) => {
         try {
-          const plugin: UnsafeBuiltinPlugin = (await import(/* @vite-ignore */ url)).default;
+          const plugin: UnsafeBuiltinPlugin = (
+            await import(/* @vite-ignore */ url)
+          ).default;
           return plugin;
         } catch (e) {
-          throw new Error(`Specified unsafe built-in module could not find: ${url} ${e}`);
+          throw new Error(
+            `Specified unsafe built-in module could not find: ${url} ${e}`,
+          );
         }
       }),
     )
   )
-    .map(val => {
+    .map((val) => {
       switch (val.status) {
         case "fulfilled":
           return val.value;
diff --git a/web/src/services/gql/fragments/layer.ts b/web/src/services/gql/fragments/layer.ts
index 25aab0485..56e757432 100644
--- a/web/src/services/gql/fragments/layer.ts
+++ b/web/src/services/gql/fragments/layer.ts
@@ -1,6 +1,8 @@
 import { gql } from "@apollo/client";
-
-import { propertyFragment, infoboxFragment } from "@reearth/services/gql/fragments";
+import {
+  propertyFragment,
+  infoboxFragment,
+} from "@reearth/services/gql/fragments";
 
 export const LayerSystemFragments = gql`
   fragment LayerSystemLayer on Layer {
diff --git a/web/src/services/gql/provider/index.tsx b/web/src/services/gql/provider/index.tsx
index da38de88b..a33c2a68a 100644
--- a/web/src/services/gql/provider/index.tsx
+++ b/web/src/services/gql/provider/index.tsx
@@ -1,4 +1,9 @@
-import { ApolloProvider, ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
+import {
+  ApolloProvider,
+  ApolloClient,
+  ApolloLink,
+  InMemoryCache,
+} from "@apollo/client";
 import type { ReactNode } from "react";
 
 import fragmentMatcher from "../__gen__/fragmentMatcher.json";
@@ -24,11 +29,23 @@ const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
       Query: {
         fields: {
           assets: {
-            keyArgs: ["teamId", "keyword", "sort", "pagination", ["first", "last"]],
+            keyArgs: [
+              "teamId",
+              "keyword",
+              "sort",
+              "pagination",
+              ["first", "last"],
+            ],
             merge: paginationMerge,
           },
           projects: {
-            keyArgs: ["teamId", "keyword", "sort", "pagination", ["first", "last"]],
+            keyArgs: [
+              "teamId",
+              "keyword",
+              "sort",
+              "pagination",
+              ["first", "last"],
+            ],
             merge: paginationMerge,
           },
           datasetSchemas: {
@@ -42,7 +59,12 @@ const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
 
   const client = new ApolloClient({
     uri: endpoint,
-    link: ApolloLink.from([errorLink(), sentryLink(endpoint), authLink(), uploadLink(endpoint)]),
+    link: ApolloLink.from([
+      errorLink(),
+      sentryLink(endpoint),
+      authLink(),
+      uploadLink(endpoint),
+    ]),
     cache,
     connectToDevTools: import.meta.env.DEV,
   });
diff --git a/web/src/services/gql/provider/pagination.ts b/web/src/services/gql/provider/pagination.ts
index 0b0fe8ca0..da7409a05 100644
--- a/web/src/services/gql/provider/pagination.ts
+++ b/web/src/services/gql/provider/pagination.ts
@@ -10,7 +10,11 @@ export function paginationMerge(
 
   const merged = existing ? existing.edges.slice(0) : [];
 
-  let offset = offsetFromCursor(merged, incoming?.pageInfo.startCursor, readField);
+  let offset = offsetFromCursor(
+    merged,
+    incoming?.pageInfo.startCursor,
+    readField,
+  );
   if (offset < 0) offset = merged.length;
 
   for (let i = 0; i < incoming?.edges?.length; ++i) {
@@ -23,7 +27,11 @@ export function paginationMerge(
   };
 }
 
-function offsetFromCursor(items: any, cursor: string, readField: ReadFieldFunction) {
+function offsetFromCursor(
+  items: any,
+  cursor: string,
+  readField: ReadFieldFunction,
+) {
   if (items.length < 1) return -1;
   for (let i = 0; i < items.length; ++i) {
     if (readField("cursor", items[i]) === cursor) {
diff --git a/web/src/services/i18n/i18n.ts b/web/src/services/i18n/i18n.ts
index 1231783e5..6a68eb44e 100644
--- a/web/src/services/i18n/i18n.ts
+++ b/web/src/services/i18n/i18n.ts
@@ -16,7 +16,6 @@ const resources = {
 
 export const availableLanguages = Object.keys(resources);
 
-// eslint-disable-next-line import/no-named-as-default-member
 i18n.use(LanguageDetector).use(initReactI18next).init({
   resources,
   fallbackLng: "en",
diff --git a/web/src/services/i18n/locale.ts b/web/src/services/i18n/locale.ts
index 916c9afc5..26f17f1c0 100644
--- a/web/src/services/i18n/locale.ts
+++ b/web/src/services/i18n/locale.ts
@@ -1,6 +1,8 @@
 import { availableLanguages } from "./i18n";
 
-export const localesWithLabel: { [l in (typeof availableLanguages)[number]]: string } = {
+export const localesWithLabel: {
+  [l in (typeof availableLanguages)[number]]: string;
+} = {
   en: "English",
   ja: "日本語",
 };
diff --git a/web/src/services/i18n/publishedProvider.tsx b/web/src/services/i18n/publishedProvider.tsx
index 066409498..5ffab2b8a 100644
--- a/web/src/services/i18n/publishedProvider.tsx
+++ b/web/src/services/i18n/publishedProvider.tsx
@@ -3,6 +3,10 @@ import { I18nextProvider } from "react-i18next";
 
 import i18n from "./i18n";
 
-export default function PublishedProvider({ children }: { children?: ReactNode }) {
+export default function PublishedProvider({
+  children,
+}: {
+  children?: ReactNode;
+}) {
   return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
 }
diff --git a/web/src/services/routing/index.tsx b/web/src/services/routing/index.tsx
index 4f8f7fad9..18a619a0f 100644
--- a/web/src/services/routing/index.tsx
+++ b/web/src/services/routing/index.tsx
@@ -1,15 +1,20 @@
-import { lazy } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-
 import RootPage from "@reearth/beta/pages/RootPage";
 import { styled } from "@reearth/services/theme";
+import { lazy } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 const Dashboard = lazy(() => import("@reearth/beta/pages/Dashboard"));
 const Editor = lazy(() => import("@reearth/beta/pages/EditorPage"));
-const ProjectSettings = lazy(() => import("@reearth/beta/pages/ProjectSettingsPage"));
-const PluginPlaygroundPage = lazy(() => import("@reearth/beta/pages/PluginPlaygroundPage"));
+const ProjectSettings = lazy(
+  () => import("@reearth/beta/pages/ProjectSettingsPage"),
+);
+const PluginPlaygroundPage = lazy(
+  () => import("@reearth/beta/pages/PluginPlaygroundPage"),
+);
 const NotFound = lazy(() => import("@reearth/beta/components/NotFound"));
-const GraphQLPlayground = lazy(() => import("@reearth/beta/pages/GraphQLPlayground"));
+const GraphQLPlayground = lazy(
+  () => import("@reearth/beta/pages/GraphQLPlayground"),
+);
 
 export const AppRoutes = () => {
   const router = createBrowserRouter([
diff --git a/web/src/services/state/devPlugins.ts b/web/src/services/state/devPlugins.ts
index 7d6533a5d..e748ceaeb 100644
--- a/web/src/services/state/devPlugins.ts
+++ b/web/src/services/state/devPlugins.ts
@@ -1,7 +1,10 @@
 import { atom, useAtom } from "jotai";
 
 const devPluginExtensionRenderKey = atom<number>(0);
-export const useDevPluginExtensionRenderKey = () => useAtom(devPluginExtensionRenderKey);
+export const useDevPluginExtensionRenderKey = () =>
+  useAtom(devPluginExtensionRenderKey);
 
-const devPluginExtensions = atom<{ id: string; url: string }[] | undefined>(undefined);
+const devPluginExtensions = atom<{ id: string; url: string }[] | undefined>(
+  undefined,
+);
 export const useDevPluginExtensions = () => useAtom(devPluginExtensions);
diff --git a/web/src/services/state/index.ts b/web/src/services/state/index.ts
index d77b5c68f..7cb27feb6 100644
--- a/web/src/services/state/index.ts
+++ b/web/src/services/state/index.ts
@@ -18,7 +18,12 @@ export type WidgetAreaState = {
 
 export type WidgetAlignment = "start" | "centered" | "end";
 
-export type WidgetAreaPadding = { top: number; bottom: number; left: number; right: number };
+export type WidgetAreaPadding = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
 
 export type NotificationType = "error" | "warning" | "info" | "success";
 
@@ -44,7 +49,7 @@ export type Policy = {
 export type Workspace = {
   id: string;
   name: string;
-  members?: Array<any>;
+  members?: any[];
   assets?: any;
   projects?: any;
   personal?: boolean;
diff --git a/web/src/services/theme/emotion.d.ts b/web/src/services/theme/emotion.d.ts
index a61cd9fdc..4fc94a08c 100644
--- a/web/src/services/theme/emotion.d.ts
+++ b/web/src/services/theme/emotion.d.ts
@@ -3,6 +3,5 @@ import "@emotion/react";
 import { Theme as CustomTheme } from "./reearthTheme/types";
 
 declare module "@emotion/react" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface Theme extends CustomTheme {}
 }
diff --git a/web/src/services/theme/publishTheme/index.ts b/web/src/services/theme/publishTheme/index.ts
index 853d1149d..fcc9d2b6d 100644
--- a/web/src/services/theme/publishTheme/index.ts
+++ b/web/src/services/theme/publishTheme/index.ts
@@ -7,6 +7,8 @@ export { default as publishColors } from "./colors";
 
 export { mask } from "./utils";
 
-export function usePublishTheme(sceneThemeOptions?: SceneThemeOptions): PublishTheme {
+export function usePublishTheme(
+  sceneThemeOptions?: SceneThemeOptions,
+): PublishTheme {
   return useMemo(() => publishTheme(sceneThemeOptions), [sceneThemeOptions]);
 }
diff --git a/web/src/services/theme/publishTheme/utils.ts b/web/src/services/theme/publishTheme/utils.ts
index 0129ef722..cd11a8595 100644
--- a/web/src/services/theme/publishTheme/utils.ts
+++ b/web/src/services/theme/publishTheme/utils.ts
@@ -32,7 +32,9 @@ const premadeThemes: Record<PremadeThemeType, PublishTheme> = {
   forest,
 };
 
-export function publishTheme(sceneThemeOptions?: SceneThemeOptions): PublishTheme {
+export function publishTheme(
+  sceneThemeOptions?: SceneThemeOptions,
+): PublishTheme {
   if (sceneThemeOptions?.themeType) {
     if (sceneThemeOptions.themeType in premadeThemes) {
       return premadeThemes[sceneThemeOptions?.themeType as PremadeThemeType];
@@ -43,9 +45,12 @@ export function publishTheme(sceneThemeOptions?: SceneThemeOptions): PublishThem
 
   const options = {
     ...sceneThemeOptions,
-    themeBackgroundColor: sceneThemeOptions?.themeBackgroundColor || themeDefaults.backgroundColor,
-    themeTextColor: sceneThemeOptions?.themeTextColor || themeDefaults.textColor,
-    themeSelectColor: sceneThemeOptions?.themeSelectColor || themeDefaults.selectColor,
+    themeBackgroundColor:
+      sceneThemeOptions?.themeBackgroundColor || themeDefaults.backgroundColor,
+    themeTextColor:
+      sceneThemeOptions?.themeTextColor || themeDefaults.textColor,
+    themeSelectColor:
+      sceneThemeOptions?.themeSelectColor || themeDefaults.selectColor,
   };
 
   const isBackgroundDark = isDark(options?.themeBackgroundColor);
diff --git a/web/src/services/theme/reearthTheme/common/fonts.ts b/web/src/services/theme/reearthTheme/common/fonts.ts
index 606f09a98..133f121ca 100644
--- a/web/src/services/theme/reearthTheme/common/fonts.ts
+++ b/web/src/services/theme/reearthTheme/common/fonts.ts
@@ -35,13 +35,13 @@ const fontWeights = {
 
 export type FontWeight = keyof typeof fontWeights;
 
-const uniqueTraits = {
+const _uniqueTraits = {
   underline: "underline",
   italic: "italic",
   strike: "strike",
 };
 
-export type UniqueTraits = keyof typeof uniqueTraits;
+export type UniqueTraits = keyof typeof _uniqueTraits;
 
 // H1 components
 export const H1Bold = styled.p`
diff --git a/web/src/services/theme/reearthTheme/darkTheme/index.ts b/web/src/services/theme/reearthTheme/darkTheme/index.ts
index 4aa6dd88d..c6102712c 100644
--- a/web/src/services/theme/reearthTheme/darkTheme/index.ts
+++ b/web/src/services/theme/reearthTheme/darkTheme/index.ts
@@ -61,7 +61,10 @@ const darkTheme: Theme = {
     darker: rgba("#000000", 0.15),
     darkest: rgba("#000000", 0.2),
   },
-  placeHolder: { main_1: rgba("#FF560E", 0.2), main_2: rgba(brandBlue.main, 0.2) },
+  placeHolder: {
+    main_1: rgba("#FF560E", 0.2),
+    main_2: rgba(brandBlue.main, 0.2),
+  },
   colorSchema: "dark",
   publish: {
     main: "#24A148",
diff --git a/web/src/services/theme/reearthTheme/lightTheme/index.ts b/web/src/services/theme/reearthTheme/lightTheme/index.ts
index 92cf7f7b7..768b2d919 100644
--- a/web/src/services/theme/reearthTheme/lightTheme/index.ts
+++ b/web/src/services/theme/reearthTheme/lightTheme/index.ts
@@ -61,7 +61,10 @@ const lightTheme: Theme = {
     darker: rgba("#000000", 0.15),
     darkest: rgba("#000000", 0.2),
   },
-  placeHolder: { main_1: rgba("#FF560E", 0.2), main_2: rgba(brandBlue.main, 0.2) },
+  placeHolder: {
+    main_1: rgba("#FF560E", 0.2),
+    main_2: rgba(brandBlue.main, 0.2),
+  },
   colorSchema: "light",
   publish: {
     main: "#24A148",
diff --git a/web/src/test/setup.ts b/web/src/test/setup.ts
index 9e3803752..f891009ca 100644
--- a/web/src/test/setup.ts
+++ b/web/src/test/setup.ts
@@ -1,5 +1,8 @@
 /* eslint-disable @typescript-eslint/no-namespace */
-import { type EmotionMatchers, matchers as emotionMatchers } from "@emotion/jest";
+import {
+  type EmotionMatchers,
+  matchers as emotionMatchers,
+} from "@emotion/jest";
 import * as domMatchers from "@testing-library/jest-dom/matchers";
 import { cleanup } from "@testing-library/react";
 import { afterEach, expect, vi } from "vitest";
@@ -9,7 +12,9 @@ import "web-streams-polyfill/es2018";
 
 declare global {
   namespace Vi {
-    interface JestAssertion<T = any> extends jest.Matchers<void, T>, EmotionMatchers {
+    interface JestAssertion<T = any>
+      extends jest.Matchers<void, T>,
+        EmotionMatchers {
       toHaveStyleRule: EmotionMatchers["toHaveStyleRule"];
     }
   }
@@ -20,7 +25,7 @@ expect.extend(emotionMatchers as any);
 
 Object.defineProperty(window, "matchMedia", {
   writable: true,
-  value: vi.fn().mockImplementation(query => ({
+  value: vi.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
diff --git a/web/src/test/utils.tsx b/web/src/test/utils.tsx
index 5e10e4648..7d296483a 100644
--- a/web/src/test/utils.tsx
+++ b/web/src/test/utils.tsx
@@ -1,4 +1,7 @@
-import { MockedProvider as MockedGqlProvider, MockedResponse } from "@apollo/client/testing";
+import {
+  MockedProvider as MockedGqlProvider,
+  MockedResponse,
+} from "@apollo/client/testing";
 import { render as rtlRender } from "@testing-library/react";
 import { vitest } from "vitest";
 
@@ -39,8 +42,6 @@ const render = (
   return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
 };
 
-// eslint-disable-next-line import/export
 export * from "@testing-library/react";
 
-// eslint-disable-next-line import/export
 export { render };
diff --git a/web/src/types.ts b/web/src/types.ts
index 17f9dddf3..03d2ef08c 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line
 export type Brand<V, Brand extends string> = V & { readonly __brand__: Brand };
 
 export type ExtendedFunc<F extends (...args: any) => any, A> = (
@@ -20,38 +19,61 @@ export type ExtendedFunc3<F extends (...args: any) => any, A, B, C> = (
 ) => ReturnType<F>;
 
 export type Args<F> = F extends (a: any, ...b: infer A) => any ? A : never;
-export type Args2<F> = F extends (a: any, b: any, ...c: infer A) => any ? A : never;
-export type Args3<F> = F extends (a: any, b: any, c: any, ...d: infer A) => any ? A : never;
+export type Args2<F> = F extends (a: any, b: any, ...c: infer A) => any
+  ? A
+  : never;
+export type Args3<F> = F extends (a: any, b: any, c: any, ...d: infer A) => any
+  ? A
+  : never;
 
-export type OmitFunc<F extends (a: any, ...args: any) => any> = (...a2: Args<F>) => ReturnType<F>;
+export type OmitFunc<F extends (a: any, ...args: any) => any> = (
+  ...a2: Args<F>
+) => ReturnType<F>;
 export type OmitFunc2<F extends (a: any, b: any, ...args: any) => any> = (
   ...a2: Args2<F>
 ) => ReturnType<F>;
-export type OmitFunc3<F extends (a: any, b: any, c: any, ...args: any) => any> = (
-  ...a2: Args3<F>
-) => ReturnType<F>;
+export type OmitFunc3<F extends (a: any, b: any, c: any, ...args: any) => any> =
+  (...a2: Args3<F>) => ReturnType<F>;
 
-export type ExtendedFuncProps<P extends { [key in string]?: (...args: any) => any }, A> = {
+export type ExtendedFuncProps<
+  P extends { [key in string]?: (...args: any) => any },
+  A,
+> = {
   [K in keyof P]?: ExtendedFunc<NonNullable<P[K]>, A>;
 };
 
-export type ExtendedFuncProps2<P extends { [key in string]?: (...args: any) => any }, A, B> = {
+export type ExtendedFuncProps2<
+  P extends { [key in string]?: (...args: any) => any },
+  A,
+  B,
+> = {
   [K in keyof P]?: ExtendedFunc2<NonNullable<P[K]>, A, B>;
 };
 
-export type ExtendedFuncProps3<P extends { [key in string]?: (...args: any) => any }, A, B, C> = {
+export type ExtendedFuncProps3<
+  P extends { [key in string]?: (...args: any) => any },
+  A,
+  B,
+  C,
+> = {
   [K in keyof P]?: ExtendedFunc3<NonNullable<P[K]>, A, B, C>;
 };
 
-export type OmitFuncProps<P extends { [key in string]?: (...args: any) => any }> = {
+export type OmitFuncProps<
+  P extends { [key in string]?: (...args: any) => any },
+> = {
   [K in keyof P]?: OmitFunc<NonNullable<P[K]>>;
 };
 
-export type OmitFuncProps2<P extends { [key in string]?: (...args: any) => any }> = {
+export type OmitFuncProps2<
+  P extends { [key in string]?: (...args: any) => any },
+> = {
   [K in keyof P]?: OmitFunc2<NonNullable<P[K]>>;
 };
 
-export type OmitFuncProps3<P extends { [key in string]?: (...args: any) => any }> = {
+export type OmitFuncProps3<
+  P extends { [key in string]?: (...args: any) => any },
+> = {
   [K in keyof P]?: OmitFunc3<NonNullable<P[K]>>;
 };
 
diff --git a/web/src/wdyr.ts b/web/src/wdyr.ts
index 1790e48de..79a894108 100644
--- a/web/src/wdyr.ts
+++ b/web/src/wdyr.ts
@@ -5,7 +5,9 @@ const enabled = false;
 
 export default async function wdyr() {
   if (import.meta.env.DEV && enabled) {
-    const { default: whyDidYouRender } = await import("@welldone-software/why-did-you-render");
+    const { default: whyDidYouRender } = await import(
+      "@welldone-software/why-did-you-render"
+    );
     whyDidYouRender(React, {
       trackAllPureComponents: true,
     });
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 5b2789e15..b5a3d8e1f 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -4,11 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "lib": [
-      "ESNext",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "noEmit": true,
     "module": "ESNext",
     "moduleResolution": "Node",
@@ -22,29 +18,20 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "paths": {
-      "@reearth/e2e/*": [
-        "e2e/*"
-      ],
-      "@reearth/*": [
-        "src/*"
-      ],
+      "@reearth/e2e/*": ["e2e/*"],
+      "@reearth/*": ["src/*"]
     },
     "plugins": [
       {
         "name": "typescript-styled-plugin"
       }
-    ],
+    ]
   },
-  "exclude":[
-    "src/beta/lib/unsafeBuiltinPlugins"
-  ],
-  "include": [
-    "src",
-    "e2e",
-  ],
+  "exclude": ["src/beta/lib/unsafeBuiltinPlugins", "dist"],
+  "include": ["src", "e2e", "eslint.config.mjs"],
   "ts-node": {
     "compilerOptions": {
       "module": "CommonJS"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 517cf0497..c22f65cc9 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -29,7 +29,10 @@ try {
 let cesiumVersion = "";
 try {
   const cesiumPackageJson = JSON.parse(
-    readFileSync(resolve(__dirname, "node_modules", "cesium", "package.json"), "utf-8"),
+    readFileSync(
+      resolve(__dirname, "node_modules", "cesium", "package.json"),
+      "utf-8",
+    ),
   );
   cesiumVersion = cesiumPackageJson.version;
 } catch {
@@ -42,7 +45,9 @@ export default defineConfig({
     svgr(),
     react(),
     yaml(),
-    cesium({ cesiumBaseUrl: cesiumVersion ? `cesium-${cesiumVersion}/` : undefined }),
+    cesium({
+      cesiumBaseUrl: cesiumVersion ? `cesium-${cesiumVersion}/` : undefined,
+    }),
     serverHeaders(),
     config(),
     tsconfigPaths(),
@@ -121,11 +126,13 @@ function config(): Plugin {
       const remoteReearthConfig = envs.REEARTH_WEB_CONFIG_URL
         ? await (await fetch(envs.REEARTH_WEB_CONFIG_URL)).json()
         : {};
-      const remoteCesiumIonTokenResponseText = envs.REEARTH_WEB_CESIUM_ION_TOKEN_URL
-        ? await (await fetch(envs.REEARTH_WEB_CESIUM_ION_TOKEN_URL)).text()
-        : undefined;
+      const remoteCesiumIonTokenResponseText =
+        envs.REEARTH_WEB_CESIUM_ION_TOKEN_URL
+          ? await (await fetch(envs.REEARTH_WEB_CESIUM_ION_TOKEN_URL)).text()
+          : undefined;
       const remoteCesiumIonToken =
-        remoteCesiumIonTokenResponseText?.length === DEFAULT_CESIUM_ION_TOKEN_LENGTH
+        remoteCesiumIonTokenResponseText?.length ===
+        DEFAULT_CESIUM_ION_TOKEN_LENGTH
           ? remoteCesiumIonTokenResponseText
           : "";
       const configRes = JSON.stringify(
@@ -133,7 +140,9 @@ function config(): Plugin {
           ...remoteReearthConfig,
           api: "http://localhost:8080/api",
           published: "/published.html?alias={}",
-          ...(remoteCesiumIonToken ? { cesiumIonAccessToken: remoteCesiumIonToken } : {}),
+          ...(remoteCesiumIonToken
+            ? { cesiumIonAccessToken: remoteCesiumIonToken }
+            : {}),
           // If Cesium version becomes outdated, you can set the Ion token as an environment variables here.
           // ex: `CESIUM_ION_ACCESS_TOKEN="ION_TOKEN" yarn start`
           // ref: https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Core/Ion.js#L6-L7
@@ -166,7 +175,7 @@ function config(): Plugin {
 function loadJSON(path: string): any {
   try {
     return JSON.parse(readFileSync(path, "utf8")) || {};
-  } catch (err) {
+  } catch (_err) {
     return {};
   }
 }
diff --git a/web/yarn.lock b/web/yarn.lock
index e04aa138d..986a4d27d 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -191,6 +191,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@aws-amplify/auth@npm:5.3.1":
+  version: 5.3.1
+  resolution: "@aws-amplify/auth@npm:5.3.1"
+  dependencies:
+    "@aws-amplify/core": "npm:5.1.10"
+    amazon-cognito-identity-js: "npm:6.2.0"
+    tslib: "npm:^1.8.0"
+  checksum: 10c0/2fe0bb700329accc3bf91e44e9cb219c38d210bbb6819e9226836bbead191d11af23741d537517809811eeed867c27525bcf820c69931e479b1af832a76baa1d
+  languageName: node
+  linkType: hard
+
 "@aws-amplify/auth@npm:5.6.5":
   version: 5.6.5
   resolution: "@aws-amplify/auth@npm:5.6.5"
@@ -214,6 +225,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@aws-amplify/core@npm:5.1.10":
+  version: 5.1.10
+  resolution: "@aws-amplify/core@npm:5.1.10"
+  dependencies:
+    "@aws-crypto/sha256-js": "npm:1.2.2"
+    "@aws-sdk/client-cloudwatch-logs": "npm:3.6.1"
+    "@aws-sdk/client-cognito-identity": "npm:3.6.1"
+    "@aws-sdk/credential-provider-cognito-identity": "npm:3.6.1"
+    "@aws-sdk/types": "npm:3.6.1"
+    "@aws-sdk/util-hex-encoding": "npm:3.6.1"
+    tslib: "npm:^1.8.0"
+    universal-cookie: "npm:^4.0.4"
+    zen-observable-ts: "npm:0.8.19"
+  checksum: 10c0/a0a556a52a98c313227cd1a2ab983dcf75aab924f2c96b8ee30efa204a248e6df8cf83f6026bed0df969b144b1aaa75c7a2a035e1d708a328401a6dce454ca14
+  languageName: node
+  linkType: hard
+
 "@aws-amplify/core@npm:5.8.5":
   version: 5.8.5
   resolution: "@aws-amplify/core@npm:5.8.5"
@@ -617,6 +645,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@aws-sdk/client-cognito-identity@npm:3.6.1":
+  version: 3.6.1
+  resolution: "@aws-sdk/client-cognito-identity@npm:3.6.1"
+  dependencies:
+    "@aws-crypto/sha256-browser": "npm:^1.0.0"
+    "@aws-crypto/sha256-js": "npm:^1.0.0"
+    "@aws-sdk/config-resolver": "npm:3.6.1"
+    "@aws-sdk/credential-provider-node": "npm:3.6.1"
+    "@aws-sdk/fetch-http-handler": "npm:3.6.1"
+    "@aws-sdk/hash-node": "npm:3.6.1"
+    "@aws-sdk/invalid-dependency": "npm:3.6.1"
+    "@aws-sdk/middleware-content-length": "npm:3.6.1"
+    "@aws-sdk/middleware-host-header": "npm:3.6.1"
+    "@aws-sdk/middleware-logger": "npm:3.6.1"
+    "@aws-sdk/middleware-retry": "npm:3.6.1"
+    "@aws-sdk/middleware-serde": "npm:3.6.1"
+    "@aws-sdk/middleware-signing": "npm:3.6.1"
+    "@aws-sdk/middleware-stack": "npm:3.6.1"
+    "@aws-sdk/middleware-user-agent": "npm:3.6.1"
+    "@aws-sdk/node-config-provider": "npm:3.6.1"
+    "@aws-sdk/node-http-handler": "npm:3.6.1"
+    "@aws-sdk/protocol-http": "npm:3.6.1"
+    "@aws-sdk/smithy-client": "npm:3.6.1"
+    "@aws-sdk/types": "npm:3.6.1"
+    "@aws-sdk/url-parser": "npm:3.6.1"
+    "@aws-sdk/url-parser-native": "npm:3.6.1"
+    "@aws-sdk/util-base64-browser": "npm:3.6.1"
+    "@aws-sdk/util-base64-node": "npm:3.6.1"
+    "@aws-sdk/util-body-length-browser": "npm:3.6.1"
+    "@aws-sdk/util-body-length-node": "npm:3.6.1"
+    "@aws-sdk/util-user-agent-browser": "npm:3.6.1"
+    "@aws-sdk/util-user-agent-node": "npm:3.6.1"
+    "@aws-sdk/util-utf8-browser": "npm:3.6.1"
+    "@aws-sdk/util-utf8-node": "npm:3.6.1"
+    tslib: "npm:^2.0.0"
+  checksum: 10c0/b11909a0f5bab378da90dc3e9fead6ba3fac75a2edbcbc1436da121434f6f256369180e410536f4a55b870fc3e52fd2860f844d78ee141092948d671d12f9c59
+  languageName: node
+  linkType: hard
+
 "@aws-sdk/client-comprehend@npm:3.6.1":
   version: 3.6.1
   resolution: "@aws-sdk/client-comprehend@npm:3.6.1"
@@ -1174,6 +1241,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@aws-sdk/credential-provider-cognito-identity@npm:3.6.1":
+  version: 3.6.1
+  resolution: "@aws-sdk/credential-provider-cognito-identity@npm:3.6.1"
+  dependencies:
+    "@aws-sdk/client-cognito-identity": "npm:3.6.1"
+    "@aws-sdk/property-provider": "npm:3.6.1"
+    "@aws-sdk/types": "npm:3.6.1"
+    tslib: "npm:^1.8.0"
+  checksum: 10c0/5ab9b84be4904389fd14866e85fd60e60ab90f16a3cf5782a72b14baff4019a4f5399521b73af487775ac1c56d6f1a855916d23a94866b064d5b797daba47a72
+  languageName: node
+  linkType: hard
+
 "@aws-sdk/credential-provider-env@npm:3.186.0":
   version: 3.186.0
   resolution: "@aws-sdk/credential-provider-env@npm:3.186.0"
@@ -4617,7 +4696,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/eslint-utils@npm:^4.2.0":
+"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
   dependencies:
@@ -4628,34 +4707,66 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.4.0":
+"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.11.0":
   version: 4.11.0
   resolution: "@eslint-community/regexpp@npm:4.11.0"
   checksum: 10c0/0f6328869b2741e2794da4ad80beac55cba7de2d3b44f796a60955b0586212ec75e6b0253291fd4aad2100ad471d1480d8895f2b54f1605439ba4c875e05e523
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^2.0.3":
-  version: 2.1.4
-  resolution: "@eslint/eslintrc@npm:2.1.4"
+"@eslint/compat@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@eslint/compat@npm:1.1.1"
+  checksum: 10c0/ca8aa3811fa22d45913f5724978e6f3ae05fb7685b793de4797c9db3b0e22b530f0f492011b253754bffce879d7cece65762cc3391239b5d2249aef8230edc9a
+  languageName: node
+  linkType: hard
+
+"@eslint/config-array@npm:^0.17.1":
+  version: 0.17.1
+  resolution: "@eslint/config-array@npm:0.17.1"
+  dependencies:
+    "@eslint/object-schema": "npm:^2.1.4"
+    debug: "npm:^4.3.1"
+    minimatch: "npm:^3.1.2"
+  checksum: 10c0/b986a0a96f2b42467578968ce3d4ae3b9284e587f8490f2dcdc44ff1b8d30580c62b221da6e58d07b09e156c3050e2dc38267f9370521d9cafc099c4e30154ef
+  languageName: node
+  linkType: hard
+
+"@eslint/eslintrc@npm:3.1.0, @eslint/eslintrc@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@eslint/eslintrc@npm:3.1.0"
   dependencies:
     ajv: "npm:^6.12.4"
     debug: "npm:^4.3.2"
-    espree: "npm:^9.6.0"
-    globals: "npm:^13.19.0"
+    espree: "npm:^10.0.1"
+    globals: "npm:^14.0.0"
     ignore: "npm:^5.2.0"
     import-fresh: "npm:^3.2.1"
     js-yaml: "npm:^4.1.0"
     minimatch: "npm:^3.1.2"
     strip-json-comments: "npm:^3.1.1"
-  checksum: 10c0/32f67052b81768ae876c84569ffd562491ec5a5091b0c1e1ca1e0f3c24fb42f804952fdd0a137873bc64303ba368a71ba079a6f691cee25beee9722d94cc8573
+  checksum: 10c0/5b7332ed781edcfc98caa8dedbbb843abfb9bda2e86538529c843473f580e40c69eb894410eddc6702f487e9ee8f8cfa8df83213d43a8fdb549f23ce06699167
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:9.9.0":
+  version: 9.9.0
+  resolution: "@eslint/js@npm:9.9.0"
+  checksum: 10c0/6ec9f1f0d576132444d6a5c66a8a08b0be9444e3ebb563fa6a6bebcf5299df3da7e454dc04c0fa601bb811197f00764b3a04430d8458cdb8e3a4677993d23f30
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:9.9.1":
+  version: 9.9.1
+  resolution: "@eslint/js@npm:9.9.1"
+  checksum: 10c0/a3a91de2ce78469f7c4eee78c1eba77360706e1d0fa0ace2e19102079bcf237b851217c85ea501dc92c4c3719d60d9df966977abc8554d4c38e3638c1f53dcb2
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@eslint/js@npm:8.40.0"
-  checksum: 10c0/0a7253c6aa5d14bda570cde5aff627fc338ca3b6e6226e2cbe7008a095ff244109f7edd1c340465d0aab3cea695ea7eb10bff96e6e9cab60cdd3226ac010041b
+"@eslint/object-schema@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "@eslint/object-schema@npm:2.1.4"
+  checksum: 10c0/e9885532ea70e483fb007bf1275968b05bb15ebaa506d98560c41a41220d33d342e19023d5f2939fed6eb59676c1bda5c847c284b4b55fce521d282004da4dda
   languageName: node
   linkType: hard
 
@@ -4682,6 +4793,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/dom@npm:1.6.10":
+  version: 1.6.10
+  resolution: "@floating-ui/dom@npm:1.6.10"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.7"
+  checksum: 10c0/ed7d7b400e00b2f31f1b8f11863af2cb95d0d3cd84635186ca31b41d8d9fe7fe12c85e4985617d7df7ed365abad48b327d0bae35934842007b4e1052d9780576
+  languageName: node
+  linkType: hard
+
 "@floating-ui/dom@npm:^0.5.3":
   version: 0.5.4
   resolution: "@floating-ui/dom@npm:0.5.4"
@@ -4747,6 +4868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/utils@npm:^0.2.7":
+  version: 0.2.7
+  resolution: "@floating-ui/utils@npm:0.2.7"
+  checksum: 10c0/0559ea5df2dc82219bad26e3509e9d2b70f6987e552dc8ddf7d7f5923cfeb7c44bf884567125b1f9cdb122a4c7e6e7ddbc666740bc30b0e4091ccbca63c6fb1c
+  languageName: node
+  linkType: hard
+
 "@graphiql/react@npm:^0.23.0":
   version: 0.23.0
   resolution: "@graphiql/react@npm:0.23.0"
@@ -4774,6 +4902,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graphiql/toolkit@npm:0.11.0":
+  version: 0.11.0
+  resolution: "@graphiql/toolkit@npm:0.11.0"
+  dependencies:
+    "@n1ru4l/push-pull-async-iterable-iterator": "npm:^3.1.0"
+    meros: "npm:^1.1.4"
+  peerDependencies:
+    graphql: ^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2
+    graphql-ws: ">= 4.5.0"
+  peerDependenciesMeta:
+    graphql-ws:
+      optional: true
+  checksum: 10c0/2a02e8de23bdf46d5c4a814f6651dd6bb69cbfef43ef672c67fb8081b795dc9d162b6e973e33074fab4e3f28f741569570a485fea5a0c6eaca76ff4cae284e1d
+  languageName: node
+  linkType: hard
+
 "@graphiql/toolkit@npm:^0.9.2":
   version: 0.9.2
   resolution: "@graphiql/toolkit@npm:0.9.2"
@@ -5611,17 +5755,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.8":
-  version: 0.11.14
-  resolution: "@humanwhocodes/config-array@npm:0.11.14"
-  dependencies:
-    "@humanwhocodes/object-schema": "npm:^2.0.2"
-    debug: "npm:^4.3.1"
-    minimatch: "npm:^3.0.5"
-  checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541
-  languageName: node
-  linkType: hard
-
 "@humanwhocodes/module-importer@npm:^1.0.1":
   version: 1.0.1
   resolution: "@humanwhocodes/module-importer@npm:1.0.1"
@@ -5629,10 +5762,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.2":
-  version: 2.0.3
-  resolution: "@humanwhocodes/object-schema@npm:2.0.3"
-  checksum: 10c0/80520eabbfc2d32fe195a93557cef50dfe8c8905de447f022675aaf66abc33ae54098f5ea78548d925aa671cd4ab7c7daa5ad704fe42358c9b5e7db60f80696c
+"@humanwhocodes/retry@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@humanwhocodes/retry@npm:0.3.0"
+  checksum: 10c0/7111ec4e098b1a428459b4e3be5a5d2a13b02905f805a2468f4fa628d072f0de2da26a27d04f65ea2846f73ba51f4204661709f05bfccff645e3cedef8781bb6
   languageName: node
   linkType: hard
 
@@ -5793,246 +5926,246 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lexical/clipboard@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/clipboard@npm:0.12.2"
+"@lexical/clipboard@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/clipboard@npm:0.12.0"
   dependencies:
-    "@lexical/html": "npm:0.12.2"
-    "@lexical/list": "npm:0.12.2"
-    "@lexical/selection": "npm:0.12.2"
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/html": "npm:0.12.0"
+    "@lexical/list": "npm:0.12.0"
+    "@lexical/selection": "npm:0.12.0"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/46322d3af1b091c073d8dd87aed120babb7663fa9a375c62c3d4eacea25fc81d559d1d0e91f5cc52c85f2c813130dbd980c44bc3387a0675ff4e62cb0e4c5051
+    lexical: 0.12.0
+  checksum: 10c0/5b82a5428601069d72e276addbcc530c845977fa7e83b24e66b7ca3ea60b39f7bae2758e3080b8716ba413cad3ceb41bafec1d0ef165cd336934e1eb44ac6324
   languageName: node
   linkType: hard
 
-"@lexical/code@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/code@npm:0.12.2"
+"@lexical/code@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/code@npm:0.12.0"
   dependencies:
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/utils": "npm:0.12.0"
     prismjs: "npm:^1.27.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/ce3a3f1336a9efecd4824978ae32db3175b7404f0df93887f2825536133258cca1c6f6006a86edcd8705e91a172dda13638d70f35349220fa90ef831befbf118
+    lexical: 0.12.0
+  checksum: 10c0/8557855bb4c66240544aa125b005ef35a1573c79d75804d6dfc4681062debfa59e123933cf2a1c89c59e4bcfbd0ed2a90cd1d0637ef4008d1d96edf3ffda980e
   languageName: node
   linkType: hard
 
-"@lexical/dragon@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/dragon@npm:0.12.2"
+"@lexical/dragon@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/dragon@npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/6b929299df4b8065a05cdc46b6cd23f7896a3273a50623643258fb24b7d3c17ebdd0c0e3efa5d3e90502b2e6dcfd2414e31c187d9f4c68e0908dac258fbf72db
+    lexical: 0.12.0
+  checksum: 10c0/56dc1ef7b3032f05434ecf745200cf82cc73c4552f7bd6d3c2d619f372f5bb64ec9b06330b8258e1b416181b942c2a6fca8a4a0e11d658a5b1b6fff4026c4661
   languageName: node
   linkType: hard
 
-"@lexical/hashtag@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/hashtag@npm:0.12.2"
+"@lexical/hashtag@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/hashtag@npm:0.12.0"
   dependencies:
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/4686163514e28ea4a762db2850f168b2ce94a6a417651bd55d6ce789e34cbcc59c9b294705615dcfbad522f052d3f063efb1bcd000efa306da723ab807ec1411
+    lexical: 0.12.0
+  checksum: 10c0/f7ecb11ed9e7bb0b99e37804ebfe7fa699fd1e3253dfe63c3cce01c3015e54114fdbf0e990fc04d3a3e2415b69cbe7ecdc8182093cf579520e38bb05e4185239
   languageName: node
   linkType: hard
 
-"@lexical/history@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/history@npm:0.12.2"
+"@lexical/history@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/history@npm:0.12.0"
   dependencies:
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/4483230ccd67e569a4aff6183d116573a1feab3b0fa3bafb5bd9f6873956e182d78dab114a705c5401ae1e599b5ce95c0ac5430f42808c886a0238e502125f5d
+    lexical: 0.12.0
+  checksum: 10c0/eafd270584742d7ed39bb298a4c836648a871c3547647b1a5803f57c917a87db1c8ec3fdef6edaba12230e7de4337e1fe648aa525bf288380147f3da90c80637
   languageName: node
   linkType: hard
 
-"@lexical/html@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/html@npm:0.12.2"
+"@lexical/html@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/html@npm:0.12.0"
   dependencies:
-    "@lexical/selection": "npm:0.12.2"
+    "@lexical/selection": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/db79a2e4e4b40b52bb390425ecb1a2a21a714dfb934075fb48600a9d06319b31e4e57311f43a454c010fa44cdc5dbd8241ca8066dc6f0e5203426aff08aab130
+    lexical: 0.12.0
+  checksum: 10c0/11c985299d4be82f8c06d5b710e143a3082495cd8fc5813a05fa9120c3cf9b96597355b82844b2b92dbe0644d4da7e8565b6d7f0f074a059e099d23c7880c12f
   languageName: node
   linkType: hard
 
-"@lexical/link@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/link@npm:0.12.2"
+"@lexical/link@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/link@npm:0.12.0"
   dependencies:
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/0e9b8325e02904934c8086b4ba614098222b41db74ad62d138a83b01bc1d894a9f2f23c91d7eb5339a47ce910f5b5471bc67e2134c17af397da05c20a71ad862
+    lexical: 0.12.0
+  checksum: 10c0/0fe52cf15dd795d21252d85fbcc2488ec6fd63af922771cdabb2e69631545ff056c23fe6f5d8b9cb9bbdc968e5e09b082c45236b1f3126e2eb9206e3057566f4
   languageName: node
   linkType: hard
 
-"@lexical/list@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/list@npm:0.12.2"
+"@lexical/list@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/list@npm:0.12.0"
   dependencies:
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/68501e8a4c7b45b321e49c5cab1046a3b52a5724ad59bf2440b8dcfac0a0e63b16dab5fde54414ed9dd69b60d3f73ac287709c066c002761b717019aa308e8e9
+    lexical: 0.12.0
+  checksum: 10c0/63c9c79c1d4858864a1d7202d081c2338be69fb5415a3590e4192e458b5d1deee0c8aa435e5ab70717d46d5470547eb6d9648b96e2c80e865de3bf9d2fe29837
   languageName: node
   linkType: hard
 
-"@lexical/mark@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/mark@npm:0.12.2"
+"@lexical/mark@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/mark@npm:0.12.0"
   dependencies:
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/5f564eeac16c4c73234574cb8eff25be80f84c68b503f801a069026042bd8894827a23b801ba4621bc45cb30cb0c7f74ce4e3d6fcc91691821aa1ed55f986c06
+    lexical: 0.12.0
+  checksum: 10c0/f3fb37a95bffffb88a44c7864ddffef1d811691a4b679b722e59feef511632497ebf81d2aa3e20f252134433f14b44b8e0187d742cb98ef6324a50d62e2020ab
   languageName: node
   linkType: hard
 
-"@lexical/markdown@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/markdown@npm:0.12.2"
+"@lexical/markdown@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/markdown@npm:0.12.0"
   dependencies:
-    "@lexical/code": "npm:0.12.2"
-    "@lexical/link": "npm:0.12.2"
-    "@lexical/list": "npm:0.12.2"
-    "@lexical/rich-text": "npm:0.12.2"
-    "@lexical/text": "npm:0.12.2"
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/code": "npm:0.12.0"
+    "@lexical/link": "npm:0.12.0"
+    "@lexical/list": "npm:0.12.0"
+    "@lexical/rich-text": "npm:0.12.0"
+    "@lexical/text": "npm:0.12.0"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/48204166cb3d2b63c5265912fa2d8029f455c285601233f27ad592074df7ef2a5d31e8d2c0966af5e0fc1822f6863d0b67ebd6092ab440e329927f1b73abd8d2
+    lexical: 0.12.0
+  checksum: 10c0/53dfb1c8b10241d22ddeb27bf31eda46826376f0083809d4f4c4a2fb76fb07f03be718278b289cb639ada7b6832996045390483f1dc373fef3001797c04a5cfd
   languageName: node
   linkType: hard
 
-"@lexical/offset@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/offset@npm:0.12.2"
+"@lexical/offset@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/offset@npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/4666f89ba0df524bfd9c57679b2c2287e8a8bf24c028354ef76fb8a860707becc5f2008b7ddd39b0043c6a1cd4d60d1c5d0577858a1067c7774cc4ef49c93f39
+    lexical: 0.12.0
+  checksum: 10c0/9aa7ebbbc865a5e25f8343366ced2c4e8b48c95fc63457778f3d1f88f42284eb1e154d5a3855deebd124722a257a313ec7fd806cb9770510783c2f870bd4cddf
   languageName: node
   linkType: hard
 
-"@lexical/overflow@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/overflow@npm:0.12.2"
+"@lexical/overflow@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/overflow@npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/2c3860fb22e10ad3290dc4cddc334b87d9cbddd4bdaca315063c67525e168ffdf7b694b8556e3095d9edb293a5868c424ee6bd65f6a1720feb2f770e9e9d4673
+    lexical: 0.12.0
+  checksum: 10c0/6a32eb935d61f1bfb91dcadfd3c9f1336d5ee5a255336e745a02aa4280d04afde083dc972c7a79833336791c5282a9d850bd4d56b11417d34787d56f058440da
   languageName: node
   linkType: hard
 
-"@lexical/plain-text@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/plain-text@npm:0.12.2"
+"@lexical/plain-text@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/plain-text@npm:0.12.0"
   peerDependencies:
-    "@lexical/clipboard": 0.12.2
-    "@lexical/selection": 0.12.2
-    "@lexical/utils": 0.12.2
-    lexical: 0.12.2
-  checksum: 10c0/dbc6b386ea2a9c7f29e081be9d8a597e6139b3fc97463b84ad2cadf13153bbd056157fe3e56b0dafd9f5cdf98089c749205420b9824590ae9675e588fda5d421
+    "@lexical/clipboard": 0.12.0
+    "@lexical/selection": 0.12.0
+    "@lexical/utils": 0.12.0
+    lexical: 0.12.0
+  checksum: 10c0/ccaac8dbe1132a00047fc36af159c5b5554b6062dd5371b2f5e6051548e6e3dd8d633f755fead76fedaead9f6738b103017320faf4849b9aa22f0ed4338b17c5
   languageName: node
   linkType: hard
 
-"@lexical/react@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/react@npm:0.12.2"
-  dependencies:
-    "@lexical/clipboard": "npm:0.12.2"
-    "@lexical/code": "npm:0.12.2"
-    "@lexical/dragon": "npm:0.12.2"
-    "@lexical/hashtag": "npm:0.12.2"
-    "@lexical/history": "npm:0.12.2"
-    "@lexical/link": "npm:0.12.2"
-    "@lexical/list": "npm:0.12.2"
-    "@lexical/mark": "npm:0.12.2"
-    "@lexical/markdown": "npm:0.12.2"
-    "@lexical/overflow": "npm:0.12.2"
-    "@lexical/plain-text": "npm:0.12.2"
-    "@lexical/rich-text": "npm:0.12.2"
-    "@lexical/selection": "npm:0.12.2"
-    "@lexical/table": "npm:0.12.2"
-    "@lexical/text": "npm:0.12.2"
-    "@lexical/utils": "npm:0.12.2"
-    "@lexical/yjs": "npm:0.12.2"
+"@lexical/react@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/react@npm:0.12.0"
+  dependencies:
+    "@lexical/clipboard": "npm:0.12.0"
+    "@lexical/code": "npm:0.12.0"
+    "@lexical/dragon": "npm:0.12.0"
+    "@lexical/hashtag": "npm:0.12.0"
+    "@lexical/history": "npm:0.12.0"
+    "@lexical/link": "npm:0.12.0"
+    "@lexical/list": "npm:0.12.0"
+    "@lexical/mark": "npm:0.12.0"
+    "@lexical/markdown": "npm:0.12.0"
+    "@lexical/overflow": "npm:0.12.0"
+    "@lexical/plain-text": "npm:0.12.0"
+    "@lexical/rich-text": "npm:0.12.0"
+    "@lexical/selection": "npm:0.12.0"
+    "@lexical/table": "npm:0.12.0"
+    "@lexical/text": "npm:0.12.0"
+    "@lexical/utils": "npm:0.12.0"
+    "@lexical/yjs": "npm:0.12.0"
     react-error-boundary: "npm:^3.1.4"
   peerDependencies:
-    lexical: 0.12.2
+    lexical: 0.12.0
     react: ">=17.x"
     react-dom: ">=17.x"
-  checksum: 10c0/042eda13d4078cbc65151fad3421da5b7770a427e87fa264292e877572ee0d92dff82594e99e261a99bb0f9a48050689af70c33fd35fa564f077220d9c4381bf
+  checksum: 10c0/c6e6e2587b508771ca9b4e58312af9ae88ee933ff2c0b18754b4a76fa8f64faaed24204d329627c7e329e542b1d8fce01d833c21967ddb030d6c60944130e896
   languageName: node
   linkType: hard
 
-"@lexical/rich-text@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/rich-text@npm:0.12.2"
+"@lexical/rich-text@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/rich-text@npm:0.12.0"
   peerDependencies:
-    "@lexical/clipboard": 0.12.2
-    "@lexical/selection": 0.12.2
-    "@lexical/utils": 0.12.2
-    lexical: 0.12.2
-  checksum: 10c0/e7c6faecf4ef6b78ded7bebe6fae0929830e8dad760e7a000b273959ecd55a16570d80987aac096ccce043e089aed5dac2560ca480bf63f1965a1246fc22ccbc
+    "@lexical/clipboard": 0.12.0
+    "@lexical/selection": 0.12.0
+    "@lexical/utils": 0.12.0
+    lexical: 0.12.0
+  checksum: 10c0/0d0b1b7a398b7a8e81a4a253a77aa24aec399bb2563ab7faa85ccbb86885b0f5c165b3eb642e54a913a9e570eeafab3450b1fd462af5a4907bd7f8d491c17658
   languageName: node
   linkType: hard
 
-"@lexical/selection@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/selection@npm:0.12.2"
+"@lexical/selection@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/selection@npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/68bdac4e7f86120161ab25bc546ee373f7b06034bd7975634874b089d15a300ec14e3644a13e5158e22cc495933d7388d61342fdedb0cab57759b72f34233708
+    lexical: 0.12.0
+  checksum: 10c0/7e27f853f451994604b48386dd33eec1c2c752710bb008cf864d532b34872dd99e42d9d53cad75508519e14746839efd91c372c0dddb4ab972372a10d0610b2f
   languageName: node
   linkType: hard
 
-"@lexical/table@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/table@npm:0.12.2"
+"@lexical/table@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/table@npm:0.12.0"
   dependencies:
-    "@lexical/utils": "npm:0.12.2"
+    "@lexical/utils": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/abbfae92238ee4a3a5b0468b14e2a1eae38feca15227121743121f925c1f222331a3ba19307c00faf401a9bcf6597608b3592341315325773e17132e93b0c790
+    lexical: 0.12.0
+  checksum: 10c0/92bf53a3b4eaea22b4b562fb60eab82377664e7382b0ecfd1c0a967b38319bb8ba69fb68358bc4db8a161718aa6751e687ac68d09389f351d74647be9a612242
   languageName: node
   linkType: hard
 
-"@lexical/text@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/text@npm:0.12.2"
+"@lexical/text@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/text@npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/8d278d2028dc990991367fcf8774ff6fc1f5ac9e1826184e0fed9d6e440fa574ec9f0aa532acfc05fc91c245dc859bb5c6933b0a194d2a8e64751c721e57f37d
+    lexical: 0.12.0
+  checksum: 10c0/9cafb193e25cb36b2d0426576a1c914a89d35a3599d76c9547864432343c745be67572c5886fdbd98eb81ea9bcdb2fbdd14f686c37c170133420cc93f286617a
   languageName: node
   linkType: hard
 
-"@lexical/utils@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/utils@npm:0.12.2"
+"@lexical/utils@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/utils@npm:0.12.0"
   dependencies:
-    "@lexical/list": "npm:0.12.2"
-    "@lexical/selection": "npm:0.12.2"
-    "@lexical/table": "npm:0.12.2"
+    "@lexical/list": "npm:0.12.0"
+    "@lexical/selection": "npm:0.12.0"
+    "@lexical/table": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
-  checksum: 10c0/042f40f61afd350312f76f3103a49746ca69ac2b168dac5eed3d50fab9b78c1ac09bacfdf11bbbba0b2cd6cc8b74b085491990f284cd5456dead82634e0922f1
+    lexical: 0.12.0
+  checksum: 10c0/1580d61a31107918db73e694e22d7e25a3a8dc6e5947f356f4cdfa0e92e8ccdf592ebeecc38557bc506d7ddb88a22628f558346e2b011af85e12466fa5f96133
   languageName: node
   linkType: hard
 
-"@lexical/yjs@npm:0.12.2":
-  version: 0.12.2
-  resolution: "@lexical/yjs@npm:0.12.2"
+"@lexical/yjs@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@lexical/yjs@npm:0.12.0"
   dependencies:
-    "@lexical/offset": "npm:0.12.2"
+    "@lexical/offset": "npm:0.12.0"
   peerDependencies:
-    lexical: 0.12.2
+    lexical: 0.12.0
     yjs: ">=13.5.22"
-  checksum: 10c0/ae6615b6f1d1a1a4e39d62d4c2624e8fc17bac68a44d12a29d00913a9a3d297274d79025c814b2db5429da93a9eee654c5fc6f2d366403a3f2b1ff665bc5f937
+  checksum: 10c0/095fcb94b48c10feeff4f75585481738f1214756aaf314b640db788dbbe8d4fbbd06389175f0f266e66f6bc53521328bc9af3b86985a5abdbe73414c6df7ecfa
   languageName: node
   linkType: hard
 
@@ -8226,12 +8359,15 @@ __metadata:
   dependencies:
     "@apollo/client": "npm:3.11.2"
     "@auth0/auth0-react": "npm:2.2.2"
+    "@aws-amplify/auth": "npm:5.3.1"
     "@aws-amplify/ui-react": "npm:5.3.1"
     "@carbon/colors": "npm:11.20.1"
     "@emotion/jest": "npm:11.11.0"
     "@emotion/react": "npm:11.11.1"
     "@emotion/styled": "npm:11.11.0"
+    "@floating-ui/dom": "npm:1.6.10"
     "@floating-ui/react": "npm:0.24.7"
+    "@graphiql/toolkit": "npm:0.11.0"
     "@graphql-codegen/cli": "npm:3.3.1"
     "@graphql-codegen/client-preset": "npm:4.0.1"
     "@graphql-codegen/fragment-matcher": "npm:4.0.1"
@@ -8239,7 +8375,17 @@ __metadata:
     "@graphql-codegen/typescript": "npm:4.0.1"
     "@graphql-codegen/typescript-operations": "npm:4.0.1"
     "@graphql-codegen/typescript-react-apollo": "npm:3.3.7"
-    "@lexical/react": "npm:0.12.2"
+    "@lexical/code": "npm:0.12.0"
+    "@lexical/hashtag": "npm:0.12.0"
+    "@lexical/link": "npm:0.12.0"
+    "@lexical/list": "npm:0.12.0"
+    "@lexical/mark": "npm:0.12.0"
+    "@lexical/overflow": "npm:0.12.0"
+    "@lexical/react": "npm:0.12.0"
+    "@lexical/rich-text": "npm:0.12.0"
+    "@lexical/selection": "npm:0.12.0"
+    "@lexical/table": "npm:0.12.0"
+    "@lexical/utils": "npm:0.12.0"
     "@monaco-editor/react": "npm:4.6.0"
     "@playwright/test": "npm:1.39.0"
     "@popperjs/core": "npm:2.11.8"
@@ -8248,10 +8394,12 @@ __metadata:
     "@rot1024/use-transition": "npm:1.0.0"
     "@sentry/browser": "npm:7.77.0"
     "@seznam/compose-react-refs": "npm:1.0.6"
+    "@storybook/addon-actions": "npm:7.5.2"
     "@storybook/addon-essentials": "npm:7.5.2"
     "@storybook/addon-styling": "npm:1.3.7"
     "@storybook/addons": "npm:7.5.2"
     "@storybook/manager-api": "npm:7.5.2"
+    "@storybook/preview-api": "npm:7.5.2"
     "@storybook/react": "npm:7.5.2"
     "@storybook/react-vite": "npm:7.5.2"
     "@storybook/theming": "npm:7.5.2"
@@ -8261,6 +8409,7 @@ __metadata:
     "@types/apollo-upload-client": "npm:18.0.0"
     "@types/carbon__colors": "npm:10.31.2"
     "@types/crypto-js": "npm:4.2.2"
+    "@types/js-yaml": "npm:4"
     "@types/lodash-es": "npm:4.17.10"
     "@types/node": "npm:20.14.12"
     "@types/react": "npm:18.3.3"
@@ -8271,6 +8420,7 @@ __metadata:
     "@types/styled-components": "npm:5.1.29"
     "@types/tinycolor2": "npm:1.4.5"
     "@types/uuid": "npm:9.0.6"
+    "@ungap/event-target": "npm:0.2.4"
     "@vitejs/plugin-react-swc": "npm:3.5.0"
     "@vitest/coverage-v8": "npm:0.34.6"
     "@welldone-software/why-did-you-render": "npm:7.0.1"
@@ -8284,8 +8434,8 @@ __metadata:
     dayjs: "npm:1.11.10"
     del-cli: "npm:5.1.0"
     dotenv: "npm:16.3.1"
-    eslint: "npm:8.40.0"
-    eslint-config-reearth: "npm:0.2.2"
+    eslint: "npm:9.9.0"
+    eslint-config-reearth: "npm:0.3.6"
     eslint-plugin-playwright: "npm:0.12.0"
     eslint-plugin-storybook: "npm:0.6.15"
     formik: "npm:2.4.5"
@@ -8297,6 +8447,7 @@ __metadata:
     i18next-browser-languagedetector: "npm:7.0.1"
     i18next-parser: "npm:8.9.0"
     jotai: "npm:2.9.0"
+    js-yaml: "npm:4.1.0"
     jsdom: "npm:22.1.0"
     jszip: "npm:3.10.1"
     lexical: "npm:0.12.2"
@@ -8305,7 +8456,7 @@ __metadata:
     lodash-es: "npm:4.17.21"
     moment-timezone: "npm:0.5.43"
     npm-run-all: "npm:4.1.5"
-    prettier: "npm:2.8.8"
+    prettier: "npm:3.3.3"
     quickjs-emscripten: "npm:0.23.0"
     quickjs-emscripten-sync: "npm:1.5.2"
     rc-slider: "npm:9.7.5"
@@ -11891,7 +12042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/js-yaml@npm:^4.0.0":
+"@types/js-yaml@npm:4, @types/js-yaml@npm:^4.0.0":
   version: 4.0.9
   resolution: "@types/js-yaml@npm:4.0.9"
   checksum: 10c0/24de857aa8d61526bbfbbaa383aa538283ad17363fcd5bb5148e2c7f604547db36646440e739d78241ed008702a8920665d1add5618687b6743858fae00da211
@@ -12276,54 +12427,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.55.0"
+"@typescript-eslint/eslint-plugin@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.2.0"
   dependencies:
-    "@eslint-community/regexpp": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:5.55.0"
-    "@typescript-eslint/type-utils": "npm:5.55.0"
-    "@typescript-eslint/utils": "npm:5.55.0"
-    debug: "npm:^4.3.4"
-    grapheme-splitter: "npm:^1.0.4"
-    ignore: "npm:^5.2.0"
-    natural-compare-lite: "npm:^1.4.0"
-    semver: "npm:^7.3.7"
-    tsutils: "npm:^3.21.0"
+    "@eslint-community/regexpp": "npm:^4.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.2.0"
+    "@typescript-eslint/type-utils": "npm:8.2.0"
+    "@typescript-eslint/utils": "npm:8.2.0"
+    "@typescript-eslint/visitor-keys": "npm:8.2.0"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.3.1"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^1.3.0"
   peerDependencies:
-    "@typescript-eslint/parser": ^5.0.0
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    "@typescript-eslint/parser": ^8.0.0 || ^8.0.0-alpha.0
+    eslint: ^8.57.0 || ^9.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/c643acd0b2db5e70f43e055f0a2da68b333472ec1f12e080f32dba1c92aeac65d33afc9b5163e0dff16fe7877d2951349f7125ba4cad93438c92bc8c70c04be7
+  checksum: 10c0/17243ee1b34d78723fe3e1a308c64490eee49bd83301e3abe8a6f05bce05434d70f56caf75756b8cffa051154dc89cdf485114ede6781fc087f0aaca37a026ec
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/parser@npm:5.55.0"
+"@typescript-eslint/parser@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/parser@npm:8.2.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:5.55.0"
-    "@typescript-eslint/types": "npm:5.55.0"
-    "@typescript-eslint/typescript-estree": "npm:5.55.0"
+    "@typescript-eslint/scope-manager": "npm:8.2.0"
+    "@typescript-eslint/types": "npm:8.2.0"
+    "@typescript-eslint/typescript-estree": "npm:8.2.0"
+    "@typescript-eslint/visitor-keys": "npm:8.2.0"
     debug: "npm:^4.3.4"
   peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    eslint: ^8.57.0 || ^9.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/60b105fdbcac7a9cb319293fef3963b8875891f6b4b88995a797a62792fd1616c3a1393e9d1c018220b48877e9e20a08eefcce5cb0ce2f1dfc2194426fb8086e
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/scope-manager@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.55.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.55.0"
-    "@typescript-eslint/visitor-keys": "npm:5.55.0"
-  checksum: 10c0/1efd4594f29a32f4a35479af45a9404b91b370ec3cdaeb5b07d31d95964d276d1d9615283978921e26e926c9105bfabe8ef053d22fd2a1570306276d3647336c
+  checksum: 10c0/bb4ebc0a40b5e68c5287de17af3acf3045e2ef7886ebee8d1c4a6fd07bd6d55e9fc12bc7b89d07d15a2a4182cbf6380b50ad148d4a37e93d2e54930aa386a3bf
   languageName: node
   linkType: hard
 
@@ -12337,27 +12478,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/type-utils@npm:5.55.0"
+"@typescript-eslint/scope-manager@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.2.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:5.55.0"
-    "@typescript-eslint/utils": "npm:5.55.0"
+    "@typescript-eslint/types": "npm:8.2.0"
+    "@typescript-eslint/visitor-keys": "npm:8.2.0"
+  checksum: 10c0/8026e11d9cfbb674c62eb38929d08d42c4a373f3463c2591ed6603c496d3d00321f553edce47f1d7504b55fcbe9664ea2bdcaa3131c8c834bde1b1f07497af5d
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/type-utils@npm:8.2.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:8.2.0"
+    "@typescript-eslint/utils": "npm:8.2.0"
     debug: "npm:^4.3.4"
-    tsutils: "npm:^3.21.0"
-  peerDependencies:
-    eslint: "*"
+    ts-api-utils: "npm:^1.3.0"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/fe321050377d86d198cd3d0d7e13cf9098d65d48f787c155c896b93ccf107b82ae253f3872c8f2b2e464b86a3a9c4809289abfacc0c43bc4fa65be808666c88d
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/types@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/types@npm:5.55.0"
-  checksum: 10c0/d5eb71df4bdba4e9b3faf5bd4c7f64bceef0001ca83b2596a796d5c12f61070713788e5861ed424d012a5c3cdc175fd7b130acb33b1ca9b5fae77932088c87bf
+  checksum: 10c0/5ff387d39fec3ba47af167ca3e48a200f87e4b97b010170245f495cd3d2e30fd0a5b2a9b27aae2ae929c99f92acabcd07315944dc6f9de963bad1c61ba9ea53c
   languageName: node
   linkType: hard
 
@@ -12368,12 +12510,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.55.0"
+"@typescript-eslint/types@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/types@npm:8.2.0"
+  checksum: 10c0/2ffba0d0183dfdd2f859fb414013d17d009f5e886664823f973aaa1145243fceb52cfe26aa7c50208af7833b3703b7788337f1aab136c9a4eb36d905493847d1
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
   dependencies:
-    "@typescript-eslint/types": "npm:5.55.0"
-    "@typescript-eslint/visitor-keys": "npm:5.55.0"
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/visitor-keys": "npm:5.62.0"
     debug: "npm:^4.3.4"
     globby: "npm:^11.1.0"
     is-glob: "npm:^4.0.3"
@@ -12382,47 +12531,44 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/6b7a41a5425f1a6a018139a76b5c583516d64e4c055f2c37436ad97ae8abcd22671962a8bd30b5c60be2e64b9501c36acf5b5ad43d4a8416acccedac43247d20
+  checksum: 10c0/d7984a3e9d56897b2481940ec803cb8e7ead03df8d9cfd9797350be82ff765dfcf3cfec04e7355e1779e948da8f02bc5e11719d07a596eb1cb995c48a95e38cf
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
+"@typescript-eslint/typescript-estree@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.2.0"
   dependencies:
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/visitor-keys": "npm:5.62.0"
+    "@typescript-eslint/types": "npm:8.2.0"
+    "@typescript-eslint/visitor-keys": "npm:8.2.0"
     debug: "npm:^4.3.4"
     globby: "npm:^11.1.0"
     is-glob: "npm:^4.0.3"
-    semver: "npm:^7.3.7"
-    tsutils: "npm:^3.21.0"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^1.3.0"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/d7984a3e9d56897b2481940ec803cb8e7ead03df8d9cfd9797350be82ff765dfcf3cfec04e7355e1779e948da8f02bc5e11719d07a596eb1cb995c48a95e38cf
+  checksum: 10c0/f49aabc78e396908307394812fdebc4015ca407983efc361be106d3e2d58971dec4a1a725362fcfbd637f3d8150baa0735eb5929fd170172b7f2a65e06eeb3d2
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/utils@npm:5.55.0"
+"@typescript-eslint/utils@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/utils@npm:8.2.0"
   dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.2.0"
-    "@types/json-schema": "npm:^7.0.9"
-    "@types/semver": "npm:^7.3.12"
-    "@typescript-eslint/scope-manager": "npm:5.55.0"
-    "@typescript-eslint/types": "npm:5.55.0"
-    "@typescript-eslint/typescript-estree": "npm:5.55.0"
-    eslint-scope: "npm:^5.1.1"
-    semver: "npm:^7.3.7"
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@typescript-eslint/scope-manager": "npm:8.2.0"
+    "@typescript-eslint/types": "npm:8.2.0"
+    "@typescript-eslint/typescript-estree": "npm:8.2.0"
   peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 10c0/d2e1c6c1add496cd01b3f2f083048eaf36df844aa472886f181b228f2956be6f652937b6cf618dbde4473443d4ea982abd5049cedbb5e2708ca5573803e8cbb5
+    eslint: ^8.57.0 || ^9.0.0
+  checksum: 10c0/0f3d5cf804c2863ea9432ef76bfdb1cadbb244cbf8a64ac77c0e559c012a1e98382c4535354e54696c564c0abd9c10dffc78d38972c97035e963798d360d1830
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:^5.43.0, @typescript-eslint/utils@npm:^5.45.0":
+"@typescript-eslint/utils@npm:^5.45.0, @typescript-eslint/utils@npm:^5.58.0":
   version: 5.62.0
   resolution: "@typescript-eslint/utils@npm:5.62.0"
   dependencies:
@@ -12440,16 +12586,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.55.0":
-  version: 5.55.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.55.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.55.0"
-    eslint-visitor-keys: "npm:^3.3.0"
-  checksum: 10c0/c2ec2cbab7fddff4a55c381e32b1e1b6893ecd77440fa830ba13de920472e1fd48128ddbf4ab6022d13d7721c695685498915f20cd1146a7dd72287777233ba1
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/visitor-keys@npm:5.62.0":
   version: 5.62.0
   resolution: "@typescript-eslint/visitor-keys@npm:5.62.0"
@@ -12460,6 +12596,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.2.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.2.0"
+    eslint-visitor-keys: "npm:^3.4.3"
+  checksum: 10c0/788633bd2905c88ea2cf20d9e317a2bc992a70fcf725cb54bbe55a17c42138a6fe877c89fbda41a733e0e8ad6dce893163bada60509a1b856321f4329a316973
+  languageName: node
+  linkType: hard
+
 "@ungap/event-target@npm:0.2.4":
   version: 0.2.4
   resolution: "@ungap/event-target@npm:0.2.4"
@@ -12514,6 +12660,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/eslint-plugin@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "@vitest/eslint-plugin@npm:1.0.3"
+  peerDependencies:
+    "@typescript-eslint/utils": ">= 8.0"
+    eslint: ">= 8.57.0"
+    typescript: ">= 5.0.0"
+    vitest: "*"
+  peerDependenciesMeta:
+    "@typescript-eslint/utils":
+      optional: true
+    typescript:
+      optional: true
+    vitest:
+      optional: true
+  checksum: 10c0/875377c3af8945f2a8ab1cac9faadde5089a4829e75b9cc23969c874e17b399e34ace77595ad2996afe04ea72949d2ded137baa6fe5c230e7c10fec5c7b560e8
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:1.6.0":
   version: 1.6.0
   resolution: "@vitest/expect@npm:1.6.0"
@@ -12817,7 +12982,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.9.0":
+"acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.12.0, acorn@npm:^8.12.1, acorn@npm:^8.4.1":
   version: 8.12.1
   resolution: "acorn@npm:8.12.1"
   bin:
@@ -12888,7 +13053,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.10.0, ajv@npm:^6.12.4":
+"ajv@npm:^6.12.4":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
   dependencies:
@@ -12900,6 +13065,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"amazon-cognito-identity-js@npm:6.2.0":
+  version: 6.2.0
+  resolution: "amazon-cognito-identity-js@npm:6.2.0"
+  dependencies:
+    "@aws-crypto/sha256-js": "npm:1.2.2"
+    buffer: "npm:4.9.2"
+    fast-base64-decode: "npm:^1.0.0"
+    isomorphic-unfetch: "npm:^3.0.0"
+    js-cookie: "npm:^2.2.1"
+  checksum: 10c0/1241437cf6ef70108ea43f56f08e794cdca284ef402f1426669021e62034bb48517391ff64233539d20d4ea37cc2b9559dc12997776f6d80bb3a37d06fce8763
+  languageName: node
+  linkType: hard
+
 "amazon-cognito-identity-js@npm:6.3.6":
   version: 6.3.6
   resolution: "amazon-cognito-identity-js@npm:6.3.6"
@@ -13085,7 +13263,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.1.6":
+"array-includes@npm:^3.1.6, array-includes@npm:^3.1.7, array-includes@npm:^3.1.8":
   version: 3.1.8
   resolution: "array-includes@npm:3.1.8"
   dependencies:
@@ -13106,7 +13284,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flat@npm:^1.3.1":
+"array.prototype.findlast@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "array.prototype.findlast@npm:1.2.5"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/ddc952b829145ab45411b9d6adcb51a8c17c76bf89c9dd64b52d5dffa65d033da8c076ed2e17091779e83bc892b9848188d7b4b33453c5565e65a92863cb2775
+  languageName: node
+  linkType: hard
+
+"array.prototype.findlastindex@npm:^1.2.3":
+  version: 1.2.5
+  resolution: "array.prototype.findlastindex@npm:1.2.5"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/962189487728b034f3134802b421b5f39e42ee2356d13b42d2ddb0e52057ffdcc170b9524867f4f0611a6f638f4c19b31e14606e8bcbda67799e26685b195aa3
+  languageName: node
+  linkType: hard
+
+"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2":
   version: 1.3.2
   resolution: "array.prototype.flat@npm:1.3.2"
   dependencies:
@@ -13118,7 +13324,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.3.1":
+"array.prototype.flatmap@npm:^1.3.2":
   version: 1.3.2
   resolution: "array.prototype.flatmap@npm:1.3.2"
   dependencies:
@@ -13130,7 +13336,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.tosorted@npm:^1.1.1":
+"array.prototype.tosorted@npm:^1.1.4":
   version: 1.1.4
   resolution: "array.prototype.tosorted@npm:1.1.4"
   dependencies:
@@ -15394,7 +15600,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
+"define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
   dependencies:
@@ -15945,7 +16151,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3":
+"es-abstract@npm:^1.17.5, es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.1, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3":
   version: 1.23.3
   resolution: "es-abstract@npm:1.23.3"
   dependencies:
@@ -16032,6 +16238,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-iterator-helpers@npm:^1.0.19":
+  version: 1.0.19
+  resolution: "es-iterator-helpers@npm:1.0.19"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.3"
+    es-errors: "npm:^1.3.0"
+    es-set-tostringtag: "npm:^2.0.3"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.2.4"
+    globalthis: "npm:^1.0.3"
+    has-property-descriptors: "npm:^1.0.2"
+    has-proto: "npm:^1.0.3"
+    has-symbols: "npm:^1.0.3"
+    internal-slot: "npm:^1.0.7"
+    iterator.prototype: "npm:^1.1.2"
+    safe-array-concat: "npm:^1.1.2"
+  checksum: 10c0/ae8f0241e383b3d197383b9842c48def7fce0255fb6ed049311b686ce295595d9e389b466f6a1b7d4e7bb92d82f5e716d6fae55e20c1040249bf976743b038c5
+  languageName: node
+  linkType: hard
+
 "es-module-lexer@npm:^0.9.3":
   version: 0.9.3
   resolution: "es-module-lexer@npm:0.9.3"
@@ -16387,39 +16615,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-prettier@npm:8.7.0":
-  version: 8.7.0
-  resolution: "eslint-config-prettier@npm:8.7.0"
-  peerDependencies:
-    eslint: ">=7.0.0"
-  bin:
-    eslint-config-prettier: bin/cli.js
-  checksum: 10c0/5329cdb0e1ba99f9c6197c9ecc9d5af0332917a55a1b434c036e0f5c0bfab2f828c56512df49080264d0d825e425d834a2de78a194c426f30e3d3711a5272735
-  languageName: node
-  linkType: hard
-
-"eslint-config-reearth@npm:0.2.2":
-  version: 0.2.2
-  resolution: "eslint-config-reearth@npm:0.2.2"
+"eslint-config-reearth@npm:0.3.6":
+  version: 0.3.6
+  resolution: "eslint-config-reearth@npm:0.3.6"
   dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:5.55.0"
-    "@typescript-eslint/parser": "npm:5.55.0"
-    eslint-config-prettier: "npm:8.7.0"
-    eslint-plugin-import: "npm:2.27.5"
+    "@eslint/compat": "npm:1.1.1"
+    "@eslint/eslintrc": "npm:3.1.0"
+    "@eslint/js": "npm:9.9.1"
+    "@vitest/eslint-plugin": "npm:^1.0.3"
+    eslint-plugin-import: "npm:2.29.1"
     eslint-plugin-node: "npm:11.1.0"
-    eslint-plugin-prettier: "npm:4.2.1"
-    eslint-plugin-react: "npm:7.32.2"
-    eslint-plugin-react-hooks: "npm:4.6.0"
-    eslint-plugin-testing-library: "npm:5.10.2"
+    eslint-plugin-react: "npm:7.35.0"
+    eslint-plugin-react-hooks: "npm:4.6.2"
+    eslint-plugin-testing-library: "npm:6.3.0"
+    globals: "npm:15.9.0"
+    typescript-eslint: "npm:8.2.0"
   peerDependencies:
-    eslint: "*"
-    prettier: "*"
+    eslint: ">=9"
     typescript: "*"
-  checksum: 10c0/aeb839033d6b4f6f4b0f67e738b20efa6fe67d481c8399d1608022b7fdf9835062ad481b9e9f599ed2580f2f8b99cc5b2032f850afd63d13a5f9c4a233c58167
+  checksum: 10c0/3187fd84790e997ba9d1bc0b2fcfc930cdbf2e6279bb61db0712a801937726e8b6fba31223ca08831918adf781a8e0106571a60b8f6bdb3cac9f018f3c56950c
   languageName: node
   linkType: hard
 
-"eslint-import-resolver-node@npm:^0.3.7":
+"eslint-import-resolver-node@npm:^0.3.9":
   version: 0.3.9
   resolution: "eslint-import-resolver-node@npm:0.3.9"
   dependencies:
@@ -16430,7 +16648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-module-utils@npm:^2.7.4":
+"eslint-module-utils@npm:^2.8.0":
   version: 2.8.1
   resolution: "eslint-module-utils@npm:2.8.1"
   dependencies:
@@ -16454,28 +16672,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-import@npm:2.27.5":
-  version: 2.27.5
-  resolution: "eslint-plugin-import@npm:2.27.5"
+"eslint-plugin-import@npm:2.29.1":
+  version: 2.29.1
+  resolution: "eslint-plugin-import@npm:2.29.1"
   dependencies:
-    array-includes: "npm:^3.1.6"
-    array.prototype.flat: "npm:^1.3.1"
-    array.prototype.flatmap: "npm:^1.3.1"
+    array-includes: "npm:^3.1.7"
+    array.prototype.findlastindex: "npm:^1.2.3"
+    array.prototype.flat: "npm:^1.3.2"
+    array.prototype.flatmap: "npm:^1.3.2"
     debug: "npm:^3.2.7"
     doctrine: "npm:^2.1.0"
-    eslint-import-resolver-node: "npm:^0.3.7"
-    eslint-module-utils: "npm:^2.7.4"
-    has: "npm:^1.0.3"
-    is-core-module: "npm:^2.11.0"
+    eslint-import-resolver-node: "npm:^0.3.9"
+    eslint-module-utils: "npm:^2.8.0"
+    hasown: "npm:^2.0.0"
+    is-core-module: "npm:^2.13.1"
     is-glob: "npm:^4.0.3"
     minimatch: "npm:^3.1.2"
-    object.values: "npm:^1.1.6"
-    resolve: "npm:^1.22.1"
-    semver: "npm:^6.3.0"
-    tsconfig-paths: "npm:^3.14.1"
+    object.fromentries: "npm:^2.0.7"
+    object.groupby: "npm:^1.0.1"
+    object.values: "npm:^1.1.7"
+    semver: "npm:^6.3.1"
+    tsconfig-paths: "npm:^3.15.0"
   peerDependencies:
     eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-  checksum: 10c0/e561e79889ad3c662e305ca9a9b273a5baf8f492dad8198e42987efc4f0532c0d49caee206e78e057cec3365b36f9cef8340915e9f08adec5f29c9d631e6f691
+  checksum: 10c0/5f35dfbf4e8e67f741f396987de9504ad125c49f4144508a93282b4ea0127e052bde65ab6def1f31b6ace6d5d430be698333f75bdd7dca3bc14226c92a083196
   languageName: node
   linkType: hard
 
@@ -16508,52 +16728,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-prettier@npm:4.2.1":
-  version: 4.2.1
-  resolution: "eslint-plugin-prettier@npm:4.2.1"
-  dependencies:
-    prettier-linter-helpers: "npm:^1.0.0"
-  peerDependencies:
-    eslint: ">=7.28.0"
-    prettier: ">=2.0.0"
-  peerDependenciesMeta:
-    eslint-config-prettier:
-      optional: true
-  checksum: 10c0/c5e7316baeab9d96ac39c279f16686e837277e5c67a8006c6588bcff317edffdc1532fb580441eb598bc6770f6444006756b68a6575dff1cd85ebe227252d0b7
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-react-hooks@npm:4.6.0":
-  version: 4.6.0
-  resolution: "eslint-plugin-react-hooks@npm:4.6.0"
+"eslint-plugin-react-hooks@npm:4.6.2":
+  version: 4.6.2
+  resolution: "eslint-plugin-react-hooks@npm:4.6.2"
   peerDependencies:
     eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-  checksum: 10c0/58c7e10ea5792c33346fcf5cb4024e14837035ce412ff99c2dcb7c4f903dc9b17939078f80bfef826301ce326582c396c00e8e0ac9d10ac2cde2b42d33763c65
+  checksum: 10c0/4844e58c929bc05157fb70ba1e462e34f1f4abcbc8dd5bbe5b04513d33e2699effb8bca668297976ceea8e7ebee4e8fc29b9af9d131bcef52886feaa2308b2cc
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:7.32.2":
-  version: 7.32.2
-  resolution: "eslint-plugin-react@npm:7.32.2"
+"eslint-plugin-react@npm:7.35.0":
+  version: 7.35.0
+  resolution: "eslint-plugin-react@npm:7.35.0"
   dependencies:
-    array-includes: "npm:^3.1.6"
-    array.prototype.flatmap: "npm:^1.3.1"
-    array.prototype.tosorted: "npm:^1.1.1"
+    array-includes: "npm:^3.1.8"
+    array.prototype.findlast: "npm:^1.2.5"
+    array.prototype.flatmap: "npm:^1.3.2"
+    array.prototype.tosorted: "npm:^1.1.4"
     doctrine: "npm:^2.1.0"
+    es-iterator-helpers: "npm:^1.0.19"
     estraverse: "npm:^5.3.0"
+    hasown: "npm:^2.0.2"
     jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
     minimatch: "npm:^3.1.2"
-    object.entries: "npm:^1.1.6"
-    object.fromentries: "npm:^2.0.6"
-    object.hasown: "npm:^1.1.2"
-    object.values: "npm:^1.1.6"
+    object.entries: "npm:^1.1.8"
+    object.fromentries: "npm:^2.0.8"
+    object.values: "npm:^1.2.0"
     prop-types: "npm:^15.8.1"
-    resolve: "npm:^2.0.0-next.4"
-    semver: "npm:^6.3.0"
-    string.prototype.matchall: "npm:^4.0.8"
+    resolve: "npm:^2.0.0-next.5"
+    semver: "npm:^6.3.1"
+    string.prototype.matchall: "npm:^4.0.11"
+    string.prototype.repeat: "npm:^1.0.0"
   peerDependencies:
-    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: 10c0/9ddd5cfc508555a5cb3edbdcc9138dd472d269d3a45da0be3e267ea2b3fa1b5990823675208c0e11376c9c55e46aaad5b7a5f46c965eb4dcf6f1eebcebf174c3
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+  checksum: 10c0/eedcc33de4b2cda91d56ae517a4f771a0c76da9c1e26c95543969012871381e11d4d6cffdf6fa8423036585c289eb3500f3f93fb1d314fb2624e0aa1e463305e
   languageName: node
   linkType: hard
 
@@ -16571,14 +16779,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-testing-library@npm:5.10.2":
-  version: 5.10.2
-  resolution: "eslint-plugin-testing-library@npm:5.10.2"
+"eslint-plugin-testing-library@npm:6.3.0":
+  version: 6.3.0
+  resolution: "eslint-plugin-testing-library@npm:6.3.0"
   dependencies:
-    "@typescript-eslint/utils": "npm:^5.43.0"
+    "@typescript-eslint/utils": "npm:^5.58.0"
   peerDependencies:
     eslint: ^7.5.0 || ^8.0.0
-  checksum: 10c0/bc5ddd052682a8b99615993f9174a643cfef836c7bcfe6c97b22365e60d42465d33b68cd10e4fc227baa5ebffade48c91ef8db3e5136c8f811401b5a7e4f187d
+  checksum: 10c0/9f388cb9101a38f30a8be9b0ddb6765fc69faccaf7b9ac02b5d662505b72023468f0c99d1a83fd18750e70a1b3d67d3cabc6e4f531fee0a753e35499e7f7461b
   languageName: node
   linkType: hard
 
@@ -16592,13 +16800,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^7.2.0":
-  version: 7.2.2
-  resolution: "eslint-scope@npm:7.2.2"
+"eslint-scope@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "eslint-scope@npm:8.0.2"
   dependencies:
     esrecurse: "npm:^4.3.0"
     estraverse: "npm:^5.2.0"
-  checksum: 10c0/613c267aea34b5a6d6c00514e8545ef1f1433108097e857225fed40d397dd6b1809dffd11c2fde23b37ca53d7bf935fe04d2a18e6fc932b31837b6ad67e1c116
+  checksum: 10c0/477f820647c8755229da913025b4567347fd1f0bf7cbdf3a256efff26a7e2e130433df052bd9e3d014025423dc00489bea47eb341002b15553673379c1a7dc36
   languageName: node
   linkType: hard
 
@@ -16618,60 +16826,66 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1":
+"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.3":
   version: 3.4.3
   resolution: "eslint-visitor-keys@npm:3.4.3"
   checksum: 10c0/92708e882c0a5ffd88c23c0b404ac1628cf20104a108c745f240a13c332a11aac54f49a22d5762efbffc18ecbc9a580d1b7ad034bf5f3cc3307e5cbff2ec9820
   languageName: node
   linkType: hard
 
-"eslint@npm:8.40.0":
-  version: 8.40.0
-  resolution: "eslint@npm:8.40.0"
+"eslint-visitor-keys@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "eslint-visitor-keys@npm:4.0.0"
+  checksum: 10c0/76619f42cf162705a1515a6868e6fc7567e185c7063a05621a8ac4c3b850d022661262c21d9f1fc1d144ecf0d5d64d70a3f43c15c3fc969a61ace0fb25698cf5
+  languageName: node
+  linkType: hard
+
+"eslint@npm:9.9.0":
+  version: 9.9.0
+  resolution: "eslint@npm:9.9.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.2.0"
-    "@eslint-community/regexpp": "npm:^4.4.0"
-    "@eslint/eslintrc": "npm:^2.0.3"
-    "@eslint/js": "npm:8.40.0"
-    "@humanwhocodes/config-array": "npm:^0.11.8"
+    "@eslint-community/regexpp": "npm:^4.11.0"
+    "@eslint/config-array": "npm:^0.17.1"
+    "@eslint/eslintrc": "npm:^3.1.0"
+    "@eslint/js": "npm:9.9.0"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
+    "@humanwhocodes/retry": "npm:^0.3.0"
     "@nodelib/fs.walk": "npm:^1.2.8"
-    ajv: "npm:^6.10.0"
+    ajv: "npm:^6.12.4"
     chalk: "npm:^4.0.0"
     cross-spawn: "npm:^7.0.2"
     debug: "npm:^4.3.2"
-    doctrine: "npm:^3.0.0"
     escape-string-regexp: "npm:^4.0.0"
-    eslint-scope: "npm:^7.2.0"
-    eslint-visitor-keys: "npm:^3.4.1"
-    espree: "npm:^9.5.2"
-    esquery: "npm:^1.4.2"
+    eslint-scope: "npm:^8.0.2"
+    eslint-visitor-keys: "npm:^4.0.0"
+    espree: "npm:^10.1.0"
+    esquery: "npm:^1.5.0"
     esutils: "npm:^2.0.2"
     fast-deep-equal: "npm:^3.1.3"
-    file-entry-cache: "npm:^6.0.1"
+    file-entry-cache: "npm:^8.0.0"
     find-up: "npm:^5.0.0"
     glob-parent: "npm:^6.0.2"
-    globals: "npm:^13.19.0"
-    grapheme-splitter: "npm:^1.0.4"
     ignore: "npm:^5.2.0"
-    import-fresh: "npm:^3.0.0"
     imurmurhash: "npm:^0.1.4"
     is-glob: "npm:^4.0.0"
     is-path-inside: "npm:^3.0.3"
-    js-sdsl: "npm:^4.1.4"
-    js-yaml: "npm:^4.1.0"
     json-stable-stringify-without-jsonify: "npm:^1.0.1"
     levn: "npm:^0.4.1"
     lodash.merge: "npm:^4.6.2"
     minimatch: "npm:^3.1.2"
     natural-compare: "npm:^1.4.0"
-    optionator: "npm:^0.9.1"
+    optionator: "npm:^0.9.3"
     strip-ansi: "npm:^6.0.1"
-    strip-json-comments: "npm:^3.1.0"
     text-table: "npm:^0.2.0"
+  peerDependencies:
+    jiti: "*"
+  peerDependenciesMeta:
+    jiti:
+      optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10c0/dfd4dbb5e2771d7c81852f29cec658fd9d29a0f252b6e962505ee8cd8b9c2c50707ebd7379333836b04514375268e7c09927372601d08354a151fe5db7d760a8
+  checksum: 10c0/3a22f68c99d75dcbafe6e2fef18d2b5bbcc960c2437f48a414ccf9ca214254733a18e6b79d07bbd374a2369a648413e421aabd07b11be3de5a44d5a4b9997877
   languageName: node
   linkType: hard
 
@@ -16682,14 +16896,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^9.5.2, espree@npm:^9.6.0":
-  version: 9.6.1
-  resolution: "espree@npm:9.6.1"
+"espree@npm:^10.0.1, espree@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "espree@npm:10.1.0"
   dependencies:
-    acorn: "npm:^8.9.0"
+    acorn: "npm:^8.12.0"
     acorn-jsx: "npm:^5.3.2"
-    eslint-visitor-keys: "npm:^3.4.1"
-  checksum: 10c0/1a2e9b4699b715347f62330bcc76aee224390c28bb02b31a3752e9d07549c473f5f986720483c6469cf3cfb3c9d05df612ffc69eb1ee94b54b739e67de9bb460
+    eslint-visitor-keys: "npm:^4.0.0"
+  checksum: 10c0/52e6feaa77a31a6038f0c0e3fce93010a4625701925b0715cd54a2ae190b3275053a0717db698697b32653788ac04845e489d6773b508d6c2e8752f3c57470a0
   languageName: node
   linkType: hard
 
@@ -16703,7 +16917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esquery@npm:^1.4.2":
+"esquery@npm:^1.5.0":
   version: 1.6.0
   resolution: "esquery@npm:1.6.0"
   dependencies:
@@ -16938,13 +17152,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-diff@npm:^1.1.2":
-  version: 1.3.0
-  resolution: "fast-diff@npm:1.3.0"
-  checksum: 10c0/5c19af237edb5d5effda008c891a18a585f74bf12953be57923f17a3a4d0979565fc64dbc73b9e20926b9d895f5b690c618cbb969af0cf022e3222471220ad29
-  languageName: node
-  linkType: hard
-
 "fast-fifo@npm:^1.3.2":
   version: 1.3.2
   resolution: "fast-fifo@npm:1.3.2"
@@ -17123,12 +17330,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "file-entry-cache@npm:6.0.1"
+"file-entry-cache@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "file-entry-cache@npm:8.0.0"
   dependencies:
-    flat-cache: "npm:^3.0.4"
-  checksum: 10c0/58473e8a82794d01b38e5e435f6feaf648e3f36fdb3a56e98f417f4efae71ad1c0d4ebd8a9a7c50c3ad085820a93fc7494ad721e0e4ebc1da3573f4e1c3c7cdd
+    flat-cache: "npm:^4.0.0"
+  checksum: 10c0/9e2b5938b1cd9b6d7e3612bdc533afd4ac17b2fc646569e9a8abbf2eb48e5eb8e316bc38815a3ef6a1b456f4107f0d0f055a614ca613e75db6bf9ff4d72c1638
   languageName: node
   linkType: hard
 
@@ -17233,14 +17440,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat-cache@npm:^3.0.4":
-  version: 3.2.0
-  resolution: "flat-cache@npm:3.2.0"
+"flat-cache@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "flat-cache@npm:4.0.1"
   dependencies:
     flatted: "npm:^3.2.9"
-    keyv: "npm:^4.5.3"
-    rimraf: "npm:^3.0.2"
-  checksum: 10c0/b76f611bd5f5d68f7ae632e3ae503e678d205cf97a17c6ab5b12f6ca61188b5f1f7464503efae6dc18683ed8f0b41460beb48ac4b9ac63fe6201296a91ba2f75
+    keyv: "npm:^4.5.4"
+  checksum: 10c0/2c59d93e9faa2523e4fda6b4ada749bed432cfa28c8e251f33b25795e426a1c6dbada777afb1f74fcfff33934fdbdea921ee738fcc33e71adc9d6eca984a1cfc
   languageName: node
   linkType: hard
 
@@ -17816,6 +18022,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globals@npm:15.9.0":
+  version: 15.9.0
+  resolution: "globals@npm:15.9.0"
+  checksum: 10c0/de4b553e412e7e830998578d51b605c492256fb2a9273eaeec6ec9ee519f1c5aa50de57e3979911607fd7593a4066420e01d8c3d551e7a6a236e96c521aee36c
+  languageName: node
+  linkType: hard
+
 "globals@npm:^11.1.0":
   version: 11.12.0
   resolution: "globals@npm:11.12.0"
@@ -17823,12 +18036,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^13.19.0":
-  version: 13.24.0
-  resolution: "globals@npm:13.24.0"
-  dependencies:
-    type-fest: "npm:^0.20.2"
-  checksum: 10c0/d3c11aeea898eb83d5ec7a99508600fbe8f83d2cf00cbb77f873dbf2bcb39428eff1b538e4915c993d8a3b3473fa71eeebfe22c9bb3a3003d1e26b1f2c8a42cd
+"globals@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "globals@npm:14.0.0"
+  checksum: 10c0/b96ff42620c9231ad468d4c58ff42afee7777ee1c963013ff8aabe095a451d0ceeb8dcd8ef4cbd64d2538cef45f787a78ba3a9574f4a634438963e334471302d
   languageName: node
   linkType: hard
 
@@ -17899,6 +18110,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: 10c0/e951259d8cd2e0d196c72ec711add7115d42eb9a8146c8eeda5b8d3ac91e5dd816b9cd68920726d9fd4490368e7ed86e9c423f40db87e2d8dfafa00fa17c3a31
+  languageName: node
+  linkType: hard
+
 "graphiql@npm:3.4.0":
   version: 3.4.0
   resolution: "graphiql@npm:3.4.0"
@@ -18111,13 +18329,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "has@npm:1.0.4"
-  checksum: 10c0/82c1220573dc1f0a014a5d6189ae52a1f820f99dfdc00323c3a725b5002dcb7f04e44f460fea7af068474b2dd7c88cbe1846925c84017be9e31e1708936d305b
-  languageName: node
-  linkType: hard
-
 "hasown@npm:^2.0.0, hasown@npm:^2.0.1, hasown@npm:^2.0.2":
   version: 2.0.2
   resolution: "hasown@npm:2.0.2"
@@ -18478,6 +18689,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
+  languageName: node
+  linkType: hard
+
 "immediate@npm:~3.0.5":
   version: 3.0.6
   resolution: "immediate@npm:3.0.6"
@@ -18499,7 +18717,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
+"import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
   dependencies:
@@ -18688,6 +18906,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-async-function@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "is-async-function@npm:2.0.0"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10c0/787bc931576aad525d751fc5ce211960fe91e49ac84a5c22d6ae0bc9541945fbc3f686dc590c3175722ce4f6d7b798a93f6f8ff4847fdb2199aea6f4baf5d668
+  languageName: node
+  linkType: hard
+
 "is-bigint@npm:^1.0.1":
   version: 1.0.4
   resolution: "is-bigint@npm:1.0.4"
@@ -18730,7 +18957,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.11.0, is-core-module@npm:^2.13.0, is-core-module@npm:^2.5.0":
+"is-core-module@npm:^2.13.0, is-core-module@npm:^2.5.0":
   version: 2.15.0
   resolution: "is-core-module@npm:2.15.0"
   dependencies:
@@ -18739,6 +18966,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-core-module@npm:^2.13.1":
+  version: 2.15.1
+  resolution: "is-core-module@npm:2.15.1"
+  dependencies:
+    hasown: "npm:^2.0.2"
+  checksum: 10c0/53432f10c69c40bfd2fa8914133a68709ff9498c86c3bf5fca3cdf3145a56fd2168cbf4a43b29843a6202a120a5f9c5ffba0a4322e1e3441739bc0b641682612
+  languageName: node
+  linkType: hard
+
 "is-data-view@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-data-view@npm:1.0.1"
@@ -18780,6 +19016,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-finalizationregistry@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "is-finalizationregistry@npm:1.0.2"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+  checksum: 10c0/81caecc984d27b1a35c68741156fc651fb1fa5e3e6710d21410abc527eb226d400c0943a167922b2e920f6b3e58b0dede9aa795882b038b85f50b3a4b877db86
+  languageName: node
+  linkType: hard
+
 "is-fullwidth-code-point@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-fullwidth-code-point@npm:3.0.0"
@@ -18794,7 +19039,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-generator-function@npm:^1.0.7":
+"is-generator-function@npm:^1.0.10, is-generator-function@npm:^1.0.7":
   version: 1.0.10
   resolution: "is-generator-function@npm:1.0.10"
   dependencies:
@@ -19230,6 +19475,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"iterator.prototype@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "iterator.prototype@npm:1.1.2"
+  dependencies:
+    define-properties: "npm:^1.2.1"
+    get-intrinsic: "npm:^1.2.1"
+    has-symbols: "npm:^1.0.3"
+    reflect.getprototypeof: "npm:^1.0.4"
+    set-function-name: "npm:^2.0.1"
+  checksum: 10c0/a32151326095e916f306990d909f6bbf23e3221999a18ba686419535dcd1749b10ded505e89334b77dc4c7a58a8508978f0eb16c2c8573e6d412eb7eb894ea79
+  languageName: node
+  linkType: hard
+
 "jackspeak@npm:^3.1.2":
   version: 3.4.3
   resolution: "jackspeak@npm:3.4.3"
@@ -19407,13 +19665,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-sdsl@npm:^4.1.4":
-  version: 4.4.2
-  resolution: "js-sdsl@npm:4.4.2"
-  checksum: 10c0/50707728fc31642164f4d83c8087f3750aaa99c450b008b19e236a1f190c9e48f9fc799615c341f9ca2c0803b15ab6f48d92a9cc3e6ffd20065cba7d7e742b92
-  languageName: node
-  linkType: hard
-
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -19728,7 +19979,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"keyv@npm:^4.5.3":
+"keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
   dependencies:
@@ -21047,7 +21298,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+"minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -21312,13 +21563,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"natural-compare-lite@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "natural-compare-lite@npm:1.4.0"
-  checksum: 10c0/f6cef26f5044515754802c0fc475d81426f3b90fe88c20fabe08771ce1f736ce46e0397c10acb569a4dd0acb84c7f1ee70676122f95d5bfdd747af3a6c6bbaa8
-  languageName: node
-  linkType: hard
-
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -21625,7 +21869,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.entries@npm:^1.1.6":
+"object.entries@npm:^1.1.8":
   version: 1.1.8
   resolution: "object.entries@npm:1.1.8"
   dependencies:
@@ -21636,7 +21880,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.fromentries@npm:^2.0.6":
+"object.fromentries@npm:^2.0.7, object.fromentries@npm:^2.0.8":
   version: 2.0.8
   resolution: "object.fromentries@npm:2.0.8"
   dependencies:
@@ -21648,18 +21892,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.hasown@npm:^1.1.2":
-  version: 1.1.4
-  resolution: "object.hasown@npm:1.1.4"
+"object.groupby@npm:^1.0.1":
+  version: 1.0.3
+  resolution: "object.groupby@npm:1.0.3"
   dependencies:
+    call-bind: "npm:^1.0.7"
     define-properties: "npm:^1.2.1"
     es-abstract: "npm:^1.23.2"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10c0/f23187b08d874ef1aea060118c8259eb7f99f93c15a50771d710569534119062b90e087b92952b2d0fb1bb8914d61fb0b43c57fb06f622aaad538fe6868ab987
+  checksum: 10c0/60d0455c85c736fbfeda0217d1a77525956f76f7b2495edeca9e9bbf8168a45783199e77b894d30638837c654d0cc410e0e02cbfcf445bc8de71c3da1ede6a9c
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.6":
+"object.values@npm:^1.1.6, object.values@npm:^1.1.7, object.values@npm:^1.2.0":
   version: 1.2.0
   resolution: "object.values@npm:1.2.0"
   dependencies:
@@ -21750,7 +21994,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"optionator@npm:^0.9.1":
+"optionator@npm:^0.9.3":
   version: 0.9.4
   resolution: "optionator@npm:0.9.4"
   dependencies:
@@ -22527,16 +22771,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier-linter-helpers@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "prettier-linter-helpers@npm:1.0.0"
-  dependencies:
-    fast-diff: "npm:^1.1.2"
-  checksum: 10c0/81e0027d731b7b3697ccd2129470ed9913ecb111e4ec175a12f0fcfab0096516373bf0af2fef132af50cafb0a905b74ff57996d615f59512bb9ac7378fcc64ab
+"prettier@npm:3.3.3":
+  version: 3.3.3
+  resolution: "prettier@npm:3.3.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10c0/b85828b08e7505716324e4245549b9205c0cacb25342a030ba8885aba2039a115dbcf75a0b7ca3b37bc9d101ee61fab8113fc69ca3359f2a226f1ecc07ad2e26
   languageName: node
   linkType: hard
 
-"prettier@npm:2.8.8, prettier@npm:^2.8.0":
+"prettier@npm:^2.8.0":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:
@@ -23839,6 +24083,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reflect.getprototypeof@npm:^1.0.4":
+  version: 1.0.6
+  resolution: "reflect.getprototypeof@npm:1.0.6"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.1"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.4"
+    globalthis: "npm:^1.0.3"
+    which-builtin-type: "npm:^1.1.3"
+  checksum: 10c0/baf4ef8ee6ff341600f4720b251cf5a6cb552d6a6ab0fdc036988c451bf16f920e5feb0d46bd4f530a5cce568f1f7aca2d77447ca798920749cfc52783c39b55
+  languageName: node
+  linkType: hard
+
 "regenerate-unicode-properties@npm:^10.1.0":
   version: 10.1.1
   resolution: "regenerate-unicode-properties@npm:10.1.1"
@@ -24139,7 +24398,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^2.0.0-next.4":
+"resolve@npm:^2.0.0-next.5":
   version: 2.0.0-next.5
   resolution: "resolve@npm:2.0.0-next.5"
   dependencies:
@@ -24165,7 +24424,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^2.0.0-next.4#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^2.0.0-next.5#optional!builtin<compat/resolve>":
   version: 2.0.0-next.5
   resolution: "resolve@patch:resolve@npm%3A2.0.0-next.5#optional!builtin<compat/resolve>::version=2.0.0-next.5&hash=c3c19d"
   dependencies:
@@ -24625,7 +24884,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4":
+"semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
   bin:
@@ -25275,7 +25534,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.matchall@npm:^4.0.8":
+"string.prototype.matchall@npm:^4.0.11":
   version: 4.0.11
   resolution: "string.prototype.matchall@npm:4.0.11"
   dependencies:
@@ -25307,6 +25566,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.repeat@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "string.prototype.repeat@npm:1.0.0"
+  dependencies:
+    define-properties: "npm:^1.1.3"
+    es-abstract: "npm:^1.17.5"
+  checksum: 10c0/94c7978566cffa1327d470fd924366438af9b04b497c43a9805e476e2e908aa37a1fd34cc0911156c17556dab62159d12c7b92b3cc304c3e1281fe4c8e668f40
+  languageName: node
+  linkType: hard
+
 "string.prototype.trim@npm:^1.2.9":
   version: 1.2.9
   resolution: "string.prototype.trim@npm:1.2.9"
@@ -25416,7 +25685,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:^3.0.1, strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1":
+"strip-json-comments@npm:^3.0.1, strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
   checksum: 10c0/9681a6257b925a7fa0f285851c0e613cc934a50661fa7bb41ca9cbbff89686bb4a0ee366e6ecedc4daafd01e83eee0720111ab294366fe7c185e935475ebcecd
@@ -26048,6 +26317,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-api-utils@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "ts-api-utils@npm:1.3.0"
+  peerDependencies:
+    typescript: ">=4.2.0"
+  checksum: 10c0/f54a0ba9ed56ce66baea90a3fa087a484002e807f28a8ccb2d070c75e76bde64bd0f6dce98b3802834156306050871b67eec325cb4e918015a360a3f0868c77c
+  languageName: node
+  linkType: hard
+
 "ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
   version: 2.2.0
   resolution: "ts-dedent@npm:2.2.0"
@@ -26137,7 +26415,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^3.14.1":
+"tsconfig-paths@npm:^3.15.0":
   version: 3.15.0
   resolution: "tsconfig-paths@npm:3.15.0"
   dependencies:
@@ -26225,13 +26503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "type-fest@npm:0.20.2"
-  checksum: 10c0/dea9df45ea1f0aaa4e2d3bed3f9a0bfe9e5b2592bddb92eb1bf06e50bcf98dbb78189668cd8bc31a0511d3fc25539b4cd5c704497e53e93e2d40ca764b10bfc3
-  languageName: node
-  linkType: hard
-
 "type-fest@npm:^0.21.3":
   version: 0.21.3
   resolution: "type-fest@npm:0.21.3"
@@ -26336,6 +26607,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript-eslint@npm:8.2.0":
+  version: 8.2.0
+  resolution: "typescript-eslint@npm:8.2.0"
+  dependencies:
+    "@typescript-eslint/eslint-plugin": "npm:8.2.0"
+    "@typescript-eslint/parser": "npm:8.2.0"
+    "@typescript-eslint/utils": "npm:8.2.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/545569026b3da15625ae827844ce6c529c033286807b8adeb1652bef83f1c8ce900253fc5c0813600145ae4f1ba9cc265e4731902bbb9227d1e7331db9d82637
+  languageName: node
+  linkType: hard
+
 "typescript-styled-plugin@npm:0.18.3":
   version: 0.18.3
   resolution: "typescript-styled-plugin@npm:0.18.3"
@@ -27488,7 +27773,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-collection@npm:^1.0.1":
+"which-builtin-type@npm:^1.1.3":
+  version: 1.1.4
+  resolution: "which-builtin-type@npm:1.1.4"
+  dependencies:
+    function.prototype.name: "npm:^1.1.6"
+    has-tostringtag: "npm:^1.0.2"
+    is-async-function: "npm:^2.0.0"
+    is-date-object: "npm:^1.0.5"
+    is-finalizationregistry: "npm:^1.0.2"
+    is-generator-function: "npm:^1.0.10"
+    is-regex: "npm:^1.1.4"
+    is-weakref: "npm:^1.0.2"
+    isarray: "npm:^2.0.5"
+    which-boxed-primitive: "npm:^1.0.2"
+    which-collection: "npm:^1.0.2"
+    which-typed-array: "npm:^1.1.15"
+  checksum: 10c0/a4a76d20d869a81b1dbb4adea31edc7e6c1a4466d3ab7c2cd757c9219d48d3723b04076c85583257b0f0f8e3ebe5af337248b8ceed57b9051cb97bce5bd881d1
+  languageName: node
+  linkType: hard
+
+"which-collection@npm:^1.0.1, which-collection@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-collection@npm:1.0.2"
   dependencies:

From 6af1e29998c4cb62821a0ab553d2491602f5e4b3 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Tue, 27 Aug 2024 16:36:18 +0800
Subject: [PATCH 16/23] chore(web): avoid using .env.local as the filename for
 example .env (#1119)

---
 web/{.env.local => .env.example} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename web/{.env.local => .env.example} (100%)

diff --git a/web/.env.local b/web/.env.example
similarity index 100%
rename from web/.env.local
rename to web/.env.example

From dd0a5fad643cd55c5f63f52806676d8be7d4a927 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Wed, 28 Aug 2024 10:50:08 +0800
Subject: [PATCH 17/23] feat(web): builtin infobox video and markdown block
 (#1117)

---
 server/pkg/builtin/manifest.yml               | 42 ++++++++++++
 server/pkg/builtin/manifest_ja.yml            | 28 ++++++++
 server/schemas/plugin_manifest.json           |  5 +-
 web/package.json                              |  2 +-
 .../beta/components/DragAndDropList/Item.tsx  |  2 +-
 .../SidePanelSectionField/index.tsx           |  2 +-
 .../fields/CameraField/CapturePanel/index.tsx |  2 +-
 .../Widgets/ContainerSettingsPanel/index.tsx  |  2 +-
 .../Infobox/Block/builtin/Image/index.tsx     |  2 +-
 .../Infobox/Block/builtin/Markdown/index.tsx  | 51 ++++++++++++++
 .../Infobox/Block/builtin/Video/index.tsx     | 68 +++++++++++++++++++
 .../Crust/Infobox/Block/builtin/index.ts      | 10 ++-
 .../Block/builtin/useExpressionEval.ts        | 26 ++++---
 .../Visualizer/Crust/Infobox/constants.ts     |  4 ++
 .../DragAndDropList/index.stories.tsx         |  2 +-
 web/src/beta/pages/Dashboard/index.tsx        |  4 +-
 web/src/beta/pages/EditorPage/index.tsx       |  4 +-
 .../beta/pages/PluginPlaygroundPage/index.tsx |  2 +-
 .../beta/pages/ProjectSettingsPage/index.tsx  |  4 +-
 web/yarn.lock                                 | 10 +--
 20 files changed, 239 insertions(+), 33 deletions(-)
 create mode 100644 web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx
 create mode 100644 web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx

diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml
index c37e6e02a..6bcf6d086 100644
--- a/server/pkg/builtin/manifest.yml
+++ b/server/pkg/builtin/manifest.yml
@@ -2709,3 +2709,45 @@ extensions:
                 field: displayType
                 type: string
                 value: custom
+  - id: videoInfoboxBetaBlock
+    name: Video
+    type: infoboxBlock
+    description: Infobox Video Block
+    schema:
+      groups:
+        - id: panel
+          title: Panel Setting
+          fields:
+            - id: padding
+              type: spacing
+              title: Padding
+              ui: padding
+              min: 0
+              max: 100
+        - id: default
+          title: Video Block
+          fields:
+            - id: src
+              type: string
+              title: Video
+  - id: markdownInfoboxBetaBlock
+    name: MD Text
+    type: infoboxBlock
+    description: Infobox MD Text Block
+    schema:
+      groups:
+        - id: panel
+          title: Panel Setting
+          fields:
+            - id: padding
+              type: spacing
+              title: Padding
+              ui: padding
+              min: 0
+              max: 100
+        - id: default
+          title: MD Text Block
+          fields:
+            - id: src
+              type: string
+              title: Content
diff --git a/server/pkg/builtin/manifest_ja.yml b/server/pkg/builtin/manifest_ja.yml
index 7c54b474e..cd6bfaf32 100644
--- a/server/pkg/builtin/manifest_ja.yml
+++ b/server/pkg/builtin/manifest_ja.yml
@@ -1347,6 +1347,34 @@ extensions:
               custom: カスタム
           property_list:
             title: プロパティリスト
+      panel:
+        title: パネル設定
+        fields:
+          padding:
+            title: 余白
+  videoInfoboxBetaBlock:
+    name: ビデオ
+    description: インフォボックスビデオブロック
+    propertySchema:
+      default:
+        title: ビデオブロック
+        fields:
+          src:
+            title: ビデオ
+      panel:
+        title: パネル設定
+        fields:
+          padding:
+            title: 余白
+  markdownInfoboxBetaBlock:
+    name: MDテキスト
+    description: インフォボックスMDテキストブロック
+    propertySchema:
+      default:
+        title: MDテキストブロック
+        fields:
+          src:
+            title: コンテンツ
       panel:
         title: パネル設定
         fields:
diff --git a/server/schemas/plugin_manifest.json b/server/schemas/plugin_manifest.json
index bcb2bed9a..6cdbf013c 100644
--- a/server/schemas/plugin_manifest.json
+++ b/server/schemas/plugin_manifest.json
@@ -336,7 +336,8 @@
             "cluster",
             "story",
             "storyPage",
-            "storyBlock"
+            "storyBlock",
+            "infoboxBlock"
           ]
         },
         "singleOnly": {
@@ -454,4 +455,4 @@
     }
   },
   "$ref": "#/definitions/root"
-}
+}
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index 99e70ae1b..ae4d5e771 100644
--- a/web/package.json
+++ b/web/package.json
@@ -164,7 +164,7 @@
         "react-ga4": "2.1.0",
         "react-i18next": "12.2.2",
         "react-markdown": "8.0.7",
-        "react-player": "2.13.0",
+        "react-player": "2.16.0",
         "react-popper": "2.3.0",
         "react-router-dom": "6.21.0",
         "react-sortablejs": "6.1.4",
diff --git a/web/src/beta/components/DragAndDropList/Item.tsx b/web/src/beta/components/DragAndDropList/Item.tsx
index f5651613a..d8c1b3f18 100644
--- a/web/src/beta/components/DragAndDropList/Item.tsx
+++ b/web/src/beta/components/DragAndDropList/Item.tsx
@@ -1,3 +1,4 @@
+import { styled } from "@reearth/services/theme";
 import type { Identifier } from "dnd-core";
 import type { FC, ReactNode } from "react";
 import { memo, useRef, createContext, useContext } from "react";
@@ -8,7 +9,6 @@ import {
   useDrop,
 } from "react-dnd";
 
-import { styled } from "@reearth/services/theme";
 
 type DragItem = {
   index: number;
diff --git a/web/src/beta/components/SidePanelSectionField/index.tsx b/web/src/beta/components/SidePanelSectionField/index.tsx
index 7470c8ff9..3f45a1cf0 100644
--- a/web/src/beta/components/SidePanelSectionField/index.tsx
+++ b/web/src/beta/components/SidePanelSectionField/index.tsx
@@ -1,6 +1,6 @@
+import { styled, useTheme } from "@reearth/services/theme";
 import { useState, ReactNode, useEffect } from "react";
 
-import { styled, useTheme } from "@reearth/services/theme";
 
 import Icon from "../Icon";
 import Text from "../Text";
diff --git a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx b/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
index 13ba0e0d2..1240e2489 100644
--- a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
+++ b/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 
 import Button from "@reearth/beta/components/Button";
 import NumberInput from "@reearth/beta/components/fields/common/NumberInput";
@@ -6,6 +5,7 @@ import Text from "@reearth/beta/components/Text";
 import { Camera } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { useMemo } from "react";
 
 import PanelCommon from "../../common/PanelCommon";
 import type { RowType } from "../types";
diff --git a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
index 7e60ae1c4..1f11917d9 100644
--- a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
@@ -1,10 +1,10 @@
-import { FC } from "react";
 
 import { ColorField, NumberField, SwitchField } from "@reearth/beta/ui/fields";
 import { Panel } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
 import { WidgetAreaPadding } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { useWidgetsPage } from "../context";
 
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
index 36d695e9f..44c012471 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
@@ -38,6 +38,6 @@ export default ImageBlock;
 const Image = styled("img")(() => ({
   width: "100%",
   height: "100%",
-  objectFit: "cover",
+  objectFit: "contain",
   objectPosition: "center",
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx
new file mode 100644
index 000000000..612d07f98
--- /dev/null
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx
@@ -0,0 +1,51 @@
+import { FC, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
+import { CommonBlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import { ValueTypes } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
+
+import { InfoboxBlock } from "../../../types";
+import useExpressionEval from "../useExpressionEval";
+
+const plugins = [gfm];
+
+const MarkdownBlock: FC<CommonBlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }) => {
+  const src = useMemo(
+    () => block?.property?.default?.src?.value as ValueTypes["string"],
+    [block?.property?.default?.src],
+  );
+
+  const evaluatedSrc = useExpressionEval(src);
+
+  return (
+    <BlockWrapper
+      name={block?.name}
+      icon={block?.extensionId}
+      isSelected={isSelected}
+      propertyId={block?.propertyId}
+      property={block?.property}
+      {...props}>
+      {evaluatedSrc !== undefined ? (
+        <Wrapper>
+          <ReactMarkdown remarkPlugins={plugins} linkTarget="_blank">
+            {evaluatedSrc || ""}
+          </ReactMarkdown>
+        </Wrapper>
+      ) : null}
+    </BlockWrapper>
+  );
+};
+
+export default MarkdownBlock;
+
+const Wrapper = styled("div")(() => ({
+  width: "100%",
+  position: "relative",
+  ["*"]: {
+    maxWidth: "100%",
+    height: "auto",
+  },
+}));
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx
new file mode 100644
index 000000000..e1fe4a6a6
--- /dev/null
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx
@@ -0,0 +1,68 @@
+import { FC, useCallback, useMemo, useState } from "react";
+import Player from "react-player";
+import type ReactPlayer from "react-player";
+
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
+import { CommonBlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+import { ValueTypes } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
+
+import { InfoboxBlock } from "../../../types";
+import useExpressionEval from "../useExpressionEval";
+
+const VideoBlock: FC<CommonBlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }) => {
+  const [aspectRatio, setAspectRatio] = useState(56.25);
+
+  const src = useMemo(
+    () => block?.property?.default?.src?.value as ValueTypes["string"],
+    [block?.property?.default?.src],
+  );
+
+  const evaluatedSrc = useExpressionEval(src);
+
+  const handleVideoReady = useCallback((player: ReactPlayer) => {
+    const height = player.getInternalPlayer().videoHeight;
+    const width = player.getInternalPlayer().videoWidth;
+    if (!height || !width) return;
+    setAspectRatio((height / width) * 100);
+  }, []);
+
+  return (
+    <BlockWrapper
+      name={block?.name}
+      icon={block?.extensionId}
+      isSelected={isSelected}
+      propertyId={block?.propertyId}
+      property={block?.property}
+      {...props}>
+      {evaluatedSrc !== undefined ? (
+        <Wrapper aspectRatio={aspectRatio}>
+          <StyledPlayer
+            url={evaluatedSrc}
+            width="100%"
+            height="100%"
+            onReady={handleVideoReady}
+            playsinline
+            pip
+            controls
+            light
+          />
+        </Wrapper>
+      ) : null}
+    </BlockWrapper>
+  );
+};
+
+export default VideoBlock;
+
+const Wrapper = styled("div")<{ aspectRatio: number }>(({ aspectRatio }) => ({
+  position: "relative",
+  paddingTop: `${aspectRatio}%`,
+  width: "100%",
+}));
+
+const StyledPlayer = styled(Player)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+});
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
index a977357f1..d7b5bbe92 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
@@ -5,16 +5,22 @@ import {
   IMAGE_BUILTIN_INFOBOX_BLOCK_ID,
   TEXT_BUILTIN_INFOBOX_BLOCK_ID,
   PROPERTY_BUILTIN_INFOBOX_BLOCK_ID,
+  VIDEO_BUILTIN_INFOBOX_BLOCK_ID,
+  MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID,
 } from "../../constants";
 
 import ImageBlock from "./Image";
+import MarkdownBlock from "./Markdown";
 import PropertyListBlock from "./PropertyList";
 import TextBlock from "./Text";
+import VideoBlock from "./Video";
 
 export type ReEarthBuiltinInfoboxBlocks<T = unknown> = Record<
   | typeof TEXT_BUILTIN_INFOBOX_BLOCK_ID
   | typeof PROPERTY_BUILTIN_INFOBOX_BLOCK_ID
-  | typeof IMAGE_BUILTIN_INFOBOX_BLOCK_ID,
+  | typeof IMAGE_BUILTIN_INFOBOX_BLOCK_ID
+  | typeof VIDEO_BUILTIN_INFOBOX_BLOCK_ID
+  | typeof MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID,
   T
 >;
 
@@ -25,6 +31,8 @@ const reearthBuiltin: BuiltinInfoboxBlocks<Component> = {
   [IMAGE_BUILTIN_INFOBOX_BLOCK_ID]: ImageBlock,
   [TEXT_BUILTIN_INFOBOX_BLOCK_ID]: TextBlock,
   [PROPERTY_BUILTIN_INFOBOX_BLOCK_ID]: PropertyListBlock,
+  [VIDEO_BUILTIN_INFOBOX_BLOCK_ID]: VideoBlock,
+  [MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID]: MarkdownBlock,
 };
 
 const builtin = merge({}, reearthBuiltin);
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
index 5cb3487fa..1e8512708 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
@@ -10,12 +10,13 @@ export default (value: unknown | undefined) => {
   >(undefined);
 
   const [evaluatedResult, setEvaluatedResult] = useState<string | undefined>(
-    undefined,
+    undefined
   );
 
   const visualizer = useVisualizer();
 
   // We want the useEffect to be called on each render to make sure evaluatedResult is up to date
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (!isReady) {
       setIsReady(true);
@@ -26,7 +27,17 @@ export default (value: unknown | undefined) => {
       setEvaluatedResult(undefined);
       return;
     }
-    const selectedFeature = visualizer.current?.layers.selectedFeature();
+
+    // NOTE: core's selectedFeature is not always up to date, but the computed.features from selectedLayer is always up to date
+    // TODO: fix it on core
+    const selectedLayer = visualizer.current?.layers.selectedLayer();
+    const selectedFeature =
+      selectedLayer?.type === "simple" && selectedLayer?.data?.isSketchLayer
+        ? selectedLayer.computed?.features.find(
+            (f) => f.id === visualizer.current?.layers.selectedFeature()?.id
+          )
+        : visualizer.current?.layers.selectedFeature();
+
     if (selectedFeature && selectedFeature.id !== lastFeatureSelected) {
       setLastFeatureSelected(selectedFeature.id);
       setEvaluatedResult(undefined);
@@ -45,7 +56,7 @@ export default (value: unknown | undefined) => {
           expression: currentValue,
         },
         undefined,
-        simpleFeature,
+        simpleFeature
       );
       if (
         (es && typeof es === "string") ||
@@ -57,14 +68,7 @@ export default (value: unknown | undefined) => {
         }
       }
     }
-  }, [
-    isReady,
-    currentValue,
-    value,
-    evaluatedResult,
-    visualizer,
-    lastFeatureSelected,
-  ]);
+  });
 
   return evaluatedResult;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts b/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
index ed0cd2d03..84276ba69 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
@@ -10,9 +10,13 @@ export const IMAGE_BUILTIN_INFOBOX_BLOCK_ID = "reearth/imageInfoboxBetaBlock";
 export const TEXT_BUILTIN_INFOBOX_BLOCK_ID = "reearth/textInfoboxBetaBlock";
 export const PROPERTY_BUILTIN_INFOBOX_BLOCK_ID =
   "reearth/propertyInfoboxBetaBlock";
+export const VIDEO_BUILTIN_INFOBOX_BLOCK_ID = "reearth/videoInfoboxBetaBlock";
+export const MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID = "reearth/markdownInfoboxBetaBlock";
 
 export const AVAILABLE_INFOBOX_BLOCK_IDS = [
   IMAGE_BUILTIN_INFOBOX_BLOCK_ID,
   TEXT_BUILTIN_INFOBOX_BLOCK_ID,
   PROPERTY_BUILTIN_INFOBOX_BLOCK_ID,
+  VIDEO_BUILTIN_INFOBOX_BLOCK_ID,
+  MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID,
 ];
diff --git a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
index c89122fd0..820612b56 100644
--- a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
@@ -1,7 +1,7 @@
+import { styled } from "@reearth/services/theme";
 import { Meta, Story } from "@storybook/react";
 import { ReactNode, useState } from "react";
 
-import { styled } from "@reearth/services/theme";
 
 import { Icon } from "../Icon";
 
diff --git a/web/src/beta/pages/Dashboard/index.tsx b/web/src/beta/pages/Dashboard/index.tsx
index 4b94bb86c..737cade7a 100644
--- a/web/src/beta/pages/Dashboard/index.tsx
+++ b/web/src/beta/pages/Dashboard/index.tsx
@@ -1,8 +1,8 @@
+import Dashboard from "@reearth/beta/features/Dashboard";
+import Page from "@reearth/beta/pages/Page";
 import { FC } from "react";
 import { useParams } from "react-router-dom";
 
-import Dashboard from "@reearth/beta/features/Dashboard";
-import Page from "@reearth/beta/pages/Page";
 
 const DashboardPage: FC = () => {
   const { workspaceId } = useParams();
diff --git a/web/src/beta/pages/EditorPage/index.tsx b/web/src/beta/pages/EditorPage/index.tsx
index 540f0fc58..88b8fbd2a 100644
--- a/web/src/beta/pages/EditorPage/index.tsx
+++ b/web/src/beta/pages/EditorPage/index.tsx
@@ -1,10 +1,10 @@
-import { FC } from "react";
-import { useParams } from "react-router-dom";
 
 import NotFound from "@reearth/beta/components/NotFound";
 import Editor from "@reearth/beta/features/Editor";
 import { isTab } from "@reearth/beta/features/Navbar";
 import Page from "@reearth/beta/pages/Page";
+import { FC } from "react";
+import { useParams } from "react-router-dom";
 
 const EditorPage: FC = () => {
   const { sceneId, tab } = useParams<{ sceneId: string; tab: string }>();
diff --git a/web/src/beta/pages/PluginPlaygroundPage/index.tsx b/web/src/beta/pages/PluginPlaygroundPage/index.tsx
index a45e1f840..5c7c1758d 100644
--- a/web/src/beta/pages/PluginPlaygroundPage/index.tsx
+++ b/web/src/beta/pages/PluginPlaygroundPage/index.tsx
@@ -1,6 +1,6 @@
+import PluginPlayground from "@reearth/beta/features/PluginPlayground";
 import { FC } from "react";
 
-import PluginPlayground from "@reearth/beta/features/PluginPlayground";
 
 const PluginPlaygroundPage: FC = () => {
   return <PluginPlayground />;
diff --git a/web/src/beta/pages/ProjectSettingsPage/index.tsx b/web/src/beta/pages/ProjectSettingsPage/index.tsx
index a6245001e..c65a7c344 100644
--- a/web/src/beta/pages/ProjectSettingsPage/index.tsx
+++ b/web/src/beta/pages/ProjectSettingsPage/index.tsx
@@ -1,11 +1,11 @@
-import { FC, useMemo } from "react";
-import { useParams } from "react-router-dom";
 
 import NotFound from "@reearth/beta/components/NotFound";
 import ProjectSettings, {
   isProjectSettingTab,
 } from "@reearth/beta/features/ProjectSettings";
 import Page from "@reearth/beta/pages/Page";
+import { FC, useMemo } from "react";
+import { useParams } from "react-router-dom";
 
 const ProjectSettingsPage: FC = () => {
   const { projectId, tab, subId } = useParams<{
diff --git a/web/yarn.lock b/web/yarn.lock
index 986a4d27d..c7f57a7b4 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -8472,7 +8472,7 @@ __metadata:
     react-ga4: "npm:2.1.0"
     react-i18next: "npm:12.2.2"
     react-markdown: "npm:8.0.7"
-    react-player: "npm:2.13.0"
+    react-player: "npm:2.16.0"
     react-popper: "npm:2.3.0"
     react-router-dom: "npm:6.21.0"
     react-sortablejs: "npm:6.1.4"
@@ -23644,9 +23644,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-player@npm:2.13.0":
-  version: 2.13.0
-  resolution: "react-player@npm:2.13.0"
+"react-player@npm:2.16.0":
+  version: 2.16.0
+  resolution: "react-player@npm:2.16.0"
   dependencies:
     deepmerge: "npm:^4.0.0"
     load-script: "npm:^1.0.0"
@@ -23655,7 +23655,7 @@ __metadata:
     react-fast-compare: "npm:^3.0.1"
   peerDependencies:
     react: ">=16.6.0"
-  checksum: 10c0/3dc15908ffdab7c48788714ff806559b53bb80753024118ed2e31f8d0c857d83c04f9630bf1d195d4b0f621e3ce757f4dab9a51883fcc8c285250724edb0d9d9
+  checksum: 10c0/ee0f4cd3bd468b28af38dbbb65cae1659218153956f43c0bdd15cd8b38aaaf151deec43b93b7dd887c0ac28242a4ba7e9d01823351e78ba60ae04d5fb51defb4
   languageName: node
   linkType: hard
 

From ae72d550d165edd38450c9c7b1c865bcced371ac Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Thu, 29 Aug 2024 13:51:11 +0300
Subject: [PATCH 18/23] refactor(web): dashboard's starred project (#1120)

Co-authored-by: airslice <icesunex@hotmail.com>
---
 web/src/beta/features/AssetsManager/index.tsx |  28 +-
 .../Projects/Project/ProjectListViewItem.tsx  |  57 +--
 .../Projects/StarredProject.tsx               |  74 ++++
 .../ContentsContainer/Projects/hooks.ts       |  67 ++--
 .../ContentsContainer/Projects/index.tsx      | 358 +++++++-----------
 .../Dashboard/LeftSidePanel/index.tsx         |   7 +-
 .../Dashboard/LeftSidePanel/profile.tsx       |  59 ++-
 web/src/beta/features/Dashboard/index.tsx     |  20 +-
 .../reearth-ui/components/Collapse/index.tsx  |  40 +-
 .../components/Icon/Icons/CaretDoubleUp.svg   |   4 +-
 .../reearth-ui/components/Icon/Icons/Lock.svg |   6 +-
 .../components/Icon/Icons/Notebook.svg        |   4 +
 .../components/Icon/Icons/plugin.svg          |   2 +-
 .../components/Icon/Icons/switch.svg          |   8 +-
 .../lib/reearth-ui/components/Icon/icons.ts   |   2 +
 .../reearth-ui/components/PopupMenu/index.tsx |  11 +-
 .../beta/lib/reearth-ui/components/index.ts   |   2 +-
 .../ManagerBase/ManagerEmptyContent.tsx       |  17 +
 web/src/beta/ui/components/Sidebar/index.tsx  |   6 +
 web/src/services/api/projectApi.ts            |  69 ++--
 web/src/services/gql/__gen__/gql.ts           |   5 +
 web/src/services/gql/__gen__/graphql.ts       |  14 +
 web/src/services/gql/queries/project.ts       |  16 +
 web/src/services/i18n/translations/en.yml     |   6 +-
 web/src/services/i18n/translations/ja.yml     |   6 +-
 25 files changed, 517 insertions(+), 371 deletions(-)
 create mode 100644 web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx
 create mode 100644 web/src/beta/lib/reearth-ui/components/Icon/Icons/Notebook.svg
 create mode 100644 web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx

diff --git a/web/src/beta/features/AssetsManager/index.tsx b/web/src/beta/features/AssetsManager/index.tsx
index 483efd858..8c897c03e 100644
--- a/web/src/beta/features/AssetsManager/index.tsx
+++ b/web/src/beta/features/AssetsManager/index.tsx
@@ -6,8 +6,9 @@ import {
   ManagerLayout,
   ManagerWrapper,
 } from "@reearth/beta/ui/components/ManagerBase";
+import ManagerEmptyContent from "@reearth/beta/ui/components/ManagerBase/ManagerEmptyContent";
 import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
+import { styled, useTheme } from "@reearth/services/theme";
 import { FC } from "react";
 
 import { AcceptedAssetsTypes } from "./constants";
@@ -63,7 +64,7 @@ const AssetsManager: FC<AssetsManagerProps> = ({
     onSelectChange,
   });
   const t = useT();
-
+  const theme = useTheme()
   return (
     <ManagerWrapper onClick={() => handleAssetSelect(undefined)}>
       <ManagerHeader
@@ -97,6 +98,12 @@ const AssetsManager: FC<AssetsManagerProps> = ({
         onDelete={handleAssetDelete}
         onSearch={handleSearch}
       />
+    {(loading || loadingMore) ? (
+                  <LoadingWrapper>
+                    <Loading relative />
+                  </LoadingWrapper>
+                ) : 
+          filteredAssets.length ?
       <ManagerContent>
         <ContentWrapper size={size}>
           <PathWrapper size={size}>
@@ -147,16 +154,19 @@ const AssetsManager: FC<AssetsManagerProps> = ({
                     ),
                   )}
                 </AssetsGroup>
-                {(loading || loadingMore) && (
-                  <LoadingWrapper>
-                    <Loading relative />
-                  </LoadingWrapper>
-                )}
+               
               </AssetsContent>
             </AssetsWrapper>
           </LayoutWrapper>
         </ContentWrapper>
-      </ManagerContent>
+      </ManagerContent>: 
+      <ManagerEmptyContent>
+      <Typography size="h5" color={theme.content.weak}>
+        {t("No Asset has been uploaded yet")}
+      </Typography>
+    </ManagerEmptyContent>
+
+}
     </ManagerWrapper>
   );
 };
@@ -236,7 +246,7 @@ const ListHeader = styled("div")<{ size: AssetsManagerSize; width: number }>(
       theme.spacing.smallest
     }px`,
     gap: theme.spacing.small,
-    width: width,
+    width: width === 0 ? "100%" : width,
   }),
 );
 
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
index 9e6ce24ce..e6e25277a 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
@@ -49,7 +49,7 @@ const ProjectListViewItem: FC<ProjectProps> = ({
   });
 
   return (
-    <StyledRow
+    <ListWrapper
       onClick={(e) => onProjectSelect?.(e, project.id)}
       isHovered={isHovered ?? false}
       onDoubleClick={onProjectOpen}
@@ -57,8 +57,8 @@ const ProjectListViewItem: FC<ProjectProps> = ({
       onMouseLeave={() => handleProjectHover?.(false)}
       isSelected={selectedProjectId === project.id}
     >
-      <ActionCell>
-        <FlexItem>
+      <ThumbnailCol>
+        <ActionWrapper>
           <StarButtonWrapper
             isStarred={isStarred ?? false}
             isHovered={isHovered ?? false}
@@ -73,9 +73,9 @@ const ProjectListViewItem: FC<ProjectProps> = ({
             />
           </StarButtonWrapper>
           <ProjectImage backgroundImage={project.imageUrl} />
-        </FlexItem>
-      </ActionCell>
-      <ProjectNameCell>
+        </ActionWrapper>
+      </ThumbnailCol>
+      <ProjectNameCol>
         <PublishStatus status={publishStatus} />
         {!isEditing ? (
           <TitleWrapper onDoubleClick={handleProjectNameDoubleClick}>
@@ -90,14 +90,14 @@ const ProjectListViewItem: FC<ProjectProps> = ({
             appearance="present"
           />
         )}
-      </ProjectNameCell>
-      <TimeCell>
+      </ProjectNameCol>
+      <TimeCol>
         <Typography size="body">{convertTimeToString(UpdatedAt)}</Typography>
-      </TimeCell>
-      <TimeCell>
+      </TimeCol>
+      <TimeCol>
         <Typography size="body">{convertTimeToString(createAt)}</Typography>
-      </TimeCell>
-      <ActionCell
+      </TimeCol>
+      <ActionCol
         onClick={(e: MouseEvent) => {
           e.stopPropagation();
         }}
@@ -108,14 +108,14 @@ const ProjectListViewItem: FC<ProjectProps> = ({
             <Button icon="dotsThreeVertical" iconButton appearance="simple" />
           }
         />
-      </ActionCell>
-    </StyledRow>
+      </ActionCol>
+    </ListWrapper>
   );
 };
 
 export default ProjectListViewItem;
 
-const StyledRow = styled("div")<{ isSelected: boolean; isHovered: boolean }>(
+const ListWrapper = styled("div")<{ isSelected: boolean; isHovered: boolean }>(
   ({ theme, isHovered }) => ({
     display: "flex",
     width: "100%",
@@ -124,6 +124,8 @@ const StyledRow = styled("div")<{ isSelected: boolean; isHovered: boolean }>(
     border: `1px solid ${isHovered ? theme.outline.weak : "transparent"}`,
     padding: `${theme.spacing.small}px 0`,
     alignItems: "center",
+    boxSizing: "border-box",
+    overflow: "hidden",
   }),
 );
 
@@ -138,21 +140,23 @@ const ProjectImage = styled("div")<{ backgroundImage?: string | null }>(
   }),
 );
 
-const FlexItem = styled("div")(({ theme }) => ({
+const ThumbnailCol = styled("div")(() => ({
+  width: 120,
+  flexShrink: 0
+}));
+
+const ActionWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.small,
 }));
 
-const ActionCell = styled("div")(() => ({
-  flex: 0.2,
-}));
-
-const ProjectNameCell = styled("div")(({ theme }) => ({
+const ProjectNameCol = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.smallest,
   flex: 1,
+  flexShrink: 0
 }));
 
 const PublishStatus = styled("div")<{ status?: boolean }>(
@@ -164,8 +168,15 @@ const PublishStatus = styled("div")<{ status?: boolean }>(
   }),
 );
 
-const TimeCell = styled("div")(() => ({
-  flex: 0.5,
+const TimeCol = styled("div")(() => ({
+  flex: "0 0 20%",
+  flexShrink: 0
+
+}));
+
+const ActionCol = styled("div")(() => ({
+  flex: "0 0 10%",
+  flexShrink: 0
 }));
 
 const StarButtonWrapper = styled("div")<{
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx
new file mode 100644
index 000000000..988adb95a
--- /dev/null
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx
@@ -0,0 +1,74 @@
+
+import { Collapse, Icon } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
+
+import useHooks from "./hooks";
+
+
+const StarredProject: FC<{workspaceId?: string }> = ({workspaceId}) => {
+  const t = useT();
+  const theme = useTheme();
+  const { starredProjects, handleProjectOpen } =  useHooks(workspaceId);
+
+  return (
+    <Wrapper>
+      <Collapse iconPosition="left" title={t("Starred")} size="small" weight="bold">
+        <ProjectsWrapper>
+          {
+            starredProjects?.map(statredProject => (
+              <Item onClick={() => handleProjectOpen(statredProject?.scene?.id)}>
+                <IconWrapper icon="notebook" color={theme.content.weak} />
+                <TitleWrapper>{statredProject?.name}</TitleWrapper>
+              </Item>
+            ) )
+          }
+        </ProjectsWrapper>
+      </Collapse>
+    </Wrapper>
+  );
+};
+
+export default StarredProject;
+
+const Wrapper = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+}));
+
+const ProjectsWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  paddingLeft: theme.spacing.small,
+  height: "calc(92vh - 400px)",
+  overflowY: "auto", 
+}));
+
+const Item = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.small,
+  padding: theme.spacing.small,
+  alignItems: "center",
+  alignSelf: "stretch",
+  cursor: "pointer",
+  "&:hover":{
+    backgroundColor: theme.bg[2],
+    borderRadius: theme.radius.small,
+
+  }
+}));
+
+const IconWrapper = styled(Icon)(() => ({
+  flexShrink: 0,
+}));
+
+const TitleWrapper = styled("div")(({ theme }) => ({
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+}));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
index 2b413cb86..07c157392 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
@@ -34,7 +34,7 @@ export type SortType =
   | "date-updated";
 
 export default (workspaceId?: string) => {
-  const { useProjectsQuery, useUpdateProject, useCreateProject } =
+  const { useProjectsQuery, useUpdateProject, useCreateProject, useStarredProjectsQuery } =
     useProjectFetcher();
   const navigate = useNavigate();
 
@@ -42,22 +42,19 @@ export default (workspaceId?: string) => {
   const [sortValue, setSort] = useState<SortType>("date-updated");
 
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
 
-  const {
-    projects,
-    loading,
-    isRefetching,
-    hasMoreProjects,
-    endCursor,
-    fetchMore,
-  } = useProjectsQuery({
-    teamId: workspaceId || "",
-    pagination: {
-      first: pagination(sortValue).first,
-    },
-    sort: pagination(sortValue).sortBy,
-    keyword: searchTerm,
-  });
+  const { starredProjects } = useStarredProjectsQuery(workspaceId)
+
+  const { projects, loading, isRefetching, hasMoreProjects, endCursor, fetchMore } =
+    useProjectsQuery({
+      teamId: workspaceId || "",
+      pagination: {
+        first: pagination(sortValue).first,
+      },
+      sort: pagination(sortValue).sortBy,
+      keyword: searchTerm,
+    });
 
   const filtedProjects = useMemo(() => {
     return (projects ?? [])
@@ -128,15 +125,6 @@ export default (workspaceId?: string) => {
     }
   }, []);
 
-  // favourite projects
-  const favoriteProjects: Project[] = useMemo(
-    () =>
-      filtedProjects
-        ? filtedProjects.filter((project) => !!project?.starred)
-        : [],
-    [filtedProjects],
-  );
-
   // project create
   const [projectCreatorVisible, setProjectCreatorVisible] = useState(false);
 
@@ -213,17 +201,44 @@ export default (workspaceId?: string) => {
     setLayout(newView);
   }, []);
 
+  const [contentWidth, setContentWidth] = useState(0);
+
+  useEffect(() => {
+    const parentElement = wrapperRef.current;
+    const childElement = contentRef.current;
+
+    if (!parentElement || !childElement) return;
+    const checkSize = () => {
+      if (childElement && parentElement) {
+        setContentWidth(childElement.offsetWidth);
+      }
+    };
+
+    const parentObserver = new ResizeObserver(checkSize);
+    const childObserver = new ResizeObserver(checkSize);
+    parentObserver.observe(parentElement);
+    childObserver.observe(childElement);
+
+    checkSize();
+    return () => {
+      parentObserver.disconnect();
+      childObserver.disconnect();
+    };
+  }, []);
+
   return {
     filtedProjects,
     hasMoreProjects,
     isLoading,
     selectedProject,
     wrapperRef,
+    contentRef,
     layout,
     projectCreatorVisible,
-    favoriteProjects,
     searchTerm,
     sortValue,
+    contentWidth,
+    starredProjects,
     showProjectCreator,
     closeProjectCreator,
     handleGetMoreProjects,
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
index 61351a521..4eccc890c 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -1,8 +1,12 @@
 import { Breadcrumb, Loading, Typography } from "@reearth/beta/lib/reearth-ui";
 import {
+  ManagerContent,
   ManagerHeader,
   ManagerHeaderButton,
+  ManagerLayout,
+  ManagerWrapper,
 } from "@reearth/beta/ui/components/ManagerBase";
+import ManagerEmptyContent from "@reearth/beta/ui/components/ManagerBase/ManagerEmptyContent";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useMemo } from "react";
@@ -20,8 +24,9 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
     selectedProject,
     projectCreatorVisible,
     wrapperRef,
+    contentRef,
+    contentWidth,
     layout,
-    favoriteProjects,
     searchTerm,
     sortValue,
     showProjectCreator,
@@ -51,7 +56,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
   );
 
   return (
-    <Wrapper onClick={() => handleProjectSelect(undefined)}>
+    <ManagerWrapper onClick={() => handleProjectSelect(undefined)}>
       <ManagerHeader
         size="large"
         actions={[
@@ -73,155 +78,19 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
         searchPlaceholder={t("Search in all assets library")}
         onSearch={handleSearch}
       />
-      <ProjectsWrapper
-        ref={wrapperRef}
-        onScroll={(e) => {
-          if (!isLoading && hasMoreProjects)
-            handleScrollToBottom(e, handleGetMoreProjects);
-        }}
-      >
-        <BreadcrumbContainer>
-          {favoriteProjects.length > 0 && (
-            <Breadcrumb
-              items={[
-                {
-                  title: (
-                    <Typography
-                      size="h5"
-                      weight="bold"
-                      color={theme.content.weak}
-                    >
-                      Stars
-                    </Typography>
-                  ),
-                },
-                ...(searchTerm
-                  ? [
-                      {
-                        title: (
-                          <Typography
-                            size="h5"
-                            weight="bold"
-                            color={theme.content.weak}
-                          >
-                            {`${t("Search Result for")} "${searchTerm}"`}
-                          </Typography>
-                        ),
-                      },
-                    ]
-                  : []),
-              ]}
-            />
-          )}
-        </BreadcrumbContainer>
-        {layout === "grid" && (
-          <ProjectsContainer>
-            {favoriteProjects.length > 0 && (
-              <ProjectsGrid>
-                {favoriteProjects.map((project) => (
-                  <ProjectGridViewItem
-                    key={project.id}
-                    project={project}
-                    selectedProjectId={selectedProject?.id}
-                    onProjectUpdate={handleProjectUpdate}
-                    onProjectSelect={handleProjectSelect}
-                    onProjectOpen={() => handleProjectOpen(project.sceneId)}
-                  />
-                ))}
-              </ProjectsGrid>
-            )}
-            <Breadcrumb
-              items={[
-                {
-                  title: (
-                    <Typography
-                      size="h5"
-                      weight="bold"
-                      color={theme.content.weak}
-                      onClick={() => handleSearch(undefined)}
-                    >
-                      All Projects
-                    </Typography>
-                  ),
-                },
-                ...(searchTerm
-                  ? [
-                      {
-                        title: (
-                          <Typography
-                            size="h5"
-                            weight="bold"
-                            color={theme.content.weak}
-                          >
-                            {`${t("Search Result for")} "${searchTerm}"`}
-                          </Typography>
-                        ),
-                      },
-                    ]
-                  : []),
-              ]}
-            />
-            <ProjectsGrid>
-              {filtedProjects.map((project) => (
-                <ProjectGridViewItem
-                  key={project.id}
-                  project={project}
-                  selectedProjectId={selectedProject?.id}
-                  onProjectUpdate={handleProjectUpdate}
-                  onProjectSelect={handleProjectSelect}
-                  onProjectOpen={() => handleProjectOpen(project.sceneId)}
-                />
-              ))}
-            </ProjectsGrid>
-          </ProjectsContainer>
-        )}
-        {layout === "list" && (
-          <FlexTable>
-            <FlexTableRow>
-              <ActionCell />
-              <ProjectNameCell>
-                <Typography size="body" color={theme.content.weak}>
-                  {t("Project Name")}
-                </Typography>
-              </ProjectNameCell>
-              <TimeCell>
-                <Typography size="body" color={theme.content.weak}>
-                  {t("Updated At")}
-                </Typography>
-              </TimeCell>
-              <TimeCell>
-                <Typography size="body" color={theme.content.weak}>
-                  {t("Created At")}
-                </Typography>
-              </TimeCell>
-              <ActionCell />
-            </FlexTableRow>
-            <FlexTableBody>
-              <ProjectsContainer>
-                {favoriteProjects.length > 0 &&
-                  favoriteProjects.map((project) => (
-                    <FlexTableRow key={project.id}>
-                      <ProjectListViewItem
-                        key={project.id}
-                        project={project}
-                        selectedProjectId={selectedProject?.id}
-                        onProjectUpdate={handleProjectUpdate}
-                        onProjectSelect={handleProjectSelect}
-                        onProjectOpen={() => handleProjectOpen(project.sceneId)}
-                      />
-                    </FlexTableRow>
-                  ))}
+        {isLoading ? (
+              <LoadingWrapper>
+                <Loading relative />
+              </LoadingWrapper>
+            ) :  filtedProjects.length ?  <ManagerContent>
+            <ContentWrapper>
+              <BreadcrumbContainer>
                 <Breadcrumb
                   items={[
                     {
                       title: (
-                        <Typography
-                          size="h5"
-                          weight="bold"
-                          color={theme.content.weak}
-                          onClick={() => handleSearch(undefined)}
-                        >
-                          All Projects
+                        <Typography size="h5" weight="bold" color={theme.content.weak}>
+                          {t("All projects")}
                         </Typography>
                       ),
                     },
@@ -234,7 +103,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                                 weight="bold"
                                 color={theme.content.weak}
                               >
-                                {searchTerm}
+                                {`${t("Search Result for")} "${searchTerm}"`}
                               </Typography>
                             ),
                           },
@@ -242,28 +111,72 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                       : []),
                   ]}
                 />
-                {filtedProjects.map((project) => (
-                  <FlexTableRow key={project.id}>
-                    <ProjectListViewItem
-                      key={project.id}
-                      project={project}
-                      selectedProjectId={selectedProject?.id}
-                      onProjectUpdate={handleProjectUpdate}
-                      onProjectSelect={handleProjectSelect}
-                      onProjectOpen={() => handleProjectOpen(project.sceneId)}
-                    />
-                  </FlexTableRow>
-                ))}
-              </ProjectsContainer>
-            </FlexTableBody>
-          </FlexTable>
-        )}
-        {isLoading && (
-          <LoadingWrapper>
-            <Loading relative />
-          </LoadingWrapper>
-        )}
-      </ProjectsWrapper>
+              </BreadcrumbContainer>
+                   {layout === "list" && (
+              <ListHeader width={contentWidth}>
+              <ThumbnailCol />
+              <ProjectNameCol>
+                <Typography size="body" color={theme.content.weak}>
+                  {t("Project Name")}
+                </Typography>
+              </ProjectNameCol>
+              <TimeCol>
+                <Typography size="body" color={theme.content.weak}>
+                  {t("Updated At")}
+                </Typography>
+              </TimeCol>
+              <TimeCol>
+                <Typography size="body" color={theme.content.weak}>
+                  {t("Created At")}
+                </Typography>
+              </TimeCol>
+              <ActionCol />
+              </ListHeader>
+            
+              )}
+              <ProjectsWrapper
+                ref={wrapperRef}
+                onScroll={e => {
+                  if(!isLoading && hasMoreProjects){
+                    handleScrollToBottom(e, handleGetMoreProjects)
+                  }
+                }}>
+                <ProjectsContainer ref={contentRef}>
+                  <ProjectsGroup layout={layout}>
+                    {filtedProjects.map(project =>
+                      layout === "grid" ? (
+                        <ProjectGridViewItem
+                          key={project.id}
+                          project={project}
+                          selectedProjectId={selectedProject?.id}
+                          onProjectUpdate={handleProjectUpdate}
+                          onProjectSelect={handleProjectSelect}
+                          onProjectOpen={() => handleProjectOpen(project.sceneId)}
+                        />
+                      ) : (
+                        <ProjectListViewItem
+                          key={project.id}
+                          project={project}
+                          selectedProjectId={selectedProject?.id}
+                          onProjectUpdate={handleProjectUpdate}
+                          onProjectSelect={handleProjectSelect}
+                          onProjectOpen={() => handleProjectOpen(project.sceneId)}
+                        />
+                      ),
+                    )}
+                  </ProjectsGroup>
+                </ProjectsContainer>
+              </ProjectsWrapper>
+            </ContentWrapper>
+           </ManagerContent> :
+                  <ManagerEmptyContent>
+                  <Typography size="h5" color={theme.content.weak}>
+                    {t("No Project has been created yet")}
+                  </Typography>
+                </ManagerEmptyContent>
+        
+                  }
+
       {projectCreatorVisible && (
         <ProjectCreatorModal
           visible={projectCreatorVisible}
@@ -271,82 +184,99 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
           onProjectCreate={handleProjectCreate}
         />
       )}
-    </Wrapper>
+    </ManagerWrapper>
   );
 };
 
 export default Projects;
 
-const Wrapper = styled("div")(() => ({
+const ContentWrapper = styled("div")(({ theme }) => ({
   display: "flex",
-  height: "100%",
   flexDirection: "column",
-  boxSizing: "border-box",
-}));
-
-const ProjectsWrapper = styled("div")(({ theme }) => ({
-  overflowY: "auto",
-  padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px ${theme.spacing.largest}px`,
-  maxHeight: "calc(100vh - 76px)",
+  gap: theme.spacing.normal,
+  flex: 1,
+  height: 0,
 }));
 
-const ProjectsContainer = styled("div")(({ theme }) => ({
+const ProjectsWrapper = styled("div")(() => ({
+  position: "relative",
   display: "flex",
-  gap: theme.spacing.large,
   flexDirection: "column",
+  flex: 1,
+  overflow: "auto",
 }));
 
 const BreadcrumbContainer = styled("div")(({ theme }) => ({
-  paddingBottom: theme.spacing.large,
+  padding: `0 ${theme.spacing.largest}px`,
 }));
-const ProjectsGrid = styled("div")(({ theme }) => ({
-  display: "grid",
-  gap: theme.spacing.normal,
-  width: "100%",
-  gridTemplateColumns: "repeat(4, 1fr)",
 
-  "@media (max-width: 1200px)": {
-    gridTemplateColumns: "repeat(3, 1fr)",
-  },
-  "@media (max-width: 900px)": {
-    gridTemplateColumns: "repeat(2, 1fr)",
-  },
-  "@media (max-width: 600px)": {
-    gridTemplateColumns: "1fr",
-  },
-}));
-
-const FlexTable = styled("div")(({ theme }) => ({
+const ProjectsContainer = styled("div")(({ theme }) => ({
   display: "flex",
+  gap: theme.spacing.large,
   flexDirection: "column",
-  gap: theme.spacing.normal,
+  padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px ${theme.spacing.largest}px`,
+
 }));
 
-const FlexTableBody = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: "12px",
+const ProjectsGroup = styled("div")<{ layout: ManagerLayout }>(({ theme, layout }) => ({
+  ...(layout === "grid"
+    ? {
+        display: "grid",
+        gap: theme.spacing.normal,
+        width: "100%",
+        gridTemplateColumns: "repeat(4, 1fr)",
+
+        "@media (max-width: 1200px)": {
+          gridTemplateColumns: "repeat(3, 1fr)",
+        },
+        "@media (max-width: 900px)": {
+          gridTemplateColumns: "repeat(2, 1fr)",
+        },
+        "@media (max-width: 600px)": {
+          gridTemplateColumns: "1fr",
+        },
+      }
+    : {}),
+  ...(layout === "list"
+    ? {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing.normal,
+      }
+    : {}),
 }));
 
-const FlexTableRow = styled("div")(({ theme }) => ({
+const ListHeader = styled("div")<{width: number}>(({ width, theme }) => ({
   display: "flex",
-  width: "100%",
-  gap: theme.spacing.large,
+  alignItems: "center",
+  boxSizing: "border-box",
+  padding: `${theme.spacing.smallest}px ${theme.spacing.largest}px`,
+  width: width === 0 ? "100%" : width,
 }));
 
-const ActionCell = styled("div")(() => ({
-  flex: 0.2,
+
+const ThumbnailCol = styled("div")(() => ({
+  width: 120,
+  flexShrink: 0
 }));
 
-const ProjectNameCell = styled("div")(() => ({
+const ProjectNameCol = styled("div")(() => ({
   flex: 1,
+  flexShrink: 0
+}));
+
+const TimeCol = styled("div")(() => ({
+  flex: "0 0 20%",
+  flexShrink: 0
+
 }));
 
-const TimeCell = styled("div")(() => ({
-  flex: 0.5,
+const ActionCol = styled("div")(() => ({
+  flex: "0 0 10%",
+  flexShrink: 0
 }));
 
 const LoadingWrapper = styled("div")(() => ({
   width: "100%",
-  height: 100,
+  height: "100%",
 }));
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
index a0b4fcaa4..b34deccb6 100644
--- a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
+++ b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
@@ -1,12 +1,14 @@
 import {
   SidebarMenuItem,
   SidebarSection,
+  SidebarTopSectionWrapper,
   SidebarVersion,
   SidebarWrapper,
 } from "@reearth/beta/ui/components/Sidebar";
 import { useT } from "@reearth/services/i18n";
 import { FC } from "react";
 
+import StarredProject from "../ContentsContainer/Projects/StarredProject";
 import { TabItems, Workspace } from "../type";
 
 import { Profile } from "./profile";
@@ -44,7 +46,7 @@ const LeftSidePanel: FC<Props> = ({
           onSignOut={onSignOut}
           onWorkspaceChange={onWorkspaceChange}
         />
-        <>
+        <SidebarTopSectionWrapper>
           {topTabs?.map((tab) => (
             <SidebarMenuItem
               key={tab.id}
@@ -55,7 +57,8 @@ const LeftSidePanel: FC<Props> = ({
               disabled={tab.disabled}
             />
           ))}
-        </>
+          <StarredProject  workspaceId={currentWorkspace?.id}/>
+        </SidebarTopSectionWrapper>
       </SidebarSection>
       <SidebarSection>
         <>
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
index 152661816..09ad18e6d 100644
--- a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
+++ b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
@@ -65,31 +65,38 @@ export const Profile: FC<ProfileProp> = ({
   ];
 
   return (
-    <ProfileWrapper>
-      {isPersonal && (
-        <Avatar>
-          <Typography size="body">
-            {currentUser?.charAt(0).toUpperCase()}
-          </Typography>
-        </Avatar>
-      )}
-      <Typography size="body" weight="bold">
-        {currentUser}
+    <Wrapper>
+      <Typography size="body" weight="bold" color={theme.dangerous.strong}>
+        {t("Re:Earth Visualizer")}
       </Typography>
-      <div>
-        <PopupMenu
-          label={
-            <Icon color={theme.content.weak} icon="caretDown" size="small" />
-          }
-          menu={popupMenu}
-        />
-      </div>
-    </ProfileWrapper>
+      <ProfileWrapper>
+        {isPersonal && (
+          <Avatar>
+            <Typography size="body">{currentUser?.charAt(0).toUpperCase()}</Typography>
+          </Avatar>
+        )}
+        <TitleWrapper>{currentUser}</TitleWrapper>
+        <PopupWrapper>
+          <PopupMenu
+            label={<Icon color={theme.content.weak} icon="caretDown" size="small" />}
+            menu={popupMenu}
+          />
+        </PopupWrapper>
+      </ProfileWrapper>
+    </Wrapper>
   );
 };
 
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.normal,
+  borderBottom: `1px solid ${theme.outline.weaker}`,
+  alignContent: "center",
+  padding: theme.spacing.normal,
+}));
+
 const ProfileWrapper = styled("div")(({ theme }) => ({
-  padding: `0 ${theme.spacing.small}px`,
   display: "flex",
   gap: theme.spacing.small,
   alignItems: "center",
@@ -103,4 +110,16 @@ const Avatar = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  flexShrink: 0,
 }));
+
+const TitleWrapper = styled("div")(({ theme }) => ({
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.bold,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-all",
+}));
+
+const PopupWrapper = styled("div")(() => ({}));
diff --git a/web/src/beta/features/Dashboard/index.tsx b/web/src/beta/features/Dashboard/index.tsx
index 74b226282..be625a01a 100644
--- a/web/src/beta/features/Dashboard/index.tsx
+++ b/web/src/beta/features/Dashboard/index.tsx
@@ -1,14 +1,14 @@
-import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/beta/ui/components/Sidebar";
-import { useT } from "@reearth/services/i18n";
-import { styled, useTheme } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 
+
 import ContentsContainer from "./ContentsContainer";
 import useHooks from "./hooks";
 import LeftSidePanel from "./LeftSidePanel";
 import { TabItems } from "./type";
 
+
 export type DashboardProps = {
   workspaceId?: string;
 };
@@ -44,17 +44,9 @@ const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
     handleWorkspaceChange,
   } = useHooks({ workspaceId, topTabItems, bottomTabsItems });
 
-  const t = useT();
-  const theme = useTheme();
-
   return (
     <Wrapper>
       <LeftSideWrapper>
-        <Header>
-          <Typography size="body" weight="bold" color={theme.dangerous.strong}>
-            {t("Re:Earth Visualizer")}
-          </Typography>
-        </Header>
         <LeftSidePanel
           tab={currentTab}
           isPersonal={isPersonal}
@@ -111,9 +103,3 @@ const LeftSideWrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.super,
   boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.50)",
 }));
-
-const Header = styled("div")(({ theme }) => ({
-  borderBottom: `1px solid ${theme.outline.weaker}`,
-  alignContent: "center",
-  padding: theme.spacing.normal,
-}));
diff --git a/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx b/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
index 045577051..fa574ffe0 100644
--- a/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
@@ -9,9 +9,12 @@ export type CollapseProps = {
   background?: string;
   headerBg?: string;
   size?: "normal" | "small" | "large";
+  iconPosition?: "left" | "right";
+  weight?: "medium" | "regular" | "bold";
   collapsed?: boolean;
   noPadding?: boolean;
   disabled?: boolean;
+
   actions?: ReactNode;
   children: ReactNode;
   onCollapse?: (collapsed: boolean) => void;
@@ -22,6 +25,8 @@ export const Collapse: FC<CollapseProps> = ({
   background,
   headerBg,
   size = "normal",
+  weight = "regular",
+  iconPosition = "right",
   collapsed,
   disabled,
   noPadding,
@@ -48,17 +53,19 @@ export const Collapse: FC<CollapseProps> = ({
         isCollapsed={isCollapsed}
         size={size}
         headerBg={headerBg}
-        disabled={disabled}
-      >
-        <Typography size="body">{title}</Typography>
-        <ActionsWapper>
+        iconPosition={iconPosition}
+        disabled={disabled}>
+        <Typography size="body" weight={weight}>
+          {title}
+        </Typography>
+        <ActionsWrapper>
           {actions}
           {!disabled && (
-            <IconWrapper isCollapsed={isCollapsed}>
+            <IconWrapper isCollapsed={isCollapsed} iconPosition={iconPosition}>
               <Icon size="small" icon="triangle" />
             </IconWrapper>
           )}
-        </ActionsWapper>
+        </ActionsWrapper>
       </StyledHeader>
       {!isCollapsed && (
         <ChildWrapper size={size} background={background} noPadding={noPadding}>
@@ -85,9 +92,11 @@ const StyledHeader = styled("div")<{
   size?: "normal" | "small" | "large";
   headerBg?: string;
   isCollapsed?: boolean;
+  iconPosition?: "left" | "right";
   disabled?: boolean;
-}>(({ headerBg, size, isCollapsed, disabled, theme }) => ({
+}>(({ headerBg, size, isCollapsed, iconPosition, disabled, theme }) => ({
   display: "flex",
+  flexDirection: iconPosition === "left" ? "row-reverse" : "row",
   borderRadius: isCollapsed
     ? `${theme.radius.small}px`
     : `${theme.radius.small}px ${theme.radius.small}px 0px 0px`,
@@ -98,7 +107,8 @@ const StyledHeader = styled("div")<{
         ? `${theme.spacing.large}px`
         : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
   minHeight: size === "normal" ? "34px" : "28px",
-  justifyContent: "space-between",
+  gap: iconPosition === "left" ? "8px" : "0px",
+  justifyContent: iconPosition === "left" ? "flex-end" : "space-between",
   alignItems: "center",
   color: `${theme.content.main}`,
   cursor: disabled ? "auto" : "pointer",
@@ -107,7 +117,7 @@ const StyledHeader = styled("div")<{
   boxSizing: "border-box",
 }));
 
-const ActionsWapper = styled("div")(({ theme }) => ({
+const ActionsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.micro,
@@ -136,7 +146,15 @@ const ChildWrapper = styled("div")<{
 
 const IconWrapper = styled("div")<{
   isCollapsed?: boolean;
-}>(({ isCollapsed }) => ({
-  rotate: isCollapsed ? "0deg" : "-90deg",
+  iconPosition?: "left" | "right";
+}>(({ isCollapsed, iconPosition }) => ({
+  rotate:
+    iconPosition === "left"
+      ? isCollapsed
+        ? "-180deg"
+        : "-90deg"
+      : isCollapsed
+      ? "0deg"
+      : "-90deg",
   transition: "rotate 0.2s ease-in",
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/CaretDoubleUp.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/CaretDoubleUp.svg
index 36ecae2eb..9264e6eda 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/Icons/CaretDoubleUp.svg
+++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/CaretDoubleUp.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 13L8 8L13 13" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3 8L8 3L13 8" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 13L8 8L13 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 8L8 3L13 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/Lock.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Lock.svg
index 2d932a9b7..0749f061e 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/Icons/Lock.svg
+++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Lock.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 5.5H3C2.72386 5.5 2.5 5.72386 2.5 6V13C2.5 13.2761 2.72386 13.5 3 13.5H13C13.2761 13.5 13.5 13.2761 13.5 13V6C13.5 5.72386 13.2761 5.5 13 5.5Z" stroke="#E0E0E0" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.75 5.5V3.25C5.75 2.65326 5.98705 2.08097 6.40901 1.65901C6.83097 1.23705 7.40326 1 8 1C8.59674 1 9.16903 1.23705 9.59099 1.65901C10.0129 2.08097 10.25 2.65326 10.25 3.25V5.5" stroke="#E0E0E0" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 10.25C8.41421 10.25 8.75 9.91421 8.75 9.5C8.75 9.08579 8.41421 8.75 8 8.75C7.58579 8.75 7.25 9.08579 7.25 9.5C7.25 9.91421 7.58579 10.25 8 10.25Z" fill="#E0E0E0"/>
+<path d="M13 5.5H3C2.72386 5.5 2.5 5.72386 2.5 6V13C2.5 13.2761 2.72386 13.5 3 13.5H13C13.2761 13.5 13.5 13.2761 13.5 13V6C13.5 5.72386 13.2761 5.5 13 5.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.75 5.5V3.25C5.75 2.65326 5.98705 2.08097 6.40901 1.65901C6.83097 1.23705 7.40326 1 8 1C8.59674 1 9.16903 1.23705 9.59099 1.65901C10.0129 2.08097 10.25 2.65326 10.25 3.25V5.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10.25C8.41421 10.25 8.75 9.91421 8.75 9.5C8.75 9.08579 8.41421 8.75 8 8.75C7.58579 8.75 7.25 9.08579 7.25 9.5C7.25 9.91421 7.58579 10.25 8 10.25Z" fill="currentColor"/>
 </svg>
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/Notebook.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Notebook.svg
new file mode 100644
index 000000000..7011730f1
--- /dev/null
+++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Notebook.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.79289 13.5H3C2.86739 13.5 2.74021 13.4473 2.64645 13.3536C2.55268 13.2598 2.5 13.1326 2.5 13V3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H13C13.1326 2.5 13.2598 2.55268 13.3536 2.64645C13.4473 2.74021 13.5 2.86739 13.5 3V9.79289C13.5 9.85855 13.4871 9.92357 13.4619 9.98423C13.4368 10.0449 13.4 10.1 13.3536 10.1464L10.1464 13.3536C10.1 13.4 10.0449 13.4368 9.98423 13.4619C9.92357 13.4871 9.85855 13.5 9.79289 13.5V13.5Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M13.4551 9.9995H10V13.4545" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/plugin.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/plugin.svg
index d53ad1837..1bfb7cb23 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/Icons/plugin.svg
+++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/plugin.svg
@@ -1,5 +1,5 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Icon/regular">
-<path id="Vector" d="M2.99998 10.125C2.95074 10.125 2.90197 10.1153 2.85648 10.0965C2.81098 10.0776 2.76964 10.05 2.73482 10.0152C2.7 9.98035 2.67237 9.93901 2.65353 9.89351C2.63468 9.84802 2.62498 9.79925 2.62498 9.75001L2.62501 7.74869C2.42496 7.84344 2.20419 7.88606 1.98325 7.87257C1.76231 7.85909 1.54836 7.78995 1.36132 7.67157C1.17427 7.5532 1.02021 7.38944 0.913445 7.19553C0.806686 7.00163 0.750702 6.78387 0.750702 6.56251C0.750702 6.34116 0.806686 6.1234 0.913445 5.92949C1.02021 5.73558 1.17427 5.57182 1.36132 5.45345C1.54836 5.33508 1.76231 5.26593 1.98325 5.25245C2.20419 5.23897 2.42496 5.28158 2.62501 5.37633L2.62499 3.37502C2.62499 3.32577 2.63468 3.277 2.65353 3.23151C2.67238 3.18601 2.7 3.14467 2.73482 3.10985C2.76964 3.07502 2.81098 3.0474 2.85648 3.02856C2.90198 3.00971 2.95074 3.00001 2.99999 3.00001L5.1888 3.00004C5.09405 2.79999 5.05143 2.57922 5.06492 2.35828C5.0784 2.13733 5.14755 1.92339 5.26592 1.73635C5.38429 1.5493 5.54805 1.39524 5.74196 1.28848C5.93586 1.18172 6.15362 1.12573 6.37498 1.12573C6.59633 1.12573 6.81409 1.18172 7.008 1.28848C7.20191 1.39524 7.36566 1.5493 7.48403 1.73635C7.60241 1.92339 7.67155 2.13733 7.68504 2.35828C7.69852 2.57922 7.65591 2.79999 7.56116 3.00004L9.74996 3.00001C9.84942 3.00001 9.9448 3.03952 10.0151 3.10984C10.0855 3.18017 10.125 3.27555 10.125 3.37501L10.125 5.37633C9.92494 5.28158 9.70417 5.23896 9.48323 5.25245C9.26229 5.26593 9.04834 5.33508 8.8613 5.45345C8.67425 5.57182 8.52019 5.73558 8.41343 5.92949C8.30667 6.1234 8.25068 6.34116 8.25068 6.56251C8.25068 6.78387 8.30667 7.00162 8.41343 7.19553C8.52019 7.38944 8.67425 7.5532 8.8613 7.67157C9.04834 7.78995 9.26229 7.85909 9.48323 7.87257C9.70417 7.88606 9.92494 7.84344 10.125 7.74869L10.125 9.75002C10.125 9.84947 10.0855 9.94485 10.0151 10.0152C9.9448 10.0855 9.84942 10.125 9.74997 10.125L2.99998 10.125Z" stroke="#6F6F6F" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M2.99998 10.125C2.95074 10.125 2.90197 10.1153 2.85648 10.0965C2.81098 10.0776 2.76964 10.05 2.73482 10.0152C2.7 9.98035 2.67237 9.93901 2.65353 9.89351C2.63468 9.84802 2.62498 9.79925 2.62498 9.75001L2.62501 7.74869C2.42496 7.84344 2.20419 7.88606 1.98325 7.87257C1.76231 7.85909 1.54836 7.78995 1.36132 7.67157C1.17427 7.5532 1.02021 7.38944 0.913445 7.19553C0.806686 7.00163 0.750702 6.78387 0.750702 6.56251C0.750702 6.34116 0.806686 6.1234 0.913445 5.92949C1.02021 5.73558 1.17427 5.57182 1.36132 5.45345C1.54836 5.33508 1.76231 5.26593 1.98325 5.25245C2.20419 5.23897 2.42496 5.28158 2.62501 5.37633L2.62499 3.37502C2.62499 3.32577 2.63468 3.277 2.65353 3.23151C2.67238 3.18601 2.7 3.14467 2.73482 3.10985C2.76964 3.07502 2.81098 3.0474 2.85648 3.02856C2.90198 3.00971 2.95074 3.00001 2.99999 3.00001L5.1888 3.00004C5.09405 2.79999 5.05143 2.57922 5.06492 2.35828C5.0784 2.13733 5.14755 1.92339 5.26592 1.73635C5.38429 1.5493 5.54805 1.39524 5.74196 1.28848C5.93586 1.18172 6.15362 1.12573 6.37498 1.12573C6.59633 1.12573 6.81409 1.18172 7.008 1.28848C7.20191 1.39524 7.36566 1.5493 7.48403 1.73635C7.60241 1.92339 7.67155 2.13733 7.68504 2.35828C7.69852 2.57922 7.65591 2.79999 7.56116 3.00004L9.74996 3.00001C9.84942 3.00001 9.9448 3.03952 10.0151 3.10984C10.0855 3.18017 10.125 3.27555 10.125 3.37501L10.125 5.37633C9.92494 5.28158 9.70417 5.23896 9.48323 5.25245C9.26229 5.26593 9.04834 5.33508 8.8613 5.45345C8.67425 5.57182 8.52019 5.73558 8.41343 5.92949C8.30667 6.1234 8.25068 6.34116 8.25068 6.56251C8.25068 6.78387 8.30667 7.00162 8.41343 7.19553C8.52019 7.38944 8.67425 7.5532 8.8613 7.67157C9.04834 7.78995 9.26229 7.85909 9.48323 7.87257C9.70417 7.88606 9.92494 7.84344 10.125 7.74869L10.125 9.75002C10.125 9.84947 10.0855 9.94485 10.0151 10.0152C9.9448 10.0855 9.84942 10.125 9.74997 10.125L2.99998 10.125Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/switch.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/switch.svg
index 84d746d79..37829b830 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/Icons/switch.svg
+++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/switch.svg
@@ -1,6 +1,6 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.25 6.75L9.75 8.25L8.25 9.75" stroke="#6F6F6F" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.25 8.25H9.75" stroke="#6F6F6F" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3.75 5.25L2.25 3.75L3.75 2.25" stroke="#6F6F6F" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.75 3.75H2.25" stroke="#6F6F6F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.25 6.75L9.75 8.25L8.25 9.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.25 8.25H9.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 5.25L2.25 3.75L3.75 2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 3.75H2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
index 541dfe998..ff00921c7 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
+++ b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
@@ -80,6 +80,7 @@ import MapPin from "./Icons/MapPin.svg?react";
 import MapTrifold from "./Icons/MapTrifold.svg?react";
 import Minus from "./Icons/Minus.svg?react";
 import More from "./Icons/More.svg?react";
+import Notebook from "./Icons/Notebook.svg?react";
 import Padding from "./Icons/Padding.svg?react";
 import Page from "./Icons/Page.svg?react";
 import Palette from "./Icons/Palette.svg?react";
@@ -218,6 +219,7 @@ export default {
   mapTrifold: MapTrifold,
   minus: Minus,
   more: More,
+  notebook: Notebook,
   padding: Padding,
   page: Page,
   palette: Palette,
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
index a96f2a000..49624a1f9 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
@@ -117,10 +117,10 @@ export const PopupMenu: FC<PopupMenuProps> = ({
             <PopupMenu label={title} menu={subItem} width={width} nested />
           ) : path ? (
             <StyledLink to={path}>
-              <Typography size="body">{title}</Typography>
+              <TitleWrapper size="body">{title}</TitleWrapper>
             </StyledLink>
           ) : (
-            <Typography size="body">{title}</Typography>
+            <TitleWrapper size="body">{title}</TitleWrapper>
           )}
           {selected && (
             <Icon icon="check" size="small" color={theme.content.main} />
@@ -300,6 +300,7 @@ const SubItem = styled("div")(() => ({
   justifyContent: "space-between",
   justifyItems: "center",
   flexGrow: 1,
+  alignItems: "center",
 }));
 
 const Label = styled("p")<{ nested: boolean }>(({ nested, theme }) => ({
@@ -336,3 +337,9 @@ const Group = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: `${theme.spacing.micro}px`,
 }));
+
+const TitleWrapper = styled(Typography)(({ theme }) => ({
+  color: theme.content.main,
+  whiteSpace: "nowrap",
+  maxWidth: "160px",
+}));
diff --git a/web/src/beta/lib/reearth-ui/components/index.ts b/web/src/beta/lib/reearth-ui/components/index.ts
index 61efbd858..08431d0e6 100644
--- a/web/src/beta/lib/reearth-ui/components/index.ts
+++ b/web/src/beta/lib/reearth-ui/components/index.ts
@@ -1,12 +1,12 @@
 export * from "./Button";
 export * from "./Icon";
+export * from "./Typography";
 export * from "./NumberInput";
 export * from "./Popup";
 export * from "./PopupMenu";
 export * from "./PopupPanel";
 export * from "./TextArea";
 export * from "./TextInput";
-export * from "./Typography";
 export * from "./CodeInput";
 export * from "./Collapse";
 export * from "./Switcher";
diff --git a/web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx b/web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx
new file mode 100644
index 000000000..8989e02f0
--- /dev/null
+++ b/web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx
@@ -0,0 +1,17 @@
+import { styled } from "@reearth/services/theme";
+import { FC, ReactNode } from "react";
+
+const ManagerEmptyContent: FC<{ children?: ReactNode }> = ({ children }) => {
+    return (
+        <WrapperContent>
+            {children}
+        </WrapperContent>
+    )
+}
+const WrapperContent = styled("div")(() => ({
+    display: "flex",
+    justifyContent: "center",
+    margin: "auto"
+  }));
+
+export default ManagerEmptyContent;
\ No newline at end of file
diff --git a/web/src/beta/ui/components/Sidebar/index.tsx b/web/src/beta/ui/components/Sidebar/index.tsx
index 4569a09ae..f4584b979 100644
--- a/web/src/beta/ui/components/Sidebar/index.tsx
+++ b/web/src/beta/ui/components/Sidebar/index.tsx
@@ -77,6 +77,12 @@ export const SidebarWrapper = styled("div")(({ theme }) => ({
   justifyContent: "space-between",
 }));
 
+export const SidebarTopSectionWrapper = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+}));
+
 export const SidebarSection = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
index 5e61bb798..3a4dc5cad 100644
--- a/web/src/services/api/projectApi.ts
+++ b/web/src/services/api/projectApi.ts
@@ -1,9 +1,4 @@
-import {
-  useApolloClient,
-  useLazyQuery,
-  useMutation,
-  useQuery,
-} from "@apollo/client";
+import { useLazyQuery, useMutation, useQuery } from "@apollo/client";
 import { type PublishStatus } from "@reearth/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks";
 import { GetProjectsQueryVariables } from "@reearth/services/gql";
 import {
@@ -22,6 +17,7 @@ import {
   DELETE_PROJECT,
   GET_PROJECT,
   GET_PROJECTS,
+  GET_STARRED_PROJECTS,
   PUBLISH_PROJECT,
   UPDATE_PROJECT,
   UPDATE_PROJECT_ALIAS,
@@ -43,7 +39,6 @@ export type Project = ProjectPayload["project"];
 export default () => {
   const t = useT();
   const [, setNotification] = useNotification();
-  const apolloCache = useApolloClient().cache;
 
   const useProjectQuery = useCallback((projectId?: string) => {
     const { data, ...rest } = useQuery(GET_PROJECT, {
@@ -53,7 +48,7 @@ export default () => {
 
     const project = useMemo(
       () => (data?.node?.__typename === "Project" ? data.node : undefined),
-      [data?.node],
+      [data?.node]
     );
 
     return { project, ...rest };
@@ -68,7 +63,7 @@ export default () => {
 
     const projects = useMemo(
       () => data?.projects?.edges.map((e) => e.node),
-      [data?.projects],
+      [data?.projects]
     );
 
     const hasMoreProjects = useMemo(
@@ -78,17 +73,31 @@ export default () => {
       [
         data?.projects.pageInfo?.hasNextPage,
         data?.projects.pageInfo?.hasPreviousPage,
-      ],
+      ]
     );
     const isRefetching = useMemo(() => networkStatus < 7, [networkStatus]);
     const endCursor = useMemo(
       () => data?.projects.pageInfo?.endCursor,
-      [data?.projects.pageInfo?.endCursor],
+      [data?.projects.pageInfo?.endCursor]
     );
 
     return { projects, hasMoreProjects, isRefetching, endCursor, ...rest };
   }, []);
 
+  const useStarredProjectsQuery = useCallback((teamId?: string) => {
+    const { data, ...rest } = useQuery(GET_STARRED_PROJECTS, {
+      variables: { teamId: teamId ?? "" },
+      skip: !teamId,
+    });
+
+    const starredProjects = useMemo(
+      () => data?.starredProjects.nodes,
+      [data?.starredProjects]
+    );
+
+    return { starredProjects, ...rest };
+  }, []);
+
   const useProjectAliasCheckLazyQuery = useCallback(() => {
     return useLazyQuery(CHECK_PROJECT_ALIAS);
   }, []);
@@ -106,7 +115,7 @@ export default () => {
       name: string,
       coreSupport: boolean,
       description?: string,
-      imageUrl?: string,
+      imageUrl?: string
     ): Promise<MutationReturn<Partial<Project>>> => {
       const { data: projectResults, errors: projectErrors } =
         await createNewProject({
@@ -178,7 +187,7 @@ export default () => {
       t,
       setNotification,
       useCreateStoryPage,
-    ],
+    ]
   );
 
   const [publishProjectMutation, { loading: publishProjectLoading }] =
@@ -206,8 +215,6 @@ export default () => {
         return { status: "error" };
       }
 
-      apolloCache.evict({ fieldName: "projects" });
-
       setNotification({
         type:
           s === "limited" ? "success" : s == "published" ? "success" : "info",
@@ -216,23 +223,24 @@ export default () => {
             ? t("Successfully published your scene!")
             : s == "published"
               ? t(
-                  "Successfully published your project with search engine indexing!",
+                  "Successfully published your project with search engine indexing!"
                 )
               : t(
-                  "Successfully unpublished your scene. Now nobody can access your scene.",
+                  "Successfully unpublished your scene. Now nobody can access your scene."
                 ),
       });
       return { data: data.publishProject.project, status: "success" };
     },
-    [apolloCache, publishProjectMutation, t, setNotification],
+    [publishProjectMutation, t, setNotification]
   );
 
   const [updateProjectMutation] = useMutation(UPDATE_PROJECT, {
-    refetchQueries: ["GetProject"],
+    refetchQueries: ["GetProject", "GetStarredProjects"],
   });
   const useUpdateProject = useCallback(
     async (input: UpdateProjectInput) => {
       if (!input.projectId) return { status: "error" };
+
       const { data, errors } = await updateProjectMutation({
         variables: { ...input },
       });
@@ -247,15 +255,13 @@ export default () => {
         return { status: "error" };
       }
 
-      apolloCache.evict({ fieldName: "projects" });
-
       setNotification({
         type: "success",
         text: t("Successfully updated project!"),
       });
       return { data: data?.updateProject?.project, status: "success" };
     },
-    [apolloCache, updateProjectMutation, t, setNotification],
+    [updateProjectMutation, t, setNotification]
   );
 
   const [archiveProjectMutation] = useMutation(ARCHIVE_PROJECT, {
@@ -285,12 +291,12 @@ export default () => {
         text: input.archived
           ? t("Successfully archive project!")
           : t(
-              "Successfully unarchived the project. You can now edit this project.",
+              "Successfully unarchived the project. You can now edit this project."
             ),
       });
       return { status: "success" };
     },
-    [archiveProjectMutation, t, setNotification],
+    [archiveProjectMutation, t, setNotification]
   );
 
   const [deleteProjectMutation] = useMutation(DELETE_PROJECT, {
@@ -313,22 +319,20 @@ export default () => {
         return { status: "error" };
       }
 
-      apolloCache.evict({ fieldName: "projects" });
-
       setNotification({
         type: "success",
         text: t("Successfully delete project!"),
       });
       return { status: "success" };
     },
-    [apolloCache, deleteProjectMutation, t, setNotification],
+    [deleteProjectMutation, t, setNotification]
   );
 
   const [updateProjectBasicAuthMutation] = useMutation(
     UPDATE_PROJECT_BASIC_AUTH,
     {
       refetchQueries: ["GetProject"],
-    },
+    }
   );
   const useUpdateProjectBasicAuth = useCallback(
     async (input: UpdateProjectBasicAuthMutationVariables) => {
@@ -347,15 +351,13 @@ export default () => {
         return { status: "error" };
       }
 
-      apolloCache.evict({ fieldName: "projects" });
-
       setNotification({
         type: "success",
         text: t("Successfully updated project!"),
       });
       return { data: data?.updateProject?.project, status: "success" };
     },
-    [apolloCache, updateProjectBasicAuthMutation, t, setNotification],
+    [updateProjectBasicAuthMutation, t, setNotification]
   );
 
   const [updateProjectAliasMutation] = useMutation(UPDATE_PROJECT_ALIAS);
@@ -376,15 +378,13 @@ export default () => {
         return { status: "error" };
       }
 
-      apolloCache.evict({ fieldName: "projects" });
-
       setNotification({
         type: "success",
         text: t("Successfully updated project!"),
       });
       return { data: data?.updateProject?.project, status: "success" };
     },
-    [apolloCache, updateProjectAliasMutation, t, setNotification],
+    [updateProjectAliasMutation, t, setNotification]
   );
 
   return {
@@ -399,5 +399,6 @@ export default () => {
     useDeleteProject,
     useUpdateProjectBasicAuth,
     useUpdateProjectAlias,
+    useStarredProjectsQuery,
   };
 };
diff --git a/web/src/services/gql/__gen__/gql.ts b/web/src/services/gql/__gen__/gql.ts
index c8a2a9102..54b17ecc6 100644
--- a/web/src/services/gql/__gen__/gql.ts
+++ b/web/src/services/gql/__gen__/gql.ts
@@ -59,6 +59,7 @@ const documents = {
     "\n  mutation PublishProject($projectId: ID!, $alias: String, $status: PublishmentStatus!) {\n    publishProject(input: { projectId: $projectId, alias: $alias, status: $status }) {\n      project {\n        id\n        alias\n        publishmentStatus\n      }\n    }\n  }\n": types.PublishProjectDocument,
     "\n  mutation ArchiveProject($projectId: ID!, $archived: Boolean!) {\n    updateProject(input: { projectId: $projectId, archived: $archived }) {\n      project {\n        id\n        isArchived\n      }\n    }\n  }\n": types.ArchiveProjectDocument,
     "\n  mutation DeleteProject($projectId: ID!) {\n    deleteProject(input: { projectId: $projectId }) {\n      projectId\n    }\n  }\n": types.DeleteProjectDocument,
+    "\n  query GetStarredProjects($teamId: ID!) {\n    starredProjects(teamId: $teamId) {\n\t\t\t\tnodes {\n\t\t\t\t\tid\n\t\t\t\t\tname\n\t\t\t\t\tstarred\n          scene {\n            id\n          }\n\t\t\t\t}\n\t\t\t\ttotalCount\n\t\t\t}\n  }\n": types.GetStarredProjectsDocument,
     "\n  mutation UpdatePropertyValue(\n    $propertyId: ID!\n    $schemaGroupId: ID\n    $itemId: ID\n    $fieldId: ID!\n    $value: Any\n    $type: ValueType!\n    $lang: Lang\n  ) {\n    updatePropertyValue(\n      input: {\n        propertyId: $propertyId\n        schemaGroupId: $schemaGroupId\n        itemId: $itemId\n        fieldId: $fieldId\n        value: $value\n        type: $type\n      }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.UpdatePropertyValueDocument,
     "\n  mutation AddPropertyItem(\n    $propertyId: ID!\n    $schemaGroupId: ID!\n    $lang: Lang\n  ) {\n    addPropertyItem(\n      input: {\n        propertyId: $propertyId\n        schemaGroupId: $schemaGroupId\n      }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.AddPropertyItemDocument,
     "\n  mutation RemovePropertyItem($propertyId: ID!, $schemaGroupId: ID!, $itemId: ID!, $lang: Lang) {\n    removePropertyItem(\n      input: { propertyId: $propertyId, schemaGroupId: $schemaGroupId, itemId: $itemId }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.RemovePropertyItemDocument,
@@ -286,6 +287,10 @@ export function gql(source: "\n  mutation ArchiveProject($projectId: ID!, $archi
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  mutation DeleteProject($projectId: ID!) {\n    deleteProject(input: { projectId: $projectId }) {\n      projectId\n    }\n  }\n"): (typeof documents)["\n  mutation DeleteProject($projectId: ID!) {\n    deleteProject(input: { projectId: $projectId }) {\n      projectId\n    }\n  }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  query GetStarredProjects($teamId: ID!) {\n    starredProjects(teamId: $teamId) {\n\t\t\t\tnodes {\n\t\t\t\t\tid\n\t\t\t\t\tname\n\t\t\t\t\tstarred\n          scene {\n            id\n          }\n\t\t\t\t}\n\t\t\t\ttotalCount\n\t\t\t}\n  }\n"): (typeof documents)["\n  query GetStarredProjects($teamId: ID!) {\n    starredProjects(teamId: $teamId) {\n\t\t\t\tnodes {\n\t\t\t\t\tid\n\t\t\t\t\tname\n\t\t\t\t\tstarred\n          scene {\n            id\n          }\n\t\t\t\t}\n\t\t\t\ttotalCount\n\t\t\t}\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts
index 337a320ef..da41a8249 100644
--- a/web/src/services/gql/__gen__/graphql.ts
+++ b/web/src/services/gql/__gen__/graphql.ts
@@ -2038,6 +2038,7 @@ export type Query = {
   propertySchemas: Array<PropertySchema>;
   scene?: Maybe<Scene>;
   searchUser?: Maybe<User>;
+  starredProjects: ProjectConnection;
 };
 
 
@@ -2127,6 +2128,11 @@ export type QuerySearchUserArgs = {
   nameOrEmail: Scalars['String']['input'];
 };
 
+
+export type QueryStarredProjectsArgs = {
+  teamId: Scalars['ID']['input'];
+};
+
 export type Rect = {
   __typename?: 'Rect';
   east: Scalars['Float']['output'];
@@ -3415,6 +3421,13 @@ export type DeleteProjectMutationVariables = Exact<{
 
 export type DeleteProjectMutation = { __typename?: 'Mutation', deleteProject?: { __typename?: 'DeleteProjectPayload', projectId: string } | null };
 
+export type GetStarredProjectsQueryVariables = Exact<{
+  teamId: Scalars['ID']['input'];
+}>;
+
+
+export type GetStarredProjectsQuery = { __typename?: 'Query', starredProjects: { __typename?: 'ProjectConnection', totalCount: number, nodes: Array<{ __typename?: 'Project', id: string, name: string, starred: boolean, scene?: { __typename?: 'Scene', id: string } | null } | null> } };
+
 export type UpdatePropertyValueMutationVariables = Exact<{
   propertyId: Scalars['ID']['input'];
   schemaGroupId?: InputMaybe<Scalars['ID']['input']>;
@@ -3720,6 +3733,7 @@ export const UpdateProjectAliasDocument = {"kind":"Document","definitions":[{"ki
 export const PublishProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"PublishProject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"alias"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"status"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PublishmentStatus"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"publishProject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"alias"},"value":{"kind":"Variable","name":{"kind":"Name","value":"alias"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"status"},"value":{"kind":"Variable","name":{"kind":"Name","value":"status"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"publishmentStatus"}}]}}]}}]}}]} as unknown as DocumentNode<PublishProjectMutation, PublishProjectMutationVariables>;
 export const ArchiveProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ArchiveProject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"archived"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateProject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"archived"},"value":{"kind":"Variable","name":{"kind":"Name","value":"archived"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"isArchived"}}]}}]}}]}}]} as unknown as DocumentNode<ArchiveProjectMutation, ArchiveProjectMutationVariables>;
 export const DeleteProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteProject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteProject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectId"}}]}}]}}]} as unknown as DocumentNode<DeleteProjectMutation, DeleteProjectMutationVariables>;
+export const GetStarredProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetStarredProjects"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"starredProjects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"teamId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"starred"}},{"kind":"Field","name":{"kind":"Name","value":"scene"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<GetStarredProjectsQuery, GetStarredProjectsQueryVariables>;
 export const UpdatePropertyValueDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdatePropertyValue"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"propertyId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"schemaGroupId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"itemId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"fieldId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"value"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Any"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"type"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ValueType"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lang"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Lang"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updatePropertyValue"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"propertyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"propertyId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"schemaGroupId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"schemaGroupId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"itemId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"itemId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"fieldId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"fieldId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"value"},"value":{"kind":"Variable","name":{"kind":"Name","value":"value"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"type"},"value":{"kind":"Variable","name":{"kind":"Name","value":"type"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}},{"kind":"Field","name":{"kind":"Name","value":"layer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"Layer1Fragment"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFieldLink"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyFieldLink"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"datasetId"}},{"kind":"Field","name":{"kind":"Name","value":"datasetSchemaId"}},{"kind":"Field","name":{"kind":"Name","value":"datasetSchemaFieldId"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFieldFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyField"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldLink"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyItemFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroupList"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyGroupFragment"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyGroupFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFragmentWithoutSchema"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Property"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyItemFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertySchemaFieldFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertySchemaField"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"translatedDescription"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"defaultValue"}},{"kind":"Field","name":{"kind":"Name","value":"ui"}},{"kind":"Field","name":{"kind":"Name","value":"min"}},{"kind":"Field","name":{"kind":"Name","value":"max"}},{"kind":"Field","name":{"kind":"Name","value":"choices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]}]}},{"kind":"Field","name":{"kind":"Name","value":"isAvailableIf"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertySchemaGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertySchemaGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"collection"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"isList"}},{"kind":"Field","name":{"kind":"Name","value":"representativeFieldId"}},{"kind":"Field","name":{"kind":"Name","value":"isAvailableIf"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertySchemaFieldFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Property"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragmentWithoutSchema"}},{"kind":"Field","name":{"kind":"Name","value":"schema"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertySchemaGroupFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InfoboxFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Infobox"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"propertyId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"propertyId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedPropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"actualValue"}},{"kind":"Field","name":{"kind":"Name","value":"overridden"}},{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldLink"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedPropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyFragmentWithoutSchema"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedProperty"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalId"}},{"kind":"Field","name":{"kind":"Name","value":"parentId"}},{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetId"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedProperty"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragmentWithoutSchema"}},{"kind":"Field","name":{"kind":"Name","value":"schema"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedInfoboxFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedInfobox"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalId"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LayerFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Layer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"isVisible"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"infobox"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"InfoboxFragment"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetSchemaId"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetId"}},{"kind":"Field","name":{"kind":"Name","value":"merged"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"parentId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"infobox"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedInfoboxFragment"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Layer1Fragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Layer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LayerFragment"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LayerFragment"}}]}}]}}]}}]} as unknown as DocumentNode<UpdatePropertyValueMutation, UpdatePropertyValueMutationVariables>;
 export const AddPropertyItemDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddPropertyItem"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"propertyId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"schemaGroupId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lang"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Lang"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addPropertyItem"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"propertyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"propertyId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"schemaGroupId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"schemaGroupId"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}},{"kind":"Field","name":{"kind":"Name","value":"layer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"Layer1Fragment"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFieldLink"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyFieldLink"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"datasetId"}},{"kind":"Field","name":{"kind":"Name","value":"datasetSchemaId"}},{"kind":"Field","name":{"kind":"Name","value":"datasetSchemaFieldId"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFieldFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyField"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldLink"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyItemFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroupList"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyGroupFragment"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyGroupFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFragmentWithoutSchema"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Property"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyItemFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertySchemaFieldFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertySchemaField"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"translatedDescription"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"defaultValue"}},{"kind":"Field","name":{"kind":"Name","value":"ui"}},{"kind":"Field","name":{"kind":"Name","value":"min"}},{"kind":"Field","name":{"kind":"Name","value":"max"}},{"kind":"Field","name":{"kind":"Name","value":"choices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]}]}},{"kind":"Field","name":{"kind":"Name","value":"isAvailableIf"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertySchemaGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertySchemaGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"collection"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"isList"}},{"kind":"Field","name":{"kind":"Name","value":"representativeFieldId"}},{"kind":"Field","name":{"kind":"Name","value":"isAvailableIf"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertySchemaFieldFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Property"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragmentWithoutSchema"}},{"kind":"Field","name":{"kind":"Name","value":"schema"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertySchemaGroupFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InfoboxFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Infobox"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"propertyId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"propertyId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedPropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"actualValue"}},{"kind":"Field","name":{"kind":"Name","value":"overridden"}},{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldLink"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedPropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyFragmentWithoutSchema"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedProperty"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalId"}},{"kind":"Field","name":{"kind":"Name","value":"parentId"}},{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetId"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedProperty"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragmentWithoutSchema"}},{"kind":"Field","name":{"kind":"Name","value":"schema"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedInfoboxFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedInfobox"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalId"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LayerFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Layer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"isVisible"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"infobox"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"InfoboxFragment"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetSchemaId"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetId"}},{"kind":"Field","name":{"kind":"Name","value":"merged"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"parentId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"infobox"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedInfoboxFragment"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Layer1Fragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Layer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LayerFragment"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LayerFragment"}}]}}]}}]}}]} as unknown as DocumentNode<AddPropertyItemMutation, AddPropertyItemMutationVariables>;
 export const RemovePropertyItemDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RemovePropertyItem"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"propertyId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"schemaGroupId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"itemId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lang"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Lang"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removePropertyItem"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"propertyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"propertyId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"schemaGroupId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"schemaGroupId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"itemId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"itemId"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}},{"kind":"Field","name":{"kind":"Name","value":"layer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"Layer1Fragment"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFieldLink"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyFieldLink"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"datasetId"}},{"kind":"Field","name":{"kind":"Name","value":"datasetSchemaId"}},{"kind":"Field","name":{"kind":"Name","value":"datasetSchemaFieldId"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFieldFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyField"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldLink"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyItemFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroupList"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyGroupFragment"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyGroupFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFragmentWithoutSchema"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Property"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyItemFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertySchemaFieldFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertySchemaField"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"translatedDescription"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"defaultValue"}},{"kind":"Field","name":{"kind":"Name","value":"ui"}},{"kind":"Field","name":{"kind":"Name","value":"min"}},{"kind":"Field","name":{"kind":"Name","value":"max"}},{"kind":"Field","name":{"kind":"Name","value":"choices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]}]}},{"kind":"Field","name":{"kind":"Name","value":"isAvailableIf"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertySchemaGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"PropertySchemaGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"collection"}},{"kind":"Field","name":{"kind":"Name","value":"translatedTitle"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"lang"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lang"}}}]},{"kind":"Field","name":{"kind":"Name","value":"isList"}},{"kind":"Field","name":{"kind":"Name","value":"representativeFieldId"}},{"kind":"Field","name":{"kind":"Name","value":"isAvailableIf"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertySchemaFieldFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PropertyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Property"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragmentWithoutSchema"}},{"kind":"Field","name":{"kind":"Name","value":"schema"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertySchemaGroupFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InfoboxFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Infobox"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"propertyId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"propertyId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedPropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"schemaGroupId"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldId"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"actualValue"}},{"kind":"Field","name":{"kind":"Name","value":"overridden"}},{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFieldLink"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyGroupFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedPropertyGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupCommonFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyFragmentWithoutSchema"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedProperty"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalId"}},{"kind":"Field","name":{"kind":"Name","value":"parentId"}},{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetId"}},{"kind":"Field","name":{"kind":"Name","value":"groups"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyGroupFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedPropertyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedProperty"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragmentWithoutSchema"}},{"kind":"Field","name":{"kind":"Name","value":"schema"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MergedInfoboxFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MergedInfobox"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalId"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LayerFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Layer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"isVisible"}},{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"extensionId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"infobox"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"InfoboxFragment"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetSchemaId"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"linkedDatasetId"}},{"kind":"Field","name":{"kind":"Name","value":"merged"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"parentId"}},{"kind":"Field","name":{"kind":"Name","value":"property"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedPropertyFragment"}}]}},{"kind":"Field","name":{"kind":"Name","value":"infobox"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MergedInfoboxFragment"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Layer1Fragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Layer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LayerFragment"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LayerGroup"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"layers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"LayerFragment"}}]}}]}}]}}]} as unknown as DocumentNode<RemovePropertyItemMutation, RemovePropertyItemMutationVariables>;
diff --git a/web/src/services/gql/queries/project.ts b/web/src/services/gql/queries/project.ts
index 88426fbd6..ea60723cc 100644
--- a/web/src/services/gql/queries/project.ts
+++ b/web/src/services/gql/queries/project.ts
@@ -191,3 +191,19 @@ export const DELETE_PROJECT = gql(`
     }
   }
 `);
+
+export const GET_STARRED_PROJECTS = gql(`
+  query GetStarredProjects($teamId: ID!) {
+    starredProjects(teamId: $teamId) {
+				nodes {
+					id
+					name
+					starred
+          scene {
+            id
+          }
+				}
+				totalCount
+			}
+  }
+`);
\ No newline at end of file
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 37900cd02..ff60e40bc 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -56,6 +56,7 @@ Asset selected: ''
 Name: ''
 Uploaded At: ''
 Size: ''
+No Asset has been uploaded yet: ''
 Use Name or Email: ''
 Find Member: ''
 No Member match your search.: ''
@@ -63,10 +64,12 @@ Last Created: ''
 First Created: ''
 Last Updated: ''
 New Project: ''
+All projects: ''
 Search Result for: ''
 Project Name: ''
 Updated At: ''
 Created At: ''
+No Project has been created yet: ''
 Rename: ''
 Project Setting: ''
 Create new project: ''
@@ -75,11 +78,12 @@ Text: ''
 Description: ''
 Write down your content: ''
 Cover Image: ''
-Re:Earth Visualizer: ''
+Starred: ''
 Switch WorkSpace: ''
 Personal: ''
 Team Workspace: ''
 Log Out: ''
+Re:Earth Visualizer: ''
 Page: ''
 From Assets: ''
 From Web: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index f9941c4f0..e86d226d6 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -56,6 +56,7 @@ Asset selected: ''
 Name: 名前
 Uploaded At: ''
 Size: ''
+No Asset has been uploaded yet: ''
 Use Name or Email: ''
 Find Member: ''
 No Member match your search.: ''
@@ -63,10 +64,12 @@ Last Created: ''
 First Created: ''
 Last Updated: ''
 New Project: 新規プロジェクト
+All projects: ''
 Search Result for: ''
 Project Name: プロジェクト名
 Updated At: ''
 Created At: ''
+No Project has been created yet: ''
 Rename: ''
 Project Setting: ''
 Create new project: ''
@@ -75,11 +78,12 @@ Text: ''
 Description: プロジェクト概要
 Write down your content: ''
 Cover Image: ''
-Re:Earth Visualizer: ''
+Starred: ''
 Switch WorkSpace: ''
 Personal: ''
 Team Workspace: ''
 Log Out: ''
+Re:Earth Visualizer: ''
 Page: ページ
 From Assets: アセットから追加
 From Web: Webから追加

From e465530a6d39ce33df2bbfb0df8bacbf315284de Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Fri, 30 Aug 2024 10:22:23 +0800
Subject: [PATCH 19/23] fix(web): dashboard projects loading ui (#1121)

---
 web/.prettierrc                               |   3 +
 web/.storybook/main.ts                        |  30 +-
 web/.storybook/manager.ts                     |   2 +-
 web/.storybook/preview.tsx                    |  22 +-
 web/.storybook/theme.ts                       |   2 +-
 web/bin/pluginDoc.ts                          |  18 +-
 web/codegen.ts                                |  16 +-
 web/e2e/utils/config.ts                       |   2 +-
 web/e2e/utils/index.ts                        |  36 +--
 web/e2e/utils/login.ts                        |  14 +-
 web/eslint.config.mjs                         |  24 +-
 web/i18next-parser.config.js                  |   2 +-
 web/playwright.config.ts                      |   4 +-
 .../components/Accordion/AccordionItem.tsx    |   4 +-
 .../components/Accordion/index.stories.tsx    |  10 +-
 .../beta/components/Accordion/index.test.tsx  |  10 +-
 web/src/beta/components/Accordion/index.tsx   |   2 +-
 .../beta/components/Avatar/index.stories.tsx  |   6 +-
 web/src/beta/components/Avatar/index.tsx      |   2 +-
 web/src/beta/components/Box/index.stories.tsx |   2 +-
 .../beta/components/Button/index.stories.tsx  |  36 ++-
 web/src/beta/components/Button/index.tsx      |   2 +-
 .../components/CatalogCard/index.stories.tsx  |  20 +-
 web/src/beta/components/CatalogCard/index.tsx |   6 +-
 .../CheckboxField/index.stories.tsx           |   6 +-
 .../components/Collapse/index.stories.tsx     |  10 +-
 .../ContentPicker/index.stories.tsx           |   8 +-
 .../beta/components/ContentPicker/index.tsx   |   2 +-
 .../beta/components/Divider/index.stories.tsx |   2 +-
 .../beta/components/DragAndDropList/Item.tsx  |  13 +-
 .../DragAndDropList/index.stories.tsx         |  12 +-
 .../beta/components/DragAndDropList/index.tsx |   4 +-
 .../components/DragAndDropList/scrollItem.tsx |   2 +-
 .../beta/components/Flex/index.stories.tsx    |   8 +-
 web/src/beta/components/Flex/index.tsx        |   2 +-
 .../components/FloatedPanel/index.stories.tsx |   8 +-
 .../beta/components/FloatedPanel/index.tsx    |   4 +-
 web/src/beta/components/Icon/icons.ts         |   2 +-
 .../beta/components/Icon/index.stories.tsx    |   2 +-
 web/src/beta/components/Icon/index.tsx        |   4 +-
 .../components/InsertionBar/index.stories.tsx |  14 +-
 .../beta/components/InsertionBar/index.tsx    |  12 +-
 .../InsertionButton/index.stories.tsx         |   2 +-
 .../components/ListItem/index.stories.tsx     |   6 +-
 web/src/beta/components/ListItem/index.tsx    |   2 +-
 .../beta/components/Loading/index.stories.tsx |   2 +-
 web/src/beta/components/Loading/index.tsx     |   2 +-
 .../components/Modal/ModalFrame/index.tsx     |   6 +-
 .../beta/components/Modal/index.stories.tsx   |  16 +-
 web/src/beta/components/Modal/index.tsx       |  12 +-
 .../components/NotFound/index.stories.tsx     |   2 +-
 web/src/beta/components/NotFound/index.tsx    |   2 +-
 web/src/beta/components/Popover/hooks.ts      |  16 +-
 .../beta/components/Popover/index.stories.tsx |  12 +-
 web/src/beta/components/Popover/index.tsx     |  20 +-
 .../PopoverMenuContent/index.stories.tsx      |  22 +-
 .../components/PopoverMenuContent/index.tsx   |   6 +-
 .../RadioGroup/RadioBox/index.stories.tsx     |   6 +-
 .../components/RadioGroup/RadioBox/index.tsx  |   4 +-
 .../components/RadioGroup/index.stories.tsx   |  12 +-
 web/src/beta/components/RadioGroup/index.tsx  |   6 +-
 .../components/RangeSlider/index.stories.tsx  |   6 +-
 web/src/beta/components/RangeSlider/index.tsx |   2 +-
 web/src/beta/components/Resizable/hooks.ts    |  22 +-
 .../components/Resizable/index.stories.tsx    |  14 +-
 web/src/beta/components/Resizable/index.tsx   |   4 +-
 .../SettingsButtons/index.stories.tsx         |   6 +-
 .../beta/components/SettingsButtons/index.tsx |   2 +-
 .../SidePanelSectionField/index.stories.tsx   |  10 +-
 .../SidePanelSectionField/index.tsx           |   3 +-
 .../beta/components/Slide/index.stories.tsx   |   4 +-
 web/src/beta/components/Slide/index.tsx       |   2 +-
 .../beta/components/Slider/index.stories.tsx  |   6 +-
 .../index.stories.tsx                         |  10 +-
 .../StorytellingPageSectionItem/index.tsx     |   2 +-
 .../SubTabButtonList/index.stories.tsx        |   8 +-
 .../SwitchButtonList/index.stories.tsx        |   8 +-
 .../components/TabButton/index.stories.tsx    |  10 +-
 .../beta/components/TabMenu/index.stories.tsx |  22 +-
 web/src/beta/components/TabMenu/index.tsx     |   2 +-
 .../beta/components/Text/index.stories.tsx    |   8 +-
 web/src/beta/components/Text/index.tsx        |   8 +-
 .../beta/components/Toggle/index.stories.tsx  |   6 +-
 .../fields/CameraField/CapturePanel/index.tsx |  13 +-
 .../fields/CameraField/EditPanel/hooks.ts     |  18 +-
 .../fields/CameraField/EditPanel/index.tsx    |   2 +-
 .../fields/CameraField/index.stories.tsx      |   8 +-
 .../components/fields/CameraField/index.tsx   |   8 +-
 .../components/fields/CameraField/utils.ts    |   4 +-
 .../components/fields/ColorField/hooks.ts     |  12 +-
 .../fields/ColorField/index.stories.tsx       |   4 +-
 .../components/fields/ColorField/index.tsx    |   4 +-
 .../fields/DateTimeField/EditPanel/hooks.ts   |  14 +-
 .../fields/DateTimeField/EditPanel/index.tsx  |   6 +-
 .../fields/DateTimeField/index.stories.tsx    |   4 +-
 .../components/fields/DateTimeField/index.tsx |   2 +-
 .../fields/ListField/index.stories.tsx        |  32 +-
 .../components/fields/ListField/index.tsx     |   4 +-
 .../fields/LocationField/index.stories.tsx    |   6 +-
 .../components/fields/LocationField/index.tsx |   6 +-
 .../fields/NumberField/index.stories.tsx      |  30 +-
 .../components/fields/NumberField/index.tsx   |   2 +-
 .../fields/Property/PropertyField/hooks.ts    |  12 +-
 .../fields/Property/PropertyField/index.tsx   |   6 +-
 .../fields/Property/PropertyItem/index.tsx    |  16 +-
 .../Property/PropertyList/index.stories.tsx   |  20 +-
 .../fields/Property/PropertyList/index.tsx    |   4 +-
 .../beta/components/fields/Property/hooks.ts  |  12 +-
 .../fields/RangeField/index.stories.tsx       |   8 +-
 .../components/fields/RangeField/index.tsx    |   6 +-
 .../fields/SelectField/index.stories.tsx      |  20 +-
 .../components/fields/SelectField/index.tsx   |  10 +-
 .../fields/SliderField/index.stories.tsx      |   8 +-
 .../components/fields/SliderField/index.tsx   |   2 +-
 .../fields/SpacingInput/index.stories.tsx     |   8 +-
 .../components/fields/SpacingInput/index.tsx  |  10 +-
 .../fields/TextAreaField/index.stories.tsx    |   6 +-
 .../components/fields/TextAreaField/index.tsx |   8 +-
 .../fields/TextField/index.stories.tsx        |  10 +-
 .../components/fields/TextField/index.tsx     |   2 +-
 .../fields/TimelineField/EditPanel/hooks.ts   |   8 +-
 .../fields/TimelineField/EditPanel/index.tsx  |   8 +-
 .../components/fields/TimelineField/index.tsx |   2 +-
 .../fields/ToggleField/index.stories.tsx      |   8 +-
 .../fields/URLField/index.stories.tsx         |  18 +-
 .../beta/components/fields/URLField/index.tsx |  10 +-
 .../common/NumberInput/index.stories.tsx      |  30 +-
 .../fields/common/NumberInput/index.tsx       |  14 +-
 .../fields/common/TextInput/index.stories.tsx |  10 +-
 .../fields/common/TextInput/index.tsx         |   8 +-
 web/src/beta/components/fields/index.tsx      |   2 +-
 web/src/beta/components/fields/utils.ts       |   4 +-
 web/src/beta/features/Assets/hooks.ts         |  30 +-
 .../features/AssetsManager/AssetsSelector.tsx |   2 +-
 .../beta/features/AssetsManager/constants.ts  |   4 +-
 web/src/beta/features/AssetsManager/hooks.ts  |  54 ++--
 web/src/beta/features/AssetsManager/index.tsx | 191 ++++++------
 .../AssetsManager/item/AssetGridItem.tsx      |  24 +-
 .../AssetsManager/item/AssetListItem.tsx      |  22 +-
 .../beta/features/AssetsManager/item/utils.ts |   2 +-
 .../ContentsContainer/Members/ListItem.tsx    |   6 +-
 .../ContentsContainer/Members/index.tsx       |  14 +-
 .../Projects/Project/ProjectGridViewItem.tsx  |  22 +-
 .../Projects/Project/ProjectListViewItem.tsx  |  31 +-
 .../Projects/Project/hooks.ts                 |  22 +-
 .../Projects/ProjectCreatorModal.tsx          |  14 +-
 .../Projects/StarredProject.tsx               |  39 +--
 .../ContentsContainer/Projects/hooks.ts       |  80 ++---
 .../ContentsContainer/Projects/index.tsx      | 279 +++++++++---------
 .../Dashboard/ContentsContainer/index.tsx     |   4 +-
 .../Dashboard/LeftSidePanel/index.tsx         |   6 +-
 .../Dashboard/LeftSidePanel/profile.tsx       |  28 +-
 web/src/beta/features/Dashboard/hooks.ts      |  12 +-
 web/src/beta/features/Dashboard/index.tsx     |  24 +-
 .../Map/DataSourceLayerCreator/CSV/index.tsx  |  24 +-
 .../DataSourceLayerCreator/Common/hooks.tsx   |  22 +-
 .../DataSourceLayerCreator/Common/index.tsx   |   6 +-
 .../ThreeDTiles/index.tsx                     |   8 +-
 .../VectorTiles/index.tsx                     |   8 +-
 .../DataSourceLayerCreator/WmsTiles/index.tsx |  10 +-
 .../DataSourceLayerCreator/index.stories.tsx  |   2 +-
 .../Map/DataSourceLayerCreator/index.tsx      |  16 +-
 .../LayerInspector/DataSource/index.tsx       |   4 +-
 .../FeatureInspector/CustomPropertField.tsx   |   8 +-
 .../LayerInspector/FeatureInspector/index.tsx |  30 +-
 .../LayerInspector/InfoboxSettings/hooks.ts   |   6 +-
 .../LayerInspector/InfoboxSettings/index.tsx  |   4 +-
 .../LayerInspector/LayerStyle/index.tsx       |  14 +-
 .../InspectorPanel/LayerInspector/index.tsx   |  26 +-
 .../Map/InspectorPanel/SceneSettings/hooks.ts |   4 +-
 .../InspectorPanel/SceneSettings/index.tsx    |   4 +-
 .../Editor/Map/InspectorPanel/index.tsx       |   4 +-
 .../Map/LayerStylePanel/LayerStyleCard.tsx    |  12 +-
 .../Map/LayerStylePanel/LayerStyleEditor.tsx  |   8 +-
 .../Map/LayerStylePanel/LayerStyleItem.tsx    |  10 +-
 .../Editor/Map/LayerStylePanel/index.tsx      |  20 +-
 .../Editor/Map/LayersPanel/LayerItem.tsx      |  34 +--
 .../features/Editor/Map/LayersPanel/index.tsx |  22 +-
 .../features/Editor/Map/ScenePanel/index.tsx  |  12 +-
 .../Map/SketchLayerCreator/General/index.tsx  |   6 +-
 .../Editor/Map/SketchLayerCreator/index.tsx   |  24 +-
 .../Editor/Map/SketchLayerEditor/hooks.ts     |  12 +-
 .../Editor/Map/SketchLayerEditor/index.tsx    |   8 +-
 .../features/Editor/Map/ToolsPanel/index.tsx  |  24 +-
 web/src/beta/features/Editor/Map/context.tsx  |  10 +-
 .../Editor/Map/shared/SharedComponent.tsx     |  32 +-
 .../CustomPropertyItem.tsx                    |  16 +-
 .../shared/SketchCustomProperties/hooks.ts    |  26 +-
 .../shared/SketchCustomProperties/index.tsx   |  26 +-
 .../PublishToolsPanel/PublishModal/hooks.ts   |  16 +-
 .../PublishToolsPanel/PublishModal/index.tsx  |  60 ++--
 .../Editor/Publish/PublishToolsPanel/hooks.ts |  30 +-
 .../Publish/PublishToolsPanel/index.tsx       |  24 +-
 .../beta/features/Editor/Publish/context.tsx  |   4 +-
 .../Editor/Story/PageSettingsPanel/hooks.ts   |  12 +-
 .../Editor/Story/PageSettingsPanel/index.tsx  |  16 +-
 .../Editor/Story/PagesPanel/PageItem.tsx      |  24 +-
 .../Editor/Story/PagesPanel/index.tsx         |  12 +-
 .../TempContentStory/Action/index.stories.tsx |   6 +-
 .../Story/TempContentStory/Action/index.tsx   |   2 +-
 .../PageItemWrapper/index.stories.tsx         |   6 +-
 .../PageItemWrapper/index.tsx                 |   2 +-
 .../Story/TempContentStory/index.stories.tsx  |   4 +-
 .../Editor/Story/TempContentStory/index.tsx   |  26 +-
 .../beta/features/Editor/Story/context.tsx    |   6 +-
 .../Editor/Visualizer/convert-infobox.ts      |   6 +-
 .../Editor/Visualizer/convert-story.ts        |  14 +-
 .../features/Editor/Visualizer/convert.ts     | 104 +++----
 .../beta/features/Editor/Visualizer/hooks.ts  |  94 +++---
 .../beta/features/Editor/Visualizer/index.tsx |  10 +-
 .../Editor/Visualizer/processNewProperty.ts   |  52 ++--
 .../Widgets/ContainerSettingsPanel/hooks.ts   |   8 +-
 .../Widgets/ContainerSettingsPanel/index.tsx  |  29 +-
 .../Widgets/WASToolsPanel/Devices/index.tsx   |   6 +-
 .../Editor/Widgets/WASToolsPanel/index.tsx    |   6 +-
 .../Widgets/WidgetInspectorPanel/hooks.ts     |   6 +-
 .../Widgets/WidgetInspectorPanel/index.tsx    |   4 +-
 .../Widgets/WidgetManagerPanel/Action.tsx     |  10 +-
 .../Widgets/WidgetManagerPanel/ListItem.tsx   |  12 +-
 .../Widgets/WidgetManagerPanel/hooks.ts       |  10 +-
 .../Widgets/WidgetManagerPanel/index.tsx      |  10 +-
 .../beta/features/Editor/Widgets/context.tsx  |   6 +-
 web/src/beta/features/Editor/hooks/index.ts   |  52 ++--
 .../Editor/hooks/useEditorVisualizer.ts       |  10 +-
 .../features/Editor/hooks/useLayerStyles.ts   |  26 +-
 .../beta/features/Editor/hooks/useLayers.ts   |  50 ++--
 .../features/Editor/hooks/useProperty.tsx     |   8 +-
 .../beta/features/Editor/hooks/useScene.ts    |   8 +-
 .../beta/features/Editor/hooks/useSketch.ts   |  40 +--
 .../features/Editor/hooks/useStorytelling.ts  |  36 +--
 web/src/beta/features/Editor/hooks/useUI.ts   |  26 +-
 .../features/Editor/hooks/useUISelection.ts   |  10 +-
 .../beta/features/Editor/hooks/useWidgets.ts  |   6 +-
 web/src/beta/features/Editor/index.tsx        |  12 +-
 web/src/beta/features/GlobalModal/index.tsx   |   4 +-
 .../beta/features/Modals/AssetModal/index.tsx |  18 +-
 .../features/Modals/LayerStyleModal/hooks.ts  |  22 +-
 .../features/Modals/LayerStyleModal/index.tsx |   8 +-
 .../Navbar/LeftSection/Profile/index.tsx      |  14 +-
 .../features/Navbar/LeftSection/index.tsx     |  24 +-
 web/src/beta/features/Navbar/hooks.ts         |  10 +-
 web/src/beta/features/Navbar/index.tsx        |  10 +-
 web/src/beta/features/Navbar/useDevPlugins.ts |  14 +-
 .../beta/features/Navbar/useRightSection.tsx  |   6 +-
 web/src/beta/features/Notification/hooks.ts   |  18 +-
 .../features/PluginPlayground/Viewer/hooks.ts |  16 +-
 .../PluginPlayground/Viewer/index.tsx         |   2 +-
 .../beta/features/PluginPlayground/hooks.tsx  |  28 +-
 .../beta/features/ProjectSettings/hooks.ts    |  32 +-
 .../beta/features/ProjectSettings/index.tsx   |  30 +-
 .../innerPages/GeneralSettings/index.tsx      |  22 +-
 .../PluginInstall/PluginInstallCardButton.tsx |   6 +-
 .../PluginList/PluginListItem.tsx             |  22 +-
 .../PluginInstall/PluginList/index.tsx        |   6 +-
 .../PluginInstall/PublicRepo/hooks.ts         |   4 +-
 .../PluginInstall/PublicRepo/index.tsx        |   8 +-
 .../PluginInstall/ZipUpload/index.tsx         |   2 +-
 .../PluginSettings/PluginInstall/index.tsx    |   6 +-
 .../innerPages/PluginSettings/hooks.ts        |  26 +-
 .../innerPages/PluginSettings/index.tsx       |  18 +-
 .../PublicSettings/PublicSettingsDetail.tsx   |  20 +-
 .../innerPages/PublicSettings/index.tsx       |  14 +-
 .../StorySettings/StorySettingsDetail.tsx     |  14 +-
 .../innerPages/StorySettings/index.tsx        |   4 +-
 .../ProjectSettings/innerPages/common.tsx     |  20 +-
 .../Published/convert-new-property.ts         |  32 +-
 web/src/beta/features/Published/convert.ts    |   6 +-
 web/src/beta/features/Published/hooks.ts      |  60 ++--
 web/src/beta/features/Published/index.tsx     |   2 +-
 web/src/beta/features/Published/types.ts      |   2 +-
 .../features/RootPage/PageWrapper/index.tsx   |   2 +-
 web/src/beta/features/RootPage/hooks.ts       |  22 +-
 .../Infobox/Block/builtin/Image/index.tsx     |   4 +-
 .../Infobox/Block/builtin/Markdown/index.tsx  |  22 +-
 .../Block/builtin/PropertyList/Content.tsx    |  12 +-
 .../CustomFields/useEvaluateProperties.ts     |   8 +-
 .../PropertyList/DefaultFields/index.tsx      |   4 +-
 .../builtin/PropertyList/ListEditor/Item.tsx  |  12 +-
 .../builtin/PropertyList/ListEditor/hooks.ts  |  42 +--
 .../builtin/PropertyList/ListEditor/index.tsx |  26 +-
 .../Block/builtin/PropertyList/ListItem.tsx   |   8 +-
 .../Infobox/Block/builtin/Text/index.tsx      |   2 +-
 .../Infobox/Block/builtin/Video/index.tsx     |  22 +-
 .../Crust/Infobox/Block/builtin/index.ts      |   6 +-
 .../Block/builtin/useExpressionEval.ts        |   4 +-
 .../Visualizer/Crust/Infobox/Block/index.tsx  |   6 +-
 .../Visualizer/Crust/Infobox/constants.ts     |   5 +-
 .../Visualizer/Crust/Infobox/hooks.ts         |  34 +--
 .../Visualizer/Crust/Infobox/index.tsx        |  30 +-
 .../Plugins/Plugin/ModalContainer/index.tsx   |   8 +-
 .../Plugins/Plugin/PopupContainer/index.tsx   |   8 +-
 .../Crust/Plugins/Plugin/hooks/index.ts       |  26 +-
 .../Plugins/Plugin/hooks/usePluginAPI.ts      |  56 ++--
 .../Crust/Plugins/Plugin/index.stories.tsx    |   6 +-
 .../Visualizer/Crust/Plugins/Plugin/index.tsx |  14 +-
 .../Crust/Plugins/PluginFrame/IFrame/hooks.ts |  20 +-
 .../PluginFrame/IFrame/index.stories.tsx      |  10 +-
 .../Plugins/PluginFrame/IFrame/index.test.tsx |  12 +-
 .../Plugins/PluginFrame/IFrame/index.tsx      |  10 +-
 .../Plugins/PluginFrame/PluginIFrame/hooks.ts |  14 +-
 .../PluginFrame/PluginIFrame/index.tsx        |   8 +-
 .../PluginFrame/PluginIFrame/useIFrame.ts     |  18 +-
 .../PluginIFrame/usePostMessage.test.ts       |   8 +-
 .../PluginIFrame/usePostMessage.ts            |   2 +-
 .../Plugins/PluginFrame/SafeIFrame/hooks.ts   |  18 +-
 .../PluginFrame/SafeIFrame/index.stories.tsx  |  10 +-
 .../Plugins/PluginFrame/SafeIFrame/index.tsx  |  10 +-
 .../PluginFrame/SafeIFrame/utils.test.ts      |   8 +-
 .../Crust/Plugins/PluginFrame/hooks.ts        |  28 +-
 .../Plugins/PluginFrame/index.stories.tsx     |  40 +--
 .../Crust/Plugins/PluginFrame/index.tsx       |  10 +-
 .../Visualizer/Crust/Plugins/context.tsx      |   2 +-
 .../Visualizer/Crust/Plugins/hooks/index.ts   |  30 +-
 .../Crust/Plugins/hooks/useCamera.ts          |  62 ++--
 .../Visualizer/Crust/Plugins/hooks/useData.ts |   2 +-
 .../Crust/Plugins/hooks/useDeprecated.ts      |  26 +-
 .../Crust/Plugins/hooks/useExtension.ts       |   8 +-
 .../Crust/Plugins/hooks/useLayers.ts          |  46 +--
 .../Crust/Plugins/hooks/useSketch.ts          |  20 +-
 .../Crust/Plugins/hooks/useTimeline.ts        |  24 +-
 .../Crust/Plugins/hooks/useViewer.ts          |  78 ++---
 .../Visualizer/Crust/Plugins/index.tsx        |   2 +-
 .../Crust/Plugins/pluginAPI/commonReearth.ts  |  32 +-
 .../Crust/Plugins/pluginAPI/exposedReearth.ts |  76 ++---
 .../Plugins/pluginAPI/pluginAPIv1Types.ts     |  60 ++--
 .../Crust/Plugins/pluginAPI/types/camera.ts   |  14 +-
 .../Plugins/pluginAPI/types/extension.ts      |   4 +-
 .../Crust/Plugins/pluginAPI/types/layers.ts   |  20 +-
 .../Crust/Plugins/pluginAPI/types/modal.ts    |   6 +-
 .../Crust/Plugins/pluginAPI/types/popup.ts    |   6 +-
 .../Crust/Plugins/pluginAPI/types/sketch.ts   |   4 +-
 .../Crust/Plugins/pluginAPI/types/timeline.ts |   6 +-
 .../Crust/Plugins/pluginAPI/types/ui.ts       |   8 +-
 .../Crust/Plugins/pluginAPI/types/viewer.ts   |  26 +-
 .../Visualizer/Crust/Plugins/storybook.tsx    |  98 +++---
 .../Visualizer/Crust/Plugins/types.ts         |   8 +-
 .../Crust/Plugins/useClientStorage.ts         |  16 +-
 .../Crust/Plugins/usePluginInstances.ts       |  26 +-
 .../Visualizer/Crust/Plugins/utils/events.ts  |  22 +-
 .../Crust/StoryPanel/Block/Template.tsx       |   6 +-
 .../Block/builtin/Camera/Content.tsx          |  24 +-
 .../Block/builtin/Camera/Editor/hooks.ts      |  38 +--
 .../Block/builtin/Camera/Editor/index.tsx     |  24 +-
 .../StoryPanel/Block/builtin/Camera/index.tsx |   2 +-
 .../StoryPanel/Block/builtin/Image/index.tsx  |   2 +-
 .../Block/builtin/Layer/Content.tsx           |  20 +-
 .../Block/builtin/Layer/Editor/hooks.ts       |  38 +--
 .../Block/builtin/Layer/Editor/index.tsx      |  24 +-
 .../StoryPanel/Block/builtin/Layer/index.tsx  |   2 +-
 .../StoryPanel/Block/builtin/Link/Content.tsx |  20 +-
 .../Block/builtin/Link/Editor/hooks.ts        |  36 +--
 .../Block/builtin/Link/Editor/index.tsx       |  24 +-
 .../StoryPanel/Block/builtin/Link/index.tsx   |   2 +-
 .../Block/builtin/Markdown/Editor.tsx         |  10 +-
 .../Block/builtin/Markdown/index.tsx          |  12 +-
 .../Block/builtin/NextPage/index.tsx          |   8 +-
 .../StoryPanel/Block/builtin/Text/Editor.tsx  |  14 +-
 .../StoryPanel/Block/builtin/Text/index.tsx   |   2 +-
 .../Block/builtin/Timeline/Editor.tsx         |  66 ++---
 .../StoryPanel/Block/builtin/Timeline/hook.ts |  60 ++--
 .../Block/builtin/Timeline/index.tsx          |   4 +-
 .../StoryPanel/Block/builtin/Title/index.tsx  |   6 +-
 .../Block/builtin/Video/VideoPlayer.tsx       |   4 +-
 .../StoryPanel/Block/builtin/Video/index.tsx  |   2 +-
 .../Crust/StoryPanel/Block/builtin/index.ts   |   6 +-
 .../Crust/StoryPanel/Block/index.tsx          |   6 +-
 .../Crust/StoryPanel/ClickAwayListener.tsx    |  10 +-
 .../Visualizer/Crust/StoryPanel/Page/hooks.ts |  40 +--
 .../Crust/StoryPanel/Page/index.tsx           |  38 +--
 .../PageIndicator/IndicatorSection.tsx        |  12 +-
 .../PageIndicator/index.stories.tsx           |   6 +-
 .../Crust/StoryPanel/PageIndicator/index.tsx  |   4 +-
 .../Crust/StoryPanel/PanelContent/hooks.ts    |  22 +-
 .../Crust/StoryPanel/PanelContent/index.tsx   |  28 +-
 .../Visualizer/Crust/StoryPanel/constants.ts  |   6 +-
 .../Visualizer/Crust/StoryPanel/hooks.ts      |  58 ++--
 .../Visualizer/Crust/StoryPanel/index.tsx     |  48 +--
 .../Visualizer/Crust/StoryPanel/utils.ts      |  34 +--
 .../Widget/builtin/Button/MenuButton.tsx      |  24 +-
 .../Widget/builtin/Button/index.stories.tsx   |  18 +-
 .../Widgets/Widget/builtin/Button/index.tsx   |   4 +-
 .../Widget/builtin/Navigator/UI/hooks.ts      |  30 +-
 .../builtin/Navigator/UI/index.stories.tsx    |   2 +-
 .../builtin/Navigator/UI/index.test.tsx       |   2 +-
 .../Widget/builtin/Navigator/UI/index.tsx     |   6 +-
 .../Widget/builtin/Navigator/UI/utils.test.ts |  14 +-
 .../Widget/builtin/Navigator/UI/utils.ts      |   4 +-
 .../Widgets/Widget/builtin/Navigator/hooks.ts |  10 +-
 .../builtin/Navigator/index.stories.tsx       |   4 +-
 .../Widget/builtin/Navigator/index.tsx        |   6 +-
 .../builtin/Timeline/UI/ScaleList.test.tsx    |  14 +-
 .../Widget/builtin/Timeline/UI/ScaleList.tsx  |  10 +-
 .../Widget/builtin/Timeline/UI/hooks.ts       |  52 ++--
 .../builtin/Timeline/UI/index.stories.tsx     |   4 +-
 .../Widget/builtin/Timeline/UI/index.test.tsx |  34 +--
 .../Widget/builtin/Timeline/UI/index.tsx      |  10 +-
 .../Widget/builtin/Timeline/UI/utils.test.ts  |  16 +-
 .../Widget/builtin/Timeline/UI/utils.ts       |  12 +-
 .../Widgets/Widget/builtin/Timeline/hooks.ts  |  38 +--
 .../Widget/builtin/Timeline/index.stories.tsx |  14 +-
 .../Widgets/Widget/builtin/Timeline/index.tsx |   6 +-
 .../Crust/Widgets/Widget/builtin/index.ts     |  10 +-
 .../Widgets/Widget/builtin/unsafeWidgets.ts   |   4 +-
 .../Crust/Widgets/Widget/index.stories.tsx    |  34 +--
 .../Visualizer/Crust/Widgets/Widget/index.tsx |  20 +-
 .../Crust/Widgets/Widget/storybook.ts         |   4 +-
 .../Visualizer/Crust/Widgets/Widget/types.ts  |   2 +-
 .../Crust/Widgets/WidgetAlignSystem/Area.tsx  |  32 +-
 .../Widgets/WidgetAlignSystem/MobileZone.tsx  |  12 +-
 .../Crust/Widgets/WidgetAlignSystem/Zone.tsx  |   4 +-
 .../Crust/Widgets/WidgetAlignSystem/hooks.ts  |  12 +-
 .../Crust/Widgets/WidgetAlignSystem/index.tsx |  10 +-
 .../Crust/Widgets/WidgetAlignSystem/types.ts  |   2 +-
 .../Crust/Widgets/WidgetAlignSystem/utils.ts  |  10 +-
 .../Crust/Widgets/index.stories.tsx           |  26 +-
 .../Visualizer/Crust/Widgets/index.tsx        |  24 +-
 .../Crust/Widgets/useWidgetAlignSystem.ts     |  32 +-
 .../beta/features/Visualizer/Crust/context.ts |  42 ++-
 .../beta/features/Visualizer/Crust/hooks.tsx  |  26 +-
 .../Visualizer/Crust/index.stories.tsx        |   6 +-
 .../beta/features/Visualizer/Crust/index.tsx  |  42 +--
 .../features/Visualizer/Crust/theme/dark.ts   |   2 +-
 .../features/Visualizer/Crust/theme/forest.ts |   2 +-
 .../features/Visualizer/Crust/theme/index.ts  |   6 +-
 .../features/Visualizer/Crust/theme/light.ts  |   2 +-
 .../beta/features/Visualizer/Crust/types.ts   |   2 +-
 .../features/Visualizer/FovSlider/hooks.ts    |   6 +-
 .../features/Visualizer/FovSlider/index.tsx   |   4 +-
 web/src/beta/features/Visualizer/hooks.ts     |  12 +-
 web/src/beta/features/Visualizer/index.tsx    |  46 +--
 .../shared/components/ActionPanel/index.tsx   |  36 +--
 .../shared/components/BlockAddBar/index.tsx   |  22 +-
 .../shared/components/BlockWrapper/hooks.ts   |  30 +-
 .../shared/components/BlockWrapper/index.tsx  |  26 +-
 .../components/ContentWrapper/index.tsx       |  10 +-
 .../SelectableArea/ActionPanel/hooks.ts       |  22 +-
 .../SelectableArea/ActionPanel/index.tsx      |  12 +-
 .../shared/components/SelectableArea/hooks.ts |   6 +-
 .../components/SelectableArea/index.tsx       |  18 +-
 .../shared/contexts/blockContext.tsx          |   2 +-
 .../shared/hooks/useFieldComponent.tsx        |  48 +--
 .../shared/hooks/useTimelineBlock.ts          |  56 ++--
 .../beta/features/Visualizer/shared/types.ts  |   8 +-
 .../utils/useOverriddenProperty.test.ts       |   2 +-
 .../Visualizer/utils/useOverriddenProperty.ts |  10 +-
 web/src/beta/hooks/navigationHooks.ts         |   8 +-
 web/src/beta/hooks/useAssetUploader/hooks.tsx |  10 +-
 .../hooks/useManageSwitchState/hooks.test.tsx |   4 +-
 .../beta/hooks/useManageSwitchState/hooks.tsx |   4 +-
 .../beta/lib/lexical/RichTextEditor/index.tsx |   8 +-
 .../lib/lexical/RichTextEditor/nodes/index.ts |   2 +-
 .../RichTextEditor/plugins/AutoLinkPlugin.tsx |  12 +-
 .../FloatingLinkEditorPlugin/index.tsx        |  28 +-
 .../RichTextEditor/plugins/LinkPlugin.tsx     |   2 +-
 .../plugins/ListMaxIndentLevelPlugin.tsx      |  12 +-
 .../plugins/SwitchEditModePlugin.tsx          |   2 +-
 .../RichTextEditor/plugins/ToolbarPlugin.tsx  |  92 +++---
 .../themes/DefaultLexicalEditorTheme.ts       |  16 +-
 .../lexical/RichTextEditor/ui/ColorPicker.tsx |  26 +-
 .../lexical/RichTextEditor/ui/DropDown.tsx    |  18 +-
 .../lexical/RichTextEditor/ui/TextInput.tsx   |   2 +-
 .../RichTextEditor/utils/getSelectedNode.ts   |   2 +-
 .../setFloatingElemPositionForLinkEditor.ts   |   2 +-
 .../lib/lexical/RichTextEditor/utils/url.ts   |   4 +-
 .../components/Breadcrumb/index.stories.tsx   |  54 ++--
 .../components/Breadcrumb/index.tsx           |  10 +-
 .../components/Button/index.stories.tsx       |  10 +-
 .../reearth-ui/components/Button/index.tsx    |  16 +-
 .../components/CheckBox/index.stories.tsx     |  14 +-
 .../reearth-ui/components/CheckBox/index.tsx  |   4 +-
 .../components/CodeInput/index.stories.tsx    |  12 +-
 .../reearth-ui/components/CodeInput/index.tsx |  24 +-
 .../components/Collapse/index.stories.tsx     |  22 +-
 .../reearth-ui/components/Collapse/index.tsx  |  19 +-
 .../reearth-ui/components/ColorInput/hooks.ts |  14 +-
 .../components/ColorInput/index.stories.tsx   |  16 +-
 .../components/ColorInput/index.tsx           |  38 +--
 .../components/DatePicker/index.stories.tsx   |  10 +-
 .../components/DatePicker/index.tsx           |  10 +-
 .../DragAndDropList/index.stories.tsx         |  29 +-
 .../components/DragAndDropList/index.tsx      |  12 +-
 .../lib/reearth-ui/components/Icon/icons.ts   |   2 +-
 .../components/Icon/index.stories.tsx         |  12 +-
 .../lib/reearth-ui/components/Icon/index.tsx  |   2 +-
 .../components/IconButton/index.stories.tsx   |  18 +-
 .../components/IconButton/index.tsx           |  14 +-
 .../components/Loading/index.stories.tsx      |   2 +-
 .../reearth-ui/components/Loading/index.tsx   |   4 +-
 .../components/Markdown/index.stories.tsx     |   6 +-
 .../reearth-ui/components/Markdown/index.tsx  |  30 +-
 .../components/Modal/index.stories.tsx        |  20 +-
 .../lib/reearth-ui/components/Modal/index.tsx |   8 +-
 .../components/ModalPanel/index.stories.tsx   |  12 +-
 .../components/ModalPanel/index.tsx           |  16 +-
 .../components/NumberInput/index.stories.tsx  |  30 +-
 .../components/NumberInput/index.tsx          |  16 +-
 .../lib/reearth-ui/components/Popup/hooks.ts  |  18 +-
 .../components/Popup/index.stories.tsx        |  36 +--
 .../lib/reearth-ui/components/Popup/index.tsx |  14 +-
 .../components/PopupMenu/index.stories.tsx    |  54 ++--
 .../reearth-ui/components/PopupMenu/index.tsx |  48 +--
 .../components/PopupPanel/index.stories.tsx   |  16 +-
 .../components/PopupPanel/index.tsx           |  12 +-
 .../components/Radio/index.stories.tsx        |   6 +-
 .../lib/reearth-ui/components/Radio/index.tsx |  18 +-
 .../components/RadioGroup/index.stories.tsx   |   8 +-
 .../components/RadioGroup/index.tsx           |  10 +-
 .../components/Selector/index.stories.tsx     |  26 +-
 .../reearth-ui/components/Selector/index.tsx  |  32 +-
 .../components/Switcher/index.stories.tsx     |   6 +-
 .../reearth-ui/components/Switcher/index.tsx  |   8 +-
 .../components/Tabs/index.stories.tsx         |  30 +-
 .../lib/reearth-ui/components/Tabs/index.tsx  |  14 +-
 .../components/TextArea/index.stories.tsx     |  30 +-
 .../reearth-ui/components/TextArea/index.tsx  |  14 +-
 .../components/TextInput/index.stories.tsx    |  30 +-
 .../reearth-ui/components/TextInput/index.tsx |  14 +-
 .../components/TimePicker/index.stories.tsx   |  10 +-
 .../components/TimePicker/index.tsx           |  10 +-
 .../components/Typography/index.stories.tsx   |   8 +-
 .../components/Typography/index.tsx           |  10 +-
 web/src/beta/pages/Dashboard/index.tsx        |   1 -
 web/src/beta/pages/EditorPage/index.tsx       |   1 -
 .../beta/pages/GraphQLPlayground/index.tsx    |   2 +-
 web/src/beta/pages/Page.tsx                   |  14 +-
 .../beta/pages/PluginPlaygroundPage/index.tsx |   1 -
 .../beta/pages/ProjectSettingsPage/index.tsx  |   3 +-
 .../ui/components/EntryItem/index.stories.tsx |  50 ++--
 .../beta/ui/components/EntryItem/index.tsx    |  30 +-
 .../components/ManagerBase/ManagerContent.tsx |  12 +-
 .../ManagerBase/ManagerEmptyContent.tsx       |  18 +-
 .../components/ManagerBase/ManagerHeader.tsx  |  36 +--
 .../components/ManagerBase/ManagerWrapper.tsx |   2 +-
 web/src/beta/ui/components/Sidebar/index.tsx  |  20 +-
 web/src/beta/ui/fields/AssetField/index.tsx   |  16 +-
 .../ui/fields/AssetField/useAssetUpload.ts    |  14 +-
 .../ui/fields/CamersField/CapturePanel.tsx    |   6 +-
 .../ui/fields/CamersField/EditorPanel.tsx     |  14 +-
 web/src/beta/ui/fields/CamersField/hooks.ts   |  14 +-
 web/src/beta/ui/fields/CamersField/index.tsx  |  14 +-
 web/src/beta/ui/fields/CodeField.tsx          |   2 +-
 web/src/beta/ui/fields/CommonField.tsx        |  14 +-
 web/src/beta/ui/fields/ListField/ListItem.tsx |  16 +-
 .../ui/fields/ListField/index.stories.tsx     |  36 +--
 web/src/beta/ui/fields/ListField/index.tsx    |  14 +-
 .../ui/fields/Properties/ProprtyField.tsx     |  10 +-
 web/src/beta/ui/fields/Properties/hooks.ts    |  12 +-
 web/src/beta/ui/fields/Properties/index.tsx   |  20 +-
 web/src/beta/ui/fields/QuartetInputField.tsx  |   8 +-
 web/src/beta/ui/fields/RangeField.tsx         |   8 +-
 web/src/beta/ui/fields/SpacingField.tsx       |  10 +-
 .../ui/fields/TimePeriodField/EditModal.tsx   |  12 +-
 .../beta/ui/fields/TimePeriodField/hooks.ts   |   8 +-
 .../beta/ui/fields/TimePeriodField/index.tsx  |  20 +-
 .../ui/fields/TimePointField/EditPanel.tsx    |  16 +-
 .../beta/ui/fields/TimePointField/hooks.ts    |  14 +-
 .../beta/ui/fields/TimePointField/index.tsx   |   6 +-
 web/src/beta/ui/fields/TripletInputField.tsx  |   8 +-
 web/src/beta/ui/fields/TwinInputField.tsx     |   8 +-
 web/src/beta/ui/fields/index.stories.tsx      |  12 +-
 web/src/beta/ui/fields/utils.ts               |   4 +-
 web/src/beta/ui/layout/Area/index.stories.tsx |   6 +-
 web/src/beta/ui/layout/Area/index.tsx         |  68 ++---
 .../beta/ui/layout/Panel/index.stories.tsx    |  36 +--
 web/src/beta/ui/layout/Panel/index.tsx        |  14 +-
 web/src/beta/utils/aria.ts                    |   4 +-
 web/src/beta/utils/convert-object.test.ts     |  50 ++--
 web/src/beta/utils/convert-object.ts          |  10 +-
 web/src/beta/utils/deepFind.test.ts           |  12 +-
 web/src/beta/utils/deepFind.ts                |   2 +-
 web/src/beta/utils/infinite-scroll.ts         |   4 +-
 web/src/beta/utils/localstorage.ts            |   2 +-
 web/src/beta/utils/metrics.ts                 |   4 +-
 web/src/beta/utils/object.test.ts             |   6 +-
 web/src/beta/utils/object.ts                  |  20 +-
 web/src/beta/utils/raf.ts                     |   8 +-
 web/src/beta/utils/time.ts                    |   2 +-
 web/src/beta/utils/use-dnd/drag.ts            |   8 +-
 web/src/beta/utils/use-dnd/drop.ts            |  20 +-
 web/src/beta/utils/use-dnd/index.tsx          |   2 +-
 web/src/beta/utils/use-double-click.ts        |   2 +-
 web/src/beta/utils/util.ts                    |  10 +-
 web/src/beta/utils/value.ts                   |  30 +-
 web/src/sentry.ts                             |   2 +-
 web/src/services/api/assetsApi.ts             |  44 +--
 .../api/featureCollectionApi/index.ts         |  38 +--
 web/src/services/api/infoboxApi/blocks.ts     |  40 +--
 web/src/services/api/infoboxApi/index.tsx     |  14 +-
 web/src/services/api/layerStyleApi/index.ts   |  46 +--
 web/src/services/api/layerStyleApi/utils.ts   |   2 +-
 web/src/services/api/layersApi/index.ts       |  58 ++--
 web/src/services/api/layersApi/utils.ts       |  20 +-
 web/src/services/api/meApi.ts                 |   6 +-
 web/src/services/api/pluginsApi.ts            |  76 ++---
 web/src/services/api/projectApi.ts            |  84 +++---
 web/src/services/api/propertyApi/index.ts     |  56 ++--
 web/src/services/api/propertyApi/utils.ts     |  42 +--
 web/src/services/api/sceneApi.ts              |   6 +-
 .../services/api/storytellingApi/blocks.ts    |  54 ++--
 web/src/services/api/storytellingApi/index.ts |  38 +--
 web/src/services/api/storytellingApi/pages.ts |  46 +--
 web/src/services/api/storytellingApi/utils.ts |  12 +-
 web/src/services/api/teams/index.ts           |   6 +-
 web/src/services/api/widgetsApi/index.ts      |  82 ++---
 web/src/services/api/widgetsApi/utils.ts      |  18 +-
 web/src/services/api/workspacesApi.ts         |  12 +-
 web/src/services/auth/auth0Auth.ts            |   8 +-
 web/src/services/auth/authProvider.tsx        |   6 +-
 web/src/services/auth/cognitoAuth.ts          |   2 +-
 web/src/services/auth/index.tsx               |   6 +-
 web/src/services/auth/useAuth.ts              |   2 +-
 web/src/services/config/authInfo.ts           |   2 +-
 web/src/services/config/aws.ts                |   6 +-
 web/src/services/config/config.test.ts        |   4 +-
 web/src/services/config/defaultConfig.ts      |  24 +-
 web/src/services/config/extensions.ts         |   6 +-
 web/src/services/config/index.ts              |  10 +-
 web/src/services/config/passwordPolicy.ts     |   4 +-
 .../services/config/unsafeBuiltinPlugin.ts    |   4 +-
 web/src/services/gql/fragments/index.ts       |   2 +-
 web/src/services/gql/fragments/layer.ts       |   2 +-
 web/src/services/gql/provider/index.tsx       |  30 +-
 .../services/gql/provider/links/authLink.ts   |   5 +-
 .../services/gql/provider/links/errorLink.ts  |   3 +-
 .../services/gql/provider/links/uploadLink.ts |   2 +-
 web/src/services/gql/provider/pagination.ts   |   8 +-
 web/src/services/gql/queries/project.ts       |   2 +-
 web/src/services/i18n/i18n.ts                 |   8 +-
 web/src/services/i18n/locale.ts               |   2 +-
 web/src/services/i18n/publishedProvider.tsx   |   2 +-
 web/src/services/routing/index.tsx            |  26 +-
 web/src/services/state/devPlugins.ts          |   2 +-
 web/src/services/theme/fonts.ts               |  22 +-
 web/src/services/theme/publishTheme/colors.ts |   2 +-
 .../theme/publishTheme/darkTheme/colors.ts    |   8 +-
 .../theme/publishTheme/darkTheme/index.ts     |   2 +-
 .../theme/publishTheme/forestTheme/colors.ts  |   8 +-
 .../theme/publishTheme/forestTheme/index.ts   |   2 +-
 web/src/services/theme/publishTheme/index.ts  |   2 +-
 .../theme/publishTheme/lightTheme/colors.ts   |   8 +-
 .../theme/publishTheme/lightTheme/index.ts    |   2 +-
 web/src/services/theme/publishTheme/utils.ts  |  10 +-
 .../theme/reearthTheme/common/colors.ts       |   4 +-
 .../theme/reearthTheme/common/fonts.ts        |  26 +-
 .../theme/reearthTheme/common/icons.ts        |   2 +-
 .../theme/reearthTheme/common/index.ts        |   2 +-
 .../theme/reearthTheme/common/radius.ts       |   2 +-
 .../theme/reearthTheme/common/shadow.ts       |   2 +-
 .../theme/reearthTheme/common/spacing.ts      |   2 +-
 .../theme/reearthTheme/common/zIndex.ts       |  12 +-
 .../theme/reearthTheme/darkTheme/index.ts     |  22 +-
 .../theme/reearthTheme/lightTheme/index.ts    |  22 +-
 web/src/test/setup.ts                         |   8 +-
 web/src/test/utils.tsx                        |   6 +-
 web/src/types.ts                              |  12 +-
 web/src/wdyr.ts                               |   2 +-
 web/vite.config.ts                            |  44 +--
 657 files changed, 5285 insertions(+), 5273 deletions(-)
 create mode 100644 web/.prettierrc

diff --git a/web/.prettierrc b/web/.prettierrc
new file mode 100644
index 000000000..36b356317
--- /dev/null
+++ b/web/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}
diff --git a/web/.storybook/main.ts b/web/.storybook/main.ts
index 91acbc0d1..77251d12f 100644
--- a/web/.storybook/main.ts
+++ b/web/.storybook/main.ts
@@ -8,55 +8,55 @@ const config: StorybookConfig = {
   addons: ["@storybook/addon-essentials", "@storybook/addon-styling"],
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {}
   },
   core: {
-    disableTelemetry: true,
+    disableTelemetry: true
   },
   staticDirs: ["./public"],
   viteFinal(config, { configType }) {
     return mergeConfig(config, {
       define: {
-        "process.env.QTS_DEBUG": "false", // quickjs-emscripten
+        "process.env.QTS_DEBUG": "false" // quickjs-emscripten
       },
       build:
         configType === "PRODUCTION"
           ? {
               // https://github.com/storybookjs/builder-vite/issues/409
               minify: false,
-              sourcemap: false,
+              sourcemap: false
             }
           : {},
       resolve: {
         alias: [
           {
             find: "crypto",
-            replacement: "crypto-js",
+            replacement: "crypto-js"
           },
           {
             find: "@reearth/core",
-            replacement: resolve(__dirname, "..", "node_modules/@reearth/core"),
+            replacement: resolve(__dirname, "..", "node_modules/@reearth/core")
           },
           // quickjs-emscripten
           {
             find: "@reearth",
-            replacement: resolve(__dirname, "..", "src"),
-          },
-        ],
+            replacement: resolve(__dirname, "..", "src")
+          }
+        ]
       },
       server: {
         watch: {
           // https://github.com/storybookjs/storybook/issues/22253#issuecomment-1673229400
-          ignored: ["**/.env"],
-        },
+          ignored: ["**/.env"]
+        }
       },
       optimizeDeps: {
-        exclude: ["storybook"],
-      },
+        exclude: ["storybook"]
+      }
     });
   },
   docs: {
-    autodocs: true,
-  },
+    autodocs: true
+  }
 };
 module.exports = config;
diff --git a/web/.storybook/manager.ts b/web/.storybook/manager.ts
index 3ea19f8bd..0376b2192 100644
--- a/web/.storybook/manager.ts
+++ b/web/.storybook/manager.ts
@@ -3,5 +3,5 @@ import { addons } from "@storybook/manager-api";
 import theme from "./theme";
 
 addons.setConfig({
-  theme,
+  theme
 });
diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
index c6f3184ee..7feb977a8 100644
--- a/web/.storybook/preview.tsx
+++ b/web/.storybook/preview.tsx
@@ -3,7 +3,7 @@ import {
   ApolloClient,
   InMemoryCache,
   ApolloLink,
-  Observable,
+  Observable
 } from "@apollo/client";
 import { ThemeProvider } from "@emotion/react";
 import { withThemeFromJSXProvider } from "@storybook/addon-styling";
@@ -22,9 +22,9 @@ const mockClient = new ApolloClient({
     () =>
       new Observable((observer) => {
         observer.complete();
-      }),
+      })
   ),
-  cache: new InMemoryCache(),
+  cache: new InMemoryCache()
 });
 
 const preview: Preview = {
@@ -32,25 +32,25 @@ const preview: Preview = {
     backgrounds: {
       values: [
         { name: "Light", value: "lightGrey" },
-        { name: "Dark", value: "ash" },
-      ],
+        { name: "Dark", value: "ash" }
+      ]
     },
     layout: "fullscreen",
     controls: { expanded: true },
     actions: { argTypesRegex: "^on.*" },
     docs: {
-      theme,
-    },
+      theme
+    }
   },
   decorators: [
     withThemeFromJSXProvider<ReactRenderer>({
       themes: {
         light: lightTheme,
-        dark: darkTheme,
+        dark: darkTheme
       },
       defaultTheme: "dark",
       Provider: ThemeProvider,
-      GlobalStyles,
+      GlobalStyles
     }),
     (Story) => {
       return (
@@ -62,8 +62,8 @@ const preview: Preview = {
           </I18nProvider>
         </ApolloProvider>
       );
-    },
-  ],
+    }
+  ]
 };
 
 export default preview;
diff --git a/web/.storybook/theme.ts b/web/.storybook/theme.ts
index 2a97be104..8e773e11b 100644
--- a/web/.storybook/theme.ts
+++ b/web/.storybook/theme.ts
@@ -9,5 +9,5 @@ export default create({
   brandImage: "/logo.svg",
   brandTarget: "_self",
   colorPrimary: "#E95518",
-  colorSecondary: "#4770FF",
+  colorSecondary: "#4770FF"
 });
diff --git a/web/bin/pluginDoc.ts b/web/bin/pluginDoc.ts
index a7423b7b2..4cc1d813d 100644
--- a/web/bin/pluginDoc.ts
+++ b/web/bin/pluginDoc.ts
@@ -50,7 +50,7 @@ function parse(node: ts.Node): D | undefined {
         name: s.name,
         type: tc.typeToString(t),
         required: (s.flags & ts.SymbolFlags.Optional) === 0,
-        desc: ts.displayPartsToString(s.getDocumentationComment(tc)),
+        desc: ts.displayPartsToString(s.getDocumentationComment(tc))
       };
     })
     .filter((p): p is P => !!p);
@@ -58,7 +58,7 @@ function parse(node: ts.Node): D | undefined {
   return {
     name: node.name.text,
     desc: ts.displayPartsToString(sym.getDocumentationComment(tc)),
-    properties,
+    properties
   };
 }
 
@@ -70,7 +70,7 @@ function render(decls: D[], linkable: (name: string) => boolean): string {
       d.properties.map((p) => `- ${renderHead(p, linkable)}`).join("\n"),
       ...d.properties
         .filter((p) => p.desc)
-        .flatMap((p) => [`## ${renderHead(p, linkable)}`, p.desc]),
+        .flatMap((p) => [`## ${renderHead(p, linkable)}`, p.desc])
     ])
     .filter(Boolean)
     .join("\n\n");
@@ -83,7 +83,7 @@ function renderHead(p: P, linkable: (name: string) => boolean): string {
 function renderType(
   type: string,
   required: boolean,
-  linkable: (name: string) => boolean,
+  linkable: (name: string) => boolean
 ) {
   const ts = split(type, [
     ") => ",
@@ -94,14 +94,14 @@ function renderType(
     " | ",
     "(",
     ")",
-    ", ",
+    ", "
   ])
     .map((s) =>
       typeof s === "string" && linkable(s)
         ? {
-            link: s,
+            link: s
           }
-        : s,
+        : s
     )
     .map((s) =>
       typeof s === "string"
@@ -110,7 +110,7 @@ function renderType(
           ? `[${s.link}](#${s.link})`
           : "s" in s
             ? s.s
-            : "",
+            : ""
     )
     .join("");
   const func = / => /.test(type);
@@ -118,7 +118,7 @@ function renderType(
     !required && func ? "(" : "",
     ts,
     !required && func ? ")" : "",
-    !required ? " | undefined" : "",
+    !required ? " | undefined" : ""
   ].join("");
 }
 
diff --git a/web/codegen.ts b/web/codegen.ts
index a155e4e02..9315424f2 100644
--- a/web/codegen.ts
+++ b/web/codegen.ts
@@ -9,14 +9,14 @@ const config: CodegenConfig = {
   schema: "../server/gql/*.graphql",
   documents: [
     `${rootGQLDirectory}fragments/*.ts`,
-    `${rootGQLDirectory}queries/*.ts`,
+    `${rootGQLDirectory}queries/*.ts`
   ],
   generates: {
     [rootGenerateDirectory]: {
       preset: "client",
       presetConfig: {
         gqlTagName: "gql",
-        fragmentMasking: false,
+        fragmentMasking: false
       },
       config: {
         useTypeImports: true,
@@ -28,15 +28,15 @@ const config: CodegenConfig = {
           URL: "string",
           Lang: "string",
           TranslatedString: "{ [lang in string]?: string } | null",
-          JSON: "any",
-        },
-      },
+          JSON: "any"
+        }
+      }
     },
     [`${rootGenerateDirectory}/fragmentMatcher.json`]: {
-      plugins: ["fragment-matcher"],
-    },
+      plugins: ["fragment-matcher"]
+    }
   },
-  ignoreNoDocuments: true,
+  ignoreNoDocuments: true
 };
 
 export default config;
diff --git a/web/e2e/utils/config.ts b/web/e2e/utils/config.ts
index 483f21eed..1ad5d2cb4 100644
--- a/web/e2e/utils/config.ts
+++ b/web/e2e/utils/config.ts
@@ -9,7 +9,7 @@ export const config = {
   authUrl: process.env["REEARTH_WEB_AUTH0_DOMAIN"],
   signUpSecret: process.env["REEARTH_WEB_E2E_SIGNUP_SECRET"],
   authProvider: process.env["REEARTH_WEB_AUTH_PROVIDER"],
-  earlyAccessAdmins: process.env["REEARTH_WEB_EARLY_ACCESS_ADMINS"],
+  earlyAccessAdmins: process.env["REEARTH_WEB_EARLY_ACCESS_ADMINS"]
 };
 
 export type Config = typeof config;
diff --git a/web/e2e/utils/index.ts b/web/e2e/utils/index.ts
index a8b796815..56548dc91 100644
--- a/web/e2e/utils/index.ts
+++ b/web/e2e/utils/index.ts
@@ -3,7 +3,7 @@ import {
   type APIRequestContext,
   request,
   test as base,
-  type Page,
+  type Page
 } from "@playwright/test";
 
 import { config, getAccessToken, type Config } from "./config";
@@ -23,7 +23,7 @@ export type Reearth = {
   gql: <T = any>(
     query: string,
     variables?: Record<string, any>,
-    options?: { ignoreError?: boolean },
+    options?: { ignoreError?: boolean }
   ) => Promise<T>;
 } & Config;
 
@@ -41,7 +41,7 @@ export const test = base.extend<{
         const res = await page.goto(url, options);
         if (this.token) {
           await page.evaluate(
-            `window.REEARTH_E2E_ACCESS_TOKEN = ${JSON.stringify(this.token)};`,
+            `window.REEARTH_E2E_ACCESS_TOKEN = ${JSON.stringify(this.token)};`
           );
         }
         return res;
@@ -52,11 +52,11 @@ export const test = base.extend<{
         const resp = await request.post(config.api + "/graphql", {
           data: {
             query,
-            variables,
+            variables
           },
           headers: {
-            Authorization: `Bearer ${this.token}`,
-          },
+            Authorization: `Bearer ${this.token}`
+          }
         });
 
         const body = await resp.json();
@@ -65,14 +65,14 @@ export const test = base.extend<{
         }
 
         return body;
-      },
+      }
     });
-  },
+  }
 });
 
 export async function initUser(
   token: string,
-  ctx?: APIRequestContext,
+  ctx?: APIRequestContext
 ): Promise<{
   token: string;
   userId: string;
@@ -92,8 +92,8 @@ export async function initUser(
         userId,
         teamId,
         api,
-        signUpSecret: signUpSecret ? "***" : "",
-      })}`,
+        signUpSecret: signUpSecret ? "***" : ""
+      })}`
     );
   }
 
@@ -109,12 +109,12 @@ export async function initUser(
         userId,
         teamId,
         secret: signUpSecret,
-        lang: "en",
-      },
+        lang: "en"
+      }
     },
     headers: {
-      Authorization: `Bearer ${token}`,
-    },
+      Authorization: `Bearer ${token}`
+    }
   });
 
   const body = await resp.json();
@@ -125,8 +125,8 @@ export async function initUser(
         userId,
         teamId,
         api,
-        signUpSecret: signUpSecret ? "***" : "",
-      })}`,
+        signUpSecret: signUpSecret ? "***" : ""
+      })}`
     );
   }
 
@@ -134,6 +134,6 @@ export async function initUser(
     token,
     userName,
     userId: body.data.signup.user.id,
-    teamId,
+    teamId
   };
 }
diff --git a/web/e2e/utils/login.ts b/web/e2e/utils/login.ts
index 1251d46cd..af596490e 100644
--- a/web/e2e/utils/login.ts
+++ b/web/e2e/utils/login.ts
@@ -13,9 +13,9 @@ export async function login(): Promise<string> {
           userName,
           password: password ? "***" : "",
           authAudience,
-          authClientId,
-        },
-      )}`,
+          authClientId
+        }
+      )}`
     );
   }
 
@@ -28,8 +28,8 @@ export async function login(): Promise<string> {
         audience: authAudience,
         client_id: authClientId,
         grant_type: "password",
-        scope: "openid profile email",
-      },
+        scope: "openid profile email"
+      }
     );
 
     if (!resp.data.access_token) {
@@ -43,8 +43,8 @@ export async function login(): Promise<string> {
         userName,
         password: password ? "***" : "",
         authAudience,
-        authClientId,
-      })}`,
+        authClientId
+      })}`
     );
   }
 }
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index 376aa3527..ddb38d523 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -10,11 +10,11 @@ const themeConfig = [
       "@typescript-eslint/no-empty-object-type": [
         "error",
         {
-          allowInterfaces: "with-single-extends",
-        },
-      ],
-    },
-  },
+          allowInterfaces: "with-single-extends"
+        }
+      ]
+    }
+  }
 ];
 
 const e2eConfig = [
@@ -28,13 +28,13 @@ const e2eConfig = [
           paths: [
             {
               name: "@playwright/test",
-              message: "Use @reearth/e2e/utils instead.",
-            },
-          ],
-        },
-      ],
-    },
-  },
+              message: "Use @reearth/e2e/utils instead."
+            }
+          ]
+        }
+      ]
+    }
+  }
 ];
 
 export default [...config("@reearth"), ...e2eConfig, ...themeConfig];
diff --git a/web/i18next-parser.config.js b/web/i18next-parser.config.js
index 403bb187f..4723a3bb5 100644
--- a/web/i18next-parser.config.js
+++ b/web/i18next-parser.config.js
@@ -5,5 +5,5 @@ export default {
   // allow keys to be phrases having `:`, `.`
   namespaceSeparator: false,
   keySeparator: false,
-  createOldCatalogs: false,
+  createOldCatalogs: false
 };
diff --git a/web/playwright.config.ts b/web/playwright.config.ts
index e5cb3132b..34928bd65 100644
--- a/web/playwright.config.ts
+++ b/web/playwright.config.ts
@@ -7,11 +7,11 @@ const config: PlaywrightTestConfig = {
   use: {
     baseURL: process.env.REEARTH_WEB_E2E_BASEURL || "http://localhost:3000/",
     screenshot: "only-on-failure",
-    video: "retain-on-failure",
+    video: "retain-on-failure"
   },
   testDir: "e2e",
   globalSetup: "./e2e/utils/setup.ts",
-  reporter: process.env.CI ? "github" : "list",
+  reporter: process.env.CI ? "github" : "list"
 };
 
 export default config;
diff --git a/web/src/beta/components/Accordion/AccordionItem.tsx b/web/src/beta/components/Accordion/AccordionItem.tsx
index 7b66e0f4f..8e4ddb23b 100644
--- a/web/src/beta/components/Accordion/AccordionItem.tsx
+++ b/web/src/beta/components/Accordion/AccordionItem.tsx
@@ -5,7 +5,7 @@ import {
   AccordionItemButton,
   AccordionItemHeading,
   AccordionItemPanel,
-  AccordionItemState,
+  AccordionItemState
 } from "react-accessible-accordion";
 
 import Icon from "../Icon";
@@ -23,7 +23,7 @@ const AccordionItem: React.FC<Props> = ({
   id,
   heading,
   content,
-  bg,
+  bg
 }) => {
   const theme = useTheme();
   return (
diff --git a/web/src/beta/components/Accordion/index.stories.tsx b/web/src/beta/components/Accordion/index.stories.tsx
index 7573d6448..83999ca3d 100644
--- a/web/src/beta/components/Accordion/index.stories.tsx
+++ b/web/src/beta/components/Accordion/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Accordion from ".";
 
 const meta: Meta<typeof Accordion> = {
-  component: Accordion,
+  component: Accordion
 };
 
 export default meta;
@@ -27,14 +27,14 @@ export const Default: Story = {
         {
           id: "hoge",
           heading: SampleHeading,
-          content: SampleContent,
+          content: SampleContent
         },
         {
           id: "hogefuga",
           heading: SampleHeading,
-          content: SampleContent,
-        },
+          content: SampleContent
+        }
       ]}
     />
-  ),
+  )
 };
diff --git a/web/src/beta/components/Accordion/index.test.tsx b/web/src/beta/components/Accordion/index.test.tsx
index 4c7c6ac4e..4d76f4ae7 100644
--- a/web/src/beta/components/Accordion/index.test.tsx
+++ b/web/src/beta/components/Accordion/index.test.tsx
@@ -7,13 +7,13 @@ const sampleContents: AccordionItemType[] = [
   {
     id: "1",
     heading: <div>This is heading1</div>,
-    content: <div>This is content1</div>,
+    content: <div>This is content1</div>
   },
   {
     id: "2",
     heading: <div>This is heading2</div>,
-    content: <div>This is content2</div>,
-  },
+    content: <div>This is content2</div>
+  }
 ];
 
 test("should be rendered", () => {
@@ -36,10 +36,10 @@ test("should display items content", () => {
 test("should open when header button is clicked", () => {
   render(<Accordion items={sampleContents} />);
   expect(
-    screen.getAllByTestId("atoms-accordion-item-content")[0],
+    screen.getAllByTestId("atoms-accordion-item-content")[0]
   ).not.toBeVisible();
   fireEvent.click(screen.getAllByTestId("atoms-accordion-item-header")[0]);
   expect(
-    screen.getAllByTestId("atoms-accordion-item-content")[0],
+    screen.getAllByTestId("atoms-accordion-item-content")[0]
   ).toBeVisible();
 });
diff --git a/web/src/beta/components/Accordion/index.tsx b/web/src/beta/components/Accordion/index.tsx
index 6b29e6dbf..7a6ab66da 100644
--- a/web/src/beta/components/Accordion/index.tsx
+++ b/web/src/beta/components/Accordion/index.tsx
@@ -21,7 +21,7 @@ const Accordion: React.FC<Props> = ({
   items,
   allowMultipleExpanded,
   allowZeroExpanded = true,
-  itemBgColor,
+  itemBgColor
 }) => {
   return (
     <AccordionComponent
diff --git a/web/src/beta/components/Avatar/index.stories.tsx b/web/src/beta/components/Avatar/index.stories.tsx
index cc6d7c60e..cf82ff1d2 100644
--- a/web/src/beta/components/Avatar/index.stories.tsx
+++ b/web/src/beta/components/Avatar/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Avatar from ".";
 
 const meta: Meta<typeof Avatar> = {
-  component: Avatar,
+  component: Avatar
 };
 
 export default meta;
@@ -12,8 +12,8 @@ type Story = StoryObj<typeof Avatar>;
 
 export const Default: Story = { render: () => <Avatar innerText="ReEarth" /> };
 export const Small: Story = {
-  render: () => <Avatar size="small" innerText="ReEarth" />,
+  render: () => <Avatar size="small" innerText="ReEarth" />
 };
 export const Large: Story = {
-  render: () => <Avatar size="large" innerText="ReEarth" />,
+  render: () => <Avatar size="large" innerText="ReEarth" />
 };
diff --git a/web/src/beta/components/Avatar/index.tsx b/web/src/beta/components/Avatar/index.tsx
index 8a1c3ed97..4da457080 100644
--- a/web/src/beta/components/Avatar/index.tsx
+++ b/web/src/beta/components/Avatar/index.tsx
@@ -20,7 +20,7 @@ const Avatar: React.FC<Props> = ({
   background,
   avatar,
   innerText,
-  borderRadius = "50%",
+  borderRadius = "50%"
 }) => {
   const theme = useTheme();
 
diff --git a/web/src/beta/components/Box/index.stories.tsx b/web/src/beta/components/Box/index.stories.tsx
index 4ae39771e..4e0951190 100644
--- a/web/src/beta/components/Box/index.stories.tsx
+++ b/web/src/beta/components/Box/index.stories.tsx
@@ -4,7 +4,7 @@ import Component, { Props } from ".";
 
 export default {
   title: "beta/components/Box",
-  component: Component,
+  component: Component
 } as Meta;
 
 export const Margin: Story<Props> = () => (
diff --git a/web/src/beta/components/Button/index.stories.tsx b/web/src/beta/components/Button/index.stories.tsx
index 8f5747e9b..dcdfdc05b 100644
--- a/web/src/beta/components/Button/index.stories.tsx
+++ b/web/src/beta/components/Button/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Button from ".";
 
 const meta: Meta<typeof Button> = {
-  component: Button,
+  component: Button
 };
 
 export default meta;
@@ -11,55 +11,53 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
-  render: () => <Button text="Default" />,
+  render: () => <Button text="Default" />
 };
 
 export const PrimarySmall: Story = {
-  render: () => <Button buttonType="primary" text="Primary" size="small" />,
+  render: () => <Button buttonType="primary" text="Primary" size="small" />
 };
 
 export const PrimaryMedium: Story = {
-  render: () => <Button buttonType="primary" text="Primary" size="medium" />,
+  render: () => <Button buttonType="primary" text="Primary" size="medium" />
 };
 
 export const PrimaryDisabled: Story = {
-  render: () => <Button buttonType="primary" text="Primary" disabled />,
+  render: () => <Button buttonType="primary" text="Primary" disabled />
 };
 
 export const SecondarySmall: Story = {
-  render: () => <Button buttonType="secondary" text="secondary" size="small" />,
+  render: () => <Button buttonType="secondary" text="secondary" size="small" />
 };
 
 export const SecondaryMedium: Story = {
-  render: () => (
-    <Button buttonType="secondary" text="secondary" size="medium" />
-  ),
+  render: () => <Button buttonType="secondary" text="secondary" size="medium" />
 };
 
 export const SecondaryDisabled: Story = {
-  render: () => <Button buttonType="secondary" text="secondary" disabled />,
+  render: () => <Button buttonType="secondary" text="secondary" disabled />
 };
 
 export const DangerSmall: Story = {
-  render: () => <Button buttonType="danger" text="danger" size="small" />,
+  render: () => <Button buttonType="danger" text="danger" size="small" />
 };
 
 export const DangerMedium: Story = {
-  render: () => <Button buttonType="danger" text="danger" size="medium" />,
+  render: () => <Button buttonType="danger" text="danger" size="medium" />
 };
 
 export const DangerDisabled: Story = {
-  render: () => <Button buttonType="danger" text="danger" disabled />,
+  render: () => <Button buttonType="danger" text="danger" disabled />
 };
 
 export const DisabledSmall: Story = {
   render: () => (
     <Button buttonType="primary" text="disabled" size="small" disabled />
-  ),
+  )
 };
 
 export const DisabledMedium: Story = {
-  render: () => <Button text="disabled" size="medium" disabled />,
+  render: () => <Button text="disabled" size="medium" disabled />
 };
 
 export const WithLeftIconSmall: Story = {
@@ -71,7 +69,7 @@ export const WithLeftIconSmall: Story = {
       size="small"
       iconPosition="left"
     />
-  ),
+  )
 };
 
 export const WithRightIconSmall: Story = {
@@ -83,7 +81,7 @@ export const WithRightIconSmall: Story = {
       size="small"
       iconPosition="right"
     />
-  ),
+  )
 };
 
 export const WithLeftIconMedium: Story = {
@@ -95,7 +93,7 @@ export const WithLeftIconMedium: Story = {
       size="medium"
       iconPosition="left"
     />
-  ),
+  )
 };
 
 export const WithRightIconMedium: Story = {
@@ -107,5 +105,5 @@ export const WithRightIconMedium: Story = {
       size="medium"
       iconPosition="right"
     />
-  ),
+  )
 };
diff --git a/web/src/beta/components/Button/index.tsx b/web/src/beta/components/Button/index.tsx
index 2f28ad5ae..c0e2f5354 100644
--- a/web/src/beta/components/Button/index.tsx
+++ b/web/src/beta/components/Button/index.tsx
@@ -33,7 +33,7 @@ const Button: React.FC<Props> = ({
   margin,
   onClick,
   onMouseEnter,
-  onMouseLeave,
+  onMouseLeave
 }) => {
   const hasText = useMemo(() => {
     return !!text || !!children;
diff --git a/web/src/beta/components/CatalogCard/index.stories.tsx b/web/src/beta/components/CatalogCard/index.stories.tsx
index 518a5198d..72248c54a 100644
--- a/web/src/beta/components/CatalogCard/index.stories.tsx
+++ b/web/src/beta/components/CatalogCard/index.stories.tsx
@@ -1,11 +1,11 @@
+import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import { Meta, StoryObj } from "@storybook/react";
 
-import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 
 import AssetCard from ".";
 
 const meta: Meta<typeof AssetCard> = {
-  component: AssetCard,
+  component: AssetCard
 };
 
 export default meta;
@@ -16,16 +16,16 @@ export const Default: Story = {
   args: {
     selected: false,
     url: `/sample.svg`,
-    name: "hoge",
-  },
+    name: "hoge"
+  }
 };
 
 export const Selected: Story = {
   args: {
     url: `/sample.svg`,
     name: "hoge",
-    selected: true,
-  },
+    selected: true
+  }
 };
 
 export const EditableName: Story = {
@@ -41,10 +41,10 @@ export const EditableName: Story = {
           {
             name: "Delete",
             icon: "bin",
-            onClick: undefined,
-          },
+            onClick: undefined
+          }
         ]}
       />
-    ),
-  },
+    )
+  }
 };
diff --git a/web/src/beta/components/CatalogCard/index.tsx b/web/src/beta/components/CatalogCard/index.tsx
index 55e827502..e11075fb2 100644
--- a/web/src/beta/components/CatalogCard/index.tsx
+++ b/web/src/beta/components/CatalogCard/index.tsx
@@ -41,7 +41,7 @@ const CatalogCard: React.FC<Props> = ({
   onSelect,
   onActionClick,
   onOpenChange,
-  onLayerStyleNameUpdate,
+  onLayerStyleNameUpdate
 }) => {
   const [isOpenAction, setIsOpenAction] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -67,7 +67,7 @@ const CatalogCard: React.FC<Props> = ({
         setNewName(newName);
       }
     },
-    [isNameEditable],
+    [isNameEditable]
   );
 
   const handleNameSubmit = useCallback(() => {
@@ -83,7 +83,7 @@ const CatalogCard: React.FC<Props> = ({
       else setNewName(name);
       setIsEditing(false);
     },
-    [handleNameSubmit, name, newName],
+    [handleNameSubmit, name, newName]
   );
 
   const handleActionClick = (e: React.MouseEvent) => {
diff --git a/web/src/beta/components/CheckboxField/index.stories.tsx b/web/src/beta/components/CheckboxField/index.stories.tsx
index 9de39fb9c..3a735ed50 100644
--- a/web/src/beta/components/CheckboxField/index.stories.tsx
+++ b/web/src/beta/components/CheckboxField/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import CheckBoxField from ".";
 
 const meta: Meta<typeof CheckBoxField> = {
-  component: CheckBoxField,
+  component: CheckBoxField
 };
 
 export default meta;
@@ -13,6 +13,6 @@ type Story = StoryObj<typeof CheckBoxField>;
 export const Default: Story = {
   args: {
     label: "takanawa_3D_Tiles",
-    checked: false,
-  },
+    checked: false
+  }
 };
diff --git a/web/src/beta/components/Collapse/index.stories.tsx b/web/src/beta/components/Collapse/index.stories.tsx
index b1bb4ab54..011a92244 100644
--- a/web/src/beta/components/Collapse/index.stories.tsx
+++ b/web/src/beta/components/Collapse/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Collapse from ".";
 
 const meta: Meta<typeof Collapse> = {
-  component: Collapse,
+  component: Collapse
 };
 
 export default meta;
@@ -13,14 +13,14 @@ type Story = StoryObj<typeof Collapse>;
 export const Default: Story = {
   args: {
     title: "Title",
-    children: <p>Item</p>,
-  },
+    children: <p>Item</p>
+  }
 };
 
 export const AlwaysOpen: Story = {
   args: {
     title: "Title",
     alwaysOpen: true,
-    children: <p>Item</p>,
-  },
+    children: <p>Item</p>
+  }
 };
diff --git a/web/src/beta/components/ContentPicker/index.stories.tsx b/web/src/beta/components/ContentPicker/index.stories.tsx
index 76fb80afe..a15d1d529 100644
--- a/web/src/beta/components/ContentPicker/index.stories.tsx
+++ b/web/src/beta/components/ContentPicker/index.stories.tsx
@@ -3,19 +3,19 @@ import { Meta } from "@storybook/react";
 import ContentPicker, { Item } from ".";
 
 export default {
-  component: ContentPicker,
+  component: ContentPicker
 } as Meta;
 
 const items: Item[] = [
   {
     id: "1",
     name: "2",
-    icon: "crosshair",
+    icon: "crosshair"
   },
   {
     id: "1",
     name: "2",
-    icon: "crosshair",
-  },
+    icon: "crosshair"
+  }
 ];
 export const Default = () => <ContentPicker items={items} />;
diff --git a/web/src/beta/components/ContentPicker/index.tsx b/web/src/beta/components/ContentPicker/index.tsx
index ad9e9a0db..1f2d1a3a7 100644
--- a/web/src/beta/components/ContentPicker/index.tsx
+++ b/web/src/beta/components/ContentPicker/index.tsx
@@ -21,7 +21,7 @@ const ContentPicker: React.FC<ContentsPickerProps> = ({
   className,
   items: items,
   onSelect,
-  onClickAway,
+  onClickAway
 }) => {
   const ref = useRef(null);
   useClickAway(ref, () => onClickAway?.());
diff --git a/web/src/beta/components/Divider/index.stories.tsx b/web/src/beta/components/Divider/index.stories.tsx
index 36ab855d1..7dd75477a 100644
--- a/web/src/beta/components/Divider/index.stories.tsx
+++ b/web/src/beta/components/Divider/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Divider from ".";
 
 const meta: Meta<typeof Divider> = {
-  component: Divider,
+  component: Divider
 };
 
 export default meta;
diff --git a/web/src/beta/components/DragAndDropList/Item.tsx b/web/src/beta/components/DragAndDropList/Item.tsx
index d8c1b3f18..1fb2bfd5e 100644
--- a/web/src/beta/components/DragAndDropList/Item.tsx
+++ b/web/src/beta/components/DragAndDropList/Item.tsx
@@ -6,10 +6,9 @@ import {
   ConnectDragPreview,
   ConnectDragSource,
   useDrag,
-  useDrop,
+  useDrop
 } from "react-dnd";
 
-
 type DragItem = {
   index: number;
   id: string;
@@ -42,7 +41,7 @@ const Item: FC<Props> = ({
   shouldUseCustomHandler,
   onItemMove,
   onItemDropOnItem,
-  onItemDropOutside,
+  onItemDropOutside
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -54,7 +53,7 @@ const Item: FC<Props> = ({
     accept: itemGroupKey,
     collect(monitor) {
       return {
-        handlerId: monitor.getHandlerId(),
+        handlerId: monitor.getHandlerId()
       };
     },
     hover(item: DragItem, monitor) {
@@ -89,7 +88,7 @@ const Item: FC<Props> = ({
       }
       onItemMove(dragIndex, hoverIndex);
       item.index = hoverIndex;
-    },
+    }
   });
 
   const [{ isDragging }, drag, preview] = useDrag({
@@ -98,7 +97,7 @@ const Item: FC<Props> = ({
       return { id, index };
     },
     collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
+      isDragging: monitor.isDragging()
     }),
     end: (item, monitor) => {
       const didDrop = monitor.didDrop();
@@ -107,7 +106,7 @@ const Item: FC<Props> = ({
       } else {
         onItemDropOutside();
       }
-    },
+    }
   });
 
   drop(contentRef);
diff --git a/web/src/beta/components/DragAndDropList/index.stories.tsx b/web/src/beta/components/DragAndDropList/index.stories.tsx
index e5d19d022..d8f32ca5e 100644
--- a/web/src/beta/components/DragAndDropList/index.stories.tsx
+++ b/web/src/beta/components/DragAndDropList/index.stories.tsx
@@ -9,7 +9,7 @@ type DummyItem = {
 };
 
 const meta: Meta<typeof DragAndDropList<DummyItem>> = {
-  component: DragAndDropList<DummyItem>,
+  component: DragAndDropList<DummyItem>
 };
 
 export default meta;
@@ -33,7 +33,7 @@ const DummyComponent: typeof DragAndDropList<DummyItem> = (args) => {
           const items = [...old];
           items.splice(
             old.findIndex((o) => o.id === item.id),
-            1,
+            1
           );
           items.splice(index, 0, item);
           return items;
@@ -51,7 +51,7 @@ export const Default: Story = {
           maxHeight: "240px",
           overflowY: "auto",
           background: "gray",
-          padding: "24px",
+          padding: "24px"
         }}
       >
         <DummyComponent {...args} />
@@ -65,7 +65,7 @@ export const Default: Story = {
         style={{
           border: "1px solid blue",
           padding: "0.5rem 1rem",
-          backgroundColor: "lightgray",
+          backgroundColor: "lightgray"
         }}
       >
         {item.text}
@@ -73,6 +73,6 @@ export const Default: Story = {
     ),
     getId: (item) => item.id.toString(),
     items: dummyItems,
-    gap: 16,
-  },
+    gap: 16
+  }
 };
diff --git a/web/src/beta/components/DragAndDropList/index.tsx b/web/src/beta/components/DragAndDropList/index.tsx
index 99f15223f..53425d502 100644
--- a/web/src/beta/components/DragAndDropList/index.tsx
+++ b/web/src/beta/components/DragAndDropList/index.tsx
@@ -20,7 +20,7 @@ function DragAndDropList<Item extends { id: string } = { id: string }>({
   onItemDrop,
   getId,
   renderItem,
-  gap,
+  gap
 }: Props<Item>) {
   const [movingItems, setMovingItems] = useState<Item[]>(items);
   const { scrollContainerRef } = useScroll();
@@ -62,7 +62,7 @@ function DragAndDropList<Item extends { id: string } = { id: string }>({
         onItemDrop(movingItems[index], index);
       }
     },
-    [items, movingItems, onItemDrop],
+    [items, movingItems, onItemDrop]
   );
 
   const onItemDropOutside = useCallback(() => {
diff --git a/web/src/beta/components/DragAndDropList/scrollItem.tsx b/web/src/beta/components/DragAndDropList/scrollItem.tsx
index 515edf2dd..df0b96b60 100644
--- a/web/src/beta/components/DragAndDropList/scrollItem.tsx
+++ b/web/src/beta/components/DragAndDropList/scrollItem.tsx
@@ -18,7 +18,7 @@ export const useScroll = () => {
         }
       }
     },
-    [scrollContainerRef],
+    [scrollContainerRef]
   );
 
   useEffect(() => {
diff --git a/web/src/beta/components/Flex/index.stories.tsx b/web/src/beta/components/Flex/index.stories.tsx
index 60b55608a..b2d1292d4 100644
--- a/web/src/beta/components/Flex/index.stories.tsx
+++ b/web/src/beta/components/Flex/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react";
 import Component, { Props } from ".";
 
 export default {
-  component: Component,
+  component: Component
 } as Meta;
 
 const ExampleDiv = () => (
@@ -31,13 +31,13 @@ export const DirectionVertical: Story<Props> = (args) => (
 );
 
 SpaceBetween.args = {
-  justify: "space-between",
+  justify: "space-between"
 };
 
 GapChildren.args = {
-  gap: "20px",
+  gap: "20px"
 };
 
 DirectionVertical.args = {
-  direction: "column",
+  direction: "column"
 };
diff --git a/web/src/beta/components/Flex/index.tsx b/web/src/beta/components/Flex/index.tsx
index 3bccfe843..a87b72c9f 100644
--- a/web/src/beta/components/Flex/index.tsx
+++ b/web/src/beta/components/Flex/index.tsx
@@ -55,7 +55,7 @@ const Flex: React.FC<Props> = ({
         flexGrow: grow,
         flexShrink: shrink,
         flex,
-        gap, // TODO: Safari doesn't support this property and please develop polyfill
+        gap // TODO: Safari doesn't support this property and please develop polyfill
       }}
       onClick={onClick}
       data-testid={testId}
diff --git a/web/src/beta/components/FloatedPanel/index.stories.tsx b/web/src/beta/components/FloatedPanel/index.stories.tsx
index f9ab17559..452c354cd 100644
--- a/web/src/beta/components/FloatedPanel/index.stories.tsx
+++ b/web/src/beta/components/FloatedPanel/index.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, Story } from "@storybook/react";
 import FloatedPanel, { Props } from ".";
 
 const meta: Meta<Props> = {
-  component: FloatedPanel,
+  component: FloatedPanel
 };
 
 export default meta;
@@ -14,13 +14,13 @@ const Template: Story<Props> = (args) => <FloatedPanel {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   visible: true,
-  children: "This is the content of the floated panel",
+  children: "This is the content of the floated panel"
 };
 
 export const Hidden = Template.bind({});
 Hidden.args = {
   visible: false,
-  children: "This is the content of the floated panel",
+  children: "This is the content of the floated panel"
 };
 
 export const CustomStyles = Template.bind({});
@@ -31,5 +31,5 @@ CustomStyles.args = {
     background-color: lightblue;
     color: white;
     padding: 10px;
-  `,
+  `
 };
diff --git a/web/src/beta/components/FloatedPanel/index.tsx b/web/src/beta/components/FloatedPanel/index.tsx
index 353b2827d..21e147b8a 100644
--- a/web/src/beta/components/FloatedPanel/index.tsx
+++ b/web/src/beta/components/FloatedPanel/index.tsx
@@ -29,13 +29,13 @@ const FloatedPanel: React.FC<Props> = ({
   onEnter,
   onEntered,
   onExit,
-  onExited,
+  onExited
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   useClickAway(ref, (e) => onClickAway?.(e));
   const transition = useTransition(!!visible, 200, {
     mountOnEnter: true,
-    unmountOnExit: true,
+    unmountOnExit: true
   });
 
   // visibleがtrueの時のみ更新することで、InfoBoxを閉じるアニメーションが走る際に中身が消えないようにする
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
index 85c8c0956..e9bc2256d 100644
--- a/web/src/beta/components/Icon/icons.ts
+++ b/web/src/beta/components/Icon/icons.ts
@@ -238,5 +238,5 @@ export default {
   cylinder: Cylinder,
   squareOutline: SquareOutline,
   circleOutline: CircleOutline,
-  polygonExtruded: PolygonExtruded,
+  polygonExtruded: PolygonExtruded
 };
diff --git a/web/src/beta/components/Icon/index.stories.tsx b/web/src/beta/components/Icon/index.stories.tsx
index d5e5ac4b2..70685ff19 100644
--- a/web/src/beta/components/Icon/index.stories.tsx
+++ b/web/src/beta/components/Icon/index.stories.tsx
@@ -6,7 +6,7 @@ const icon =
   '<svg stroke="white" fill="#00A0E8" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="css-1t9xarj" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>';
 
 export default {
-  component: Icon,
+  component: Icon
 } as Meta;
 
 export const Default = () => <Icon icon="file" size={20} />;
diff --git a/web/src/beta/components/Icon/index.tsx b/web/src/beta/components/Icon/index.tsx
index 15ddef0a5..86537f2cd 100644
--- a/web/src/beta/components/Icon/index.tsx
+++ b/web/src/beta/components/Icon/index.tsx
@@ -6,7 +6,7 @@ import {
   CSSProperties,
   MouseEvent,
   memo,
-  useMemo,
+  useMemo
 } from "react";
 
 import Icons from "./icons";
@@ -73,7 +73,7 @@ const Icon: React.FC<Props> = ({
         transitionDuration:
           !notransition && !style?.transitionDuration
             ? transitionDuration || "0.3s"
-            : style?.transitionDuration,
+            : style?.transitionDuration
       }}
       {...aria}
     />
diff --git a/web/src/beta/components/InsertionBar/index.stories.tsx b/web/src/beta/components/InsertionBar/index.stories.tsx
index 9e98f9e32..0b3a2c345 100644
--- a/web/src/beta/components/InsertionBar/index.stories.tsx
+++ b/web/src/beta/components/InsertionBar/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import InsertionBar, { Props } from ".";
 
 const meta: Meta<Props> = {
-  component: InsertionBar,
+  component: InsertionBar
 };
 
 export default meta;
@@ -15,22 +15,22 @@ export const Default: Story = {
     pos: "bottom",
     mode: "visible",
     onButtonClick: () => console.log("Button clicked"),
-    children: "Insertion bar content",
-  },
+    children: "Insertion bar content"
+  }
 };
 
 export const Hidden: Story = {
   args: {
     pos: "top",
     mode: "hidden",
-    children: "Insertion bar content",
-  },
+    children: "Insertion bar content"
+  }
 };
 
 export const Dragging: Story = {
   args: {
     pos: "bottom",
     mode: "dragging",
-    children: "Insertion bar content",
-  },
+    children: "Insertion bar content"
+  }
 };
diff --git a/web/src/beta/components/InsertionBar/index.tsx b/web/src/beta/components/InsertionBar/index.tsx
index 44455c333..98ced879a 100644
--- a/web/src/beta/components/InsertionBar/index.tsx
+++ b/web/src/beta/components/InsertionBar/index.tsx
@@ -18,14 +18,14 @@ const InsertionBar: React.FC<Props> = ({
   children,
   pos,
   mode = "visible",
-  onButtonClick,
+  onButtonClick
 }) => {
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
   const {
     styles,
     attributes,
-    update: updatePopper,
+    update: updatePopper
   } = usePopper(referenceElement.current, popperElement.current, {
     placement: "bottom",
     strategy: "fixed",
@@ -35,10 +35,10 @@ const InsertionBar: React.FC<Props> = ({
         enabled: false,
         options: {
           scroll: false,
-          resize: false,
-        },
-      },
-    ],
+          resize: false
+        }
+      }
+    ]
   });
 
   const handleClick = useCallback(() => {
diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx
index 116624477..cf07bcb91 100644
--- a/web/src/beta/components/InsertionButton/index.stories.tsx
+++ b/web/src/beta/components/InsertionButton/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import InsertionButton from ".";
 
 export default {
-  component: InsertionButton,
+  component: InsertionButton
 } as Meta;
 
 type Story = StoryObj<typeof InsertionButton>;
diff --git a/web/src/beta/components/ListItem/index.stories.tsx b/web/src/beta/components/ListItem/index.stories.tsx
index 7dd20b61e..9a083730a 100644
--- a/web/src/beta/components/ListItem/index.stories.tsx
+++ b/web/src/beta/components/ListItem/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import ActionItem from "./index";
 
 export default {
-  component: ActionItem,
+  component: ActionItem
 } as Meta;
 
 type Story = StoryObj<typeof ActionItem>;
@@ -14,6 +14,6 @@ export const Default: Story = {
     actionContent: <div style={{ background: "gray" }}>actionContent</div>,
     isOpenAction: true,
     children:
-      "long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text ",
-  },
+      "long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text "
+  }
 };
diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
index eb65c3ea4..e3b9bb5d8 100644
--- a/web/src/beta/components/ListItem/index.tsx
+++ b/web/src/beta/components/ListItem/index.tsx
@@ -30,7 +30,7 @@ const ListItem: FC<Props> = ({
   clamp,
   onItemClick,
   onActionClick,
-  onOpenChange,
+  onOpenChange
 }) => {
   return (
     <Wrapper
diff --git a/web/src/beta/components/Loading/index.stories.tsx b/web/src/beta/components/Loading/index.stories.tsx
index d4c7312b7..f210a1b1f 100644
--- a/web/src/beta/components/Loading/index.stories.tsx
+++ b/web/src/beta/components/Loading/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Loading from ".";
 
 const meta: Meta<typeof Loading> = {
-  component: Loading,
+  component: Loading
 };
 
 export default meta;
diff --git a/web/src/beta/components/Loading/index.tsx b/web/src/beta/components/Loading/index.tsx
index dc1b86bbc..3a88fbea8 100644
--- a/web/src/beta/components/Loading/index.tsx
+++ b/web/src/beta/components/Loading/index.tsx
@@ -21,7 +21,7 @@ const Loading: React.FC<Props> = ({
   portal,
   fixed,
   relative,
-  overlay,
+  overlay
 }) => {
   const theme = useTheme();
   const loading = (
diff --git a/web/src/beta/components/Modal/ModalFrame/index.tsx b/web/src/beta/components/Modal/ModalFrame/index.tsx
index 3e3288f73..2320a6930 100644
--- a/web/src/beta/components/Modal/ModalFrame/index.tsx
+++ b/web/src/beta/components/Modal/ModalFrame/index.tsx
@@ -20,19 +20,19 @@ const Modal: React.FC<Props> = ({
   isVisible,
   title,
   onClose,
-  children,
+  children
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   useClickAway(ref, () => onClose?.());
 
   const modalWidth = useMemo(
     () => (size === "sm" ? "416px" : size === "lg" ? "778px" : "572px"),
-    [size],
+    [size]
   );
 
   const state = useTransition(!!isVisible, 300, {
     mountOnEnter: true,
-    unmountOnExit: true,
+    unmountOnExit: true
   });
 
   const handleClose = useCallback(() => {
diff --git a/web/src/beta/components/Modal/index.stories.tsx b/web/src/beta/components/Modal/index.stories.tsx
index 086e814fe..b1c89fefc 100644
--- a/web/src/beta/components/Modal/index.stories.tsx
+++ b/web/src/beta/components/Modal/index.stories.tsx
@@ -7,7 +7,7 @@ import Text from "../Text";
 import Modal, { SidebarTab } from ".";
 
 const meta: Meta<typeof Modal> = {
-  component: Modal,
+  component: Modal
 };
 
 export default meta;
@@ -74,7 +74,7 @@ const sidebarTab1: SidebarTab = {
   label: "Tab1",
   content: TabContent,
   tabButton1: <Button text="Confirm" />,
-  tabButton2: <Button text="Cancel" />,
+  tabButton2: <Button text="Cancel" />
 };
 
 const sidebarTab2: SidebarTab = {
@@ -82,7 +82,7 @@ const sidebarTab2: SidebarTab = {
   label: "Tab2",
   content: TabContent2,
   tabButton1: <Button text="Yes" />,
-  tabButton2: <Button text="No" />,
+  tabButton2: <Button text="No" />
 };
 
 const sidebarTab3: SidebarTab = {
@@ -90,7 +90,7 @@ const sidebarTab3: SidebarTab = {
   label: "Tab3",
   content: TabContent3,
   tabButton1: <Button text="Ok" />,
-  tabButton2: <Button text="Cancel" />,
+  tabButton2: <Button text="Cancel" />
 };
 
 export const Small: Story = {
@@ -104,7 +104,7 @@ export const Small: Story = {
     >
       <ModalContent />
     </Modal>
-  ),
+  )
 };
 
 export const Medium: Story = {
@@ -118,7 +118,7 @@ export const Medium: Story = {
     >
       <ModalContent />
     </Modal>
-  ),
+  )
 };
 
 export const Large: Story = {
@@ -132,7 +132,7 @@ export const Large: Story = {
     >
       <ModalContent />
     </Modal>
-  ),
+  )
 };
 
 export const Sidebar: Story = {
@@ -143,5 +143,5 @@ export const Sidebar: Story = {
       title="Modal with sidebar"
       sidebarTabs={[sidebarTab1, sidebarTab2, sidebarTab3]}
     />
-  ),
+  )
 };
diff --git a/web/src/beta/components/Modal/index.tsx b/web/src/beta/components/Modal/index.tsx
index 403ef908f..568ea3d68 100644
--- a/web/src/beta/components/Modal/index.tsx
+++ b/web/src/beta/components/Modal/index.tsx
@@ -1,6 +1,6 @@
 import Wrapper from "@reearth/beta/components/Modal/ModalFrame";
 import useManageSwitchState, {
-  SwitchField,
+  SwitchField
 } from "@reearth/beta/hooks/useManageSwitchState/hooks";
 import { styled } from "@reearth/services/theme";
 import { ReactNode, useCallback, useState } from "react";
@@ -40,17 +40,17 @@ const Modal: React.FC<Props> = ({
   isContent,
   onClose,
   onTabChange,
-  sidebarTabs,
+  sidebarTabs
 }) => {
   const [tabsFields] = useState<SwitchField<SidebarTab>[]>(
     sidebarTabs?.map((tab, index) => ({
       active: index === 0,
-      ...tab,
-    })) || [],
+      ...tab
+    })) || []
   );
 
   const { handleActivate, fields: tabs } = useManageSwitchState({
-    fields: tabsFields,
+    fields: tabsFields
   });
 
   const handleTabChange = useCallback(
@@ -58,7 +58,7 @@ const Modal: React.FC<Props> = ({
       handleActivate(tabId);
       onTabChange?.(tabId);
     },
-    [handleActivate, onTabChange],
+    [handleActivate, onTabChange]
   );
 
   return (
diff --git a/web/src/beta/components/NotFound/index.stories.tsx b/web/src/beta/components/NotFound/index.stories.tsx
index d31272867..3afb79207 100644
--- a/web/src/beta/components/NotFound/index.stories.tsx
+++ b/web/src/beta/components/NotFound/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import NotFound from ".";
 
 export default {
-  component: NotFound,
+  component: NotFound
 } as Meta;
 
 export const Default = () => <NotFound />;
diff --git a/web/src/beta/components/NotFound/index.tsx b/web/src/beta/components/NotFound/index.tsx
index 6cc8da6a8..ee12ad4ee 100644
--- a/web/src/beta/components/NotFound/index.tsx
+++ b/web/src/beta/components/NotFound/index.tsx
@@ -13,7 +13,7 @@ type Props = {
 const NotFound: React.FC<Props> = ({
   customHeader,
   customMessage,
-  customType,
+  customType
 }) => {
   const t = useT();
 
diff --git a/web/src/beta/components/Popover/hooks.ts b/web/src/beta/components/Popover/hooks.ts
index 32ed62bb9..7793a48db 100644
--- a/web/src/beta/components/Popover/hooks.ts
+++ b/web/src/beta/components/Popover/hooks.ts
@@ -7,7 +7,7 @@ import {
   useDismiss,
   useFloating,
   useInteractions,
-  useRole,
+  useRole
 } from "@floating-ui/react";
 import { useState, useMemo } from "react";
 
@@ -20,7 +20,7 @@ export default function usePopover({
   offset: offsetProps,
   shift: shiftProps,
   open: controlledOpen,
-  onOpenChange: setControlledOpen,
+  onOpenChange: setControlledOpen
 }: PopoverOptions = {}) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
 
@@ -37,16 +37,16 @@ export default function usePopover({
       flip({
         crossAxis: placement.includes("-"),
         fallbackAxisSideDirection: "end",
-        padding: 4,
+        padding: 4
       }),
-      shift(shiftProps ?? { padding: 4 }),
-    ],
+      shift(shiftProps ?? { padding: 4 })
+    ]
   });
 
   const context = data.context;
 
   const click = useClick(context, {
-    enabled: controlledOpen == null,
+    enabled: controlledOpen == null
   });
   const dismiss = useDismiss(context);
   const role = useRole(context);
@@ -59,8 +59,8 @@ export default function usePopover({
       setOpen,
       ...interactions,
       ...data,
-      modal,
+      modal
     }),
-    [open, setOpen, interactions, data, modal],
+    [open, setOpen, interactions, data, modal]
   );
 }
diff --git a/web/src/beta/components/Popover/index.stories.tsx b/web/src/beta/components/Popover/index.stories.tsx
index 31ec49c1c..bc6d515ce 100644
--- a/web/src/beta/components/Popover/index.stories.tsx
+++ b/web/src/beta/components/Popover/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import * as Popover from "./";
 
 export default {
-  component: Popover.Provider,
+  component: Popover.Provider
 } as Meta;
 
 type Story = StoryObj<typeof Popover.Provider>;
@@ -38,8 +38,8 @@ export const Controlled: Story = {
     open: true,
     initialOpen: false,
     placement: "top",
-    modal: true,
-  },
+    modal: true
+  }
 };
 
 export const Uncontrolled: Story = {
@@ -72,8 +72,8 @@ export const Uncontrolled: Story = {
     offset: {
       mainAxis: 20,
       crossAxis: 300,
-      alignmentAxis: 0,
+      alignmentAxis: 0
     },
-    modal: true,
-  },
+    modal: true
+  }
 };
diff --git a/web/src/beta/components/Popover/index.tsx b/web/src/beta/components/Popover/index.tsx
index b713cd474..aa378bc6d 100644
--- a/web/src/beta/components/Popover/index.tsx
+++ b/web/src/beta/components/Popover/index.tsx
@@ -2,11 +2,11 @@ import {
   useMergeRefs,
   FloatingPortal,
   FloatingFocusManager,
-  useTransitionStyles,
+  useTransitionStyles
 } from "@floating-ui/react";
 import {
   PopoverContext,
-  usePopoverContext,
+  usePopoverContext
 } from "@reearth/beta/components/Popover/context";
 import { useTheme } from "@reearth/services/theme";
 import {
@@ -16,7 +16,7 @@ import {
   MutableRefObject,
   type ButtonHTMLAttributes,
   type HTMLProps,
-  type ReactNode,
+  type ReactNode
 } from "react";
 
 import usePopover from "./hooks";
@@ -49,7 +49,7 @@ export const Trigger = forwardRef<
   HTMLProps<HTMLElement> & TriggerProps
 >(function Trigger(
   { children, asChild = false, className, ...props },
-  propRef,
+  propRef
 ) {
   const context = usePopoverContext();
   const childrenRef = (children as any).ref;
@@ -63,8 +63,8 @@ export const Trigger = forwardRef<
         ref,
         ...props,
         ...children.props,
-        "data-state": context.open ? "open" : "closed",
-      }),
+        "data-state": context.open ? "open" : "closed"
+      })
     );
   }
 
@@ -92,7 +92,7 @@ export const Content = forwardRef<
   HTMLProps<HTMLDivElement> & ContentProps
 >(function Content(
   { style, className, attachToRoot = false, ...props },
-  propRef,
+  propRef
 ) {
   const { context: floatingContext, ...context } = usePopoverContext();
   const theme = useTheme();
@@ -100,8 +100,8 @@ export const Content = forwardRef<
   const { isMounted, styles: transitionStyles } = useTransitionStyles(
     floatingContext,
     {
-      duration: 50,
-    },
+      duration: 50
+    }
   );
 
   if (!isMounted) return null;
@@ -127,7 +127,7 @@ export const Content = forwardRef<
             ...context.floatingStyles,
             ...transitionStyles,
             ...style,
-            zIndex: theme.zIndexes.editor.popover,
+            zIndex: theme.zIndexes.editor.popover
           }}
           {...context.getFloatingProps(props)}
         >
diff --git a/web/src/beta/components/PopoverMenuContent/index.stories.tsx b/web/src/beta/components/PopoverMenuContent/index.stories.tsx
index e7e616af5..8d96a0bd4 100644
--- a/web/src/beta/components/PopoverMenuContent/index.stories.tsx
+++ b/web/src/beta/components/PopoverMenuContent/index.stories.tsx
@@ -8,9 +8,9 @@ const meta: Meta<typeof PopoverContent> = {
   argTypes: {
     size: {
       control: "radio",
-      options: ["sm", "md"],
-    },
-  },
+      options: ["sm", "md"]
+    }
+  }
 };
 
 export default meta;
@@ -26,27 +26,27 @@ export const Default: Story = {
         icon: "copy",
         name: "Name",
         onClick: action("onClickItem"),
-        isSelected: true,
+        isSelected: true
       },
       {
         icon: "pencilSimple",
         name: "NameNameNameNameNameNameName",
-        onClick: action("onClickItem"),
+        onClick: action("onClickItem")
       },
       {
         name: "NameNameNameNameNameNameName",
-        onClick: action("onClickItem"),
+        onClick: action("onClickItem")
       },
       {
         icon: "trash",
         name: "Name",
-        onClick: action("onClickItem"),
+        onClick: action("onClickItem")
       },
       {
         icon: "gearSix",
         name: "NameNameNameNameNameNameName",
-        onClick: action("onClickItem"),
-      },
-    ],
-  },
+        onClick: action("onClickItem")
+      }
+    ]
+  }
 };
diff --git a/web/src/beta/components/PopoverMenuContent/index.tsx b/web/src/beta/components/PopoverMenuContent/index.tsx
index fb9468082..0b7fd1822 100644
--- a/web/src/beta/components/PopoverMenuContent/index.tsx
+++ b/web/src/beta/components/PopoverMenuContent/index.tsx
@@ -22,7 +22,7 @@ const stylesBySize = {
       height: 28px;
       font-size: 12px;
       padding: 4px 12px;
-    `,
+    `
   },
   md: {
     iconSize: 16,
@@ -30,8 +30,8 @@ const stylesBySize = {
       height: 38px;
       font-size: 14px;
       padding: 8px 12px;
-    `,
-  },
+    `
+  }
 };
 
 const PopoverMenuContent: React.FC<Props> = ({ size, width, items }) => {
diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx
index 38e47fe01..092e49636 100644
--- a/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx
+++ b/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx
@@ -7,7 +7,7 @@ import RadioBox from ".";
 type Props = React.ComponentProps<typeof RadioBox>;
 
 const meta: Meta<typeof RadioBox> = {
-  component: RadioBox,
+  component: RadioBox
 };
 
 export default meta;
@@ -22,7 +22,7 @@ export const Default: Story = (args: Props) => {
       console.log(value);
       updateArgs({ value });
     },
-    [updateArgs],
+    [updateArgs]
   );
 
   return <RadioBox {...args} onClick={handleChange} />;
@@ -31,5 +31,5 @@ export const Default: Story = (args: Props) => {
 Default.args = {
   label: "test",
   selected: false,
-  keyValue: "test",
+  keyValue: "test"
 };
diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.tsx
index 7581b9a60..ad2a034bc 100644
--- a/web/src/beta/components/RadioGroup/RadioBox/index.tsx
+++ b/web/src/beta/components/RadioGroup/RadioBox/index.tsx
@@ -12,13 +12,13 @@ const RadioBox: React.FC<Props> = ({
   selected,
   keyValue,
   label,
-  onClick,
+  onClick
 }: Props) => {
   const handleRadioClick = useCallback(
     (value: string) => {
       onClick?.(value);
     },
-    [onClick],
+    [onClick]
   );
 
   return (
diff --git a/web/src/beta/components/RadioGroup/index.stories.tsx b/web/src/beta/components/RadioGroup/index.stories.tsx
index ffe3dfe66..7ec82d3d1 100644
--- a/web/src/beta/components/RadioGroup/index.stories.tsx
+++ b/web/src/beta/components/RadioGroup/index.stories.tsx
@@ -7,7 +7,7 @@ import RadioGroup from "./index";
 type Props = React.ComponentProps<typeof RadioGroup>;
 
 const meta: Meta<typeof RadioGroup> = {
-  component: RadioGroup,
+  component: RadioGroup
 };
 
 export default meta;
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof RadioGroup>;
 
 const options = [
   { label: "option1", keyValue: "Option 1" },
-  { label: "option2", keyValue: "Option 2" },
+  { label: "option2", keyValue: "Option 2" }
 ];
 
 export const VerticalRadioGroup: Story = (args: Props) => {
@@ -24,7 +24,7 @@ export const VerticalRadioGroup: Story = (args: Props) => {
 
   const handleChange = useCallback(
     (value: string) => updateArgs({ value }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -36,7 +36,7 @@ export const VerticalRadioGroup: Story = (args: Props) => {
 VerticalRadioGroup.args = {
   options: options,
   layout: "vertical",
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
 
 export const HorizontalRadioGroup: Story = (args: Props) => {
@@ -44,7 +44,7 @@ export const HorizontalRadioGroup: Story = (args: Props) => {
 
   const handleChange = useCallback(
     (value: string) => updateArgs({ value }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -56,5 +56,5 @@ export const HorizontalRadioGroup: Story = (args: Props) => {
 HorizontalRadioGroup.args = {
   options: options,
   layout: "horizontal",
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
diff --git a/web/src/beta/components/RadioGroup/index.tsx b/web/src/beta/components/RadioGroup/index.tsx
index 828415b6a..eab560cec 100644
--- a/web/src/beta/components/RadioGroup/index.tsx
+++ b/web/src/beta/components/RadioGroup/index.tsx
@@ -1,7 +1,7 @@
-import { memo, useCallback } from "react";
 
 import RadioBox from "@reearth/beta/components/RadioGroup/RadioBox";
 import { styled } from "@reearth/services/theme";
+import { memo, useCallback } from "react";
 
 export type Option = {
   label?: string;
@@ -19,14 +19,14 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
   options,
   layout = "horizontal",
   selectedValue,
-  onChange,
+  onChange
 }) => {
   const handleRadioChange = useCallback(
     (value: string) => {
       if (value === selectedValue) return;
       onChange?.(value);
     },
-    [onChange, selectedValue],
+    [onChange, selectedValue]
   );
 
   return (
diff --git a/web/src/beta/components/RangeSlider/index.stories.tsx b/web/src/beta/components/RangeSlider/index.stories.tsx
index b1d692d75..0628733c8 100644
--- a/web/src/beta/components/RangeSlider/index.stories.tsx
+++ b/web/src/beta/components/RangeSlider/index.stories.tsx
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 import RangeSlider, { Props } from ".";
 
 const meta: Meta<typeof RangeSlider> = {
-  component: RangeSlider,
+  component: RangeSlider
 };
 
 type Story = StoryObj<typeof RangeSlider>;
@@ -18,7 +18,7 @@ export const Default: Story = (args: Props) => {
 
   const handleChange = useCallback(
     (value: number[]) => updateArgs({ value: value }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -45,7 +45,7 @@ Default.args = {
   min: 0,
   max: 100,
   step: 1,
-  disabled: false,
+  disabled: false
 };
 
 const Wrapper = styled.div`
diff --git a/web/src/beta/components/RangeSlider/index.tsx b/web/src/beta/components/RangeSlider/index.tsx
index 498dd3185..d1414dcdd 100644
--- a/web/src/beta/components/RangeSlider/index.tsx
+++ b/web/src/beta/components/RangeSlider/index.tsx
@@ -14,7 +14,7 @@ export type Props = {
 const calculateStep = (
   min?: number,
   max?: number,
-  step?: number | null,
+  step?: number | null
 ): number => {
   if (step != undefined) {
     return step;
diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts
index 7c596fbc4..074457742 100644
--- a/web/src/beta/components/Resizable/hooks.ts
+++ b/web/src/beta/components/Resizable/hooks.ts
@@ -29,7 +29,7 @@ const getSize = (
   size: number,
   delta: number,
   minSize?: number,
-  maxSize?: number,
+  maxSize?: number
 ) => {
   let newSize = size + delta;
   if (minSize !== undefined && newSize < minSize) newSize = minSize;
@@ -43,7 +43,7 @@ export default (
   initialSize: number,
   minSize: number,
   maxSize?: number,
-  localStorageKey?: string,
+  localStorageKey?: string
 ) => {
   const getLocalStorageParsedState = useCallback((localStorageKey?: string) => {
     const savedState = localStorageKey && localStorage.getItem(localStorageKey);
@@ -77,7 +77,7 @@ export default (
 
   const onResizeStart = useCallback(
     (
-      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
     ) => {
       const position = getPositionFromEvent(e);
       if (!position) return;
@@ -86,7 +86,7 @@ export default (
       setIsResizing(true);
       setPosition(position);
     },
-    [size],
+    [size]
   );
 
   const onResize = useCallback(
@@ -122,8 +122,8 @@ export default (
       minSize,
       maxSize,
       minimized,
-      startingSize,
-    ],
+      startingSize
+    ]
   );
 
   const onResizeEnd = useCallback(() => {
@@ -135,7 +135,7 @@ export default (
     setDifference(0);
     const storedData = {
       size,
-      minimized,
+      minimized
     };
     if (localStorageKey) {
       setLocalStorageData(localStorageKey, storedData);
@@ -172,9 +172,9 @@ export default (
   const gutterProps = useMemo(
     () => ({
       onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => onResizeStart(e),
-      onTouchStart: (e: React.TouchEvent<HTMLDivElement>) => onResizeStart(e),
+      onTouchStart: (e: React.TouchEvent<HTMLDivElement>) => onResizeStart(e)
     }),
-    [onResizeStart],
+    [onResizeStart]
   );
 
   const handleResetSize = useCallback(() => {
@@ -183,7 +183,7 @@ export default (
     if (localStorageKey) {
       setLocalStorageData(localStorageKey, {
         size: initialSize,
-        minimized: false,
+        minimized: false
       });
     }
   }, [initialSize, localStorageKey]);
@@ -192,6 +192,6 @@ export default (
     size: size || initialSize,
     gutterProps,
     minimized,
-    handleResetSize,
+    handleResetSize
   };
 };
diff --git a/web/src/beta/components/Resizable/index.stories.tsx b/web/src/beta/components/Resizable/index.stories.tsx
index e24045981..5a033d9cd 100644
--- a/web/src/beta/components/Resizable/index.stories.tsx
+++ b/web/src/beta/components/Resizable/index.stories.tsx
@@ -5,7 +5,7 @@ import Resizable from ".";
 
 const Container: React.FC<{ children?: ReactNode; style?: CSSProperties }> = ({
   children,
-  style,
+  style
 }) => <div style={{ display: "flex", height: 400, ...style }}>{children}</div>;
 const Pane = <div style={{ flex: 1, background: "#ffffff" }} />;
 const Content = (
@@ -14,7 +14,7 @@ const Content = (
       width: "100%",
       height: "100%",
       background: "#ffffff",
-      color: "#000000",
+      color: "#000000"
     }}
   >
     content
@@ -22,7 +22,7 @@ const Content = (
 );
 
 export default {
-  component: Resizable,
+  component: Resizable
 } as Meta<ComponentProps<typeof Resizable>>;
 
 export const Vertical: StoryObj<typeof Resizable> = {
@@ -30,7 +30,7 @@ export const Vertical: StoryObj<typeof Resizable> = {
     direction: "vertical",
     gutter: "end",
     initialSize: 400,
-    minSize: 100,
+    minSize: 100
   },
   render: (args) => {
     return (
@@ -39,7 +39,7 @@ export const Vertical: StoryObj<typeof Resizable> = {
         {Pane}
       </Container>
     );
-  },
+  }
 };
 
 export const Horizontal: StoryObj<typeof Resizable> = {
@@ -47,7 +47,7 @@ export const Horizontal: StoryObj<typeof Resizable> = {
     direction: "horizontal",
     gutter: "end",
     initialSize: 350,
-    minSize: 200,
+    minSize: 200
   },
   render: (args) => {
     return (
@@ -56,5 +56,5 @@ export const Horizontal: StoryObj<typeof Resizable> = {
         {Pane}
       </Container>
     );
-  },
+  }
 };
diff --git a/web/src/beta/components/Resizable/index.tsx b/web/src/beta/components/Resizable/index.tsx
index 9e5da3995..fe2052197 100644
--- a/web/src/beta/components/Resizable/index.tsx
+++ b/web/src/beta/components/Resizable/index.tsx
@@ -21,7 +21,7 @@ const Resizable: React.FC<Props> = ({
   maxSize,
   initialSize,
   children,
-  localStorageKey,
+  localStorageKey
 }) => {
   const { size, gutterProps, minimized, handleResetSize } = useHooks(
     direction,
@@ -29,7 +29,7 @@ const Resizable: React.FC<Props> = ({
     initialSize,
     minSize,
     maxSize,
-    localStorageKey,
+    localStorageKey
   );
 
   const showTopGutter = direction === "horizontal" && gutter === "start";
diff --git a/web/src/beta/components/SettingsButtons/index.stories.tsx b/web/src/beta/components/SettingsButtons/index.stories.tsx
index a3ac8f8ae..e244aa37c 100644
--- a/web/src/beta/components/SettingsButtons/index.stories.tsx
+++ b/web/src/beta/components/SettingsButtons/index.stories.tsx
@@ -4,7 +4,7 @@ import React, { ReactNode } from "react";
 import SettingsButtons from ".";
 
 export default {
-  component: SettingsButtons,
+  component: SettingsButtons
 } as Meta;
 
 type Story = StoryObj<typeof SettingsButtons>;
@@ -16,7 +16,7 @@ const Wrapper: React.FC<{ children: ReactNode }> = ({ children }) => (
 export const Default: Story = {
   args: {
     title: "Audio",
-    icon: "audio",
+    icon: "audio"
   },
   render: (args) => {
     return (
@@ -24,5 +24,5 @@ export const Default: Story = {
         <SettingsButtons {...args} />
       </Wrapper>
     );
-  },
+  }
 };
diff --git a/web/src/beta/components/SettingsButtons/index.tsx b/web/src/beta/components/SettingsButtons/index.tsx
index 539bc83bc..87ed9c962 100644
--- a/web/src/beta/components/SettingsButtons/index.tsx
+++ b/web/src/beta/components/SettingsButtons/index.tsx
@@ -15,7 +15,7 @@ const SettingsButtons: React.FC<Props> = ({
   icon,
   onBlock,
   onEdit,
-  onSetting,
+  onSetting
 }) => {
   const theme = useTheme();
 
diff --git a/web/src/beta/components/SidePanelSectionField/index.stories.tsx b/web/src/beta/components/SidePanelSectionField/index.stories.tsx
index 899b13049..98d7da2fb 100644
--- a/web/src/beta/components/SidePanelSectionField/index.stories.tsx
+++ b/web/src/beta/components/SidePanelSectionField/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Component from ".";
 
 const meta: Meta<typeof Component> = {
-  component: Component,
+  component: Component
 };
 
 export default meta;
@@ -13,12 +13,12 @@ type Story = StoryObj<typeof Component>;
 export const Default: Story = {
   args: {
     title: "Title",
-    children: <p>Item</p>,
-  },
+    children: <p>Item</p>
+  }
 };
 
 export const Empty: Story = {
   args: {
-    title: "Title",
-  },
+    title: "Title"
+  }
 };
diff --git a/web/src/beta/components/SidePanelSectionField/index.tsx b/web/src/beta/components/SidePanelSectionField/index.tsx
index 3f45a1cf0..16bf82c03 100644
--- a/web/src/beta/components/SidePanelSectionField/index.tsx
+++ b/web/src/beta/components/SidePanelSectionField/index.tsx
@@ -1,7 +1,6 @@
 import { styled, useTheme } from "@reearth/services/theme";
 import { useState, ReactNode, useEffect } from "react";
 
-
 import Icon from "../Icon";
 import Text from "../Text";
 
@@ -20,7 +19,7 @@ const SidePanelSectionField: React.FC<{
   gap,
   children,
   storageKey,
-  border,
+  border
 }) => {
   const theme = useTheme();
   const [opened, setOpened] = useState<boolean>(() => {
diff --git a/web/src/beta/components/Slide/index.stories.tsx b/web/src/beta/components/Slide/index.stories.tsx
index 013f26bea..9d25453ae 100644
--- a/web/src/beta/components/Slide/index.stories.tsx
+++ b/web/src/beta/components/Slide/index.stories.tsx
@@ -26,8 +26,8 @@ export default {
     (Story) => {
       const [pos, setPos] = useState(0);
       return <Story pos={pos} setPos={setPos} />;
-    },
-  ],
+    }
+  ]
 } as Meta;
 
 export const Default = ({ pos, setPos }: DefaultProps) => {
diff --git a/web/src/beta/components/Slide/index.tsx b/web/src/beta/components/Slide/index.tsx
index 10df8f5f3..21f8e171a 100644
--- a/web/src/beta/components/Slide/index.tsx
+++ b/web/src/beta/components/Slide/index.tsx
@@ -14,7 +14,7 @@ const Slide: React.FC<Props> = ({ className, children, pos }) => {
         {React.Children.map(children, (child) =>
           React.isValidElement(child) ? (
             <Page key={child.key ?? undefined}>{child}</Page>
-          ) : null,
+          ) : null
         )}
       </Inner>
     </Wrapper>
diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
index 67a48562b..d29a12173 100644
--- a/web/src/beta/components/Slider/index.stories.tsx
+++ b/web/src/beta/components/Slider/index.stories.tsx
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 import Slider, { Props } from ".";
 
 const meta: Meta<typeof Slider> = {
-  component: Slider,
+  component: Slider
 };
 
 type Story = StoryObj<typeof Slider>;
@@ -18,7 +18,7 @@ export const Default: Story = (args: Props) => {
 
   const handleChange = useCallback(
     (value: number) => updateArgs({ value: value }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -45,7 +45,7 @@ Default.args = {
   min: 0,
   max: 100,
   step: 1,
-  disabled: false,
+  disabled: false
 };
 
 const Wrapper = styled.div`
diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
index 467a02df3..4331f2113 100644
--- a/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
+++ b/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import StorytellingPageSectionItem from ".";
 
 export default {
-  component: StorytellingPageSectionItem,
+  component: StorytellingPageSectionItem
 } as Meta;
 
 type Story = StoryObj<typeof StorytellingPageSectionItem>;
@@ -13,8 +13,8 @@ export const Default: Story = {
     icon: "square",
     title: "New Page",
     index: 1,
-    active: false,
-  },
+    active: false
+  }
 };
 
 export const LongText: Story = {
@@ -23,6 +23,6 @@ export const LongText: Story = {
     title:
       "gashjdjahasdasdasdasdasdjjashdjkashdjkahdjkhaskjdhasdasdasdasddfggjsdhasjkdhjkashdkjahskjdhakjshdkahskjdakjshdkjahsdkjhajksdhakjhsdkjhaksjhdakjhsdkjhakjsdhakjhsdkjsadasdasdahskdjhasdasdasdasdasdasdakjsdhksadasd",
     index: 1,
-    active: false,
-  },
+    active: false
+  }
 };
diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.tsx
index f53632b1d..a03004124 100644
--- a/web/src/beta/components/StorytellingPageSectionItem/index.tsx
+++ b/web/src/beta/components/StorytellingPageSectionItem/index.tsx
@@ -19,7 +19,7 @@ const StorytellingPageSectionItem: FC<Props> = ({
   index,
   active,
   onAction,
-  onClick,
+  onClick
 }) => {
   const theme = useTheme();
   return (
diff --git a/web/src/beta/components/SubTabButtonList/index.stories.tsx b/web/src/beta/components/SubTabButtonList/index.stories.tsx
index 2a0aef0aa..57a72e7ae 100644
--- a/web/src/beta/components/SubTabButtonList/index.stories.tsx
+++ b/web/src/beta/components/SubTabButtonList/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import SubTabButtonList from ".";
 
 const meta: Meta<typeof SubTabButtonList> = {
-  component: SubTabButtonList,
+  component: SubTabButtonList
 };
 
 export default meta;
@@ -15,7 +15,7 @@ export const Default: Story = {
     items: [
       { id: "1", name: "GIS", active: true },
       { id: "2", name: "Story", active: false },
-      { id: "3", name: "Web AR", active: false },
-    ],
-  },
+      { id: "3", name: "Web AR", active: false }
+    ]
+  }
 };
diff --git a/web/src/beta/components/SwitchButtonList/index.stories.tsx b/web/src/beta/components/SwitchButtonList/index.stories.tsx
index 7f06e303a..f2b0c019d 100644
--- a/web/src/beta/components/SwitchButtonList/index.stories.tsx
+++ b/web/src/beta/components/SwitchButtonList/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import SwitchButtonList from ".";
 
 export default {
-  component: SwitchButtonList,
+  component: SwitchButtonList
 } as Meta;
 
 type Story = StoryObj<typeof SwitchButtonList>;
@@ -13,7 +13,7 @@ export const Default: Story = {
     list: [
       { id: "1", text: "PC", active: true },
       { id: "2", text: "Ipad", active: false },
-      { id: "3", text: "Phone", active: false },
-    ],
-  },
+      { id: "3", text: "Phone", active: false }
+    ]
+  }
 };
diff --git a/web/src/beta/components/TabButton/index.stories.tsx b/web/src/beta/components/TabButton/index.stories.tsx
index 87b79dafb..535c2871e 100644
--- a/web/src/beta/components/TabButton/index.stories.tsx
+++ b/web/src/beta/components/TabButton/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import TabButton from ".";
 
 const meta: Meta<typeof TabButton> = {
-  component: TabButton,
+  component: TabButton
 };
 
 export default meta;
@@ -13,13 +13,13 @@ type Story = StoryObj<typeof TabButton>;
 export const Close: Story = {
   args: {
     label: "Editor",
-    selected: false,
-  },
+    selected: false
+  }
 };
 
 export const Open: Story = {
   args: {
     label: "Editor",
-    selected: true,
-  },
+    selected: true
+  }
 };
diff --git a/web/src/beta/components/TabMenu/index.stories.tsx b/web/src/beta/components/TabMenu/index.stories.tsx
index 9fa5da7fe..82b01ff21 100644
--- a/web/src/beta/components/TabMenu/index.stories.tsx
+++ b/web/src/beta/components/TabMenu/index.stories.tsx
@@ -9,7 +9,7 @@ import { ReactNode, CSSProperties } from "react";
 import TabMenu, { Props } from "./index";
 
 export default {
-  component: TabMenu,
+  component: TabMenu
 } as Meta;
 
 type Story = StoryObj<typeof TabMenu>;
@@ -29,14 +29,14 @@ const SampleComponent = () => {
             type: "Feature",
             geometry: {
               type: "Point",
-              coordinates: [125.6, 10.1],
+              coordinates: [125.6, 10.1]
             },
             properties: {
-              name: "Dinagat Islands",
-            },
+              name: "Dinagat Islands"
+            }
           },
           null,
-          2,
+          2
         )}
       </JSONTag>
     </div>
@@ -52,7 +52,7 @@ const JSONTag = styled.pre`
 
 const Container: React.FC<{ children?: ReactNode; style?: CSSProperties }> = ({
   children,
-  style,
+  style
 }) => (
   <div style={{ display: "flex", height: "100vh", ...style }}>{children}</div>
 );
@@ -65,7 +65,7 @@ const Pane = (
       color: "black",
       fontSize: 24,
       textAlign: "center",
-      padding: "25vh 5rem",
+      padding: "25vh 5rem"
     }}
   >
     {" "}
@@ -101,13 +101,13 @@ Default.args = {
       id: "tab1",
       name: "My infobox",
       icon: "infobox",
-      component: <SampleComponent />,
+      component: <SampleComponent />
     },
     {
       id: "tab2",
       icon: "marker",
-      component: <Text size="body">Tab 2. Can be any react component</Text>,
-    },
+      component: <Text size="body">Tab 2. Can be any react component</Text>
+    }
   ],
-  selectedTab: "tab1",
+  selectedTab: "tab1"
 };
diff --git a/web/src/beta/components/TabMenu/index.tsx b/web/src/beta/components/TabMenu/index.tsx
index ca0c80f51..f7f1f713a 100644
--- a/web/src/beta/components/TabMenu/index.tsx
+++ b/web/src/beta/components/TabMenu/index.tsx
@@ -27,7 +27,7 @@ const TabMenu: FC<Props> = ({
   selectedTab,
   scrollable,
   onSelectedTabChange,
-  menuAlignment,
+  menuAlignment
 }) => {
   const selectedTabItem = useMemo(() => {
     return tabs.find(({ id }) => id === selectedTab);
diff --git a/web/src/beta/components/Text/index.stories.tsx b/web/src/beta/components/Text/index.stories.tsx
index 2a7b890e5..27e86e240 100644
--- a/web/src/beta/components/Text/index.stories.tsx
+++ b/web/src/beta/components/Text/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Text from ".";
 
 const meta: Meta<typeof Text> = {
-  component: Text,
+  component: Text
 };
 
 export default meta;
@@ -21,7 +21,7 @@ export const Regular: Story = {
       <Text size="body">Body Regular</Text>
       <Text size="footnote">Footnote Regular</Text>={" "}
     </div>
-  ),
+  )
 };
 
 export const Medium: Story = {
@@ -49,7 +49,7 @@ export const Medium: Story = {
         Footnote Medium
       </Text>
     </div>
-  ),
+  )
 };
 
 export const Bold: Story = {
@@ -77,5 +77,5 @@ export const Bold: Story = {
         Footnote Bold
       </Text>
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/components/Text/index.tsx b/web/src/beta/components/Text/index.tsx
index 356b44204..523cc6cbc 100644
--- a/web/src/beta/components/Text/index.tsx
+++ b/web/src/beta/components/Text/index.tsx
@@ -3,7 +3,7 @@ import {
   FontWeight,
   typography,
   FontSize,
-  UniqueTraits,
+  UniqueTraits
 } from "@reearth/services/theme/reearthTheme/common/fonts";
 import { CSSProperties, ReactNode, useMemo } from "react";
 
@@ -39,7 +39,7 @@ const Text: React.FC<Props> = ({
   trait,
   otherProperties,
   onClick,
-  onDoubleClick,
+  onDoubleClick
 }) => {
   const theme = useTheme();
   const defaultColor = theme.content.main;
@@ -53,7 +53,7 @@ const Text: React.FC<Props> = ({
           ? typographyBySize[weight]
           : typographyBySize &&
             typographyBySize[size === "h1" ? "medium" : "regular"],
-    [trait, size, typographyBySize, weight],
+    [trait, size, typographyBySize, weight]
   );
 
   return Typography ? (
@@ -62,7 +62,7 @@ const Text: React.FC<Props> = ({
       style={{
         userSelect: "none",
         ...otherProperties,
-        color: customColor ? undefined : color || defaultColor,
+        color: customColor ? undefined : color || defaultColor
       }}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
diff --git a/web/src/beta/components/Toggle/index.stories.tsx b/web/src/beta/components/Toggle/index.stories.tsx
index 2064e892f..f835256d2 100644
--- a/web/src/beta/components/Toggle/index.stories.tsx
+++ b/web/src/beta/components/Toggle/index.stories.tsx
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 import Toggle, { Props } from ".";
 
 const meta: Meta<typeof Toggle> = {
-  component: Toggle,
+  component: Toggle
 };
 
 export default meta;
@@ -18,7 +18,7 @@ export const Default: Story = (args: Props) => {
 
   const handleChange = useCallback(
     (checked: boolean) => updateArgs({ checked: !checked }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -53,5 +53,5 @@ const Wrapper = styled.div`
 Default.args = {
   checked: true,
   disabled: false,
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
diff --git a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx b/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
index 1240e2489..d9ea0ca9a 100644
--- a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
+++ b/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
@@ -1,4 +1,3 @@
-
 import Button from "@reearth/beta/components/Button";
 import NumberInput from "@reearth/beta/components/fields/common/NumberInput";
 import Text from "@reearth/beta/components/Text";
@@ -25,25 +24,25 @@ const CapturePanel: React.FC<Props> = ({ camera, onSave, onClose }) => {
       [t("Current Position")]: [
         { id: "lat", description: t("Latitude"), value: camera?.lat },
         { id: "lng", description: t("Longitude"), value: camera?.lng },
-        { id: "height", description: t("Height"), value: camera?.height },
+        { id: "height", description: t("Height"), value: camera?.height }
       ],
       [t("Current Rotation")]: [
         {
           id: "heading",
           description: t("Heading"),
-          value: radiansToDegrees(camera?.heading ?? 0),
+          value: radiansToDegrees(camera?.heading ?? 0)
         },
         {
           id: "pitch",
           description: t("Pitch"),
-          value: radiansToDegrees(camera?.pitch ?? 0),
+          value: radiansToDegrees(camera?.pitch ?? 0)
         },
         {
           id: "roll",
           description: t("Roll"),
-          value: radiansToDegrees(camera?.roll ?? 0),
-        },
-      ],
+          value: radiansToDegrees(camera?.roll ?? 0)
+        }
+      ]
     };
   }, [t, camera]);
 
diff --git a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts b/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
index 82ceb9e71..ea3fec425 100644
--- a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
+++ b/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
@@ -7,7 +7,7 @@ import { saveFriendlyCamera, userFriendlyCamera } from "../utils";
 export default ({
   camera,
   onFlyTo,
-  onSave,
+  onSave
 }: {
   camera?: Camera;
   onFlyTo?: (c?: Camera) => void;
@@ -15,7 +15,7 @@ export default ({
 }) => {
   const t = useT();
   const [newCamera, setNewCamera] = useState<Camera | undefined>(
-    camera ? userFriendlyCamera(camera) : undefined,
+    camera ? userFriendlyCamera(camera) : undefined
   );
 
   useEffect(() => {
@@ -29,26 +29,26 @@ export default ({
       if (update === undefined || !newCamera) return;
       const updated: Camera = {
         ...newCamera,
-        [key]: update,
+        [key]: update
       };
       setNewCamera(updated);
       onFlyTo?.(saveFriendlyCamera(updated));
     },
-    [newCamera, onFlyTo],
+    [newCamera, onFlyTo]
   );
 
   const panelContent: Record<string, RowType> = useMemo(() => {
     return {
       [t("Location")]: [
         { id: "lat", description: t("Latitude") },
-        { id: "lng", description: t("Longitude") },
+        { id: "lng", description: t("Longitude") }
       ],
       [t("Height")]: [{ id: "height", unit: "km", description: t("Height") }],
       [t("Rotation")]: [
         { id: "heading", description: t("Heading") },
         { id: "pitch", description: t("Pitch") },
-        { id: "roll", description: t("Roll") },
-      ],
+        { id: "roll", description: t("Roll") }
+      ]
     };
   }, [t]);
 
@@ -57,7 +57,7 @@ export default ({
       if (value === newCamera?.[field]) return;
       handleFieldUpdate(field, value);
     },
-    [newCamera, handleFieldUpdate],
+    [newCamera, handleFieldUpdate]
   );
 
   const handleSave = useCallback(() => {
@@ -70,6 +70,6 @@ export default ({
     newCamera,
     panelContent,
     handleChange,
-    handleSave,
+    handleSave
   };
 };
diff --git a/web/src/beta/components/fields/CameraField/EditPanel/index.tsx b/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
index eec75e8ac..53be9d6f9 100644
--- a/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
+++ b/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
@@ -22,7 +22,7 @@ const EditPanel: React.FC<Props> = ({ camera, onSave, onFlyTo, onClose }) => {
   const { newCamera, panelContent, handleChange, handleSave } = useHooks({
     camera,
     onFlyTo,
-    onSave,
+    onSave
   });
 
   return (
diff --git a/web/src/beta/components/fields/CameraField/index.stories.tsx b/web/src/beta/components/fields/CameraField/index.stories.tsx
index d6175cf33..59319041d 100644
--- a/web/src/beta/components/fields/CameraField/index.stories.tsx
+++ b/web/src/beta/components/fields/CameraField/index.stories.tsx
@@ -7,7 +7,7 @@ import { useCallback } from "react";
 import CameraField, { type Props } from ".";
 
 const meta: Meta<typeof CameraField> = {
-  component: CameraField,
+  component: CameraField
 };
 
 export default meta;
@@ -19,12 +19,12 @@ export const Default: Story = (args: Props) => {
 
   const handleSave = useCallback(
     (value?: Camera) => updateArgs({ value: value }),
-    [updateArgs],
+    [updateArgs]
   );
 
   const handleFlyTo = useCallback(
     () => updateArgs({ value: undefined }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -53,7 +53,7 @@ Default.args = {
   value: undefined,
   disabled: false,
   onSave: (value?: Camera) => console.log("saved camera value: ", value),
-  onFlyTo: (target) => console.log("Fly to", target),
+  onFlyTo: (target) => console.log("Fly to", target)
 };
 
 const Wrapper = styled.div`
diff --git a/web/src/beta/components/fields/CameraField/index.tsx b/web/src/beta/components/fields/CameraField/index.tsx
index f7abacc47..344b701f0 100644
--- a/web/src/beta/components/fields/CameraField/index.tsx
+++ b/web/src/beta/components/fields/CameraField/index.tsx
@@ -32,7 +32,7 @@ const CameraField: React.FC<Props> = ({
   value,
   disabled,
   onSave,
-  onFlyTo,
+  onFlyTo
 }) => {
   const t = useT();
   const [open, setOpen] = useState<Panel>(undefined);
@@ -44,7 +44,7 @@ const CameraField: React.FC<Props> = ({
   const handleClick = useCallback(
     (panel: Panel) =>
       setOpen((current) => (current === panel ? undefined : panel)),
-    [],
+    []
   );
 
   const handleSave = useCallback(
@@ -52,7 +52,7 @@ const CameraField: React.FC<Props> = ({
       onSave(value);
       setOpen(undefined);
     },
-    [onSave],
+    [onSave]
   );
 
   const handleFlyto = useCallback(
@@ -62,7 +62,7 @@ const CameraField: React.FC<Props> = ({
         onFlyTo?.(dest);
       }
     },
-    [currentCamera, onFlyTo],
+    [currentCamera, onFlyTo]
   );
 
   const handleRemoveSetting = useCallback(() => {
diff --git a/web/src/beta/components/fields/CameraField/utils.ts b/web/src/beta/components/fields/CameraField/utils.ts
index e7cd0eefc..ae71db511 100644
--- a/web/src/beta/components/fields/CameraField/utils.ts
+++ b/web/src/beta/components/fields/CameraField/utils.ts
@@ -13,7 +13,7 @@ export const userFriendlyCamera = (camera: Camera) => ({
   heading: radiansToDegrees(camera.heading),
   pitch: radiansToDegrees(camera.pitch),
   roll: radiansToDegrees(camera.roll),
-  fov: camera?.fov,
+  fov: camera?.fov
 });
 
 export const saveFriendlyCamera = (camera: Camera) => ({
@@ -23,5 +23,5 @@ export const saveFriendlyCamera = (camera: Camera) => ({
   heading: degreesToRadians(camera.heading),
   pitch: degreesToRadians(camera.pitch),
   roll: degreesToRadians(camera.roll),
-  fov: camera?.fov,
+  fov: camera?.fov
 });
diff --git a/web/src/beta/components/fields/ColorField/hooks.ts b/web/src/beta/components/fields/ColorField/hooks.ts
index f37e65651..01a125d7e 100644
--- a/web/src/beta/components/fields/ColorField/hooks.ts
+++ b/web/src/beta/components/fields/ColorField/hooks.ts
@@ -28,7 +28,7 @@ export default ({ value, onChange }: Params) => {
       setColor(e.target.value);
       setRgba(tinycolor(e.target.value ?? colorState).toRgb());
     },
-    [colorState],
+    [colorState]
   );
 
   const handleRgbaInput = useCallback(
@@ -37,10 +37,10 @@ export default ({ value, onChange }: Params) => {
 
       handleChange({
         ...rgba,
-        [e.target.name]: e.target.value ? Number(e.target.value) : undefined,
+        [e.target.name]: e.target.value ? Number(e.target.value) : undefined
       });
     },
-    [handleChange, rgba],
+    [handleChange, rgba]
   );
 
   const handleClose = useCallback(() => {
@@ -89,7 +89,7 @@ export default ({ value, onChange }: Params) => {
         handleHexSave();
       }
     },
-    [handleHexSave],
+    [handleHexSave]
   );
 
   //UseEffects
@@ -117,7 +117,7 @@ export default ({ value, onChange }: Params) => {
         setOpen(false);
       }
     },
-    [open, value, colorState, handleSave, handleClose],
+    [open, value, colorState, handleSave, handleClose]
   );
 
   const handleClickOutsideRef = useRef(handleClickOutside);
@@ -152,6 +152,6 @@ export default ({ value, onChange }: Params) => {
     handleRgbaInput,
     handleHexInput,
     handleClick,
-    handleKeyPress,
+    handleKeyPress
   };
 };
diff --git a/web/src/beta/components/fields/ColorField/index.stories.tsx b/web/src/beta/components/fields/ColorField/index.stories.tsx
index 8ff395bf1..700e1e479 100644
--- a/web/src/beta/components/fields/ColorField/index.stories.tsx
+++ b/web/src/beta/components/fields/ColorField/index.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import ColorField from ".";
 
 const meta: Meta<typeof ColorField> = {
-  component: ColorField,
+  component: ColorField
 };
 
 export default meta;
@@ -12,5 +12,5 @@ export default meta;
 type Story = StoryObj<typeof ColorField>;
 
 export const ColorFieldInput: Story = {
-  render: () => <ColorField name="Color Field" onChange={action("onchange")} />,
+  render: () => <ColorField name="Color Field" onChange={action("onchange")} />
 };
diff --git a/web/src/beta/components/fields/ColorField/index.tsx b/web/src/beta/components/fields/ColorField/index.tsx
index a2426839d..2fa98dc2c 100644
--- a/web/src/beta/components/fields/ColorField/index.tsx
+++ b/web/src/beta/components/fields/ColorField/index.tsx
@@ -20,7 +20,7 @@ const ColorField: React.FC<Props> = ({
   description,
   value,
   onChange,
-  className,
+  className
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -38,7 +38,7 @@ const ColorField: React.FC<Props> = ({
     handleRgbaInput,
     handleHexInput,
     handleClick,
-    handleKeyPress,
+    handleKeyPress
   } = useHooks({ value, onChange });
 
   return (
diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts b/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
index 2298ae1de..205205f28 100644
--- a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
+++ b/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
@@ -18,7 +18,7 @@ export default ({ value, onChange, setDateTime }: Props) => {
   const [time, setTime] = useState("");
   const [selectedTimezone, setSelectedTimezone] = useState<TimezoneInfo>({
     offset: "+00:00",
-    timezone: "Africa/Abidjan",
+    timezone: "Africa/Abidjan"
   });
 
   const handleTimeChange = useCallback((newValue: string | undefined) => {
@@ -37,7 +37,7 @@ export default ({ value, onChange, setDateTime }: Props) => {
 
   const handleApplyChange = useCallback(() => {
     const selectedTimezoneInfo = offsetFromUTC.find(
-      (info) => info.timezone === selectedTimezone.timezone,
+      (info) => info.timezone === selectedTimezone.timezone
     );
     if (selectedTimezoneInfo) {
       const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
@@ -50,17 +50,17 @@ export default ({ value, onChange, setDateTime }: Props) => {
     date,
     time,
     setDateTime,
-    onChange,
+    onChange
   ]);
 
   const handleTimezoneSelect = useCallback(
     (newValue: string) => {
       const updatedTimezone = offsetFromUTC.find(
-        (info) => info.timezone === newValue,
+        (info) => info.timezone === newValue
       );
       setSelectedTimezone(updatedTimezone || selectedTimezone);
     },
-    [offsetFromUTC, selectedTimezone],
+    [offsetFromUTC, selectedTimezone]
   );
 
   useEffect(() => {
@@ -82,7 +82,7 @@ export default ({ value, onChange, setDateTime }: Props) => {
           info.offset ===
           (timeWithOffset.includes("-")
             ? `-${formattedTimezoneOffset}`
-            : `+${formattedTimezoneOffset}`),
+            : `+${formattedTimezoneOffset}`)
       );
       if (updatedTimezone) setSelectedTimezone(updatedTimezone);
     } else {
@@ -100,6 +100,6 @@ export default ({ value, onChange, setDateTime }: Props) => {
     handleTimeChange,
     onTimezoneSelect: handleTimezoneSelect,
     onDateChange: handleDateChange,
-    onDateTimeApply: handleApplyChange,
+    onDateTimeApply: handleApplyChange
   };
 };
diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx b/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
index 85901734a..50b267db9 100644
--- a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
+++ b/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
@@ -20,7 +20,7 @@ const EditPanel: React.FC<Props> = ({
   onChange,
   onClose,
   value,
-  setDateTime,
+  setDateTime
 }) => {
   const t = useT();
 
@@ -32,7 +32,7 @@ const EditPanel: React.FC<Props> = ({
     onDateChange,
     onTimezoneSelect,
     onDateTimeApply,
-    handleTimeChange,
+    handleTimeChange
   } = useHooks({ value, onChange, setDateTime });
 
   const isButtonDisabled = useMemo(() => {
@@ -62,7 +62,7 @@ const EditPanel: React.FC<Props> = ({
             value={selectedTimezone.timezone}
             options={offsetFromUTC.map((timezone) => ({
               key: timezone.timezone,
-              label: timezone?.offset,
+              label: timezone?.offset
             }))}
             onChange={onTimezoneSelect}
           />
diff --git a/web/src/beta/components/fields/DateTimeField/index.stories.tsx b/web/src/beta/components/fields/DateTimeField/index.stories.tsx
index ed3292200..dc7015db8 100644
--- a/web/src/beta/components/fields/DateTimeField/index.stories.tsx
+++ b/web/src/beta/components/fields/DateTimeField/index.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import DateTimeField from ".";
 
 const meta: Meta<typeof DateTimeField> = {
-  component: DateTimeField,
+  component: DateTimeField
 };
 
 export default meta;
@@ -14,5 +14,5 @@ type Story = StoryObj<typeof DateTimeField>;
 export const DateTimeFieldInput: Story = {
   render: () => (
     <DateTimeField name="Date Time Field" onChange={action("onchange")} />
-  ),
+  )
 };
diff --git a/web/src/beta/components/fields/DateTimeField/index.tsx b/web/src/beta/components/fields/DateTimeField/index.tsx
index 5c5e0e70b..44fcbd56e 100644
--- a/web/src/beta/components/fields/DateTimeField/index.tsx
+++ b/web/src/beta/components/fields/DateTimeField/index.tsx
@@ -29,7 +29,7 @@ const DateTimeField: React.FC<Props> = ({
   fieldName,
   onChange,
   onPopoverOpen,
-  setDisabledFields,
+  setDisabledFields
 }) => {
   const [open, setOpen] = useState(false);
   const t = useT();
diff --git a/web/src/beta/components/fields/ListField/index.stories.tsx b/web/src/beta/components/fields/ListField/index.stories.tsx
index d1fa0e953..6728a4c2b 100644
--- a/web/src/beta/components/fields/ListField/index.stories.tsx
+++ b/web/src/beta/components/fields/ListField/index.stories.tsx
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 import ListField, { Props } from ".";
 
 const meta: Meta<typeof ListField> = {
-  component: ListField,
+  component: ListField
 };
 
 export default meta;
@@ -23,9 +23,9 @@ export const Default: Story = (args: Props) => {
         ...args.items,
         {
           id: randomId,
-          value: `Item ${randomId}`,
-        },
-      ],
+          value: `Item ${randomId}`
+        }
+      ]
     });
   }, [updateArgs, args.items]);
 
@@ -33,7 +33,7 @@ export const Default: Story = (args: Props) => {
     (key: string) => {
       updateArgs({ items: args.items.filter(({ id }) => id != key) });
     },
-    [updateArgs, args.items],
+    [updateArgs, args.items]
   );
 
   const onItemDrop = useCallback(
@@ -41,17 +41,17 @@ export const Default: Story = (args: Props) => {
       const items = [...args.items];
       items.splice(
         items.findIndex((x) => x.id === item.id),
-        1,
+        1
       );
       items.splice(index, 0, item);
       updateArgs({ items });
     },
-    [updateArgs, args.items],
+    [updateArgs, args.items]
   );
 
   const onSelect = useCallback(
     (id: string) => updateArgs({ selected: id }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -85,27 +85,27 @@ Default.args = {
   items: [
     {
       id: "w3tlwi",
-      value: "Item w3tlwi",
+      value: "Item w3tlwi"
     },
     {
       id: "77eg5",
-      value: "Item 77eg5",
+      value: "Item 77eg5"
     },
     {
       id: "7p218",
-      value: "Item 7p218",
+      value: "Item 7p218"
     },
     {
       id: "xquyo",
-      value: "Item xquyo",
+      value: "Item xquyo"
     },
     {
       id: "2mewj",
-      value: "Item 2mewj",
+      value: "Item 2mewj"
     },
     {
       id: "d2gmu",
-      value: "Item d2gmu",
-    },
-  ],
+      value: "Item d2gmu"
+    }
+  ]
 };
diff --git a/web/src/beta/components/fields/ListField/index.tsx b/web/src/beta/components/fields/ListField/index.tsx
index 99918ae94..b2bda9e83 100644
--- a/web/src/beta/components/fields/ListField/index.tsx
+++ b/web/src/beta/components/fields/ListField/index.tsx
@@ -1,6 +1,6 @@
 import Button from "@reearth/beta/components/Button";
 import DragAndDropList, {
-  Props as DragAndDropProps,
+  Props as DragAndDropProps
 } from "@reearth/beta/components/DragAndDropList";
 import Property from "@reearth/beta/components/fields";
 import Text from "@reearth/beta/components/Text";
@@ -35,7 +35,7 @@ const ListField: React.FC<Props> = ({
   onItemDrop,
   onSelect,
   selected,
-  atLeastOneItem,
+  atLeastOneItem
 }: Props) => {
   const t = useT();
 
diff --git a/web/src/beta/components/fields/LocationField/index.stories.tsx b/web/src/beta/components/fields/LocationField/index.stories.tsx
index 10a6a6736..f84a8e7b6 100644
--- a/web/src/beta/components/fields/LocationField/index.stories.tsx
+++ b/web/src/beta/components/fields/LocationField/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import LocationField from ".";
 
 const meta: Meta<typeof LocationField> = {
-  component: LocationField,
+  component: LocationField
 };
 
 export default meta;
@@ -15,6 +15,6 @@ export const Sample: Story = {
     name: "Location Field",
     description: "Location field description",
     value: { lat: 87.43, lng: 107.53 },
-    onChange: () => console.log("clicked"),
-  },
+    onChange: () => console.log("clicked")
+  }
 };
diff --git a/web/src/beta/components/fields/LocationField/index.tsx b/web/src/beta/components/fields/LocationField/index.tsx
index 0c268b2d7..2f335a8a9 100644
--- a/web/src/beta/components/fields/LocationField/index.tsx
+++ b/web/src/beta/components/fields/LocationField/index.tsx
@@ -17,7 +17,7 @@ const LocationField: React.FC<Props> = ({
   name,
   description,
   value,
-  onChange,
+  onChange
 }) => {
   const t = useT();
   const [location, setLocation] = useState<LatLng>(value || { lat: 0, lng: 0 });
@@ -28,11 +28,11 @@ const LocationField: React.FC<Props> = ({
 
       setLocation((prevLocation) => ({
         ...prevLocation,
-        [coordination === "Latitude" ? "lat" : "lng"]: newValue,
+        [coordination === "Latitude" ? "lat" : "lng"]: newValue
       }));
       onChange?.(location);
     },
-    [location, onChange],
+    [location, onChange]
   );
 
   return (
diff --git a/web/src/beta/components/fields/NumberField/index.stories.tsx b/web/src/beta/components/fields/NumberField/index.stories.tsx
index 1bb14affd..c4cef01d8 100644
--- a/web/src/beta/components/fields/NumberField/index.stories.tsx
+++ b/web/src/beta/components/fields/NumberField/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import NumberField, { Props } from ".";
 
 const meta: Meta<Props> = {
-  component: NumberField,
+  component: NumberField
 };
 
 export default meta;
@@ -15,8 +15,8 @@ export const Default: Story = {
     description: "The Number field",
     value: 42,
     inputDescription: "Value",
-    suffix: "px",
-  },
+    suffix: "px"
+  }
 };
 
 export const Disabled: Story = {
@@ -26,8 +26,8 @@ export const Disabled: Story = {
     value: 15,
     inputDescription: "Disabled",
     suffix: "px",
-    disabled: true,
-  },
+    disabled: true
+  }
 };
 
 export const Range: Story = {
@@ -38,8 +38,8 @@ export const Range: Story = {
     inputDescription: "Range",
     suffix: "px",
     min: 4,
-    max: 100,
-  },
+    max: 100
+  }
 };
 
 export const NoValue: Story = {
@@ -47,8 +47,8 @@ export const NoValue: Story = {
     name: "Number Field",
     description: "The Number field",
     inputDescription: "No Value",
-    suffix: "px",
-  },
+    suffix: "px"
+  }
 };
 
 export const WithMinValue: Story = {
@@ -58,8 +58,8 @@ export const WithMinValue: Story = {
     value: 5,
     inputDescription: "With Min Value",
     suffix: "px",
-    min: 0,
-  },
+    min: 0
+  }
 };
 
 export const WithMaxValue: Story = {
@@ -69,8 +69,8 @@ export const WithMaxValue: Story = {
     value: 95,
     inputDescription: "With Max Value",
     suffix: "px",
-    max: 100,
-  },
+    max: 100
+  }
 };
 
 export const Editable: Story = {
@@ -79,6 +79,6 @@ export const Editable: Story = {
     description: "The Number field",
     value: 25,
     inputDescription: "Editable",
-    suffix: "px",
-  },
+    suffix: "px"
+  }
 };
diff --git a/web/src/beta/components/fields/NumberField/index.tsx b/web/src/beta/components/fields/NumberField/index.tsx
index 3f83b292d..419ae64ec 100644
--- a/web/src/beta/components/fields/NumberField/index.tsx
+++ b/web/src/beta/components/fields/NumberField/index.tsx
@@ -22,7 +22,7 @@ const NumberField: React.FC<Props> = ({
   suffix,
   inputDescription,
   disabled,
-  onChange,
+  onChange
 }) => {
   return (
     <Property name={name} description={description}>
diff --git a/web/src/beta/components/fields/Property/PropertyField/hooks.ts b/web/src/beta/components/fields/Property/PropertyField/hooks.ts
index 968c54a2b..e7408bab6 100644
--- a/web/src/beta/components/fields/Property/PropertyField/hooks.ts
+++ b/web/src/beta/components/fields/Property/PropertyField/hooks.ts
@@ -7,7 +7,7 @@ export default (propertyId: string, schemaGroup: string) => {
     useUpdatePropertyValue,
     useAddPropertyItem,
     useRemovePropertyItem,
-    useMovePropertyItem,
+    useMovePropertyItem
   } = usePropertyFetcher();
 
   const handlePropertyValueUpdate = useCallback(
@@ -20,11 +20,11 @@ export default (propertyId: string, schemaGroup: string) => {
           fieldId,
           "en",
           v,
-          vt,
+          vt
         );
       };
     },
-    [propertyId, schemaGroup, useUpdatePropertyValue],
+    [propertyId, schemaGroup, useUpdatePropertyValue]
   );
 
   const handleAddPropertyItem = useCallback(() => {
@@ -35,20 +35,20 @@ export default (propertyId: string, schemaGroup: string) => {
     (itemId: string) => {
       return useRemovePropertyItem(propertyId, schemaGroup, itemId);
     },
-    [propertyId, schemaGroup, useRemovePropertyItem],
+    [propertyId, schemaGroup, useRemovePropertyItem]
   );
 
   const handleMovePropertyItem = useCallback(
     ({ id }: { id: string }, index: number) => {
       return useMovePropertyItem(propertyId, schemaGroup, id, index);
     },
-    [propertyId, schemaGroup, useMovePropertyItem],
+    [propertyId, schemaGroup, useMovePropertyItem]
   );
 
   return {
     handlePropertyValueUpdate,
     handleAddPropertyItem,
     handleRemovePropertyItem,
-    handleMovePropertyItem,
+    handleMovePropertyItem
   };
 };
diff --git a/web/src/beta/components/fields/Property/PropertyField/index.tsx b/web/src/beta/components/fields/Property/PropertyField/index.tsx
index 16d21bc75..78e5d2b31 100644
--- a/web/src/beta/components/fields/Property/PropertyField/index.tsx
+++ b/web/src/beta/components/fields/Property/PropertyField/index.tsx
@@ -34,19 +34,19 @@ const PropertyField: React.FC<Props> = ({
   field,
   schemaGroup,
   schema,
-  onFlyTo,
+  onFlyTo
 }) => {
   const { handlePropertyValueUpdate } = useHooks(propertyId, schemaGroup);
 
   const value = useMemo(
     () => field?.mergedValue ?? field?.value ?? schema.defaultValue,
-    [field?.mergedValue, field?.value, schema.defaultValue],
+    [field?.mergedValue, field?.value, schema.defaultValue]
   );
 
   const handleChange = handlePropertyValueUpdate(
     schema.id,
     schema.type,
-    itemId,
+    itemId
   );
   return (
     <>
diff --git a/web/src/beta/components/fields/Property/PropertyItem/index.tsx b/web/src/beta/components/fields/Property/PropertyItem/index.tsx
index 17d7baa97..b014b3296 100644
--- a/web/src/beta/components/fields/Property/PropertyItem/index.tsx
+++ b/web/src/beta/components/fields/Property/PropertyItem/index.tsx
@@ -3,7 +3,7 @@ import { FlyTo } from "@reearth/core";
 import {
   Group,
   GroupListItem,
-  Item,
+  Item
 } from "@reearth/services/api/propertyApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { useMemo, useState } from "react";
@@ -30,7 +30,7 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
 
   const groups = useMemo<(GroupListItem | Group)[]>(
     () => (item && "items" in item ? item.items : item ? [item] : []),
-    [item],
+    [item]
   );
 
   const selectedItem = isList
@@ -47,7 +47,7 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
             ? i.fields.find((f) => f.id === item.representativeField)
             : undefined;
           const nameSchemaField = item?.schemaFields?.find(
-            (sf) => sf.id === item.representativeField,
+            (sf) => sf.id === item.representativeField
           );
 
           const value =
@@ -62,11 +62,11 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
           return {
             id: i.id,
             title: (!layerMode ? title : undefined) ?? t("Settings"),
-            layerId: layerMode ? title : undefined,
+            layerId: layerMode ? title : undefined
           };
         })
         .filter((g): g is ListItem => !!g),
-    [groups, layerMode, item, t],
+    [groups, layerMode, item, t]
   );
   const schemaFields = useMemo(
     () =>
@@ -86,11 +86,11 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
             return {
               schemaField: f,
               field,
-              hidden: f.only && (!condv || condv !== f.only.value),
+              hidden: f.only && (!condv || condv !== f.only.value)
             };
           })
         : [],
-    [item?.schemaFields, selectedItem],
+    [item?.schemaFields, selectedItem]
   );
 
   return (
@@ -133,7 +133,7 @@ const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
 export default PropertyItem;
 
 const valueToString = (
-  v: ValueTypes[ValueType] | undefined,
+  v: ValueTypes[ValueType] | undefined
 ): string | undefined => {
   if (typeof v === "string" || typeof v === "number") {
     return v.toString();
diff --git a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx b/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
index 4bd92e966..ada57c3cf 100644
--- a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
+++ b/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 import ListField, { Props } from ".";
 
 const meta: Meta<typeof ListField> = {
-  component: ListField,
+  component: ListField
 };
 
 export default meta;
@@ -18,7 +18,7 @@ export const Default: Story = (args: Props) => {
 
   const onSelect = useCallback(
     (id: string) => updateArgs({ selected: id }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -46,27 +46,27 @@ Default.args = {
   items: [
     {
       id: "w3tlwi",
-      title: "Item w3tlwi",
+      title: "Item w3tlwi"
     },
     {
       id: "77eg5",
-      title: "Item 77eg5",
+      title: "Item 77eg5"
     },
     {
       id: "7p218",
-      title: "Item 7p218",
+      title: "Item 7p218"
     },
     {
       id: "xquyo",
-      title: "Item xquyo",
+      title: "Item xquyo"
     },
     {
       id: "2mewj",
-      title: "Item 2mewj",
+      title: "Item 2mewj"
     },
     {
       id: "d2gmu",
-      title: "Item d2gmu",
-    },
-  ],
+      title: "Item d2gmu"
+    }
+  ]
 };
diff --git a/web/src/beta/components/fields/Property/PropertyList/index.tsx b/web/src/beta/components/fields/Property/PropertyList/index.tsx
index 8aea23ee8..e66d9f710 100644
--- a/web/src/beta/components/fields/Property/PropertyList/index.tsx
+++ b/web/src/beta/components/fields/Property/PropertyList/index.tsx
@@ -34,14 +34,14 @@ const PropertyList: React.FC<Props> = ({
   schemaGroup,
   selected,
   atLeastOneItem,
-  onSelect,
+  onSelect
 }: Props) => {
   const t = useT();
 
   const {
     handleAddPropertyItem,
     handleRemovePropertyItem,
-    handleMovePropertyItem,
+    handleMovePropertyItem
   } = useHooks(propertyId, schemaGroup);
 
   const deleteItem = useCallback(() => {
diff --git a/web/src/beta/components/fields/Property/hooks.ts b/web/src/beta/components/fields/Property/hooks.ts
index 968c54a2b..e7408bab6 100644
--- a/web/src/beta/components/fields/Property/hooks.ts
+++ b/web/src/beta/components/fields/Property/hooks.ts
@@ -7,7 +7,7 @@ export default (propertyId: string, schemaGroup: string) => {
     useUpdatePropertyValue,
     useAddPropertyItem,
     useRemovePropertyItem,
-    useMovePropertyItem,
+    useMovePropertyItem
   } = usePropertyFetcher();
 
   const handlePropertyValueUpdate = useCallback(
@@ -20,11 +20,11 @@ export default (propertyId: string, schemaGroup: string) => {
           fieldId,
           "en",
           v,
-          vt,
+          vt
         );
       };
     },
-    [propertyId, schemaGroup, useUpdatePropertyValue],
+    [propertyId, schemaGroup, useUpdatePropertyValue]
   );
 
   const handleAddPropertyItem = useCallback(() => {
@@ -35,20 +35,20 @@ export default (propertyId: string, schemaGroup: string) => {
     (itemId: string) => {
       return useRemovePropertyItem(propertyId, schemaGroup, itemId);
     },
-    [propertyId, schemaGroup, useRemovePropertyItem],
+    [propertyId, schemaGroup, useRemovePropertyItem]
   );
 
   const handleMovePropertyItem = useCallback(
     ({ id }: { id: string }, index: number) => {
       return useMovePropertyItem(propertyId, schemaGroup, id, index);
     },
-    [propertyId, schemaGroup, useMovePropertyItem],
+    [propertyId, schemaGroup, useMovePropertyItem]
   );
 
   return {
     handlePropertyValueUpdate,
     handleAddPropertyItem,
     handleRemovePropertyItem,
-    handleMovePropertyItem,
+    handleMovePropertyItem
   };
 };
diff --git a/web/src/beta/components/fields/RangeField/index.stories.tsx b/web/src/beta/components/fields/RangeField/index.stories.tsx
index 0403b3706..6bc4387e2 100644
--- a/web/src/beta/components/fields/RangeField/index.stories.tsx
+++ b/web/src/beta/components/fields/RangeField/index.stories.tsx
@@ -1,13 +1,13 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
 
 import RangeField, { Props } from ".";
 
 const meta: Meta<typeof RangeField> = {
-  component: RangeField,
+  component: RangeField
 };
 
 export default meta;
@@ -21,7 +21,7 @@ export const Default: Story = (args: Props) => {
     (value: number[]) => {
       updateArgs({ value: value });
     },
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -58,5 +58,5 @@ Default.args = {
   max: 100,
   step: 1,
   disabled: false,
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
diff --git a/web/src/beta/components/fields/RangeField/index.tsx b/web/src/beta/components/fields/RangeField/index.tsx
index 952966dea..7b8175015 100644
--- a/web/src/beta/components/fields/RangeField/index.tsx
+++ b/web/src/beta/components/fields/RangeField/index.tsx
@@ -1,6 +1,6 @@
 import Property from "@reearth/beta/components/fields";
 import RangeSlider, {
-  Props as RangeProps,
+  Props as RangeProps
 } from "@reearth/beta/components/RangeSlider";
 import { useCallback, useEffect, useState } from "react";
 
@@ -17,14 +17,14 @@ const RangeField: React.FC<Props> = ({
   ...args
 }: Props) => {
   const [internalState, setInternalState] = useState<number[] | undefined>(
-    value,
+    value
   );
 
   const handleChange = useCallback(
     (value: number[]) => {
       setInternalState(value);
     },
-    [setInternalState],
+    [setInternalState]
   );
 
   useEffect(() => {
diff --git a/web/src/beta/components/fields/SelectField/index.stories.tsx b/web/src/beta/components/fields/SelectField/index.stories.tsx
index cfeb83b4d..f41dd27b1 100644
--- a/web/src/beta/components/fields/SelectField/index.stories.tsx
+++ b/web/src/beta/components/fields/SelectField/index.stories.tsx
@@ -1,13 +1,13 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
 
 import SelectField, { SingleSelectProps, MultiSelectProps } from ".";
 
 const meta: Meta<typeof SelectField> = {
-  component: SelectField,
+  component: SelectField
 };
 
 export default meta;
@@ -21,7 +21,7 @@ export const Default: Story = (args: SingleSelectProps) => {
     (value: string) => {
       updateArgs({ value: value });
     },
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -57,7 +57,7 @@ export const MultiSelect: Story = (args: MultiSelectProps) => {
     (value: string[] | undefined) => {
       updateArgs({ value: value });
     },
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -103,12 +103,12 @@ Default.args = {
   options: [
     {
       label: "item 1 akas bakas moti kiran kapoor takhat buland biba kaur",
-      key: "item_1",
+      key: "item_1"
     },
     { label: "item 2", key: "item_2" },
-    { label: "item 3", key: "item_3" },
+    { label: "item 3", key: "item_3" }
   ],
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
 
 MultiSelect.args = {
@@ -119,15 +119,15 @@ MultiSelect.args = {
   options: [
     {
       label: "item 1",
-      key: "item_1",
+      key: "item_1"
     },
     { label: "item 2", key: "item_2" },
     { label: "item 3", key: "item_3" },
     { label: "item 4", key: "item_4" },
     { label: "item 5", key: "item_5" },
     { label: "item 6", key: "item_6" },
-    { label: "item 7", key: "item_7" },
+    { label: "item 7", key: "item_7" }
   ],
   multiSelect: true,
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
diff --git a/web/src/beta/components/fields/SelectField/index.tsx b/web/src/beta/components/fields/SelectField/index.tsx
index d8f62ccdb..7346e88c0 100644
--- a/web/src/beta/components/fields/SelectField/index.tsx
+++ b/web/src/beta/components/fields/SelectField/index.tsx
@@ -46,7 +46,7 @@ const SelectField: React.FC<Props> = ({
   disabled = false,
   name,
   description,
-  attachToRoot,
+  attachToRoot
 }) => {
   const t = useT();
 
@@ -54,7 +54,7 @@ const SelectField: React.FC<Props> = ({
 
   const handlePopOver = useCallback(
     () => !disabled && setOpen(!open),
-    [open, disabled],
+    [open, disabled]
   );
 
   const handleClick = useCallback(
@@ -79,7 +79,7 @@ const SelectField: React.FC<Props> = ({
       if (key != value) onChange(key);
       return;
     },
-    [setOpen, onChange, value, multiSelect],
+    [setOpen, onChange, value, multiSelect]
   );
 
   const selected = useMemo(() => {
@@ -87,7 +87,7 @@ const SelectField: React.FC<Props> = ({
       ? Array.isArray(value)
         ? value.map((key) => ({
             key,
-            label: options?.find((x) => x.key === key)?.label,
+            label: options?.find((x) => x.key === key)?.label
           }))
         : options?.find((x) => x.key === value)
       : undefined;
@@ -101,7 +101,7 @@ const SelectField: React.FC<Props> = ({
           : value === key
         : false;
     },
-    [value],
+    [value]
   );
 
   return (
diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
index 249a2cd54..68a1ba593 100644
--- a/web/src/beta/components/fields/SliderField/index.stories.tsx
+++ b/web/src/beta/components/fields/SliderField/index.stories.tsx
@@ -1,13 +1,13 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
 
 import SliderField, { Props } from ".";
 
 const meta: Meta<typeof SliderField> = {
-  component: SliderField,
+  component: SliderField
 };
 
 export default meta;
@@ -21,7 +21,7 @@ export const Default: Story = (args: Props) => {
     (value: number) => {
       updateArgs({ value: value });
     },
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -67,5 +67,5 @@ Default.args = {
   max: 100,
   step: 1,
   disabled: false,
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
diff --git a/web/src/beta/components/fields/SliderField/index.tsx b/web/src/beta/components/fields/SliderField/index.tsx
index 35e174039..4897c7f35 100644
--- a/web/src/beta/components/fields/SliderField/index.tsx
+++ b/web/src/beta/components/fields/SliderField/index.tsx
@@ -20,7 +20,7 @@ const SliderField: React.FC<Props> = ({
     (value: number) => {
       setInternalState(value);
     },
-    [setInternalState],
+    [setInternalState]
   );
 
   useEffect(() => {
diff --git a/web/src/beta/components/fields/SpacingInput/index.stories.tsx b/web/src/beta/components/fields/SpacingInput/index.stories.tsx
index 40d16d6a5..92475fa71 100644
--- a/web/src/beta/components/fields/SpacingInput/index.stories.tsx
+++ b/web/src/beta/components/fields/SpacingInput/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react";
 import SpacingInput from "./index";
 
 export default {
-  component: SpacingInput,
+  component: SpacingInput
 } as Meta;
 
 const Template: Story = (args) => <SpacingInput {...args} />;
@@ -11,7 +11,7 @@ const Template: Story = (args) => <SpacingInput {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   name: "Padding",
-  description: "Adjust the padding values",
+  description: "Adjust the padding values"
 };
 
 export const WithValues = Template.bind({});
@@ -22,6 +22,6 @@ WithValues.args = {
     top: "10",
     left: "20",
     right: "30",
-    bottom: "40",
-  },
+    bottom: "40"
+  }
 };
diff --git a/web/src/beta/components/fields/SpacingInput/index.tsx b/web/src/beta/components/fields/SpacingInput/index.tsx
index 47aa54c9c..8fdd1f0fd 100644
--- a/web/src/beta/components/fields/SpacingInput/index.tsx
+++ b/web/src/beta/components/fields/SpacingInput/index.tsx
@@ -30,18 +30,18 @@ const SpacingInput: React.FC<Props> = ({
   value,
   min,
   max,
-  onChange,
+  onChange
 }) => {
   const [spacingValues, setSpacingValues] = useState<SpacingValues>(
-    value || { top: 0, left: 0, right: 0, bottom: 0 },
+    value || { top: 0, left: 0, right: 0, bottom: 0 }
   );
 
   const memoizedSpacingValues = useMemo(
     () =>
       SPACING_POSITIONS.map((position) =>
-        getSpacingPosition(spacingValues, position as Position),
+        getSpacingPosition(spacingValues, position as Position)
       ),
-    [spacingValues],
+    [spacingValues]
   );
 
   const handleInputChange = (position: Position, newValue?: number) => {
@@ -97,7 +97,7 @@ const SpacingField = styled(NumberInput)<{ position: string }>`
 
 function getSpacingPosition(
   spacingValue: SpacingValues,
-  position: Position,
+  position: Position
 ): number {
   return spacingValue[position];
 }
diff --git a/web/src/beta/components/fields/TextAreaField/index.stories.tsx b/web/src/beta/components/fields/TextAreaField/index.stories.tsx
index afefe8b2f..b14168651 100644
--- a/web/src/beta/components/fields/TextAreaField/index.stories.tsx
+++ b/web/src/beta/components/fields/TextAreaField/index.stories.tsx
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 import TextAreaField, { Props } from ".";
 
 const meta: Meta<typeof TextAreaField> = {
-  component: TextAreaField,
+  component: TextAreaField
 };
 
 export default meta;
@@ -18,7 +18,7 @@ export const Default: Story = (args: Props) => {
 
   const handleChange = useCallback(
     (value: string) => updateArgs({ value: value }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -61,5 +61,5 @@ Default.args = {
   description: "Description around",
   disabled: false,
   value: undefined,
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
diff --git a/web/src/beta/components/fields/TextAreaField/index.tsx b/web/src/beta/components/fields/TextAreaField/index.tsx
index 22180cc05..e0dffd39f 100644
--- a/web/src/beta/components/fields/TextAreaField/index.tsx
+++ b/web/src/beta/components/fields/TextAreaField/index.tsx
@@ -7,7 +7,7 @@ import {
   useRef,
   useMemo,
   useState,
-  useEffect,
+  useEffect
 } from "react";
 
 import Property from "..";
@@ -31,7 +31,7 @@ const TextAreaField: React.FC<Props> = ({
   placeholder,
   minHeight = 0,
   disabled,
-  debounceBy = 1000,
+  debounceBy = 1000
 }) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const t = useT();
@@ -40,7 +40,7 @@ const TextAreaField: React.FC<Props> = ({
 
   const debouncedHandleTextUpdate = useMemo(
     () => debounce(onChange, debounceBy),
-    [onChange, debounceBy],
+    [onChange, debounceBy]
   );
 
   const handleChange = useCallback(
@@ -48,7 +48,7 @@ const TextAreaField: React.FC<Props> = ({
       setText(e.currentTarget.value);
       debouncedHandleTextUpdate(e.currentTarget.value);
     },
-    [debouncedHandleTextUpdate],
+    [debouncedHandleTextUpdate]
   );
 
   useLayoutEffect(() => {
diff --git a/web/src/beta/components/fields/TextField/index.stories.tsx b/web/src/beta/components/fields/TextField/index.stories.tsx
index e8a4d4164..5e34c976c 100644
--- a/web/src/beta/components/fields/TextField/index.stories.tsx
+++ b/web/src/beta/components/fields/TextField/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import TextField, { Props } from "./index";
 
 const meta: Meta<Props> = {
-  component: TextField,
+  component: TextField
 };
 
 export default meta;
@@ -13,14 +13,14 @@ export const Default: Story = {
   args: {
     name: "Text input field",
     value: "Text field",
-    description: "The text input description",
-  },
+    description: "The text input description"
+  }
 };
 
 export const WithPlaceholder: Story = {
   args: {
     placeholder: "Text Input",
     name: "Text input field",
-    description: "The text input description",
-  },
+    description: "The text input description"
+  }
 };
diff --git a/web/src/beta/components/fields/TextField/index.tsx b/web/src/beta/components/fields/TextField/index.tsx
index 2d12f1864..8f04b4276 100644
--- a/web/src/beta/components/fields/TextField/index.tsx
+++ b/web/src/beta/components/fields/TextField/index.tsx
@@ -21,7 +21,7 @@ const TextField: React.FC<Props> = ({
   placeholder,
   disabled,
   onChange,
-  onBlur,
+  onBlur
 }) => {
   return (
     <Property className={className} name={name} description={description}>
diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts b/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
index 0d1a070fb..55c139243 100644
--- a/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
+++ b/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
@@ -13,7 +13,7 @@ export default ({
   timelineValues,
   onChange,
   onClose,
-  setTimelineValues,
+  setTimelineValues
 }: Props) => {
   const [warning, setWarning] = useState(false);
 
@@ -23,7 +23,7 @@ export default ({
         ...timelineValues,
         currentTime: timelineValues?.currentTime || "",
         startTime: timelineValues?.startTime || "",
-        endTime: timelineValues?.endTime || "",
+        endTime: timelineValues?.endTime || ""
       };
 
       switch (fieldId) {
@@ -60,7 +60,7 @@ export default ({
 
       setTimelineValues?.(updatedData);
     },
-    [timelineValues, setTimelineValues],
+    [timelineValues, setTimelineValues]
   );
 
   const [disabledFields, setDisabledFields] = useState<string[]>([]);
@@ -107,6 +107,6 @@ export default ({
     setDisabledFields,
     handleOnChange,
     handlePopoverOpen,
-    onAppyChange: handleApplyChange,
+    onAppyChange: handleApplyChange
   };
 };
diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
index d4c4c3a5a..34e539cbf 100644
--- a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
+++ b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
@@ -24,7 +24,7 @@ const EditPanel = ({
   timelineValues,
   setTimelineValues,
   onClose,
-  onChange,
+  onChange
 }: EditPanelProps) => {
   const t = useT();
   const {
@@ -34,12 +34,12 @@ const EditPanel = ({
     setDisabledFields,
     handleOnChange,
     onAppyChange,
-    handlePopoverOpen,
+    handlePopoverOpen
   } = useHooks({
     timelineValues,
     onChange,
     onClose,
-    setTimelineValues,
+    setTimelineValues
   });
 
   const timezoneMatches = useMemo(() => {
@@ -107,7 +107,7 @@ const EditPanel = ({
           <DangerItem>
             <Icon icon="alert" size={30} />
             {t(
-              "Please make sure the Current time must between the Start time and End Time.",
+              "Please make sure the Current time must between the Start time and End Time."
             )}
           </DangerItem>
         )}
diff --git a/web/src/beta/components/fields/TimelineField/index.tsx b/web/src/beta/components/fields/TimelineField/index.tsx
index 61121d143..1da33c658 100644
--- a/web/src/beta/components/fields/TimelineField/index.tsx
+++ b/web/src/beta/components/fields/TimelineField/index.tsx
@@ -26,7 +26,7 @@ const TimelineField: React.FC<Props> = ({
   name,
   description,
   value,
-  onChange,
+  onChange
 }) => {
   const [openModal, setOpenModal] = useState(false);
   const t = useT();
diff --git a/web/src/beta/components/fields/ToggleField/index.stories.tsx b/web/src/beta/components/fields/ToggleField/index.stories.tsx
index 9e704f49a..9b77f4f6c 100644
--- a/web/src/beta/components/fields/ToggleField/index.stories.tsx
+++ b/web/src/beta/components/fields/ToggleField/index.stories.tsx
@@ -1,13 +1,13 @@
+import { styled } from "@reearth/services/theme";
 import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import { styled } from "@reearth/services/theme";
 
 import ToggleField, { Props } from ".";
 
 const meta: Meta<typeof ToggleField> = {
-  component: ToggleField,
+  component: ToggleField
 };
 
 export default meta;
@@ -19,7 +19,7 @@ export const Default: Story = (args: Props) => {
 
   const handleChange = useCallback(
     (checked: boolean) => updateArgs({ checked: !checked }),
-    [updateArgs],
+    [updateArgs]
   );
 
   return (
@@ -63,5 +63,5 @@ Default.args = {
   description: "Sample description",
   checked: true,
   disabled: false,
-  onChange: () => console.log("clicked"),
+  onChange: () => console.log("clicked")
 };
diff --git a/web/src/beta/components/fields/URLField/index.stories.tsx b/web/src/beta/components/fields/URLField/index.stories.tsx
index 941266716..9c3ee2550 100644
--- a/web/src/beta/components/fields/URLField/index.stories.tsx
+++ b/web/src/beta/components/fields/URLField/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import URLField, { Props } from ".";
 
 const meta: Meta<Props> = {
-  component: URLField,
+  component: URLField
 };
 
 export default meta;
@@ -14,8 +14,8 @@ export const AssetImageType: Story = {
     name: "Asset",
     description: "Defaul Asset Uploader",
     fileType: "asset",
-    entityType: "image",
-  },
+    entityType: "image"
+  }
 };
 
 export const AssetFileType: Story = {
@@ -23,16 +23,16 @@ export const AssetFileType: Story = {
     name: "Asset",
     description: "Defaul Asset Uploader",
     fileType: "asset",
-    entityType: "file",
-  },
+    entityType: "file"
+  }
 };
 
 export const URLType: Story = {
   args: {
     name: "URL",
     description: "Defaul URL Input wrapper",
-    fileType: "URL",
-  },
+    fileType: "URL"
+  }
 };
 
 export const AppearanceType: Story = {
@@ -40,6 +40,6 @@ export const AppearanceType: Story = {
     name: "URL",
     description: "Defaul URL Input wrapper",
     fileType: "layerStyle",
-    entityType: "layerStyle",
-  },
+    entityType: "layerStyle"
+  }
 };
diff --git a/web/src/beta/components/fields/URLField/index.tsx b/web/src/beta/components/fields/URLField/index.tsx
index 600e68f05..02b7bc4e5 100644
--- a/web/src/beta/components/fields/URLField/index.tsx
+++ b/web/src/beta/components/fields/URLField/index.tsx
@@ -3,7 +3,7 @@ import Property from "@reearth/beta/components/fields";
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import {
   FILE_FORMATS,
-  IMAGE_FORMATS,
+  IMAGE_FORMATS
 } from "@reearth/beta/features/Assets/constants";
 import { AcceptedFileFormat } from "@reearth/beta/features/Assets/types";
 import AssetModal from "@reearth/beta/features/Modals/AssetModal";
@@ -34,7 +34,7 @@ const URLField: React.FC<Props> = ({
   entityType,
   sceneId,
   fileFormat,
-  onChange,
+  onChange
 }) => {
   const t = useT();
   const [open, setOpen] = useState(false);
@@ -56,7 +56,7 @@ const URLField: React.FC<Props> = ({
       ) {
         setNotification({
           type: "error",
-          text: t("Wrong file format"),
+          text: t("Wrong file format")
         });
         setCurrentValue(undefined);
       } else {
@@ -64,14 +64,14 @@ const URLField: React.FC<Props> = ({
         onChange?.(inputValue, name);
       }
     },
-    [fileType, onChange, setNotification, t],
+    [fileType, onChange, setNotification, t]
   );
 
   const { handleFileUpload } = useFileUploaderHook({
     workspaceId: currentWorkspace?.id,
     onAssetSelect: handleChange,
     assetType: entityType,
-    fileFormat,
+    fileFormat
   });
 
   useEffect(() => {
diff --git a/web/src/beta/components/fields/common/NumberInput/index.stories.tsx b/web/src/beta/components/fields/common/NumberInput/index.stories.tsx
index 36769d59d..fa5c9032b 100644
--- a/web/src/beta/components/fields/common/NumberInput/index.stories.tsx
+++ b/web/src/beta/components/fields/common/NumberInput/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import NumberInput, { Props } from "./index";
 
 const meta: Meta<Props> = {
-  component: NumberInput,
+  component: NumberInput
 };
 
 export default meta;
@@ -13,8 +13,8 @@ export const Default: Story = {
   args: {
     value: 42,
     inputDescription: "Value",
-    suffix: "px",
-  },
+    suffix: "px"
+  }
 };
 
 export const Disabled: Story = {
@@ -22,8 +22,8 @@ export const Disabled: Story = {
     value: 15,
     inputDescription: "Disabled",
     suffix: "px",
-    disabled: true,
-  },
+    disabled: true
+  }
 };
 
 export const Range: Story = {
@@ -32,15 +32,15 @@ export const Range: Story = {
     inputDescription: "Range",
     suffix: "px",
     min: 4,
-    max: 100,
-  },
+    max: 100
+  }
 };
 
 export const NoValue: Story = {
   args: {
     inputDescription: "No Value",
-    suffix: "px",
-  },
+    suffix: "px"
+  }
 };
 
 export const WithMinValue: Story = {
@@ -48,8 +48,8 @@ export const WithMinValue: Story = {
     value: 5,
     inputDescription: "With Min Value",
     suffix: "px",
-    min: 0,
-  },
+    min: 0
+  }
 };
 
 export const WithMaxValue: Story = {
@@ -57,14 +57,14 @@ export const WithMaxValue: Story = {
     value: 95,
     inputDescription: "With Max Value",
     suffix: "px",
-    max: 100,
-  },
+    max: 100
+  }
 };
 
 export const Editable: Story = {
   args: {
     value: 25,
     inputDescription: "Editable",
-    suffix: "px",
-  },
+    suffix: "px"
+  }
 };
diff --git a/web/src/beta/components/fields/common/NumberInput/index.tsx b/web/src/beta/components/fields/common/NumberInput/index.tsx
index 198283d09..f167a3b23 100644
--- a/web/src/beta/components/fields/common/NumberInput/index.tsx
+++ b/web/src/beta/components/fields/common/NumberInput/index.tsx
@@ -28,7 +28,7 @@ const NumberInput: React.FC<Props> = ({
   disabled = false,
   placeholder,
   expandWithContent,
-  onChange,
+  onChange
 }) => {
   const [innerValue, setInnerValue] = useState<number | undefined>(value);
   const [, setNotification] = useNotification();
@@ -48,7 +48,7 @@ const NumberInput: React.FC<Props> = ({
     if (inputRef.current && expandWithContent) {
       const minWidth = Math.max(
         spacingSizes.smallest,
-        inputRef.current.value.length * 10,
+        inputRef.current.value.length * 10
       );
       inputRef.current.style.width = `${minWidth}px`;
     }
@@ -66,14 +66,14 @@ const NumberInput: React.FC<Props> = ({
       } else if (typeof max === "number" && isFinite(max) && newValue > max) {
         setNotification({
           type: "warning",
-          text: t("You have passed the maximum value."),
+          text: t("You have passed the maximum value.")
         });
         setInnerValue(undefined);
         onChange(undefined);
       } else if (typeof min === "number" && isFinite(min) && newValue < min) {
         setNotification({
           type: "warning",
-          text: t("You have passed the minimum value."),
+          text: t("You have passed the minimum value.")
         });
         setInnerValue(undefined);
         onChange(undefined);
@@ -82,7 +82,7 @@ const NumberInput: React.FC<Props> = ({
         onChange(newValue);
       }
     },
-    [onChange, max, min, setNotification, t],
+    [onChange, max, min, setNotification, t]
   );
 
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -106,7 +106,7 @@ const NumberInput: React.FC<Props> = ({
         handleValueChange(isNaN(newValue) ? undefined : newValue);
       }
     },
-    [value, handleValueChange],
+    [value, handleValueChange]
   );
 
   const handleFocus = useCallback(() => {
@@ -119,7 +119,7 @@ const NumberInput: React.FC<Props> = ({
       handleValueChange(newValue);
       isEditing.current = false;
     },
-    [value, handleValueChange],
+    [value, handleValueChange]
   );
 
   return (
diff --git a/web/src/beta/components/fields/common/TextInput/index.stories.tsx b/web/src/beta/components/fields/common/TextInput/index.stories.tsx
index 8cf977bd8..3e7a16196 100644
--- a/web/src/beta/components/fields/common/TextInput/index.stories.tsx
+++ b/web/src/beta/components/fields/common/TextInput/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import TextInput, { Props } from "./index";
 
 const meta: Meta<Props> = {
-  component: TextInput,
+  component: TextInput
 };
 
 export default meta;
@@ -11,12 +11,12 @@ type Story = StoryObj<typeof TextInput>;
 
 export const Default: Story = {
   args: {
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const WithPlaceholder: Story = {
   args: {
-    placeholder: "Text Input",
-  },
+    placeholder: "Text Input"
+  }
 };
diff --git a/web/src/beta/components/fields/common/TextInput/index.tsx b/web/src/beta/components/fields/common/TextInput/index.tsx
index 5bfe78526..71b051c74 100644
--- a/web/src/beta/components/fields/common/TextInput/index.tsx
+++ b/web/src/beta/components/fields/common/TextInput/index.tsx
@@ -3,7 +3,7 @@ import {
   HTMLInputTypeAttribute,
   useCallback,
   useEffect,
-  useState,
+  useState
 } from "react";
 
 export type Props = {
@@ -29,7 +29,7 @@ const TextInput: React.FC<Props> = ({
   onBlur,
   onExit,
   disabled,
-  type,
+  type
 }) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
 
@@ -43,7 +43,7 @@ const TextInput: React.FC<Props> = ({
       if (newValue === undefined) return;
       setCurrentValue(newValue);
     },
-    [],
+    []
   );
 
   const handleBlur = useCallback(() => {
@@ -60,7 +60,7 @@ const TextInput: React.FC<Props> = ({
         onExit?.(e);
       }
     },
-    [currentValue, onChange, onExit],
+    [currentValue, onChange, onExit]
   );
 
   return (
diff --git a/web/src/beta/components/fields/index.tsx b/web/src/beta/components/fields/index.tsx
index a2f511301..0c04b528a 100644
--- a/web/src/beta/components/fields/index.tsx
+++ b/web/src/beta/components/fields/index.tsx
@@ -14,7 +14,7 @@ const Property: React.FC<Props> = ({
   name,
   description,
   children,
-  className,
+  className
 }) => {
   return (
     <Wrapper className={className}>
diff --git a/web/src/beta/components/fields/utils.ts b/web/src/beta/components/fields/utils.ts
index 2320297f7..7227eee65 100644
--- a/web/src/beta/components/fields/utils.ts
+++ b/web/src/beta/components/fields/utils.ts
@@ -1,7 +1,7 @@
 import {
   Field,
   Item,
-  SchemaField,
+  SchemaField
 } from "@reearth/services/api/propertyApi/utils";
 
 export const filterVisibleItems = (items?: Item[]) => {
@@ -16,7 +16,7 @@ export const filterVisibleItems = (items?: Item[]) => {
 
 const searchField = (
   items: Item[],
-  fid: string,
+  fid: string
 ): [SchemaField, Field | undefined] | undefined => {
   for (const i of items) {
     const sf2 = i.schemaFields.find((f) => f.id === fid);
diff --git a/web/src/beta/features/Assets/hooks.ts b/web/src/beta/features/Assets/hooks.ts
index 5a3bcfff8..54a309163 100644
--- a/web/src/beta/features/Assets/hooks.ts
+++ b/web/src/beta/features/Assets/hooks.ts
@@ -2,7 +2,7 @@ import { useApolloClient } from "@apollo/client";
 import { Asset, SortType } from "@reearth/beta/features/Assets/types";
 import {
   autoFillPage,
-  onScrollToBottom,
+  onScrollToBottom
 } from "@reearth/beta/utils/infinite-scroll";
 import { useAssetsFetcher } from "@reearth/services/api";
 import { Maybe } from "@reearth/services/gql";
@@ -26,7 +26,7 @@ const assetsPerPage = 20;
 
 function pagination(
   sort?: { type?: Maybe<SortType>; reverse?: boolean },
-  endCursor?: string | null,
+  endCursor?: string | null
 ) {
   const reverseOrder =
     !sort?.type || sort?.type === "date" ? !sort?.reverse : !!sort?.reverse;
@@ -35,12 +35,12 @@ function pagination(
     after: !reverseOrder ? endCursor : undefined,
     before: reverseOrder ? endCursor : undefined,
     first: !reverseOrder ? assetsPerPage : undefined,
-    last: reverseOrder ? assetsPerPage : undefined,
+    last: reverseOrder ? assetsPerPage : undefined
   };
 }
 
 export default ({
-  workspaceId,
+  workspaceId
 }: {
   workspaceId?: string;
   onAssetSelect?: (inputValue?: string) => void;
@@ -60,7 +60,7 @@ export default ({
       teamId: workspaceId ?? "",
       pagination: pagination(sort),
       // sort: toGQLEnum(sort?.type),
-      keyword: searchTerm,
+      keyword: searchTerm
     });
 
   useEffect(() => {
@@ -73,7 +73,7 @@ export default ({
   const t = useT();
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const [localSearchTerm, setLocalSearchTerm] = useState<string>(
-    searchTerm ?? "",
+    searchTerm ?? ""
   );
   const openDeleteModal = useCallback(() => setDeleteModalVisible(true), []);
   const closeDeleteModal = useCallback(() => setDeleteModalVisible(false), []);
@@ -85,9 +85,9 @@ export default ({
       { value: "name", label: t("A To Z") },
       { value: "name-reverse", label: t("Z To A") },
       { value: "size", label: t("Size Small to Large") },
-      { value: "size-reverse", label: t("Size Large to Small") },
+      { value: "size-reverse", label: t("Size Large to Small") }
     ],
-    [t],
+    [t]
   );
 
   const handleGetMoreAssets = useCallback(async () => {
@@ -95,8 +95,8 @@ export default ({
       isGettingMore.current = true;
       await fetchMore({
         variables: {
-          pagination: pagination(sort, endCursor),
-        },
+          pagination: pagination(sort, endCursor)
+        }
       });
       isGettingMore.current = false;
     }
@@ -107,10 +107,10 @@ export default ({
       if (!type && reverse === undefined) return;
       setSort({
         type: (type as SortType) ?? sort?.type,
-        reverse: !!reverse,
+        reverse: !!reverse
       });
     },
-    [sort],
+    [sort]
   );
 
   const handleSearchTerm = useCallback((term?: string) => {
@@ -135,7 +135,7 @@ export default ({
     (value: string) => {
       setLocalSearchTerm(value);
     },
-    [setLocalSearchTerm],
+    [setLocalSearchTerm]
   );
   const handleSearch = useCallback(() => {
     if (!localSearchTerm || localSearchTerm.length < 1) {
@@ -159,7 +159,7 @@ export default ({
       if (!asset) return;
       selectAsset(!selectedAssets.includes(asset) ? [asset] : []);
     },
-    [selectedAssets, selectAsset],
+    [selectedAssets, selectAsset]
   );
 
   return {
@@ -184,6 +184,6 @@ export default ({
     handleRemove,
     handleReverse,
     handleSearchInputChange,
-    handleSearch,
+    handleSearch
   };
 };
diff --git a/web/src/beta/features/AssetsManager/AssetsSelector.tsx b/web/src/beta/features/AssetsManager/AssetsSelector.tsx
index 076f01915..4a7ed2c25 100644
--- a/web/src/beta/features/AssetsManager/AssetsSelector.tsx
+++ b/web/src/beta/features/AssetsManager/AssetsSelector.tsx
@@ -68,5 +68,5 @@ export default AssetsSelector;
 const Wrapper = styled("div")(({ theme }) => ({
   height: "60vh",
   maxHeight: 652,
-  background: theme.bg[1],
+  background: theme.bg[1]
 }));
diff --git a/web/src/beta/features/AssetsManager/constants.ts b/web/src/beta/features/AssetsManager/constants.ts
index 2faf06786..cad61d5e4 100644
--- a/web/src/beta/features/AssetsManager/constants.ts
+++ b/web/src/beta/features/AssetsManager/constants.ts
@@ -5,7 +5,7 @@ export const IMAGE_FILE_TYPES = [
   "gif",
   "svg",
   "tiff",
-  "webp",
+  "webp"
 ] as const;
 
 export const GIS_FILE_TYPES = [
@@ -20,7 +20,7 @@ export const GIS_FILE_TYPES = [
   "gpx",
   "wms",
   "mvt",
-  "czml",
+  "czml"
 ] as const;
 
 export type ImageType = (typeof IMAGE_FILE_TYPES)[number];
diff --git a/web/src/beta/features/AssetsManager/hooks.ts b/web/src/beta/features/AssetsManager/hooks.ts
index 0e7a9073d..b6e649298 100644
--- a/web/src/beta/features/AssetsManager/hooks.ts
+++ b/web/src/beta/features/AssetsManager/hooks.ts
@@ -10,7 +10,7 @@ import {
   FileType,
   GENERAL_FILE_TYPE_ACCEPT_STRING,
   GIS_FILE_TYPES,
-  IMAGE_FILE_TYPES,
+  IMAGE_FILE_TYPES
 } from "./constants";
 import { Asset, sortOptionValue, SortType } from "./types";
 
@@ -20,14 +20,14 @@ const ASSETS_LAYOUT_STORAGE_KEY = `reearth-visualizer-dashboard-assets-layout`;
 const typeToGQLField = {
   date: AssetSortField.Date,
   name: AssetSortField.Name,
-  size: AssetSortField.Size,
+  size: AssetSortField.Size
 };
 
 export default ({
   workspaceId,
   allowMultipleSelection,
   assetsTypes,
-  onSelectChange,
+  onSelectChange
 }: {
   workspaceId?: string;
   allowMultipleSelection: boolean;
@@ -37,7 +37,7 @@ export default ({
   // sort
   const [sort, setSort] = useState<{ type?: SortType; reverse?: boolean }>({
     type: "date",
-    reverse: true,
+    reverse: true
   });
   const t = useT();
 
@@ -62,9 +62,9 @@ export default ({
       { value: "name", label: t("A To Z") },
       { value: "name-reverse", label: t("Z To A") },
       { value: "size", label: t("Size Small to Large") },
-      { value: "size-reverse", label: t("Size Large to Small") },
+      { value: "size-reverse", label: t("Size Large to Small") }
     ],
-    [t],
+    [t]
   );
 
   const handleSortChange = useCallback((value: string) => {
@@ -104,31 +104,31 @@ export default ({
     useAssetsQuery({
       teamId: workspaceId ?? "",
       pagination: {
-        first: ASSETS_PER_PAGE,
+        first: ASSETS_PER_PAGE
       },
       sort: {
         direction: sort.reverse ? SortDirection.Desc : SortDirection.Asc,
-        field: typeToGQLField[sort.type ?? "date"],
+        field: typeToGQLField[sort.type ?? "date"]
       },
-      keyword: searchTerm,
+      keyword: searchTerm
     });
 
   const assetsExts = useMemo(
     () =>
       assetsTypes
         ?.map((t) =>
-          t === "image" ? IMAGE_FILE_TYPES : t === "file" ? GIS_FILE_TYPES : t,
+          t === "image" ? IMAGE_FILE_TYPES : t === "file" ? GIS_FILE_TYPES : t
         )
         .flat(),
-    [assetsTypes],
+    [assetsTypes]
   );
 
   const filteredAssets = useMemo(() => {
     if (!assetsExts || !assets) return assets;
     return assets.filter((a) =>
       assetsExts.includes(
-        (a.url.split(".").pop()?.toLowerCase() as FileType) ?? "",
-      ),
+        (a.url.split(".").pop()?.toLowerCase() as FileType) ?? ""
+      )
     );
   }, [assets, assetsExts]);
 
@@ -143,9 +143,9 @@ export default ({
       variables: {
         pagination: {
           first: ASSETS_PER_PAGE,
-          after: endCursor,
-        },
-      },
+          after: endCursor
+        }
+      }
     });
     setLoadingMore(false);
     isLoadingMoreRef.current = false;
@@ -224,10 +224,10 @@ export default ({
       if (!files) return;
       await useCreateAssets({
         teamId: workspaceId ?? "",
-        file: files,
+        file: files
       });
     },
-    [workspaceId, useCreateAssets],
+    [workspaceId, useCreateAssets]
   );
 
   // upload
@@ -236,17 +236,17 @@ export default ({
     (files) => handleAssetsCreate?.(files),
     {
       accept: GENERAL_FILE_TYPE_ACCEPT_STRING,
-      multiple: true,
-    },
+      multiple: true
+    }
   );
 
   // layout
   const [layout, setLayout] = useState(
     ["grid", "list"].includes(
-      localStorage.getItem(ASSETS_LAYOUT_STORAGE_KEY) ?? "",
+      localStorage.getItem(ASSETS_LAYOUT_STORAGE_KEY) ?? ""
     )
       ? (localStorage.getItem(ASSETS_LAYOUT_STORAGE_KEY) as ManagerLayout)
-      : "grid",
+      : "grid"
   );
   const handleLayoutChange = useCallback((newLayout?: ManagerLayout) => {
     if (!newLayout) return;
@@ -258,7 +258,7 @@ export default ({
   // path
   // TODO: support path with folder
   const [paths, _setPaths] = useState<BreadcrumbItem[]>([
-    { id: "assets", title: "Assets" },
+    { id: "assets", title: "Assets" }
   ]);
   const handlePathClick = useCallback((_id?: string) => {}, []);
 
@@ -272,13 +272,13 @@ export default ({
         selectAsset(
           selectedAssetIds.includes(assetId)
             ? selectedAssetIds.filter((a) => a !== assetId)
-            : [...selectedAssetIds, assetId],
+            : [...selectedAssetIds, assetId]
         );
       } else {
         selectAsset(assetId ? [assetId] : []);
       }
     },
-    [selectedAssetIds, allowMultipleSelection],
+    [selectedAssetIds, allowMultipleSelection]
   );
 
   useEffect(() => {
@@ -306,7 +306,7 @@ export default ({
     onSelectChange(
       selectedAssetIds
         .map((id) => assets.find((a) => a.id === id))
-        .filter((a) => !!a) as Asset[],
+        .filter((a) => !!a) as Asset[]
     );
   }, [selectedAssetIds, assets, onSelectChange]);
 
@@ -337,6 +337,6 @@ export default ({
     handleAssetUpload,
     contentWidth,
     loading,
-    loadingMore,
+    loadingMore
   };
 };
diff --git a/web/src/beta/features/AssetsManager/index.tsx b/web/src/beta/features/AssetsManager/index.tsx
index 8c897c03e..c4fa5b882 100644
--- a/web/src/beta/features/AssetsManager/index.tsx
+++ b/web/src/beta/features/AssetsManager/index.tsx
@@ -4,7 +4,7 @@ import {
   ManagerHeader,
   ManagerHeaderButton,
   ManagerLayout,
-  ManagerWrapper,
+  ManagerWrapper
 } from "@reearth/beta/ui/components/ManagerBase";
 import ManagerEmptyContent from "@reearth/beta/ui/components/ManagerBase/ManagerEmptyContent";
 import { useT } from "@reearth/services/i18n";
@@ -36,7 +36,7 @@ const AssetsManager: FC<AssetsManagerProps> = ({
   enableDelete = true,
   allowMultipleSelection = true,
   assetsTypes,
-  onSelectChange,
+  onSelectChange
 }) => {
   const {
     filteredAssets,
@@ -56,15 +56,15 @@ const AssetsManager: FC<AssetsManagerProps> = ({
     handleAssetUpload,
     contentWidth,
     loading,
-    loadingMore,
+    loadingMore
   } = useHooks({
     allowMultipleSelection,
     workspaceId,
     assetsTypes,
-    onSelectChange,
+    onSelectChange
   });
   const t = useT();
-  const theme = useTheme()
+  const theme = useTheme();
   return (
     <ManagerWrapper onClick={() => handleAssetSelect(undefined)}>
       <ManagerHeader
@@ -78,7 +78,7 @@ const AssetsManager: FC<AssetsManagerProps> = ({
               icon="uploadSimple"
               onClick={handleAssetUpload}
             />
-          ),
+          )
         ]}
         sortValue={sortValue}
         sortOptions={sortOptions}
@@ -98,75 +98,84 @@ const AssetsManager: FC<AssetsManagerProps> = ({
         onDelete={handleAssetDelete}
         onSearch={handleSearch}
       />
-    {(loading || loadingMore) ? (
-                  <LoadingWrapper>
-                    <Loading relative />
-                  </LoadingWrapper>
-                ) : 
-          filteredAssets.length ?
-      <ManagerContent>
-        <ContentWrapper size={size}>
-          <PathWrapper size={size}>
-            <Breadcrumb items={paths} size="large" onClick={handlePathClick} />
-          </PathWrapper>
-          <LayoutWrapper>
-            {layout === "list" && (
-              <ListHeader size={size} width={contentWidth}>
-                <ThumbnailSpacer />
-                <Col width={50}>
-                  <Typography weight="bold" size="body">
-                    {t("Name")}
-                  </Typography>
-                </Col>
-                <Col width={30}>
-                  <Typography weight="bold" size="body">
-                    {t("Uploaded At")}
-                  </Typography>
-                </Col>
-                <Col width={30}>
-                  <Typography weight="bold" size="body">
-                    {t("Size")}
-                  </Typography>
-                </Col>
-              </ListHeader>
-            )}
-            <AssetsWrapper ref={assetsWrapperRef}>
-              <AssetsContent size={size} ref={assetsContentRef}>
-                {/* TODO: Group of folders */}
-                <AssetsGroup layout={layout} size={size}>
-                  {filteredAssets?.map((asset) =>
-                    layout === "grid" ? (
-                      <AssetGridItem
-                        key={asset.id}
-                        asset={asset}
-                        layout={layout}
-                        selectedAssetIds={selectedAssetIds}
-                        onSelect={handleAssetSelect}
-                      />
-                    ) : (
-                      <AssetListItem
-                        key={asset.id}
-                        asset={asset}
-                        layout={layout}
-                        selectedAssetIds={selectedAssetIds}
-                        onSelect={handleAssetSelect}
-                      />
-                    ),
-                  )}
-                </AssetsGroup>
-               
-              </AssetsContent>
-            </AssetsWrapper>
-          </LayoutWrapper>
-        </ContentWrapper>
-      </ManagerContent>: 
-      <ManagerEmptyContent>
-      <Typography size="h5" color={theme.content.weak}>
-        {t("No Asset has been uploaded yet")}
-      </Typography>
-    </ManagerEmptyContent>
-
-}
+      {filteredAssets?.length ? (
+        <>
+          <ManagerContent>
+            <ContentWrapper size={size}>
+              <PathWrapper size={size}>
+                <Breadcrumb
+                  items={paths}
+                  size="large"
+                  onClick={handlePathClick}
+                />
+              </PathWrapper>
+              <LayoutWrapper>
+                {layout === "list" && (
+                  <ListHeader size={size} width={contentWidth}>
+                    <ThumbnailSpacer />
+                    <Col width={50}>
+                      <Typography weight="bold" size="body">
+                        {t("Name")}
+                      </Typography>
+                    </Col>
+                    <Col width={30}>
+                      <Typography weight="bold" size="body">
+                        {t("Uploaded At")}
+                      </Typography>
+                    </Col>
+                    <Col width={30}>
+                      <Typography weight="bold" size="body">
+                        {t("Size")}
+                      </Typography>
+                    </Col>
+                  </ListHeader>
+                )}
+                <AssetsWrapper ref={assetsWrapperRef}>
+                  <AssetsContent size={size} ref={assetsContentRef}>
+                    {/* TODO: Group of folders */}
+                    <AssetsGroup layout={layout} size={size}>
+                      {filteredAssets?.map((asset) =>
+                        layout === "grid" ? (
+                          <AssetGridItem
+                            key={asset.id}
+                            asset={asset}
+                            layout={layout}
+                            selectedAssetIds={selectedAssetIds}
+                            onSelect={handleAssetSelect}
+                          />
+                        ) : (
+                          <AssetListItem
+                            key={asset.id}
+                            asset={asset}
+                            layout={layout}
+                            selectedAssetIds={selectedAssetIds}
+                            onSelect={handleAssetSelect}
+                          />
+                        )
+                      )}
+                    </AssetsGroup>
+                  </AssetsContent>
+                </AssetsWrapper>
+              </LayoutWrapper>
+            </ContentWrapper>
+          </ManagerContent>
+          {loadingMore && (
+            <LoadingWrapper>
+              <Loading relative />
+            </LoadingWrapper>
+          )}
+        </>
+      ) : loading ? (
+        <LoadingWrapper>
+          <Loading relative />
+        </LoadingWrapper>
+      ) : (
+        <ManagerEmptyContent>
+          <Typography size="h5" color={theme.content.weak}>
+            {t("No Asset has been uploaded yet")}
+          </Typography>
+        </ManagerEmptyContent>
+      )}
     </ManagerWrapper>
   );
 };
@@ -179,14 +188,14 @@ const ContentWrapper = styled("div")<{ size: AssetsManagerSize }>(
     flexDirection: "column",
     gap: theme.spacing.normal,
     flex: 1,
-    height: 0,
-  }),
+    height: 0
+  })
 );
 
 const PathWrapper = styled("div")<{ size: AssetsManagerSize }>(
   ({ theme, size }) => ({
-    padding: `0 ${size === "large" ? theme.spacing.large : theme.spacing.small}px`,
-  }),
+    padding: `0 ${size === "large" ? theme.spacing.large : theme.spacing.small}px`
+  })
 );
 
 const AssetsWrapper = styled("div")(() => ({
@@ -195,7 +204,7 @@ const AssetsWrapper = styled("div")(() => ({
   flexDirection: "column",
   flex: 1,
   height: 0,
-  overflow: "auto",
+  overflow: "auto"
 }));
 
 const AssetsContent = styled("div")<{ size: AssetsManagerSize }>(
@@ -205,15 +214,15 @@ const AssetsContent = styled("div")<{ size: AssetsManagerSize }>(
     gap: theme.spacing.normal,
     padding: `${theme.spacing.smallest}px ${
       size === "large" ? theme.spacing.large : theme.spacing.small
-    }px ${size === "large" ? theme.spacing.large : theme.spacing.small}px`,
-  }),
+    }px ${size === "large" ? theme.spacing.large : theme.spacing.small}px`
+  })
 );
 
 const LayoutWrapper = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   flex: 1,
-  height: 0,
+  height: 0
 }));
 
 const AssetsGroup = styled("div")<{
@@ -224,16 +233,16 @@ const AssetsGroup = styled("div")<{
     ? {
         display: "grid",
         gap: theme.spacing.normal,
-        gridTemplateColumns: `repeat(auto-fill, minmax(${size === "medium" ? 96 : 144}px, 1fr))`,
+        gridTemplateColumns: `repeat(auto-fill, minmax(${size === "medium" ? 96 : 144}px, 1fr))`
       }
     : {}),
   ...(layout === "list"
     ? {
         display: "flex",
         flexDirection: "column",
-        gap: theme.spacing.small,
+        gap: theme.spacing.small
       }
-    : {}),
+    : {})
 }));
 
 const ListHeader = styled("div")<{ size: AssetsManagerSize; width: number }>(
@@ -246,22 +255,22 @@ const ListHeader = styled("div")<{ size: AssetsManagerSize; width: number }>(
       theme.spacing.smallest
     }px`,
     gap: theme.spacing.small,
-    width: width === 0 ? "100%" : width,
-  }),
+    width: width === 0 ? "100%" : width
+  })
 );
 
 const ThumbnailSpacer = styled("div")(() => ({
   width: 20,
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const Col = styled("div")<{ width: number }>(({ width }) => ({
   width: `${width}%`,
   flexGrow: 0,
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const LoadingWrapper = styled("div")(() => ({
   width: "100%",
-  height: 100,
+  height: 100
 }));
diff --git a/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx b/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx
index 2f58cb632..c4aca4759 100644
--- a/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx
+++ b/web/src/beta/features/AssetsManager/item/AssetGridItem.tsx
@@ -8,11 +8,11 @@ import { getAssetType } from "./utils";
 const AssetGridItem: FC<AssetItemProps> = ({
   asset,
   selectedAssetIds,
-  onSelect,
+  onSelect
 }) => {
   const selected = useMemo(
     () => selectedAssetIds.includes(asset.id),
-    [selectedAssetIds, asset.id],
+    [selectedAssetIds, asset.id]
   );
 
   const type = useMemo(() => getAssetType(asset), [asset]);
@@ -26,7 +26,7 @@ const AssetGridItem: FC<AssetItemProps> = ({
       e.stopPropagation();
       onSelect?.(asset.id);
     },
-    [asset, onSelect],
+    [asset, onSelect]
   );
 
   return (
@@ -68,14 +68,14 @@ const Wrapper = styled("div")<{ selected?: boolean }>(
     transition: "background-color 0.1s ease",
     ["&:hover"]: {
       background: selected ? theme.select.main : theme.relative.light,
-      borderRadius: theme.radius.small,
-    },
-  }),
+      borderRadius: theme.radius.small
+    }
+  })
 );
 
 const ThumbnailWrapper = styled("div")(() => ({
   position: "relative",
-  paddingBottom: "62.5%",
+  paddingBottom: "62.5%"
 }));
 
 const Thumbnail = styled("div")(({ theme }) => ({
@@ -88,27 +88,27 @@ const Thumbnail = styled("div")(({ theme }) => ({
   height: "100%",
   borderRadius: theme.radius.small,
   overflow: "hidden",
-  display: "flex",
+  display: "flex"
 }));
 
 const AssetImage = styled("div")<{ url?: string }>(({ theme, url }) => ({
   background: url ? `url(${url}) center/contain no-repeat` : theme.bg[1],
   borderRadius: theme.radius.small,
-  width: "100%",
+  width: "100%"
 }));
 
 const IconWrapper = styled("div")(() => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  width: "100%",
+  width: "100%"
 }));
 
 const StyledTypography = styled(Typography)(({ theme }) => ({
   position: "absolute",
   color: theme.content.weak,
   transform: "translate(0, 10px)",
-  fontWeight: "bold",
+  fontWeight: "bold"
 }));
 
 const AssetName = styled("div")(() => ({
@@ -117,5 +117,5 @@ const AssetName = styled("div")(() => ({
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
-  padding: "1px 0",
+  padding: "1px 0"
 }));
diff --git a/web/src/beta/features/AssetsManager/item/AssetListItem.tsx b/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
index 75b016e7b..3f63bfdeb 100644
--- a/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
+++ b/web/src/beta/features/AssetsManager/item/AssetListItem.tsx
@@ -8,11 +8,11 @@ import { getAssetType } from "./utils";
 const AssetListItem: FC<AssetItemProps> = ({
   asset,
   selectedAssetIds,
-  onSelect,
+  onSelect
 }) => {
   const selected = useMemo(
     () => selectedAssetIds.includes(asset.id),
-    [selectedAssetIds, asset.id],
+    [selectedAssetIds, asset.id]
   );
 
   const type = useMemo(() => getAssetType(asset), [asset]);
@@ -24,7 +24,7 @@ const AssetListItem: FC<AssetItemProps> = ({
       e.stopPropagation();
       onSelect?.(asset.id);
     },
-    [asset, onSelect],
+    [asset, onSelect]
   );
 
   const formattedDate = useMemo(
@@ -35,9 +35,9 @@ const AssetListItem: FC<AssetItemProps> = ({
         day: "numeric",
         hour: "2-digit",
         minute: "2-digit",
-        second: "2-digit",
+        second: "2-digit"
       }),
-    [asset.createdAt],
+    [asset.createdAt]
   );
 
   const formattedSize = useMemo(() => formatBytes(asset.size), [asset.size]);
@@ -81,9 +81,9 @@ const Wrapper = styled("div")<{ selected?: boolean }>(
     overflow: "hidden",
     ["&:hover"]: {
       background: selected ? theme.select.main : theme.relative.light,
-      borderRadius: theme.radius.small,
-    },
-  }),
+      borderRadius: theme.radius.small
+    }
+  })
 );
 
 const Thumbnail = styled("div")(() => ({
@@ -91,7 +91,7 @@ const Thumbnail = styled("div")(() => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const AssetName = styled("div")(() => ({
@@ -100,13 +100,13 @@ const AssetName = styled("div")(() => ({
   textOverflow: "ellipsis",
   width: "50%",
   flexGrow: 0,
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const Col = styled("div")<{ width: number }>(({ width }) => ({
   width: `${width}%`,
   flexGrow: 0,
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 function formatBytes(bytes: number): string {
diff --git a/web/src/beta/features/AssetsManager/item/utils.ts b/web/src/beta/features/AssetsManager/item/utils.ts
index efc9655fb..d3d0fbccf 100644
--- a/web/src/beta/features/AssetsManager/item/utils.ts
+++ b/web/src/beta/features/AssetsManager/item/utils.ts
@@ -2,7 +2,7 @@ import {
   GIS_FILE_TYPES,
   GisType,
   IMAGE_FILE_TYPES,
-  ImageType,
+  ImageType
 } from "../constants";
 import { Asset } from "../types";
 
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx
index 193a68820..d273d5c5d 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Members/ListItem.tsx
@@ -37,7 +37,7 @@ const StyledListItem = styled("div")(({ theme }) => ({
   alignItems: "center",
   background: theme.bg[1],
   borderRadius: theme.radius.normal,
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const Avatar = styled("div")(({ theme }) => ({
@@ -47,10 +47,10 @@ const Avatar = styled("div")(({ theme }) => ({
   background: theme.bg[2],
   display: "flex",
   alignItems: "center",
-  justifyContent: "center",
+  justifyContent: "center"
 }));
 
 const TypographyWrapper = styled("div")(() => ({
   overflow: "hidden",
-  textOverflow: "ellipsis",
+  textOverflow: "ellipsis"
 }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx
index d1e236784..7c43b6297 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Members/index.tsx
@@ -8,7 +8,7 @@ import { Workspace } from "../../type";
 import ListItem from "./ListItem";
 
 const Members: FC<{ currentWorkspace?: Workspace }> = ({
-  currentWorkspace,
+  currentWorkspace
 }) => {
   const t = useT();
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -24,7 +24,7 @@ const Members: FC<{ currentWorkspace?: Workspace }> = ({
     const filtered = currentWorkspace.members.filter(
       (member) =>
         member?.user?.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        member?.user?.email?.toLowerCase().includes(searchQuery.toLowerCase()),
+        member?.user?.email?.toLowerCase().includes(searchQuery.toLowerCase())
     );
     setFilteredMembers(filtered);
   };
@@ -80,7 +80,7 @@ const Wrapper = styled("div")(() => ({
   display: "grid",
   gridTemplateRows: "auto 1fr",
   boxSizing: "border-box",
-  height: "100%",
+  height: "100%"
 }));
 
 const Search = styled("div")(({ theme }) => ({
@@ -91,8 +91,8 @@ const Search = styled("div")(({ theme }) => ({
   padding: theme.spacing.largest,
   "@media (min-width: 650px)": {
     maxWidth: "550px",
-    gridTemplateColumns: "2fr 1fr",
-  },
+    gridTemplateColumns: "2fr 1fr"
+  }
 }));
 
 const ListWrapper = styled("div")(({ theme }) => ({
@@ -101,12 +101,12 @@ const ListWrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.normal,
   overflowY: "auto",
   boxSizing: "border-box",
-  padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px ${theme.spacing.largest}px`,
+  padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px ${theme.spacing.largest}px`
 }));
 
 const TemplateWrapper = styled("div")(() => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  height: "70vh",
+  height: "70vh"
 }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
index 1be95e348..fc41f57a8 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
@@ -10,7 +10,7 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
   selectedProjectId,
   onProjectOpen,
   onProjectSelect,
-  onProjectUpdate,
+  onProjectUpdate
 }) => {
   const theme = useTheme();
 
@@ -25,12 +25,12 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
-    handleProjectStarClick,
+    handleProjectStarClick
   } = useHooks({
     project,
     selectedProjectId,
     onProjectUpdate,
-    onProjectSelect,
+    onProjectSelect
   });
 
   return (
@@ -93,8 +93,8 @@ const Card = styled("div")(() => ({
   flexDirection: "column",
   height: "220px",
   "@media (max-width: 567px)": {
-    height: "171px",
-  },
+    height: "171px"
+  }
 }));
 
 const CardImage = styled("div")<{
@@ -110,7 +110,7 @@ const CardImage = styled("div")<{
   borderRadius: theme.radius.normal,
   boxSizing: "border-box",
   cursor: "pointer",
-  border: `1px solid ${isHovered ? theme.outline.weak : "transparent"}`,
+  border: `1px solid ${isHovered ? theme.outline.weak : "transparent"}`
 }));
 
 const StarButtonWrapper = styled("div")<{
@@ -121,25 +121,25 @@ const StarButtonWrapper = styled("div")<{
   position: "absolute",
   top: "10px",
   right: "10px",
-  opacity: isSelected || isStarred || isHovered ? 1 : 0,
+  opacity: isSelected || isStarred || isHovered ? 1 : 0
 }));
 
 const CardFooter = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.smallest,
-  padding: `0 ${theme.spacing.smallest}`,
+  padding: `0 ${theme.spacing.smallest}`
 }));
 
 const PublishStatus = styled("div")(({ theme }) => ({
   height: "12px",
   width: "12px",
   borderRadius: "50%",
-  background: theme.publish.main,
+  background: theme.publish.main
 }));
 
 const CardTitleWrapper = styled("div")(() => ({
-  flex: 1,
+  flex: 1
 }));
 
 const CardTitle = styled("div")(({ theme }) => ({
@@ -153,5 +153,5 @@ const CardTitle = styled("div")(({ theme }) => ({
   WebkitLineClamp: 1,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  cursor: "pointer",
+  cursor: "pointer"
 }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
index e6e25277a..ebfc102f0 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
@@ -2,7 +2,7 @@ import {
   Button,
   PopupMenu,
   TextInput,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { convertTimeToString } from "@reearth/beta/utils/time";
 import { styled, useTheme } from "@reearth/services/theme";
@@ -16,17 +16,17 @@ const ProjectListViewItem: FC<ProjectProps> = ({
   selectedProjectId,
   onProjectOpen,
   onProjectSelect,
-  onProjectUpdate,
+  onProjectUpdate
 }) => {
   const theme = useTheme();
 
   const createAt: Date = useMemo(
     () => (project.createdAt ? new Date(project.createdAt) : new Date()),
-    [project.createdAt],
+    [project.createdAt]
   );
   const UpdatedAt: Date = useMemo(
     () => (project.updatedAt ? new Date(project.updatedAt) : new Date()),
-    [project.updatedAt],
+    [project.updatedAt]
   );
 
   const {
@@ -40,12 +40,12 @@ const ProjectListViewItem: FC<ProjectProps> = ({
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
-    handleProjectStarClick,
+    handleProjectStarClick
   } = useHooks({
     project,
     selectedProjectId,
     onProjectUpdate,
-    onProjectSelect,
+    onProjectSelect
   });
 
   return (
@@ -125,8 +125,8 @@ const ListWrapper = styled("div")<{ isSelected: boolean; isHovered: boolean }>(
     padding: `${theme.spacing.small}px 0`,
     alignItems: "center",
     boxSizing: "border-box",
-    overflow: "hidden",
-  }),
+    overflow: "hidden"
+  })
 );
 
 const ProjectImage = styled("div")<{ backgroundImage?: string | null }>(
@@ -136,8 +136,8 @@ const ProjectImage = styled("div")<{ backgroundImage?: string | null }>(
       : theme.bg[1],
     borderRadius: theme.radius.normal,
     height: "32px",
-    width: "55px",
-  }),
+    width: "55px"
+  })
 );
 
 const ThumbnailCol = styled("div")(() => ({
@@ -148,7 +148,7 @@ const ThumbnailCol = styled("div")(() => ({
 const ActionWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const ProjectNameCol = styled("div")(({ theme }) => ({
@@ -164,14 +164,13 @@ const PublishStatus = styled("div")<{ status?: boolean }>(
     height: "12px",
     width: "12px",
     borderRadius: "50%",
-    background: status ? theme.publish.main : "transparent",
-  }),
+    background: status ? theme.publish.main : "transparent"
+  })
 );
 
 const TimeCol = styled("div")(() => ({
   flex: "0 0 20%",
   flexShrink: 0
-
 }));
 
 const ActionCol = styled("div")(() => ({
@@ -184,7 +183,7 @@ const StarButtonWrapper = styled("div")<{
   isStarred: boolean;
   isHovered: boolean;
 }>(({ isSelected, isStarred, isHovered }) => ({
-  opacity: isSelected || isStarred || isHovered ? 1 : 0,
+  opacity: isSelected || isStarred || isHovered ? 1 : 0
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -197,5 +196,5 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   WebkitBoxOrient: "vertical",
   WebkitLineClamp: 1,
   overflow: "hidden",
-  textOverflow: "ellipsis",
+  textOverflow: "ellipsis"
 }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
index e2e4a15ac..916fd784e 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
@@ -16,7 +16,7 @@ export default ({
   project,
   selectedProjectId,
   onProjectUpdate,
-  onProjectSelect,
+  onProjectSelect
 }: Props) => {
   const t = useT();
 
@@ -33,7 +33,7 @@ export default ({
     if (!project || projectName === project.name) return setIsEditing(false);
     const updatedProject: ProjectType = {
       ...project,
-      name: projectName,
+      name: projectName
     };
     onProjectUpdate?.(updatedProject, project.id);
     setIsEditing(false);
@@ -54,19 +54,19 @@ export default ({
       id: "rename",
       title: t("Rename"),
       icon: "pencilLine",
-      onClick: () => handleProjectNameEdit?.(),
+      onClick: () => handleProjectNameEdit?.()
     },
     {
       id: "setting",
       title: t("Project Setting"),
       path: `/settings/project/${project.id}`,
-      icon: "setting",
-    },
+      icon: "setting"
+    }
   ];
 
   const [, handleDoubleClick] = useDoubleClick(
     () => {},
-    () => handleProjectNameEdit(),
+    () => handleProjectNameEdit()
   );
 
   const handleProjectHover = useCallback((value: boolean) => {
@@ -78,7 +78,7 @@ export default ({
       e.stopPropagation();
       handleDoubleClick();
     },
-    [handleDoubleClick],
+    [handleDoubleClick]
   );
   const handleProjectStarClick = useCallback(
     (e: MouseEvent) => {
@@ -86,16 +86,16 @@ export default ({
       setIsStarred(!isStarred);
       const updatedProject: ProjectType = {
         ...project,
-        starred: !isStarred,
+        starred: !isStarred
       };
       onProjectUpdate?.(updatedProject, project.id);
     },
-    [isStarred, onProjectUpdate, project],
+    [isStarred, onProjectUpdate, project]
   );
 
   const publishStatus = useMemo(
     () => project.status === "published" || project.status === "limited",
-    [project.status],
+    [project.status]
   );
 
   return {
@@ -109,6 +109,6 @@ export default ({
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
-    handleProjectStarClick,
+    handleProjectStarClick
   };
 };
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
index 44d1d29bc..bf1b771f8 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
@@ -5,7 +5,7 @@ import {
   ModalPanel,
   TextArea,
   TextInput,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -17,14 +17,14 @@ type ProjectCreatorModalProps = {
   visible: boolean;
   onClose?: () => void;
   onProjectCreate: (
-    data: Pick<Project, "name" | "description" | "imageUrl">,
+    data: Pick<Project, "name" | "description" | "imageUrl">
   ) => void;
 };
 
 const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
   visible,
   onClose,
-  onProjectCreate,
+  onProjectCreate
 }) => {
   const t = useT();
   const [projectName, setProjectName] = useState("");
@@ -45,7 +45,7 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
     const data = {
       name: projectName,
       description,
-      imageUrl,
+      imageUrl
     };
     onProjectCreate(data);
     onClose?.();
@@ -112,20 +112,20 @@ const Form = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.large,
-  padding: theme.spacing.normal,
+  padding: theme.spacing.normal
 }));
 
 const ContentWrapper = styled("div")(({ theme }) => ({
   background: theme.bg[1],
   borderBottom: `1px solid ${theme.outline.weak}`,
-  borderTop: `1px solid ${theme.outline.weak}`,
+  borderTop: `1px solid ${theme.outline.weak}`
 }));
 
 const FormInputWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.smallest,
-  width: "100%",
+  width: "100%"
 }));
 
 const Label = styled("div")(() => ({}));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx
index 988adb95a..c1b0774f0 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx
@@ -1,4 +1,3 @@
-
 import { Collapse, Icon } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
@@ -6,24 +5,31 @@ import { FC } from "react";
 
 import useHooks from "./hooks";
 
-
-const StarredProject: FC<{workspaceId?: string }> = ({workspaceId}) => {
+const StarredProject: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
   const t = useT();
   const theme = useTheme();
-  const { starredProjects, handleProjectOpen } =  useHooks(workspaceId);
+  const { starredProjects, handleProjectOpen } = useHooks(workspaceId);
 
   return (
     <Wrapper>
-      <Collapse iconPosition="left" title={t("Starred")} size="small" weight="bold">
+      <Collapse
+        iconPosition="left"
+        title={t("Starred")}
+        size="small"
+        weight="bold"
+      >
         <ProjectsWrapper>
-          {
-            starredProjects?.map(statredProject => (
-              <Item onClick={() => handleProjectOpen(statredProject?.scene?.id)}>
+          {starredProjects?.map((statredProject) =>
+            statredProject ? (
+              <Item
+                key={statredProject.id}
+                onClick={() => handleProjectOpen(statredProject?.scene?.id)}
+              >
                 <IconWrapper icon="notebook" color={theme.content.weak} />
                 <TitleWrapper>{statredProject?.name}</TitleWrapper>
               </Item>
-            ) )
-          }
+            ) : null
+          )}
         </ProjectsWrapper>
       </Collapse>
     </Wrapper>
@@ -35,7 +41,7 @@ export default StarredProject;
 const Wrapper = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
-  flexGrow: 1,
+  flexGrow: 1
 }));
 
 const ProjectsWrapper = styled("div")(({ theme }) => ({
@@ -43,7 +49,7 @@ const ProjectsWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   paddingLeft: theme.spacing.small,
   height: "calc(92vh - 400px)",
-  overflowY: "auto", 
+  overflowY: "auto"
 }));
 
 const Item = styled("div")(({ theme }) => ({
@@ -53,15 +59,14 @@ const Item = styled("div")(({ theme }) => ({
   alignItems: "center",
   alignSelf: "stretch",
   cursor: "pointer",
-  "&:hover":{
+  "&:hover": {
     backgroundColor: theme.bg[2],
-    borderRadius: theme.radius.small,
-
+    borderRadius: theme.radius.small
   }
 }));
 
 const IconWrapper = styled(Icon)(() => ({
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -70,5 +75,5 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.regular,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+  whiteSpace: "nowrap"
 }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
index 07c157392..e6c139be8 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
@@ -1,14 +1,14 @@
 import { ManagerLayout } from "@reearth/beta/ui/components/ManagerBase";
 import {
   autoFillPage,
-  onScrollToBottom,
+  onScrollToBottom
 } from "@reearth/beta/utils/infinite-scroll";
 import { useProjectFetcher } from "@reearth/services/api";
 import {
   ProjectSortField,
   PublishmentStatus,
   SortDirection,
-  Visualizer,
+  Visualizer
 } from "@reearth/services/gql";
 import {
   useCallback,
@@ -16,7 +16,7 @@ import {
   useState,
   MouseEvent,
   useEffect,
-  useRef,
+  useRef
 } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -34,8 +34,12 @@ export type SortType =
   | "date-updated";
 
 export default (workspaceId?: string) => {
-  const { useProjectsQuery, useUpdateProject, useCreateProject, useStarredProjectsQuery } =
-    useProjectFetcher();
+  const {
+    useProjectsQuery,
+    useUpdateProject,
+    useCreateProject,
+    useStarredProjectsQuery
+  } = useProjectFetcher();
   const navigate = useNavigate();
 
   const [searchTerm, setSearchTerm] = useState<string>();
@@ -44,17 +48,23 @@ export default (workspaceId?: string) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
-  const { starredProjects } = useStarredProjectsQuery(workspaceId)
+  const { starredProjects } = useStarredProjectsQuery(workspaceId);
 
-  const { projects, loading, isRefetching, hasMoreProjects, endCursor, fetchMore } =
-    useProjectsQuery({
-      teamId: workspaceId || "",
-      pagination: {
-        first: pagination(sortValue).first,
-      },
-      sort: pagination(sortValue).sortBy,
-      keyword: searchTerm,
-    });
+  const {
+    projects,
+    loading,
+    isRefetching,
+    hasMoreProjects,
+    endCursor,
+    fetchMore
+  } = useProjectsQuery({
+    teamId: workspaceId || "",
+    pagination: {
+      first: pagination(sortValue).first
+    },
+    sort: pagination(sortValue).sortBy,
+    keyword: searchTerm
+  });
 
   const filtedProjects = useMemo(() => {
     return (projects ?? [])
@@ -72,9 +82,9 @@ export default (workspaceId?: string) => {
               updatedAt: new Date(project.updatedAt),
               createdAt: new Date(project.createdAt),
               coreSupport: project.coreSupport,
-              starred: project.starred,
+              starred: project.starred
             }
-          : undefined,
+          : undefined
       )
       .filter((project): project is Project => !!project);
   }, [projects]);
@@ -89,9 +99,9 @@ export default (workspaceId?: string) => {
         variables: {
           pagination: {
             after: endCursor,
-            first: PROJECTS_PER_PAGE,
-          },
-        },
+            first: PROJECTS_PER_PAGE
+          }
+        }
       });
       isFetchingMore.current = false;
     }
@@ -113,7 +123,7 @@ export default (workspaceId?: string) => {
       if (!value) return;
       setSort((value as SortType) ?? sortValue);
     },
-    [sortValue],
+    [sortValue]
   );
 
   // search
@@ -144,10 +154,10 @@ export default (workspaceId?: string) => {
         data.name,
         true,
         data.description,
-        data.imageUrl || "",
+        data.imageUrl || ""
       );
     },
-    [useCreateProject, workspaceId],
+    [useCreateProject, workspaceId]
   );
 
   // project update
@@ -156,7 +166,7 @@ export default (workspaceId?: string) => {
       await useUpdateProject({ projectId, ...project });
       // if (sortBy) refetch();
     },
-    [useUpdateProject],
+    [useUpdateProject]
   );
 
   // project open
@@ -166,7 +176,7 @@ export default (workspaceId?: string) => {
         navigate(`/scene/${sceneId}/map`);
       }
     },
-    [navigate],
+    [navigate]
   );
 
   // selection
@@ -177,22 +187,22 @@ export default (workspaceId?: string) => {
       e?.stopPropagation();
       if (projectId) {
         setSelectedProject(
-          filtedProjects.find((project) => project.id === projectId),
+          filtedProjects.find((project) => project.id === projectId)
         );
       } else {
         setSelectedProject(undefined);
       }
     },
-    [filtedProjects],
+    [filtedProjects]
   );
 
   // layout
   const [layout, setLayout] = useState(
     ["grid", "list"].includes(
-      localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) ?? "",
+      localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) ?? ""
     )
       ? (localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) as ManagerLayout)
-      : "grid",
+      : "grid"
   );
 
   const handleLayoutChange = useCallback((newView?: ManagerLayout) => {
@@ -249,7 +259,7 @@ export default (workspaceId?: string) => {
     handleScrollToBottom: onScrollToBottom,
     handleLayoutChange,
     handleProjectSortChange,
-    handleSearch,
+    handleSearch
   };
 };
 
@@ -272,35 +282,35 @@ const pagination = (sort?: SortType) => {
       first = PROJECTS_PER_PAGE;
       sortBy = {
         field: ProjectSortField.Createdat,
-        direction: SortDirection.Desc,
+        direction: SortDirection.Desc
       };
       break;
     case "date-reversed":
       first = PROJECTS_PER_PAGE;
       sortBy = {
         field: ProjectSortField.Createdat,
-        direction: SortDirection.Asc,
+        direction: SortDirection.Asc
       };
       break;
     case "date-updated":
       first = PROJECTS_PER_PAGE;
       sortBy = {
         field: ProjectSortField.Updatedat,
-        direction: SortDirection.Desc,
+        direction: SortDirection.Desc
       };
       break;
     case "name":
       first = PROJECTS_PER_PAGE;
       sortBy = {
         field: ProjectSortField.Name,
-        direction: SortDirection.Asc,
+        direction: SortDirection.Asc
       };
       break;
     case "name-reverse":
       first = PROJECTS_PER_PAGE;
       sortBy = {
         field: ProjectSortField.Name,
-        direction: SortDirection.Desc,
+        direction: SortDirection.Desc
       };
       break;
     default:
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
index 4eccc890c..6935d67c0 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -4,7 +4,7 @@ import {
   ManagerHeader,
   ManagerHeaderButton,
   ManagerLayout,
-  ManagerWrapper,
+  ManagerWrapper
 } from "@reearth/beta/ui/components/ManagerBase";
 import ManagerEmptyContent from "@reearth/beta/ui/components/ManagerBase/ManagerEmptyContent";
 import { useT } from "@reearth/services/i18n";
@@ -39,7 +39,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
     handleScrollToBottom,
     handleLayoutChange,
     handleProjectSortChange,
-    handleSearch,
+    handleSearch
   } = useHooks(workspaceId);
 
   const theme = useTheme();
@@ -50,9 +50,9 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
       { value: "date-reversed", label: t("First Created") },
       { value: "date-updated", label: t("Last Updated") },
       { value: "name", label: t("A To Z") },
-      { value: "name-reverse", label: t("Z To A") },
+      { value: "name-reverse", label: t("Z To A") }
     ],
-    [t],
+    [t]
   );
 
   return (
@@ -67,7 +67,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
             icon="plus"
             appearance="primary"
             onClick={showProjectCreator}
-          />,
+          />
         ]}
         sortValue={sortValue}
         sortOptions={sortOptions}
@@ -78,104 +78,112 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
         searchPlaceholder={t("Search in all assets library")}
         onSearch={handleSearch}
       />
-        {isLoading ? (
-              <LoadingWrapper>
-                <Loading relative />
-              </LoadingWrapper>
-            ) :  filtedProjects.length ?  <ManagerContent>
-            <ContentWrapper>
-              <BreadcrumbContainer>
-                <Breadcrumb
-                  items={[
-                    {
-                      title: (
-                        <Typography size="h5" weight="bold" color={theme.content.weak}>
-                          {t("All projects")}
-                        </Typography>
-                      ),
-                    },
-                    ...(searchTerm
-                      ? [
-                          {
-                            title: (
-                              <Typography
-                                size="h5"
-                                weight="bold"
-                                color={theme.content.weak}
-                              >
-                                {`${t("Search Result for")} "${searchTerm}"`}
-                              </Typography>
-                            ),
-                          },
-                        ]
-                      : []),
-                  ]}
-                />
-              </BreadcrumbContainer>
-                   {layout === "list" && (
+      {filtedProjects?.length ? (
+        <ManagerContent>
+          <ContentWrapper>
+            <BreadcrumbContainer>
+              <Breadcrumb
+                items={[
+                  {
+                    title: (
+                      <Typography
+                        size="h5"
+                        weight="bold"
+                        color={theme.content.weak}
+                      >
+                        {t("All projects")}
+                      </Typography>
+                    )
+                  },
+                  ...(searchTerm
+                    ? [
+                        {
+                          title: (
+                            <Typography
+                              size="h5"
+                              weight="bold"
+                              color={theme.content.weak}
+                            >
+                              {`${t("Search Result for")} "${searchTerm}"`}
+                            </Typography>
+                          )
+                        }
+                      ]
+                    : [])
+                ]}
+              />
+            </BreadcrumbContainer>
+            {layout === "list" && (
               <ListHeader width={contentWidth}>
-              <ThumbnailCol />
-              <ProjectNameCol>
-                <Typography size="body" color={theme.content.weak}>
-                  {t("Project Name")}
-                </Typography>
-              </ProjectNameCol>
-              <TimeCol>
-                <Typography size="body" color={theme.content.weak}>
-                  {t("Updated At")}
-                </Typography>
-              </TimeCol>
-              <TimeCol>
-                <Typography size="body" color={theme.content.weak}>
-                  {t("Created At")}
-                </Typography>
-              </TimeCol>
-              <ActionCol />
+                <ThumbnailCol />
+                <ProjectNameCol>
+                  <Typography size="body" color={theme.content.weak}>
+                    {t("Project Name")}
+                  </Typography>
+                </ProjectNameCol>
+                <TimeCol>
+                  <Typography size="body" color={theme.content.weak}>
+                    {t("Updated At")}
+                  </Typography>
+                </TimeCol>
+                <TimeCol>
+                  <Typography size="body" color={theme.content.weak}>
+                    {t("Created At")}
+                  </Typography>
+                </TimeCol>
+                <ActionCol />
               </ListHeader>
-            
+            )}
+            <ProjectsWrapper
+              ref={wrapperRef}
+              onScroll={(e) => {
+                if (!isLoading && hasMoreProjects) {
+                  handleScrollToBottom(e, handleGetMoreProjects);
+                }
+              }}
+            >
+              <ProjectsContainer ref={contentRef}>
+                <ProjectsGroup layout={layout}>
+                  {filtedProjects.map((project) =>
+                    layout === "grid" ? (
+                      <ProjectGridViewItem
+                        key={project.id}
+                        project={project}
+                        selectedProjectId={selectedProject?.id}
+                        onProjectUpdate={handleProjectUpdate}
+                        onProjectSelect={handleProjectSelect}
+                        onProjectOpen={() => handleProjectOpen(project.sceneId)}
+                      />
+                    ) : (
+                      <ProjectListViewItem
+                        key={project.id}
+                        project={project}
+                        selectedProjectId={selectedProject?.id}
+                        onProjectUpdate={handleProjectUpdate}
+                        onProjectSelect={handleProjectSelect}
+                        onProjectOpen={() => handleProjectOpen(project.sceneId)}
+                      />
+                    )
+                  )}
+                </ProjectsGroup>
+              </ProjectsContainer>
+              {isLoading && (
+                <LoadingWrapper>
+                  <Loading relative />
+                </LoadingWrapper>
               )}
-              <ProjectsWrapper
-                ref={wrapperRef}
-                onScroll={e => {
-                  if(!isLoading && hasMoreProjects){
-                    handleScrollToBottom(e, handleGetMoreProjects)
-                  }
-                }}>
-                <ProjectsContainer ref={contentRef}>
-                  <ProjectsGroup layout={layout}>
-                    {filtedProjects.map(project =>
-                      layout === "grid" ? (
-                        <ProjectGridViewItem
-                          key={project.id}
-                          project={project}
-                          selectedProjectId={selectedProject?.id}
-                          onProjectUpdate={handleProjectUpdate}
-                          onProjectSelect={handleProjectSelect}
-                          onProjectOpen={() => handleProjectOpen(project.sceneId)}
-                        />
-                      ) : (
-                        <ProjectListViewItem
-                          key={project.id}
-                          project={project}
-                          selectedProjectId={selectedProject?.id}
-                          onProjectUpdate={handleProjectUpdate}
-                          onProjectSelect={handleProjectSelect}
-                          onProjectOpen={() => handleProjectOpen(project.sceneId)}
-                        />
-                      ),
-                    )}
-                  </ProjectsGroup>
-                </ProjectsContainer>
-              </ProjectsWrapper>
-            </ContentWrapper>
-           </ManagerContent> :
-                  <ManagerEmptyContent>
-                  <Typography size="h5" color={theme.content.weak}>
-                    {t("No Project has been created yet")}
-                  </Typography>
-                </ManagerEmptyContent>
-        
-                  }
+            </ProjectsWrapper>
+          </ContentWrapper>
+        </ManagerContent>
+      ) : isLoading ? (
+        <Loading relative />
+      ) : (
+        <ManagerEmptyContent>
+          <Typography size="h5" color={theme.content.weak}>
+            {t("No Project has been created yet")}
+          </Typography>
+        </ManagerEmptyContent>
+      )}
 
       {projectCreatorVisible && (
         <ProjectCreatorModal
@@ -195,7 +203,7 @@ const ContentWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.normal,
   flex: 1,
-  height: 0,
+  height: 0
 }));
 
 const ProjectsWrapper = styled("div")(() => ({
@@ -203,58 +211,58 @@ const ProjectsWrapper = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   flex: 1,
-  overflow: "auto",
+  overflow: "auto"
 }));
 
 const BreadcrumbContainer = styled("div")(({ theme }) => ({
-  padding: `0 ${theme.spacing.largest}px`,
+  padding: `0 ${theme.spacing.largest}px`
 }));
 
 const ProjectsContainer = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.large,
   flexDirection: "column",
-  padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px ${theme.spacing.largest}px`,
-
+  padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px ${theme.spacing.largest}px`
 }));
 
-const ProjectsGroup = styled("div")<{ layout: ManagerLayout }>(({ theme, layout }) => ({
-  ...(layout === "grid"
-    ? {
-        display: "grid",
-        gap: theme.spacing.normal,
-        width: "100%",
-        gridTemplateColumns: "repeat(4, 1fr)",
+const ProjectsGroup = styled("div")<{ layout: ManagerLayout }>(
+  ({ theme, layout }) => ({
+    ...(layout === "grid"
+      ? {
+          display: "grid",
+          gap: theme.spacing.normal,
+          width: "100%",
+          gridTemplateColumns: "repeat(4, 1fr)",
 
-        "@media (max-width: 1200px)": {
-          gridTemplateColumns: "repeat(3, 1fr)",
-        },
-        "@media (max-width: 900px)": {
-          gridTemplateColumns: "repeat(2, 1fr)",
-        },
-        "@media (max-width: 600px)": {
-          gridTemplateColumns: "1fr",
-        },
-      }
-    : {}),
-  ...(layout === "list"
-    ? {
-        display: "flex",
-        flexDirection: "column",
-        gap: theme.spacing.normal,
-      }
-    : {}),
-}));
+          "@media (max-width: 1200px)": {
+            gridTemplateColumns: "repeat(3, 1fr)"
+          },
+          "@media (max-width: 900px)": {
+            gridTemplateColumns: "repeat(2, 1fr)"
+          },
+          "@media (max-width: 600px)": {
+            gridTemplateColumns: "1fr"
+          }
+        }
+      : {}),
+    ...(layout === "list"
+      ? {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing.normal
+        }
+      : {})
+  })
+);
 
-const ListHeader = styled("div")<{width: number}>(({ width, theme }) => ({
+const ListHeader = styled("div")<{ width: number }>(({ width, theme }) => ({
   display: "flex",
   alignItems: "center",
   boxSizing: "border-box",
   padding: `${theme.spacing.smallest}px ${theme.spacing.largest}px`,
-  width: width === 0 ? "100%" : width,
+  width: width === 0 ? "100%" : width
 }));
 
-
 const ThumbnailCol = styled("div")(() => ({
   width: 120,
   flexShrink: 0
@@ -268,7 +276,6 @@ const ProjectNameCol = styled("div")(() => ({
 const TimeCol = styled("div")(() => ({
   flex: "0 0 20%",
   flexShrink: 0
-
 }));
 
 const ActionCol = styled("div")(() => ({
@@ -278,5 +285,5 @@ const ActionCol = styled("div")(() => ({
 
 const LoadingWrapper = styled("div")(() => ({
   width: "100%",
-  height: "100%",
+  height: 100
 }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
index 9b75ddfe4..4424b56bf 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
@@ -15,7 +15,7 @@ export type ContainerProps = {
 const ContentsContainer: FC<ContainerProps> = ({
   tab,
   workspaceId,
-  currentWorkspace,
+  currentWorkspace
 }) => {
   return (
     <Wrapper>
@@ -31,7 +31,7 @@ const ContentsContainer: FC<ContainerProps> = ({
 const Wrapper = styled("div")(({ theme }) => ({
   flex: 1,
   background: theme.bg[0],
-  width: "100%",
+  width: "100%"
 }));
 
 export default ContentsContainer;
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
index b34deccb6..237e8f3fa 100644
--- a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
+++ b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
@@ -3,7 +3,7 @@ import {
   SidebarSection,
   SidebarTopSectionWrapper,
   SidebarVersion,
-  SidebarWrapper,
+  SidebarWrapper
 } from "@reearth/beta/ui/components/Sidebar";
 import { useT } from "@reearth/services/i18n";
 import { FC } from "react";
@@ -31,7 +31,7 @@ const LeftSidePanel: FC<Props> = ({
   isPersonal,
   workspaces,
   onSignOut,
-  onWorkspaceChange,
+  onWorkspaceChange
 }) => {
   const t = useT();
 
@@ -57,7 +57,7 @@ const LeftSidePanel: FC<Props> = ({
               disabled={tab.disabled}
             />
           ))}
-          <StarredProject  workspaceId={currentWorkspace?.id}/>
+          <StarredProject workspaceId={currentWorkspace?.id} />
         </SidebarTopSectionWrapper>
       </SidebarSection>
       <SidebarSection>
diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
index 09ad18e6d..d79e87c96 100644
--- a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
+++ b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
@@ -2,7 +2,7 @@ import {
   Icon,
   PopupMenu,
   PopupMenuItem,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
@@ -33,7 +33,7 @@ export const Profile: FC<ProfileProp> = ({
   workspaces,
   currentWorkspace,
   onWorkspaceChange,
-  onSignOut,
+  onSignOut
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -52,16 +52,16 @@ export const Profile: FC<ProfileProp> = ({
           hasCustomSubMenu: true,
           personal: w.personal,
           selected: currentWorkspace?.id === w.id,
-          onClick: () => onWorkspaceChange?.(w.id),
+          onClick: () => onWorkspaceChange?.(w.id)
         };
-      }),
+      })
     },
     {
       id: "signOut",
       title: t("Log Out"),
       icon: "exit",
-      onClick: onSignOut,
-    },
+      onClick: onSignOut
+    }
   ];
 
   return (
@@ -72,13 +72,17 @@ export const Profile: FC<ProfileProp> = ({
       <ProfileWrapper>
         {isPersonal && (
           <Avatar>
-            <Typography size="body">{currentUser?.charAt(0).toUpperCase()}</Typography>
+            <Typography size="body">
+              {currentUser?.charAt(0).toUpperCase()}
+            </Typography>
           </Avatar>
         )}
         <TitleWrapper>{currentUser}</TitleWrapper>
         <PopupWrapper>
           <PopupMenu
-            label={<Icon color={theme.content.weak} icon="caretDown" size="small" />}
+            label={
+              <Icon color={theme.content.weak} icon="caretDown" size="small" />
+            }
             menu={popupMenu}
           />
         </PopupWrapper>
@@ -93,13 +97,13 @@ const Wrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.normal,
   borderBottom: `1px solid ${theme.outline.weaker}`,
   alignContent: "center",
-  padding: theme.spacing.normal,
+  padding: theme.spacing.normal
 }));
 
 const ProfileWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.small,
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 const Avatar = styled("div")(({ theme }) => ({
@@ -110,7 +114,7 @@ const Avatar = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -119,7 +123,7 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.bold,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  wordBreak: "break-all",
+  wordBreak: "break-all"
 }));
 
 const PopupWrapper = styled("div")(() => ({}));
diff --git a/web/src/beta/features/Dashboard/hooks.ts b/web/src/beta/features/Dashboard/hooks.ts
index 68a9e7ddf..51ed34645 100644
--- a/web/src/beta/features/Dashboard/hooks.ts
+++ b/web/src/beta/features/Dashboard/hooks.ts
@@ -21,7 +21,7 @@ export default ({ workspaceId, topTabItems, bottomTabsItems }: Props) => {
 
   const workspaces = (data?.teams as Workspace[]) ?? [];
   const workspace = workspaces.find(
-    (workspace) => workspace.id === workspaceId,
+    (workspace) => workspace.id === workspaceId
   );
   const isPersonal = !!workspaceId && workspaceId === data?.myTeam?.id;
 
@@ -38,9 +38,9 @@ export default ({ workspaceId, topTabItems, bottomTabsItems }: Props) => {
           ...tab,
           path:
             tab.path ||
-            `/dashboard/${workspaceId}/${tab.id === "project" ? "" : tab.id}`,
+            `/dashboard/${workspaceId}/${tab.id === "project" ? "" : tab.id}`
         })),
-    [topTabItems, isPersonal, workspaceId],
+    [topTabItems, isPersonal, workspaceId]
   );
 
   const bottomTabs = useMemo(() => bottomTabsItems, [bottomTabsItems]);
@@ -50,7 +50,7 @@ export default ({ workspaceId, topTabItems, bottomTabsItems }: Props) => {
       setCurrentWorkspace({
         ...workspace,
         personal: isPersonal,
-        members: workspace.members ?? [],
+        members: workspace.members ?? []
       });
     }
   }, [currentWorkspace, workspace, setCurrentWorkspace, isPersonal]);
@@ -62,7 +62,7 @@ export default ({ workspaceId, topTabItems, bottomTabsItems }: Props) => {
         navigate(`/dashboard/${workspaceId}`);
       }
     },
-    [workspace, setCurrentWorkspace, navigate],
+    [workspace, setCurrentWorkspace, navigate]
   );
 
   return {
@@ -73,6 +73,6 @@ export default ({ workspaceId, topTabItems, bottomTabsItems }: Props) => {
     bottomTabs,
     currentTab,
     onSignOut: logout,
-    handleWorkspaceChange,
+    handleWorkspaceChange
   };
 };
diff --git a/web/src/beta/features/Dashboard/index.tsx b/web/src/beta/features/Dashboard/index.tsx
index be625a01a..5f1080be5 100644
--- a/web/src/beta/features/Dashboard/index.tsx
+++ b/web/src/beta/features/Dashboard/index.tsx
@@ -2,13 +2,11 @@ import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/beta/ui/components/Sidebar";
 import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 
-
 import ContentsContainer from "./ContentsContainer";
 import useHooks from "./hooks";
 import LeftSidePanel from "./LeftSidePanel";
 import { TabItems } from "./type";
 
-
 export type DashboardProps = {
   workspaceId?: string;
 };
@@ -17,7 +15,7 @@ export const topTabItems: Omit<TabItems[], "active"> = [
   { id: "projects", text: "Projects", icon: "grid" },
   { id: "asset", text: "Assets", icon: "file" },
   { id: "members", text: "Members", icon: "users" },
-  { id: "bin", text: "Recycle bin", icon: "trash" },
+  { id: "bin", text: "Recycle bin", icon: "trash" }
 ];
 
 export const bottomTabsItems: Omit<TabItems[], "active"> = [
@@ -25,11 +23,11 @@ export const bottomTabsItems: Omit<TabItems[], "active"> = [
     id: "plugin",
     text: "Plugin Playground",
     icon: "puzzlePiece",
-    disabled: true,
+    disabled: true
   },
   { id: "documentary", text: "Documentary", icon: "book", disabled: true },
   { id: "community", text: "Community", icon: "usersFour", disabled: true },
-  { id: "help", text: "Help & Support", icon: "question", disabled: true },
+  { id: "help", text: "Help & Support", icon: "question", disabled: true }
 ];
 
 const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
@@ -41,7 +39,7 @@ const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
     workspaces,
     currentTab,
     onSignOut,
-    handleWorkspaceChange,
+    handleWorkspaceChange
   } = useHooks({ workspaceId, topTabItems, bottomTabsItems });
 
   return (
@@ -74,25 +72,25 @@ const Wrapper = styled("div")(({ theme }) => ({
   height: "100%",
   width: "100%",
   ["* ::-webkit-scrollbar"]: {
-    width: "8px",
+    width: "8px"
   },
   ["* ::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
-    borderRadius: "10px",
+    borderRadius: "10px"
   },
   ["* ::-webkit-scrollbar-thumb"]: {
     background: theme.relative.light,
-    borderRadius: "4px",
+    borderRadius: "4px"
   },
   ["* ::-webkit-scrollbar-thumb:hover"]: {
-    background: theme.relative.lighter,
+    background: theme.relative.lighter
   },
   overflowX: "hidden",
   minWidth: "630px",
   ["@media (max-width: 630px)"]: {
     width: "630px",
-    overflowX: "auto",
-  },
+    overflowX: "auto"
+  }
 }));
 
 const LeftSideWrapper = styled("div")(({ theme }) => ({
@@ -101,5 +99,5 @@ const LeftSideWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   width: DEFAULT_SIDEBAR_WIDTH,
   gap: theme.spacing.super,
-  boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.50)",
+  boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.50)"
 }));
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
index 554a65ee8..3ea772ef9 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CSV/index.tsx
@@ -3,13 +3,13 @@ import {
   SubmitWrapper,
   Wrapper,
   InputsWrapper,
-  ContentWrapper,
+  ContentWrapper
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import {
   Button,
   Icon,
   RadioGroup,
-  TextInput,
+  TextInput
 } from "@reearth/beta/lib/reearth-ui";
 import { AssetField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
@@ -33,9 +33,9 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const dataSourceOptions: DataSourceOptType = useMemo(
     () => [
       { label: t("From Assets"), value: "local" },
-      { label: t("From Web"), value: "url" },
+      { label: t("From Web"), value: "url" }
     ],
-    [t],
+    [t]
   );
 
   const handleSubmit = () => {
@@ -53,10 +53,10 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           type: "csv",
           csv: {
             latColumn: lat,
-            lngColumn: lng,
-          },
-        },
-      },
+            lngColumn: lng
+          }
+        }
+      }
     });
     onClose();
   };
@@ -108,7 +108,7 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           <Icon icon="lightBulb" color={theme.warning.main} size="large" />
           <TextWrapper>
             {t(
-              "Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below.",
+              "Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below."
             )}
           </TextWrapper>
         </Warning>
@@ -148,20 +148,20 @@ const CSV: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
 const Warning = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.small,
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 const TextWrapper = styled("div")(({ theme }) => ({
   color: theme.warning.main,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 const CoordinateWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.small,
   alignItems: "center",
-  width: "100%",
+  width: "100%"
 }));
 
 export default CSV;
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
index 0f26febd2..79edc7ffc 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/hooks.tsx
@@ -19,24 +19,24 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
     () => [
       { label: t("From Assets"), value: "local" },
       { label: t("From Web"), value: "url" },
-      { label: t("From Value"), value: "value" },
+      { label: t("From Value"), value: "value" }
     ],
-    [t],
+    [t]
   );
 
   const fileFormatOptions = [
     {
       value: "geojson",
-      label: "GeoJSON",
+      label: "GeoJSON"
     },
     {
       value: "kml",
-      label: "KML",
+      label: "KML"
     },
     {
       value: "czml",
-      label: "CZML",
-    },
+      label: "CZML"
+    }
   ];
 
   const isValidExtension = useCallback(() => {
@@ -79,10 +79,10 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
           type: fileFormat.toLowerCase() as DataType,
           value: parsedValue,
           geojson: {
-            useAsResource: prioritizePerformance,
-          },
-        },
-      },
+            useAsResource: prioritizePerformance
+          }
+        }
+      }
     });
     onClose();
   };
@@ -116,6 +116,6 @@ export default ({ sceneId, onClose, onSubmit }: DataProps) => {
     handleValueChange,
     handleFileFormatChange,
     handleDataSourceTypeChange,
-    handleSubmit,
+    handleSubmit
   };
 };
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
index 836ef456c..a902bdf91 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/Common/index.tsx
@@ -3,7 +3,7 @@ import {
   SubmitWrapper,
   Wrapper,
   InputsWrapper,
-  ContentWrapper,
+  ContentWrapper
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import {
   Selector,
@@ -11,7 +11,7 @@ import {
   Switcher,
   Button,
   TextInput,
-  TextArea,
+  TextArea
 } from "@reearth/beta/lib/reearth-ui";
 import { AssetField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
@@ -37,7 +37,7 @@ const CommonAsset: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     handleFileFormatChange,
     handleSubmit,
     setPrioritizePerformance,
-    isValidExtension,
+    isValidExtension
   } = useHooks({ sceneId, onSubmit, onClose });
 
   return (
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
index 15db8da72..3b7a473fe 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/ThreeDTiles/index.tsx
@@ -3,7 +3,7 @@ import {
   SubmitWrapper,
   Wrapper,
   InputsWrapper,
-  ContentWrapper,
+  ContentWrapper
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import { Button, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
@@ -25,9 +25,9 @@ const ThreeDTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
       config: {
         data: {
           url: value !== "" ? value : undefined,
-          type: "3dtiles",
-        },
-      },
+          type: "3dtiles"
+        }
+      }
     });
     onClose();
   };
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx
index f0ba2c090..91295a20a 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/VectorTiles/index.tsx
@@ -6,7 +6,7 @@ import {
   LayerNameListWrapper,
   LayerWrapper,
   SubmitWrapper,
-  Wrapper,
+  Wrapper
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import { Button, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
@@ -63,9 +63,9 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         data: {
           url: mvtUrlValue !== "" ? mvtUrlValue : undefined,
           type: "mvt",
-          layers: layerNameList.length === 1 ? layerNameList[0] : layerNameList,
-        },
-      },
+          layers: layerNameList.length === 1 ? layerNameList[0] : layerNameList
+        }
+      }
     });
     onClose();
   };
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx
index 50f90ea3b..995ec4cd7 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/WmsTiles/index.tsx
@@ -6,7 +6,7 @@ import {
   LayerNameListWrapper,
   LayerWrapper,
   SubmitWrapper,
-  Wrapper,
+  Wrapper
 } from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
 import { Button, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
@@ -28,7 +28,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const handleLayerNameAdd = () => {
     if (layerNameValue.trim() !== "") {
       const exist = layersNameList.some(
-        (layer: string) => layer === layerNameValue,
+        (layer: string) => layer === layerNameValue
       );
       if (!exist) setLayersNameList((prev) => [...prev, layerNameValue]);
       setLayerNameValue("");
@@ -66,9 +66,9 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           url: wmsUrlValue !== "" ? wmsUrlValue : undefined,
           type: "wms",
           layers:
-            LayerNameList.length === 1 ? layersNameList[0] : layersNameList,
-        },
-      },
+            LayerNameList.length === 1 ? layersNameList[0] : layersNameList
+        }
+      }
     });
     onClose();
   };
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx
index 9ef2b6419..02901273c 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import DataSourceLayerCreator from ".";
 
 const meta: Meta<typeof DataSourceLayerCreator> = {
-  component: DataSourceLayerCreator,
+  component: DataSourceLayerCreator
 };
 export default meta;
 type Story = StoryObj<typeof DataSourceLayerCreator>;
diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
index 64c44f88f..1bf8a8c03 100644
--- a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
+++ b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/index.tsx
@@ -27,7 +27,7 @@ export type DataSourceOptType = {
 const DataSourceLayerCreator: FC<DataProps> = ({
   sceneId,
   onClose,
-  onSubmit,
+  onSubmit
 }) => {
   const t = useT();
 
@@ -37,34 +37,34 @@ const DataSourceLayerCreator: FC<DataProps> = ({
       name: t("Common"),
       children: (
         <CommonAsset sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
-      ),
+      )
     },
     {
       id: "csv",
       name: t("CSV"),
-      children: <CSV sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+      children: <CSV sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
     },
     {
       id: "wms",
       name: t("WMS"),
       children: (
         <WmsTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
-      ),
+      )
     },
     {
       id: "vectorTiles",
       name: t("Vector Tile"),
       children: (
         <VectorTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
-      ),
+      )
     },
     {
       id: "threeDTiles",
       name: t("3D Tiles"),
       children: (
         <ThreeDTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />
-      ),
-    },
+      )
+    }
   ];
 
   return (
@@ -78,7 +78,7 @@ const DataSourceLayerCreator: FC<DataProps> = ({
   );
 };
 const Wrapper = styled("div")(() => ({
-  height: "440px",
+  height: "440px"
 }));
 
 export default DataSourceLayerCreator;
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/index.tsx
index 07fccfb57..6e020a175 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/index.tsx
@@ -1,9 +1,9 @@
-import { FC } from "react";
 
 import { InputField, TextareaField } from "@reearth/beta/ui/fields";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 type Props = {
   selectedLayer: NLSLayer;
@@ -42,7 +42,7 @@ const DataSource: FC<Props> = ({ selectedLayer }) => {
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.large,
+  gap: theme.spacing.large
 }));
 
 export default DataSource;
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx
index f9ffefe07..613cab896 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/CustomPropertField.tsx
@@ -1,12 +1,12 @@
 import {
   FILE_TYPES,
-  IMAGE_TYPES,
+  IMAGE_TYPES
 } from "@reearth/beta/features/AssetsManager/constants";
 import {
   AssetField,
   InputField,
   NumberField,
-  SwitchField,
+  SwitchField
 } from "@reearth/beta/ui/fields";
 import TextAreaField from "@reearth/beta/ui/fields/TextareaField";
 import { useT } from "@reearth/services/i18n";
@@ -17,7 +17,7 @@ import { FieldProp, ValueProp } from ".";
 type Props = {
   field: FieldProp;
   setFields?: (
-    v: FieldProp[] | ((prevFields: FieldProp[]) => FieldProp[]),
+    v: FieldProp[] | ((prevFields: FieldProp[]) => FieldProp[])
   ) => void;
 };
 
@@ -36,7 +36,7 @@ export const FieldComponent = ({ field, setFields }: Props) => {
         });
       });
     },
-    [field.id, setFields],
+    [field.id, setFields]
   );
 
   return field?.type === "Text" ? (
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
index a03ebef50..ccba0c1f1 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx
@@ -4,7 +4,7 @@ import "react18-json-view/src/dark.css";
 
 import {
   GeoJsonFeatureDeleteProps,
-  GeoJsonFeatureUpdateProps,
+  GeoJsonFeatureUpdateProps
 } from "@reearth/beta/features/Editor/hooks/useSketch";
 import { Button, Collapse, Typography } from "@reearth/beta/lib/reearth-ui";
 import { Geometry } from "@reearth/core";
@@ -40,7 +40,7 @@ const FeatureData: FC<Props> = ({
   layer,
   sketchFeature,
   onGeoJsonFeatureUpdate,
-  onGeoJsonFeatureDelete,
+  onGeoJsonFeatureDelete
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -64,7 +64,7 @@ const FeatureData: FC<Props> = ({
   const saveCollapseState = useCallback((storageId: string, state: boolean) => {
     localStorage.setItem(
       `reearth-visualizer-feature-${storageId}-collapsed`,
-      JSON.stringify(state),
+      JSON.stringify(state)
     );
   }, []);
 
@@ -73,10 +73,10 @@ const FeatureData: FC<Props> = ({
       saveCollapseState(storageId, state);
       setCollapsedStates((prevState) => ({
         ...prevState,
-        [storageId]: state,
+        [storageId]: state
       }));
     },
-    [saveCollapseState],
+    [saveCollapseState]
   );
 
   useEffect(() => {
@@ -97,7 +97,7 @@ const FeatureData: FC<Props> = ({
       id: key,
       type: value.replace(/_\d+$/, ""),
       title: key,
-      value: selectedFeature?.properties?.[key],
+      value: selectedFeature?.properties?.[key]
     }));
 
     setFields(fieldArray);
@@ -108,20 +108,20 @@ const FeatureData: FC<Props> = ({
     const newProperties = { ...selectedFeature.properties };
     Object.assign(
       newProperties,
-      ...fields.map((f) => ({ [f.title]: f.value })),
+      ...fields.map((f) => ({ [f.title]: f.value }))
     );
     onGeoJsonFeatureUpdate?.({
       layerId: layer.id,
       featureId: sketchFeature.id,
       geometry: selectedFeature.geometry,
-      properties: newProperties,
+      properties: newProperties
     });
   }, [
     layer?.id,
     fields,
     onGeoJsonFeatureUpdate,
     selectedFeature,
-    sketchFeature?.id,
+    sketchFeature?.id
   ]);
 
   const jsonStyle = useMemo(
@@ -129,16 +129,16 @@ const FeatureData: FC<Props> = ({
       wordWrap: "break-word" as const,
       minWidth: 0,
       lineHeight: "1.5em",
-      fontSize: theme.fonts.sizes.body,
+      fontSize: theme.fonts.sizes.body
     }),
-    [theme.fonts.sizes.body],
+    [theme.fonts.sizes.body]
   );
 
   const handleDeleteSketchFeature = useCallback(() => {
     if (!layer?.id || !sketchFeature?.id) return;
     onGeoJsonFeatureDelete?.({
       layerId: layer.id,
-      featureId: sketchFeature.id,
+      featureId: sketchFeature.id
     });
   }, [layer?.id, sketchFeature?.id, onGeoJsonFeatureDelete]);
 
@@ -228,19 +228,19 @@ const Wrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.small,
   padding: `${theme.spacing.small}px 0`,
-  wordBreak: "break-all",
+  wordBreak: "break-all"
 }));
 
 const FieldsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.normal,
-  userSelect: "none",
+  userSelect: "none"
 }));
 
 const ValueWrapper = styled("div")(({ theme }) => ({
   border: `1px solid ${theme.outline.weak}`,
   borderRadius: theme.radius.small,
   background: theme.bg[1],
-  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`
 }));
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/hooks.ts b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/hooks.ts
index 448f9623e..a206bfb7d 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/hooks.ts
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/hooks.ts
@@ -1,8 +1,8 @@
-import { useCallback, useMemo } from "react";
 
 import { filterVisibleItems } from "@reearth/beta/ui/fields/utils";
 import { useInfoboxFetcher } from "@reearth/services/api";
 import { Item, convert } from "@reearth/services/api/propertyApi/utils";
+import { useCallback, useMemo } from "react";
 
 export default ({ layerId, property }: { layerId: string; property?: any }) => {
   const { useCreateNLSInfobox } = useInfoboxFetcher();
@@ -10,7 +10,7 @@ export default ({ layerId, property }: { layerId: string; property?: any }) => {
 
   const visibleItems: Item[] | undefined = useMemo(
     () => filterVisibleItems(convert(property)),
-    [property],
+    [property]
   );
 
   const handleInfoboxCreate = useCallback(async () => {
@@ -21,6 +21,6 @@ export default ({ layerId, property }: { layerId: string; property?: any }) => {
 
   return {
     visibleItems,
-    handleInfoboxCreate,
+    handleInfoboxCreate
   };
 };
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx
index e3cc5afae..1b0add755 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/InfoboxSettings/index.tsx
@@ -17,7 +17,7 @@ const Infobox: FC<Props> = ({ selectedLayerId, infobox }) => {
 
   const { visibleItems, handleInfoboxCreate } = useHooks({
     layerId: selectedLayerId,
-    property: infobox?.property,
+    property: infobox?.property
   });
 
   return (
@@ -45,7 +45,7 @@ const Infobox: FC<Props> = ({ selectedLayerId, infobox }) => {
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.large,
+  gap: theme.spacing.large
 }));
 
 export default Infobox;
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx
index 668ce7147..9b2c27195 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/LayerStyle/index.tsx
@@ -18,15 +18,15 @@ const LayerStyleTab: FC<LayerStyleSelectorProps> = ({
   layers,
   layerStyles,
   selectedLayerId,
-  onLayerConfigUpdate,
+  onLayerConfigUpdate
 }) => {
   const t = useT();
   const layerStyleOptions = useMemo(
     () => [
       { value: "", label: "NO STYLE" },
-      ...(layerStyles?.map((ls) => ({ value: ls.id, label: ls.name })) ?? []),
+      ...(layerStyles?.map((ls) => ({ value: ls.id, label: ls.name })) ?? [])
     ],
-    [layerStyles],
+    [layerStyles]
   );
 
   const handleLayerStyleChange = useCallback(
@@ -35,16 +35,16 @@ const LayerStyleTab: FC<LayerStyleSelectorProps> = ({
       onLayerConfigUpdate?.({
         layerId: selectedLayerId,
         config: {
-          layerStyleId: value,
-        },
+          layerStyleId: value
+        }
       });
     },
-    [selectedLayerId, onLayerConfigUpdate],
+    [selectedLayerId, onLayerConfigUpdate]
   );
 
   const currentValue = useMemo(
     () => layers?.find((a) => a.id === selectedLayerId)?.config?.layerStyleId,
-    [layers, selectedLayerId],
+    [layers, selectedLayerId]
   );
 
   return (
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
index f2273bf4c..f1a88de2a 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
@@ -1,7 +1,7 @@
 import { SelectedLayer } from "@reearth/beta/features/Editor/hooks/useLayers";
 import {
   GeoJsonFeatureDeleteProps,
-  GeoJsonFeatureUpdateProps,
+  GeoJsonFeatureUpdateProps
 } from "@reearth/beta/features/Editor/hooks/useSketch";
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
@@ -35,7 +35,7 @@ const InspectorTabs: FC<Props> = ({
   sceneId,
   onLayerConfigUpdate,
   onGeoJsonFeatureUpdate,
-  onGeoJsonFeatureDelete,
+  onGeoJsonFeatureDelete
 }) => {
   const selectedFeature = useMemo(() => {
     if (!selectedLayer?.computedFeature?.id) return;
@@ -44,14 +44,14 @@ const InspectorTabs: FC<Props> = ({
       selectedLayer.layer?.config?.data?.type === "mvt"
         ? selectedLayer.computedFeature
         : (selectedLayer.computedLayer?.features?.find(
-            (f) => f.id === selectedLayer.computedFeature?.id,
+            (f) => f.id === selectedLayer.computedFeature?.id
           ) ?? {});
 
     if (!id) return;
     return {
       id,
       geometry,
-      properties,
+      properties
     };
   }, [selectedLayer]);
 
@@ -66,7 +66,7 @@ const InspectorTabs: FC<Props> = ({
     const selectedFeatureId = selectedFeature.properties.id;
 
     return features?.find(
-      (feature) => feature.properties.id === selectedFeatureId,
+      (feature) => feature.properties.id === selectedFeatureId
     );
   }, [selectedLayer, selectedFeature]);
 
@@ -77,7 +77,7 @@ const InspectorTabs: FC<Props> = ({
         icon: "data",
         children: selectedLayer?.layer && (
           <DataSource selectedLayer={selectedLayer.layer} />
-        ),
+        )
       },
       {
         id: "featureInspector",
@@ -90,7 +90,7 @@ const InspectorTabs: FC<Props> = ({
             onGeoJsonFeatureUpdate={onGeoJsonFeatureUpdate}
             onGeoJsonFeatureDelete={onGeoJsonFeatureDelete}
           />
-        ),
+        )
       },
       {
         id: "layerStyle",
@@ -103,7 +103,7 @@ const InspectorTabs: FC<Props> = ({
             selectedLayerId={selectedLayer.layer.id}
             onLayerConfigUpdate={onLayerConfigUpdate}
           />
-        ),
+        )
       },
       {
         id: "infoboxSettings",
@@ -113,8 +113,8 @@ const InspectorTabs: FC<Props> = ({
             selectedLayerId={selectedLayer.layer.id}
             infobox={selectedLayer.layer?.infobox}
           />
-        ),
-      },
+        )
+      }
     ],
     [
       selectedLayer,
@@ -125,12 +125,12 @@ const InspectorTabs: FC<Props> = ({
       sceneId,
       onLayerConfigUpdate,
       onGeoJsonFeatureUpdate,
-      onGeoJsonFeatureDelete,
-    ],
+      onGeoJsonFeatureDelete
+    ]
   );
 
   const [currentTab, setCurrentTab] = useState(
-    localStorage.getItem(LAYER_INSPECTOR_TAB_STORAGE_KEY) ?? "dataSource",
+    localStorage.getItem(LAYER_INSPECTOR_TAB_STORAGE_KEY) ?? "dataSource"
   );
 
   const handleTabChange = useCallback((newTab: string) => {
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts
index d135f04cf..dc43f200a 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/hooks.ts
@@ -41,7 +41,7 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
         return updatedLayers ? updatedLayers : prev;
       });
     },
-    [onPageUpdate, pageId],
+    [onPageUpdate, pageId]
   );
 
   const handleAllLayersCheck = useCallback(() => {
@@ -58,6 +58,6 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
     checkedLayers,
     allCheckedLayers,
     handleLayerCheck,
-    handleAllLayersCheck,
+    handleAllLayersCheck
   };
 };
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
index 17eccd847..b35778868 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/SceneSettings/index.tsx
@@ -17,7 +17,7 @@ const Settings: FC<Props> = ({ propertyId, propertyItems, onFlyTo }) => {
   const t = useT();
   const visibleItems = useMemo(
     () => filterVisibleItems(propertyItems),
-    [propertyItems],
+    [propertyItems]
   );
 
   return (
@@ -45,5 +45,5 @@ export default Settings;
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
index cd9c1cfde..f42c37cca 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
@@ -21,14 +21,14 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
     handleFlyTo,
     handleLayerConfigUpdate,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete,
+    handleGeoJsonFeatureDelete
   } = useMapPage();
 
   const t = useT();
 
   const scenePropertyId = useMemo(
     () => scene?.property?.id,
-    [scene?.property?.id],
+    [scene?.property?.id]
   );
 
   return (
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx
index 49614ebbe..6623f6cca 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleCard.tsx
@@ -26,7 +26,7 @@ const LayerStyleCard: React.FC<Props> = ({
   actionContent,
   onSelect,
   onOpenChange,
-  onLayerStyleNameUpdate,
+  onLayerStyleNameUpdate
 }) => {
   const [isOpenAction, setIsOpenAction] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -35,7 +35,7 @@ const LayerStyleCard: React.FC<Props> = ({
 
   const [handleSingleClick, handleDoubleClick] = useDoubleClick(
     () => onSelect?.(!selected),
-    () => setIsEditing(true),
+    () => setIsEditing(true)
   );
 
   useEffect(() => {
@@ -54,7 +54,7 @@ const LayerStyleCard: React.FC<Props> = ({
       setIsEditing(false);
       onLayerStyleNameUpdate?.({ styleId: id || "", name: newName });
     },
-    [id, onLayerStyleNameUpdate],
+    [id, onLayerStyleNameUpdate]
   );
 
   const handleActionClick = useCallback(
@@ -62,7 +62,7 @@ const LayerStyleCard: React.FC<Props> = ({
       e.stopPropagation();
       setIsOpenAction(!isOpenAction);
     },
-    [isOpenAction],
+    [isOpenAction]
   );
 
   const handleEditExit = useCallback(
@@ -74,7 +74,7 @@ const LayerStyleCard: React.FC<Props> = ({
       }
       setIsEditing(false);
     },
-    [handleNameSubmit, name, newName],
+    [handleNameSubmit, name, newName]
   );
 
   const handleOpenChange = useCallback(
@@ -82,7 +82,7 @@ const LayerStyleCard: React.FC<Props> = ({
       setIsOpenAction(isOpen);
       onOpenChange?.(isOpen);
     },
-    [onOpenChange],
+    [onOpenChange]
   );
 
   return (
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx
index 2793a7a6b..7fcfc3df8 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx
@@ -15,7 +15,7 @@ type LayerStyleEditorProps = {
 const LayerStyleEditor: FC<LayerStyleEditorProps> = ({
   selectedLayerStyleId,
   sceneId,
-  onLayerStyleValueUpdate,
+  onLayerStyleValueUpdate
 }) => {
   const t = useT();
   const [styleCode, setStyleCode] = useState<string | undefined>("{}");
@@ -25,7 +25,7 @@ const LayerStyleEditor: FC<LayerStyleEditorProps> = ({
 
   useEffect(() => {
     const selectedLayerStyle = layerStyles.find(
-      (a) => a.id === selectedLayerStyleId,
+      (a) => a.id === selectedLayerStyleId
     );
     if (selectedLayerStyle?.value) {
       setStyleCode(JSON.stringify(selectedLayerStyle.value, null, 2));
@@ -37,7 +37,7 @@ const LayerStyleEditor: FC<LayerStyleEditorProps> = ({
       if (selectedLayerStyleId)
         onLayerStyleValueUpdate({
           styleId: selectedLayerStyleId,
-          value: JSON.parse(styleCode),
+          value: JSON.parse(styleCode)
         });
     }
   }, [onLayerStyleValueUpdate, styleCode, selectedLayerStyleId]);
@@ -63,7 +63,7 @@ const EditorContainer = styled("div")(({ theme }) => ({
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "space-between",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 export default LayerStyleEditor;
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
index 878fb76c1..d06f160ba 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleItem.tsx
@@ -21,7 +21,7 @@ const LayerStyleItem: FC<LayerStyleItemProps> = ({
   selected,
   onSelect,
   onDelete,
-  onLayerStyleNameUpdate,
+  onLayerStyleNameUpdate
 }) => {
   const [localName, setLocalName] = useState(name);
   const [isEditing, setIsEditing] = useState(false);
@@ -38,7 +38,7 @@ const LayerStyleItem: FC<LayerStyleItemProps> = ({
       e.stopPropagation();
       onSelect?.();
     },
-    [onSelect],
+    [onSelect]
   );
 
   return (
@@ -66,8 +66,8 @@ const LayerStyleItem: FC<LayerStyleItemProps> = ({
           id: "delete",
           title: "Delete",
           icon: "trash" as const,
-          onClick: onDelete,
-        },
+          onClick: onDelete
+        }
       ]}
     />
   );
@@ -80,7 +80,7 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.regular,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+  whiteSpace: "nowrap"
 }));
 
 export default LayerStyleItem;
diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
index 895cd4fb0..8b79779f5 100644
--- a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
@@ -22,7 +22,7 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     handleLayerStyleNameUpdate,
     handleLayerStyleSelect,
     handleLayerStyleValueUpdate,
-    handleLayerConfigUpdate,
+    handleLayerConfigUpdate
   } = useMapPage();
 
   const t = useT();
@@ -30,7 +30,7 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
   const handleLayerStyleAddition = useCallback(() => {
     handleLayerStyleAdd({
       name: `${t("Style_")}${layerStyles?.length ?? 0 + 1}`,
-      value: {},
+      value: {}
     });
   }, [layerStyles?.length, t, handleLayerStyleAdd]);
 
@@ -38,7 +38,7 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     (id?: string) => {
       handleLayerStyleSelect(id);
     },
-    [handleLayerStyleSelect],
+    [handleLayerStyleSelect]
   );
 
   const handleApplyLayerStyle = useCallback(() => {
@@ -46,8 +46,8 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     handleLayerConfigUpdate?.({
       layerId: selectedLayer.layer.id,
       config: {
-        layerStyleId: selectedLayerStyleId,
-      },
+        layerStyleId: selectedLayerStyleId
+      }
     });
   }, [selectedLayer, selectedLayerStyleId, handleLayerConfigUpdate]);
 
@@ -113,13 +113,13 @@ const LayerStyleManager = styled("div")(({ theme }) => ({
   flex: 1,
   height: "30%",
   maxHeight: 300,
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const ActionsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const StylesWrapper = styled("div")(({ theme }) => ({
@@ -128,18 +128,18 @@ const StylesWrapper = styled("div")(({ theme }) => ({
   overflowY: "auto",
   padding: `${theme.spacing.small}px`,
   background: theme.relative.darker,
-  borderRadius: `${theme.radius.normal}px`,
+  borderRadius: `${theme.radius.normal}px`
 }));
 
 const StylesGrid = styled("div")(({ theme }) => ({
   display: "grid",
   gridTemplateColumns: "1fr 1fr",
-  gap: `${theme.spacing.small}px`,
+  gap: `${theme.spacing.small}px`
 }));
 
 const LayerStyleEditorWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flex: 1,
   height: "70%",
-  paddingTop: theme.spacing.small,
+  paddingTop: theme.spacing.small
 }));
diff --git a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
index 46ec15735..e44b4284a 100644
--- a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
+++ b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
@@ -1,7 +1,7 @@
 import {
   IconButton,
   PopupMenuItem,
-  TextInput,
+  TextInput
 } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem, EntryItemAction } from "@reearth/beta/ui/components";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
@@ -14,7 +14,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { useMapPage } from "../context";
@@ -32,7 +32,7 @@ const LayerItem: FC<LayerItemProps> = ({
   dragHandleClassName,
   isDragging,
   editingLayerNameId,
-  setEditingLayerNameId,
+  setEditingLayerNameId
 }) => {
   const {
     selectedLayerId,
@@ -42,7 +42,7 @@ const LayerItem: FC<LayerItemProps> = ({
     handleLayerVisibilityUpdate,
     handleFlyTo,
     openCustomPropertySchema,
-    handleCustomPropertySchemaClick,
+    handleCustomPropertySchemaClick
   } = useMapPage();
 
   const handleZoomToLayer = useCallback(() => {
@@ -59,14 +59,14 @@ const LayerItem: FC<LayerItemProps> = ({
         id: "rename",
         title: "Rename",
         icon: "pencilSimple" as const,
-        onClick: () => setEditingLayerNameId(layer.id),
+        onClick: () => setEditingLayerNameId(layer.id)
       },
       {
         id: "delete",
         title: "Delete",
         icon: "trash" as const,
-        onClick: () => handleLayerDelete(layer.id),
-      },
+        onClick: () => handleLayerDelete(layer.id)
+      }
     ];
 
     const sketchMenu = layer.isSketch
@@ -78,8 +78,8 @@ const LayerItem: FC<LayerItemProps> = ({
             onClick: () => {
               openCustomPropertySchema();
               handleCustomPropertySchemaClick?.(layer.id);
-            },
-          },
+            }
+          }
         ]
       : [];
 
@@ -90,7 +90,7 @@ const LayerItem: FC<LayerItemProps> = ({
     setEditingLayerNameId,
     handleLayerDelete,
     openCustomPropertySchema,
-    handleCustomPropertySchemaClick,
+    handleCustomPropertySchemaClick
   ]);
 
   const hoverActions: EntryItemAction[] | undefined = useMemo(
@@ -106,7 +106,7 @@ const LayerItem: FC<LayerItemProps> = ({
                   appearance="simple"
                   onClick={handleZoomToLayer}
                 />
-              ),
+              )
             },
             {
               comp: (
@@ -118,8 +118,8 @@ const LayerItem: FC<LayerItemProps> = ({
                   onClick={handleToggleLayerVisibility}
                 />
               ),
-              keepVisible: !layer.visible,
-            },
+              keepVisible: !layer.visible
+            }
           ]
         : undefined,
     [
@@ -127,8 +127,8 @@ const LayerItem: FC<LayerItemProps> = ({
       layer.visible,
       editingLayerNameId,
       handleZoomToLayer,
-      handleToggleLayerVisibility,
-    ],
+      handleToggleLayerVisibility
+    ]
   );
 
   const [localTitle, setLocalTitle] = useState(layer.title);
@@ -142,7 +142,7 @@ const LayerItem: FC<LayerItemProps> = ({
     layer.title,
     localTitle,
     handleLayerNameUpdate,
-    setEditingLayerNameId,
+    setEditingLayerNameId
   ]);
 
   const handleLayerItemClick = useCallback(() => {
@@ -203,5 +203,5 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.regular,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+  whiteSpace: "nowrap"
 }));
diff --git a/web/src/beta/features/Editor/Map/LayersPanel/index.tsx b/web/src/beta/features/Editor/Map/LayersPanel/index.tsx
index 2352f3c4c..c204a2d59 100644
--- a/web/src/beta/features/Editor/Map/LayersPanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/LayersPanel/index.tsx
@@ -1,7 +1,7 @@
 import {
   Button,
   PopupMenu,
-  DragAndDropList,
+  DragAndDropList
 } from "@reearth/beta/lib/reearth-ui";
 import { Panel } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
@@ -21,7 +21,7 @@ const LayersPanel: FC = () => {
     handleLayerMove,
     handleLayerSelect,
     openDataSourceLayerCreator,
-    openSketchLayerCreator,
+    openSketchLayerCreator
   } = useMapPage();
 
   const t = useT();
@@ -34,7 +34,7 @@ const LayersPanel: FC = () => {
         icon: "file" as const,
         onClick: () => {
           openDataSourceLayerCreator();
-        },
+        }
       },
       {
         id: "add-sketch-layer",
@@ -42,8 +42,8 @@ const LayersPanel: FC = () => {
         icon: "pencilSimple" as const,
         onClick: () => {
           openSketchLayerCreator();
-        },
-      },
+        }
+      }
     ];
   }, [openDataSourceLayerCreator, openSketchLayerCreator, t]);
 
@@ -62,9 +62,9 @@ const LayersPanel: FC = () => {
             editingLayerNameId={editingLayerNameId}
             setEditingLayerNameId={setEditingLayerNameId}
           />
-        ),
+        )
       })),
-    [layers, isDragging, editingLayerNameId],
+    [layers, isDragging, editingLayerNameId]
   );
 
   const handleMoveStart = useCallback(() => {
@@ -78,7 +78,7 @@ const LayersPanel: FC = () => {
       }
       setIsDragging(false);
     },
-    [handleLayerMove],
+    [handleLayerMove]
   );
 
   return (
@@ -114,17 +114,17 @@ const Wrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.small,
   paddingTop: theme.spacing.smallest,
-  height: "100%",
+  height: "100%"
 }));
 
 const LayersContainer = styled("div")(() => ({
   flex: 1,
   overflowY: "auto",
   display: "flex",
-  flexDirection: "column",
+  flexDirection: "column"
 }));
 
 const EmptySpace = styled("div")(() => ({
   flex: 1,
-  minHeight: 50,
+  minHeight: 50
 }));
diff --git a/web/src/beta/features/Editor/Map/ScenePanel/index.tsx b/web/src/beta/features/Editor/Map/ScenePanel/index.tsx
index 4480b06fe..7982e4895 100644
--- a/web/src/beta/features/Editor/Map/ScenePanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/ScenePanel/index.tsx
@@ -30,7 +30,7 @@ const ScenePanel: FC = () => {
                   ? t("Camera")
                   : t("Unknown scene setting");
     },
-    [t],
+    [t]
   );
 
   return (
@@ -38,20 +38,20 @@ const ScenePanel: FC = () => {
       <Wrapper>
         {[
           ...new Set(
-            scene?.property?.schema?.groups.map(({ collection }) => collection),
-          ),
+            scene?.property?.schema?.groups.map(({ collection }) => collection)
+          )
         ].map(
           (collection, index) =>
             collection && (
               <EntryItem
                 key={index}
                 title={handleTranslatedCollectionName(
-                  collection as ScenePropertyCollection,
+                  collection as ScenePropertyCollection
                 )}
                 highlighted={selectedSceneSetting === collection}
                 onClick={() => handleSceneSettingSelect(collection)}
               />
-            ),
+            )
         )}
       </Wrapper>
     </Panel>
@@ -63,5 +63,5 @@ export default ScenePanel;
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
diff --git a/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx
index 8ba65941d..ee206589a 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx
+++ b/web/src/beta/features/Editor/Map/SketchLayerCreator/General/index.tsx
@@ -7,7 +7,7 @@ import {
   ContentWrapper,
   InputGroup,
   InputsWrapper,
-  Wrapper,
+  Wrapper
 } from "../../shared/SharedComponent";
 
 export interface Props {
@@ -22,7 +22,7 @@ const General: FC<Props> = ({
   layerName,
   layerStyle,
   onLayerNameChange,
-  onLayerStyleChange,
+  onLayerStyleChange
 }) => {
   const t = useT();
   const layerStyleOption = layerStyles ? layerStyles : [];
@@ -46,7 +46,7 @@ const General: FC<Props> = ({
             maxHeight={250}
             options={layerStyleOption?.map((v) => ({
               label: v.name,
-              value: v.id,
+              value: v.id
             }))}
             onChange={onLayerStyleChange}
           />
diff --git a/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx
index abfb6e69f..581d418d4 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx
+++ b/web/src/beta/features/Editor/Map/SketchLayerCreator/index.tsx
@@ -3,7 +3,7 @@ import {
   Modal,
   ModalPanel,
   TabItem,
-  Tabs,
+  Tabs
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -16,7 +16,7 @@ import {
   CustomPropertyProp,
   PropertyListProp,
   SketchLayerProps,
-  SketchLayerDataType,
+  SketchLayerDataType
 } from "./type";
 
 export const dataTypes: SketchLayerDataType[] = [
@@ -26,14 +26,14 @@ export const dataTypes: SketchLayerDataType[] = [
   "Asset",
   "Float",
   "Int",
-  "Boolean",
+  "Boolean"
 ];
 
 const SketchLayerCreator: FC<SketchLayerProps> = ({
   sceneId,
   layerStyles,
   onClose,
-  onSubmit,
+  onSubmit
 }) => {
   const t = useT();
   const [customProperties, setCustomProperties] = useState<
@@ -69,13 +69,13 @@ const SketchLayerCreator: FC<SketchLayerProps> = ({
       schema: schemaJSON,
       config: {
         properties: {
-          name: layerName,
+          name: layerName
         },
         layerStyleId: layerStyle,
         data: {
-          type: "geojson",
-        },
-      },
+          type: "geojson"
+        }
+      }
     });
     onClose?.();
   };
@@ -92,7 +92,7 @@ const SketchLayerCreator: FC<SketchLayerProps> = ({
           onLayerStyleChange={handleLayerStyleChange}
           onLayerNameChange={handleLayerNameChange}
         />
-      ),
+      )
     },
     {
       id: "customProperties",
@@ -104,8 +104,8 @@ const SketchLayerCreator: FC<SketchLayerProps> = ({
           setCustomProperties={setCustomProperties}
           setPropertiesList={setPropertiesList}
         />
-      ),
-    },
+      )
+    }
   ];
 
   return (
@@ -137,7 +137,7 @@ const SketchLayerCreator: FC<SketchLayerProps> = ({
 const Wrapper = styled("div")(({ theme }) => ({
   height: "440px",
   padding: theme.spacing.normal,
-  background: theme.bg[0],
+  background: theme.bg[0]
 }));
 
 export default SketchLayerCreator;
diff --git a/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts b/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts
index 7077e75fa..3c65a1a7c 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts
+++ b/web/src/beta/features/Editor/Map/SketchLayerEditor/hooks.ts
@@ -13,12 +13,12 @@ export default function useHooks({
   customProperties,
   setPropertiesList,
   onClose,
-  onCustomPropertySchemaUpdate,
+  onCustomPropertySchemaUpdate
 }: Pick<CustomPropertyProps, "customProperties" | "setPropertiesList"> &
   SketchLayerEditorProp) {
   const sketchLayers = useMemo(
     () => layers.filter(({ isSketch }) => isSketch),
-    [layers],
+    [layers]
   );
 
   const handleClose = useCallback(() => {
@@ -36,7 +36,7 @@ export default function useHooks({
     }, {});
     const inp: UpdateCustomPropertySchemaInput = {
       layerId: layerId || "",
-      schema: schemaJSON,
+      schema: schemaJSON
     };
 
     onCustomPropertySchemaUpdate?.(inp);
@@ -51,14 +51,14 @@ export default function useHooks({
       .map(([key, value]) => ({
         key,
         value: (value as string).replace(/_\d+$/, ""),
-        number: parseInt((value as string).match(/_(\d+)$/)?.[1] || "0", 10),
+        number: parseInt((value as string).match(/_(\d+)$/)?.[1] || "0", 10)
       }))
       .sort((a, b) => a.number - b.number);
 
     return sortedEntries.map(({ key, value }) => ({
       id: uuidv4(),
       key,
-      value,
+      value
     }));
   };
 
@@ -74,6 +74,6 @@ export default function useHooks({
 
   return {
     handleSubmit,
-    handleClose,
+    handleClose
   };
 }
diff --git a/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx b/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx
index aeb818bc6..20ef6c2b9 100644
--- a/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx
+++ b/web/src/beta/features/Editor/Map/SketchLayerEditor/index.tsx
@@ -8,7 +8,7 @@ import { FC, useState } from "react";
 import SketchCustomProperties from "../shared/SketchCustomProperties";
 import {
   CustomPropertyProp,
-  PropertyListProp,
+  PropertyListProp
 } from "../SketchLayerCreator/type";
 
 import useHooks from "./hooks";
@@ -26,7 +26,7 @@ const SketchLayerEditor: FC<SketchLayerEditorProp> = ({
   layers,
   layerId,
   onClose,
-  onCustomPropertySchemaUpdate,
+  onCustomPropertySchemaUpdate
 }) => {
   const t = useT();
   const [customProperties, setCustomProperties] = useState<
@@ -39,7 +39,7 @@ const SketchLayerEditor: FC<SketchLayerEditorProp> = ({
     customProperties,
     setPropertiesList,
     onClose,
-    onCustomPropertySchemaUpdate,
+    onCustomPropertySchemaUpdate
   });
 
   return (
@@ -75,7 +75,7 @@ const SketchLayerEditor: FC<SketchLayerEditorProp> = ({
 const Wrapper = styled("div")(({ theme }) => ({
   height: "400px",
   background: theme.bg[0],
-  padding: theme.spacing.normal,
+  padding: theme.spacing.normal
 }));
 
 export default SketchLayerEditor;
diff --git a/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx b/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx
index ba1d0cc68..dcf7bee7e 100644
--- a/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx
@@ -1,8 +1,8 @@
-import { FC, useEffect, useMemo } from "react";
 
 import { IconButton, IconName } from "@reearth/beta/lib/reearth-ui";
 import { Panel } from "@reearth/beta/ui/layout";
 import { styled } from "@reearth/services/theme";
+import { FC, useEffect, useMemo } from "react";
 
 import { useMapPage } from "../context";
 
@@ -20,45 +20,45 @@ const ToolsPanel: FC = () => {
       {
         icon: "mapPin",
         selected: sketchEnabled && sketchType === "marker",
-        onClick: () => handleSketchTypeChange("marker"),
+        onClick: () => handleSketchTypeChange("marker")
       },
       {
         icon: "polyline",
         selected: sketchEnabled && sketchType === "polyline",
-        onClick: () => handleSketchTypeChange("polyline"),
+        onClick: () => handleSketchTypeChange("polyline")
       },
       {
         icon: "circle",
         selected: sketchEnabled && sketchType === "circle",
-        onClick: () => handleSketchTypeChange("circle"),
+        onClick: () => handleSketchTypeChange("circle")
       },
       {
         icon: "square",
         selected: sketchEnabled && sketchType === "rectangle",
-        onClick: () => handleSketchTypeChange("rectangle"),
+        onClick: () => handleSketchTypeChange("rectangle")
       },
       {
         icon: "polygon",
         selected: sketchEnabled && sketchType === "polygon",
-        onClick: () => handleSketchTypeChange("polygon"),
+        onClick: () => handleSketchTypeChange("polygon")
       },
       {
         icon: "cylinder",
         selected: sketchEnabled && sketchType === "extrudedCircle",
-        onClick: () => handleSketchTypeChange("extrudedCircle"),
+        onClick: () => handleSketchTypeChange("extrudedCircle")
       },
       {
         icon: "cube",
         selected: sketchEnabled && sketchType === "extrudedRectangle",
-        onClick: () => handleSketchTypeChange("extrudedRectangle"),
+        onClick: () => handleSketchTypeChange("extrudedRectangle")
       },
       {
         icon: "extrude",
         selected: sketchEnabled && sketchType === "extrudedPolygon",
-        onClick: () => handleSketchTypeChange("extrudedPolygon"),
-      },
+        onClick: () => handleSketchTypeChange("extrudedPolygon")
+      }
     ],
-    [sketchEnabled, sketchType, handleSketchTypeChange],
+    [sketchEnabled, sketchType, handleSketchTypeChange]
   );
 
   useEffect(() => {
@@ -90,5 +90,5 @@ const SketchToolsWrapper = styled("div")(({ theme }) => ({
   justifyContent: "flex-start",
   alignItems: "center",
   gap: theme.spacing.smallest,
-  padding: theme.spacing.smallest,
+  padding: theme.spacing.smallest
 }));
diff --git a/web/src/beta/features/Editor/Map/context.tsx b/web/src/beta/features/Editor/Map/context.tsx
index 9b787a254..a0c20320a 100644
--- a/web/src/beta/features/Editor/Map/context.tsx
+++ b/web/src/beta/features/Editor/Map/context.tsx
@@ -12,16 +12,16 @@ import {
   LayerMoveProps,
   LayerNameUpdateProps,
   LayerVisibilityUpdateProps,
-  SelectedLayer,
+  SelectedLayer
 } from "../hooks/useLayers";
 import {
   LayerStyleAddProps,
   LayerStyleNameUpdateProps,
-  LayerStyleValueUpdateProps,
+  LayerStyleValueUpdateProps
 } from "../hooks/useLayerStyles";
 import {
   GeoJsonFeatureDeleteProps,
-  GeoJsonFeatureUpdateProps,
+  GeoJsonFeatureUpdateProps
 } from "../hooks/useSketch";
 
 export interface MapPageContextType {
@@ -41,7 +41,7 @@ export interface MapPageContextType {
   layerId?: string;
   handleCustomPropertySchemaClick?: (id?: string) => void;
   handleCustomPropertySchemaUpdate?: (
-    inp: UpdateCustomPropertySchemaInput,
+    inp: UpdateCustomPropertySchemaInput
   ) => void;
   handleLayerVisibilityUpdate: (inp: LayerVisibilityUpdateProps) => void;
   handleFlyTo?: FlyTo;
@@ -67,7 +67,7 @@ const MapPageContext = createContext<MapPageContextType | undefined>(undefined);
 
 export const MapPageProvider = ({
   value,
-  children,
+  children
 }: {
   value: MapPageContextType;
   children: ReactNode;
diff --git a/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx b/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
index bee667175..66f23fc4c 100644
--- a/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
+++ b/web/src/beta/features/Editor/Map/shared/SharedComponent.tsx
@@ -1,6 +1,6 @@
+import { styled } from "@reearth/services/theme";
 import { FC, ReactNode } from "react";
 
-import { styled } from "@reearth/services/theme";
 
 export const InputGroup: FC<{
   label: string;
@@ -21,7 +21,7 @@ const InputGroupWrapper = styled("div")(({ theme }) => ({
   width: "100%",
   flexDirection: "column",
   alignItems: "flex-start",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 export const Wrapper = styled("div")(({ theme }) => ({
@@ -29,46 +29,46 @@ export const Wrapper = styled("div")(({ theme }) => ({
   height: "100%",
   flexDirection: "column",
   alignItems: "flex-start",
-  gap: theme.spacing.large,
+  gap: theme.spacing.large
 }));
 
 export const Label = styled("div")(({ theme }) => ({
   color: theme.content.main,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 const Description = styled("div")(({ theme }) => ({
   color: theme.content.weak,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 export const InputsWrapper = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 
 export const SubmitWrapper = styled("div")(() => ({
   width: "100%",
   display: "flex",
-  justifyContent: "flex-end",
+  justifyContent: "flex-end"
 }));
 
 export const LayerWrapper = styled("div")(({ theme }) => ({
   display: "flex",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 export const LayerNameListWrapper = styled("div")(() => ({
   maxHeight: "250px",
   overflowY: "auto",
-  width: "100%",
+  width: "100%"
 }));
 
 export const LayerNameList = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 export const ContentWrapper = styled("div")(({ theme }) => ({
@@ -80,20 +80,20 @@ export const ContentWrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.large,
   boxSizing: "border-box",
   ["*"]: {
-    boxSizing: "border-box",
+    boxSizing: "border-box"
   },
   ["* ::-webkit-scrollbar"]: {
-    width: "8px",
+    width: "8px"
   },
   ["* ::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
-    borderRadius: "10px",
+    borderRadius: "10px"
   },
   ["* ::-webkit-scrollbar-thumb"]: {
     background: theme.relative.light,
-    borderRadius: "4px",
+    borderRadius: "4px"
   },
   ["* ::-webkit-scrollbar-thumb:hover"]: {
-    background: theme.relative.lighter,
-  },
+    background: theme.relative.lighter
+  }
 }));
diff --git a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx
index 1ee045478..e00f22668 100644
--- a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx
+++ b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/CustomPropertyItem.tsx
@@ -2,7 +2,7 @@ import {
   Button,
   Selector,
   TextInput,
-  Icon,
+  Icon
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
@@ -19,13 +19,13 @@ const CustomPropertyItem: FC<CustomPropertyItemProps> = ({
   onTypeChange,
   onBlur,
   onDoubleClick,
-  onCustomPropertyDelete,
+  onCustomPropertyDelete
 }) => {
   const t = useT();
   const theme = useTheme();
 
   const [customPropertyTitle, setCustomPropertyTitle] = useState(
-    customPropertyItem.key,
+    customPropertyItem.key
   );
   const [dataType, setDataType] = useState(customPropertyItem.value);
 
@@ -38,7 +38,7 @@ const CustomPropertyItem: FC<CustomPropertyItemProps> = ({
       setDataType(value as string);
       onTypeChange?.(value as string);
     },
-    [onTypeChange],
+    [onTypeChange]
   );
 
   return (
@@ -66,7 +66,7 @@ const CustomPropertyItem: FC<CustomPropertyItemProps> = ({
       </ProjectItemCol>
       <ProjectItemCol
         style={{
-          justifyContent: "space-between",
+          justifyContent: "space-between"
         }}
       >
         {customPropertyItem.value.trim() === "" || isEditType ? (
@@ -103,11 +103,11 @@ const PropertyFieldWrapper = styled("div")(({ theme }) => ({
   color: theme.content.main,
   gap: theme.spacing.micro,
   padding: theme.spacing.micro,
-  borderRadius: theme.radius.smallest,
+  borderRadius: theme.radius.smallest
 }));
 
 const ProjectItemCol = styled("div")(() => ({
-  flex: 1,
+  flex: 1
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -117,7 +117,7 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   padding: theme.spacing.micro,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+  whiteSpace: "nowrap"
 }));
 
 export default CustomPropertyItem;
diff --git a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts
index d985fa2d1..42faf8fdb 100644
--- a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts
+++ b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/hooks.ts
@@ -3,14 +3,14 @@ import { v4 as uuidv4 } from "uuid";
 
 import {
   CustomPropertyProps,
-  PropertyListProp,
+  PropertyListProp
 } from "../../SketchLayerCreator/type";
 
 export default function useHooks({
   customProperties,
   propertiesList,
   setPropertiesList,
-  setCustomProperties,
+  setCustomProperties
 }: CustomPropertyProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [editTitleIndex, setEditTitleIndex] = useState<number | null>(null);
@@ -25,20 +25,20 @@ export default function useHooks({
       setPropertiesList?.(newList);
       if (editTitleIndex === idx) setEditTitleIndex(null);
     },
-    [editTitleIndex, propertiesList, setPropertiesList],
+    [editTitleIndex, propertiesList, setPropertiesList]
   );
 
   const handleTypeChange = useCallback(
     (idx: number) => (value?: string | string[]) => {
       if (!propertiesList) return;
       const newList = propertiesList?.map(
-        (i) => ({ ...i }) as PropertyListProp,
+        (i) => ({ ...i }) as PropertyListProp
       );
       newList[idx].value = (value as string) ?? "";
       setPropertiesList?.(newList);
       if (editTypeIndex === idx) setEditTypeIndex(null);
     },
-    [editTypeIndex, propertiesList, setPropertiesList],
+    [editTypeIndex, propertiesList, setPropertiesList]
   );
 
   const handleDoubleClick = useCallback((idx: number, field: string) => {
@@ -58,8 +58,8 @@ export default function useHooks({
       {
         id: uuidv4(),
         key: "",
-        value: "",
-      },
+        value: ""
+      }
     ];
     setPropertiesList?.(newPropertiesList);
   }, [propertiesList, setPropertiesList]);
@@ -71,7 +71,7 @@ export default function useHooks({
       updatedPropertiesList.splice(idx, 1);
       setPropertiesList?.(updatedPropertiesList);
     },
-    [customProperties, propertiesList, setPropertiesList],
+    [customProperties, propertiesList, setPropertiesList]
   );
 
   const handlePropertyDrop = useCallback(
@@ -95,17 +95,17 @@ export default function useHooks({
 
       setPropertiesList?.(newList);
     },
-    [propertiesList, setPropertiesList],
+    [propertiesList, setPropertiesList]
   );
 
   useEffect(() => {
     if (setCustomProperties) {
       if (!propertiesList) return;
       const filteredList = propertiesList.filter(
-        (item) => item.key !== "" && item.value !== "",
+        (item) => item.key !== "" && item.value !== ""
       );
       const propertyList = filteredList.map((item) => ({
-        [item.key]: item.value,
+        [item.key]: item.value
       }));
       setCustomProperties(propertyList);
     }
@@ -125,7 +125,7 @@ export default function useHooks({
       }
       setIsDragging(false);
     },
-    [handlePropertyDrop, propertiesList],
+    [handlePropertyDrop, propertiesList]
   );
 
   return {
@@ -139,6 +139,6 @@ export default function useHooks({
     handleCustomPropertyDelete,
     handlePropertyDrop,
     handleMoveStart,
-    handleMoveEnd,
+    handleMoveEnd
   };
 }
diff --git a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/index.tsx b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/index.tsx
index 92ed71838..84f8f9db0 100644
--- a/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/index.tsx
+++ b/web/src/beta/features/Editor/Map/shared/SketchCustomProperties/index.tsx
@@ -1,8 +1,8 @@
-import { FC, useMemo } from "react";
 
 import { Button, DragAndDropList } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
 
 import { CustomPropertyProps } from "../../SketchLayerCreator/type";
 import { ContentWrapper } from "../SharedComponent";
@@ -17,7 +17,7 @@ const SketchCustomProperties: FC<CustomPropertyProps> = ({
   customProperties,
   propertiesList,
   setPropertiesList,
-  setCustomProperties,
+  setCustomProperties
 }) => {
   const t = useT();
 
@@ -30,12 +30,12 @@ const SketchCustomProperties: FC<CustomPropertyProps> = ({
     handleDoubleClick,
     handleMoveStart,
     handleMoveEnd,
-    handleCustomPropertyDelete,
+    handleCustomPropertyDelete
   } = useHooks({
     customProperties,
     propertiesList,
     setPropertiesList,
-    setCustomProperties,
+    setCustomProperties
   });
 
   const DraggableCustomPropertyItems = useMemo(
@@ -54,7 +54,7 @@ const SketchCustomProperties: FC<CustomPropertyProps> = ({
             onTypeChange={handleTypeChange(idx)}
             onCustomPropertyDelete={() => handleCustomPropertyDelete(idx)}
           />
-        ),
+        )
       })),
     [
       propertiesList,
@@ -63,8 +63,8 @@ const SketchCustomProperties: FC<CustomPropertyProps> = ({
       handleTitleBlur,
       handleDoubleClick,
       handleTypeChange,
-      handleCustomPropertyDelete,
-    ],
+      handleCustomPropertyDelete
+    ]
   );
 
   return (
@@ -104,14 +104,14 @@ const SketchCustomProperties: FC<CustomPropertyProps> = ({
 const Title = styled("div")(({ theme }) => ({
   color: theme.content.weak,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 const PropertyTable = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.small,
-  width: "100%",
+  width: "100%"
 }));
 
 const PropertyTableBody = styled("div")(({ theme }) => ({
@@ -119,21 +119,21 @@ const PropertyTableBody = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.normal,
   maxHeight: "320px",
-  overflowY: "auto",
+  overflowY: "auto"
 }));
 
 const PropertyTableRow = styled("div")(({ theme }) => ({
   display: "flex",
   width: "100%",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 const ActionCol = styled("div")(() => ({
-  marginRight: "12px",
+  marginRight: "12px"
 }));
 
 const PropertyHeaderCol = styled("div")(() => ({
-  flex: 1,
+  flex: 1
 }));
 
 export default SketchCustomProperties;
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts
index 42832b880..8b0ca6b76 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/hooks.ts
@@ -17,11 +17,11 @@ export default (
   defaultAlias?: string,
   onPublish?: (
     alias: string | undefined,
-    publishStatus: PublishStatus,
+    publishStatus: PublishStatus
   ) => void | Promise<void>,
   onClose?: () => void,
   onAliasValidate?: (alias: string) => void,
-  onCopyToClipBoard?: () => void,
+  onCopyToClipBoard?: () => void
 ) => {
   const [copiedKey, setCopiedKey] = useState<CopiedItemKey>();
   const [alias, changeAlias] = useState(defaultAlias);
@@ -43,12 +43,12 @@ export default (
       if (!value) return;
       setCopiedKey((prevState) => ({
         ...prevState,
-        [key]: true,
+        [key]: true
       }));
       navigator.clipboard.writeText(value);
       onCopyToClipBoard?.();
     },
-    [onCopyToClipBoard],
+    [onCopyToClipBoard]
   );
 
   const validate = useCallback(
@@ -66,7 +66,7 @@ export default (
         onAliasValidate?.(a);
       }
     },
-    [onAliasValidate],
+    [onAliasValidate]
   );
 
   const generateAlias = useCallback(() => {
@@ -81,7 +81,7 @@ export default (
       changeAlias(a);
       validate(a);
     },
-    [validate, generateAlias],
+    [validate, generateAlias]
   );
 
   const handleClose = useCallback(() => {
@@ -121,7 +121,7 @@ export default (
     publishing,
     searchIndex,
     setStatusChange,
-    handleClose,
+    handleClose
   ]);
 
   return {
@@ -135,6 +135,6 @@ export default (
     handleClose,
     handleCopyToClipBoard,
     handleSearchIndexChange,
-    setOptions,
+    setOptions
   };
 };
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx
index 331d3380d..3672f2930 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishModal/index.tsx
@@ -3,7 +3,7 @@ import {
   Icon,
   Typography,
   ModalPanel,
-  Modal,
+  Modal
 } from "@reearth/beta/lib/reearth-ui/components";
 import { CommonField, SwitchField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
@@ -29,14 +29,14 @@ type Props = {
   url?: string[];
   onPublish: (
     alias: string | undefined,
-    publishStatus: PublishStatus,
+    publishStatus: PublishStatus
   ) => void | Promise<void>;
   onClose?: () => void;
   onCopyToClipBoard?: () => void;
   onAliasValidate?: (alias: string) => void;
   onNavigateToSettings?: (
     page?: "story" | "public" | "asset" | "plugin" | undefined,
-    subId?: string,
+    subId?: string
   ) => void;
 };
 
@@ -53,7 +53,7 @@ const PublishModal: FC<Props> = ({
   onPublish,
   onCopyToClipBoard,
   onAliasValidate,
-  onNavigateToSettings,
+  onNavigateToSettings
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -69,7 +69,7 @@ const PublishModal: FC<Props> = ({
     handlePublish,
     handleClose,
     handleCopyToClipBoard,
-    handleSearchIndexChange,
+    handleSearchIndexChange
   } = useHooks(
     publishing,
     publishStatus,
@@ -77,7 +77,7 @@ const PublishModal: FC<Props> = ({
     onPublish,
     onClose,
     onAliasValidate,
-    onCopyToClipBoard,
+    onCopyToClipBoard
   );
 
   const purl = useMemo(() => {
@@ -89,7 +89,7 @@ const PublishModal: FC<Props> = ({
   const embedCode = useMemo(
     () =>
       `<iframe width="560" height="315" src="${purl}" frameBorder="0"></iframe>;`,
-    [purl],
+    [purl]
   );
 
   const publishDisabled = useMemo(
@@ -97,7 +97,7 @@ const PublishModal: FC<Props> = ({
       loading ||
       ((publishing === "publishing" || publishing === "updating") &&
         (!alias || !!validation || validatingAlias || !validAlias)),
-    [alias, loading, publishing, validation, validAlias, validatingAlias],
+    [alias, loading, publishing, validation, validAlias, validatingAlias]
   );
 
   const modalTitleText = useMemo(() => {
@@ -126,24 +126,24 @@ const PublishModal: FC<Props> = ({
 
   const secondaryButtonText = useMemo(
     () => (!statusChanged ? t("Cancel") : t("Ok")),
-    [t, statusChanged],
+    [t, statusChanged]
   );
 
   const updateDescriptionText = useMemo(() => {
     return publishing === "updating"
       ? isStory
         ? t(
-            `Your published story will be updated. This means all current changes will overwrite the current published story.`,
+            `Your published story will be updated. This means all current changes will overwrite the current published story.`
           )
         : t(
-            `Your published scene will be updated. This means all current changes will overwrite the current published scene.`,
+            `Your published scene will be updated. This means all current changes will overwrite the current published scene.`
           )
       : isStory
         ? t(
-            `Your story will be published. This means anybody with the below URL will be able to view this story.`,
+            `Your story will be published. This means anybody with the below URL will be able to view this story.`
           )
         : t(
-            `Your scene will be published. This means anybody with the below URL will be able to view this scene.`,
+            `Your scene will be published. This means anybody with the below URL will be able to view this scene.`
           );
   }, [t, publishing, isStory]);
 
@@ -171,8 +171,8 @@ const PublishModal: FC<Props> = ({
       publishDisabled,
       primaryButtonText,
       secondaryButtonText,
-      statusChanged,
-    ],
+      statusChanged
+    ]
   );
 
   const isPublishing = publishing !== "unpublishing";
@@ -219,7 +219,7 @@ const PublishModal: FC<Props> = ({
             <CommonField
               commonTitle={t("Embed Code")}
               description={t(
-                `* Please use this code if you want to embed your story into a webpage`,
+                `* Please use this code if you want to embed your story into a webpage`
               )}
             >
               <UrlWrapper justify="space-between">
@@ -262,7 +262,7 @@ const PublishModal: FC<Props> = ({
             <SwitchField
               commonTitle={t("Search engine indexing")}
               description={t(
-                "Page will be available as result on search engines",
+                "Page will be available as result on search engines"
               )}
               onChange={handleSearchIndexChange}
             />
@@ -280,10 +280,10 @@ const PublishModal: FC<Props> = ({
             <Subtitle size="body">
               {isStory
                 ? t(
-                    `This means that anybody with the URL will become unable to view this story. This includes websites where this story is embedded.`,
+                    `This means that anybody with the URL will become unable to view this story. This includes websites where this story is embedded.`
                   )
                 : t(
-                    `This means that anybody with the URL will become unable to view this scene. This includes websites where this scene is embedded.`,
+                    `This means that anybody with the URL will become unable to view this scene. This includes websites where this scene is embedded.`
                   )}
             </Subtitle>
           </Section>
@@ -302,18 +302,18 @@ const Section = styled("div")<{ disabled?: boolean }>(
     padding: theme.spacing.normal,
     gap: theme.spacing.large,
     opacity: disabled ? 0.6 : 1,
-    cursor: disabled ? "not-allowed" : "auto",
-  }),
+    cursor: disabled ? "not-allowed" : "auto"
+  })
 );
 
 const Subtitle = styled(Typography)({
-  textAlign: "left",
+  textAlign: "left"
 });
 
 const DomainWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 const UrlWrapper = styled("div")<{ justify?: string }>(
@@ -324,8 +324,8 @@ const UrlWrapper = styled("div")<{ justify?: string }>(
     border: `1px solid ${theme.outline.weak}`,
     borderRadius: "4px",
     padding: `${theme.spacing.small}px ${theme.spacing.large}px`,
-    cursor: "pointer",
-  }),
+    cursor: "pointer"
+  })
 );
 
 const UrlText = styled("div")<{ publicUrl?: boolean }>(
@@ -337,21 +337,21 @@ const UrlText = styled("div")<{ publicUrl?: boolean }>(
     fontSize: "12px",
     whiteSpace: "break-spaces",
     color: publicUrl ? theme.primary.main : "inherit",
-    fontWeight: publicUrl ? "bold" : "normal",
-  }),
+    fontWeight: publicUrl ? "bold" : "normal"
+  })
 );
 
 const DomainText = styled("div")(({ theme }) => ({
-  marginBottom: `${theme.spacing.small}px`,
+  marginBottom: `${theme.spacing.small}px`
 }));
 
 const Header = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.normal,
-  color: theme.warning.main,
+  color: theme.warning.main
 }));
 
 const WarningIcon = styled(Icon)({
   width: "24px",
-  height: "24px",
+  height: "24px"
 });
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts b/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts
index fcbb6539d..fd2aa554d 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/hooks.ts
@@ -2,7 +2,7 @@ import { useSettingsNavigation } from "@reearth/beta/hooks";
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
 import {
   useProjectFetcher,
-  useStorytellingFetcher,
+  useStorytellingFetcher
 } from "@reearth/services/api";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -21,7 +21,7 @@ export default ({
   storyId,
   projectId,
   sceneId,
-  selectedProjectType,
+  selectedProjectType
 }: {
   storyId?: string;
   projectId?: string;
@@ -35,7 +35,7 @@ export default ({
     publishProjectLoading,
     useProjectQuery,
     useProjectAliasCheckLazyQuery,
-    usePublishProject,
+    usePublishProject
   } = useProjectFetcher();
 
   const { project: mapProject } = useProjectQuery(projectId);
@@ -52,7 +52,7 @@ export default ({
         ? {
             id: story.id,
             alias: story.alias,
-            publishmentStatus: story.publishmentStatus,
+            publishmentStatus: story.publishmentStatus
           }
         : undefined;
     } else {
@@ -60,7 +60,7 @@ export default ({
         ? {
             id: mapProject.id,
             alias: mapProject.alias,
-            publishmentStatus: mapProject.publishmentStatus,
+            publishmentStatus: mapProject.publishmentStatus
           }
         : undefined;
     }
@@ -74,12 +74,12 @@ export default ({
   const [validAlias, setValidAlias] = useState(false);
   const alias = useMemo(
     () => project?.alias ?? generateAlias(),
-    [project?.alias, generateAlias],
+    [project?.alias, generateAlias]
   );
 
   const [
     checkProjectAlias,
-    { loading: validatingAlias, data: checkProjectAliasData },
+    { loading: validatingAlias, data: checkProjectAliasData }
   ] = useProjectAliasCheckLazyQuery();
 
   const publishmentStatuses = useMemo(() => {
@@ -88,14 +88,14 @@ export default ({
         id: "map",
         title: "Scene",
         type: "default",
-        published: isPublished(mapProject?.publishmentStatus),
+        published: isPublished(mapProject?.publishmentStatus)
       },
       ...(stories?.map((s) => ({
         id: s.id,
         title: "Story",
         type: "story",
-        published: isPublished(s.publishmentStatus),
-      })) || []),
+        published: isPublished(s.publishmentStatus)
+      })) || [])
     ];
   }, [mapProject, stories]);
 
@@ -107,7 +107,7 @@ export default ({
         checkProjectAlias({ variables: { alias: a } });
       }
     },
-    [project?.alias, checkProjectAlias],
+    [project?.alias, checkProjectAlias]
   );
 
   useEffect(() => {
@@ -116,7 +116,7 @@ export default ({
         !!project &&
         !!checkProjectAliasData &&
         (project.alias === checkProjectAliasData.checkProjectAlias.alias ||
-          checkProjectAliasData.checkProjectAlias.available),
+          checkProjectAliasData.checkProjectAlias.available)
     );
   }, [validatingAlias, checkProjectAliasData, project]);
 
@@ -127,7 +127,7 @@ export default ({
         : project?.publishmentStatus === "LIMITED"
           ? "limited"
           : "unpublished",
-    [project?.publishmentStatus],
+    [project?.publishmentStatus]
   );
 
   const handleProjectPublish = useCallback(
@@ -138,7 +138,7 @@ export default ({
         await usePublishProject(publishStatus, project?.id, alias);
       }
     },
-    [project?.id, selectedProjectType, usePublishStory, usePublishProject],
+    [project?.id, selectedProjectType, usePublishStory, usePublishProject]
   );
 
   const handleModalOpen = useCallback((p: publishingType) => {
@@ -161,7 +161,7 @@ export default ({
     handleModalClose,
     handleProjectPublish,
     handleProjectAliasCheck,
-    handleNavigationToSettings,
+    handleNavigationToSettings
   };
 };
 
diff --git a/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx b/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx
index 411cfaef0..108ec4610 100644
--- a/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Publish/PublishToolsPanel/index.tsx
@@ -17,7 +17,7 @@ const PublishToolsPanel: FC = () => {
     projectId,
     sceneId,
     selectedProjectType,
-    handleProjectTypeChange,
+    handleProjectTypeChange
   } = usePublishPage();
   const t = useT();
 
@@ -34,16 +34,16 @@ const PublishToolsPanel: FC = () => {
     handleModalClose,
     handleProjectPublish,
     handleProjectAliasCheck,
-    handleNavigationToSettings,
+    handleNavigationToSettings
   } = useHooks({ storyId, projectId, sceneId, selectedProjectType });
 
   const sceneStatus = publishmentStatuses.find(
-    (status) => status?.type === "default",
+    (status) => status?.type === "default"
   )?.published
     ? "published"
     : "unpublished";
   const storyStatus = publishmentStatuses.find(
-    (status) => status?.type === "story",
+    (status) => status?.type === "story"
   )?.published
     ? "published"
     : "unpublished";
@@ -125,20 +125,20 @@ const StyledSecondaryNav = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  padding: `${theme.spacing.small}px ${theme.spacing.normal}px`,
+  padding: `${theme.spacing.small}px ${theme.spacing.normal}px`
 }));
 
 const LeftSection = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.normal,
   height: "24px",
-  width: "244px",
+  width: "244px"
 }));
 
 const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.small,
-  height: "28px",
+  height: "28px"
 }));
 
 const TabButton = styled(EntryItem)({
@@ -146,7 +146,7 @@ const TabButton = styled(EntryItem)({
   height: "44px",
   display: "flex",
   justifyContent: "space-between",
-  alignItems: "center",
+  alignItems: "center"
 });
 
 const TabButtonWrapper = styled("div")(({ theme }) => ({
@@ -154,7 +154,7 @@ const TabButtonWrapper = styled("div")(({ theme }) => ({
   alignItems: "center",
   justifyContent: "center",
   gap: theme.spacing.small,
-  width: "116px",
+  width: "116px"
 }));
 
 const PublishStatus = styled("div")<{ status: string }>(
@@ -163,10 +163,10 @@ const PublishStatus = styled("div")<{ status: string }>(
     height: "8px",
     backgroundColor:
       status !== "unpublished" ? "#24A148" : theme.content.weaker,
-    borderRadius: "50%",
-  }),
+    borderRadius: "50%"
+  })
 );
 
 const StatusWrapper = styled("div")({
-  width: "8px",
+  width: "8px"
 });
diff --git a/web/src/beta/features/Editor/Publish/context.tsx b/web/src/beta/features/Editor/Publish/context.tsx
index fa1f4794a..764b1d19a 100644
--- a/web/src/beta/features/Editor/Publish/context.tsx
+++ b/web/src/beta/features/Editor/Publish/context.tsx
@@ -13,12 +13,12 @@ export interface PublishPageContextType {
 }
 
 const PublishPageContext = createContext<PublishPageContextType | undefined>(
-  undefined,
+  undefined
 );
 
 export const PublishPageProvider = ({
   value,
-  children,
+  children
 }: {
   value: PublishPageContextType;
   children: ReactNode;
diff --git a/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts b/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
index d2bb7204f..449f031f5 100644
--- a/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
@@ -14,7 +14,7 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
 
   const selectedLayerIds = useMemo(
     () => selectedPage?.layersIds || [],
-    [selectedPage],
+    [selectedPage]
   );
 
   const allLayersSelected = useMemo(() => {
@@ -40,7 +40,7 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
       setCheckedLayers(updatedLayers);
       onPageUpdate?.(pageId, updatedLayers);
     },
-    [checkedLayers, onPageUpdate, pageId],
+    [checkedLayers, onPageUpdate, pageId]
   );
 
   const handleAllLayersCheck = useCallback(() => {
@@ -57,10 +57,10 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
     () =>
       filterVisibleItems(
         selectedPage?.property.items?.filter(
-          (p) => p.schemaGroup !== "panel" && p.schemaGroup !== "title",
-        ),
+          (p) => p.schemaGroup !== "panel" && p.schemaGroup !== "title"
+        )
       ),
-    [selectedPage?.property],
+    [selectedPage?.property]
   );
 
   return {
@@ -68,6 +68,6 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
     allCheckedLayers,
     visibleItems,
     handleLayerCheck,
-    handleAllLayersCheck,
+    handleAllLayersCheck
   };
 };
diff --git a/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx b/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx
index 9b41ea311..383a3b04b 100644
--- a/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Story/PageSettingsPanel/index.tsx
@@ -22,11 +22,11 @@ const PageSettingsPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     checkedLayers,
     visibleItems,
     handleAllLayersCheck,
-    handleLayerCheck,
+    handleLayerCheck
   } = useHooks({
     layers,
     selectedPage: selectedStoryPage,
-    onPageUpdate: handleStoryPageUpdate,
+    onPageUpdate: handleStoryPageUpdate
   });
 
   const t = useT();
@@ -95,13 +95,13 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.small,
-  padding: theme.spacing.smallest,
+  padding: theme.spacing.smallest
 }));
 
 const LayerWrapper = styled("div")(() => ({
   width: "100%",
   display: "flex",
-  flexDirection: "column",
+  flexDirection: "column"
 }));
 
 const AllLayers = styled("div")(({ theme }) => ({
@@ -110,7 +110,7 @@ const AllLayers = styled("div")(({ theme }) => ({
   borderBottom: `1px solid ${theme.outline.weak}`,
   marginBottom: theme.spacing.small,
   paddingBottom: theme.spacing.small,
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const LayerList = styled("div")(() => ({
@@ -119,12 +119,12 @@ const LayerList = styled("div")(() => ({
   height: "352px",
   overflowY: "auto",
   overflowX: "hidden",
-  width: "100%",
+  width: "100%"
 }));
 
 const Layer = styled("div")(() => ({
   display: "flex",
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 const Title = styled("div")(({ theme }) => ({
@@ -133,5 +133,5 @@ const Title = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.regular,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+  whiteSpace: "nowrap"
 }));
diff --git a/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx b/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
index 449444514..c8d5d6736 100644
--- a/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
+++ b/web/src/beta/features/Editor/Story/PagesPanel/PageItem.tsx
@@ -20,20 +20,20 @@ const PageItem: FC<PageItemProps> = ({
   storyPage,
   pageCount,
   dragHandleClassName,
-  isDragging,
+  isDragging
 }) => {
   const t = useT();
   const {
     selectedStoryPage,
     handleStoryPageSelect,
     handleStoryPageDelete,
-    handlePropertyValueUpdate,
+    handlePropertyValueUpdate
   } = useStoryPage();
 
   const title = (getFieldValue(
     storyPage.property.items ?? [],
     "title",
-    "title",
+    "title"
   ) ?? t("Untitled")) as string;
   const hasEmptySpace = isEmptyString(title);
 
@@ -56,14 +56,14 @@ const PageItem: FC<PageItemProps> = ({
       "title",
       undefined,
       "string",
-      localTitle,
+      localTitle
     );
   }, [
     handlePropertyValueUpdate,
     localTitle,
     storyPage.property.id,
     storyPage.property.items,
-    storyPage.title,
+    storyPage.title
   ]);
 
   const optionsMenu = useMemo(
@@ -72,16 +72,16 @@ const PageItem: FC<PageItemProps> = ({
         id: "rename",
         title: "Rename",
         icon: "pencilSimple" as const,
-        onClick: () => setEditingPageNameId(storyPage.id),
+        onClick: () => setEditingPageNameId(storyPage.id)
       },
       {
         id: "delete",
         title: "Delete",
         icon: "trash" as const,
-        onClick: () => handleStoryPageDelete(storyPage.id),
-      },
+        onClick: () => handleStoryPageDelete(storyPage.id)
+      }
     ],
-    [storyPage.id, handleStoryPageDelete],
+    [storyPage.id, handleStoryPageDelete]
   );
 
   return (
@@ -124,14 +124,14 @@ const Wrapper = styled("div")(({ theme }) => ({
   alignItems: "center",
   gap: theme.spacing.micro,
   width: "100%",
-  overflowX: "hidden",
+  overflowX: "hidden"
 }));
 
 const PageCount = styled("div")(({ theme }) => ({
   minWidth: "17px",
   color: theme.content.main,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -141,5 +141,5 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.regular,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+  whiteSpace: "nowrap"
 }));
diff --git a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
index c5a351eb0..4a7241a01 100644
--- a/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
+++ b/web/src/beta/features/Editor/Story/PagesPanel/index.tsx
@@ -16,7 +16,7 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     useStoryPage();
 
   const [openedPageId, setOpenedPageId] = useState<string | undefined>(
-    undefined,
+    undefined
   );
 
   const [isDragging, setIsDragging] = useState(false);
@@ -33,9 +33,9 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
             dragHandleClassName={PAGES_DRAG_HANDLE_CLASS_NAME}
             isDragging={isDragging}
           />
-        ),
+        )
       })),
-    [storyPageitems, isDragging],
+    [storyPageitems, isDragging]
   );
 
   const handleMoveStart = useCallback(() => {
@@ -58,7 +58,7 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       }
       setIsDragging(false);
     },
-    [handleStoryPageMove],
+    [handleStoryPageMove]
   );
 
   useEffect(() => {
@@ -108,9 +108,9 @@ const Wrapper = styled("div")(({ theme }) => ({
   height: "100%",
   gap: theme.spacing.normal,
   overflowY: "auto",
-  boxSizing: "border-box",
+  boxSizing: "border-box"
 }));
 
 const ButtonWrapper = styled("div")(({ theme }) => ({
-  padding: `${theme.spacing.small}px 0`,
+  padding: `${theme.spacing.small}px 0`
 }));
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx
index a1a837d4d..4973c024e 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import ActionItem from ".";
 
 export default {
-  component: ActionItem,
+  component: ActionItem
 } as Meta;
 
 type Story = StoryObj<typeof ActionItem>;
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof ActionItem>;
 export const Default: Story = {
   args: {
     title: "New Page",
-    icon: "square",
-  },
+    icon: "square"
+  }
 };
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
index 312df7ed9..815989073 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
@@ -18,7 +18,7 @@ const StorySidePanelAction: FC<Props> = ({
   iconSize,
   iconColor,
   title,
-  onClick,
+  onClick
 }) => {
   return (
     <Wrapper onClick={onClick} type="button">
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx
index e70549b40..b95f259e5 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import ActionItem from "./index";
 
 export default {
-  component: ActionItem,
+  component: ActionItem
 } as Meta;
 
 type Story = StoryObj<typeof ActionItem>;
@@ -12,6 +12,6 @@ export const Default: Story = {
   args: {
     pageCount: 10,
     isSwipeable: true,
-    children: <div>test</div>,
-  },
+    children: <div>test</div>
+  }
 };
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
index 8a8806a49..792b3e4f1 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
@@ -12,7 +12,7 @@ type Props = {
 const StorySidePanelPageWrapper: FC<Props> = ({
   children,
   pageCount,
-  isSwipeable,
+  isSwipeable
 }) => {
   const theme = useTheme();
 
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx b/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
index 664666bdc..3fe767b25 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import ContentStory from ".";
 
 export default {
-  component: ContentStory,
+  component: ContentStory
 } as Meta;
 
 type Story = StoryObj<typeof ContentStory>;
@@ -15,5 +15,5 @@ export const Default: Story = {
         <ContentStory {...args} />
       </div>
     );
-  },
+  }
 };
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
index 2d711804e..50a698123 100644
--- a/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
+++ b/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
@@ -25,17 +25,17 @@ const ContentStory: React.FC<Props> = ({
   onStoryAdd,
   onStoryDelete,
   onStoryClickSettings,
-  onStoryRename,
+  onStoryRename
 }) => {
   const [openedPageId, setOpenedPageId] = useState<string | undefined>(
-    undefined,
+    undefined
   );
   const [items, setItems] = useState(
     [...Array(100)].map((_, i) => ({
       id: i.toString(),
       index: i,
-      text: "page" + i,
-    })),
+      text: "page" + i
+    }))
   );
   return (
     <SContent>
@@ -52,7 +52,7 @@ const ContentStory: React.FC<Props> = ({
               const items = [...old];
               items.splice(
                 old.findIndex((o) => o.id === item.id),
-                1,
+                1
               );
               items.splice(index, 0, item);
               return items;
@@ -86,7 +86,7 @@ const ContentStory: React.FC<Props> = ({
                           onClick: () => {
                             setOpenedPageId(undefined);
                             onStoryRename(item.id);
-                          },
+                          }
                         },
                         {
                           icon: "gearSix",
@@ -94,7 +94,7 @@ const ContentStory: React.FC<Props> = ({
                           onClick: () => {
                             setOpenedPageId(undefined);
                             onStoryClickSettings(item.id);
-                          },
+                          }
                         },
                         {
                           icon: "trash",
@@ -102,8 +102,8 @@ const ContentStory: React.FC<Props> = ({
                           onClick: () => {
                             setOpenedPageId(undefined);
                             onStoryDelete(item.id);
-                          },
-                        },
+                          }
+                        }
                       ]}
                     />
                   }
@@ -137,7 +137,7 @@ const ContentStory: React.FC<Props> = ({
                     onClick: () => {
                       setOpenedPageId(undefined);
                       onStoryRename(i.toString());
-                    },
+                    }
                   },
                   {
                     icon: "gearSix",
@@ -145,7 +145,7 @@ const ContentStory: React.FC<Props> = ({
                     onClick: () => {
                       setOpenedPageId(undefined);
                       onStoryClickSettings(i.toString());
-                    },
+                    }
                   },
                   {
                     icon: "trash",
@@ -153,8 +153,8 @@ const ContentStory: React.FC<Props> = ({
                     onClick: () => {
                       setOpenedPageId(undefined);
                       onStoryDelete(i.toString());
-                    },
-                  },
+                    }
+                  }
                 ]}
               />
             }
diff --git a/web/src/beta/features/Editor/Story/context.tsx b/web/src/beta/features/Editor/Story/context.tsx
index 5017b6e40..b5950c7bb 100644
--- a/web/src/beta/features/Editor/Story/context.tsx
+++ b/web/src/beta/features/Editor/Story/context.tsx
@@ -21,7 +21,7 @@ export interface StoryPageContextType {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   sceneId?: string;
   selectedStoryPage?: Page;
@@ -32,12 +32,12 @@ export interface StoryPageContextType {
 }
 
 const StoryPageContext = createContext<StoryPageContextType | undefined>(
-  undefined,
+  undefined
 );
 
 export const StoryPageProvider = ({
   value,
-  children,
+  children
 }: {
   value: StoryPageContextType;
   children: ReactNode;
diff --git a/web/src/beta/features/Editor/Visualizer/convert-infobox.ts b/web/src/beta/features/Editor/Visualizer/convert-infobox.ts
index 4eb2eb4e3..bf3d0a5a8 100644
--- a/web/src/beta/features/Editor/Visualizer/convert-infobox.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert-infobox.ts
@@ -9,7 +9,7 @@ import { processProperty as processNewProperty } from "./processNewProperty";
 export default (
   orig: NLSInfobox | null | undefined,
   parent: NLSInfobox | null | undefined,
-  blockNames?: Record<string, string>,
+  blockNames?: Record<string, string>
 ): Layer["infobox"] => {
   const used = orig || parent;
   if (!used) return;
@@ -24,7 +24,7 @@ export default (
       property: processNewProperty(undefined, b.property),
       propertyForPluginAPI: processProperty(b.property),
       propertyId: b.propertyId, // required by onBlockChange
-      propertyItemsForPluginBlock: convert(b.property),
-    })),
+      propertyItemsForPluginBlock: convert(b.property)
+    }))
   };
 };
diff --git a/web/src/beta/features/Editor/Visualizer/convert-story.ts b/web/src/beta/features/Editor/Visualizer/convert-story.ts
index 8ec7059a7..78a313c6d 100644
--- a/web/src/beta/features/Editor/Visualizer/convert-story.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert-story.ts
@@ -1,13 +1,13 @@
 import {
   Story,
   StoryBlock,
-  StoryPage,
+  StoryPage
 } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
 import { convert } from "@reearth/services/api/propertyApi/utils";
 import { Scene } from "@reearth/services/api/sceneApi";
 import {
   StoryPage as GqlStoryPage,
-  StoryBlock as GqlStoryBlock,
+  StoryBlock as GqlStoryBlock
 } from "@reearth/services/gql";
 
 import { processProperty } from "./convert";
@@ -15,7 +15,7 @@ import { processProperty as processNewProperty } from "./processNewProperty";
 
 export const convertStory = (
   scene?: Scene,
-  storyId?: string,
+  storyId?: string
 ): Story | undefined => {
   const story = scene?.stories.find((s) => s.id === storyId);
   const installedBlockNames = (scene?.plugins ?? [])
@@ -23,7 +23,7 @@ export const convertStory = (
       (p.plugin?.extensions ?? [])
         .filter((e) => e.type === "StoryBlock")
         .map((e) => ({ [e.extensionId]: e.translatedName ?? e.name }))
-        .filter((e): e is Record<string, string> => !!e),
+        .filter((e): e is Record<string, string> => !!e)
     )
     .reduce((result, obj) => Object.assign(result, obj), {});
 
@@ -36,7 +36,7 @@ export const convertStory = (
       propertyId: p.propertyId,
       layerIds: p.layersIds,
       property: processProperty(undefined, p.property),
-      blocks: storyBlocks(p.blocks),
+      blocks: storyBlocks(p.blocks)
     }));
   const storyBlocks = (blocks: GqlStoryBlock[]): StoryBlock[] =>
     blocks.map((b) => ({
@@ -48,7 +48,7 @@ export const convertStory = (
       propertyId: b.property?.id,
       property: processNewProperty(undefined, b.property),
       propertyForPluginAPI: processProperty(b.property),
-      propertyItemsForPluginBlock: convert(b.property),
+      propertyItemsForPluginBlock: convert(b.property)
     }));
 
   return {
@@ -56,6 +56,6 @@ export const convertStory = (
     title: story.title,
     position: story.panelPosition === "RIGHT" ? "right" : "left",
     bgColor: story.bgColor || "#f1f1f1",
-    pages: storyPages(story.pages),
+    pages: storyPages(story.pages)
   };
 };
diff --git a/web/src/beta/features/Editor/Visualizer/convert.ts b/web/src/beta/features/Editor/Visualizer/convert.ts
index 420f03543..265a4b621 100644
--- a/web/src/beta/features/Editor/Visualizer/convert.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert.ts
@@ -2,19 +2,19 @@ import {
   type WidgetZone,
   type WidgetSection,
   type WidgetArea,
-  type Alignment,
+  type Alignment
 } from "@reearth/beta/features/Visualizer/Crust";
 import {
   BuiltinWidgets,
   Widget as RawWidget,
   WidgetAlignSystem,
   WidgetLayoutConstraint,
-  isBuiltinWidget,
+  isBuiltinWidget
 } from "@reearth/beta/features/Visualizer/Crust/Widgets";
 import { WidgetAreaPadding } from "@reearth/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types";
 import {
   DEFAULT_LAYER_STYLE,
-  valueTypeFromGQL,
+  valueTypeFromGQL
 } from "@reearth/beta/utils/value";
 import { LayerAppearanceTypes } from "@reearth/core";
 import type { Layer } from "@reearth/core";
@@ -33,7 +33,7 @@ import {
   PropertySchemaFieldFragmentFragment,
   PropertyFieldFragmentFragment,
   ValueType as GQLValueType,
-  NlsLayerCommonFragment,
+  NlsLayerCommonFragment
 } from "@reearth/services/gql";
 
 import convertInfobox from "./convert-infobox";
@@ -62,7 +62,7 @@ export type Widget = Omit<RawWidget, "layout" | "extended"> & {
 };
 
 export const convertWidgets = (
-  scene?: Partial<Scene>,
+  scene?: Partial<Scene>
 ):
   | {
       floating: Widget[];
@@ -83,14 +83,14 @@ export const convertWidgets = (
                 [`${p.plugin?.id}/${e.extensionId}`]: {
                   extendable: {
                     horizontally: e?.widgetLayout?.extendable.horizontally,
-                    vertically: e?.widgetLayout?.extendable.vertically,
+                    vertically: e?.widgetLayout?.extendable.vertically
                   },
-                  floating: !!e?.widgetLayout?.floating,
-                },
+                  floating: !!e?.widgetLayout?.floating
+                }
               }
             : b,
-        {},
-      ),
+        {}
+      )
     )
     .reduce((a, b) => ({ ...a, ...b }), {});
 
@@ -98,7 +98,7 @@ export const convertWidgets = (
     ?.filter(
       (w) =>
         w.enabled &&
-        layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating,
+        layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating
     )
     .map(
       (w): Widget => ({
@@ -106,15 +106,15 @@ export const convertWidgets = (
         extended: !!w.extended,
         pluginId: w.pluginId,
         extensionId: w.extensionId,
-        property: processProperty(w.property, undefined, undefined, undefined),
-      }),
+        property: processProperty(w.property, undefined, undefined, undefined)
+      })
     );
 
   const widgets = scene?.widgets
     ?.filter(
       (w) =>
         w.enabled &&
-        !layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating,
+        !layoutConstraint?.[`${w.pluginId}/${w.extensionId}`]?.floating
     )
     .map(
       (w): Widget => ({
@@ -122,8 +122,8 @@ export const convertWidgets = (
         extended: !!w.extended,
         pluginId: w.pluginId,
         extensionId: w.extensionId,
-        property: processProperty(w.property, undefined, undefined, undefined),
-      }),
+        property: processProperty(w.property, undefined, undefined, undefined)
+      })
     );
 
   const widgetZone = (zone?: Maybe<WidgetZoneType>): WidgetZone | undefined => {
@@ -134,12 +134,12 @@ export const convertWidgets = (
     return {
       left,
       center,
-      right,
+      right
     };
   };
 
   const widgetSection = (
-    section?: Maybe<WidgetSectionType>,
+    section?: Maybe<WidgetSectionType>
   ): WidgetSection | undefined => {
     const top = widgetArea(section?.top);
     const middle = widgetArea(section?.middle);
@@ -148,7 +148,7 @@ export const convertWidgets = (
     return {
       top,
       middle,
-      bottom,
+      bottom
     };
   };
 
@@ -165,12 +165,12 @@ export const convertWidgets = (
         top: padding?.top ?? 6,
         bottom: padding?.bottom ?? 6,
         left: padding?.left ?? 6,
-        right: padding?.right ?? 6,
+        right: padding?.right ?? 6
       },
       gap: area?.gap ?? 6,
       widgets: areaWidgets,
       background: area?.background as string | undefined,
-      centered: area?.centered,
+      centered: area?.centered
     };
   };
 
@@ -185,10 +185,10 @@ export const convertWidgets = (
     floating: floating ?? [],
     alignSystem: {
       outer: widgetZone(scene?.widgetAlignSystem?.outer),
-      inner: widgetZone(scene?.widgetAlignSystem?.inner),
+      inner: widgetZone(scene?.widgetAlignSystem?.inner)
     },
     layoutConstraint,
-    ownBuiltinWidgets: ownBuiltinWidgets ?? [],
+    ownBuiltinWidgets: ownBuiltinWidgets ?? []
   };
 };
 
@@ -196,7 +196,7 @@ export const processProperty = (
   parent: PropertyFragmentFragment | null | undefined,
   orig?: PropertyFragmentFragment | null | undefined,
   linkedDatasetId?: string | null | undefined,
-  datasets?: DatasetMap | null | undefined,
+  datasets?: DatasetMap | null | undefined
 ): P | undefined => {
   const schema = orig?.schema || parent?.schema;
   if (!schema) return;
@@ -214,10 +214,10 @@ export const processProperty = (
       [b.schemaGroupId]: {
         schema: b,
         orig: orig?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
-        parent: parent?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
-      },
+        parent: parent?.items.find((i) => i.schemaGroupId === b.schemaGroupId)
+      }
     }),
-    {},
+    {}
   );
   const mergedProperty: P = Object.fromEntries(
     Object.entries(allItems)
@@ -234,8 +234,8 @@ export const processProperty = (
               undefined,
               undefined,
               linkedDatasetId,
-              datasets,
-            ),
+              datasets
+            )
           ];
         }
 
@@ -252,10 +252,10 @@ export const processProperty = (
                 g,
                 undefined,
                 linkedDatasetId,
-                datasets,
+                datasets
               ),
-              id: g.id,
-            })),
+              id: g.id
+            }))
           ];
         }
 
@@ -270,13 +270,13 @@ export const processProperty = (
               parent,
               orig,
               linkedDatasetId,
-              datasets,
-            ),
+              datasets
+            )
           ];
         }
         return [key, null];
       })
-      .filter(([, value]) => !!value),
+      .filter(([, value]) => !!value)
   );
 
   return mergedProperty;
@@ -287,7 +287,7 @@ const processPropertyGroups = (
   parent: PropertyGroupFragmentFragment | null | undefined,
   original: PropertyGroupFragmentFragment | null | undefined,
   linkedDatasetId: string | null | undefined,
-  datasets: DatasetMap | null | undefined,
+  datasets: DatasetMap | null | undefined
 ): any => {
   const allFields: Record<
     string,
@@ -302,10 +302,10 @@ const processPropertyGroups = (
       [b.fieldId]: {
         schema: b,
         parent: parent?.fields.find((i) => i.fieldId === b.fieldId),
-        orig: original?.fields.find((i) => i.fieldId === b.fieldId),
-      },
+        orig: original?.fields.find((i) => i.fieldId === b.fieldId)
+      }
     }),
-    {},
+    {}
   );
 
   return Object.fromEntries(
@@ -323,14 +323,14 @@ const processPropertyGroups = (
               datasets,
               datasetSchemaId,
               linkedDatasetId,
-              datasetFieldId,
-            ),
+              datasetFieldId
+            )
           ];
         }
 
         return [key, valueFromGQL(used.value, used.type)?.value];
       })
-      .filter(([, value]) => typeof value !== "undefined" && value !== null),
+      .filter(([, value]) => typeof value !== "undefined" && value !== null)
   );
 };
 
@@ -338,7 +338,7 @@ export const datasetValue = (
   datasets: DatasetMap | null | undefined,
   datasetSchemaId: string,
   datasetId: string,
-  fieldId: string,
+  fieldId: string
 ) => {
   const dataset = datasets?.[datasetSchemaId];
   if (!dataset?.schema) return;
@@ -362,7 +362,7 @@ export const valueFromGQL = (val: any, type: GQLValueType) => {
   if (t === "camera" && val && typeof val === "object" && "altitude" in val) {
     newVal = {
       ...val,
-      height: val.altitude,
+      height: val.altitude
     };
   }
   if (
@@ -374,7 +374,7 @@ export const valueFromGQL = (val: any, type: GQLValueType) => {
   ) {
     newVal = {
       ...val,
-      textAlign: val.textAlign.toLowerCase(),
+      textAlign: val.textAlign.toLowerCase()
     };
   }
   return { type: t, value: newVal ?? undefined, ok };
@@ -389,11 +389,11 @@ export function processLayers(
   newLayers?: NLSLayer[],
   layerStyles?: LayerStyle[],
   parent?: RawNLSLayer | null | undefined,
-  infoboxBlockNames?: Record<string, string>,
+  infoboxBlockNames?: Record<string, string>
 ): Layer[] | undefined {
   const getLayerStyleValue = (id?: string) => {
     const layerStyleValue: Partial<LayerAppearanceTypes> = layerStyles?.find(
-      (a) => a.id === id,
+      (a) => a.id === id
     )?.value;
     if (typeof layerStyleValue === "object") {
       try {
@@ -415,11 +415,11 @@ export function processLayers(
         type: "FeatureCollection",
         features: nlsLayer.sketch?.featureCollection?.features.map((f) => ({
           ...f,
-          geometry: f.geometry[0],
-        })),
+          geometry: f.geometry[0]
+        }))
       },
       isSketchLayer: true,
-      idProperty: "id",
+      idProperty: "id"
     };
 
     return {
@@ -432,13 +432,13 @@ export function processLayers(
       infobox: convertInfobox(
         nlsLayer.infobox,
         parent?.infobox,
-        infoboxBlockNames,
+        infoboxBlockNames
       ),
       properties: nlsLayer.config?.properties,
       defines: nlsLayer.config?.defines,
       events: nlsLayer.config?.events,
       data: nlsLayer.isSketch ? sketchLayerData : nlsLayer.config?.data,
-      ...layerStyle,
+      ...layerStyle
     };
   });
 }
diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
index 0287a7677..7c4befb7d 100644
--- a/web/src/beta/features/Editor/Visualizer/hooks.ts
+++ b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -1,17 +1,17 @@
 import type {
   Alignment,
-  Location,
+  Location
 } from "@reearth/beta/features/Visualizer/Crust";
 import {
   convertData,
-  sceneProperty2ViewerPropertyMapping,
+  sceneProperty2ViewerPropertyMapping
 } from "@reearth/beta/utils/convert-object";
 import { Camera } from "@reearth/beta/utils/value";
 import type {
   LatLng,
   ComputedLayer,
   ComputedFeature,
-  ViewerProperty,
+  ViewerProperty
 } from "@reearth/core";
 import {
   useLayersFetcher,
@@ -20,7 +20,7 @@ import {
   useStorytellingFetcher,
   usePropertyFetcher,
   useLayerStylesFetcher,
-  useInfoboxFetcher,
+  useInfoboxFetcher
 } from "@reearth/services/api";
 import { config } from "@reearth/services/config";
 import {
@@ -28,7 +28,7 @@ import {
   useEffect,
   useCallback,
   useState,
-  MutableRefObject,
+  MutableRefObject
 } from "react";
 
 import { useCurrentCamera } from "../atoms";
@@ -46,7 +46,7 @@ export default ({
   isVisualizerResizing,
   onCoreLayerSelect,
   onVisualizerReady,
-  setSelectedStoryPageId,
+  setSelectedStoryPageId
 }: {
   sceneId?: string;
   storyId?: string;
@@ -67,13 +67,13 @@ export default ({
     useUpdatePropertyValue,
     useAddPropertyItem,
     useMovePropertyItem,
-    useRemovePropertyItem,
+    useRemovePropertyItem
   } = usePropertyFetcher();
   const {
     useInstallableInfoboxBlocksQuery,
     useCreateInfoboxBlock,
     useDeleteInfoboxBlock,
-    useMoveInfoboxBlock,
+    useMoveInfoboxBlock
   } = useInfoboxFetcher();
 
   const [currentCamera, setCurrentCamera] = useCurrentCamera();
@@ -81,7 +81,7 @@ export default ({
     (camera: Camera) => {
       setCurrentCamera(camera);
     },
-    [setCurrentCamera],
+    [setCurrentCamera]
   );
 
   const { nlsLayers } = useGetLayersQuery({ sceneId });
@@ -91,7 +91,7 @@ export default ({
 
   const [zoomedLayerId, zoomToLayer] = useState<string | undefined>(undefined);
   const [initialCamera, setInitialCamera] = useState<Camera | undefined>(
-    undefined,
+    undefined
   );
 
   const { viewerProperty, cesiumIonAccessToken } = useMemo(() => {
@@ -104,10 +104,10 @@ export default ({
       viewerProperty: sceneProperty
         ? (convertData(
             sceneProperty,
-            sceneProperty2ViewerPropertyMapping,
+            sceneProperty2ViewerPropertyMapping
           ) as ViewerProperty)
         : undefined,
-      cesiumIonAccessToken,
+      cesiumIonAccessToken
     };
   }, [scene?.property]);
 
@@ -116,7 +116,7 @@ export default ({
   }, [initialCamera, setCurrentCamera]);
 
   const { installableInfoboxBlocks } = useInstallableInfoboxBlocksQuery({
-    sceneId,
+    sceneId
   });
 
   const infoboxBlockNames = useMemo(
@@ -128,7 +128,7 @@ export default ({
           Object.assign(result, obj);
           return result;
         }, {}),
-    [installableInfoboxBlocks],
+    [installableInfoboxBlocks]
   );
 
   const layers = useMemo(() => {
@@ -136,12 +136,12 @@ export default ({
       nlsLayers,
       layerStyles,
       undefined,
-      infoboxBlockNames,
+      infoboxBlockNames
     );
     if (!showStoryPanel) return processedLayers;
     return processedLayers?.map((layer) => ({
       ...layer,
-      visible: true,
+      visible: true
     }));
   }, [nlsLayers, layerStyles, infoboxBlockNames, showStoryPanel]);
 
@@ -149,7 +149,7 @@ export default ({
     (
       layerId?: string,
       computedLayer?: ComputedLayer,
-      computedFeature?: ComputedFeature,
+      computedFeature?: ComputedFeature
     ) => {
       if (
         (!layerId && !computedFeature && !selectedLayer) ??
@@ -163,7 +163,7 @@ export default ({
         onCoreLayerSelect(undefined);
       }
     },
-    [selectedLayer, onCoreLayerSelect],
+    [selectedLayer, onCoreLayerSelect]
   );
 
   const handleLayerDrop = useCallback(
@@ -171,7 +171,7 @@ export default ({
       // propertyKey will be "default.location" for example
       const [_schemaGroupId, _fieldId] = propertyKey.split(".", 2);
     },
-    [],
+    []
   );
 
   // Widgets
@@ -180,11 +180,11 @@ export default ({
   const handleWidgetUpdate = useCallback(
     async (
       id: string,
-      update: { location?: Location; extended?: boolean; index?: number },
+      update: { location?: Location; extended?: boolean; index?: number }
     ) => {
       await useUpdateWidget(id, update, sceneId);
     },
-    [sceneId, useUpdateWidget],
+    [sceneId, useUpdateWidget]
   );
 
   const handleWidgetAlignSystemUpdate = useCallback(
@@ -194,12 +194,12 @@ export default ({
           zone: location.zone,
           section: location.section,
           area: location.area,
-          align,
+          align
         },
-        sceneId,
+        sceneId
       );
     },
-    [sceneId, useUpdateWidgetAlignSystem],
+    [sceneId, useUpdateWidgetAlignSystem]
   );
 
   // Plugin
@@ -209,7 +209,7 @@ export default ({
         a[b.pluginId] = processProperty(b.property);
         return a;
       }, {}),
-    [scene?.plugins],
+    [scene?.plugins]
   );
 
   const handleInfoboxBlockCreate = useCallback(
@@ -219,10 +219,10 @@ export default ({
         layerId: selectedLayer.layer.id,
         pluginId,
         extensionId,
-        index,
+        index
       });
     },
-    [selectedLayer, useCreateInfoboxBlock],
+    [selectedLayer, useCreateInfoboxBlock]
   );
 
   const handleInfoboxBlockMove = useCallback(
@@ -231,10 +231,10 @@ export default ({
       await useMoveInfoboxBlock({
         layerId: selectedLayer.layer.id,
         infoboxBlockId: id,
-        index: targetIndex,
+        index: targetIndex
       });
     },
-    [selectedLayer, useMoveInfoboxBlock],
+    [selectedLayer, useMoveInfoboxBlock]
   );
 
   const handleInfoboxBlockRemove = useCallback(
@@ -242,10 +242,10 @@ export default ({
       if (!selectedLayer?.layer?.id || !id) return;
       await useDeleteInfoboxBlock({
         layerId: selectedLayer.layer.id,
-        infoboxBlockId: id,
+        infoboxBlockId: id
       });
     },
-    [selectedLayer, useDeleteInfoboxBlock],
+    [selectedLayer, useDeleteInfoboxBlock]
   );
 
   // Story
@@ -256,7 +256,7 @@ export default ({
       if (isVisualizerResizing?.current) return;
       setSelectedStoryPageId(pageId);
     },
-    [isVisualizerResizing, setSelectedStoryPageId],
+    [isVisualizerResizing, setSelectedStoryPageId]
   );
 
   const handleStoryBlockCreate = useCallback(
@@ -264,7 +264,7 @@ export default ({
       pageId?: string,
       extensionId?: string,
       pluginId?: string,
-      index?: number,
+      index?: number
     ) => {
       if (!extensionId || !pluginId || !storyId || !pageId) return;
       await useCreateStoryBlock({
@@ -272,10 +272,10 @@ export default ({
         extensionId,
         storyId,
         pageId,
-        index,
+        index
       });
     },
-    [storyId, useCreateStoryBlock],
+    [storyId, useCreateStoryBlock]
   );
 
   const handleStoryBlockDelete = useCallback(
@@ -283,7 +283,7 @@ export default ({
       if (!blockId || !storyId || !pageId) return;
       await useDeleteStoryBlock({ blockId, pageId, storyId });
     },
-    [storyId, useDeleteStoryBlock],
+    [storyId, useDeleteStoryBlock]
   );
 
   const handlePropertyValueUpdate = useCallback(
@@ -293,7 +293,7 @@ export default ({
       fieldId?: string,
       itemId?: string,
       vt?: any,
-      v?: any,
+      v?: any
     ) => {
       if (!propertyId || !schemaItemId || !fieldId || !vt) return;
       await useUpdatePropertyValue(
@@ -303,10 +303,10 @@ export default ({
         fieldId,
         "en",
         v,
-        vt,
+        vt
       );
     },
-    [useUpdatePropertyValue],
+    [useUpdatePropertyValue]
   );
 
   const handlePropertyItemAdd = useCallback(
@@ -314,7 +314,7 @@ export default ({
       if (!propertyId || !schemaGroupId) return;
       await useAddPropertyItem(propertyId, schemaGroupId);
     },
-    [useAddPropertyItem],
+    [useAddPropertyItem]
   );
 
   const handlePropertyItemMove = useCallback(
@@ -322,13 +322,13 @@ export default ({
       propertyId?: string,
       schemaGroupId?: string,
       itemId?: string,
-      index?: number,
+      index?: number
     ) => {
       if (!propertyId || !schemaGroupId || !itemId || index === undefined)
         return;
       await useMovePropertyItem(propertyId, schemaGroupId, itemId, index);
     },
-    [useMovePropertyItem],
+    [useMovePropertyItem]
   );
 
   const handlePropertyItemDelete = useCallback(
@@ -336,7 +336,7 @@ export default ({
       if (!propertyId || !schemaGroupId || !itemId) return;
       await useRemovePropertyItem(propertyId, schemaGroupId, itemId);
     },
-    [useRemovePropertyItem],
+    [useRemovePropertyItem]
   );
 
   const engineMeta = useMemo(
@@ -344,9 +344,9 @@ export default ({
       cesiumIonAccessToken:
         typeof cesiumIonAccessToken === "string" && cesiumIonAccessToken
           ? cesiumIonAccessToken
-          : config()?.cesiumIonAccessToken,
+          : config()?.cesiumIonAccessToken
     }),
-    [cesiumIonAccessToken],
+    [cesiumIonAccessToken]
   );
 
   // TODO: Use GQL value
@@ -358,7 +358,7 @@ export default ({
 
   const handleMount = useCallback(
     () => onVisualizerReady(true),
-    [onVisualizerReady],
+    [onVisualizerReady]
   );
 
   return {
@@ -388,6 +388,6 @@ export default ({
     handlePropertyItemDelete,
     handlePropertyItemMove,
     handleMount,
-    zoomToLayer,
+    zoomToLayer
   };
 };
diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx
index 183b81eae..56855a8a9 100644
--- a/web/src/beta/features/Editor/Visualizer/index.tsx
+++ b/web/src/beta/features/Editor/Visualizer/index.tsx
@@ -2,7 +2,7 @@ import Visualizer from "@reearth/beta/features/Visualizer";
 import { type InteractionModeType } from "@reearth/beta/features/Visualizer/Crust";
 import {
   StoryPanelRef,
-  type InstallableStoryBlock,
+  type InstallableStoryBlock
 } from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
 import { SketchFeature, SketchType } from "@reearth/core";
 import type { MapRef } from "@reearth/core";
@@ -36,7 +36,7 @@ export type Props = {
   onCoreLayerSelect: (props: LayerSelectProps) => void;
   setSelectedStoryPageId: (value: string | undefined) => void;
   selectWidgetArea: (
-    update?: SetStateAction<WidgetAreaState | undefined>,
+    update?: SetStateAction<WidgetAreaState | undefined>
   ) => void;
 };
 
@@ -60,7 +60,7 @@ const EditorVisualizer: React.FC<Props> = ({
   onVisualizerReady,
   onCoreLayerSelect,
   setSelectedStoryPageId,
-  selectWidgetArea,
+  selectWidgetArea
 }) => {
   const {
     viewerProperty,
@@ -89,7 +89,7 @@ const EditorVisualizer: React.FC<Props> = ({
     handlePropertyItemDelete,
     handlePropertyItemMove,
     handleMount,
-    zoomToLayer,
+    zoomToLayer
   } = useHooks({
     sceneId,
     isBuilt,
@@ -99,7 +99,7 @@ const EditorVisualizer: React.FC<Props> = ({
     isVisualizerResizing,
     onCoreLayerSelect,
     onVisualizerReady,
-    setSelectedStoryPageId,
+    setSelectedStoryPageId
   });
 
   return (
diff --git a/web/src/beta/features/Editor/Visualizer/processNewProperty.ts b/web/src/beta/features/Editor/Visualizer/processNewProperty.ts
index e5911cdd1..09b36c643 100644
--- a/web/src/beta/features/Editor/Visualizer/processNewProperty.ts
+++ b/web/src/beta/features/Editor/Visualizer/processNewProperty.ts
@@ -6,7 +6,7 @@ import {
   PropertyGroupFragmentFragment,
   PropertyItemFragmentFragment,
   PropertySchemaFieldFragmentFragment,
-  PropertySchemaGroupFragmentFragment,
+  PropertySchemaGroupFragmentFragment
 } from "@reearth/services/gql";
 
 import { DatasetMap, P, datasetValue } from "./convert";
@@ -15,7 +15,7 @@ export const processProperty = (
   parent: PropertyFragmentFragment | null | undefined,
   orig?: PropertyFragmentFragment | null | undefined,
   linkedDatasetId?: string | null | undefined,
-  datasets?: DatasetMap | null | undefined,
+  datasets?: DatasetMap | null | undefined
 ): P | undefined => {
   const schema = orig?.schema || parent?.schema;
   if (!schema) return;
@@ -33,10 +33,10 @@ export const processProperty = (
       [b.schemaGroupId]: {
         schema: b,
         orig: orig?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
-        parent: parent?.items.find((i) => i.schemaGroupId === b.schemaGroupId),
-      },
+        parent: parent?.items.find((i) => i.schemaGroupId === b.schemaGroupId)
+      }
     }),
-    {},
+    {}
   );
   const mergedProperty: P = Object.fromEntries(
     Object.entries(allItems)
@@ -53,8 +53,8 @@ export const processProperty = (
               undefined,
               undefined,
               linkedDatasetId,
-              datasets,
-            ),
+              datasets
+            )
           ];
         }
 
@@ -71,10 +71,10 @@ export const processProperty = (
                 g,
                 undefined,
                 linkedDatasetId,
-                datasets,
+                datasets
               ),
-              id: g.id,
-            })),
+              id: g.id
+            }))
           ];
         }
 
@@ -89,13 +89,13 @@ export const processProperty = (
               parent,
               orig,
               linkedDatasetId,
-              datasets,
-            ),
+              datasets
+            )
           ];
         }
         return [key, null];
       })
-      .filter(([, value]) => !!value),
+      .filter(([, value]) => !!value)
   );
 
   return mergedProperty;
@@ -106,7 +106,7 @@ const processPropertyGroups = (
   parent: PropertyGroupFragmentFragment | null | undefined,
   original: PropertyGroupFragmentFragment | null | undefined,
   linkedDatasetId: string | null | undefined,
-  datasets: DatasetMap | null | undefined,
+  datasets: DatasetMap | null | undefined
 ): any => {
   const allFields: Record<
     string,
@@ -121,10 +121,10 @@ const processPropertyGroups = (
       [b.fieldId]: {
         schema: b,
         parent: parent?.fields.find((i) => i.fieldId === b.fieldId),
-        orig: original?.fields.find((i) => i.fieldId === b.fieldId),
-      },
+        orig: original?.fields.find((i) => i.fieldId === b.fieldId)
+      }
     }),
-    {},
+    {}
   );
 
   return Object.fromEntries(
@@ -138,7 +138,7 @@ const processPropertyGroups = (
         description: schema.translatedDescription || undefined,
         choices: schema.choices || undefined,
         min: schema.min || undefined,
-        max: schema.max || undefined,
+        max: schema.max || undefined
       };
 
       if (!used) {
@@ -148,8 +148,8 @@ const processPropertyGroups = (
             ...fieldMeta,
             value: schema.defaultValue
               ? valueFromGQL(schema.defaultValue, schema.type)?.value
-              : undefined,
-          },
+              : undefined
+          }
         ];
       }
 
@@ -164,9 +164,9 @@ const processPropertyGroups = (
               datasets,
               datasetSchemaId,
               linkedDatasetId,
-              datasetFieldId,
-            ),
-          },
+              datasetFieldId
+            )
+          }
         ];
       }
 
@@ -174,9 +174,9 @@ const processPropertyGroups = (
         key,
         {
           ...fieldMeta,
-          value: valueFromGQL(used.value, used.type)?.value,
-        },
+          value: valueFromGQL(used.value, used.type)?.value
+        }
       ];
-    }),
+    })
   );
 };
diff --git a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts
index 5fbaf3cb1..9876d8916 100644
--- a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/hooks.ts
@@ -5,7 +5,7 @@ import { SetStateAction, useCallback } from "react";
 type Props = {
   sceneId?: string;
   selectWidgetArea: (
-    update?: SetStateAction<WidgetAreaState | undefined>,
+    update?: SetStateAction<WidgetAreaState | undefined>
   ) => void;
 };
 
@@ -17,16 +17,16 @@ export default ({ sceneId, selectWidgetArea }: Props) => {
       if (!sceneId || !widgetAreaState) return;
       const results = await useUpdateWidgetAlignSystem(
         widgetAreaState,
-        sceneId,
+        sceneId
       );
       if (results.status === "success") {
         selectWidgetArea(widgetAreaState);
       }
     },
-    [sceneId, useUpdateWidgetAlignSystem, selectWidgetArea],
+    [sceneId, useUpdateWidgetAlignSystem, selectWidgetArea]
   );
 
   return {
-    handleWidgetAreaStateChange,
+    handleWidgetAreaStateChange
   };
 };
diff --git a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
index 1f11917d9..c6445f4e4 100644
--- a/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/ContainerSettingsPanel/index.tsx
@@ -1,4 +1,3 @@
-
 import { ColorField, NumberField, SwitchField } from "@reearth/beta/ui/fields";
 import { Panel } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
@@ -14,12 +13,12 @@ const ContainerSettingsPanel: FC = () => {
   const {
     sceneId,
     selectedWidgetArea: widgetArea,
-    selectWidgetArea,
+    selectWidgetArea
   } = useWidgetsPage();
 
   const { handleWidgetAreaStateChange } = useHooks({
     sceneId,
-    selectWidgetArea,
+    selectWidgetArea
   });
 
   const t = useT();
@@ -35,8 +34,8 @@ const ContainerSettingsPanel: FC = () => {
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                top: Number(newVal),
-              },
+                top: Number(newVal)
+              }
             });
           }}
         />
@@ -48,8 +47,8 @@ const ContainerSettingsPanel: FC = () => {
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                right: Number(newVal),
-              },
+                right: Number(newVal)
+              }
             });
           }}
         />
@@ -61,8 +60,8 @@ const ContainerSettingsPanel: FC = () => {
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                bottom: Number(newVal),
-              },
+                bottom: Number(newVal)
+              }
             });
           }}
         />
@@ -74,8 +73,8 @@ const ContainerSettingsPanel: FC = () => {
               ...widgetArea,
               padding: {
                 ...(widgetArea.padding as WidgetAreaPadding),
-                left: Number(newVal),
-              },
+                left: Number(newVal)
+              }
             });
           }}
         />
@@ -86,7 +85,7 @@ const ContainerSettingsPanel: FC = () => {
           onBlur={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
-              gap: Number(newVal),
+              gap: Number(newVal)
             });
           }}
         />
@@ -96,7 +95,7 @@ const ContainerSettingsPanel: FC = () => {
           onChange={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
-              centered: newVal,
+              centered: newVal
             });
           }}
         />
@@ -106,7 +105,7 @@ const ContainerSettingsPanel: FC = () => {
           onChange={(newVal) => {
             handleWidgetAreaStateChange({
               ...widgetArea,
-              background: newVal,
+              background: newVal
             });
           }}
         />
@@ -118,7 +117,7 @@ const ContainerSettingsPanel: FC = () => {
 const FieldsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.large,
+  gap: theme.spacing.large
 }));
 
 export default ContainerSettingsPanel;
diff --git a/web/src/beta/features/Editor/Widgets/WASToolsPanel/Devices/index.tsx b/web/src/beta/features/Editor/Widgets/WASToolsPanel/Devices/index.tsx
index a867fbd1d..8d3ea1956 100644
--- a/web/src/beta/features/Editor/Widgets/WASToolsPanel/Devices/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/WASToolsPanel/Devices/index.tsx
@@ -1,8 +1,8 @@
 // import TabButton from "@reearth/beta/components/TabButton";
 // import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 
-import { styled } from "@reearth/services/theme";
 
 export type Device = "desktop" | "mobile";
 
@@ -12,7 +12,7 @@ export type Devices = {
 
 export const devices: Devices = {
   desktop: "100%",
-  mobile: 437,
+  mobile: 437
 };
 
 type Props = {
@@ -46,5 +46,5 @@ const DeviceWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   flex: 1,
-  gap: theme.spacing.micro,
+  gap: theme.spacing.micro
 }));
diff --git a/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx b/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx
index e5500cbd5..64c37b91b 100644
--- a/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/WASToolsPanel/index.tsx
@@ -14,7 +14,7 @@ const WASToolsPanel: FC = () => {
     selectedDevice = "desktop",
     handleShowWASEditorToggle,
     handleDeviceChange,
-    selectWidgetArea,
+    selectWidgetArea
   } = useWidgetsPage();
 
   const t = useT();
@@ -52,10 +52,10 @@ const StyledSecondaryNav = styled("div")(({ theme }) => ({
   justifyContent: "flex-end",
   width: "100%",
   flex: 1,
-  padding: theme.spacing.small,
+  padding: theme.spacing.small
 }));
 
 const AlignSystem = styled("div")(({ theme }) => ({
   display: "flex",
-  gap: theme.spacing.small + 2,
+  gap: theme.spacing.small + 2
 }));
diff --git a/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts b/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts
index 8e2a3bc58..808d73c40 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/hooks.ts
@@ -18,12 +18,12 @@ export default ({ sceneId, selectedWidget }: Props) => {
     () =>
       filterVisibleItems(
         installedWidgets?.find((w) => w.id === selectedWidget?.id)?.property
-          .items,
+          .items
       ),
-    [installedWidgets, selectedWidget],
+    [installedWidgets, selectedWidget]
   );
 
   return {
-    visibleItems,
+    visibleItems
   };
 };
diff --git a/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/index.tsx b/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/index.tsx
index 5ce249207..8ebb7afcf 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/WidgetInspectorPanel/index.tsx
@@ -1,10 +1,10 @@
-import { FC } from "react";
 
 import { Collapse } from "@reearth/beta/lib/reearth-ui";
 import PropertyItem from "@reearth/beta/ui/fields/Properties";
 import { Panel } from "@reearth/beta/ui/layout";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { useWidgetsPage } from "../context";
 
@@ -42,5 +42,5 @@ export default WidgetInspectorPanel;
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx
index 25a4a6102..1cccaef3f 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx
@@ -2,7 +2,7 @@ import {
   Button,
   IconName,
   PopupMenu,
-  PopupMenuItem,
+  PopupMenuItem
 } from "@reearth/beta/lib/reearth-ui";
 import { InstallableWidget } from "@reearth/services/api/widgetsApi/utils";
 import { FC, useCallback, useMemo, useState } from "react";
@@ -14,7 +14,7 @@ type ActionAreaProps = {
 
 const ActionArea: FC<ActionAreaProps> = ({
   installableWidgets,
-  onWidgetAdd,
+  onWidgetAdd
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -23,7 +23,7 @@ const ActionArea: FC<ActionAreaProps> = ({
       onWidgetAdd(widgetId);
       setOpen(false);
     },
-    [onWidgetAdd],
+    [onWidgetAdd]
   );
 
   const items: PopupMenuItem[] = useMemo(
@@ -34,9 +34,9 @@ const ActionArea: FC<ActionAreaProps> = ({
           id: `${w.pluginId}/${w.extensionId}`,
           title: w.title,
           icon: w.icon as IconName,
-          onClick: () => handleWidgetAdd(`${w.pluginId}/${w.extensionId}`),
+          onClick: () => handleWidgetAdd(`${w.pluginId}/${w.extensionId}`)
         })),
-    [installableWidgets, handleWidgetAdd],
+    [installableWidgets, handleWidgetAdd]
   );
 
   return (
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx
index c659721f8..fb50bdfd4 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/ListItem.tsx
@@ -14,7 +14,7 @@ const ListItem: FC<ListItemProps> = ({
   item,
   selected,
   onItemDelete,
-  onItemSelect,
+  onItemSelect
 }) => {
   const optionsMenu = useMemo(
     () => [
@@ -22,10 +22,10 @@ const ListItem: FC<ListItemProps> = ({
         id: "delete",
         title: "Delete",
         icon: "trash" as const,
-        onClick: () => onItemDelete?.(item.id),
-      },
+        onClick: () => onItemDelete?.(item.id)
+      }
     ],
-    [item.id, onItemDelete],
+    [item.id, onItemDelete]
   );
 
   return (
@@ -45,11 +45,11 @@ export default ListItem;
 
 const Wrapper = styled("div")(() => ({
   display: "flex",
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
   color: theme.content.main,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts
index 20586268d..585a89307 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/hooks.ts
@@ -13,7 +13,7 @@ export default ({ sceneId, selectWidget }: Props) => {
     useInstallableWidgetsQuery,
     useInstalledWidgetsQuery,
     useAddWidget,
-    useRemoveWidget,
+    useRemoveWidget
     // useUpdateWidgetAlignSystem,
   } = useWidgetsFetcher();
 
@@ -24,14 +24,14 @@ export default ({ sceneId, selectWidget }: Props) => {
     async (id?: string) => {
       await useAddWidget(sceneId, id);
     },
-    [sceneId, useAddWidget],
+    [sceneId, useAddWidget]
   );
 
   const handleWidgetRemove = useCallback(
     async (id?: string) => {
       await useRemoveWidget(sceneId, id);
     },
-    [sceneId, useRemoveWidget],
+    [sceneId, useRemoveWidget]
   );
 
   const handleWidgetSelection = (id: string) => {
@@ -41,7 +41,7 @@ export default ({ sceneId, selectWidget }: Props) => {
       id: w.id,
       pluginId: w.pluginId,
       extensionId: w.extensionId,
-      propertyId: w.property.id,
+      propertyId: w.property.id
     });
   };
 
@@ -50,6 +50,6 @@ export default ({ sceneId, selectWidget }: Props) => {
     installedWidgets,
     handleWidgetAdd,
     handleWidgetSelection,
-    handleWidgetRemove,
+    handleWidgetRemove
   };
 };
diff --git a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx
index 8606e282c..3fd9cc54f 100644
--- a/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx
+++ b/web/src/beta/features/Editor/Widgets/WidgetManagerPanel/index.tsx
@@ -20,10 +20,10 @@ const WidgetManagerPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     installedWidgets,
     handleWidgetAdd,
     handleWidgetRemove,
-    handleWidgetSelection,
+    handleWidgetSelection
   } = useHooks({
     sceneId,
-    selectWidget,
+    selectWidget
   });
 
   return (
@@ -60,18 +60,18 @@ const WidgetManagerPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const InstalledWidgetsList = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 const EmptySpace = styled("div")(() => ({
   flex: 1,
-  minHeight: 50,
+  minHeight: 50
 }));
 
 export default WidgetManagerPanel;
diff --git a/web/src/beta/features/Editor/Widgets/context.tsx b/web/src/beta/features/Editor/Widgets/context.tsx
index 95af40a81..591b733e2 100644
--- a/web/src/beta/features/Editor/Widgets/context.tsx
+++ b/web/src/beta/features/Editor/Widgets/context.tsx
@@ -14,7 +14,7 @@ export interface WidgetsPageContextType {
   handleShowWASEditorToggle: () => void;
   handleDeviceChange: (device: Device) => void;
   selectWidgetArea: (
-    update?: SetStateAction<WidgetAreaState | undefined>,
+    update?: SetStateAction<WidgetAreaState | undefined>
   ) => void;
   sceneId?: string;
   selectedWidget?: SelectedWidget;
@@ -24,12 +24,12 @@ export interface WidgetsPageContextType {
 }
 
 const WidgetsPageContext = createContext<WidgetsPageContextType | undefined>(
-  undefined,
+  undefined
 );
 
 export const WidgetsPageProvider = ({
   value,
-  children,
+  children
 }: {
   value: WidgetsPageContextType;
   children: ReactNode;
diff --git a/web/src/beta/features/Editor/hooks/index.ts b/web/src/beta/features/Editor/hooks/index.ts
index ec366e71b..016b3d411 100644
--- a/web/src/beta/features/Editor/hooks/index.ts
+++ b/web/src/beta/features/Editor/hooks/index.ts
@@ -31,7 +31,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     visualizerSize,
     handleVisualizerResize,
     isVisualizerResizing,
-    handleFlyTo,
+    handleFlyTo
   } = useEditorVisualizer();
 
   const {
@@ -49,11 +49,11 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleLayerConfigUpdate,
     handleLayerMove,
     handleCustomPropertySchemaClick,
-    handleCustomPropertySchemaUpdate,
+    handleCustomPropertySchemaUpdate
   } = useLayers({
     sceneId,
     isVisualizerReady,
-    visualizerRef,
+    visualizerRef
   });
 
   const {
@@ -61,22 +61,22 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleSketchFeatureCreate,
     sketchType,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete,
+    handleGeoJsonFeatureDelete
   } = useSketch({
     tab,
     nlsLayers,
     selectedLayer: selectedLayer?.layer,
     ignoreCoreLayerUnselect,
-    visualizerRef,
+    visualizerRef
   });
 
   const {
     handleSceneSettingSelect,
     scene,
     selectedSceneSetting,
-    sceneSettings,
+    sceneSettings
   } = useScene({
-    sceneId,
+    sceneId
   });
 
   const {
@@ -86,7 +86,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleLayerStyleAdd,
     handleLayerStyleDelete,
     handleLayerStyleNameUpdate,
-    handleLayerStyleValueUpdate,
+    handleLayerStyleValueUpdate
   } = useLayerStyles({ sceneId });
 
   const {
@@ -105,12 +105,12 @@ export default ({ sceneId, projectId, tab }: Props) => {
     openCustomPropertySchema,
     closeCustomPropertySchema,
     selectedDevice,
-    handleDeviceChange,
+    handleDeviceChange
   } = useUI({
     tab,
     handleLayerSelect,
     handleCoreLayerSelect,
-    handleSceneSettingSelect,
+    handleSceneSettingSelect
   });
 
   const {
@@ -125,9 +125,9 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleStoryPageMove,
     handleStoryPageUpdate,
     handleStoryBlockMove,
-    selectStoryPage,
+    selectStoryPage
   } = useStorytelling({
-    sceneId,
+    sceneId
   });
 
   const {
@@ -136,7 +136,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     selectedWidgetArea,
     selectWidgetArea,
     selectedWidget,
-    selectWidget,
+    selectWidget
   } = useWidgets({ tab });
 
   const { handlePropertyValueUpdate } = useProperty();
@@ -177,7 +177,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
       handleLayerStyleSelect,
       layerId,
       handleCustomPropertySchemaClick,
-      handleCustomPropertySchemaUpdate,
+      handleCustomPropertySchemaUpdate
     }),
     [
       handleVisualizerResize,
@@ -212,8 +212,8 @@ export default ({ sceneId, projectId, tab }: Props) => {
       handleLayerStyleSelect,
       layerId,
       handleCustomPropertySchemaClick,
-      handleCustomPropertySchemaUpdate,
-    ],
+      handleCustomPropertySchemaUpdate
+    ]
   );
 
   const storyPageValue: StoryPageContextType = useMemo(
@@ -230,7 +230,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
       layers: nlsLayers,
       tab,
       handleFlyTo,
-      handleStoryPageUpdate,
+      handleStoryPageUpdate
     }),
     [
       handleVisualizerResize,
@@ -245,8 +245,8 @@ export default ({ sceneId, projectId, tab }: Props) => {
       nlsLayers,
       tab,
       handleFlyTo,
-      handleStoryPageUpdate,
-    ],
+      handleStoryPageUpdate
+    ]
   );
 
   const widgetsPageValue: WidgetsPageContextType = useMemo(
@@ -261,7 +261,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
       selectedWidget,
       selectWidget,
       selectedWidgetArea,
-      handleFlyTo,
+      handleFlyTo
     }),
     [
       handleVisualizerResize,
@@ -274,8 +274,8 @@ export default ({ sceneId, projectId, tab }: Props) => {
       selectedWidget,
       selectWidget,
       selectedWidgetArea,
-      handleFlyTo,
-    ],
+      handleFlyTo
+    ]
   );
 
   const publishPageValue: PublishPageContextType = useMemo(
@@ -285,7 +285,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
       storyId: currentProjectType === "story" ? selectedStory?.id : undefined,
       sceneId,
       selectedProjectType: currentProjectType,
-      handleProjectTypeChange,
+      handleProjectTypeChange
     }),
     [
       handleVisualizerResize,
@@ -293,8 +293,8 @@ export default ({ sceneId, projectId, tab }: Props) => {
       currentProjectType,
       selectedStory?.id,
       projectId,
-      handleProjectTypeChange,
-    ],
+      handleProjectTypeChange
+    ]
   );
 
   return {
@@ -329,6 +329,6 @@ export default ({ sceneId, projectId, tab }: Props) => {
     layerStyles,
     layers: nlsLayers,
     layerId,
-    handleCustomPropertySchemaUpdate,
+    handleCustomPropertySchemaUpdate
   };
 };
diff --git a/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts b/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts
index 65667ce07..f5d32dc83 100644
--- a/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts
+++ b/web/src/beta/features/Editor/hooks/useEditorVisualizer.ts
@@ -9,7 +9,7 @@ export default () => {
 
   const handleIsVisualizerUpdate = useCallback(
     (value: boolean) => setIsVisualizerReady(value),
-    [setIsVisualizerReady],
+    [setIsVisualizerReady]
   );
 
   // Visualizer Size
@@ -17,7 +17,7 @@ export default () => {
     width: 0,
     height: 0,
     left: 0,
-    top: 0,
+    top: 0
   });
   const isVisualizerResizing = useRef(false);
 
@@ -26,7 +26,7 @@ export default () => {
       left: size.left + 1,
       top: size.top + 1,
       width: size.width,
-      height: size.height,
+      height: size.height
     });
     isVisualizerResizing.current = true;
     requestAnimationFrame(() => {
@@ -39,7 +39,7 @@ export default () => {
       if (!isVisualizerReady) return;
       visualizerRef.current?.engine.flyTo(target, options);
     },
-    [isVisualizerReady],
+    [isVisualizerReady]
   );
 
   return {
@@ -49,6 +49,6 @@ export default () => {
     visualizerSize,
     handleVisualizerResize,
     isVisualizerResizing,
-    handleFlyTo,
+    handleFlyTo
   };
 };
diff --git a/web/src/beta/features/Editor/hooks/useLayerStyles.ts b/web/src/beta/features/Editor/hooks/useLayerStyles.ts
index 5ac78200b..a8060b016 100644
--- a/web/src/beta/features/Editor/hooks/useLayerStyles.ts
+++ b/web/src/beta/features/Editor/hooks/useLayerStyles.ts
@@ -28,7 +28,7 @@ export default function ({ sceneId }: LayerStyleProps) {
     useAddLayerStyle,
     useGetLayerStylesQuery,
     useRemoveLayerStyle,
-    useUpdateLayerStyle,
+    useUpdateLayerStyle
   } = useLayerStylesFetcher();
   const [selectedLayerStyleId, setSelectedLayerStyleId] = useState<
     string | undefined
@@ -37,12 +37,12 @@ export default function ({ sceneId }: LayerStyleProps) {
 
   const selectedLayerStyle = useMemo(
     () => layerStyles.find((l) => l.id === selectedLayerStyleId) || undefined,
-    [layerStyles, selectedLayerStyleId],
+    [layerStyles, selectedLayerStyleId]
   );
 
   const handleLayerStyleSelect = useCallback(
     (layerId: string | undefined) => setSelectedLayerStyleId(layerId),
-    [setSelectedLayerStyleId],
+    [setSelectedLayerStyleId]
   );
 
   const handleLayerStyleDelete = useCallback(
@@ -51,7 +51,7 @@ export default function ({ sceneId }: LayerStyleProps) {
       if (deletedPageIndex === undefined) return;
 
       await useRemoveLayerStyle({
-        styleId,
+        styleId
       });
       if (styleId === selectedLayerStyleId) {
         setSelectedLayerStyleId(undefined);
@@ -61,8 +61,8 @@ export default function ({ sceneId }: LayerStyleProps) {
       layerStyles,
       selectedLayerStyleId,
       setSelectedLayerStyleId,
-      useRemoveLayerStyle,
-    ],
+      useRemoveLayerStyle
+    ]
   );
 
   const handleLayerStyleAdd = useCallback(
@@ -70,30 +70,30 @@ export default function ({ sceneId }: LayerStyleProps) {
       await useAddLayerStyle({
         sceneId: sceneId,
         name: t(inp.name),
-        value: inp.value,
+        value: inp.value
       });
     },
-    [sceneId, t, useAddLayerStyle],
+    [sceneId, t, useAddLayerStyle]
   );
 
   const handleLayerStyleNameUpdate = useCallback(
     async (inp: LayerStyleNameUpdateProps) => {
       await useUpdateLayerStyle({
         styleId: inp.styleId,
-        name: inp.name,
+        name: inp.name
       });
     },
-    [useUpdateLayerStyle],
+    [useUpdateLayerStyle]
   );
 
   const handleLayerStyleValueUpdate = useCallback(
     async (inp: LayerStyleValueUpdateProps) => {
       await useUpdateLayerStyle({
         styleId: inp.styleId,
-        value: inp.value,
+        value: inp.value
       });
     },
-    [useUpdateLayerStyle],
+    [useUpdateLayerStyle]
   );
 
   return {
@@ -103,6 +103,6 @@ export default function ({ sceneId }: LayerStyleProps) {
     handleLayerStyleDelete,
     handleLayerStyleSelect,
     handleLayerStyleNameUpdate,
-    handleLayerStyleValueUpdate,
+    handleLayerStyleValueUpdate
   };
 }
diff --git a/web/src/beta/features/Editor/hooks/useLayers.ts b/web/src/beta/features/Editor/hooks/useLayers.ts
index d0a16362a..bb2072761 100644
--- a/web/src/beta/features/Editor/hooks/useLayers.ts
+++ b/web/src/beta/features/Editor/hooks/useLayers.ts
@@ -2,7 +2,7 @@ import type {
   MapRef,
   ComputedFeature,
   ComputedLayer,
-  LayerSimple,
+  LayerSimple
 } from "@reearth/core";
 import { useLayersFetcher } from "@reearth/services/api";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
@@ -14,7 +14,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 type LayerProps = {
@@ -70,7 +70,7 @@ export type SelectedLayer = {
 export default function ({
   sceneId,
   isVisualizerReady,
-  visualizerRef,
+  visualizerRef
 }: LayerProps) {
   const t = useT();
   const {
@@ -78,7 +78,7 @@ export default function ({
     useAddNLSLayerSimple,
     useRemoveNLSLayer,
     useUpdateNLSLayer,
-    useUpdateCustomProperties,
+    useUpdateCustomProperties
   } = useLayersFetcher();
 
   const { nlsLayers: originNlsLayers } = useGetLayersQuery({ sceneId });
@@ -89,7 +89,7 @@ export default function ({
   useEffect(() => {
     if (!originNlsLayers) return;
     setSortedLayerIds((prev) =>
-      prev.length > 0 ? prev : originNlsLayers.map((l) => l.id),
+      prev.length > 0 ? prev : originNlsLayers.map((l) => l.id)
     );
   }, [originNlsLayers]);
 
@@ -100,10 +100,10 @@ export default function ({
             ...(sortedLayerIds
               .map((id) => originNlsLayers.find((l) => l.id === id))
               .filter(Boolean) as NLSLayer[]),
-            ...originNlsLayers.filter((l) => !sortedLayerIds.includes(l.id)),
+            ...originNlsLayers.filter((l) => !sortedLayerIds.includes(l.id))
           ]
         : [],
-    [originNlsLayers, sortedLayerIds],
+    [originNlsLayers, sortedLayerIds]
   );
 
   const [selectedLayer, setSelectedLayer] = useState<
@@ -121,7 +121,7 @@ export default function ({
           setSelectedLayer({
             layer: nlsLayers.find((l) => l.id === props.layerId),
             computedLayer: props?.computedLayer,
-            computedFeature: props?.computedFeature,
+            computedFeature: props?.computedFeature
           });
         } else {
           setSelectedLayer(undefined);
@@ -131,7 +131,7 @@ export default function ({
       // Layer selection does not specific any feature, we do unselect for core.
       visualizerRef?.current?.layers.select(undefined);
     },
-    [isVisualizerReady, visualizerRef, nlsLayers],
+    [isVisualizerReady, visualizerRef, nlsLayers]
   );
 
   // Workaround: core will trigger a select undefined after sketch layer add feature.
@@ -154,13 +154,13 @@ export default function ({
         setSelectedLayer({
           layer: nlsLayers.find((l) => l.id === props.layerId),
           computedLayer: props?.computedLayer,
-          computedFeature: props?.computedFeature,
+          computedFeature: props?.computedFeature
         });
       } else {
         setSelectedLayer(undefined);
       }
     },
-    [isVisualizerReady, nlsLayers, selectedLayer],
+    [isVisualizerReady, nlsLayers, selectedLayer]
   );
 
   const handleLayerDelete = useCallback(
@@ -169,7 +169,7 @@ export default function ({
       if (deletedPageIndex === undefined) return;
 
       await useRemoveNLSLayer({
-        layerId,
+        layerId
       });
       if (layerId === selectedLayer?.layer?.id) {
         handleLayerSelect(undefined);
@@ -180,7 +180,7 @@ export default function ({
         return newSortedLayerIds;
       });
     },
-    [nlsLayers, selectedLayer, handleLayerSelect, useRemoveNLSLayer],
+    [nlsLayers, selectedLayer, handleLayerSelect, useRemoveNLSLayer]
   );
 
   const handleLayerAdd = useCallback(
@@ -192,39 +192,39 @@ export default function ({
         layerType: inp.layerType,
         title: t(inp.title),
         index: inp.index,
-        schema: inp.schema,
+        schema: inp.schema
       });
     },
-    [t, useAddNLSLayerSimple],
+    [t, useAddNLSLayerSimple]
   );
 
   const handleLayerNameUpdate = useCallback(
     async (inp: LayerNameUpdateProps) => {
       await useUpdateNLSLayer({
         layerId: inp.layerId,
-        name: inp.name,
+        name: inp.name
       });
     },
-    [useUpdateNLSLayer],
+    [useUpdateNLSLayer]
   );
 
   const handleLayerConfigUpdate = useCallback(
     async (inp: LayerConfigUpdateProps) => {
       await useUpdateNLSLayer({
         layerId: inp.layerId,
-        config: inp.config,
+        config: inp.config
       });
     },
-    [useUpdateNLSLayer],
+    [useUpdateNLSLayer]
   );
   const handleLayerVisibilityUpdate = useCallback(
     async (inp: LayerVisibilityUpdateProps) => {
       await useUpdateNLSLayer({
         layerId: inp.layerId,
-        visible: inp.visible,
+        visible: inp.visible
       });
     },
-    [useUpdateNLSLayer],
+    [useUpdateNLSLayer]
   );
 
   useEffect(() => {
@@ -234,7 +234,7 @@ export default function ({
         return layer
           ? {
               ...prev,
-              layer,
+              layer
             }
           : undefined;
       }
@@ -264,10 +264,10 @@ export default function ({
     async (inp: UpdateCustomPropertySchemaInput) => {
       await useUpdateCustomProperties({
         layerId: inp.layerId,
-        schema: inp.schema,
+        schema: inp.schema
       });
     },
-    [useUpdateCustomProperties],
+    [useUpdateCustomProperties]
   );
 
   return {
@@ -284,6 +284,6 @@ export default function ({
     handleLayerVisibilityUpdate,
     handleLayerMove,
     handleCustomPropertySchemaClick,
-    handleCustomPropertySchemaUpdate,
+    handleCustomPropertySchemaUpdate
   };
 }
diff --git a/web/src/beta/features/Editor/hooks/useProperty.tsx b/web/src/beta/features/Editor/hooks/useProperty.tsx
index 3c3f14e42..86d80521a 100644
--- a/web/src/beta/features/Editor/hooks/useProperty.tsx
+++ b/web/src/beta/features/Editor/hooks/useProperty.tsx
@@ -10,7 +10,7 @@ export default () => {
       fieldId?: string,
       itemId?: string,
       vt?: any,
-      v?: any,
+      v?: any
     ) => {
       if (!propertyId || !schemaItemId || !fieldId || !vt) return;
       await useUpdatePropertyValue(
@@ -20,13 +20,13 @@ export default () => {
         fieldId,
         "en",
         v,
-        vt,
+        vt
       );
     },
-    [useUpdatePropertyValue],
+    [useUpdatePropertyValue]
   );
 
   return {
-    handlePropertyValueUpdate,
+    handlePropertyValueUpdate
   };
 };
diff --git a/web/src/beta/features/Editor/hooks/useScene.ts b/web/src/beta/features/Editor/hooks/useScene.ts
index 6510dac8c..b005e58fb 100644
--- a/web/src/beta/features/Editor/hooks/useScene.ts
+++ b/web/src/beta/features/Editor/hooks/useScene.ts
@@ -16,19 +16,19 @@ export default function ({ sceneId }: SceneProps) {
   const sceneSettings = useMemo(
     () =>
       convert(scene?.property)?.filter(
-        (item) => item.collection === selectedSceneSetting,
+        (item) => item.collection === selectedSceneSetting
       ),
-    [scene?.property, selectedSceneSetting],
+    [scene?.property, selectedSceneSetting]
   );
   const handleSceneSettingSelect = useCallback(
     (collection?: string) => setSelectedSceneSetting(collection),
-    [],
+    []
   );
 
   return {
     scene,
     selectedSceneSetting,
     sceneSettings,
-    handleSceneSettingSelect,
+    handleSceneSettingSelect
   };
 }
diff --git a/web/src/beta/features/Editor/hooks/useSketch.ts b/web/src/beta/features/Editor/hooks/useSketch.ts
index 2540a013b..656500ab4 100644
--- a/web/src/beta/features/Editor/hooks/useSketch.ts
+++ b/web/src/beta/features/Editor/hooks/useSketch.ts
@@ -7,7 +7,7 @@ import {
   useCallback,
   useEffect,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { Tab } from "../../Navbar";
@@ -44,10 +44,10 @@ export default ({
   nlsLayers,
   selectedLayer,
   visualizerRef,
-  ignoreCoreLayerUnselect,
+  ignoreCoreLayerUnselect
 }: Props) => {
   const [sketchType, setSketchType] = useState<SketchType | undefined>(
-    undefined,
+    undefined
   );
 
   const pendingSketchSelectionRef = useRef<
@@ -59,16 +59,16 @@ export default ({
       setSketchType(type);
       if (from === "editor") visualizerRef.current?.sketch?.setType?.(type);
       visualizerRef.current?.sketch?.overrideOptions?.({
-        autoResetInteractionMode: false,
+        autoResetInteractionMode: false
       });
     },
-    [visualizerRef],
+    [visualizerRef]
   );
 
   const {
     useAddGeoJsonFeature,
     useUpdateGeoJSONFeature,
-    useDeleteGeoJSONFeature,
+    useDeleteGeoJSONFeature
   } = useFeatureCollectionFetcher();
 
   const handleSketchLayerAdd = useCallback(
@@ -78,10 +78,10 @@ export default ({
         layerId: inp.layerId,
         geometry: inp.geometry,
         type: inp.type,
-        properties: inp.properties,
+        properties: inp.properties
       });
     },
-    [selectedLayer, useAddGeoJsonFeature],
+    [selectedLayer, useAddGeoJsonFeature]
   );
 
   const handleSketchFeatureCreate = useCallback(
@@ -93,12 +93,12 @@ export default ({
         type: feature.type,
         layerId: selectedLayer?.id,
         properties: { ...feature.properties },
-        geometry: feature.geometry,
+        geometry: feature.geometry
       });
 
       pendingSketchSelectionRef.current = {
         layerId: selectedLayer.id,
-        featureId: feature.properties.id,
+        featureId: feature.properties.id
       };
 
       ignoreCoreLayerUnselect.current = true;
@@ -107,8 +107,8 @@ export default ({
       selectedLayer?.id,
       selectedLayer?.isSketch,
       ignoreCoreLayerUnselect,
-      handleSketchLayerAdd,
-    ],
+      handleSketchLayerAdd
+    ]
   );
 
   useEffect(() => {
@@ -121,7 +121,7 @@ export default ({
           ?.layers?.()
           ?.find((l) => l.id === layerId)?.computed;
         const feature = layer?.features?.find(
-          (f) => f.properties?.id === featureId,
+          (f) => f.properties?.id === featureId
         );
         if (feature) {
           visualizerRef?.current?.layers.selectFeature(layerId, feature?.id);
@@ -134,7 +134,7 @@ export default ({
     nlsLayers,
     pendingSketchSelectionRef,
     visualizerRef,
-    ignoreCoreLayerUnselect,
+    ignoreCoreLayerUnselect
   ]);
 
   useEffect(() => {
@@ -153,25 +153,25 @@ export default ({
         layerId: inp.layerId,
         featureId: inp.featureId,
         geometry: inp.geometry,
-        properties: inp.properties,
+        properties: inp.properties
       });
 
       pendingSketchSelectionRef.current = {
         layerId: inp.layerId,
-        featureId: inp.properties?.id,
+        featureId: inp.properties?.id
       };
     },
-    [useUpdateGeoJSONFeature],
+    [useUpdateGeoJSONFeature]
   );
 
   const handleGeoJsonFeatureDelete = useCallback(
     async (inp: GeoJsonFeatureDeleteProps) => {
       await useDeleteGeoJSONFeature({
         layerId: inp.layerId,
-        featureId: inp.featureId,
+        featureId: inp.featureId
       });
     },
-    [useDeleteGeoJSONFeature],
+    [useDeleteGeoJSONFeature]
   );
 
   return {
@@ -179,6 +179,6 @@ export default ({
     handleSketchTypeChange,
     handleSketchFeatureCreate,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete,
+    handleGeoJsonFeatureDelete
   };
 };
diff --git a/web/src/beta/features/Editor/hooks/useStorytelling.ts b/web/src/beta/features/Editor/hooks/useStorytelling.ts
index 63c3550a8..ce1bd5dbc 100644
--- a/web/src/beta/features/Editor/hooks/useStorytelling.ts
+++ b/web/src/beta/features/Editor/hooks/useStorytelling.ts
@@ -22,22 +22,22 @@ export default function ({ sceneId }: Props) {
     useMoveStoryPage,
     useMoveStoryBlock,
     useUpdateStoryPage,
-    useInstallableStoryBlocksQuery,
+    useInstallableStoryBlocksQuery
   } = useStorytellingAPI();
 
   const { stories } = useStoriesQuery({ sceneId });
   const { installableStoryBlocks } = useInstallableStoryBlocksQuery({
-    sceneId,
+    sceneId
   });
 
   const selectedStory = useMemo(
     () => (stories?.length ? stories[0] : undefined),
-    [stories],
+    [stories]
   );
 
   const currentStoryPage = useMemo(
     () => selectedStory?.pages?.find((p) => p.id === selectedStoryPageId),
-    [selectedStory?.pages, selectedStoryPageId],
+    [selectedStory?.pages, selectedStoryPageId]
   );
 
   const handleCurrentStoryPageChange = useCallback(
@@ -48,7 +48,7 @@ export default function ({ sceneId }: Props) {
         storyPanelRef?.current?.handleCurrentPageChange(pageId);
       }
     },
-    [selectedStoryPageId, selectedStory?.pages],
+    [selectedStoryPageId, selectedStory?.pages]
   );
 
   const handleStoryPageDuplicate = useCallback(async (pageId: string) => {
@@ -65,11 +65,11 @@ export default function ({ sceneId }: Props) {
       await useDeleteStoryPage({
         sceneId,
         storyId: selectedStory.id,
-        pageId,
+        pageId
       });
       if (pageId === selectedStoryPageId) {
         handleCurrentStoryPageChange(
-          pages[deletedPageIndex + 1].id ?? pages[deletedPageIndex - 1].id,
+          pages[deletedPageIndex + 1].id ?? pages[deletedPageIndex - 1].id
         );
       }
     },
@@ -78,8 +78,8 @@ export default function ({ sceneId }: Props) {
       sceneId,
       selectedStoryPageId,
       handleCurrentStoryPageChange,
-      useDeleteStoryPage,
-    ],
+      useDeleteStoryPage
+    ]
   );
 
   const handleStoryPageAdd = useCallback(
@@ -92,10 +92,10 @@ export default function ({ sceneId }: Props) {
         title: t("Page"),
         index: selectedStory.pages?.length,
         layers: [],
-        swipeableLayers: [],
+        swipeableLayers: []
       });
     },
-    [useCreateStoryPage, sceneId, selectedStory, t],
+    [useCreateStoryPage, sceneId, selectedStory, t]
   );
 
   const handleStoryPageMove = useCallback(
@@ -104,10 +104,10 @@ export default function ({ sceneId }: Props) {
       await useMoveStoryPage({
         storyId: selectedStory.id,
         pageId: id,
-        index: targetIndex,
+        index: targetIndex
       });
     },
-    [useMoveStoryPage, selectedStory],
+    [useMoveStoryPage, selectedStory]
   );
 
   const handleStoryBlockMove = useCallback(
@@ -117,10 +117,10 @@ export default function ({ sceneId }: Props) {
         storyId: selectedStory.id,
         pageId: id,
         index: targetIndex,
-        blockId,
+        blockId
       });
     },
-    [useMoveStoryBlock, selectedStory],
+    [useMoveStoryBlock, selectedStory]
   );
 
   const handleStoryPageUpdate = useCallback(
@@ -130,10 +130,10 @@ export default function ({ sceneId }: Props) {
         sceneId,
         storyId: selectedStory.id,
         pageId,
-        layers,
+        layers
       });
     },
-    [sceneId, selectedStory, useUpdateStoryPage],
+    [sceneId, selectedStory, useUpdateStoryPage]
   );
 
   return {
@@ -148,6 +148,6 @@ export default function ({ sceneId }: Props) {
     handleStoryPageMove,
     handleStoryPageUpdate,
     handleStoryBlockMove,
-    selectStoryPage: setSelectedStoryPageId,
+    selectStoryPage: setSelectedStoryPageId
   };
 }
diff --git a/web/src/beta/features/Editor/hooks/useUI.ts b/web/src/beta/features/Editor/hooks/useUI.ts
index 23cd703b6..741f60358 100644
--- a/web/src/beta/features/Editor/hooks/useUI.ts
+++ b/web/src/beta/features/Editor/hooks/useUI.ts
@@ -18,14 +18,14 @@ export default ({
   tab,
   handleLayerSelect,
   handleCoreLayerSelect,
-  handleSceneSettingSelect,
+  handleSceneSettingSelect
 }: Props) => {
   const [currentProjectType, setCurrentProjectType] =
     useState<VisualizerProjectType>(tab === "story" ? "story" : "default");
 
   const handleProjectTypeChange = useCallback(
     (projectType: VisualizerProjectType) => setCurrentProjectType(projectType),
-    [],
+    []
   );
 
   useEffect(() => {
@@ -50,7 +50,7 @@ export default ({
       handleSceneSettingSelect(undefined);
       handleLayerSelect({ layerId });
     },
-    [handleLayerSelect, handleSceneSettingSelect],
+    [handleLayerSelect, handleSceneSettingSelect]
   );
 
   const handleCoreLayerSelectFromUI = useCallback(
@@ -58,7 +58,7 @@ export default ({
       handleSceneSettingSelect(undefined);
       handleCoreLayerSelect(props);
     },
-    [handleCoreLayerSelect, handleSceneSettingSelect],
+    [handleCoreLayerSelect, handleSceneSettingSelect]
   );
 
   const handleSceneSettingSelectFromUI = useCallback(
@@ -69,7 +69,7 @@ export default ({
         handleSceneSettingSelect(collection);
       });
     },
-    [handleLayerSelect, handleSceneSettingSelect],
+    [handleLayerSelect, handleSceneSettingSelect]
   );
 
   // modals
@@ -77,39 +77,39 @@ export default ({
     useState(false);
   const openDataSourceLayerCreator = useCallback(
     () => setDataSourceLayerShown(true),
-    [],
+    []
   );
   const closeDataSourceLayerCreator = useCallback(
     () => setDataSourceLayerShown(false),
-    [],
+    []
   );
 
   const [sketchLayerCreatorShown, setSketchLayerCreatorShown] = useState(false);
   const openSketchLayerCreator = useCallback(
     () => setSketchLayerCreatorShown(true),
-    [],
+    []
   );
   const closeSketchLayerCreator = useCallback(
     () => setSketchLayerCreatorShown(false),
-    [],
+    []
   );
 
   const [customPropertySchemaShown, setCustomPropertySchemaShown] =
     useState(false);
   const openCustomPropertySchema = useCallback(
     () => setCustomPropertySchemaShown(true),
-    [],
+    []
   );
   const closeCustomPropertySchema = useCallback(
     () => setCustomPropertySchemaShown(false),
-    [],
+    []
   );
 
   // devices - not in use
   const [selectedDevice, setDevice] = useState<Device>("desktop");
   const handleDeviceChange = useCallback(
     (newDevice: Device) => setDevice(newDevice),
-    [],
+    []
   );
   // const visualizerWidth = useMemo(
   //   () => (tab === "widgets" ? devices[selectedDevice] : "100%"),
@@ -132,6 +132,6 @@ export default ({
     handleDeviceChange,
     customPropertySchemaShown,
     openCustomPropertySchema,
-    closeCustomPropertySchema,
+    closeCustomPropertySchema
   };
 };
diff --git a/web/src/beta/features/Editor/hooks/useUISelection.ts b/web/src/beta/features/Editor/hooks/useUISelection.ts
index 1f08575c0..2867d4132 100644
--- a/web/src/beta/features/Editor/hooks/useUISelection.ts
+++ b/web/src/beta/features/Editor/hooks/useUISelection.ts
@@ -6,7 +6,7 @@ import { LayerSelectProps } from "./useLayers";
 export const useUISelection = ({
   handleLayerSelect,
   handleLayerStyleSelect,
-  handleSceneSettingSelect,
+  handleSceneSettingSelect
 }: {
   handleLayerSelect: (props: LayerSelectProps) => void;
   handleLayerStyleSelect: (layerStyleId?: string) => void;
@@ -18,7 +18,7 @@ export const useUISelection = ({
       handleSceneSettingSelect(undefined);
       handleLayerStyleSelect(layerStyleId);
     },
-    [handleLayerStyleSelect, handleSceneSettingSelect, handleLayerSelect],
+    [handleLayerStyleSelect, handleSceneSettingSelect, handleLayerSelect]
   );
 
   const handleLayerSelected = useCallback(
@@ -27,7 +27,7 @@ export const useUISelection = ({
       handleSceneSettingSelect(undefined);
       handleLayerSelect({ layerId });
     },
-    [handleLayerSelect, handleSceneSettingSelect, handleLayerStyleSelect],
+    [handleLayerSelect, handleSceneSettingSelect, handleLayerStyleSelect]
   );
 
   const handleSceneSettingSelected = useCallback(
@@ -36,12 +36,12 @@ export const useUISelection = ({
       handleLayerSelect(undefined);
       handleSceneSettingSelect(collection);
     },
-    [handleLayerSelect, handleSceneSettingSelect, handleLayerStyleSelect],
+    [handleLayerSelect, handleSceneSettingSelect, handleLayerStyleSelect]
   );
 
   return {
     handleLayerStyleSelected,
     handleLayerSelected,
-    handleSceneSettingSelected,
+    handleSceneSettingSelected
   };
 };
diff --git a/web/src/beta/features/Editor/hooks/useWidgets.ts b/web/src/beta/features/Editor/hooks/useWidgets.ts
index 9648148b9..20eb623e4 100644
--- a/web/src/beta/features/Editor/hooks/useWidgets.ts
+++ b/web/src/beta/features/Editor/hooks/useWidgets.ts
@@ -16,12 +16,12 @@ type Props = {
 
 export default ({ tab }: Props) => {
   const [showWASEditor, setShowWASEditor] = useState<boolean | undefined>(
-    undefined,
+    undefined
   );
 
   const handleShowWASEditorToggle = useCallback(
     () => setShowWASEditor((show) => !show),
-    [setShowWASEditor],
+    [setShowWASEditor]
   );
 
   useEffect(() => {
@@ -43,6 +43,6 @@ export default ({ tab }: Props) => {
     selectedWidget,
     selectWidget: setSelectedWidget,
     selectedWidgetArea,
-    selectWidgetArea: setSelectedWidgetArea,
+    selectWidgetArea: setSelectedWidgetArea
   };
 };
diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
index 54559d974..3d220e342 100644
--- a/web/src/beta/features/Editor/index.tsx
+++ b/web/src/beta/features/Editor/index.tsx
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
+import { Provider as DndProvider } from "@reearth/beta/utils/use-dnd";
 import { FC } from "react";
 
-import { Provider as DndProvider } from "@reearth/beta/utils/use-dnd";
 
 import Navbar, { Tab } from "../Navbar";
 
@@ -59,7 +59,7 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     layerStyles,
     layers,
     layerId,
-    handleCustomPropertySchemaUpdate,
+    handleCustomPropertySchemaUpdate
   } = useHooks({ sceneId, tab, projectId });
 
   // TODO remove DndProvider, use DragAndDropContext instead
@@ -153,24 +153,24 @@ const Wrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   height: "100vh",
   width: "100vw",
-  color: theme.content.main,
+  color: theme.content.main
 }));
 
 const Content = styled("div")(() => ({
   position: "relative",
   flexGrow: 1,
-  height: 0,
+  height: 0
 }));
 
 const Workbench = styled("div")(() => ({
   position: "absolute",
   width: "100%",
   height: "100%",
-  pointerEvents: "none",
+  pointerEvents: "none"
 }));
 
 const VisualizerArea = styled("div")(({ theme }) => ({
   position: "absolute",
   borderRadius: theme.radius.small,
-  overflow: "hidden",
+  overflow: "hidden"
 }));
diff --git a/web/src/beta/features/GlobalModal/index.tsx b/web/src/beta/features/GlobalModal/index.tsx
index 191f8a392..8f534d545 100644
--- a/web/src/beta/features/GlobalModal/index.tsx
+++ b/web/src/beta/features/GlobalModal/index.tsx
@@ -4,7 +4,7 @@ import { useLang as useCurrentLang } from "@reearth/services/i18n";
 import {
   NotificationType,
   useCurrentTheme as useCurrentTheme,
-  useNotification,
+  useNotification
 } from "@reearth/services/state";
 import { useCallback, useEffect, useState } from "react";
 
@@ -28,7 +28,7 @@ const GlobalModal: React.FC = () => {
   const handleNotificationChange = useCallback(
     (type: NotificationType, text: string, heading?: string) =>
       setNotification({ type, text, heading }),
-    [setNotification],
+    [setNotification]
   );
 
   return (
diff --git a/web/src/beta/features/Modals/AssetModal/index.tsx b/web/src/beta/features/Modals/AssetModal/index.tsx
index 2b3bf2204..95d2cbbc8 100644
--- a/web/src/beta/features/Modals/AssetModal/index.tsx
+++ b/web/src/beta/features/Modals/AssetModal/index.tsx
@@ -7,7 +7,7 @@ import Modal from "@reearth/beta/components/Modal";
 import Text from "@reearth/beta/components/Text";
 import {
   FILE_FORMATS,
-  IMAGE_FORMATS,
+  IMAGE_FORMATS
 } from "@reearth/beta/features/Assets/constants";
 import useHooks from "@reearth/beta/features/Assets/hooks";
 import { AcceptedFileFormat, Asset } from "@reearth/beta/features/Assets/types";
@@ -23,7 +23,7 @@ const getValue: Record<string, string> = {
   "size-reverse": "size",
   date: "date",
   size: "size",
-  name: "name",
+  name: "name"
 };
 
 export type Props = {
@@ -45,7 +45,7 @@ const ChooseAssetModal: React.FC<Props> = ({
   open,
   fileFormat,
   onSelect,
-  onModalClose,
+  onModalClose
 }) => {
   const t = useT();
 
@@ -65,7 +65,7 @@ const ChooseAssetModal: React.FC<Props> = ({
     handleSearchInputChange,
     handleSearch,
     handleGetMoreAssets,
-    handleSortChange,
+    handleSortChange
   } = useHooks({ workspaceId: currentWorkspace?.id });
 
   const filteredAssets = useMemo(() => {
@@ -105,7 +105,7 @@ const ChooseAssetModal: React.FC<Props> = ({
     } else {
       setNotification({
         type: "warning",
-        text: t("Please select an asset before clicking Select."),
+        text: t("Please select an asset before clicking Select.")
       });
     }
   }, [onClose, onSelect, selectedAssets, setNotification, t]);
@@ -115,7 +115,7 @@ const ChooseAssetModal: React.FC<Props> = ({
       if (!asset) return;
       selectAsset(!selectedAssets.includes(asset) ? [asset] : []);
     },
-    [selectedAssets, selectAsset],
+    [selectedAssets, selectAsset]
   );
   const onSortChange = useCallback(
     (selectedLabel: string) => {
@@ -124,7 +124,7 @@ const ChooseAssetModal: React.FC<Props> = ({
       const reverse = selectedLabel.toLowerCase().includes("reverse");
       handleSortChange?.(value, reverse);
     },
-    [handleSortChange],
+    [handleSortChange]
   );
 
   useEffect(() => {
@@ -164,7 +164,7 @@ const ChooseAssetModal: React.FC<Props> = ({
             value={selectedSortOption}
             options={sortOptions.map((option) => ({
               key: option.value,
-              label: option.label,
+              label: option.label
             }))}
             onChange={onSortChange}
           />
@@ -184,7 +184,7 @@ const ChooseAssetModal: React.FC<Props> = ({
               {searchTerm
                 ? t("No assets match your search.")
                 : t(
-                    "You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.",
+                    "You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer."
                   )}
             </TemplateText>
           </Template>
diff --git a/web/src/beta/features/Modals/LayerStyleModal/hooks.ts b/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
index 99772b202..4182f4999 100644
--- a/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
+++ b/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
@@ -1,6 +1,6 @@
 import {
   autoFillPage,
-  onScrollToBottom,
+  onScrollToBottom
 } from "@reearth/beta/utils/infinite-scroll";
 import { useLayerStylesFetcher } from "@reearth/services/api";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
@@ -13,7 +13,7 @@ function pagination(endCursor?: string | null) {
     after: null,
     before: endCursor,
     first: LayerStylesPerPage,
-    last: LayerStylesPerPage,
+    last: LayerStylesPerPage
   };
 }
 
@@ -28,19 +28,19 @@ export default ({ sceneId }: { sceneId?: string }) => {
 
   const [searchTerm, setSearchTerm] = useState<string>();
   const [localSearchTerm, setLocalSearchTerm] = useState<string>(
-    searchTerm ?? "",
+    searchTerm ?? ""
   );
 
   const handleSearchInputChange = useCallback(
     (value: string) => {
       setLocalSearchTerm(value);
     },
-    [setLocalSearchTerm],
+    [setLocalSearchTerm]
   );
 
   const handleSearchTerm = useCallback(
     (term?: string) => setSearchTerm(term),
-    [],
+    []
   );
 
   const handleSearch = useCallback(() => {
@@ -55,10 +55,10 @@ export default ({ sceneId }: { sceneId?: string }) => {
     (layerStyle?: LayerStyle) => {
       if (!layerStyle) return;
       selectLayerStyle(
-        !selectedLayerStyles.includes(layerStyle) ? [layerStyle] : [],
+        !selectedLayerStyles.includes(layerStyle) ? [layerStyle] : []
       );
     },
-    [selectLayerStyle, selectedLayerStyles],
+    [selectLayerStyle, selectedLayerStyles]
   );
 
   const handleGetMoreLayerStyles = useCallback(async () => {
@@ -66,8 +66,8 @@ export default ({ sceneId }: { sceneId?: string }) => {
       isGettingMore.current = true;
       await fetchMore({
         variables: {
-          pagination: pagination(),
-        },
+          pagination: pagination()
+        }
       });
       isGettingMore.current = false;
     }
@@ -75,7 +75,7 @@ export default ({ sceneId }: { sceneId?: string }) => {
 
   const isLayerStylesLoading = useMemo(
     () => loading ?? isRefetching,
-    [loading, isRefetching],
+    [loading, isRefetching]
   );
 
   useEffect(() => {
@@ -95,6 +95,6 @@ export default ({ sceneId }: { sceneId?: string }) => {
     selectLayerStyle,
     handleSelectLayerStyle,
     handleSearchInputChange,
-    handleSearch,
+    handleSearch
   };
 };
diff --git a/web/src/beta/features/Modals/LayerStyleModal/index.tsx b/web/src/beta/features/Modals/LayerStyleModal/index.tsx
index 5a5b6e74a..66109248f 100644
--- a/web/src/beta/features/Modals/LayerStyleModal/index.tsx
+++ b/web/src/beta/features/Modals/LayerStyleModal/index.tsx
@@ -24,7 +24,7 @@ const ChooseLayerStyleModal: React.FC<Props> = ({
   open,
   sceneId,
   onClose,
-  onSelect,
+  onSelect
 }) => {
   const t = useT();
   const [, setNotification] = useNotification();
@@ -39,7 +39,7 @@ const ChooseLayerStyleModal: React.FC<Props> = ({
     handleSelectLayerStyle,
     handleSearch,
     handleSearchInputChange,
-    onScrollToBottom,
+    onScrollToBottom
   } = useHooks({ sceneId });
 
   const handleSelectButtonClick = useCallback(() => {
@@ -49,7 +49,7 @@ const ChooseLayerStyleModal: React.FC<Props> = ({
     } else {
       setNotification({
         type: "warning",
-        text: t("Please select an layer style before clicking Select."),
+        text: t("Please select an layer style before clicking Select.")
       });
     }
   }, [selectedLayerStyles, onSelect, onClose, setNotification, t]);
@@ -92,7 +92,7 @@ const ChooseLayerStyleModal: React.FC<Props> = ({
               {searchTerm
                 ? t("No layerStyle match your search.")
                 : t(
-                    "You haven't added any layerStyle yet. Click the add button in the bottom panel to get started.",
+                    "You haven't added any layerStyle yet. Click the add button in the bottom panel to get started."
                   )}
             </TemplateText>
           </Template>
diff --git a/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx b/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx
index e58db8d07..fc6ea680d 100644
--- a/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx
+++ b/web/src/beta/features/Navbar/LeftSection/Profile/index.tsx
@@ -17,7 +17,7 @@ const HeaderProfile: React.FC<Props> = ({
   currentWorkspace,
   workspaces = [],
   onSignOut,
-  onWorkspaceChange,
+  onWorkspaceChange
 }) => {
   const t = useT();
 
@@ -25,7 +25,7 @@ const HeaderProfile: React.FC<Props> = ({
     (t: string) => {
       onWorkspaceChange?.(t);
     },
-    [onWorkspaceChange],
+    [onWorkspaceChange]
   );
 
   const navigate = useNavigate();
@@ -48,24 +48,24 @@ const HeaderProfile: React.FC<Props> = ({
           hasCustomSubMenu: true,
           personal: w.personal,
           selected: currentWorkspace?.id === w.id,
-          onClick: () => w.id && handleWorkspaceChange(w.id),
+          onClick: () => w.id && handleWorkspaceChange(w.id)
         };
       }),
-      title: t("Switch workspace"),
+      title: t("Switch workspace")
     },
     {
       icon: "exit",
       id: "logOut",
       hasBorderBottom: true,
       onClick: onSignOut,
-      title: t("Log out"),
+      title: t("Log out")
     },
     {
       icon: "file",
       id: "assetManagement",
       onClick: handleAssetManager,
-      title: t("Asset management"),
-    },
+      title: t("Asset management")
+    }
   ];
 
   return <PopupMenu label={currentWorkspace?.name} menu={popupMenu} />;
diff --git a/web/src/beta/features/Navbar/LeftSection/index.tsx b/web/src/beta/features/Navbar/LeftSection/index.tsx
index 53a101c67..5b8339501 100644
--- a/web/src/beta/features/Navbar/LeftSection/index.tsx
+++ b/web/src/beta/features/Navbar/LeftSection/index.tsx
@@ -1,7 +1,7 @@
 import {
   IconButton,
   PopupMenu,
-  PopupMenuItem,
+  PopupMenuItem
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -29,7 +29,7 @@ const LeftSection: React.FC<Props> = ({
   sceneId,
   page,
   onSignOut,
-  onWorkspaceChange,
+  onWorkspaceChange
 }) => {
   const t = useT();
 
@@ -39,9 +39,7 @@ const LeftSection: React.FC<Props> = ({
         icon: "setting",
         id: "setting",
         title: t("Project settings"),
-        path: currentProject?.id
-          ? `/settings/project/${currentProject.id}`
-          : "",
+        path: currentProject?.id ? `/settings/project/${currentProject.id}` : ""
       },
       {
         icon: "plugin",
@@ -49,10 +47,10 @@ const LeftSection: React.FC<Props> = ({
         title: t("Plugin"),
         path: currentProject?.id
           ? `/settings/project/${currentProject.id}/plugins`
-          : "",
-      },
+          : ""
+      }
     ],
-    [currentProject?.id, t],
+    [currentProject?.id, t]
   );
 
   return (
@@ -88,7 +86,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   flexDirection: "row",
   alignItems: "center",
   height: 32,
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const StyledLink = styled(Link)<{ disabled?: boolean }>(
@@ -98,13 +96,13 @@ const StyledLink = styled(Link)<{ disabled?: boolean }>(
     textDecoration: "none",
     pointerEvents: disabled ? "none" : "all",
     "&:hover": {
-      textDecoration: "none",
-    },
-  }),
+      textDecoration: "none"
+    }
+  })
 );
 
 const Separator = styled.div(({ theme }) => ({
   color: theme.content.weak,
   margin: `0 ${theme.spacing.smallest}px`,
-  userSelect: "none",
+  userSelect: "none"
 }));
diff --git a/web/src/beta/features/Navbar/hooks.ts b/web/src/beta/features/Navbar/hooks.ts
index 6de6bc2cc..01d955549 100644
--- a/web/src/beta/features/Navbar/hooks.ts
+++ b/web/src/beta/features/Navbar/hooks.ts
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 
 export default ({
   projectId,
-  workspaceId,
+  workspaceId
 }: {
   projectId?: string;
   workspaceId?: string;
@@ -48,10 +48,10 @@ export default ({
             id: project.id,
             name: project.name,
             sceneId: project.scene?.id,
-            projectType: "beta",
+            projectType: "beta"
           }
         : undefined,
-    [project],
+    [project]
   );
 
   const handleWorkspaceChange = useCallback(
@@ -62,7 +62,7 @@ export default ({
         navigate(`/dashboard/${newWorkspace.id}`);
       }
     },
-    [workspaces, workspaceId, setCurrentWorkspace, navigate],
+    [workspaces, workspaceId, setCurrentWorkspace, navigate]
   );
 
   return {
@@ -70,6 +70,6 @@ export default ({
     currentProject,
     workspace,
     handleWorkspaceChange,
-    handleLogout,
+    handleLogout
   };
 };
diff --git a/web/src/beta/features/Navbar/index.tsx b/web/src/beta/features/Navbar/index.tsx
index cf2e431a0..7aaa7d21f 100644
--- a/web/src/beta/features/Navbar/index.tsx
+++ b/web/src/beta/features/Navbar/index.tsx
@@ -27,23 +27,23 @@ const Navbar: React.FC<Props> = ({
   projectId,
   workspaceId,
   currentTab = "map",
-  page = "editor",
+  page = "editor"
 }) => {
   const {
     currentProject,
     workspace,
     workspaces,
     handleLogout,
-    handleWorkspaceChange,
+    handleWorkspaceChange
   } = useHook({
     projectId,
-    workspaceId,
+    workspaceId
   });
 
   const { rightSide } = useRightSide({
     currentTab,
     sceneId,
-    page,
+    page
   });
 
   return (
@@ -75,5 +75,5 @@ const Wrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.super,
   background: theme.bg[0],
   zIndex: theme.zIndexes.editor.navbar,
-  boxShadow: theme.shadow.card,
+  boxShadow: theme.shadow.card
 }));
diff --git a/web/src/beta/features/Navbar/useDevPlugins.ts b/web/src/beta/features/Navbar/useDevPlugins.ts
index 1b54fc2de..49b6d9a56 100644
--- a/web/src/beta/features/Navbar/useDevPlugins.ts
+++ b/web/src/beta/features/Navbar/useDevPlugins.ts
@@ -3,7 +3,7 @@ import { usePluginsFetcher } from "@reearth/services/api";
 import { config } from "@reearth/services/config";
 import {
   useDevPluginExtensionRenderKey,
-  useDevPluginExtensions,
+  useDevPluginExtensions
 } from "@reearth/services/state";
 import * as yaml from "js-yaml";
 import { useCallback, useEffect } from "react";
@@ -36,7 +36,7 @@ export default ({ sceneId }: Props) => {
       if (!sceneId || !file) return;
       useUploadPluginWithFile(sceneId, file);
     },
-    [sceneId, useUploadPluginWithFile],
+    [sceneId, useUploadPluginWithFile]
   );
 
   const handleDevPluginsInstall = useCallback(async () => {
@@ -68,10 +68,10 @@ export default ({ sceneId }: Props) => {
           return (
             data.extensions?.map((e) => ({
               id: e.id,
-              url: `${url}/${e.id}.js`,
+              url: `${url}/${e.id}.js`
             })) ?? []
           );
-        }),
+        })
       );
       setDevPluginExtensions(extensions.flatMap((e) => e));
     };
@@ -82,7 +82,7 @@ export default ({ sceneId }: Props) => {
   return {
     devPluginExtensions,
     handleDevPluginsInstall,
-    handleDevPluginExtensionsReload,
+    handleDevPluginExtensionsReload
   };
 };
 
@@ -96,13 +96,13 @@ async function getPluginZipFromUrl(url: string) {
     const data = yaml.load(yamlText) as ReearthYML;
 
     const extensionUrls = data?.extensions?.map(
-      (extensions) => `${url}/${extensions.id}.js`,
+      (extensions) => `${url}/${extensions.id}.js`
     );
     if (!extensionUrls) return;
 
     const file = await fetchAndZipFiles(
       [...extensionUrls, `${url}/reearth.yml`],
-      `${data.id}-${data.version}.zip`,
+      `${data.id}-${data.version}.zip`
     );
 
     return file;
diff --git a/web/src/beta/features/Navbar/useRightSection.tsx b/web/src/beta/features/Navbar/useRightSection.tsx
index b4ecbbcfa..6994d06e0 100644
--- a/web/src/beta/features/Navbar/useRightSection.tsx
+++ b/web/src/beta/features/Navbar/useRightSection.tsx
@@ -21,7 +21,7 @@ const useRightSide = ({ currentTab, page, sceneId }: Props) => {
   const {
     devPluginExtensions,
     handleDevPluginsInstall,
-    handleDevPluginExtensionsReload,
+    handleDevPluginExtensionsReload
   } = useDevPlugins({ sceneId });
 
   const rightSide = useMemo(() => {
@@ -74,11 +74,11 @@ const useRightSide = ({ currentTab, page, sceneId }: Props) => {
     t,
     devPluginExtensions,
     handleDevPluginsInstall,
-    handleDevPluginExtensionsReload,
+    handleDevPluginExtensionsReload
   ]);
 
   return {
-    rightSide,
+    rightSide
   };
 };
 
diff --git a/web/src/beta/features/Notification/hooks.ts b/web/src/beta/features/Notification/hooks.ts
index 154627a9b..fab6de4de 100644
--- a/web/src/beta/features/Notification/hooks.ts
+++ b/web/src/beta/features/Notification/hooks.ts
@@ -2,7 +2,7 @@ import { useT, useLang } from "@reearth/services/i18n";
 import {
   useError,
   useNotification,
-  Notification,
+  Notification
 } from "@reearth/services/state";
 import { useState, useEffect, useCallback, useMemo } from "react";
 
@@ -20,7 +20,7 @@ const policyItems: PolicyItems[] = [
   "dataset",
   "createProject",
   "publishProject",
-  "member",
+  "member"
 ];
 
 export default () => {
@@ -46,7 +46,7 @@ export default () => {
         : notification?.type === "warning"
           ? warningHeading
           : noticeHeading,
-    [notification?.type, errorHeading, warningHeading, noticeHeading],
+    [notification?.type, errorHeading, warningHeading, noticeHeading]
   );
 
   const setModal = useCallback((show: boolean) => {
@@ -66,20 +66,20 @@ export default () => {
           ? policyItem
           : policyItem[currentLanguage]
         : t(
-            "You have reached a policy limit. Please contact an administrator of your Re:Earth system.",
+            "You have reached a policy limit. Please contact an administrator of your Re:Earth system."
           );
 
       setNotification({
         type: "info",
         heading: noticeHeading,
         text: message,
-        duration: "persistent",
+        duration: "persistent"
       });
     } else {
       setNotification({
         type: "error",
         heading: errorHeading,
-        text: t("Something went wrong. Please try again later."),
+        text: t("Something went wrong. Please try again later.")
       });
     }
     setError(undefined);
@@ -91,7 +91,7 @@ export default () => {
     noticeHeading,
     setError,
     setNotification,
-    t,
+    t
   ]);
 
   useEffect(() => {
@@ -118,9 +118,9 @@ export default () => {
     notification: {
       type: notification?.type,
       heading: notificationHeading,
-      text: notification?.text,
+      text: notification?.text
     } as Notification,
     setIsHovered,
-    setModal,
+    setModal
   };
 };
diff --git a/web/src/beta/features/PluginPlayground/Viewer/hooks.ts b/web/src/beta/features/PluginPlayground/Viewer/hooks.ts
index d068b7d61..bc014bde9 100644
--- a/web/src/beta/features/PluginPlayground/Viewer/hooks.ts
+++ b/web/src/beta/features/PluginPlayground/Viewer/hooks.ts
@@ -8,14 +8,14 @@ export default () => {
   const visualizerRef = useRef<MapRef | null>(null);
   const [ready, setReady] = useState(false);
   const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(
-    undefined,
+    undefined
   );
 
   const engineMeta = useMemo(
     () => ({
-      cesiumIonAccessToken: config()?.cesiumIonAccessToken,
+      cesiumIonAccessToken: config()?.cesiumIonAccessToken
     }),
-    [],
+    []
   );
 
   const viewerProperty: ViewerProperty = useMemo(
@@ -23,11 +23,11 @@ export default () => {
       tiles: [
         {
           id: "default",
-          type: "default",
-        },
-      ],
+          type: "default"
+        }
+      ]
     }),
-    [],
+    []
   );
 
   useEffect(() => {
@@ -40,6 +40,6 @@ export default () => {
     ready,
     engineMeta,
     currentCamera,
-    setCurrentCamera,
+    setCurrentCamera
   };
 };
diff --git a/web/src/beta/features/PluginPlayground/Viewer/index.tsx b/web/src/beta/features/PluginPlayground/Viewer/index.tsx
index 918ce6aee..6286b9cb7 100644
--- a/web/src/beta/features/PluginPlayground/Viewer/index.tsx
+++ b/web/src/beta/features/PluginPlayground/Viewer/index.tsx
@@ -10,7 +10,7 @@ const Viewer: FC = () => {
     ready,
     engineMeta,
     currentCamera,
-    setCurrentCamera,
+    setCurrentCamera
   } = useHooks();
 
   return (
diff --git a/web/src/beta/features/PluginPlayground/hooks.tsx b/web/src/beta/features/PluginPlayground/hooks.tsx
index d3316fd9f..234e21946 100644
--- a/web/src/beta/features/PluginPlayground/hooks.tsx
+++ b/web/src/beta/features/PluginPlayground/hooks.tsx
@@ -1,6 +1,6 @@
+import { TabItem } from "@reearth/beta/lib/reearth-ui";
 import { useMemo } from "react";
 
-import { TabItem } from "@reearth/beta/lib/reearth-ui";
 
 import Console from "./Console";
 import PluginInspector from "./PluginInspector";
@@ -15,10 +15,10 @@ export default () => {
       {
         id: "viewer",
         name: "Viewer",
-        children: <Viewer />,
-      },
+        children: <Viewer />
+      }
     ],
-    [],
+    []
   );
 
   const BottomAreaTabs: TabItem[] = useMemo(
@@ -26,10 +26,10 @@ export default () => {
       {
         id: "console",
         name: "Console",
-        children: <Console />,
-      },
+        children: <Console />
+      }
     ],
-    [],
+    []
   );
 
   const SubRightAreaTabs: TabItem[] = useMemo(
@@ -37,10 +37,10 @@ export default () => {
       {
         id: "plugins",
         name: "Plugins",
-        children: <Plugins />,
-      },
+        children: <Plugins />
+      }
     ],
-    [],
+    []
   );
 
   const RightAreaTabs: TabItem[] = useMemo(
@@ -48,16 +48,16 @@ export default () => {
       {
         id: "plugin-inspector",
         name: "Plugin Inspector",
-        children: <PluginInspector />,
-      },
+        children: <PluginInspector />
+      }
     ],
-    [],
+    []
   );
 
   return {
     MainAreaTabs,
     BottomAreaTabs,
     SubRightAreaTabs,
-    RightAreaTabs,
+    RightAreaTabs
   };
 };
diff --git a/web/src/beta/features/ProjectSettings/hooks.ts b/web/src/beta/features/ProjectSettings/hooks.ts
index abff458ff..9219d6c02 100644
--- a/web/src/beta/features/ProjectSettings/hooks.ts
+++ b/web/src/beta/features/ProjectSettings/hooks.ts
@@ -10,7 +10,7 @@ import {
   PublicBasicAuthSettingsType,
   PublicSettingsType,
   PublicAliasSettingsType,
-  PublicGASettingsType,
+  PublicGASettingsType
 } from "./innerPages/PublicSettings";
 import { StorySettingsType } from "./innerPages/StorySettings";
 
@@ -27,7 +27,7 @@ export default ({ projectId }: Props) => {
     useUpdateProject,
     useDeleteProject,
     useUpdateProjectBasicAuth,
-    useUpdateProjectAlias,
+    useUpdateProjectAlias
   } = useProjectFetcher();
   const { useSceneQuery } = useSceneFetcher();
 
@@ -41,7 +41,7 @@ export default ({ projectId }: Props) => {
     async (settings: GeneralSettingsType & PublicSettingsType) => {
       await useUpdateProject({ projectId, ...settings });
     },
-    [projectId, useUpdateProject],
+    [projectId, useUpdateProject]
   );
 
   const handleDeleteProject = useCallback(async () => {
@@ -56,7 +56,7 @@ export default ({ projectId }: Props) => {
       if (!projectId) return;
       await useUpdateProjectBasicAuth({ projectId, ...settings });
     },
-    [projectId, useUpdateProjectBasicAuth],
+    [projectId, useUpdateProjectBasicAuth]
   );
 
   const handleUpdateProjectAlias = useCallback(
@@ -64,7 +64,7 @@ export default ({ projectId }: Props) => {
       if (!projectId) return;
       await useUpdateProjectAlias({ projectId, ...settings });
     },
-    [projectId, useUpdateProjectAlias],
+    [projectId, useUpdateProjectAlias]
   );
 
   const handleUpdateProjectGA = useCallback(
@@ -72,13 +72,13 @@ export default ({ projectId }: Props) => {
       if (!projectId) return;
       await useUpdateProject({ projectId, ...settings });
     },
-    [projectId, useUpdateProject],
+    [projectId, useUpdateProject]
   );
   const { useStoriesQuery } = useStorytellingAPI();
   const { stories = [] } = useStoriesQuery({ sceneId: scene?.id });
   const currentStory = useMemo(
     () => (stories?.length ? stories[0] : undefined),
-    [stories],
+    [stories]
   );
 
   const { useUpdateStory } = useStorytellingAPI();
@@ -88,10 +88,10 @@ export default ({ projectId }: Props) => {
       await useUpdateStory({
         storyId: currentStory.id,
         sceneId: scene.id,
-        ...settings,
+        ...settings
       });
     },
-    [useUpdateStory, currentStory?.id, scene?.id],
+    [useUpdateStory, currentStory?.id, scene?.id]
   );
 
   const handleUpdateStoryBasicAuth = useCallback(
@@ -100,10 +100,10 @@ export default ({ projectId }: Props) => {
       await useUpdateStory({
         storyId: currentStory.id,
         sceneId: scene.id,
-        ...settings,
+        ...settings
       });
     },
-    [useUpdateStory, currentStory?.id, scene?.id],
+    [useUpdateStory, currentStory?.id, scene?.id]
   );
   const handleUpdateStoryAlias = useCallback(
     async (settings: PublicAliasSettingsType) => {
@@ -111,10 +111,10 @@ export default ({ projectId }: Props) => {
       await useUpdateStory({
         storyId: currentStory.id,
         sceneId: scene.id,
-        ...settings,
+        ...settings
       });
     },
-    [useUpdateStory, currentStory?.id, scene?.id],
+    [useUpdateStory, currentStory?.id, scene?.id]
   );
 
   const { getAccessToken } = useAuth();
@@ -129,9 +129,9 @@ export default ({ projectId }: Props) => {
   const extensions = useMemo(
     () => ({
       library: config()?.extensions?.pluginLibrary,
-      installed: config()?.extensions?.pluginInstalled,
+      installed: config()?.extensions?.pluginInstalled
     }),
-    [],
+    []
   );
 
   return {
@@ -150,6 +150,6 @@ export default ({ projectId }: Props) => {
     handleUpdateProjectGA,
     handleUpdateStory,
     handleUpdateStoryBasicAuth,
-    handleUpdateStoryAlias,
+    handleUpdateStoryAlias
   };
 };
diff --git a/web/src/beta/features/ProjectSettings/index.tsx b/web/src/beta/features/ProjectSettings/index.tsx
index 3c6fb37bd..6c7ee1804 100644
--- a/web/src/beta/features/ProjectSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/index.tsx
@@ -4,7 +4,7 @@ import {
   SidebarMenuItem,
   SidebarSection,
   SidebarVersion,
-  SidebarWrapper,
+  SidebarWrapper
 } from "@reearth/beta/ui/components/Sidebar";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -20,7 +20,7 @@ export const projectSettingTabs = [
   { id: "general", text: "General", icon: "setting" },
   { id: "story", text: "Story", icon: "sidebar" },
   { id: "public", text: "Public", icon: "paperPlaneTilt" },
-  { id: "plugins", text: "Plugin", icon: "puzzlePiece" },
+  { id: "plugins", text: "Plugin", icon: "puzzlePiece" }
 ] as const;
 
 export type projectSettingsTab = (typeof projectSettingTabs)[number]["id"];
@@ -53,10 +53,10 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
     handleUpdateProjectGA,
     handleUpdateStory,
     handleUpdateStoryBasicAuth,
-    handleUpdateStoryAlias,
+    handleUpdateStoryAlias
   } = useHooks({
     projectId,
-    subId,
+    subId
   });
 
   const tabs = useMemo(
@@ -65,9 +65,9 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
         id: tab.id,
         icon: tab.icon,
         text: t(tab.text),
-        path: `/settings/project/${projectId}/${tab.id === "general" ? "" : tab.id}`,
+        path: `/settings/project/${projectId}/${tab.id === "general" ? "" : tab.id}`
       })),
-    [projectId, t],
+    [projectId, t]
   );
 
   return (
@@ -148,29 +148,29 @@ const Wrapper = styled("div")(({ theme }) => ({
   color: theme.content.main,
   backgroundColor: theme.bg[0],
   ["*"]: {
-    boxSizing: "border-box",
+    boxSizing: "border-box"
   },
   ["* ::-webkit-scrollbar"]: {
-    width: "8px",
+    width: "8px"
   },
   ["* ::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
-    borderRadius: "10px",
+    borderRadius: "10px"
   },
   ["* ::-webkit-scrollbar-thumb"]: {
     background: theme.relative.light,
-    borderRadius: "4px",
+    borderRadius: "4px"
   },
   ["* ::-webkit-scrollbar-thumb:hover"]: {
-    background: theme.relative.lighter,
-  },
+    background: theme.relative.lighter
+  }
 }));
 
 const MainSection = styled("div")(() => ({
   display: "flex",
   flex: 1,
   overflow: "auto",
-  position: "relative",
+  position: "relative"
 }));
 
 const LeftSidePanel = styled("div")(({ theme }) => ({
@@ -179,7 +179,7 @@ const LeftSidePanel = styled("div")(({ theme }) => ({
   backgroundColor: theme.bg[1],
   display: "flex",
   padding: `${theme.spacing.large}px 0`,
-  boxSizing: "border-box",
+  boxSizing: "border-box"
 }));
 
 const Content = styled("div")(({ theme }) => ({
@@ -190,7 +190,7 @@ const Content = styled("div")(({ theme }) => ({
   height: "100%",
   alignItems: "center",
   overflow: "auto",
-  padding: `${theme.spacing.super}px`,
+  padding: `${theme.spacing.super}px`
 }));
 
 export default ProjectSettings;
diff --git a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
index f315434a7..6078dba52 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
@@ -6,7 +6,7 @@ import {
   Modal,
   Button,
   ModalPanel,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { InputField, AssetField, TextareaField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
@@ -21,7 +21,7 @@ import {
   ArchivedSettingNotice,
   SettingsRow,
   SettingsRowItem,
-  Thumbnail,
+  Thumbnail
 } from "../common";
 
 export type GeneralSettingsType = {
@@ -45,23 +45,23 @@ type Props = {
 const GeneralSettings: FC<Props> = ({
   project,
   onUpdateProject,
-  onDeleteProject,
+  onDeleteProject
 }) => {
   const t = useT();
 
   const [localName, setLocalName] = useState(project?.name ?? "");
   const [localDescription, setLocalDescription] = useState(
-    project?.description ?? "",
+    project?.description ?? ""
   );
   const [localImageUrl, setLocalImageUrl] = useState<string | undefined>(
-    project?.imageUrl ?? "",
+    project?.imageUrl ?? ""
   );
 
   const handleSubmit = useCallback(() => {
     onUpdateProject({
       name: localName,
       description: localDescription,
-      imageUrl: localImageUrl,
+      imageUrl: localImageUrl
     });
   }, [localName, localDescription, localImageUrl, onUpdateProject]);
 
@@ -69,7 +69,7 @@ const GeneralSettings: FC<Props> = ({
   const [deleteInputName, setDeleteInputName] = useState("");
   const deleteDisabled = useMemo(
     () => deleteInputName !== project?.name,
-    [deleteInputName, project?.name],
+    [deleteInputName, project?.name]
   );
 
   return project ? (
@@ -154,7 +154,7 @@ const GeneralSettings: FC<Props> = ({
               appearance="dangerous"
               disabled={deleteDisabled}
               onClick={onDeleteProject}
-            />,
+            />
           ]}
         >
           <ModalContentWrapper>
@@ -163,7 +163,7 @@ const GeneralSettings: FC<Props> = ({
             </Typography>
             <Typography size="body">
               {t(
-                "This process will remove this project to Recycle bin. If the project was published, this also means websites and domains referencing the project will not be able to access it anymore.",
+                "This process will remove this project to Recycle bin. If the project was published, this also means websites and domains referencing the project will not be able to access it anymore."
               )}
             </Typography>
             <Divider />
@@ -185,13 +185,13 @@ const ModalContentWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.large,
   padding: theme.spacing.large,
-  background: theme.bg[1],
+  background: theme.bg[1]
 }));
 
 const DangerItem = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.large,
+  gap: theme.spacing.large
 }));
 
 const Divider = styled.div`
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
index 6d573be0b..2a9a0e8e4 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
@@ -14,7 +14,7 @@ const PluginInstallCardButton: React.FC<Props> = ({
   className,
   icon,
   text,
-  onClick,
+  onClick
 }) => (
   <StyledButton onClick={onClick} className={className}>
     <Icon icon={icon} size={126} />
@@ -37,9 +37,9 @@ const StyledButton = styled("div")(({ theme }) => ({
   cursor: "pointer",
   padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px`,
   "&:hover": {
-    backgroundColor: theme.bg[2],
+    backgroundColor: theme.bg[2]
   },
-  transition: "all 0.1s",
+  transition: "all 0.1s"
 }));
 
 export default PluginInstallCardButton;
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx
index fe5d0d214..1a057d073 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/PluginListItem.tsx
@@ -5,7 +5,7 @@ import {
   Markdown,
   Modal,
   ModalPanel,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
@@ -20,7 +20,7 @@ type PluginListItemProps = {
 
 const PluginListItem: FC<PluginListItemProps> = ({
   plugin: { title, pluginId, isInstalled, bodyMarkdown },
-  uninstallPlugin,
+  uninstallPlugin
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -92,7 +92,7 @@ const PluginListItem: FC<PluginListItemProps> = ({
                   setIsModalOpen(false);
                   uninstallPlugin(pluginId);
                 }}
-              />,
+              />
             ]}
           >
             <WarningIcon>
@@ -100,7 +100,7 @@ const PluginListItem: FC<PluginListItemProps> = ({
             </WarningIcon>
             <Typography size="body">
               {t(
-                "You are uninstalling the selected plugin. The data used by this plugin may also be deleted.",
+                "You are uninstalling the selected plugin. The data used by this plugin may also be deleted."
               )}
             </Typography>
             <Typography size="body">
@@ -115,7 +115,7 @@ const PluginListItem: FC<PluginListItemProps> = ({
             <Markdown
               backgroundColor={theme.bg.base}
               styles={{
-                color: theme.content.main,
+                color: theme.content.main
               }}
             >
               {bodyMarkdown}
@@ -139,35 +139,35 @@ const Wrapper = styled("div")(({ theme }) => ({
   backgroundColor: theme.bg[1],
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.normal,
+  gap: theme.spacing.normal
 }));
 
 const Header = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  gap: theme.spacing.normal,
+  gap: theme.spacing.normal
 }));
 
 const InfoWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.normal,
-  flex: 1,
+  flex: 1
 }));
 
 const TitleWrapper = styled("div")(() => ({
   display: "flex",
   alignItems: "center",
-  width: "70%",
+  width: "70%"
 }));
 
 const VersionWrapper = styled("div")(() => ({
   display: "flex",
   alignItems: "center",
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const WarningIcon = styled("div")(({ theme }) => ({
-  color: theme.dangerous.main,
+  color: theme.dangerous.main
 }));
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx
index eb5fcdb48..0d1f65674 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginList/index.tsx
@@ -45,16 +45,16 @@ export default PluginList;
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.super,
+  gap: theme.spacing.super
 }));
 
 const InstalledHeader = styled("div")(({ theme }) => ({
   padding: theme.spacing.normal,
-  borderBottom: `solid 1px ${theme.outline.weak}`,
+  borderBottom: `solid 1px ${theme.outline.weak}`
 }));
 
 const ListWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.normal,
+  gap: theme.spacing.normal
 }));
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts
index 33a65c072..20453817a 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/hooks.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 
 export const validateUrl = (
-  url: string,
+  url: string
 ): { result: boolean; message: string } => {
   if (!url) {
     return { result: false, message: "Error: Thie field is required" };
@@ -41,6 +41,6 @@ export default (onSend: (repoUrl: string) => void, loading?: boolean) => {
     handleRepoUrlChange: setRepoUrl,
     handleOpen,
     handleSubmit,
-    handleClose,
+    handleClose
   };
 };
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx
index 06a7a53b1..32541aa33 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx
@@ -4,7 +4,7 @@ import {
   Loading,
   Modal,
   ModalPanel,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { InputField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
@@ -28,7 +28,7 @@ const PublicRepo: React.FC<Props> = ({
   buttonText: text,
   onSend,
   serverSideError,
-  loading,
+  loading
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -39,7 +39,7 @@ const PublicRepo: React.FC<Props> = ({
     handleRepoUrlChange,
     handleOpen,
     handleSubmit,
-    handleClose,
+    handleClose
   } = useHooks(onSend, loading);
 
   return (
@@ -63,7 +63,7 @@ const PublicRepo: React.FC<Props> = ({
               title={t("Continue")}
               disabled={!repoUrl}
               onClick={handleSubmit}
-            />,
+            />
           ]}
         >
           {loading && <Loading overlay />}
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx
index d0b71df29..3ff22af57 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/ZipUpload/index.tsx
@@ -15,7 +15,7 @@ const ZipUpload: React.FC<Props> = ({ icon, buttonText, onSend, loading }) => {
   const accept = ".zip";
   const handleClick = useFileInput((files) => onSend?.(files), {
     accept,
-    multiple: false,
+    multiple: false
   });
   return (
     <>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx
index 05a890f91..84732a833 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/index.tsx
@@ -17,7 +17,7 @@ const PluginInstall: React.FC<Props> = ({
   installedPlugins,
   installFromPublicRepo,
   installByUploadingZipFile,
-  uninstallPlugin,
+  uninstallPlugin
 }) => {
   const t = useT();
 
@@ -50,11 +50,11 @@ export default PluginInstall;
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.super,
+  gap: theme.spacing.super
 }));
 
 const ButtonsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.largest,
-  justifyContent: "space-between",
+  justifyContent: "space-between"
 }));
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts
index 903826a4e..d00ce76d6 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/hooks.ts
@@ -11,7 +11,7 @@ export type MarketplacePlugin = {
 
 export default ({
   sceneId,
-  plugins,
+  plugins
 }: {
   sceneId?: string;
   plugins?: ScenePlugin[];
@@ -20,7 +20,7 @@ export default ({
     useInstallPlugin,
     useUpgradePlugin,
     useUploadPlugin,
-    useUninstallPlugin,
+    useUninstallPlugin
   } = usePluginsFetcher();
 
   const marketplacePlugins = useMemo(
@@ -30,7 +30,7 @@ export default ({
           (p) =>
             p.plugin &&
             p.plugin?.id !== "reearth" &&
-            p.plugin.id.split("~", 3).length < 3,
+            p.plugin.id.split("~", 3).length < 3
         )
         .map((p): MarketplacePlugin | undefined => {
           if (!p.plugin) return;
@@ -39,11 +39,11 @@ export default ({
             id,
             version,
             title: p.plugin.name,
-            author: p.plugin.author,
+            author: p.plugin.author
           };
         })
         .filter((p): p is MarketplacePlugin => !!p) ?? [],
-    [plugins],
+    [plugins]
   );
 
   const personalPlugins = useMemo(
@@ -53,7 +53,7 @@ export default ({
           (p) =>
             p.plugin &&
             p.plugin.id !== "reearth" &&
-            p.plugin.id.split("~", 3).length == 3,
+            p.plugin.id.split("~", 3).length == 3
         )
         .map((p) => ({
           title: p.plugin?.translatedName ?? p.plugin?.name ?? "",
@@ -61,9 +61,9 @@ export default ({
             p.plugin?.translatedDescription ?? p.plugin?.description ?? "",
           author: p.plugin?.author ?? "",
           isInstalled: true,
-          pluginId: p.plugin?.id ?? "",
+          pluginId: p.plugin?.id ?? ""
         })) ?? [],
-    [plugins],
+    [plugins]
   );
 
   const handleInstallPluginByMarketplace = useCallback(
@@ -76,7 +76,7 @@ export default ({
         await useInstallPlugin(sceneId, pluginId);
       }
     },
-    [sceneId, useInstallPlugin, useUpgradePlugin],
+    [sceneId, useInstallPlugin, useUpgradePlugin]
   );
 
   const handleInstallPluginFromFile = useCallback(
@@ -84,7 +84,7 @@ export default ({
       if (!sceneId) return;
       useUploadPlugin(sceneId, files);
     },
-    [sceneId, useUploadPlugin],
+    [sceneId, useUploadPlugin]
   );
 
   const handleInstallPluginFromPublicRepo = useCallback(
@@ -92,7 +92,7 @@ export default ({
       if (!sceneId) return;
       useUploadPlugin(sceneId, undefined, repoUrl);
     },
-    [sceneId, useUploadPlugin],
+    [sceneId, useUploadPlugin]
   );
 
   const handleUninstallPlugin = useCallback(
@@ -100,7 +100,7 @@ export default ({
       if (!sceneId) return;
       useUninstallPlugin(sceneId, pluginId);
     },
-    [sceneId, useUninstallPlugin],
+    [sceneId, useUninstallPlugin]
   );
 
   return {
@@ -109,6 +109,6 @@ export default ({
     handleInstallPluginByMarketplace,
     handleInstallPluginFromFile,
     handleInstallPluginFromPublicRepo,
-    handleUninstallPlugin,
+    handleUninstallPlugin
   };
 };
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx
index c5eb8026b..20fbc6c21 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/index.tsx
@@ -28,7 +28,7 @@ const PluginSettings: React.FC<Props> = ({
   isArchived,
   accessToken,
   plugins,
-  extensions,
+  extensions
 }) => {
   const t = useT();
   const currentLang = useLang();
@@ -39,7 +39,7 @@ const PluginSettings: React.FC<Props> = ({
     handleInstallPluginByMarketplace,
     handleInstallPluginFromPublicRepo,
     handleInstallPluginFromFile,
-    handleUninstallPlugin,
+    handleUninstallPlugin
   } = useHooks({ sceneId, plugins });
 
   const tabItems: TabItem[] = useMemo(
@@ -62,7 +62,7 @@ const PluginSettings: React.FC<Props> = ({
                 />
               ))}
           </>
-        ),
+        )
       },
       {
         id: "Public",
@@ -82,7 +82,7 @@ const PluginSettings: React.FC<Props> = ({
                 />
               ))}
           </>
-        ),
+        )
       },
       {
         id: "Personal",
@@ -94,8 +94,8 @@ const PluginSettings: React.FC<Props> = ({
             installByUploadingZipFile={handleInstallPluginFromFile}
             uninstallPlugin={handleUninstallPlugin}
           />
-        ),
-      },
+        )
+      }
     ],
     [
       accessToken,
@@ -107,8 +107,8 @@ const PluginSettings: React.FC<Props> = ({
       handleInstallPluginByMarketplace,
       handleInstallPluginFromPublicRepo,
       handleInstallPluginFromFile,
-      handleUninstallPlugin,
-    ],
+      handleUninstallPlugin
+    ]
   );
 
   return (
@@ -128,5 +128,5 @@ export default PluginSettings;
 
 const Wrapper = styled("div")(({ theme }) => ({
   width: "100%",
-  padding: `${theme.spacing.largest}px 0`,
+  padding: `${theme.spacing.largest}px 0`
 }));
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
index 62091d989..a71ebe768 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx
@@ -14,7 +14,7 @@ import {
   PublicAliasSettingsType,
   PublicBasicAuthSettingsType,
   PublicSettingsType,
-  PublicGASettingsType,
+  PublicGASettingsType
 } from ".";
 
 type Props = {
@@ -33,49 +33,49 @@ const PublicSettingsDetail: React.FC<Props> = ({
   onUpdate,
   onUpdateBasicAuth,
   onUpdateAlias,
-  onUpdateGA,
+  onUpdateGA
 }) => {
   const t = useT();
 
   const [localPublicInfo, setLocalPublicInfo] = useState({
     publicTitle: settingsItem.publicTitle,
     publicDescription: settingsItem.publicDescription,
-    publicImage: settingsItem.publicImage,
+    publicImage: settingsItem.publicImage
   });
   const handleSubmitPublicInfo = useCallback(() => {
     onUpdate({
-      ...localPublicInfo,
+      ...localPublicInfo
     });
   }, [localPublicInfo, onUpdate]);
 
   const [localBasicAuthorization, setBasicAuthorization] = useState({
     isBasicAuthActive: !!settingsItem.isBasicAuthActive,
     basicAuthUsername: settingsItem.basicAuthUsername,
-    basicAuthPassword: settingsItem.basicAuthPassword,
+    basicAuthPassword: settingsItem.basicAuthPassword
   });
   const handleSubmitBasicAuthorization = useCallback(() => {
     onUpdateBasicAuth({
-      ...localBasicAuthorization,
+      ...localBasicAuthorization
     });
   }, [localBasicAuthorization, onUpdateBasicAuth]);
 
   const [localAlias, setLocalAlias] = useState(settingsItem.alias);
   const handleSubmitAlias = useCallback(() => {
     onUpdateAlias({
-      alias: localAlias,
+      alias: localAlias
     });
   }, [localAlias, onUpdateAlias]);
 
   const [localGA, setLocalGA] = useState<PublicGASettingsType>({
     enableGa: settingsItem.enableGa,
-    trackingId: settingsItem.trackingId,
+    trackingId: settingsItem.trackingId
   });
 
   const handleSubmitGA = useCallback(() => {
     if (onUpdateGA) {
       onUpdateGA({
         enableGa: localGA.enableGa,
-        trackingId: localGA.trackingId,
+        trackingId: localGA.trackingId
       });
     }
   }, [localGA, onUpdateGA]);
@@ -170,7 +170,7 @@ const PublicSettingsDetail: React.FC<Props> = ({
               setLocalAlias(alias);
             }}
             description={t(
-              "You are about to change the site name for your project. Only alphanumeric characters and hyphens are allows.",
+              "You are about to change the site name for your project. Only alphanumeric characters and hyphens are allows."
             )}
           />
           <ButtonWrapper>
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
index e665e7c17..8b3fdcf44 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
@@ -1,7 +1,7 @@
 import {
   SidebarMenuItem,
   SidebarSection,
-  SidebarWrapper,
+  SidebarWrapper
 } from "@reearth/beta/ui/components/Sidebar";
 import { Story } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
@@ -11,7 +11,7 @@ import {
   InnerPage,
   SettingsWrapper,
   ArchivedSettingNotice,
-  InnerSidebar,
+  InnerSidebar
 } from "../common";
 
 import PublicSettingsDetail from "./PublicSettingsDetail";
@@ -76,7 +76,7 @@ const PublicSettings: React.FC<Props> = ({
   onUpdateProject,
   onUpdateProjectBasicAuth,
   onUpdateProjectAlias,
-  onUpdateProjectGA,
+  onUpdateProjectGA
 }) => {
   const t = useT();
   const [selectedTab, selectTab] = useState(subId ? subId : "map");
@@ -88,17 +88,17 @@ const PublicSettings: React.FC<Props> = ({
         title: t("Map"),
         icon: "globeSimple" as const,
         path: `/settings/project/${project.id}/public/`,
-        active: selectedTab === "map",
+        active: selectedTab === "map"
       },
       ...stories.map((s) => ({
         id: s.id,
         title: (!s.title || s.title) === "Default" ? t("Story") : s.title,
         icon: "sidebar" as const,
         path: `/settings/project/${project.id}/public/${s.id}`,
-        active: selectedTab === s.id,
-      })),
+        active: selectedTab === s.id
+      }))
     ],
-    [stories, selectedTab, project.id, t],
+    [stories, selectedTab, project.id, t]
   );
 
   const handleTabChange = useCallback((tab: string) => selectTab(tab), []);
diff --git a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx
index 8d46fd002..c6f2af725 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx
@@ -8,7 +8,7 @@ import {
   SettingsFields,
   ButtonWrapper,
   SettingsRow,
-  SettingsRowItem,
+  SettingsRowItem
 } from "../common";
 
 import { StorySettingsType } from ".";
@@ -20,7 +20,7 @@ type Props = {
 
 const StorySettingsDetail: React.FC<Props> = ({
   settingsItem,
-  onUpdateStory,
+  onUpdateStory
 }) => {
   const t = useT();
 
@@ -28,24 +28,24 @@ const StorySettingsDetail: React.FC<Props> = ({
     Position | undefined
   >(settingsItem.panelPosition);
   const [backgroundColor, setBackgroundColor] = useState<string | undefined>(
-    settingsItem?.bgColor,
+    settingsItem?.bgColor
   );
   const handleSubmit = useCallback(() => {
     onUpdateStory({
       panelPosition: localPanelPosition,
-      bgColor: backgroundColor,
+      bgColor: backgroundColor
     });
   }, [backgroundColor, localPanelPosition, onUpdateStory]);
 
   const options = [
     {
       label: t("Left"),
-      value: Position.Left,
+      value: Position.Left
     },
     {
       label: t("Right"),
-      value: Position.Right,
-    },
+      value: Position.Right
+    }
   ];
 
   return (
diff --git a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx
index 3358ab5e3..44c08080a 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx
@@ -18,7 +18,7 @@ type Props = {
 const StorySettings: React.FC<Props> = ({
   currentStory,
   isArchived,
-  onUpdateStory,
+  onUpdateStory
 }) => {
   return (
     <InnerPage>
@@ -30,7 +30,7 @@ const StorySettings: React.FC<Props> = ({
             key={currentStory.id}
             settingsItem={{
               panelPosition: currentStory.panelPosition,
-              bgColor: currentStory.bgColor,
+              bgColor: currentStory.bgColor
             }}
             onUpdateStory={onUpdateStory}
           />
diff --git a/web/src/beta/features/ProjectSettings/innerPages/common.tsx b/web/src/beta/features/ProjectSettings/innerPages/common.tsx
index 1c62666ba..c08ab6222 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/common.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/common.tsx
@@ -11,7 +11,7 @@ export const InnerPage = styled("div")<{
   width: "100%",
   maxWidth: wide ? 950 : 750,
   backgroundColor: transparent ? "none" : theme.bg[1],
-  borderRadius: theme.radius.normal,
+  borderRadius: theme.radius.normal
 }));
 
 export const InnerSidebar = styled("div")(({ theme }) => ({
@@ -19,7 +19,7 @@ export const InnerSidebar = styled("div")(({ theme }) => ({
   flexDirection: "column",
   width: 213,
   borderRight: `1px solid ${theme.outline.weaker}`,
-  padding: `${theme.spacing.normal}px 0`,
+  padding: `${theme.spacing.normal}px 0`
 }));
 
 export const SettingsWrapper = styled("div")(({ theme }) => ({
@@ -28,25 +28,25 @@ export const SettingsWrapper = styled("div")(({ theme }) => ({
   width: "100%",
   flex: 1,
   ["> div:not(:last-child)"]: {
-    borderBottom: `1px solid ${theme.outline.weaker}`,
-  },
+    borderBottom: `1px solid ${theme.outline.weaker}`
+  }
 }));
 
 export const SettingsFields = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.largest,
+  gap: theme.spacing.largest
 }));
 
 export const SettingsRow = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
   flexDirection: "row",
-  gap: theme.spacing.largest,
+  gap: theme.spacing.largest
 }));
 
 export const SettingsRowItem = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 
 export const Thumbnail = styled("div")<{ src?: string }>(({ src, theme }) => ({
@@ -56,13 +56,13 @@ export const Thumbnail = styled("div")<{ src?: string }>(({ src, theme }) => ({
   background: src
     ? `url(${src}) center/contain no-repeat`
     : theme.relative.dark,
-  borderRadius: theme.radius.small,
+  borderRadius: theme.radius.small
 }));
 
 export const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "flex-end",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 export const ArchivedSettingNotice: React.FC = () => {
@@ -71,7 +71,7 @@ export const ArchivedSettingNotice: React.FC = () => {
     <Collapse title={t("Notice")} size="large">
       <Typography size="body">
         {t(
-          "Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.",
+          "Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings."
         )}
       </Typography>
     </Collapse>
diff --git a/web/src/beta/features/Published/convert-new-property.ts b/web/src/beta/features/Published/convert-new-property.ts
index 16317ab38..ef346d942 100644
--- a/web/src/beta/features/Published/convert-new-property.ts
+++ b/web/src/beta/features/Published/convert-new-property.ts
@@ -4,7 +4,7 @@ import { Layer, LayerAppearanceTypes } from "@reearth/core";
 import {
   NLSInfobox,
   NLSLayer,
-  SketchFeature,
+  SketchFeature
 } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { mapValues } from "lodash-es";
@@ -15,7 +15,7 @@ export const processNewProperty = (p: any): any => {
     return Array.isArray(g)
       ? g.map((h) => ({
           ...processNewPropertyGroup(h),
-          id: h.id,
+          id: h.id
         }))
       : processNewPropertyGroup(g);
   });
@@ -33,8 +33,8 @@ function processNewPropertyGroup(g: any): any {
           "lng" in v &&
           "altitude" in v // For compability
             ? { value: { ...vv, height: vv.altitude } }
-            : vv,
-        ),
+            : vv
+        )
       };
     }
     if (
@@ -47,8 +47,8 @@ function processNewPropertyGroup(g: any): any {
       return {
         value: {
           ...v,
-          height: v.altitude,
-        },
+          height: v.altitude
+        }
       };
     }
     return { value: v };
@@ -57,11 +57,11 @@ function processNewPropertyGroup(g: any): any {
 
 export function processLayers(
   newLayers?: NLSLayer[],
-  layerStyles?: LayerStyle[],
+  layerStyles?: LayerStyle[]
 ): Layer[] | undefined {
   const getLayerStyleValue = (id?: string) => {
     const layerStyleValue: Partial<LayerAppearanceTypes> = layerStyles?.find(
-      (a) => a.id === id,
+      (a) => a.id === id
     )?.value;
     if (typeof layerStyleValue === "object") {
       try {
@@ -84,13 +84,13 @@ export function processLayers(
           (feature: SketchFeature) => {
             return {
               ...feature,
-              geometry: feature.geometry[0],
+              geometry: feature.geometry[0]
             };
-          },
-        ),
+          }
+        )
       },
       isSketchLayer: true,
-      idProperty: "id",
+      idProperty: "id"
     };
 
     return {
@@ -103,13 +103,13 @@ export function processLayers(
       defines: nlsLayer.config?.defines,
       events: nlsLayer.config?.events,
       data: nlsLayer.isSketch ? sketchLayerData : nlsLayer.config?.data,
-      ...layerStyle,
+      ...layerStyle
     };
   });
 }
 
 function convertInfobox(
-  infobox: NLSInfobox | null | undefined,
+  infobox: NLSInfobox | null | undefined
 ): Layer["infobox"] {
   if (!infobox) return;
   return {
@@ -119,7 +119,7 @@ function convertInfobox(
       // name: blockNames?.[b.extensionId] ?? "Infobox Block",
       pluginId: b.pluginId,
       extensionId: b.extensionId,
-      property: processNewProperty(b.property),
-    })),
+      property: processNewProperty(b.property)
+    }))
   };
 }
diff --git a/web/src/beta/features/Published/convert.ts b/web/src/beta/features/Published/convert.ts
index b28294270..5b8fa7799 100644
--- a/web/src/beta/features/Published/convert.ts
+++ b/web/src/beta/features/Published/convert.ts
@@ -5,7 +5,7 @@ export const processProperty = (p: any): any => {
   return mapValues(p, (g) =>
     Array.isArray(g)
       ? g.map((h) => processPropertyGroup(h))
-      : processPropertyGroup(g),
+      : processPropertyGroup(g)
   );
 };
 
@@ -21,7 +21,7 @@ const processPropertyGroup = (g: any): any => {
         "lng" in v &&
         "altitude" in v
           ? { ...vv, height: vv.altitude }
-          : vv,
+          : vv
       );
     }
     if (
@@ -33,7 +33,7 @@ const processPropertyGroup = (g: any): any => {
     ) {
       return {
         ...v,
-        height: v.altitude,
+        height: v.altitude
       };
     }
     return v;
diff --git a/web/src/beta/features/Published/hooks.ts b/web/src/beta/features/Published/hooks.ts
index 91002c8c0..00d00e3a2 100644
--- a/web/src/beta/features/Published/hooks.ts
+++ b/web/src/beta/features/Published/hooks.ts
@@ -3,12 +3,12 @@ import {
   WidgetAlignSystem,
   WidgetAlignment,
   BuiltinWidgets,
-  isBuiltinWidget,
+  isBuiltinWidget
 } from "@reearth/beta/features/Visualizer/Crust";
 import { Story } from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
 import {
   convertData,
-  sceneProperty2ViewerPropertyMapping,
+  sceneProperty2ViewerPropertyMapping
 } from "@reearth/beta/utils/convert-object";
 import type { Camera } from "@reearth/beta/utils/value";
 import { ViewerProperty, MapRef } from "@reearth/core";
@@ -25,7 +25,7 @@ import type {
   WidgetZone,
   WidgetSection,
   WidgetArea,
-  WidgetAreaPadding,
+  WidgetAreaPadding
 } from "./types";
 
 export default (alias?: string) => {
@@ -34,10 +34,10 @@ export default (alias?: string) => {
   const [ready, setReady] = useState(false);
   const [error, setError] = useState(false);
   const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(
-    undefined,
+    undefined
   );
   const [initialCamera, setInitialCamera] = useState<Camera | undefined>(
-    undefined,
+    undefined
   );
 
   const { viewerProperty, widgetThemeOptions, cesiumIonAccessToken } =
@@ -54,11 +54,11 @@ export default (alias?: string) => {
         viewerProperty: sceneProperty
           ? (convertData(
               sceneProperty,
-              sceneProperty2ViewerPropertyMapping,
+              sceneProperty2ViewerPropertyMapping
             ) as ViewerProperty)
           : undefined,
         widgetThemeOptions,
-        cesiumIonAccessToken,
+        cesiumIonAccessToken
       };
     }, [data?.property]);
 
@@ -72,7 +72,7 @@ export default (alias?: string) => {
         a[b] = processProperty(data?.plugins?.[b]?.property);
         return a;
       }, {}),
-    [data?.plugins],
+    [data?.plugins]
   );
 
   const widgets = useMemo<
@@ -107,8 +107,8 @@ export default (alias?: string) => {
           extended: !!w.extended,
           pluginId: w.pluginId,
           extensionId: w.extensionId,
-          property: processProperty(w.property),
-        }),
+          property: processProperty(w.property)
+        })
       );
 
     const widgets = data?.widgets
@@ -119,15 +119,15 @@ export default (alias?: string) => {
           extended: !!w.extended,
           pluginId: w.pluginId,
           extensionId: w.extensionId,
-          property: processProperty(w.property),
-        }),
+          property: processProperty(w.property)
+        })
       );
 
     const widgetZone = (zone?: WidgetZone | null) => {
       return {
         left: widgetSection(zone?.left),
         center: widgetSection(zone?.center),
-        right: widgetSection(zone?.right),
+        right: widgetSection(zone?.right)
       };
     };
 
@@ -135,7 +135,7 @@ export default (alias?: string) => {
       return {
         top: widgetArea(section?.top),
         middle: widgetArea(section?.middle),
-        bottom: widgetArea(section?.bottom),
+        bottom: widgetArea(section?.bottom)
       };
     };
 
@@ -153,12 +153,12 @@ export default (alias?: string) => {
           top: padding?.top ?? 6,
           bottom: padding?.bottom ?? 6,
           left: padding?.left ?? 6,
-          right: padding?.right ?? 6,
+          right: padding?.right ?? 6
         },
         gap: area?.gap ?? 6,
         widgets: areaWidgets || [],
         background: area?.background as string | undefined,
-        centered: area?.centered,
+        centered: area?.centered
       };
     };
 
@@ -170,7 +170,7 @@ export default (alias?: string) => {
         }
         return res;
       },
-      [],
+      []
     );
 
     return {
@@ -178,10 +178,10 @@ export default (alias?: string) => {
       alignSystem: data.widgetAlignSystem
         ? {
             outer: widgetZone(data.widgetAlignSystem.outer),
-            inner: widgetZone(data.widgetAlignSystem.inner),
+            inner: widgetZone(data.widgetAlignSystem.inner)
           }
         : undefined,
-      ownBuiltinWidgets,
+      ownBuiltinWidgets
     };
   }, [data]);
 
@@ -190,7 +190,7 @@ export default (alias?: string) => {
       alias ||
       new URLSearchParams(window.location.search).get("alias") ||
       undefined,
-    [alias],
+    [alias]
   );
 
   const story = useMemo(() => {
@@ -213,11 +213,11 @@ export default (alias?: string) => {
                   id: b.id,
                   pluginId: b.pluginId,
                   extensionId: b.extensionId,
-                  property: processNewProperty(b.property),
+                  property: processNewProperty(b.property)
                 };
-              }),
+              })
             };
-          }),
+          })
         };
     return processedStory;
   }, [data?.story]);
@@ -232,15 +232,15 @@ export default (alias?: string) => {
         visible: !!l.isVisible,
         infobox: l.nlsInfobox,
         isSketch: l.isSketch,
-        sketch: l.sketchInfo,
+        sketch: l.sketchInfo
       })) ?? [],
-      data?.layerStyles,
+      data?.layerStyles
     );
     if (!story) return processedLayers;
 
     return processedLayers?.map((layer) => ({
       ...layer,
-      visible: true,
+      visible: true
     }));
   }, [data?.nlsLayers, data?.layerStyles, story]);
 
@@ -266,7 +266,7 @@ export default (alias?: string) => {
         ) {
           d.property = {
             ...d.property,
-            tiles: [{ id: "___default_tile___" }],
+            tiles: [{ id: "___default_tile___" }]
           };
         }
         setData(d);
@@ -284,9 +284,9 @@ export default (alias?: string) => {
       cesiumIonAccessToken:
         typeof cesiumIonAccessToken === "string" && cesiumIonAccessToken
           ? cesiumIonAccessToken
-          : config()?.cesiumIonAccessToken,
+          : config()?.cesiumIonAccessToken
     }),
-    [cesiumIonAccessToken],
+    [cesiumIonAccessToken]
   );
 
   // GA
@@ -305,7 +305,7 @@ export default (alias?: string) => {
     visualizerRef,
     currentCamera,
     initialCamera,
-    setCurrentCamera,
+    setCurrentCamera
   };
 };
 
diff --git a/web/src/beta/features/Published/index.tsx b/web/src/beta/features/Published/index.tsx
index f50d3b037..e716c0608 100644
--- a/web/src/beta/features/Published/index.tsx
+++ b/web/src/beta/features/Published/index.tsx
@@ -23,7 +23,7 @@ export default function Published({ alias }: Props) {
     visualizerRef,
     currentCamera,
     initialCamera,
-    setCurrentCamera,
+    setCurrentCamera
   } = useHooks(alias);
 
   return error ? (
diff --git a/web/src/beta/features/Published/types.ts b/web/src/beta/features/Published/types.ts
index 9649edf2f..66a28f45c 100644
--- a/web/src/beta/features/Published/types.ts
+++ b/web/src/beta/features/Published/types.ts
@@ -3,7 +3,7 @@ import type {
   DataRange,
   DataType,
   Geometry,
-  TimeInterval,
+  TimeInterval
 } from "@reearth/core";
 import { SketchFeature } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
diff --git a/web/src/beta/features/RootPage/PageWrapper/index.tsx b/web/src/beta/features/RootPage/PageWrapper/index.tsx
index 1f345b3f4..6b07adc69 100644
--- a/web/src/beta/features/RootPage/PageWrapper/index.tsx
+++ b/web/src/beta/features/RootPage/PageWrapper/index.tsx
@@ -3,7 +3,7 @@ import Icon from "@reearth/beta/components/Icon";
 import { styled, useTheme } from "@reearth/services/theme";
 import {
   brandBlue,
-  brandRed,
+  brandRed
 } from "@reearth/services/theme/reearthTheme/common/colors";
 import React from "react";
 import { RingLoader } from "react-spinners";
diff --git a/web/src/beta/features/RootPage/hooks.ts b/web/src/beta/features/RootPage/hooks.ts
index 61e0a7921..da9a9c768 100644
--- a/web/src/beta/features/RootPage/hooks.ts
+++ b/web/src/beta/features/RootPage/hooks.ts
@@ -4,7 +4,7 @@ import { useT } from "@reearth/services/i18n";
 import {
   useWorkspace,
   useNotification,
-  useUserId,
+  useUserId
 } from "@reearth/services/state";
 import axios from "axios";
 import { useCallback, useEffect } from "react";
@@ -20,7 +20,7 @@ export default () => {
     isLoading,
     error: authError,
     login,
-    logout,
+    logout
   } = useAuth();
   const [error, isErrorChecked] = useCleanUrl();
   const [currentWorkspace, setCurrentWorkspace] = useWorkspace();
@@ -38,28 +38,28 @@ export default () => {
   const verifySignup = useCallback(
     async (token: string) => {
       const res = await axios.post(
-        (window.REEARTH_CONFIG?.api || "/api") + "/signup/verify/" + token,
+        (window.REEARTH_CONFIG?.api || "/api") + "/signup/verify/" + token
       );
 
       if (res.status === 200) {
         setNotification({
           type: "success",
           text: t(
-            "Your account has been successfully verified! Feel free to login now.",
-          ),
+            "Your account has been successfully verified! Feel free to login now."
+          )
         });
         navigate("/login");
       } else {
         setNotification({
           type: "error",
           text: t(
-            "Could not verify your signup. Please start the process over.",
-          ),
+            "Could not verify your signup. Please start the process over."
+          )
         });
         navigate("/signup");
       }
     },
-    [t, navigate, setNotification],
+    [t, navigate, setNotification]
   );
 
   useEffect(() => {
@@ -94,7 +94,7 @@ export default () => {
     verifySignup,
     navigate,
     setCurrentUserId,
-    setCurrentWorkspace,
+    setCurrentWorkspace
   ]);
 
   useEffect(() => {
@@ -110,7 +110,7 @@ export default () => {
     if (error) {
       setNotification({
         type: "error",
-        text: error,
+        text: error
       });
     }
   }, [error, setNotification]);
@@ -118,6 +118,6 @@ export default () => {
   return {
     error,
     isLoading,
-    isAuthenticated,
+    isAuthenticated
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
index 44c012471..4d7fb7ee3 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Image/index.tsx
@@ -14,7 +14,7 @@ const ImageBlock: FC<BlockProps<InfoboxBlock>> = ({
 }) => {
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
-    [block?.property?.default?.src],
+    [block?.property?.default?.src]
   );
 
   const evaluatedSrc = useExpressionEval(src);
@@ -39,5 +39,5 @@ const Image = styled("img")(() => ({
   width: "100%",
   height: "100%",
   objectFit: "contain",
-  objectPosition: "center",
+  objectPosition: "center"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx
index 612d07f98..52227d6f1 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Markdown/index.tsx
@@ -1,21 +1,24 @@
-import { FC, useMemo } from "react";
-import ReactMarkdown from "react-markdown";
-import gfm from "remark-gfm";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { CommonBlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import { ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
 
 import { InfoboxBlock } from "../../../types";
 import useExpressionEval from "../useExpressionEval";
 
 const plugins = [gfm];
 
-const MarkdownBlock: FC<CommonBlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }) => {
+const MarkdownBlock: FC<CommonBlockProps<InfoboxBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
-    [block?.property?.default?.src],
+    [block?.property?.default?.src]
   );
 
   const evaluatedSrc = useExpressionEval(src);
@@ -27,7 +30,8 @@ const MarkdownBlock: FC<CommonBlockProps<InfoboxBlock>> = ({ block, isSelected,
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
+      {...props}
+    >
       {evaluatedSrc !== undefined ? (
         <Wrapper>
           <ReactMarkdown remarkPlugins={plugins} linkTarget="_blank">
@@ -46,6 +50,6 @@ const Wrapper = styled("div")(() => ({
   position: "relative",
   ["*"]: {
     maxWidth: "100%",
-    height: "auto",
-  },
+    height: "auto"
+  }
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx
index 0c796ed18..1c334fadc 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx
@@ -22,22 +22,22 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -64,7 +64,7 @@ const Content: FC<Props> = ({ block, isEditable, ...props }) => {
   }, [
     displayTypeField,
     propertyListField,
-    selectedComputedFeature?.properties,
+    selectedComputedFeature?.properties
   ]);
 
   return (
@@ -100,7 +100,7 @@ const Content: FC<Props> = ({ block, isEditable, ...props }) => {
 export default memo(Content);
 
 const Wrapper = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 
 function filterChildObjectsToEnd(inputObject?: any): any[] {
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts
index 2029ff0b0..449d5d40c 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/useEvaluateProperties.ts
@@ -36,21 +36,21 @@ export default (properties: PropertyListItem[] | undefined) => {
         interval: selectedFeature.interval,
         properties: selectedFeature.properties,
         metaData: selectedFeature.metaData,
-        range: selectedFeature.range,
+        range: selectedFeature.range
       };
       const es = currentValue?.map((v) => {
         const ev = evalExpression(
           {
-            expression: v.value,
+            expression: v.value
           },
           undefined,
-          simpleFeature,
+          simpleFeature
         );
 
         return ev
           ? {
               ...v,
-              value: ev,
+              value: ev
             }
           : undefined;
       });
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/DefaultFields/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/DefaultFields/index.tsx
index 22f6d45f4..a4438a916 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/DefaultFields/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/DefaultFields/index.tsx
@@ -1,7 +1,7 @@
-import JsonView from "react18-json-view";
 
 import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import JsonView from "react18-json-view";
 
 import ListItem from "../ListItem";
 
@@ -30,7 +30,7 @@ const DefaultFields: React.FC<Props> = ({ properties, isEditable }) => {
                   wordWrap: "break-word",
                   minWidth: 0,
                   lineHeight: "1.5em",
-                  fontSize: theme.fonts.sizes.body,
+                  fontSize: theme.fonts.sizes.body
                 }}
               />
             </ObjectWrapper>
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx
index bc6e86456..f0992b8f0 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/Item.tsx
@@ -17,7 +17,7 @@ const EditorItem: FC<Props> = ({
   handleClassName,
   onKeyBlur,
   onValueBlur,
-  onItemRemove,
+  onItemRemove
 }) => {
   const [currentKeyValue, setCurrentKeyValue] = useState<string>(item.key);
   const [currentValue, setCurrentValue] = useState<string>(item.value);
@@ -30,7 +30,7 @@ const EditorItem: FC<Props> = ({
     (newValue: string) => {
       onKeyBlur(newValue);
     },
-    [onKeyBlur],
+    [onKeyBlur]
   );
 
   const handleValueChange = useCallback((newValue: string) => {
@@ -41,7 +41,7 @@ const EditorItem: FC<Props> = ({
     (newValue: string) => {
       onValueBlur(newValue);
     },
-    [onValueBlur],
+    [onValueBlur]
   );
 
   return (
@@ -81,13 +81,13 @@ const Field = styled("div")(({ theme }) => ({
   color: theme.content.main,
   gap: theme.spacing.micro,
   padding: theme.spacing.micro,
-  borderRadius: theme.radius.smallest,
+  borderRadius: theme.radius.smallest
 }));
 
 const HandleIcon = styled(Icon)(({ theme }) => ({
   color: theme.content.weak,
   cursor: "move",
   "&:hover": {
-    color: theme.content.main,
-  },
+    color: theme.content.main
+  }
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts
index b67b3edf5..bc6263f92 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/hooks.ts
@@ -13,7 +13,7 @@ export default ({
   propertyId,
   propertyListField,
   displayTypeField,
-  onPropertyUpdate,
+  onPropertyUpdate
 }: {
   propertyId?: string;
   displayTypeField?: DisplayTypeField;
@@ -24,19 +24,19 @@ export default ({
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
 }) => {
   const [currentPropertyList, setCurrentPropertyList] = useState<ListItem[]>(
-    propertyListField?.value ?? [],
+    propertyListField?.value ?? []
   );
   const [isDragging, setIsDragging] = useState(false);
 
   const displayOptions = displayTypeField?.choices?.map(
     ({ key, title }: { key: string; title: string }) => ({
       value: key,
-      label: title,
-    }),
+      label: title
+    })
   );
 
   useEffect(() => {
@@ -55,7 +55,7 @@ export default ({
         await onPropertyUpdate?.(propertyId, "default", fieldId, itemId, vt, v);
       };
     },
-    [propertyId, onPropertyUpdate],
+    [propertyId, onPropertyUpdate]
   );
 
   const handlePropertyValueRemove = useCallback(
@@ -64,17 +64,17 @@ export default ({
         const newValue = propertyListField.value?.filter((_, i) => i !== idx);
         await handlePropertyValueUpdate(
           "propertyList",
-          propertyListField.type,
+          propertyListField.type
         )(newValue);
       }
     },
-    [propertyListField, handlePropertyValueUpdate],
+    [propertyListField, handlePropertyValueUpdate]
   );
 
   const handlePropertyListUpdate = useCallback(
     (newList: ListItem[]) =>
       handlePropertyValueUpdate("propertyList", "array")(newList),
-    [handlePropertyValueUpdate],
+    [handlePropertyValueUpdate]
   );
 
   const handleKeyBlur = useCallback(
@@ -84,7 +84,7 @@ export default ({
       setCurrentPropertyList(newList);
       handlePropertyListUpdate(newList);
     },
-    [currentPropertyList, handlePropertyListUpdate],
+    [currentPropertyList, handlePropertyListUpdate]
   );
 
   const handleValueBlur = useCallback(
@@ -94,13 +94,13 @@ export default ({
       setCurrentPropertyList(newList);
       handlePropertyListUpdate(newList);
     },
-    [currentPropertyList, handlePropertyListUpdate],
+    [currentPropertyList, handlePropertyListUpdate]
   );
 
   const handleDisplayTypeUpdate = useCallback(
     (value?: string | string[]) =>
       handlePropertyValueUpdate("displayType", "string")(value),
-    [handlePropertyValueUpdate],
+    [handlePropertyValueUpdate]
   );
 
   const handleItemAdd = useCallback(() => {
@@ -110,8 +110,8 @@ export default ({
       {
         id: generateUniqueId(),
         key: `Field ${(currentPropertyList ?? []).length + 1 || 1}`,
-        value: `Value ${(currentPropertyList ?? []).length + 1 || 1}`,
-      },
+        value: `Value ${(currentPropertyList ?? []).length + 1 || 1}`
+      }
     ];
     handlePropertyValueUpdate("propertyList", propertyListField.type)(newList);
   }, [currentPropertyList, propertyListField, handlePropertyValueUpdate]);
@@ -127,10 +127,10 @@ export default ({
         key: string;
         value: string;
       },
-      targetIndex: number,
+      targetIndex: number
     ) => {
       const itemIndex = currentPropertyList.findIndex(
-        (li) => li.id === item.id,
+        (li) => li.id === item.id
       );
       if (itemIndex === -1) return;
 
@@ -144,17 +144,17 @@ export default ({
         "propertyList",
         undefined,
         "array",
-        newList,
+        newList
       );
     },
-    [currentPropertyList, onPropertyUpdate, propertyId],
+    [currentPropertyList, onPropertyUpdate, propertyId]
   );
 
   const handleMoveEnd = useCallback(
     (itemId?: string, newIndex?: number) => {
       if (itemId !== undefined && newIndex !== undefined) {
         const itemToMove = currentPropertyList?.find(
-          (item) => item.id === itemId,
+          (item) => item.id === itemId
         );
         if (itemToMove) {
           handleItemDrop(itemToMove, newIndex);
@@ -162,7 +162,7 @@ export default ({
       }
       setIsDragging(false);
     },
-    [currentPropertyList, handleItemDrop],
+    [currentPropertyList, handleItemDrop]
   );
 
   return {
@@ -175,7 +175,7 @@ export default ({
     handleItemAdd,
     handlePropertyValueRemove,
     handleMoveStart,
-    handleMoveEnd,
+    handleMoveEnd
   };
 };
 
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx
index 08f0bc39b..03b31a006 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListEditor/index.tsx
@@ -1,7 +1,7 @@
 import {
   Button,
   DragAndDropList,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { SelectField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
@@ -37,22 +37,22 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -63,7 +63,7 @@ const ListEditor: FC<Props> = ({
   propertyId,
   displayTypeField,
   propertyListField,
-  onPropertyUpdate,
+  onPropertyUpdate
 }) => {
   const t = useT();
 
@@ -76,12 +76,12 @@ const ListEditor: FC<Props> = ({
     handleItemAdd,
     handleMoveStart,
     handleMoveEnd,
-    handlePropertyValueRemove,
+    handlePropertyValueRemove
   } = useHooks({
     propertyId,
     propertyListField,
     displayTypeField,
-    onPropertyUpdate,
+    onPropertyUpdate
   });
 
   const DraggableCurrentPropertyList = useMemo(
@@ -97,14 +97,14 @@ const ListEditor: FC<Props> = ({
             onValueBlur={handleValueBlur(idx)}
             onItemRemove={() => handlePropertyValueRemove(idx)}
           />
-        ),
+        )
       })),
     [
       currentPropertyList,
       handleKeyBlur,
       handleValueBlur,
-      handlePropertyValueRemove,
-    ],
+      handlePropertyValueRemove
+    ]
   );
 
   return (
@@ -149,7 +149,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   background: theme.bg[1],
   gap: theme.spacing.small,
-  padding: theme.spacing.normal,
+  padding: theme.spacing.normal
 }));
 
 const FieldWrapper = styled("div")(({ theme }) => ({
@@ -158,5 +158,5 @@ const FieldWrapper = styled("div")(({ theme }) => ({
   justifyContent: "space-between",
   gap: theme.spacing.smallest,
   alignItems: "center",
-  boxsizing: "border-box",
+  boxsizing: "border-box"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx
index a0ceb3d5b..004cabda7 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/ListItem.tsx
@@ -5,7 +5,7 @@ import { FC } from "react";
 const ListItem: FC<{ index?: number; keyValue?: string; value?: string }> = ({
   index,
   keyValue,
-  value,
+  value
 }) => {
   const theme = useTheme();
   return (
@@ -35,12 +35,12 @@ const PropertyWrapper = styled("div")<{ isEven?: boolean }>(
     padding: `${theme.spacing.small}px ${theme.spacing.large}px`,
     boxSizing: "border-box",
     wordBreak: "break-word",
-    width: "100%",
-  }),
+    width: "100%"
+  })
 );
 
 const TextWrapper = styled("div")(() => ({
-  flex: 1,
+  flex: 1
 }));
 
 function isEven(number: number) {
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx
index e7e9fac68..b3ea46241 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Text/index.tsx
@@ -36,5 +36,5 @@ const Text = styled("div")(({ theme }) => ({
   fontSize: theme.fonts.sizes.body,
   fontWeight: theme.fonts.weight.regular,
   minWidth: 0,
-  wordWrap: "break-word",
+  wordWrap: "break-word"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx
index e1fe4a6a6..a7a4587b3 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/Video/index.tsx
@@ -1,21 +1,24 @@
-import { FC, useCallback, useMemo, useState } from "react";
-import Player from "react-player";
-import type ReactPlayer from "react-player";
-
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { CommonBlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import { ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useMemo, useState } from "react";
+import type ReactPlayer from "react-player";
+import Player from "react-player";
 
 import { InfoboxBlock } from "../../../types";
 import useExpressionEval from "../useExpressionEval";
 
-const VideoBlock: FC<CommonBlockProps<InfoboxBlock>> = ({ block, isSelected, ...props }) => {
+const VideoBlock: FC<CommonBlockProps<InfoboxBlock>> = ({
+  block,
+  isSelected,
+  ...props
+}) => {
   const [aspectRatio, setAspectRatio] = useState(56.25);
 
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
-    [block?.property?.default?.src],
+    [block?.property?.default?.src]
   );
 
   const evaluatedSrc = useExpressionEval(src);
@@ -34,7 +37,8 @@ const VideoBlock: FC<CommonBlockProps<InfoboxBlock>> = ({ block, isSelected, ...
       isSelected={isSelected}
       propertyId={block?.propertyId}
       property={block?.property}
-      {...props}>
+      {...props}
+    >
       {evaluatedSrc !== undefined ? (
         <Wrapper aspectRatio={aspectRatio}>
           <StyledPlayer
@@ -58,11 +62,11 @@ export default VideoBlock;
 const Wrapper = styled("div")<{ aspectRatio: number }>(({ aspectRatio }) => ({
   position: "relative",
   paddingTop: `${aspectRatio}%`,
-  width: "100%",
+  width: "100%"
 }));
 
 const StyledPlayer = styled(Player)({
   position: "absolute",
   top: 0,
-  left: 0,
+  left: 0
 });
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
index d7b5bbe92..75f5ce429 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/index.ts
@@ -6,7 +6,7 @@ import {
   TEXT_BUILTIN_INFOBOX_BLOCK_ID,
   PROPERTY_BUILTIN_INFOBOX_BLOCK_ID,
   VIDEO_BUILTIN_INFOBOX_BLOCK_ID,
-  MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID,
+  MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID
 } from "../../constants";
 
 import ImageBlock from "./Image";
@@ -32,13 +32,13 @@ const reearthBuiltin: BuiltinInfoboxBlocks<Component> = {
   [TEXT_BUILTIN_INFOBOX_BLOCK_ID]: TextBlock,
   [PROPERTY_BUILTIN_INFOBOX_BLOCK_ID]: PropertyListBlock,
   [VIDEO_BUILTIN_INFOBOX_BLOCK_ID]: VideoBlock,
-  [MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID]: MarkdownBlock,
+  [MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID]: MarkdownBlock
 };
 
 const builtin = merge({}, reearthBuiltin);
 
 export const isBuiltinInfoboxBlock = (
-  id: string,
+  id: string
 ): id is keyof BuiltinInfoboxBlocks => {
   return !!builtin[id as keyof BuiltinInfoboxBlocks];
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
index 1e8512708..946cffdb2 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/useExpressionEval.ts
@@ -49,11 +49,11 @@ export default (value: unknown | undefined) => {
         interval: selectedFeature.interval,
         properties: selectedFeature.properties,
         metaData: selectedFeature.metaData,
-        range: selectedFeature.range,
+        range: selectedFeature.range
       };
       const es = evalExpression(
         {
-          expression: currentValue,
+          expression: currentValue
         },
         undefined,
         simpleFeature
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx
index 649154f19..bac7d2753 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx
@@ -1,7 +1,7 @@
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type {
   CommonBlockProps,
-  BlockProps,
+  BlockProps
 } from "@reearth/beta/features/Visualizer/shared/types";
 import type { Layer } from "@reearth/core";
 import { useCallback, type ComponentType, type ReactNode, memo } from "react";
@@ -30,7 +30,7 @@ const InfoboxBlockComponent = ({
     : undefined;
   const handleRemove = useCallback(
     () => props.block?.id && onRemove?.(props.block.id),
-    [props.block?.id, onRemove],
+    [props.block?.id, onRemove]
   );
 
   return Builtin ? (
@@ -55,7 +55,7 @@ const InfoboxBlockComponent = ({
       {renderBlock?.({
         block: props.block,
         layer: props.layer,
-        onClick: props.onClick,
+        onClick: props.onClick
       })}
     </BlockWrapper>
   ) : null;
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts b/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
index 84276ba69..d5738ffe7 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/constants.ts
@@ -11,12 +11,13 @@ export const TEXT_BUILTIN_INFOBOX_BLOCK_ID = "reearth/textInfoboxBetaBlock";
 export const PROPERTY_BUILTIN_INFOBOX_BLOCK_ID =
   "reearth/propertyInfoboxBetaBlock";
 export const VIDEO_BUILTIN_INFOBOX_BLOCK_ID = "reearth/videoInfoboxBetaBlock";
-export const MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID = "reearth/markdownInfoboxBetaBlock";
+export const MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID =
+  "reearth/markdownInfoboxBetaBlock";
 
 export const AVAILABLE_INFOBOX_BLOCK_IDS = [
   IMAGE_BUILTIN_INFOBOX_BLOCK_ID,
   TEXT_BUILTIN_INFOBOX_BLOCK_ID,
   PROPERTY_BUILTIN_INFOBOX_BLOCK_ID,
   VIDEO_BUILTIN_INFOBOX_BLOCK_ID,
-  MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID,
+  MARKDOWN_BUILTIN_INFOBOX_BLOCK_ID
 ];
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts b/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
index c0d91e447..d2879f525 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/hooks.ts
@@ -7,14 +7,14 @@ export default ({
   infobox,
   isEditable,
   onBlockCreate,
-  onBlockMove,
+  onBlockMove
 }: {
   infobox?: Infobox;
   isEditable?: boolean;
   onBlockCreate?: (
     pluginId: string,
     extensionId: string,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   onBlockMove?: (id: string, targetIndex: number, blockId?: string) => void;
 }) => {
@@ -34,22 +34,22 @@ export default ({
           ? true
           : !!infobox.property.default.enabled.value
         : false,
-    [infobox],
+    [infobox]
   );
 
   const paddingField = useMemo(
     () => infobox?.property?.default?.padding,
-    [infobox?.property?.default?.padding],
+    [infobox?.property?.default?.padding]
   );
 
   const gapField = useMemo(
     () => infobox?.property?.default?.gap,
-    [infobox?.property?.default?.gap],
+    [infobox?.property?.default?.gap]
   );
 
   const positionField = useMemo(
     () => infobox?.property?.default?.position,
-    [infobox?.property?.default?.position],
+    [infobox?.property?.default?.position]
   );
 
   const handleBlockOpen = useCallback(
@@ -60,24 +60,24 @@ export default ({
         setOpenBlocksIndex(index);
       }
     },
-    [openBlocksIndex],
+    [openBlocksIndex]
   );
 
   const handleSelectionDisable = useCallback(
     (disabled?: boolean) => setDisableSelection(!!disabled),
-    [],
+    []
   );
 
   const handleBlockCreate = useCallback(
     (index: number) =>
       async (
         extensionId?: string | undefined,
-        pluginId?: string | undefined,
+        pluginId?: string | undefined
       ) => {
         if (!extensionId || !pluginId) return;
         await onBlockCreate?.(pluginId, extensionId, index);
       },
-    [onBlockCreate],
+    [onBlockCreate]
   );
 
   const handleBlockSelect = useCallback(
@@ -86,7 +86,7 @@ export default ({
         return;
       setSelectedBlockId(blockId);
     },
-    [selectedBlockId, isEditable, disableSelection],
+    [selectedBlockId, isEditable, disableSelection]
   );
 
   const handleBlockDoubleClick = useCallback(
@@ -94,21 +94,21 @@ export default ({
       if (disableSelection) return;
       setSelectedBlockId(blockId);
     },
-    [disableSelection],
+    [disableSelection]
   );
 
   const editModeContext: EditModeContext = useMemo(
     () => ({
       disableSelection,
-      onSelectionDisable: handleSelectionDisable,
+      onSelectionDisable: handleSelectionDisable
     }),
-    [disableSelection, handleSelectionDisable],
+    [disableSelection, handleSelectionDisable]
   );
 
   useEffect(() => {
     if (infobox) {
       setInfoboxBlocks(
-        infobox.blocks && infobox.blocks.length > 0 ? infobox.blocks : [],
+        infobox.blocks && infobox.blocks.length > 0 ? infobox.blocks : []
       );
     } else {
       setInfoboxBlocks([]);
@@ -140,7 +140,7 @@ export default ({
       }
       setIsDragging(false);
     },
-    [onBlockMove],
+    [onBlockMove]
   );
 
   return {
@@ -160,6 +160,6 @@ export default ({
     handleBlockCreate,
     handleBlockSelect,
     handleBlockDoubleClick,
-    handleMoveEnd,
+    handleMoveEnd
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx b/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx
index 6889505a5..0c2962e8c 100644
--- a/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Infobox/index.tsx
@@ -12,7 +12,7 @@ import {
   GAP_DEFAULT_VALUE,
   INFOBOX_WIDTH,
   PADDING_DEFAULT_VALUE,
-  POSITION_DEFAULT_VALUE,
+  POSITION_DEFAULT_VALUE
 } from "./constants";
 import useHooks from "./hooks";
 import type { Infobox, InfoboxBlockProps } from "./types";
@@ -34,12 +34,12 @@ export type Props = {
   onBlockCreate?: (
     pluginId: string,
     extensionId: string,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   onBlockMove?: (
     id: string,
     targetIndex: number,
-    blockId?: string,
+    blockId?: string
   ) => Promise<void>;
   onBlockDelete?: (id?: string) => Promise<void>;
   onPropertyUpdate?: (
@@ -48,22 +48,22 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -78,7 +78,7 @@ const Infobox: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemMove,
-  onPropertyItemDelete,
+  onPropertyItemDelete
 }) => {
   const {
     wrapperRef,
@@ -95,12 +95,12 @@ const Infobox: FC<Props> = ({
     handleBlockCreate,
     handleBlockSelect,
     handleBlockDoubleClick,
-    handleMoveEnd,
+    handleMoveEnd
   } = useHooks({
     infobox,
     isEditable,
     onBlockCreate,
-    onBlockMove,
+    onBlockMove
   });
 
   const DraggableInfoboxBlock = useMemo(
@@ -139,7 +139,7 @@ const Infobox: FC<Props> = ({
               />
             )}
           </Fragment>
-        ),
+        )
       })),
     [
       infoboxBlocks,
@@ -158,8 +158,8 @@ const Infobox: FC<Props> = ({
       gapField?.value,
       handleBlockCreate,
       handleBlockDoubleClick,
-      handleBlockOpen,
-    ],
+      handleBlockOpen
+    ]
   );
 
   return showInfobox ? (
@@ -215,9 +215,9 @@ const Wrapper = styled("div")<{
   paddingBottom: padding?.bottom ?? `${PADDING_DEFAULT_VALUE}px`,
   paddingLeft: padding?.left ?? `${PADDING_DEFAULT_VALUE}px`,
   paddingRight: padding?.right ?? `${PADDING_DEFAULT_VALUE}px`,
-  [position ?? POSITION_DEFAULT_VALUE]: "13px",
+  [position ?? POSITION_DEFAULT_VALUE]: "13px"
 }));
 
 const ItemWrapper = styled("div")(() => ({
-  background: "#ffffff",
+  background: "#ffffff"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx
index b5d369332..340870af7 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/ModalContainer/index.tsx
@@ -4,7 +4,7 @@ import {
   ForwardRefRenderFunction,
   useRef,
   useImperativeHandle,
-  useCallback,
+  useCallback
 } from "react";
 
 export type PluginModalInfo = {
@@ -58,7 +58,7 @@ const Wrapper = styled("div")<{ visible: boolean }>(({ visible, theme }) => ({
     ? theme.zIndexes.visualizer.pluginModal
     : theme.zIndexes.hidden,
   transition: "opacity 0.25s",
-  opacity: visible ? "1" : "0",
+  opacity: visible ? "1" : "0"
 }));
 
 const Background = styled("div")<{ visible: boolean; background?: string }>(
@@ -73,8 +73,8 @@ const Background = styled("div")<{ visible: boolean; background?: string }>(
     visibility: visible ? "visible" : "hidden",
     zIndex: visible
       ? theme.zIndexes.visualizer.pluginModal
-      : theme.zIndexes.hidden,
-  }),
+      : theme.zIndexes.hidden
+  })
 );
 
 export default forwardRef(ModalContainer);
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx
index a71c250ba..29be476b1 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/PopupContainer/index.tsx
@@ -6,7 +6,7 @@ import {
   useRef,
   useImperativeHandle,
   useEffect,
-  RefObject,
+  RefObject
 } from "react";
 
 import type { PopupPosition } from "../../pluginAPI/types";
@@ -45,14 +45,14 @@ const PopupContainer: ForwardRefRenderFunction<
         if (!shownPluginPopupInfo?.ref?.current || !innerRef.current) return;
         computePosition(shownPluginPopupInfo?.ref?.current, innerRef.current, {
           placement: shownPluginPopupInfo.position ?? "bottom-start",
-          middleware: [offset(shownPluginPopupInfo.offset ?? 0)],
+          middleware: [offset(shownPluginPopupInfo.offset ?? 0)]
         }).then(({ x, y }) => {
           if (innerRef.current) {
             innerRef.current.style.left = `${x}px`;
             innerRef.current.style.top = `${y}px`;
           }
         });
-      },
+      }
     );
   }, [shownPluginPopupInfo]);
 
@@ -66,7 +66,7 @@ const Wrapper = styled("div")<{ visible: boolean }>(({ visible, theme }) => ({
     ? theme.zIndexes.visualizer.pluginPopup
     : theme.zIndexes.hidden,
   transition: "opacity 0.25s",
-  opacity: visible ? "1" : "0",
+  opacity: visible ? "1" : "0"
 }));
 
 export default forwardRef(PopupContainer);
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts
index 495c550f1..ef012105d 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/index.ts
@@ -1,7 +1,7 @@
 import { type Layer } from "@reearth/core";
 import {
   useDevPluginExtensionRenderKey,
-  useDevPluginExtensions,
+  useDevPluginExtensions
 } from "@reearth/services/state";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
@@ -31,7 +31,7 @@ export default function ({
   shownPluginPopupInfo,
   onPluginPopupShow,
   onRender,
-  onResize,
+  onResize
 }: {
   mapRef?: RefObject<MapRef>;
   pluginId?: string;
@@ -55,12 +55,12 @@ export default function ({
           height?: string | number;
           extended?: boolean;
         }
-      | undefined,
+      | undefined
   ) => void;
   onResize?: (
     width: string | number | undefined,
     height: string | number | undefined,
-    extended: boolean | undefined,
+    extended: boolean | undefined
   ) => void;
 }) {
   const externalRef = useRef<HTMLIFrameElement>(null);
@@ -77,7 +77,7 @@ export default function ({
         onVisibilityChange?.(instanceId, v);
       }
     },
-    [onVisibilityChange, widget?.id, block?.id],
+    [onVisibilityChange, widget?.id, block?.id]
   );
 
   const {
@@ -86,7 +86,7 @@ export default function ({
     onPreInit,
     onDispose,
     onModalClose,
-    onPopupClose,
+    onPopupClose
   } =
     usePluginAPI({
       extensionId,
@@ -104,7 +104,7 @@ export default function ({
       setUIVisibility: handleSetVisibility,
       onRender,
       onResize,
-      mapRef,
+      mapRef
     }) ?? [];
 
   useEffect(() => {
@@ -122,7 +122,7 @@ export default function ({
     extensionId,
     widget?.id,
     block?.id,
-    onModalClose,
+    onModalClose
   ]);
 
   useEffect(() => {
@@ -140,14 +140,14 @@ export default function ({
     extensionId,
     widget?.id,
     block?.id,
-    onPopupClose,
+    onPopupClose
   ]);
 
   const onError = useCallback(
     (err: any) => {
       console.error(`plugin error from ${pluginId}/${extensionId}: `, err);
     },
-    [pluginId, extensionId],
+    [pluginId, extensionId]
   );
 
   const [devPluginExtensions] = useDevPluginExtensions();
@@ -163,13 +163,13 @@ export default function ({
         ? (devPluginExtensionSrc ??
           `${pluginBaseUrl}/${`${pluginId}/${extensionId}`.replace(/\.\./g, "")}.js`)
         : undefined,
-    [devPluginExtensionSrc, pluginBaseUrl, pluginId, extensionId],
+    [devPluginExtensionSrc, pluginBaseUrl, pluginId, extensionId]
   );
   const [devPluginExtensionRenderKey] = useDevPluginExtensionRenderKey();
 
   const renderKey = useMemo(
     () => (devPluginExtensionSrc ? devPluginExtensionRenderKey : undefined),
-    [devPluginExtensionRenderKey, devPluginExtensionSrc],
+    [devPluginExtensionRenderKey, devPluginExtensionSrc]
   );
 
   return {
@@ -184,6 +184,6 @@ export default function ({
     exposed: staticExposed,
     onError,
     onPreInit,
-    onDispose,
+    onDispose
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts
index cdd0cabf4..12c849a50 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts
@@ -5,7 +5,7 @@ import type { MutableRefObject, RefObject } from "react";
 
 import type {
   InfoboxBlock as Block,
-  InfoboxBlock,
+  InfoboxBlock
 } from "../../../Infobox/types";
 import { StoryBlock } from "../../../StoryPanel/types";
 import type { MapRef } from "../../../types";
@@ -24,7 +24,7 @@ import type {
   SketchEventType,
   TimelineEventType,
   UIEventType,
-  ViewerEventType,
+  ViewerEventType
 } from "../../pluginAPI/types";
 import { defaultIsMarshalable } from "../../PluginFrame";
 import type { API as IFrameAPI } from "../../PluginFrame";
@@ -48,7 +48,7 @@ export function usePluginAPI({
   onPluginPopupShow,
   setUIVisibility,
   onRender,
-  onResize,
+  onResize
 }: {
   pluginId: string | undefined;
   extensionId: string | undefined;
@@ -71,12 +71,12 @@ export function usePluginAPI({
           height?: string | number;
           extended?: boolean;
         }
-      | undefined,
+      | undefined
   ) => void;
   onResize?: (
     width: string | number | undefined,
     height: string | number | undefined,
-    extended: boolean | undefined,
+    extended: boolean | undefined
   ) => void;
 }): {
   staticExposed: ((api: IFrameAPI) => GlobalThis) | undefined;
@@ -132,39 +132,39 @@ export function usePluginAPI({
       "mouseEnter",
       "mouseLeave",
       "wheel",
-      "resize",
+      "resize"
     ]);
 
     initAndMergeEvents(ctx.selectionModeEvents, selectionModeEventsRef, [
       "marqueeStart",
       "marqueeMove",
-      "marqueeEnd",
+      "marqueeEnd"
     ]);
 
     initAndMergeEvents(ctx.cameraEvents, cameraEventsRef, ["move"]);
 
     initAndMergeEvents(ctx.timelineEvents, timelineEventsRef, [
       "tick",
-      "commit",
+      "commit"
     ]);
 
     initAndMergeEvents(ctx.layersEvents, layersEventsRef, [
       "select",
       "edit",
       "visible",
-      "load",
+      "load"
     ]);
 
     initAndMergeEvents(ctx.sketchEvents, sketchEventsRef, [
       "create",
-      "toolChange",
+      "toolChange"
     ]);
 
     const instanceId = widget?.id ?? block?.id;
     if (instanceId) {
       ctx?.pluginInstances.addPluginMessageSender(
         instanceId,
-        pluginMessageSender,
+        pluginMessageSender
       );
       ctx.pluginInstances.runTimesCache.increment(instanceId);
     }
@@ -184,7 +184,7 @@ export function usePluginAPI({
     timelineEventsRef,
     layersEventsRef,
     sketchEventsRef,
-    pluginMessageSender,
+    pluginMessageSender
   ]);
 
   const onDispose = useCallback(() => {
@@ -230,7 +230,7 @@ export function usePluginAPI({
     cameraEventsRef,
     timelineEventsRef,
     layersEventsRef,
-    sketchEventsRef,
+    sketchEventsRef
   ]);
 
   const isMarshalable = useCallback(
@@ -241,7 +241,7 @@ export function usePluginAPI({
         !!mapRef?.current?.layers?.isComputedLayer(target)
       );
     },
-    [mapRef],
+    [mapRef]
   );
 
   const staticExposed = useMemo(():
@@ -254,7 +254,7 @@ export function usePluginAPI({
           id: pluginId,
           extensionType,
           extensionId,
-          property: pluginProperty,
+          property: pluginProperty
         },
         viewerEventsOn: (type, e, { once } = {}) => {
           if (once) {
@@ -270,7 +270,7 @@ export function usePluginAPI({
           const rawBlock = getBlock() as InfoboxBlock | StoryBlock;
           const block = {
             ...rawBlock,
-            property: rawBlock.propertyForPluginAPI,
+            property: rawBlock.propertyForPluginAPI
           };
           block.propertyForPluginAPI = undefined;
           block.propertyItemsForPluginBlock = undefined;
@@ -285,7 +285,7 @@ export function usePluginAPI({
           onRender?.(
             typeof extended !== "undefined" || options
               ? { extended, ...options }
-              : undefined,
+              : undefined
           );
           setUIVisibility(true);
         },
@@ -312,7 +312,7 @@ export function usePluginAPI({
           onPluginModalShow?.({
             id: widget?.id ?? block?.id,
             background: options?.background,
-            clickBgToClose: options?.clickBgToClose,
+            clickBgToClose: options?.clickBgToClose
           });
         },
         closeModal: () => {
@@ -323,7 +323,7 @@ export function usePluginAPI({
           onPluginModalShow?.({
             id: widget?.id ?? block?.id,
             background: options.background,
-            clickBgToClose: options.clickBgToClose,
+            clickBgToClose: options.clickBgToClose
           });
         },
         postMessageModal: modal.postMessage,
@@ -348,16 +348,16 @@ export function usePluginAPI({
                 onPluginPopupShow?.({
                   id: widget?.id ?? block?.id,
                   ref: externalRef,
-                  ...opt,
+                  ...opt
                 });
                 rendered = true;
               }
-            },
+            }
           });
           onPluginPopupShow?.({
             id: widget?.id ?? block?.id,
             ref: externalRef,
-            ...opt,
+            ...opt
           });
         },
         closePopup: () => {
@@ -371,7 +371,7 @@ export function usePluginAPI({
           onPluginPopupShow?.({
             id: widget?.id ?? block?.id,
             ...opt,
-            ref: externalRef,
+            ref: externalRef
           });
         },
         postMessagePopup: popup.postMessage,
@@ -413,7 +413,7 @@ export function usePluginAPI({
         overrideViewerProperty: ctx.overrideViewerProperty,
         pluginPostMessage: ctx.pluginInstances.postMessage,
         clientStorage: ctx.clientStorage,
-        timelineManagerRef: ctx.timelineManagerRef,
+        timelineManagerRef: ctx.timelineManagerRef
       });
     };
   }, [
@@ -437,7 +437,7 @@ export function usePluginAPI({
     onPluginPopupShow,
     setUIVisibility,
     onRender,
-    onResize,
+    onResize
   ]);
 
   useEffect(() => {
@@ -458,7 +458,7 @@ export function usePluginAPI({
     onPreInit,
     onDispose,
     onModalClose,
-    onPopupClose,
+    onPopupClose
   };
 }
 
@@ -467,7 +467,7 @@ function initAndMergeEvents<T extends Record<string, any[]>>(
   eventsRef: MutableRefObject<
     [Events<T>, EventEmitter<T>, (() => void) | undefined] | undefined
   >,
-  eventKeys: (keyof T)[],
+  eventKeys: (keyof T)[]
 ) {
   const e = events<T>();
   let cancel: (() => void) | undefined;
@@ -475,7 +475,7 @@ function initAndMergeEvents<T extends Record<string, any[]>>(
     const source: Events<T> = {
       on: ctxEvents.on,
       off: ctxEvents.off,
-      once: ctxEvents.once,
+      once: ctxEvents.once
     };
     cancel = mergeEvents<T>(source, e[1], eventKeys);
   }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx
index 17d65a813..bfca517c8 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx
@@ -6,7 +6,7 @@ import Component, { Props } from ".";
 
 export default {
   component: Component,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 export const Default: Story<Props> = (args) => (
@@ -21,7 +21,7 @@ Default.args = {
   pluginId: "plugins",
   extensionId: "plugin",
   pluginBaseUrl: "",
-  visible: true,
+  visible: true
 };
 
 export const Headless: Story<Props> = (args) => (
@@ -32,5 +32,5 @@ export const Headless: Story<Props> = (args) => (
 
 Headless.args = {
   sourceCode: `console.log("hello world");`,
-  visible: true,
+  visible: true
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx
index ef8bfd127..cea7965b1 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.tsx
@@ -12,11 +12,11 @@ import type { PluginPopupInfo } from "./PopupContainer";
 
 export {
   default as PopupContainer,
-  type PluginPopupInfo,
+  type PluginPopupInfo
 } from "./PopupContainer";
 export {
   default as ModalContainer,
-  type PluginModalInfo,
+  type PluginModalInfo
 } from "./ModalContainer";
 
 export type CommonProps = {
@@ -58,12 +58,12 @@ export type Props = {
           height?: string | number;
           extended?: boolean;
         }
-      | undefined,
+      | undefined
   ) => void;
   onResize?: (
     width: string | number | undefined,
     height: string | number | undefined,
-    extended: boolean | undefined,
+    extended: boolean | undefined
   ) => void;
 } & CommonProps;
 
@@ -91,7 +91,7 @@ export default function Plugin({
   onPluginPopupShow,
   onClick,
   onRender,
-  onResize,
+  onResize
 }: Props): JSX.Element | null {
   const {
     skip,
@@ -105,7 +105,7 @@ export default function Plugin({
     onPreInit,
     onDispose,
     exposed,
-    onError,
+    onError
   } = useHooks({
     mapRef,
     pluginId,
@@ -123,7 +123,7 @@ export default function Plugin({
     onPluginModalShow,
     onPluginPopupShow,
     onRender,
-    onResize,
+    onResize
   });
 
   return !skip && (src || sourceCode) ? (
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts
index b62fc41c6..c0bfe5224 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/hooks.ts
@@ -7,14 +7,14 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 export type RefType = {
   postMessage: (message: any) => void;
   resize: (
     width: string | number | undefined,
-    height: string | number | undefined,
+    height: string | number | undefined
   ) => void;
 };
 
@@ -32,7 +32,7 @@ export default function useHook({
   onLoad,
   onMessage,
   onClick,
-  onAutoResized,
+  onAutoResized
 }: {
   width?: number | string;
   height?: number | string;
@@ -73,9 +73,9 @@ export default function useHook({
         const height2 =
           typeof height === "number" ? height + "px" : (height ?? undefined);
         setIFrameSize(width2 || height2 ? [width2, height2] : undefined);
-      },
+      }
     }),
-    [],
+    []
   );
 
   useEffect(() => {
@@ -181,10 +181,10 @@ export default function useHook({
             ? "100%"
             : iFrameSize?.[1]
           : "0px",
-        ...iFrameProps?.style,
-      },
+        ...iFrameProps?.style
+      }
     }),
-    [autoResize, iFrameProps, iFrameSize, visible],
+    [autoResize, iFrameProps, iFrameSize, visible]
   );
 
   useEffect(() => {
@@ -208,13 +208,13 @@ export default function useHook({
   return {
     ref: iFrameRef,
     props,
-    onLoad: onIframeLoad,
+    onLoad: onIframeLoad
   };
 }
 
 function execScripts(
   scripts: Iterable<HTMLScriptElement>,
-  asyncScript: boolean,
+  asyncScript: boolean
 ) {
   const isAsync = (script: HTMLScriptElement) =>
     script.getAttribute("type") === "module" ||
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
index c1e270229..6478c2c45 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
@@ -7,8 +7,8 @@ export default {
   component: Component,
   argTypes: {
     onLoad: { action: "onLoad" },
-    onMessage: { action: "onMessage" },
-  },
+    onMessage: { action: "onMessage" }
+  }
   // parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
@@ -32,8 +32,8 @@ Default.args = {
   iFrameProps: {
     style: {
       width: "400px",
-      height: "300px",
-    },
+      height: "300px"
+    }
   },
   html: `<h1>iframe</h1><script>
   window.addEventListener("message", ev => {
@@ -44,5 +44,5 @@ Default.args = {
     parent.postMessage(ev.data, "*");
   });
   parent.postMessage("loaded", "*");
-</script>`,
+</script>`
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
index 46badb1d0..870cd4619 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
@@ -17,12 +17,12 @@ test("works", async () => {
   expect(screen.getByTestId("iframe")).toBeInTheDocument();
   expect(
     (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
-      .innerHTML,
+      .innerHTML
   ).toBe("");
   await promise;
   expect(
     (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
-      .innerHTML,
+      .innerHTML
   ).toBe("<h1>Hoge</h1>");
 
   // Update html prop
@@ -31,12 +31,12 @@ test("works", async () => {
   expect(screen.getByTestId("iframe")).toBeInTheDocument();
   expect(
     (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
-      .innerHTML,
+      .innerHTML
   ).toBe("");
   await promise2;
   expect(
     (screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body
-      .innerHTML,
+      .innerHTML
   ).toBe("<h1>Foo</h1>");
 });
 
@@ -50,7 +50,7 @@ test.skip("host -> iframe -> host", async () => {
   const [promise2, resolve2] = deferred();
   const onMessage = vi.fn<[any]>(() => resolve2());
   render(
-    <Component ref={ref} html={html} onLoad={resolve} onMessage={onMessage} />,
+    <Component ref={ref} html={html} onLoad={resolve} onMessage={onMessage} />
   );
 
   await promise;
@@ -73,6 +73,6 @@ const deferred = (): [Promise<void>, () => void, () => void] => {
       reject = rj;
     }),
     resolve,
-    reject,
+    reject
   ];
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx
index 751f21ff2..c71c1d0be 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.tsx
@@ -2,7 +2,7 @@ import composeRefs from "@seznam/compose-react-refs";
 import {
   IframeHTMLAttributes,
   ForwardRefRenderFunction,
-  forwardRef,
+  forwardRef
 } from "react";
 import type { RefObject } from "react";
 
@@ -40,14 +40,14 @@ const IFrame: ForwardRefRenderFunction<Ref, Props> = (
     onLoad,
     onMessage,
     onClick,
-    onAutoResized,
+    onAutoResized
   },
-  ref,
+  ref
 ) => {
   const {
     ref: iFrameRef,
     props,
-    onLoad: onIFrameLoad,
+    onLoad: onIFrameLoad
   } = useHook({
     width,
     height,
@@ -59,7 +59,7 @@ const IFrame: ForwardRefRenderFunction<Ref, Props> = (
     onLoad,
     onMessage,
     onClick,
-    onAutoResized,
+    onAutoResized
   });
 
   return html ? (
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
index 9c8f0c349..f6a9e8e90 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
@@ -15,7 +15,7 @@ export default function useHooks({
   visible,
   type,
   enabled,
-  onRender,
+  onRender
 }: {
   ref?: ForwardedRef<Ref>;
   ready?: boolean;
@@ -26,7 +26,7 @@ export default function useHooks({
 }) {
   const handleRender = useCallback(
     () => type && onRender?.(type),
-    [type, onRender],
+    [type, onRender]
   );
 
   const {
@@ -35,26 +35,26 @@ export default function useHooks({
     html,
     options,
     handleLoad,
-    reset,
+    reset
   } = useIFrame({
     ready,
     enabled,
     visible,
-    onRender: handleRender,
+    onRender: handleRender
   });
 
   useImperativeHandle(
     ref,
     (): Ref => ({
       api,
-      reset,
-    }),
+      reset
+    })
   );
 
   return {
     ref: IFrameRef,
     html,
     options,
-    handleLoad,
+    handleLoad
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
index 53f79a415..934a3582a 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
@@ -3,7 +3,7 @@ import {
   ForwardRefRenderFunction,
   IframeHTMLAttributes,
   ReactNode,
-  memo,
+  memo
 } from "react";
 import type { RefObject } from "react";
 import { createPortal } from "react-dom";
@@ -46,15 +46,15 @@ const PluginIFrame: ForwardRefRenderFunction<Ref, Props> = (
     externalRef,
     onRender,
     onClick,
-    onMessage,
+    onMessage
   },
-  ref,
+  ref
 ) => {
   const {
     ref: iFrameRef,
     html,
     options,
-    handleLoad,
+    handleLoad
   } = useHooks({ ready, ref, visible, type, enabled, onRender });
 
   const children = (
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
index 3cd5f6ec3..2d9cb2a1e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
@@ -12,11 +12,11 @@ export type IFrameAPI = {
       width?: number | string;
       height?: number | string;
       onAutoResized?: () => void;
-    },
+    }
   ) => void;
   resize: (
     width: string | number | undefined,
-    height: string | number | undefined,
+    height: string | number | undefined
   ) => void;
   postMessage: (message: any) => void;
 };
@@ -25,7 +25,7 @@ export default function useIFrame({
   ready,
   enabled,
   visible: iframeCanBeVisible,
-  onRender,
+  onRender
 }: {
   ready?: boolean;
   enabled?: boolean;
@@ -45,7 +45,7 @@ export default function useIFrame({
             onAutoResized?: () => void;
           }
         | undefined
-      ),
+      )
     ]
   >(["", undefined]);
   const postMessage = usePostMessage(ref, !ready || !iFrameLoaded);
@@ -57,22 +57,22 @@ export default function useIFrame({
       render: (html, { visible = true, ...options } = {}) => {
         setIFrameState([
           html,
-          { visible: !!iframeCanBeVisible && !!visible, ...options },
+          { visible: !!iframeCanBeVisible && !!visible, ...options }
         ]);
         onRender?.();
       },
       resize: (width, height) => {
         ref.current?.resize(width, height);
       },
-      postMessage,
+      postMessage
     }),
-    [iframeCanBeVisible, onRender, postMessage],
+    [iframeCanBeVisible, onRender, postMessage]
   );
 
   useEffect(() => {
     setIFrameState(([html, options]) => [
       html,
-      { ...options, visible: !!iframeCanBeVisible },
+      { ...options, visible: !!iframeCanBeVisible }
     ]);
   }, [iframeCanBeVisible]);
 
@@ -86,6 +86,6 @@ export default function useIFrame({
     html,
     options,
     handleLoad,
-    reset,
+    reset
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
index a2d72989b..853c48848 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
@@ -9,16 +9,16 @@ test("usePostMessage", () => {
   const iFrame: P = {
     current: {
       postMessage: vi.fn(),
-      resize: () => {},
-    },
+      resize: () => {}
+    }
   };
 
   const { result, rerender } = renderHook(
     ({ iFrame, pending }: { iFrame: P; pending?: boolean }) =>
       usePostMessage(iFrame, pending),
     {
-      initialProps: { iFrame: nullIFrame },
-    },
+      initialProps: { iFrame: nullIFrame }
+    }
   );
 
   result.current({ hoge: true });
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.ts
index 9ade33375..1e9da555a 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.ts
@@ -19,7 +19,7 @@ export function usePostMessage(iFrameRef: RefObject<Ref>, pending?: boolean) {
         console.error("plugin error: failed to post message", err);
       }
     },
-    [iFrameRef],
+    [iFrameRef]
   );
 
   useEffect(() => {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
index 18e13b14b..91175f62f 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
@@ -7,7 +7,7 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { insertToBody } from "./utils";
@@ -16,7 +16,7 @@ export type RefType = {
   postMessage: (message: any) => void;
   resize: (
     width: string | number | undefined,
-    height: string | number | undefined,
+    height: string | number | undefined
   ) => void;
 };
 
@@ -34,7 +34,7 @@ export default function useHook({
   onLoad,
   onMessage,
   onClick,
-  onAutoResized,
+  onAutoResized
 }: {
   width?: number | string;
   height?: number | string;
@@ -76,9 +76,9 @@ export default function useHook({
         const height2 =
           typeof height === "number" ? height + "px" : (height ?? undefined);
         setIFrameSize(width2 || height2 ? [width2, height2] : undefined);
-      },
+      }
     }),
-    [],
+    []
   );
 
   useEffect(() => {
@@ -120,10 +120,10 @@ export default function useHook({
             ? "100%"
             : iFrameSize?.[1]
           : "0px",
-        ...iFrameProps?.style,
-      },
+        ...iFrameProps?.style
+      }
     }),
-    [autoResize, iFrameProps, iFrameSize, visible],
+    [autoResize, iFrameProps, iFrameSize, visible]
   );
 
   useEffect(() => {
@@ -175,6 +175,6 @@ export default function useHook({
     ref: iFrameRef,
     props,
     srcDoc,
-    onLoad: onIframeLoad,
+    onLoad: onIframeLoad
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
index c1e270229..6478c2c45 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
@@ -7,8 +7,8 @@ export default {
   component: Component,
   argTypes: {
     onLoad: { action: "onLoad" },
-    onMessage: { action: "onMessage" },
-  },
+    onMessage: { action: "onMessage" }
+  }
   // parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
@@ -32,8 +32,8 @@ Default.args = {
   iFrameProps: {
     style: {
       width: "400px",
-      height: "300px",
-    },
+      height: "300px"
+    }
   },
   html: `<h1>iframe</h1><script>
   window.addEventListener("message", ev => {
@@ -44,5 +44,5 @@ Default.args = {
     parent.postMessage(ev.data, "*");
   });
   parent.postMessage("loaded", "*");
-</script>`,
+</script>`
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
index afded3f36..96c5e1504 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
@@ -2,7 +2,7 @@ import composeRefs from "@seznam/compose-react-refs";
 import {
   IframeHTMLAttributes,
   ForwardRefRenderFunction,
-  forwardRef,
+  forwardRef
 } from "react";
 import type { RefObject } from "react";
 
@@ -40,15 +40,15 @@ const IFrame: ForwardRefRenderFunction<Ref, Props> = (
     onLoad,
     onMessage,
     onClick,
-    onAutoResized,
+    onAutoResized
   },
-  ref,
+  ref
 ) => {
   const {
     ref: iFrameRef,
     props,
     onLoad: onIFrameLoad,
-    srcDoc,
+    srcDoc
   } = useHook({
     width,
     height,
@@ -60,7 +60,7 @@ const IFrame: ForwardRefRenderFunction<Ref, Props> = (
     onLoad,
     onMessage,
     onClick,
-    onAutoResized,
+    onAutoResized
   });
 
   return html ? (
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
index 4ab84772f..6d08dd4e1 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
@@ -6,21 +6,21 @@ test("insertScriptToBody", () => {
   const script = `<script id="insert-script"></script>`;
   const html1 = `<div></div>`;
   expect(insertToBody(html1, script)).toEqual(
-    `<div></div><script id="insert-script"></script>`,
+    `<div></div><script id="insert-script"></script>`
   );
 
   const html2 = `<html><body></body></html>`;
   expect(insertToBody(html2, script)).toEqual(
-    `<html><body><script id="insert-script"></script></body></html>`,
+    `<html><body><script id="insert-script"></script></body></html>`
   );
 
   const html3 = `<html><BODY></BODY></html>`;
   expect(insertToBody(html3, script)).toEqual(
-    `<html><BODY><script id="insert-script"></script></BODY></html>`,
+    `<html><BODY><script id="insert-script"></script></BODY></html>`
   );
 
   const html4 = `<html><body><script>const a = '<body></body>'</script></body></html>`;
   expect(insertToBody(html4, script)).toEqual(
-    `<html><body><script>const a = '<body></body>'</script><script id="insert-script"></script></body></html>`,
+    `<html><body><script>const a = '<body></body>'</script><script id="insert-script"></script></body></html>`
   );
 });
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts
index 9767e019e..ab4bf0b73 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/hooks.ts
@@ -8,7 +8,7 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { IFrameAPI, Ref as IFrameRef } from "./PluginIFrame";
@@ -74,7 +74,7 @@ export default function useHook({
   onPreInit,
   onError = defaultOnError,
   onDispose,
-  onMessage: rawOnMessage,
+  onMessage: rawOnMessage
 }: Options = {}) {
   const arena = useRef<Arena | undefined>();
   const eventLoop = useRef<number>();
@@ -94,19 +94,19 @@ export default function useHook({
     (e: (msg: any) => void) => {
       messageEvents.add(e);
     },
-    [messageEvents],
+    [messageEvents]
   );
   const offMessage = useCallback(
     (e: (msg: any) => void) => {
       messageEvents.delete(e);
     },
-    [messageEvents],
+    [messageEvents]
   );
   const onceMessage = useCallback(
     (e: (msg: any) => void) => {
       messageOnceEvents.add(e);
     },
-    [messageOnceEvents],
+    [messageOnceEvents]
   );
   const handleMessage = useCallback(
     (msg: any) => {
@@ -119,7 +119,7 @@ export default function useHook({
       rawOnMessage?.(msg);
       messageOnceEvents.clear();
     },
-    [messageEvents, messageOnceEvents, onError, rawOnMessage],
+    [messageEvents, messageOnceEvents, onError, rawOnMessage]
   );
 
   const eventLoopCb = useCallback(() => {
@@ -153,7 +153,7 @@ export default function useHook({
 
       return result;
     },
-    [onError, startEventLoop],
+    [onError, startEventLoop]
   );
 
   useEffect(() => {
@@ -181,7 +181,7 @@ export default function useHook({
           (typeof isMarshalable === "function"
             ? isMarshalable(target)
             : "json"),
-        experimentalContextEx: true,
+        experimentalContextEx: true
       });
 
       const e =
@@ -193,9 +193,9 @@ export default function useHook({
               messages: {
                 on: onMessage,
                 off: offMessage,
-                once: onceMessage,
+                once: onceMessage
               },
-              startEventLoop,
+              startEventLoop
             })
           : exposed;
       if (e) {
@@ -241,15 +241,15 @@ export default function useHook({
     mainIFrameRef,
     messageEvents,
     messageOnceEvents,
-    startEventLoop,
+    startEventLoop
   ]);
 
   useImperativeHandle(
     ref,
     (): Ref => ({
-      arena: () => arena.current,
+      arena: () => arena.current
     }),
-    [],
+    []
   );
 
   return {
@@ -257,6 +257,6 @@ export default function useHook({
     modalIFrameRef,
     popupIFrameRef,
     loaded,
-    handleMessage,
+    handleMessage
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx
index 2a44208f9..ec3187068 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx
@@ -6,7 +6,7 @@ import Component, { Props, Ref } from ".";
 
 export default {
   component: Component,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 export const Default: Story<Props> = (args) => <Component {...args} />;
@@ -20,12 +20,12 @@ Default.args = {
     style: {
       width: "300px",
       height: "300px",
-      backgroundColor: "#fff",
-    },
+      backgroundColor: "#fff"
+    }
   },
   exposed: ({ main: { render, postMessage } }) => ({
     console: {
-      log: action("console.log"),
+      log: action("console.log")
     },
     reearth: {
       on(type: string, value: (message: any) => void) {
@@ -35,14 +35,14 @@ Default.args = {
       },
       ui: {
         show: render,
-        postMessage,
-      },
-    },
+        postMessage
+      }
+    }
   }),
   onMessage: (message: any) => {
     action("onMessage")(message);
     return cb?.(message);
-  },
+  }
 };
 
 export const HiddenIFrame: Story<Props> = (args) => <Component {...args} />;
@@ -54,12 +54,12 @@ HiddenIFrame.args = {
     style: {
       width: "300px",
       height: "300px",
-      backgroundColor: "#fff",
-    },
+      backgroundColor: "#fff"
+    }
   },
   exposed: ({ main: { render, postMessage } }) => ({
     console: {
-      log: action("console.log"),
+      log: action("console.log")
     },
     reearth: {
       on(type: string, value: (message: any) => void) {
@@ -69,14 +69,14 @@ HiddenIFrame.args = {
       },
       ui: {
         show: render,
-        postMessage,
-      },
-    },
+        postMessage
+      }
+    }
   }),
   onMessage: (message: any) => {
     action("onMessage")(message);
     return cb?.(message);
-  },
+  }
 };
 
 export const SourceCode: Story<Props> = (args) => <Component {...args} />;
@@ -85,9 +85,9 @@ SourceCode.args = {
   sourceCode: `console.log("Hello")`,
   exposed: {
     console: {
-      log: action("console.log"),
-    },
-  },
+      log: action("console.log")
+    }
+  }
 };
 
 export const AutoResize: Story<Props> = (args) => {
@@ -99,7 +99,7 @@ export const AutoResize: Story<Props> = (args) => {
         ref.current
           ?.arena()
           ?.evalCode(
-            `"onmessage" in globalThis && globalThis.onmessage(${JSON.stringify(msg)})`,
+            `"onmessage" in globalThis && globalThis.onmessage(${JSON.stringify(msg)})`
           );
       }}
       ref={ref}
@@ -134,5 +134,5 @@ AutoResize.args = {
   `,
   autoResize: "both",
   uiVisible: true,
-  exposed: ({ main: { render, resize } }) => ({ render, resize }),
+  exposed: ({ main: { render, resize } }) => ({ render, resize })
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx
index 2646a1baa..4c9148be0 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.tsx
@@ -2,7 +2,7 @@ import {
   forwardRef,
   ForwardRefRenderFunction,
   IframeHTMLAttributes,
-  ReactNode,
+  ReactNode
 } from "react";
 import type { RefObject } from "react";
 
@@ -60,16 +60,16 @@ const Plugin: ForwardRefRenderFunction<Ref, Props> = (
     onDispose,
     onClick,
     onMessage,
-    onRender,
+    onRender
   },
-  ref,
+  ref
 ) => {
   const {
     mainIFrameRef,
     modalIFrameRef,
     popupIFrameRef,
     loaded,
-    handleMessage,
+    handleMessage
   } = useHook({
     src,
     sourceCode,
@@ -80,7 +80,7 @@ const Plugin: ForwardRefRenderFunction<Ref, Props> = (
     onError,
     onPreInit,
     onDispose,
-    onMessage,
+    onMessage
   });
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx
index 77797471b..1c4c321bb 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx
@@ -6,7 +6,7 @@ const PluginContext = createContext<Context | undefined>(undefined);
 
 export const PluginProvider: FC<PropsWithChildren<{ value: Context }>> = ({
   children,
-  value,
+  value
 }) => <PluginContext.Provider value={value}>{children}</PluginContext.Provider>;
 
 export const usePluginContext = (): Context => {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
index ae59dccea..58a83c508 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
@@ -36,7 +36,7 @@ export default function ({
   onSketchTypeChange,
   onLayerVisibility,
   onLayerLoad,
-  onCameraForceHorizontalRollChange,
+  onCameraForceHorizontalRollChange
 }: Props) {
   const {
     getViewerProperty,
@@ -58,7 +58,7 @@ export default function ({
     viewerEventsOn,
     viewerEventsOff,
     viewerEvents,
-    selectionModeEvents,
+    selectionModeEvents
   } = useViewer({
     viewerProperty,
     overrideViewerProperty,
@@ -70,7 +70,7 @@ export default function ({
     built,
     onLayerSelectWithRectStart,
     onLayerSelectWithRectMove,
-    onLayerSelectWithRectEnd,
+    onLayerSelectWithRectEnd
   });
 
   const {
@@ -95,10 +95,10 @@ export default function ({
     enableForceHorizontalRoll,
     cameraEventsOn,
     cameraEventsOff,
-    cameraEvents,
+    cameraEvents
   } = useCamera({
     mapRef,
-    onCameraForceHorizontalRollChange,
+    onCameraForceHorizontalRollChange
   });
 
   const { getTimeline, timelineEvents } = useTimeline({ timelineManagerRef });
@@ -121,14 +121,14 @@ export default function ({
     sendToBack,
     layersEventsOn,
     layersEventsOff,
-    layersEvents,
+    layersEvents
   } = useLayers({
     mapRef,
     selectedLayer,
     selectedFeature,
     onLayerEdit,
     onLayerVisibility,
-    onLayerLoad,
+    onLayerLoad
   });
 
   const {
@@ -138,25 +138,25 @@ export default function ({
     overrideSketchOptions,
     sketchEventsOn,
     sketchEventsOff,
-    sketchEvents,
+    sketchEvents
   } = useSketch({
     mapRef,
     onSketchPluginFeatureCreate,
-    onSketchTypeChange,
+    onSketchTypeChange
   });
 
   const { pluginInstances, getExtensionList } = useExtension({
     alignSystem,
     floatingWidgets,
     selectedLayer,
-    selectedStory,
+    selectedStory
   });
 
   const { clientStorage } = useData();
 
   const { deprecated, cameraDeprecated, layersDeprecated, sketchDeprecated } =
     useDeprecated({
-      built,
+      built
     });
 
   const value = useMemo<Context>(
@@ -242,7 +242,7 @@ export default function ({
         deprecated,
         cameraDeprecated,
         layersDeprecated,
-        sketchDeprecated,
+        sketchDeprecated
       }),
       overrideViewerProperty,
       pluginInstances,
@@ -253,7 +253,7 @@ export default function ({
       cameraEvents,
       timelineEvents,
       layersEvents,
-      sketchEvents,
+      sketchEvents
     }),
     [
       engineName,
@@ -347,8 +347,8 @@ export default function ({
       cameraEvents,
       timelineEvents,
       layersEvents,
-      sketchEvents,
-    ],
+      sketchEvents
+    ]
   );
 
   // expose plugin API for developers
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts
index a1789d70a..d8dec57ea 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useCamera.ts
@@ -1,7 +1,7 @@
 import {
   CameraPosition as CoreCameraPosition,
   CameraOptions,
-  FlyTo,
+  FlyTo
 } from "@reearth/core";
 import { useCallback, useMemo } from "react";
 
@@ -12,7 +12,7 @@ import {
   CameraMoveOptions,
   CameraPosition,
   LookAtDestination,
-  ScreenSpaceCameraControllerOptions,
+  ScreenSpaceCameraControllerOptions
 } from "../pluginAPI/types";
 import { GeoRect } from "../pluginAPI/types/common";
 import { Props } from "../types";
@@ -20,7 +20,7 @@ import { events, useEmit } from "../utils/events";
 
 export default ({
   mapRef,
-  onCameraForceHorizontalRollChange,
+  onCameraForceHorizontalRollChange
 }: Pick<Props, "mapRef" | "onCameraForceHorizontalRollChange">) => {
   const engineRef = mapRef?.current?.engine;
   const [camera] = useVisualizerCamera();
@@ -33,7 +33,7 @@ export default ({
       height: camera.height,
       heading: camera.heading,
       pitch: camera.pitch,
-      roll: camera.roll,
+      roll: camera.roll
     };
   }, [camera]);
 
@@ -44,35 +44,35 @@ export default ({
 
   const getCameraViewport = useCallback(
     () => engineRef?.getViewport(),
-    [engineRef],
+    [engineRef]
   );
 
   const zoomIn = useCallback(
     (amount: number) => {
       engineRef?.zoomIn(amount);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const zoomOut = useCallback(
     (amount: number) => {
       engineRef?.zoomOut(amount);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const setView = useCallback(
     (camera: CoreCameraPosition) => {
       engineRef?.setView(camera);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const flyTo: FlyTo = useCallback(
     (target, options) => {
       engineRef?.flyTo(target, options);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const flyToBoundingBox = useCallback(
@@ -82,68 +82,68 @@ export default ({
         heading?: number;
         pitch?: number;
         range?: number;
-      },
+      }
     ) => {
       return engineRef?.flyToBBox(
         [bbox.west, bbox.south, bbox.east, bbox.north],
-        options,
+        options
       );
     },
-    [engineRef],
+    [engineRef]
   );
 
   const getGlobeIntersection = useCallback(
     (options: { withTerrain?: boolean; calcViewSize?: boolean }) => {
       return engineRef?.getCameraFovInfo(options);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const enableScreenSpaceCameraController = useCallback(
     (enabled?: boolean) =>
       engineRef?.enableScreenSpaceCameraController(!!enabled),
-    [engineRef],
+    [engineRef]
   );
 
   const overrideScreenSpaceCameraController = useCallback(
     (options?: ScreenSpaceCameraControllerOptions) => {
       return engineRef?.overrideScreenSpaceController(options ?? {});
     },
-    [engineRef],
+    [engineRef]
   );
 
   const lookAt = useCallback(
     (dest: LookAtDestination, options?: CameraOptions) => {
       engineRef?.lookAt(dest, options);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const rotateAround = useCallback(
     (radian: number) => {
       return engineRef?.rotateOnCenter(radian);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const rotateRight = useCallback(
     (radian: number) => {
       engineRef?.rotateRight(radian);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const orbit = useCallback(
     (radian: number) => {
       engineRef?.orbit(radian);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const move = useCallback(
     (
       direction: "forward" | "backward" | "up" | "down" | "left" | "right",
-      amount: number,
+      amount: number
     ) => {
       if (direction === "forward") {
         engineRef?.moveForward(amount);
@@ -159,21 +159,21 @@ export default ({
         engineRef?.moveRight(amount);
       }
     },
-    [engineRef],
+    [engineRef]
   );
 
   const moveOverTerrain = useCallback(
     (offset?: number) => {
       return engineRef?.moveOverTerrain(offset);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const enableForceHorizontalRoll = useCallback(
     (enabled: boolean) => {
       onCameraForceHorizontalRollChange?.(enabled);
     },
-    [onCameraForceHorizontalRollChange],
+    [onCameraForceHorizontalRollChange]
   );
 
   // events
@@ -183,33 +183,33 @@ export default ({
     {
       move: useMemo<[camera: CameraPosition] | undefined>(
         () => (camera ? [camera] : undefined),
-        [camera],
-      ),
+        [camera]
+      )
     },
-    emit,
+    emit
   );
 
   const cameraEventsOn = useCallback(
     <T extends keyof CameraEventType>(
       type: T,
       callback: (...args: CameraEventType[T]) => void,
-      options?: { once?: boolean },
+      options?: { once?: boolean }
     ) => {
       return options?.once
         ? cameraEvents.once(type, callback)
         : cameraEvents.on(type, callback);
     },
-    [cameraEvents],
+    [cameraEvents]
   );
 
   const cameraEventsOff = useCallback(
     <T extends keyof CameraEventType>(
       type: T,
-      callback: (...args: CameraEventType[T]) => void,
+      callback: (...args: CameraEventType[T]) => void
     ) => {
       return cameraEvents.off(type, callback);
     },
-    [cameraEvents],
+    [cameraEvents]
   );
 
   return {
@@ -234,6 +234,6 @@ export default ({
     enableForceHorizontalRoll,
     cameraEventsOn,
     cameraEventsOff,
-    cameraEvents,
+    cameraEvents
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useData.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useData.ts
index cf03c81d7..ca91e0577 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useData.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useData.ts
@@ -4,6 +4,6 @@ export default () => {
   const clientStorage = useClientStorage();
 
   return {
-    clientStorage,
+    clientStorage
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts
index ccae8b100..c7e55b24f 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useDeprecated.ts
@@ -31,7 +31,7 @@ export default ({ built }: Props) => {
       "convertScreenToPositionOffset",
       "isPositionVisible",
       "toWindowPosition",
-      "pickManyFromViewport",
+      "pickManyFromViewport"
     ].forEach((name) => {
       addWarning(scene, name, `reearth.scene.${name}`);
     });
@@ -53,7 +53,7 @@ export default ({ built }: Props) => {
       "setTime",
       "setSpeed",
       "setStepType",
-      "setRangeType",
+      "setRangeType"
     ].forEach((name) => {
       addWarning(clock, name, `reearth.clock.${name}`);
     });
@@ -81,7 +81,7 @@ export default ({ built }: Props) => {
     ["getAsync", "setAsync", "deleteAsync", "keysAsync", "dropStore"].forEach(
       (name) => {
         addWarning(clientStorage, name, `reearth.clientStorage.${name}`);
-      },
+      }
     );
 
     addEventWarning(d, "on");
@@ -108,7 +108,7 @@ export default ({ built }: Props) => {
       "moveRight",
       "flyToGround",
       "overrideScreenSpaceController",
-      "forceHorizontalRoll",
+      "forceHorizontalRoll"
     ].forEach((name) => {
       addWarning(d, name, `reearth.camera.${name}`);
     });
@@ -129,7 +129,7 @@ export default ({ built }: Props) => {
       "overriddenInfobox",
       "defaultInfobox",
       "isLayer",
-      "overriddenProperties",
+      "overriddenProperties"
     ].forEach((name) => {
       addWarning(d, name, `reearth.layers.${name}`);
     });
@@ -147,7 +147,7 @@ export default ({ built }: Props) => {
       "createDataOnly",
       "enableRelativeHeight",
       "allowRightClickToAbort",
-      "allowAutoResetInteractionMode",
+      "allowAutoResetInteractionMode"
     ].forEach((name) => {
       addWarning(d, name, `reearth.sketch.${name}`);
     });
@@ -158,7 +158,7 @@ export default ({ built }: Props) => {
     deprecated,
     cameraDeprecated,
     layersDeprecated,
-    sketchDeprecated,
+    sketchDeprecated
   };
 };
 
@@ -284,7 +284,7 @@ const deprecatedMap = {
   "event layerSelectWithRectMove":
     "marqueeMove event on reearth.viewer.interactionMode.selectionMode",
   "event layerSelectWithRectEnd":
-    "marqueeEnd event on reearth.viewer.interactionMode.selectionMode",
+    "marqueeEnd event on reearth.viewer.interactionMode.selectionMode"
 };
 
 function addProperty(obj: object, name: string, value: unknown) {
@@ -292,7 +292,7 @@ function addProperty(obj: object, name: string, value: unknown) {
     get() {
       return value;
     },
-    enumerable: false,
+    enumerable: false
   });
 }
 
@@ -301,7 +301,7 @@ function addWarning(obj: object, name: string, value: string) {
     get() {
       return warning(value);
     },
-    enumerable: false,
+    enumerable: false
   });
 }
 
@@ -313,11 +313,11 @@ function addEventWarning(obj: object, name: string, isOnce = false) {
           `event ${eventName}`,
           isOnce
             ? "Please use method on with option {once: true} instead of once."
-            : "",
+            : ""
         );
       };
     },
-    enumerable: false,
+    enumerable: false
   });
 }
 
@@ -333,6 +333,6 @@ function warning(name: string, additional?: string) {
       suggestion ? ` ${suggestion}` : ""
     }${additional ? ` ${additional}` : ""}`,
     warningStyle,
-    "",
+    ""
   );
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts
index 4c9ae3c93..0edd1db92 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useExtension.ts
@@ -8,7 +8,7 @@ export default ({
   alignSystem,
   floatingWidgets,
   selectedLayer,
-  selectedStory,
+  selectedStory
 }: Pick<
   Props,
   "alignSystem" | "floatingWidgets" | "selectedLayer" | "selectedStory"
@@ -17,18 +17,18 @@ export default ({
     alignSystem,
     floatingWidgets,
     infoboxBlocks: selectedLayer?.layer?.infobox?.blocks,
-    storyBlocks: selectedStory?.pages.flatMap((p) => p.blocks),
+    storyBlocks: selectedStory?.pages.flatMap((p) => p.blocks)
   });
 
   const getPluginInstances = useGet(pluginInstances);
 
   const getExtensionList = useCallback(
     () => getPluginInstances().meta.current,
-    [getPluginInstances],
+    [getPluginInstances]
   );
 
   return {
     pluginInstances,
-    getExtensionList,
+    getExtensionList
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts
index f25be90e6..e7bdb7eb7 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts
@@ -12,7 +12,7 @@ export default ({
   selectedFeature,
   onLayerEdit,
   onLayerVisibility,
-  onLayerLoad,
+  onLayerLoad
 }: Pick<
   Props,
   | "mapRef"
@@ -31,40 +31,40 @@ export default ({
     (...args: string[]) => {
       layersRef?.hide(...args);
     },
-    [layersRef],
+    [layersRef]
   );
 
   const showLayer = useCallback(
     (...args: string[]) => {
       layersRef?.show(...args);
     },
-    [layersRef],
+    [layersRef]
   );
 
   const addLayer = useCallback(
     (layer: NaiveLayer) => {
       return layersRef?.add(layer)?.id;
     },
-    [layersRef],
+    [layersRef]
   );
 
   const findFeatureById = useCallback(
     (layerId: string, featureId: string) => {
       return engineRef?.findFeatureById(layerId, featureId);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const findFeaturesByIds = useCallback(
     (layerId: string, featureIds: string[]) => {
       return engineRef?.findFeaturesByIds(layerId, featureIds);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const layersInViewport = useCallback(() => {
     return layersRef?.findAll(
-      (layer) => !!engineRef?.inViewport(layer?.property?.default?.location),
+      (layer) => !!engineRef?.inViewport(layer?.property?.default?.location)
     );
   }, [engineRef, layersRef]);
 
@@ -72,21 +72,21 @@ export default ({
     (layerId: string | undefined) => {
       layersRef?.select(layerId);
     },
-    [layersRef],
+    [layersRef]
   );
 
   const selectFeature = useCallback(
     (layerId: string | undefined, featureId: string | undefined) => {
       layersRef?.selectFeature(layerId, featureId);
     },
-    [layersRef],
+    [layersRef]
   );
 
   const selectFeatures = useCallback(
     (layers: { layerId?: string; featureId?: string[] }[]) => {
       layersRef?.selectFeatures(layers);
     },
-    [layersRef],
+    [layersRef]
   );
 
   const getSelectedLayer = useGet(selectedLayer);
@@ -95,30 +95,30 @@ export default ({
   const getFeaturesInScreenRect = useCallback(
     (
       rect: [x: number, y: number, width: number, height: number],
-      condition?: (f: ComputedFeature) => boolean,
+      condition?: (f: ComputedFeature) => boolean
     ) => {
       return engineRef?.pickManyFromViewport(
         [rect[0], rect[1]],
         rect[2],
         rect[3],
-        condition,
+        condition
       );
     },
-    [engineRef],
+    [engineRef]
   );
 
   const bringToFront = useCallback(
     (layerId: string) => {
       return engineRef?.bringToFront(layerId);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const sendToBack = useCallback(
     (layerId: string) => {
       return engineRef?.sendToBack(layerId);
     },
-    [engineRef],
+    [engineRef]
   );
 
   // events
@@ -133,10 +133,10 @@ export default ({
           selectedLayer
             ? [selectedLayer.id, selectedFeature?.id]
             : [undefined, undefined],
-        [selectedLayer, selectedFeature],
-      ),
+        [selectedLayer, selectedFeature]
+      )
     },
-    emit,
+    emit
   );
 
   useEffect(() => {
@@ -161,23 +161,23 @@ export default ({
     <T extends keyof LayersEventType>(
       type: T,
       callback: (...args: LayersEventType[T]) => void,
-      options?: { once?: boolean },
+      options?: { once?: boolean }
     ) => {
       return options?.once
         ? layersEvents.once(type, callback)
         : layersEvents.on(type, callback);
     },
-    [layersEvents],
+    [layersEvents]
   );
 
   const layersEventsOff = useCallback(
     <T extends keyof LayersEventType>(
       type: T,
-      callback: (...args: LayersEventType[T]) => void,
+      callback: (...args: LayersEventType[T]) => void
     ) => {
       return layersEvents.off(type, callback);
     },
-    [layersEvents],
+    [layersEvents]
   );
 
   return {
@@ -198,6 +198,6 @@ export default ({
     sendToBack,
     layersEventsOn,
     layersEventsOff,
-    layersEvents,
+    layersEvents
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
index a7139c35e..fb2664074 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
@@ -8,31 +8,31 @@ import { events } from "../utils/events";
 export default ({
   mapRef,
   onSketchPluginFeatureCreate,
-  onSketchTypeChange,
+  onSketchTypeChange
 }: Pick<
   Props,
   "mapRef" | "onSketchPluginFeatureCreate" | "onSketchTypeChange"
 >) => {
   const getSketchTool = useCallback(
     () => mapRef?.current?.sketch?.getType(),
-    [mapRef],
+    [mapRef]
   );
 
   const setSketchTool = useCallback(
     (type: SketchType | undefined) =>
       mapRef?.current?.sketch?.setType(type, "plugin"),
-    [mapRef],
+    [mapRef]
   );
 
   const getSketchOptions = useCallback(
     () => mapRef?.current?.sketch?.getOptions(),
-    [mapRef],
+    [mapRef]
   );
 
   const overrideSketchOptions = useCallback(
     (options: SketchOptions) =>
       mapRef?.current?.sketch?.overrideOptions(options),
-    [mapRef],
+    [mapRef]
   );
 
   const [sketchEvents, emit] = useMemo(() => events<SketchEventType>(), []);
@@ -64,23 +64,23 @@ export default ({
     <T extends keyof SketchEventType>(
       type: T,
       callback: (...args: SketchEventType[T]) => void,
-      options?: { once?: boolean },
+      options?: { once?: boolean }
     ) => {
       return options?.once
         ? sketchEvents.once(type, callback)
         : sketchEvents.on(type, callback);
     },
-    [sketchEvents],
+    [sketchEvents]
   );
 
   const sketchEventsOff = useCallback(
     <T extends keyof SketchEventType>(
       type: T,
-      callback: (...args: SketchEventType[T]) => void,
+      callback: (...args: SketchEventType[T]) => void
     ) => {
       return sketchEvents.off(type, callback);
     },
-    [sketchEvents],
+    [sketchEvents]
   );
 
   return {
@@ -90,6 +90,6 @@ export default ({
     overrideSketchOptions,
     sketchEventsOn,
     sketchEventsOff,
-    sketchEvents,
+    sketchEvents
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts
index 7c6a0ecd6..0a377c015 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useTimeline.ts
@@ -24,23 +24,23 @@ export default ({ timelineManagerRef }: Pick<Props, "timelineManagerRef">) => {
     <T extends keyof TimelineEventType>(
       type: T,
       callback: (...args: TimelineEventType[T]) => void,
-      options?: { once?: boolean },
+      options?: { once?: boolean }
     ) => {
       return options?.once
         ? timelineEvents.once(type, callback)
         : timelineEvents.on(type, callback);
     },
-    [timelineEvents],
+    [timelineEvents]
   );
 
   const timelineEventsOff = useCallback(
     <T extends keyof TimelineEventType>(
       type: T,
-      callback: (...args: TimelineEventType[T]) => void,
+      callback: (...args: TimelineEventType[T]) => void
     ) => {
       return timelineEvents.off(type, callback);
     },
-    [timelineEvents],
+    [timelineEvents]
   );
 
   // timeline
@@ -70,13 +70,13 @@ export default ({ timelineManagerRef }: Pick<Props, "timelineManagerRef">) => {
       play: () => {
         timelineManagerRef?.current?.commit({
           cmd: "PLAY",
-          committer: { source: "pluginAPI", id: "window" },
+          committer: { source: "pluginAPI", id: "window" }
         });
       },
       pause: () => {
         timelineManagerRef?.current?.commit({
           cmd: "PAUSE",
-          committer: { source: "pluginAPI", id: "window" },
+          committer: { source: "pluginAPI", id: "window" }
         });
       },
       setTime: (time: {
@@ -87,40 +87,40 @@ export default ({ timelineManagerRef }: Pick<Props, "timelineManagerRef">) => {
         timelineManagerRef?.current?.commit({
           cmd: "SET_TIME",
           payload: { ...time },
-          committer: { source: "pluginAPI", id: "window" },
+          committer: { source: "pluginAPI", id: "window" }
         });
       },
       setSpeed: (speed: number) => {
         timelineManagerRef?.current?.commit({
           cmd: "SET_OPTIONS",
           payload: { multiplier: speed },
-          committer: { source: "pluginAPI", id: "window" },
+          committer: { source: "pluginAPI", id: "window" }
         });
       },
       setStepType: (stepType: "rate" | "fixed") => {
         timelineManagerRef?.current?.commit({
           cmd: "SET_OPTIONS",
           payload: { stepType },
-          committer: { source: "pluginAPI", id: "window" },
+          committer: { source: "pluginAPI", id: "window" }
         });
       },
       setRangeType: (rangeType: "unbounded" | "clamped" | "bounced") => {
         timelineManagerRef?.current?.commit({
           cmd: "SET_OPTIONS",
           payload: { rangeType },
-          committer: { source: "pluginAPI", id: "window" },
+          committer: { source: "pluginAPI", id: "window" }
         });
       },
       tick: timelineManagerRef?.current?.tick as
         | (() => Date | undefined)
         | undefined,
       on: timelineEventsOn,
-      off: timelineEventsOff,
+      off: timelineEventsOff
     };
   }, [timelineManagerRef, timelineEventsOn, timelineEventsOff]);
 
   return {
     getTimeline,
-    timelineEvents,
+    timelineEvents
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts
index 56e544dad..23ccdc739 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useViewer.ts
@@ -7,7 +7,7 @@ import {
   SelectionModeEventType,
   ViewerEventType,
   Viewport,
-  ViewportSize,
+  ViewportSize
 } from "../pluginAPI/types";
 import { Props } from "../types";
 import { events, useEmit } from "../utils/events";
@@ -23,7 +23,7 @@ export default ({
   built,
   onLayerSelectWithRectStart,
   onLayerSelectWithRectMove,
-  onLayerSelectWithRectEnd,
+  onLayerSelectWithRectEnd
 }: Pick<
   Props,
   | "viewerProperty"
@@ -46,7 +46,7 @@ export default ({
     (property: any) => {
       return overrideViewerProperty?.("", property);
     },
-    [overrideViewerProperty],
+    [overrideViewerProperty]
   );
 
   const getViewport = useGet(viewport as Viewport);
@@ -55,13 +55,13 @@ export default ({
     (type?: string, encoderOptions?: number) => {
       return engineRef?.captureScreen(type, encoderOptions);
     },
-    [engineRef],
+    [engineRef]
   );
 
   // selection mode events
   const [selectionModeEvents, emitSelectionModeEvent] = useMemo(
     () => events<SelectionModeEventType>(),
-    [],
+    []
   );
 
   useEffect(() => {
@@ -86,23 +86,23 @@ export default ({
     <T extends keyof SelectionModeEventType>(
       type: T,
       callback: (...args: SelectionModeEventType[T]) => void,
-      options?: { once?: boolean },
+      options?: { once?: boolean }
     ) => {
       return options?.once
         ? selectionModeEvents.once(type, callback)
         : selectionModeEvents.on(type, callback);
     },
-    [selectionModeEvents],
+    [selectionModeEvents]
   );
 
   const selectionModeEventsOff = useCallback(
     <T extends keyof SelectionModeEventType>(
       type: T,
-      callback: (...args: SelectionModeEventType[T]) => void,
+      callback: (...args: SelectionModeEventType[T]) => void
     ) => {
       return selectionModeEvents.off(type, callback);
     },
-    [selectionModeEvents],
+    [selectionModeEvents]
   );
 
   const getInteractionMode = useGet(
@@ -112,16 +112,16 @@ export default ({
         override: overrideInteractionMode,
         selectionMode: {
           on: selectionModeEventsOn,
-          off: selectionModeEventsOff,
-        },
+          off: selectionModeEventsOff
+        }
       }),
       [
         interactionMode,
         overrideInteractionMode,
         selectionModeEventsOn,
-        selectionModeEventsOff,
-      ],
-    ),
+        selectionModeEventsOff
+      ]
+    )
   );
 
   const getInEditor = useGet(!!inEditor);
@@ -132,28 +132,28 @@ export default ({
     (x: number, y: number, withTerrain?: boolean) => {
       return engineRef?.getLocationFromScreen(x, y, withTerrain);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const getScreenCoordinateFromPosition = useCallback(
     (position: [x: number, y: number, z: number]) => {
       return engineRef?.toWindowPosition(position);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const getTerrainHeightAsync = useCallback(
     async (lng: number, lat: number) => {
       return await engineRef?.sampleTerrainHeight(lng, lat);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const getGlobeHeight = useCallback(
     (lng: number, lat: number, height?: number) => {
       return engineRef?.computeGlobeHeight(lng, lat, height);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const getGlobeHeightByCamera = useCallback(() => {
@@ -169,11 +169,11 @@ export default ({
         | {
             useGlobeEllipsoid?: boolean | undefined;
           }
-        | undefined,
+        | undefined
     ) => {
       return engineRef?.toXYZ(lng, lat, height, options);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const cartesianToCartographic = useCallback(
@@ -185,31 +185,31 @@ export default ({
         | {
             useGlobeEllipsoid?: boolean | undefined;
           }
-        | undefined,
+        | undefined
     ) => {
       return engineRef?.toLngLatHeight(x, y, z, options);
     },
-    [engineRef],
+    [engineRef]
   );
 
   const transformByOffsetOnScreen = useCallback(
     (
       rawPosition: [x: number, y: number, z: number],
-      screenOffset: [x: number, y: number],
+      screenOffset: [x: number, y: number]
     ) => {
       return engineRef?.convertScreenToPositionOffset(
         rawPosition,
-        screenOffset,
+        screenOffset
       );
     },
-    [engineRef],
+    [engineRef]
   );
 
   const isPositionVisibleOnGlobe = useCallback(
     (position: [x: number, y: number, z: number]) => {
       return !!engineRef?.isPositionVisible(position);
     },
-    [engineRef],
+    [engineRef]
   );
 
   // events
@@ -222,20 +222,20 @@ export default ({
           {
             width: viewport?.width,
             height: viewport?.height,
-            isMobile: viewport?.isMobile,
-          } as ViewportSize,
+            isMobile: viewport?.isMobile
+          } as ViewportSize
         ],
-        [viewport?.width, viewport?.height, viewport?.isMobile],
-      ),
+        [viewport?.width, viewport?.height, viewport?.isMobile]
+      )
     },
-    emit,
+    emit
   );
 
   const onMouseEvent = useCallback(
     (eventType: keyof MouseEventHandles, fn: any) => {
       mapRef?.current?.engine[eventType]?.(fn);
     },
-    [mapRef],
+    [mapRef]
   );
 
   useEffect(() => {
@@ -255,14 +255,14 @@ export default ({
       mouseMove: "onMouseMove",
       mouseEnter: "onMouseEnter",
       mouseLeave: "onMouseLeave",
-      wheel: "onWheel",
+      wheel: "onWheel"
     };
     (Object.keys(mouseEventHandles) as (keyof MouseEvents)[]).forEach(
       (event: keyof MouseEvents) => {
         onMouseEvent(mouseEventHandles[event], (props: MouseEvent) => {
           emit(event, props);
         });
-      },
+      }
     );
   }, [emit, onMouseEvent]);
 
@@ -270,23 +270,23 @@ export default ({
     <T extends keyof ViewerEventType>(
       type: T,
       callback: (...args: ViewerEventType[T]) => void,
-      options?: { once?: boolean },
+      options?: { once?: boolean }
     ) => {
       return options?.once
         ? viewerEvents.once(type, callback)
         : viewerEvents.on(type, callback);
     },
-    [viewerEvents],
+    [viewerEvents]
   );
 
   const viewerEventsOff = useCallback(
     <T extends keyof ViewerEventType>(
       type: T,
-      callback: (...args: ViewerEventType[T]) => void,
+      callback: (...args: ViewerEventType[T]) => void
     ) => {
       return viewerEvents.off(type, callback);
     },
-    [viewerEvents],
+    [viewerEvents]
   );
 
   return {
@@ -309,6 +309,6 @@ export default ({
     viewerEventsOn,
     viewerEventsOff,
     viewerEvents,
-    selectionModeEvents,
+    selectionModeEvents
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/index.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/index.tsx
index cbb364a14..4a6d6843b 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/index.tsx
@@ -10,7 +10,7 @@ export {
   type CommonProps as CommonPluginProps,
   type PluginModalInfo,
   type PluginPopupInfo,
-  type ExternalPluginProps,
+  type ExternalPluginProps
 } from "./Plugin";
 
 export default function Plugins(props: Props) {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts
index 0f10034ec..b8f8adbd4 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/commonReearth.ts
@@ -92,7 +92,7 @@ export function commonReearth({
   deprecated,
   cameraDeprecated,
   layersDeprecated,
-  sketchDeprecated,
+  sketchDeprecated
 }: {
   engineName: GlobalThis["reearth"]["engine"]["name"];
   // viewer
@@ -182,7 +182,7 @@ export function commonReearth({
     engine: {
       get name() {
         return engineName;
-      },
+      }
     },
     viewer: {
       get property() {
@@ -201,7 +201,7 @@ export function commonReearth({
         },
         get isBuilt() {
           return !!getIsBuilt();
-        },
+        }
       },
       capture: captureScreen,
       tools: {
@@ -213,10 +213,10 @@ export function commonReearth({
         cartographicToCartesian,
         cartesianToCartographic,
         transformByOffsetOnScreen,
-        isPositionVisibleOnGlobe,
+        isPositionVisibleOnGlobe
       },
       on: viewerEventsOn,
-      off: viewerEventsOff,
+      off: viewerEventsOff
     },
     camera: merge(cameraDeprecated, {
       get position() {
@@ -248,7 +248,7 @@ export function commonReearth({
       enableForceHorizontalRoll,
       on: cameraEventsOn,
       off: cameraEventsOff,
-      cameraDeprecated,
+      cameraDeprecated
     }),
     get timeline() {
       return getTimeline();
@@ -277,20 +277,12 @@ export function commonReearth({
       },
       get find() {
         return (
-          cb: (
-            layer: LazyLayer,
-            index: number,
-            parents: LazyLayer[],
-          ) => boolean,
+          cb: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean
         ) => getLayers()?.find(cb);
       },
       get findAll() {
         return (
-          cb: (
-            layer: LazyLayer,
-            index: number,
-            parents: LazyLayer[],
-          ) => boolean,
+          cb: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean
         ) => getLayers()?.findAll(cb);
       },
       get findById() {
@@ -336,7 +328,7 @@ export function commonReearth({
         return sendToBack;
       },
       on: layersEventsOn,
-      off: layersEventsOff,
+      off: layersEventsOff
     }),
     sketch: merge(sketchDeprecated, {
       get tool() {
@@ -352,12 +344,12 @@ export function commonReearth({
         return overrideSketchOptions;
       },
       on: sketchEventsOn,
-      off: sketchEventsOff,
+      off: sketchEventsOff
     }),
     extension: {
       get list() {
         return getExtensionList();
-      },
-    },
+      }
+    }
   });
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts
index 527bd5a3f..e4912c622 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/exposedReearth.ts
@@ -48,7 +48,7 @@ export function exposedReearth({
   startEventLoop,
   pluginPostMessage,
   // data
-  clientStorage,
+  clientStorage
 }: {
   commonReearth: CommonReearth;
   plugin?: {
@@ -93,7 +93,7 @@ export function exposedReearth({
   pluginPostMessage: (
     extentionId: string,
     msg: unknown,
-    sender: string,
+    sender: string
   ) => void;
   extensionEventsOn: Reearth["extension"]["on"];
   extensionEventsOff: Reearth["extension"]["off"];
@@ -103,7 +103,7 @@ export function exposedReearth({
   return merge({
     console: {
       error: console.error,
-      log: console.log,
+      log: console.log
     },
     reearth: merge(commonReearth, {
       viewer: merge(commonReearth.viewer, {
@@ -111,7 +111,7 @@ export function exposedReearth({
           return (property: ViewerProperty) => {
             overrideViewerProperty?.(
               plugin ? `${plugin.id}/${plugin.extensionId}` : "",
-              property,
+              property
             );
           };
         },
@@ -121,15 +121,15 @@ export function exposedReearth({
               const result =
                 await commonReearth?.viewer?.tools?.getTerrainHeightAsync?.(
                   lng,
-                  lat,
+                  lat
                 );
               startEventLoop?.();
               return result;
             };
-          },
+          }
         }),
         on: viewerEventsOn,
-        off: viewerEventsOff,
+        off: viewerEventsOff
       }),
       timeline: merge(commonReearth.timeline, {
         get play() {
@@ -143,8 +143,8 @@ export function exposedReearth({
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
                       ? getBlock?.()?.id
-                      : "") ?? "",
-              },
+                      : "") ?? ""
+              }
             });
           };
         },
@@ -159,8 +159,8 @@ export function exposedReearth({
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
                       ? getBlock?.()?.id
-                      : "") ?? "",
-              },
+                      : "") ?? ""
+              }
             });
         },
         get setTime() {
@@ -179,8 +179,8 @@ export function exposedReearth({
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
                       ? getBlock?.()?.id
-                      : "") ?? "",
-              },
+                      : "") ?? ""
+              }
             });
         },
         get setSpeed() {
@@ -195,8 +195,8 @@ export function exposedReearth({
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
                       ? getBlock?.()?.id
-                      : "") ?? "",
-              },
+                      : "") ?? ""
+              }
             });
         },
         get setStepType() {
@@ -211,8 +211,8 @@ export function exposedReearth({
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
                       ? getBlock?.()?.id
-                      : "") ?? "",
-              },
+                      : "") ?? ""
+              }
             });
         },
         get setRangeType() {
@@ -227,10 +227,10 @@ export function exposedReearth({
                     ? getWidget?.()?.id
                     : plugin?.extensionType === "block"
                       ? getBlock?.()?.id
-                      : "") ?? "",
-              },
+                      : "") ?? ""
+              }
             });
-        },
+        }
       }),
       ui: {
         show: render,
@@ -238,7 +238,7 @@ export function exposedReearth({
         resize,
         close: closeUI,
         on: uiEventsOn,
-        off: uiEventsOff,
+        off: uiEventsOff
       },
       modal: {
         show: renderModal,
@@ -246,7 +246,7 @@ export function exposedReearth({
         update: updateModal,
         close: closeModal,
         on: modalEventsOn,
-        off: modalEventsOff,
+        off: modalEventsOff
       },
       popup: {
         show: renderPopup,
@@ -254,7 +254,7 @@ export function exposedReearth({
         update: updatePopup,
         close: closePopup,
         on: popupEventsOn,
-        off: popupEventsOff,
+        off: popupEventsOff
       },
       extension: merge(
         commonReearth.extension,
@@ -264,7 +264,7 @@ export function exposedReearth({
               (plugin?.extensionType === "widget"
                 ? getWidget?.()?.id
                 : ["infoboxBlock", "storyBlock", "block"].includes(
-                      plugin?.extensionType ?? "",
+                      plugin?.extensionType ?? ""
                     )
                   ? getBlock?.()?.id
                   : "") ?? "";
@@ -272,13 +272,13 @@ export function exposedReearth({
               pluginPostMessage(id, msg, sender);
           },
           on: extensionEventsOn,
-          off: extensionEventsOff,
+          off: extensionEventsOff
         },
         plugin?.extensionType === "widget"
           ? {
               get widget() {
                 return getWidget?.();
-              },
+              }
             }
           : {},
         plugin?.extensionType === "infoboxBlock" ||
@@ -287,11 +287,11 @@ export function exposedReearth({
               get block() {
                 return {
                   ...getBlock?.(),
-                  layer: getLayer?.(),
+                  layer: getLayer?.()
                 };
-              },
+              }
             }
-          : {},
+          : {}
       ),
       data: {
         clientStorage: {
@@ -303,7 +303,7 @@ export function exposedReearth({
                   : plugin?.extensionType === "block"
                     ? getBlock?.()?.id
                     : "") ?? "",
-                key,
+                key
               );
               promise.finally(() => {
                 startEventLoop?.();
@@ -324,7 +324,7 @@ export function exposedReearth({
                     ? getBlock?.()?.id
                     : "") ?? "",
                 key,
-                localValue,
+                localValue
               );
               promise.finally(() => {
                 startEventLoop?.();
@@ -340,7 +340,7 @@ export function exposedReearth({
                   : plugin?.extensionType === "block"
                     ? getBlock?.()?.id
                     : "") ?? "",
-                key,
+                key
               );
               promise.finally(() => {
                 startEventLoop?.();
@@ -355,7 +355,7 @@ export function exposedReearth({
                   ? getWidget?.()?.id
                   : plugin?.extensionType === "block"
                     ? getBlock?.()?.id
-                    : "") ?? "",
+                    : "") ?? ""
               );
               promise.finally(() => {
                 startEventLoop?.();
@@ -370,16 +370,16 @@ export function exposedReearth({
                   ? getWidget?.()?.id
                   : plugin?.extensionType === "block"
                     ? getBlock?.()?.id
-                    : "") ?? "",
+                    : "") ?? ""
               );
               promise.finally(() => {
                 startEventLoop?.();
               });
               return promise;
             };
-          },
-        },
-      },
-    }),
+          }
+        }
+      }
+    })
   });
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts
index 0a65fc272..1bc080a4a 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/pluginAPIv1Types.ts
@@ -23,7 +23,7 @@ import type {
   Tag,
   NaiveLayer,
   LayerSimple,
-  ViewerProperty,
+  ViewerProperty
 } from "@reearth/core";
 import {
   SketchAppearance,
@@ -34,7 +34,7 @@ import {
   FlyToDestination,
   LookAtDestination,
   ScreenSpaceCameraControllerOptions,
-  InteractionModeType,
+  InteractionModeType
 } from "@reearth/core";
 
 import { Widget } from "../../Widgets";
@@ -87,28 +87,28 @@ export type Reearth = {
       readonly layersInViewport?: () => LazyLayer[] | undefined;
       readonly overriddenProperties?: Record<string, any>;
       readonly overrideProperty?: (
-        properties: LayerSimple["properties"] | undefined,
+        properties: LayerSimple["properties"] | undefined
       ) => void;
       readonly overridden?: OverriddenLayer[];
       readonly add?: (layer: NaiveLayer) => string | undefined;
       readonly delete?: WrappedRef<LayersRef>["deleteLayer"];
       readonly select?: (
         layerId: string | undefined,
-        reason?: LayerSelectionReason | undefined,
+        reason?: LayerSelectionReason | undefined
       ) => void;
       findFeatureById?: (
         layerId: string,
-        featureId: string,
+        featureId: string
       ) => Feature | undefined;
       findFeaturesByIds?: (
         layerId: string,
-        featureId: string[],
+        featureId: string[]
       ) => Feature[] | undefined;
       bringToFront?: (layerId: string) => void;
       sendToBack?: (layerId: string) => void;
       selectFeature?: (layerId?: string, featureId?: string) => void;
       selectFeatures?: (
-        layers: { layerId?: string; featureId?: string[] }[],
+        layers: { layerId?: string; featureId?: string[] }[]
       ) => void;
       selectionReason?: LayerSelectionReason;
       // For compat
@@ -131,15 +131,15 @@ export type Reearth = {
   readonly sketch: Sketch;
   readonly on: <T extends keyof ReearthEventType>(
     type: T,
-    callback: (...args: ReearthEventType[T]) => void,
+    callback: (...args: ReearthEventType[T]) => void
   ) => void;
   readonly off: <T extends keyof ReearthEventType>(
     type: T,
-    callback: (...args: ReearthEventType[T]) => void,
+    callback: (...args: ReearthEventType[T]) => void
   ) => void;
   readonly once: <T extends keyof ReearthEventType>(
     type: T,
-    callback: (...args: ReearthEventType[T]) => void,
+    callback: (...args: ReearthEventType[T]) => void
   ) => void;
 };
 
@@ -157,51 +157,51 @@ export type Scene = {
   readonly built: boolean;
   readonly captureScreen: (
     type?: string,
-    encoderOptions?: number,
+    encoderOptions?: number
   ) => string | undefined;
   readonly getLocationFromScreen: (
     x: number,
     y: number,
-    withTerrain?: boolean,
+    withTerrain?: boolean
   ) => LatLngHeight | undefined;
   readonly sampleTerrainHeight: (
     lng: number,
-    lat: number,
+    lat: number
   ) => Promise<number | undefined>;
   readonly computeGlobeHeight: (
     lng: number,
     lat: number,
-    height?: number,
+    height?: number
   ) => number | undefined;
   readonly getGlobeHeight: () => void;
   readonly toXYZ: (
     lng: number,
     lat: number,
     height: number,
-    options?: { useGlobeEllipsoid?: boolean },
+    options?: { useGlobeEllipsoid?: boolean }
   ) => [x: number, y: number, z: number] | undefined;
   readonly toLngLatHeight: (
     x: number,
     y: number,
     z: number,
-    options?: { useGlobeEllipsoid?: boolean },
+    options?: { useGlobeEllipsoid?: boolean }
   ) => [lng: number, lat: number, height: number] | undefined;
   readonly convertScreenToPositionOffset: (
     rawPosition: [x: number, y: number, z: number],
-    screenOffset: [x: number, y: number],
+    screenOffset: [x: number, y: number]
   ) => [x: number, y: number, z: number] | undefined;
   readonly isPositionVisible: (
-    position: [x: number, y: number, z: number],
+    position: [x: number, y: number, z: number]
   ) => boolean;
   readonly toWindowPosition: (
-    position: [x: number, y: number, z: number],
+    position: [x: number, y: number, z: number]
   ) => [x: number, y: number] | undefined;
   readonly pickManyFromViewport: (
     windowPosition: [x: number, y: number],
     windowWidth: number,
     windowHeight: number,
     // TODO: Get condition as expression for plugin
-    condition?: (f: ComputedFeature) => boolean,
+    condition?: (f: ComputedFeature) => boolean
   ) => ComputedFeature[] | undefined;
 };
 
@@ -228,7 +228,7 @@ export type Camera = {
   /** Moves the camera position to the specified destination. */
   readonly flyTo: (
     destination: string | FlyToDestination,
-    options?: CameraOptions,
+    options?: CameraOptions
   ) => void;
   readonly flyToBBox: (
     bbox: [number, number, number, number],
@@ -236,16 +236,16 @@ export type Camera = {
       heading?: number;
       pitch?: number;
       range?: number;
-    },
+    }
   ) => void;
   readonly rotateOnCenter: (radian: number) => void;
   readonly overrideScreenSpaceController: (
-    options: ScreenSpaceCameraControllerOptions,
+    options: ScreenSpaceCameraControllerOptions
   ) => void;
   /** Moves the camera position to look at the specified destination. */
   readonly lookAt: (
     destination: LookAtDestination,
-    options?: CameraOptions,
+    options?: CameraOptions
   ) => void;
   /** Rotate the camera around the center of earth. */
   readonly rotateRight: (radian: number) => void;
@@ -264,7 +264,7 @@ export type Camera = {
   readonly flyToGround: (
     destination: FlyToDestination,
     options?: CameraOptions,
-    offset?: number,
+    offset?: number
   ) => void;
   readonly setView: (camera: CameraPosition) => void;
   readonly forceHorizontalRoll: (enable: boolean) => void;
@@ -290,7 +290,7 @@ export type Clock = {
   }) => void;
   readonly setSpeed?: (speed: number) => void;
   readonly setRangeType?: (
-    rangeType: "unbounded" | "clamped" | "bounced",
+    rangeType: "unbounded" | "clamped" | "bounced"
   ) => void;
   readonly setStepType?: (stepType: "rate" | "fixed") => void;
 };
@@ -394,7 +394,7 @@ export type UI = {
       height?: number | string;
       /** Override whether the iframe is extended. This option is only available for widgets on an extendable area on the widget align system. */
       extended?: boolean;
-    },
+    }
   ) => void;
   /**
    * Sends a message to the iframe's window shown by the show method. Sent data will be automatically encoded as JSON and restored in the iframe's window. So any object that cannot be serialized to JSON will be ignored.
@@ -411,7 +411,7 @@ export type UI = {
     /** Height of the iframe of the widget. This field is only available for widgets that are not vertically extended. */
     height: string | number | undefined,
     /** Overrides whether the iframe is extended. This option is only available for widgets on an extendable area on the widget align system. */
-    extended?: boolean | undefined,
+    extended?: boolean | undefined
   ) => void;
   readonly close: () => void;
 };
@@ -423,7 +423,7 @@ export type Modal = {
       width?: number | string;
       height?: number | string;
       background?: string;
-    },
+    }
   ) => void;
   readonly postMessage: (message: any) => void;
   readonly update: (options: {
@@ -464,7 +464,7 @@ export type Popup = {
       height?: number | string;
       position?: PopupPosition;
       offset?: PopupOffset;
-    },
+    }
   ) => void;
   readonly postMessage: (message: any) => void;
   readonly update: (options: {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts
index 1fde6ca3e..e0be0f916 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/camera.ts
@@ -8,7 +8,7 @@ export declare type Camera = {
   readonly viewport: GeoRect | undefined;
   readonly flyTo: (
     destination: LayerId | CameraPosition,
-    options?: CameraMoveOptions & { fov?: number },
+    options?: CameraMoveOptions & { fov?: number }
   ) => void;
   readonly flyToBoundingBox: (
     boundingBox: GeoRect,
@@ -16,13 +16,13 @@ export declare type Camera = {
       heading?: number;
       pitch?: number;
       range?: number;
-    },
+    }
   ) => void;
   readonly zoomIn: (amount: number, options?: CameraMoveOptions) => void;
   readonly zoomOut: (amount: number, options?: CameraMoveOptions) => void;
   readonly lookAt: (
     destination: LookAtDestination,
-    options?: CameraMoveOptions & { fov?: number },
+    options?: CameraMoveOptions & { fov?: number }
   ) => void;
   readonly getGlobeIntersection: (options: {
     withTerrain?: boolean;
@@ -38,11 +38,11 @@ export declare type Camera = {
   readonly orbit: (radian: number) => void;
   readonly enableScreenSpaceCameraController: (enabled?: boolean) => void;
   readonly overrideScreenSpaceCameraController: (
-    options?: ScreenSpaceCameraControllerOptions,
+    options?: ScreenSpaceCameraControllerOptions
   ) => void;
   readonly move: (
     direction: "forward" | "backward" | "up" | "down" | "left" | "right",
-    amount: number,
+    amount: number
   ) => void;
   readonly moveOverTerrain: (offset?: number) => void;
   readonly setView: (view: CameraPosition & { fov?: number }) => void;
@@ -109,10 +109,10 @@ export declare type CameraEvents = {
   readonly on: <T extends keyof CameraEventType>(
     type: T,
     callback: (...args: CameraEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof CameraEventType>(
     type: T,
-    callback: (...args: CameraEventType[T]) => void,
+    callback: (...args: CameraEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/extension.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/extension.ts
index f8b813653..11937052e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/extension.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/extension.ts
@@ -44,11 +44,11 @@ export declare type ExtensionEvents = {
   readonly on: <T extends keyof ExtensionEventType>(
     type: T,
     callback: (...args: ExtensionEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof ExtensionEventType>(
     type: T,
-    callback: (...args: ExtensionEventType[T]) => void,
+    callback: (...args: ExtensionEventType[T]) => void
   ) => void;
 };
 
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts
index 5bc3dd903..ec61ec875 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/layers.ts
@@ -8,7 +8,7 @@ import {
   LayerVisibilityEvent,
   LazyLayer,
   NaiveLayer,
-  OverriddenLayer,
+  OverriddenLayer
 } from "@reearth/core";
 
 export declare type LayerId = string;
@@ -25,14 +25,14 @@ export declare type Layers = {
       | (Partial<Layer> & {
           property?: unknown;
         })
-      | null,
+      | null
   ) => void;
   readonly overridden?: OverriddenLayer[];
   readonly find: (
-    fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean,
+    fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean
   ) => LazyLayer | undefined;
   readonly findAll: (
-    fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean,
+    fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean
   ) => LazyLayer[] | undefined;
   readonly findById: (layerId: string) => LazyLayer | undefined;
   readonly findByIds: (
@@ -40,17 +40,17 @@ export declare type Layers = {
   ) => (LazyLayer | undefined)[] | undefined;
   readonly findFeatureById?: (
     layerId: string,
-    featureId: string,
+    featureId: string
   ) => Feature | undefined;
   readonly findFeaturesByIds?: (
     layerId: string,
-    featureId: string[],
+    featureId: string[]
   ) => Feature[] | undefined;
   readonly layersInViewport?: () => LazyLayer[] | undefined;
   readonly select?: (layerId: string | undefined) => void;
   readonly selectFeature?: (layerId?: string, featureId?: string) => void;
   readonly selectFeatures?: (
-    layers: { layerId?: string; featureId?: string[] }[],
+    layers: { layerId?: string; featureId?: string[] }[]
   ) => void;
   readonly selected?: ComputedLayer;
   readonly selectedFeature?: ComputedFeature;
@@ -60,7 +60,7 @@ export declare type Layers = {
   readonly getFeaturesInScreenRect: (
     rect: [x: number, y: number, width: number, height: number],
     // TODO: Get condition as expression for plugin
-    condition?: (f: ComputedFeature) => boolean,
+    condition?: (f: ComputedFeature) => boolean
   ) => ComputedFeature[] | undefined;
   readonly on: LayersEvents["on"];
   readonly off: LayersEvents["off"];
@@ -77,10 +77,10 @@ export declare type LayersEvents = {
   readonly on: <T extends keyof LayersEventType>(
     type: T,
     callback: (...args: LayersEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof LayersEventType>(
     type: T,
-    callback: (...args: LayersEventType[T]) => void,
+    callback: (...args: LayersEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/modal.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/modal.ts
index cc96bb212..6eceb3615 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/modal.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/modal.ts
@@ -6,7 +6,7 @@ export declare type Modal = {
       height?: number | string;
       background?: string;
       clickBgToClose?: boolean;
-    },
+    }
   ) => void;
   readonly postMessage: (message: unknown) => void;
   readonly update: (options: {
@@ -28,10 +28,10 @@ export declare type ModalEvents = {
   readonly on: <T extends keyof ModalEventType>(
     type: T,
     callback: (...args: ModalEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof ModalEventType>(
     type: T,
-    callback: (...args: ModalEventType[T]) => void,
+    callback: (...args: ModalEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/popup.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/popup.ts
index ee123f465..eb8580a6d 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/popup.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/popup.ts
@@ -28,7 +28,7 @@ export declare type Popup = {
       height?: number | string;
       position?: PopupPosition;
       offset?: PopupOffset;
-    },
+    }
   ) => void;
   readonly postMessage: (message: unknown) => void;
   readonly update: (options: {
@@ -50,10 +50,10 @@ export declare type PopupEvents = {
   readonly on: <T extends keyof PopupEventType>(
     type: T,
     callback: (...args: PopupEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof PopupEventType>(
     type: T,
-    callback: (...args: PopupEventType[T]) => void,
+    callback: (...args: PopupEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/sketch.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/sketch.ts
index b60b3388b..e95145974 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/sketch.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/sketch.ts
@@ -45,10 +45,10 @@ export declare type SketchEvents = {
   readonly on: <T extends keyof SketchEventType>(
     type: T,
     callback: (...args: SketchEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof SketchEventType>(
     type: T,
-    callback: (...args: SketchEventType[T]) => void,
+    callback: (...args: SketchEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts
index 332e2c345..1eaf757b4 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/timeline.ts
@@ -17,7 +17,7 @@ export declare type Timeline = {
   readonly setSpeed?: (speed: number) => void;
   readonly setStepType?: (stepType: "rate" | "fixed") => void;
   readonly setRangeType?: (
-    rangeType: "unbounded" | "clamped" | "bounced",
+    rangeType: "unbounded" | "clamped" | "bounced"
   ) => void;
   readonly on: TimelineEvents["on"];
   readonly off: TimelineEvents["off"];
@@ -43,10 +43,10 @@ export declare type TimelineEvents = {
   readonly on: <T extends keyof TimelineEventType>(
     type: T,
     callback: (...args: TimelineEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof TimelineEventType>(
     type: T,
-    callback: (...args: TimelineEventType[T]) => void,
+    callback: (...args: TimelineEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/ui.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/ui.ts
index ea2972797..10316c6b3 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/ui.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/ui.ts
@@ -6,13 +6,13 @@ export declare type UI = {
       width?: number | string;
       height?: number | string;
       extended?: boolean;
-    },
+    }
   ) => void;
   readonly postMessage: (message: unknown) => void;
   readonly resize: (
     width: string | number | undefined,
     height: string | number | undefined,
-    extended?: boolean | undefined,
+    extended?: boolean | undefined
   ) => void;
   readonly close: () => void;
   readonly on: UIEvents["on"];
@@ -28,10 +28,10 @@ export declare type UIEvents = {
   readonly on: <T extends keyof UIEventType>(
     type: T,
     callback: (...args: UIEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof UIEventType>(
     type: T,
-    callback: (...args: UIEventType[T]) => void,
+    callback: (...args: UIEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts
index 44d57cca1..e8dc65c5e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/pluginAPI/types/viewer.ts
@@ -49,7 +49,7 @@ export declare type Viewer = {
   readonly tools: Tools;
   readonly capture: (
     type?: string,
-    encoderOptions?: number,
+    encoderOptions?: number
   ) => string | undefined;
   readonly on: ViewerEvents["on"];
   readonly off: ViewerEvents["off"];
@@ -85,39 +85,39 @@ export declare type Tools = {
   readonly getLocationFromScreenCoordinate: (
     x: number,
     y: number,
-    withTerrain?: boolean,
+    withTerrain?: boolean
   ) => LatLngHeight | undefined;
   readonly getScreenCoordinateFromPosition: (
-    position: [x: number, y: number, z: number],
+    position: [x: number, y: number, z: number]
   ) => [x: number, y: number] | undefined;
   readonly getTerrainHeightAsync: (
     lng: number,
-    lat: number,
+    lat: number
   ) => Promise<number | undefined>;
   readonly getGlobeHeight: (
     lng: number,
     lat: number,
-    height?: number,
+    height?: number
   ) => number | undefined;
   readonly getGlobeHeightByCamera: () => number | undefined;
   readonly cartographicToCartesian: (
     lng: number,
     lat: number,
     height: number,
-    options?: { useGlobeEllipsoid?: boolean },
+    options?: { useGlobeEllipsoid?: boolean }
   ) => [x: number, y: number, z: number] | undefined;
   readonly cartesianToCartographic: (
     x: number,
     y: number,
     z: number,
-    options?: { useGlobeEllipsoid?: boolean },
+    options?: { useGlobeEllipsoid?: boolean }
   ) => [lng: number, lat: number, height: number] | undefined;
   readonly transformByOffsetOnScreen: (
     rawPosition: [x: number, y: number, z: number],
-    screenOffset: [x: number, y: number],
+    screenOffset: [x: number, y: number]
   ) => [x: number, y: number, z: number] | undefined;
   readonly isPositionVisibleOnGlobe: (
-    position: [x: number, y: number, z: number],
+    position: [x: number, y: number, z: number]
   ) => boolean;
 };
 
@@ -143,11 +143,11 @@ export declare type ViewerEvents = {
   readonly on: <T extends keyof ViewerEventType>(
     type: T,
     callback: (...args: ViewerEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof ViewerEventType>(
     type: T,
-    callback: (...args: ViewerEventType[T]) => void,
+    callback: (...args: ViewerEventType[T]) => void
   ) => void;
 };
 
@@ -161,10 +161,10 @@ export declare type SelectionModeEvents = {
   readonly on: <T extends keyof SelectionModeEventType>(
     type: T,
     callback: (...args: SelectionModeEventType[T]) => void,
-    options?: { once?: boolean },
+    options?: { once?: boolean }
   ) => void;
   readonly off: <T extends keyof SelectionModeEventType>(
     type: T,
-    callback: (...args: SelectionModeEventType[T]) => void,
+    callback: (...args: SelectionModeEventType[T]) => void
   ) => void;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx
index 3fc50910e..cdfb8a81a 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx
@@ -14,21 +14,21 @@ const layers: Layer[] = [
       type: "geojson",
       value: {
         type: "Feature",
-        geometry: { type: "Point", coordinates: [0, 0] },
-      },
+        geometry: { type: "Point", coordinates: [0, 0] }
+      }
     },
     marker: {
-      imageColor: "#fff",
+      imageColor: "#fff"
     },
     properties: {
       default: {
         location: {
           lat: 10,
-          lng: 10,
+          lng: 10
         },
-        height: 10,
-      },
-    },
+        height: 10
+      }
+    }
   },
   {
     id: "b",
@@ -38,21 +38,21 @@ const layers: Layer[] = [
       type: "geojson",
       value: {
         type: "Feature",
-        geometry: { type: "Point", coordinates: [0, 0] },
-      },
+        geometry: { type: "Point", coordinates: [0, 0] }
+      }
     },
     marker: {
-      imageColor: "#fff",
+      imageColor: "#fff"
     },
     properties: {
       default: {
         location: {
           lat: 20,
-          lng: 20,
+          lng: 20
         },
-        height: 20,
-      },
-    },
+        height: 20
+      }
+    }
   },
   {
     id: "c",
@@ -62,22 +62,22 @@ const layers: Layer[] = [
       type: "geojson",
       value: {
         type: "Feature",
-        geometry: { type: "Point", coordinates: [0, 0] },
-      },
+        geometry: { type: "Point", coordinates: [0, 0] }
+      }
     },
     marker: {
-      imageColor: "#fff",
+      imageColor: "#fff"
     },
     properties: {
       default: {
         location: {
           lat: 30,
-          lng: 30,
+          lng: 30
         },
-        height: 30,
-      },
-    },
-  },
+        height: 30
+      }
+    }
+  }
 ];
 
 export function Provider({ children }: { children?: ReactNode }) {
@@ -87,7 +87,7 @@ export function Provider({ children }: { children?: ReactNode }) {
 export const context: Context = {
   reearth: {
     engine: {
-      name: "cesium",
+      name: "cesium"
     },
     version: "1.0.0",
     apiVersion: "2.0.0",
@@ -98,19 +98,19 @@ export const context: Context = {
         width: 1280,
         height: 720,
         isMobile: false,
-        query: {},
+        query: {}
       },
       interactionMode: {
         mode: "default",
         override: act("overrideInteractionMode"),
         selectionMode: {
           on: act("selectionMode.on"),
-          off: act("selectionMode.off"),
-        },
+          off: act("selectionMode.off")
+        }
       },
       env: {
         inEditor: true,
-        isBuilt: false,
+        isBuilt: false
       },
       capture: act("captureScreen"),
       tools: {
@@ -122,10 +122,10 @@ export const context: Context = {
         cartographicToCartesian: act("cartographicToCartesian"),
         cartesianToCartographic: act("cartesianToCartographic"),
         transformByOffsetOnScreen: act("transformByOffsetOnScreen"),
-        isPositionVisibleOnGlobe: act("isPositionVisibleOnGlobe"),
+        isPositionVisibleOnGlobe: act("isPositionVisibleOnGlobe")
       },
       on: act("on"),
-      off: act("off"),
+      off: act("off")
     },
     camera: {
       position: { lat: 0, lng: 0, height: 0, heading: 0, pitch: 0, roll: 0 },
@@ -142,17 +142,17 @@ export const context: Context = {
       orbit: act("orbit"),
       getGlobeIntersection: act("getGlobeIntersection"),
       enableScreenSpaceCameraController: act(
-        "enableScreenSpaceCameraController",
+        "enableScreenSpaceCameraController"
       ),
       overrideScreenSpaceCameraController: act(
-        "overrideScreenSpaceCameraController",
+        "overrideScreenSpaceCameraController"
       ),
       move: act("move"),
       moveOverTerrain: act("moveOverTerrain"),
       setView: act("setView"),
       enableForceHorizontalRoll: act("enableForceHorizontalRoll"),
       on: act("on"),
-      off: act("off"),
+      off: act("off")
     },
     timeline: {
       startTime: new Date("2022-06-01"),
@@ -168,7 +168,7 @@ export const context: Context = {
       setStepType: act("setStepType"),
       setRangeType: act("setRangeType"),
       on: act("on"),
-      off: act("off"),
+      off: act("off")
     },
     sketch: {
       tool: undefined,
@@ -176,7 +176,7 @@ export const context: Context = {
       setTool: act("setTool"),
       overrideOptions: act("overrideOptions"),
       on: act("on"),
-      off: act("off"),
+      off: act("off")
     },
     layers: {
       layers,
@@ -202,17 +202,17 @@ export const context: Context = {
       getLayersInViewport: act("layers.getLayersInViewport"),
       getFeaturesInScreenRect: act("layers.getFeaturesInScreenRect"),
       on: act("layers.on"),
-      off: act("layers.off"),
+      off: act("layers.off")
     },
     extension: {
       get list() {
         return [];
-      },
-    },
+      }
+    }
   },
   pluginInstances: {
     meta: {
-      current: [],
+      current: []
     },
     postMessage: () => {},
     addPluginMessageSender: () => {},
@@ -222,52 +222,52 @@ export const context: Context = {
       increment: () => {},
       decrement: () => {},
       clear: () => {},
-      clearAll: () => {},
-    },
+      clearAll: () => {}
+    }
   },
   clientStorage: {
     getAsync: act("clientStorage.getAsync"),
     setAsync: act("clientStorage.setAsync"),
     deleteAsync: act("clientStorage.deleteAsync"),
     keysAsync: act("clientStorage.keysAsync"),
-    dropStore: act("clientStorage.dropStoreAsync"),
+    dropStore: act("clientStorage.dropStoreAsync")
   },
   overrideViewerProperty: act("overrideViewerProperty"),
   viewerEvents: {
     on: act("viewerEvents.on"),
     off: act("viewerEvents.off"),
-    once: act("viewerEvents.once"),
+    once: act("viewerEvents.once")
   },
   selectionModeEvents: {
     on: act("selectionModeEvents.on"),
     off: act("selectionModeEvents.off"),
-    once: act("selectionModeEvents.once"),
+    once: act("selectionModeEvents.once")
   },
   cameraEvents: {
     on: act("cameraEvents.on"),
     off: act("cameraEvents.off"),
-    once: act("cameraEvents.once"),
+    once: act("cameraEvents.once")
   },
   timelineEvents: {
     on: act("timelineEvents.on"),
     off: act("timelineEvents.off"),
-    once: act("timelineEvents.once"),
+    once: act("timelineEvents.once")
   },
   layersEvents: {
     on: act("layersEvents.on"),
     off: act("layersEvents.off"),
-    once: act("layersEvents.once"),
+    once: act("layersEvents.once")
   },
   sketchEvents: {
     on: act("sketchEvents.on"),
     off: act("sketchEvents.off"),
-    once: act("sketchEvents.once"),
-  },
+    once: act("sketchEvents.once")
+  }
 };
 
 function act<T extends any[], M extends (...args: T) => any>(
   name: string,
-  mock?: M,
+  mock?: M
 ): (...args: T) => ReturnType<M> {
   const a = action(`Common API: ${name}`);
   return (...args) => {
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
index 7d3922f2c..0d891b85d 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
@@ -13,7 +13,7 @@ import type {
   ViewerProperty,
   SketchEventCallback,
   SketchType,
-  TimelineManagerRef,
+  TimelineManagerRef
 } from "@reearth/core";
 import type { PropsWithChildren, RefObject } from "react";
 
@@ -28,7 +28,7 @@ import {
   SelectionModeEventType,
   SketchEventType,
   TimelineEventType,
-  ViewerEventType,
+  ViewerEventType
 } from "./pluginAPI/types";
 import type { ClientStorage } from "./useClientStorage";
 import type { PluginInstances } from "./usePluginInstances";
@@ -54,10 +54,10 @@ export type Props = PropsWithChildren<{
   overrideInteractionMode?: (mode: InteractionModeType) => void;
   onLayerEdit?: (cb: (e: LayerEditEvent) => void) => void;
   onLayerSelectWithRectStart?: (
-    cb: (e: LayerSelectWithRectStart) => void,
+    cb: (e: LayerSelectWithRectStart) => void
   ) => void;
   onLayerSelectWithRectMove?: (
-    cb: (e: LayerSelectWithRectMove) => void,
+    cb: (e: LayerSelectWithRectMove) => void
   ) => void;
   onLayerSelectWithRectEnd?: (cb: (e: LayerSelectWithRectEnd) => void) => void;
   onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts b/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts
index 84c5742dc..e8e56105b 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/useClientStorage.ts
@@ -6,7 +6,7 @@ export type ClientStorage = {
   setAsync: (
     extensionInstanceId: string,
     key: string,
-    value: any,
+    value: any
   ) => Promise<void>;
   deleteAsync: (extensionInstanceId: string, key: string) => Promise<void>;
   keysAsync: (extensionInstanceId: string) => Promise<string[]>;
@@ -24,7 +24,7 @@ export default () => {
     let store = clientStores.current.get(storeName);
     if (!store) {
       store = localforage.createInstance({
-        name: storeName,
+        name: storeName
       });
       clientStores.current.set(storeName, store);
     }
@@ -46,7 +46,7 @@ export default () => {
               })
               .catch((err: any) => {
                 console.log(
-                  `err get client storage value for ${extensionInstanceId} ${key}: ${err}`,
+                  `err get client storage value for ${extensionInstanceId} ${key}: ${err}`
                 );
                 reject();
               });
@@ -66,7 +66,7 @@ export default () => {
               })
               .catch((err: any) => {
                 console.log(
-                  `err set client storage value for ${extensionInstanceId} ${key} ${value}: ${err}`,
+                  `err set client storage value for ${extensionInstanceId} ${key} ${value}: ${err}`
                 );
                 reject();
               });
@@ -86,7 +86,7 @@ export default () => {
               })
               .catch((err: any) => {
                 console.log(
-                  `err delete client storage value for ${extensionInstanceId} ${key}: ${err}`,
+                  `err delete client storage value for ${extensionInstanceId} ${key}: ${err}`
                 );
                 reject();
               });
@@ -106,7 +106,7 @@ export default () => {
               })
               .catch((err: any) => {
                 console.log(
-                  `err get client storage keys for ${extensionInstanceId}: ${err}`,
+                  `err get client storage keys for ${extensionInstanceId}: ${err}`
                 );
                 reject();
               });
@@ -125,7 +125,7 @@ export default () => {
               .then(() => resolve())
               .catch((err: any) => {
                 console.log(
-                  `err drop client storage for ${extensionInstanceId}: ${err}`,
+                  `err drop client storage for ${extensionInstanceId}: ${err}`
                 );
                 reject();
               })
@@ -134,7 +134,7 @@ export default () => {
               });
           }
         });
-      },
+      }
     };
   }, [getStore]);
 
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts b/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts
index cd30637c5..305fdb07c 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts
@@ -6,7 +6,7 @@ import type { WidgetAlignSystem } from "../Widgets";
 import type {
   InternalWidget,
   WidgetSection,
-  WidgetZone,
+  WidgetZone
 } from "../Widgets/WidgetAlignSystem";
 
 import type { PluginExtensionInstance } from "./pluginAPI/types";
@@ -23,7 +23,7 @@ export type PluginInstances = {
   postMessage: (id: string, msg: any, sender: string) => void;
   addPluginMessageSender: (
     id: string,
-    msgSender: (msg: string) => void,
+    msgSender: (msg: string) => void
   ) => void;
   removePluginMessageSender: (id: string) => void;
   runTimesCache: {
@@ -39,7 +39,7 @@ export default ({
   alignSystem,
   floatingWidgets,
   infoboxBlocks,
-  storyBlocks,
+  storyBlocks
 }: Props) => {
   const pluginInstancesMeta = useRef<PluginExtensionInstance[]>([]);
 
@@ -52,9 +52,9 @@ export default ({
       decrement: (id: string) =>
         runTimesCache.set(id, runTimesCacheHandler.get(id) - 1),
       clear: (id: string) => runTimesCache.set(id, 0),
-      clearAll: () => runTimesCache.clear(),
+      clearAll: () => runTimesCache.clear()
     }),
-    [runTimesCache],
+    [runTimesCache]
   );
 
   useEffect(() => {
@@ -79,7 +79,7 @@ export default ({
                       extensionType: "widget",
                       get runTimes() {
                         return runTimesCacheHandler.get(widget.id);
-                      },
+                      }
                     });
                   });
                 }
@@ -100,7 +100,7 @@ export default ({
           extensionType: "widget",
           get runTimes() {
             return runTimesCacheHandler.get(widget.id);
-          },
+          }
         });
       });
     }
@@ -115,7 +115,7 @@ export default ({
           extensionType: "block",
           get runTimes() {
             return runTimesCacheHandler.get(block.id);
-          },
+          }
         });
       });
     }
@@ -130,7 +130,7 @@ export default ({
           extensionType: "storyBlock",
           get runTimes() {
             return runTimesCacheHandler.get(block.id);
-          },
+          }
         });
       });
     }
@@ -141,11 +141,11 @@ export default ({
     floatingWidgets,
     infoboxBlocks,
     storyBlocks,
-    runTimesCacheHandler,
+    runTimesCacheHandler
   ]);
 
   const pluginMessageSenders = useRef<Map<string, (msg: any) => void>>(
-    new Map(),
+    new Map()
   );
 
   const pluginInstances = useMemo(() => {
@@ -167,14 +167,14 @@ export default ({
       },
       addPluginMessageSender: (
         id: string,
-        msgSender: (msg: string) => void,
+        msgSender: (msg: string) => void
       ) => {
         pluginMessageSenders.current?.set(id, msgSender);
       },
       removePluginMessageSender: (id: string) => {
         pluginMessageSenders.current?.delete(id);
       },
-      runTimesCache: runTimesCacheHandler,
+      runTimesCache: runTimesCacheHandler
     };
   }, [pluginInstancesMeta, runTimesCacheHandler]);
 
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts b/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts
index a50030f62..68b034adf 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/utils/events.ts
@@ -3,28 +3,28 @@ import { useEffect } from "react";
 
 export type EventCallback<T extends any[] = any[]> = (...args: T) => void;
 export type EventEmitter<
-  E extends { [P in string]: any[] } = { [P in string]: any[] },
+  E extends { [P in string]: any[] } = { [P in string]: any[] }
 > = <T extends keyof E>(type: T, ...args: E[T]) => void;
 
 export type Events<
-  E extends { [P in string]: any[] } = { [P in string]: any[] },
+  E extends { [P in string]: any[] } = { [P in string]: any[] }
 > = {
   readonly on: <T extends keyof E>(
     type: T,
-    callback: EventCallback<E[T]>,
+    callback: EventCallback<E[T]>
   ) => void;
   readonly off: <T extends keyof E>(
     type: T,
-    callback: EventCallback<E[T]>,
+    callback: EventCallback<E[T]>
   ) => void;
   readonly once: <T extends keyof E>(
     type: T,
-    callback: EventCallback<E[T]>,
+    callback: EventCallback<E[T]>
   ) => void;
 };
 
 export function events<
-  E extends { [P in string]: any[] } = { [P in string]: any[] },
+  E extends { [P in string]: any[] } = { [P in string]: any[] }
 >(): [Events<E>, EventEmitter<E>] {
   const e = new EventTarget();
   const callbacks = new Map<
@@ -33,7 +33,7 @@ export function events<
   >();
   const getEventCallback = <T extends keyof E>(
     type: T,
-    cb: EventCallback<E[T]>,
+    cb: EventCallback<E[T]>
   ): ((e: Event) => void) => {
     let ecbs = callbacks.get(type);
     if (!ecbs) {
@@ -84,18 +84,18 @@ export function events<
     },
     get once() {
       return once;
-    },
+    }
   };
 
   return [
     events,
     <T extends keyof E>(type: T, ...args: E[T]) =>
-      e.dispatchEvent(new CustomEvent(String(type), { detail: args })),
+      e.dispatchEvent(new CustomEvent(String(type), { detail: args }))
   ];
 }
 
 export function mergeEvents<
-  E extends Record<string, any[]> = Record<string, any[]>,
+  E extends Record<string, any[]> = Record<string, any[]>
 >(source: Events<E>, dest: EventEmitter<E>, types: (keyof E)[]): () => void {
   const cbs = types.reduce<{ [T in keyof E]: EventCallback<E[T]> }>((a, b) => {
     a[b] = (...args: E[typeof b]) => {
@@ -117,7 +117,7 @@ export function mergeEvents<
 
 export function useEmit<T extends { [K in string]: any[] }>(
   values: { [K in keyof T]?: T[K] | undefined },
-  emit: (<K extends keyof T>(key: K, ...args: T[K]) => void) | undefined,
+  emit: (<K extends keyof T>(key: K, ...args: T[K]) => void) | undefined
 ) {
   for (const k of Object.keys(values)) {
     const args = values[k];
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/Template.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/Template.tsx
index e7888ca1b..7e38476ed 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/Template.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/Template.tsx
@@ -1,7 +1,7 @@
-import { FC } from "react";
 
 import { Icon } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC } from "react";
 
 import { getIconName } from "../utils";
 
@@ -27,10 +27,10 @@ const Wrapper = styled("div")<{ height?: number }>(({ height }) => ({
   alignItems: "center",
   flex: 1,
   backgroundColor: "#e0e0e0",
-  color: "#a8a8a8",
+  color: "#a8a8a8"
 }));
 
 const StyledIcon = styled(Icon)(() => ({
   width: "32px",
-  height: "32px",
+  height: "32px"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx
index a76c61863..2da626cf2 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx
@@ -17,22 +17,22 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -43,7 +43,7 @@ const Content: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }) => {
   const t = useT();
   const context = useContext(BlockContext);
@@ -52,7 +52,7 @@ const Content: FC<Props> = ({
 
   const handleFlyTo = useMemo(
     () => visualizer.current?.engine.flyTo,
-    [visualizer],
+    [visualizer]
   );
 
   const handleClick = useCallback(
@@ -64,10 +64,10 @@ const Content: FC<Props> = ({
       const item = cameraButtons.find((i) => i.id === itemId);
       if (!item?.cameraPosition?.value) return;
       handleFlyTo?.(item.cameraPosition?.value, {
-        duration: item.cameraDuration?.value || 2,
+        duration: item.cameraDuration?.value || 2
       });
     },
-    [cameraButtons, isEditable, handleFlyTo],
+    [cameraButtons, isEditable, handleFlyTo]
   );
 
   return (
@@ -108,7 +108,7 @@ const Content: FC<Props> = ({
 export default Content;
 
 const Wrapper = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 
 const ButtonWrapper = styled("div")(({ theme }) => ({
@@ -116,7 +116,7 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexWrap: "wrap",
   gap: theme.spacing.smallest,
-  maxWidth: "400px",
+  maxWidth: "400px"
 }));
 
 const StyledButton = styled(Button)<{
@@ -130,6 +130,6 @@ const StyledButton = styled(Button)<{
 
   ":hover": {
     color: bgColor,
-    backgroundColor: color ?? theme.primary.main,
-  },
+    backgroundColor: color ?? theme.primary.main
+  }
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts
index 0df438b23..8a6e706de 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/hooks.ts
@@ -23,7 +23,7 @@ export default ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }: {
   items: CameraBlock[];
   propertyId?: string;
@@ -34,22 +34,22 @@ export default ({
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 }) => {
   const visualizer = useVisualizer();
@@ -57,12 +57,12 @@ export default ({
 
   const handleFlyTo = useMemo(
     () => visualizer.current?.engine.flyTo,
-    [visualizer],
+    [visualizer]
   );
 
   const editorProperties = useMemo(
     () => items.find((i) => i.id === selected),
-    [items, selected],
+    [items, selected]
   );
 
   const handlePropertyValueUpdate = useCallback(
@@ -71,7 +71,7 @@ export default ({
       propertyId: string,
       fieldId: string,
       vt: any,
-      itemId?: string,
+      itemId?: string
     ) => {
       return async (v?: any) => {
         await onPropertyUpdate?.(
@@ -80,11 +80,11 @@ export default ({
           fieldId,
           itemId,
           vt,
-          v,
+          v
         );
       };
     },
-    [onPropertyUpdate],
+    [onPropertyUpdate]
   );
 
   const handleUpdate = useCallback(
@@ -92,7 +92,7 @@ export default ({
       itemId: string,
       fieldId: string,
       fieldType: keyof ValueTypes,
-      updatedValue?: ValueTypes[keyof ValueTypes],
+      updatedValue?: ValueTypes[keyof ValueTypes]
     ) => {
       if (!propertyId || !itemId) return;
 
@@ -101,24 +101,24 @@ export default ({
         propertyId,
         fieldId,
         fieldType,
-        itemId,
+        itemId
       )(updatedValue);
     },
-    [propertyId, handlePropertyValueUpdate],
+    [propertyId, handlePropertyValueUpdate]
   );
 
   const debounceOnUpdate = useMemo(
     () => debounce(handleUpdate, 500),
-    [handleUpdate],
+    [handleUpdate]
   );
 
   const listItems = useMemo(
     () =>
       items.map(({ id, title }) => ({
         id,
-        title: title?.value ?? t("New Camera Button"),
+        title: title?.value ?? t("New Camera Button")
       })),
-    [items, t],
+    [items, t]
   );
 
   const handleItemAdd = useCallback(() => {
@@ -132,7 +132,7 @@ export default ({
 
       onPropertyItemDelete?.(propertyId, "default", itemId);
     },
-    [propertyId, onPropertyItemDelete],
+    [propertyId, onPropertyItemDelete]
   );
 
   const handleItemMove = useCallback(
@@ -141,7 +141,7 @@ export default ({
 
       onPropertyItemMove?.(propertyId, "default", id, index);
     },
-    [propertyId, onPropertyItemMove],
+    [propertyId, onPropertyItemMove]
   );
 
   return {
@@ -152,6 +152,6 @@ export default ({
     handleFlyTo,
     handleItemAdd,
     handleItemRemove,
-    handleItemMove,
+    handleItemMove
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx
index 668cd4dd7..461ce3d42 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Editor/index.tsx
@@ -3,7 +3,7 @@ import {
   ColorField,
   InputField,
   ListField,
-  NumberField,
+  NumberField
 } from "@reearth/beta/ui/fields";
 import { Camera } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
@@ -25,22 +25,22 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -52,7 +52,7 @@ const CameraBlockEditor: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }) => {
   const t = useT();
   const {
@@ -63,7 +63,7 @@ const CameraBlockEditor: FC<Props> = ({
     handleFlyTo,
     handleItemAdd,
     handleItemRemove,
-    handleItemMove,
+    handleItemMove
   } = useHooks({
     selected,
     items,
@@ -71,7 +71,7 @@ const CameraBlockEditor: FC<Props> = ({
     onPropertyUpdate,
     onPropertyItemAdd,
     onPropertyItemDelete,
-    onPropertyItemMove,
+    onPropertyItemMove
   });
 
   return (
@@ -142,13 +142,13 @@ const CameraBlockEditor: FC<Props> = ({
 const EditorWrapper = styled("div")(({ theme }) => ({
   padding: theme.spacing.normal,
   margin: `${theme.spacing.micro}px 0`,
-  background: theme.bg[1],
+  background: theme.bg[1]
 }));
 
 const GroupWrapper = styled("div")(() => ({
   display: "grid",
   gridTemplateColumns: "55% 42%",
-  gridGap: "10px",
+  gridGap: "10px"
 }));
 
 const FieldGroup = styled("div")<{ disabled: boolean }>(
@@ -158,8 +158,8 @@ const FieldGroup = styled("div")<{ disabled: boolean }>(
     gap: theme.spacing.small,
     opacity: disabled ? 0.6 : 1,
     cursor: disabled ? "not-allowed" : "inherit",
-    pointerEvents: disabled ? "none" : "inherit",
-  }),
+    pointerEvents: disabled ? "none" : "inherit"
+  })
 );
 
 export default CameraBlockEditor;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx
index a827bd69c..2c9e23a39 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx
@@ -17,7 +17,7 @@ const CameraBlock: FC<Props> = ({
 }) => {
   const cameraButtons = useMemo(
     () => (block?.property?.default ?? []) as CameraBlockType[],
-    [block?.property?.default],
+    [block?.property?.default]
   );
 
   // if there's no item add 1 button.
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx
index afbb84502..ff92460d6 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Image/index.tsx
@@ -13,7 +13,7 @@ const ImageBlock: FC<BlockProps<StoryBlock>> = ({
 }) => {
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
-    [block?.property?.default?.src],
+    [block?.property?.default?.src]
   );
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx
index 62d5eab76..09a2bc9ea 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx
@@ -17,22 +17,22 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -43,7 +43,7 @@ const Content: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }) => {
   const t = useT();
   const [selected, setSelected] = useState<string>(layerButtons[0]?.id);
@@ -64,7 +64,7 @@ const Content: FC<Props> = ({
 
       blockContext?.onLayerOverride?.(item.id, item.showLayers.value);
     },
-    [isEditable, layerButtons, blockContext],
+    [isEditable, layerButtons, blockContext]
   );
 
   return (
@@ -108,7 +108,7 @@ const Content: FC<Props> = ({
 export default Content;
 
 const Wrapper = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 
 const ButtonWrapper = styled("div")(({ theme }) => ({
@@ -116,7 +116,7 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexWrap: "wrap",
   gap: theme.spacing.smallest,
-  maxWidth: "400px",
+  maxWidth: "400px"
 }));
 
 const StyledButton = styled(Button)<{
@@ -130,6 +130,6 @@ const StyledButton = styled(Button)<{
 
   ":hover": {
     color: bgColor,
-    backgroundColor: color ?? theme.primary.main,
-  },
+    backgroundColor: color ?? theme.primary.main
+  }
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts
index 9bc980ccd..2e356a71d 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/hooks.ts
@@ -19,7 +19,7 @@ export default ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }: {
   items: LayerBlock[];
   propertyId?: string;
@@ -30,22 +30,22 @@ export default ({
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 }) => {
   const visualizer = useVisualizer();
@@ -55,13 +55,13 @@ export default ({
     () =>
       visualizer.current?.layers?.layers()?.map(({ id, title }) => ({
         value: id,
-        label: title ?? `Layer: ${id}`,
+        label: title ?? `Layer: ${id}`
       })) || [],
-    [visualizer],
+    [visualizer]
   );
   const editorProperties = useMemo(
     () => items.find((i) => i.id === selected),
-    [items, selected],
+    [items, selected]
   );
 
   const handlePropertyValueUpdate = useCallback(
@@ -70,7 +70,7 @@ export default ({
       propertyId: string,
       fieldId: string,
       vt: any,
-      itemId?: string,
+      itemId?: string
     ) => {
       return async (v?: any) => {
         await onPropertyUpdate?.(
@@ -79,11 +79,11 @@ export default ({
           fieldId,
           itemId,
           vt,
-          v,
+          v
         );
       };
     },
-    [onPropertyUpdate],
+    [onPropertyUpdate]
   );
 
   const handleUpdate = useCallback(
@@ -95,24 +95,24 @@ export default ({
         propertyId,
         fieldId,
         fieldType,
-        itemId,
+        itemId
       )(updatedValue);
     },
-    [propertyId, handlePropertyValueUpdate],
+    [propertyId, handlePropertyValueUpdate]
   );
 
   const debounceOnUpdate = useMemo(
     () => debounce(handleUpdate, 500),
-    [handleUpdate],
+    [handleUpdate]
   );
 
   const listItems = useMemo(
     () =>
       items.map(({ id, title }) => ({
         id,
-        title: title?.value ?? t("New Layers Button"),
+        title: title?.value ?? t("New Layers Button")
       })),
-    [items, t],
+    [items, t]
   );
 
   const handleItemAdd = useCallback(() => {
@@ -126,7 +126,7 @@ export default ({
 
       onPropertyItemDelete?.(propertyId, "default", itemId);
     },
-    [propertyId, onPropertyItemDelete],
+    [propertyId, onPropertyItemDelete]
   );
 
   const handleItemMove = useCallback(
@@ -135,7 +135,7 @@ export default ({
 
       onPropertyItemMove?.(propertyId, "default", id, index);
     },
-    [propertyId, onPropertyItemMove],
+    [propertyId, onPropertyItemMove]
   );
 
   return {
@@ -145,6 +145,6 @@ export default ({
     listItems,
     handleItemAdd,
     handleItemRemove,
-    handleItemMove,
+    handleItemMove
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx
index cbe78d441..0d546de61 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Editor/index.tsx
@@ -2,7 +2,7 @@ import {
   ColorField,
   InputField,
   ListField,
-  SelectField,
+  SelectField
 } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -23,22 +23,22 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -50,7 +50,7 @@ const CameraBlockEditor: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }) => {
   const t = useT();
   const {
@@ -60,7 +60,7 @@ const CameraBlockEditor: FC<Props> = ({
     listItems,
     handleItemAdd,
     handleItemRemove,
-    handleItemMove,
+    handleItemMove
   } = useHooks({
     selected,
     items,
@@ -68,7 +68,7 @@ const CameraBlockEditor: FC<Props> = ({
     onPropertyUpdate,
     onPropertyItemAdd,
     onPropertyItemDelete,
-    onPropertyItemMove,
+    onPropertyItemMove
   });
 
   return (
@@ -132,13 +132,13 @@ const CameraBlockEditor: FC<Props> = ({
 const EditorWrapper = styled("div")(({ theme }) => ({
   padding: theme.spacing.normal,
   margin: `${theme.spacing.micro}px 0`,
-  background: theme.bg[1],
+  background: theme.bg[1]
 }));
 
 const GroupWrapper = styled("div")(() => ({
   display: "grid",
   gridTemplateColumns: "55% 42%",
-  gridGap: "10px",
+  gridGap: "10px"
 }));
 
 const FieldGroup = styled("div")<{ disabled: boolean }>(
@@ -148,7 +148,7 @@ const FieldGroup = styled("div")<{ disabled: boolean }>(
     gap: theme.spacing.small,
     opacity: disabled ? 0.6 : 1,
     cursor: disabled ? "not-allowed" : "inherit",
-    pointerEvents: disabled ? "none" : "inherit",
-  }),
+    pointerEvents: disabled ? "none" : "inherit"
+  })
 );
 export default CameraBlockEditor;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx
index c95e40a5d..2453ed56b 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx
@@ -17,7 +17,7 @@ const LayerBlock: React.FC<Props> = ({
 }) => {
   const layerButtons = useMemo(
     () => (block?.property?.default ?? []) as LayerBlockType[],
-    [block?.property?.default],
+    [block?.property?.default]
   );
 
   // if there's no item add 1 button.
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx
index 5d8b41b30..f1b6fff80 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Content.tsx
@@ -16,22 +16,22 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -42,7 +42,7 @@ const Content: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }) => {
   const t = useT();
   const blockContext = useContext(BlockContext);
@@ -59,7 +59,7 @@ const Content: FC<Props> = ({
       if (!item?.url?.value) return;
       window.open(item.url.value, "_blank");
     },
-    [isEditable, linkButtons],
+    [isEditable, linkButtons]
   );
 
   return (
@@ -100,7 +100,7 @@ const Content: FC<Props> = ({
 export default Content;
 
 const Wrapper = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 
 const ButtonWrapper = styled("div")(({ theme }) => ({
@@ -108,7 +108,7 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexWrap: "wrap",
   gap: theme.spacing.smallest,
-  maxWidth: "400px",
+  maxWidth: "400px"
 }));
 
 const StyledButton = styled(Button)<{
@@ -122,6 +122,6 @@ const StyledButton = styled(Button)<{
 
   ":hover": {
     color: bgColor,
-    backgroundColor: color ?? theme.primary.main,
-  },
+    backgroundColor: color ?? theme.primary.main
+  }
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts
index cfd15138a..ee12845f0 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/hooks.ts
@@ -20,7 +20,7 @@ export default ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }: {
   items: LinkBlock[];
   propertyId?: string;
@@ -31,29 +31,29 @@ export default ({
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 }) => {
   const t = useT();
 
   const editorProperties = useMemo(
     () => items.find((i) => i.id === selected),
-    [items, selected],
+    [items, selected]
   );
 
   const handlePropertyValueUpdate = useCallback(
@@ -62,7 +62,7 @@ export default ({
       propertyId: string,
       fieldId: string,
       vt: any,
-      itemId?: string,
+      itemId?: string
     ) => {
       return async (v?: any) => {
         await onPropertyUpdate?.(
@@ -71,11 +71,11 @@ export default ({
           fieldId,
           itemId,
           vt,
-          v,
+          v
         );
       };
     },
-    [onPropertyUpdate],
+    [onPropertyUpdate]
   );
 
   const handleUpdate = useCallback(
@@ -83,7 +83,7 @@ export default ({
       itemId: string,
       fieldId: string,
       fieldType: keyof ValueTypes,
-      updatedValue?: ValueTypes[keyof ValueTypes],
+      updatedValue?: ValueTypes[keyof ValueTypes]
     ) => {
       if (!propertyId || !itemId) return;
 
@@ -92,24 +92,24 @@ export default ({
         propertyId,
         fieldId,
         fieldType,
-        itemId,
+        itemId
       )(updatedValue);
     },
-    [propertyId, handlePropertyValueUpdate],
+    [propertyId, handlePropertyValueUpdate]
   );
 
   const debounceOnUpdate = useMemo(
     () => debounce(handleUpdate, 500),
-    [handleUpdate],
+    [handleUpdate]
   );
 
   const listItems = useMemo(
     () =>
       items.map(({ id, title }) => ({
         id,
-        title: title?.value ?? t("New Link Button"),
+        title: title?.value ?? t("New Link Button")
       })),
-    [items, t],
+    [items, t]
   );
 
   const handleItemAdd = useCallback(() => {
@@ -123,7 +123,7 @@ export default ({
 
       onPropertyItemDelete?.(propertyId, "default", itemId);
     },
-    [propertyId, onPropertyItemDelete],
+    [propertyId, onPropertyItemDelete]
   );
 
   const handleItemMove = useCallback(
@@ -132,7 +132,7 @@ export default ({
 
       onPropertyItemMove?.(propertyId, "default", id, index);
     },
-    [propertyId, onPropertyItemMove],
+    [propertyId, onPropertyItemMove]
   );
 
   return {
@@ -142,6 +142,6 @@ export default ({
     handleUpdate,
     handleItemAdd,
     handleItemRemove,
-    handleItemMove,
+    handleItemMove
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx
index 231af3837..86786d4b0 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/Editor/index.tsx
@@ -2,7 +2,7 @@ import {
   AssetField,
   ColorField,
   InputField,
-  ListField,
+  ListField
 } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -23,22 +23,22 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -50,7 +50,7 @@ const LinkBlockEditor: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemDelete,
-  onPropertyItemMove,
+  onPropertyItemMove
 }) => {
   const t = useT();
   const {
@@ -59,7 +59,7 @@ const LinkBlockEditor: FC<Props> = ({
     listItems,
     handleItemAdd,
     handleItemRemove,
-    handleItemMove,
+    handleItemMove
   } = useHooks({
     selected,
     items,
@@ -67,7 +67,7 @@ const LinkBlockEditor: FC<Props> = ({
     onPropertyUpdate,
     onPropertyItemAdd,
     onPropertyItemDelete,
-    onPropertyItemMove,
+    onPropertyItemMove
   });
 
   return (
@@ -129,13 +129,13 @@ const EditorWrapper = styled("div")(({ theme }) => ({
   background: theme.bg[1],
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const GroupWrapper = styled("div")(() => ({
   display: "grid",
   gridTemplateColumns: "55% 42%",
-  gridGap: "10px",
+  gridGap: "10px"
 }));
 
 const FieldGroup = styled("div")<{ disabled: boolean }>(
@@ -145,8 +145,8 @@ const FieldGroup = styled("div")<{ disabled: boolean }>(
     gap: theme.spacing.small,
     opacity: disabled ? 0.6 : 1,
     cursor: disabled ? "not-allowed" : "inherit",
-    pointerEvents: disabled ? "none" : "inherit",
-  }),
+    pointerEvents: disabled ? "none" : "inherit"
+  })
 );
 
 export default LinkBlockEditor;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx
index 2c6695f3a..cdf0466b7 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Link/index.tsx
@@ -17,7 +17,7 @@ const LinkBlock: FC<Props> = ({
 }) => {
   const linkButtons = useMemo(
     () => (block?.property?.default ?? []) as LinkBlockType[],
-    [block?.property?.default],
+    [block?.property?.default]
   );
 
   // if there's no item add 1 button.
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx
index cf007da23..c42bd5ccc 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx
@@ -10,7 +10,7 @@ import {
   useRef,
   useMemo,
   useState,
-  FC,
+  FC
 } from "react";
 
 export type Props = {
@@ -27,7 +27,7 @@ const MdBlockEditor: FC<Props> = ({ text, onUpdate }) => {
 
   const debouncedHandleTextUpdate = useMemo(
     () => debounce(onUpdate, 1000),
-    [onUpdate],
+    [onUpdate]
   );
 
   const onChange = useCallback(
@@ -35,7 +35,7 @@ const MdBlockEditor: FC<Props> = ({ text, onUpdate }) => {
       setValue(e.currentTarget.value);
       debouncedHandleTextUpdate(e.currentTarget.value);
     },
-    [debouncedHandleTextUpdate],
+    [debouncedHandleTextUpdate]
   );
 
   useLayoutEffect(() => {
@@ -67,13 +67,13 @@ const StyledTextArea = styled("textarea")(() => ({
   border: "none",
   fontSize: "14px",
   padding: 0,
-  outline: "none",
+  outline: "none"
 }));
 
 const StyledMarkdown = styled(Markdown)<{ empty: boolean }>(({ empty }) => ({
   minHeight: empty ? "115px" : "0",
   fontSize: "14px",
-  opacity: !empty ? 1 : 0.6,
+  opacity: !empty ? 1 : 0.6
 }));
 
 export default MdBlockEditor;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx
index 5304b3abf..6aae9dbc7 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx
@@ -12,7 +12,7 @@ export type Props = BlockProps<StoryBlock>;
 const MdBlock: FC<Props> = ({ block, isSelected, ...props }) => {
   const text = useMemo(
     () => block?.property?.default?.text?.value as ValueTypes["string"],
-    [block?.property?.default?.text?.value],
+    [block?.property?.default?.text?.value]
   );
 
   const handlePropertyValueUpdate = useCallback(
@@ -21,7 +21,7 @@ const MdBlock: FC<Props> = ({ block, isSelected, ...props }) => {
       propertyId: string,
       fieldId: string,
       vt: any,
-      itemId?: string,
+      itemId?: string
     ) => {
       return async (v?: any) => {
         await props.onPropertyUpdate?.(
@@ -30,11 +30,11 @@ const MdBlock: FC<Props> = ({ block, isSelected, ...props }) => {
           fieldId,
           itemId,
           vt,
-          v,
+          v
         );
       };
     },
-    [props],
+    [props]
   );
 
   const handleTextUpdate = useCallback(
@@ -44,10 +44,10 @@ const MdBlock: FC<Props> = ({ block, isSelected, ...props }) => {
         "default",
         block?.propertyId,
         "text",
-        "string",
+        "string"
       )(text);
     },
-    [block?.propertyId, handlePropertyValueUpdate],
+    [block?.propertyId, handlePropertyValueUpdate]
   );
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx
index 5d8f3080e..ae0eb840e 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/NextPage/index.tsx
@@ -46,11 +46,11 @@ export default NextPage;
 const Wrapper = styled("div")(() => ({
   display: "flex",
   width: "100%",
-  justifyContent: "center",
+  justifyContent: "center"
 }));
 
 const StyledIcon = styled(Icon)(() => ({
-  transition: "none",
+  transition: "none"
 }));
 
 const Button = styled("div")(({ theme }) => ({
@@ -65,6 +65,6 @@ const Button = styled("div")(({ theme }) => ({
   ["&:hover"]: {
     background: "#8d8d8d",
     border: "1px solid #8d8d8d",
-    color: theme.content.strong,
-  },
+    color: theme.content.strong
+  }
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx
index 1f683e69f..fa607a6da 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx
@@ -13,7 +13,7 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
 };
 
@@ -21,7 +21,7 @@ const TextBlockEditor: FC<Props> = ({
   text,
   propertyId,
   isEditable,
-  onPropertyUpdate,
+  onPropertyUpdate
 }) => {
   const context = useContext(BlockContext);
 
@@ -31,7 +31,7 @@ const TextBlockEditor: FC<Props> = ({
       propertyId: string,
       fieldId: string,
       vt: any,
-      itemId?: string,
+      itemId?: string
     ) => {
       return async (v?: any) => {
         await onPropertyUpdate?.(
@@ -40,11 +40,11 @@ const TextBlockEditor: FC<Props> = ({
           fieldId,
           itemId,
           vt,
-          v,
+          v
         );
       };
     },
-    [onPropertyUpdate],
+    [onPropertyUpdate]
   );
 
   const handleTextUpdate = useCallback(
@@ -52,12 +52,12 @@ const TextBlockEditor: FC<Props> = ({
       if (!propertyId || !isEditable) return;
       handlePropertyValueUpdate("default", propertyId, "text", "string")(text);
     },
-    [propertyId, isEditable, handlePropertyValueUpdate],
+    [propertyId, isEditable, handlePropertyValueUpdate]
   );
 
   const debouncedHandleTextUpdate = useMemo(
     () => (handleTextUpdate ? debounce(handleTextUpdate, 1000) : undefined),
-    [handleTextUpdate],
+    [handleTextUpdate]
   );
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx
index 42fe7e8ae..5c3ed5af4 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx
@@ -16,7 +16,7 @@ export type Props = BlockProps<StoryBlock>;
 const TextBlock: FC<Props> = ({ block, isSelected, ...props }) => {
   const text = useMemo(
     () => block?.property?.default?.text?.value as ValueTypes["string"],
-    [block?.property?.default?.text?.value],
+    [block?.property?.default?.text?.value]
   );
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx
index 26cc37d0c..c0c714083 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx
@@ -31,7 +31,7 @@ const TimelineEditor = ({
   inEditor,
   playMode,
   padding,
-  property,
+  property
 }: TimelineProps) => {
   const t = useT();
   const {
@@ -48,7 +48,7 @@ const TimelineEditor = ({
     removeOnCommitEventListener,
     removeTickEventListener,
     setCurrentTime,
-    onTimeChange,
+    onTimeChange
   } = useTimelineBlock(timelineValues);
 
   const {
@@ -71,7 +71,7 @@ const TimelineEditor = ({
     handleOnClick,
     handleOnMouseMove,
     handleOnEndMove,
-    handleOnStartMove,
+    handleOnStartMove
   } = useHooks({
     currentTime,
     range,
@@ -92,7 +92,7 @@ const TimelineEditor = ({
     removeOnCommitEventListener,
     removeTickEventListener,
     setCurrentTime,
-    timelineValues,
+    timelineValues
   });
 
   return (
@@ -196,7 +196,7 @@ const TimelineEditor = ({
           onMouseDown={handleOnStartMove}
           isPlaying={isPlaying || isPlayingReversed || isPause}
           style={{
-            left: `${sliderPosition}%`,
+            left: `${sliderPosition}%`
           }}
         >
           <Icon icon="slider" />
@@ -214,7 +214,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   color: theme.content.weaker,
   borderRadius: theme.radius.large,
   border: `1px solid ${theme.bg[3]}`,
-  userSelect: "none",
+  userSelect: "none"
 }));
 
 const TimelineWrapper = styled("div")<{ isMinimized: boolean }>(
@@ -223,8 +223,8 @@ const TimelineWrapper = styled("div")<{ isMinimized: boolean }>(
     alignItems: "center",
     paddingBottom: theme.spacing.small - 2,
     gap: isMinimized ? "" : "25px",
-    flexDirection: isMinimized ? "column" : "row",
-  }),
+    flexDirection: isMinimized ? "column" : "row"
+  })
 );
 
 const TimelineControl = styled("div")<{ isMinimized: boolean }>(
@@ -233,8 +233,8 @@ const TimelineControl = styled("div")<{ isMinimized: boolean }>(
     alignItems: "center",
     justifyContent: "space-between",
     gap: isMinimized ? "0" : "18px",
-    width: isMinimized ? "100%" : "auto",
-  }),
+    width: isMinimized ? "100%" : "auto"
+  })
 );
 
 const StyledIcon = styled("div")<{ activeBlock: boolean }>(
@@ -244,16 +244,16 @@ const StyledIcon = styled("div")<{ activeBlock: boolean }>(
     background: activeBlock ? theme.select.main : theme.bg[4],
     padding: `${theme.spacing.smallest}px ${theme.spacing.small - 2}px ${theme.spacing.micro}px `,
     borderRadius: `${theme.radius.normal}px 0 ${theme.radius.large}px 0`,
-    marginBottom: "6px",
-  }),
+    marginBottom: "6px"
+  })
 );
 
 const PlayControl = styled("div")<{ isMinimized: boolean }>(
   ({ isMinimized, theme }) => ({
     display: "flex",
     gap: theme.spacing.small + 2,
-    marginLeft: isMinimized ? "auto" : "0",
-  }),
+    marginLeft: isMinimized ? "auto" : "0"
+  })
 );
 
 const CurrentTime = styled("div")<{ isMinimized: boolean }>(
@@ -261,21 +261,21 @@ const CurrentTime = styled("div")<{ isMinimized: boolean }>(
     color: theme.content.weaker,
     paddingRight: isMinimized ? "8px" : "0",
     fontSize: "12px",
-    marginLeft: isMinimized ? "auto" : "0",
-  }),
+    marginLeft: isMinimized ? "auto" : "0"
+  })
 );
 
 const PlayButton = styled("div")<{ isPlaying?: boolean; isClicked?: boolean }>(
   ({ isPlaying, isClicked, theme }) => ({
     color: isPlaying ? theme.select.main : "",
     cursor: isClicked ? "pointer" : "not-allowed",
-    pointerEvents: isClicked ? "auto" : "none",
-  }),
+    pointerEvents: isClicked ? "auto" : "none"
+  })
 );
 
 const InputWrapper = styled("div")(() => ({
   position: "relative",
-  cursor: "pointer",
+  cursor: "pointer"
 }));
 
 const ArrowIcon = styled(Icon)<{ open: boolean }>(({ open, theme }) => ({
@@ -283,20 +283,20 @@ const ArrowIcon = styled(Icon)<{ open: boolean }>(({ open, theme }) => ({
   right: "-6px",
   top: "60%",
   transform: open ? "translateY(-50%) scaleY(-1)" : "translateY(-50%)",
-  color: theme.content.weaker,
+  color: theme.content.weaker
 }));
 
 const Select = styled("div")(({ theme }) => ({
   fontSize: "14px",
   lineHeight: 1,
   paddingRight: theme.spacing.normal,
-  color: theme.content.weaker,
+  color: theme.content.weaker
 }));
 
 const PopoverWrapper = styled("div")<{ isMinimized: boolean }>(
   ({ isMinimized, theme }) => ({
-    padding: isMinimized ? `0 ${theme.spacing.small + 2}px` : "0",
-  }),
+    padding: isMinimized ? `0 ${theme.spacing.small + 2}px` : "0"
+  })
 );
 
 const SelectorWrapper = styled("div")(({ theme }) => ({
@@ -309,7 +309,7 @@ const SelectorWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   justifyContent: "space-between",
   zIndex: theme.zIndexes.visualizer.storyBlock,
-  boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.25)",
+  boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.25)"
 }));
 
 const InputOptions = styled("option")(({ theme }) => ({
@@ -319,9 +319,9 @@ const InputOptions = styled("option")(({ theme }) => ({
   padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
   fontSize: " 12px",
   ["&:hover"]: {
-    background: theme.bg[2],
+    background: theme.bg[2]
   },
-  color: theme.content.main,
+  color: theme.content.main
 }));
 
 const TimelineSlider = styled("div")(({ theme }) => ({
@@ -330,7 +330,7 @@ const TimelineSlider = styled("div")(({ theme }) => ({
   width: "100%",
   borderRadius: `0 0 ${theme.radius.large}px ${theme.radius.large}px`,
   position: "relative",
-  overflow: "hidden",
+  overflow: "hidden"
 }));
 
 const ScaleList = styled("div")(() => ({
@@ -340,7 +340,7 @@ const ScaleList = styled("div")(() => ({
   position: "absolute",
   left: "18px",
   right: "-12px",
-  cursor: "pointer",
+  cursor: "pointer"
 }));
 
 const IconWrapper = styled("div")<{ isPlaying: boolean }>(
@@ -348,8 +348,8 @@ const IconWrapper = styled("div")<{ isPlaying: boolean }>(
     position: "absolute",
     top: "4px",
     cursor: "pointer",
-    color: isPlaying ? theme.select.main : "",
-  }),
+    color: isPlaying ? theme.select.main : ""
+  })
 );
 
 const Scale = styled("div")(({ theme }) => ({
@@ -358,7 +358,7 @@ const Scale = styled("div")(({ theme }) => ({
   margin: "0 auto",
   flex: 1,
   textalign: "center",
-  width: "calc(100% / 11)",
+  width: "calc(100% / 11)"
 }));
 
 const ScaleLabel = styled("div")<{ isMinimized: boolean }>(
@@ -367,6 +367,6 @@ const ScaleLabel = styled("div")<{ isMinimized: boolean }>(
     position: "relative",
     bottom: "28px",
     right: "16px",
-    width: "34px",
-  }),
+    width: "34px"
+  })
 );
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts
index b39f7d48d..57b23b437 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts
@@ -3,7 +3,7 @@ import {
   convertPositionToTime,
   formatDateForSliderTimeline,
   formatDateForTimeline,
-  formatRangeDateAndTime,
+  formatRangeDateAndTime
 } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { DEFAULT_BLOCK_PADDING } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper/hooks";
 import { getNewDate } from "@reearth/beta/features/Visualizer/shared/hooks/useTimelineBlock";
@@ -15,7 +15,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { PaddingProp } from "./Editor";
@@ -46,7 +46,7 @@ type TimelineProps = {
   onTimeChange?: (time: Date, committerId?: string) => void;
   onCommit?: (cb: (committer: TimelineCommitter) => void) => void;
   removeOnCommitEventListener?: (
-    cb: (committer: TimelineCommitter) => void,
+    cb: (committer: TimelineCommitter) => void
   ) => void;
   onTick?: (cb: TickEventCallback) => void;
   removeTickEventListener?: (cb: TickEventCallback) => void;
@@ -75,7 +75,7 @@ export default ({
   onTick,
   removeOnCommitEventListener,
   removeTickEventListener,
-  setCurrentTime,
+  setCurrentTime
 }: TimelineProps) => {
   const [isPause, setIsPause] = useState(false);
   const [isActive, setIsActive] = useState(false);
@@ -86,7 +86,7 @@ export default ({
 
   const [committer, setCommiter] = useState<TimelineCommitter>({
     source: "storyTimelineBlock",
-    id: blockId,
+    id: blockId
   });
 
   const [isOpen, setIsOpen] = useState(false);
@@ -96,28 +96,28 @@ export default ({
     const textDate = formatDateForTimeline(
       currentTime,
       { detail: true },
-      timezone,
+      timezone
     );
 
     return textDate;
   }, [currentTime, timezone]);
 
   const current = formatRangeDateAndTime(
-    formatDateForSliderTimeline(currentTime, { detail: true }, timezone),
+    formatDateForSliderTimeline(currentTime, { detail: true }, timezone)
   );
 
   const timeRange = useMemo(() => {
     if (range) {
       return {
         startTime: formatRangeDateAndTime(
-          formatDateForSliderTimeline(range.start, { detail: true }, timezone),
+          formatDateForSliderTimeline(range.start, { detail: true }, timezone)
         ),
         midTime: formatRangeDateAndTime(
-          formatDateForSliderTimeline(range.mid, { detail: true }, timezone),
+          formatDateForSliderTimeline(range.mid, { detail: true }, timezone)
         ),
         endTime: formatRangeDateAndTime(
-          formatDateForSliderTimeline(range.end, { detail: true }, timezone),
-        ),
+          formatDateForSliderTimeline(range.end, { detail: true }, timezone)
+        )
       };
     }
     return {};
@@ -130,9 +130,9 @@ export default ({
         ...property?.panel?.padding,
         value: calculatePaddingValue(
           DEFAULT_BLOCK_PADDING,
-          property?.panel?.padding?.value,
-        ),
-      },
+          property?.panel?.padding?.value
+        )
+      }
     };
   }, [property?.panel]);
 
@@ -152,7 +152,7 @@ export default ({
         }
       }
     },
-    [committer.id, inEditor, isPlayingReversed, onSpeedChange, selected],
+    [committer.id, inEditor, isPlayingReversed, onSpeedChange, selected]
   );
 
   useEffect(() => {
@@ -166,7 +166,7 @@ export default ({
     (e) => {
       onSpeedChange?.(parseInt(e.currentTarget.value, 10), committer.id);
     },
-    [committer, onSpeedChange],
+    [committer, onSpeedChange]
   );
 
   const handleOnPlay = useCallback(() => {
@@ -191,7 +191,7 @@ export default ({
     onTimeChange,
     currentTime,
     onSpeedChange,
-    speed,
+    speed
   ]);
 
   const handleOnPlayReversed = useCallback(() => {
@@ -216,7 +216,7 @@ export default ({
     onPlay,
     onSpeedChange,
     onTimeChange,
-    speed,
+    speed
   ]);
 
   const handleOnPause = useCallback(() => {
@@ -234,7 +234,7 @@ export default ({
     (current: Date) => {
       return setCurrentTime?.(current.getTime());
     },
-    [setCurrentTime],
+    [setCurrentTime]
   );
 
   const handleOnReset = useCallback(() => {
@@ -251,7 +251,7 @@ export default ({
     setCurrentTime,
     isPlaying,
     isPlayingReversed,
-    onPause,
+    onPause
   ]);
 
   const handleOnResetAndPlay = useCallback(() => {
@@ -266,7 +266,7 @@ export default ({
       setCurrentTime?.(getNewDate(new Date(time)).getTime());
       handleOnPause();
     },
-    [handleOnPause, onTimeChange, setCurrentTime],
+    [handleOnPause, onTimeChange, setCurrentTime]
   );
 
   const [target, setTarget] = useState<HTMLElement | null>(null);
@@ -298,12 +298,12 @@ export default ({
         const conv = convertPositionToTime(
           e as unknown as MouseEvent,
           range.start,
-          range.end,
+          range.end
         );
         if (committer?.id) handleOnDrag(new Date(conv), committer?.id);
       }
     },
-    [committer?.id, handleOnDrag, inEditor, range, target],
+    [committer?.id, handleOnDrag, inEditor, range, target]
   );
 
   const handleOnClick: MouseEventHandler = useCallback(
@@ -312,12 +312,12 @@ export default ({
         const conv = convertPositionToTime(
           e as unknown as MouseEvent,
           range.start,
-          range.end,
+          range.end
         );
         if (committer?.id) handleOnDrag(new Date(conv), committer?.id);
       }
     },
-    [inEditor, range, committer?.id, handleOnDrag],
+    [inEditor, range, committer?.id, handleOnDrag]
   );
 
   const handleTimelineCommitterChange = useCallback(
@@ -335,7 +335,7 @@ export default ({
         const currentTimeValue = timelineValues?.currentTime ?? "";
         if (timelineValues) {
           setCurrentTime?.(
-            getNewDate(new Date(currentTimeValue.substring(0, 19))).getTime(),
+            getNewDate(new Date(currentTimeValue.substring(0, 19))).getTime()
           );
         } else {
           setCurrentTime?.(range?.start);
@@ -343,7 +343,7 @@ export default ({
       }
       setIsPause(false);
     },
-    [activeBlock, isActive, range, setCurrentTime, timelineValues],
+    [activeBlock, isActive, range, setCurrentTime, timelineValues]
   );
 
   useEffect(() => {
@@ -373,7 +373,7 @@ export default ({
     playMode,
     range,
     timeRange.endTime,
-    timeRange.startTime,
+    timeRange.startTime
   ]);
 
   useEffect(() => {
@@ -392,7 +392,7 @@ export default ({
     onCommit,
     onTick,
     removeOnCommitEventListener,
-    removeTickEventListener,
+    removeTickEventListener
   ]);
   const blockRef = useRef<HTMLDivElement>(null);
 
@@ -460,6 +460,6 @@ export default ({
     handleOnMouseMove,
     handleOnClick,
     handleOnEndMove,
-    handleOnStartMove,
+    handleOnStartMove
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx
index 224b90159..304b30ef9 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/index.tsx
@@ -21,12 +21,12 @@ const TimelineBlock: FC<BlockProps<StoryBlock>> = ({
     return {
       timelineValues: block?.property?.default?.timelineSetting?.value,
       blockId: block?.id,
-      playMode: block?.property?.default?.playMode?.value,
+      playMode: block?.property?.default?.playMode?.value
     };
   }, [
     block?.id,
     block?.property?.default?.playMode?.value,
-    block?.property?.default?.timelineSetting?.value,
+    block?.property?.default?.timelineSetting?.value
   ]);
 
   const { blockId, timelineValues, playMode } = timeline;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
index 43f68cd63..b8883bbcb 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx
@@ -19,12 +19,12 @@ const TitleBlock: FC<BlockProps<StoryBlock>> = ({
 
   const title = useMemo(
     () => property?.title?.title?.value as ValueTypes["string"],
-    [property?.title?.title?.value],
+    [property?.title?.title?.value]
   );
 
   const color = useMemo(
     () => property?.title?.color?.value as ValueTypes["string"],
-    [property?.title?.color?.value],
+    [property?.title?.color?.value]
   );
 
   const hasEmptySpace = useMemo(() => isEmptyString(title), [title]);
@@ -56,5 +56,5 @@ const TitleWrapper = styled("div")<{ color?: string }>(({ color, theme }) => ({
   fontWeight: theme.fonts.weight.regular,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  wordBreak: "break-word",
+  wordBreak: "break-word"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx
index b5d35eb84..d1ea14736 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer.tsx
@@ -28,11 +28,11 @@ export default VideoPlayer;
 
 const StyledWrapper = styled("div")(() => ({
   width: "100%",
-  position: "relative",
+  position: "relative"
 }));
 
 const Overlay = styled("div")(() => ({
   width: "100%",
   height: "100%",
-  position: "absolute",
+  position: "absolute"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx
index 82357fa52..236abd967 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx
@@ -13,7 +13,7 @@ const VideoBlock: FC<BlockProps<StoryBlock>> = ({
 }) => {
   const src = useMemo(
     () => block?.property?.default?.src?.value as ValueTypes["string"],
-    [block?.property?.default?.src?.value],
+    [block?.property?.default?.src?.value]
   );
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts
index afd1c5512..65ce7e52a 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/index.ts
@@ -11,7 +11,7 @@ import {
   VIDEO_BUILTIN_STORY_BLOCK_ID,
   LAYER_BUILTIN_STORY_BLOCK_ID,
   NEXT_PAGE_BUILTIN_STORY_BLOCK_ID,
-  LINK_BUILTIN_STORY_BLOCK_ID,
+  LINK_BUILTIN_STORY_BLOCK_ID
 } from "../../constants";
 
 import CameraBlock from "./Camera";
@@ -52,13 +52,13 @@ const reearthBuiltin: BuiltinStoryBlocks<Component> = {
   [CAMERA_BUILTIN_STORY_BLOCK_ID]: CameraBlock,
   [LAYER_BUILTIN_STORY_BLOCK_ID]: LayerBlock,
   [NEXT_PAGE_BUILTIN_STORY_BLOCK_ID]: NextPageBlock,
-  [LINK_BUILTIN_STORY_BLOCK_ID]: LinkBlock,
+  [LINK_BUILTIN_STORY_BLOCK_ID]: LinkBlock
 };
 
 const builtin = merge({}, reearthBuiltin);
 
 export const isBuiltinStoryBlock = (
-  id: string,
+  id: string
 ): id is keyof BuiltinStoryBlocks => {
   return !!builtin[id as keyof BuiltinStoryBlocks];
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx
index c9eba02e5..7c2a30354 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx
@@ -1,6 +1,6 @@
 import type {
   CommonBlockProps,
-  BlockProps,
+  BlockProps
 } from "@reearth/beta/features/Visualizer/shared/types";
 import type { Layer } from "@reearth/core";
 import { useCallback, type ComponentType, type ReactNode } from "react";
@@ -29,7 +29,7 @@ export default function StoryBlockComponent({
     : undefined;
   const handleRemove = useCallback(
     () => props.block?.id && onRemove?.(props.block.id),
-    [props.block?.id, onRemove],
+    [props.block?.id, onRemove]
   );
 
   return Builtin ? (
@@ -51,7 +51,7 @@ export default function StoryBlockComponent({
       {renderBlock?.({
         block: props.block,
         layer: props.layer,
-        onClick: props.onClick,
+        onClick: props.onClick
       })}
     </BlockWrapper>
   ) : null;
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/ClickAwayListener.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/ClickAwayListener.tsx
index fb9b665d0..087105f72 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/ClickAwayListener.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/ClickAwayListener.tsx
@@ -6,7 +6,7 @@ import React, {
   ReactElement,
   HTMLAttributes,
   MutableRefObject,
-  FunctionComponent,
+  FunctionComponent
 } from "react";
 
 type FocusEvents = "focusin" | "focusout";
@@ -30,7 +30,7 @@ const eventTypeMapping = {
   mousedown: "onMouseDown",
   mouseup: "onMouseUp",
   touchstart: "onTouchStart",
-  touchend: "onTouchEnd",
+  touchend: "onTouchEnd"
 };
 
 const ClickAwayListener: FunctionComponent<Props> = ({
@@ -39,7 +39,7 @@ const ClickAwayListener: FunctionComponent<Props> = ({
   onClickAway,
   focusEvent = "focusin",
   mouseEvent = "click",
-  touchEvent = "touchend",
+  touchEvent = "touchend"
 }) => {
   const node = useRef<HTMLElement | null>(null);
   const bubbledEventTarget = useRef<EventTarget | null>(null);
@@ -124,8 +124,8 @@ const ClickAwayListener: FunctionComponent<Props> = ({
           ref: handleChildRef,
           [mappedFocusEvent]: handleBubbledEvents(mappedFocusEvent),
           [mappedMouseEvent]: handleBubbledEvents(mappedMouseEvent),
-          [mappedTouchEvent]: handleBubbledEvents(mappedTouchEvent),
-        }),
+          [mappedTouchEvent]: handleBubbledEvents(mappedTouchEvent)
+        })
       )
     : children;
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts
index 0e075a277..ad682b6b5 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import {
   DEFAULT_STORY_PAGE_GAP,
-  DEFAULT_STORY_PAGE_PADDING,
+  DEFAULT_STORY_PAGE_PADDING
 } from "../constants";
 import { StoryPage } from "../types";
 import { calculatePaddingValue } from "../utils";
@@ -14,14 +14,14 @@ export default ({
   page,
   isEditable,
   onBlockCreate,
-  onBlockMove,
+  onBlockMove
 }: {
   page?: StoryPage;
   isEditable?: boolean;
   onBlockCreate?: (
     extensionId?: string | undefined,
     pluginId?: string | undefined,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void> | undefined;
   onBlockMove?: (id: string, targetIndex: number, blockId: string) => void;
 }) => {
@@ -33,7 +33,7 @@ export default ({
 
   const disableSelection = useMemo(
     () => editModeContext?.disableSelection,
-    [editModeContext?.disableSelection],
+    [editModeContext?.disableSelection]
   );
 
   useEffect(() => page?.blocks && setStoryBlocks(page.blocks), [page?.blocks]);
@@ -46,7 +46,7 @@ export default ({
         setOpenBlocksIndex(index);
       }
     },
-    [openBlocksIndex],
+    [openBlocksIndex]
   );
 
   const property = useMemo(() => page?.property, [page?.property]);
@@ -58,19 +58,19 @@ export default ({
         value: calculatePaddingValue(
           DEFAULT_STORY_PAGE_PADDING,
           property?.panel?.padding,
-          isEditable,
+          isEditable
         ),
         title: "Padding",
         type: "spacing",
-        ui: "padding",
+        ui: "padding"
       },
       gap: {
         value: property?.panel?.gap ?? DEFAULT_STORY_PAGE_GAP,
         type: "number",
-        title: "Gap",
-      },
+        title: "Gap"
+      }
     }),
-    [property?.panel, isEditable],
+    [property?.panel, isEditable]
   );
 
   const titleProperty = useMemo(
@@ -79,25 +79,25 @@ export default ({
         title: {
           value: property?.title?.title,
           title: "Title",
-          type: "string",
+          type: "string"
         },
         color: {
           value: property?.title?.color,
           title: "Color",
           type: "string",
-          ui: "color",
-        },
+          ui: "color"
+        }
       },
       panel: {
         padding: {
           value: property?.title?.padding,
           title: "Padding",
           type: "spacing",
-          ui: "padding",
-        },
-      },
+          ui: "padding"
+        }
+      }
     }),
-    [property?.title],
+    [property?.title]
   );
 
   const titleId = useMemo(() => `${page?.id}/title`, [page?.id]);
@@ -106,7 +106,7 @@ export default ({
     (index: number) =>
       (extensionId?: string | undefined, pluginId?: string | undefined) =>
         onBlockCreate?.(extensionId, pluginId, index),
-    [onBlockCreate],
+    [onBlockCreate]
   );
 
   const handleMoveEnd = useCallback(
@@ -125,7 +125,7 @@ export default ({
       }
       setIsDragging(false);
     },
-    [onBlockMove, page?.id],
+    [onBlockMove, page?.id]
   );
 
   return {
@@ -141,6 +141,6 @@ export default ({
     setStoryBlocks,
     handleBlockOpen,
     handleBlockCreate,
-    handleMoveEnd,
+    handleMoveEnd
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx
index 085142d9a..2a65e95cf 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/Page/index.tsx
@@ -13,7 +13,7 @@ import {
   MutableRefObject,
   ReactNode,
   useEffect,
-  useMemo,
+  useMemo
 } from "react";
 
 import { BlockProps } from "../../../shared/types";
@@ -22,7 +22,7 @@ import {
   STORY_PANEL_CONTENT_ELEMENT_ID,
   MIN_STORY_PAGE_PADDING_IN_EDITOR,
   MIN_STORY_PAGE_GAP_IN_EDITOR,
-  STORY_PANEL_WIDTH,
+  STORY_PANEL_WIDTH
 } from "../constants";
 import { StoryBlock as StoryBlockType } from "../types";
 
@@ -40,14 +40,14 @@ type Props = {
   children?: ReactNode;
   onCurrentPageChange?: (
     pageId: string,
-    disableScrollIntoView?: boolean,
+    disableScrollIntoView?: boolean
   ) => void;
   onPageSettingsToggle?: () => void;
   onPageSelect?: (pageId?: string | undefined) => void;
   onBlockCreate?: (
     extensionId?: string | undefined,
     pluginId?: string | undefined,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void> | undefined;
   onBlockDelete?: (blockId?: string | undefined) => Promise<void> | undefined;
   onBlockSelect?: (blockId?: string) => void;
@@ -57,24 +57,24 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   onBlockMove?: (id: string, targetIndex: number, blockId: string) => void;
   onBlockDoubleClick?: (blockId?: string) => void;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
   renderBlock?: (block: BlockProps<StoryBlockType>) => ReactNode;
 };
@@ -103,7 +103,7 @@ const StoryPanel: FC<Props> = ({
   onPropertyItemAdd,
   onPropertyItemMove,
   onPropertyItemDelete,
-  renderBlock,
+  renderBlock
 }) => {
   const t = useT();
 
@@ -117,17 +117,17 @@ const StoryPanel: FC<Props> = ({
     disableSelection,
     handleBlockOpen,
     handleBlockCreate,
-    handleMoveEnd,
+    handleMoveEnd
   } = useHooks({
     page,
     isEditable,
     onBlockCreate,
-    onBlockMove,
+    onBlockMove
   });
 
   const { containerRef, isIntersecting } = useElementOnScreen({
     root: document.getElementById(STORY_PANEL_CONTENT_ELEMENT_ID),
-    threshold: 0.2,
+    threshold: 0.2
   });
 
   useEffect(() => {
@@ -136,7 +136,7 @@ const StoryPanel: FC<Props> = ({
       if (id) {
         if (isAutoScrolling?.current) {
           const wrapperElement = document.getElementById(
-            STORY_PANEL_CONTENT_ELEMENT_ID,
+            STORY_PANEL_CONTENT_ELEMENT_ID
           );
 
           wrapperElement?.addEventListener("scroll", () => {
@@ -155,7 +155,7 @@ const StoryPanel: FC<Props> = ({
     containerRef,
     isAutoScrolling,
     scrollTimeoutRef,
-    onCurrentPageChange,
+    onCurrentPageChange
   ]);
 
   const DraggableStoryBlockItems = useMemo(
@@ -193,7 +193,7 @@ const StoryPanel: FC<Props> = ({
               />
             )}
           </Fragment>
-        ),
+        )
       })),
     [
       storyBlocks,
@@ -214,8 +214,8 @@ const StoryPanel: FC<Props> = ({
       installableStoryBlocks,
       handleBlockCreate,
       onBlockDoubleClick,
-      handleBlockOpen,
-    ],
+      handleBlockOpen
+    ]
   );
   return (
     <SelectableArea
@@ -259,7 +259,7 @@ const StoryPanel: FC<Props> = ({
                 extensionId: "titleStoryBlock",
                 name: t("Title"),
                 propertyId,
-                property: titleProperty,
+                property: titleProperty
               }}
               isEditable={isEditable}
               isSelected={selectedStoryBlockId === titleId}
@@ -305,5 +305,5 @@ const StoryPanel: FC<Props> = ({
 export default StoryPanel;
 
 const PageTitleWrapper = styled("div")(() => ({
-  position: "relative",
+  position: "relative"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
index df393dd12..468eabbdd 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/IndicatorSection.tsx
@@ -13,7 +13,7 @@ const IndicatorSection: FC<Props> = ({
   pageNumber,
   currentPageNumber,
   title,
-  onPageChange,
+  onPageChange
 }) => {
   const handleClick = useCallback(() => {
     onPageChange(pageNumber);
@@ -21,7 +21,7 @@ const IndicatorSection: FC<Props> = ({
 
   const isHighlighted = useMemo(
     () => pageNumber <= currentPageNumber,
-    [currentPageNumber, pageNumber],
+    [currentPageNumber, pageNumber]
   );
 
   // const isLast = useMemo(() => pageNumber === totalPages, [pageNumber, totalPages]);
@@ -55,15 +55,15 @@ const Indicator = styled("div")<{
   width: "100%",
   background: highlighted ? theme.primary.strong : "#78a9ff",
   cursor: "pointer",
-  borderLeft: !isFirstChild ? "1px solid #ffffff" : "none",
+  borderLeft: !isFirstChild ? "1px solid #ffffff" : "none"
 }));
 
 const PageNameWrapper = styled("div")<{ isHighlighted: boolean }>(
   ({ isHighlighted, theme }) => ({
     background: isHighlighted ? theme.primary.strong : "#78a9ff",
     padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
-    maxWidth: "255px",
-  }),
+    maxWidth: "255px"
+  })
 );
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -72,5 +72,5 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-  cursor: "default",
+  cursor: "default"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.stories.tsx
index a9c3f5be6..d3c7ee0db 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import StoryPageIndicator from ".";
 
 const meta: Meta<typeof StoryPageIndicator> = {
-  component: StoryPageIndicator,
+  component: StoryPageIndicator
 };
 
 export default meta;
@@ -13,6 +13,6 @@ type Story = StoryObj<typeof StoryPageIndicator>;
 export const Default: Story = {
   args: {
     currentPage: 3,
-    maxPage: 5,
-  },
+    maxPage: 5
+  }
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx
index 1367d8dca..7f039ecf5 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PageIndicator/index.tsx
@@ -15,7 +15,7 @@ const StoryPageIndicator: FC<Props> = ({
   currentPage,
   pageTitles,
   maxPage,
-  onPageChange,
+  onPageChange
 }) => {
   const t = useT();
   return (
@@ -39,5 +39,5 @@ export default StoryPageIndicator;
 
 const Wrapper = styled("div")(() => ({
   display: "flex",
-  height: "8px",
+  height: "8px"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts
index 876f0d928..90003588f 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/hooks.ts
@@ -5,7 +5,7 @@ import {
   useLayoutEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants";
@@ -15,17 +15,17 @@ export { STORY_PANEL_CONTENT_ELEMENT_ID } from "../constants";
 
 export default ({
   onBlockCreate,
-  onBlockDelete,
+  onBlockDelete
 }: {
   onBlockCreate?: (
     pageId?: string | undefined,
     extensionId?: string | undefined,
     pluginId?: string | undefined,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   onBlockDelete?: (
     pageId?: string | undefined,
-    blockId?: string | undefined,
+    blockId?: string | undefined
   ) => Promise<void>;
 }) => {
   const editModeContext = useEditModeContext();
@@ -35,7 +35,7 @@ export default ({
 
   const disableSelection = useMemo(
     () => editModeContext?.disableSelection,
-    [editModeContext?.disableSelection],
+    [editModeContext?.disableSelection]
   );
 
   const handleBlockCreate = useCallback(
@@ -43,20 +43,20 @@ export default ({
       (
         extensionId?: string | undefined,
         pluginId?: string | undefined,
-        index?: number | undefined,
+        index?: number | undefined
       ) =>
         onBlockCreate?.(pageId, extensionId, pluginId, index),
-    [onBlockCreate],
+    [onBlockCreate]
   );
 
   const handleBlockDelete = useCallback(
     (pageId: string) => (blockId?: string) => onBlockDelete?.(pageId, blockId),
-    [onBlockDelete],
+    [onBlockDelete]
   );
 
   useLayoutEffect(() => {
     const pageWrapperElement = document.getElementById(
-      STORY_PANEL_CONTENT_ELEMENT_ID,
+      STORY_PANEL_CONTENT_ELEMENT_ID
     );
     if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block
   }, [setPageGap]);
@@ -64,7 +64,7 @@ export default ({
   useEffect(() => {
     const resizeCallback = () => {
       const pageWrapperElement = document.getElementById(
-        STORY_PANEL_CONTENT_ELEMENT_ID,
+        STORY_PANEL_CONTENT_ELEMENT_ID
       );
       if (pageWrapperElement) setPageGap(pageWrapperElement.clientHeight - 40); // 40px is the height of the page title block
     };
@@ -77,6 +77,6 @@ export default ({
     scrollTimeoutRef,
     disableSelection,
     handleBlockCreate,
-    handleBlockDelete,
+    handleBlockDelete
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx
index 28662d0e9..009562a56 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/PanelContent/index.tsx
@@ -9,7 +9,7 @@ import { StoryBlock } from "../types";
 
 import useHooks, {
   STORY_PANEL_CONTENT_ELEMENT_ID,
-  type StoryPage as StoryPageType,
+  type StoryPage as StoryPageType
 } from "./hooks";
 
 export type Props = {
@@ -25,18 +25,18 @@ export type Props = {
   onPageSelect?: (pageId?: string | undefined) => void;
   onCurrentPageChange?: (
     pageId: string,
-    disableScrollIntoView?: boolean,
+    disableScrollIntoView?: boolean
   ) => void;
   onBlockCreate?: (
     pageId?: string | undefined,
     extensionId?: string | undefined,
     pluginId?: string | undefined,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
   onBlockDelete?: (
     pageId?: string | undefined,
-    blockId?: string | undefined,
+    blockId?: string | undefined
   ) => Promise<void>;
   onBlockSelect?: (blockId?: string) => void;
   onBlockDoubleClick?: (blockId?: string) => void;
@@ -46,22 +46,22 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
   renderBlock?: (block: BlockProps<StoryBlock>) => ReactNode;
 };
@@ -87,17 +87,17 @@ const StoryContent: FC<Props> = ({
   onPropertyItemAdd,
   onPropertyItemMove,
   onPropertyItemDelete,
-  renderBlock,
+  renderBlock
 }) => {
   const {
     pageGap,
     scrollTimeoutRef,
     disableSelection,
     handleBlockCreate,
-    handleBlockDelete,
+    handleBlockDelete
   } = useHooks({
     onBlockCreate,
-    onBlockDelete,
+    onBlockDelete
   });
 
   return (
@@ -148,12 +148,12 @@ const PagesWrapper = styled("div")<{
   overflowY: "auto",
   cursor: isEditable ? "pointer" : "default",
   ["::-webkit-scrollbar"]: {
-    display: "none",
+    display: "none"
   },
   scrollbarWidth: "none",
-  msOverflowStyle: "none",
+  msOverflowStyle: "none"
 }));
 
 const PageGap = styled("div")<{ height?: number }>(({ height }) => ({
-  height: height ? `${height}px` : "70vh",
+  height: height ? `${height}px` : "70vh"
 }));
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts
index 330faea66..10f04a418 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/constants.ts
@@ -11,14 +11,14 @@ export const DEFAULT_STORY_PAGE_PADDING: Spacing = {
   top: 20,
   bottom: 20,
   left: 20,
-  right: 20,
+  right: 20
 };
 export const MIN_STORY_PAGE_GAP_IN_EDITOR = 4;
 export const MIN_STORY_PAGE_PADDING_IN_EDITOR: Spacing = {
   top: 4,
   bottom: 4,
   left: 4,
-  right: 4,
+  right: 4
 };
 
 // Story Block
@@ -43,5 +43,5 @@ export const AVAILABLE_STORY_BLOCK_IDS = [
   LAYER_BUILTIN_STORY_BLOCK_ID,
   TIMELINE_BUILTIN_STORY_BLOCK_ID,
   NEXT_PAGE_BUILTIN_STORY_BLOCK_ID,
-  LINK_BUILTIN_STORY_BLOCK_ID,
+  LINK_BUILTIN_STORY_BLOCK_ID
 ];
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
index 2fa1a68d6..0d5a8b7d4 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/hooks.ts
@@ -1,6 +1,6 @@
 import type {
   Story,
-  StoryPage,
+  StoryPage
 } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
 import { useVisualizer } from "@reearth/core";
 import {
@@ -10,27 +10,27 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { MapRef } from "../../Crust/types";
 
 import {
   DEFAULT_STORY_PAGE_DURATION,
-  STORY_PANEL_CONTENT_ELEMENT_ID,
+  STORY_PANEL_CONTENT_ELEMENT_ID
 } from "./constants";
 import { formatISO8601 } from "./utils";
 
 export type {
   Story,
-  StoryPage,
+  StoryPage
 } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
 
 export type StoryPanelRef = {
   currentPageId?: string;
   handleCurrentPageChange: (
     pageId?: string,
-    disableScrollIntoView?: boolean,
+    disableScrollIntoView?: boolean
   ) => void;
 };
 
@@ -38,13 +38,13 @@ export default (
   {
     selectedStory,
     isEditable,
-    onStoryPageChange,
+    onStoryPageChange
   }: {
     selectedStory?: Story;
     isEditable?: boolean;
     onStoryPageChange?: (id?: string, disableScrollIntoView?: boolean) => void;
   },
-  ref: Ref<StoryPanelRef>,
+  ref: Ref<StoryPanelRef>
 ) => {
   const isAutoScrolling = useRef(false);
 
@@ -58,7 +58,7 @@ export default (
 
   const handleSelectionDisable = useCallback(
     (disabled?: boolean) => setDisableSelection(!!disabled),
-    [],
+    []
   );
 
   const [layerOverride, setLayerOverride] = useState<{
@@ -79,7 +79,7 @@ export default (
       }
       setSelectedPageId(pageId);
     },
-    [selectedPageId, selectedBlockId, isEditable, disableSelection],
+    [selectedPageId, selectedBlockId, isEditable, disableSelection]
   );
 
   const handleBlockSelect = useCallback(
@@ -91,7 +91,7 @@ export default (
       }
       setSelectedBlockId(blockId);
     },
-    [selectedPageId, selectedBlockId, isEditable, disableSelection],
+    [selectedPageId, selectedBlockId, isEditable, disableSelection]
   );
 
   const handleBlockDoubleClick = useCallback(
@@ -99,7 +99,7 @@ export default (
       if (disableSelection) return;
       setSelectedBlockId(blockId);
     },
-    [disableSelection],
+    [disableSelection]
   );
 
   const onTimeChange = useCallback(
@@ -110,12 +110,12 @@ export default (
           start:
             visualizer?.current?.timeline?.current?.computedTimeline?.start,
           current: time,
-          stop: visualizer?.current?.timeline?.current?.computedTimeline?.stop,
+          stop: visualizer?.current?.timeline?.current?.computedTimeline?.stop
         },
-        committer: { source: "storyPage", id: currentPageId },
+        committer: { source: "storyPage", id: currentPageId }
       });
     },
-    [currentPageId, visualizer],
+    [currentPageId, visualizer]
   );
 
   const handlePageTime = useCallback(
@@ -123,10 +123,10 @@ export default (
       const timePointField = page.property?.timePoint;
       if (!timePointField?.timePoint?.value) return;
       return onTimeChange?.(
-        new Date(formatISO8601(timePointField?.timePoint?.value) ?? ""),
+        new Date(formatISO8601(timePointField?.timePoint?.value) ?? "")
       );
     },
-    [onTimeChange],
+    [onTimeChange]
   );
 
   const handleCurrentPageChange = useCallback(
@@ -167,8 +167,8 @@ export default (
       selectedStory?.pages,
       onStoryPageChange,
       handlePageTime,
-      visualizer,
-    ],
+      visualizer
+    ]
   );
 
   const pageInfo = useMemo(() => {
@@ -181,7 +181,7 @@ export default (
       pageTitles: pages.map((p) => p.property?.title?.title),
       maxPage: pages.length,
       onPageChange: (pageIndex: number) =>
-        handleCurrentPageChange(pages[pageIndex - 1]?.id),
+        handleCurrentPageChange(pages[pageIndex - 1]?.id)
     };
   }, [selectedStory, currentPageId, handleCurrentPageChange]);
 
@@ -195,18 +195,18 @@ export default (
         if (currentLayerIds) {
           vizRef.layers.show(
             ...currentLayerIds.filter((id) =>
-              currentPage.layerIds?.includes(id),
-            ),
+              currentPage.layerIds?.includes(id)
+            )
           );
           vizRef.layers.hide(
             ...currentLayerIds.filter(
-              (id) => !currentPage.layerIds?.includes(id),
-            ),
+              (id) => !currentPage.layerIds?.includes(id)
+            )
           );
         }
       }
     },
-    [currentPageId, selectedStory?.pages],
+    [currentPageId, selectedStory?.pages]
   );
 
   const handleLayerOverride = useCallback(
@@ -226,19 +226,19 @@ export default (
       layers?.hide(
         ...(allLayers
           .map(({ id }) => id)
-          .filter((id) => !layerIds?.includes(id)) ?? []),
+          .filter((id) => !layerIds?.includes(id)) ?? [])
       );
     },
-    [visualizer, layerOverride?.extensionId, handleLayerReset],
+    [visualizer, layerOverride?.extensionId, handleLayerReset]
   );
 
   useImperativeHandle(
     ref,
     () => ({
       currentPageId,
-      handleCurrentPageChange,
+      handleCurrentPageChange
     }),
-    [currentPageId, handleCurrentPageChange],
+    [currentPageId, handleCurrentPageChange]
   );
 
   // On page change, update visible layers in the viz based on page's initial settings.
@@ -273,7 +273,7 @@ export default (
     handlePageSelect,
     handleBlockSelect,
     handleBlockDoubleClick,
-    handleCurrentPageChange,
+    handleCurrentPageChange
   };
 };
 
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx b/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx
index 687edc1bf..3ea6f4155 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/index.tsx
@@ -2,7 +2,7 @@ import { BlockProvider } from "@reearth/beta/features/Visualizer/shared/contexts
 import { EditModeProvider } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
 import {
   BlockProps,
-  InstallableBlock,
+  InstallableBlock
 } from "@reearth/beta/features/Visualizer/shared/types";
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
@@ -32,12 +32,12 @@ export type StoryPanelProps = {
     pageId?: string | undefined,
     extensionId?: string | undefined,
     pluginId?: string | undefined,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   onStoryBlockMove?: (id: string, targetId: number, blockId: string) => void;
   onStoryBlockDelete?: (
     pageId?: string | undefined,
-    blockId?: string | undefined,
+    blockId?: string | undefined
   ) => Promise<void>;
   onPropertyValueUpdate?: (
     propertyId?: string,
@@ -45,22 +45,22 @@ export type StoryPanelProps = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
   renderBlock?: (block: BlockProps<StoryBlock>) => ReactNode;
 };
@@ -81,9 +81,9 @@ export const StoryPanel = memo(
         onPropertyItemAdd,
         onPropertyItemMove,
         onPropertyItemDelete,
-        renderBlock,
+        renderBlock
       },
-      ref: Ref<StoryPanelRef>,
+      ref: Ref<StoryPanelRef>
     ) => {
       const {
         pageInfo,
@@ -101,14 +101,14 @@ export const StoryPanel = memo(
         handlePageSelect,
         handleBlockSelect,
         handleBlockDoubleClick,
-        handleCurrentPageChange,
+        handleCurrentPageChange
       } = useHooks(
         {
           selectedStory,
           isEditable,
-          onStoryPageChange,
+          onStoryPageChange
         },
-        ref,
+        ref
       );
 
       const panelContext: StoryPanelContext = useMemo(
@@ -122,27 +122,27 @@ export const StoryPanel = memo(
             setCurrentPageId(pageId);
             setLayerOverride(undefined);
             element.scrollIntoView({
-              behavior: "instant",
+              behavior: "instant"
             } as unknown as ScrollToOptions); // TODO: when typescript is updated to 5.1, remove this cast
-          },
+          }
         }),
-        [selectedStory?.pages, setCurrentPageId, setLayerOverride],
+        [selectedStory?.pages, setCurrentPageId, setLayerOverride]
       );
 
       const editModeContext = useMemo(
         () => ({
           disableSelection,
-          onSelectionDisable: handleSelectionDisable,
+          onSelectionDisable: handleSelectionDisable
         }),
-        [disableSelection, handleSelectionDisable],
+        [disableSelection, handleSelectionDisable]
       );
 
       const blockContext = useMemo(
         () => ({
           layerOverride,
-          onLayerOverride: handleLayerOverride,
+          onLayerOverride: handleLayerOverride
         }),
-        [layerOverride, handleLayerOverride],
+        [layerOverride, handleLayerOverride]
       );
 
       return (
@@ -187,11 +187,11 @@ export const StoryPanel = memo(
                 </BlockProvider>
               </EditModeProvider>
             </PanelProvider>,
-            storyWrapperRef.current,
+            storyWrapperRef.current
           )) ?? <div />
       );
-    },
-  ),
+    }
+  )
 );
 
 export default StoryPanel;
@@ -201,6 +201,6 @@ const PanelWrapper = styled("div")<{ bgColor?: string }>(
     flex: `0 0 ${STORY_PANEL_WIDTH}px`,
     background: bgColor,
     width: `${STORY_PANEL_WIDTH}px`,
-    color: theme.content.weak,
-  }),
+    color: theme.content.weak
+  })
 );
diff --git a/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts b/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
index 7274e1221..d4c7b16f4 100644
--- a/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/StoryPanel/utils.ts
@@ -6,7 +6,7 @@ import type { Item } from "@reearth/services/api/propertyApi/utils";
 export const getFieldValue = (
   items: Item[],
   fieldId: string,
-  fieldGroup?: string,
+  fieldGroup?: string
 ) => {
   const d =
     items.find((i) => i.schemaGroup === (fieldGroup ?? "default")) ?? items[0];
@@ -21,27 +21,27 @@ export const getFieldValue = (
             obj[field.id] = field.value;
             return obj;
           },
-          {},
-        ),
+          {}
+        )
       }));
 };
 
 export const calculatePaddingValue = (
   defaultValue: Spacing,
   value?: Spacing,
-  editorMode?: boolean,
+  editorMode?: boolean
 ) => {
   const calculateValue = (
     position: keyof Spacing,
-    v?: number,
+    v?: number
   ): Record<string, number> => {
     if (v === undefined) {
       return {
-        [position]: editorMode ? defaultValue[position] : 0,
+        [position]: editorMode ? defaultValue[position] : 0
       };
     }
     return {
-      [position]: v,
+      [position]: v
     };
   };
 
@@ -49,8 +49,8 @@ export const calculatePaddingValue = (
     ? Object.assign(
         {},
         ...Object.keys(value).map((p) =>
-          calculateValue(p as keyof Spacing, value[p as keyof Spacing]),
-        ),
+          calculateValue(p as keyof Spacing, value[p as keyof Spacing])
+        )
       )
     : defaultValue;
 };
@@ -67,7 +67,7 @@ const MONTH_LABEL_LIST = [
   "Sep",
   "Oct",
   "Nov",
-  "Dec",
+  "Dec"
 ];
 
 export const formatTimezone = (time: number) => {
@@ -82,12 +82,12 @@ export const formatTimezone = (time: number) => {
 export const formatDateForTimeline = (
   time: number,
   options: { detail?: boolean } = {},
-  timezone?: string,
+  timezone?: string
 ) => {
   const localTimezoneOffset = new Date().getTimezoneOffset();
   const d = new Date(
     time +
-      (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000,
+      (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000
   );
 
   const year = d.getFullYear();
@@ -106,12 +106,12 @@ export const formatDateForTimeline = (
 export const formatDateForSliderTimeline = (
   time: number,
   options: { detail?: boolean } = {},
-  timezone?: string,
+  timezone?: string
 ) => {
   const localTimezoneOffset = new Date().getTimezoneOffset();
   const d = new Date(
     time +
-      (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000,
+      (localTimezoneOffset + Number(timezone?.split(":")[0]) * 60) * 60 * 1000
   );
 
   const month = MONTH_LABEL_LIST[d.getMonth()];
@@ -169,14 +169,14 @@ export const formatRangeDateAndTime = (data: string) => {
   const time = data.slice(lastIdx + 1);
   return {
     date,
-    time,
+    time
   };
 };
 
 export const convertPositionToTime = (
   e: MouseEvent,
   start: number,
-  end: number,
+  end: number
 ) => {
   const curTar = e.currentTarget as HTMLElement;
   const width = curTar.scrollWidth - 32;
@@ -207,7 +207,7 @@ export const formatISO8601 = (time: string) => {
     return time
       .replace(
         timezone,
-        `${splitZone[0][0]}0${splitZone[0][1]}:${splitZone[1]}`,
+        `${splitZone[0][0]}0${splitZone[0][1]}:${splitZone[1]}`
       )
       .replace(" ", "");
   }
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx
index b0d9ad930..9f2ec79c8 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx
@@ -41,7 +41,7 @@ export type Props = {
   theme?: Theme;
   onFlyTo?: (
     target: string | FlyToDestination,
-    options?: { duration?: number },
+    options?: { duration?: number }
   ) => void;
 };
 
@@ -51,7 +51,7 @@ export default function MenuButton({
   location,
   align,
   theme,
-  onFlyTo,
+  onFlyTo
 }: Props): JSX.Element {
   const [visibleMenuButton, setVisibleMenuButton] = useState(false);
 
@@ -84,17 +84,17 @@ export default function MenuButton({
           enabled: !visibleMenuButton,
           options: {
             scroll: false,
-            resize: false,
-          },
+            resize: false
+          }
         },
         {
           name: "offset",
           options: {
-            offset: [0, 2],
-          },
-        },
-      ],
-    },
+            offset: [0, 2]
+          }
+        }
+      ]
+    }
   );
 
   const handleClick = useCallback(
@@ -135,7 +135,7 @@ export default function MenuButton({
       }
       setVisibleMenuButton(false);
     },
-    [onFlyTo, visibleMenuButton],
+    [onFlyTo, visibleMenuButton]
   );
 
   return (
@@ -156,7 +156,7 @@ export default function MenuButton({
               marginLeft:
                 b?.buttonIcon && b?.buttonStyle === "texticon"
                   ? "5px"
-                  : undefined,
+                  : undefined
             }}
           >
             {b?.buttonTitle}
@@ -185,7 +185,7 @@ export default function MenuButton({
                     size="footnote"
                     customColor
                     otherProperties={{
-                      marginLeft: i.menuIcon ? "5px" : undefined,
+                      marginLeft: i.menuIcon ? "5px" : undefined
                     }}
                   >
                     {i.menuTitle}
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx
index 7d8b7d18c..aa69b5579 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx
@@ -7,7 +7,7 @@ import Button, { Props } from ".";
 
 export default {
   component: Button,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 export const Default: Story<Props> = (args) => <Button {...args} />;
@@ -28,23 +28,23 @@ Default.args = {
             fov: CesiumMath.toRadians(60),
             heading: 0,
             pitch: 0,
-            roll: 0,
-          },
+            roll: 0
+          }
         },
         {
           id: "hoge",
-          menuType: "border",
+          menuType: "border"
         },
         {
           id: "GitHub",
           menuType: "link",
           menuTitle: "GitHub",
-          menuLink: "https://github.com",
-        },
-      ],
-    },
+          menuLink: "https://github.com"
+        }
+      ]
+    }
   },
   context: { ...contextEvents },
   isBuilt: false,
-  isEditable: false,
+  isEditable: false
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx
index 9a415f8fb..fc46bed4f 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.tsx
@@ -4,7 +4,7 @@ import type { ComponentProps as WidgetProps } from "../..";
 
 import MenuButton, {
   Button as ButtonType,
-  MenuItem as MenuItemType,
+  MenuItem as MenuItemType
 } from "./MenuButton";
 
 export type Props = WidgetProps<Property>;
@@ -18,7 +18,7 @@ export type Property = {
 const Menu = ({
   widget,
   theme,
-  context: { onFlyTo } = {},
+  context: { onFlyTo } = {}
 }: Props): JSX.Element | null => {
   const { default: button, menu: menuItems } = widget.property ?? {};
 
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts
index ab94ad49e..a2f2c28bb 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/hooks.ts
@@ -3,7 +3,7 @@ import {
   useCallback,
   useEffect,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { calculateDegreeOfCompass } from "./utils";
@@ -23,7 +23,7 @@ export const useNavigator = ({
   onRotate,
   onMoveOrbit,
   onStartOrbit,
-  onEndOrbit,
+  onEndOrbit
 }: {
   degree: number;
   onRotate?: (degree: number) => void;
@@ -56,15 +56,15 @@ export const useNavigator = ({
             x: rect.x,
             y: rect.y,
             height: compass.clientHeight,
-            width: compass.clientWidth,
+            width: compass.clientWidth
           },
-          { x: e.clientX, y: e.clientY },
+          { x: e.clientX, y: e.clientY }
         );
         isRotatingRef.current = true;
         setCompassDegree(degree);
         onRotateRef.current?.(degree);
       },
-      [onRotateRef],
+      [onRotateRef]
     );
 
   const rotateCompassWhileMovingAngle = useCallback(() => {
@@ -92,9 +92,9 @@ export const useNavigator = ({
           x: rect.x,
           y: rect.y,
           height: compass.clientHeight,
-          width: compass.clientWidth,
+          width: compass.clientWidth
         },
-        { x: e.clientX, y: e.clientY },
+        { x: e.clientX, y: e.clientY }
       );
       setIsMovingAngle(true);
       isMovingAngleRef.current = true;
@@ -108,8 +108,8 @@ export const useNavigator = ({
       rotateCompassWhileMovingAngle,
       onMoveOrbitRef,
       isMovingAngleRef,
-      onStartOrbitRef,
-    ],
+      onStartOrbitRef
+    ]
   );
 
   useEffect(() => {
@@ -124,9 +124,9 @@ export const useNavigator = ({
           x: rect.x,
           y: rect.y,
           height: compass.clientHeight,
-          width: compass.clientWidth,
+          width: compass.clientWidth
         },
-        { x: e.clientX, y: e.clientY },
+        { x: e.clientX, y: e.clientY }
       );
       setCompassDegree(degree);
       onRotateRef.current?.(degree);
@@ -143,9 +143,9 @@ export const useNavigator = ({
           x: rect.x,
           y: rect.y,
           height: compass.clientHeight,
-          width: compass.clientWidth,
+          width: compass.clientWidth
         },
-        { x: e.clientX, y: e.clientY },
+        { x: e.clientX, y: e.clientY }
       );
       setCompassFocusDegree(degree);
       onMoveOrbitRef.current?.(degree);
@@ -172,7 +172,7 @@ export const useNavigator = ({
     onStartOrbitRef,
     onEndOrbitRef,
     onMoveOrbitRef,
-    onRotateRef,
+    onRotateRef
   ]);
 
   useEffect(() => {
@@ -187,6 +187,6 @@ export const useNavigator = ({
     compassFocusDegree,
     isMovingAngle,
     handleOnMouseDownCompass,
-    handleOnMouseDownAngle,
+    handleOnMouseDownAngle
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx
index 4d9842d90..4671cff2d 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.stories.tsx
@@ -4,7 +4,7 @@ import Navigator, { Props } from ".";
 
 export default {
   component: Navigator,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 export const Normal: Story<Props> = ({ ...args }) => (
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx
index 4003a24ef..62f09acb7 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.test.tsx
@@ -62,7 +62,7 @@ test("it should orbit by mouse operation", async () => {
       onStartOrbit={onStartOrbitMock}
       onEndOrbit={onEndOrbitMock}
       onMoveOrbit={onMoveOrbitMock}
-    />,
+    />
   );
 
   const angle = screen.getByLabelText("aria-label-adjust-angle");
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx
index 54baed9cc..a3682c585 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx
@@ -48,7 +48,7 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
   onRestoreRotate,
   onClickHelp,
   onZoomIn,
-  onZoomOut,
+  onZoomOut
 }) {
   const t = useT();
 
@@ -58,7 +58,7 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
     compassFocusDegree,
     isMovingAngle,
     handleOnMouseDownAngle,
-    handleOnMouseDownCompass,
+    handleOnMouseDownCompass
   } = useNavigator({ degree, onRotate, onStartOrbit, onEndOrbit, onMoveOrbit });
 
   return (
@@ -79,7 +79,7 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
           {isMovingAngle && (
             <CompassFocusIcon
               style={{
-                transform: `rotate(${compassFocusDegree}deg)`,
+                transform: `rotate(${compassFocusDegree}deg)`
               }}
               data-testid="compassFocus"
             >
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts
index 4e606a965..f117970e5 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.test.ts
@@ -6,15 +6,15 @@ const compassPosition = {
   x: 0,
   y: 0,
   height: 50,
-  width: 50,
+  width: 50
 };
 
 test("it should be 0˚ when x axis is half of width and y axis is 0", () => {
   expect(
     calculateDegreeOfCompass(compassPosition, {
       x: compassPosition.width / 2,
-      y: 0,
-    }),
+      y: 0
+    })
   ).toBe(0);
 });
 
@@ -22,8 +22,8 @@ test("it should be 90˚ when x axis equals to width and y axis half of height",
   expect(
     calculateDegreeOfCompass(compassPosition, {
       x: compassPosition.width,
-      y: compassPosition.height / 2,
-    }),
+      y: compassPosition.height / 2
+    })
   ).toBe(90);
 });
 
@@ -31,7 +31,7 @@ test("it should be -90˚ when x axis is 0 and y axis half of height", () => {
   expect(
     calculateDegreeOfCompass(compassPosition, {
       x: 0,
-      y: compassPosition.height / 2,
-    }),
+      y: compassPosition.height / 2
+    })
   ).toBe(270);
 });
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.ts
index b140ef7d5..8ffe0afc3 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/utils.ts
@@ -8,11 +8,11 @@ export const calculateDegreeOfCompass = (
     height: number;
     width: number;
   },
-  currentPosition: { x: number; y: number },
+  currentPosition: { x: number; y: number }
 ) => {
   const compassCenterPos = {
     x: compass.x + compass.width / 2,
-    y: compass.y + compass.height / 2,
+    y: compass.y + compass.height / 2
   };
 
   // It assumes that compassCenterPos is center, calculate x,y axis
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts
index 8f0fde538..f69871fd3 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/hooks.ts
@@ -11,7 +11,7 @@ export default function ({
   onZoomOut,
   onCameraOrbit,
   onCameraRotateRight,
-  onFlyTo,
+  onFlyTo
 }: {
   camera?: Camera;
   initialCamera?: Camera;
@@ -23,7 +23,7 @@ export default function ({
   onCameraRotateRight?: (radian: number) => void;
   onFlyTo?: (
     target: string | FlyToDestination,
-    options?: { duration?: number },
+    options?: { duration?: number }
   ) => void;
 }) {
   const [degree, setDegree] = useState(0);
@@ -36,7 +36,7 @@ export default function ({
       const radian = degreeToRadian(deg);
       onCameraRotateRight?.(radian);
     },
-    [onCameraRotateRight],
+    [onCameraRotateRight]
   );
   const handleOnStartOrbit = useCallback(() => {
     isMovingOrbit.current = true;
@@ -101,7 +101,7 @@ export default function ({
       onRestoreRotate: handleOnRestoreRotate,
       onHelp: handleOnClickHelp,
       onZoomIn: handleOnZoomIn,
-      onZoomOut: handleOnZoomOut,
-    },
+      onZoomOut: handleOnZoomOut
+    }
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx
index d53e000fb..38a14d5aa 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.stories.tsx
@@ -6,12 +6,12 @@ import Component, { Props } from ".";
 
 export default {
   component: Component,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 const Template: Story<Props> = (args) => <Component {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  context: { ...contextEvents },
+  context: { ...contextEvents }
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.tsx
index 0c4f8eb83..7868f73f9 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/index.tsx
@@ -16,8 +16,8 @@ const Navigator = ({
     onCameraRotateRight,
     onFlyTo,
     onZoomIn,
-    onZoomOut,
-  } = {},
+    onZoomOut
+  } = {}
 }: Props): JSX.Element | null => {
   const { degree, events } = useHooks({
     camera,
@@ -28,7 +28,7 @@ const Navigator = ({
     onCameraRotateRight,
     onFlyTo,
     onZoomIn,
-    onZoomOut,
+    onZoomOut
   });
 
   return <NavigatorUI theme={theme} degree={degree} {...events} />;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
index 6a0399be4..006d4ec9b 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
@@ -6,7 +6,7 @@ import {
   EPOCH_SEC,
   GAP_HORIZONTAL,
   HOURS_SECS,
-  SCALE_INTERVAL,
+  SCALE_INTERVAL
 } from "./constants";
 import ScaleList from "./ScaleList";
 
@@ -27,7 +27,7 @@ test("it should render memory and date label", () => {
       scaleInterval={SCALE_INTERVAL}
       strongScaleMinutes={12}
       gapHorizontal={GAP_HORIZONTAL}
-    />,
+    />
   );
 
   const children = Array.from(container.querySelector("div")?.children || []);
@@ -45,7 +45,7 @@ test("it should render memory and date label", () => {
     "Jul 04 2022 04:00:00.00",
     "Jul 04 2022 06:00:00.00",
     "Jul 04 2022 08:00:00.00",
-    "Jul 04 2022 10:00:00.00",
+    "Jul 04 2022 10:00:00.00"
   ];
 
   expectedStrongScaleLabelList.forEach((label) => {
@@ -68,7 +68,7 @@ test("it should render memory and date label when scaleInterval is changed", ()
       scaleInterval={scaleInterval}
       strongScaleMinutes={12}
       gapHorizontal={GAP_HORIZONTAL}
-    />,
+    />
   );
 
   const children = Array.from(container.querySelector("div")?.children || []);
@@ -82,7 +82,7 @@ test("it should render memory and date label when scaleInterval is changed", ()
     "Jul 04 2022 00:00:00.00",
     "Jul 04 2022 03:00:00.00",
     "Jul 04 2022 06:00:00.00",
-    "Jul 04 2022 09:00:00.00",
+    "Jul 04 2022 09:00:00.00"
   ];
 
   expectedStrongScaleLabelList.forEach((label) => {
@@ -106,7 +106,7 @@ test("it should render memory and date label when strongScaleMinutes is changed"
       scaleInterval={scaleInterval}
       strongScaleMinutes={strongScaleMinutes}
       gapHorizontal={GAP_HORIZONTAL}
-    />,
+    />
   );
 
   const children = Array.from(container.querySelector("div")?.children || []);
@@ -134,7 +134,7 @@ test("it should render memory and date label when strongScaleMinutes is changed"
     "Jul 04 2022 06:00:00.00",
     "Jul 04 2022 07:00:00.00",
     "Jul 04 2022 08:00:00.00",
-    "Jul 04 2022 09:00:00.00",
+    "Jul 04 2022 09:00:00.00"
   ];
 
   expectedStrongScaleLabelList.forEach((label) => {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
index 34efb19a1..798d0be4f 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
@@ -6,7 +6,7 @@ import {
   EPOCH_SEC,
   STRONG_SCALE_WIDTH,
   NORMAL_SCALE_WIDTH,
-  PADDING_HORIZONTAL,
+  PADDING_HORIZONTAL
 } from "./constants";
 import { formatDateForTimeline } from "./utils";
 
@@ -43,7 +43,7 @@ const ScaleListInner: React.FC<ScaleListInnerProps> = memo(
     scaleCount,
     hoursCount,
     scaleInterval,
-    strongScaleMinutes,
+    strongScaleMinutes
   }) {
     const lastStrongScaleIdx = scaleCount - strongScaleMinutes;
     return (
@@ -55,8 +55,8 @@ const ScaleListInner: React.FC<ScaleListInnerProps> = memo(
             const label = formatDateForTimeline(
               start.getTime() + idx * EPOCH_SEC * scaleInterval,
               {
-                detail: true,
-              },
+                detail: true
+              }
             );
 
             return (
@@ -87,7 +87,7 @@ const ScaleListInner: React.FC<ScaleListInnerProps> = memo(
         })}
       </>
     );
-  },
+  }
 );
 
 export type StyledColorProps = {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts
index d47567cd6..afc8b1300 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/hooks.ts
@@ -9,7 +9,7 @@ import React, {
   useMemo,
   useRef,
   useState,
-  WheelEventHandler,
+  WheelEventHandler
 } from "react";
 
 import {
@@ -21,7 +21,7 @@ import {
   PADDING_HORIZONTAL,
   HOURS_SECS,
   NORMAL_SCALE_WIDTH,
-  STRONG_SCALE_WIDTH,
+  STRONG_SCALE_WIDTH
 } from "./constants";
 import { TimeEventHandler, Range } from "./types";
 import { calcScaleInterval, formatDateForTimeline } from "./utils";
@@ -56,7 +56,7 @@ const useTimelineInteraction = ({
   setScaleWidth,
   setZoom,
   onClick,
-  onDrag,
+  onDrag
 }: InteractionOption) => {
   const [isMouseDown, setIsMouseDown] = useState(false);
   const handleOnMouseDown = useCallback(() => {
@@ -87,7 +87,7 @@ const useTimelineInteraction = ({
         curTar.scroll(curTar.scrollLeft - scrollAmount, 0);
       }
     },
-    [onDrag, start, end, isMouseDown],
+    [onDrag, start, end, isMouseDown]
   );
 
   useEffect(() => {
@@ -102,7 +102,7 @@ const useTimelineInteraction = ({
       if (!onClick) return;
       onClick(convertPositionToTime(e, { start, end }));
     },
-    [onClick, end, start],
+    [onClick, end, start]
   );
 
   const handleOnWheel: WheelEventHandler = useCallback(
@@ -112,10 +112,10 @@ const useTimelineInteraction = ({
       if (isHorizontal) return;
 
       setZoom(() =>
-        Math.min(Math.max(1, zoom + deltaY * -0.01), MAX_ZOOM_RATIO),
+        Math.min(Math.max(1, zoom + deltaY * -0.01), MAX_ZOOM_RATIO)
       );
     },
-    [zoom, setZoom],
+    [zoom, setZoom]
   );
 
   useEffect(() => {
@@ -137,7 +137,7 @@ const useTimelineInteraction = ({
     onMouseDown: handleOnMouseDown,
     onMouseMove: handleOnMouseMove,
     onClick: handleOnClick,
-    onWheel: handleOnWheel,
+    onWheel: handleOnWheel
   };
 };
 
@@ -152,7 +152,7 @@ const useTimelinePlayer = ({
   currentTime,
   onPlay,
   onPlayReversed,
-  onSpeedChange,
+  onSpeedChange
 }: TimelinePlayerOptions) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [isPlayingReversed, setIsPlayingReversed] = useState(false);
@@ -161,7 +161,7 @@ const useTimelinePlayer = ({
     (e) => {
       onSpeedChange?.(parseInt(e.currentTarget.value, 10));
     },
-    [onSpeedChange],
+    [onSpeedChange]
   );
   const toggleIsPlaying = useCallback(() => {
     if (isPlayingReversed) {
@@ -186,7 +186,7 @@ const useTimelinePlayer = ({
     const time = textDate.slice(lastIdx);
     return {
       date,
-      time,
+      time
     };
   }, [currentTime]);
 
@@ -200,7 +200,7 @@ const useTimelinePlayer = ({
     isPlaying,
     isPlayingReversed,
     toggleIsPlaying,
-    toggleIsPlayingReversed,
+    toggleIsPlayingReversed
   };
 };
 
@@ -213,14 +213,14 @@ const getRange = (range?: { [K in keyof Range]?: Range[K] }): Range => {
   if (start !== undefined && end === undefined) {
     return {
       start,
-      end: start + DAY_SECS * EPOCH_SEC,
+      end: start + DAY_SECS * EPOCH_SEC
     };
   }
 
   if (start === undefined && end !== undefined) {
     return {
       start: Math.max(end - DAY_SECS * EPOCH_SEC, 0),
-      end,
+      end
     };
   }
 
@@ -228,7 +228,7 @@ const getRange = (range?: { [K in keyof Range]?: Range[K] }): Range => {
 
   return {
     start: defaultStart,
-    end: defaultStart + DAY_SECS * EPOCH_SEC,
+    end: defaultStart + DAY_SECS * EPOCH_SEC
   };
 };
 
@@ -249,20 +249,20 @@ export const useTimeline = ({
   onDrag,
   onPlay,
   onPlayReversed,
-  onSpeedChange,
+  onSpeedChange
 }: Option) => {
   const range = useMemo(() => {
     const range = getRange(_range);
     if (process.env.NODE_ENV !== "production") {
       if (range.start > range.end) {
         throw new Error(
-          "Out of range error. `range.start` should be less than `range.end`",
+          "Out of range error. `range.start` should be less than `range.end`"
         );
       }
     }
     return {
       start: truncMinutes(new Date(range.start)).getTime(),
-      end: truncMinutes(new Date(range.end)).getTime(),
+      end: truncMinutes(new Date(range.end)).getTime()
     };
   }, [_range]);
   const { start, end } = range;
@@ -278,11 +278,11 @@ export const useTimeline = ({
     scaleCount,
     scaleInterval,
     strongScaleMinutes,
-    gap: gapHorizontal,
+    gap: gapHorizontal
   } = useMemo(
     () =>
       calcScaleInterval(epochDiff, zoom, { gap: zoomedGap, width: scaleWidth }),
-    [epochDiff, zoom, scaleWidth, zoomedGap],
+    [epochDiff, zoom, scaleWidth, zoomedGap]
   );
 
   // Count hours scale
@@ -292,13 +292,13 @@ export const useTimeline = ({
   const currentPosition = useMemo(() => {
     const diff = Math.min(
       (currentTime - start) / EPOCH_SEC / scaleInterval,
-      scaleCount,
+      scaleCount
     );
     const strongScaleCount = diff / strongScaleMinutes - 1;
     return Math.max(
       (diff - strongScaleCount) * (NORMAL_SCALE_WIDTH + gapHorizontal) +
         strongScaleCount * (STRONG_SCALE_WIDTH + gapHorizontal),
-      0,
+      0
     );
   }, [
     currentTime,
@@ -306,7 +306,7 @@ export const useTimeline = ({
     scaleCount,
     gapHorizontal,
     scaleInterval,
-    strongScaleMinutes,
+    strongScaleMinutes
   ]);
 
   const events = useTimelineInteraction({
@@ -316,13 +316,13 @@ export const useTimeline = ({
     onClick,
     onDrag,
     scaleElement,
-    setScaleWidth,
+    setScaleWidth
   });
   const player = useTimelinePlayer({
     currentTime,
     onPlay,
     onPlayReversed,
-    onSpeedChange,
+    onSpeedChange
   });
 
   return {
@@ -336,6 +336,6 @@ export const useTimeline = ({
     events,
     player,
     scaleElement,
-    shouldScroll: zoom !== 1,
+    shouldScroll: zoom !== 1
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.stories.tsx
index d50f84635..ae86b37d8 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.stories.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import Timeline, { Props } from ".";
 
 export default {
-  component: Timeline,
+  component: Timeline
 } as Meta;
 
 export const Normal: Story<Props> = () => (
@@ -12,7 +12,7 @@ export const Normal: Story<Props> = () => (
     currentTime={new Date("2022-06-30T12:20:00.000").getTime()}
     range={{
       start: new Date("2022-06-30T21:00:00.000").getTime(),
-      end: new Date("2022-07-03T12:21:21.221").getTime(),
+      end: new Date("2022-07-03T12:21:21.221").getTime()
     }}
     isOpened={true}
   />
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
index 7ed8bb155..8424064ad 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
@@ -53,7 +53,7 @@ test("it should get time from clicked position", () => {
   vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
 
   fireEvent.click(slider, {
-    clientX: PADDING_HORIZONTAL + BORDER_WIDTH + currentPosition,
+    clientX: PADDING_HORIZONTAL + BORDER_WIDTH + currentPosition
   });
 
   const iconWrapper = screen.getByTestId("knob-icon");
@@ -76,34 +76,34 @@ test("it should get time from mouse moved position", () => {
   expect(
     Math.abs(
       Math.trunc(
-        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10),
-      ),
-    ),
+        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10)
+      )
+    )
   ).toBe(0);
 
   // It should not move
   fireEvent.mouseMove(slider, {
-    clientX,
+    clientX
   });
   expect(
     Math.abs(
       Math.trunc(
-        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10),
-      ),
-    ),
+        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10)
+      )
+    )
   ).toBe(0);
 
   // It should move
   fireEvent.mouseDown(slider);
   fireEvent.mouseMove(slider, {
-    clientX,
+    clientX
   });
   fireEvent.mouseUp(slider);
   expect(screen.getByTestId("knob-icon").style.left).toBe(expectedLeft);
 
   // It should not move
   fireEvent.mouseMove(slider, {
-    clientX: clientX * 2,
+    clientX: clientX * 2
   });
   expect(screen.getByTestId("knob-icon").style.left).toBe(expectedLeft);
 });
@@ -114,24 +114,24 @@ test("it should get correct strongScaleHours from amount of scroll", () => {
   vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
 
   fireEvent.wheel(slider, {
-    deltaY: -50,
+    deltaY: -50
   });
   expect(
     parseInt(
       slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "",
-      10,
-    ),
+      10
+    )
   ).toBe(GAP_HORIZONTAL * 1.5);
 
   // Reset gap and increase memory.
   fireEvent.wheel(slider, {
-    deltaY: -50,
+    deltaY: -50
   });
   expect(
     parseInt(
       slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "",
-      10,
-    ),
+      10
+    )
   ).toBe(GAP_HORIZONTAL);
 });
 
@@ -139,7 +139,7 @@ test("it should invoke onPlay or onPlayReversed when play button is clicked", as
   const mockOnPlay = vitest.fn();
   const mockOnPlayReversed = vitest.fn();
   render(
-    <TimelineWrapper onPlay={mockOnPlay} onPlayReversed={mockOnPlayReversed} />,
+    <TimelineWrapper onPlay={mockOnPlay} onPlayReversed={mockOnPlayReversed} />
   );
 
   // TODO: get element by label text
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx
index 9c8d83815..8e20058e8 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx
@@ -45,7 +45,7 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
   onPlayReversed,
   onOpen,
   onClose,
-  onSpeedChange: onSpeedChangeProps,
+  onSpeedChange: onSpeedChangeProps
 }) {
   const {
     startDate,
@@ -64,8 +64,8 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
       isPlayingReversed,
       toggleIsPlaying,
       toggleIsPlayingReversed,
-      onSpeedChange,
-    },
+      onSpeedChange
+    }
   } = useTimeline({
     currentTime,
     range,
@@ -73,7 +73,7 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
     onDrag,
     onPlay,
     onPlayReversed,
-    onSpeedChange: onSpeedChangeProps,
+    onSpeedChange: onSpeedChangeProps
   });
 
   return isOpened ? (
@@ -155,7 +155,7 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
           data-testid="knob-icon"
           publishedTheme={theme}
           style={{
-            left: currentPosition + PADDING_HORIZONTAL - KNOB_SIZE / 2,
+            left: currentPosition + PADDING_HORIZONTAL - KNOB_SIZE / 2
           }}
         >
           <Icon icon="ellipse" size={KNOB_SIZE} />
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts
index 0045f45d3..90cd3449d 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.test.ts
@@ -9,14 +9,14 @@ test("calcScaleInterval()", () => {
       1,
       {
         gap: 10,
-        width: 300,
-      },
-    ),
+        width: 300
+      }
+    )
   ).toEqual({
     gap: 10.358333333333333,
     scaleCount: 24,
     scaleInterval: 3600,
-    strongScaleMinutes: 10,
+    strongScaleMinutes: 10
   });
   expect(
     calcScaleInterval(
@@ -24,13 +24,13 @@ test("calcScaleInterval()", () => {
       2,
       {
         gap: 10,
-        width: 300,
-      },
-    ),
+        width: 300
+      }
+    )
   ).toEqual({
     gap: 10,
     scaleCount: 48,
     scaleInterval: 1800,
-    strongScaleMinutes: 15,
+    strongScaleMinutes: 15
   });
 });
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts
index 09864dce6..4af65060e 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/utils.ts
@@ -5,7 +5,7 @@ import {
   NORMAL_SCALE_WIDTH,
   PADDING_HORIZONTAL,
   SCALE_LABEL_WIDTH,
-  STRONG_SCALE_WIDTH,
+  STRONG_SCALE_WIDTH
 } from "./constants";
 
 const MONTH_LABEL_LIST = [
@@ -20,12 +20,12 @@ const MONTH_LABEL_LIST = [
   "Sep",
   "Oct",
   "Nov",
-  "Dec",
+  "Dec"
 ];
 
 export const formatDateForTimeline = (
   time: number,
-  options: { detail?: boolean } = {},
+  options: { detail?: boolean } = {}
 ) => {
   const d = new Date(time);
   const year = d.getFullYear();
@@ -58,7 +58,7 @@ const ADDITIONAL_STRONG_SCALE_MINUTES = 5;
 export const calcScaleInterval = (
   rangeDiff: number,
   zoom: number,
-  styles: { width: number; gap: number },
+  styles: { width: number; gap: number }
 ) => {
   const timelineWidth = styles.width - (PADDING_HORIZONTAL + BORDER_WIDTH) * 2;
   const scaleWidth = styles.gap + NORMAL_SCALE_WIDTH;
@@ -87,7 +87,7 @@ export const calcScaleInterval = (
   // Adjust strong scale position
   const diffLabelWidth = Math.max(
     SCALE_LABEL_WIDTH - nextGap * DEFAULT_STRONG_SCALE_MINUTES,
-    0,
+    0
   );
   const strongScaleMinutes =
     DEFAULT_STRONG_SCALE_MINUTES +
@@ -98,6 +98,6 @@ export const calcScaleInterval = (
     scaleCount: Math.trunc(scaleCount),
     scaleInterval: Math.trunc(zoomedScaleInterval),
     strongScaleMinutes,
-    gap: nextGap,
+    gap: nextGap
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts
index a0e5e9ac1..2c65c5f4d 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/hooks.ts
@@ -2,7 +2,7 @@ import type { TimeEventHandler } from "@reearth/beta/features/Visualizer/Crust/W
 import {
   TickEvent,
   TickEventCallback,
-  TimelineManagerRef,
+  TimelineManagerRef
 } from "@reearth/core";
 import { useState, useCallback, useEffect, useRef } from "react";
 
@@ -15,7 +15,7 @@ const makeRange = (startTime?: number, stopTime?: number) => {
   const now = Date.now() - 3600000;
   return {
     start: startTime || now - MAX_RANGE,
-    end: stopTime || now,
+    end: stopTime || now
   };
 };
 
@@ -31,7 +31,7 @@ export const useTimeline = ({
   onSpeedChange,
   onTick,
   removeTickEventListener,
-  onExtend,
+  onExtend
 }: {
   widget: Widget;
   timelineManagerRef?: TimelineManagerRef;
@@ -48,12 +48,12 @@ export const useTimeline = ({
   const [range, setRange] = useState(() =>
     makeRange(
       timelineManagerRef?.current?.timeline?.start?.getTime(),
-      timelineManagerRef?.current?.timeline?.stop?.getTime(),
-    ),
+      timelineManagerRef?.current?.timeline?.stop?.getTime()
+    )
   );
   const [isOpened, setIsOpened] = useState(true);
   const [currentTime, setCurrentTime] = useState(() =>
-    getOrNewDate(timelineManagerRef?.current?.timeline?.current).getTime(),
+    getOrNewDate(timelineManagerRef?.current?.timeline?.current).getTime()
   );
   const isClockInitialized = useRef(false);
   const clockStartTime =
@@ -91,7 +91,7 @@ export const useTimeline = ({
       }
       return cur;
     },
-    [range, onTimeChange],
+    [range, onTimeChange]
   );
 
   const handleTimeEvent: TimeEventHandler = useCallback(
@@ -100,7 +100,7 @@ export const useTimeline = ({
       onTimeChange?.(t);
       setCurrentTime(currentTime);
     },
-    [onTimeChange],
+    [onTimeChange]
   );
 
   const handleOnPlay = useCallback(
@@ -113,7 +113,7 @@ export const useTimeline = ({
       }
       onSpeedChange?.(Math.abs(speed));
     },
-    [onPause, onPlay, onSpeedChange, speed],
+    [onPause, onPlay, onSpeedChange, speed]
   );
 
   const handleOnPlayReversed = useCallback(
@@ -126,7 +126,7 @@ export const useTimeline = ({
       }
       onSpeedChange?.(Math.abs(speed) * -1);
     },
-    [onPause, onPlay, onSpeedChange, speed],
+    [onPause, onPlay, onSpeedChange, speed]
   );
 
   const handleOnSpeedChange = useCallback(
@@ -138,10 +138,10 @@ export const useTimeline = ({
       onSpeedChange?.(
         (timelineManagerRef?.current?.options?.multiplier ?? 1) > 0
           ? absSpeed
-          : absSpeed * -1,
+          : absSpeed * -1
       );
     },
-    [onSpeedChange, timelineManagerRef],
+    [onSpeedChange, timelineManagerRef]
   );
 
   // Initialize clock value
@@ -164,7 +164,7 @@ export const useTimeline = ({
         return prev;
       });
     },
-    [],
+    []
   );
 
   const overriddenStart =
@@ -176,7 +176,7 @@ export const useTimeline = ({
   useEffect(() => {
     handleRange(
       overriddenStart ?? clockStartTime,
-      overriddenStop ?? clockStopTime,
+      overriddenStop ?? clockStopTime
     );
     setSpeed(Math.abs(clockSpeed));
   }, [
@@ -185,7 +185,7 @@ export const useTimeline = ({
     clockSpeed,
     overriddenStart,
     overriddenStop,
-    handleRange,
+    handleRange
   ]);
 
   useEffect(() => {
@@ -207,7 +207,7 @@ export const useTimeline = ({
     switchCurrentTimeToStart,
     handleRange,
     range.start,
-    range.end,
+    range.end
   ]);
 
   const onTimeChangeRef = useRef<typeof onTimeChange>();
@@ -222,7 +222,7 @@ export const useTimeline = ({
     if (overriddenCurrentTime) {
       const t = Math.max(
         Math.min(range.end, overriddenCurrentTime),
-        range.start,
+        range.start
       );
       setCurrentTime(t);
       // onTimeChangeRef.current?.(new Date(t));
@@ -249,7 +249,7 @@ export const useTimeline = ({
       onDrag: handleTimeEvent,
       onPlay: handleOnPlay,
       onPlayReversed: handleOnPlayReversed,
-      onSpeedChange: handleOnSpeedChange,
-    },
+      onSpeedChange: handleOnSpeedChange
+    }
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx
index a406aa26c..c365a2658 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.stories.tsx
@@ -6,7 +6,7 @@ import Component, { Props } from ".";
 
 export default {
   component: Component,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 const Template: Story<Props> = (args) => <Component {...args} />;
@@ -18,10 +18,10 @@ Default.args = {
     id: "",
     extended: {
       horizontally: false,
-      vertically: false,
-    },
+      vertically: false
+    }
   },
-  context: { ...contextEvents },
+  context: { ...contextEvents }
 };
 
 export const Extended = Template.bind({});
@@ -31,8 +31,8 @@ Extended.args = {
     id: "",
     extended: {
       horizontally: true,
-      vertically: false,
-    },
+      vertically: false
+    }
   },
-  context: { ...contextEvents },
+  context: { ...contextEvents }
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx
index ee4970e54..ad0244e40 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/index.tsx
@@ -19,8 +19,8 @@ const Timeline = ({
     onSpeedChange,
     onTimeChange,
     onTick,
-    removeTickEventListener,
-  } = {},
+    removeTickEventListener
+  } = {}
 }: Props): JSX.Element | null => {
   const { isOpened, currentTime, range, speed, events } = useTimeline({
     widget,
@@ -32,7 +32,7 @@ const Timeline = ({
     onTimeChange,
     onTick,
     removeTickEventListener,
-    onExtend,
+    onExtend
   });
 
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts
index 855947fbc..01d65175b 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/index.ts
@@ -1,6 +1,6 @@
 import {
   BUTTON_BUILTIN_WIDGET_ID,
-  NAVIGATOR_BUILTIN_WIDGET_ID,
+  NAVIGATOR_BUILTIN_WIDGET_ID
 } from "@reearth/services/api/widgetsApi/utils";
 import { config } from "@reearth/services/config";
 import { merge } from "lodash-es";
@@ -11,7 +11,7 @@ import Navigator from "./Navigator";
 import {
   Component,
   unsafeBuiltinWidgets,
-  type UnsafeBuiltinWidgets,
+  type UnsafeBuiltinWidgets
 } from "./unsafeWidgets";
 
 export type ReEarthBuiltinWidgets<T = unknown> = Record<
@@ -31,8 +31,8 @@ const REEARTH_BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> =
     //   animation: true,
     // },
     [NAVIGATOR_BUILTIN_WIDGET_ID]: {
-      animation: true,
-    },
+      animation: true
+    }
   };
 
 const BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> =
@@ -41,7 +41,7 @@ const BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> =
 const reearthBuiltin: BuiltinWidgets<Component> = {
   [BUTTON_BUILTIN_WIDGET_ID]: Button,
   // [TIMELINE_BUILTIN_WIDGET_ID]: Timeline,
-  [NAVIGATOR_BUILTIN_WIDGET_ID]: Navigator,
+  [NAVIGATOR_BUILTIN_WIDGET_ID]: Navigator
 };
 
 let cachedBuiltin:
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts
index 15310c32a..e7c4d2417 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/unsafeWidgets.ts
@@ -19,9 +19,9 @@ function processUnsafeBuiltinWidgets(plugin?: UnsafeBuiltinPlugin[]) {
       p.widgets?.map((w) => {
         return {
           widgetId: `${p.id}/${w.extensionId}`,
-          ...w,
+          ...w
         };
-      }),
+      })
     )
     .reduce((a, b) => {
       const newObject: Record<string, Component> = {};
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx
index fd19cf44f..cb7ef10c5 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.stories.tsx
@@ -7,7 +7,7 @@ import Widget, { Props } from ".";
 
 export default {
   component: Widget,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 export const Default: Story<Props> = (args) => <Widget {...args} />;
@@ -25,7 +25,7 @@ Default.args = {
           buttonType: "menu",
           buttonTitle: "Menu",
           buttonPosition: "topleft",
-          buttonStyle: "text",
+          buttonStyle: "text"
         },
         {
           id: "google",
@@ -34,7 +34,7 @@ Default.args = {
           buttonTitle: "Google",
           buttonPosition: "topleft",
           buttonStyle: "text",
-          buttonBgcolor: "red",
+          buttonBgcolor: "red"
         },
         {
           id: "twitter",
@@ -43,7 +43,7 @@ Default.args = {
           buttonTitle: "Twitter",
           buttonPosition: "bottomright",
           buttonStyle: "text",
-          buttonBgcolor: "#0ff",
+          buttonBgcolor: "#0ff"
         },
         {
           id: "hoge",
@@ -56,16 +56,16 @@ Default.args = {
             fov: CesiumMath.toRadians(60),
             heading: 0,
             pitch: 0,
-            roll: 0,
+            roll: 0
           },
-          buttonTitle: "hoge",
+          buttonTitle: "hoge"
         },
         {
           id: "menu2",
           buttonType: "menu",
           buttonIcon: "/sample.svg",
           buttonPosition: "bottomleft",
-          buttonStyle: "icon",
+          buttonStyle: "icon"
         },
         {
           id: "menu3",
@@ -73,8 +73,8 @@ Default.args = {
           buttonTitle: "Menu",
           buttonIcon: "/sample.svg",
           buttonPosition: "bottomleft",
-          buttonStyle: "texticon",
-        },
+          buttonStyle: "texticon"
+        }
       ],
       menu: [
         {
@@ -88,23 +88,23 @@ Default.args = {
             fov: CesiumMath.toRadians(60),
             heading: 0,
             pitch: 0,
-            roll: 0,
-          },
+            roll: 0
+          }
         },
         {
           id: "hoge",
-          menuType: "border",
+          menuType: "border"
         },
         {
           id: "GitHub",
           menuType: "link",
           menuTitle: "GitHub",
-          menuLink: "https://github.com",
-        },
-      ],
-    },
+          menuLink: "https://github.com"
+        }
+      ]
+    }
   },
   isBuilt: false,
   isEditable: false,
-  context: { ...contextEvents },
+  context: { ...contextEvents }
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx
index 4162d1083..ef94d985c 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/index.tsx
@@ -12,14 +12,14 @@ import type {
   LookAtDestination,
   Clock,
   Camera,
-  InternalWidget,
+  InternalWidget
 } from "./types";
 
 export type { WidgetLayout } from "../types";
 export {
   isBuiltinWidget,
   type BuiltinWidgets,
-  getBuiltinWidgetOptions,
+  getBuiltinWidgetOptions
 } from "./builtin";
 
 export type Props = {
@@ -50,16 +50,16 @@ export type Context = {
   is2d?: boolean;
   onFlyTo?: (
     target: string | FlyToDestination,
-    options?: { duration?: number },
+    options?: { duration?: number }
   ) => void;
   onLookAt?: (
     camera: LookAtDestination,
-    options?: { duration?: number },
+    options?: { duration?: number }
   ) => void;
   onLayerSelect?: (
     layerId: string | undefined,
     featureId: string | undefined,
-    options?: { reason?: string },
+    options?: { reason?: string }
   ) => void;
   onPlay?: (committer?: TimelineCommitter) => void;
   onPause?: () => void;
@@ -72,7 +72,7 @@ export type Context = {
   onCameraOrbit?: (radians: number) => void;
   onCameraRotateRight?: (radians: number) => void;
   findPhotooverlayLayer?: (
-    id: string,
+    id: string
   ) => { title?: string; lat: number; lng: number; height: number } | undefined;
 };
 
@@ -98,11 +98,11 @@ export default function WidgetComponent({
       ...widget,
       extended: {
         horizontally: actualExtended && horizontal,
-        vertically: actualExtended && vertical,
+        vertically: actualExtended && vertical
       },
-      layout: align && location ? { align, location } : undefined,
+      layout: align && location ? { align, location } : undefined
     }),
-    [widget, actualExtended, horizontal, vertical, align, location],
+    [widget, actualExtended, horizontal, vertical, align, location]
   );
 
   if (!w) return null;
@@ -115,7 +115,7 @@ export default function WidgetComponent({
   return Builtin ? (
     <div
       style={{
-        pointerEvents: editing ? "none" : "auto",
+        pointerEvents: editing ? "none" : "auto"
       }}
     >
       <Builtin {...props} editing={editing} widget={w} />
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/storybook.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/storybook.ts
index c932980e9..d08f5b500 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/storybook.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/storybook.ts
@@ -15,8 +15,8 @@ export const contextEvents: Context = {
     onTick: "onTick",
     onTimeChange: "onTimeChange",
     onZoomIn: "onZoomIn",
-    onZoomOut: "onZoomOut",
-  }),
+    onZoomOut: "onZoomOut"
+  })
 };
 
 type PickString<T> = T extends `on${string}` ? T : never;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/types.ts b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/types.ts
index 1d88fab9a..0d3f95065 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/types.ts
@@ -7,5 +7,5 @@ export type {
   WidgetLayout,
   WidgetLocation,
   Clock,
-  InternalWidget,
+  InternalWidget
 } from "../types";
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx
index a3144a409..bfc076bdf 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Area.tsx
@@ -11,7 +11,7 @@ import type {
   Location,
   WidgetLayout,
   WidgetProps,
-  InternalWidget,
+  InternalWidget
 } from "./types";
 import { isInvisibleBuiltin } from "./utils";
 
@@ -61,19 +61,19 @@ export default function Area({
   layoutConstraint,
   isMobile,
   renderWidget,
-  onWidgetAreaSelect,
+  onWidgetAreaSelect
 }: Props) {
   const theme = useTheme();
   const layout = useMemo<WidgetLayout>(
     () => ({
       location: { zone, section, area },
-      align,
+      align
     }),
-    [align, area, section, zone],
+    [align, area, section, zone]
   );
   const { overriddenExtended, handleExtend } = useOverriddenExtended({
     layout,
-    widgets,
+    widgets
   });
 
   return !(zone === "inner" && section === "center" && area === "middle") ? (
@@ -92,8 +92,8 @@ export default function Area({
             top: padding?.top ?? 6,
             bottom: padding?.bottom ?? 6,
             left: padding?.left ?? 6,
-            right: padding?.right ?? 6,
-          },
+            right: padding?.right ?? 6
+          }
         })
       }
       id={`${zone}/${section}/${area}`}
@@ -122,7 +122,7 @@ export default function Area({
         gap: gap,
         alignItems: centered ? "center" : "unset",
         borderRadius: 0,
-        transition: built ? "none" : undefined,
+        transition: built ? "none" : undefined
       }}
       editorStyle={{
         flexWrap: "wrap",
@@ -140,7 +140,7 @@ export default function Area({
               ? `1px solid ${theme.primary.weak}`
               : `1px solid #E95518`,
         gap: gap,
-        alignItems: centered ? "center" : "unset",
+        alignItems: centered ? "center" : "unset"
       }}
       iconColor={area === "middle" ? "#4770FF" : "#E95518"}
     >
@@ -172,7 +172,7 @@ export default function Area({
                   layout,
                   extended,
                   editing,
-                  onExtend: handleExtend,
+                  onExtend: handleExtend
                 })
               }
             </GridItem>
@@ -184,7 +184,7 @@ export default function Area({
 
 function useOverriddenExtended({
   layout,
-  widgets,
+  widgets
 }: {
   layout: WidgetLayout;
   widgets: InternalWidget[] | undefined;
@@ -203,11 +203,11 @@ function useOverriddenExtended({
               ...omit(oe, id),
               ...(typeof extended === "undefined" || !extendable
                 ? {}
-                : { [id]: extended }),
-            },
+                : { [id]: extended })
+            }
       );
     },
-    [extendable],
+    [extendable]
   );
 
   const widgetIds = widgets?.map((w) => w.id) ?? [];
@@ -217,7 +217,7 @@ function useOverriddenExtended({
 
   return {
     overriddenExtended: extendable ? overriddenExtended : undefined,
-    handleExtend,
+    handleExtend
   };
 }
 
@@ -229,7 +229,7 @@ export function getLocationFromId(id: string): Location | undefined {
     ? {
         zone: z,
         section: s,
-        area: a,
+        area: a
       }
     : undefined;
 }
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
index 8bbfdb677..9147ae4ad 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
@@ -10,7 +10,7 @@ import type {
   WidgetZone,
   WidgetLayoutConstraint,
   Theme,
-  WidgetProps,
+  WidgetProps
 } from "./types";
 import { filterSections } from "./utils";
 
@@ -39,19 +39,19 @@ export default function MobileZone({
   children,
   invisibleWidgetIDs,
   renderWidget,
-  onWidgetAreaSelect,
+  onWidgetAreaSelect
 }: Props) {
   const filteredSections = useMemo(() => {
     return filterSections(
       zone,
       invisibleWidgetIDs,
-      (s) => s === "center" && children,
+      (s) => s === "center" && children
     );
   }, [zone, children, invisibleWidgetIDs]);
 
   const initialPos = useMemo(
     () => (filteredSections.length === 3 ? 1 : 0),
-    [filteredSections],
+    [filteredSections]
   );
 
   const [pos, setPos] = useState(initialPos);
@@ -84,7 +84,7 @@ export default function MobileZone({
                       top: 6,
                       bottom: 6,
                       left: 6,
-                      right: 6,
+                      right: 6
                     }
                   }
                   gap={zone?.[s]?.[a]?.gap ?? 6}
@@ -96,7 +96,7 @@ export default function MobileZone({
                   renderWidget={renderWidget}
                   onWidgetAreaSelect={onWidgetAreaSelect}
                 />
-              ),
+              )
             )}
           </GridSection>
         ))}
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx
index 66568e48d..2d5997e0a 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/Zone.tsx
@@ -29,7 +29,7 @@ export default function Zone({
   isMobile,
   children,
   renderWidget,
-  onWidgetAreaSelect,
+  onWidgetAreaSelect
 }: Props) {
   return (
     <>
@@ -59,7 +59,7 @@ export default function Zone({
                 renderWidget={renderWidget}
                 onWidgetAreaSelect={onWidgetAreaSelect}
               />
-            ),
+            )
           )}
         </GridSection>
       ))}
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts
index 65dfe8b15..dee687956 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/hooks.ts
@@ -5,11 +5,11 @@ import type { Location, Alignment } from "./types";
 
 export default function ({
   onWidgetLayoutUpdate: onWidgetLayoutUpdate,
-  onAlignmentUpdate: onAlignmentUpdate,
+  onAlignmentUpdate: onAlignmentUpdate
 }: {
   onWidgetLayoutUpdate?: (
     id: string,
-    update: { location?: Location; extended?: boolean; index?: number },
+    update: { location?: Location; extended?: boolean; index?: number }
   ) => void;
   onAlignmentUpdate?: (location: Location, align: Alignment) => void;
 }) {
@@ -19,19 +19,19 @@ export default function ({
       area: string,
       index: number,
       prevArea: string,
-      _prevIndex: number,
+      _prevIndex: number
     ) => {
       const location = area !== prevArea ? getLocationFromId(area) : undefined;
       onWidgetLayoutUpdate?.(id, { index, location });
     },
-    [onWidgetLayoutUpdate],
+    [onWidgetLayoutUpdate]
   );
 
   const handleExtend = useCallback(
     (id: string, extended: boolean) => {
       onWidgetLayoutUpdate?.(id, { extended });
     },
-    [onWidgetLayoutUpdate],
+    [onWidgetLayoutUpdate]
   );
 
   const handleAlignmentChange = useCallback(
@@ -40,7 +40,7 @@ export default function ({
       if (!l) return;
       onAlignmentUpdate?.(l, a);
     },
-    [onAlignmentUpdate],
+    [onAlignmentUpdate]
   );
 
   return { handleMove, handleExtend, handleAlignmentChange };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx
index 7bed01c08..bf0d2f916 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/index.tsx
@@ -10,7 +10,7 @@ import type {
   Location,
   WidgetLayoutConstraint,
   Theme,
-  WidgetProps,
+  WidgetProps
 } from "./types";
 import { filterSections } from "./utils";
 import ZoneComponent, { WidgetAreaType } from "./Zone";
@@ -28,7 +28,7 @@ export type {
   WidgetLayoutConstraint,
   Theme,
   WidgetProps,
-  InternalWidget,
+  InternalWidget
 } from "./types";
 
 export type Props = {
@@ -47,7 +47,7 @@ export type Props = {
       location?: Location;
       extended?: boolean;
       index?: number;
-    },
+    }
   ) => void;
   onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
   onAlignmentUpdate?: (location: Location, align: Alignment) => void;
@@ -65,11 +65,11 @@ const WidgetAlignSystem: React.FC<Props> = ({
   renderWidget,
   onWidgetAreaSelect,
   onWidgetLayoutUpdate: onWidgetLayoutUpdate,
-  onAlignmentUpdate: onAlignmentUpdate,
+  onAlignmentUpdate: onAlignmentUpdate
 }) => {
   const { handleMove, handleExtend, handleAlignmentChange } = useHooks({
     onWidgetLayoutUpdate,
-    onAlignmentUpdate,
+    onAlignmentUpdate
   });
   const Zone = isMobile ? MobileZone : ZoneComponent;
 
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts
index e38643052..b3aedf7d6 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/types.ts
@@ -9,7 +9,7 @@ export type {
   Widget,
   InternalWidget,
   WidgetAlignment,
-  WidgetLocation,
+  WidgetLocation
 } from "../types";
 
 export type Location = {
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts
index 675fbf152..3fb4ad467 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/utils.ts
@@ -6,21 +6,21 @@ import { InternalWidget, WidgetZone } from "./types";
 export const filterSections = (
   zone?: WidgetZone,
   invisibleWidgetIDs?: string[],
-  cb?: (s: (typeof WAS_SECTIONS)[number]) => void,
+  cb?: (s: (typeof WAS_SECTIONS)[number]) => void
 ) => {
   return WAS_SECTIONS.filter(
     (s) =>
       WAS_AREAS.filter((a) =>
         zone?.[s]?.[a]?.widgets?.some(
-          (w) => !invisibleWidgetIDs?.includes(w.id),
-        ),
-      ).length || cb?.(s),
+          (w) => !invisibleWidgetIDs?.includes(w.id)
+        )
+      ).length || cb?.(s)
   );
 };
 
 export const isInvisibleBuiltin = (
   widget: InternalWidget,
-  isMobile?: boolean,
+  isMobile?: boolean
 ) => {
   const defaultVisible = widget.property?.default?.visible;
   return (
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx
index 28376a789..f1632b7d1 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/index.stories.tsx
@@ -7,9 +7,9 @@ import Component, { Props } from ".";
 export default {
   component: Component,
   argTypes: {
-    context: { control: false },
+    context: { control: false }
   },
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 const Template: Story<Props> = (args) => (
@@ -35,25 +35,25 @@ Default.args = {
                 default: {
                   buttonTitle: "Button 1",
                   buttonColor: "white",
-                  buttonBgcolor: "red",
-                },
-              },
+                  buttonBgcolor: "red"
+                }
+              }
             },
             {
               id: "unknown",
               pluginId: "unknown",
-              extensionId: "unknown",
-            },
-          ],
-        },
-      },
-    },
+              extensionId: "unknown"
+            }
+          ]
+        }
+      }
+    }
   },
   context: {
-    ...contextEvents,
+    ...contextEvents
   },
   editing: false,
   isBuilt: false,
   isEditable: false,
-  renderWidget: ({ widget }) => <p>{widget.id}</p>,
+  renderWidget: ({ widget }) => <p>{widget.id}</p>
 };
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx
index 751adcb48..023c5a8e3 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/index.tsx
@@ -5,7 +5,7 @@ import type {
   Theme,
   Widget,
   WidgetLayout,
-  WidgetLocationOptions,
+  WidgetLocationOptions
 } from "./types";
 import useWidgetAlignSystem from "./useWidgetAlignSystem";
 import WidgetComponent, { type Context } from "./Widget";
@@ -15,7 +15,7 @@ import WidgetAlignSystem, {
   type Location,
   type WidgetAlignSystem as WidgetAlignSystemType,
   type WidgetLayoutConstraint,
-  type WidgetProps as WasWidgetProps,
+  type WidgetProps as WasWidgetProps
 } from "./WidgetAlignSystem";
 
 export type {
@@ -26,7 +26,7 @@ export type {
   WidgetArea,
   WidgetZone,
   WidgetSection,
-  WidgetAreaType,
+  WidgetAreaType
 } from "./WidgetAlignSystem";
 
 export type { Context, BuiltinWidgets } from "./Widget";
@@ -36,7 +36,7 @@ export type {
   Widget,
   InternalWidget,
   WidgetLocationOptions,
-  WidgetAlignment,
+  WidgetAlignment
 } from "./types";
 
 export type Props = {
@@ -58,7 +58,7 @@ export type Props = {
       location?: Location;
       extended?: boolean;
       index?: number;
-    },
+    }
   ) => void;
   onAlignmentUpdate?: (location: Location, align: Alignment) => void;
   onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
@@ -89,15 +89,15 @@ export default function Widgets({
   renderWidget,
   onAlignmentUpdate,
   onWidgetLayoutUpdate,
-  onWidgetAreaSelect,
+  onWidgetAreaSelect
 }: Props): JSX.Element | null {
   const {
     overriddenAlignSystem,
     invisibleWidgetIDs,
-    onPluginWidgetVisibilityChange,
+    onPluginWidgetVisibilityChange
   } = useWidgetAlignSystem({
     alignSystem,
-    isMobile,
+    isMobile
   });
 
   const renderWidgetInternal = useCallback(
@@ -120,7 +120,7 @@ export default function Widgets({
             extended,
             layout,
             onExtend,
-            onVisibilityChange: onPluginWidgetVisibilityChange,
+            onVisibilityChange: onPluginWidgetVisibilityChange
           })
         }
         onExtend={onExtend}
@@ -134,8 +134,8 @@ export default function Widgets({
       isMobile,
       context,
       renderWidget,
-      onPluginWidgetVisibilityChange,
-    ],
+      onPluginWidgetVisibilityChange
+    ]
   );
 
   return (
@@ -158,7 +158,7 @@ export default function Widgets({
         <Fragment key={w.id}>
           {renderWidgetInternal({
             widget: w,
-            editing: false,
+            editing: false
           })}
         </Fragment>
       ))}
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts b/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts
index db69925f9..5da736b48 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/useWidgetAlignSystem.ts
@@ -3,7 +3,7 @@ import { useEffect, useState, useCallback } from "react";
 import {
   WAS_SECTIONS,
   WAS_AREAS,
-  WAS_ZONES,
+  WAS_ZONES
 } from "./WidgetAlignSystem/constants";
 import { isInvisibleBuiltin } from "./WidgetAlignSystem/utils";
 
@@ -13,12 +13,12 @@ import {
   type WidgetLocationOptions,
   type WidgetArea,
   type WidgetSection,
-  type WidgetZone,
+  type WidgetZone
 } from ".";
 
 export default ({
   alignSystem,
-  isMobile,
+  isMobile
 }: {
   alignSystem: WidgetAlignSystem | undefined;
   isMobile?: boolean;
@@ -43,7 +43,7 @@ export default ({
             (w) => {
               if (isInvisibleBuiltin(w, isMobile))
                 invisibleBuiltinWidgetIDs.push(w.id);
-            },
+            }
           );
         });
       });
@@ -51,7 +51,7 @@ export default ({
 
     setInvisibleWidgetIDs([
       ...invisibleBuiltinWidgetIDs,
-      ...invisiblePluginWidgetIDs,
+      ...invisiblePluginWidgetIDs
     ]);
   }, [isMobile, overriddenAlignSystem, invisiblePluginWidgetIDs]);
 
@@ -67,7 +67,7 @@ export default ({
         return a;
       });
     },
-    [],
+    []
   );
 
   const moveWidget = useCallback(
@@ -97,7 +97,7 @@ export default ({
                   const area = section[areaName];
                   if (!widget && area?.widgets) {
                     const sourceIndex = area.widgets.findIndex(
-                      (w) => w.id === widgetId,
+                      (w) => w.id === widgetId
                     );
                     if (sourceIndex !== -1) {
                       [widget] = area.widgets.splice(sourceIndex, 1);
@@ -118,7 +118,7 @@ export default ({
             alignSystem[options.zone] = {
               left: undefined,
               center: undefined,
-              right: undefined,
+              right: undefined
             };
           }
 
@@ -127,7 +127,7 @@ export default ({
             targetZone[options.section] = {
               top: undefined,
               middle: undefined,
-              bottom: undefined,
+              bottom: undefined
             };
           }
 
@@ -135,7 +135,7 @@ export default ({
           if (!targetSection[options.area]) {
             targetSection[options.area] = {
               align: "start",
-              widgets: [],
+              widgets: []
             };
           }
 
@@ -158,10 +158,10 @@ export default ({
                     ...(alignSystem[options.zone]?.[options.section]?.[
                       options.area
                     ] || {}),
-                    widgets: [...targetArea.widgets],
-                  },
-                },
-              },
+                    widgets: [...targetArea.widgets]
+                  }
+                }
+              }
             };
             return { ...next };
           }
@@ -170,7 +170,7 @@ export default ({
         });
       }, 0);
     },
-    [],
+    []
   );
 
   useEffect(() => {
@@ -181,6 +181,6 @@ export default ({
     overriddenAlignSystem,
     invisibleWidgetIDs,
     moveWidget,
-    onPluginWidgetVisibilityChange,
+    onPluginWidgetVisibilityChange
   };
 };
diff --git a/web/src/beta/features/Visualizer/Crust/context.ts b/web/src/beta/features/Visualizer/Crust/context.ts
index 5d12b41be..16e20ff17 100644
--- a/web/src/beta/features/Visualizer/Crust/context.ts
+++ b/web/src/beta/features/Visualizer/Crust/context.ts
@@ -2,7 +2,7 @@ import { Camera } from "@reearth/beta/utils/value";
 import {
   TimelineManagerRef,
   TimelineCommitter,
-  ViewerProperty,
+  ViewerProperty
 } from "@reearth/core";
 import { RefObject, useMemo } from "react";
 
@@ -14,7 +14,7 @@ export const useWidgetContext = ({
   selectedLayerId,
   viewerProperty,
   initialCamera,
-  timelineManagerRef,
+  timelineManagerRef
 }: Parameters<typeof widgetContextFromMapRef>[0]) =>
   useMemo(
     () =>
@@ -23,15 +23,9 @@ export const useWidgetContext = ({
         selectedLayerId,
         viewerProperty,
         initialCamera,
-        timelineManagerRef,
+        timelineManagerRef
       }),
-    [
-      mapRef,
-      viewerProperty,
-      initialCamera,
-      selectedLayerId,
-      timelineManagerRef,
-    ],
+    [mapRef, viewerProperty, initialCamera, selectedLayerId, timelineManagerRef]
   );
 
 export function widgetContextFromMapRef({
@@ -39,7 +33,7 @@ export function widgetContextFromMapRef({
   selectedLayerId,
   viewerProperty,
   initialCamera,
-  timelineManagerRef,
+  timelineManagerRef
 }: {
   mapRef?: RefObject<MapRef>;
   selectedLayerId?: {
@@ -73,7 +67,7 @@ export function widgetContextFromMapRef({
         title: l.title,
         lat: location?.lat,
         lng: location?.lng,
-        height: location?.height ?? 0,
+        height: location?.height ?? 0
       };
     },
     onCameraOrbit: (...args) => engine()?.orbit(...args),
@@ -83,7 +77,7 @@ export function widgetContextFromMapRef({
     onLayerSelect: (layerId, featureId, options) => {
       layers()?.selectFeatures(
         [{ layerId, featureId: featureId ? [featureId] : undefined }],
-        options,
+        options
       );
     },
     onPause: (committer?: TimelineCommitter) =>
@@ -91,28 +85,28 @@ export function widgetContextFromMapRef({
         cmd: "PAUSE",
         committer: {
           source: committer?.source ?? "widgetContext",
-          id: committer?.id,
-        },
+          id: committer?.id
+        }
       }),
     onPlay: (committer?: TimelineCommitter) =>
       timelineManagerRef?.current?.commit({
         cmd: "PLAY",
         committer: {
           source: committer?.source ?? "widgetContext",
-          id: committer?.id,
-        },
+          id: committer?.id
+        }
       }),
     onSpeedChange: (speed, committer?: TimelineCommitter) =>
       timelineManagerRef?.current?.commit({
         cmd: "SET_OPTIONS",
         payload: {
           multiplier: speed,
-          stepType: "rate",
+          stepType: "rate"
         },
         committer: {
           source: committer?.source ?? "widgetContext",
-          id: committer?.id,
-        },
+          id: committer?.id
+        }
       }),
     onTick: (cb) => timelineManagerRef?.current?.onTick(cb),
     removeTickEventListener: (cb) => timelineManagerRef?.current?.offTick(cb),
@@ -122,14 +116,14 @@ export function widgetContextFromMapRef({
         payload: {
           start: timelineManagerRef.current?.computedTimeline.start,
           current: time,
-          stop: timelineManagerRef.current?.computedTimeline.stop,
+          stop: timelineManagerRef.current?.computedTimeline.stop
         },
         committer: {
           source: committer?.source ?? "widgetContext",
-          id: committer?.id,
-        },
+          id: committer?.id
+        }
       }),
     onZoomIn: (...args) => engine()?.zoomIn(...args),
-    onZoomOut: (...args) => engine()?.zoomOut(...args),
+    onZoomOut: (...args) => engine()?.zoomOut(...args)
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/hooks.tsx b/web/src/beta/features/Visualizer/Crust/hooks.tsx
index f57bd4940..017ee2a34 100644
--- a/web/src/beta/features/Visualizer/Crust/hooks.tsx
+++ b/web/src/beta/features/Visualizer/Crust/hooks.tsx
@@ -6,7 +6,7 @@ import {
   useCallback,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import type { BlockProps } from "../shared/types";
@@ -17,7 +17,7 @@ import {
   type PluginProps,
   type PluginModalInfo,
   type PluginPopupInfo,
-  type ExternalPluginProps,
+  type ExternalPluginProps
 } from "./Plugins";
 import type { MapRef } from "./types";
 import type { WidgetProps } from "./Widgets";
@@ -25,7 +25,7 @@ import type { WidgetProps } from "./Widgets";
 export default function useHook({
   mapRef,
   pluginBaseUrl,
-  pluginProperty,
+  pluginProperty
 }: { mapRef?: RefObject<MapRef> } & ExternalPluginProps) {
   const [shownPluginModalInfo, onPluginModalShow] = useState<PluginModalInfo>();
   const pluginModalContainerRef = useRef<HTMLDivElement>();
@@ -43,7 +43,7 @@ export default function useHook({
       onPluginPopupShow,
       pluginBaseUrl,
       pluginProperty,
-      property: pluginProperty,
+      property: pluginProperty
     }),
     [
       shownPluginModalInfo,
@@ -51,8 +51,8 @@ export default function useHook({
       shownPluginPopupInfo,
       onPluginPopupShow,
       pluginBaseUrl,
-      pluginProperty,
-    ],
+      pluginProperty
+    ]
   );
 
   const renderWidget = useCallback(
@@ -63,13 +63,13 @@ export default function useHook({
         mapRef={mapRef}
       />
     ),
-    [mapRef, commonPluginProps],
+    [mapRef, commonPluginProps]
   );
   const renderBlock = useCallback(
     (blockProps: BlockProps): ReactNode => (
       <Block blockProps={blockProps} commonPluginProps={commonPluginProps} />
     ),
-    [commonPluginProps],
+    [commonPluginProps]
   );
 
   return {
@@ -80,7 +80,7 @@ export default function useHook({
     renderWidget,
     renderBlock,
     onPluginModalShow,
-    onPluginPopupShow,
+    onPluginPopupShow
   };
 }
 
@@ -101,19 +101,19 @@ const Widget: FC<{
     (options) => {
       onExtend?.(widget.id, options?.extended);
     },
-    [onExtend, widget.id],
+    [onExtend, widget.id]
   );
   const handleOnResize = useCallback<NonNullable<PluginProps["onResize"]>>(
     (_width, _height, extended) => {
       onExtend?.(widget.id, extended);
     },
-    [onExtend, widget.id],
+    [onExtend, widget.id]
   );
   const iframeProps = useMemo<{ style: CSS.Properties }>(
     () => ({
-      style: { pointerEvents: widgetProps.editing ? "none" : "auto" },
+      style: { pointerEvents: widgetProps.editing ? "none" : "auto" }
     }),
-    [widgetProps.editing],
+    [widgetProps.editing]
   );
   return (
     <Plugin
diff --git a/web/src/beta/features/Visualizer/Crust/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/index.stories.tsx
index 15d0a3ea8..d101c0319 100644
--- a/web/src/beta/features/Visualizer/Crust/index.stories.tsx
+++ b/web/src/beta/features/Visualizer/Crust/index.stories.tsx
@@ -3,7 +3,7 @@ import {
   engines,
   Engine,
   InteractionModeType,
-  INTERACTION_MODES,
+  INTERACTION_MODES
 } from "@reearth/core";
 import { Meta, Story } from "@storybook/react";
 import { useRef } from "react";
@@ -14,7 +14,7 @@ import Component, { Props } from ".";
 
 export default {
   component: Component,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
+  parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta;
 
 const Template: Story<
@@ -37,5 +37,5 @@ const Template: Story<
 export const Cesium = Template.bind({});
 
 Cesium.args = {
-  engine: engines.cesium,
+  engine: engines.cesium
 };
diff --git a/web/src/beta/features/Visualizer/Crust/index.tsx b/web/src/beta/features/Visualizer/Crust/index.tsx
index a903981e3..6a3072e35 100644
--- a/web/src/beta/features/Visualizer/Crust/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/index.tsx
@@ -5,7 +5,7 @@ import {
   type Layer,
   type SelectedFeatureInfo,
   type Camera,
-  type MapRef,
+  type MapRef
 } from "@reearth/core";
 import { useMemo, type RefObject, useContext } from "react";
 
@@ -16,7 +16,7 @@ import { Infobox as InfoboxType } from "./Infobox/types";
 import Plugins, {
   type ExternalPluginProps,
   ModalContainer,
-  PopupContainer,
+  PopupContainer
 } from "./Plugins";
 import StoryPanel, { InstallableStoryBlock, StoryPanelRef } from "./StoryPanel";
 import { Story } from "./StoryPanel/types";
@@ -27,7 +27,7 @@ import Widgets, {
   type Location,
   type WidgetLayoutConstraint,
   type InternalWidget,
-  type WidgetAreaType,
+  type WidgetAreaType
 } from "./Widgets";
 
 export type { ValueTypes, ValueType, InteractionModeType } from "./types";
@@ -48,7 +48,7 @@ export type {
   BuiltinWidgets,
   WidgetArea,
   WidgetAlignment,
-  WidgetAreaType,
+  WidgetAreaType
 } from "./Widgets";
 export { isBuiltinWidget } from "./Widgets";
 
@@ -85,7 +85,7 @@ export type Props = {
       location?: Location;
       extended?: boolean;
       index?: number;
-    },
+    }
   ) => void;
   onWidgetAlignmentUpdate?: (location: Location, align: Alignment) => void;
   onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
@@ -93,12 +93,12 @@ export type Props = {
   onInfoboxBlockCreate?: (
     pluginId: string,
     extensionId: string,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   onInfoboxBlockMove?: (
     id: string,
     targetIndex: number,
-    layerId?: string,
+    layerId?: string
   ) => Promise<void>;
   onInfoboxBlockDelete?: (id?: string) => Promise<void>;
   // Infobox
@@ -108,22 +108,22 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
   // Story
   showStoryPanel?: boolean;
@@ -136,12 +136,12 @@ export type Props = {
     pageId?: string | undefined,
     extensionId?: string | undefined,
     pluginId?: string | undefined,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   onStoryBlockMove?: (id: string, targetId: number, blockId: string) => void;
   onStoryBlockDelete?: (
     pageId?: string | undefined,
-    blockId?: string | undefined,
+    blockId?: string | undefined
   ) => Promise<void>;
   onPropertyValueUpdate?: (
     propertyId?: string,
@@ -149,7 +149,7 @@ export type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
 };
 
@@ -196,7 +196,7 @@ export default function Crust({
   onStoryBlockCreate,
   onStoryBlockMove,
   onStoryBlockDelete,
-  onPropertyValueUpdate,
+  onPropertyValueUpdate
 }: Props): JSX.Element | null {
   const {
     interactionMode,
@@ -212,7 +212,7 @@ export default function Crust({
     onLayerLoad,
     onLayerSelectWithRectStart,
     onLayerSelectWithRectMove,
-    onLayerSelectWithRectEnd,
+    onLayerSelectWithRectEnd
   } = useContext(coreContext);
 
   const widgetTheme = usePublishTheme(widgetThemeOptions);
@@ -220,9 +220,9 @@ export default function Crust({
   const selectedLayerId = useMemo(
     () => ({
       layerId: selectedLayer?.layerId,
-      featureId: selectedLayer?.featureId,
+      featureId: selectedLayer?.featureId
     }),
-    [selectedLayer?.featureId, selectedLayer?.layerId],
+    [selectedLayer?.featureId, selectedLayer?.layerId]
   );
 
   const {
@@ -232,7 +232,7 @@ export default function Crust({
     pluginPopupContainerRef,
     renderWidget,
     renderBlock,
-    onPluginModalShow,
+    onPluginModalShow
   } = useHooks({ mapRef, ...externalPlugin });
 
   const widgetContext = useWidgetContext({
@@ -240,7 +240,7 @@ export default function Crust({
     viewerProperty,
     initialCamera,
     selectedLayerId,
-    timelineManagerRef: mapRef?.current?.timeline,
+    timelineManagerRef: mapRef?.current?.timeline
   });
 
   const featuredInfobox = useMemo(() => {
@@ -249,7 +249,7 @@ export default function Crust({
       ? {
           property: selected?.infobox?.property,
           blocks: [...(selected?.infobox?.blocks ?? [])],
-          featureId: selectedLayerId.featureId,
+          featureId: selectedLayerId.featureId
         }
       : undefined;
   }, [layers, selectedLayer, selectedLayerId?.featureId]);
diff --git a/web/src/beta/features/Visualizer/Crust/theme/dark.ts b/web/src/beta/features/Visualizer/Crust/theme/dark.ts
index 17b3aa67e..94d4d5dac 100644
--- a/web/src/beta/features/Visualizer/Crust/theme/dark.ts
+++ b/web/src/beta/features/Visualizer/Crust/theme/dark.ts
@@ -11,5 +11,5 @@ export const dark: Theme = {
   weakIcon: colors.dark.icon.weak,
   select: colors.dark.other.select,
   mask: colors.dark.other.mask,
-  background: colors.dark.other.background,
+  background: colors.dark.other.background
 };
diff --git a/web/src/beta/features/Visualizer/Crust/theme/forest.ts b/web/src/beta/features/Visualizer/Crust/theme/forest.ts
index 7e1344c2d..074fce045 100644
--- a/web/src/beta/features/Visualizer/Crust/theme/forest.ts
+++ b/web/src/beta/features/Visualizer/Crust/theme/forest.ts
@@ -11,5 +11,5 @@ export const forest: Theme = {
   weakIcon: colors.forest.icon.weak,
   select: colors.forest.other.select,
   mask: colors.forest.other.mask,
-  background: colors.forest.other.background,
+  background: colors.forest.other.background
 };
diff --git a/web/src/beta/features/Visualizer/Crust/theme/index.ts b/web/src/beta/features/Visualizer/Crust/theme/index.ts
index 1f83fd9bc..63a951346 100644
--- a/web/src/beta/features/Visualizer/Crust/theme/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/theme/index.ts
@@ -30,7 +30,7 @@ const defaultThemeType = "dark";
 const premade: Record<string, Theme | undefined> = {
   dark,
   light,
-  forest,
+  forest
 };
 
 export function mask(color?: string) {
@@ -51,7 +51,7 @@ export function publishTheme(sceneThemeOptions?: WidgetThemeOptions): Theme {
     ...sceneThemeOptions,
     themeBackgroundColor: sceneThemeOptions?.themeBackgroundColor || "#dfe5f0",
     themeTextColor: sceneThemeOptions?.themeTextColor || "#434343",
-    themeSelectColor: sceneThemeOptions?.themeSelectColor || "#C52C63",
+    themeSelectColor: sceneThemeOptions?.themeSelectColor || "#C52C63"
   };
 
   const isBackgroundDark = isDark(options?.themeBackgroundColor);
@@ -69,6 +69,6 @@ export function publishTheme(sceneThemeOptions?: WidgetThemeOptions): Theme {
       : "#FFFFFF",
     weakText: tinycolor(options.themeTextColor).setAlpha(0.5).toHex8String(),
     mainIcon: tinycolor(options.themeTextColor).setAlpha(0.5).toHex8String(),
-    weakIcon: tinycolor(options.themeTextColor).setAlpha(0.25).toHex8String(),
+    weakIcon: tinycolor(options.themeTextColor).setAlpha(0.25).toHex8String()
   };
 }
diff --git a/web/src/beta/features/Visualizer/Crust/theme/light.ts b/web/src/beta/features/Visualizer/Crust/theme/light.ts
index af3f5c6e6..8383ef391 100644
--- a/web/src/beta/features/Visualizer/Crust/theme/light.ts
+++ b/web/src/beta/features/Visualizer/Crust/theme/light.ts
@@ -11,5 +11,5 @@ export const light: Theme = {
   weakIcon: colors.light.icon.weak,
   select: colors.light.other.select,
   mask: colors.light.other.mask,
-  background: colors.light.other.background,
+  background: colors.light.other.background
 };
diff --git a/web/src/beta/features/Visualizer/Crust/types.ts b/web/src/beta/features/Visualizer/Crust/types.ts
index c8f60b445..69d78ae94 100644
--- a/web/src/beta/features/Visualizer/Crust/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/types.ts
@@ -6,6 +6,6 @@ export type {
   ValueTypes,
   ValueType,
   MapRef,
-  InteractionModeType,
+  InteractionModeType
 } from "@reearth/core";
 export type { Theme } from "./theme";
diff --git a/web/src/beta/features/Visualizer/FovSlider/hooks.ts b/web/src/beta/features/Visualizer/FovSlider/hooks.ts
index 6ee53fb4b..8e4af44e6 100644
--- a/web/src/beta/features/Visualizer/FovSlider/hooks.ts
+++ b/web/src/beta/features/Visualizer/FovSlider/hooks.ts
@@ -10,13 +10,13 @@ type Params = {
 export default ({ onIsCapturingChange, camera, onFovChange }: Params) => {
   const finishCapture = useCallback(
     () => onIsCapturingChange?.(false),
-    [onIsCapturingChange],
+    [onIsCapturingChange]
   );
 
   const updateFov = useCallback(
     (fov: number) =>
       onFovChange?.(Math.max(0.01, Math.min(fov, Math.PI - 10 ** -10))),
-    [onFovChange],
+    [onFovChange]
   );
 
   const isAwayTarget = useCallback((e: Event) => {
@@ -27,7 +27,7 @@ export default ({ onIsCapturingChange, camera, onFovChange }: Params) => {
 
   const handleClickAway = useCallback(
     (e: Event) => isAwayTarget(e) && finishCapture(),
-    [isAwayTarget, finishCapture],
+    [isAwayTarget, finishCapture]
   );
 
   return { camera, updateFov, handleClickAway };
diff --git a/web/src/beta/features/Visualizer/FovSlider/index.tsx b/web/src/beta/features/Visualizer/FovSlider/index.tsx
index 4d0a617ca..4e9c4ef25 100644
--- a/web/src/beta/features/Visualizer/FovSlider/index.tsx
+++ b/web/src/beta/features/Visualizer/FovSlider/index.tsx
@@ -19,14 +19,14 @@ const FovSlider: React.FC<Props> = ({
   visible,
   onIsCapturingChange,
   camera,
-  onFovChange,
+  onFovChange
 }) => {
   const t = useT();
 
   const { updateFov, handleClickAway } = useHooks({
     onIsCapturingChange,
     camera,
-    onFovChange,
+    onFovChange
   });
 
   const fov = camera?.fov && Math.round(camera?.fov * 1000) / 1000;
diff --git a/web/src/beta/features/Visualizer/hooks.ts b/web/src/beta/features/Visualizer/hooks.ts
index b0dcdb4c0..2faafdb9f 100644
--- a/web/src/beta/features/Visualizer/hooks.ts
+++ b/web/src/beta/features/Visualizer/hooks.ts
@@ -11,20 +11,20 @@ export default function useHooks({
   ownBuiltinWidgets,
   viewerProperty,
   onCoreLayerSelect,
-  currentCamera,
+  currentCamera
 }: {
   ownBuiltinWidgets?: (keyof BuiltinWidgets)[];
   viewerProperty?: ViewerProperty;
   onCoreLayerSelect?: (
     layerId: string | undefined,
     layer: ComputedLayer | undefined,
-    feature: ComputedFeature | undefined,
+    feature: ComputedFeature | undefined
   ) => void;
   currentCamera?: Camera;
 }) {
   const shouldRender = useMemo(() => {
     const shouldWidgetAnimate = ownBuiltinWidgets?.some(
-      (id) => !!getBuiltinWidgetOptions(id).animation,
+      (id) => !!getBuiltinWidgetOptions(id).animation
     );
     return shouldWidgetAnimate;
   }, [ownBuiltinWidgets]);
@@ -38,11 +38,11 @@ export default function useHooks({
     async (
       layerId: string | undefined,
       layer: (() => Promise<ComputedLayer | undefined>) | undefined,
-      feature: ComputedFeature | undefined,
+      feature: ComputedFeature | undefined
     ) => {
       onCoreLayerSelect?.(layerId, await layer?.(), feature);
     },
-    [onCoreLayerSelect],
+    [onCoreLayerSelect]
   );
 
   const [visualizerCamera, setVisualizerCamera] = useVisualizerCamera();
@@ -56,6 +56,6 @@ export default function useHooks({
     overrideViewerProperty,
     storyWrapperRef,
     visualizerCamera,
-    handleCoreLayerSelect,
+    handleCoreLayerSelect
   };
 }
diff --git a/web/src/beta/features/Visualizer/index.tsx b/web/src/beta/features/Visualizer/index.tsx
index c41001626..ad7ca081e 100644
--- a/web/src/beta/features/Visualizer/index.tsx
+++ b/web/src/beta/features/Visualizer/index.tsx
@@ -3,7 +3,7 @@ import {
   Camera,
   LatLng,
   ValueType,
-  ValueTypes,
+  ValueTypes
 } from "@reearth/beta/utils/value";
 import {
   type SketchFeature,
@@ -13,7 +13,7 @@ import {
   type Layer,
   type EngineType,
   type ViewerProperty,
-  CoreVisualizer,
+  CoreVisualizer
 } from "@reearth/core";
 import { config } from "@reearth/services/config";
 import { WidgetAreaState } from "@reearth/services/state";
@@ -29,7 +29,7 @@ import {
   Alignment,
   Widget,
   WidgetAlignSystem,
-  WidgetLayoutConstraint,
+  WidgetLayoutConstraint
 } from "./Crust/Widgets";
 import type { Location } from "./Crust/Widgets";
 import useHooks from "./hooks";
@@ -63,12 +63,12 @@ type VisualizerProps = {
   onCoreLayerSelect?: (
     layerId: string | undefined,
     layer: ComputedLayer | undefined,
-    feature: ComputedFeature | undefined,
+    feature: ComputedFeature | undefined
   ) => void;
   handleLayerDrop?: (
     layerId: string,
     propertyKey: string,
-    position: LatLng | undefined,
+    position: LatLng | undefined
   ) => void;
   handleZoomToLayer?: (layerId: string | undefined) => void;
   handleSketchTypeChange?: (type: SketchType | undefined) => void;
@@ -84,21 +84,21 @@ type VisualizerProps = {
       location?: Location | undefined;
       extended?: boolean | undefined;
       index?: number | undefined;
-    },
+    }
   ) => Promise<void>;
   handleWidgetAlignSystemUpdate?: (
     location: Location,
-    align: Alignment,
+    align: Alignment
   ) => Promise<void>;
   selectWidgetArea?: (
-    update?: SetStateAction<WidgetAreaState | undefined>,
+    update?: SetStateAction<WidgetAreaState | undefined>
   ) => void;
   // infobox
   installableInfoboxBlocks?: InstallableInfoboxBlock[];
   handleInfoboxBlockCreate?: (
     pluginId: string,
     extensionId: string,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   handleInfoboxBlockMove?: (id: string, targetIndex: number) => Promise<void>;
   handleInfoboxBlockRemove?: (id?: string | undefined) => Promise<void>;
@@ -108,22 +108,22 @@ type VisualizerProps = {
   installableStoryBlocks?: InstallableStoryBlock[];
   handleStoryPageChange?: (
     id?: string,
-    disableScrollIntoView?: boolean,
+    disableScrollIntoView?: boolean
   ) => void;
   handleStoryBlockCreate?: (
     pageId?: string | undefined,
     extensionId?: string | undefined,
     pluginId?: string | undefined,
-    index?: number | undefined,
+    index?: number | undefined
   ) => Promise<void>;
   handleStoryBlockMove?: (
     id: string,
     targetId: number,
-    blockId: string,
+    blockId: string
   ) => void;
   handleStoryBlockDelete?: (
     pageId?: string | undefined,
-    blockId?: string | undefined,
+    blockId?: string | undefined
   ) => Promise<void>;
   handlePropertyValueUpdate?: (
     propertyId?: string,
@@ -131,22 +131,22 @@ type VisualizerProps = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   handlePropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   handlePropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   handlePropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -197,7 +197,7 @@ const Visualizer: FC<VisualizerProps> = ({
   handlePropertyValueUpdate,
   handlePropertyItemAdd,
   handlePropertyItemMove,
-  handlePropertyItemDelete,
+  handlePropertyItemDelete
 }) => {
   const {
     shouldRender,
@@ -205,12 +205,12 @@ const Visualizer: FC<VisualizerProps> = ({
     overrideViewerProperty,
     storyWrapperRef,
     visualizerCamera,
-    handleCoreLayerSelect,
+    handleCoreLayerSelect
   } = useHooks({
     ownBuiltinWidgets: widgets?.ownBuiltinWidgets,
     viewerProperty,
     onCoreLayerSelect,
-    currentCamera,
+    currentCamera
   });
 
   return (
@@ -296,13 +296,13 @@ const Wrapper = styled("div")<{ storyPanelPosition?: Position }>(
     background: theme.bg[0],
     width: "100%",
     height: "100%",
-    overflow: "hidden",
-  }),
+    overflow: "hidden"
+  })
 );
 
 const StoryWrapper = styled("div")(() => ({
   display: "flex",
   position: "relative",
   flexShrink: 0,
-  height: "100%",
+  height: "100%"
 }));
diff --git a/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx b/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx
index e28ffbba4..0376e1e8f 100644
--- a/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/ActionPanel/index.tsx
@@ -4,7 +4,7 @@ import {
   Popup,
   PopupMenu,
   PopupMenuItem,
-  PopupPanel,
+  PopupPanel
 } from "@reearth/beta/lib/reearth-ui";
 import { stopClickPropagation } from "@reearth/beta/utils/events";
 import { styled } from "@reearth/services/theme";
@@ -49,23 +49,23 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
   onPopupMenuClick?: (e: MouseEvent<Element, globalThis.MouseEvent>) => void;
 };
@@ -92,7 +92,7 @@ const ActionPanel: FC<Props> = ({
   onPropertyItemAdd,
   onPropertyItemMove,
   onPropertyItemDelete,
-  onPopupMenuClick,
+  onPopupMenuClick
 }) => (
   <Wrapper
     isSelected={isSelected}
@@ -172,7 +172,7 @@ const ActionPanel: FC<Props> = ({
                                         }
                                       />
                                     );
-                                  },
+                                  }
                                 )}
                               </FieldsWrapper>
                             </SettingsContent>
@@ -192,7 +192,7 @@ const ActionPanel: FC<Props> = ({
                 </OptionWrapper>
               )}
             </Fragment>
-          ),
+          )
       )}
     </BlockOptions>
   </Wrapper>
@@ -224,14 +224,14 @@ const Wrapper = styled("div")<{
       ? "0"
       : position === "right-top"
         ? "-1px"
-        : "auto",
+        : "auto"
 }));
 
 const FieldsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.normal,
-  userSelect: "none",
+  userSelect: "none"
 }));
 
 const BlockOptions = styled("div")<{
@@ -241,15 +241,15 @@ const BlockOptions = styled("div")<{
   color: isSelected ? theme.content.main : theme.select.main,
   display: "flex",
   alignItems: "center",
-  height: "24px",
+  height: "24px"
 }));
 
 const OptionsWrapper = styled("div")(() => ({
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const PopupContent = styled("div")(({ theme }) => ({
-  zIndex: theme.zIndexes.visualizer.storyBlock,
+  zIndex: theme.zIndexes.visualizer.storyBlock
 }));
 
 const OptionWrapper = styled("div")<{
@@ -257,7 +257,7 @@ const OptionWrapper = styled("div")<{
 }>(({ showPointer }) => ({
   display: "flex",
   alignItems: "center",
-  cursor: showPointer ? "pointer" : "default",
+  cursor: showPointer ? "pointer" : "default"
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -267,23 +267,23 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-  maxWidth: "150px",
+  maxWidth: "150px"
 }));
 
 const OptionIcon = styled(Icon)<{ border?: boolean }>(({ border, theme }) => ({
   borderLeft: `1px solid ${border ? "#f1f1f1" : "transparent"}`,
   padding: theme.spacing.smallest,
-  transition: "none",
+  transition: "none"
 }));
 
 const SettingsContent = styled("div")(() => ({
   minHeight: "120px",
-  boxSizing: "border-box",
+  boxSizing: "border-box"
 }));
 
 const DndHandle = styled("div")(() => ({
   height: "100%",
   display: "flex",
   alignItems: "center",
-  cursor: "move",
+  cursor: "move"
 }));
diff --git a/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx b/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx
index cc5373f5e..d59d28f97 100644
--- a/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/BlockAddBar/index.tsx
@@ -24,7 +24,7 @@ const BlockAddBar: FC<Props> = ({
   showAreaHeight,
   parentWidth,
   onBlockOpen,
-  onBlockAdd,
+  onBlockAdd
 }) => {
   const items: PopupMenuItem[] = useMemo(
     () =>
@@ -36,15 +36,15 @@ const BlockAddBar: FC<Props> = ({
           onClick: () => {
             onBlockAdd?.(b.extensionId, b.pluginId);
             onBlockOpen();
-          },
+          }
         };
       }) ?? [],
-    [installableBlocks, onBlockAdd, onBlockOpen],
+    [installableBlocks, onBlockAdd, onBlockOpen]
   );
 
   const persist = useMemo(
     () => alwaysShow || openBlocks,
-    [alwaysShow, openBlocks],
+    [alwaysShow, openBlocks]
   );
 
   useEffect(() => {
@@ -84,7 +84,7 @@ const BlockAddBar: FC<Props> = ({
 const Wrapper = styled("div")(({ theme }) => ({
   position: "relative",
   padding: `${theme.spacing.micro}px 0`,
-  zIndex: theme.zIndexes.visualizer.storyBlockAddBar,
+  zIndex: theme.zIndexes.visualizer.storyBlockAddBar
 }));
 
 const Bar = styled("div")<{ height?: number; persist?: boolean }>(
@@ -98,26 +98,26 @@ const Bar = styled("div")<{ height?: number; persist?: boolean }>(
     height: height ? `${height}px` : "1px",
     cursor: "pointer",
     "&:hover > *": {
-      opacity: "100%",
+      opacity: "100%"
     },
     "& > *": {
       opacity: persist ? "100%" : "0%",
-      transition: "opacity 0.4s",
-    },
-  }),
+      transition: "opacity 0.4s"
+    }
+  })
 );
 
 const StyledIcon = styled(Icon)<{ persist?: boolean }>(({ theme }) => ({
   color: theme.content.main,
   background: theme.select.main,
   padding: theme.spacing.micro,
-  borderRadius: theme.radius.small,
+  borderRadius: theme.radius.small
 }));
 
 const Line = styled("div")<{ persist?: boolean }>(({ theme }) => ({
   height: "1px",
   width: "100%",
-  background: theme.select.main,
+  background: theme.select.main
 }));
 
 export default BlockAddBar;
diff --git a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts
index 7924ad23e..cc27c5769 100644
--- a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts
+++ b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts
@@ -6,7 +6,7 @@ import {
   useState,
   MouseEvent,
   useEffect,
-  useRef,
+  useRef
 } from "react";
 
 import { calculatePaddingValue } from "../../../Crust/StoryPanel/utils";
@@ -16,7 +16,7 @@ export const DEFAULT_BLOCK_PADDING: Spacing = {
   top: 0,
   bottom: 0,
   left: 0,
-  right: 0,
+  right: 0
 };
 
 export default ({
@@ -25,7 +25,7 @@ export default ({
   property,
   isEditable,
   onClick,
-  onBlockDoubleClick,
+  onBlockDoubleClick
 }: {
   name?: string | null;
   isSelected?: boolean;
@@ -48,7 +48,7 @@ export default ({
 
   const disableSelection = useMemo(
     () => editModeContext?.disableSelection,
-    [editModeContext?.disableSelection],
+    [editModeContext?.disableSelection]
   );
 
   const handleEditModeToggle = useCallback(
@@ -56,7 +56,7 @@ export default ({
       editModeContext?.onSelectionDisable?.(enable);
       setEditMode?.(enable);
     },
-    [editModeContext],
+    [editModeContext]
   );
 
   const handleSelectionDisable = useCallback(() => {
@@ -73,12 +73,12 @@ export default ({
         handleSelectionDisableRef.current?.();
       }
     },
-    [editMode, disableSelection],
+    [editMode, disableSelection]
   );
 
   const handleSettingsToggle = useCallback(
     () => setShowSettings?.((s) => !s),
-    [],
+    []
   );
 
   const title = useMemo(() => name ?? property?.title, [name, property?.title]);
@@ -92,7 +92,7 @@ export default ({
 
   const [handleSingleClick, handleDoubleClick] = useDoubleClick(
     () => onClick?.(),
-    () => handleBlockDoubleClick?.(),
+    () => handleBlockDoubleClick?.()
   );
 
   const handleBlockClick = useCallback(
@@ -101,18 +101,18 @@ export default ({
       if ((showSettings && isSelected) || editMode) return;
       handleSingleClick();
     },
-    [showSettings, isSelected, editMode, handleSingleClick],
+    [showSettings, isSelected, editMode, handleSingleClick]
   );
 
   const defaultSettings = useMemo(
     () => property?.default ?? property?.title,
-    [property],
+    [property]
   );
 
   const groupId = useMemo(
     () =>
       property?.default ? "default" : property?.title ? "title" : undefined,
-    [property],
+    [property]
   );
 
   const generalBlockSettings = useMemo(() => {
@@ -123,9 +123,9 @@ export default ({
         value: calculatePaddingValue(
           DEFAULT_BLOCK_PADDING,
           property?.panel?.padding?.value,
-          isEditable,
-        ),
-      },
+          isEditable
+        )
+      }
     };
   }, [property?.panel, isEditable]);
 
@@ -145,6 +145,6 @@ export default ({
     handleEditModeToggle,
     handleSettingsToggle,
     handleBlockClick,
-    handleDoubleClick,
+    handleDoubleClick
   };
 };
diff --git a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx
index 6a0d98512..28df6f3e8 100644
--- a/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/BlockWrapper/index.tsx
@@ -13,7 +13,7 @@ import SelectableArea from "../SelectableArea";
 import useHooks from "./hooks";
 
 export const BlockContext = createContext<{ editMode?: boolean } | undefined>(
-  undefined,
+  undefined
 );
 
 type Spacing = {
@@ -47,22 +47,22 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
   onFlyTo?: FlyTo;
 };
@@ -89,7 +89,7 @@ const BlockWrapper: FC<Props> = ({
   onPropertyItemAdd,
   onPropertyItemMove,
   onPropertyItemDelete,
-  onFlyTo,
+  onFlyTo
 }) => {
   const {
     title,
@@ -103,14 +103,14 @@ const BlockWrapper: FC<Props> = ({
     handleEditModeToggle,
     handleSettingsToggle,
     handleBlockClick,
-    handleDoubleClick,
+    handleDoubleClick
   } = useHooks({
     name,
     isSelected,
     property,
     isEditable,
     onClick,
-    onBlockDoubleClick,
+    onBlockDoubleClick
   });
   return (
     <BlockContext.Provider value={{ editMode }}>
@@ -215,13 +215,13 @@ const Block = styled("div")<{
   cursor: isEditable && !disableSelection ? "pointer" : "default",
   color: "black",
   position: "relative",
-  minHeight: isEditable ? "28px" : 0,
+  minHeight: isEditable ? "28px" : 0
 }));
 
 const EditorPanel = styled("div")(({ theme }) => ({
   padding: theme.spacing.normal,
   color: theme.content.main,
-  background: theme.bg[1],
+  background: theme.bg[1]
 }));
 
 const Overlay = styled("div")<{ disableSelection?: boolean }>(
@@ -229,13 +229,13 @@ const Overlay = styled("div")<{ disableSelection?: boolean }>(
     position: "absolute",
     height: "100%",
     width: "100%",
-    cursor: !disableSelection ? "pointer" : undefined,
-  }),
+    cursor: !disableSelection ? "pointer" : undefined
+  })
 );
 
 const FieldsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.large,
-  userSelect: "none",
+  userSelect: "none"
 }));
diff --git a/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx b/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx
index 010c5c0b8..4e473e97d 100644
--- a/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/ContentWrapper/index.tsx
@@ -20,9 +20,9 @@ const ContentWrapper: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     minGapInEditor,
     padding,
     gap,
-    children,
+    children
   },
-  ref,
+  ref
 ) => (
   <Wrapper
     id={id}
@@ -54,7 +54,7 @@ const Wrapper = styled("div")<{
     isEditable,
     minGapInEditor,
     minPaddingInEditor,
-    theme,
+    theme
   }) => ({
     display: "flex",
     flexDirection: "column",
@@ -79,6 +79,6 @@ const Wrapper = styled("div")<{
       isEditable && padding.right < minPaddingInEditor.right
         ? `${minPaddingInEditor.right}px`
         : `${padding.right}px`,
-    boxSizing: "border-box",
-  }),
+    boxSizing: "border-box"
+  })
 );
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts
index 7ec155001..7c5cfb1f3 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/hooks.ts
@@ -7,7 +7,7 @@ import {
   SetStateAction,
   useCallback,
   useMemo,
-  useState,
+  useState
 } from "react";
 
 import type { ActionItem } from "../../ActionPanel";
@@ -35,7 +35,7 @@ export default ({
   setShowPadding,
   onRemove,
   onEditModeToggle,
-  onSettingsToggle,
+  onSettingsToggle
 }: Props) => {
   const t = useT();
   const handleRemove = useCallback(() => {
@@ -56,7 +56,7 @@ export default ({
         onClick: () => {
           setShowPadding(true);
           onSettingsToggle?.();
-        },
+        }
       });
     }
     if (onRemove) {
@@ -64,7 +64,7 @@ export default ({
         id: "delete",
         title: t("Remove"),
         icon: "trash",
-        onClick: handleRemove,
+        onClick: handleRemove
       });
     }
     return menuItems;
@@ -76,7 +76,7 @@ export default ({
     setShowPadding,
     onSettingsToggle,
     t,
-    handleRemove,
+    handleRemove
   ]);
 
   const actionItems: ActionItem[] = useMemo(() => {
@@ -84,8 +84,8 @@ export default ({
     const menuItems: ActionItem[] = [
       {
         name: title ?? t("Block"),
-        icon: iconName,
-      },
+        icon: iconName
+      }
     ];
 
     if (
@@ -96,7 +96,7 @@ export default ({
       menuItems.push({
         icon: editMode ? "exit" : "editMode",
         hide: !isSelected,
-        onClick: () => onEditModeToggle?.(!editMode),
+        onClick: () => onEditModeToggle?.(!editMode)
       });
     }
 
@@ -104,7 +104,7 @@ export default ({
       menuItems.push({
         icon: "settingFilled",
         hide: !isSelected,
-        onClick: onSettingsToggle,
+        onClick: onSettingsToggle
       });
     }
 
@@ -117,7 +117,7 @@ export default ({
     contentSettings,
     t,
     onEditModeToggle,
-    onSettingsToggle,
+    onSettingsToggle
   ]);
 
   const handlePopupMenuClick = useCallback((e: MouseEvent) => {
@@ -130,6 +130,6 @@ export default ({
     actionItems,
     openMenu,
     handlePopupMenuClick,
-    setOpenMenu,
+    setOpenMenu
   };
 };
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx
index 86d7f28f5..770400819 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/ActionPanel/index.tsx
@@ -31,23 +31,23 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -72,7 +72,7 @@ const ActionPanel: FC<Props> = ({
     actionItems,
     openMenu,
     setOpenMenu,
-    handlePopupMenuClick,
+    handlePopupMenuClick
   } = useHooks({
     title,
     icon,
@@ -83,7 +83,7 @@ const ActionPanel: FC<Props> = ({
     setShowPadding,
     onEditModeToggle,
     onSettingsToggle,
-    onRemove,
+    onRemove
   });
 
   return (
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts b/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts
index b3e108dcb..2cbc120c7 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/hooks.ts
@@ -11,7 +11,7 @@ export default ({
   editMode,
   isSelected,
   onEditModeToggle,
-  onClickAway,
+  onClickAway
 }: Props) => {
   const [showPadding, setShowPadding] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -32,7 +32,7 @@ export default ({
       e?.stopPropagation();
       setIsHovered(isHovered);
     },
-    [],
+    []
   );
 
   return {
@@ -40,6 +40,6 @@ export default ({
     isHovered,
     handleHoverChange,
     setShowPadding,
-    handleClickAway,
+    handleClickAway
   };
 };
diff --git a/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx b/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx
index fb97a4a96..8f9c31c5c 100644
--- a/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx
+++ b/web/src/beta/features/Visualizer/shared/components/SelectableArea/index.tsx
@@ -37,22 +37,22 @@ type Props = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 };
 
@@ -83,19 +83,19 @@ const SelectableArea: FC<Props> = ({
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemMove,
-  onPropertyItemDelete,
+  onPropertyItemDelete
 }) => {
   const {
     showPadding,
     isHovered,
     handleHoverChange,
     setShowPadding,
-    handleClickAway,
+    handleClickAway
   } = useHooks({
     editMode,
     isSelected,
     onEditModeToggle,
-    onClickAway,
+    onClickAway
   });
 
   return !isEditable ? (
@@ -158,6 +158,6 @@ const Wrapper = styled("div")<{
   position: "relative",
   transition: "all 0.3s",
   "&:hover": {
-    borderColor: !hideHoverUI && !isSelected ? theme.select.weaker : "none",
-  },
+    borderColor: !hideHoverUI && !isSelected ? theme.select.weaker : "none"
+  }
 }));
diff --git a/web/src/beta/features/Visualizer/shared/contexts/blockContext.tsx b/web/src/beta/features/Visualizer/shared/contexts/blockContext.tsx
index 993c19102..4d4dd56b6 100644
--- a/web/src/beta/features/Visualizer/shared/contexts/blockContext.tsx
+++ b/web/src/beta/features/Visualizer/shared/contexts/blockContext.tsx
@@ -9,7 +9,7 @@ const BlockContext = createContext<BlockContext | undefined>(undefined);
 
 export const BlockProvider: FC<PropsWithChildren<{ value: BlockContext }>> = ({
   children,
-  value,
+  value
 }) => <BlockContext.Provider value={value}>{children}</BlockContext.Provider>;
 
 export const useBlockContext = (): BlockContext => {
diff --git a/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx b/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx
index 1de3a8fc4..6ac5970f1 100644
--- a/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx
+++ b/web/src/beta/features/Visualizer/shared/hooks/useFieldComponent.tsx
@@ -10,7 +10,7 @@ import {
   SwitchField,
   TimePeriodField,
   TimePointField,
-  TwinInputField,
+  TwinInputField
 } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { useCallback, useMemo } from "react";
@@ -20,7 +20,7 @@ export const FieldComponent = ({
   groupId,
   fieldId,
   field,
-  onPropertyUpdate,
+  onPropertyUpdate
 }: {
   propertyId: string;
   groupId: string;
@@ -32,22 +32,22 @@ export const FieldComponent = ({
     fieldId?: string,
     itemId?: string,
     vt?: any,
-    v?: any,
+    v?: any
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
 }) => {
   const t = useT();
@@ -57,7 +57,7 @@ export const FieldComponent = ({
       propertyId: string,
       fieldId: string,
       vt: any,
-      itemId?: string,
+      itemId?: string
     ) => {
       return async (v?: any) => {
         await onPropertyUpdate?.(
@@ -66,11 +66,11 @@ export const FieldComponent = ({
           fieldId,
           itemId,
           vt,
-          v,
+          v
         );
       };
     },
-    [onPropertyUpdate],
+    [onPropertyUpdate]
   );
 
   const assetsTypes = useMemo(
@@ -80,7 +80,7 @@ export const FieldComponent = ({
         : field.ui === "file"
           ? ["file" as const]
           : undefined,
-    [field.ui],
+    [field.ui]
   );
 
   return field?.type === "spacing" ? (
@@ -95,7 +95,7 @@ export const FieldComponent = ({
         groupId,
         propertyId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : field?.type === "bool" ? (
@@ -108,7 +108,7 @@ export const FieldComponent = ({
         groupId,
         propertyId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : field?.type === "latlng" ? (
@@ -121,7 +121,7 @@ export const FieldComponent = ({
         groupId,
         propertyId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : field?.type === "camera" ? (
@@ -134,7 +134,7 @@ export const FieldComponent = ({
         propertyId,
         groupId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : field?.type === "number" ? (
@@ -148,7 +148,7 @@ export const FieldComponent = ({
         groupId,
         propertyId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : field?.type === "url" ? (
@@ -165,7 +165,7 @@ export const FieldComponent = ({
         groupId,
         propertyId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : field?.type === "string" ? (
@@ -179,7 +179,7 @@ export const FieldComponent = ({
           groupId,
           propertyId,
           fieldId,
-          field?.type,
+          field?.type
         )}
       />
     ) : field?.ui === "color" ? (
@@ -192,7 +192,7 @@ export const FieldComponent = ({
           groupId,
           propertyId,
           fieldId,
-          field?.type,
+          field?.type
         )}
       />
     ) : field?.ui === "selection" || field?.choices ? (
@@ -205,15 +205,15 @@ export const FieldComponent = ({
           field?.choices.map(
             ({ key, title }: { key: string; title: string }) => ({
               value: key,
-              label: title,
-            }),
+              label: title
+            })
           ) || []
         }
         onChange={handlePropertyValueUpdate(
           groupId,
           propertyId,
           fieldId,
-          field?.type,
+          field?.type
         )}
       />
     ) : (
@@ -226,7 +226,7 @@ export const FieldComponent = ({
           groupId,
           propertyId,
           fieldId,
-          field?.type,
+          field?.type
         )}
       />
     )
@@ -240,7 +240,7 @@ export const FieldComponent = ({
         groupId,
         propertyId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : field?.type === "array" && field?.ui === "range" ? (
@@ -257,7 +257,7 @@ export const FieldComponent = ({
         groupId,
         propertyId,
         fieldId,
-        field?.type,
+        field?.type
       )}
     />
   ) : (
diff --git a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
index 933aa0b29..ed4fe4ede 100644
--- a/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
+++ b/web/src/beta/features/Visualizer/shared/hooks/useTimelineBlock.ts
@@ -1,7 +1,7 @@
 import {
   useVisualizer,
   TickEventCallback,
-  TimelineCommitter,
+  TimelineCommitter
 } from "@reearth/core";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -11,7 +11,7 @@ import {
   formatDateToSting,
   formatISO8601,
   formatTimezone,
-  getTimeZone,
+  getTimeZone
 } from "../../Crust/StoryPanel/utils";
 
 export const getNewDate = (d?: Date) => d ?? new Date();
@@ -33,8 +33,8 @@ const timeRange = (startTime?: number, stopTime?: number) => {
     end: stopTime || stopTime || calculateEndTime(new Date()),
     mid: calculateMidTime(
       startTime || now,
-      stopTime || calculateEndTime(new Date()),
-    ),
+      stopTime || calculateEndTime(new Date())
+    )
   };
 };
 
@@ -48,7 +48,7 @@ export default (timelineValues?: TimelineValues) => {
       "1min/sec",
       "0.1hr/sec",
       "0.5hr/sec",
-      "1hr/sec",
+      "1hr/sec"
     ];
     return convertOptionToSeconds(speedOpt);
   }, []);
@@ -57,8 +57,8 @@ export default (timelineValues?: TimelineValues) => {
 
   const [currentTime, setCurrentTime] = useState(
     getNewDate(
-      visualizerContext?.current?.timeline?.current?.timeline?.current,
-    ).getTime(),
+      visualizerContext?.current?.timeline?.current?.timeline?.current
+    ).getTime()
   );
 
   const [timezone, setTimezone] = useState<string>(formatTimezone(currentTime));
@@ -66,16 +66,16 @@ export default (timelineValues?: TimelineValues) => {
   const range = useMemo(() => {
     if (timelineValues) {
       const startTime = getNewDate(
-        new Date(formatISO8601(timelineValues?.startTime)),
+        new Date(formatISO8601(timelineValues?.startTime))
       ).getTime();
       const endTime = getNewDate(
-        new Date(formatISO8601(timelineValues?.endTime)),
+        new Date(formatISO8601(timelineValues?.endTime))
       ).getTime();
       return timeRange(startTime, endTime);
     } else {
       return timeRange(
         visualizerContext?.current?.timeline?.current?.timeline?.start?.getTime(),
-        visualizerContext?.current?.timeline?.current?.timeline?.stop?.getTime(),
+        visualizerContext?.current?.timeline?.current?.timeline?.stop?.getTime()
       );
     }
   }, [timelineValues, visualizerContext]);
@@ -84,20 +84,20 @@ export default (timelineValues?: TimelineValues) => {
     (committerId?: string) => {
       return visualizerContext.current?.timeline?.current?.commit({
         cmd: "PAUSE",
-        committer: { source: "storyTimelineBlock", id: committerId },
+        committer: { source: "storyTimelineBlock", id: committerId }
       });
     },
-    [visualizerContext],
+    [visualizerContext]
   );
 
   const onPlay = useCallback(
     (committer?: TimelineCommitter) => {
       return visualizerContext.current?.timeline?.current?.commit({
         cmd: "PLAY",
-        committer: { source: "storyTimelineBlock", id: committer?.id },
+        committer: { source: "storyTimelineBlock", id: committer?.id }
       });
     },
-    [visualizerContext],
+    [visualizerContext]
   );
 
   const onTimeChange = useCallback(
@@ -108,12 +108,12 @@ export default (timelineValues?: TimelineValues) => {
         payload: {
           start: formatDateToSting(range.start),
           current: time,
-          stop: formatDateToSting(range.end),
+          stop: formatDateToSting(range.end)
         },
-        committer: { source: "storyTimelineBlock", id: committerId },
+        committer: { source: "storyTimelineBlock", id: committerId }
       });
     },
-    [range, visualizerContext],
+    [range, visualizerContext]
   );
 
   const onSpeedChange = useCallback(
@@ -122,42 +122,42 @@ export default (timelineValues?: TimelineValues) => {
         cmd: "SET_OPTIONS",
         payload: {
           multiplier: speed,
-          stepType: "rate",
+          stepType: "rate"
         },
-        committer: { source: "storyTimelineBlock", id: committerId },
+        committer: { source: "storyTimelineBlock", id: committerId }
       });
     },
-    [visualizerContext],
+    [visualizerContext]
   );
 
   const onTick = useCallback(
     (cb: TickEventCallback) =>
       visualizerContext?.current?.timeline?.current?.onTick(cb),
-    [visualizerContext],
+    [visualizerContext]
   );
   const removeTickEventListener = useCallback(
     (cb: TickEventCallback) =>
       visualizerContext?.current?.timeline?.current?.offTick(cb),
-    [visualizerContext],
+    [visualizerContext]
   );
 
   const removeOnCommitEventListener = useCallback(
     (cb: (committer: TimelineCommitter) => void) =>
       visualizerContext?.current?.timeline?.current?.offCommit(cb),
-    [visualizerContext],
+    [visualizerContext]
   );
 
   const onCommit = useCallback(
     (cb: (committer: TimelineCommitter) => void) =>
       visualizerContext?.current?.timeline?.current?.onCommit(cb),
-    [visualizerContext],
+    [visualizerContext]
   );
   const handleOnSpeedChange = useCallback(
     (speed: number, committerId?: string) => {
       onSpeedChange?.(speed, committerId);
       setSpeed(speed);
     },
-    [onSpeedChange],
+    [onSpeedChange]
   );
 
   useEffect(() => {
@@ -170,8 +170,8 @@ export default (timelineValues?: TimelineValues) => {
     } else {
       return setCurrentTime(
         getNewDate(
-          visualizerContext?.current?.timeline?.current?.timeline?.current,
-        ).getTime(),
+          visualizerContext?.current?.timeline?.current?.timeline?.current
+        ).getTime()
       );
     }
   }, [timelineValues, visualizerContext]);
@@ -190,6 +190,6 @@ export default (timelineValues?: TimelineValues) => {
     removeTickEventListener,
     onCommit,
     removeOnCommitEventListener,
-    setCurrentTime,
+    setCurrentTime
   };
 };
diff --git a/web/src/beta/features/Visualizer/shared/types.ts b/web/src/beta/features/Visualizer/shared/types.ts
index 74a5df42b..5569717ac 100644
--- a/web/src/beta/features/Visualizer/shared/types.ts
+++ b/web/src/beta/features/Visualizer/shared/types.ts
@@ -44,22 +44,22 @@ export type CommonBlockProps<T = any> = {
     fieldId?: string,
     itemId?: string,
     vt?: ValueType,
-    v?: ValueTypes[ValueType],
+    v?: ValueTypes[ValueType]
   ) => Promise<void>;
   onPropertyItemAdd?: (
     propertyId?: string,
-    schemaGroupId?: string,
+    schemaGroupId?: string
   ) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
     schemaGroupId?: string,
     itemId?: string,
-    index?: number,
+    index?: number
   ) => Promise<void>;
   onPropertyItemDelete?: (
     propertyId?: string,
     schemaGroupId?: string,
-    itemId?: string,
+    itemId?: string
   ) => Promise<void>;
   onFlyTo?: FlyTo;
 };
diff --git a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts
index f8df5f725..3534c4415 100644
--- a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts
+++ b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.test.ts
@@ -5,7 +5,7 @@ import { useOverriddenProperty } from "./useOverriddenProperty";
 
 test("overriddenProperty", () => {
   const { result } = renderHook(() =>
-    useOverriddenProperty({ a: 1, b: 2, c: { c1: 3 } }),
+    useOverriddenProperty({ a: 1, b: 2, c: { c1: 3 } })
   );
   const [mergedProperty, overrideProperty] = result.current;
   expect(mergedProperty).toEqual({ a: 1, b: 2, c: { c1: 3 } });
diff --git a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts
index ff415f27c..23d8c98c6 100644
--- a/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts
+++ b/web/src/beta/features/Visualizer/utils/useOverriddenProperty.ts
@@ -2,7 +2,7 @@ import { cloneDeep, mergeWith, omit } from "lodash-es";
 import { useCallback, useMemo, useState } from "react";
 
 export function useOverriddenProperty<T extends object>(
-  property: T | undefined,
+  property: T | undefined
 ): [T, (pluginId: string, property: T) => void] {
   const [overriddenProperties, setOverrideProperty] = useState<
     Record<string, any>
@@ -15,14 +15,14 @@ export function useOverriddenProperty<T extends object>(
 
   const overrideProperty = useCallback((pluginId: string, property: any) => {
     setOverrideProperty((p) =>
-      property ? { ...p, [pluginId || ""]: property } : omit(p, pluginId),
+      property ? { ...p, [pluginId || ""]: property } : omit(p, pluginId)
     );
   }, []);
 
   const mergedProperty = useMemo(() => {
     return [
       overriddenPropertyCommon,
-      ...Object.values(overriddenProperty),
+      ...Object.values(overriddenProperty)
     ].reduce((p, v) => mergeProperty(p, v), property);
   }, [property, overriddenPropertyCommon, overriddenProperty]);
 
@@ -40,7 +40,7 @@ export function mergeProperty(a: any, b: any) {
       _k: string | number | symbol,
       _obj: any,
       _src: any,
-      stack: { size: number },
-    ) => (stack.size > 0 || Array.isArray(v) ? (v ?? s) : undefined),
+      stack: { size: number }
+    ) => (stack.size > 0 || Array.isArray(v) ? (v ?? s) : undefined)
   );
 }
diff --git a/web/src/beta/hooks/navigationHooks.ts b/web/src/beta/hooks/navigationHooks.ts
index 8c6484dff..b39fe3da3 100644
--- a/web/src/beta/hooks/navigationHooks.ts
+++ b/web/src/beta/hooks/navigationHooks.ts
@@ -10,14 +10,14 @@ export const useEditorNavigation = ({ sceneId }: { sceneId?: string }) => {
       if (!sceneId) return;
       navigate(`/scene/${sceneId}/${tab}`);
     },
-    [sceneId, navigate],
+    [sceneId, navigate]
   );
 
   return sceneId ? handleNavigate : undefined;
 };
 
 export const useSettingsNavigation = ({
-  projectId,
+  projectId
 }: {
   projectId?: string;
 }) => {
@@ -27,10 +27,10 @@ export const useSettingsNavigation = ({
     (page?: "public" | "story" | "asset" | "plugin", subId?: string) => {
       if (!projectId || !page) return;
       navigate(
-        `/settings/project/${projectId}/${page}${subId ? `/${subId}` : ""}`,
+        `/settings/project/${projectId}/${page}${subId ? `/${subId}` : ""}`
       );
     },
-    [projectId, navigate],
+    [projectId, navigate]
   );
 
   return projectId ? handleNavigate : undefined;
diff --git a/web/src/beta/hooks/useAssetUploader/hooks.tsx b/web/src/beta/hooks/useAssetUploader/hooks.tsx
index 80d3977bd..49fdb1ad0 100644
--- a/web/src/beta/hooks/useAssetUploader/hooks.tsx
+++ b/web/src/beta/hooks/useAssetUploader/hooks.tsx
@@ -9,7 +9,7 @@ export default ({
   workspaceId,
   onAssetSelect,
   assetType,
-  fileFormat,
+  fileFormat
 }: {
   workspaceId?: string;
   onAssetSelect?: (inputValue?: string, name?: string) => void;
@@ -33,21 +33,21 @@ export default ({
       if (!files) return;
       const result = await useCreateAssets({
         teamId: workspaceId ?? "",
-        file: files,
+        file: files
       });
       const assetUrl = result?.data[0].data?.createAsset?.asset.url;
       const assetName = result?.data[0].data?.createAsset?.asset.name;
 
       onAssetSelect?.(assetUrl, assetName);
     },
-    [workspaceId, useCreateAssets, onAssetSelect],
+    [workspaceId, useCreateAssets, onAssetSelect]
   );
   const handleFileUpload = useFileInput(
     (files) => handleAssetsCreate?.(files),
     {
       accept: acceptedExtension,
-      multiple: true,
-    },
+      multiple: true
+    }
   );
 
   return { handleFileUpload };
diff --git a/web/src/beta/hooks/useManageSwitchState/hooks.test.tsx b/web/src/beta/hooks/useManageSwitchState/hooks.test.tsx
index ef004e6ad..78cad358d 100644
--- a/web/src/beta/hooks/useManageSwitchState/hooks.test.tsx
+++ b/web/src/beta/hooks/useManageSwitchState/hooks.test.tsx
@@ -13,8 +13,8 @@ const props: Props<SwitchField> = {
   fields: [
     { id: "1", name: "First component", active: true },
     { id: "2", name: "Second component", active: false },
-    { id: "3", name: "Third component", active: false },
-  ],
+    { id: "3", name: "Third component", active: false }
+  ]
 };
 
 test("1. confirmation of initial state", () => {
diff --git a/web/src/beta/hooks/useManageSwitchState/hooks.tsx b/web/src/beta/hooks/useManageSwitchState/hooks.tsx
index 9465343f7..765ee32ea 100644
--- a/web/src/beta/hooks/useManageSwitchState/hooks.tsx
+++ b/web/src/beta/hooks/useManageSwitchState/hooks.tsx
@@ -18,8 +18,8 @@ export const useManageSwitchState = <T,>({ fields }: Props<T>) => {
     setFieldsState((f) =>
       f.map((v) => ({
         ...v,
-        active: v.id === id,
-      })),
+        active: v.id === id
+      }))
     );
   }, []);
   return { handleActivate, fields: fieldsState };
diff --git a/web/src/beta/lib/lexical/RichTextEditor/index.tsx b/web/src/beta/lib/lexical/RichTextEditor/index.tsx
index 957a29fef..b774acd0e 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/index.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/index.tsx
@@ -34,7 +34,7 @@ const RichTextEditor: React.FC<Props> = ({
   editMode,
   text,
   scrollableContainerId,
-  onChange,
+  onChange
 }) => {
   const t = useT();
   const editorStateJSONStringRef = useRef<EditorStateJSONString>();
@@ -52,9 +52,9 @@ const RichTextEditor: React.FC<Props> = ({
       onError(error: Error) {
         console.error(error);
       },
-      nodes: [...Nodes],
+      nodes: [...Nodes]
     }),
-    [text],
+    [text]
   );
 
   const isEmpty = useMemo(() => isContentEmpty(text), [text]);
@@ -67,7 +67,7 @@ const RichTextEditor: React.FC<Props> = ({
         onChange?.(editorStateJSONString);
       }
     },
-    [editorStateJSONStringRef, onChange],
+    [editorStateJSONStringRef, onChange]
   );
 
   const editorRef = useRef<HTMLDivElement>(null);
diff --git a/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts b/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
index 8e5df8564..8d4e0f411 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
@@ -24,7 +24,7 @@ const PlaygroundNodes: Klass<LexicalNode>[] = [
   LinkNode,
   OverflowNode,
   HorizontalRuleNode,
-  MarkNode,
+  MarkNode
 ];
 
 export default PlaygroundNodes;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
index 06609d22b..13cfee101 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
@@ -19,8 +19,8 @@ const MATCHERS = [
         text: match[0],
         url: match[0],
         attributes: {
-          target: "_blank",
-        },
+          target: "_blank"
+        }
       }
     );
   },
@@ -33,11 +33,11 @@ const MATCHERS = [
         text: match[0],
         url: `mailto:${match[0]}`,
         attributes: {
-          target: "_blank",
-        },
+          target: "_blank"
+        }
       }
     );
-  },
+  }
 ];
 
 export default function AutoLinkPluginWithMathers() {
@@ -52,7 +52,7 @@ export default function AutoLinkPluginWithMathers() {
         const dom = editor.getElementByKey(node.__key);
         if (!dom) return;
         dom.setAttribute("target", "_blank");
-      },
+      }
     );
     return () => removeNodeListener();
   }, [editor]);
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
index 2029fb93d..5c4bd21fd 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
@@ -3,7 +3,7 @@ import "./index.css";
 import {
   $isAutoLinkNode,
   $isLinkNode,
-  TOGGLE_LINK_COMMAND,
+  TOGGLE_LINK_COMMAND
 } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
@@ -18,7 +18,7 @@ import {
   LexicalEditor,
   NodeSelection,
   RangeSelection,
-  SELECTION_CHANGE_COMMAND,
+  SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { Dispatch, useCallback, useEffect, useRef, useState } from "react";
 import * as React from "react";
@@ -33,7 +33,7 @@ function FloatingLinkEditor({
   isLink,
   setIsLink,
   anchorElem,
-  scrollableContainerId,
+  scrollableContainerId
 }: {
   editor: LexicalEditor;
   isLink: boolean;
@@ -127,7 +127,7 @@ function FloatingLinkEditor({
     anchorElem.parentElement,
     editor,
     scrollableContainerId,
-    updateLinkEditor,
+    updateLinkEditor
   ]);
 
   useEffect(() => {
@@ -144,7 +144,7 @@ function FloatingLinkEditor({
           updateLinkEditor();
           return true;
         },
-        COMMAND_PRIORITY_LOW,
+        COMMAND_PRIORITY_LOW
       ),
       editor.registerCommand(
         KEY_ESCAPE_COMMAND,
@@ -155,8 +155,8 @@ function FloatingLinkEditor({
           }
           return false;
         },
-        COMMAND_PRIORITY_HIGH,
-      ),
+        COMMAND_PRIORITY_HIGH
+      )
     );
   }, [editor, updateLinkEditor, setIsLink, isLink]);
 
@@ -173,7 +173,7 @@ function FloatingLinkEditor({
   }, [isEditMode]);
 
   const monitorInputInteraction = (
-    event: React.KeyboardEvent<HTMLInputElement>,
+    event: React.KeyboardEvent<HTMLInputElement>
   ) => {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -265,7 +265,7 @@ function FloatingLinkEditor({
 function useFloatingLinkEditorToolbar(
   editor: LexicalEditor,
   anchorElem: HTMLElement,
-  scrollableContainerId?: string,
+  scrollableContainerId?: string
 ): JSX.Element | null {
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
@@ -300,8 +300,8 @@ function useFloatingLinkEditorToolbar(
           setActiveEditor(newEditor);
           return false;
         },
-        COMMAND_PRIORITY_CRITICAL,
-      ),
+        COMMAND_PRIORITY_CRITICAL
+      )
     );
   }, [editor, updateToolbar]);
 
@@ -313,13 +313,13 @@ function useFloatingLinkEditorToolbar(
       scrollableContainerId={scrollableContainerId}
       setIsLink={setIsLink}
     />,
-    anchorElem,
+    anchorElem
   );
 }
 
 export default function FloatingLinkEditorPlugin({
   anchorElem = document.body,
-  scrollableContainerId,
+  scrollableContainerId
 }: {
   anchorElem?: HTMLElement;
   scrollableContainerId?: string;
@@ -328,6 +328,6 @@ export default function FloatingLinkEditorPlugin({
   return useFloatingLinkEditorToolbar(
     editor,
     anchorElem,
-    scrollableContainerId,
+    scrollableContainerId
   );
 }
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
index e3fd8acbc..91e4f47ae 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
@@ -15,7 +15,7 @@ export default function LinkOnBlankPlugin() {
         const dom = editor.getElementByKey(node.__key);
         if (!dom) return;
         dom.setAttribute("target", "_blank");
-      },
+      }
     );
     return () => removeNodeListener();
   }, [editor]);
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
index aeed6ea75..4ec3d4b91 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
@@ -6,7 +6,7 @@ import {
   $isRangeSelection,
   INDENT_CONTENT_COMMAND,
   COMMAND_PRIORITY_HIGH,
-  RangeSelection,
+  RangeSelection
 } from "lexical";
 import { useEffect } from "react";
 
@@ -16,12 +16,12 @@ function getElementNodesInSelection(selection: RangeSelection) {
   if (nodesInSelection.length === 0) {
     return new Set([
       selection.anchor.getNode().getParentOrThrow(),
-      selection.focus.getNode().getParentOrThrow(),
+      selection.focus.getNode().getParentOrThrow()
     ]);
   }
 
   return new Set(
-    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow())),
+    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow()))
   );
 }
 
@@ -43,7 +43,7 @@ function isIndentPermitted(maxDepth: number) {
       const parent = elementNode.getParent();
       if (!$isListNode(parent)) {
         throw new Error(
-          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.",
+          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent."
         );
       }
 
@@ -55,7 +55,7 @@ function isIndentPermitted(maxDepth: number) {
 }
 
 export default function ListMaxIndentLevelPlugin({
-  maxDepth,
+  maxDepth
 }: {
   maxDepth?: number;
 }) {
@@ -65,7 +65,7 @@ export default function ListMaxIndentLevelPlugin({
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth ?? 7),
-      COMMAND_PRIORITY_HIGH,
+      COMMAND_PRIORITY_HIGH
     );
   }, [editor, maxDepth]);
 
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
index ff8dd0658..d8e278b89 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
@@ -2,7 +2,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { useEffect } from "react";
 
 export default function CodeHighlightPlugin({
-  editable,
+  editable
 }: {
   editable: boolean;
 }) {
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
index 02c748c49..d56756dea 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
@@ -4,7 +4,7 @@ import {
   INSERT_ORDERED_LIST_COMMAND,
   INSERT_UNORDERED_LIST_COMMAND,
   ListNode,
-  REMOVE_LIST_COMMAND,
+  REMOVE_LIST_COMMAND
 } from "@lexical/list";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
@@ -13,20 +13,20 @@ import {
   $createQuoteNode,
   $isHeadingNode,
   $isQuoteNode,
-  HeadingTagType,
+  HeadingTagType
 } from "@lexical/rich-text";
 import {
   $getSelectionStyleValueForProperty,
   $isParentElementRTL,
   $patchStyleText,
-  $setBlocksType,
+  $setBlocksType
 } from "@lexical/selection";
 import { $isTableNode } from "@lexical/table";
 import {
   $findMatchingParent,
   $getNearestBlockElementAncestorOrThrow,
   $getNearestNodeOfType,
-  mergeRegister,
+  mergeRegister
 } from "@lexical/utils";
 import { useT } from "@reearth/services/i18n";
 import type { ElementFormatType, LexicalEditor, RangeSelection } from "lexical";
@@ -49,7 +49,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   REDO_COMMAND,
   SELECTION_CHANGE_COMMAND,
-  UNDO_COMMAND,
+  UNDO_COMMAND
 } from "lexical";
 import { useCallback, useEffect, useState, useMemo, RefObject } from "react";
 
@@ -62,7 +62,7 @@ const IS_APPLE = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 
 const _rootTypeToRootName = {
   root: "Root",
-  table: "Table",
+  table: "Table"
 };
 
 const FONT_FAMILY_OPTIONS: [string, string][] = [
@@ -72,7 +72,7 @@ const FONT_FAMILY_OPTIONS: [string, string][] = [
   ["Times New Roman", "Times New Roman"],
   ["Trebuchet MS", "Trebuchet MS"],
   ["Verdana", "Verdana"],
-  ["Noto Sans JP", "Noto Sans JP"],
+  ["Noto Sans JP", "Noto Sans JP"]
 ];
 
 const FONT_SIZE_OPTIONS: [string, string][] = [
@@ -89,7 +89,7 @@ const FONT_SIZE_OPTIONS: [string, string][] = [
   ["32px", "32px"],
   ["36px", "36px"],
   ["40px", "40px"],
-  ["64px", "64px"],
+  ["64px", "64px"]
 ];
 
 const LINE_HEIGHT_OPTIONS: [string, string][] = [
@@ -103,7 +103,7 @@ const LINE_HEIGHT_OPTIONS: [string, string][] = [
   ["1.7", "1.7"],
   ["1.8", "1.8"],
   ["1.9", "1.9"],
-  ["2.0", "2.0"],
+  ["2.0", "2.0"]
 ];
 
 // Fix for $patchStyleText not updating the style correctly
@@ -111,7 +111,7 @@ const LINE_HEIGHT_OPTIONS: [string, string][] = [
 function $customPatchStyleText(
   selection: RangeSelection,
   cssProperty: string,
-  cssValue: string,
+  cssValue: string
 ) {
   $patchStyleText(selection, { [cssProperty]: cssValue });
 
@@ -122,7 +122,7 @@ function $customPatchStyleText(
 function replaceCssStyle(
   existingCssStyle: string,
   cssProperty: string,
-  newCssValue: string,
+  newCssValue: string
 ): string {
   const cssArr = existingCssStyle
     .split(";")
@@ -166,7 +166,7 @@ function BlockFormatDropDown({
   blockTypeToBlockName,
   editor,
   blockType,
-  disabled = false,
+  disabled = false
 }: {
   containerRef: RefObject<HTMLDivElement>;
   scrollableContainerId?: string;
@@ -306,7 +306,7 @@ function FontDropDown({
   editor,
   value,
   style,
-  disabled = false,
+  disabled = false
 }: {
   containerRef: RefObject<HTMLDivElement>;
   scrollableContainerId?: string;
@@ -325,7 +325,7 @@ function FontDropDown({
         }
       });
     },
-    [editor, style],
+    [editor, style]
   );
 
   const buttonAriaLabel = useMemo(
@@ -333,7 +333,7 @@ function FontDropDown({
       style === "font-family"
         ? t("Formatting options for font family")
         : t("Formatting options for font size"),
-    [style, t],
+    [style, t]
   );
   return (
     <DropDown
@@ -358,7 +358,7 @@ function FontDropDown({
           >
             <span className="text">{text}</span>
           </DropDownItem>
-        ),
+        )
       )}
     </DropDown>
   );
@@ -370,7 +370,7 @@ function LineHeightDropDown({
   editor,
   value,
   style,
-  disabled = false,
+  disabled = false
 }: {
   containerRef: RefObject<HTMLDivElement>;
   scrollableContainerId?: string;
@@ -389,7 +389,7 @@ function LineHeightDropDown({
         }
       });
     },
-    [editor, style],
+    [editor, style]
   );
 
   return (
@@ -420,7 +420,7 @@ function ElementFormatDropdown({
   editor,
   value,
   isRTL,
-  disabled = false,
+  disabled = false
 }: {
   containerRef: RefObject<HTMLDivElement>;
   scrollableContainerId?: string;
@@ -435,22 +435,22 @@ function ElementFormatDropdown({
     () => ({
       center: {
         icon: "center-align",
-        name: t("Center Align"),
+        name: t("Center Align")
       },
       justify: {
         icon: "justify-align",
-        name: t("Justify Align"),
+        name: t("Justify Align")
       },
       left: {
         icon: "left-align",
-        name: t("Left Align"),
+        name: t("Left Align")
       },
       right: {
         icon: "right-align",
-        name: t("Right Align"),
-      },
+        name: t("Right Align")
+      }
     }),
-    [t],
+    [t]
   );
 
   return (
@@ -524,7 +524,7 @@ function ElementFormatDropdown({
 
 export default function ToolbarPlugin({
   containerRef,
-  scrollableContainerId,
+  scrollableContainerId
 }: {
   containerRef: RefObject<HTMLDivElement>;
   scrollableContainerId?: string;
@@ -563,9 +563,9 @@ export default function ToolbarPlugin({
       h3: t("Heading 3"),
       bullet: t("Bulleted List"),
       number: t("Numbered List"),
-      quote: t("Quote"),
+      quote: t("Quote")
     }),
-    [t],
+    [t]
   );
 
   const $updateToolbar = useCallback(() => {
@@ -617,7 +617,7 @@ export default function ToolbarPlugin({
         if ($isListNode(element)) {
           const parentList = $getNearestNodeOfType<ListNode>(
             anchorNode,
-            ListNode,
+            ListNode
           );
           const type = parentList
             ? parentList.getListType()
@@ -636,28 +636,28 @@ export default function ToolbarPlugin({
       }
       // Handle buttons
       setFontSize(
-        $getSelectionStyleValueForProperty(selection, "font-size", "16px"),
+        $getSelectionStyleValueForProperty(selection, "font-size", "16px")
       );
       setFontColor(
-        $getSelectionStyleValueForProperty(selection, "color", "#000"),
+        $getSelectionStyleValueForProperty(selection, "color", "#000")
       );
       setBgColor(
         $getSelectionStyleValueForProperty(
           selection,
           "background-color",
-          "#fff",
-        ),
+          "#fff"
+        )
       );
       setFontFamily(
-        $getSelectionStyleValueForProperty(selection, "font-family", "Arial"),
+        $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
       );
       setLineHeight(
-        $getSelectionStyleValueForProperty(selection, "line-height", "1.2"),
+        $getSelectionStyleValueForProperty(selection, "line-height", "1.2")
       );
       setElementFormat(
         ($isElementNode(node)
           ? node.getFormatType()
-          : parent?.getFormatType()) || "left",
+          : parent?.getFormatType()) || "left"
       );
     }
   }, [activeEditor, blockTypeToBlockName]);
@@ -670,7 +670,7 @@ export default function ToolbarPlugin({
         setActiveEditor(newEditor);
         return false;
       },
-      COMMAND_PRIORITY_CRITICAL,
+      COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, $updateToolbar]);
 
@@ -690,7 +690,7 @@ export default function ToolbarPlugin({
           setCanUndo(payload);
           return false;
         },
-        COMMAND_PRIORITY_CRITICAL,
+        COMMAND_PRIORITY_CRITICAL
       ),
       activeEditor.registerCommand<boolean>(
         CAN_REDO_COMMAND,
@@ -698,8 +698,8 @@ export default function ToolbarPlugin({
           setCanRedo(payload);
           return false;
         },
-        COMMAND_PRIORITY_CRITICAL,
-      ),
+        COMMAND_PRIORITY_CRITICAL
+      )
     );
   }, [$updateToolbar, activeEditor, editor]);
 
@@ -714,12 +714,12 @@ export default function ToolbarPlugin({
           event.preventDefault();
           return activeEditor.dispatchCommand(
             TOGGLE_LINK_COMMAND,
-            sanitizeUrl("https://"),
+            sanitizeUrl("https://")
           );
         }
         return false;
       },
-      COMMAND_PRIORITY_NORMAL,
+      COMMAND_PRIORITY_NORMAL
     );
   }, [activeEditor, isLink]);
 
@@ -732,7 +732,7 @@ export default function ToolbarPlugin({
         }
       });
     },
-    [activeEditor],
+    [activeEditor]
   );
 
   const clearFormatting = useCallback(() => {
@@ -779,14 +779,14 @@ export default function ToolbarPlugin({
     (value: string) => {
       applyStyleText({ color: value });
     },
-    [applyStyleText],
+    [applyStyleText]
   );
 
   const onBgColorSelect = useCallback(
     (value: string) => {
       applyStyleText({ "background-color": value });
     },
-    [applyStyleText],
+    [applyStyleText]
   );
 
   const insertLink = useCallback(() => {
@@ -971,7 +971,7 @@ export default function ToolbarPlugin({
             onClick={() => {
               activeEditor.dispatchCommand(
                 FORMAT_TEXT_COMMAND,
-                "strikethrough",
+                "strikethrough"
               );
             }}
             className={"item " + dropDownActiveClass(isStrikethrough)}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
index e3c95d8f5..6a0a2785e 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
@@ -36,11 +36,11 @@ const theme: EditorThemeClasses = {
     symbol: "DefaultLexicalEditorTheme__tokenProperty",
     tag: "DefaultLexicalEditorTheme__tokenProperty",
     url: "DefaultLexicalEditorTheme__tokenOperator",
-    variable: "DefaultLexicalEditorTheme__tokenVariable",
+    variable: "DefaultLexicalEditorTheme__tokenVariable"
   },
   embedBlock: {
     base: "DefaultLexicalEditorTheme__embedBlock",
-    focus: "DefaultLexicalEditorTheme__embedBlockFocus",
+    focus: "DefaultLexicalEditorTheme__embedBlockFocus"
   },
   hashtag: "DefaultLexicalEditorTheme__hashtag",
   heading: {
@@ -49,7 +49,7 @@ const theme: EditorThemeClasses = {
     h3: "DefaultLexicalEditorTheme__h3",
     h4: "DefaultLexicalEditorTheme__h4",
     h5: "DefaultLexicalEditorTheme__h5",
-    h6: "DefaultLexicalEditorTheme__h6",
+    h6: "DefaultLexicalEditorTheme__h6"
   },
   image: "editor-image",
   indent: "DefaultLexicalEditorTheme__indent",
@@ -62,16 +62,16 @@ const theme: EditorThemeClasses = {
     listitemChecked: "DefaultLexicalEditorTheme__listItemChecked",
     listitemUnchecked: "DefaultLexicalEditorTheme__listItemUnchecked",
     nested: {
-      listitem: "DefaultLexicalEditorTheme__nestedListItem",
+      listitem: "DefaultLexicalEditorTheme__nestedListItem"
     },
     olDepth: [
       "DefaultLexicalEditorTheme__ol1",
       "DefaultLexicalEditorTheme__ol2",
       "DefaultLexicalEditorTheme__ol3",
       "DefaultLexicalEditorTheme__ol4",
-      "DefaultLexicalEditorTheme__ol5",
+      "DefaultLexicalEditorTheme__ol5"
     ],
-    ul: "DefaultLexicalEditorTheme__ul",
+    ul: "DefaultLexicalEditorTheme__ul"
   },
   ltr: "DefaultLexicalEditorTheme__ltr",
   mark: "DefaultLexicalEditorTheme__mark",
@@ -106,8 +106,8 @@ const theme: EditorThemeClasses = {
     superscript: "DefaultLexicalEditorTheme__textSuperscript",
     underline: "DefaultLexicalEditorTheme__textUnderline",
     underlineStrikethrough:
-      "DefaultLexicalEditorTheme__textUnderlineStrikethrough",
-  },
+      "DefaultLexicalEditorTheme__textUnderlineStrikethrough"
+  }
 };
 
 export default theme;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
index 6e34d01ec..bb09a0ed5 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
@@ -25,7 +25,7 @@ const basicColors = [
   "#000000",
   "#4a4a4a",
   "#9b9b9b",
-  "#ffffff",
+  "#ffffff"
 ];
 
 const WIDTH = 214;
@@ -33,7 +33,7 @@ const HEIGHT = 150;
 
 export default function ColorPicker({
   color,
-  onChange,
+  onChange
 }: Readonly<ColorPickerProps>): JSX.Element {
   const [selfColor, setSelfColor] = useState(transformColor("hex", color));
   const [inputColor, setInputColor] = useState(color);
@@ -42,16 +42,16 @@ export default function ColorPicker({
   const saturationPosition = useMemo(
     () => ({
       x: (selfColor.hsv.s / 100) * WIDTH,
-      y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
+      y: ((100 - selfColor.hsv.v) / 100) * HEIGHT
     }),
-    [selfColor.hsv.s, selfColor.hsv.v],
+    [selfColor.hsv.s, selfColor.hsv.v]
   );
 
   const huePosition = useMemo(
     () => ({
-      x: (selfColor.hsv.h / 360) * WIDTH,
+      x: (selfColor.hsv.h / 360) * WIDTH
     }),
-    [selfColor.hsv],
+    [selfColor.hsv]
   );
 
   const onSetHex = (hex: string) => {
@@ -66,7 +66,7 @@ export default function ColorPicker({
     const newHsv = {
       ...selfColor.hsv,
       s: (x / WIDTH) * 100,
-      v: 100 - (y / HEIGHT) * 100,
+      v: 100 - (y / HEIGHT) * 100
     };
     const newColor = transformColor("hsv", newHsv);
     setSelfColor(newColor);
@@ -126,7 +126,7 @@ export default function ColorPicker({
           style={{
             backgroundColor: selfColor.hex,
             left: saturationPosition.x,
-            top: saturationPosition.y,
+            top: saturationPosition.y
           }}
         />
       </MoveWrapper>
@@ -135,7 +135,7 @@ export default function ColorPicker({
           className="color-picker-hue_cursor"
           style={{
             backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
-            left: huePosition.x,
+            left: huePosition.x
           }}
         />
       </MoveWrapper>
@@ -163,7 +163,7 @@ function MoveWrapper({
   className,
   style,
   onChange,
-  children,
+  children
 }: MoveWrapperProps) {
   const divRef = useRef<HTMLDivElement>(null);
 
@@ -261,7 +261,7 @@ function hex2rgb(hex: string): RGB {
     hex
       .replace(
         /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-        (_m, r, g, b) => "#" + r + r + g + g + b + b,
+        (_m, r, g, b) => "#" + r + r + g + g + b + b
       )
       .substring(1)
       .match(/.{2}/g) || []
@@ -270,7 +270,7 @@ function hex2rgb(hex: string): RGB {
   return {
     b: rbgArr[2],
     g: rbgArr[1],
-    r: rbgArr[0],
+    r: rbgArr[0]
   };
 }
 
@@ -319,7 +319,7 @@ function rgb2hex({ b, g, r }: RGB): string {
 
 function transformColor<M extends keyof Color, C extends Color[M]>(
   format: M,
-  color: C,
+  color: C
 ): Color {
   let hex: Color["hex"] = toHex("#121212");
   let rgb: Color["rgb"] = hex2rgb(hex);
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
index a553de9a8..634852b02 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
@@ -6,7 +6,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 import { createPortal } from "react-dom";
 
@@ -22,7 +22,7 @@ export function DropDownItem({
   children,
   className,
   onClick,
-  title,
+  title
 }: {
   children: React.ReactNode;
   className: string;
@@ -61,7 +61,7 @@ export function DropDownItem({
 function DropDownItems({
   children,
   dropDownRef,
-  onClose,
+  onClose
 }: {
   children: React.ReactNode;
   dropDownRef: React.Ref<HTMLDivElement>;
@@ -75,7 +75,7 @@ function DropDownItems({
     (itemRef: React.RefObject<HTMLButtonElement>) => {
       setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
     },
-    [setItems],
+    [setItems]
   );
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -105,9 +105,9 @@ function DropDownItems({
 
   const contextValue = useMemo(
     () => ({
-      registerItem,
+      registerItem
     }),
-    [registerItem],
+    [registerItem]
   );
 
   useEffect(() => {
@@ -138,7 +138,7 @@ export default function DropDown({
   buttonClassName,
   buttonIconClassName,
   children,
-  stopCloseOnClickSelf,
+  stopCloseOnClickSelf
 }: {
   disabled?: boolean;
   containerRef?: React.RefObject<HTMLDivElement>;
@@ -196,7 +196,7 @@ export default function DropDown({
     buttonRef,
     showDropDown,
     stopCloseOnClickSelf,
-    containerRef,
+    containerRef
   ]);
 
   useEffect(() => {
@@ -249,7 +249,7 @@ export default function DropDown({
           <DropDownItems dropDownRef={dropDownRef} onClose={handleClose}>
             {children}
           </DropDownItems>,
-          containerRef.current,
+          containerRef.current
         )}
     </>
   );
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
index 6edcdd1f7..4c436acc6 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
@@ -17,7 +17,7 @@ export default function TextInput({
   onChange,
   placeholder = "",
   "data-test-id": dataTestId,
-  type = "text",
+  type = "text"
 }: Props): JSX.Element {
   return (
     <div className="Input__wrapper">
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
index 85850df51..76b8abe62 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
@@ -2,7 +2,7 @@ import { $isAtNodeEnd } from "@lexical/selection";
 import { ElementNode, RangeSelection, TextNode } from "lexical";
 
 export function getSelectedNode(
-  selection: RangeSelection,
+  selection: RangeSelection
 ): TextNode | ElementNode {
   const anchor = selection.anchor;
   const focus = selection.focus;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/setFloatingElemPositionForLinkEditor.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/setFloatingElemPositionForLinkEditor.ts
index 7d2216752..fe3615554 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/utils/setFloatingElemPositionForLinkEditor.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/setFloatingElemPositionForLinkEditor.ts
@@ -6,7 +6,7 @@ export function setFloatingElemPositionForLinkEditor(
   floatingElem: HTMLElement,
   anchorElem: HTMLElement,
   verticalGap: number = VERTICAL_GAP,
-  horizontalOffset: number = HORIZONTAL_OFFSET,
+  horizontalOffset: number = HORIZONTAL_OFFSET
 ): void {
   const scrollerElem = anchorElem.parentElement;
 
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
index cef0c1836..1249a6182 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
@@ -3,7 +3,7 @@ const SUPPORTED_URL_PROTOCOLS = new Set([
   "https:",
   "mailto:",
   "sms:",
-  "tel:",
+  "tel:"
 ]);
 
 export function sanitizeUrl(url: string): string {
@@ -20,7 +20,7 @@ export function sanitizeUrl(url: string): string {
 
 // Source: https://stackoverflow.com/a/8234912/2013580
 const urlRegExp = new RegExp(
-  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/,
+  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
 );
 export function validateUrl(url: string): boolean {
   // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
diff --git a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
index 193bb9c78..8ca4ac051 100644
--- a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.stories.tsx
@@ -1,13 +1,13 @@
 import {
   PopupMenu,
-  PopupMenuItem as PopupItems,
+  PopupMenuItem as PopupItems
 } from "@reearth/beta/lib/reearth-ui";
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Breadcrumb, BreadcrumbProp, BreadcrumbItem } from "./";
 
 const meta: Meta<BreadcrumbProp> = {
-  component: Breadcrumb,
+  component: Breadcrumb
 };
 
 export default meta;
@@ -16,14 +16,14 @@ type Story = StoryObj<BreadcrumbProp>;
 
 const defaultItems: BreadcrumbItem[] = [
   {
-    title: "First",
+    title: "First"
   },
   {
-    title: "Second",
+    title: "Second"
   },
   {
-    title: "Third",
-  },
+    title: "Third"
+  }
 ];
 
 const multiLevelItems: BreadcrumbItem[] = [
@@ -37,27 +37,27 @@ const multiLevelItems: BreadcrumbItem[] = [
         subItem: [
           {
             id: "sub-one",
-            title: "Item one",
+            title: "Item one"
           },
           {
             id: "sub-two",
-            title: "Item two",
-          },
-        ],
+            title: "Item two"
+          }
+        ]
       },
       {
         id: "two",
-        title: "Sub Item two",
+        title: "Sub Item two"
       },
       {
         id: "three",
-        title: "Sub Item three",
-      },
-    ],
+        title: "Sub Item three"
+      }
+    ]
   },
   {
-    title: "Second Item",
-  },
+    title: "Second Item"
+  }
 ];
 
 const itemMenu: BreadcrumbItem[] = [
@@ -66,20 +66,20 @@ const itemMenu: BreadcrumbItem[] = [
     subItem: [
       {
         id: "one-1",
-        title: "Sub Menu 1",
+        title: "Sub Menu 1"
       },
       {
         id: "two-2",
-        title: "Sub Menu 2",
-      },
-    ],
+        title: "Sub Menu 2"
+      }
+    ]
   },
   {
-    title: "Second Item",
+    title: "Second Item"
   },
   {
-    title: "Third Item",
-  },
+    title: "Third Item"
+  }
 ];
 
 const renderPopupMenu = (items: BreadcrumbItem[], level: number) => {
@@ -94,7 +94,7 @@ const renderPopupMenu = (items: BreadcrumbItem[], level: number) => {
             nested={level > 0}
           />
         ),
-        subItem: undefined,
+        subItem: undefined
       };
     }
     return item;
@@ -106,7 +106,7 @@ export const Default: Story = {
     <div style={{ margin: "5px", height: "10vh" }}>
       <Breadcrumb items={defaultItems} />
     </div>
-  ),
+  )
 };
 
 export const DropdownMenu: Story = {
@@ -114,7 +114,7 @@ export const DropdownMenu: Story = {
     <div style={{ margin: "5px", height: "10vh" }}>
       <Breadcrumb items={renderPopupMenu(itemMenu, 0)} />
     </div>
-  ),
+  )
 };
 
 export const MultiLevelMenu: Story = {
@@ -122,5 +122,5 @@ export const MultiLevelMenu: Story = {
     <div style={{ margin: "5px", height: "10vh" }}>
       <Breadcrumb items={renderPopupMenu(multiLevelItems, 0)} />
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
index c2876804c..68d042a43 100644
--- a/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx
@@ -22,7 +22,7 @@ export const Breadcrumb: FC<BreadcrumbProp> = ({
   items = [],
   separator = " / ",
   size,
-  onClick,
+  onClick
 }) => {
   const theme = useTheme();
   return (
@@ -60,14 +60,14 @@ export const Breadcrumb: FC<BreadcrumbProp> = ({
 
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 const ItemWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.smallest,
-  cursor: "pointer",
+  cursor: "pointer"
 }));
 
 const Item = styled("div")(({ theme }) => ({
@@ -75,10 +75,10 @@ const Item = styled("div")(({ theme }) => ({
   borderRadius: theme.radius.smallest,
   display: "flex",
   gap: theme.spacing.smallest,
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 const Separator = styled("div")(({ theme }) => ({
   color: theme.content.weak,
-  userSelect: "none",
+  userSelect: "none"
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
index 7c412c86f..12892d02e 100644
--- a/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Button/index.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Button, ButtonProps } from ".";
 
 const meta: Meta<ButtonProps> = {
-  component: Button,
+  component: Button
 };
 
 export default meta;
@@ -48,7 +48,7 @@ export const Default: Story = {
         onClick={action("secondary-icon-small-click")}
       />
     </div>
-  ),
+  )
 };
 
 export const Primary: Story = {
@@ -104,7 +104,7 @@ export const Primary: Story = {
         onClick={action("primary-icon-small-click")}
       />
     </div>
-  ),
+  )
 };
 
 export const Dangerous: Story = {
@@ -160,7 +160,7 @@ export const Dangerous: Story = {
         onClick={action("dangerous-icon-small-click")}
       />
     </div>
-  ),
+  )
 };
 
 export const Simple: Story = {
@@ -216,5 +216,5 @@ export const Simple: Story = {
         onClick={action("simple-icon-small-click")}
       />
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Button/index.tsx b/web/src/beta/lib/reearth-ui/components/Button/index.tsx
index 531b42d47..9a4827b7a 100644
--- a/web/src/beta/lib/reearth-ui/components/Button/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Button/index.tsx
@@ -34,7 +34,7 @@ export const Button: FC<ButtonProps> = ({
   background,
   onClick,
   onMouseEnter,
-  onMouseLeave,
+  onMouseLeave
 }) => {
   return (
     <StyledButton
@@ -71,7 +71,7 @@ const StyledButton = styled("button")<{
     extendWidth,
     minWidth,
     background,
-    theme,
+    theme
   }) => ({
     display: "flex",
     flexDirection: "row",
@@ -122,7 +122,7 @@ const StyledButton = styled("button")<{
             backgroundColor:
               appearance === "simple"
                 ? "transparent"
-                : `${theme[appearance].weak}`,
+                : `${theme[appearance].weak}`
           },
     ["&:active"]: {
       borderColor: "transparent",
@@ -133,7 +133,7 @@ const StyledButton = styled("button")<{
           : appearance === "simple"
             ? "transparent"
             : `${theme[appearance].main}`,
-      boxShadow: "none",
+      boxShadow: "none"
     },
     ["&:disabled"]: {
       cursor: "not-allowed",
@@ -145,11 +145,11 @@ const StyledButton = styled("button")<{
         appearance === "simple"
           ? `1px solid transparent`
           : `1px solid ${theme.content.weaker}`,
-      boxShadow: "none",
+      boxShadow: "none"
     },
     ["& svg"]: {
       width: iconButton && size === "small" ? "12px" : "16px",
-      height: iconButton && size === "small" ? "12px" : "16px",
-    },
-  }),
+      height: iconButton && size === "small" ? "12px" : "16px"
+    }
+  })
 );
diff --git a/web/src/beta/lib/reearth-ui/components/CheckBox/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/CheckBox/index.stories.tsx
index 02d63189b..0b8d993cb 100644
--- a/web/src/beta/lib/reearth-ui/components/CheckBox/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/CheckBox/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { CheckBox, CheckBoxProps } from ".";
 
 const meta: Meta<CheckBoxProps> = {
-  component: CheckBox,
+  component: CheckBox
 };
 
 export default meta;
@@ -11,19 +11,19 @@ type Story = StoryObj<typeof CheckBox>;
 
 export const Default: Story = {
   args: {
-    value: false,
-  },
+    value: false
+  }
 };
 
 export const Checked: Story = {
   args: {
-    value: true,
-  },
+    value: true
+  }
 };
 
 export const Disabled: Story = {
   args: {
     value: true,
-    disabled: true,
-  },
+    disabled: true
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx b/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx
index 7aa1fb64c..b295fb04b 100644
--- a/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/CheckBox/index.tsx
@@ -47,6 +47,6 @@ const BoxField = styled("div")<{ disabled?: boolean }>(
     height: "16px",
     border: `1px solid ${theme.outline.weak}`,
     borderRadius: "4px",
-    cursor: disabled ? "not-allowed" : "pointer",
-  }),
+    cursor: disabled ? "not-allowed" : "pointer"
+  })
 );
diff --git a/web/src/beta/lib/reearth-ui/components/CodeInput/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/CodeInput/index.stories.tsx
index dc239fd7a..9a035c92b 100644
--- a/web/src/beta/lib/reearth-ui/components/CodeInput/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/CodeInput/index.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { CodeInput, CodeInputProps } from ".";
 
 const meta: Meta<CodeInputProps> = {
-  component: CodeInput,
+  component: CodeInput
 };
 
 export default meta;
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof CodeInput>;
 const TEST_JSON = {
   name: "Eukarya",
   application: "reearth",
-  component: "CodeInput",
+  component: "CodeInput"
 };
 
 export const Default: Story = {
@@ -25,7 +25,7 @@ export const Default: Story = {
         onBlur={action("onBlur")}
       />
     </div>
-  ),
+  )
 };
 
 export const Disabled: Story = {
@@ -38,7 +38,7 @@ export const Disabled: Story = {
         disabled={true}
       />
     </div>
-  ),
+  )
 };
 
 export const HideLineNumber: Story = {
@@ -51,7 +51,7 @@ export const HideLineNumber: Story = {
         showLines={false}
       />
     </div>
-  ),
+  )
 };
 
 export const JavascriptInput: Story = {
@@ -64,5 +64,5 @@ export const JavascriptInput: Story = {
         language="javascript"
       />
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx b/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
index 617f458a9..3e210c384 100644
--- a/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/CodeInput/index.tsx
@@ -19,7 +19,7 @@ export const CodeInput: FC<CodeInputProps> = ({
   disabled,
   height,
   onChange,
-  onBlur,
+  onBlur
 }) => {
   const theme = useTheme();
   const [currentValue, setCurrentValue] = useState<string | undefined>(value);
@@ -28,11 +28,11 @@ export const CodeInput: FC<CodeInputProps> = ({
   const options = useMemo(
     () => ({
       bracketPairColorization: {
-        enabled: true,
+        enabled: true
       },
       automaticLayout: true,
       minimap: {
-        enabled: false,
+        enabled: false
       },
       selectOnLineNumbers: true,
       fontSize: fonts.sizes.body,
@@ -40,13 +40,13 @@ export const CodeInput: FC<CodeInputProps> = ({
       readOnly: disabled ? true : false,
       wordWrap: "on",
       readOnlyMessage: {
-        supportHtml: false,
+        supportHtml: false
       },
       scrollbar: {
-        horizontal: "hidden",
-      },
+        horizontal: "hidden"
+      }
     }),
-    [disabled, showLines],
+    [disabled, showLines]
   );
 
   const handleEditorDidMount: OnMount = (editor, monaco) => {
@@ -55,8 +55,8 @@ export const CodeInput: FC<CodeInputProps> = ({
       inherit: true,
       rules: [],
       colors: {
-        "editor.background": theme.bg[1],
-      },
+        "editor.background": theme.bg[1]
+      }
     });
     monaco.editor.setTheme("myCustomTheme");
     editor.getAction("editor.action.formatDocument").run();
@@ -76,7 +76,7 @@ export const CodeInput: FC<CodeInputProps> = ({
       setCurrentValue(val);
       onChange?.(val);
     },
-    [onChange],
+    [onChange]
   );
 
   useEffect(() => {
@@ -115,6 +115,6 @@ const EditorWrapper = styled("div")<{
   cursor: disabled ? "not-allowed" : "text",
   boxShadow: theme.shadow.input,
   ".monaco-editor .view-lines": {
-    cursor: disabled ? "not-allowed !important" : "text",
-  },
+    cursor: disabled ? "not-allowed !important" : "text"
+  }
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx
index 633f3d1a2..bd8efcc27 100644
--- a/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Collapse/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Collapse, CollapseProps } from ".";
 
 const meta: Meta<CollapseProps> = {
-  component: Collapse,
+  component: Collapse
 };
 
 export default meta;
@@ -16,14 +16,14 @@ export const Default: Story = {
         width: "500px",
         display: "flex",
         flexDirection: "column",
-        gap: "12px",
+        gap: "12px"
       }}
     >
       <Collapse title="Default Collapse">
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
     </div>
-  ),
+  )
 };
 
 export const Small: Story = {
@@ -33,14 +33,14 @@ export const Small: Story = {
         width: "500px",
         display: "flex",
         flexDirection: "column",
-        gap: "12px",
+        gap: "12px"
       }}
     >
       <Collapse title="Small Collapse" size="small">
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
     </div>
-  ),
+  )
 };
 
 export const NoPadding: Story = {
@@ -50,14 +50,14 @@ export const NoPadding: Story = {
         width: "500px",
         display: "flex",
         flexDirection: "column",
-        gap: "12px",
+        gap: "12px"
       }}
     >
       <Collapse title="No Padding Collapse" noPadding>
         <p>User can manage the content freely.</p>
       </Collapse>
     </div>
-  ),
+  )
 };
 
 export const HeaderBg: Story = {
@@ -67,14 +67,14 @@ export const HeaderBg: Story = {
         width: "500px",
         display: "flex",
         flexDirection: "column",
-        gap: "12px",
+        gap: "12px"
       }}
     >
       <Collapse title="Customized Header Background" headerBg="#3B3CD0">
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
     </div>
-  ),
+  )
 };
 
 export const InitialAsCollapsed: Story = {
@@ -84,12 +84,12 @@ export const InitialAsCollapsed: Story = {
         width: "500px",
         display: "flex",
         flexDirection: "column",
-        gap: "12px",
+        gap: "12px"
       }}
     >
       <Collapse title="Collapsed" collapsed={true}>
         <p>Lorem ipsum dolor sit</p>
       </Collapse>
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx b/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
index fa574ffe0..dd9c17628 100644
--- a/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
@@ -32,7 +32,7 @@ export const Collapse: FC<CollapseProps> = ({
   noPadding,
   actions,
   children,
-  onCollapse,
+  onCollapse
 }) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed ?? false);
 
@@ -54,7 +54,8 @@ export const Collapse: FC<CollapseProps> = ({
         size={size}
         headerBg={headerBg}
         iconPosition={iconPosition}
-        disabled={disabled}>
+        disabled={disabled}
+      >
         <Typography size="body" weight={weight}>
           {title}
         </Typography>
@@ -85,7 +86,7 @@ const StyledWrapper = styled("div")<{
   flexShrink: 1,
   display: "flex",
   flexDirection: "column",
-  minHeight: 0,
+  minHeight: 0
 }));
 
 const StyledHeader = styled("div")<{
@@ -114,13 +115,13 @@ const StyledHeader = styled("div")<{
   cursor: disabled ? "auto" : "pointer",
   backgroundColor: headerBg ? headerBg : `${theme.bg[1]}`,
   fontSize: 0,
-  boxSizing: "border-box",
+  boxSizing: "border-box"
 }));
 
 const ActionsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  gap: theme.spacing.micro,
+  gap: theme.spacing.micro
 }));
 
 const ChildWrapper = styled("div")<{
@@ -141,7 +142,7 @@ const ChildWrapper = styled("div")<{
   flexGrow: 1,
   display: "flex",
   flexDirection: "column",
-  overflowY: "auto",
+  overflowY: "auto"
 }));
 
 const IconWrapper = styled("div")<{
@@ -154,7 +155,7 @@ const IconWrapper = styled("div")<{
         ? "-180deg"
         : "-90deg"
       : isCollapsed
-      ? "0deg"
-      : "-90deg",
-  transition: "rotate 0.2s ease-in",
+        ? "0deg"
+        : "-90deg",
+  transition: "rotate 0.2s ease-in"
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts b/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts
index 102f2f714..157444fb0 100644
--- a/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts
+++ b/web/src/beta/lib/reearth-ui/components/ColorInput/hooks.ts
@@ -7,11 +7,11 @@ import { ColorInputProps } from ".";
 const useColorPicker = ({
   value,
   alphaDisabled,
-  onChange,
+  onChange
 }: Pick<ColorInputProps, "value" | "alphaDisabled" | "onChange">) => {
   const [colorValue, setColorValue] = useState<string | undefined>(value);
   const [pickerColor, setPickerColor] = useState<RgbaColor>(
-    tinycolor(value).toRgb(),
+    tinycolor(value).toRgb()
   );
 
   const [open, setOpen] = useState(false);
@@ -34,7 +34,7 @@ const useColorPicker = ({
   const handleHexInputBlur = useCallback(() => {
     const hexPattern =
       /^#?([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/.test(
-        colorValue || "",
+        colorValue || ""
       );
     const color = !colorValue || hexPattern ? colorValue : value;
     setPickerColor(tinycolor(color).toRgb());
@@ -51,10 +51,10 @@ const useColorPicker = ({
 
       setPickerColor({
         ...pickerColor,
-        [channel]: value,
+        [channel]: value
       });
     },
-    [pickerColor],
+    [pickerColor]
   );
 
   const handlePickerCancel = useCallback(() => {
@@ -78,7 +78,7 @@ const useColorPicker = ({
       (alphaDisabled
         ? ["r", "g", "b"]
         : ["r", "g", "b", "a"]) as (keyof RgbaColor)[],
-    [alphaDisabled],
+    [alphaDisabled]
   );
 
   useEffect(() => {
@@ -98,7 +98,7 @@ const useColorPicker = ({
     handlePickerApply,
     handlePickerCancel,
     handleHexInputChange,
-    handleHexInputBlur,
+    handleHexInputBlur
   };
 };
 
diff --git a/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx
index 19d9f827b..c0d57557b 100644
--- a/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ColorInput/index.stories.tsx
@@ -4,33 +4,33 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ColorInput, ColorInputProps } from ".";
 
 const meta: Meta<ColorInputProps> = {
-  component: ColorInput,
+  component: ColorInput
 };
 
 export default meta;
 type Story = StoryObj<typeof ColorInput>;
 
 export const Default: Story = {
-  render: () => <ColorInput onChange={action("onChange")} />,
+  render: () => <ColorInput onChange={action("onChange")} />
 };
 
 export const AlphaDisabled: Story = {
   render: (arg) => <ColorInput onChange={action("onChange")} {...arg} />,
   args: {
-    alphaDisabled: true,
-  },
+    alphaDisabled: true
+  }
 };
 
 export const Disabled: Story = {
   render: (arg) => <ColorInput {...arg} />,
   args: {
-    disabled: true,
-  },
+    disabled: true
+  }
 };
 
 export const Small: Story = {
   render: (arg) => <ColorInput onChange={action("onChange")} {...arg} />,
   args: {
-    size: "small",
-  },
+    size: "small"
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx b/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx
index b44c0e68c..6ccfccb03 100644
--- a/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ColorInput/index.tsx
@@ -3,7 +3,7 @@ import {
   NumberInput,
   Popup,
   TextInput,
-  PopupPanel,
+  PopupPanel
 } from "@reearth/beta/lib/reearth-ui/components";
 import { fonts, styled } from "@reearth/services/theme";
 import { FC } from "react";
@@ -26,7 +26,7 @@ export const ColorInput: FC<ColorInputProps> = ({
   disabled,
   size = "normal",
   alphaDisabled,
-  onChange,
+  onChange
 }) => {
   const {
     open,
@@ -40,11 +40,11 @@ export const ColorInput: FC<ColorInputProps> = ({
     handleHexInputChange,
     handleHexInputBlur,
     handlePickerApply,
-    handlePickerCancel,
+    handlePickerCancel
   } = useHooks({
     value,
     alphaDisabled,
-    onChange,
+    onChange
   });
 
   return (
@@ -125,7 +125,7 @@ export const ColorInput: FC<ColorInputProps> = ({
 const InputWrapper = styled("div")<{ width?: number }>(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.smallest,
-  alignItems: "flex-start",
+  alignItems: "flex-start"
 }));
 
 const Swatch = styled("div")<{
@@ -164,61 +164,61 @@ const Swatch = styled("div")<{
     left: 0,
     top: 0,
     boxShadow: theme.shadow.input,
-    background: color ? color : "",
-  },
+    background: color ? color : ""
+  }
 }));
 
 const ColorPicker = styled(RgbaColorPicker, {
-  shouldForwardProp: (prop) => prop !== "alphaDisabled",
+  shouldForwardProp: (prop) => prop !== "alphaDisabled"
 })<{ alphaDisabled?: boolean }>(({ theme, alphaDisabled }) => ({
   gap: theme.spacing.normal,
   ".react-colorful__saturation-pointer": {
     width: "12px",
     height: "12px",
-    borderWidth: theme.spacing.smallest - 2,
+    borderWidth: theme.spacing.smallest - 2
   },
   ".react-colorful__hue-pointer, .react-colorful__alpha-pointer": {
     width: "2px",
     height: "10px",
     border: `2px solid ${theme.item.default}`,
-    borderRadius: theme.radius.smallest,
+    borderRadius: theme.radius.smallest
   },
   ".react-colorful__alpha.react-colorful__last-control": {
-    display: alphaDisabled ? "none" : "auto",
+    display: alphaDisabled ? "none" : "auto"
   },
   ".react-colorful__saturation, .react-colorful__hue, .react-colorful__alpha": {
     borderRadius: theme.radius.smallest + 1,
-    width: "270px",
+    width: "270px"
   },
   ".react-colorful__hue, .react-colorful__alpha": {
-    height: "10px",
+    height: "10px"
   },
   ".react-colorful__saturation": {
-    borderBottom: "none !important",
-  },
+    borderBottom: "none !important"
+  }
 }));
 
 const ColorPickerWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
-  gap: theme.spacing.normal,
+  gap: theme.spacing.normal
 }));
 
 const Format = styled("div")(() => ({
   fontSize: fonts.sizes.body,
-  lineHeight: `${fonts.lineHeights.body}px`,
+  lineHeight: `${fonts.lineHeights.body}px`
 }));
 
 const ChannelsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "flex-start",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 const ActionsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "center",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/DatePicker/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/DatePicker/index.stories.tsx
index 5dafee097..d4d5779e2 100644
--- a/web/src/beta/lib/reearth-ui/components/DatePicker/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DatePicker/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { DatePicker, DatePickerProps } from ".";
 
 const meta: Meta<DatePickerProps> = {
-  component: DatePicker,
+  component: DatePicker
 };
 
 export default meta;
@@ -11,12 +11,12 @@ type Story = StoryObj<typeof DatePicker>;
 
 export const Default: Story = {
   args: {
-    value: "25/05/2024",
-  },
+    value: "25/05/2024"
+  }
 };
 
 export const Disabled: Story = {
   args: {
-    disabled: true,
-  },
+    disabled: true
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx b/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
index 1683f624b..2ffba8ebe 100644
--- a/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
@@ -13,7 +13,7 @@ export const DatePicker: FC<DatePickerProps> = ({
   value,
   disabled,
   onChange,
-  onBlur,
+  onBlur
 }) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const [isFocused, setIsFocused] = useState(false);
@@ -28,7 +28,7 @@ export const DatePicker: FC<DatePickerProps> = ({
       setCurrentValue(newValue ?? "");
       onChange?.(newValue);
     },
-    [onChange],
+    [onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -67,7 +67,7 @@ const Wrapper = styled("div")<{
     display: "flex",
     gap: `${theme.spacing.smallest}px`,
     alignItems: "center",
-    boxShadow: theme.shadow.input,
+    boxShadow: theme.shadow.input
   };
 });
 
@@ -85,6 +85,6 @@ const StyledInput = styled("input")<{
   lineHeight: `${fonts.lineHeights.body}px`,
   padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
   "::placeholder": {
-    color: theme.content.weak,
-  },
+    color: theme.content.weak
+  }
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
index 820612b56..d2cf18727 100644
--- a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.stories.tsx
@@ -2,7 +2,6 @@ import { styled } from "@reearth/services/theme";
 import { Meta, Story } from "@storybook/react";
 import { ReactNode, useState } from "react";
 
-
 import { Icon } from "../Icon";
 
 import { DragAndDropList, DragAndDropListProps } from ".";
@@ -13,7 +12,7 @@ interface Item {
 }
 
 const meta: Meta<DragAndDropListProps<Item>> = {
-  component: DragAndDropList,
+  component: DragAndDropList
 };
 export default meta;
 
@@ -25,19 +24,19 @@ const MockItem = styled("div")(({ theme }) => ({
   padding: theme.spacing.smallest,
   border: theme.outline.weakest,
   borderRadius: theme.radius.small,
-  backgroundColor: theme.bg[1],
+  backgroundColor: theme.bg[1]
 }));
 
 const MockListContainer = styled("div")(({ theme }) => ({
   width: 300,
-  border: theme.outline.main,
+  border: theme.outline.main
 }));
 
 const DefaultComponent: typeof DragAndDropList<Item> = (args) => {
   const [list1, setList1] = useState<Item[]>([
     { id: "1", content: <MockItem>Item 1</MockItem> },
     { id: "2", content: <MockItem>Item 2</MockItem> },
-    { id: "3", content: <MockItem>Item 3</MockItem> },
+    { id: "3", content: <MockItem>Item 3</MockItem> }
   ]);
 
   return (
@@ -53,7 +52,7 @@ export const Default: Story = () => {
       style={{
         padding: "24px",
         display: "flex",
-        justifyContent: "space-around",
+        justifyContent: "space-around"
       }}
     >
       <DefaultComponent />
@@ -72,7 +71,7 @@ const HandleComponent: typeof DragAndDropList<Item> = (args) => {
           <Icon className={handleClassName} icon="circle" />
           Item 1
         </MockItem>
-      ),
+      )
     },
     {
       id: "2",
@@ -81,7 +80,7 @@ const HandleComponent: typeof DragAndDropList<Item> = (args) => {
           <Icon className={handleClassName} icon="circle" />
           Item 2
         </MockItem>
-      ),
+      )
     },
     {
       id: "3",
@@ -90,8 +89,8 @@ const HandleComponent: typeof DragAndDropList<Item> = (args) => {
           <Icon className={handleClassName} icon="circle" />
           Item 3
         </MockItem>
-      ),
-    },
+      )
+    }
   ]);
 
   return (
@@ -107,7 +106,7 @@ export const Handle: Story = () => {
       style={{
         padding: "24px",
         display: "flex",
-        justifyContent: "space-around",
+        justifyContent: "space-around"
       }}
     >
       <HandleComponent handleClassName={handleClassName} />
@@ -119,13 +118,13 @@ const SharedComponent: typeof DragAndDropList<Item> = (args) => {
   const [list1, setList1] = useState<Item[]>([
     { id: "1", content: <MockItem>Item 1</MockItem> },
     { id: "2", content: <MockItem>Item 2</MockItem> },
-    { id: "3", content: <MockItem>Item 3</MockItem> },
+    { id: "3", content: <MockItem>Item 3</MockItem> }
   ]);
 
   const [list2, setList2] = useState<Item[]>([
     { id: "4", content: <MockItem>Item 4</MockItem> },
     { id: "5", content: <MockItem>Item 5</MockItem> },
-    { id: "6", content: <MockItem>Item 6</MockItem> },
+    { id: "6", content: <MockItem>Item 6</MockItem> }
   ]);
 
   return (
@@ -156,7 +155,7 @@ export const Shared: Story = () => {
       style={{
         padding: "24px",
         display: "flex",
-        justifyContent: "space-around",
+        justifyContent: "space-around"
       }}
     >
       <SharedComponent />
@@ -170,7 +169,7 @@ export const Copy: Story = () => {
       style={{
         padding: "24px",
         display: "flex",
-        justifyContent: "space-around",
+        justifyContent: "space-around"
       }}
     >
       <SharedComponent group={{ name: "shared", pull: "clone" }} />
diff --git a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx
index 641fb19ae..406c291b2 100644
--- a/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DragAndDropList/index.tsx
@@ -7,7 +7,7 @@ import {
   Store,
   ItemInterface,
   GroupOptions,
-  SortableEvent,
+  SortableEvent
 } from "react-sortablejs";
 
 export interface DragAndDropListProps<T extends ItemInterface> {
@@ -34,12 +34,12 @@ export const DragAndDropList = <T extends ItemInterface>({
   gap = "small",
   dragDisabled,
   onMoveStart,
-  onMoveEnd,
+  onMoveEnd
 }: DragAndDropListProps<T>) => {
   const handleSetList = (
     newState: ItemInterface[],
     _sortable: Sortable | null,
-    _store: Store,
+    _store: Store
   ) => {
     setItems?.(newState as T[]);
   };
@@ -52,7 +52,7 @@ export const DragAndDropList = <T extends ItemInterface>({
     (evt: SortableEvent) => {
       onMoveEnd?.(evt.item?.dataset.id, evt.newIndex);
     },
-    [onMoveEnd],
+    [onMoveEnd]
   );
 
   return (
@@ -96,8 +96,8 @@ const StyledReactSortable = styled(ReactSortable)<{
         ? theme.spacing.small
         : (gap ?? 0),
   [`.${GHOST_CLASSNAME}`]: {
-    opacity: 0,
-  },
+    opacity: 0
+  }
 }));
 
 const ItemWrapper = styled("div")(() => ({}));
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
index ff00921c7..115b45d1f 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
+++ b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
@@ -277,5 +277,5 @@ export default {
   videoFilled: VideoFilled,
   warning: Warning,
   aToZ: AToZ,
-  zToA: ZToA,
+  zToA: ZToA
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx
index e6821fa3c..54d61eb92 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Icon/index.stories.tsx
@@ -5,7 +5,7 @@ import IconList from "./icons";
 import { Icon, IconProps, IconName } from ".";
 
 const meta: Meta<IconProps> = {
-  component: Icon,
+  component: Icon
 };
 
 export default meta;
@@ -20,7 +20,7 @@ export const AllIcons: Story = {
           flexWrap: "wrap",
           gap: "8px",
           width: "500px",
-          marginBottom: "20px",
+          marginBottom: "20px"
         }}
       >
         {Object.keys(IconList).map((iconName) => {
@@ -32,7 +32,7 @@ export const AllIcons: Story = {
                 display: "flex",
                 flexDirection: "row",
                 gap: "8px",
-                cursor: "pointer",
+                cursor: "pointer"
               }}
               title={iconName}
               onClick={() => copyToClipboard(iconName)}
@@ -47,7 +47,7 @@ export const AllIcons: Story = {
           display: "flex",
           flexWrap: "wrap",
           gap: "8px",
-          width: "500px",
+          width: "500px"
         }}
       >
         {Object.keys(IconList).map((iconName) => {
@@ -59,7 +59,7 @@ export const AllIcons: Story = {
                 display: "flex",
                 flexDirection: "row",
                 gap: "8px",
-                cursor: "pointer",
+                cursor: "pointer"
               }}
               title={iconName}
               onClick={() => copyToClipboard(iconName)}
@@ -70,7 +70,7 @@ export const AllIcons: Story = {
         })}
       </div>
     </>
-  ),
+  )
 };
 
 function copyToClipboard(text: string) {
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/index.tsx b/web/src/beta/lib/reearth-ui/components/Icon/index.tsx
index 2046bc6b9..830f61c18 100644
--- a/web/src/beta/lib/reearth-ui/components/Icon/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Icon/index.tsx
@@ -16,7 +16,7 @@ export const Icon: FC<IconProps> = ({
   icon,
   size = "normal",
   color,
-  className,
+  className
 }) => {
   const theme = useTheme();
   const SvgIcon = useMemo(() => {
diff --git a/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx
index 2bf0ad172..94099bc41 100644
--- a/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/IconButton/index.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { IconButton, IconButtonProps } from ".";
 
 const meta: Meta<IconButtonProps> = {
-  component: IconButton,
+  component: IconButton
 };
 
 export default meta;
@@ -15,8 +15,8 @@ export const Default: Story = {
     icon: "polyline",
     size: "normal",
     appearance: "secondary",
-    onClick: action("onClick"),
-  },
+    onClick: action("onClick")
+  }
 };
 
 export const Primary: Story = {
@@ -26,7 +26,7 @@ export const Primary: Story = {
       appearance="primary"
       onClick={action("onClick")}
     />
-  ),
+  )
 };
 
 export const Simple: Story = {
@@ -36,7 +36,7 @@ export const Simple: Story = {
       appearance="simple"
       onClick={action("onClick")}
     />
-  ),
+  )
 };
 
 export const Disabled: Story = {
@@ -47,19 +47,19 @@ export const Disabled: Story = {
       disabled
       onClick={action("onClick")}
     />
-  ),
+  )
 };
 
 export const Large: Story = {
   render: () => (
     <IconButton icon="polyline" size="large" onClick={action("onClick")} />
-  ),
+  )
 };
 
 export const Small: Story = {
   render: () => (
     <IconButton icon="polyline" size="small" onClick={action("onClick")} />
-  ),
+  )
 };
 
 export const Active: Story = {
@@ -70,5 +70,5 @@ export const Active: Story = {
       active
       onClick={action("onClick")}
     />
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx b/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
index 39779f87a..a61e541e8 100644
--- a/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/IconButton/index.tsx
@@ -24,7 +24,7 @@ export const IconButton: FC<IconButtonProps> = ({
   className,
   iconRotate,
   stopPropagationOnClick,
-  onClick,
+  onClick
 }) => {
   const handleClick = useCallback(
     (e: MouseEvent) => {
@@ -32,7 +32,7 @@ export const IconButton: FC<IconButtonProps> = ({
       if (disabled) return;
       onClick?.(e);
     },
-    [disabled, stopPropagationOnClick, onClick],
+    [disabled, stopPropagationOnClick, onClick]
   );
 
   return (
@@ -106,7 +106,7 @@ const StyledButton = styled("button")<{
           ? "20px"
           : "16px",
     transform: iconRotate ? `rotate(${iconRotate})` : "none",
-    transition: "transform 0.1s",
+    transition: "transform 0.1s"
   },
   ["&:hover"]: {
     color: `${theme.content.withBackground}`,
@@ -114,19 +114,19 @@ const StyledButton = styled("button")<{
       ? `${theme["primary"].weak}`
       : appearance === "simple"
         ? "transparent"
-        : `${theme[appearance].weak}`,
+        : `${theme[appearance].weak}`
   },
   ["&:active"]: {
     color: `${theme.content.withBackground}`,
     backgroundColor:
       appearance === "simple" ? "transparent" : `${theme[appearance].main}`,
-    boxShadow: "none",
+    boxShadow: "none"
   },
   ["&:disabled"]: {
     borderColor: "transparent",
     color: `${theme.content.weaker}`,
     backgroundColor: appearance !== "simple" ? `${theme.bg[1]}` : "transparent",
     boxShadow: "none",
-    cursor: "not-allowed",
-  },
+    cursor: "not-allowed"
+  }
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Loading/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Loading/index.stories.tsx
index 7b331368e..4edb5a8cd 100644
--- a/web/src/beta/lib/reearth-ui/components/Loading/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Loading/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Loading, LoadingProps } from ".";
 
 const meta: Meta<LoadingProps> = {
-  component: Loading,
+  component: Loading
 };
 
 export default meta;
diff --git a/web/src/beta/lib/reearth-ui/components/Loading/index.tsx b/web/src/beta/lib/reearth-ui/components/Loading/index.tsx
index 0a046979d..9bf8524bd 100644
--- a/web/src/beta/lib/reearth-ui/components/Loading/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Loading/index.tsx
@@ -15,7 +15,7 @@ export const Loading: FC<LoadingProps> = ({
   animationColor,
   fixed,
   relative,
-  overlay,
+  overlay
 }) => {
   const theme = useTheme();
 
@@ -45,5 +45,5 @@ const LoadingWrapper = styled("div")<{
   top: 0,
   left: 0,
   opacity: "0.8",
-  zIndex: theme.zIndexes.editor.loading,
+  zIndex: theme.zIndexes.editor.loading
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx
index cd262ce65..eb1fdc47c 100644
--- a/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx
@@ -1,6 +1,6 @@
+import { styled } from "@reearth/services/theme";
 import { Meta, StoryObj } from "@storybook/react";
 
-import { styled } from "@reearth/services/theme";
 
 import { Markdown, Props } from ".";
 
@@ -24,7 +24,7 @@ A table:
 `;
 
 const meta: Meta<typeof Markdown> = {
-  component: Markdown,
+  component: Markdown
 };
 
 export default meta;
@@ -53,5 +53,5 @@ const Wrapper = styled.div`
 Default.args = {
   children: markdown,
   onClick: () => console.log("clicked"),
-  onDoubleClick: () => console.log("double clicked clicked"),
+  onDoubleClick: () => console.log("double clicked clicked")
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx b/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx
index 0477a0358..d6bdbbcdb 100644
--- a/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx
@@ -22,11 +22,11 @@ export const Markdown: FC<Props> = ({
   backgroundColor,
   children,
   onClick,
-  onDoubleClick,
+  onDoubleClick
 }) => {
   const dark = useMemo(
     () => (backgroundColor ? isDark(backgroundColor) : false),
-    [backgroundColor],
+    [backgroundColor]
   );
 
   return (
@@ -57,55 +57,55 @@ const Wrapper = styled("div")<{ styles?: Typography; dark: boolean }>(
     lineHeight: "inherit",
     ...typographyStyles(styles),
     ["h1"]: {
-      borderBottom: "none",
+      borderBottom: "none"
     },
     ["h2"]: {
-      borderBottom: "none",
+      borderBottom: "none"
     },
     ["code"]: {
       backgroundColor: dark
         ? "rgba(240, 246, 252, 0.15)"
-        : "rgba(27, 31, 35, 0.05)",
+        : "rgba(27, 31, 35, 0.05)"
     },
     [".highlight pre"]: {
       backgroundColor: dark
         ? "rgba(22, 27, 34, 0.1)"
-        : "rgba(246, 248, 250, 0.1)",
+        : "rgba(246, 248, 250, 0.1)"
     },
     ["pre"]: {
       backgroundColor: dark
         ? "rgba(22, 27, 34, 0.1)"
-        : "rgba(246, 248, 250, 0.1)",
+        : "rgba(246, 248, 250, 0.1)"
     },
     ["table tr"]: {
       backgroundColor: "inherit",
       borderTopColor: dark
         ? "rgba(39, 67, 75, 0.1)"
-        : "rgba(198, 203, 209, 0.1)",
+        : "rgba(198, 203, 209, 0.1)"
     },
     ["table tr nthOfType(2n)"]: {
       backgroundColor: dark
         ? "rgba(22, 27, 34, 0.1)"
-        : "rgba(246, 248, 250, 0.1)",
+        : "rgba(246, 248, 250, 0.1)"
     },
     ["table td"]: {
-      borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)",
+      borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)"
     },
     ["table th"]: {
-      borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)",
+      borderColor: dark ? "rgba(59, 67, 75, 0.1)" : "rgba(223, 226, 229, 0.1)"
     },
     ["blockquote"]: {
       color: dark ? "rgba(139, 148, 158, 0.6)" : "rgba(106, 115, 125, 0.6)",
       borderLeftColor: dark
         ? "rgba(59, 67, 75, 0.1)"
-        : "rgba(223, 226, 229, 0.1)",
+        : "rgba(223, 226, 229, 0.1)"
     },
     ["hr"]: {
       backgroundColor: dark
         ? "rgba(48, 54, 61, 0.1"
-        : "rgba(225, 228, 232, 0.1)",
-    },
-  }),
+        : "rgba(225, 228, 232, 0.1)"
+    }
+  })
 );
 
 const isDark = (hex: string): boolean => tinycolor(hex).isDark();
diff --git a/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx
index 23fa697d8..b523b58de 100644
--- a/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Modal/index.stories.tsx
@@ -7,7 +7,7 @@ import { ModalPanel } from "../ModalPanel";
 import { ModalProps, Modal as ModalComponent } from ".";
 
 const meta: Meta<ModalProps> = {
-  component: ModalComponent,
+  component: ModalComponent
 };
 
 export default meta;
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof ModalComponent>;
 
 const Modal: FC<ModalProps> = ({
   size,
-  children,
+  children
 }: Omit<ModalProps, "visible">) => {
   const [visible, setVisible] = useState(false);
 
@@ -37,7 +37,7 @@ const Modal: FC<ModalProps> = ({
               style={{
                 padding: "24px",
                 borderRadius: "4px",
-                background: "#262626",
+                background: "#262626"
               }}
             >
               {children}
@@ -45,7 +45,7 @@ const Modal: FC<ModalProps> = ({
                 style={{
                   justifyContent: "flex-end",
                   display: "flex",
-                  paddingTop: "10px",
+                  paddingTop: "10px"
                 }}
               >
                 <Button
@@ -101,8 +101,8 @@ export const SmallSize: Story = {
     );
   },
   args: {
-    visible: false,
-  },
+    visible: false
+  }
 };
 
 export const MediumSize: Story = {
@@ -110,8 +110,8 @@ export const MediumSize: Story = {
     return <Modal {...args} size="medium" />;
   },
   args: {
-    visible: false,
-  },
+    visible: false
+  }
 };
 
 export const LargeSize: Story = {
@@ -119,6 +119,6 @@ export const LargeSize: Story = {
     return <Modal {...args} size="large" />;
   },
   args: {
-    visible: false,
-  },
+    visible: false
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Modal/index.tsx b/web/src/beta/lib/reearth-ui/components/Modal/index.tsx
index 2114d7e3b..94bd95073 100644
--- a/web/src/beta/lib/reearth-ui/components/Modal/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Modal/index.tsx
@@ -21,7 +21,7 @@ export const Modal: FC<ModalProps> = ({ visible, children, size }) => {
         : size === "large"
           ? DEFAULT_LARGE_WIDTH
           : DEFAULT_MEDIUM_WIDTH,
-    [size],
+    [size]
   );
 
   return !visible ? null : (
@@ -42,7 +42,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   height: "100%",
   overflow: "auto",
   opacity: 1,
-  zIndex: theme.zIndexes.editor.modal.bg,
+  zIndex: theme.zIndexes.editor.modal.bg
 }));
 
 const ContentWrapper = styled("div")<{ modalWidth?: number }>(
@@ -53,6 +53,6 @@ const ContentWrapper = styled("div")<{ modalWidth?: number }>(
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "center",
-  }),
+    justifyContent: "center"
+  })
 );
diff --git a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx
index 32d06f54a..dad4c299e 100644
--- a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.stories.tsx
@@ -6,7 +6,7 @@ import { Button } from "../Button";
 import { ModalPanel, ModalPanelProps } from ".";
 
 const meta: Meta<ModalPanelProps> = {
-  component: ModalPanel,
+  component: ModalPanel
 };
 
 export default meta;
@@ -19,7 +19,7 @@ const MockChild: FC = () => (
       color: "#e0e0e0",
       fontSize: "14px",
       width: "417px",
-      padding: "24px",
+      padding: "24px"
     }}
   >
     <p>
@@ -43,8 +43,8 @@ export const Default: Story = {
   args: {
     title: "Modal Panel Title",
     children: <MockChild />,
-    actions: <Button title="Ok" appearance="primary" />,
-  },
+    actions: <Button title="Ok" appearance="primary" />
+  }
 };
 
 export const MultipleActions: Story = {
@@ -63,6 +63,6 @@ export const MultipleActions: Story = {
         <Button size="normal" title="Cancel" />
         <Button size="normal" title="Apply" appearance="primary" />
       </>
-    ),
-  },
+    )
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
index aa5d6fbbd..8de2e42bd 100644
--- a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
@@ -17,7 +17,7 @@ export const ModalPanel: FC<ModalPanelProps> = ({
   actions,
   layout,
   onCancel,
-  appearance = "normal",
+  appearance = "normal"
 }) => {
   return (
     <Wrapper>
@@ -51,7 +51,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   background: theme.bg[1],
-  borderRadius: theme.radius.large,
+  borderRadius: theme.radius.large
 }));
 
 const HeaderWrapper = styled("div")(({ theme }) => ({
@@ -64,17 +64,17 @@ const HeaderWrapper = styled("div")(({ theme }) => ({
   background: theme.bg[1],
   borderBottom: `1px solid ${theme.outline.weaker}`,
   borderTopRightRadius: theme.radius.large,
-  borderTopLeftRadius: theme.radius.large,
+  borderTopLeftRadius: theme.radius.large
 }));
 
 const Title = styled("div")(() => ({
   flex: "1 0 0",
   fontSize: fonts.sizes.body,
-  lineHeight: `${fonts.lineHeights.body}px`,
+  lineHeight: `${fonts.lineHeights.body}px`
 }));
 
 const Content = styled("div")(() => ({
-  alignSelf: "stretch",
+  alignSelf: "stretch"
 }));
 
 const ActionWrapper = styled("div")<{ showBorder: boolean }>(
@@ -87,8 +87,8 @@ const ActionWrapper = styled("div")<{ showBorder: boolean }>(
     display: "flex",
     alignItems: "flex-start",
     borderTop: showBorder ? `1px solid ${theme.outline.weaker}` : "none",
-    gap: theme.spacing.normal,
-  }),
+    gap: theme.spacing.normal
+  })
 );
 
 const CommonLayout = styled("div")(({ theme }) => ({
@@ -97,5 +97,5 @@ const CommonLayout = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.large,
   padding: theme.spacing.large,
-  background: theme.bg[1],
+  background: theme.bg[1]
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/NumberInput/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/NumberInput/index.stories.tsx
index 778a079d0..3a0c6d177 100644
--- a/web/src/beta/lib/reearth-ui/components/NumberInput/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/NumberInput/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { NumberInput, NumberInputProps } from ".";
 
 const meta: Meta<NumberInputProps> = {
-  component: NumberInput,
+  component: NumberInput
 };
 
 export default meta;
@@ -11,50 +11,50 @@ type Story = StoryObj<typeof NumberInput>;
 
 export const Default: Story = {
   args: {
-    value: 1,
-  },
+    value: 1
+  }
 };
 
 export const SizeSmall: Story = {
   args: {
     placeholder: "Type number in here.",
     size: "small",
-    value: 2,
-  },
+    value: 2
+  }
 };
 
 export const Placeholder: Story = {
   args: {
-    placeholder: "Type number in here.",
-  },
+    placeholder: "Type number in here."
+  }
 };
 
 export const Disabled: Story = {
   args: {
     disabled: true,
-    value: 4,
-  },
+    value: 4
+  }
 };
 
 export const UsecaseReadonly: Story = {
   args: {
     value: 20,
     disabled: true,
-    appearance: "readonly",
-  },
+    appearance: "readonly"
+  }
 };
 
 export const UsecaseUnit: Story = {
   args: {
     unit: "m",
-    value: 10,
-  },
+    value: 10
+  }
 };
 
 export const UsecaseMinMax: Story = {
   args: {
     min: 1,
     value: 10,
-    max: 20,
-  },
+    max: 20
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx b/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
index f36627278..24585114c 100644
--- a/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
@@ -26,10 +26,10 @@ export const NumberInput: FC<NumberInputProps> = ({
   min,
   max,
   onChange,
-  onBlur,
+  onBlur
 }) => {
   const [currentValue, setCurrentValue] = useState<string>(
-    value?.toString() ?? "",
+    value?.toString() ?? ""
   );
   const [isFocused, setIsFocused] = useState(false);
 
@@ -55,11 +55,11 @@ export const NumberInput: FC<NumberInputProps> = ({
         }
         setCurrentValue(validatedValue);
         onChange?.(
-          currentValue === "" ? undefined : parseFloat(validatedValue),
+          currentValue === "" ? undefined : parseFloat(validatedValue)
         );
       }
     },
-    [max, min, onChange],
+    [max, min, onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -121,7 +121,7 @@ const Wrapper = styled("div")<{
         : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
     boxShadow: theme.shadow.input,
     width: !extendWidth ? "" : "100%",
-    boxSizing: "border-box",
+    boxSizing: "border-box"
   };
 });
 
@@ -144,13 +144,13 @@ const StyledInput = styled("input")<{
   pointerEvents: disabled ? "none" : "inherit",
   overflow: "hidden",
   "::placeholder": {
-    color: theme.content.weak,
+    color: theme.content.weak
   },
-  width: "100%",
+  width: "100%"
 }));
 
 const UnitWrapper = styled("div")(({ theme }) => ({
   color: theme.content.weak,
   fontSize: fonts.sizes.body,
-  lineHeight: `${fonts.lineHeights.body}px`,
+  lineHeight: `${fonts.lineHeights.body}px`
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts b/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts
index 8f32f3981..e50520b5f 100644
--- a/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts
+++ b/web/src/beta/lib/reearth-ui/components/Popup/hooks.ts
@@ -8,7 +8,7 @@ import {
   useDismiss,
   useInteractions,
   useHover,
-  safePolygon,
+  safePolygon
 } from "@floating-ui/react";
 import { useCallback, useMemo, useState } from "react";
 
@@ -20,7 +20,7 @@ const usePopover = ({
   offset: offsetProps,
   shift: shiftProps,
   onOpenChange,
-  triggerOnHover = false,
+  triggerOnHover = false
 }: Omit<PopupProps, "children" | "trigger">) => {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
 
@@ -36,7 +36,7 @@ const usePopover = ({
 
       onOpenChange?.(newOpen);
     },
-    [isControlled, onOpenChange],
+    [isControlled, onOpenChange]
   );
 
   const data = useFloating({
@@ -48,10 +48,10 @@ const usePopover = ({
       offset(offsetProps),
       flip({
         crossAxis: placement.includes("-"),
-        fallbackAxisSideDirection: "start",
+        fallbackAxisSideDirection: "start"
       }),
-      shift(shiftProps),
-    ],
+      shift(shiftProps)
+    ]
   });
 
   const context = data.context;
@@ -60,7 +60,7 @@ const usePopover = ({
   const dismiss = useDismiss(context);
   const hover = useHover(context, {
     enabled: triggerOnHover,
-    handleClose: safePolygon(),
+    handleClose: safePolygon()
   });
 
   const interactions = useInteractions([hover, click, dismiss]);
@@ -70,9 +70,9 @@ const usePopover = ({
       open,
       setOpen,
       ...interactions,
-      ...data,
+      ...data
     }),
-    [open, setOpen, interactions, data],
+    [open, setOpen, interactions, data]
   );
 };
 
diff --git a/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx
index 9dc6f6ff9..c5d8d7402 100644
--- a/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Popup/index.stories.tsx
@@ -7,7 +7,7 @@ import { Button } from "../Button";
 import { Popup, PopupProps } from ".";
 
 const meta: Meta<PopupProps> = {
-  component: Popup,
+  component: Popup
 };
 
 export default meta;
@@ -41,23 +41,23 @@ const Container = styled("div")(({ theme }) => ({
   height: "auto",
   color: theme.content.main,
   boxShadow: theme.shadow.card,
-  borderRadius: theme.radius.small,
+  borderRadius: theme.radius.small
 }));
 
 const Title = styled("div")(() => ({
   fontSize: fonts.sizes.h5,
-  lineHeight: `${fonts.lineHeights.h5}px`,
+  lineHeight: `${fonts.lineHeights.h5}px`
 }));
 
 const Content = styled("div")(() => ({
   fontSize: fonts.sizes.body,
-  lineHeight: `${fonts.lineHeights.body}px`,
+  lineHeight: `${fonts.lineHeights.body}px`
 }));
 
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.small,
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 export const BasicTrigger: Story = {
@@ -67,16 +67,16 @@ export const BasicTrigger: Story = {
   args: {
     trigger: "Click me",
     children: <MockChild />,
-    placement: "bottom",
+    placement: "bottom"
   },
   parameters: {
     docs: {
       description: {
         story:
-          "When passing a string as a trigger, it will be rendered as a button.",
-      },
-    },
-  },
+          "When passing a string as a trigger, it will be rendered as a button."
+      }
+    }
+  }
 };
 
 export const CustomTrigger: Story = {
@@ -88,8 +88,8 @@ export const CustomTrigger: Story = {
   ),
   args: {
     placement: "bottom",
-    children: <MockChild />,
-  },
+    children: <MockChild />
+  }
 };
 
 export const MultipleTrigger: Story = {
@@ -103,8 +103,8 @@ export const MultipleTrigger: Story = {
   },
   args: {
     children: <MockChild />,
-    placement: "bottom",
-  },
+    placement: "bottom"
+  }
 };
 
 export const Placement: Story = {
@@ -117,7 +117,7 @@ export const Placement: Story = {
           gridTemplateRows: "1fr 1fr 1fr 1fr 1fr",
           gridTemplateColumns: "1fr 1fr 1fr",
           justifyItems: "center",
-          alignItems: "center",
+          alignItems: "center"
         }}
       >
         <Popup {...args} trigger="top-start" placement="top-start" />
@@ -139,8 +139,8 @@ export const Placement: Story = {
     );
   },
   args: {
-    children: <MockChild />,
-  },
+    children: <MockChild />
+  }
 };
 
 const ControlledComponent: FC = () => {
@@ -161,5 +161,5 @@ const ControlledComponent: FC = () => {
 };
 
 export const Controlled: Story = {
-  render: () => <ControlledComponent />,
+  render: () => <ControlledComponent />
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Popup/index.tsx b/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
index b4f87ae26..93cd4cb03 100644
--- a/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Popup/index.tsx
@@ -4,7 +4,7 @@ import {
   FloatingFocusManager,
   Placement,
   OffsetOptions,
-  ShiftOptions,
+  ShiftOptions
 } from "@floating-ui/react";
 import { Button } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
@@ -35,7 +35,7 @@ type TriggerProps = {
 const Trigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TriggerProps>(
   function PopoverTrigger(
     { children, disabled, extendWidth, ...props },
-    propRef,
+    propRef
   ) {
     const context = usePopoverContext();
     const childrenRef = (children as any)?.ref;
@@ -51,7 +51,7 @@ const Trigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TriggerProps>(
         {typeof children === "string" ? <Button title={children} /> : children}
       </TriggerWrapper>
     );
-  },
+  }
 );
 
 const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
@@ -67,7 +67,7 @@ const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
             ref={ref}
             style={{
               ...context.floatingStyles,
-              ...style,
+              ...style
             }}
             {...context.getFloatingProps(props)}
           >
@@ -76,7 +76,7 @@ const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
         </FloatingFocusManager>
       </FloatingPortal>
     );
-  },
+  }
 );
 
 export type PopupProps = {
@@ -126,9 +126,9 @@ const TriggerWrapper = styled("div")<{
   extendWidth?: boolean;
 }>(({ disabled, extendWidth }) => ({
   width: extendWidth ? "100%" : "fit-content",
-  pointerEvents: disabled ? "none" : "auto",
+  pointerEvents: disabled ? "none" : "auto"
 }));
 
 const ContentWrapper = styled("div")(({ theme }) => ({
-  zIndex: theme.zIndexes.editor.popover,
+  zIndex: theme.zIndexes.editor.popover
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
index 9634188ab..d02d94078 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.stories.tsx
@@ -6,7 +6,7 @@ import { Button } from "../Button";
 import { PopupMenu, PopupMenuProps, PopupMenuItem } from ".";
 
 const meta: Meta<PopupMenuProps> = {
-  component: PopupMenu,
+  component: PopupMenu
 };
 
 export default meta;
@@ -16,25 +16,25 @@ type Story = StoryObj<PopupMenuProps>;
 const defaultItems: PopupMenuItem[] = [
   {
     id: "1",
-    title: "First",
+    title: "First"
   },
   {
     id: "2",
     title: "Second",
-    path: "/second",
+    path: "/second"
   },
   {
     id: "3",
     title: "Third",
-    path: "/third",
-  },
+    path: "/third"
+  }
 ];
 
 const menuItems: PopupMenuItem[] = [
   {
     id: "menu-1",
     title: "Text",
-    icon: "textT",
+    icon: "textT"
   },
   {
     id: "menu-2",
@@ -44,25 +44,25 @@ const menuItems: PopupMenuItem[] = [
       {
         id: "2-a",
         title: "menu-item",
-        icon: "book",
+        icon: "book"
       },
       {
         id: "2-b",
         title: "menu-item",
-        icon: "book",
-      },
-    ],
+        icon: "book"
+      }
+    ]
   },
   {
     id: "menu-3",
     title: "Camera",
-    icon: "camera",
+    icon: "camera"
   },
   {
     id: "menu-4",
     title: "Video",
-    icon: "videoFilled",
-  },
+    icon: "videoFilled"
+  }
 ];
 
 const multlevelItems: PopupMenuItem[] = [
@@ -72,17 +72,17 @@ const multlevelItems: PopupMenuItem[] = [
     subItem: [
       {
         id: "1-a",
-        title: "sub menu-item",
+        title: "sub menu-item"
       },
       {
         id: "1-c",
-        title: "sub menu-item",
-      },
-    ],
+        title: "sub menu-item"
+      }
+    ]
   },
   {
     id: "item-2",
-    title: "Second Item",
+    title: "Second Item"
   },
   {
     id: "item-3",
@@ -90,14 +90,14 @@ const multlevelItems: PopupMenuItem[] = [
     subItem: [
       {
         id: "3-a",
-        title: "Third sub menu-item",
+        title: "Third sub menu-item"
       },
       {
         id: "3-b",
-        title: "Third sub menu-item",
-      },
-    ],
-  },
+        title: "Third sub menu-item"
+      }
+    ]
+  }
 ];
 
 export const Default: Story = {
@@ -107,7 +107,7 @@ export const Default: Story = {
         <PopupMenu label="Dropdown Menu" menu={defaultItems} />
       </div>
     </BrowserRouter>
-  ),
+  )
 };
 
 export const CustomLabel: Story = {
@@ -120,7 +120,7 @@ export const CustomLabel: Story = {
         />
       </div>
     </BrowserRouter>
-  ),
+  )
 };
 
 export const MultilevelMenu: Story = {
@@ -133,7 +133,7 @@ export const MultilevelMenu: Story = {
         width={200}
       />
     </div>
-  ),
+  )
 };
 
 export const IconsMenu: Story = {
@@ -146,5 +146,5 @@ export const IconsMenu: Story = {
         menu={menuItems}
       />
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
index 49624a1f9..af5806c1b 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
@@ -3,7 +3,7 @@ import {
   Icon,
   Typography,
   IconName,
-  PopupProps,
+  PopupProps
 } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, ReactNode, useCallback, useEffect, useState } from "react";
@@ -62,7 +62,7 @@ export const PopupMenu: FC<PopupMenuProps> = ({
   icon,
   openMenu = false,
   size = "normal",
-  onOpenChange,
+  onOpenChange
 }) => {
   const [open, setOpen] = useState(false);
   const theme = useTheme();
@@ -81,7 +81,7 @@ export const PopupMenu: FC<PopupMenuProps> = ({
         onOpenChange?.(state);
       }
     },
-    [onOpenChange, open],
+    [onOpenChange, open]
   );
 
   const renderSingleItem = (item: PopupMenuItem, index: number) => {
@@ -93,7 +93,7 @@ export const PopupMenu: FC<PopupMenuProps> = ({
       path,
       selected,
       subItem,
-      title,
+      title
     } = item;
     return (
       <Item
@@ -161,7 +161,7 @@ export const PopupMenu: FC<PopupMenuProps> = ({
               {customSubMenu[index][0].customSubMenuLabel}
             </SubMenuHeader>
             {item.map((subItem, subIndex) =>
-              renderSingleItem(subItem, subIndex),
+              renderSingleItem(subItem, subIndex)
             )}
           </Group>
         ))}
@@ -227,8 +227,8 @@ const TriggerWrapper = styled("div")<{ nested?: boolean }>(
     display: "flex",
     gap: theme.spacing.smallest,
     alignItems: "center",
-    justifyContent: nested ? "space-between" : "normal",
-  }),
+    justifyContent: nested ? "space-between" : "normal"
+  })
 );
 
 const PopupMenuWrapper = styled("div")<{ width?: number; nested?: boolean }>(
@@ -246,20 +246,20 @@ const PopupMenuWrapper = styled("div")<{ width?: number; nested?: boolean }>(
     overflowY: "auto",
     margin: nested ? "-7px 0 0 2px" : "inherit",
     ["::-webkit-scrollbar"]: {
-      width: "8px",
+      width: "8px"
     },
     ["::-webkit-scrollbar-track"]: {
       background: theme.relative.darker,
-      borderRadius: "10px",
+      borderRadius: "10px"
     },
     ["::-webkit-scrollbar-thumb"]: {
       background: theme.relative.light,
-      borderRadius: "4px",
+      borderRadius: "4px"
     },
     ["::-webkit-scrollbar-thumb:hover"]: {
-      background: theme.relative.lighter,
-    },
-  }),
+      background: theme.relative.lighter
+    }
+  })
 );
 
 const Item = styled("div")<{
@@ -278,13 +278,13 @@ const Item = styled("div")<{
   cursor: "pointer",
   backgroundColor: "transparent",
   "&:hover": {
-    backgroundColor: `${theme.bg[2]}`,
-  },
+    backgroundColor: `${theme.bg[2]}`
+  }
 }));
 
 const StyledLink = styled(Link)(() => ({
   textDecoration: "none",
-  width: "100%",
+  width: "100%"
 }));
 
 const SubMenuHeader = styled("div")(({ theme }) => ({
@@ -292,7 +292,7 @@ const SubMenuHeader = styled("div")(({ theme }) => ({
   fontSize: "11px",
   fontWeight: 400,
   lineHeight: "16px",
-  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px  0 ${theme.spacing.small}px`,
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px  0 ${theme.spacing.small}px`
 }));
 
 const SubItem = styled("div")(() => ({
@@ -300,7 +300,7 @@ const SubItem = styled("div")(() => ({
   justifyContent: "space-between",
   justifyItems: "center",
   flexGrow: 1,
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 const Label = styled("p")<{ nested: boolean }>(({ nested, theme }) => ({
@@ -308,7 +308,7 @@ const Label = styled("p")<{ nested: boolean }>(({ nested, theme }) => ({
   fontSize: theme.fonts.sizes.body,
   flex: 1,
   color: nested ? theme.content.main : theme.content.weak,
-  fontWeight: nested ? "normal" : "bold",
+  fontWeight: nested ? "normal" : "bold"
 }));
 
 const LabelWrapper = styled("div")<{
@@ -327,19 +327,19 @@ const LabelWrapper = styled("div")<{
   "&:hover": {
     background: theme.bg[2],
     p: {
-      color: theme.content.main,
-    },
-  },
+      color: theme.content.main
+    }
+  }
 }));
 
 const Group = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: `${theme.spacing.micro}px`,
+  gap: `${theme.spacing.micro}px`
 }));
 
 const TitleWrapper = styled(Typography)(({ theme }) => ({
   color: theme.content.main,
   whiteSpace: "nowrap",
-  maxWidth: "160px",
+  maxWidth: "160px"
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx
index 7ef4d3fe9..dd3fc6a74 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.stories.tsx
@@ -6,7 +6,7 @@ import { Button } from "../Button";
 import { PopupPanel, PopupPanelProps } from ".";
 
 const meta: Meta<PopupPanelProps> = {
-  component: PopupPanel,
+  component: PopupPanel
 };
 
 export default meta;
@@ -25,8 +25,8 @@ const MockChild: FC = () => (
 export const Dafault: Story = {
   args: {
     title: "Panel Title",
-    children: <MockChild />,
-  },
+    children: <MockChild />
+  }
 };
 
 export const Action: Story = {
@@ -35,8 +35,8 @@ export const Action: Story = {
     children: <MockChild />,
     actions: (
       <Button extendWidth size="small" title="Apply" appearance="primary" />
-    ),
-  },
+    )
+  }
 };
 
 export const MultipleActions: Story = {
@@ -49,12 +49,12 @@ export const MultipleActions: Story = {
           display: "flex",
           justifyContent: "center",
           alignItems: "flex-start",
-          gap: "8px",
+          gap: "8px"
         }}
       >
         <Button extendWidth size="small" title="Cancel" />
         <Button extendWidth size="small" title="Apply" appearance="primary" />
       </div>
-    ),
-  },
+    )
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
index 742fcaeed..14b498003 100644
--- a/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/PopupPanel/index.tsx
@@ -17,7 +17,7 @@ export const PopupPanel: FC<PopupPanelProps> = ({
   width,
   children,
   actions,
-  onCancel,
+  onCancel
 }) => {
   return (
     <Wrapper width={width}>
@@ -45,7 +45,7 @@ const Wrapper = styled("div")<{ width?: number }>(({ width, theme }) => ({
   border: `1px solid ${theme.outline.weak}`,
   borderRadius: theme.radius.small,
   background: theme.bg[1],
-  boxShadow: theme.shadow.popup,
+  boxShadow: theme.shadow.popup
 }));
 
 const HeaderWrapper = styled("div")(({ theme }) => ({
@@ -55,21 +55,21 @@ const HeaderWrapper = styled("div")(({ theme }) => ({
   alignSelf: "stretch",
   padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
   borderBottom: `1px solid ${theme.outline.weak}`,
-  color: theme.content.main,
+  color: theme.content.main
 }));
 
 const Title = styled("div")(() => ({
   flex: "1 0 0",
   fontSize: fonts.sizes.body,
-  lineHeight: `${fonts.lineHeights.body}px`,
+  lineHeight: `${fonts.lineHeights.body}px`
 }));
 
 const Content = styled("div")(({ theme }) => ({
   padding: theme.spacing.small,
-  alignSelf: "stretch",
+  alignSelf: "stretch"
 }));
 
 const ActionWrapper = styled("div")(({ theme }) => ({
   borderTop: `1px solid ${theme.outline.weak}`,
-  padding: theme.spacing.small,
+  padding: theme.spacing.small
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Radio/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Radio/index.stories.tsx
index 995146719..2f6ec31a4 100644
--- a/web/src/beta/lib/reearth-ui/components/Radio/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Radio/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Radio, RadioProps } from ".";
 
 const meta: Meta<RadioProps> = {
-  component: Radio,
+  component: Radio
 };
 
 export default meta;
@@ -11,9 +11,9 @@ export default meta;
 type Story = StoryObj<RadioProps>;
 
 export const Default: Story = {
-  render: () => <Radio value={""} label="Radio button" checked={true} />,
+  render: () => <Radio value={""} label="Radio button" checked={true} />
 };
 
 export const Disabled: Story = {
-  render: () => <Radio value="" disabled={true} label="Radio button" />,
+  render: () => <Radio value="" disabled={true} label="Radio button" />
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Radio/index.tsx b/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
index 73e4a7eff..486932a6d 100644
--- a/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Radio/index.tsx
@@ -14,7 +14,7 @@ export const Radio: FC<RadioProps> = ({
   label,
   disabled,
   checked,
-  onChange,
+  onChange
 }) => {
   const handleChange = () => {
     if (disabled) return;
@@ -41,7 +41,7 @@ export const Radio: FC<RadioProps> = ({
 const RadioWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.smallest,
-  alignItems: "center",
+  alignItems: "center"
 }));
 
 const RadioIndicator = styled("div")<{ checked?: boolean }>(
@@ -49,8 +49,8 @@ const RadioIndicator = styled("div")<{ checked?: boolean }>(
     width: "6px",
     height: "6px",
     borderRadius: "50%",
-    background: checked ? theme.select.main : theme.content.main,
-  }),
+    background: checked ? theme.select.main : theme.content.main
+  })
 );
 
 const RadioLabel = styled("div")<{ disabled?: boolean }>(
@@ -60,15 +60,15 @@ const RadioLabel = styled("div")<{ disabled?: boolean }>(
     fontWeight: theme.fonts.weight.regular,
     minWidth: "40px",
     cursor: disabled ? "not-allowed" : "pointer",
-    flexGrow: 1,
-  }),
+    flexGrow: 1
+  })
 );
 
 const RadioInput = styled("input")(() => ({
   position: "absolute",
   opacity: 0,
   width: 0,
-  height: 0,
+  height: 0
 }));
 
 const RadioButton = styled("div")<{ checked?: boolean; disabled?: boolean }>(
@@ -84,6 +84,6 @@ const RadioButton = styled("div")<{ checked?: boolean; disabled?: boolean }>(
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    cursor: disabled ? "not-allowed" : "pointer",
-  }),
+    cursor: disabled ? "not-allowed" : "pointer"
+  })
 );
diff --git a/web/src/beta/lib/reearth-ui/components/RadioGroup/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/RadioGroup/index.stories.tsx
index bf578c5a4..6ebc8c104 100644
--- a/web/src/beta/lib/reearth-ui/components/RadioGroup/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/RadioGroup/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { RadioGroup, RadioGroupProps } from ".";
 
 const meta: Meta<RadioGroupProps> = {
-  component: RadioGroup,
+  component: RadioGroup
 };
 
 export default meta;
@@ -13,13 +13,13 @@ type Story = StoryObj<RadioGroupProps>;
 const options = [
   { label: "option1", value: "Option 1" },
   { label: "option2", value: "Option 2" },
-  { label: "option3", value: "Option 3" },
+  { label: "option3", value: "Option 3" }
 ];
 
 export const Default: Story = {
-  render: () => <RadioGroup options={options} />,
+  render: () => <RadioGroup options={options} />
 };
 
 export const Horizontal: Story = {
-  render: () => <RadioGroup options={options} layout="vertical" />,
+  render: () => <RadioGroup options={options} layout="vertical" />
 };
diff --git a/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx b/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx
index 5efee4fa7..6beb45144 100644
--- a/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/RadioGroup/index.tsx
@@ -1,7 +1,7 @@
-import { FC, useCallback, useEffect, useState } from "react";
 
 import { Radio } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
 
 export type RadioGroupProps = {
   layout?: "vertical" | "horizontal";
@@ -14,7 +14,7 @@ export const RadioGroup: FC<RadioGroupProps> = ({
   layout = "horizontal",
   value,
   options,
-  onChange,
+  onChange
 }) => {
   const [currentValue, setCurrentValue] = useState(value);
 
@@ -28,7 +28,7 @@ export const RadioGroup: FC<RadioGroupProps> = ({
       setCurrentValue(newValue);
       onChange?.(newValue);
     },
-    [onChange, currentValue],
+    [onChange, currentValue]
   );
 
   return (
@@ -50,6 +50,6 @@ const RadioGroupWrapper = styled("div")<{ layout?: "vertical" | "horizontal" }>(
   ({ layout, theme }) => ({
     display: "flex",
     flexDirection: layout === "vertical" ? "column" : "row",
-    gap: theme.spacing.normal,
-  }),
+    gap: theme.spacing.normal
+  })
 );
diff --git a/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx
index 355530e7a..5d2cad497 100644
--- a/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Selector/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Selector, SelectorProps } from ".";
 
 const meta: Meta<SelectorProps> = {
-  component: Selector,
+  component: Selector
 };
 
 export default meta;
@@ -12,46 +12,46 @@ type Story = StoryObj<typeof Selector>;
 const options = [
   {
     value: "item_1",
-    label: "item_1",
+    label: "item_1"
   },
   {
     value: "item_2",
-    label: "item_2",
+    label: "item_2"
   },
   {
     value: "item_3",
-    label: "item_3",
+    label: "item_3"
   },
   {
     value: "item_4",
-    label: "item_4",
+    label: "item_4"
   },
   {
     value: "item_5",
-    label: "item_5",
+    label: "item_5"
   },
   {
     value: "item_6",
-    label: "item_6",
-  },
+    label: "item_6"
+  }
 ];
 
 export const Default: Story = {
   render: () => {
     return <Selector options={options} />;
-  },
+  }
 };
 
 export const MultipleSelector: Story = {
   render: () => {
     return <Selector options={options} multiple={true} />;
-  },
+  }
 };
 
 export const NoOptions: Story = {
   render: () => {
     return <Selector options={[]} />;
-  },
+  }
 };
 
 export const Disabled: Story = {
@@ -62,7 +62,7 @@ export const Disabled: Story = {
           width: "100%",
           gap: "8px",
           display: "flex",
-          flexDirection: "column",
+          flexDirection: "column"
         }}
       >
         <Selector options={options} disabled />
@@ -75,5 +75,5 @@ export const Disabled: Story = {
         />
       </div>
     );
-  },
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
index e13f0df41..d49e7d298 100644
--- a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
@@ -6,7 +6,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { Button } from "../Button";
@@ -33,7 +33,7 @@ export const Selector: FC<SelectorProps> = ({
   placeholder = "Please select",
   disabled,
   maxHeight,
-  onChange,
+  onChange
 }) => {
   const theme = useTheme();
   const selectorRef = useRef<HTMLDivElement>(null);
@@ -71,7 +71,7 @@ export const Selector: FC<SelectorProps> = ({
       }
       return selectedValue === value;
     },
-    [multiple, selectedValue],
+    [multiple, selectedValue]
   );
 
   const handleChange = (value: string) => {
@@ -103,13 +103,13 @@ export const Selector: FC<SelectorProps> = ({
         onChange?.(newSelectedArr);
       }
     },
-    [selectedValue, onChange],
+    [selectedValue, onChange]
   );
 
   const selectedLabels = useMemo(() => {
     if (Array.isArray(selectedValue)) {
       return selectedValue.map(
-        (val) => optionValues.find((item) => item.value === val)?.label,
+        (val) => optionValues.find((item) => item.value === val)?.label
       );
     }
     return [optionValues.find((item) => item.value === selectedValue)?.label];
@@ -204,7 +204,7 @@ export const Selector: FC<SelectorProps> = ({
 };
 
 const SelectorWrapper = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 
 const SelectInput = styled("div")<{
@@ -231,7 +231,7 @@ const SelectInput = styled("div")<{
         }px`,
   cursor: disabled ? "not-allowed" : "pointer",
   minWidth: width ? `${width}px` : "fit-content",
-  height: size == "small" ? "21px" : "28px",
+  height: size == "small" ? "21px" : "28px"
 }));
 
 const SelectedItems = styled("div")(({ theme }) => ({
@@ -239,7 +239,7 @@ const SelectedItems = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: `${theme.spacing.smallest}px`,
-  flexWrap: "wrap",
+  flexWrap: "wrap"
 }));
 
 const SelectedItem = styled("div")(({ theme }) => ({
@@ -248,7 +248,7 @@ const SelectedItem = styled("div")(({ theme }) => ({
   gap: `${theme.spacing.smallest}px`,
   padding: `${theme.spacing.micro}px ${theme.spacing.smallest}px`,
   backgroundColor: `${theme.bg[2]}`,
-  borderRadius: `${theme.radius.smallest}px`,
+  borderRadius: `${theme.radius.smallest}px`
 }));
 
 const DropDownWrapper = styled("div")<{
@@ -268,19 +268,19 @@ const DropDownWrapper = styled("div")<{
   maxHeight: maxHeight ? `${maxHeight}px` : "",
   overflowY: maxHeight ? "auto" : "hidden",
   ["::-webkit-scrollbar"]: {
-    width: "8px",
+    width: "8px"
   },
   ["::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
-    borderRadius: "10px",
+    borderRadius: "10px"
   },
   ["::-webkit-scrollbar-thumb"]: {
     background: theme.relative.light,
-    borderRadius: "4px",
+    borderRadius: "4px"
   },
   ["::-webkit-scrollbar-thumb:hover"]: {
-    background: theme.relative.lighter,
-  },
+    background: theme.relative.lighter
+  }
 }));
 
 const DropDownItem = styled("div")<{
@@ -297,6 +297,6 @@ const DropDownItem = styled("div")<{
   borderRadius: `${theme.radius.smallest}px`,
   cursor: "pointer",
   ["&:hover"]: {
-    backgroundColor: `${theme.bg[2]}`,
-  },
+    backgroundColor: `${theme.bg[2]}`
+  }
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx
index 95454709d..580f62e4c 100644
--- a/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Switcher/index.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Switcher, SwitcherProps } from ".";
 
 const meta: Meta<SwitcherProps> = {
-  component: Switcher,
+  component: Switcher
 };
 
 export default meta;
@@ -12,11 +12,11 @@ export default meta;
 type Story = StoryObj<SwitcherProps>;
 
 export const Default: Story = {
-  render: () => <Switcher value={true} onChange={action("onChange")} />,
+  render: () => <Switcher value={true} onChange={action("onChange")} />
 };
 
 export const Disabled: Story = {
   render: () => (
     <Switcher value={false} onChange={action("onChange")} disabled />
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx b/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx
index 4e3c9223c..509e3733f 100644
--- a/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Switcher/index.tsx
@@ -44,8 +44,8 @@ const SwitcherContainer = styled.div<{ isOn: boolean; disabled?: boolean }>(
     cursor: disabled ? "not-allowed" : "pointer",
     transition: "background-color 0.3s",
     padding: "1px",
-    boxSizing: "border-box",
-  }),
+    boxSizing: "border-box"
+  })
 );
 
 const SwitcherCircle = styled.div<{ isOn: boolean; disabled?: boolean }>(
@@ -57,6 +57,6 @@ const SwitcherCircle = styled.div<{ isOn: boolean; disabled?: boolean }>(
       ? theme.outline.weak
       : theme.content.withBackground,
     transition: "transform 0.3s",
-    transform: isOn ? "translateX(10px)" : "translateX(0)",
-  }),
+    transform: isOn ? "translateX(10px)" : "translateX(0)"
+  })
 );
diff --git a/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx
index 255168d0f..be87cd55f 100644
--- a/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Tabs/index.stories.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { TabItem, Tabs as TabsMenu, TabsProps } from ".";
 
 const meta: Meta<TabsProps> = {
-  component: TabsMenu,
+  component: TabsMenu
 };
 
 export default meta;
@@ -24,19 +24,19 @@ const tabsItem: TabItem[] = [
         <p>Here is tab one content</p>
         <p>Here is tab one content</p>
       </div>
-    ),
+    )
   },
   {
     id: "tab2",
     name: "Tab Two",
     icon: "editor",
-    children: <div>This is tab two content</div>,
+    children: <div>This is tab two content</div>
   },
   {
     id: "tab3",
     name: "Tab Three",
-    children: <div>Content for Tab 3 </div>,
-  },
+    children: <div>Content for Tab 3 </div>
+  }
 ];
 
 const tabsIcons: TabItem[] = [
@@ -47,18 +47,18 @@ const tabsIcons: TabItem[] = [
       <div>
         <p>Here is tab one content</p>
       </div>
-    ),
+    )
   },
   {
     id: "tab2",
     icon: "editor",
-    children: <div>This is tab two content</div>,
+    children: <div>This is tab two content</div>
   },
   {
     id: "tab3",
     icon: "layers",
-    children: <div>Content for Tab 3 </div>,
-  },
+    children: <div>Content for Tab 3 </div>
+  }
 ];
 
 export const Default: Story = {
@@ -69,8 +69,8 @@ export const Default: Story = {
   ),
   args: {
     position: "top",
-    tabs: tabsItem,
-  },
+    tabs: tabsItem
+  }
 };
 
 export const LeftSideTabs: Story = {
@@ -82,8 +82,8 @@ export const LeftSideTabs: Story = {
   args: {
     position: "left",
     tabs: tabsItem,
-    tabStyle: "separated",
-  },
+    tabStyle: "separated"
+  }
 };
 
 export const IconTabs: Story = {
@@ -94,6 +94,6 @@ export const IconTabs: Story = {
   ),
   args: {
     position: "left",
-    tabs: tabsIcons,
-  },
+    tabs: tabsIcons
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx b/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx
index 8174efa43..3f1987666 100644
--- a/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Tabs/index.tsx
@@ -6,7 +6,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  useState,
+  useState
 } from "react";
 
 export type TabItem = {
@@ -31,7 +31,7 @@ export const Tabs: FC<TabsProps> = ({
   tabStyle = "normal",
   background,
   currentTab,
-  onChange,
+  onChange
 }) => {
   const [activeTab, setActiveTab] = useState(currentTab ?? tabs[0].id);
 
@@ -40,7 +40,7 @@ export const Tabs: FC<TabsProps> = ({
       setActiveTab(newTab);
       onChange?.(newTab);
     },
-    [onChange],
+    [onChange]
   );
 
   useEffect(() => {
@@ -101,7 +101,7 @@ const Wrapper = styled("div")<{
   flexFlow: position === "top" ? "column nowrap" : "row nowrap",
   background: background || theme.bg[1],
   height: "100%",
-  width: "100%",
+  width: "100%"
 }));
 
 const TabsMenu = styled("div")<{
@@ -112,7 +112,7 @@ const TabsMenu = styled("div")<{
   flexFlow: position === "top" ? "row nowrap" : "column nowrap",
   background: theme.bg[0],
   padding: tabStyle === "normal" ? " " : theme.spacing.large,
-  gap: theme.spacing.micro,
+  gap: theme.spacing.micro
 }));
 
 const Tab = styled("div")<{
@@ -131,7 +131,7 @@ const Tab = styled("div")<{
     position === "top" && tabStyle === "normal" ? theme.radius.small : "",
   borderTopLeftRadius: tabStyle === "normal" ? theme.radius.small : "",
   borderBottomLeftRadius:
-    position === "left" && tabStyle === "normal" ? theme.radius.small : "",
+    position === "left" && tabStyle === "normal" ? theme.radius.small : ""
 }));
 
 const Content = styled("div")(({ theme }) => ({
@@ -139,5 +139,5 @@ const Content = styled("div")(({ theme }) => ({
   minHeight: 0,
   flex: 1,
   height: "auto",
-  overflowY: "auto",
+  overflowY: "auto"
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/TextArea/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/TextArea/index.stories.tsx
index d48a52a51..b36e15d3b 100644
--- a/web/src/beta/lib/reearth-ui/components/TextArea/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextArea/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { TextArea, TextAreaProps } from ".";
 
 const meta: Meta<TextAreaProps> = {
-  component: TextArea,
+  component: TextArea
 };
 
 export default meta;
@@ -12,35 +12,35 @@ type Story = StoryObj<typeof TextArea>;
 export const Default: Story = {
   args: {
     value: "Write down your content",
-    rows: 3,
-  },
+    rows: 3
+  }
 };
 
 export const Rows: Story = {
   args: {
     placeholder: "Write down your content",
-    rows: 5,
-  },
+    rows: 5
+  }
 };
 
 export const Placeholder: Story = {
   args: {
-    placeholder: "Write down your content",
-  },
+    placeholder: "Write down your content"
+  }
 };
 
 export const Disabled: Story = {
   args: {
     disabled: true,
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const Counter: Story = {
   args: {
     counter: true,
-    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  },
+    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  }
 };
 
 export const MaxLength: Story = {
@@ -48,14 +48,14 @@ export const MaxLength: Story = {
     counter: true,
     maxLength: 300,
     value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.",
-  },
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+  }
 };
 
 export const HeightResizeable: Story = {
   args: {
     resizable: "height",
     value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.",
-  },
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx b/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
index 49e5d8535..eb287e1ed 100644
--- a/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
@@ -24,7 +24,7 @@ export const TextArea: FC<TextAreaProps> = ({
   maxLength,
   appearance,
   onChange,
-  onBlur,
+  onBlur
 }) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const [isFocused, setIsFocused] = useState(false);
@@ -39,7 +39,7 @@ export const TextArea: FC<TextAreaProps> = ({
       setCurrentValue(newValue);
       onChange?.(newValue);
     },
-    [onChange],
+    [onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -83,7 +83,7 @@ export const TextArea: FC<TextAreaProps> = ({
 
 const Wrapper = styled("div")(() => ({
   display: "flex",
-  flexDirection: "column",
+  flexDirection: "column"
 }));
 
 const TextAreaWrapper = styled("div")<{
@@ -97,7 +97,7 @@ const TextAreaWrapper = styled("div")<{
   borderRadius: theme.radius.small,
   background: "transparent",
   display: "flex",
-  boxShadow: theme.shadow.input,
+  boxShadow: theme.shadow.input
 }));
 
 const StyledTextArea = styled.textarea<{
@@ -125,13 +125,13 @@ const StyledTextArea = styled.textarea<{
   boxSizing: "border-box",
   pointerEvents: disabled ? "none" : "inherit",
   "::placeholder": {
-    color: theme.content.weak,
-  },
+    color: theme.content.weak
+  }
 }));
 
 const CharacterCount = styled.span(({ theme }) => ({
   alignSelf: "flex-end",
   fontSize: fonts.sizes.body,
   color: theme.content.weak,
-  marginLeft: theme.spacing.small,
+  marginLeft: theme.spacing.small
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx
index 1ac44b7fc..2a24b055a 100644
--- a/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx
@@ -5,7 +5,7 @@ import { IconButton } from "../IconButton";
 import { TextInput, TextInputProps } from ".";
 
 const meta: Meta<TextInputProps> = {
-  component: TextInput,
+  component: TextInput
 };
 
 export default meta;
@@ -13,49 +13,49 @@ type Story = StoryObj<typeof TextInput>;
 
 export const Default: Story = {
   args: {
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const Placeholder: Story = {
   args: {
-    placeholder: "Type in here.",
-  },
+    placeholder: "Type in here."
+  }
 };
 
 export const Disabled: Story = {
   args: {
     disabled: true,
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const SizeSmall: Story = {
   args: {
     size: "small",
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const UsecasePresent: Story = {
   args: {
     appearance: "present",
     disabled: true,
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const UsecaseReadonly: Story = {
   args: {
     appearance: "readonly",
     disabled: true,
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const Actions: Story = {
   args: {
     actions: [<IconButton key={1} icon="table" size="small" />],
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
index 23de94b5a..383ea58c4 100644
--- a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
@@ -6,7 +6,7 @@ import {
   useState,
   ChangeEvent,
   ReactNode,
-  KeyboardEvent,
+  KeyboardEvent
 } from "react";
 
 export type TextInputProps = {
@@ -38,7 +38,7 @@ export const TextInput: FC<TextInputProps> = ({
   autoFocus,
   onChange,
   onBlur,
-  onKeyDown,
+  onKeyDown
 }) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const [isFocused, setIsFocused] = useState(false);
@@ -53,7 +53,7 @@ export const TextInput: FC<TextInputProps> = ({
       setCurrentValue(newValue ?? "");
       onChange?.(newValue);
     },
-    [onChange],
+    [onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -124,7 +124,7 @@ const Wrapper = styled("div")<{
         ? `0 ${theme.spacing.smallest}px`
         : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
     boxShadow: theme.shadow.input,
-    width: !extendWidth ? "" : "100%",
+    width: !extendWidth ? "" : "100%"
   };
 });
 
@@ -149,13 +149,13 @@ const StyledInput = styled("input")<{
   width: "100%",
   overflow: "hidden",
   "::placeholder": {
-    color: theme.content.weak,
-  },
+    color: theme.content.weak
+  }
 }));
 
 const ActionsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: `${theme.spacing.smallest}px`,
-  flexShrink: 0,
+  flexShrink: 0
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/TimePicker/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/TimePicker/index.stories.tsx
index f5ea2b1a3..c762f277a 100644
--- a/web/src/beta/lib/reearth-ui/components/TimePicker/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TimePicker/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { TimePicker, TimePickerProps } from ".";
 
 const meta: Meta<TimePickerProps> = {
-  component: TimePicker,
+  component: TimePicker
 };
 
 export default meta;
@@ -11,12 +11,12 @@ type Story = StoryObj<typeof TimePicker>;
 
 export const Default: Story = {
   args: {
-    value: "Text Input",
-  },
+    value: "Text Input"
+  }
 };
 
 export const Disabled: Story = {
   args: {
-    disabled: true,
-  },
+    disabled: true
+  }
 };
diff --git a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
index f15796853..7f1fc0c7b 100644
--- a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
@@ -13,7 +13,7 @@ export const TimePicker: FC<TimePickerProps> = ({
   value,
   disabled,
   onChange,
-  onBlur,
+  onBlur
 }) => {
   const [currentValue, setCurrentValue] = useState(value ?? "");
   const [isFocused, setIsFocused] = useState(false);
@@ -28,7 +28,7 @@ export const TimePicker: FC<TimePickerProps> = ({
       setCurrentValue(newValue ?? "");
       onChange?.(newValue);
     },
-    [onChange],
+    [onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -68,7 +68,7 @@ const Wrapper = styled("div")<{
     display: "flex",
     gap: `${theme.spacing.smallest}px`,
     alignItems: "center",
-    boxShadow: theme.shadow.input,
+    boxShadow: theme.shadow.input
   };
 });
 
@@ -86,6 +86,6 @@ const StyledInput = styled("input")<{
   lineHeight: `${fonts.lineHeights.body}px`,
   padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
   "::placeholder": {
-    color: theme.content.weak,
-  },
+    color: theme.content.weak
+  }
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/Typography/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Typography/index.stories.tsx
index e1092f257..ff58e48c6 100644
--- a/web/src/beta/lib/reearth-ui/components/Typography/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Typography/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Typography } from ".";
 
 const meta: Meta<typeof Typography> = {
-  component: Typography,
+  component: Typography
 };
 
 export default meta;
@@ -21,7 +21,7 @@ export const Regular: Story = {
       <Typography size="body">Body Regular</Typography>
       <Typography size="footnote">Footnote Regular</Typography>
     </div>
-  ),
+  )
 };
 
 export const Medium: Story = {
@@ -31,7 +31,7 @@ export const Medium: Story = {
         Body Medium
       </Typography>
     </div>
-  ),
+  )
 };
 
 export const Bold: Story = {
@@ -59,5 +59,5 @@ export const Bold: Story = {
         Footnote Bold
       </Typography>
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/lib/reearth-ui/components/Typography/index.tsx b/web/src/beta/lib/reearth-ui/components/Typography/index.tsx
index f0e97f3be..06ea75103 100644
--- a/web/src/beta/lib/reearth-ui/components/Typography/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Typography/index.tsx
@@ -3,7 +3,7 @@ import {
   FontSize,
   FontWeight,
   UniqueTraits,
-  typography,
+  typography
 } from "@reearth/services/theme/reearthTheme/common/fonts";
 import { FC, ReactNode, useMemo, CSSProperties } from "react";
 
@@ -35,7 +35,7 @@ export const Typography: FC<TypographyProps> = ({
   color,
   className,
   otherProperties,
-  onClick,
+  onClick
 }) => {
   const theme = useTheme();
   const themeTypographyBySize = typography[size];
@@ -46,7 +46,7 @@ export const Typography: FC<TypographyProps> = ({
         : weight in themeTypographyBySize
           ? themeTypographyBySize[weight]
           : themeTypographyBySize[size === "h1" ? "bold" : "regular"],
-    [trait, size, weight, themeTypographyBySize],
+    [trait, size, weight, themeTypographyBySize]
   );
 
   const memoizedStyle = useMemo(
@@ -55,9 +55,9 @@ export const Typography: FC<TypographyProps> = ({
       color: color || theme.content.main,
       textOverflow: "ellipsis",
       overflow: "hidden",
-      flexShrink: 0,
+      flexShrink: 0
     }),
-    [otherProperties, theme.content.main, color],
+    [otherProperties, theme.content.main, color]
   );
 
   return ThemeTypography ? (
diff --git a/web/src/beta/pages/Dashboard/index.tsx b/web/src/beta/pages/Dashboard/index.tsx
index 737cade7a..f750b1422 100644
--- a/web/src/beta/pages/Dashboard/index.tsx
+++ b/web/src/beta/pages/Dashboard/index.tsx
@@ -3,7 +3,6 @@ import Page from "@reearth/beta/pages/Page";
 import { FC } from "react";
 import { useParams } from "react-router-dom";
 
-
 const DashboardPage: FC = () => {
   const { workspaceId } = useParams();
 
diff --git a/web/src/beta/pages/EditorPage/index.tsx b/web/src/beta/pages/EditorPage/index.tsx
index 88b8fbd2a..3a1bff9b5 100644
--- a/web/src/beta/pages/EditorPage/index.tsx
+++ b/web/src/beta/pages/EditorPage/index.tsx
@@ -1,4 +1,3 @@
-
 import NotFound from "@reearth/beta/components/NotFound";
 import Editor from "@reearth/beta/features/Editor";
 import { isTab } from "@reearth/beta/features/Navbar";
diff --git a/web/src/beta/pages/GraphQLPlayground/index.tsx b/web/src/beta/pages/GraphQLPlayground/index.tsx
index 910250047..d74f3669e 100644
--- a/web/src/beta/pages/GraphQLPlayground/index.tsx
+++ b/web/src/beta/pages/GraphQLPlayground/index.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import "graphiql/graphiql.css";
 
 const fetcher = createGraphiQLFetcher({
-  url: `${window.REEARTH_CONFIG?.api || "/api"}` + "/graphql",
+  url: `${window.REEARTH_CONFIG?.api || "/api"}` + "/graphql"
 });
 
 export default function GraphQLPlayground(_: { path?: string }): JSX.Element {
diff --git a/web/src/beta/pages/Page.tsx b/web/src/beta/pages/Page.tsx
index 9e5a01b27..44af3cdff 100644
--- a/web/src/beta/pages/Page.tsx
+++ b/web/src/beta/pages/Page.tsx
@@ -1,7 +1,7 @@
 import {
   useMeFetcher,
   useProjectFetcher,
-  useSceneFetcher,
+  useSceneFetcher
 } from "@reearth/services/api";
 import { AuthenticatedPage } from "@reearth/services/auth";
 import React, { ReactNode, useMemo } from "react";
@@ -25,7 +25,7 @@ const PageWrapper: React.FC<Props> = ({
   sceneId,
   projectId,
   workspaceId,
-  renderItem,
+  renderItem
 }) => {
   const { useMeQuery } = useMeFetcher();
   const { useProjectQuery } = useProjectFetcher();
@@ -37,19 +37,19 @@ const PageWrapper: React.FC<Props> = ({
 
   const currentProjectId = useMemo(
     () => projectId ?? scene?.projectId,
-    [projectId, scene?.projectId],
+    [projectId, scene?.projectId]
   );
 
   const currentWorkspaceId = useMemo(
     () => workspaceId ?? scene?.workspaceId,
-    [workspaceId, scene?.workspaceId],
+    [workspaceId, scene?.workspaceId]
   );
 
   const { loading: loadingProject } = useProjectQuery(currentProjectId);
 
   const loading = useMemo(
     () => loadingMe ?? loadingScene ?? loadingProject,
-    [loadingMe, loadingScene, loadingProject],
+    [loadingMe, loadingScene, loadingProject]
   );
 
   return loading ? (
@@ -59,7 +59,7 @@ const PageWrapper: React.FC<Props> = ({
       {renderItem({
         sceneId,
         projectId: currentProjectId,
-        workspaceId: currentWorkspaceId,
+        workspaceId: currentWorkspaceId
       })}
     </>
   );
@@ -69,7 +69,7 @@ const Page: React.FC<Props> = ({
   sceneId,
   projectId,
   workspaceId,
-  renderItem,
+  renderItem
 }) => (
   <AuthenticatedPage>
     <PageWrapper
diff --git a/web/src/beta/pages/PluginPlaygroundPage/index.tsx b/web/src/beta/pages/PluginPlaygroundPage/index.tsx
index 5c7c1758d..281be52a2 100644
--- a/web/src/beta/pages/PluginPlaygroundPage/index.tsx
+++ b/web/src/beta/pages/PluginPlaygroundPage/index.tsx
@@ -1,7 +1,6 @@
 import PluginPlayground from "@reearth/beta/features/PluginPlayground";
 import { FC } from "react";
 
-
 const PluginPlaygroundPage: FC = () => {
   return <PluginPlayground />;
 };
diff --git a/web/src/beta/pages/ProjectSettingsPage/index.tsx b/web/src/beta/pages/ProjectSettingsPage/index.tsx
index c65a7c344..ca17450fe 100644
--- a/web/src/beta/pages/ProjectSettingsPage/index.tsx
+++ b/web/src/beta/pages/ProjectSettingsPage/index.tsx
@@ -1,7 +1,6 @@
-
 import NotFound from "@reearth/beta/components/NotFound";
 import ProjectSettings, {
-  isProjectSettingTab,
+  isProjectSettingTab
 } from "@reearth/beta/features/ProjectSettings";
 import Page from "@reearth/beta/pages/Page";
 import { FC, useMemo } from "react";
diff --git a/web/src/beta/ui/components/EntryItem/index.stories.tsx b/web/src/beta/ui/components/EntryItem/index.stories.tsx
index ea10fec14..c94bef4b1 100644
--- a/web/src/beta/ui/components/EntryItem/index.stories.tsx
+++ b/web/src/beta/ui/components/EntryItem/index.stories.tsx
@@ -10,8 +10,8 @@ const meta: Meta<typeof EntryItem> = {
       <div style={{ width: 300 }}>
         <Story />
       </div>
-    ),
-  ],
+    )
+  ]
 };
 
 export default meta;
@@ -20,29 +20,29 @@ type Story = StoryObj<typeof EntryItem>;
 
 export const Default: Story = {
   args: {
-    title: "Item",
-  },
+    title: "Item"
+  }
 };
 
 export const Highlighted: Story = {
   args: {
     title: "Item",
-    highlighted: true,
-  },
+    highlighted: true
+  }
 };
 
 export const Icon: Story = {
   args: {
     title: "Item",
-    icon: "file",
-  },
+    icon: "file"
+  }
 };
 
 export const LongText: Story = {
   args: {
     title: "Item With A Long Long Long Long Long Long Long Long Name",
-    icon: "file",
-  },
+    icon: "file"
+  }
 };
 
 export const OptionsMenu: Story = {
@@ -52,16 +52,16 @@ export const OptionsMenu: Story = {
       {
         id: "1",
         title: "Option 1",
-        onClick: () => console.log("Option 1 clicked"),
+        onClick: () => console.log("Option 1 clicked")
       },
       {
         id: "2",
         title: "Option 2 with icon",
         icon: "setting",
-        onClick: () => console.log("Option 2 clicked"),
-      },
-    ],
-  },
+        onClick: () => console.log("Option 2 clicked")
+      }
+    ]
+  }
 };
 
 export const Actions: Story = {
@@ -77,7 +77,7 @@ export const Actions: Story = {
             appearance="simple"
             onClick={() => console.log("Action 1 clicked")}
           />
-        ),
+        )
       },
       {
         comp: (
@@ -89,10 +89,10 @@ export const Actions: Story = {
             onClick={() => console.log("Action 2 clicked")}
           />
         ),
-        keepVisible: true,
-      },
-    ],
-  },
+        keepVisible: true
+      }
+    ]
+  }
 };
 
 export const DisableHover: Story = {
@@ -109,7 +109,7 @@ export const DisableHover: Story = {
             appearance="simple"
             onClick={() => console.log("Action 1 clicked")}
           />
-        ),
+        )
       },
       {
         comp: (
@@ -121,8 +121,8 @@ export const DisableHover: Story = {
             onClick={() => console.log("Action 2 clicked")}
           />
         ),
-        keepVisible: true,
-      },
-    ],
-  },
+        keepVisible: true
+      }
+    ]
+  }
 };
diff --git a/web/src/beta/ui/components/EntryItem/index.tsx b/web/src/beta/ui/components/EntryItem/index.tsx
index c6d50ed77..1f3edf8fe 100644
--- a/web/src/beta/ui/components/EntryItem/index.tsx
+++ b/web/src/beta/ui/components/EntryItem/index.tsx
@@ -3,7 +3,7 @@ import {
   IconButton,
   IconName,
   PopupMenu,
-  PopupMenuItem,
+  PopupMenuItem
 } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
 import {
@@ -12,7 +12,7 @@ import {
   ReactNode,
   useCallback,
   useEffect,
-  useState,
+  useState
 } from "react";
 
 export interface EntryItemAction {
@@ -40,7 +40,7 @@ export const EntryItem: FC<EntryItemProps> = ({
   optionsMenu,
   optionsMenuWidth,
   actions,
-  onClick,
+  onClick
 }) => {
   const [hovered, setHovered] = useState(false);
   const handleMouseEnter = useCallback(() => {
@@ -86,7 +86,7 @@ export const EntryItem: FC<EntryItemProps> = ({
       </MainContent>
       <Actions>
         {actions?.map(
-          (a) => (highlighted || hovered || a.keepVisible) && a.comp,
+          (a) => (highlighted || hovered || a.keepVisible) && a.comp
         )}
         {!!optionsMenu && (
           <OptionsWrapper onClick={handleOptionsClick}>
@@ -129,18 +129,18 @@ const Wrapper = styled("div")<{
   minWidth: 0,
   cursor: "pointer",
   ...(hovered && {
-    backgroundColor: theme.bg[1],
+    backgroundColor: theme.bg[1]
   }),
   ...(highlight && {
-    backgroundColor: theme.select.main,
+    backgroundColor: theme.select.main
   }),
   ["&:active"]: {
     backgroundColor: highlight
       ? theme.select.strong
       : hovered
         ? theme.relative.light
-        : "transparent",
-  },
+        : "transparent"
+  }
 }));
 
 const MainContent = styled("div")<{ asDragHandle?: boolean }>(
@@ -152,9 +152,9 @@ const MainContent = styled("div")<{ asDragHandle?: boolean }>(
     overflow: "hidden",
     textOverflow: "ellipsis",
     ...(asDragHandle && {
-      cursor: "pointer",
-    }),
-  }),
+      cursor: "pointer"
+    })
+  })
 );
 
 const Title = styled("div")(({ theme }) => ({
@@ -164,22 +164,22 @@ const Title = styled("div")(({ theme }) => ({
   whiteSpace: "nowrap",
   color: theme.content.main,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 const Actions = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 const OptionsWrapper = styled("div")(() => ({
-  flexShrink: 0,
+  flexShrink: 0
 }));
 
 const IconWrapper = styled("div")(({ theme }) => ({
   height: 12,
   flexShrink: 0,
   fontSize: 0,
-  color: theme.content.main,
+  color: theme.content.main
 }));
diff --git a/web/src/beta/ui/components/ManagerBase/ManagerContent.tsx b/web/src/beta/ui/components/ManagerBase/ManagerContent.tsx
index c10b4f133..bcbd4db33 100644
--- a/web/src/beta/ui/components/ManagerBase/ManagerContent.tsx
+++ b/web/src/beta/ui/components/ManagerBase/ManagerContent.tsx
@@ -7,21 +7,21 @@ export const ManagerContent = styled.div(({ theme }) => ({
   height: 0,
   width: "100%",
   ["* ::-webkit-scrollbar"]: {
-    width: "8px",
+    width: "8px"
   },
   ["* ::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
-    borderRadius: "10px",
+    borderRadius: "10px"
   },
   ["* ::-webkit-scrollbar-thumb"]: {
     background: theme.relative.light,
-    borderRadius: "4px",
+    borderRadius: "4px"
   },
   ["* ::-webkit-scrollbar-thumb:hover"]: {
-    background: theme.relative.lighter,
+    background: theme.relative.lighter
   },
   ["@media (max-width: 630px)"]: {
     width: "630px",
-    overflowX: "auto",
-  },
+    overflowX: "auto"
+  }
 }));
diff --git a/web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx b/web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx
index 8989e02f0..ebe11531a 100644
--- a/web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx
+++ b/web/src/beta/ui/components/ManagerBase/ManagerEmptyContent.tsx
@@ -2,16 +2,12 @@ import { styled } from "@reearth/services/theme";
 import { FC, ReactNode } from "react";
 
 const ManagerEmptyContent: FC<{ children?: ReactNode }> = ({ children }) => {
-    return (
-        <WrapperContent>
-            {children}
-        </WrapperContent>
-    )
-}
+  return <WrapperContent>{children}</WrapperContent>;
+};
 const WrapperContent = styled("div")(() => ({
-    display: "flex",
-    justifyContent: "center",
-    margin: "auto"
-  }));
+  display: "flex",
+  justifyContent: "center",
+  margin: "auto"
+}));
 
-export default ManagerEmptyContent;
\ No newline at end of file
+export default ManagerEmptyContent;
diff --git a/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx b/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx
index c9636a618..d8d34b42c 100644
--- a/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx
+++ b/web/src/beta/ui/components/ManagerBase/ManagerHeader.tsx
@@ -2,7 +2,7 @@ import {
   IconButton,
   Selector,
   TextInput,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -13,7 +13,7 @@ import {
   ReactNode,
   useCallback,
   useMemo,
-  useState,
+  useState
 } from "react";
 
 type ManagerHeaderSize = "medium" | "large";
@@ -52,7 +52,7 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
   deleteText,
   selectedIds,
   onCancelSelect,
-  onDelete,
+  onDelete
 }) => {
   const t = useT();
 
@@ -61,7 +61,7 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
       if (typeof value !== "string") return;
       onSortChange?.(value);
     },
-    [onSortChange],
+    [onSortChange]
   );
 
   const handleLayoutChange = useCallback(
@@ -69,7 +69,7 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
       e.stopPropagation();
       onLayoutChange?.(value);
     },
-    [onLayoutChange],
+    [onLayoutChange]
   );
 
   const handleCancelSelect = useCallback(
@@ -77,7 +77,7 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
       e.stopPropagation();
       onCancelSelect?.();
     },
-    [onCancelSelect],
+    [onCancelSelect]
   );
 
   const handleDelete = useCallback(
@@ -85,7 +85,7 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
       e.stopPropagation();
       onDelete?.(selectedIds ?? []);
     },
-    [onDelete, selectedIds],
+    [onDelete, selectedIds]
   );
 
   const showDelete = enableDelete && selectedIds && selectedIds.length > 0;
@@ -108,7 +108,7 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
         onSearch?.(searchTerm);
       }
     },
-    [searchTerm, onSearch],
+    [searchTerm, onSearch]
   );
 
   const searchActions = useMemo(() => {
@@ -128,7 +128,7 @@ export const ManagerHeader: FC<ManagerHeaderProps> = ({
         appearance="simple"
         size="smallest"
         onClick={handleSearch}
-      />,
+      />
     ];
   }, [searchTerm, searchHovered, handleClearSearch, handleSearch]);
 
@@ -209,14 +209,14 @@ const Wrapper = styled("div")<{ size: ManagerHeaderSize }>(
     padding: size === "medium" ? theme.spacing.normal : theme.spacing.largest,
     minHeight: size === "medium" ? "56px" : "76px",
     boxSizing: "border-box",
-    flexGrow: 0,
-  }),
+    flexGrow: 0
+  })
 );
 
 const Actions = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const Tools = styled("div")(({ theme }) => ({
@@ -224,19 +224,19 @@ const Tools = styled("div")(({ theme }) => ({
   justifyContent: "flex-end",
   alignItems: "center",
   gap: theme.spacing.normal,
-  flex: 1,
+  flex: 1
 }));
 
 const Sort = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing.small,
-  width: 200,
+  width: 200
 }));
 
 const Layouts = styled("div")(({ theme }) => ({
   display: "flex",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const Search = styled("div")<{ size: ManagerHeaderSize }>(
@@ -244,8 +244,8 @@ const Search = styled("div")<{ size: ManagerHeaderSize }>(
     display: "flex",
     gap: theme.spacing.small,
     maxWidth: size === "large" ? 250 : undefined,
-    flex: 1,
-  }),
+    flex: 1
+  })
 );
 
 const DeleteBar = styled("div")(({ theme }) => ({
@@ -255,5 +255,5 @@ const DeleteBar = styled("div")(({ theme }) => ({
   backgroundColor: theme.select.weak,
   borderRadius: theme.radius.small,
   height: 36,
-  padding: `0 ${theme.spacing.small}px`,
+  padding: `0 ${theme.spacing.small}px`
 }));
diff --git a/web/src/beta/ui/components/ManagerBase/ManagerWrapper.tsx b/web/src/beta/ui/components/ManagerBase/ManagerWrapper.tsx
index e4e6253eb..f6aa9016d 100644
--- a/web/src/beta/ui/components/ManagerBase/ManagerWrapper.tsx
+++ b/web/src/beta/ui/components/ManagerBase/ManagerWrapper.tsx
@@ -4,5 +4,5 @@ export const ManagerWrapper = styled.div(() => ({
   display: "flex",
   width: "100%",
   height: "100%",
-  flexDirection: "column",
+  flexDirection: "column"
 }));
diff --git a/web/src/beta/ui/components/Sidebar/index.tsx b/web/src/beta/ui/components/Sidebar/index.tsx
index f4584b979..c1aaaa67f 100644
--- a/web/src/beta/ui/components/Sidebar/index.tsx
+++ b/web/src/beta/ui/components/Sidebar/index.tsx
@@ -21,7 +21,7 @@ export const SidebarMenuItem: FC<SidebarMenuItemProps> = ({
   active,
   disabled,
   path,
-  onClick,
+  onClick
 }) => {
   const theme = useTheme();
   return (
@@ -48,8 +48,8 @@ export const SidebarMenuItem: FC<SidebarMenuItemProps> = ({
 const StyledLinkButton = styled(Link)<{ disabled?: boolean }>(
   ({ disabled }) => ({
     pointerEvents: disabled ? "none" : "auto",
-    textDecoration: "none",
-  }),
+    textDecoration: "none"
+  })
 );
 
 const MenuWrapper = styled("div")<{ active?: boolean; disabled?: boolean }>(
@@ -64,9 +64,9 @@ const MenuWrapper = styled("div")<{ active?: boolean; disabled?: boolean }>(
     cursor: disabled ? "default" : "pointer",
     ["&:hover"]: {
       background: active ? theme.select.main : theme.bg[2],
-      borderRadius: theme.radius.small,
-    },
-  }),
+      borderRadius: theme.radius.small
+    }
+  })
 );
 
 export const SidebarWrapper = styled("div")(({ theme }) => ({
@@ -74,19 +74,19 @@ export const SidebarWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   padding: `0 ${theme.spacing.smallest}px`,
   flex: 1,
-  justifyContent: "space-between",
+  justifyContent: "space-between"
 }));
 
 export const SidebarTopSectionWrapper = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
-  justifyContent: "space-between",
+  justifyContent: "space-between"
 }));
 
 export const SidebarSection = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 export const SidebarVersion: FC = () => {
@@ -102,5 +102,5 @@ export const SidebarVersion: FC = () => {
 };
 
 const Version = styled("div")(({ theme }) => ({
-  padding: theme.spacing.small,
+  padding: theme.spacing.small
 }));
diff --git a/web/src/beta/ui/fields/AssetField/index.tsx b/web/src/beta/ui/fields/AssetField/index.tsx
index d5c23d2e9..9332c3fa4 100644
--- a/web/src/beta/ui/fields/AssetField/index.tsx
+++ b/web/src/beta/ui/fields/AssetField/index.tsx
@@ -3,7 +3,7 @@ import {
   AcceptedAssetsTypes,
   type FileType,
   GIS_FILE_TYPES,
-  IMAGE_FILE_TYPES,
+  IMAGE_FILE_TYPES
 } from "@reearth/beta/features/AssetsManager/constants";
 import { TextInput, Button } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
@@ -30,7 +30,7 @@ const AssetField: FC<AssetFieldProps> = ({
   inputMethod,
   assetsTypes,
   placeholder,
-  onChange,
+  onChange
 }) => {
   const t = useT();
   const [open, setOpen] = useState(false);
@@ -46,12 +46,12 @@ const AssetField: FC<AssetFieldProps> = ({
       } else if (
         inputMethod === "asset" &&
         ![...IMAGE_FILE_TYPES, ...GIS_FILE_TYPES].includes(
-          (url.split(".").pop() as FileType) ?? "",
+          (url.split(".").pop() as FileType) ?? ""
         )
       ) {
         setNotification({
           type: "error",
-          text: t("Wrong file format"),
+          text: t("Wrong file format")
         });
         setCurrentValue(undefined);
       } else {
@@ -59,14 +59,14 @@ const AssetField: FC<AssetFieldProps> = ({
         onChange?.(url, name);
       }
     },
-    [inputMethod, onChange, setNotification, t],
+    [inputMethod, onChange, setNotification, t]
   );
 
   const { handleFileUpload } = useAssetUpload({
     workspaceId: currentWorkspace?.id,
     onAssetSelect: handleChange,
     assetsTypes,
-    multiple: false,
+    multiple: false
   });
 
   useEffect(() => {
@@ -122,11 +122,11 @@ const AssetWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: `${theme.spacing.smallest}px`,
-  width: "100%",
+  width: "100%"
 }));
 
 const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
-  gap: `${theme.spacing.smallest}px`,
+  gap: `${theme.spacing.smallest}px`
 }));
diff --git a/web/src/beta/ui/fields/AssetField/useAssetUpload.ts b/web/src/beta/ui/fields/AssetField/useAssetUpload.ts
index 57ca8db30..7205e0d0b 100644
--- a/web/src/beta/ui/fields/AssetField/useAssetUpload.ts
+++ b/web/src/beta/ui/fields/AssetField/useAssetUpload.ts
@@ -2,7 +2,7 @@ import {
   type AcceptedAssetsTypes,
   GIS_FILE_TYPES,
   IMAGE_FILE_TYPES,
-  GENERAL_FILE_TYPE_ACCEPT_STRING,
+  GENERAL_FILE_TYPE_ACCEPT_STRING
 } from "@reearth/beta/features/AssetsManager/constants";
 import { useAssetsFetcher } from "@reearth/services/api";
 import { useCallback, useMemo } from "react";
@@ -12,7 +12,7 @@ export default ({
   workspaceId,
   onAssetSelect,
   assetsTypes,
-  multiple = true,
+  multiple = true
 }: {
   workspaceId?: string;
   onAssetSelect?: (inputValue?: string, name?: string) => void;
@@ -30,7 +30,7 @@ export default ({
                 ? IMAGE_FILE_TYPES
                 : t === "file"
                   ? GIS_FILE_TYPES
-                  : t,
+                  : t
             )
             .flat()
             .join(",.")
@@ -43,7 +43,7 @@ export default ({
       try {
         const result = await useCreateAssets({
           teamId: workspaceId ?? "",
-          file: files,
+          file: files
         });
         const assetUrl = result?.data[0].data?.createAsset?.asset.url;
         const assetName = result?.data[0].data?.createAsset?.asset.name;
@@ -52,14 +52,14 @@ export default ({
         console.error("Error creating assets:", error);
       }
     },
-    [workspaceId, useCreateAssets, onAssetSelect],
+    [workspaceId, useCreateAssets, onAssetSelect]
   );
   const handleFileUpload = useFileInput(
     (files) => handleAssetsCreate?.(files),
     {
       accept: acceptedExtension,
-      multiple,
-    },
+      multiple
+    }
   );
 
   return { handleFileUpload };
diff --git a/web/src/beta/ui/fields/CamersField/CapturePanel.tsx b/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
index 6f6d87057..2a6a41c7b 100644
--- a/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
+++ b/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
@@ -46,7 +46,7 @@ const CapturePanel: FC<PanelProps> = ({ camera, onSave, onClose }) => {
           values={[
             radiansToDegrees(camera?.heading ?? 0),
             radiansToDegrees(camera?.pitch ?? 0),
-            radiansToDegrees(camera?.roll ?? 0),
+            radiansToDegrees(camera?.roll ?? 0)
           ]}
           appearance="readonly"
           disabled
@@ -61,14 +61,14 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "flex-start",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const GroupWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   flexDirection: "column",
-  gap: theme.spacing.normal,
+  gap: theme.spacing.normal
 }));
 
 export default CapturePanel;
diff --git a/web/src/beta/ui/fields/CamersField/EditorPanel.tsx b/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
index 1e84805ce..00f908793 100644
--- a/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
+++ b/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
@@ -2,7 +2,7 @@ import {
   Button,
   NumberInput,
   PopupPanel,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -26,12 +26,12 @@ const EditPanel: FC<PanelProps> = ({ camera, onSave, onFlyTo, onClose }) => {
     handleTrippleFieldChange,
     handleFieldBlur,
     handleFieldChange,
-    handleSave,
+    handleSave
   } = useHooks({
     camera,
     onFlyTo,
     onSave,
-    onClose,
+    onClose
   });
 
   return (
@@ -74,7 +74,7 @@ const EditPanel: FC<PanelProps> = ({ camera, onSave, onFlyTo, onClose }) => {
           values={[
             newCamera?.heading ?? 0,
             newCamera?.pitch ?? 0,
-            newCamera?.roll ?? 0,
+            newCamera?.roll ?? 0
           ]}
           content={[t("Heading"), t("Pitch"), t("Roll")]}
           placeholders={[t("value"), t("value"), t("value")]}
@@ -90,20 +90,20 @@ const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "flex-start",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const GroupWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   flexDirection: "column",
-  gap: theme.spacing.normal,
+  gap: theme.spacing.normal
 }));
 
 const InputWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 export default EditPanel;
diff --git a/web/src/beta/ui/fields/CamersField/hooks.ts b/web/src/beta/ui/fields/CamersField/hooks.ts
index 0a40a946d..fc7863417 100644
--- a/web/src/beta/ui/fields/CamersField/hooks.ts
+++ b/web/src/beta/ui/fields/CamersField/hooks.ts
@@ -14,7 +14,7 @@ export const handleCameraeRadianToDegree = (camera: Camera) => ({
   heading: radiansToDegrees(camera.heading),
   pitch: radiansToDegrees(camera.pitch),
   roll: radiansToDegrees(camera.roll),
-  fov: camera?.fov,
+  fov: camera?.fov
 });
 
 export const handleCameraDegreeToRadian = (camera: Camera) => ({
@@ -24,14 +24,14 @@ export const handleCameraDegreeToRadian = (camera: Camera) => ({
   heading: degreesToRadians(camera.heading),
   pitch: degreesToRadians(camera.pitch),
   roll: degreesToRadians(camera.roll),
-  fov: camera?.fov,
+  fov: camera?.fov
 });
 
 export default ({
   camera,
   onFlyTo,
   onSave,
-  onClose,
+  onClose
 }: {
   camera?: Camera;
   onFlyTo?: (c?: Camera) => void;
@@ -39,7 +39,7 @@ export default ({
   onClose?: () => void;
 }) => {
   const [newCamera, setNewCamera] = useState<Camera | undefined>(
-    camera ? handleCameraeRadianToDegree(camera) : undefined,
+    camera ? handleCameraeRadianToDegree(camera) : undefined
   );
 
   useEffect(() => {
@@ -53,11 +53,11 @@ export default ({
       if (update === undefined || !newCamera) return;
       const updated: Camera = {
         ...newCamera,
-        [key]: update,
+        [key]: update
       };
       onFlyTo?.(handleCameraDegreeToRadian(updated));
     },
-    [newCamera, onFlyTo],
+    [newCamera, onFlyTo]
   );
 
   const handleFieldChange = useCallback((key: keyof Camera, value?: number) => {
@@ -101,6 +101,6 @@ export default ({
     handleTrippleFieldBlur,
     handleFieldChange,
     handleFieldBlur,
-    handleSave,
+    handleSave
   };
 };
diff --git a/web/src/beta/ui/fields/CamersField/index.tsx b/web/src/beta/ui/fields/CamersField/index.tsx
index b2c68e1dd..f2a7e2a08 100644
--- a/web/src/beta/ui/fields/CamersField/index.tsx
+++ b/web/src/beta/ui/fields/CamersField/index.tsx
@@ -3,7 +3,7 @@ import {
   Button,
   ButtonProps,
   Popup,
-  TextInput,
+  TextInput
 } from "@reearth/beta/lib/reearth-ui";
 import type { Camera } from "@reearth/beta/utils/value";
 import type { FlyTo } from "@reearth/core";
@@ -38,7 +38,7 @@ const CameraField: FC<CameraFieldProps> = ({
   disabled,
   commonTitle,
   onSave,
-  onFlyTo,
+  onFlyTo
 }) => {
   const theme = useTheme();
   const t = useT();
@@ -48,7 +48,7 @@ const CameraField: FC<CameraFieldProps> = ({
   const handleClick = useCallback(
     (panel: "editor" | "capture") =>
       setOpen((current) => (current === panel ? null : panel)),
-    [],
+    []
   );
 
   const handleClose = useCallback(() => setOpen(null), []);
@@ -58,7 +58,7 @@ const CameraField: FC<CameraFieldProps> = ({
       onSave(value);
       setOpen(null);
     },
-    [onSave],
+    [onSave]
   );
 
   const handleFlyto = useCallback(
@@ -68,7 +68,7 @@ const CameraField: FC<CameraFieldProps> = ({
         onFlyTo?.(dest);
       }
     },
-    [currentCamera, onFlyTo],
+    [currentCamera, onFlyTo]
   );
 
   const handleCameraSettingDelete = useCallback(() => {
@@ -107,7 +107,7 @@ const CameraField: FC<CameraFieldProps> = ({
               disabled={!value}
               onClick={handleCameraSettingDelete}
               iconColor={value ? theme.content.main : theme.content.weak}
-            />,
+            />
           ]}
         />
         <Popup
@@ -166,7 +166,7 @@ const InputWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.small,
   flexWrap: "wrap",
-  width: "100%",
+  width: "100%"
 }));
 
 export default CameraField;
diff --git a/web/src/beta/ui/fields/CodeField.tsx b/web/src/beta/ui/fields/CodeField.tsx
index 823430221..f05b5865b 100644
--- a/web/src/beta/ui/fields/CodeField.tsx
+++ b/web/src/beta/ui/fields/CodeField.tsx
@@ -30,5 +30,5 @@ const CodeInputWrapper = styled("div")<{
   width?: number;
 }>(({ height, width }) => ({
   height: height ? `${height}px` : "auto",
-  width: width ? `${width}px` : "100%",
+  width: width ? `${width}px` : "100%"
 }));
diff --git a/web/src/beta/ui/fields/CommonField.tsx b/web/src/beta/ui/fields/CommonField.tsx
index b6de72ce5..36caba38d 100644
--- a/web/src/beta/ui/fields/CommonField.tsx
+++ b/web/src/beta/ui/fields/CommonField.tsx
@@ -1,7 +1,7 @@
-import { FC, ReactNode } from "react";
 
 import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC, ReactNode } from "react";
 
 export interface CommonFieldProps {
   commonTitle?: string;
@@ -11,7 +11,7 @@ export interface CommonFieldProps {
 const CommonField: FC<CommonFieldProps & { children?: ReactNode }> = ({
   commonTitle,
   description,
-  children,
+  children
 }) => {
   const theme = useTheme();
   return (
@@ -34,17 +34,17 @@ const Wrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing.small,
   ["* ::-webkit-scrollbar"]: {
-    width: "8px",
+    width: "8px"
   },
   ["* ::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
-    borderRadius: "10px",
+    borderRadius: "10px"
   },
   ["* ::-webkit-scrollbar-thumb"]: {
     background: theme.relative.light,
-    borderRadius: "4px",
+    borderRadius: "4px"
   },
   ["* ::-webkit-scrollbar-thumb:hover"]: {
-    background: theme.relative.lighter,
-  },
+    background: theme.relative.lighter
+  }
 }));
diff --git a/web/src/beta/ui/fields/ListField/ListItem.tsx b/web/src/beta/ui/fields/ListField/ListItem.tsx
index 3030bc72a..1a06a2f68 100644
--- a/web/src/beta/ui/fields/ListField/ListItem.tsx
+++ b/web/src/beta/ui/fields/ListField/ListItem.tsx
@@ -24,7 +24,7 @@ const ListItem: FC<ItemProps> = ({
   isEditable,
   onItemDelete,
   onItemSelect,
-  onItemNameUpdate,
+  onItemNameUpdate
 }) => {
   const [localTitle, setLocalTitle] = useState(item.title);
   const [itemNameRenameId, setItemNameRenameId] = useState("");
@@ -33,7 +33,7 @@ const ListItem: FC<ItemProps> = ({
     (id: string) => {
       onItemDelete?.(id);
     },
-    [onItemDelete],
+    [onItemDelete]
   );
 
   const optionsMenu = useMemo<PopupMenuItem[]>(() => {
@@ -42,8 +42,8 @@ const ListItem: FC<ItemProps> = ({
         id: "delete",
         title: "Delete",
         icon: "trash" as const,
-        onClick: () => handleItemDelete(item.id),
-      },
+        onClick: () => handleItemDelete(item.id)
+      }
     ];
 
     if (isEditable) {
@@ -51,7 +51,7 @@ const ListItem: FC<ItemProps> = ({
         id: "rename",
         title: "Rename",
         icon: "pencilSimple" as const,
-        onClick: () => setItemNameRenameId(item.id),
+        onClick: () => setItemNameRenameId(item.id)
       });
     }
 
@@ -105,11 +105,11 @@ export default ListItem;
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  gap: theme.spacing.micro,
+  gap: theme.spacing.micro
 }));
 
 const EntryItemWrapper = styled("div")(() => ({
-  flex: 1,
+  flex: 1
 }));
 
 const TitleWrapper = styled("div")(({ theme }) => ({
@@ -119,5 +119,5 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   fontWeight: theme.fonts.weight.regular,
   overflow: "hidden",
   textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+  whiteSpace: "nowrap"
 }));
diff --git a/web/src/beta/ui/fields/ListField/index.stories.tsx b/web/src/beta/ui/fields/ListField/index.stories.tsx
index ab7e3c168..0863d6a0b 100644
--- a/web/src/beta/ui/fields/ListField/index.stories.tsx
+++ b/web/src/beta/ui/fields/ListField/index.stories.tsx
@@ -5,7 +5,7 @@ import { useCallback } from "react";
 import ListField, { ListFieldProps } from ".";
 
 const meta: Meta<typeof ListField> = {
-  component: ListField,
+  component: ListField
 };
 
 export default meta;
@@ -22,9 +22,9 @@ export const Default: Story = (args: ListFieldProps) => {
         ...args.items,
         {
           id: randomId,
-          title: `Item ${randomId}`,
-        },
-      ],
+          title: `Item ${randomId}`
+        }
+      ]
     });
   }, [updateArgs, args.items]);
 
@@ -32,12 +32,12 @@ export const Default: Story = (args: ListFieldProps) => {
     (key: string) => {
       updateArgs({ items: args.items.filter(({ id }) => id != key) });
     },
-    [updateArgs, args.items],
+    [updateArgs, args.items]
   );
 
   const handleSelect = useCallback(
     (id: string) => updateArgs({ selected: id }),
-    [updateArgs],
+    [updateArgs]
   );
 
   const handleItemMove = useCallback(
@@ -51,16 +51,16 @@ export const Default: Story = (args: ListFieldProps) => {
 
       updateArgs({ items: updatedItems });
     },
-    [updateArgs, args.items],
+    [updateArgs, args.items]
   );
   const handleItemNameUpdate = useCallback(
     (id: string, newTitle: string) => {
       const updatedItems = args.items.map((item) =>
-        item.id === id ? { ...item, title: newTitle } : item,
+        item.id === id ? { ...item, title: newTitle } : item
       );
       updateArgs({ items: updatedItems });
     },
-    [updateArgs, args.items],
+    [updateArgs, args.items]
   );
 
   return (
@@ -70,7 +70,7 @@ export const Default: Story = (args: ListFieldProps) => {
         flexDirection: "column",
         gap: "10px",
         width: "500px",
-        margin: "0 auto",
+        margin: "0 auto"
       }}
     >
       <ListField
@@ -92,27 +92,27 @@ Default.args = {
   items: [
     {
       id: "1",
-      title: "Item 1",
+      title: "Item 1"
     },
     {
       id: "2",
-      title: "Item 2",
+      title: "Item 2"
     },
     {
       id: "3",
-      title: "Item 3",
+      title: "Item 3"
     },
     {
       id: "4",
-      title: "Item 4",
+      title: "Item 4"
     },
     {
       id: "5",
-      title: "Item 5",
+      title: "Item 5"
     },
     {
       id: "6",
-      title: "Item 6",
-    },
-  ],
+      title: "Item 6"
+    }
+  ]
 };
diff --git a/web/src/beta/ui/fields/ListField/index.tsx b/web/src/beta/ui/fields/ListField/index.tsx
index 3a1f25ef7..7ec470978 100644
--- a/web/src/beta/ui/fields/ListField/index.tsx
+++ b/web/src/beta/ui/fields/ListField/index.tsx
@@ -37,7 +37,7 @@ const ListField: FC<ListFieldProps> = ({
   onItemSelect,
   onItemDelete,
   onItemMove,
-  onItemNameUpdate,
+  onItemNameUpdate
 }) => {
   const [listItems, setListItems] = useState(items ?? []);
 
@@ -67,7 +67,7 @@ const ListField: FC<ListFieldProps> = ({
       }
       setIsDragging(false);
     },
-    [onItemMove],
+    [onItemMove]
   );
 
   useEffect(() => {
@@ -89,7 +89,7 @@ const ListField: FC<ListFieldProps> = ({
             onItemSelect={onItemSelect}
             onItemNameUpdate={onItemNameUpdate}
           />
-        ),
+        )
       })),
     [
       listItems,
@@ -98,8 +98,8 @@ const ListField: FC<ListFieldProps> = ({
       isEditable,
       onItemDelete,
       onItemSelect,
-      onItemNameUpdate,
-    ],
+      onItemNameUpdate
+    ]
   );
 
   const handleMoveStart = useCallback(() => {
@@ -133,7 +133,7 @@ const ListField: FC<ListFieldProps> = ({
 const FieldContainer = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.smallest,
+  gap: theme.spacing.smallest
 }));
 
 const FieldWrapper = styled("div")(({ theme }) => ({
@@ -141,7 +141,7 @@ const FieldWrapper = styled("div")(({ theme }) => ({
   borderRadius: theme.radius.small,
   padding: theme.spacing.smallest,
   border: `1px solid ${theme.outline.weak}`,
-  overflow: "auto",
+  overflow: "auto"
 }));
 
 export default ListField;
diff --git a/web/src/beta/ui/fields/Properties/ProprtyField.tsx b/web/src/beta/ui/fields/Properties/ProprtyField.tsx
index b0964f0fb..b18a2eacc 100644
--- a/web/src/beta/ui/fields/Properties/ProprtyField.tsx
+++ b/web/src/beta/ui/fields/Properties/ProprtyField.tsx
@@ -14,7 +14,7 @@ import {
   SpacingField,
   SwitchField,
   TimePointField,
-  TwinInputField,
+  TwinInputField
 } from "..";
 import { SpacingValues } from "../SpacingField";
 
@@ -35,13 +35,13 @@ const PropertyField: FC<Props> = ({
   field,
   schemaGroup,
   schema,
-  onFlyTo,
+  onFlyTo
 }) => {
   const { handlePropertyItemUpdate } = useHooks(propertyId, schemaGroup);
 
   const value = useMemo(
     () => field?.mergedValue ?? field?.value ?? schema.defaultValue,
-    [field?.mergedValue, field?.value, schema.defaultValue],
+    [field?.mergedValue, field?.value, schema.defaultValue]
   );
 
   const assetTypes = useMemo(
@@ -53,7 +53,7 @@ const PropertyField: FC<Props> = ({
             ? ["file" as const]
             : undefined
         : undefined,
-    [schema.type, schema.ui],
+    [schema.type, schema.ui]
   );
 
   const handleChange = handlePropertyItemUpdate(schema.id, schema.type, itemId);
@@ -85,7 +85,7 @@ const PropertyField: FC<Props> = ({
             options={
               schema?.choices?.map(({ key, label }) => ({
                 value: key,
-                label: label,
+                label: label
               })) || []
             }
             onChange={handleChange}
diff --git a/web/src/beta/ui/fields/Properties/hooks.ts b/web/src/beta/ui/fields/Properties/hooks.ts
index d0a4760de..34792df95 100644
--- a/web/src/beta/ui/fields/Properties/hooks.ts
+++ b/web/src/beta/ui/fields/Properties/hooks.ts
@@ -7,7 +7,7 @@ export default (propertyId: string, schemaGroup: string) => {
     useUpdatePropertyValue,
     useAddPropertyItem,
     useRemovePropertyItem,
-    useMovePropertyItem,
+    useMovePropertyItem
   } = usePropertyFetcher();
 
   const handlePropertyItemUpdate = useCallback(
@@ -20,11 +20,11 @@ export default (propertyId: string, schemaGroup: string) => {
           fieldId,
           "en",
           v,
-          vt,
+          vt
         );
       };
     },
-    [propertyId, schemaGroup, useUpdatePropertyValue],
+    [propertyId, schemaGroup, useUpdatePropertyValue]
   );
 
   const handlePropertyItemAdd = useCallback(() => {
@@ -35,20 +35,20 @@ export default (propertyId: string, schemaGroup: string) => {
     (itemId: string) => {
       return useRemovePropertyItem(propertyId, schemaGroup, itemId);
     },
-    [propertyId, schemaGroup, useRemovePropertyItem],
+    [propertyId, schemaGroup, useRemovePropertyItem]
   );
 
   const handlePropertyItemMove = useCallback(
     (id: string, index: number) => {
       return useMovePropertyItem(propertyId, schemaGroup, id, index);
     },
-    [propertyId, schemaGroup, useMovePropertyItem],
+    [propertyId, schemaGroup, useMovePropertyItem]
   );
 
   return {
     handlePropertyItemUpdate,
     handlePropertyItemAdd,
     handlePropertyItemDelete,
-    handlePropertyItemMove,
+    handlePropertyItemMove
   };
 };
diff --git a/web/src/beta/ui/fields/Properties/index.tsx b/web/src/beta/ui/fields/Properties/index.tsx
index 0e4eab973..fa77c6458 100644
--- a/web/src/beta/ui/fields/Properties/index.tsx
+++ b/web/src/beta/ui/fields/Properties/index.tsx
@@ -3,7 +3,7 @@ import { FlyTo } from "@reearth/core";
 import {
   Group,
   GroupListItem,
-  Item,
+  Item
 } from "@reearth/services/api/propertyApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -26,7 +26,7 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
   const {
     handlePropertyItemDelete,
     handlePropertyItemAdd,
-    handlePropertyItemMove,
+    handlePropertyItemMove
   } = useHooks(propertyId, item?.schemaGroup || "");
 
   const isList = item && "items" in item;
@@ -38,7 +38,7 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
 
   const groups = useMemo<(GroupListItem | Group)[]>(
     () => (item && "items" in item ? item.items : item ? [item] : []),
-    [item],
+    [item]
   );
 
   const selectedItem = isList
@@ -55,7 +55,7 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
             ? i.fields.find((f) => f.id === item.representativeField)
             : undefined;
           const nameSchemaField = item?.schemaFields?.find(
-            (sf) => sf.id === item.representativeField,
+            (sf) => sf.id === item.representativeField
           );
 
           const value =
@@ -70,11 +70,11 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
           return {
             id: i.id,
             title: (!layerMode ? title : undefined) ?? t("Settings"),
-            layerId: layerMode ? title : undefined,
+            layerId: layerMode ? title : undefined
           };
         })
         .filter((g): g is ListItemProps => !!g),
-    [groups, layerMode, item, t],
+    [groups, layerMode, item, t]
   );
   const schemaFields = useMemo(
     () =>
@@ -94,11 +94,11 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
             return {
               schemaField: f,
               field,
-              hidden: f.only && (!condv || condv !== f.only.value),
+              hidden: f.only && (!condv || condv !== f.only.value)
             };
           })
         : [],
-    [item?.schemaFields, selectedItem],
+    [item?.schemaFields, selectedItem]
   );
 
   return (
@@ -144,7 +144,7 @@ const PropertyItem: FC<Props> = ({ propertyId, item, onFlyTo }) => {
 export default PropertyItem;
 
 const valueToString = (
-  v: ValueTypes[ValueType] | undefined,
+  v: ValueTypes[ValueType] | undefined
 ): string | undefined => {
   if (typeof v === "string" || typeof v === "number") {
     return v.toString();
@@ -155,5 +155,5 @@ const valueToString = (
 const FieldsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.large,
+  gap: theme.spacing.large
 }));
diff --git a/web/src/beta/ui/fields/QuartetInputField.tsx b/web/src/beta/ui/fields/QuartetInputField.tsx
index cddd65eef..e0f87eca3 100644
--- a/web/src/beta/ui/fields/QuartetInputField.tsx
+++ b/web/src/beta/ui/fields/QuartetInputField.tsx
@@ -1,7 +1,7 @@
 import {
   NumberInput,
   NumberInputProps,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useCallback, useEffect, useState } from "react";
@@ -42,7 +42,7 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
         onChange?.(newValues);
       }
     },
-    [inputValues, onChange],
+    [inputValues, onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -82,7 +82,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: `${theme.spacing.smallest}px`,
   alignItems: "flex-start",
-  width: "100%",
+  width: "100%"
 }));
 
 const InputWrapper = styled("div")(({ theme }) => ({
@@ -90,5 +90,5 @@ const InputWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   alignItems: "center",
   gap: theme.spacing.smallest,
-  width: "100%",
+  width: "100%"
 }));
diff --git a/web/src/beta/ui/fields/RangeField.tsx b/web/src/beta/ui/fields/RangeField.tsx
index 701dbe21c..d73a9bd28 100644
--- a/web/src/beta/ui/fields/RangeField.tsx
+++ b/web/src/beta/ui/fields/RangeField.tsx
@@ -1,7 +1,7 @@
 import {
   NumberInput,
   NumberInputProps,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useCallback, useEffect, useState } from "react";
@@ -85,7 +85,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: `${theme.spacing.smallest}px`,
   alignItems: "flex-start",
-  width: "100%",
+  width: "100%"
 }));
 
 const InputWrapper = styled("div")(({ theme }) => ({
@@ -94,10 +94,10 @@ const InputWrapper = styled("div")(({ theme }) => ({
   alignItems: "center",
   gap: theme.spacing.smallest,
   boxSizing: "border-box",
-  width: "100%",
+  width: "100%"
 }));
 
 const Dash = styled("span")(() => ({
   display: "flex",
-  alignItems: "center",
+  alignItems: "center"
 }));
diff --git a/web/src/beta/ui/fields/SpacingField.tsx b/web/src/beta/ui/fields/SpacingField.tsx
index 2fe9c389d..cef9c47e0 100644
--- a/web/src/beta/ui/fields/SpacingField.tsx
+++ b/web/src/beta/ui/fields/SpacingField.tsx
@@ -29,15 +29,15 @@ const SpacingField: FC<SpacingFieldProps> = ({
   ...props
 }) => {
   const [spacingValues, setSpacingValues] = useState<SpacingValues>(
-    value || { top: 0, left: 0, right: 0, bottom: 0 },
+    value || { top: 0, left: 0, right: 0, bottom: 0 }
   );
 
   const processedSpacingValues = useMemo(
     () =>
       spacingPosition.map(
-        (position) => spacingValues[position as keyof SpacingValues],
+        (position) => spacingValues[position as keyof SpacingValues]
       ),
-    [spacingValues],
+    [spacingValues]
   );
 
   const handleChange = (position: keyof SpacingValues, newValue?: number) => {
@@ -86,12 +86,12 @@ const InputWrapper = styled("div")(({ theme }) => ({
   height: "97px",
   width: "100%",
   position: "relative",
-  border: `1px dashed ${theme.outline.weak}`,
+  border: `1px dashed ${theme.outline.weak}`
 }));
 
 const CenteredInput = styled("div")<{ position: string }>(({ position }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  gridArea: position,
+  gridArea: position
 }));
diff --git a/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx b/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
index 516157373..4fdf67ed8 100644
--- a/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
+++ b/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
@@ -23,7 +23,7 @@ const EditModal: FC<EditPanelProps> = ({
   timePeriodValues,
   setTimePeriodValues,
   onClose,
-  onChange,
+  onChange
 }) => {
   const t = useT();
   const {
@@ -33,12 +33,12 @@ const EditModal: FC<EditPanelProps> = ({
     setDisabledFields,
     handleChange,
     handleSubmit,
-    handleTimePointPopup,
+    handleTimePointPopup
   } = useHooks({
     timePeriodValues,
     onChange,
     onClose,
-    setTimePeriodValues,
+    setTimePeriodValues
   });
 
   const timezoneMatches = useMemo(() => {
@@ -106,7 +106,7 @@ const EditModal: FC<EditPanelProps> = ({
             <Warning>
               <Icon icon="warning" size="large" />
               {t(
-                "Please make sure the Current time must between the Start time and End Time.",
+                "Please make sure the Current time must between the Start time and End Time."
               )}
             </Warning>
           )}
@@ -121,7 +121,7 @@ const FieldsWrapper = styled("div")(({ theme }) => ({
   gap: theme.spacing.largest,
   padding: theme.spacing.super,
   flexDirection: "column",
-  background: theme.bg[0],
+  background: theme.bg[0]
 }));
 
 const Warning = styled("div")(({ theme }) => ({
@@ -131,7 +131,7 @@ const Warning = styled("div")(({ theme }) => ({
   color: theme.dangerous.main,
   alignItems: "center",
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 export default EditModal;
diff --git a/web/src/beta/ui/fields/TimePeriodField/hooks.ts b/web/src/beta/ui/fields/TimePeriodField/hooks.ts
index f88efc9bd..d7ad602ff 100644
--- a/web/src/beta/ui/fields/TimePeriodField/hooks.ts
+++ b/web/src/beta/ui/fields/TimePeriodField/hooks.ts
@@ -13,7 +13,7 @@ export default ({
   timePeriodValues,
   onChange,
   onClose,
-  setTimePeriodValues,
+  setTimePeriodValues
 }: Props) => {
   const [warning, setWarning] = useState(false);
 
@@ -23,7 +23,7 @@ export default ({
         ...timePeriodValues,
         currentTime: timePeriodValues?.currentTime || "",
         startTime: timePeriodValues?.startTime || "",
-        endTime: timePeriodValues?.endTime || "",
+        endTime: timePeriodValues?.endTime || ""
       };
 
       switch (fieldId) {
@@ -59,7 +59,7 @@ export default ({
       }
       setTimePeriodValues?.(updatedData);
     },
-    [timePeriodValues, setTimePeriodValues],
+    [timePeriodValues, setTimePeriodValues]
   );
 
   const [disabledFields, setDisabledFields] = useState<string[]>([]);
@@ -106,6 +106,6 @@ export default ({
     setDisabledFields,
     handleChange,
     handleTimePointPopup,
-    handleSubmit,
+    handleSubmit
   };
 };
diff --git a/web/src/beta/ui/fields/TimePeriodField/index.tsx b/web/src/beta/ui/fields/TimePeriodField/index.tsx
index 9ab5a6fed..156f51706 100644
--- a/web/src/beta/ui/fields/TimePeriodField/index.tsx
+++ b/web/src/beta/ui/fields/TimePeriodField/index.tsx
@@ -22,7 +22,7 @@ const TimePeriodField: FC<TimePeriodFieldProps> = ({
   commonTitle,
   description,
   value,
-  onChange,
+  onChange
 }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [timePeriodValues, setTimePeriodValues] = useState(value);
@@ -51,8 +51,8 @@ const TimePeriodField: FC<TimePeriodFieldProps> = ({
     [
       timePeriodValues?.currentTime,
       timePeriodValues?.endTime,
-      timePeriodValues?.startTime,
-    ],
+      timePeriodValues?.startTime
+    ]
   );
 
   return (
@@ -118,7 +118,7 @@ const TimePeriodField: FC<TimePeriodFieldProps> = ({
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.smallest,
-  width: "100%",
+  width: "100%"
 }));
 
 const TimePeriodWrapper = styled("div")(({ theme }) => ({
@@ -127,13 +127,13 @@ const TimePeriodWrapper = styled("div")(({ theme }) => ({
   background: theme.bg[1],
   display: "flex",
   width: "100%",
-  boxShadow: theme.shadow.input,
+  boxShadow: theme.shadow.input
 }));
 
 const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: theme.spacing.smallest,
-  height: "30px",
+  height: "30px"
 }));
 
 const NoteIcon = styled("div")(({ theme }) => ({
@@ -142,7 +142,7 @@ const NoteIcon = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   paddingTop: theme.spacing.smallest,
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const ProgressSteps = styled("div")(({ theme }) => ({
@@ -151,7 +151,7 @@ const ProgressSteps = styled("div")(({ theme }) => ({
   alignItems: "center",
   padding: theme.spacing.small,
   gap: theme.spacing.large,
-  position: "relative",
+  position: "relative"
 }));
 
 const Circle = styled("div")<{ filled?: boolean }>(({ theme, filled }) => ({
@@ -170,8 +170,8 @@ const Circle = styled("div")<{ filled?: boolean }>(({ theme, filled }) => ({
     top: "10px",
     left: "50%",
     transform: "translateX(-50%)",
-    zIndex: 0,
-  },
+    zIndex: 0
+  }
 }));
 
 export default TimePeriodField;
diff --git a/web/src/beta/ui/fields/TimePointField/EditPanel.tsx b/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
index 285c70c20..7a2ee7907 100644
--- a/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
+++ b/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
@@ -3,7 +3,7 @@ import {
   DatePicker,
   PopupPanel,
   Selector,
-  TimePicker,
+  TimePicker
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -28,7 +28,7 @@ const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
     handleDateChange,
     handleTimezoneSelect,
     handleApply,
-    handleTimeChange,
+    handleTimeChange
   } = useHooks({ value, onChange, onClose, setDateTime });
 
   return (
@@ -69,7 +69,7 @@ const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
               value={selectedTimezone.timezone}
               options={offsetFromUTC.map((timezone) => ({
                 label: timezone.offset,
-                value: timezone?.timezone,
+                value: timezone?.timezone
               }))}
               maxHeight={200}
               onChange={handleTimezoneSelect}
@@ -85,30 +85,30 @@ const EditorWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",
-  gap: theme.spacing.normal,
+  gap: theme.spacing.normal
 }));
 
 const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 const Label = styled("div")(({ theme }) => ({
   color: theme.content.main,
   fontSize: theme.fonts.sizes.body,
-  fontWeight: theme.fonts.weight.regular,
+  fontWeight: theme.fonts.weight.regular
 }));
 
 const InputWrapper = styled("div")(() => ({
-  width: "100%",
+  width: "100%"
 }));
 const ButtonWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "flex-start",
-  gap: theme.spacing.small,
+  gap: theme.spacing.small
 }));
 
 export default EditPanel;
diff --git a/web/src/beta/ui/fields/TimePointField/hooks.ts b/web/src/beta/ui/fields/TimePointField/hooks.ts
index 47e9b7266..d9869e484 100644
--- a/web/src/beta/ui/fields/TimePointField/hooks.ts
+++ b/web/src/beta/ui/fields/TimePointField/hooks.ts
@@ -19,7 +19,7 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
   const [time, setTime] = useState("");
   const [selectedTimezone, setSelectedTimezone] = useState<TimezoneInfo>({
     offset: "+00:00",
-    timezone: "Africa/Abidjan",
+    timezone: "Africa/Abidjan"
   });
 
   const handleTimeChange = useCallback((newValue: string) => {
@@ -39,16 +39,16 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
   const handleTimezoneSelect = useCallback(
     (newValue: string | string[]) => {
       const updatedTimezone = offsetFromUTC.find(
-        (info) => info.timezone === newValue,
+        (info) => info.timezone === newValue
       );
       setSelectedTimezone(updatedTimezone || selectedTimezone);
     },
-    [offsetFromUTC, selectedTimezone],
+    [offsetFromUTC, selectedTimezone]
   );
 
   const handleApply = useCallback(() => {
     const selectedTimezoneInfo = offsetFromUTC.find(
-      (info) => info.timezone === selectedTimezone.timezone,
+      (info) => info.timezone === selectedTimezone.timezone
     );
     if (selectedTimezoneInfo) {
       const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
@@ -63,7 +63,7 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
     date,
     time,
     setDateTime,
-    onChange,
+    onChange
   ]);
 
   useEffect(() => {
@@ -85,7 +85,7 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
           info.offset ===
           (timeWithOffset.includes("-")
             ? `-${formattedTimezoneOffset}`
-            : `+${formattedTimezoneOffset}`),
+            : `+${formattedTimezoneOffset}`)
       );
       if (updatedTimezone) setSelectedTimezone(updatedTimezone);
     } else {
@@ -103,6 +103,6 @@ export default ({ value, onChange, setDateTime, onClose }: Props) => {
     handleTimeChange,
     handleTimezoneSelect,
     handleDateChange,
-    handleApply,
+    handleApply
   };
 };
diff --git a/web/src/beta/ui/fields/TimePointField/index.tsx b/web/src/beta/ui/fields/TimePointField/index.tsx
index 369504746..a89871e86 100644
--- a/web/src/beta/ui/fields/TimePointField/index.tsx
+++ b/web/src/beta/ui/fields/TimePointField/index.tsx
@@ -24,7 +24,7 @@ const TimePointField: FC<TimePointFieldProps> = ({
   fieldName,
   onChange,
   onTimePointPopupOpen,
-  setDisabledFields,
+  setDisabledFields
 }) => {
   const [open, setOpen] = useState(false);
   const t = useT();
@@ -68,7 +68,7 @@ const TimePointField: FC<TimePointFieldProps> = ({
               disabled={!dateTime}
               onClick={handleTimeSettingDelete}
               iconColor={dateTime ? theme.content.main : theme.content.weak}
-            />,
+            />
           ]}
           disabled
           placeholder={"YYYY-MM-DDThh:mm:ss±hh:mm"}
@@ -107,5 +107,5 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   width: "100%",
   gap: theme.spacing.small,
-  flexWrap: "wrap",
+  flexWrap: "wrap"
 }));
diff --git a/web/src/beta/ui/fields/TripletInputField.tsx b/web/src/beta/ui/fields/TripletInputField.tsx
index 0eb3f5b94..d28feff93 100644
--- a/web/src/beta/ui/fields/TripletInputField.tsx
+++ b/web/src/beta/ui/fields/TripletInputField.tsx
@@ -1,7 +1,7 @@
 import {
   NumberInput,
   NumberInputProps,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useCallback, useEffect, useState } from "react";
@@ -43,7 +43,7 @@ const TripletInputField: FC<TripletInputFieldProps> = ({
       setInputValues(newValues);
       onChange?.(newValues);
     },
-    [inputValues, onChange],
+    [inputValues, onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -79,7 +79,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: `${theme.spacing.smallest}px`,
   alignItems: "flex-start",
-  width: "100%",
+  width: "100%"
 }));
 
 const InputWrapper = styled("div")(({ theme }) => ({
@@ -87,5 +87,5 @@ const InputWrapper = styled("div")(({ theme }) => ({
   flexDirection: "column",
   alignItems: "center",
   gap: theme.spacing.smallest,
-  width: "100%",
+  width: "100%"
 }));
diff --git a/web/src/beta/ui/fields/TwinInputField.tsx b/web/src/beta/ui/fields/TwinInputField.tsx
index 05efff89f..904ce317f 100644
--- a/web/src/beta/ui/fields/TwinInputField.tsx
+++ b/web/src/beta/ui/fields/TwinInputField.tsx
@@ -1,7 +1,7 @@
 import {
   NumberInput,
   NumberInputProps,
-  Typography,
+  Typography
 } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useCallback, useEffect, useState } from "react";
@@ -43,7 +43,7 @@ const TwinInputField: FC<TwinInputFieldProps> = ({
       setInputValues(newValues);
       onChange?.(newValues);
     },
-    [inputValues, onChange],
+    [inputValues, onChange]
   );
 
   const handleBlur = useCallback(() => {
@@ -79,7 +79,7 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   gap: `${theme.spacing.smallest}px`,
   alignItems: "flex-start",
-  width: "100%",
+  width: "100%"
 }));
 
 const InputWrapper = styled("div")(({ theme }) => ({
@@ -88,5 +88,5 @@ const InputWrapper = styled("div")(({ theme }) => ({
   alignItems: "center",
   gap: theme.spacing.smallest,
   width: "100%",
-  boxSizing: "border-box",
+  boxSizing: "border-box"
 }));
diff --git a/web/src/beta/ui/fields/index.stories.tsx b/web/src/beta/ui/fields/index.stories.tsx
index 74afb8291..14e8b76d1 100644
--- a/web/src/beta/ui/fields/index.stories.tsx
+++ b/web/src/beta/ui/fields/index.stories.tsx
@@ -18,11 +18,11 @@ import {
   TimePointField,
   NumberField,
   RangeField,
-  CheckboxField,
+  CheckboxField
 } from "./index";
 
 const meta: Meta<typeof InputField> = {
-  component: InputField,
+  component: InputField
 };
 
 export default meta;
@@ -37,7 +37,7 @@ export const Components: Story = {
         gap: "20px",
         maxWidth: "500px",
         padding: "24px",
-        margin: "0 auto",
+        margin: "0 auto"
       }}
     >
       <CommonField
@@ -84,7 +84,7 @@ export const Components: Story = {
         options={[
           { label: "Option 1", value: "option1" },
           { label: "Option 2", value: "option2" },
-          { label: "Option 3", value: "option3" },
+          { label: "Option 3", value: "option3" }
         ]}
         multiple={true}
         commonTitle="SelectField"
@@ -132,7 +132,7 @@ export const Components: Story = {
         value={{
           currentTime: "2024-07-19T11:03:56+00:00",
           startTime: "2024-07-20T11:03:56+00:00",
-          endTime: "2024-07-24T11:03:56+00:00",
+          endTime: "2024-07-24T11:03:56+00:00"
         }}
         onChange={() => {}}
         commonTitle="TimePeriodField"
@@ -151,5 +151,5 @@ export const Components: Story = {
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
       />
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/ui/fields/utils.ts b/web/src/beta/ui/fields/utils.ts
index 2320297f7..7227eee65 100644
--- a/web/src/beta/ui/fields/utils.ts
+++ b/web/src/beta/ui/fields/utils.ts
@@ -1,7 +1,7 @@
 import {
   Field,
   Item,
-  SchemaField,
+  SchemaField
 } from "@reearth/services/api/propertyApi/utils";
 
 export const filterVisibleItems = (items?: Item[]) => {
@@ -16,7 +16,7 @@ export const filterVisibleItems = (items?: Item[]) => {
 
 const searchField = (
   items: Item[],
-  fid: string,
+  fid: string
 ): [SchemaField, Field | undefined] | undefined => {
   for (const i of items) {
     const sf2 = i.schemaFields.find((f) => f.id === fid);
diff --git a/web/src/beta/ui/layout/Area/index.stories.tsx b/web/src/beta/ui/layout/Area/index.stories.tsx
index 4bd3337bf..1d9572b44 100644
--- a/web/src/beta/ui/layout/Area/index.stories.tsx
+++ b/web/src/beta/ui/layout/Area/index.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { Area, AreaProps } from ".";
 
 const meta: Meta<AreaProps> = {
-  component: Area,
+  component: Area
 };
 export default meta;
 
@@ -51,7 +51,7 @@ export const Default: StoryObj<typeof Area> = {
         </Area>
       </Area>
     </div>
-  ),
+  )
 };
 
 export const Complicated: StoryObj<typeof Area> = {
@@ -116,5 +116,5 @@ export const Complicated: StoryObj<typeof Area> = {
         </Area>
       </Area>
     </div>
-  ),
+  )
 };
diff --git a/web/src/beta/ui/layout/Area/index.tsx b/web/src/beta/ui/layout/Area/index.tsx
index eadbd247c..512093e37 100644
--- a/web/src/beta/ui/layout/Area/index.tsx
+++ b/web/src/beta/ui/layout/Area/index.tsx
@@ -10,7 +10,7 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 
 import { Panel } from "../Panel";
@@ -69,9 +69,9 @@ export const Area = forwardRef<AreaRef, AreaProps>(
       storageId,
       passive,
       children,
-      onResize,
+      onResize
     },
-    ref,
+    ref
   ) => {
     const sizeStorageKey = storageId
       ? `reearth-visualizer-${storageId}-size`
@@ -86,21 +86,21 @@ export const Area = forwardRef<AreaRef, AreaProps>(
           ? localStorage.getItem(sizeStorageKey)
           : undefined) ??
           initialWidth ??
-          DEFAULT_WIDTH,
+          DEFAULT_WIDTH
       ),
       height: Number(
         (sizeStorageKey && direction === "row"
           ? localStorage.getItem(sizeStorageKey)
           : undefined) ??
           initialHeight ??
-          DEFAULT_HEIGHT,
-      ),
+          DEFAULT_HEIGHT
+      )
     });
 
     const [collapsed, setCollapsed] = useState<boolean>(
       collapsedStorageKey
         ? localStorage.getItem(collapsedStorageKey) === "1"
-        : false,
+        : false
     );
 
     const resizableRef = useRef<HTMLDivElement>(null);
@@ -175,13 +175,13 @@ export const Area = forwardRef<AreaRef, AreaProps>(
           if (sizeStorageKey) {
             localStorage.setItem(
               sizeStorageKey,
-              direction === "row" ? height.toString() : width.toString(),
+              direction === "row" ? height.toString() : width.toString()
             );
           }
 
           return {
             width,
-            height,
+            height
           };
         });
       },
@@ -190,8 +190,8 @@ export const Area = forwardRef<AreaRef, AreaProps>(
         resizableEdge,
         sizeStorageKey,
         collapsedStorageKey,
-        direction,
-      ],
+        direction
+      ]
     );
 
     const onMouseUp = () => {
@@ -240,7 +240,7 @@ export const Area = forwardRef<AreaRef, AreaProps>(
           (resizableEdge === "top" || resizableEdge === "bottom")) ||
         (direction === "column" &&
           (resizableEdge === "left" || resizableEdge === "right")),
-      [direction, resizableEdge],
+      [direction, resizableEdge]
     );
 
     const uncollapse = useCallback(() => {
@@ -261,13 +261,13 @@ export const Area = forwardRef<AreaRef, AreaProps>(
         if (sizeStorageKey) {
           localStorage.setItem(
             sizeStorageKey,
-            direction === "row" ? h.toString() : w.toString(),
+            direction === "row" ? h.toString() : w.toString()
           );
         }
 
         return {
           width: w,
-          height: h,
+          height: h
         };
       });
     }, [
@@ -275,7 +275,7 @@ export const Area = forwardRef<AreaRef, AreaProps>(
       sizeStorageKey,
       collapsedStorageKey,
       initialWidth,
-      initialHeight,
+      initialHeight
     ]);
 
     const collapse = useCallback(() => {
@@ -290,13 +290,13 @@ export const Area = forwardRef<AreaRef, AreaProps>(
         if (sizeStorageKey) {
           localStorage.setItem(
             sizeStorageKey,
-            direction === "row" ? height.toString() : width.toString(),
+            direction === "row" ? height.toString() : width.toString()
           );
         }
 
         return {
           width,
-          height,
+          height
         };
       });
     }, [direction, collapsedStorageKey, sizeStorageKey]);
@@ -304,7 +304,7 @@ export const Area = forwardRef<AreaRef, AreaProps>(
     useImperativeHandle(ref, () => ({
       collapse() {
         collapse();
-      },
+      }
     }));
 
     return (
@@ -339,7 +339,7 @@ export const Area = forwardRef<AreaRef, AreaProps>(
         )}
       </StyledArea>
     );
-  },
+  }
 );
 
 Area.displayName = "Area";
@@ -361,7 +361,7 @@ const StyledArea = styled("div")<{
     height,
     backgroundColor,
     asWrapper,
-    passive,
+    passive
   }) => ({
     position: "relative",
     display: "flex",
@@ -383,11 +383,11 @@ const StyledArea = styled("div")<{
       padding: theme.spacing.micro / 2,
       gap: theme.spacing.micro,
       display: "flex",
-      flexDirection: direction,
+      flexDirection: direction
     }),
     maxHeight: "100%",
-    maxWidth: "100%",
-  }),
+    maxWidth: "100%"
+  })
 );
 
 const ResizeHandle = styled("div")<{ edge: ResizableEdge; color?: string }>(
@@ -399,8 +399,8 @@ const ResizeHandle = styled("div")<{ edge: ResizableEdge; color?: string }>(
     top: edge === "bottom" ? "calc(100% - 4px)" : edge === "top" ? "0" : 0,
     cursor: edge === "right" || edge === "left" ? "ew-resize" : "ns-resize",
     zIndex: 1,
-    background: color ?? "none",
-  }),
+    background: color ?? "none"
+  })
 );
 
 const StyledIconButton = styled(IconButton)<{ vertical?: boolean }>(
@@ -408,9 +408,9 @@ const StyledIconButton = styled(IconButton)<{ vertical?: boolean }>(
     height: "100%",
     width: "100%",
     ["svg"]: {
-      transform: vertical ? "rotate(90deg)" : "none",
-    },
-  }),
+      transform: vertical ? "rotate(90deg)" : "none"
+    }
+  })
 );
 
 export const Window = styled("div")(({ theme }) => ({
@@ -420,20 +420,20 @@ export const Window = styled("div")(({ theme }) => ({
   padding: 1,
   boxSizing: "border-box",
   ["*"]: {
-    boxSizing: "border-box",
+    boxSizing: "border-box"
   },
   ["* ::-webkit-scrollbar"]: {
-    width: "8px",
+    width: "8px"
   },
   ["* ::-webkit-scrollbar-track"]: {
     background: theme.relative.darker,
-    borderRadius: "10px",
+    borderRadius: "10px"
   },
   ["* ::-webkit-scrollbar-thumb"]: {
     background: theme.relative.light,
-    borderRadius: "4px",
+    borderRadius: "4px"
   },
   ["* ::-webkit-scrollbar-thumb:hover"]: {
-    background: theme.relative.lighter,
-  },
+    background: theme.relative.lighter
+  }
 }));
diff --git a/web/src/beta/ui/layout/Panel/index.stories.tsx b/web/src/beta/ui/layout/Panel/index.stories.tsx
index 96b1ee63b..3e4190845 100644
--- a/web/src/beta/ui/layout/Panel/index.stories.tsx
+++ b/web/src/beta/ui/layout/Panel/index.stories.tsx
@@ -11,13 +11,13 @@ const meta: Meta<typeof Panel> = {
           width: 300,
           height: 300,
           display: "flex",
-          flexDirection: "column",
+          flexDirection: "column"
         }}
       >
         <Story />
       </div>
-    ),
-  ],
+    )
+  ]
 };
 
 export default meta;
@@ -27,53 +27,53 @@ type Story = StoryObj<typeof Panel>;
 export const Default: Story = {
   args: {
     title: "Demo Panel",
-    children: "Content",
-  },
+    children: "Content"
+  }
 };
 
 export const Extended: Story = {
   args: {
     title: "Demo Panel",
     extend: true,
-    children: "Content",
+    children: "Content"
   },
   parameters: {
     docs: {
       description: {
-        story: "wrapper flex direction column required",
-      },
-    },
-  },
+        story: "wrapper flex direction column required"
+      }
+    }
+  }
 };
 
 export const AlwaysOpen: Story = {
   args: {
     title: "Demo Panel",
     alwaysOpen: true,
-    children: "Content",
-  },
+    children: "Content"
+  }
 };
 
 export const Background: Story = {
   args: {
     title: "Demo Panel",
     background: "#000",
-    children: "Content",
-  },
+    children: "Content"
+  }
 };
 
 export const Collapsed: Story = {
   args: {
     title: "Demo Panel",
     collapsed: true,
-    children: "Content",
-  },
+    children: "Content"
+  }
 };
 
 export const NoPadding: Story = {
   args: {
     title: "Demo Panel",
     noPadding: true,
-    children: "Content",
-  },
+    children: "Content"
+  }
 };
diff --git a/web/src/beta/ui/layout/Panel/index.tsx b/web/src/beta/ui/layout/Panel/index.tsx
index 50d18ed54..0b2acbce4 100644
--- a/web/src/beta/ui/layout/Panel/index.tsx
+++ b/web/src/beta/ui/layout/Panel/index.tsx
@@ -27,7 +27,7 @@ export const Panel: FC<PanelProps> = ({
   background = "default",
   areaRef,
   showCollapseArea,
-  children,
+  children
 }) => {
   const theme = useTheme();
 
@@ -37,7 +37,7 @@ export const Panel: FC<PanelProps> = ({
 
   const initialCollapsed = useMemo(
     () => !!(storageKey ? localStorage.getItem(storageKey) === "1" : collapsed),
-    [storageKey, collapsed],
+    [storageKey, collapsed]
   );
 
   const backgroundStyle = useMemo(() => {
@@ -56,7 +56,7 @@ export const Panel: FC<PanelProps> = ({
         localStorage.setItem(storageKey, collapsed ? "1" : "0");
       }
     },
-    [storageKey],
+    [storageKey]
   );
 
   const collapseArea = useCallback(
@@ -64,7 +64,7 @@ export const Panel: FC<PanelProps> = ({
       e.stopPropagation();
       areaRef?.current?.collapse();
     },
-    [areaRef],
+    [areaRef]
   );
 
   const actions = useMemo(() => {
@@ -111,7 +111,7 @@ const Wrapper = styled("div")<{ extend?: boolean }>(({ theme, extend }) => ({
   flexDirection: "column",
   flex: extend ? 1 : "0 0 auto",
   borderRadius: theme.radius.small,
-  minHeight: 0,
+  minHeight: 0
 }));
 
 const ContentWrapper = styled("div")<{ background?: string; extend?: boolean }>(
@@ -119,6 +119,6 @@ const ContentWrapper = styled("div")<{ background?: string; extend?: boolean }>(
     display: "flex",
     flex: extend ? 1 : "0 0 auto",
     background: background,
-    borderRadius: theme.radius.small,
-  }),
+    borderRadius: theme.radius.small
+  })
 );
diff --git a/web/src/beta/utils/aria.ts b/web/src/beta/utils/aria.ts
index aacd100e5..4228efd58 100644
--- a/web/src/beta/utils/aria.ts
+++ b/web/src/beta/utils/aria.ts
@@ -7,7 +7,7 @@ export function ariaProps(props: unknown): AriaAttributes {
       .filter(([k]) => typeof k === "string" && k.startsWith("aria"))
       .map(([k, v]) => [k.replace(/^aria-?/, "").toLowerCase(), v])
       .filter(([k]) => typeof k === "string" && keys.has(k))
-      .map(([k, v]) => [`aria-${k}`, v]),
+      .map(([k, v]) => [`aria-${k}`, v])
   );
 }
 
@@ -59,5 +59,5 @@ const keys = new Set([
   "valuemax",
   "valuemin",
   "valuenow",
-  "valuetext",
+  "valuetext"
 ]);
diff --git a/web/src/beta/utils/convert-object.test.ts b/web/src/beta/utils/convert-object.test.ts
index f89d5b408..4d4e02c88 100644
--- a/web/src/beta/utils/convert-object.test.ts
+++ b/web/src/beta/utils/convert-object.test.ts
@@ -12,21 +12,21 @@ const mapping: Mapping = {
     "contacts",
     {
       name: "fullName",
-      age: "userAge",
-    },
-  ],
+      age: "userAge"
+    }
+  ]
 };
 describe("convertData", () => {
   it("should convert flat properties", () => {
     const sourceData = {
       user: {
         name: "John Doe",
-        age: 30,
-      },
+        age: 30
+      }
     };
     const expectedTargetData = {
       fullName: "John Doe",
-      userAge: 30,
+      userAge: 30
     };
     expect(convertData(sourceData, mapping)).toEqual(expectedTargetData);
   });
@@ -37,18 +37,18 @@ describe("convertData", () => {
         address: {
           street: "123 Main St",
           city: "Anytown",
-          zip: "12345",
-        },
-      },
+          zip: "12345"
+        }
+      }
     };
     const expectedTargetData = {
       location: {
         address: {
           street: "123 Main St",
           city: "Anytown",
-          zipCode: "12345",
-        },
-      },
+          zipCode: "12345"
+        }
+      }
     };
     expect(convertData(sourceData, mapping)).toEqual(expectedTargetData);
   });
@@ -58,15 +58,15 @@ describe("convertData", () => {
       user: {
         friends: [
           { name: "Jane Doe", age: 28 },
-          { name: "Jim Beam", age: 35 },
-        ],
-      },
+          { name: "Jim Beam", age: 35 }
+        ]
+      }
     };
     const expectedTargetData = {
       contacts: [
         { fullName: "Jane Doe", userAge: 28 },
-        { fullName: "Jim Beam", userAge: 35 },
-      ],
+        { fullName: "Jim Beam", userAge: 35 }
+      ]
     };
     expect(convertData(sourceData, mapping)).toEqual(expectedTargetData);
   });
@@ -79,13 +79,13 @@ describe("convertData", () => {
         address: {
           street: "123 Main St",
           city: "Anytown",
-          zip: "12345",
+          zip: "12345"
         },
         friends: [
           { name: "Jane Doe", age: 28 },
-          { name: "Jim Beam", age: 35 },
-        ],
-      },
+          { name: "Jim Beam", age: 35 }
+        ]
+      }
     };
     const expectedTargetData = {
       fullName: "John Doe",
@@ -94,13 +94,13 @@ describe("convertData", () => {
         address: {
           street: "123 Main St",
           city: "Anytown",
-          zipCode: "12345",
-        },
+          zipCode: "12345"
+        }
       },
       contacts: [
         { fullName: "Jane Doe", userAge: 28 },
-        { fullName: "Jim Beam", userAge: 35 },
-      ],
+        { fullName: "Jim Beam", userAge: 35 }
+      ]
     };
     expect(convertData(sourceData, mapping)).toEqual(expectedTargetData);
   });
diff --git a/web/src/beta/utils/convert-object.ts b/web/src/beta/utils/convert-object.ts
index 80da71f73..57117cf16 100644
--- a/web/src/beta/utils/convert-object.ts
+++ b/web/src/beta/utils/convert-object.ts
@@ -5,7 +5,7 @@ type AnyObject = Record<string, any>;
 function getNestedProperty(obj: AnyObject, keys: string[]): any {
   return keys.reduce(
     (acc, key) => (acc?.[key] !== undefined ? acc[key] : undefined),
-    obj,
+    obj
   );
 }
 
@@ -38,7 +38,7 @@ export function convertData(source: AnyObject, mapping: Mapping): AnyObject {
     if (value !== undefined) {
       if (isArray(value) && typeof targetKey === "object") {
         const convertedArray = value.map((item) =>
-          isObject(item) ? convertData(item, targetKey[1]) : item,
+          isObject(item) ? convertData(item, targetKey[1]) : item
         );
         const targetKeys = targetKey[0].split(".");
         setNestedProperty(target, targetKeys, convertedArray);
@@ -66,8 +66,8 @@ export const sceneProperty2ViewerPropertyMapping: Mapping = {
       tile_zoomLevel: "zoomLevel",
       tile_zoomLevelForURL: "zoomLevelForURL",
       tile_opacity: "opacity",
-      heatmap: "heatmap",
-    },
+      heatmap: "heatmap"
+    }
   ],
   "terrain.terrain": "terrain.enabled",
   "terrain.terrainType": "terrain.type",
@@ -87,5 +87,5 @@ export const sceneProperty2ViewerPropertyMapping: Mapping = {
   "moon.moon": "sky.moon.show",
   "skyAtmosphere.skyAtmosphere": "sky.atmosphere.show",
   "skyAtmosphere.skyAtmosphereIntensity": "sky.atmosphere.lightIntensity",
-  "camera.allowEnterGround": "camera.allowEnterGround",
+  "camera.allowEnterGround": "camera.allowEnterGround"
 };
diff --git a/web/src/beta/utils/deepFind.test.ts b/web/src/beta/utils/deepFind.test.ts
index 289ddee3e..07af21fc6 100644
--- a/web/src/beta/utils/deepFind.test.ts
+++ b/web/src/beta/utils/deepFind.test.ts
@@ -7,23 +7,23 @@ test("find an element", () => {
     deepFind<string | string[]>(
       ["a", ["b", "c"], "d"],
       (e) => e === "c",
-      (e) => (Array.isArray(e) ? e : []),
-    ),
+      (e) => (Array.isArray(e) ? e : [])
+    )
   ).toEqual(["c", [1, 1]]);
 
   expect(
     deepFind<string | string[]>(
       ["a", ["b", "c"], "d"],
       (e) => e === "e",
-      (e) => (Array.isArray(e) ? e : []),
-    ),
+      (e) => (Array.isArray(e) ? e : [])
+    )
   ).toEqual([undefined, []]);
 
   expect(
     deepFind<string | string[]>(
       ["a", ["b", "c"], "d"],
       (e) => e === "a",
-      (e) => (Array.isArray(e) ? e : []),
-    ),
+      (e) => (Array.isArray(e) ? e : [])
+    )
   ).toEqual(["a", [0]]);
 });
diff --git a/web/src/beta/utils/deepFind.ts b/web/src/beta/utils/deepFind.ts
index e4ed7e86d..bd775f140 100644
--- a/web/src/beta/utils/deepFind.ts
+++ b/web/src/beta/utils/deepFind.ts
@@ -1,7 +1,7 @@
 export default function deepFind<T>(
   array: T[] | undefined,
   cb: (value: T, index: number, array: T[]) => boolean,
-  children?: (value: T, index: number, array: T[]) => T[] | undefined,
+  children?: (value: T, index: number, array: T[]) => T[] | undefined
 ): [T | undefined, number[]] {
   if (!array?.length) return [undefined, []];
 
diff --git a/web/src/beta/utils/infinite-scroll.ts b/web/src/beta/utils/infinite-scroll.ts
index 258912833..44227be65 100644
--- a/web/src/beta/utils/infinite-scroll.ts
+++ b/web/src/beta/utils/infinite-scroll.ts
@@ -2,7 +2,7 @@ import { MutableRefObject } from "react";
 
 export function autoFillPage(
   ref: MutableRefObject<HTMLDivElement | undefined | null>,
-  onLoadMore?: () => void,
+  onLoadMore?: () => void
 ) {
   if (
     ref.current &&
@@ -15,7 +15,7 @@ export function autoFillPage(
 export function onScrollToBottom(
   { currentTarget }: React.UIEvent<HTMLDivElement, UIEvent>,
   onLoadMore?: () => void,
-  threshold = 5,
+  threshold = 5
 ) {
   if (
     currentTarget.scrollTop + currentTarget.clientHeight >=
diff --git a/web/src/beta/utils/localstorage.ts b/web/src/beta/utils/localstorage.ts
index fcd6a92a5..b75a10ab8 100644
--- a/web/src/beta/utils/localstorage.ts
+++ b/web/src/beta/utils/localstorage.ts
@@ -1,6 +1,6 @@
 export const setLocalStorageData = (
   localStorageKey: string,
-  storedData: any,
+  storedData: any
 ) => {
   if (!localStorageKey) return;
 
diff --git a/web/src/beta/utils/metrics.ts b/web/src/beta/utils/metrics.ts
index 1cb212b8e..63da7dc2e 100644
--- a/web/src/beta/utils/metrics.ts
+++ b/web/src/beta/utils/metrics.ts
@@ -11,7 +11,7 @@ const metrics = {
   dashboardWorkspaceMinWidth: 364,
   dashboardQuickMinWidth: 270,
   dashboardContentHeight: 250,
-  dashboardContentSmallHeight: 156,
+  dashboardContentSmallHeight: 156
 };
 
 export const metricsSizes = {
@@ -23,7 +23,7 @@ export const metricsSizes = {
   xl: 20,
   "2xl": 24,
   "3xl": 28,
-  "4xl": 32,
+  "4xl": 32
 } as const;
 
 export type MetricsSizesType = typeof metricsSizes;
diff --git a/web/src/beta/utils/object.test.ts b/web/src/beta/utils/object.test.ts
index cfebf786c..8e9eeb441 100644
--- a/web/src/beta/utils/object.test.ts
+++ b/web/src/beta/utils/object.test.ts
@@ -60,13 +60,13 @@ test("merge", () => {
       get a() {
         return 1;
       },
-      b: 2,
+      b: 2
     },
     {
       get c() {
         return 3;
-      },
-    },
+      }
+    }
   );
   expect(o).toEqual({ a: 1, b: 2, c: 3 });
   expect(Object.getOwnPropertyDescriptor(o, "a")?.get).toBeInstanceOf(Function);
diff --git a/web/src/beta/utils/object.ts b/web/src/beta/utils/object.ts
index 641f625a4..cf9b43687 100644
--- a/web/src/beta/utils/object.ts
+++ b/web/src/beta/utils/object.ts
@@ -1,6 +1,6 @@
 export function delayedObject<T extends object>(
   obj: T,
-  excludedKeys?: string[],
+  excludedKeys?: string[]
 ): Readonly<T> {
   const res: any = {};
   const descs = Object.keys(obj).reduce<PropertyDescriptorMap>(
@@ -11,17 +11,17 @@ export function delayedObject<T extends object>(
             value: (obj as any)[b],
             configurable: false,
             enumerable: true,
-            writable: false,
+            writable: false
           }
         : {
             get() {
               return (obj as any)[b];
             },
             configurable: false,
-            enumerable: true,
-          },
+            enumerable: true
+          }
     }),
-    {},
+    {}
   );
   Object.defineProperties(res, descs);
   return res;
@@ -29,7 +29,7 @@ export function delayedObject<T extends object>(
 
 export function objectFromGetter<T extends { [K in keyof T]: any }>(
   keys: (keyof T)[],
-  fn: (this: T, key: keyof T) => T[keyof T],
+  fn: (this: T, key: keyof T) => T[keyof T]
 ): Readonly<T> {
   const res: any = {};
   const descs = keys.reduce<PropertyDescriptorMap>(
@@ -40,10 +40,10 @@ export function objectFromGetter<T extends { [K in keyof T]: any }>(
           return fn.call(this, b);
         },
         configurable: false,
-        enumerable: true,
-      },
+        enumerable: true
+      }
     }),
-    {},
+    {}
   );
   Object.defineProperties(res, descs);
   return res;
@@ -60,7 +60,7 @@ type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [T[P]] }[Exclude<
   keyof any[]
 >];
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-  k: infer I,
+  k: infer I
 ) => void
   ? I
   : never;
diff --git a/web/src/beta/utils/raf.ts b/web/src/beta/utils/raf.ts
index 9244f4d97..bc959943a 100644
--- a/web/src/beta/utils/raf.ts
+++ b/web/src/beta/utils/raf.ts
@@ -4,7 +4,7 @@ export type Easing = keyof IEasingMap;
 
 export function interval(
   callback: (t: number) => boolean,
-  delay?: number,
+  delay?: number
 ): () => void {
   let prev = 0;
   let raf = 0;
@@ -34,7 +34,7 @@ export function interval(
 export function intervalDuring(
   callback: (time: number) => void,
   duration: number,
-  delay?: number,
+  delay?: number
 ): () => void {
   if (duration < 0) return () => {};
   return interval((d) => {
@@ -48,7 +48,7 @@ export function tweenInterval(
   callback: (v: number, t: number) => void,
   easing: Easing | ((t: number) => number),
   duration: number,
-  delay?: number,
+  delay?: number
 ): () => void {
   const e = typeof easing === "function" ? easing : tweenEasing[easing];
   return intervalDuring(
@@ -56,6 +56,6 @@ export function tweenInterval(
       callback(e(d), d);
     },
     duration,
-    delay,
+    delay
   );
 }
diff --git a/web/src/beta/utils/time.ts b/web/src/beta/utils/time.ts
index 9f11edffc..e52b0c6fa 100644
--- a/web/src/beta/utils/time.ts
+++ b/web/src/beta/utils/time.ts
@@ -1,5 +1,5 @@
 export const convertTime = (
-  time: string | Date | undefined,
+  time: string | Date | undefined
 ): Date | undefined => {
   if (!time) return;
   if (time instanceof Date) {
diff --git a/web/src/beta/utils/use-dnd/drag.ts b/web/src/beta/utils/use-dnd/drag.ts
index a6911430d..06c96fe61 100644
--- a/web/src/beta/utils/use-dnd/drag.ts
+++ b/web/src/beta/utils/use-dnd/drag.ts
@@ -6,7 +6,7 @@ import { Item, ItemType, Dropper } from "./types";
 export const useDrag = <T extends ItemType = ItemType>(
   item: Item<T> | undefined,
   disabled?: boolean,
-  end?: (item: Item<T>, dropper?: Dropper) => void,
+  end?: (item: Item<T>, dropper?: Dropper) => void
 ) => {
   const options = useMemo<
     DragSourceHookSpec<
@@ -24,10 +24,10 @@ export const useDrag = <T extends ItemType = ItemType>(
       end: (item, monitor) =>
         end?.(item as Item<T>, monitor.getDropResult() ?? undefined),
       collect: (monitor) => ({
-        isDragging: monitor.isDragging(),
-      }),
+        isDragging: monitor.isDragging()
+      })
     }),
-    [disabled, end, item],
+    [disabled, end, item]
   );
 
   const [{ isDragging }, ref, previewRef] = useDndDrag(options);
diff --git a/web/src/beta/utils/use-dnd/drop.ts b/web/src/beta/utils/use-dnd/drop.ts
index 52be6ae9d..47c85c605 100644
--- a/web/src/beta/utils/use-dnd/drop.ts
+++ b/web/src/beta/utils/use-dnd/drop.ts
@@ -2,7 +2,7 @@ import { useMemo, useCallback } from "react";
 import {
   useDrop as useDndDrop,
   DropTargetHookSpec,
-  DropTargetMonitor,
+  DropTargetMonitor
 } from "react-dnd";
 
 import { Item, ItemType, Dropper } from "./types";
@@ -16,7 +16,7 @@ export type Context = {
 
 export type DropOptions<
   T extends ItemType = ItemType,
-  E extends HTMLElement = HTMLElement,
+  E extends HTMLElement = HTMLElement
 > = {
   accept: T | T[];
   canDrop?: (item: Item<T>) => boolean;
@@ -29,7 +29,7 @@ export type DropOptions<
 
 export const useDrop = <
   T extends ItemType = ItemType,
-  E extends HTMLElement = HTMLElement,
+  E extends HTMLElement = HTMLElement
 >({
   accept,
   hover,
@@ -37,7 +37,7 @@ export const useDrop = <
   drop,
   shallow,
   disabled,
-  wrapperRef,
+  wrapperRef
 }: DropOptions<T, E>) => {
   const calcContext = useCallback(
     (monitor: DropTargetMonitor) => {
@@ -53,15 +53,15 @@ export const useDrop = <
               x: offset.x - wrapperOffset.left,
               y: offset.y - wrapperOffset.top,
               w: wrapperOffset.width,
-              h: wrapperOffset.height,
+              h: wrapperOffset.height
             }
           : undefined;
       return {
         canDrop: monitor.canDrop(),
-        position,
+        position
       };
     },
-    [wrapperRef],
+    [wrapperRef]
   );
 
   const options = useMemo<
@@ -97,11 +97,11 @@ export const useDrop = <
           isOver,
           canDrop,
           isDroppable: isOver && canDrop,
-          isNotDroppable: isOver && !canDrop,
+          isNotDroppable: isOver && !canDrop
         };
-      },
+      }
     }),
-    [accept, calcContext, canDrop, disabled, drop, hover, shallow],
+    [accept, calcContext, canDrop, disabled, drop, hover, shallow]
   );
 
   const [{ isOver, canDrop: canDrop2, isDroppable, isNotDroppable }, ref] =
diff --git a/web/src/beta/utils/use-dnd/index.tsx b/web/src/beta/utils/use-dnd/index.tsx
index e91339905..84d182137 100644
--- a/web/src/beta/utils/use-dnd/index.tsx
+++ b/web/src/beta/utils/use-dnd/index.tsx
@@ -19,5 +19,5 @@ export const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => (
 
 export const useDraggingItemType = () =>
   useDragLayer((monitor) =>
-    monitor.isDragging() ? (monitor.getItemType() as ItemType) : null,
+    monitor.isDragging() ? (monitor.getItemType() as ItemType) : null
   );
diff --git a/web/src/beta/utils/use-double-click.ts b/web/src/beta/utils/use-double-click.ts
index 636ab85fa..57bb49431 100644
--- a/web/src/beta/utils/use-double-click.ts
+++ b/web/src/beta/utils/use-double-click.ts
@@ -3,7 +3,7 @@ import { useCallback, useRef } from "react";
 const useDoubleClick = (
   onClick: (() => void) | undefined,
   onDoubleClick: (() => void) | undefined,
-  delay = 200,
+  delay = 200
 ): [() => void, () => void] => {
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
diff --git a/web/src/beta/utils/util.ts b/web/src/beta/utils/util.ts
index 990e7a021..e1b0b2e8b 100644
--- a/web/src/beta/utils/util.ts
+++ b/web/src/beta/utils/util.ts
@@ -15,7 +15,7 @@ export const isPresent = <V>(v: V | undefined): v is V =>
 
 export const partitionObject = <T extends object, K extends keyof T>(
   obj: T,
-  keys: K[],
+  keys: K[]
 ): [Pick<T, K>, Omit<T, K>] => {
   const a: any = {};
   const b: any = {};
@@ -31,7 +31,7 @@ export const partitionObject = <T extends object, K extends keyof T>(
 
 export const bindFunc = <F extends (a: A, ...args: any[]) => any, A>(
   f?: F,
-  a?: A,
+  a?: A
 ) =>
   isPresent(f) && isPresent(a)
     ? (...args: Args<F>) => f(a, ...args)
@@ -40,7 +40,7 @@ export const bindFunc = <F extends (a: A, ...args: any[]) => any, A>(
 export const bindFunc2 = <F extends (a: A, b: B, ...args: any[]) => any, A, B>(
   f?: F,
   a?: A,
-  b?: B,
+  b?: B
 ) =>
   isPresent(f) && isPresent(a) && isPresent(b)
     ? (...args: Args2<F>) => f(a, b, ...args)
@@ -50,12 +50,12 @@ export const bindFunc3 = <
   F extends (a: A, b: B, c: C, ...args: any[]) => any,
   A,
   B,
-  C,
+  C
 >(
   f?: F,
   a?: A,
   b?: B,
-  c?: C,
+  c?: C
 ) =>
   isPresent(f) && isPresent(a) && isPresent(b) && isPresent(c)
     ? (...args: Args3<F>) => f(a, b, c, ...args)
diff --git a/web/src/beta/utils/value.ts b/web/src/beta/utils/value.ts
index 50f46e3ca..34761ac86 100644
--- a/web/src/beta/utils/value.ts
+++ b/web/src/beta/utils/value.ts
@@ -135,7 +135,7 @@ const valueTypeMapper: Record<GQLValueType, ValueType> = {
   [GQLValueType.Ref]: "ref",
   [GQLValueType.Spacing]: "spacing",
   [GQLValueType.Array]: "array",
-  [GQLValueType.Timeline]: "timeline",
+  [GQLValueType.Timeline]: "timeline"
 };
 
 export type ValueType = keyof ValueTypes;
@@ -150,7 +150,7 @@ export const valueFromGQL = (val: any, type: GQLValueType) => {
   if (t === "camera" && val && typeof val === "object" && "altitude" in val) {
     newVal = {
       ...val,
-      height: val.altitude,
+      height: val.altitude
     };
   }
   if (
@@ -162,7 +162,7 @@ export const valueFromGQL = (val: any, type: GQLValueType) => {
   ) {
     newVal = {
       ...val,
-      textAlign: val.textAlign.toLowerCase(),
+      textAlign: val.textAlign.toLowerCase()
     };
   }
   return { type: t, value: newVal ?? undefined, ok };
@@ -170,12 +170,12 @@ export const valueFromGQL = (val: any, type: GQLValueType) => {
 
 export function valueToGQL<T extends ValueType>(
   val: ValueTypes[T] | null | undefined,
-  type: T,
+  type: T
 ): any {
   if (type === "camera" && val && typeof val === "object" && "height" in val) {
     return {
       ...(val as any),
-      altitude: (val as any).height,
+      altitude: (val as any).height
     };
   }
   return val ?? null;
@@ -187,12 +187,12 @@ export const valueTypeFromGQL = (t: GQLValueType): ValueType => {
 
 export const valueTypeToGQL = (t: ValueType): GQLValueType | undefined => {
   return (Object.keys(valueTypeMapper) as GQLValueType[]).find(
-    (k) => valueTypeMapper[k] === t,
+    (k) => valueTypeMapper[k] === t
   );
 };
 
 export const toGQLSimpleValue = (
-  v: unknown,
+  v: unknown
 ): string | number | boolean | undefined => {
   return typeof v === "string" ||
     typeof v === "number" ||
@@ -230,7 +230,7 @@ export const toColor = (c?: string) => {
 
   // support alpha
   const m = c.match(
-    /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/,
+    /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/
   );
   if (!m) return Color.fromCssColorString(c);
 
@@ -250,23 +250,23 @@ export const typographyStyles = (t?: Typography) => {
 
 export const zeroValues: { [key in ValueType]?: ValueTypes[ValueType] } = {
   bool: false,
-  string: "",
+  string: ""
 };
 
 export const DEFAULT_LAYER_STYLE: Partial<LayerAppearanceTypes> = {
   "3dtiles": {
-    show: true,
+    show: true
   },
   resource: {
-    clampToGround: true,
+    clampToGround: true
   },
   marker: {
-    heightReference: "clamp",
+    heightReference: "clamp"
   },
   polygon: {
-    heightReference: "clamp",
+    heightReference: "clamp"
   },
   polyline: {
-    clampToGround: true,
-  },
+    clampToGround: true
+  }
 };
diff --git a/web/src/sentry.ts b/web/src/sentry.ts
index 44238435f..cfc2a4d6d 100644
--- a/web/src/sentry.ts
+++ b/web/src/sentry.ts
@@ -5,7 +5,7 @@ export const initialize = () => {
   if (sentryDsn) {
     Sentry.init({
       dsn: sentryDsn,
-      environment: sentryEnv,
+      environment: sentryEnv
     });
   }
 };
diff --git a/web/src/services/api/assetsApi.ts b/web/src/services/api/assetsApi.ts
index c5228f097..247b17647 100644
--- a/web/src/services/api/assetsApi.ts
+++ b/web/src/services/api/assetsApi.ts
@@ -2,12 +2,12 @@ import { useApolloClient, useMutation, useQuery } from "@apollo/client";
 import {
   CreateAssetInput,
   GetAssetsQueryVariables,
-  GetAssetsQuery,
+  GetAssetsQuery
 } from "@reearth/services/gql";
 import {
   CREATE_ASSET,
   GET_ASSETS,
-  REMOVE_ASSET,
+  REMOVE_ASSET
 } from "@reearth/services/gql/queries/asset";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
@@ -27,25 +27,25 @@ export default () => {
       GET_ASSETS,
       {
         variables: input,
-        skip: !input.teamId,
-      },
+        skip: !input.teamId
+      }
     );
 
     const assets = useMemo(
       () => data?.assets.edges?.map((e) => e.node) as AssetNodes,
-      [data?.assets],
+      [data?.assets]
     );
 
     const hasMoreAssets = useMemo(
       () =>
         data?.assets.pageInfo?.hasNextPage ||
         data?.assets.pageInfo?.hasPreviousPage,
-      [data?.assets],
+      [data?.assets]
     );
     const isRefetching = useMemo(() => networkStatus < 7, [networkStatus]);
     const endCursor = useMemo(
       () => data?.assets.pageInfo?.endCursor,
-      [data?.assets],
+      [data?.assets]
     );
 
     return {
@@ -55,12 +55,12 @@ export default () => {
       endCursor,
       loading,
       fetchMore,
-      ...rest,
+      ...rest
     };
   }, []);
 
   const [createAssetMutation] = useMutation(CREATE_ASSET, {
-    refetchQueries: ["GetAssets"],
+    refetchQueries: ["GetAssets"]
   });
 
   const useCreateAssets = useCallback(
@@ -69,19 +69,19 @@ export default () => {
 
       const results = await Promise.all(
         Array.from(file).map((f) =>
-          createAssetMutation({ variables: { teamId, file: f } }),
-        ),
+          createAssetMutation({ variables: { teamId, file: f } })
+        )
       );
 
       if (!results || results.some((r) => r.errors)) {
         setNotification({
           type: "error",
-          text: t("Failed to add one or more assets."),
+          text: t("Failed to add one or more assets.")
         });
       } else {
         setNotification({
           type: "success",
-          text: t("Successfully added one or more assets."),
+          text: t("Successfully added one or more assets.")
         });
       }
 
@@ -89,43 +89,43 @@ export default () => {
 
       return { data: results, result: "success" };
     },
-    [apolloCache, createAssetMutation, t, setNotification],
+    [apolloCache, createAssetMutation, t, setNotification]
   );
 
   const [removeAssetMutation] = useMutation(REMOVE_ASSET, {
-    refetchQueries: ["GetAssets"],
+    refetchQueries: ["GetAssets"]
   });
 
   const useRemoveAssets = useCallback(
     async (assetIds: string[]) => {
       const results = await Promise.all(
         assetIds.map((assetId) =>
-          removeAssetMutation({ variables: { assetId } }),
-        ),
+          removeAssetMutation({ variables: { assetId } })
+        )
       );
 
       if (!results || results.some((r) => r.errors)) {
         setNotification({
           type: "error",
-          text: t("Failed to delete one or more assets."),
+          text: t("Failed to delete one or more assets.")
         });
       } else {
         setNotification({
           type: "success",
-          text: t("One or more assets were successfully deleted."),
+          text: t("One or more assets were successfully deleted.")
         });
       }
 
       return {
-        status: !results || results.some((r) => r.errors) ? "error" : "success",
+        status: !results || results.some((r) => r.errors) ? "error" : "success"
       };
     },
-    [removeAssetMutation, t, setNotification],
+    [removeAssetMutation, t, setNotification]
   );
 
   return {
     useAssetsQuery,
     useCreateAssets,
-    useRemoveAssets,
+    useRemoveAssets
   };
 };
diff --git a/web/src/services/api/featureCollectionApi/index.ts b/web/src/services/api/featureCollectionApi/index.ts
index 85578035b..74a2c155d 100644
--- a/web/src/services/api/featureCollectionApi/index.ts
+++ b/web/src/services/api/featureCollectionApi/index.ts
@@ -6,12 +6,12 @@ import {
   DeleteGeoJsonFeatureInput,
   MutationAddGeoJsonFeatureArgs,
   UpdateGeoJsonFeatureInput,
-  UpdateGeoJsonFeatureMutation,
+  UpdateGeoJsonFeatureMutation
 } from "@reearth/services/gql/__gen__/graphql";
 import {
   ADD_GEOJSON_FEATURE,
   DELETE_GEOJSON_FEATURE,
-  UPDATE_GEOJSON_FEATURE,
+  UPDATE_GEOJSON_FEATURE
 } from "@reearth/services/gql/queries/featureCollection";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
@@ -29,14 +29,14 @@ export default () => {
     AddGeoJsonFeatureMutation,
     MutationAddGeoJsonFeatureArgs
   >(ADD_GEOJSON_FEATURE, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useAddGeoJsonFeature = useCallback(
     async (
-      input: AddGeoJsonFeatureInput,
+      input: AddGeoJsonFeatureInput
     ): Promise<MutationReturn<AddGeoJsonFeatureMutation>> => {
       const { data, errors } = await addGeoJsonFeatureMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.addGeoJSONFeature.id) {
         setNotification({ type: "error", text: t("Failed to add layer.") });
@@ -45,73 +45,73 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfully added a new layer"),
+        text: t("Successfully added a new layer")
       });
       return { data, status: "success" };
     },
-    [addGeoJsonFeatureMutation, setNotification, t],
+    [addGeoJsonFeatureMutation, setNotification, t]
   );
 
   const [updateGeoJsonFeatureMutation] = useMutation(UPDATE_GEOJSON_FEATURE, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useUpdateGeoJSONFeature = useCallback(
     async (
-      input: UpdateGeoJsonFeatureInput,
+      input: UpdateGeoJsonFeatureInput
     ): Promise<MutationReturn<UpdateGeoJsonFeatureMutation>> => {
       if (!input.layerId) return { status: "error" };
       const { data, errors } = await updateGeoJsonFeatureMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.updateGeoJSONFeature) {
         setNotification({
           type: "error",
-          text: t("Failed to update the layer."),
+          text: t("Failed to update the layer.")
         });
 
         return { status: "error", errors };
       }
       setNotification({
         type: "success",
-        text: t("Successfully updated the layer!"),
+        text: t("Successfully updated the layer!")
       });
 
       return { data, status: "success" };
     },
-    [updateGeoJsonFeatureMutation, setNotification, t],
+    [updateGeoJsonFeatureMutation, setNotification, t]
   );
 
   const [deleteGeoJsonFeatureMutation] = useMutation(DELETE_GEOJSON_FEATURE, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useDeleteGeoJSONFeature = useCallback(
     async (input: DeleteGeoJsonFeatureInput) => {
       if (!input.layerId || !input.featureId) return { status: "error" };
       const { data, errors } = await deleteGeoJsonFeatureMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.deleteGeoJSONFeature) {
         setNotification({
           type: "error",
-          text: t("Failed to delete the feature."),
+          text: t("Failed to delete the feature.")
         });
         return { status: "error", errors };
       }
 
       setNotification({
         type: "success",
-        text: t("Successfully deleted the feature!"),
+        text: t("Successfully deleted the feature!")
       });
       return { data, status: "success" };
     },
-    [deleteGeoJsonFeatureMutation, t, setNotification],
+    [deleteGeoJsonFeatureMutation, t, setNotification]
   );
 
   return {
     useAddGeoJsonFeature,
     useUpdateGeoJSONFeature,
-    useDeleteGeoJSONFeature,
+    useDeleteGeoJSONFeature
   };
 };
diff --git a/web/src/services/api/infoboxApi/blocks.ts b/web/src/services/api/infoboxApi/blocks.ts
index 2480971ad..566e5f280 100644
--- a/web/src/services/api/infoboxApi/blocks.ts
+++ b/web/src/services/api/infoboxApi/blocks.ts
@@ -11,12 +11,12 @@ import {
   MutationRemoveNlsInfoboxBlockArgs,
   PluginExtensionType,
   RemoveNlsInfoboxBlockInput,
-  RemoveNlsInfoboxBlockMutation,
+  RemoveNlsInfoboxBlockMutation
 } from "@reearth/services/gql";
 import {
   ADD_NLSINFOBOX_BLOCK,
   MOVE_NLSINFOBOX_BLOCK,
-  REMOVE_NLSINFOBOX_BLOCK,
+  REMOVE_NLSINFOBOX_BLOCK
 } from "@reearth/services/gql/queries/infobox";
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
@@ -60,17 +60,17 @@ export default () => {
     ({ sceneId, lang }: InfoboxBlockQueryProps) => {
       const { data, ...rest } = useQuery(GET_SCENE, {
         variables: { sceneId: sceneId ?? "", lang },
-        skip: !sceneId,
+        skip: !sceneId
       });
 
       const installableInfoboxBlocks = useMemo(
         () => getInstallableInfoboxBlocks(data),
-        [data],
+        [data]
       );
 
       return { installableInfoboxBlocks, ...rest };
     },
-    [],
+    []
   );
 
   const [createInfoboxBlockMutation] = useMutation<
@@ -80,10 +80,10 @@ export default () => {
 
   const useCreateInfoboxBlock = useCallback(
     async (
-      input: AddNlsInfoboxBlockInput,
+      input: AddNlsInfoboxBlockInput
     ): Promise<MutationReturn<AddNlsInfoboxBlockMutation>> => {
       const { data, errors } = await createInfoboxBlockMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.addNLSInfoboxBlock) {
         setNotification({ type: "error", text: t("Failed to create block.") });
@@ -92,12 +92,12 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly created a block!"),
+        text: t("Successfullly created a block!")
       });
 
       return { data, status: "success" };
     },
-    [createInfoboxBlockMutation, setNotification, t],
+    [createInfoboxBlockMutation, setNotification, t]
   );
 
   const [removeInfoboxBlockMutation] = useMutation<
@@ -107,10 +107,10 @@ export default () => {
 
   const useDeleteInfoboxBlock = useCallback(
     async (
-      input: RemoveNlsInfoboxBlockInput,
+      input: RemoveNlsInfoboxBlockInput
     ): Promise<MutationReturn<RemoveNlsInfoboxBlockMutation>> => {
       const { data, errors } = await removeInfoboxBlockMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.removeNLSInfoboxBlock) {
         setNotification({ type: "error", text: t("Failed to delete block.") });
@@ -119,12 +119,12 @@ export default () => {
       }
       setNotification({
         type: "info",
-        text: t("Block was successfully deleted."),
+        text: t("Block was successfully deleted.")
       });
 
       return { data, status: "success" };
     },
-    [removeInfoboxBlockMutation, setNotification, t],
+    [removeInfoboxBlockMutation, setNotification, t]
   );
 
   const [moveInfoboxBlockMutation] = useMutation<
@@ -134,10 +134,10 @@ export default () => {
 
   const useMoveInfoboxBlock = useCallback(
     async (
-      input: MoveNlsInfoboxBlockInput,
+      input: MoveNlsInfoboxBlockInput
     ): Promise<MutationReturn<MoveNlsInfoboxBlockMutation>> => {
       const { data, errors } = await moveInfoboxBlockMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.moveNLSInfoboxBlock) {
         setNotification({ type: "error", text: t("Failed to move block.") });
@@ -146,19 +146,19 @@ export default () => {
       }
       setNotification({
         type: "info",
-        text: t("Block was successfully moved."),
+        text: t("Block was successfully moved.")
       });
 
       return { data, status: "success" };
     },
-    [moveInfoboxBlockMutation, setNotification, t],
+    [moveInfoboxBlockMutation, setNotification, t]
   );
 
   return {
     useInstallableInfoboxBlocksQuery,
     useCreateInfoboxBlock,
     useDeleteInfoboxBlock,
-    useMoveInfoboxBlock,
+    useMoveInfoboxBlock
   };
 };
 
@@ -173,7 +173,7 @@ const getInstallableInfoboxBlocks = (rawScene?: GetSceneQuery) => {
           (e) =>
             e.type === PluginExtensionType.InfoboxBlock &&
             (AVAILABLE_INFOBOX_BLOCK_IDS.includes(`reearth/${e.extensionId}`) ||
-              plugin.id !== "reearth"),
+              plugin.id !== "reearth")
         )
         .map((e): InstallableInfoboxBlock => {
           return {
@@ -183,7 +183,7 @@ const getInstallableInfoboxBlocks = (rawScene?: GetSceneQuery) => {
             extensionId: e.extensionId,
             icon: e.extensionId,
             singleOnly: !!e.singleOnly,
-            type: "InfoboxBlock",
+            type: "InfoboxBlock"
           };
         })
         .filter((sb): sb is InstallableInfoboxBlock => !!sb);
diff --git a/web/src/services/api/infoboxApi/index.tsx b/web/src/services/api/infoboxApi/index.tsx
index eb6fba89d..2b37c3833 100644
--- a/web/src/services/api/infoboxApi/index.tsx
+++ b/web/src/services/api/infoboxApi/index.tsx
@@ -2,7 +2,7 @@ import { useMutation } from "@apollo/client";
 import {
   CreateNlsInfoboxInput,
   CreateNlsInfoboxMutation,
-  MutationCreateNlsInfoboxArgs,
+  MutationCreateNlsInfoboxArgs
 } from "@reearth/services/gql";
 import { CREATE_NLSINFOBOX } from "@reearth/services/gql/queries/infobox";
 import { useT } from "@reearth/services/i18n";
@@ -26,10 +26,10 @@ export default () => {
   >(CREATE_NLSINFOBOX, { refetchQueries: ["GetScene"] });
   const useCreateNLSInfobox = useCallback(
     async (
-      input: CreateNlsInfoboxInput,
+      input: CreateNlsInfoboxInput
     ): Promise<MutationReturn<CreateNlsInfoboxMutation>> => {
       const { data, errors } = await createNLSInfoboxMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.createNLSInfobox?.layer?.id) {
         setNotification({ type: "error", text: t("Failed to add layer.") });
@@ -38,19 +38,19 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfully added a new layer"),
+        text: t("Successfully added a new layer")
       });
 
       return { data, status: "success" };
     },
-    [createNLSInfoboxMutation, setNotification, t],
+    [createNLSInfoboxMutation, setNotification, t]
   );
 
   const {
     useInstallableInfoboxBlocksQuery,
     useCreateInfoboxBlock,
     useDeleteInfoboxBlock,
-    useMoveInfoboxBlock,
+    useMoveInfoboxBlock
   } = useBlocks();
 
   return {
@@ -59,6 +59,6 @@ export default () => {
     useInstallableInfoboxBlocksQuery,
     useCreateInfoboxBlock,
     useDeleteInfoboxBlock,
-    useMoveInfoboxBlock,
+    useMoveInfoboxBlock
   };
 };
diff --git a/web/src/services/api/layerStyleApi/index.ts b/web/src/services/api/layerStyleApi/index.ts
index 6f9380a02..2d4254463 100644
--- a/web/src/services/api/layerStyleApi/index.ts
+++ b/web/src/services/api/layerStyleApi/index.ts
@@ -7,12 +7,12 @@ import {
   UpdateStyleInput,
   UpdateStyleMutation,
   RemoveStyleMutation,
-  RemoveStyleInput,
+  RemoveStyleInput
 } from "@reearth/services/gql/__gen__/graphql";
 import {
   ADD_LAYERSTYLE,
   REMOVE_LAYERSTYLE,
-  UPDATE_LAYERSTYLE,
+  UPDATE_LAYERSTYLE
 } from "@reearth/services/gql/queries/layerStyle";
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
@@ -35,8 +35,8 @@ export default () => {
         GET_SCENE,
         {
           variables: { sceneId: sceneId ?? "", lang },
-          skip: !sceneId,
-        },
+          skip: !sceneId
+        }
       );
 
       const isRefetching = useMemo(() => networkStatus === 3, [networkStatus]);
@@ -44,100 +44,100 @@ export default () => {
 
       return { layerStyles, loading, isRefetching, fetchMore, ...rest };
     },
-    [],
+    []
   );
 
   const [addLayerStyleMutation] = useMutation<
     AddStyleMutation,
     MutationAddStyleArgs
   >(ADD_LAYERSTYLE, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useAddLayerStyle = useCallback(
     async (input: AddStyleInput): Promise<MutationReturn<AddStyleMutation>> => {
       const { data, errors } = await addLayerStyleMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.addStyle?.style?.id) {
         setNotification({
           type: "error",
-          text: t("Failed to add layer style."),
+          text: t("Failed to add layer style.")
         });
 
         return { status: "error", errors };
       }
       setNotification({
         type: "success",
-        text: t("Successfully added a new layer style!"),
+        text: t("Successfully added a new layer style!")
       });
 
       return { data, status: "success" };
     },
-    [addLayerStyleMutation, setNotification, t],
+    [addLayerStyleMutation, setNotification, t]
   );
 
   const [updateLayerStyleMutation] = useMutation(UPDATE_LAYERSTYLE, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useUpdateLayerStyle = useCallback(
     async (
-      input: UpdateStyleInput,
+      input: UpdateStyleInput
     ): Promise<MutationReturn<UpdateStyleMutation>> => {
       if (!input.styleId) return { status: "error" };
       const { data, errors } = await updateLayerStyleMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.updateStyle) {
         setNotification({
           type: "error",
-          text: t("Failed to update the layerStyle."),
+          text: t("Failed to update the layerStyle.")
         });
 
         return { status: "error", errors };
       }
       setNotification({
         type: "success",
-        text: t("Successfully updated a the layerStyle!"),
+        text: t("Successfully updated a the layerStyle!")
       });
 
       return { data, status: "success" };
     },
-    [updateLayerStyleMutation, setNotification, t],
+    [updateLayerStyleMutation, setNotification, t]
   );
 
   const [removeLayerStyleMutation] = useMutation(REMOVE_LAYERSTYLE, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useRemoveLayerStyle = useCallback(
     async (
-      input: RemoveStyleInput,
+      input: RemoveStyleInput
     ): Promise<MutationReturn<RemoveStyleMutation>> => {
       if (!input.styleId) return { status: "error" };
       const { data, errors } = await removeLayerStyleMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.removeStyle) {
         setNotification({
           type: "error",
-          text: t("Failed to delete the layer style."),
+          text: t("Failed to delete the layer style.")
         });
 
         return { status: "error", errors };
       }
       setNotification({
         type: "success",
-        text: t("Successfully deleted the layer style!"),
+        text: t("Successfully deleted the layer style!")
       });
 
       return { data, status: "success" };
     },
-    [removeLayerStyleMutation, setNotification, t],
+    [removeLayerStyleMutation, setNotification, t]
   );
 
   return {
     useGetLayerStylesQuery,
     useAddLayerStyle,
     useUpdateLayerStyle,
-    useRemoveLayerStyle,
+    useRemoveLayerStyle
   };
 };
diff --git a/web/src/services/api/layerStyleApi/utils.ts b/web/src/services/api/layerStyleApi/utils.ts
index d4aac0507..62dda2716 100644
--- a/web/src/services/api/layerStyleApi/utils.ts
+++ b/web/src/services/api/layerStyleApi/utils.ts
@@ -14,7 +14,7 @@ export const getLayerStyles = (rawScene?: GetSceneQuery) => {
     return {
       id: s.id,
       name: s.name,
-      value: s.value,
+      value: s.value
     };
   });
 };
diff --git a/web/src/services/api/layersApi/index.ts b/web/src/services/api/layersApi/index.ts
index 4a8bfe0d4..0020fec0e 100644
--- a/web/src/services/api/layersApi/index.ts
+++ b/web/src/services/api/layersApi/index.ts
@@ -9,13 +9,13 @@ import {
   RemoveNlsLayerMutation,
   RemoveNlsLayerInput,
   UpdateCustomPropertySchemaInput,
-  UpdateCustomPropertiesMutation,
+  UpdateCustomPropertiesMutation
 } from "@reearth/services/gql/__gen__/graphql";
 import {
   ADD_NLSLAYERSIMPLE,
   UPDATE_NLSLAYER,
   REMOVE_NLSLAYER,
-  UPDATE_CUSTOM_PROPERTY_SCHEMA,
+  UPDATE_CUSTOM_PROPERTY_SCHEMA
 } from "@reearth/services/gql/queries/layer";
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
@@ -36,28 +36,28 @@ export default () => {
     ({ sceneId, lang }: LayerQueryProps) => {
       const { data, ...rest } = useQuery(GET_SCENE, {
         variables: { sceneId: sceneId ?? "", lang },
-        skip: !sceneId,
+        skip: !sceneId
       });
 
       const nlsLayers = useMemo(() => getLayers(data), [data]);
 
       return { nlsLayers, ...rest };
     },
-    [],
+    []
   );
 
   const [addNLSLayerSimpleMutation] = useMutation<
     AddNlsLayerSimpleMutation,
     MutationAddNlsLayerSimpleArgs
   >(ADD_NLSLAYERSIMPLE, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useAddNLSLayerSimple = useCallback(
     async (
-      input: AddNlsLayerSimpleInput,
+      input: AddNlsLayerSimpleInput
     ): Promise<MutationReturn<AddNlsLayerSimpleMutation>> => {
       const { data, errors } = await addNLSLayerSimpleMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.addNLSLayerSimple?.layers?.id) {
         setNotification({ type: "error", text: t("Failed to add layer.") });
@@ -66,102 +66,102 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfully added a new layer"),
+        text: t("Successfully added a new layer")
       });
 
       return { data, status: "success" };
     },
-    [addNLSLayerSimpleMutation, setNotification, t],
+    [addNLSLayerSimpleMutation, setNotification, t]
   );
 
   const [updateNLSLayerMutation] = useMutation(UPDATE_NLSLAYER, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useUpdateNLSLayer = useCallback(
     async (
-      input: UpdateNlsLayerInput,
+      input: UpdateNlsLayerInput
     ): Promise<MutationReturn<UpdateNlsLayerMutation>> => {
       if (!input.layerId) return { status: "error" };
       const { data, errors } = await updateNLSLayerMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.updateNLSLayer) {
         setNotification({
           type: "error",
-          text: t("Failed to update the layer."),
+          text: t("Failed to update the layer.")
         });
 
         return { status: "error", errors };
       }
       setNotification({
         type: "success",
-        text: t("Successfully updated the layer!"),
+        text: t("Successfully updated the layer!")
       });
 
       return { data, status: "success" };
     },
-    [updateNLSLayerMutation, t, setNotification],
+    [updateNLSLayerMutation, t, setNotification]
   );
 
   const [removeNLSLayerMutation] = useMutation(REMOVE_NLSLAYER, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useRemoveNLSLayer = useCallback(
     async (
-      input: RemoveNlsLayerInput,
+      input: RemoveNlsLayerInput
     ): Promise<MutationReturn<RemoveNlsLayerMutation>> => {
       if (!input.layerId) return { status: "error" };
       const { data, errors } = await removeNLSLayerMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.removeNLSLayer) {
         setNotification({
           type: "error",
-          text: t("Failed to remove the layer."),
+          text: t("Failed to remove the layer.")
         });
 
         return { status: "error", errors };
       }
       setNotification({
         type: "success",
-        text: t("Successfully removed the layer!"),
+        text: t("Successfully removed the layer!")
       });
 
       return { data, status: "success" };
     },
-    [removeNLSLayerMutation, t, setNotification],
+    [removeNLSLayerMutation, t, setNotification]
   );
 
   const [updateCustomPropertiesMutation] = useMutation(
     UPDATE_CUSTOM_PROPERTY_SCHEMA,
     {
-      refetchQueries: ["GetScene"],
-    },
+      refetchQueries: ["GetScene"]
+    }
   );
   const useUpdateCustomProperties = useCallback(
     async (
-      input: UpdateCustomPropertySchemaInput,
+      input: UpdateCustomPropertySchemaInput
     ): Promise<MutationReturn<UpdateCustomPropertiesMutation>> => {
       if (!input.layerId) return { status: "error" };
       const { data, errors } = await updateCustomPropertiesMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.updateCustomProperties) {
         setNotification({
           type: "error",
-          text: t("Failed to update the custom property schema."),
+          text: t("Failed to update the custom property schema.")
         });
 
         return { status: "error", errors };
       }
       setNotification({
         type: "success",
-        text: t("Successfully updated the custom property schema!"),
+        text: t("Successfully updated the custom property schema!")
       });
 
       return { data, status: "success" };
     },
-    [updateCustomPropertiesMutation, setNotification, t],
+    [updateCustomPropertiesMutation, setNotification, t]
   );
 
   return {
@@ -169,6 +169,6 @@ export default () => {
     useAddNLSLayerSimple,
     useUpdateNLSLayer,
     useRemoveNLSLayer,
-    useUpdateCustomProperties,
+    useUpdateCustomProperties
   };
 };
diff --git a/web/src/services/api/layersApi/utils.ts b/web/src/services/api/layersApi/utils.ts
index 1c66ffec0..35dbec847 100644
--- a/web/src/services/api/layersApi/utils.ts
+++ b/web/src/services/api/layersApi/utils.ts
@@ -64,18 +64,18 @@ const convertGeometry = (geometry: Geometry) => {
   return geometry["__typename"] === "GeometryCollection"
     ? geometry.geometries.map((g) => ({
         type: g.type,
-        coordinates: getGeometryCoordinates(g),
+        coordinates: getGeometryCoordinates(g)
       }))
     : [
         {
           type: geometry.type,
-          coordinates: getGeometryCoordinates(geometry),
-        },
+          coordinates: getGeometryCoordinates(geometry)
+        }
       ];
 };
 
 export const convertSketchFeatureCollection = (
-  featureCollection: SketchInfo["featureCollection"],
+  featureCollection: SketchInfo["featureCollection"]
 ) => {
   return featureCollection
     ? {
@@ -84,8 +84,8 @@ export const convertSketchFeatureCollection = (
           id: f.id,
           type: f.type,
           properties: f.properties,
-          geometry: convertGeometry(f.geometry),
-        })),
+          geometry: convertGeometry(f.geometry)
+        }))
       }
     : undefined;
 };
@@ -106,8 +106,8 @@ export const getLayers = (rawScene?: GetSceneQuery) => {
         ? {
             customPropertySchema: l.sketch.customPropertySchema,
             featureCollection: convertSketchFeatureCollection(
-              l.sketch.featureCollection as SketchInfo["featureCollection"],
-            ),
+              l.sketch.featureCollection as SketchInfo["featureCollection"]
+            )
           }
         : undefined,
       infobox: l.infobox
@@ -116,9 +116,9 @@ export const getLayers = (rawScene?: GetSceneQuery) => {
             layerId: l.infobox.layerId,
             propertyId: l.infobox.propertyId,
             property: l.infobox.property,
-            blocks: l.infobox.blocks,
+            blocks: l.infobox.blocks
           }
-        : undefined,
+        : undefined
     };
   });
 };
diff --git a/web/src/services/api/meApi.ts b/web/src/services/api/meApi.ts
index a5ce97742..294a70346 100644
--- a/web/src/services/api/meApi.ts
+++ b/web/src/services/api/meApi.ts
@@ -1,18 +1,18 @@
 import { useQuery } from "@apollo/client";
+import { GET_ME } from "@reearth/services/gql/queries/user";
 import { useCallback } from "react";
 
-import { GET_ME } from "@reearth/services/gql/queries/user";
 
 export default () => {
   const useMeQuery = useCallback((options?: { skip?: boolean }) => {
     const { data, ...rest } = useQuery(GET_ME, { ...options });
     return {
       me: { ...data?.me },
-      ...rest,
+      ...rest
     };
   }, []);
 
   return {
-    useMeQuery,
+    useMeQuery
   };
 };
diff --git a/web/src/services/api/pluginsApi.ts b/web/src/services/api/pluginsApi.ts
index d718f7ab5..872a90fe1 100644
--- a/web/src/services/api/pluginsApi.ts
+++ b/web/src/services/api/pluginsApi.ts
@@ -3,7 +3,7 @@ import {
   INSTALL_PLUGIN,
   UPGRADE_PLUGIN,
   UPLOAD_PLUGIN,
-  UNINSTALL_PLUGIN,
+  UNINSTALL_PLUGIN
 } from "@reearth/services/gql/queries/plugin";
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT, useLang } from "@reearth/services/i18n";
@@ -17,7 +17,7 @@ export enum PluginExtensionType {
   Infobox = "INFOBOX",
   Primitive = "PRIMITIVE",
   Visualizer = "VISUALIZER",
-  Widget = "WIDGET",
+  Widget = "WIDGET"
 }
 
 export type Extension = {
@@ -54,7 +54,7 @@ export default () => {
     (sceneId?: string) => {
       const { data, ...rest } = useQuery(GET_SCENE, {
         variables: { sceneId: sceneId ?? "", lang },
-        skip: !sceneId,
+        skip: !sceneId
       });
 
       const plugins: Plugin[] | undefined = useMemo(
@@ -70,33 +70,33 @@ export default () => {
                     extensions: p.plugin.extensions.map((e) => {
                       return {
                         pluginId: p.plugin?.id,
-                        ...e,
+                        ...e
                       };
                     }),
                     property: p.property
                       ? {
                           id: p.property.id,
                           items: p.property.items,
-                          schema: p.property.schema,
+                          schema: p.property.schema
                         }
-                      : {},
+                      : {}
                   };
                 })
                 .filter((p) => !!p) as Plugin[])
             : undefined,
-        [data?.node],
+        [data?.node]
       );
 
       return { plugins, ...rest };
     },
-    [lang],
+    [lang]
   );
 
   const [installPluginMutation] = useMutation(INSTALL_PLUGIN, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const [upgradePluginMutation] = useMutation(UPGRADE_PLUGIN, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useInstallPlugin = useCallback(
@@ -104,22 +104,22 @@ export default () => {
       if (!sceneId || !pluginId) return;
 
       const { errors } = await installPluginMutation({
-        variables: { sceneId, pluginId },
+        variables: { sceneId, pluginId }
       });
 
       if (errors) {
         setNotification({
           type: "error",
-          text: t("Failed to install plugin."),
+          text: t("Failed to install plugin.")
         });
       } else {
         setNotification({
           type: "success",
-          text: t("Successfully installed plugin!"),
+          text: t("Successfully installed plugin!")
         });
       }
     },
-    [installPluginMutation, t, setNotification],
+    [installPluginMutation, t, setNotification]
   );
 
   const useUpgradePlugin = useCallback(
@@ -130,27 +130,27 @@ export default () => {
         variables: {
           sceneId,
           pluginId: oldPluginId,
-          toPluginId: pluginId,
-        },
+          toPluginId: pluginId
+        }
       });
 
       if (errors) {
         setNotification({
           type: "error",
-          text: t("Failed to upgrade plugin."),
+          text: t("Failed to upgrade plugin.")
         });
       } else {
         setNotification({
           type: "success",
-          text: t("Successfully upgraded plugin!"),
+          text: t("Successfully upgraded plugin!")
         });
       }
     },
-    [upgradePluginMutation, t, setNotification],
+    [upgradePluginMutation, t, setNotification]
   );
 
   const [uploadPluginMutation] = useMutation(UPLOAD_PLUGIN, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useUploadPlugin = useCallback(
@@ -161,29 +161,29 @@ export default () => {
         files
           ? Array.from(files).map((f) =>
               uploadPluginMutation({
-                variables: { sceneId: sceneId, file: f },
-              }),
+                variables: { sceneId: sceneId, file: f }
+              })
             )
           : Array.from([url]).map((u) =>
               uploadPluginMutation({
-                variables: { sceneId: sceneId, url: u },
-              }),
-            ),
+                variables: { sceneId: sceneId, url: u }
+              })
+            )
       );
 
       if (!results || results.some((r) => r.errors)) {
         setNotification({
           type: "error",
-          text: t("Failed to install plugin."),
+          text: t("Failed to install plugin.")
         });
       } else {
         setNotification({
           type: "success",
-          text: t("Successfully installed plugin!"),
+          text: t("Successfully installed plugin!")
         });
       }
     },
-    [uploadPluginMutation, t, setNotification],
+    [uploadPluginMutation, t, setNotification]
   );
 
   const useUploadPluginWithFile = useCallback(
@@ -191,26 +191,26 @@ export default () => {
       if (!sceneId || !file) return;
 
       const { errors } = await uploadPluginMutation({
-        variables: { sceneId: sceneId, file },
+        variables: { sceneId: sceneId, file }
       });
 
       if (errors) {
         setNotification({
           type: "error",
-          text: t("Failed to install plugin."),
+          text: t("Failed to install plugin.")
         });
       } else {
         setNotification({
           type: "success",
-          text: t("Successfully installed plugin!"),
+          text: t("Successfully installed plugin!")
         });
       }
     },
-    [uploadPluginMutation, t, setNotification],
+    [uploadPluginMutation, t, setNotification]
   );
 
   const [uninstallPluginMutation] = useMutation(UNINSTALL_PLUGIN, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useUninstallPlugin = useCallback(
@@ -218,22 +218,22 @@ export default () => {
       if (!sceneId || !pluginId) return;
 
       const results = await uninstallPluginMutation({
-        variables: { sceneId: sceneId, pluginId: pluginId },
+        variables: { sceneId: sceneId, pluginId: pluginId }
       });
 
       if (results.errors || !results.data?.uninstallPlugin) {
         setNotification({
           type: "error",
-          text: t("Failed to uninstall plugin."),
+          text: t("Failed to uninstall plugin.")
         });
       } else {
         setNotification({
           type: "info",
-          text: t("Successfully uninstalled plugin."),
+          text: t("Successfully uninstalled plugin.")
         });
       }
     },
-    [uninstallPluginMutation, t, setNotification],
+    [uninstallPluginMutation, t, setNotification]
   );
 
   return {
@@ -242,6 +242,6 @@ export default () => {
     useUpgradePlugin,
     useUploadPlugin,
     useUploadPluginWithFile,
-    useUninstallPlugin,
+    useUninstallPlugin
   };
 };
diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
index 3a4dc5cad..edc392bf2 100644
--- a/web/src/services/api/projectApi.ts
+++ b/web/src/services/api/projectApi.ts
@@ -8,7 +8,7 @@ import {
   DeleteProjectInput,
   ArchiveProjectMutationVariables,
   UpdateProjectBasicAuthMutationVariables,
-  UpdateProjectAliasMutationVariables,
+  UpdateProjectAliasMutationVariables
 } from "@reearth/services/gql/__gen__/graphql";
 import {
   ARCHIVE_PROJECT,
@@ -21,7 +21,7 @@ import {
   PUBLISH_PROJECT,
   UPDATE_PROJECT,
   UPDATE_PROJECT_ALIAS,
-  UPDATE_PROJECT_BASIC_AUTH,
+  UPDATE_PROJECT_BASIC_AUTH
 } from "@reearth/services/gql/queries/project";
 import { CREATE_SCENE } from "@reearth/services/gql/queries/scene";
 import { useT } from "@reearth/services/i18n";
@@ -43,7 +43,7 @@ export default () => {
   const useProjectQuery = useCallback((projectId?: string) => {
     const { data, ...rest } = useQuery(GET_PROJECT, {
       variables: { projectId: projectId ?? "" },
-      skip: !projectId,
+      skip: !projectId
     });
 
     const project = useMemo(
@@ -58,7 +58,7 @@ export default () => {
     const { data, networkStatus, ...rest } = useQuery(GET_PROJECTS, {
       variables: input,
       skip: !input.teamId,
-      notifyOnNetworkStatusChange: true,
+      notifyOnNetworkStatusChange: true
     });
 
     const projects = useMemo(
@@ -72,7 +72,7 @@ export default () => {
         data?.projects.pageInfo?.hasPreviousPage,
       [
         data?.projects.pageInfo?.hasNextPage,
-        data?.projects.pageInfo?.hasPreviousPage,
+        data?.projects.pageInfo?.hasPreviousPage
       ]
     );
     const isRefetching = useMemo(() => networkStatus < 7, [networkStatus]);
@@ -87,7 +87,7 @@ export default () => {
   const useStarredProjectsQuery = useCallback((teamId?: string) => {
     const { data, ...rest } = useQuery(GET_STARRED_PROJECTS, {
       variables: { teamId: teamId ?? "" },
-      skip: !teamId,
+      skip: !teamId
     });
 
     const starredProjects = useMemo(
@@ -104,7 +104,7 @@ export default () => {
 
   const [createNewProject] = useMutation(CREATE_PROJECT);
   const [createScene] = useMutation(CREATE_SCENE, {
-    refetchQueries: ["GetProjects"],
+    refetchQueries: ["GetProjects"]
   });
   const { useCreateStory, useCreateStoryPage } = useStorytellingFetcher();
 
@@ -125,25 +125,25 @@ export default () => {
             name,
             description: description ?? "",
             imageUrl: imageUrl ?? "",
-            coreSupport: !!coreSupport,
-          },
+            coreSupport: !!coreSupport
+          }
         });
       if (projectErrors || !projectResults?.createProject) {
         setNotification({
           type: "error",
-          text: t("Failed to create project."),
+          text: t("Failed to create project.")
         });
 
         return { status: "error" };
       }
 
       const { data: sceneResults, errors: sceneErrors } = await createScene({
-        variables: { projectId: projectResults?.createProject.project.id },
+        variables: { projectId: projectResults?.createProject.project.id }
       });
       if (sceneErrors || !sceneResults?.createScene) {
         setNotification({
           type: "error",
-          text: t("Failed to create project."),
+          text: t("Failed to create project.")
         });
         return { status: "error" };
       }
@@ -151,23 +151,23 @@ export default () => {
       const { data: storyResult, errors: storyErrors } = await useCreateStory({
         sceneId: sceneResults.createScene.scene.id,
         title: t("Default"),
-        index: 0,
+        index: 0
       });
       if (storyErrors || !storyResult?.createStory) {
         setNotification({
           type: "error",
-          text: t("Failed to create project."),
+          text: t("Failed to create project.")
         });
         return { status: "error" };
       } else if (storyResult?.createStory?.story.id) {
         const { errors: storyPageErrors } = await useCreateStoryPage({
           sceneId: sceneResults.createScene.scene.id,
-          storyId: storyResult?.createStory?.story.id,
+          storyId: storyResult?.createStory?.story.id
         });
         if (storyPageErrors) {
           setNotification({
             type: "error",
-            text: t("Failed to create story page on project creation."),
+            text: t("Failed to create story page on project creation.")
           });
 
           return { status: "error" };
@@ -176,7 +176,7 @@ export default () => {
 
       setNotification({
         type: "success",
-        text: t("Successfully created project!"),
+        text: t("Successfully created project!")
       });
       return { data: projectResults.createProject.project, status: "success" };
     },
@@ -186,13 +186,13 @@ export default () => {
       useCreateStory,
       t,
       setNotification,
-      useCreateStoryPage,
+      useCreateStoryPage
     ]
   );
 
   const [publishProjectMutation, { loading: publishProjectLoading }] =
     useMutation(PUBLISH_PROJECT, {
-      refetchQueries: ["GetProject"],
+      refetchQueries: ["GetProject"]
     });
 
   const usePublishProject = useCallback(
@@ -202,14 +202,14 @@ export default () => {
       const gqlStatus = toGqlStatus(s);
 
       const { data, errors } = await publishProjectMutation({
-        variables: { projectId, alias, status: gqlStatus },
+        variables: { projectId, alias, status: gqlStatus }
       });
 
       if (errors || !data?.publishProject) {
         console.log("GraphQL: Failed to publish project", errors);
         setNotification({
           type: "error",
-          text: t("Failed to publish project."),
+          text: t("Failed to publish project.")
         });
 
         return { status: "error" };
@@ -227,7 +227,7 @@ export default () => {
                 )
               : t(
                   "Successfully unpublished your scene. Now nobody can access your scene."
-                ),
+                )
       });
       return { data: data.publishProject.project, status: "success" };
     },
@@ -235,21 +235,21 @@ export default () => {
   );
 
   const [updateProjectMutation] = useMutation(UPDATE_PROJECT, {
-    refetchQueries: ["GetProject", "GetStarredProjects"],
+    refetchQueries: ["GetProject", "GetStarredProjects"]
   });
   const useUpdateProject = useCallback(
     async (input: UpdateProjectInput) => {
       if (!input.projectId) return { status: "error" };
 
       const { data, errors } = await updateProjectMutation({
-        variables: { ...input },
+        variables: { ...input }
       });
 
       if (errors || !data?.updateProject) {
         console.log("GraphQL: Failed to update project", errors);
         setNotification({
           type: "error",
-          text: t("Failed to update project."),
+          text: t("Failed to update project.")
         });
 
         return { status: "error" };
@@ -257,7 +257,7 @@ export default () => {
 
       setNotification({
         type: "success",
-        text: t("Successfully updated project!"),
+        text: t("Successfully updated project!")
       });
       return { data: data?.updateProject?.project, status: "success" };
     },
@@ -265,13 +265,13 @@ export default () => {
   );
 
   const [archiveProjectMutation] = useMutation(ARCHIVE_PROJECT, {
-    refetchQueries: ["GetProject"],
+    refetchQueries: ["GetProject"]
   });
   const useArchiveProject = useCallback(
     async (input: ArchiveProjectMutationVariables) => {
       if (!input.projectId) return { status: "error" };
       const { data, errors } = await archiveProjectMutation({
-        variables: { ...input },
+        variables: { ...input }
       });
 
       if (errors || !data?.updateProject) {
@@ -280,7 +280,7 @@ export default () => {
           type: "error",
           text: input.archived
             ? t("Failed to archive project.")
-            : t("Failed to unarchive project."),
+            : t("Failed to unarchive project.")
         });
 
         return { status: "error" };
@@ -292,7 +292,7 @@ export default () => {
           ? t("Successfully archive project!")
           : t(
               "Successfully unarchived the project. You can now edit this project."
-            ),
+            )
       });
       return { status: "success" };
     },
@@ -300,20 +300,20 @@ export default () => {
   );
 
   const [deleteProjectMutation] = useMutation(DELETE_PROJECT, {
-    refetchQueries: ["GetProject"],
+    refetchQueries: ["GetProject"]
   });
   const useDeleteProject = useCallback(
     async (input: DeleteProjectInput) => {
       if (!input.projectId) return { status: "error" };
       const { data, errors } = await deleteProjectMutation({
-        variables: { ...input },
+        variables: { ...input }
       });
 
       if (errors || !data?.deleteProject) {
         console.log("GraphQL: Failed to delete project", errors);
         setNotification({
           type: "error",
-          text: t("Failed to delete project."),
+          text: t("Failed to delete project.")
         });
 
         return { status: "error" };
@@ -321,7 +321,7 @@ export default () => {
 
       setNotification({
         type: "success",
-        text: t("Successfully delete project!"),
+        text: t("Successfully delete project!")
       });
       return { status: "success" };
     },
@@ -331,21 +331,21 @@ export default () => {
   const [updateProjectBasicAuthMutation] = useMutation(
     UPDATE_PROJECT_BASIC_AUTH,
     {
-      refetchQueries: ["GetProject"],
+      refetchQueries: ["GetProject"]
     }
   );
   const useUpdateProjectBasicAuth = useCallback(
     async (input: UpdateProjectBasicAuthMutationVariables) => {
       if (!input.projectId) return { status: "error" };
       const { data, errors } = await updateProjectBasicAuthMutation({
-        variables: { ...input },
+        variables: { ...input }
       });
 
       if (errors || !data?.updateProject) {
         console.log("GraphQL: Failed to update project", errors);
         setNotification({
           type: "error",
-          text: t("Failed to update project."),
+          text: t("Failed to update project.")
         });
 
         return { status: "error" };
@@ -353,7 +353,7 @@ export default () => {
 
       setNotification({
         type: "success",
-        text: t("Successfully updated project!"),
+        text: t("Successfully updated project!")
       });
       return { data: data?.updateProject?.project, status: "success" };
     },
@@ -365,14 +365,14 @@ export default () => {
     async (input: UpdateProjectAliasMutationVariables) => {
       if (!input.projectId) return { status: "error" };
       const { data, errors } = await updateProjectAliasMutation({
-        variables: { ...input },
+        variables: { ...input }
       });
 
       if (errors || !data?.updateProject) {
         console.log("GraphQL: Failed to update project", errors);
         setNotification({
           type: "error",
-          text: t("Failed to update project."),
+          text: t("Failed to update project.")
         });
 
         return { status: "error" };
@@ -380,7 +380,7 @@ export default () => {
 
       setNotification({
         type: "success",
-        text: t("Successfully updated project!"),
+        text: t("Successfully updated project!")
       });
       return { data: data?.updateProject?.project, status: "success" };
     },
@@ -399,6 +399,6 @@ export default () => {
     useDeleteProject,
     useUpdateProjectBasicAuth,
     useUpdateProjectAlias,
-    useStarredProjectsQuery,
+    useStarredProjectsQuery
   };
 };
diff --git a/web/src/services/api/propertyApi/index.ts b/web/src/services/api/propertyApi/index.ts
index 79d1ce97d..1c5f68f4a 100644
--- a/web/src/services/api/propertyApi/index.ts
+++ b/web/src/services/api/propertyApi/index.ts
@@ -3,14 +3,14 @@ import {
   ValueType,
   ValueTypes,
   valueToGQL,
-  valueTypeToGQL,
+  valueTypeToGQL
 } from "@reearth/beta/utils/value";
 import { PropertyItemPayload } from "@reearth/services/gql";
 import {
   UPDATE_PROPERTY_VALUE,
   ADD_PROPERTY_ITEM,
   REMOVE_PROPERTY_ITEM,
-  MOVE_PROPERTY_ITEM,
+  MOVE_PROPERTY_ITEM
 } from "@reearth/services/gql/queries/property";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
@@ -37,7 +37,7 @@ export default () => {
       fieldId: string,
       lang: string,
       v: ValueTypes[ValueType] | undefined,
-      vt: ValueType,
+      vt: ValueType
     ) => {
       const gvt = valueTypeToGQL(vt);
       if (!gvt) return;
@@ -50,52 +50,52 @@ export default () => {
           fieldId,
           value,
           type: gvt,
-          lang: lang,
+          lang: lang
         },
-        refetchQueries: ["GetScene"],
+        refetchQueries: ["GetScene"]
       });
 
       if (errors || !data?.updatePropertyValue) {
         console.log("GraphQL: Failed to update property", errors);
         setNotification({
           type: "error",
-          text: t("Failed to update property."),
+          text: t("Failed to update property.")
         });
 
         return { status: "error" };
       }
       setNotification({
         type: "success",
-        text: t("Successfully updated the property value!"),
+        text: t("Successfully updated the property value!")
       });
       return {
         data: data.updatePropertyValue.property,
-        status: "success",
+        status: "success"
       };
     },
-    [updatePropertyValue, setNotification, t],
+    [updatePropertyValue, setNotification, t]
   );
 
   const useAddPropertyItem = useCallback(
     async (
       propertyId: string,
-      schemaGroupId: string,
+      schemaGroupId: string
     ): Promise<
       MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>
     > => {
       const { data, errors } = await addPropertyItem({
         variables: {
           propertyId,
-          schemaGroupId,
+          schemaGroupId
         },
-        refetchQueries: ["GetScene"],
+        refetchQueries: ["GetScene"]
       });
 
       if (errors || !data?.addPropertyItem?.property?.id) {
         console.log("GraphQL: Failed to update property", errors);
         setNotification({
           type: "error",
-          text: t("Failed to update property."),
+          text: t("Failed to update property.")
         });
 
         return { data: undefined, status: "error" };
@@ -103,17 +103,17 @@ export default () => {
 
       return {
         data: data.addPropertyItem.property.id,
-        status: "success",
+        status: "success"
       };
     },
-    [addPropertyItem, setNotification, t],
+    [addPropertyItem, setNotification, t]
   );
 
   const useRemovePropertyItem = useCallback(
     async (
       propertyId: string,
       schemaGroupId: string,
-      itemId: string,
+      itemId: string
     ): Promise<
       MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>
     > => {
@@ -121,16 +121,16 @@ export default () => {
         variables: {
           propertyId,
           schemaGroupId,
-          itemId,
+          itemId
         },
-        refetchQueries: ["GetScene"],
+        refetchQueries: ["GetScene"]
       });
 
       if (errors || !data?.removePropertyItem?.property?.id) {
         console.log("GraphQL: Failed to update property", errors);
         setNotification({
           type: "error",
-          text: t("Failed to update property."),
+          text: t("Failed to update property.")
         });
 
         return { data: undefined, status: "error" };
@@ -138,10 +138,10 @@ export default () => {
 
       return {
         data: data.removePropertyItem.property.id,
-        status: "success",
+        status: "success"
       };
     },
-    [removePropertyItem, setNotification, t],
+    [removePropertyItem, setNotification, t]
   );
 
   const useMovePropertyItem = useCallback(
@@ -149,7 +149,7 @@ export default () => {
       propertyId: string,
       schemaGroupId: string,
       itemId: string,
-      index: number,
+      index: number
     ): Promise<
       MutationReturn<Partial<PropertyItemPayload["property"]["id"]>>
     > => {
@@ -158,16 +158,16 @@ export default () => {
           propertyId,
           schemaGroupId,
           itemId,
-          index,
+          index
         },
-        refetchQueries: ["GetScene"],
+        refetchQueries: ["GetScene"]
       });
 
       if (errors || !data?.movePropertyItem?.property?.id) {
         console.log("GraphQL: Failed to update property", errors);
         setNotification({
           type: "error",
-          text: t("Failed to update property."),
+          text: t("Failed to update property.")
         });
 
         return { data: undefined, status: "error" };
@@ -175,15 +175,15 @@ export default () => {
 
       return {
         data: data.movePropertyItem.property.id,
-        status: "success",
+        status: "success"
       };
     },
-    [movePropertyItem, setNotification, t],
+    [movePropertyItem, setNotification, t]
   );
   return {
     useUpdatePropertyValue,
     useAddPropertyItem,
     useRemovePropertyItem,
-    useMovePropertyItem,
+    useMovePropertyItem
   };
 };
diff --git a/web/src/services/api/propertyApi/utils.ts b/web/src/services/api/propertyApi/utils.ts
index 7ede62e44..8acb9a756 100644
--- a/web/src/services/api/propertyApi/utils.ts
+++ b/web/src/services/api/propertyApi/utils.ts
@@ -2,7 +2,7 @@ import {
   ValueType,
   ValueTypes,
   valueFromGQL,
-  valueTypeFromGQL,
+  valueTypeFromGQL
 } from "@reearth/beta/utils/value";
 
 import {
@@ -18,7 +18,7 @@ import {
   PropertySchemaField,
   PropertySchemaFieldUi,
   PropertySchemaGroupFragmentFragment,
-  ValueType as GQLValueType,
+  ValueType as GQLValueType
 } from "../../gql";
 
 export type Field<T extends ValueType = ValueType> = {
@@ -124,19 +124,19 @@ const linkableType: ValueType[] = ["bool", "string", "number", "latlng", "url"];
 
 export const convert = (
   property: PropertyFragmentFragment | null | undefined,
-  merged?: MergedPropertyFragmentFragment | null,
+  merged?: MergedPropertyFragmentFragment | null
 ) => {
   if (!property?.schema) return;
   const {
     items,
-    schema: { groups: schemaGroups },
+    schema: { groups: schemaGroups }
   } = property;
 
   return schemaGroups
     .map((g) => {
       const item = items.find((i) => i.schemaGroupId === g.schemaGroupId);
       const mergedGroup = merged?.groups.find(
-        (i) => i.schemaGroupId === g.schemaGroupId,
+        (i) => i.schemaGroupId === g.schemaGroupId
       );
       return toItem(g, item, mergedGroup);
     })
@@ -148,7 +148,7 @@ const toItem = (
   item?: PropertyItemFragmentFragment,
   merged?:
     | MergedPropertyGroupFragmentFragment
-    | MergedPropertyGroupCommonFragmentFragment,
+    | MergedPropertyGroupCommonFragmentFragment
 ): Item | undefined => {
   const common: Pick<
     Item,
@@ -180,15 +180,15 @@ const toItem = (
           only: toCond(f.isAvailableIf),
           choices: f.choices?.map((c) => ({
             key: c.key,
-            label: c.translatedTitle,
+            label: c.translatedTitle
           })),
           ui: toUi(f.ui),
           min: f.min ?? undefined,
           max: f.max ?? undefined,
-          isLinkable: linkableType.includes(t),
+          isLinkable: linkableType.includes(t)
         };
       })
-      .filter((f): f is SchemaField => !!f),
+      .filter((f): f is SchemaField => !!f)
   };
 
   if (schemaGroup.isList) {
@@ -198,19 +198,19 @@ const toItem = (
           merged && "groups" in merged ? merged.groups[i] : undefined;
         return {
           id: item2.id,
-          fields: toFields(schemaGroup, item2, mergedGroup),
+          fields: toFields(schemaGroup, item2, mergedGroup)
         };
-      },
+      }
     );
     return {
       ...common,
-      items,
+      items
     };
   }
 
   return {
     ...common,
-    fields: toFields(schemaGroup, item, merged),
+    fields: toFields(schemaGroup, item, merged)
   };
 };
 
@@ -219,7 +219,7 @@ const toFields = (
   item?: PropertyItemFragmentFragment,
   merged?:
     | MergedPropertyGroupFragmentFragment
-    | MergedPropertyGroupCommonFragmentFragment,
+    | MergedPropertyGroupCommonFragmentFragment
 ) =>
   schemaGroup.fields
     .map(
@@ -229,8 +229,8 @@ const toFields = (
           item && "fields" in item
             ? item.fields.find((f2) => f2.fieldId === f.fieldId)
             : undefined,
-          merged?.fields.find((f2) => f2.fieldId === f.fieldId),
-        ] as const,
+          merged?.fields.find((f2) => f2.fieldId === f.fieldId)
+        ] as const
     )
     .map((f) => toField(f[0], f[1], f[2]))
     .filter((f): f is Field => !!f);
@@ -245,7 +245,7 @@ const toField = (
     "fieldId" | "actualValue" | "overridden"
   > & {
     links?: Links;
-  },
+  }
 ): Field | undefined => {
   if (
     (!field && !merged) ||
@@ -275,14 +275,14 @@ const toField = (
             field: links[0].datasetSchemaFieldId,
             schemaName: links[0].datasetSchema?.name ?? undefined,
             datasetName: links[0].dataset?.name ?? undefined,
-            fieldName: links[0].datasetSchemaField?.name ?? undefined,
+            fieldName: links[0].datasetSchemaField?.name ?? undefined
           }
-        : undefined,
+        : undefined
   };
 };
 
 export const toUi = (
-  ui: PropertySchemaFieldUi | null | undefined,
+  ui: PropertySchemaFieldUi | null | undefined
 ): SchemaField["ui"] => {
   switch (ui) {
     case PropertySchemaFieldUi.Color:
@@ -324,6 +324,6 @@ const toCond = (cond: PropertyCondition | null | undefined) => {
   }
   return {
     field: cond.fieldId,
-    value: cond.value,
+    value: cond.value
   };
 };
diff --git a/web/src/services/api/sceneApi.ts b/web/src/services/api/sceneApi.ts
index 0dc9fdf99..dc7853026 100644
--- a/web/src/services/api/sceneApi.ts
+++ b/web/src/services/api/sceneApi.ts
@@ -56,7 +56,7 @@ export default () => {
   const useSceneQuery = useCallback(({ sceneId, lang }: SceneQueryProps) => {
     const { data, ...rest } = useQuery(GET_SCENE, {
       variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId,
+      skip: !sceneId
     });
 
     const scene = useMemo(() => {
@@ -72,7 +72,7 @@ export default () => {
             styles: data.node.styles,
             workspaceId: data.node.teamId,
             widgetAlignSystem: data.node.widgetAlignSystem,
-            widgets: data.node.widgets,
+            widgets: data.node.widgets
           } as Scene)
         : undefined;
     }, [data]);
@@ -81,6 +81,6 @@ export default () => {
   }, []);
 
   return {
-    useSceneQuery,
+    useSceneQuery
   };
 };
diff --git a/web/src/services/api/storytellingApi/blocks.ts b/web/src/services/api/storytellingApi/blocks.ts
index 5a73fcb25..99fc7a675 100644
--- a/web/src/services/api/storytellingApi/blocks.ts
+++ b/web/src/services/api/storytellingApi/blocks.ts
@@ -11,13 +11,13 @@ import {
   MutationRemoveStoryBlockArgs,
   PluginExtensionType,
   RemoveStoryBlockInput,
-  RemoveStoryBlockMutation,
+  RemoveStoryBlockMutation
 } from "@reearth/services/gql/__gen__/graphql";
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import {
   CREATE_STORY_BLOCK,
   MOVE_STORY_BLOCK,
-  REMOVE_STORY_BLOCK,
+  REMOVE_STORY_BLOCK
 } from "@reearth/services/gql/queries/storytelling";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
@@ -59,17 +59,17 @@ export default () => {
     ({ sceneId, lang }: StoryBlockQueryProps) => {
       const { data, ...rest } = useQuery(GET_SCENE, {
         variables: { sceneId: sceneId ?? "", lang },
-        skip: !sceneId,
+        skip: !sceneId
       });
 
       const installableStoryBlocks = useMemo(
         () => getInstallableStoryBlocks(data),
-        [data],
+        [data]
       );
 
       return { installableStoryBlocks, ...rest };
     },
-    [],
+    []
   );
 
   const useInstalledStoryBlocksQuery = useCallback(
@@ -77,24 +77,24 @@ export default () => {
       sceneId,
       lang,
       storyId,
-      pageId,
+      pageId
     }: StoryBlockQueryProps & {
       storyId?: string;
       pageId?: string;
     }) => {
       const { data, ...rest } = useQuery(GET_SCENE, {
         variables: { sceneId: sceneId ?? "", lang },
-        skip: !sceneId,
+        skip: !sceneId
       });
 
       const installedStoryBlocks = useMemo(
         () => getInstalledStoryBlocks(data, storyId, pageId),
-        [data, storyId, pageId],
+        [data, storyId, pageId]
       );
 
       return { installedStoryBlocks, ...rest };
     },
-    [],
+    []
   );
 
   const [createStoryBlockMutation] = useMutation<
@@ -104,10 +104,10 @@ export default () => {
 
   const useCreateStoryBlock = useCallback(
     async (
-      input: CreateStoryBlockInput,
+      input: CreateStoryBlockInput
     ): Promise<MutationReturn<CreateStoryBlockMutation>> => {
       const { data, errors } = await createStoryBlockMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.createStoryBlock) {
         setNotification({ type: "error", text: t("Failed to create block.") });
@@ -116,12 +116,12 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly created a block!"),
+        text: t("Successfullly created a block!")
       });
 
       return { data, status: "success" };
     },
-    [createStoryBlockMutation, setNotification, t],
+    [createStoryBlockMutation, setNotification, t]
   );
 
   const [removeStoryBlockMutation] = useMutation<
@@ -131,10 +131,10 @@ export default () => {
 
   const useDeleteStoryBlock = useCallback(
     async (
-      input: RemoveStoryBlockInput,
+      input: RemoveStoryBlockInput
     ): Promise<MutationReturn<RemoveStoryBlockMutation>> => {
       const { data, errors } = await removeStoryBlockMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.removeStoryBlock) {
         setNotification({ type: "error", text: t("Failed to delete block.") });
@@ -143,12 +143,12 @@ export default () => {
       }
       setNotification({
         type: "info",
-        text: t("Block was successfully deleted."),
+        text: t("Block was successfully deleted.")
       });
 
       return { data, status: "success" };
     },
-    [removeStoryBlockMutation, setNotification, t],
+    [removeStoryBlockMutation, setNotification, t]
   );
 
   const [moveStoryBlockMutation] = useMutation<
@@ -158,10 +158,10 @@ export default () => {
 
   const useMoveStoryBlock = useCallback(
     async (
-      input: MoveStoryBlockInput,
+      input: MoveStoryBlockInput
     ): Promise<MutationReturn<MoveStoryBlockMutation>> => {
       const { data, errors } = await moveStoryBlockMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.moveStoryBlock) {
         setNotification({ type: "error", text: t("Failed to move block.") });
@@ -170,19 +170,19 @@ export default () => {
       }
       setNotification({
         type: "info",
-        text: t("Block was successfully moved."),
+        text: t("Block was successfully moved.")
       });
 
       return { data, status: "success" };
     },
-    [moveStoryBlockMutation, setNotification, t],
+    [moveStoryBlockMutation, setNotification, t]
   );
   return {
     useInstallableStoryBlocksQuery,
     useInstalledStoryBlocksQuery,
     useCreateStoryBlock,
     useDeleteStoryBlock,
-    useMoveStoryBlock,
+    useMoveStoryBlock
   };
 };
 
@@ -202,7 +202,7 @@ const getInstallableStoryBlocks = (rawScene?: GetSceneQuery) => {
             extensionId: e.extensionId,
             icon: e.icon,
             singleOnly: !!e.singleOnly,
-            type: "StoryBlock",
+            type: "StoryBlock"
           };
         })
         .filter((sb): sb is InstallableStoryBlock => !!sb);
@@ -213,7 +213,7 @@ const getInstallableStoryBlocks = (rawScene?: GetSceneQuery) => {
 export const getInstalledStoryBlocks = (
   rawScene?: GetSceneQuery,
   storyId?: string,
-  pageId?: string,
+  pageId?: string
 ): InstalledStoryBlock[] | undefined => {
   if (!rawScene?.node || !storyId || !pageId) return;
   const scene =
@@ -227,7 +227,7 @@ export const getInstalledStoryBlocks = (
 
   return page?.blocks.map((b) => {
     const block = installableStoryBlocks?.find(
-      (isb) => isb.extensionId === b.extensionId,
+      (isb) => isb.extensionId === b.extensionId
     );
 
     return {
@@ -239,8 +239,8 @@ export const getInstalledStoryBlocks = (
       icon: block?.icon,
       property: {
         id: b.property?.id ?? "",
-        items: convert(b.property, null),
-      },
+        items: convert(b.property, null)
+      }
     };
   });
 };
diff --git a/web/src/services/api/storytellingApi/index.ts b/web/src/services/api/storytellingApi/index.ts
index 7d6110e3d..c719b4c9c 100644
--- a/web/src/services/api/storytellingApi/index.ts
+++ b/web/src/services/api/storytellingApi/index.ts
@@ -5,13 +5,13 @@ import {
   CreateStoryInput,
   CreateStoryMutation,
   MutationCreateStoryArgs,
-  UpdateStoryInput,
+  UpdateStoryInput
 } from "@reearth/services/gql/__gen__/graphql";
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import {
   CREATE_STORY,
   PUBLISH_STORY,
-  UPDATE_STORY,
+  UPDATE_STORY
 } from "@reearth/services/gql/queries/storytelling";
 import { useT } from "@reearth/services/i18n";
 import { useCallback, useMemo } from "react";
@@ -33,7 +33,7 @@ export default () => {
   const useStoriesQuery = useCallback(({ sceneId, lang }: StoryQueryProps) => {
     const { data, ...rest } = useQuery(GET_SCENE, {
       variables: { sceneId: sceneId ?? "", lang },
-      skip: !sceneId,
+      skip: !sceneId
     });
 
     const stories = useMemo(() => getStories(data), [data]);
@@ -47,10 +47,10 @@ export default () => {
   >(CREATE_STORY);
   const useCreateStory = useCallback(
     async (
-      input: CreateStoryInput,
+      input: CreateStoryInput
     ): Promise<MutationReturn<CreateStoryMutation>> => {
       const { data, errors } = await createStoryMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.createStory?.story?.id) {
         setNotification({ type: "error", text: t("Failed to create story.") });
@@ -59,22 +59,22 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfully created a story!"),
+        text: t("Successfully created a story!")
       });
 
       return { data, status: "success" };
     },
-    [createStoryMutation, setNotification, t],
+    [createStoryMutation, setNotification, t]
   );
 
   const [updateStoryMutation] = useMutation(UPDATE_STORY, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
   const useUpdateStory = useCallback(
     async (input: UpdateStoryInput) => {
       if (!input.storyId) return { status: "error" };
       const { data, errors } = await updateStoryMutation({
-        variables: { input },
+        variables: { input }
       });
       if (errors || !data?.updateStory) {
         setNotification({ type: "error", text: t("Failed to update story.") });
@@ -83,12 +83,12 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfully updated a story!"),
+        text: t("Successfully updated a story!")
       });
 
       return { data, status: "success" };
     },
-    [updateStoryMutation, t, setNotification],
+    [updateStoryMutation, t, setNotification]
   );
 
   const [publishStoryMutation, { loading: publishStoryLoading }] =
@@ -101,7 +101,7 @@ export default () => {
       const gqlStatus = toGqlStatus(s);
 
       const { data, errors } = await publishStoryMutation({
-        variables: { storyId, alias, status: gqlStatus },
+        variables: { storyId, alias, status: gqlStatus }
       });
 
       if (errors || !data?.publishStory) {
@@ -118,22 +118,22 @@ export default () => {
             ? t("Successfully published your story!")
             : s == "published"
               ? t(
-                  "Successfully published your story with search engine indexing!",
+                  "Successfully published your story with search engine indexing!"
                 )
               : t(
-                  "Successfully unpublished your story. Now nobody can access your story.",
-                ),
+                  "Successfully unpublished your story. Now nobody can access your story."
+                )
       });
       return { data: data.publishStory.story, status: "success" };
     },
-    [publishStoryMutation, t, setNotification],
+    [publishStoryMutation, t, setNotification]
   );
 
   const {
     useCreateStoryPage,
     useDeleteStoryPage,
     useMoveStoryPage,
-    useUpdateStoryPage,
+    useUpdateStoryPage
   } = usePages();
 
   const {
@@ -141,7 +141,7 @@ export default () => {
     useInstalledStoryBlocksQuery,
     useCreateStoryBlock,
     useDeleteStoryBlock,
-    useMoveStoryBlock,
+    useMoveStoryBlock
   } = useBlocks();
 
   return {
@@ -158,6 +158,6 @@ export default () => {
     useCreateStoryBlock,
     useDeleteStoryBlock,
     useMoveStoryBlock,
-    usePublishStory,
+    usePublishStory
   };
 };
diff --git a/web/src/services/api/storytellingApi/pages.ts b/web/src/services/api/storytellingApi/pages.ts
index c7823d44e..c51a947b2 100644
--- a/web/src/services/api/storytellingApi/pages.ts
+++ b/web/src/services/api/storytellingApi/pages.ts
@@ -13,13 +13,13 @@ import {
   MutationRemoveStoryPageArgs,
   MutationUpdateStoryPageArgs,
   UpdateStoryPageInput,
-  UpdateStoryPageMutation,
+  UpdateStoryPageMutation
 } from "@reearth/services/gql/__gen__/graphql";
 import {
   CREATE_STORY_PAGE,
   DELETE_STORY_PAGE,
   MOVE_STORY_PAGE,
-  UPDATE_STORY_PAGE,
+  UPDATE_STORY_PAGE
 } from "@reearth/services/gql/queries/storytelling";
 import { useT } from "@reearth/services/i18n";
 import { useCallback } from "react";
@@ -39,12 +39,12 @@ export default () => {
 
   const useCreateStoryPage = useCallback(
     async (
-      input: CreateStoryPageInput,
+      input: CreateStoryPageInput
     ): Promise<MutationReturn<CreateStoryPageMutation>> => {
       const { data, errors } = await createStoryPageMutation({
         variables: {
-          input,
-        },
+          input
+        }
       });
       if (errors || !data?.createStoryPage?.story?.id) {
         setNotification({ type: "error", text: t("Failed to create page.") });
@@ -53,12 +53,12 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly created a page!"),
+        text: t("Successfullly created a page!")
       });
 
       return { data, status: "success" };
     },
-    [createStoryPageMutation, setNotification, t],
+    [createStoryPageMutation, setNotification, t]
   );
 
   const [deleteStoryPageMutation] = useMutation<
@@ -68,12 +68,12 @@ export default () => {
 
   const useDeleteStoryPage = useCallback(
     async (
-      input: DeleteStoryPageInput,
+      input: DeleteStoryPageInput
     ): Promise<MutationReturn<DeleteStoryPageMutation>> => {
       const { data, errors } = await deleteStoryPageMutation({
         variables: {
-          input,
-        },
+          input
+        }
       });
       if (errors || !data?.removeStoryPage?.story?.id) {
         setNotification({ type: "error", text: t("Failed to delete page.") });
@@ -82,12 +82,12 @@ export default () => {
       }
       setNotification({
         type: "info",
-        text: t("Page was successfully deleted."),
+        text: t("Page was successfully deleted.")
       });
 
       return { data, status: "success" };
     },
-    [deleteStoryPageMutation, setNotification, t],
+    [deleteStoryPageMutation, setNotification, t]
   );
 
   const [moveStoryPageMutation] = useMutation<
@@ -97,12 +97,12 @@ export default () => {
 
   const useMoveStoryPage = useCallback(
     async (
-      input: MoveStoryPageInput,
+      input: MoveStoryPageInput
     ): Promise<MutationReturn<MoveStoryPageMutation>> => {
       const { data, errors } = await moveStoryPageMutation({
         variables: {
-          input,
-        },
+          input
+        }
       });
       if (errors || !data?.moveStoryPage?.story?.id) {
         setNotification({ type: "error", text: t("Failed to move page.") });
@@ -111,12 +111,12 @@ export default () => {
       }
       setNotification({
         type: "info",
-        text: t("Page was successfully moved."),
+        text: t("Page was successfully moved.")
       });
 
       return { data, status: "success" };
     },
-    [moveStoryPageMutation, setNotification, t],
+    [moveStoryPageMutation, setNotification, t]
   );
 
   const [updateStoryPageMutation] = useMutation<
@@ -126,12 +126,12 @@ export default () => {
 
   const useUpdateStoryPage = useCallback(
     async (
-      input: UpdateStoryPageInput,
+      input: UpdateStoryPageInput
     ): Promise<MutationReturn<UpdateStoryPageMutation>> => {
       const { data, errors } = await updateStoryPageMutation({
         variables: {
-          input,
-        },
+          input
+        }
       });
       if (errors || !data?.updateStoryPage?.story?.id) {
         setNotification({ type: "error", text: t("Failed to update page.") });
@@ -140,17 +140,17 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly updated a page!"),
+        text: t("Successfullly updated a page!")
       });
 
       return { data, status: "success" };
     },
-    [updateStoryPageMutation, setNotification, t],
+    [updateStoryPageMutation, setNotification, t]
   );
   return {
     useCreateStoryPage,
     useDeleteStoryPage,
     useMoveStoryPage,
-    useUpdateStoryPage,
+    useUpdateStoryPage
   };
 };
diff --git a/web/src/services/api/storytellingApi/utils.ts b/web/src/services/api/storytellingApi/utils.ts
index 4bbfaae58..9038e1cef 100644
--- a/web/src/services/api/storytellingApi/utils.ts
+++ b/web/src/services/api/storytellingApi/utils.ts
@@ -25,7 +25,7 @@ export type Page = {
 };
 export enum Position {
   Left = "LEFT",
-  Right = "RIGHT",
+  Right = "RIGHT"
 }
 export type Story = {
   id: string;
@@ -57,19 +57,19 @@ export const getStories = (rawScene?: GetSceneQuery) => {
           ...p,
           property: {
             id: p.property?.id,
-            items: convert(p.property, null),
+            items: convert(p.property, null)
           },
           blocks: p.blocks.map((b) => {
             return {
               ...b,
               property: {
                 id: b.property?.id,
-                items: convert(b.property, null),
-              },
+                items: convert(b.property, null)
+              }
             };
-          }),
+          })
         };
-      }),
+      })
     } as Story;
   });
 };
diff --git a/web/src/services/api/teams/index.ts b/web/src/services/api/teams/index.ts
index 92c847b7c..d928690ef 100644
--- a/web/src/services/api/teams/index.ts
+++ b/web/src/services/api/teams/index.ts
@@ -1,16 +1,16 @@
 import * as Apollo from "@apollo/client";
 import {
   GetTeamsQuery,
-  GetTeamsQueryVariables,
+  GetTeamsQueryVariables
 } from "@reearth/services/gql/__gen__/graphql";
 import { GetTeamsDocument } from "@reearth/services/gql/queries/teams";
 
 export function useGetTeamsQuery(
-  baseOptions?: Apollo.QueryHookOptions<GetTeamsQuery, GetTeamsQueryVariables>,
+  baseOptions?: Apollo.QueryHookOptions<GetTeamsQuery, GetTeamsQueryVariables>
 ) {
   const options = { ...baseOptions };
   return Apollo.useQuery<GetTeamsQuery, GetTeamsQueryVariables>(
     GetTeamsDocument,
-    options,
+    options
   );
 }
diff --git a/web/src/services/api/widgetsApi/index.ts b/web/src/services/api/widgetsApi/index.ts
index 363baffb1..b480097b8 100644
--- a/web/src/services/api/widgetsApi/index.ts
+++ b/web/src/services/api/widgetsApi/index.ts
@@ -4,14 +4,14 @@ import {
   WidgetAreaAlign,
   WidgetAreaType,
   WidgetSectionType,
-  WidgetZoneType,
+  WidgetZoneType
 } from "@reearth/services/gql";
 import { GET_SCENE } from "@reearth/services/gql/queries/scene";
 import {
   ADD_WIDGET,
   REMOVE_WIDGET,
   UPDATE_WIDGET,
-  UPDATE_WIDGET_ALIGN_SYSTEM,
+  UPDATE_WIDGET_ALIGN_SYSTEM
 } from "@reearth/services/gql/queries/widget";
 import { useT } from "@reearth/services/i18n";
 import { WidgetAreaState, useNotification } from "@reearth/services/state";
@@ -59,50 +59,50 @@ export default () => {
     ({ sceneId, lang }: WidgetQueryProps) => {
       const { data, ...rest } = useQuery(GET_SCENE, {
         variables: { sceneId: sceneId ?? "", lang },
-        skip: !sceneId,
+        skip: !sceneId
       });
 
       const installableWidgets = useMemo(
         () => getInstallableWidgets(data),
-        [data],
+        [data]
       );
 
       return { installableWidgets, ...rest };
     },
-    [],
+    []
   );
 
   const useInstalledWidgetsQuery = useCallback(
     ({ sceneId, lang }: WidgetQueryProps) => {
       const { data, ...rest } = useQuery(GET_SCENE, {
         variables: { sceneId: sceneId ?? "", lang },
-        skip: !sceneId,
+        skip: !sceneId
       });
 
       const installedWidgets = useMemo(() => getInstalledWidgets(data), [data]);
 
       return { installedWidgets, ...rest };
     },
-    [],
+    []
   );
 
   const [addWidgetMutation] = useMutation(ADD_WIDGET, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useAddWidget = useCallback(
     async (
       sceneId?: string,
-      id?: string,
+      id?: string
     ): Promise<MutationReturn<Partial<Widget>>> => {
       if (!sceneId || !id)
         return {
-          status: "error",
+          status: "error"
         };
 
       const [pluginId, extensionId] = id.split("/");
       const { data, errors } = await addWidgetMutation({
-        variables: { sceneId: sceneId ?? "", pluginId, extensionId },
+        variables: { sceneId: sceneId ?? "", pluginId, extensionId }
       });
 
       if (errors || !data?.addWidget) {
@@ -114,29 +114,29 @@ export default () => {
 
       return {
         data: data.addWidget.sceneWidget,
-        status: "success",
+        status: "success"
       };
     },
-    [addWidgetMutation, setNotification, t],
+    [addWidgetMutation, setNotification, t]
   );
 
   const [updateWidget] = useMutation(UPDATE_WIDGET, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useUpdateWidget = useCallback(
     async (
       id: string,
       update: { location?: WidgetLocation; extended?: boolean; index?: number },
-      sceneId?: string,
+      sceneId?: string
     ) => {
       if (!sceneId) {
         console.log(
-          "GraphQL: Failed to update widget because there is no sceneId provided",
+          "GraphQL: Failed to update widget because there is no sceneId provided"
         );
         setNotification({ type: "error", text: t("Failed to update widget.") });
         return {
-          status: "error",
+          status: "error"
         };
       }
 
@@ -150,12 +150,12 @@ export default () => {
                 zone: update.location.zone?.toUpperCase() as WidgetZoneType,
                 section:
                   update.location.section?.toUpperCase() as WidgetSectionType,
-                area: update.location.area?.toUpperCase() as WidgetAreaType,
+                area: update.location.area?.toUpperCase() as WidgetAreaType
               }
             : undefined,
           extended: update.extended,
-          index: update.index,
-        },
+          index: update.index
+        }
       });
 
       if (errors || !data?.updateWidget) {
@@ -167,33 +167,33 @@ export default () => {
 
       return {
         data: data.updateWidget.scene.widgets,
-        status: "success",
+        status: "success"
       };
     },
-    [updateWidget, setNotification, t],
+    [updateWidget, setNotification, t]
   );
 
   const [removeWidget] = useMutation(REMOVE_WIDGET, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useRemoveWidget = useCallback(
     async (
       sceneId?: string,
-      widgetId?: string,
+      widgetId?: string
     ): Promise<MutationReturn<Partial<SceneWidget>[]>> => {
       if (!sceneId || !widgetId) {
         console.log(
-          "GraphQL: Failed to remove widget because there is either no sceneId or widgetId provided",
+          "GraphQL: Failed to remove widget because there is either no sceneId or widgetId provided"
         );
         setNotification({ type: "error", text: t("Failed to update widget.") });
         return {
-          status: "error",
+          status: "error"
         };
       }
 
       const { data, errors } = await removeWidget({
-        variables: { sceneId: sceneId ?? "", widgetId },
+        variables: { sceneId: sceneId ?? "", widgetId }
       });
 
       if (errors || !data?.removeWidget) {
@@ -205,28 +205,28 @@ export default () => {
 
       return {
         data: data.removeWidget.scene.widgets,
-        status: "success",
+        status: "success"
       };
     },
-    [removeWidget, setNotification, t],
+    [removeWidget, setNotification, t]
   );
 
   const [updateWidgetAlignSystem] = useMutation(UPDATE_WIDGET_ALIGN_SYSTEM, {
-    refetchQueries: ["GetScene"],
+    refetchQueries: ["GetScene"]
   });
 
   const useUpdateWidgetAlignSystem = useCallback(
     async (widgetAreaState: WidgetAreaState, sceneId?: string) => {
       if (!sceneId) {
         console.log(
-          "GraphQL: Failed to update the widget align system because there is no sceneId provided",
+          "GraphQL: Failed to update the widget align system because there is no sceneId provided"
         );
         setNotification({
           type: "error",
-          text: t("Failed to update widget alignment."),
+          text: t("Failed to update widget alignment.")
         });
         return {
-          status: "error",
+          status: "error"
         };
       }
 
@@ -236,24 +236,24 @@ export default () => {
           location: {
             zone: widgetAreaState.zone.toUpperCase() as WidgetZoneType,
             section: widgetAreaState.section.toUpperCase() as WidgetSectionType,
-            area: widgetAreaState.area.toUpperCase() as WidgetAreaType,
+            area: widgetAreaState.area.toUpperCase() as WidgetAreaType
           },
           align: widgetAreaState.align?.toUpperCase() as WidgetAreaAlign,
           background: widgetAreaState.background,
           padding: widgetAreaState.padding,
           centered: widgetAreaState.centered,
-          gap: widgetAreaState.gap,
-        },
+          gap: widgetAreaState.gap
+        }
       });
 
       if (errors || !data?.updateWidgetAlignSystem) {
         console.log(
           "GraphQL: Failed to update the widget align system",
-          errors,
+          errors
         );
         setNotification({
           type: "error",
-          text: t("Failed to update the widget align system."),
+          text: t("Failed to update the widget align system.")
         });
 
         return { status: "error" };
@@ -261,10 +261,10 @@ export default () => {
 
       return {
         data: data.updateWidgetAlignSystem.scene.widgetAlignSystem,
-        status: "success",
+        status: "success"
       };
     },
-    [updateWidgetAlignSystem, setNotification, t],
+    [updateWidgetAlignSystem, setNotification, t]
   );
 
   return {
@@ -273,6 +273,6 @@ export default () => {
     useAddWidget,
     useUpdateWidget,
     useUpdateWidgetAlignSystem,
-    useRemoveWidget,
+    useRemoveWidget
   };
 };
diff --git a/web/src/services/api/widgetsApi/utils.ts b/web/src/services/api/widgetsApi/utils.ts
index 0f634f831..1bbfe1de2 100644
--- a/web/src/services/api/widgetsApi/utils.ts
+++ b/web/src/services/api/widgetsApi/utils.ts
@@ -7,7 +7,7 @@ export const NAVIGATOR_BUILTIN_WIDGET_ID = "reearth/navigator";
 
 export const AVAILABLE_WIDGET_IDS = [
   BUTTON_BUILTIN_WIDGET_ID,
-  NAVIGATOR_BUILTIN_WIDGET_ID,
+  NAVIGATOR_BUILTIN_WIDGET_ID
 ];
 
 export type InstallableWidget = {
@@ -46,7 +46,7 @@ export const getInstallableWidgets = (rawScene?: GetSceneQuery) => {
           (e) =>
             e.type === PluginExtensionType.Widget &&
             (AVAILABLE_WIDGET_IDS.includes(`reearth/${e.extensionId}`) ||
-              plugin.id !== "reearth"),
+              plugin.id !== "reearth")
         )
         .map((e): InstallableWidget => {
           return {
@@ -59,27 +59,27 @@ export const getInstallableWidgets = (rawScene?: GetSceneQuery) => {
             disabled:
               (e.singleOnly &&
                 !!scene?.widgets?.find(
-                  (w) => w.extensionId === e.extensionId,
+                  (w) => w.extensionId === e.extensionId
                 )) ??
-              undefined,
+              undefined
           };
         })
         .filter(
-          (w): w is InstallableWidget => !!w && !w.title.includes("legacy"),
+          (w): w is InstallableWidget => !!w && !w.title.includes("legacy")
         );
     })
     .reduce<InstallableWidget[]>((a, b) => (b ? [...a, ...b] : a), []);
 };
 
 export const getInstalledWidgets = (
-  rawScene?: GetSceneQuery,
+  rawScene?: GetSceneQuery
 ): InstalledWidget[] | undefined => {
   const scene =
     rawScene?.node?.__typename === "Scene" ? rawScene.node : undefined;
 
   return scene?.widgets?.map((w) => {
     const e = getInstallableWidgets(rawScene)?.find(
-      (e) => e.extensionId === w.extensionId,
+      (e) => e.extensionId === w.extensionId
     );
 
     return {
@@ -94,8 +94,8 @@ export const getInstalledWidgets = (
       icon: e?.icon || (w.pluginId === "reearth" && w.extensionId) || "plugin",
       property: {
         id: w.property?.id ?? "",
-        items: convert(w.property, null),
-      },
+        items: convert(w.property, null)
+      }
     };
   });
 };
diff --git a/web/src/services/api/workspacesApi.ts b/web/src/services/api/workspacesApi.ts
index 84f9bf0d2..d9e29fed6 100644
--- a/web/src/services/api/workspacesApi.ts
+++ b/web/src/services/api/workspacesApi.ts
@@ -29,19 +29,19 @@ export default () => {
   }, []);
 
   const [createWorkspaceMutation] = useMutation(CREATE_WORKSPACE, {
-    refetchQueries: ["GetMe"],
+    refetchQueries: ["GetMe"]
   });
 
   const useCreateWorkspace = useCallback(
     async (name: string): Promise<MutationReturn<Partial<Team>>> => {
       const { data, errors } = await createWorkspaceMutation({
-        variables: { name },
+        variables: { name }
       });
       if (errors || !data?.createTeam) {
         console.log("GraphQL: Failed to create workspace", errors);
         setNotification({
           type: "error",
-          text: t("Failed to create workspace."),
+          text: t("Failed to create workspace.")
         });
 
         return { status: "error" };
@@ -49,16 +49,16 @@ export default () => {
 
       setNotification({
         type: "success",
-        text: t("Successfully created workspace!"),
+        text: t("Successfully created workspace!")
       });
       return { data: data.createTeam.team, status: "success" };
     },
-    [createWorkspaceMutation, setNotification, t],
+    [createWorkspaceMutation, setNotification, t]
   );
 
   return {
     useWorkspaceQuery,
     useWorkspacesQuery,
-    useCreateWorkspace,
+    useCreateWorkspace
   };
 };
diff --git a/web/src/services/auth/auth0Auth.ts b/web/src/services/auth/auth0Auth.ts
index cfe532e4d..028e21b8e 100644
--- a/web/src/services/auth/auth0Auth.ts
+++ b/web/src/services/auth/auth0Auth.ts
@@ -12,7 +12,7 @@ export const useAuth0Auth = (): AuthHook => {
     isLoading,
     loginWithRedirect,
     logout,
-    getAccessTokenSilently,
+    getAccessTokenSilently
   } = useAuth0();
 
   return {
@@ -30,9 +30,9 @@ export const useAuth0Auth = (): AuthHook => {
         logoutParams: {
           returnTo: error
             ? `${window.location.origin}?${errorKey}=${encodeURIComponent(error?.message)}`
-            : window.location.origin,
-        },
+            : window.location.origin
+        }
       });
-    },
+    }
   };
 };
diff --git a/web/src/services/auth/authProvider.tsx b/web/src/services/auth/authProvider.tsx
index 650b9e506..2145f8aa1 100644
--- a/web/src/services/auth/authProvider.tsx
+++ b/web/src/services/auth/authProvider.tsx
@@ -2,7 +2,7 @@ import { Auth0Provider } from "@auth0/auth0-react";
 import {
   getAuthInfo,
   getSignInCallbackUrl,
-  logInToTenant,
+  logInToTenant
 } from "@reearth/services/config";
 import React, { createContext, ReactNode, useState } from "react";
 
@@ -23,7 +23,7 @@ const CognitoWrapper = ({ children }: { children: ReactNode }) => {
 };
 
 export const AuthProvider: React.FC<{ children?: ReactNode }> = ({
-  children,
+  children
 }) => {
   const [authInfo] = useState(() => {
     logInToTenant(); // note that it includes side effect
@@ -42,7 +42,7 @@ export const AuthProvider: React.FC<{ children?: ReactNode }> = ({
         authorizationParams={{
           audience: audience,
           scope: "openid profile email offline_access",
-          redirect_uri: getSignInCallbackUrl(),
+          redirect_uri: getSignInCallbackUrl()
         }}
         useRefreshTokens
         useRefreshTokensFallback
diff --git a/web/src/services/auth/cognitoAuth.ts b/web/src/services/auth/cognitoAuth.ts
index 5fd5d5e5a..946f106d1 100644
--- a/web/src/services/auth/cognitoAuth.ts
+++ b/web/src/services/auth/cognitoAuth.ts
@@ -57,6 +57,6 @@ export const useCognitoAuth = (): AuthHook => {
     error,
     getAccessToken,
     login,
-    logout,
+    logout
   };
 };
diff --git a/web/src/services/auth/index.tsx b/web/src/services/auth/index.tsx
index 0e88a1118..3fc59958e 100644
--- a/web/src/services/auth/index.tsx
+++ b/web/src/services/auth/index.tsx
@@ -8,7 +8,7 @@ export { AuthProvider } from "./authProvider";
 export { useAuth, useCleanUrl, useAuthenticationRequired } from "./useAuth";
 
 const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({
-  children,
+  children
 }) => {
   const [isAuthenticated] = useAuthenticationRequired(); // TODO: show error
   return isAuthenticated && children ? <>{children}</> : null;
@@ -20,12 +20,12 @@ const withAuthorisation = (): ((props: any) => React.FC<any>) => {
     return withAuthenticator as unknown as (props: any) => React.FC<any>;
   } else if (authProvider === "auth0") {
     return withAuthenticationRequired as unknown as (
-      props: any,
+      props: any
     ) => React.FC<any>;
   }
   return (props: any) => props;
 };
 
 export const AuthenticatedPage = withAuthorisation()(
-  AuthenticationRequiredPage,
+  AuthenticationRequiredPage
 );
diff --git a/web/src/services/auth/useAuth.ts b/web/src/services/auth/useAuth.ts
index e28291b4f..f6b5f3c8e 100644
--- a/web/src/services/auth/useAuth.ts
+++ b/web/src/services/auth/useAuth.ts
@@ -47,7 +47,7 @@ export function useAuthenticationRequired(): [boolean, string | undefined] {
     isLoading,
     error: authError,
     login,
-    logout,
+    logout
   } = useAuth();
 
   useEffect(() => {
diff --git a/web/src/services/config/authInfo.ts b/web/src/services/config/authInfo.ts
index c94e888cf..742274d08 100644
--- a/web/src/services/config/authInfo.ts
+++ b/web/src/services/config/authInfo.ts
@@ -44,7 +44,7 @@ function defaultAuthInfo(conf = config()): AuthInfo | undefined {
     auth0ClientId: conf.auth0ClientId,
     auth0Domain: conf.auth0Domain,
     authProvider: conf.authProvider || "auth0",
-    cognito: conf.cognito,
+    cognito: conf.cognito
   };
 }
 
diff --git a/web/src/services/config/aws.ts b/web/src/services/config/aws.ts
index c875a4714..889f90667 100644
--- a/web/src/services/config/aws.ts
+++ b/web/src/services/config/aws.ts
@@ -31,9 +31,9 @@ export const configureCognito = (cognitoConfig: CognitoParams) => {
         domain: cognitoOauthDomain,
         redirectSignIn: cognitoOauthRedirectSignIn,
         redirectSignOut: cognitoOauthRedirectSignOut,
-        responseType: cognitoOauthResponseType,
-      },
-    },
+        responseType: cognitoOauthResponseType
+      }
+    }
   };
 
   Amplify.configure(config);
diff --git a/web/src/services/config/config.test.ts b/web/src/services/config/config.test.ts
index 2dc455368..d166fa309 100644
--- a/web/src/services/config/config.test.ts
+++ b/web/src/services/config/config.test.ts
@@ -6,12 +6,12 @@ test("convert password policy to regular expression", () => {
   const passwordPolicy = {
     whiteSpace: "(?=.*\\s)",
     highSecurity: "^(?=.*[a-z])(?=.*[A-Z])((?=(.*\\d){2}))",
-    wrong: "@[",
+    wrong: "@["
   };
   const actual = convertPasswordPolicy(passwordPolicy);
   expect(actual).toStrictEqual({
     whiteSpace: /(?=.*\s)/,
-    highSecurity: /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/,
+    highSecurity: /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/
   });
 });
 
diff --git a/web/src/services/config/defaultConfig.ts b/web/src/services/config/defaultConfig.ts
index 4403a70cc..d3c4b7e5c 100644
--- a/web/src/services/config/defaultConfig.ts
+++ b/web/src/services/config/defaultConfig.ts
@@ -11,41 +11,41 @@ export const defaultConfig: Config = {
   policy: {
     modalTitle: {
       en: "Re:Earth Cloud",
-      ja: "Re:Earth Cloud",
+      ja: "Re:Earth Cloud"
     },
     modalDescription: {
       en: "This is your currently subscribed to plan. If this plan stops meeting your needs, Re:Earth has other plans available. ",
-      ja: "日本語版にほなsdflkjlksdjf",
+      ja: "日本語版にほなsdflkjlksdjf"
     },
     url: {
       en: "https://reearth.io/service/cloud",
-      ja: "https://reearth.io/ja/service/cloud",
+      ja: "https://reearth.io/ja/service/cloud"
     },
     limitNotifications: {
       asset: {
         en: "Your workspace has reached its plan's limit for assets. Please check reearth.io/service/cloud for details.",
-        ja: "",
+        ja: ""
       },
       createProject: {
         en: "Your workspace has reached its plan's limit for projects. Please check reearth.io/service/cloud for details.",
-        ja: "",
+        ja: ""
       },
       dataset: {
         en: "Your workspace has reached its plan's limit for dataset. Please check reearth.io/service/cloud for details.",
-        ja: "",
+        ja: ""
       },
       member: {
         en: "Your workspace has reached its plan's limit for new members. Please check reearth.io/service/cloud for details.",
-        ja: "",
+        ja: ""
       },
       layer: {
         en: "Your workspace has reached its plan's limit for layers. Please check reearth.io/service/cloud for details.",
-        ja: "",
+        ja: ""
       },
       publishProject: {
         en: "Your workspace has reached its plan's limit for publishing projects. Please check reearth.io/service/cloud for details.",
-        ja: "",
-      },
-    },
-  },
+        ja: ""
+      }
+    }
+  }
 };
diff --git a/web/src/services/config/extensions.ts b/web/src/services/config/extensions.ts
index 18aaf19c0..a4a90561b 100644
--- a/web/src/services/config/extensions.ts
+++ b/web/src/services/config/extensions.ts
@@ -12,7 +12,7 @@ export type SharedExtensionProps = {
   onNotificationChange?: (
     type: "error" | "warning" | "info" | "success",
     text: string,
-    heading?: string,
+    heading?: string
   ) => void;
 };
 
@@ -70,7 +70,7 @@ export type Extensions = {
 };
 
 export async function loadExtensions(
-  urls?: string[],
+  urls?: string[]
 ): Promise<Extensions | undefined> {
   if (!urls) return undefined;
 
@@ -111,6 +111,6 @@ export async function loadExtensions(
     datasetImport,
     pluginLibrary,
     pluginInstalled,
-    globalModal,
+    globalModal
   };
 }
diff --git a/web/src/services/config/index.ts b/web/src/services/config/index.ts
index b03cf0e15..51a8c69fa 100644
--- a/web/src/services/config/index.ts
+++ b/web/src/services/config/index.ts
@@ -7,14 +7,14 @@ import { type Extensions, loadExtensions } from "./extensions";
 import { type PasswordPolicy, convertPasswordPolicy } from "./passwordPolicy";
 import {
   type UnsafeBuiltinPlugin,
-  loadUnsafeBuiltinPlugins,
+  loadUnsafeBuiltinPlugins
 } from "./unsafeBuiltinPlugin";
 
 export {
   getAuthInfo,
   getSignInCallbackUrl,
   logInToTenant,
-  logOutFromTenant,
+  logOutFromTenant
 } from "./authInfo";
 
 export type Config = {
@@ -75,7 +75,7 @@ export default async function loadConfig() {
   window.REEARTH_CONFIG = defaultConfig;
   const config: Config = {
     ...defaultConfig,
-    ...(await (await fetch("/reearth_config.json")).json()),
+    ...(await (await fetch("/reearth_config.json")).json())
   };
 
   const cesiumIonToken = await loadCesiumIonToken();
@@ -90,7 +90,7 @@ export default async function loadConfig() {
 
   if (config?.passwordPolicy) {
     config.passwordPolicy = convertPasswordPolicy(
-      config.passwordPolicy as Record<string, string>,
+      config.passwordPolicy as Record<string, string>
     );
   }
 
@@ -101,7 +101,7 @@ export default async function loadConfig() {
 
   if (config.unsafePluginUrls) {
     config.unsafeBuiltinPlugins = await loadUnsafeBuiltinPlugins(
-      config.unsafePluginUrls,
+      config.unsafePluginUrls
     );
   }
 
diff --git a/web/src/services/config/passwordPolicy.ts b/web/src/services/config/passwordPolicy.ts
index f0c3326c3..7c74b9569 100644
--- a/web/src/services/config/passwordPolicy.ts
+++ b/web/src/services/config/passwordPolicy.ts
@@ -8,7 +8,7 @@ export type PasswordPolicy = {
 };
 
 export function convertPasswordPolicy(
-  passwordPolicy?: Record<string, string>,
+  passwordPolicy?: Record<string, string>
 ): Record<string, RegExp | undefined> | undefined {
   if (!passwordPolicy) return;
   return Object.fromEntries(
@@ -21,6 +21,6 @@ export function convertPasswordPolicy(
           return [k, undefined];
         }
       })
-      .filter((i) => !!i[1]),
+      .filter((i) => !!i[1])
   );
 }
diff --git a/web/src/services/config/unsafeBuiltinPlugin.ts b/web/src/services/config/unsafeBuiltinPlugin.ts
index 1de423a40..6d09a1aac 100644
--- a/web/src/services/config/unsafeBuiltinPlugin.ts
+++ b/web/src/services/config/unsafeBuiltinPlugin.ts
@@ -31,10 +31,10 @@ export const loadUnsafeBuiltinPlugins = async (urls: string[]) => {
           return plugin;
         } catch (e) {
           throw new Error(
-            `Specified unsafe built-in module could not find: ${url} ${e}`,
+            `Specified unsafe built-in module could not find: ${url} ${e}`
           );
         }
-      }),
+      })
     )
   )
     .map((val) => {
diff --git a/web/src/services/gql/fragments/index.ts b/web/src/services/gql/fragments/index.ts
index e30260929..c5ececa27 100644
--- a/web/src/services/gql/fragments/index.ts
+++ b/web/src/services/gql/fragments/index.ts
@@ -3,7 +3,7 @@ export {
   LayerSystemFragments,
   EarthLayerFragments,
   layerFragment,
-  nlsLayerSimpleFragment,
+  nlsLayerSimpleFragment
 } from "./layer";
 export { default as propertyFragment } from "./property";
 export { default as datasetFragment } from "./dataset";
diff --git a/web/src/services/gql/fragments/layer.ts b/web/src/services/gql/fragments/layer.ts
index 56e757432..2a015b3c0 100644
--- a/web/src/services/gql/fragments/layer.ts
+++ b/web/src/services/gql/fragments/layer.ts
@@ -1,7 +1,7 @@
 import { gql } from "@apollo/client";
 import {
   propertyFragment,
-  infoboxFragment,
+  infoboxFragment
 } from "@reearth/services/gql/fragments";
 
 export const LayerSystemFragments = gql`
diff --git a/web/src/services/gql/provider/index.tsx b/web/src/services/gql/provider/index.tsx
index a33c2a68a..83d4bc7bb 100644
--- a/web/src/services/gql/provider/index.tsx
+++ b/web/src/services/gql/provider/index.tsx
@@ -2,7 +2,7 @@ import {
   ApolloProvider,
   ApolloClient,
   ApolloLink,
-  InMemoryCache,
+  InMemoryCache
 } from "@apollo/client";
 import type { ReactNode } from "react";
 
@@ -22,9 +22,9 @@ const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
       LayerGroup: {
         fields: {
           layers: {
-            merge: false,
-          },
-        },
+            merge: false
+          }
+        }
       },
       Query: {
         fields: {
@@ -34,9 +34,9 @@ const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
               "keyword",
               "sort",
               "pagination",
-              ["first", "last"],
+              ["first", "last"]
             ],
-            merge: paginationMerge,
+            merge: paginationMerge
           },
           projects: {
             keyArgs: [
@@ -44,17 +44,17 @@ const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
               "keyword",
               "sort",
               "pagination",
-              ["first", "last"],
+              ["first", "last"]
             ],
-            merge: paginationMerge,
+            merge: paginationMerge
           },
           datasetSchemas: {
             keyArgs: ["sceneId", "first", "after"],
-            merge: paginationMerge,
-          },
-        },
-      },
-    },
+            merge: paginationMerge
+          }
+        }
+      }
+    }
   });
 
   const client = new ApolloClient({
@@ -63,10 +63,10 @@ const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => {
       errorLink(),
       sentryLink(endpoint),
       authLink(),
-      uploadLink(endpoint),
+      uploadLink(endpoint)
     ]),
     cache,
-    connectToDevTools: import.meta.env.DEV,
+    connectToDevTools: import.meta.env.DEV
   });
 
   return <ApolloProvider client={client}>{children}</ApolloProvider>;
diff --git a/web/src/services/gql/provider/links/authLink.ts b/web/src/services/gql/provider/links/authLink.ts
index b60e31a99..97da8c648 100644
--- a/web/src/services/gql/provider/links/authLink.ts
+++ b/web/src/services/gql/provider/links/authLink.ts
@@ -1,5 +1,4 @@
 import { setContext } from "@apollo/client/link/context";
-
 import { useAuth } from "@reearth/services/auth";
 import { e2eAccessToken } from "@reearth/services/config";
 
@@ -13,8 +12,8 @@ export default () => {
     return {
       headers: {
         ...headers,
-        ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
-      },
+        ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {})
+      }
     };
   });
 };
diff --git a/web/src/services/gql/provider/links/errorLink.ts b/web/src/services/gql/provider/links/errorLink.ts
index 076bcd2a6..6ce70b57e 100644
--- a/web/src/services/gql/provider/links/errorLink.ts
+++ b/web/src/services/gql/provider/links/errorLink.ts
@@ -1,5 +1,4 @@
 import { onError } from "@apollo/client/link/error";
-
 import { reportError } from "@reearth/sentry";
 import { useSetError } from "@reearth/services/state";
 
@@ -15,7 +14,7 @@ export default () => {
     } else {
       error = {
         type: graphQLErrors?.[0].path?.[0].toString(),
-        message: graphQLErrors?.[0].message,
+        message: graphQLErrors?.[0].message
       };
     }
     if (error) {
diff --git a/web/src/services/gql/provider/links/uploadLink.ts b/web/src/services/gql/provider/links/uploadLink.ts
index 11d8b38f3..d0a590b4e 100644
--- a/web/src/services/gql/provider/links/uploadLink.ts
+++ b/web/src/services/gql/provider/links/uploadLink.ts
@@ -2,6 +2,6 @@ import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 
 export default (endpoint: string) => {
   return createUploadLink({
-    uri: endpoint,
+    uri: endpoint
   });
 };
diff --git a/web/src/services/gql/provider/pagination.ts b/web/src/services/gql/provider/pagination.ts
index da7409a05..49aca35be 100644
--- a/web/src/services/gql/provider/pagination.ts
+++ b/web/src/services/gql/provider/pagination.ts
@@ -4,7 +4,7 @@ import { isEqual } from "lodash-es";
 export function paginationMerge(
   existing: any,
   incoming: any,
-  { readField }: { readField: ReadFieldFunction },
+  { readField }: { readField: ReadFieldFunction }
 ) {
   if (existing && incoming && isEqual(existing, incoming)) return incoming;
 
@@ -13,7 +13,7 @@ export function paginationMerge(
   let offset = offsetFromCursor(
     merged,
     incoming?.pageInfo.startCursor,
-    readField,
+    readField
   );
   if (offset < 0) offset = merged.length;
 
@@ -23,14 +23,14 @@ export function paginationMerge(
 
   return {
     ...incoming,
-    edges: merged,
+    edges: merged
   };
 }
 
 function offsetFromCursor(
   items: any,
   cursor: string,
-  readField: ReadFieldFunction,
+  readField: ReadFieldFunction
 ) {
   if (items.length < 1) return -1;
   for (let i = 0; i < items.length; ++i) {
diff --git a/web/src/services/gql/queries/project.ts b/web/src/services/gql/queries/project.ts
index ea60723cc..fcd483c9c 100644
--- a/web/src/services/gql/queries/project.ts
+++ b/web/src/services/gql/queries/project.ts
@@ -206,4 +206,4 @@ export const GET_STARRED_PROJECTS = gql(`
 				totalCount
 			}
   }
-`);
\ No newline at end of file
+`);
diff --git a/web/src/services/i18n/i18n.ts b/web/src/services/i18n/i18n.ts
index 6a68eb44e..2d2cf47ef 100644
--- a/web/src/services/i18n/i18n.ts
+++ b/web/src/services/i18n/i18n.ts
@@ -7,11 +7,11 @@ import ja from "./translations/ja.yml";
 
 const resources = {
   en: {
-    translation: en,
+    translation: en
   },
   ja: {
-    translation: ja,
-  },
+    translation: ja
+  }
 };
 
 export const availableLanguages = Object.keys(resources);
@@ -23,7 +23,7 @@ i18n.use(LanguageDetector).use(initReactI18next).init({
   nsSeparator: false,
   keySeparator: false,
   returnEmptyString: false,
-  returnNull: false,
+  returnNull: false
 });
 
 export default i18n;
diff --git a/web/src/services/i18n/locale.ts b/web/src/services/i18n/locale.ts
index 26f17f1c0..e8b29656b 100644
--- a/web/src/services/i18n/locale.ts
+++ b/web/src/services/i18n/locale.ts
@@ -4,5 +4,5 @@ export const localesWithLabel: {
   [l in (typeof availableLanguages)[number]]: string;
 } = {
   en: "English",
-  ja: "日本語",
+  ja: "日本語"
 };
diff --git a/web/src/services/i18n/publishedProvider.tsx b/web/src/services/i18n/publishedProvider.tsx
index 5ffab2b8a..fdcf11990 100644
--- a/web/src/services/i18n/publishedProvider.tsx
+++ b/web/src/services/i18n/publishedProvider.tsx
@@ -4,7 +4,7 @@ import { I18nextProvider } from "react-i18next";
 import i18n from "./i18n";
 
 export default function PublishedProvider({
-  children,
+  children
 }: {
   children?: ReactNode;
 }) {
diff --git a/web/src/services/routing/index.tsx b/web/src/services/routing/index.tsx
index 18a619a0f..3061903a3 100644
--- a/web/src/services/routing/index.tsx
+++ b/web/src/services/routing/index.tsx
@@ -6,54 +6,54 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 const Dashboard = lazy(() => import("@reearth/beta/pages/Dashboard"));
 const Editor = lazy(() => import("@reearth/beta/pages/EditorPage"));
 const ProjectSettings = lazy(
-  () => import("@reearth/beta/pages/ProjectSettingsPage"),
+  () => import("@reearth/beta/pages/ProjectSettingsPage")
 );
 const PluginPlaygroundPage = lazy(
-  () => import("@reearth/beta/pages/PluginPlaygroundPage"),
+  () => import("@reearth/beta/pages/PluginPlaygroundPage")
 );
 const NotFound = lazy(() => import("@reearth/beta/components/NotFound"));
 const GraphQLPlayground = lazy(
-  () => import("@reearth/beta/pages/GraphQLPlayground"),
+  () => import("@reearth/beta/pages/GraphQLPlayground")
 );
 
 export const AppRoutes = () => {
   const router = createBrowserRouter([
     {
       path: "dashboard/:workspaceId/",
-      element: <Dashboard />,
+      element: <Dashboard />
     },
     {
       path: "dashboard/:workspaceId/:tab",
-      element: <Dashboard />,
+      element: <Dashboard />
     },
     {
       path: "scene/:sceneId/:tab",
-      element: <Editor />,
+      element: <Editor />
     },
     {
       path: "settings/project/:projectId/:tab?/:subId?",
-      element: <ProjectSettings />,
+      element: <ProjectSettings />
     },
     {
       path: "graphql",
-      element: <GraphQLPlayground />,
+      element: <GraphQLPlayground />
     },
     {
       index: true,
-      element: <RootPage />,
+      element: <RootPage />
     },
     {
       path: "auth/*",
-      element: <RootPage />,
+      element: <RootPage />
     },
     {
       path: "plugin-playground",
-      element: <PluginPlaygroundPage />,
+      element: <PluginPlaygroundPage />
     },
     {
       path: "*",
-      element: <NotFound />,
-    },
+      element: <NotFound />
+    }
   ]);
 
   return <StyledRouter router={router} />;
diff --git a/web/src/services/state/devPlugins.ts b/web/src/services/state/devPlugins.ts
index e748ceaeb..53a5636d4 100644
--- a/web/src/services/state/devPlugins.ts
+++ b/web/src/services/state/devPlugins.ts
@@ -5,6 +5,6 @@ export const useDevPluginExtensionRenderKey = () =>
   useAtom(devPluginExtensionRenderKey);
 
 const devPluginExtensions = atom<{ id: string; url: string }[] | undefined>(
-  undefined,
+  undefined
 );
 export const useDevPluginExtensions = () => useAtom(devPluginExtensions);
diff --git a/web/src/services/theme/fonts.ts b/web/src/services/theme/fonts.ts
index e90ee677e..55fcb8b7d 100644
--- a/web/src/services/theme/fonts.ts
+++ b/web/src/services/theme/fonts.ts
@@ -1,7 +1,7 @@
 import { styled } from "../styled";
 
 const type = {
-  base: '"Noto Sans", "hiragino sans", "hiragino kaku gothic proN", -apple-system, BlinkMacSystem, sans-serif',
+  base: '"Noto Sans", "hiragino sans", "hiragino kaku gothic proN", -apple-system, BlinkMacSystem, sans-serif'
 };
 
 const fontSizes = {
@@ -10,12 +10,12 @@ const fontSizes = {
   m: 16,
   s: 14,
   xs: 12,
-  "2xs": 10,
+  "2xs": 10
 };
 
 const weight = {
   normal: "normal",
-  bold: "bold",
+  bold: "bold"
 };
 
 export const XLBold = styled.p`
@@ -95,29 +95,29 @@ export const XXSRegular = styled.p`
 export const typography = {
   xl: {
     bold: XLBold,
-    regular: XLRegular,
+    regular: XLRegular
   },
   l: {
     bold: LBold,
-    regular: LRegular,
+    regular: LRegular
   },
   m: {
     bold: MBold,
     regular: MRegular,
-    paragraph: MParagraph,
+    paragraph: MParagraph
   },
   s: {
     bold: SBold,
     regular: SRegular,
-    paragraph: SParagraph,
+    paragraph: SParagraph
   },
   xs: {
     bold: XSBold,
-    regular: XSRegular,
+    regular: XSRegular
   },
   "2xs": {
-    regular: XXSRegular,
-  },
+    regular: XXSRegular
+  }
 };
 
 export type TypographySize = keyof typeof typography;
@@ -127,7 +127,7 @@ export type FontWeight = keyof typeof weight;
 const fonts = {
   typography: typography,
   weight: weight,
-  sizes: fontSizes,
+  sizes: fontSizes
 };
 
 export default fonts;
diff --git a/web/src/services/theme/publishTheme/colors.ts b/web/src/services/theme/publishTheme/colors.ts
index 26b8f0ae4..e502aac70 100644
--- a/web/src/services/theme/publishTheme/colors.ts
+++ b/web/src/services/theme/publishTheme/colors.ts
@@ -6,7 +6,7 @@ import type { PublishColors } from "./types";
 const publishColors: Omit<PublishColors, "custom"> = {
   dark,
   light,
-  forest,
+  forest
 };
 
 export default publishColors;
diff --git a/web/src/services/theme/publishTheme/darkTheme/colors.ts b/web/src/services/theme/publishTheme/darkTheme/colors.ts
index 36e20d18c..26bae04fa 100644
--- a/web/src/services/theme/publishTheme/darkTheme/colors.ts
+++ b/web/src/services/theme/publishTheme/darkTheme/colors.ts
@@ -4,18 +4,18 @@ const colors: Colors = {
   text: {
     strong: "#EDEDED",
     main: "#C7C5C5",
-    weak: "#767676",
+    weak: "#767676"
   },
   icon: {
     strong: "#C6C6C6",
     main: "#7A7777",
-    weak: "#353535",
+    weak: "#353535"
   },
   other: {
     select: "#3B3CD0",
     mask: "#FFFFFF0D",
-    background: "#171618",
-  },
+    background: "#171618"
+  }
 };
 
 export default colors;
diff --git a/web/src/services/theme/publishTheme/darkTheme/index.ts b/web/src/services/theme/publishTheme/darkTheme/index.ts
index 4beeae0b5..232534cc8 100644
--- a/web/src/services/theme/publishTheme/darkTheme/index.ts
+++ b/web/src/services/theme/publishTheme/darkTheme/index.ts
@@ -11,5 +11,5 @@ export const dark: PublishTheme = {
   weakIcon: colors.icon.weak,
   select: colors.other.select,
   mask: colors.other.mask,
-  background: colors.other.background,
+  background: colors.other.background
 };
diff --git a/web/src/services/theme/publishTheme/forestTheme/colors.ts b/web/src/services/theme/publishTheme/forestTheme/colors.ts
index 1bd5192f1..6bd11c278 100644
--- a/web/src/services/theme/publishTheme/forestTheme/colors.ts
+++ b/web/src/services/theme/publishTheme/forestTheme/colors.ts
@@ -4,18 +4,18 @@ const colors: Colors = {
   text: {
     strong: "#FFFFFF",
     main: "#F9FEFA",
-    weak: "#66AFA2",
+    weak: "#66AFA2"
   },
   icon: {
     strong: "#3DDCC0",
     main: "#38B09B",
-    weak: "#1F8842",
+    weak: "#1F8842"
   },
   other: {
     select: "#3F886A",
     mask: "#1F7461",
-    background: "#1B5F50",
-  },
+    background: "#1B5F50"
+  }
 };
 
 export default colors;
diff --git a/web/src/services/theme/publishTheme/forestTheme/index.ts b/web/src/services/theme/publishTheme/forestTheme/index.ts
index 2cd42270e..fbe907404 100644
--- a/web/src/services/theme/publishTheme/forestTheme/index.ts
+++ b/web/src/services/theme/publishTheme/forestTheme/index.ts
@@ -11,5 +11,5 @@ export const forest: PublishTheme = {
   weakIcon: colors.icon.weak,
   select: colors.other.select,
   mask: colors.other.mask,
-  background: colors.other.background,
+  background: colors.other.background
 };
diff --git a/web/src/services/theme/publishTheme/index.ts b/web/src/services/theme/publishTheme/index.ts
index fcc9d2b6d..e8802b0b0 100644
--- a/web/src/services/theme/publishTheme/index.ts
+++ b/web/src/services/theme/publishTheme/index.ts
@@ -8,7 +8,7 @@ export { default as publishColors } from "./colors";
 export { mask } from "./utils";
 
 export function usePublishTheme(
-  sceneThemeOptions?: SceneThemeOptions,
+  sceneThemeOptions?: SceneThemeOptions
 ): PublishTheme {
   return useMemo(() => publishTheme(sceneThemeOptions), [sceneThemeOptions]);
 }
diff --git a/web/src/services/theme/publishTheme/lightTheme/colors.ts b/web/src/services/theme/publishTheme/lightTheme/colors.ts
index 8f38c8f7e..b36367d04 100644
--- a/web/src/services/theme/publishTheme/lightTheme/colors.ts
+++ b/web/src/services/theme/publishTheme/lightTheme/colors.ts
@@ -4,18 +4,18 @@ const colors: Colors = {
   text: {
     strong: "#FFFFFF",
     main: "#373737",
-    weak: "#878282",
+    weak: "#878282"
   },
   icon: {
     strong: "#E9E9E9",
     main: "#939393",
-    weak: "#C7C7C7",
+    weak: "#C7C7C7"
   },
   other: {
     select: "#F57C4B",
     mask: "#0000001A",
-    background: "#ECECEC",
-  },
+    background: "#ECECEC"
+  }
 };
 
 export default colors;
diff --git a/web/src/services/theme/publishTheme/lightTheme/index.ts b/web/src/services/theme/publishTheme/lightTheme/index.ts
index 999bb70f8..cd3e63617 100644
--- a/web/src/services/theme/publishTheme/lightTheme/index.ts
+++ b/web/src/services/theme/publishTheme/lightTheme/index.ts
@@ -11,5 +11,5 @@ export const light: PublishTheme = {
   weakIcon: colors.icon.weak,
   select: colors.other.select,
   mask: colors.other.mask,
-  background: colors.other.background,
+  background: colors.other.background
 };
diff --git a/web/src/services/theme/publishTheme/utils.ts b/web/src/services/theme/publishTheme/utils.ts
index cd11a8595..9a1884e64 100644
--- a/web/src/services/theme/publishTheme/utils.ts
+++ b/web/src/services/theme/publishTheme/utils.ts
@@ -23,17 +23,17 @@ const themeDefaults: ThemeDefaults = {
   type: "dark",
   backgroundColor: "#dfe5f0",
   textColor: "#434343",
-  selectColor: "#C52C63",
+  selectColor: "#C52C63"
 };
 
 const premadeThemes: Record<PremadeThemeType, PublishTheme> = {
   dark,
   light,
-  forest,
+  forest
 };
 
 export function publishTheme(
-  sceneThemeOptions?: SceneThemeOptions,
+  sceneThemeOptions?: SceneThemeOptions
 ): PublishTheme {
   if (sceneThemeOptions?.themeType) {
     if (sceneThemeOptions.themeType in premadeThemes) {
@@ -50,7 +50,7 @@ export function publishTheme(
     themeTextColor:
       sceneThemeOptions?.themeTextColor || themeDefaults.textColor,
     themeSelectColor:
-      sceneThemeOptions?.themeSelectColor || themeDefaults.selectColor,
+      sceneThemeOptions?.themeSelectColor || themeDefaults.selectColor
   };
 
   const isBackgroundDark = isDark(options?.themeBackgroundColor);
@@ -68,6 +68,6 @@ export function publishTheme(
       : "#FFFFFF",
     weakText: tinycolor(options.themeTextColor).setAlpha(0.5).toHex8String(),
     mainIcon: tinycolor(options.themeTextColor).setAlpha(0.5).toHex8String(),
-    weakIcon: tinycolor(options.themeTextColor).setAlpha(0.25).toHex8String(),
+    weakIcon: tinycolor(options.themeTextColor).setAlpha(0.25).toHex8String()
   };
 }
diff --git a/web/src/services/theme/reearthTheme/common/colors.ts b/web/src/services/theme/reearthTheme/common/colors.ts
index 93ba81a90..d9aed2ec0 100644
--- a/web/src/services/theme/reearthTheme/common/colors.ts
+++ b/web/src/services/theme/reearthTheme/common/colors.ts
@@ -2,7 +2,7 @@ export const brandBlue = {
   light: "#4770FF",
   main: "#3B3CD0",
   dark: "#212288",
-  darkest: "#161650",
+  darkest: "#161650"
 };
 
 export const brandRed = {
@@ -10,5 +10,5 @@ export const brandRed = {
   light: "#FF753C",
   main: "#E95518",
   dark: "#D33E00",
-  darkest: "#A73100",
+  darkest: "#A73100"
 };
diff --git a/web/src/services/theme/reearthTheme/common/fonts.ts b/web/src/services/theme/reearthTheme/common/fonts.ts
index 133f121ca..7e0f40b57 100644
--- a/web/src/services/theme/reearthTheme/common/fonts.ts
+++ b/web/src/services/theme/reearthTheme/common/fonts.ts
@@ -10,7 +10,7 @@ const fontSizes = {
   h4: 20,
   h5: 16,
   body: 12,
-  footnote: 11,
+  footnote: 11
 };
 
 export type FontSize = keyof typeof fontSizes;
@@ -22,7 +22,7 @@ const lineHeights = {
   h4: 28,
   h5: 24,
   body: 18,
-  footnote: 16,
+  footnote: 16
 };
 
 export type LineHeight = keyof typeof lineHeights;
@@ -30,7 +30,7 @@ export type LineHeight = keyof typeof lineHeights;
 const fontWeights = {
   regular: "normal",
   medium: 500,
-  bold: "bold",
+  bold: "bold"
 };
 
 export type FontWeight = keyof typeof fontWeights;
@@ -38,7 +38,7 @@ export type FontWeight = keyof typeof fontWeights;
 const _uniqueTraits = {
   underline: "underline",
   italic: "italic",
-  strike: "strike",
+  strike: "strike"
 };
 
 export type UniqueTraits = keyof typeof _uniqueTraits;
@@ -182,23 +182,23 @@ type Typography = {
 export const typography: Typography = {
   h1: {
     bold: H1Bold,
-    regular: H1Regular,
+    regular: H1Regular
   },
   h2: {
     bold: H2Bold,
-    regular: H2Regular,
+    regular: H2Regular
   },
   h3: {
     bold: H3Bold,
-    regular: H3Regular,
+    regular: H3Regular
   },
   h4: {
     bold: H4Bold,
-    regular: H4Regular,
+    regular: H4Regular
   },
   h5: {
     bold: H5Bold,
-    regular: H5Regular,
+    regular: H5Regular
   },
   body: {
     bold: BodyBold,
@@ -206,18 +206,18 @@ export const typography: Typography = {
     regular: BodyRegular,
     underline: BodyRegularUnderline,
     strike: BodyRegularStrike,
-    italic: BodyRegularItalic,
+    italic: BodyRegularItalic
   },
   footnote: {
-    regular: FootnoteRegular,
-  },
+    regular: FootnoteRegular
+  }
 };
 
 const fonts = {
   typography: typography,
   weight: fontWeights,
   sizes: fontSizes,
-  lineHeights: lineHeights,
+  lineHeights: lineHeights
 };
 
 export default fonts;
diff --git a/web/src/services/theme/reearthTheme/common/icons.ts b/web/src/services/theme/reearthTheme/common/icons.ts
index b4aeb2e9c..c4af27c6c 100644
--- a/web/src/services/theme/reearthTheme/common/icons.ts
+++ b/web/src/services/theme/reearthTheme/common/icons.ts
@@ -1,7 +1,7 @@
 export const iconSizes = {
   small: 12,
   normal: 16,
-  large: 20,
+  large: 20
 } as const;
 
 export type IconsSizeType = typeof iconSizes;
diff --git a/web/src/services/theme/reearthTheme/common/index.ts b/web/src/services/theme/reearthTheme/common/index.ts
index f4c498a81..9042ee9f7 100644
--- a/web/src/services/theme/reearthTheme/common/index.ts
+++ b/web/src/services/theme/reearthTheme/common/index.ts
@@ -22,7 +22,7 @@ const common: Common = {
   icon: iconSizes,
   radius: radiusSizes,
   shadow,
-  fonts,
+  fonts
 };
 
 export default common;
diff --git a/web/src/services/theme/reearthTheme/common/radius.ts b/web/src/services/theme/reearthTheme/common/radius.ts
index 1f67b3262..a1b1a7a89 100644
--- a/web/src/services/theme/reearthTheme/common/radius.ts
+++ b/web/src/services/theme/reearthTheme/common/radius.ts
@@ -3,7 +3,7 @@ const radiusSizes = {
   smallest: 2,
   small: 4,
   normal: 6,
-  large: 8,
+  large: 8
 } as const;
 
 export type RadiusSizesType = typeof radiusSizes;
diff --git a/web/src/services/theme/reearthTheme/common/shadow.ts b/web/src/services/theme/reearthTheme/common/shadow.ts
index 3e71aa381..39f321d59 100644
--- a/web/src/services/theme/reearthTheme/common/shadow.ts
+++ b/web/src/services/theme/reearthTheme/common/shadow.ts
@@ -2,7 +2,7 @@ const shadow = {
   input: "0px 2px 2px 0px rgba(0, 0, 0, 0.25) inset",
   button: "0px 2px 2px 0px rgba(0, 0, 0, 0.25)",
   card: "2px 2px 2px 0px rgba(0, 0, 0, 0.25)",
-  popup: "4px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+  popup: "4px 4px 4px 0px rgba(0, 0, 0, 0.25)"
 } as const;
 
 export type ShadowType = typeof shadow;
diff --git a/web/src/services/theme/reearthTheme/common/spacing.ts b/web/src/services/theme/reearthTheme/common/spacing.ts
index 99cffac3b..6abd242e3 100644
--- a/web/src/services/theme/reearthTheme/common/spacing.ts
+++ b/web/src/services/theme/reearthTheme/common/spacing.ts
@@ -5,7 +5,7 @@ const spacingSizes = {
   normal: 12,
   large: 16,
   largest: 20,
-  super: 24,
+  super: 24
 } as const;
 
 export type SpacingSizesType = typeof spacingSizes;
diff --git a/web/src/services/theme/reearthTheme/common/zIndex.ts b/web/src/services/theme/reearthTheme/common/zIndex.ts
index a3391eaa8..0297b713c 100644
--- a/web/src/services/theme/reearthTheme/common/zIndex.ts
+++ b/web/src/services/theme/reearthTheme/common/zIndex.ts
@@ -7,26 +7,26 @@ export const zIndex = {
     storyPage: {
       indicator: {
         unselected: 210,
-        selected: 215,
-      },
+        selected: 215
+      }
     },
     pluginPopup: 300,
     pluginModal: 305,
     infobox: 400,
-    overlay: 600,
+    overlay: 600
   },
   editor: {
     navbar: 500,
     panel: 500,
     modal: {
       bg: 700,
-      self: 705,
+      self: 705
     },
     popover: 750,
     loading: 900,
-    notificationBar: 1000,
+    notificationBar: 1000
   },
-  hidden: -1,
+  hidden: -1
 };
 
 export default zIndex;
diff --git a/web/src/services/theme/reearthTheme/darkTheme/index.ts b/web/src/services/theme/reearthTheme/darkTheme/index.ts
index c6102712c..c6b85d7b9 100644
--- a/web/src/services/theme/reearthTheme/darkTheme/index.ts
+++ b/web/src/services/theme/reearthTheme/darkTheme/index.ts
@@ -13,43 +13,43 @@ const darkTheme: Theme = {
     1: gray[90],
     2: gray[80],
     3: gray[70],
-    4: gray[60],
+    4: gray[60]
   },
   content: {
     withBackground: white,
     weaker: gray[70],
     weak: gray[60],
     main: gray[20],
-    strong: gray[10],
+    strong: gray[10]
   },
   select: {
     weaker: rgba(brandBlue.main, 0.2),
     weak: rgba(brandBlue.main, 0.5),
     main: brandBlue.main,
-    strong: brandBlue.light,
+    strong: brandBlue.light
   },
   item: { default: "#FFFFFF", hover: gray[90] },
   outline: {
     weakest: rgba("#000000", 0.25),
     weaker: coolGray[80],
     weak: coolGray[70],
-    main: gray[40],
+    main: gray[40]
   },
   primary: {
     weakest: blue[80],
     weak: blue[70],
     main: blue[60],
-    strong: blue[50],
+    strong: blue[50]
   },
   secondary: {
     weak: coolGray[80],
     main: coolGray[70],
-    strong: coolGray[60],
+    strong: coolGray[60]
   },
   dangerous: {
     main: red[60],
     weak: red[70],
-    strong: brandRed.dark,
+    strong: brandRed.dark
   },
   warning: { main: yellow[30] },
   relative: {
@@ -59,16 +59,16 @@ const darkTheme: Theme = {
     dim: rgba("#ffffff", 0.05),
     dark: rgba("#000000", 0.1),
     darker: rgba("#000000", 0.15),
-    darkest: rgba("#000000", 0.2),
+    darkest: rgba("#000000", 0.2)
   },
   placeHolder: {
     main_1: rgba("#FF560E", 0.2),
-    main_2: rgba(brandBlue.main, 0.2),
+    main_2: rgba(brandBlue.main, 0.2)
   },
   colorSchema: "dark",
   publish: {
-    main: "#24A148",
-  },
+    main: "#24A148"
+  }
 };
 
 export default darkTheme;
diff --git a/web/src/services/theme/reearthTheme/lightTheme/index.ts b/web/src/services/theme/reearthTheme/lightTheme/index.ts
index 768b2d919..4080509c9 100644
--- a/web/src/services/theme/reearthTheme/lightTheme/index.ts
+++ b/web/src/services/theme/reearthTheme/lightTheme/index.ts
@@ -13,43 +13,43 @@ const lightTheme: Theme = {
     1: gray[10],
     2: gray[30],
     3: gray[50],
-    4: gray[60],
+    4: gray[60]
   },
   content: {
     withBackground: white,
     weaker: gray[30],
     weak: gray[60],
     main: gray[90],
-    strong: gray[100],
+    strong: gray[100]
   },
   select: {
     weaker: rgba(brandBlue.main, 0.2),
     weak: white,
     main: brandBlue.main,
-    strong: brandBlue.light,
+    strong: brandBlue.light
   },
   item: { default: "#FFFFFF", hover: gray[90] },
   outline: {
     weakest: rgba("#000000", 0.25),
     weaker: coolGray[30],
     weak: gray[50],
-    main: gray[50],
+    main: gray[50]
   },
   primary: {
     weakest: white,
     weak: blue[70],
     main: blue[60],
-    strong: white,
+    strong: white
   },
   secondary: {
     weak: coolGray[20],
     main: coolGray[40],
-    strong: coolGray[50],
+    strong: coolGray[50]
   },
   dangerous: {
     main: red[60],
     weak: red[70],
-    strong: brandRed.dark,
+    strong: brandRed.dark
   },
   warning: { main: yellow[30] },
   relative: {
@@ -59,15 +59,15 @@ const lightTheme: Theme = {
     dim: rgba("#ffffff", 0.05),
     dark: rgba("#000000", 0.1),
     darker: rgba("#000000", 0.15),
-    darkest: rgba("#000000", 0.2),
+    darkest: rgba("#000000", 0.2)
   },
   placeHolder: {
     main_1: rgba("#FF560E", 0.2),
-    main_2: rgba(brandBlue.main, 0.2),
+    main_2: rgba(brandBlue.main, 0.2)
   },
   colorSchema: "light",
   publish: {
-    main: "#24A148",
-  },
+    main: "#24A148"
+  }
 };
 export default lightTheme;
diff --git a/web/src/test/setup.ts b/web/src/test/setup.ts
index f891009ca..234e8b7ef 100644
--- a/web/src/test/setup.ts
+++ b/web/src/test/setup.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 import {
   type EmotionMatchers,
-  matchers as emotionMatchers,
+  matchers as emotionMatchers
 } from "@emotion/jest";
 import * as domMatchers from "@testing-library/jest-dom/matchers";
 import { cleanup } from "@testing-library/react";
@@ -33,13 +33,13 @@ Object.defineProperty(window, "matchMedia", {
     removeListener: vi.fn(), // deprecated
     addEventListener: vi.fn(),
     removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
+    dispatchEvent: vi.fn()
+  }))
 });
 
 Object.defineProperty(window, "requestIdleCallback", {
   writable: true,
-  value: vi.fn(),
+  value: vi.fn()
 });
 
 afterEach(cleanup);
diff --git a/web/src/test/utils.tsx b/web/src/test/utils.tsx
index 7d296483a..2dc3d5380 100644
--- a/web/src/test/utils.tsx
+++ b/web/src/test/utils.tsx
@@ -1,6 +1,6 @@
 import {
   MockedProvider as MockedGqlProvider,
-  MockedResponse,
+  MockedResponse
 } from "@apollo/client/testing";
 import { render as rtlRender } from "@testing-library/react";
 import { vitest } from "vitest";
@@ -21,14 +21,14 @@ vitest.mock("react-inlinesvg", () => {
           height={props.size}
         />
       );
-    },
+    }
   };
 });
 
 const render = (
   ui: React.ReactElement,
   queryMocks?: readonly MockedResponse<Record<string, any>>[],
-  { ...renderOptions } = {},
+  { ...renderOptions } = {}
 ) => {
   const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
     return (
diff --git a/web/src/types.ts b/web/src/types.ts
index 03d2ef08c..4b1563564 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -37,7 +37,7 @@ export type OmitFunc3<F extends (a: any, b: any, c: any, ...args: any) => any> =
 
 export type ExtendedFuncProps<
   P extends { [key in string]?: (...args: any) => any },
-  A,
+  A
 > = {
   [K in keyof P]?: ExtendedFunc<NonNullable<P[K]>, A>;
 };
@@ -45,7 +45,7 @@ export type ExtendedFuncProps<
 export type ExtendedFuncProps2<
   P extends { [key in string]?: (...args: any) => any },
   A,
-  B,
+  B
 > = {
   [K in keyof P]?: ExtendedFunc2<NonNullable<P[K]>, A, B>;
 };
@@ -54,25 +54,25 @@ export type ExtendedFuncProps3<
   P extends { [key in string]?: (...args: any) => any },
   A,
   B,
-  C,
+  C
 > = {
   [K in keyof P]?: ExtendedFunc3<NonNullable<P[K]>, A, B, C>;
 };
 
 export type OmitFuncProps<
-  P extends { [key in string]?: (...args: any) => any },
+  P extends { [key in string]?: (...args: any) => any }
 > = {
   [K in keyof P]?: OmitFunc<NonNullable<P[K]>>;
 };
 
 export type OmitFuncProps2<
-  P extends { [key in string]?: (...args: any) => any },
+  P extends { [key in string]?: (...args: any) => any }
 > = {
   [K in keyof P]?: OmitFunc2<NonNullable<P[K]>>;
 };
 
 export type OmitFuncProps3<
-  P extends { [key in string]?: (...args: any) => any },
+  P extends { [key in string]?: (...args: any) => any }
 > = {
   [K in keyof P]?: OmitFunc3<NonNullable<P[K]>>;
 };
diff --git a/web/src/wdyr.ts b/web/src/wdyr.ts
index 79a894108..779c5e0d6 100644
--- a/web/src/wdyr.ts
+++ b/web/src/wdyr.ts
@@ -9,7 +9,7 @@ export default async function wdyr() {
       "@welldone-software/why-did-you-render"
     );
     whyDidYouRender(React, {
-      trackAllPureComponents: true,
+      trackAllPureComponents: true
     });
   }
 }
diff --git a/web/vite.config.ts b/web/vite.config.ts
index c22f65cc9..b99dff26e 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -31,8 +31,8 @@ try {
   const cesiumPackageJson = JSON.parse(
     readFileSync(
       resolve(__dirname, "node_modules", "cesium", "package.json"),
-      "utf-8",
-    ),
+      "utf-8"
+    )
   );
   cesiumVersion = cesiumPackageJson.version;
 } catch {
@@ -46,22 +46,22 @@ export default defineConfig({
     react(),
     yaml(),
     cesium({
-      cesiumBaseUrl: cesiumVersion ? `cesium-${cesiumVersion}/` : undefined,
+      cesiumBaseUrl: cesiumVersion ? `cesium-${cesiumVersion}/` : undefined
     }),
     serverHeaders(),
     config(),
-    tsconfigPaths(),
+    tsconfigPaths()
   ],
   // https://github.com/storybookjs/storybook/issues/25256
   assetsInclude: ["/sb-preview/runtime.js"],
   define: {
     "process.env.QTS_DEBUG": "false", // quickjs-emscripten
     __APP_VERSION__: JSON.stringify(pkg.version),
-    __REEARTH_COMMIT_HASH__: JSON.stringify(commitHash),
+    __REEARTH_COMMIT_HASH__: JSON.stringify(commitHash)
   },
   mode: NO_MINIFY ? "development" : undefined,
   server: {
-    port: 3000,
+    port: 3000
   },
   build: {
     target: "esnext",
@@ -69,15 +69,15 @@ export default defineConfig({
     rollupOptions: {
       input: {
         main: resolve(__dirname, "index.html"),
-        published: resolve(__dirname, "published.html"),
-      },
+        published: resolve(__dirname, "published.html")
+      }
     },
-    minify: NO_MINIFY ? false : "esbuild",
+    minify: NO_MINIFY ? false : "esbuild"
   },
   resolve: {
     alias: [
-      { find: "crypto", replacement: "crypto-js" }, // quickjs-emscripten
-    ],
+      { find: "crypto", replacement: "crypto-js" } // quickjs-emscripten
+    ]
   },
   test: {
     environment: "jsdom",
@@ -91,15 +91,15 @@ export default defineConfig({
         "src/**/*.cy.tsx",
         "src/**/*.stories.tsx",
         "src/beta/services/gql/__gen__/**/*",
-        "src/test/**/*",
+        "src/test/**/*"
       ],
-      reporter: ["text", "json", "lcov"],
+      reporter: ["text", "json", "lcov"]
     },
     alias: [
       { find: "crypto", replacement: "crypto" }, // reset setting for quickjs-emscripten
-      { find: "csv-parse", replacement: "csv-parse" },
-    ],
-  },
+      { find: "csv-parse", replacement: "csv-parse" }
+    ]
+  }
 });
 
 function serverHeaders(): Plugin {
@@ -110,7 +110,7 @@ function serverHeaders(): Plugin {
         res.setHeader("Service-Worker-Allowed", "/");
         next();
       });
-    },
+    }
   };
 }
 
@@ -121,7 +121,7 @@ function config(): Plugin {
       const envs = loadEnv(
         server.config.mode,
         server.config.envDir ?? process.cwd(),
-        server.config.envPrefix,
+        server.config.envPrefix
       );
       const remoteReearthConfig = envs.REEARTH_WEB_CONFIG_URL
         ? await (await fetch(envs.REEARTH_WEB_CONFIG_URL)).json()
@@ -150,12 +150,12 @@ function config(): Plugin {
             ? { cesiumIonAccessToken: process.env.CESIUM_ION_ACCESS_TOKEN }
             : {}),
           ...readEnv("REEARTH_WEB", {
-            source: envs,
+            source: envs
           }),
-          ...loadJSON("./reearth-config.json"),
+          ...loadJSON("./reearth-config.json")
         },
         null,
-        2,
+        2
       );
 
       server.middlewares.use((req, res, next) => {
@@ -168,7 +168,7 @@ function config(): Plugin {
           next();
         }
       });
-    },
+    }
   };
 }
 

From 132e65f54eb56382b1070bbb8bbff4bae8a35d09 Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Fri, 30 Aug 2024 10:56:30 +0300
Subject: [PATCH 20/23] refactor(web): remove unused component (#1118)

---
 web/src/app.tsx                               |   3 +-
 .../components/Accordion/AccordionItem.tsx    |  86 -----
 .../components/Accordion/index.stories.tsx    |  40 ---
 .../beta/components/Accordion/index.test.tsx  |  45 ---
 web/src/beta/components/Accordion/index.tsx   |  48 ---
 .../beta/components/Avatar/index.stories.tsx  |  19 --
 web/src/beta/components/Avatar/index.tsx      |  61 ----
 web/src/beta/components/Box/index.stories.tsx |  29 --
 web/src/beta/components/Box/index.tsx         | 101 ------
 .../components/CatalogCard/index.stories.tsx  |  50 ---
 web/src/beta/components/CatalogCard/index.tsx | 238 --------------
 .../CheckboxField/index.stories.tsx           |  18 --
 .../beta/components/CheckboxField/index.tsx   |  56 ----
 .../components/Collapse/index.stories.tsx     |  26 --
 web/src/beta/components/Collapse/index.tsx    |  64 ----
 .../beta/components/ContentPicker/README.md   |  12 -
 .../ContentPicker/index.stories.tsx           |  21 --
 .../beta/components/ContentPicker/index.tsx   | 115 -------
 .../beta/components/Divider/index.stories.tsx |  13 -
 web/src/beta/components/Divider/index.tsx     |  26 --
 .../beta/components/DragAndDropList/Item.tsx  | 138 --------
 .../DragAndDropList/index.stories.tsx         |  78 -----
 .../beta/components/DragAndDropList/index.tsx | 102 ------
 .../components/DragAndDropList/scrollItem.tsx |  32 --
 web/src/beta/components/Filled/index.ts       |  10 -
 .../components/InsertionBar/index.stories.tsx |  36 ---
 .../beta/components/InsertionBar/index.tsx    | 164 ----------
 .../InsertionButton/index.stories.tsx         |  11 -
 .../beta/components/InsertionButton/index.tsx |  52 ---
 .../components/ListItem/index.stories.tsx     |  19 --
 web/src/beta/components/ListItem/index.tsx    | 123 -------
 .../beta/components/Loading/index.stories.tsx |  13 -
 web/src/beta/components/Loading/index.tsx     |  63 ----
 .../components/Modal/ModalFrame/index.tsx     | 122 -------
 .../beta/components/Modal/index.stories.tsx   | 147 ---------
 web/src/beta/components/Modal/index.tsx       | 155 ---------
 .../PopoverMenuContent/index.stories.tsx      |  52 ---
 .../components/PopoverMenuContent/index.tsx   | 108 -------
 web/src/beta/components/Portal/index.tsx      |  14 -
 .../RadioGroup/RadioBox/index.stories.tsx     |  35 --
 .../components/RadioGroup/RadioBox/index.tsx  |  89 -----
 .../components/RadioGroup/index.stories.tsx   |  60 ----
 web/src/beta/components/RadioGroup/index.tsx  |  53 ---
 .../components/RangeSlider/index.stories.tsx  |  57 ----
 web/src/beta/components/RangeSlider/index.tsx |  89 -----
 web/src/beta/components/Resizable/hooks.ts    | 197 ------------
 .../components/Resizable/index.stories.tsx    |  60 ----
 web/src/beta/components/Resizable/index.tsx   | 137 --------
 .../SettingsButtons/index.stories.tsx         |  28 --
 .../beta/components/SettingsButtons/index.tsx |  63 ----
 .../SidePanelSectionField/index.stories.tsx   |  24 --
 .../SidePanelSectionField/index.tsx           |  87 -----
 .../index.stories.tsx                         |  28 --
 .../StorytellingPageSectionItem/index.tsx     |  81 -----
 .../SubTabButtonList/index.stories.tsx        |  21 --
 .../components/SubTabButtonList/index.tsx     |  46 ---
 .../SwitchButtonList/index.stories.tsx        |  19 --
 .../components/SwitchButtonList/index.tsx     |  58 ----
 .../components/TabButton/index.stories.tsx    |  25 --
 .../beta/components/TabButton/index.test.tsx  |  27 --
 web/src/beta/components/TabButton/index.tsx   |  53 ---
 .../beta/components/TabMenu/index.stories.tsx | 113 -------
 web/src/beta/components/TabMenu/index.tsx     | 122 -------
 .../beta/components/Toggle/index.stories.tsx  |  57 ----
 web/src/beta/components/Toggle/index.tsx      |  55 ----
 .../fields/CameraField/CapturePanel/index.tsx | 112 -------
 .../fields/CameraField/EditPanel/hooks.ts     |  75 -----
 .../fields/CameraField/EditPanel/index.tsx    |  91 ------
 .../fields/CameraField/index.stories.tsx      |  66 ----
 .../components/fields/CameraField/index.tsx   | 187 -----------
 .../components/fields/CameraField/types.ts    |  11 -
 .../components/fields/CameraField/utils.ts    |  27 --
 .../components/fields/ColorField/hooks.ts     | 157 ---------
 .../fields/ColorField/index.stories.tsx       |  16 -
 .../components/fields/ColorField/index.tsx    | 303 ------------------
 .../components/fields/ColorField/types.ts     |  20 --
 .../components/fields/ColorField/utils.ts     |  28 --
 .../fields/DateTimeField/EditPanel/hooks.ts   | 105 ------
 .../fields/DateTimeField/EditPanel/index.tsx  | 128 --------
 .../fields/DateTimeField/index.stories.tsx    |  18 --
 .../components/fields/DateTimeField/index.tsx | 144 ---------
 .../fields/ListField/index.stories.tsx        | 111 -------
 .../components/fields/ListField/index.tsx     | 148 ---------
 .../fields/LocationField/index.stories.tsx    |  20 --
 .../components/fields/LocationField/index.tsx |  62 ----
 .../fields/NumberField/index.stories.tsx      |  84 -----
 .../components/fields/NumberField/index.tsx   |  42 ---
 .../fields/Property/PropertyField/hooks.ts    |  54 ----
 .../fields/Property/PropertyField/index.tsx   | 184 -----------
 .../fields/Property/PropertyItem/index.tsx    | 142 --------
 .../Property/PropertyList/index.stories.tsx   |  72 -----
 .../fields/Property/PropertyList/index.tsx    | 153 ---------
 .../beta/components/fields/Property/hooks.ts  |  54 ----
 .../fields/RangeField/index.stories.tsx       |  62 ----
 .../components/fields/RangeField/index.tsx    |  46 ---
 .../fields/SelectField/index.stories.tsx      | 133 --------
 .../components/fields/SelectField/index.tsx   | 279 ----------------
 .../fields/SliderField/index.stories.tsx      |  71 ----
 .../components/fields/SliderField/index.tsx   |  42 ---
 .../fields/SpacingInput/index.stories.tsx     |  27 --
 .../components/fields/SpacingInput/index.tsx  | 103 ------
 .../fields/TextAreaField/index.stories.tsx    |  65 ----
 .../components/fields/TextAreaField/index.tsx | 100 ------
 .../fields/TextField/index.stories.tsx        |  26 --
 .../components/fields/TextField/index.tsx     |  39 ---
 .../fields/TimelineField/EditPanel/hooks.ts   | 112 -------
 .../fields/TimelineField/EditPanel/index.tsx  | 137 --------
 .../components/fields/TimelineField/index.tsx | 191 -----------
 .../fields/ToggleField/index.stories.tsx      |  67 ----
 .../components/fields/ToggleField/index.tsx   |  19 --
 .../fields/URLField/index.stories.tsx         |  45 ---
 .../beta/components/fields/URLField/index.tsx | 145 ---------
 .../components/fields/common/PanelCommon.tsx  |  63 ----
 web/src/beta/components/fields/utils.ts       |  30 --
 web/src/beta/features/Assets/constants.ts     |   6 -
 web/src/beta/features/Assets/hooks.ts         | 189 -----------
 web/src/beta/features/Assets/types.ts         |  14 -
 .../Projects/ProjectCreatorModal.tsx          |  14 +-
 .../Editor/Story/PageSettingsPanel/hooks.ts   |   3 +-
 .../TempContentStory/Action/index.stories.tsx |  16 -
 .../Story/TempContentStory/Action/index.tsx   |  67 ----
 .../PageItemWrapper/index.stories.tsx         |  17 -
 .../PageItemWrapper/index.tsx                 |  48 ---
 .../Story/TempContentStory/index.stories.tsx  |  19 --
 .../Editor/Story/TempContentStory/index.tsx   | 206 ------------
 .../beta/features/Editor/Visualizer/type.ts   |   7 +-
 web/src/beta/features/Editor/utils.tsx        | 197 ------------
 .../beta/features/Modals/AssetModal/index.tsx | 285 ----------------
 .../features/Modals/LayerStyleModal/hooks.ts  | 100 ------
 .../features/Modals/LayerStyleModal/index.tsx | 177 ----------
 .../beta/features/Navbar/useRightSection.tsx  |  53 +--
 web/src/beta/features/Notification/index.tsx  | 114 ++++---
 .../ProjectSettings/MenuList/index.tsx        |  58 ----
 .../innerPages/GeneralSettings/index.tsx      |   8 +-
 .../PluginInstall/PluginInstallCardButton.tsx |  10 +-
 web/src/beta/features/RootPage/index.tsx      |   7 +-
 .../builtin/Timeline/UI/ScaleList.test.tsx    | 143 ---------
 .../Widget/builtin/Timeline/UI/ScaleList.tsx  |  85 +++--
 .../Widget/builtin/Timeline/UI/index.test.tsx | 183 -----------
 web/src/beta/hooks/useAssetUploader/hooks.tsx |  54 ----
 .../beta/pages/AccountSettingsPage/index.tsx  |   6 +-
 .../beta/pages/GraphQLPlayground/index.tsx    |  13 +-
 web/src/beta/pages/Page.tsx                   |   2 +-
 web/src/services/i18n/translations/en.yml     |  84 ++---
 web/src/services/i18n/translations/ja.yml     |  88 ++---
 145 files changed, 239 insertions(+), 10644 deletions(-)
 delete mode 100644 web/src/beta/components/Accordion/AccordionItem.tsx
 delete mode 100644 web/src/beta/components/Accordion/index.stories.tsx
 delete mode 100644 web/src/beta/components/Accordion/index.test.tsx
 delete mode 100644 web/src/beta/components/Accordion/index.tsx
 delete mode 100644 web/src/beta/components/Avatar/index.stories.tsx
 delete mode 100644 web/src/beta/components/Avatar/index.tsx
 delete mode 100644 web/src/beta/components/Box/index.stories.tsx
 delete mode 100644 web/src/beta/components/Box/index.tsx
 delete mode 100644 web/src/beta/components/CatalogCard/index.stories.tsx
 delete mode 100644 web/src/beta/components/CatalogCard/index.tsx
 delete mode 100644 web/src/beta/components/CheckboxField/index.stories.tsx
 delete mode 100644 web/src/beta/components/CheckboxField/index.tsx
 delete mode 100644 web/src/beta/components/Collapse/index.stories.tsx
 delete mode 100644 web/src/beta/components/Collapse/index.tsx
 delete mode 100644 web/src/beta/components/ContentPicker/README.md
 delete mode 100644 web/src/beta/components/ContentPicker/index.stories.tsx
 delete mode 100644 web/src/beta/components/ContentPicker/index.tsx
 delete mode 100644 web/src/beta/components/Divider/index.stories.tsx
 delete mode 100644 web/src/beta/components/Divider/index.tsx
 delete mode 100644 web/src/beta/components/DragAndDropList/Item.tsx
 delete mode 100644 web/src/beta/components/DragAndDropList/index.stories.tsx
 delete mode 100644 web/src/beta/components/DragAndDropList/index.tsx
 delete mode 100644 web/src/beta/components/DragAndDropList/scrollItem.tsx
 delete mode 100644 web/src/beta/components/Filled/index.ts
 delete mode 100644 web/src/beta/components/InsertionBar/index.stories.tsx
 delete mode 100644 web/src/beta/components/InsertionBar/index.tsx
 delete mode 100644 web/src/beta/components/InsertionButton/index.stories.tsx
 delete mode 100644 web/src/beta/components/InsertionButton/index.tsx
 delete mode 100644 web/src/beta/components/ListItem/index.stories.tsx
 delete mode 100644 web/src/beta/components/ListItem/index.tsx
 delete mode 100644 web/src/beta/components/Loading/index.stories.tsx
 delete mode 100644 web/src/beta/components/Loading/index.tsx
 delete mode 100644 web/src/beta/components/Modal/ModalFrame/index.tsx
 delete mode 100644 web/src/beta/components/Modal/index.stories.tsx
 delete mode 100644 web/src/beta/components/Modal/index.tsx
 delete mode 100644 web/src/beta/components/PopoverMenuContent/index.stories.tsx
 delete mode 100644 web/src/beta/components/PopoverMenuContent/index.tsx
 delete mode 100644 web/src/beta/components/Portal/index.tsx
 delete mode 100644 web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx
 delete mode 100644 web/src/beta/components/RadioGroup/RadioBox/index.tsx
 delete mode 100644 web/src/beta/components/RadioGroup/index.stories.tsx
 delete mode 100644 web/src/beta/components/RadioGroup/index.tsx
 delete mode 100644 web/src/beta/components/RangeSlider/index.stories.tsx
 delete mode 100644 web/src/beta/components/RangeSlider/index.tsx
 delete mode 100644 web/src/beta/components/Resizable/hooks.ts
 delete mode 100644 web/src/beta/components/Resizable/index.stories.tsx
 delete mode 100644 web/src/beta/components/Resizable/index.tsx
 delete mode 100644 web/src/beta/components/SettingsButtons/index.stories.tsx
 delete mode 100644 web/src/beta/components/SettingsButtons/index.tsx
 delete mode 100644 web/src/beta/components/SidePanelSectionField/index.stories.tsx
 delete mode 100644 web/src/beta/components/SidePanelSectionField/index.tsx
 delete mode 100644 web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
 delete mode 100644 web/src/beta/components/StorytellingPageSectionItem/index.tsx
 delete mode 100644 web/src/beta/components/SubTabButtonList/index.stories.tsx
 delete mode 100644 web/src/beta/components/SubTabButtonList/index.tsx
 delete mode 100644 web/src/beta/components/SwitchButtonList/index.stories.tsx
 delete mode 100644 web/src/beta/components/SwitchButtonList/index.tsx
 delete mode 100644 web/src/beta/components/TabButton/index.stories.tsx
 delete mode 100644 web/src/beta/components/TabButton/index.test.tsx
 delete mode 100644 web/src/beta/components/TabButton/index.tsx
 delete mode 100644 web/src/beta/components/TabMenu/index.stories.tsx
 delete mode 100644 web/src/beta/components/TabMenu/index.tsx
 delete mode 100644 web/src/beta/components/Toggle/index.stories.tsx
 delete mode 100644 web/src/beta/components/Toggle/index.tsx
 delete mode 100644 web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
 delete mode 100644 web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
 delete mode 100644 web/src/beta/components/fields/CameraField/EditPanel/index.tsx
 delete mode 100644 web/src/beta/components/fields/CameraField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/CameraField/index.tsx
 delete mode 100644 web/src/beta/components/fields/CameraField/types.ts
 delete mode 100644 web/src/beta/components/fields/CameraField/utils.ts
 delete mode 100644 web/src/beta/components/fields/ColorField/hooks.ts
 delete mode 100644 web/src/beta/components/fields/ColorField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/ColorField/index.tsx
 delete mode 100644 web/src/beta/components/fields/ColorField/types.ts
 delete mode 100644 web/src/beta/components/fields/ColorField/utils.ts
 delete mode 100644 web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
 delete mode 100644 web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
 delete mode 100644 web/src/beta/components/fields/DateTimeField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/DateTimeField/index.tsx
 delete mode 100644 web/src/beta/components/fields/ListField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/ListField/index.tsx
 delete mode 100644 web/src/beta/components/fields/LocationField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/LocationField/index.tsx
 delete mode 100644 web/src/beta/components/fields/NumberField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/NumberField/index.tsx
 delete mode 100644 web/src/beta/components/fields/Property/PropertyField/hooks.ts
 delete mode 100644 web/src/beta/components/fields/Property/PropertyField/index.tsx
 delete mode 100644 web/src/beta/components/fields/Property/PropertyItem/index.tsx
 delete mode 100644 web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/Property/PropertyList/index.tsx
 delete mode 100644 web/src/beta/components/fields/Property/hooks.ts
 delete mode 100644 web/src/beta/components/fields/RangeField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/RangeField/index.tsx
 delete mode 100644 web/src/beta/components/fields/SelectField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/SelectField/index.tsx
 delete mode 100644 web/src/beta/components/fields/SliderField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/SliderField/index.tsx
 delete mode 100644 web/src/beta/components/fields/SpacingInput/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/SpacingInput/index.tsx
 delete mode 100644 web/src/beta/components/fields/TextAreaField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/TextAreaField/index.tsx
 delete mode 100644 web/src/beta/components/fields/TextField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/TextField/index.tsx
 delete mode 100644 web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
 delete mode 100644 web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
 delete mode 100644 web/src/beta/components/fields/TimelineField/index.tsx
 delete mode 100644 web/src/beta/components/fields/ToggleField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/ToggleField/index.tsx
 delete mode 100644 web/src/beta/components/fields/URLField/index.stories.tsx
 delete mode 100644 web/src/beta/components/fields/URLField/index.tsx
 delete mode 100644 web/src/beta/components/fields/common/PanelCommon.tsx
 delete mode 100644 web/src/beta/components/fields/utils.ts
 delete mode 100644 web/src/beta/features/Assets/constants.ts
 delete mode 100644 web/src/beta/features/Assets/hooks.ts
 delete mode 100644 web/src/beta/features/Assets/types.ts
 delete mode 100644 web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx
 delete mode 100644 web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
 delete mode 100644 web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx
 delete mode 100644 web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
 delete mode 100644 web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
 delete mode 100644 web/src/beta/features/Editor/Story/TempContentStory/index.tsx
 delete mode 100644 web/src/beta/features/Editor/utils.tsx
 delete mode 100644 web/src/beta/features/Modals/AssetModal/index.tsx
 delete mode 100644 web/src/beta/features/Modals/LayerStyleModal/hooks.ts
 delete mode 100644 web/src/beta/features/Modals/LayerStyleModal/index.tsx
 delete mode 100644 web/src/beta/features/ProjectSettings/MenuList/index.tsx
 delete mode 100644 web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
 delete mode 100644 web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
 delete mode 100644 web/src/beta/hooks/useAssetUploader/hooks.tsx

diff --git a/web/src/app.tsx b/web/src/app.tsx
index cc5422e20..59f7ce196 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -1,9 +1,10 @@
-import Loading from "@reearth/beta/components/Loading";
+
 import GlobalModal from "@reearth/beta/features/GlobalModal";
 import NotificationBanner from "@reearth/beta/features/Notification";
 import { Provider as I18nProvider } from "@reearth/services/i18n";
 import { Suspense } from "react";
 
+import { Loading } from "./beta/lib/reearth-ui";
 import { AuthProvider } from "./services/auth";
 import { Provider as GqlProvider } from "./services/gql";
 import { AppRoutes } from "./services/routing";
diff --git a/web/src/beta/components/Accordion/AccordionItem.tsx b/web/src/beta/components/Accordion/AccordionItem.tsx
deleted file mode 100644
index 8e4ddb23b..000000000
--- a/web/src/beta/components/Accordion/AccordionItem.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { styled, useTheme } from "@reearth/services/theme";
-import React from "react";
-import {
-  AccordionItem as AccordionItemComponent,
-  AccordionItemButton,
-  AccordionItemHeading,
-  AccordionItemPanel,
-  AccordionItemState
-} from "react-accessible-accordion";
-
-import Icon from "../Icon";
-
-export type Props = {
-  className?: string;
-  id: string;
-  heading?: React.ReactNode;
-  content?: React.ReactNode;
-  bg?: string;
-};
-
-const AccordionItem: React.FC<Props> = ({
-  className,
-  id,
-  heading,
-  content,
-  bg
-}) => {
-  const theme = useTheme();
-  return (
-    <Wrapper
-      key={id}
-      className={className}
-      bg={bg}
-      data-testid="atoms-accordion-item"
-    >
-      <AccordionItemComponent>
-        <AccordionItemHeading>
-          <StyledAccordionItemButton data-testid="atoms-accordion-item-header">
-            <AccordionItemStateWrapper>
-              <AccordionItemState>
-                {({ expanded }) => (
-                  <>
-                    <StyledIcon
-                      color={theme.content.main}
-                      icon="arrowToggle"
-                      size={16}
-                      open={!!expanded}
-                    />
-                    {heading}
-                  </>
-                )}
-              </AccordionItemState>
-            </AccordionItemStateWrapper>
-          </StyledAccordionItemButton>
-        </AccordionItemHeading>
-        <AccordionItemPanel data-testid="atoms-accordion-item-content">
-          {content}
-        </AccordionItemPanel>
-      </AccordionItemComponent>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div<{ bg?: string }>`
-  margin: ${({ theme }) => theme.spacing.super}px 0;
-  background-color: ${({ bg }) => bg};
-  border-radius: ${({ theme }) => theme.spacing.large}px;
-`;
-
-const AccordionItemStateWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  padding: ${({ theme }) => theme.spacing.largest}px;
-`;
-
-const StyledIcon = styled(Icon)<{ open: boolean }>`
-  transition: transform 0.15s ease;
-  transform: ${({ open }) => open && "translateY(10%) rotate(90deg)"};
-  margin-right: 24px;
-`;
-
-const StyledAccordionItemButton = styled(AccordionItemButton)`
-  outline: none;
-  cursor: pointer;
-`;
-export default AccordionItem;
diff --git a/web/src/beta/components/Accordion/index.stories.tsx b/web/src/beta/components/Accordion/index.stories.tsx
deleted file mode 100644
index 83999ca3d..000000000
--- a/web/src/beta/components/Accordion/index.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import Accordion from ".";
-
-const meta: Meta<typeof Accordion> = {
-  component: Accordion
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Accordion>;
-
-const SampleHeading = (
-  <div style={{ color: "white", background: "black" }}>heading</div>
-);
-
-const SampleContent = (
-  <div style={{ color: "white", background: "black", padding: "20px" }}>
-    hoge
-  </div>
-);
-
-export const Default: Story = {
-  render: () => (
-    <Accordion
-      items={[
-        {
-          id: "hoge",
-          heading: SampleHeading,
-          content: SampleContent
-        },
-        {
-          id: "hogefuga",
-          heading: SampleHeading,
-          content: SampleContent
-        }
-      ]}
-    />
-  )
-};
diff --git a/web/src/beta/components/Accordion/index.test.tsx b/web/src/beta/components/Accordion/index.test.tsx
deleted file mode 100644
index 4d76f4ae7..000000000
--- a/web/src/beta/components/Accordion/index.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { fireEvent, render, screen } from "@reearth/test/utils";
-import { expect, test } from "vitest";
-
-import Accordion, { AccordionItemType } from "./index";
-
-const sampleContents: AccordionItemType[] = [
-  {
-    id: "1",
-    heading: <div>This is heading1</div>,
-    content: <div>This is content1</div>
-  },
-  {
-    id: "2",
-    heading: <div>This is heading2</div>,
-    content: <div>This is content2</div>
-  }
-];
-
-test("should be rendered", () => {
-  render(<Accordion items={sampleContents} />);
-});
-
-test("should display items header", () => {
-  render(<Accordion items={sampleContents} />);
-  expect(screen.getByTestId("atoms-accordion")).toBeInTheDocument();
-  expect(screen.getByText(/heading1/)).toBeInTheDocument();
-  expect(screen.getByText(/heading2/)).toBeInTheDocument();
-});
-
-test("should display items content", () => {
-  render(<Accordion items={sampleContents} />);
-  expect(screen.getByText(/content1/)).toBeInTheDocument();
-  expect(screen.getByText(/content2/)).toBeInTheDocument();
-});
-
-test("should open when header button is clicked", () => {
-  render(<Accordion items={sampleContents} />);
-  expect(
-    screen.getAllByTestId("atoms-accordion-item-content")[0]
-  ).not.toBeVisible();
-  fireEvent.click(screen.getAllByTestId("atoms-accordion-item-header")[0]);
-  expect(
-    screen.getAllByTestId("atoms-accordion-item-content")[0]
-  ).toBeVisible();
-});
diff --git a/web/src/beta/components/Accordion/index.tsx b/web/src/beta/components/Accordion/index.tsx
deleted file mode 100644
index 7a6ab66da..000000000
--- a/web/src/beta/components/Accordion/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Accordion as AccordionComponent } from "react-accessible-accordion";
-
-import AccordionItem from "./AccordionItem";
-
-export type Props = {
-  className?: string;
-  items?: AccordionItemType[];
-  allowZeroExpanded?: boolean;
-  allowMultipleExpanded?: boolean;
-  itemBgColor?: string;
-};
-
-export type AccordionItemType = {
-  id: string;
-  heading?: React.ReactNode;
-  content?: React.ReactNode;
-};
-
-const Accordion: React.FC<Props> = ({
-  className,
-  items,
-  allowMultipleExpanded,
-  allowZeroExpanded = true,
-  itemBgColor
-}) => {
-  return (
-    <AccordionComponent
-      className={className}
-      allowZeroExpanded={allowZeroExpanded}
-      data-testid="atoms-accordion"
-      allowMultipleExpanded={allowMultipleExpanded}
-    >
-      {items?.map((i) => {
-        return (
-          <AccordionItem
-            key={i.id}
-            id={i.id}
-            heading={i.heading}
-            content={i.content}
-            bg={itemBgColor}
-          />
-        );
-      })}
-    </AccordionComponent>
-  );
-};
-
-export default Accordion;
diff --git a/web/src/beta/components/Avatar/index.stories.tsx b/web/src/beta/components/Avatar/index.stories.tsx
deleted file mode 100644
index cf82ff1d2..000000000
--- a/web/src/beta/components/Avatar/index.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import Avatar from ".";
-
-const meta: Meta<typeof Avatar> = {
-  component: Avatar
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Avatar>;
-
-export const Default: Story = { render: () => <Avatar innerText="ReEarth" /> };
-export const Small: Story = {
-  render: () => <Avatar size="small" innerText="ReEarth" />
-};
-export const Large: Story = {
-  render: () => <Avatar size="large" innerText="ReEarth" />
-};
diff --git a/web/src/beta/components/Avatar/index.tsx b/web/src/beta/components/Avatar/index.tsx
deleted file mode 100644
index 4da457080..000000000
--- a/web/src/beta/components/Avatar/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Flex from "@reearth/beta/components/Flex";
-import Text from "@reearth/beta/components/Text";
-import { styled, useTheme } from "@reearth/services/theme";
-import React from "react";
-
-export type Size = "small" | "large";
-
-export type Props = {
-  className?: string;
-  size?: Size;
-  background?: string;
-  avatar?: string;
-  innerText?: string | number;
-  borderRadius?: string;
-};
-
-const Avatar: React.FC<Props> = ({
-  className,
-  size = "small",
-  background,
-  avatar,
-  innerText,
-  borderRadius = "50%"
-}) => {
-  const theme = useTheme();
-
-  return (
-    <StyledAvatar
-      className={className}
-      align="center"
-      justify="center"
-      size={size}
-      avatar={avatar}
-      background={background ?? theme.bg[4]}
-      borderRadius={borderRadius}
-    >
-      {innerText && (
-        <Text size="h4" color={theme.content.withBackground}>
-          {typeof innerText === "number"
-            ? `+${innerText.toString()}`
-            : innerText.charAt(0)}
-        </Text>
-      )}
-    </StyledAvatar>
-  );
-};
-const StyledAvatar = styled(Flex)<{
-  size?: Size;
-  avatar?: string;
-  background?: string;
-  borderRadius?: string;
-}>`
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  width: ${({ size }) => (size === "large" ? "64px" : "32px")};
-  height: ${({ size }) => (size === "large" ? "64px" : "32px")};
-  border-radius: ${({ borderRadius }) => borderRadius ?? "50%"};
-  background: ${({ avatar, background }) =>
-    avatar ? `url(${avatar});` : background};
-`;
-
-export default Avatar;
diff --git a/web/src/beta/components/Box/index.stories.tsx b/web/src/beta/components/Box/index.stories.tsx
deleted file mode 100644
index 4e0951190..000000000
--- a/web/src/beta/components/Box/index.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-
-import Component, { Props } from ".";
-
-export default {
-  title: "beta/components/Box",
-  component: Component
-} as Meta;
-
-export const Margin: Story<Props> = () => (
-  <Component m="l">
-    <div>Margin</div>
-  </Component>
-);
-export const Padding: Story<Props> = () => (
-  <Component p="l">
-    <div>Padding</div>
-  </Component>
-);
-export const Border: Story<Props> = () => (
-  <Component border="solid 5px red">
-    <div>Border</div>
-  </Component>
-);
-export const Bg: Story<Props> = () => (
-  <Component bg="red">
-    <div>Bg</div>
-  </Component>
-);
diff --git a/web/src/beta/components/Box/index.tsx b/web/src/beta/components/Box/index.tsx
deleted file mode 100644
index 64a4ab175..000000000
--- a/web/src/beta/components/Box/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { MetricsSizes, metricsSizes } from "@reearth/beta/utils/metrics";
-import { styled } from "@reearth/services/theme";
-import { CSSProperties } from "react";
-
-export type Props = {
-  className?: string;
-  children: React.ReactNode;
-  onClick?: () => void;
-} & BoxProps;
-
-type Metrics<T> = {
-  m?: T;
-  mt?: T;
-  mb?: T;
-  mr?: T;
-  ml?: T;
-  mv?: T;
-  mh?: T;
-  p?: T;
-  pt?: T;
-  pb?: T;
-  pr?: T;
-  pl?: T;
-  pv?: T;
-  ph?: T;
-};
-
-type MetricsProps = Metrics<MetricsSizes>;
-
-type BorderProps = {
-  border?: string;
-  borderRadius?: number;
-  borderWidth?: number;
-  borderColor?: number;
-  borderStyle?: CSSProperties["borderStyle"];
-};
-
-type OtherCSSProperties = {
-  bg?: string;
-  width?: CSSProperties["width"];
-};
-
-type BoxProps = MetricsProps & BorderProps & OtherCSSProperties;
-
-const Box: React.FC<Props> = (props) => {
-  const { className, children, onClick, ...styleProps } = props;
-  return (
-    <Wrapper className={className} onClick={onClick} {...styleProps}>
-      {children}
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div<BoxProps>`
-  background-color: ${(props) => props.bg};
-  width: ${(props) => props.width};
-  margin: ${(props) =>
-    props.m && props.m in metricsSizes ? `${metricsSizes[props.m]}px}` : ""};
-  margin: ${(props) =>
-    props.mv && props.mv in metricsSizes
-      ? `${metricsSizes[props.mv]}px 0`
-      : ""};
-  margin: ${(props) =>
-    props.mh && props.mh in metricsSizes
-      ? `0 ${metricsSizes[props.mh]}px`
-      : ""};
-  margin-top: ${(props) =>
-    props.mt && props.mt in metricsSizes ? `${metricsSizes[props.mt]}px` : ""};
-  margin-bottom: ${(props) =>
-    props.mb && props.mb in metricsSizes ? `${metricsSizes[props.mb]}px` : ""};
-  margin-right: ${(props) =>
-    props.mr && props.mr in metricsSizes ? `${metricsSizes[props.mr]}px` : ""};
-  margin-left: ${(props) =>
-    props.ml && props.ml in metricsSizes ? `${metricsSizes[props.ml]}px` : ""};
-  padding: ${(props) =>
-    props.p && props.p in metricsSizes ? `${metricsSizes[props.p]}px` : ""};
-  padding: ${(props) =>
-    props.pv && props.pv in metricsSizes
-      ? `${metricsSizes[props.pv]}px 0`
-      : ""};
-  padding: ${(props) =>
-    props.ph && props.ph in metricsSizes
-      ? `0 ${metricsSizes[props.ph]}px`
-      : ""};
-  padding-top: ${(props) =>
-    props.pt && props.pt in metricsSizes ? `${metricsSizes[props.pt]}px` : ""};
-  padding-bottom: ${(props) =>
-    props.pb && props.pb in metricsSizes ? `${metricsSizes[props.pb]}px` : ""};
-  padding-right: ${(props) =>
-    props.pr && props.pr in metricsSizes ? `${metricsSizes[props.pr]}px` : ""};
-  padding-left: ${(props) =>
-    props.pl && props.pl in metricsSizes ? `${metricsSizes[props.pl]}px` : ""};
-  border: ${(props) => props.border};
-  border-radius: ${(props) => (props.border ? `${props.borderRadius}px` : "")};
-  border-width: ${(props) =>
-    props.borderWidth ? `${props.borderWidth}px` : ""};
-  border-color: ${(props) => (props.borderColor ? `${props.borderColor}` : "")};
-  border-style: ${(props) => (props.borderStyle ? `${props.borderStyle}` : "")};
-`;
-
-export default Box;
diff --git a/web/src/beta/components/CatalogCard/index.stories.tsx b/web/src/beta/components/CatalogCard/index.stories.tsx
deleted file mode 100644
index 72248c54a..000000000
--- a/web/src/beta/components/CatalogCard/index.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
-import { Meta, StoryObj } from "@storybook/react";
-
-
-import AssetCard from ".";
-
-const meta: Meta<typeof AssetCard> = {
-  component: AssetCard
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AssetCard>;
-
-export const Default: Story = {
-  args: {
-    selected: false,
-    url: `/sample.svg`,
-    name: "hoge"
-  }
-};
-
-export const Selected: Story = {
-  args: {
-    url: `/sample.svg`,
-    name: "hoge",
-    selected: true
-  }
-};
-
-export const EditableName: Story = {
-  args: {
-    url: `/sample.svg`,
-    name: "hoge",
-    selected: true,
-    isNameEditable: true,
-    actionContent: (
-      <PopoverMenuContent
-        size="sm"
-        items={[
-          {
-            name: "Delete",
-            icon: "bin",
-            onClick: undefined
-          }
-        ]}
-      />
-    )
-  }
-};
diff --git a/web/src/beta/components/CatalogCard/index.tsx b/web/src/beta/components/CatalogCard/index.tsx
deleted file mode 100644
index e11075fb2..000000000
--- a/web/src/beta/components/CatalogCard/index.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import { Placement } from "@floating-ui/react";
-import TextInput from "@reearth/beta/components/fields/common/TextInput";
-import Icon from "@reearth/beta/components/Icon";
-import * as Popover from "@reearth/beta/components/Popover";
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-import React, { ReactNode, useState, useCallback } from "react";
-
-import { LayerStyleNameUpdateProps } from "../../features/Editor/hooks/useLayerStyles";
-
-export type Props = {
-  id?: string;
-  className?: string;
-  name: string;
-  url?: string;
-  icon?: string;
-  iconSize?: number;
-  checked?: boolean;
-  selected?: boolean;
-  actionContent?: ReactNode;
-  isNameEditable?: boolean;
-  actionPlacement?: Placement;
-  onSelect?: (selected: boolean) => void;
-  onActionClick?: () => void;
-  onOpenChange?: (isOpen: boolean) => void;
-  onLayerStyleNameUpdate?: (inp: LayerStyleNameUpdateProps) => void;
-};
-
-const CatalogCard: React.FC<Props> = ({
-  id,
-  className,
-  name,
-  url,
-  icon,
-  iconSize,
-  checked,
-  selected,
-  actionContent,
-  isNameEditable = false,
-  actionPlacement,
-  onSelect,
-  onActionClick,
-  onOpenChange,
-  onLayerStyleNameUpdate
-}) => {
-  const [isOpenAction, setIsOpenAction] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isEditing, setIsEditing] = useState(false);
-  const [newName, setNewName] = useState(name);
-
-  const handleMouseEnter = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsHovered(false);
-    setIsOpenAction(false);
-  }, []);
-
-  const handleNameClick = useCallback(() => {
-    if (isNameEditable) setIsEditing(true);
-  }, [isNameEditable]);
-
-  const handleNameChange = useCallback(
-    (newName: string) => {
-      if (isNameEditable) {
-        setNewName(newName);
-      }
-    },
-    [isNameEditable]
-  );
-
-  const handleNameSubmit = useCallback(() => {
-    if (isNameEditable) {
-      setIsEditing(false);
-    }
-    onLayerStyleNameUpdate?.({ styleId: id || "", name: newName });
-  }, [id, isNameEditable, newName, onLayerStyleNameUpdate]);
-
-  const handleEditExit = useCallback(
-    (e?: React.KeyboardEvent<HTMLInputElement>) => {
-      if (newName !== name && e?.key !== "Escape") handleNameSubmit();
-      else setNewName(name);
-      setIsEditing(false);
-    },
-    [handleNameSubmit, name, newName]
-  );
-
-  const handleActionClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsOpenAction(!isOpenAction);
-    onActionClick?.();
-  };
-
-  const handleOpenChange = (isOpen: boolean) => {
-    setIsOpenAction(isOpen);
-    onOpenChange?.(isOpen);
-  };
-
-  return (
-    <Wrapper
-      className={className}
-      selected={selected}
-      isLayerStyleIcon={icon === "layerStyle"}
-      onClick={() => onSelect?.(!selected)}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <ImgWrapper>
-        {!icon ? (
-          <PreviewImage url={url} />
-        ) : (
-          <Icon icon={icon} size={iconSize} />
-        )}
-      </ImgWrapper>
-
-      {isEditing ? (
-        <StyledTextInput
-          value={newName}
-          autoFocus
-          onChange={handleNameChange}
-          onBlur={handleEditExit}
-          onExit={handleEditExit}
-        />
-      ) : (
-        <FileName size="footnote" onDoubleClick={handleNameClick}>
-          {name}
-        </FileName>
-      )}
-      {checked && <StyledIcon icon="checkCircle" size={18} />}
-
-      {actionContent && (
-        <Popover.Provider
-          open={isOpenAction}
-          placement={actionPlacement}
-          onOpenChange={handleOpenChange}
-        >
-          {isHovered && (
-            <Popover.Trigger asChild>
-              <ActionIcon onClick={handleActionClick}>
-                <Icon icon="actionbutton" size={12} />
-              </ActionIcon>
-            </Popover.Trigger>
-          )}
-          <StyledPopoverContent>{actionContent}</StyledPopoverContent>
-        </Popover.Provider>
-      )}
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div<{ selected?: boolean; isLayerStyleIcon?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  background: ${({ theme, isLayerStyleIcon }) =>
-    isLayerStyleIcon ? theme.bg[0] : theme.bg[2]};
-  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
-  border: 2px solid
-    ${({ selected, theme }) =>
-      selected ? `${theme.select.main}` : "transparent"};
-  padding: ${({ theme }) => theme.spacing.small}px;
-  width: 100%;
-  max-width: ${({ isLayerStyleIcon }) =>
-    isLayerStyleIcon ? "calc(148px * 0.7)" : "148px"};
-  max-height: ${({ isLayerStyleIcon }) =>
-    isLayerStyleIcon ? "calc(148px * 0.7)" : "148px"};
-  height: 100%;
-  position: relative;
-  cursor: pointer;
-  color: ${({ theme }) => theme.content.main};
-  box-sizing: border-box;
-
-  &:hover {
-    background: ${({ theme }) => theme.bg[2]};
-  }
-`;
-
-const ImgWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 75px;
-`;
-
-const PreviewImage = styled.div<{ url?: string }>`
-  width: 100%;
-  height: 100%;
-  background-image: ${(props) => `url(${props.url})`};
-  background-size: cover;
-  background-position: center;
-`;
-
-const FileName = styled(Text)<{ selected?: boolean }>`
-  overflow: hidden;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-top: ${({ theme }) => theme.spacing.small}px;
-  color: inherit;
-  fill: ${({ selected, theme }) =>
-    selected ? `${theme.select.main}` : undefined};
-`;
-
-const StyledTextInput = styled(TextInput)`
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const StyledIcon = styled(Icon)`
-  position: absolute;
-  bottom: 7px;
-  right: 7px;
-  color: ${({ theme }) => theme.select.main};
-`;
-
-const ActionIcon = styled.button`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  color: ${({ theme }) => theme.content.weak};
-
-  :hover {
-    background: ${({ theme }) => theme.bg[2]};
-  }
-`;
-
-const StyledPopoverContent = styled(Popover.Content)`
-  position: relative;
-`;
-
-export default CatalogCard;
diff --git a/web/src/beta/components/CheckboxField/index.stories.tsx b/web/src/beta/components/CheckboxField/index.stories.tsx
deleted file mode 100644
index 3a735ed50..000000000
--- a/web/src/beta/components/CheckboxField/index.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import CheckBoxField from ".";
-
-const meta: Meta<typeof CheckBoxField> = {
-  component: CheckBoxField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CheckBoxField>;
-
-export const Default: Story = {
-  args: {
-    label: "takanawa_3D_Tiles",
-    checked: false
-  }
-};
diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx
deleted file mode 100644
index a87f0a9aa..000000000
--- a/web/src/beta/components/CheckboxField/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled, useTheme } from "@reearth/services/theme";
-
-export type Props = {
-  onClick?: (value: boolean) => void;
-  checked?: boolean;
-  label: string;
-};
-
-const CheckBoxField: React.FC<Props> = ({ onClick, checked, label }) => {
-  const theme = useTheme();
-  return (
-    <Field onClick={() => onClick?.(!checked)}>
-      <BoxField>{checked && <CheckMark icon="checkmark" />}</BoxField>
-      {label && (
-        <StyledText size="footnote" color={theme.content.main}>
-          {label}
-        </StyledText>
-      )}
-    </Field>
-  );
-};
-
-const Field = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  min-height: 20px;
-`;
-
-const StyledText = styled(Text)`
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const BoxField = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  border-radius: 4px;
-`;
-
-const CheckMark = styled(Icon)`
-  width: 15px;
-  height: 10.83px;
-  color: ${({ theme }) => theme.item.default};
-`;
-
-export default CheckBoxField;
diff --git a/web/src/beta/components/Collapse/index.stories.tsx b/web/src/beta/components/Collapse/index.stories.tsx
deleted file mode 100644
index 011a92244..000000000
--- a/web/src/beta/components/Collapse/index.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import Collapse from ".";
-
-const meta: Meta<typeof Collapse> = {
-  component: Collapse
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Collapse>;
-
-export const Default: Story = {
-  args: {
-    title: "Title",
-    children: <p>Item</p>
-  }
-};
-
-export const AlwaysOpen: Story = {
-  args: {
-    title: "Title",
-    alwaysOpen: true,
-    children: <p>Item</p>
-  }
-};
diff --git a/web/src/beta/components/Collapse/index.tsx b/web/src/beta/components/Collapse/index.tsx
deleted file mode 100644
index 9c9e00f5b..000000000
--- a/web/src/beta/components/Collapse/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { styled, useTheme } from "@reearth/services/theme";
-import { useState, ReactNode, useCallback } from "react";
-
-import Icon from "../Icon";
-import Text from "../Text";
-
-const Collapse: React.FC<{
-  title?: string;
-  alwaysOpen?: boolean;
-  children?: ReactNode;
-}> = ({ title, alwaysOpen, children }) => {
-  const theme = useTheme();
-  const [opened, setOpened] = useState(true);
-  const handleOpen = useCallback(() => {
-    if (!alwaysOpen) {
-      setOpened(!opened);
-    }
-  }, [alwaysOpen, opened]);
-
-  return (
-    <Field>
-      {title && (
-        <Header onClick={handleOpen} clickable={!alwaysOpen}>
-          <Text size="body" color={theme.content.main}>
-            {title}
-          </Text>
-          {!alwaysOpen && (
-            <ArrowIcon
-              icon="arrowToggle"
-              size={12}
-              color={theme.content.main}
-              opened={opened}
-            />
-          )}
-        </Header>
-      )}
-      {opened && children && <Content>{children}</Content>}
-    </Field>
-  );
-};
-
-const Field = styled.div`
-  background: ${({ theme }) => theme.bg[1]};
-`;
-
-const Header = styled.div<{ clickable?: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: ${({ clickable }) => (clickable ? "pointer" : "cursor")};
-  padding: ${({ theme }) => theme.spacing.normal}px;
-`;
-
-const ArrowIcon = styled(Icon)<{ opened: boolean }>`
-  transform: rotate(${(props) => (props.opened ? 90 : 180)}deg);
-  transition: all 0.2s;
-`;
-
-const Content = styled.div`
-  padding: ${({ theme }) =>
-    `${theme.spacing.largest}px ${theme.spacing.super}px`};
-`;
-
-export default Collapse;
diff --git a/web/src/beta/components/ContentPicker/README.md b/web/src/beta/components/ContentPicker/README.md
deleted file mode 100644
index 83d05a863..000000000
--- a/web/src/beta/components/ContentPicker/README.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Contents Picker
-
-[![Generic badge](https://img.shields.io/badge/GROUP-infobox-blue.svg)]()
-[![Generic badge](https://img.shields.io/badge/SIZE-molecules-orange.svg)]()
-
-Contents Picker Modal for InfoBox
-
-## Usage
-
-## Properties
-
-## Screenshots
diff --git a/web/src/beta/components/ContentPicker/index.stories.tsx b/web/src/beta/components/ContentPicker/index.stories.tsx
deleted file mode 100644
index a15d1d529..000000000
--- a/web/src/beta/components/ContentPicker/index.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meta } from "@storybook/react";
-
-import ContentPicker, { Item } from ".";
-
-export default {
-  component: ContentPicker
-} as Meta;
-
-const items: Item[] = [
-  {
-    id: "1",
-    name: "2",
-    icon: "crosshair"
-  },
-  {
-    id: "1",
-    name: "2",
-    icon: "crosshair"
-  }
-];
-export const Default = () => <ContentPicker items={items} />;
diff --git a/web/src/beta/components/ContentPicker/index.tsx b/web/src/beta/components/ContentPicker/index.tsx
deleted file mode 100644
index 1f2d1a3a7..000000000
--- a/web/src/beta/components/ContentPicker/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-import { useRef } from "react";
-import { useClickAway } from "react-use";
-
-export interface Item {
-  id: string;
-  name: string;
-  icon?: string;
-}
-
-export interface ContentsPickerProps {
-  className?: string;
-  items?: Item[];
-  onClickAway?: () => void;
-  onSelect?: (index: number) => void;
-}
-
-const ContentPicker: React.FC<ContentsPickerProps> = ({
-  className,
-  items: items,
-  onSelect,
-  onClickAway
-}) => {
-  const ref = useRef(null);
-  useClickAway(ref, () => onClickAway?.());
-  return (
-    <Wrapper className={className} ref={ref}>
-      <ContentsList>
-        {items?.map((item, i) => (
-          <ContentItem key={item.id}>
-            <ContentButton onClick={() => onSelect?.(i)}>
-              <StyledIcon icon={item.icon} size={20} />
-              <ButtonText size="footnote">{item.name}</ButtonText>
-            </ContentButton>
-          </ContentItem>
-        ))}
-        {new Array((items ?? []).length % 3).fill(undefined).map((_, i) => (
-          <GhostButton key={i} />
-        ))}
-      </ContentsList>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  background: ${({ theme }) => theme.bg[2]};
-  margin-top: 5px;
-  padding: 10px;
-  box-sizing: border-box;
-  border-radius: 3px;
-  width: 288px;
-  color: ${({ theme }) => theme.content.main};
-  box-shadow: 0 0 5px ${({ theme }) => theme.bg[0]};
-  &:after {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: -5px;
-    left: 0;
-    width: 0px;
-    height: 0px;
-    margin: auto;
-    border-style: solid;
-    border-color: transparent transparent ${({ theme }) => theme.bg[2]}
-      transparent;
-    border-width: 0 10px 10px 10px;
-  }
-`;
-
-const ContentsList = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  height: 100%;
-  max-height: 200px;
-  overflow: auto;
-`;
-
-const ContentItem = styled.div`
-  flex: 0 0 33.33333%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ContentButton = styled.div`
-  padding: 5px;
-  width: 60px;
-  border: solid 0.5px transparent;
-  box-sizing: border-box;
-  text-align: center;
-  cursor: pointer;
-
-  &:hover {
-    border-radius: 6px;
-    border: solid 0.5px ${({ theme }) => theme.select.main};
-  }
-`;
-
-const GhostButton = styled.div`
-  width: 30%;
-`;
-
-const ButtonText = styled(Text)`
-  margin: 3px 0;
-  user-select: none;
-`;
-
-const StyledIcon = styled(Icon)`
-  display: block;
-  margin: 0 auto;
-`;
-
-export default ContentPicker;
diff --git a/web/src/beta/components/Divider/index.stories.tsx b/web/src/beta/components/Divider/index.stories.tsx
deleted file mode 100644
index 7dd75477a..000000000
--- a/web/src/beta/components/Divider/index.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import Divider from ".";
-
-const meta: Meta<typeof Divider> = {
-  component: Divider
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Divider>;
-
-export const divider: Story = { render: () => <Divider /> };
diff --git a/web/src/beta/components/Divider/index.tsx b/web/src/beta/components/Divider/index.tsx
deleted file mode 100644
index 91d648d2d..000000000
--- a/web/src/beta/components/Divider/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import React from "react";
-
-export type Props = {
-  color?: string;
-  margin?: string;
-  spaceOnly?: boolean;
-};
-
-const Divider: React.FC<Props> = ({ color, margin, spaceOnly }) => {
-  return <StyledDivider color={color} margin={margin} spaceOnly={spaceOnly} />;
-};
-
-const StyledDivider = styled.div<{
-  color?: string;
-  margin?: string;
-  spaceOnly?: boolean;
-}>`
-  margin: ${(props) => (props.margin ? props.margin : "35px")} auto;
-  border-bottom: ${(props) =>
-    props.spaceOnly
-      ? "none"
-      : `1px solid ${props.color ? props.color : props.theme.outline.main}`};
-`;
-
-export default Divider;
diff --git a/web/src/beta/components/DragAndDropList/Item.tsx b/web/src/beta/components/DragAndDropList/Item.tsx
deleted file mode 100644
index 1fb2bfd5e..000000000
--- a/web/src/beta/components/DragAndDropList/Item.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import type { Identifier } from "dnd-core";
-import type { FC, ReactNode } from "react";
-import { memo, useRef, createContext, useContext } from "react";
-import {
-  ConnectDragPreview,
-  ConnectDragSource,
-  useDrag,
-  useDrop
-} from "react-dnd";
-
-type DragItem = {
-  index: number;
-  id: string;
-  type: string;
-};
-
-type Props = {
-  itemGroupKey: string;
-  id: string;
-  index: number;
-  shouldUseCustomHandler?: boolean;
-  onItemMove: (dragIndex: number, hoverIndex: number) => void;
-  onItemDropOnItem: (dropIndex: number) => void;
-  onItemDropOutside: () => void;
-  children: ReactNode;
-};
-
-const ItemContext = createContext<{
-  customDragSource: ConnectDragSource;
-  customDragPreview: ConnectDragPreview;
-} | null>(null);
-
-export const useItemContext = () => useContext(ItemContext);
-
-const Item: FC<Props> = ({
-  itemGroupKey,
-  id,
-  children,
-  index,
-  shouldUseCustomHandler,
-  onItemMove,
-  onItemDropOnItem,
-  onItemDropOutside
-}) => {
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const [{ handlerId }, drop] = useDrop<
-    DragItem,
-    () => void,
-    { handlerId: Identifier | null }
-  >({
-    accept: itemGroupKey,
-    collect(monitor) {
-      return {
-        handlerId: monitor.getHandlerId()
-      };
-    },
-    hover(item: DragItem, monitor) {
-      if (!contentRef.current) return;
-
-      const dragIndex = item.index;
-      const hoverIndex = index;
-      if (dragIndex === hoverIndex) return;
-
-      // Determine rectangle on screen
-      const hoverBoundingRect = contentRef.current?.getBoundingClientRect();
-
-      // Determine mouse position
-      const clientOffset = monitor.getClientOffset();
-      if (!clientOffset) return;
-
-      // Get pixels to the top
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-
-      // Get vertical middle Y
-      const hoverMiddleY =
-        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-
-      // Dragging downwards
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-
-      // Dragging upwards
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-      onItemMove(dragIndex, hoverIndex);
-      item.index = hoverIndex;
-    }
-  });
-
-  const [{ isDragging }, drag, preview] = useDrag({
-    type: itemGroupKey,
-    item: () => {
-      return { id, index };
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: (item, monitor) => {
-      const didDrop = monitor.didDrop();
-      if (didDrop) {
-        onItemDropOnItem(item.index);
-      } else {
-        onItemDropOutside();
-      }
-    }
-  });
-
-  drop(contentRef);
-
-  return shouldUseCustomHandler ? (
-    <ItemContext.Provider
-      value={{ customDragSource: drag, customDragPreview: preview }}
-    >
-      <SItem
-        customHandler={shouldUseCustomHandler}
-        data-handler-id={handlerId}
-        isDragging={isDragging}
-      >
-        <div ref={contentRef}>{children}</div>
-      </SItem>
-    </ItemContext.Provider>
-  ) : (
-    <SItem ref={drag} data-handler-id={handlerId} isDragging={isDragging}>
-      <div ref={contentRef}>{children}</div>
-    </SItem>
-  );
-};
-
-export default memo(Item);
-
-const SItem = styled.div<{ isDragging: boolean; customHandler?: boolean }>`
-  ${({ isDragging }) => `opacity: ${isDragging ? 0 : 1};`}
-  cursor: ${({ customHandler }) => (customHandler ? "default" : "move")};
-`;
diff --git a/web/src/beta/components/DragAndDropList/index.stories.tsx b/web/src/beta/components/DragAndDropList/index.stories.tsx
deleted file mode 100644
index d8f32ca5e..000000000
--- a/web/src/beta/components/DragAndDropList/index.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-
-import DragAndDropList from ".";
-
-type DummyItem = {
-  id: string;
-  text: string;
-};
-
-const meta: Meta<typeof DragAndDropList<DummyItem>> = {
-  component: DragAndDropList<DummyItem>
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DragAndDropList<DummyItem>>;
-
-const dummyItems: DummyItem[] = [...Array(10)].map((_, i) => {
-  const str = `${i} Sample ID / Text`;
-  return { id: str, text: str };
-});
-
-const DummyComponent: typeof DragAndDropList<DummyItem> = (args) => {
-  const [items, setItems] = useState<DummyItem[]>(dummyItems);
-  return (
-    <DragAndDropList<DummyItem>
-      {...args}
-      items={items}
-      onItemDrop={(item, index) => {
-        // actual use case would be api call or optimistic update
-        setItems((old) => {
-          const items = [...old];
-          items.splice(
-            old.findIndex((o) => o.id === item.id),
-            1
-          );
-          items.splice(index, 0, item);
-          return items;
-        });
-      }}
-    />
-  );
-};
-
-export const Default: Story = {
-  render: (args) => {
-    return (
-      <div
-        style={{
-          maxHeight: "240px",
-          overflowY: "auto",
-          background: "gray",
-          padding: "24px"
-        }}
-      >
-        <DummyComponent {...args} />
-      </div>
-    );
-  },
-  args: {
-    uniqueKey: "uniqueKey",
-    renderItem: (item) => (
-      <div
-        style={{
-          border: "1px solid blue",
-          padding: "0.5rem 1rem",
-          backgroundColor: "lightgray"
-        }}
-      >
-        {item.text}
-      </div>
-    ),
-    getId: (item) => item.id.toString(),
-    items: dummyItems,
-    gap: 16
-  }
-};
diff --git a/web/src/beta/components/DragAndDropList/index.tsx b/web/src/beta/components/DragAndDropList/index.tsx
deleted file mode 100644
index 53425d502..000000000
--- a/web/src/beta/components/DragAndDropList/index.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { ReactNode, useCallback, useEffect, useState } from "react";
-import { useDragDropManager } from "react-dnd";
-
-import Item from "./Item";
-import { useScroll } from "./scrollItem";
-
-export type Props<Item extends { id: string } = { id: string }> = {
-  uniqueKey: string;
-  items: Item[];
-  getId: (item: Item) => string;
-  onItemDrop(item: Item, targetIndex: number): void;
-  renderItem: (item: Item, index: number) => ReactNode;
-  gap?: number;
-};
-
-function DragAndDropList<Item extends { id: string } = { id: string }>({
-  uniqueKey,
-  items,
-  onItemDrop,
-  getId,
-  renderItem,
-  gap
-}: Props<Item>) {
-  const [movingItems, setMovingItems] = useState<Item[]>(items);
-  const { scrollContainerRef } = useScroll();
-  const dragDropManager = useDragDropManager();
-  const monitor = dragDropManager.getMonitor();
-  const [, setIsMonitor] = useState(0);
-
-  useEffect(() => {
-    const unsubscribe = monitor.subscribeToOffsetChange(() => {
-      const offset = monitor.getSourceClientOffset()?.y as number;
-      setIsMonitor(offset);
-    });
-    return unsubscribe;
-  }, [monitor]);
-
-  const customDragHandler = (item: Item): boolean => {
-    // eslint-disable-next-line no-prototype-builtins
-    return item.hasOwnProperty("extensionId");
-  };
-
-  useEffect(() => {
-    setMovingItems(items);
-  }, [items]);
-
-  const onItemMove = useCallback((dragIndex: number, hoverIndex: number) => {
-    setMovingItems((old) => {
-      const items = [...old];
-      items.splice(dragIndex, 1);
-      items.splice(hoverIndex, 0, old[dragIndex]);
-      return items;
-    });
-  }, []);
-
-  const onItemDropOnItem = useCallback(
-    (index: number) => {
-      const item = movingItems[index];
-      if (items[index].id === item.id) return;
-      if (item) {
-        onItemDrop(movingItems[index], index);
-      }
-    },
-    [items, movingItems, onItemDrop]
-  );
-
-  const onItemDropOutside = useCallback(() => {
-    setMovingItems(items);
-  }, [items]);
-
-  return (
-    <SWrapper gap={gap} ref={scrollContainerRef}>
-      {movingItems.map((item, i) => {
-        const id = getId(item);
-        const shouldUseCustomHandler = customDragHandler(item);
-        return (
-          <Item
-            itemGroupKey={uniqueKey}
-            key={id}
-            id={item.id}
-            index={i}
-            onItemMove={onItemMove}
-            onItemDropOnItem={onItemDropOnItem}
-            onItemDropOutside={onItemDropOutside}
-            shouldUseCustomHandler={shouldUseCustomHandler}
-          >
-            {renderItem(item, i)}
-          </Item>
-        );
-      })}
-    </SWrapper>
-  );
-}
-
-export default DragAndDropList;
-
-const SWrapper = styled.div<Pick<Props, "gap">>`
-  display: flex;
-  flex-direction: column;
-  ${({ gap }) => gap && `gap: ${gap}px;`}
-`;
diff --git a/web/src/beta/components/DragAndDropList/scrollItem.tsx b/web/src/beta/components/DragAndDropList/scrollItem.tsx
deleted file mode 100644
index df0b96b60..000000000
--- a/web/src/beta/components/DragAndDropList/scrollItem.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-
-export const useScroll = () => {
-  const scrollContainerRef = useRef<null | HTMLDivElement>(null);
-
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      const scrollContainer = scrollContainerRef.current;
-      if (!scrollContainer) return;
-
-      const mouseY = e.clientY;
-      const scrollThreshold = scrollContainer.offsetHeight * 0.4;
-      if (mouseY < scrollThreshold) {
-        scrollContainer.scrollTop -= 10;
-      } else {
-        if (mouseY > scrollContainer.offsetHeight - scrollThreshold) {
-          scrollContainer.scrollTop += 10;
-        }
-      }
-    },
-    [scrollContainerRef]
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousemove", handleMouseMove);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, [handleMouseMove]);
-
-  return { scrollContainerRef } as const;
-};
diff --git a/web/src/beta/components/Filled/index.ts b/web/src/beta/components/Filled/index.ts
deleted file mode 100644
index a4a9fb95c..000000000
--- a/web/src/beta/components/Filled/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { styled } from "@reearth/services/theme";
-
-const Filled = styled.div`
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-`;
-
-export default Filled;
diff --git a/web/src/beta/components/InsertionBar/index.stories.tsx b/web/src/beta/components/InsertionBar/index.stories.tsx
deleted file mode 100644
index 0b3a2c345..000000000
--- a/web/src/beta/components/InsertionBar/index.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import InsertionBar, { Props } from ".";
-
-const meta: Meta<Props> = {
-  component: InsertionBar
-};
-
-export default meta;
-
-type Story = StoryObj<typeof InsertionBar>;
-
-export const Default: Story = {
-  args: {
-    pos: "bottom",
-    mode: "visible",
-    onButtonClick: () => console.log("Button clicked"),
-    children: "Insertion bar content"
-  }
-};
-
-export const Hidden: Story = {
-  args: {
-    pos: "top",
-    mode: "hidden",
-    children: "Insertion bar content"
-  }
-};
-
-export const Dragging: Story = {
-  args: {
-    pos: "bottom",
-    mode: "dragging",
-    children: "Insertion bar content"
-  }
-};
diff --git a/web/src/beta/components/InsertionBar/index.tsx b/web/src/beta/components/InsertionBar/index.tsx
deleted file mode 100644
index 98ced879a..000000000
--- a/web/src/beta/components/InsertionBar/index.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import { styled, css } from "@reearth/services/theme";
-import { useRef, useCallback, useEffect, ReactNode } from "react";
-import { usePopper } from "react-popper";
-
-import Portal from "../Portal";
-
-export interface Props {
-  className?: string;
-  pos?: "top" | "bottom";
-  mode?: "hidden" | "dragging" | "visible";
-  onButtonClick?: () => void;
-  children?: ReactNode;
-}
-
-const InsertionBar: React.FC<Props> = ({
-  className,
-  children,
-  pos,
-  mode = "visible",
-  onButtonClick
-}) => {
-  const referenceElement = useRef<HTMLDivElement>(null);
-  const popperElement = useRef<HTMLDivElement>(null);
-  const {
-    styles,
-    attributes,
-    update: updatePopper
-  } = usePopper(referenceElement.current, popperElement.current, {
-    placement: "bottom",
-    strategy: "fixed",
-    modifiers: [
-      {
-        name: "eventListeners",
-        enabled: false,
-        options: {
-          scroll: false,
-          resize: false
-        }
-      }
-    ]
-  });
-
-  const handleClick = useCallback(() => {
-    if (mode !== "visible") return;
-    onButtonClick?.();
-  }, [mode, onButtonClick]);
-
-  // TODO: わかりずらい。もっといい方法ありそう。
-  useEffect(() => {
-    if (children) {
-      updatePopper?.();
-    }
-  }, [children, updatePopper]);
-
-  return (
-    <>
-      <Wrapper
-        ref={referenceElement}
-        className={className}
-        hovered={!!children}
-        pos={pos}
-        mode={mode}
-        onClick={handleClick}
-      >
-        <InsertLine
-          className="WORKAROUND_INSERTION_BAR"
-          circleVisible={mode === "dragging"}
-        />
-        <ButtonWrapper
-          className="WORKAROUND_INSERTION_BAR"
-          visible={mode === "visible"}
-          hovered={!!children}
-        >
-          <StyledAddButton onClick={handleClick} icon="plusSquare" size={13} />
-        </ButtonWrapper>
-      </Wrapper>
-      <Portal>
-        <div
-          ref={popperElement}
-          style={{ ...styles.popper }}
-          {...attributes.popper}
-        >
-          {children}
-        </div>
-      </Portal>
-    </>
-  );
-};
-
-const StyledAddButton = styled(Icon)`
-  background: ${({ theme }) => theme.bg[2]};
-  cursor: pointer;
-  display: block;
-  padding: 0 3px;
-`;
-
-const ButtonWrapper = styled.div<{ visible?: boolean; hovered?: boolean }>`
-  display: ${(props) => (props.visible ? "block" : "none")};
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: ${({ hovered, theme }) =>
-    hovered ? theme.content.withBackground : theme.content.main};
-`;
-
-const InsertLine = styled.div<{ circleVisible?: boolean }>`
-  position: absolute;
-  left: 15px;
-  right: 15px;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 2px;
-  background: ${({ theme }) => theme.select.main};
-
-  &::before {
-    display: ${(props) => (props.circleVisible ? "block" : "none")};
-    content: "";
-    position: absolute;
-    left: 0;
-    top: -4px;
-    width: 6px;
-    height: 6px;
-    border: 2px solid ${({ theme }) => theme.select.main};
-    border-radius: 50%;
-  }
-`;
-
-type WrapperProps = {
-  mode?: "visible" | "dragging" | "hidden";
-  pos?: "top" | "bottom";
-  hovered?: boolean;
-};
-
-const Wrapper = styled.div<WrapperProps>`
-  ${({ mode }) =>
-    mode === "hidden" &&
-    css`
-      visibility: hidden;
-      pointer-events: none;
-    `}
-  position: absolute;
-  left: 0;
-  width: 100%;
-  z-index: ${(props) =>
-    props.theme.zIndexes.visualizer.storyPage.indicator.unselected};
-  top: ${(props) => (props.pos === "top" ? "0%" : "100%")};
-  transform: translateY(-50%);
-  height: 15px;
-  cursor: pointer;
-
-  & .WORKAROUND_INSERTION_BAR {
-    opacity: ${(props) =>
-      !props.hovered && props.mode === "visible" ? "0" : "1"};
-    transition: all 0.5s;
-  }
-
-  &:hover .WORKAROUND_INSERTION_BAR {
-    opacity: 1;
-  }
-`;
-
-export default InsertionBar;
diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx
deleted file mode 100644
index cf07bcb91..000000000
--- a/web/src/beta/components/InsertionButton/index.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import InsertionButton from ".";
-
-export default {
-  component: InsertionButton
-} as Meta;
-
-type Story = StoryObj<typeof InsertionButton>;
-
-export const Default: Story = {};
diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx
deleted file mode 100644
index 97ad3e765..000000000
--- a/web/src/beta/components/InsertionButton/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import { styled } from "@reearth/services/theme";
-
-type Props = {
-  onClick?: () => void;
-};
-
-const InsertionButton: React.FC<Props> = ({ onClick }) => {
-  return (
-    <Box onClick={onClick}>
-      <StyledIcon icon={"plus"} size={9.75} />
-      <Border />
-    </Box>
-  );
-};
-
-const Box = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 2px 0px;
-  gap: 4px;
-
-  border-radius: 6px;
-  opacity: 0;
-
-  :hover {
-    opacity: 1;
-    transition: all 0.5s ease;
-  }
-  :not(:hover) {
-    transition: all 0.5s ease;
-  }
-  cursor: pointer;
-`;
-
-const Border = styled.object`
-  height: 1px;
-  width: 100%;
-
-  background: ${(props) => props.theme.select.main};
-  border-radius: 1px;
-`;
-
-const StyledIcon = styled(Icon)`
-  background: ${(props) => props.theme.select.main};
-  border-radius: 50%;
-  padding: 2px;
-  color: ${(props) => props.theme.bg.transparentBlack};
-`;
-
-export default InsertionButton;
diff --git a/web/src/beta/components/ListItem/index.stories.tsx b/web/src/beta/components/ListItem/index.stories.tsx
deleted file mode 100644
index 9a083730a..000000000
--- a/web/src/beta/components/ListItem/index.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import ActionItem from "./index";
-
-export default {
-  component: ActionItem
-} as Meta;
-
-type Story = StoryObj<typeof ActionItem>;
-
-export const Default: Story = {
-  args: {
-    isSelected: false,
-    actionContent: <div style={{ background: "gray" }}>actionContent</div>,
-    isOpenAction: true,
-    children:
-      "long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text "
-  }
-};
diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
deleted file mode 100644
index e3b9bb5d8..000000000
--- a/web/src/beta/components/ListItem/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Placement } from "@floating-ui/react";
-import Icon from "@reearth/beta/components/Icon";
-import * as Popover from "@reearth/beta/components/Popover";
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-import { FC, MouseEvent, ReactNode } from "react";
-
-type Clamp = "left" | "right";
-
-type Props = {
-  children: ReactNode;
-  border?: boolean;
-  isSelected?: boolean;
-  actionContent?: ReactNode;
-  isOpenAction?: boolean;
-  actionPlacement?: Placement;
-  clamp?: Clamp;
-  onItemClick: (e?: MouseEvent<Element>) => void;
-  onActionClick?: () => void;
-  onOpenChange?: (isOpen: boolean) => void;
-};
-
-const ListItem: FC<Props> = ({
-  children,
-  border,
-  isSelected,
-  actionContent,
-  isOpenAction,
-  actionPlacement,
-  clamp,
-  onItemClick,
-  onActionClick,
-  onOpenChange
-}) => {
-  return (
-    <Wrapper
-      border={border}
-      isSelected={isSelected}
-      isOpenAction={isOpenAction}
-      clamp={clamp}
-    >
-      <Inner onClick={onItemClick}>
-        {typeof children === "string" ? (
-          <StyledText size="footnote">{children}</StyledText>
-        ) : (
-          children
-        )}
-      </Inner>
-      {actionContent && (
-        <Popover.Provider
-          open={isOpenAction}
-          placement={actionPlacement}
-          onOpenChange={onOpenChange}
-        >
-          <Popover.Trigger asChild>
-            <Button clamp={clamp} onClick={onActionClick}>
-              <Icon icon="actionbutton" size={16} />
-            </Button>
-          </Popover.Trigger>
-          <Popover.Content>{actionContent}</Popover.Content>
-        </Popover.Provider>
-      )}
-    </Wrapper>
-  );
-};
-
-export default ListItem;
-
-const Wrapper = styled.div<{
-  border?: boolean;
-  isSelected?: boolean;
-  isOpenAction?: boolean;
-  clamp?: Clamp;
-}>`
-  display: flex;
-  min-height: 36px;
-  align-items: center;
-  color: ${({ theme }) => theme.content.main};
-  border: 1px solid
-    ${({ border, theme }) => (border ? theme.outline.weakest : "transparent")};
-  border-radius: ${({ clamp }) =>
-    clamp === "left"
-      ? "0 4px 4px 0"
-      : clamp === "right"
-        ? "4px 0 0 4px"
-        : "4px"};
-  background: ${({ theme, isSelected, isOpenAction }) =>
-    isSelected ? theme.select.main : isOpenAction ? theme.bg[3] : "inherit"};
-  transition: all 0.2s;
-  cursor: pointer;
-
-  :hover {
-    ${({ isSelected, theme }) =>
-      !isSelected && `background-color:` + theme.bg[3]}
-  }
-`;
-
-const Inner = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 8px 4px 8px 4px;
-  border-radius: 4px;
-`;
-
-const StyledText = styled(Text)`
-  flex-grow: 1;
-  word-break: break-all;
-  text-align: left;
-`;
-
-const Button = styled.div<{ clamp?: Clamp }>`
-  display: flex;
-  align-items: center;
-  height: 36px;
-  color: ${({ theme }) => theme.content.weak};
-  border-radius: ${({ clamp }) =>
-    clamp === "left"
-      ? "0 4px 4px 0"
-      : clamp === "right"
-        ? "4px 0 0 4px"
-        : "4px"};
-`;
diff --git a/web/src/beta/components/Loading/index.stories.tsx b/web/src/beta/components/Loading/index.stories.tsx
deleted file mode 100644
index f210a1b1f..000000000
--- a/web/src/beta/components/Loading/index.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import Loading from ".";
-
-const meta: Meta<typeof Loading> = {
-  component: Loading
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Loading>;
-
-export const Default: Story = { render: () => <Loading /> };
diff --git a/web/src/beta/components/Loading/index.tsx b/web/src/beta/components/Loading/index.tsx
deleted file mode 100644
index 3a88fbea8..000000000
--- a/web/src/beta/components/Loading/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { styled, useTheme } from "@reearth/services/theme";
-import React from "react";
-import { RingLoader } from "react-spinners";
-
-import Portal from "../Portal";
-
-export type Props = {
-  className?: string;
-  animationSize?: number;
-  animationColor?: string;
-  portal?: boolean;
-  fixed?: boolean;
-  relative?: boolean;
-  overlay?: boolean;
-};
-
-const Loading: React.FC<Props> = ({
-  className,
-  animationSize,
-  animationColor,
-  portal,
-  fixed,
-  relative,
-  overlay
-}) => {
-  const theme = useTheme();
-  const loading = (
-    <LoadingWrapper
-      className={className}
-      fixed={fixed}
-      overlay={overlay}
-      relative={relative}
-    >
-      <RingLoader
-        size={animationSize ?? 33}
-        color={animationColor ?? theme.select.main}
-      />
-    </LoadingWrapper>
-  );
-  return portal ? <Portal>{loading}</Portal> : loading;
-};
-
-const LoadingWrapper = styled.div<{
-  fixed?: boolean;
-  overlay?: boolean;
-  relative?: boolean;
-}>`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  position: ${({ fixed, relative }) =>
-    fixed ? "fixed" : relative ? "relative" : "absolute"};
-  top: 0;
-  left: 0;
-  background: ${({ overlay, theme }) => (overlay ? theme.bg[0] : null)};
-  opacity: 0.8;
-  z-index: ${(props) => props.theme.zIndexes.editor.loading};
-`;
-
-export default Loading;
diff --git a/web/src/beta/components/Modal/ModalFrame/index.tsx b/web/src/beta/components/Modal/ModalFrame/index.tsx
deleted file mode 100644
index 2320a6930..000000000
--- a/web/src/beta/components/Modal/ModalFrame/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-import useTransition, { TransitionStatus } from "@rot1024/use-transition";
-import { ReactNode, useRef, useCallback, useMemo } from "react";
-import { useClickAway, useKeyPressEvent } from "react-use";
-
-export type Props = {
-  className?: string;
-  children?: ReactNode;
-  size?: "sm" | "md" | "lg";
-  isVisible?: boolean;
-  title?: string;
-  onClose?: () => void;
-};
-
-const Modal: React.FC<Props> = ({
-  className,
-  size,
-  isVisible,
-  title,
-  onClose,
-  children
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-  useClickAway(ref, () => onClose?.());
-
-  const modalWidth = useMemo(
-    () => (size === "sm" ? "416px" : size === "lg" ? "778px" : "572px"),
-    [size]
-  );
-
-  const state = useTransition(!!isVisible, 300, {
-    mountOnEnter: true,
-    unmountOnExit: true
-  });
-
-  const handleClose = useCallback(() => {
-    if (isVisible) onClose?.();
-  }, [onClose, isVisible]);
-
-  useKeyPressEvent("Escape", handleClose);
-
-  return state === "unmounted" ? null : (
-    <Bg state={state}>
-      <CenteredWrapper width={modalWidth}>
-        <Wrapper className={className} ref={ref} width={modalWidth}>
-          {!!title && (
-            <HeaderWrapper>
-              <ModalTitle size="body" weight="regular" customColor>
-                {title}
-              </ModalTitle>
-              {onClose && (
-                <CloseIcon icon="cancel" size={16} onClick={onClose} />
-              )}
-            </HeaderWrapper>
-          )}
-          <InnerWrapper>{children}</InnerWrapper>
-        </Wrapper>
-      </CenteredWrapper>
-    </Bg>
-  );
-};
-
-const Bg = styled.div<{ state: TransitionStatus }>`
-  background: ${({ theme }) => theme.bg.transparentBlack};
-  position: fixed;
-  z-index: ${({ theme }) => theme.zIndexes.editor.modal.bg};
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  transition: ${({ state }) =>
-    state === "entering" || state === "exiting" ? "all 0.3s ease" : ""};
-  opacity: ${({ state }) =>
-    state === "entered" || state === "entering" ? 1 : 0};
-`;
-
-const CenteredWrapper = styled.div<{ width?: string }>`
-  margin-left: auto;
-  margin-right: auto;
-  height: 100%;
-  width: ${({ width }) => width};
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const Wrapper = styled.div<{ width?: string }>`
-  border-radius: 8px;
-  background: #161616;
-  width: ${({ width }) => width};
-`;
-
-const InnerWrapper = styled.div`
-  margin: 0 auto;
-`;
-
-const ModalTitle = styled(Text)`
-  text-align: center;
-  margin-right: auto;
-`;
-
-const CloseIcon = styled(Icon)`
-  margin-left: auto;
-  cursor: pointer;
-`;
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  padding: 12px;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-  color: ${({ theme }) => theme.content.main};
-  background: ${({ theme }) => theme.bg[2]};
-`;
-export default Modal;
diff --git a/web/src/beta/components/Modal/index.stories.tsx b/web/src/beta/components/Modal/index.stories.tsx
deleted file mode 100644
index b1c89fefc..000000000
--- a/web/src/beta/components/Modal/index.stories.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ReactNode } from "react";
-
-import Button from "../Button";
-import Text from "../Text";
-
-import Modal, { SidebarTab } from ".";
-
-const meta: Meta<typeof Modal> = {
-  component: Modal
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Modal>;
-
-const ModalContent: React.FC = () => {
-  return (
-    <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
-      roots in a piece of classical Latin literature from 45 BC, making it over
-      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-      College in Virginia, looked up one of the more obscure Latin words,
-      consectetur, from a Lorem Ipsum passage, and going through the cites of
-      the word in classical literature, discovered the undoubtable source.
-    </Text>
-  );
-};
-
-const TabContent: ReactNode = (
-  <>
-    <Text size="h1">Tab Title</Text>
-    <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
-      roots in a piece of classical Latin literature from 45 BC, making it over
-      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-      College in Virginia, looked up one of the more obscure Latin words,
-      consectetur, from a Lorem Ipsum passage, and going through the cites of
-      the word in classical literature, discovered the undoubtable source.
-    </Text>
-  </>
-);
-const TabContent2: ReactNode = (
-  <>
-    <Text size="h1">Tab Title2</Text>
-    <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
-      roots in a piece of classical Latin literature from 45 BC, making it over
-      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-      College in Virginia, looked up one of the more obscure Latin words,
-      consectetur, from a Lorem Ipsum passage, and going through the cites of
-      the word in classical literature, discovered the undoubtable source.
-    </Text>
-  </>
-);
-
-const TabContent3: ReactNode = (
-  <>
-    <Text size="h1">Tab Title3</Text>
-    <Text size="h4">Tab subTitle3</Text>
-    <Text size="h5">
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
-      roots in a piece of classical Latin literature from 45 BC, making it over
-      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-      College in Virginia, looked up one of the more obscure Latin words,
-      consectetur, from a Lorem Ipsum passage, and going through the cites of
-      the word in classical literature, discovered the undoubtable source.
-    </Text>
-  </>
-);
-
-const sidebarTab1: SidebarTab = {
-  id: "1",
-  label: "Tab1",
-  content: TabContent,
-  tabButton1: <Button text="Confirm" />,
-  tabButton2: <Button text="Cancel" />
-};
-
-const sidebarTab2: SidebarTab = {
-  id: "2",
-  label: "Tab2",
-  content: TabContent2,
-  tabButton1: <Button text="Yes" />,
-  tabButton2: <Button text="No" />
-};
-
-const sidebarTab3: SidebarTab = {
-  id: "3",
-  label: "Tab3",
-  content: TabContent3,
-  tabButton1: <Button text="Ok" />,
-  tabButton2: <Button text="Cancel" />
-};
-
-export const Small: Story = {
-  render: () => (
-    <Modal
-      size="sm"
-      isVisible={true}
-      title="Small modal"
-      button1={<Button text="Confirm" />}
-      button2={<Button text="Cancel" />}
-    >
-      <ModalContent />
-    </Modal>
-  )
-};
-
-export const Medium: Story = {
-  render: () => (
-    <Modal
-      size="md"
-      isVisible={true}
-      title="Medium modal"
-      button1={<Button text="Confirm" />}
-      button2={<Button text="Cancel" />}
-    >
-      <ModalContent />
-    </Modal>
-  )
-};
-
-export const Large: Story = {
-  render: () => (
-    <Modal
-      size="lg"
-      isVisible={true}
-      title="Large modal"
-      button1={<Button text="Confirm" />}
-      button2={<Button text="Cancel" />}
-    >
-      <ModalContent />
-    </Modal>
-  )
-};
-
-export const Sidebar: Story = {
-  render: () => (
-    <Modal
-      size="lg"
-      isVisible={true}
-      title="Modal with sidebar"
-      sidebarTabs={[sidebarTab1, sidebarTab2, sidebarTab3]}
-    />
-  )
-};
diff --git a/web/src/beta/components/Modal/index.tsx b/web/src/beta/components/Modal/index.tsx
deleted file mode 100644
index 568ea3d68..000000000
--- a/web/src/beta/components/Modal/index.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import Wrapper from "@reearth/beta/components/Modal/ModalFrame";
-import useManageSwitchState, {
-  SwitchField
-} from "@reearth/beta/hooks/useManageSwitchState/hooks";
-import { styled } from "@reearth/services/theme";
-import { ReactNode, useCallback, useState } from "react";
-
-type Size = "sm" | "md" | "lg";
-
-export type SidebarTab = {
-  id: string;
-  label: string;
-  content: ReactNode;
-  tabButton1?: ReactNode;
-  tabButton2?: ReactNode;
-};
-
-type Props = {
-  className?: string;
-  title?: string;
-  size?: Size;
-  button1?: ReactNode;
-  button2?: ReactNode;
-  children?: ReactNode;
-  isVisible?: boolean;
-  isContent?: boolean;
-  onClose?: () => void;
-  onTabChange?: (tabId: string) => void;
-  sidebarTabs?: SidebarTab[];
-};
-
-const Modal: React.FC<Props> = ({
-  className,
-  title,
-  size = "md",
-  button1,
-  button2,
-  children,
-  isVisible,
-  isContent,
-  onClose,
-  onTabChange,
-  sidebarTabs
-}) => {
-  const [tabsFields] = useState<SwitchField<SidebarTab>[]>(
-    sidebarTabs?.map((tab, index) => ({
-      active: index === 0,
-      ...tab
-    })) || []
-  );
-
-  const { handleActivate, fields: tabs } = useManageSwitchState({
-    fields: tabsFields
-  });
-
-  const handleTabChange = useCallback(
-    (tabId: string) => {
-      handleActivate(tabId);
-      onTabChange?.(tabId);
-    },
-    [handleActivate, onTabChange]
-  );
-
-  return (
-    <Wrapper
-      className={className}
-      size={size}
-      isVisible={isVisible}
-      title={title}
-      onClose={onClose}
-    >
-      <InnerWrapper>
-        {tabs.length > 0 && (
-          <NavBarWrapper>
-            {tabs.map((tab) => (
-              <Tab
-                key={tab.id}
-                isSelected={tab.active}
-                onClick={() => handleTabChange(tab.id)}
-              >
-                {tab.label}
-              </Tab>
-            ))}
-          </NavBarWrapper>
-        )}
-        <ContentWrapper>
-          {tabs.length > 0 && (
-            <Content>
-              {tabs.find((tab) => tab.active === true)?.content}
-            </Content>
-          )}
-          {children && <Content isContent={isContent}> {children}</Content>}
-          {button1 || button2 ? (
-            <ButtonWrapper>
-              {tabs.find((tab) => tab.active === true)?.tabButton1 ?? button1}
-              {tabs.find((tab) => tab.active === true)?.tabButton2 ?? button2}
-            </ButtonWrapper>
-          ) : null}
-        </ContentWrapper>
-      </InnerWrapper>
-    </Wrapper>
-  );
-};
-
-const InnerWrapper = styled.div`
-  display: flex;
-`;
-
-const NavBarWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  gap: 10px;
-  background: ${({ theme }) => theme.bg[0]};
-  border-right: 1px solid ${({ theme }) => theme.bg[3]};
-`;
-
-const Tab = styled.button<{ isSelected?: boolean }>`
-  display: flex;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: ${({ isSelected, theme }) =>
-    isSelected ? theme.bg[2] : "transparent"};
-  color: ${({ isSelected, theme }) =>
-    isSelected ? theme.content.main : theme.content.weak};
-`;
-
-const ContentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-const Content = styled.div<{ isContent?: boolean }>`
-  display: flex;
-  padding: ${({ isContent, theme }) =>
-    isContent ? theme.spacing.normal : theme.spacing.super}px;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing.largest}px;
-  align-self: stretch;
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-self: stretch;
-  justify-content: flex-end;
-  gap: ${({ theme }) => theme.spacing.normal}px;
-  padding: ${({ theme }) => theme.spacing.normal}px;
-  background: ${({ theme }) => theme.bg[1]};
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
-`;
-
-export default Modal;
diff --git a/web/src/beta/components/PopoverMenuContent/index.stories.tsx b/web/src/beta/components/PopoverMenuContent/index.stories.tsx
deleted file mode 100644
index 8d96a0bd4..000000000
--- a/web/src/beta/components/PopoverMenuContent/index.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { Meta, StoryObj } from "@storybook/react";
-
-import PopoverContent from ".";
-
-const meta: Meta<typeof PopoverContent> = {
-  component: PopoverContent,
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["sm", "md"]
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PopoverContent>;
-
-export const Default: Story = {
-  args: {
-    width: "200px",
-    size: "md",
-    items: [
-      {
-        icon: "copy",
-        name: "Name",
-        onClick: action("onClickItem"),
-        isSelected: true
-      },
-      {
-        icon: "pencilSimple",
-        name: "NameNameNameNameNameNameName",
-        onClick: action("onClickItem")
-      },
-      {
-        name: "NameNameNameNameNameNameName",
-        onClick: action("onClickItem")
-      },
-      {
-        icon: "trash",
-        name: "Name",
-        onClick: action("onClickItem")
-      },
-      {
-        icon: "gearSix",
-        name: "NameNameNameNameNameNameName",
-        onClick: action("onClickItem")
-      }
-    ]
-  }
-};
diff --git a/web/src/beta/components/PopoverMenuContent/index.tsx b/web/src/beta/components/PopoverMenuContent/index.tsx
deleted file mode 100644
index 0b7fd1822..000000000
--- a/web/src/beta/components/PopoverMenuContent/index.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import { css, styled } from "@reearth/services/theme";
-
-export type MenuItem = {
-  name: string;
-  isSelected?: boolean;
-  icon?: string;
-  disabled?: boolean;
-  onClick?: () => void;
-};
-
-export type Props = {
-  width?: string;
-  size: "sm" | "md";
-  items: MenuItem[];
-};
-
-const stylesBySize = {
-  sm: {
-    iconSize: 14,
-    row: css`
-      height: 28px;
-      font-size: 12px;
-      padding: 4px 12px;
-    `
-  },
-  md: {
-    iconSize: 16,
-    row: css`
-      height: 38px;
-      font-size: 14px;
-      padding: 8px 12px;
-    `
-  }
-};
-
-const PopoverMenuContent: React.FC<Props> = ({ size, width, items }) => {
-  return (
-    <SRoot width={width}>
-      {items.map((item, i) => {
-        return (
-          <SRow
-            key={i}
-            isSelected={!!item.isSelected}
-            isFirst={i === 0}
-            isLast={i === items.length - 1}
-            size={size}
-            disabled={!!item.disabled}
-            onClick={item.onClick}
-          >
-            {item.icon && (
-              <SLeftIcon>
-                <Icon icon={item.icon} size={stylesBySize[size].iconSize} />
-              </SLeftIcon>
-            )}
-
-            <SText>{item.name}</SText>
-          </SRow>
-        );
-      })}
-    </SRoot>
-  );
-};
-export default PopoverMenuContent;
-
-const SRoot = styled.div<Pick<Props, "width">>`
-  ${({ width }) => width && `width: ${width};`}
-
-  border-radius: 2px;
-  border: 1px solid ${({ theme }) => theme.bg[3]};
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: ${({ theme }) => theme.shadow.popup};
-  z-index: ${({ theme }) => theme.zIndexes.editor.popover};
-`;
-
-const SRow = styled.button<
-  Pick<Props, "size"> &
-    Pick<MenuItem, "isSelected"> & { isFirst: boolean; isLast: boolean }
->`
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.content.weak : theme.content.main};
-  ${({ disabled }) => disabled && "cursor: default;"}
-
-  ${({ isFirst }) => !isFirst && "border-top: 1px solid transparent;"}
-  ${({ isLast }) => !isLast && "border-bottom: 1px solid transparent;"}
-  ${({ size }) => stylesBySize[size].row ?? ""}
-  
-  :hover {
-    background: ${({ isSelected, theme, disabled }) =>
-      !disabled && !isSelected && theme.bg[2]};
-  }
-`;
-
-const SText = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const SLeftIcon = styled.div`
-  display: flex;
-  align-items: center;
-`;
diff --git a/web/src/beta/components/Portal/index.tsx b/web/src/beta/components/Portal/index.tsx
deleted file mode 100644
index 518298226..000000000
--- a/web/src/beta/components/Portal/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ReactNode, useLayoutEffect, useState } from "react";
-import ReactDOM from "react-dom";
-
-const Portal: React.FC<{ children?: ReactNode }> = ({ children }) => {
-  const [node, setNode] = useState<HTMLElement>();
-
-  useLayoutEffect(() => {
-    setNode(document.body);
-  }, []);
-
-  return node ? ReactDOM.createPortal(children, node) : null;
-};
-
-export default Portal;
diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx
deleted file mode 100644
index 092e49636..000000000
--- a/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import RadioBox from ".";
-
-type Props = React.ComponentProps<typeof RadioBox>;
-
-const meta: Meta<typeof RadioBox> = {
-  component: RadioBox
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RadioBox>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: string) => {
-      console.log(value);
-      updateArgs({ value });
-    },
-    [updateArgs]
-  );
-
-  return <RadioBox {...args} onClick={handleChange} />;
-};
-
-Default.args = {
-  label: "test",
-  selected: false,
-  keyValue: "test"
-};
diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.tsx
deleted file mode 100644
index ad2a034bc..000000000
--- a/web/src/beta/components/RadioGroup/RadioBox/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { fonts, styled } from "@reearth/services/theme";
-import { useCallback } from "react";
-
-export type Props = {
-  selected?: boolean;
-  keyValue: string;
-  label?: string;
-  onClick?: (value: string) => void;
-};
-
-const RadioBox: React.FC<Props> = ({
-  selected,
-  keyValue,
-  label,
-  onClick
-}: Props) => {
-  const handleRadioClick = useCallback(
-    (value: string) => {
-      onClick?.(value);
-    },
-    [onClick]
-  );
-
-  return (
-    <Radio>
-      <RadioInput
-        type="radio"
-        value={keyValue}
-        onClick={() => handleRadioClick(keyValue)}
-      />
-      <RadioButton selected={selected}>
-        {selected && <RadioIndicator selected={selected} />}
-      </RadioButton>
-      <RadioText>{label}</RadioText>
-    </Radio>
-  );
-};
-export default RadioBox;
-
-const RadioIndicator = styled.div<{
-  selected?: boolean;
-}>`
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: white;
-  background-color: ${({ selected, theme }) =>
-    selected ? theme.select.main : theme.content.main};
-`;
-
-const Radio = styled.label`
-  display: flex;
-  align-items: center;
-  min-width: 30px;
-  min-height: 30px;
-  list-style: none;
-  padding: 4px;
-  font-size: ${fonts.sizes.footnote}px;
-  cursor: pointer;
-  box-sizing: border-box;
-  border-radius: 2px;
-  :not(:last-child) {
-    margin-right: 1px;
-  }
-`;
-
-const RadioInput = styled.input`
-  opacity: 0;
-  position: absolute;
-`;
-
-const RadioButton = styled.span<{
-  selected?: boolean;
-}>`
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid
-    ${({ selected, theme }) =>
-      selected ? theme.select.main : theme.content.main};
-  margin-right: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const RadioText = styled.span`
-  flex-grow: 1;
-`;
diff --git a/web/src/beta/components/RadioGroup/index.stories.tsx b/web/src/beta/components/RadioGroup/index.stories.tsx
deleted file mode 100644
index 7ec82d3d1..000000000
--- a/web/src/beta/components/RadioGroup/index.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import RadioGroup from "./index";
-
-type Props = React.ComponentProps<typeof RadioGroup>;
-
-const meta: Meta<typeof RadioGroup> = {
-  component: RadioGroup
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RadioGroup>;
-
-const options = [
-  { label: "option1", keyValue: "Option 1" },
-  { label: "option2", keyValue: "Option 2" }
-];
-
-export const VerticalRadioGroup: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: string) => updateArgs({ value }),
-    [updateArgs]
-  );
-
-  return (
-    <div>
-      <RadioGroup {...args} onChange={handleChange} />
-    </div>
-  );
-};
-VerticalRadioGroup.args = {
-  options: options,
-  layout: "vertical",
-  onChange: () => console.log("clicked")
-};
-
-export const HorizontalRadioGroup: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: string) => updateArgs({ value }),
-    [updateArgs]
-  );
-
-  return (
-    <div>
-      <RadioGroup {...args} onChange={handleChange} />
-    </div>
-  );
-};
-HorizontalRadioGroup.args = {
-  options: options,
-  layout: "horizontal",
-  onChange: () => console.log("clicked")
-};
diff --git a/web/src/beta/components/RadioGroup/index.tsx b/web/src/beta/components/RadioGroup/index.tsx
deleted file mode 100644
index eab560cec..000000000
--- a/web/src/beta/components/RadioGroup/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-
-import RadioBox from "@reearth/beta/components/RadioGroup/RadioBox";
-import { styled } from "@reearth/services/theme";
-import { memo, useCallback } from "react";
-
-export type Option = {
-  label?: string;
-  keyValue: string;
-};
-
-export type RadioGroupProps = {
-  options: Option[];
-  layout?: "vertical" | "horizontal";
-  selectedValue?: string;
-  onChange?: (value: string) => void;
-};
-
-const RadioGroup: React.FC<RadioGroupProps> = ({
-  options,
-  layout = "horizontal",
-  selectedValue,
-  onChange
-}) => {
-  const handleRadioChange = useCallback(
-    (value: string) => {
-      if (value === selectedValue) return;
-      onChange?.(value);
-    },
-    [onChange, selectedValue]
-  );
-
-  return (
-    <RadioGroupContainer layout={layout}>
-      {options.map((option, idx) => (
-        <RadioBox
-          key={option.keyValue + idx}
-          keyValue={option.keyValue}
-          selected={option.keyValue === selectedValue}
-          label={option.label}
-          onClick={() => handleRadioChange(option.keyValue)}
-        />
-      ))}
-    </RadioGroupContainer>
-  );
-};
-
-export default memo(RadioGroup);
-
-const RadioGroupContainer = styled.div<{ layout?: "vertical" | "horizontal" }>`
-  display: flex;
-  flex-direction: ${({ layout }) => (layout === "vertical" ? "column" : "row")};
-  gap: 12px;
-`;
diff --git a/web/src/beta/components/RangeSlider/index.stories.tsx b/web/src/beta/components/RangeSlider/index.stories.tsx
deleted file mode 100644
index 0628733c8..000000000
--- a/web/src/beta/components/RangeSlider/index.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import RangeSlider, { Props } from ".";
-
-const meta: Meta<typeof RangeSlider> = {
-  component: RangeSlider
-};
-
-type Story = StoryObj<typeof RangeSlider>;
-
-export default meta;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: number[]) => updateArgs({ value: value }),
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <RangeSlider {...args} onChange={handleChange} />
-      </div>
-      <div>
-        <RangeSlider
-          {...args}
-          max={args.max ? 2 * args.max : undefined}
-          onChange={handleChange}
-        />
-      </div>
-      <div>
-        <RangeSlider {...args} disabled={true} onChange={handleChange} />
-      </div>
-    </Wrapper>
-  );
-};
-
-Default.args = {
-  value: [2, 50],
-  min: 0,
-  max: 100,
-  step: 1,
-  disabled: false
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin: 2rem;
-  height: 300px;
-`;
diff --git a/web/src/beta/components/RangeSlider/index.tsx b/web/src/beta/components/RangeSlider/index.tsx
deleted file mode 100644
index d1414dcdd..000000000
--- a/web/src/beta/components/RangeSlider/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import RCSlider from "rc-slider";
-import React, { ComponentProps } from "react";
-
-import "rc-slider/assets/index.css";
-
-const RangeSliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider.Range);
-
-export type Props = {
-  min?: number;
-  max?: number;
-} & ComponentProps<typeof RangeSliderWithTooltip>;
-
-const calculateStep = (
-  min?: number,
-  max?: number,
-  step?: number | null
-): number => {
-  if (step != undefined) {
-    return step;
-  } else if (min !== undefined && max !== undefined) {
-    const range = max - min;
-    let calculatedStep = range / 10;
-    if (range % calculatedStep !== 0) {
-      const steps = Math.ceil(range / calculatedStep);
-      calculatedStep = range / steps;
-    }
-    return calculatedStep;
-  } else {
-    return 1;
-  }
-};
-
-const RangeSlider: React.FC<Props> = ({ ...props }) => {
-  const calculatedStep = calculateStep(props?.min, props.max, props.step);
-
-  return (
-    <SliderStyled disabled={props.disabled as boolean}>
-      <RangeSliderWithTooltip step={calculatedStep} draggableTrack {...props} />
-    </SliderStyled>
-  );
-};
-
-const SliderStyled = styled.div<{ disabled: boolean }>`
-  width: 100%;
-  .rc-slider-disabled {
-    background-color: transparent;
-    opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-    cursor: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")};
-  }
-
-  .rc-slider-rail {
-    height: 8px;
-  }
-
-  .rc-slider-handle {
-    background-color: ${({ theme }) => theme.item.default};
-    border: ${({ theme }) => theme.primary.weak};
-    height: 12px;
-    width: 12px;
-    margin-top: -2px;
-  }
-
-  .rc-slider-track {
-    background-color: ${({ theme }) => theme.primary.weak};
-    height: 8px;
-  }
-
-  .rc-slider-rail {
-    background-color: ${({ theme }) => theme.outline.weaker};
-    box-shadow: ${({ theme }) => theme.shadow.input};
-  }
-
-  .rc-slider-tooltip-arrow {
-    background-color: transparent;
-    border-top-color: ${({ theme }) => theme.bg[2]};
-    bottom: 2px;
-    margin-left: -8px;
-    border-width: 9px 8px 0;
-  }
-
-  .rc-slider-tooltip-inner {
-    background-color: ${({ theme }) => theme.bg[2]};
-    color: ${({ theme }) => theme.content.main};
-    box-shadow: ${({ theme }) => theme.shadow.button};
-  }
-`;
-
-export default RangeSlider;
diff --git a/web/src/beta/components/Resizable/hooks.ts b/web/src/beta/components/Resizable/hooks.ts
deleted file mode 100644
index 074457742..000000000
--- a/web/src/beta/components/Resizable/hooks.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import { setLocalStorageData } from "@reearth/beta/utils/localstorage";
-import React, { useCallback, useState, useEffect, useMemo } from "react";
-
-export type Direction = "vertical" | "horizontal";
-export type Gutter = "start" | "end";
-
-const getPositionFromEvent = (e: React.MouseEvent | React.TouchEvent) => {
-  const { nativeEvent } = e;
-  if (nativeEvent instanceof MouseEvent) {
-    const { clientX: x, clientY: y, which } = nativeEvent;
-    if (which === 3) return;
-
-    return { x, y };
-  }
-
-  if (nativeEvent instanceof TouchEvent) {
-    const touch = nativeEvent.touches[0];
-    const { clientX: x, clientY: y } = touch;
-    return { x, y };
-  }
-
-  return;
-};
-
-const getDelta = (direction: Direction, deltaX: number, deltaY: number) =>
-  direction === "vertical" ? deltaX : deltaY;
-
-const getSize = (
-  size: number,
-  delta: number,
-  minSize?: number,
-  maxSize?: number
-) => {
-  let newSize = size + delta;
-  if (minSize !== undefined && newSize < minSize) newSize = minSize;
-  if (maxSize !== undefined && newSize > maxSize) newSize = maxSize;
-  return newSize;
-};
-
-export default (
-  direction: Direction,
-  gutter: Gutter,
-  initialSize: number,
-  minSize: number,
-  maxSize?: number,
-  localStorageKey?: string
-) => {
-  const getLocalStorageParsedState = useCallback((localStorageKey?: string) => {
-    const savedState = localStorageKey && localStorage.getItem(localStorageKey);
-    return savedState ? JSON.parse(savedState) : null;
-  }, []);
-
-  const [startingSize, setStartingSize] = useState(initialSize);
-  const [isResizing, setIsResizing] = useState(false);
-  const [size, setSize] = useState(initialSize);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [minimized, setMinimized] = useState(false);
-  const [difference, setDifference] = useState(0);
-
-  useEffect(() => {
-    const setSizeBasedOnTab = () => {
-      if (localStorageKey) {
-        const parsedState = getLocalStorageParsedState(localStorageKey);
-        const storedSize = parsedState?.size;
-
-        if (storedSize !== undefined) {
-          setSize(storedSize);
-          setMinimized(parsedState.minimized);
-        } else {
-          setSize(initialSize);
-          setMinimized(false);
-        }
-      }
-    };
-    setSizeBasedOnTab();
-  }, [localStorageKey, getLocalStorageParsedState, initialSize]);
-
-  const onResizeStart = useCallback(
-    (
-      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
-    ) => {
-      const position = getPositionFromEvent(e);
-      if (!position) return;
-
-      setStartingSize(size);
-      setIsResizing(true);
-      setPosition(position);
-    },
-    [size]
-  );
-
-  const onResize = useCallback(
-    (e: MouseEvent | TouchEvent) => {
-      if (!isResizing) return;
-
-      const { clientX: x, clientY: y } =
-        e instanceof MouseEvent ? e : e.touches[0];
-      const deltaX = gutter === "start" ? position.x - x : x - position.x;
-      const deltaY = gutter === "start" ? position.y - y : y - position.y;
-      const delta = getDelta(direction, deltaX, deltaY);
-
-      const newDiff = difference + delta;
-
-      setDifference(newDiff);
-
-      setSize(getSize(size, delta, minSize, maxSize));
-
-      if (!minimized && startingSize + newDiff <= minSize / 2) {
-        setMinimized(true);
-      }
-
-      setPosition({ x, y });
-    },
-    [
-      isResizing,
-      gutter,
-      position.x,
-      position.y,
-      direction,
-      difference,
-      size,
-      minSize,
-      maxSize,
-      minimized,
-      startingSize
-    ]
-  );
-
-  const onResizeEnd = useCallback(() => {
-    if (!isResizing) return;
-
-    setIsResizing(false);
-    setPosition({ x: 0, y: 0 });
-    setStartingSize(size);
-    setDifference(0);
-    const storedData = {
-      size,
-      minimized
-    };
-    if (localStorageKey) {
-      setLocalStorageData(localStorageKey, storedData);
-    }
-  }, [isResizing, localStorageKey, minimized, size]);
-
-  const bindEventListeners = useCallback(() => {
-    if (typeof window === "undefined") return;
-    window.addEventListener("mouseup", onResizeEnd);
-    window.addEventListener("mousemove", onResize);
-    window.addEventListener("mouseleave", onResizeEnd);
-    window.addEventListener("touchmove", onResize);
-    window.addEventListener("touchend", onResizeEnd);
-  }, [onResize, onResizeEnd]);
-
-  const unbindEventListeners = useCallback(() => {
-    if (typeof window === "undefined") return;
-    window.removeEventListener("mouseup", onResizeEnd);
-    window.removeEventListener("mousemove", onResize);
-    window.removeEventListener("mouseleave", onResizeEnd);
-    window.removeEventListener("touchmove", onResize);
-    window.removeEventListener("touchend", onResizeEnd);
-  }, [onResize, onResizeEnd]);
-
-  useEffect(() => {
-    if (!isResizing) {
-      unbindEventListeners();
-      return;
-    }
-    bindEventListeners();
-    return () => unbindEventListeners();
-  }, [bindEventListeners, isResizing, unbindEventListeners]);
-
-  const gutterProps = useMemo(
-    () => ({
-      onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => onResizeStart(e),
-      onTouchStart: (e: React.TouchEvent<HTMLDivElement>) => onResizeStart(e)
-    }),
-    [onResizeStart]
-  );
-
-  const handleResetSize = useCallback(() => {
-    setMinimized(false);
-    setSize(initialSize);
-    if (localStorageKey) {
-      setLocalStorageData(localStorageKey, {
-        size: initialSize,
-        minimized: false
-      });
-    }
-  }, [initialSize, localStorageKey]);
-
-  return {
-    size: size || initialSize,
-    gutterProps,
-    minimized,
-    handleResetSize
-  };
-};
diff --git a/web/src/beta/components/Resizable/index.stories.tsx b/web/src/beta/components/Resizable/index.stories.tsx
deleted file mode 100644
index 5a033d9cd..000000000
--- a/web/src/beta/components/Resizable/index.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ReactNode, CSSProperties, ComponentProps } from "react";
-
-import Resizable from ".";
-
-const Container: React.FC<{ children?: ReactNode; style?: CSSProperties }> = ({
-  children,
-  style
-}) => <div style={{ display: "flex", height: 400, ...style }}>{children}</div>;
-const Pane = <div style={{ flex: 1, background: "#ffffff" }} />;
-const Content = (
-  <div
-    style={{
-      width: "100%",
-      height: "100%",
-      background: "#ffffff",
-      color: "#000000"
-    }}
-  >
-    content
-  </div>
-);
-
-export default {
-  component: Resizable
-} as Meta<ComponentProps<typeof Resizable>>;
-
-export const Vertical: StoryObj<typeof Resizable> = {
-  args: {
-    direction: "vertical",
-    gutter: "end",
-    initialSize: 400,
-    minSize: 100
-  },
-  render: (args) => {
-    return (
-      <Container style={{ flexDirection: "row" }}>
-        <Resizable {...args}>{Content}</Resizable>
-        {Pane}
-      </Container>
-    );
-  }
-};
-
-export const Horizontal: StoryObj<typeof Resizable> = {
-  args: {
-    direction: "horizontal",
-    gutter: "end",
-    initialSize: 350,
-    minSize: 200
-  },
-  render: (args) => {
-    return (
-      <Container style={{ flexDirection: "column" }}>
-        <Resizable {...args}>{Content}</Resizable>
-        {Pane}
-      </Container>
-    );
-  }
-};
diff --git a/web/src/beta/components/Resizable/index.tsx b/web/src/beta/components/Resizable/index.tsx
deleted file mode 100644
index fe2052197..000000000
--- a/web/src/beta/components/Resizable/index.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import { styled } from "@reearth/services/theme";
-import { ReactNode } from "react";
-
-import useHooks, { type Direction, type Gutter } from "./hooks";
-
-type Props = {
-  children?: ReactNode;
-  direction: Direction;
-  gutter: Gutter;
-  initialSize: number;
-  minSize: number;
-  maxSize?: number;
-  localStorageKey?: string;
-};
-
-const Resizable: React.FC<Props> = ({
-  direction,
-  gutter,
-  minSize,
-  maxSize,
-  initialSize,
-  children,
-  localStorageKey
-}) => {
-  const { size, gutterProps, minimized, handleResetSize } = useHooks(
-    direction,
-    gutter,
-    initialSize,
-    minSize,
-    maxSize,
-    localStorageKey
-  );
-
-  const showTopGutter = direction === "horizontal" && gutter === "start";
-  const showRightGutter = direction === "vertical" && gutter === "end";
-  const showBottomGutter = direction === "horizontal" && gutter === "end";
-  const showLeftGutter = direction === "vertical" && gutter === "start";
-
-  return (
-    <>
-      {minimized ? (
-        <MinimizedWrapper direction={direction} onClick={handleResetSize}>
-          <Icon
-            icon={
-              direction === "horizontal"
-                ? gutter === "end"
-                  ? "arrowDown"
-                  : "arrowUp"
-                : gutter === "end"
-                  ? "arrowRight"
-                  : "arrowLeft"
-            }
-          />
-        </MinimizedWrapper>
-      ) : (
-        <StyledResizable direction={direction} size={size} minSize={minSize}>
-          {showTopGutter && (
-            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
-          )}
-          {showLeftGutter && (
-            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
-          )}
-          {children}
-          {showRightGutter && (
-            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
-          )}
-          {showBottomGutter && (
-            <Gutter direction={direction} gutter={gutter} {...gutterProps} />
-          )}
-        </StyledResizable>
-      )}
-    </>
-  );
-};
-
-const StyledResizable = styled.div<{
-  direction: "vertical" | "horizontal";
-  size: number;
-  minSize?: number;
-  maxSize?: number;
-}>`
-  display: flex;
-  align-items: stretch;
-  position: relative;
-  flex-direction: ${({ direction }) =>
-    direction === "vertical" ? "row" : "column"};
-  width: ${({ direction, size }) =>
-    direction === "horizontal" ? null : `${size}px`};
-  height: ${({ direction, size }) =>
-    direction === "vertical" ? null : `${size}px`};
-  flex-shrink: 0;
-  min-width: ${({ direction, minSize }) =>
-    direction === "vertical" && minSize ? `${minSize}px` : null};
-  min-height: ${({ direction, minSize }) =>
-    direction === "horizontal" && minSize ? `${minSize}px` : null};
-  max-width: ${({ direction, maxSize }) =>
-    direction === "vertical" && maxSize ? `${maxSize}px` : null};
-  max-height: ${({ direction, maxSize }) =>
-    direction === "horizontal" && maxSize ? `${maxSize}px` : null};
-`;
-
-const Gutter = styled.div<{ direction: Direction; gutter: Gutter }>`
-  user-select: none;
-  position: absolute;
-  ${({ direction }) => direction === "horizontal" && "height: 4px;"}
-  ${({ direction }) => direction === "horizontal" && "width: 100%;"}
-  ${({ direction }) => direction === "horizontal" && "cursor: row-resize;"}
-  ${({ direction }) => direction === "vertical" && "height: 100%;"}
-  ${({ direction }) => direction === "vertical" && "width: 4px;"}
-  ${({ direction }) => direction === "vertical" && "cursor: col-resize;"}
-  left: ${({ direction, gutter }) =>
-    direction === "vertical" && gutter === "start" ? 0 : null};
-  right: ${({ direction, gutter }) =>
-    direction === "vertical" && gutter === "end" ? 0 : null};
-  top: ${({ direction, gutter }) =>
-    direction === "horizontal" && gutter === "start" ? 0 : null};
-  bottom: ${({ direction, gutter }) =>
-    direction === "horizontal" && gutter === "end" ? 0 : null};
-`;
-
-const MinimizedWrapper = styled.div<Pick<Props, "direction">>`
-  display: flex;
-  flex-direction: ${({ direction }) => (direction === "horizontal" ? "column" : "row")};
-  align-items: center;
-  width: ${({ direction }) => (direction === "horizontal" ? null : `20px`)};
-  height: ${({ direction }) => (direction === "vertical" ? null : `20px`)};
-  background: ${({ theme }) => theme.bg[0]};
-  cursor: pointer;
-  transition: background 0.3s;
-
-  :hover {
-    background: ${({ theme }) => theme.bg[1]};
-  }
-}`;
-
-export default Resizable;
diff --git a/web/src/beta/components/SettingsButtons/index.stories.tsx b/web/src/beta/components/SettingsButtons/index.stories.tsx
deleted file mode 100644
index e244aa37c..000000000
--- a/web/src/beta/components/SettingsButtons/index.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { ReactNode } from "react";
-
-import SettingsButtons from ".";
-
-export default {
-  component: SettingsButtons
-} as Meta;
-
-type Story = StoryObj<typeof SettingsButtons>;
-
-const Wrapper: React.FC<{ children: ReactNode }> = ({ children }) => (
-  <div style={{ display: "flex" }}>{children}</div>
-);
-
-export const Default: Story = {
-  args: {
-    title: "Audio",
-    icon: "audio"
-  },
-  render: (args) => {
-    return (
-      <Wrapper>
-        <SettingsButtons {...args} />
-      </Wrapper>
-    );
-  }
-};
diff --git a/web/src/beta/components/SettingsButtons/index.tsx b/web/src/beta/components/SettingsButtons/index.tsx
deleted file mode 100644
index 87ed9c962..000000000
--- a/web/src/beta/components/SettingsButtons/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled, useTheme } from "@reearth/services/theme";
-
-export interface Props {
-  title: string;
-  icon: string;
-  onBlock?: () => void;
-  onEdit?: () => void;
-  onSetting?: () => void;
-}
-
-const SettingsButtons: React.FC<Props> = ({
-  title,
-  icon,
-  onBlock,
-  onEdit,
-  onSetting
-}) => {
-  const theme = useTheme();
-
-  return (
-    <Wrapper>
-      <StyledMainIcon size={16} onClick={onBlock} icon={icon} />
-      <StyledText
-        size={"footnote"}
-        color={theme.content.withBackground}
-        onClick={onBlock}
-      >
-        {title}
-      </StyledText>
-      <StyledSubIcon size={12} icon={"editIcon"} onClick={onEdit} />
-      <StyledSubIcon size={12} icon={"settings"} onClick={onSetting} />
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  height: 100%;
-  background: ${(props) => props.theme.select.main};
-`;
-
-const StyledText = styled(Text)`
-  padding: 0px 4px;
-  cursor: pointer;
-`;
-
-const StyledMainIcon = styled(Icon)`
-  padding: 2px;
-  cursor: pointer;
-`;
-
-const StyledSubIcon = styled(Icon)`
-  padding: 4px;
-  justify-items: center;
-  border-left: 0.5px solid ${(props) => props.theme.outline.main};
-  cursor: pointer;
-`;
-
-export default SettingsButtons;
diff --git a/web/src/beta/components/SidePanelSectionField/index.stories.tsx b/web/src/beta/components/SidePanelSectionField/index.stories.tsx
deleted file mode 100644
index 98d7da2fb..000000000
--- a/web/src/beta/components/SidePanelSectionField/index.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import Component from ".";
-
-const meta: Meta<typeof Component> = {
-  component: Component
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Component>;
-
-export const Default: Story = {
-  args: {
-    title: "Title",
-    children: <p>Item</p>
-  }
-};
-
-export const Empty: Story = {
-  args: {
-    title: "Title"
-  }
-};
diff --git a/web/src/beta/components/SidePanelSectionField/index.tsx b/web/src/beta/components/SidePanelSectionField/index.tsx
deleted file mode 100644
index 16bf82c03..000000000
--- a/web/src/beta/components/SidePanelSectionField/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { styled, useTheme } from "@reearth/services/theme";
-import { useState, ReactNode, useEffect } from "react";
-
-import Icon from "../Icon";
-import Text from "../Text";
-
-const SidePanelSectionField: React.FC<{
-  className?: string;
-  title?: string;
-  startCollapsed?: boolean;
-  gap?: number;
-  children?: ReactNode;
-  storageKey?: string;
-  border?: string;
-}> = ({
-  className,
-  title,
-  startCollapsed,
-  gap,
-  children,
-  storageKey,
-  border
-}) => {
-  const theme = useTheme();
-  const [opened, setOpened] = useState<boolean>(() => {
-    const storedValue = localStorage.getItem(storageKey || "");
-    return storedValue ? JSON.parse(storedValue) : !startCollapsed;
-  });
-
-  useEffect(() => {
-    localStorage.setItem(storageKey || "", JSON.stringify(opened));
-  }, [opened, storageKey]);
-
-  return (
-    <Field className={className}>
-      {title && (
-        <Header onClick={() => setOpened(!opened)}>
-          <Text size="body" color={theme.content.main}>
-            {title}
-          </Text>
-          <ArrowIcon
-            icon="arrowToggle"
-            size={12}
-            color={theme.content.main}
-            opened={opened}
-          />
-        </Header>
-      )}
-
-      {opened && children && (
-        <Content gap={gap} border={border}>
-          {children}
-        </Content>
-      )}
-    </Field>
-  );
-};
-
-const Field = styled.div`
-  background: ${({ theme }) => theme.bg[1]};
-  border-radius: 4px;
-`;
-
-const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 8px;
-  cursor: pointer;
-  height: 38px;
-`;
-
-const ArrowIcon = styled(Icon)<{ opened?: boolean }>`
-  transform: rotate(${(props) => (props.opened ? 90 : 180)}deg);
-  transition: all 0.2s;
-`;
-
-const Content = styled.div<{ gap?: number; border?: string }>`
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: ${({ gap }) => (gap ?? 16) + "px"} 16px;
-  border-top: ${({ border, theme }) =>
-    border ? `1px solid  ${theme.outline.weak}` : "none"};
-`;
-
-export default SidePanelSectionField;
diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
deleted file mode 100644
index 4331f2113..000000000
--- a/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import StorytellingPageSectionItem from ".";
-
-export default {
-  component: StorytellingPageSectionItem
-} as Meta;
-
-type Story = StoryObj<typeof StorytellingPageSectionItem>;
-
-export const Default: Story = {
-  args: {
-    icon: "square",
-    title: "New Page",
-    index: 1,
-    active: false
-  }
-};
-
-export const LongText: Story = {
-  args: {
-    icon: "square",
-    title:
-      "gashjdjahasdasdasdasdasdjjashdjkashdjkahdjkhaskjdhasdasdasdasddfggjsdhasjkdhjkashdkjahskjdhakjshdkahskjdakjshdkjahsdkjhajksdhakjhsdkjhaksjhdakjhsdkjhakjsdhakjhsdkjsadasdasdahskdjhasdasdasdasdasdasdakjsdhksadasd",
-    index: 1,
-    active: false
-  }
-};
diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.tsx
deleted file mode 100644
index a03004124..000000000
--- a/web/src/beta/components/StorytellingPageSectionItem/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { styled, useTheme } from "@reearth/services/theme";
-import { FC } from "react";
-
-import Icon from "../Icon";
-import Text from "../Text";
-
-type Props = {
-  icon: string;
-  title: string;
-  index: number;
-  active?: boolean;
-  onAction?: () => void;
-  onClick?: () => void;
-};
-
-const StorytellingPageSectionItem: FC<Props> = ({
-  icon,
-  title,
-  index,
-  active,
-  onAction,
-  onClick
-}) => {
-  const theme = useTheme();
-  return (
-    <HorizontalBox>
-      <VerticalBox>
-        <Text size={"body"}>{index}</Text>
-        <Icon icon={icon} />
-      </VerticalBox>
-      <TitleArea active={active}>
-        <Text
-          onClick={onClick}
-          size="footnote"
-          color={theme.content.withBackground}
-          otherProperties={{ wordBreak: "break-all" }}
-        >
-          {title}
-        </Text>
-        <Wrapper>
-          <Icon icon="actionbutton" onClick={onAction} />
-        </Wrapper>
-      </TitleArea>
-    </HorizontalBox>
-  );
-};
-
-const HorizontalBox = styled.div`
-  display: flex;
-  min-height: 56px;
-  gap: 4px;
-  cursor: pointer;
-`;
-
-const VerticalBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-`;
-
-const TitleArea = styled.div<{ active?: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  padding: 8px;
-  gap: 4px;
-
-  background: ${(props) =>
-    props.active ? props.theme.select.main : props.theme.bg[2]};
-  border: 1px solid
-    ${(props) => (props.active ? props.theme.select.main : props.theme.bg[4])};
-  border-radius: 6px;
-
-  width: 100%;
-`;
-
-const Wrapper = styled.div`
-  height: 100%;
-`;
-
-export default StorytellingPageSectionItem;
diff --git a/web/src/beta/components/SubTabButtonList/index.stories.tsx b/web/src/beta/components/SubTabButtonList/index.stories.tsx
deleted file mode 100644
index 57a72e7ae..000000000
--- a/web/src/beta/components/SubTabButtonList/index.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import SubTabButtonList from ".";
-
-const meta: Meta<typeof SubTabButtonList> = {
-  component: SubTabButtonList
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SubTabButtonList>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { id: "1", name: "GIS", active: true },
-      { id: "2", name: "Story", active: false },
-      { id: "3", name: "Web AR", active: false }
-    ]
-  }
-};
diff --git a/web/src/beta/components/SubTabButtonList/index.tsx b/web/src/beta/components/SubTabButtonList/index.tsx
deleted file mode 100644
index 556b3ef3f..000000000
--- a/web/src/beta/components/SubTabButtonList/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import Text from "@reearth/beta/components/Text";
-import { SwitchField } from "@reearth/beta/hooks/useManageSwitchState/hooks";
-import { styled, useTheme } from "@reearth/services/theme";
-
-type CustomField = {
-  name: string;
-};
-type SwitchCustomField = SwitchField<CustomField>;
-
-export type Props = {
-  items: SwitchCustomField[];
-  onChange?: (id: string) => void;
-};
-const SubTabButtonList: React.FC<Props> = ({ items, onChange }) => {
-  const theme = useTheme();
-  return (
-    <>
-      {items.map((item, index) => (
-        <SubTabButton
-          key={index}
-          disabled={!!item?.active}
-          onClick={() => onChange?.(item.id)}
-        >
-          <Text size="footnote" color={theme.content.main}>
-            {item.name}
-          </Text>
-        </SubTabButton>
-      ))}
-    </>
-  );
-};
-
-const SubTabButton = styled.button<{ disabled: boolean }>`
-  background: ${({ disabled, theme }) =>
-    disabled ? theme.select.main : "inherit"};
-  padding: 8px;
-  height: 32px;
-  border-radius: 4px 4px 0px 0px;
-  transition: all 0.5s;
-  :hover {
-    background: ${({ theme }) => theme.select.main};
-  }
-  text-align: center;
-`;
-
-export default SubTabButtonList;
diff --git a/web/src/beta/components/SwitchButtonList/index.stories.tsx b/web/src/beta/components/SwitchButtonList/index.stories.tsx
deleted file mode 100644
index f2b0c019d..000000000
--- a/web/src/beta/components/SwitchButtonList/index.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import SwitchButtonList from ".";
-
-export default {
-  component: SwitchButtonList
-} as Meta;
-
-type Story = StoryObj<typeof SwitchButtonList>;
-
-export const Default: Story = {
-  args: {
-    list: [
-      { id: "1", text: "PC", active: true },
-      { id: "2", text: "Ipad", active: false },
-      { id: "3", text: "Phone", active: false }
-    ]
-  }
-};
diff --git a/web/src/beta/components/SwitchButtonList/index.tsx b/web/src/beta/components/SwitchButtonList/index.tsx
deleted file mode 100644
index 71d34c689..000000000
--- a/web/src/beta/components/SwitchButtonList/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import Text from "@reearth/beta/components/Text";
-import { SwitchField } from "@reearth/beta/hooks/useManageSwitchState/hooks";
-import { styled, useTheme } from "@reearth/services/theme";
-
-type AdditionalField = {
-  text: string;
-};
-type SwitchAdditionalField = SwitchField<AdditionalField>;
-
-export type Props = {
-  list: SwitchAdditionalField[];
-  onChange?: (id: string) => void;
-};
-const SwitchButtonList: React.FC<Props> = ({ list, onChange }) => {
-  const theme = useTheme();
-  return (
-    <>
-      {list.map((item, index) => (
-        <SwitchButton
-          key={index}
-          disabled={!!item?.active}
-          onClick={() => onChange?.(item.id)}
-          first={index === 0}
-          end={index === list.length - 1}
-        >
-          <Text
-            size="footnote"
-            color={
-              item.active ? theme.content.withBackground : theme.content.main
-            }
-          >
-            {item.text}
-          </Text>
-        </SwitchButton>
-      ))}
-    </>
-  );
-};
-const SwitchButton = styled.button<{
-  disabled: boolean;
-  first: boolean;
-  end: boolean;
-}>`
-  background: ${(props) =>
-    props.disabled ? props.theme.select.main : props.theme.bg[0]};
-  padding: 8px;
-  height: 32px;
-  border-top-left-radius: ${(props) => (props.first ? "4px" : "0px")};
-  border-top-right-radius: ${(props) => (props.end ? "4px" : "0px")};
-  border-bottom-left-radius: ${(props) => (props.first ? "4px" : "0px")};
-  border-bottom-right-radius: ${(props) => (props.end ? "4px" : "0px")};
-  transition: all 0.5s ease;
-  :hover {
-    background: ${(props) => props.theme.select.main};
-  }
-`;
-
-export default SwitchButtonList;
diff --git a/web/src/beta/components/TabButton/index.stories.tsx b/web/src/beta/components/TabButton/index.stories.tsx
deleted file mode 100644
index 535c2871e..000000000
--- a/web/src/beta/components/TabButton/index.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import TabButton from ".";
-
-const meta: Meta<typeof TabButton> = {
-  component: TabButton
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TabButton>;
-
-export const Close: Story = {
-  args: {
-    label: "Editor",
-    selected: false
-  }
-};
-
-export const Open: Story = {
-  args: {
-    label: "Editor",
-    selected: true
-  }
-};
diff --git a/web/src/beta/components/TabButton/index.test.tsx b/web/src/beta/components/TabButton/index.test.tsx
deleted file mode 100644
index 0be1b7469..000000000
--- a/web/src/beta/components/TabButton/index.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { expect, test } from "vitest";
-
-import { render, screen } from "@reearth/test/utils";
-
-import TabButton from ".";
-
-const handleClick = () => {};
-
-test("1. should be rendered", () => {
-  render(<TabButton label="test1" onClick={handleClick} selected={false} />);
-});
-
-test("2. should display button label", () => {
-  render(<TabButton label="test2" onClick={handleClick} selected={false} />);
-  expect(screen.getByRole("button")).toBeInTheDocument();
-  expect(screen.getByText(/test2/)).toBeInTheDocument();
-});
-
-test("3. should disabled true button", () => {
-  render(<TabButton label="test3" onClick={handleClick} selected={true} />);
-  expect(screen.getByRole("button")).toBeDisabled();
-});
-
-test("4. should disabled false button", () => {
-  render(<TabButton label="test4" onClick={handleClick} selected={false} />);
-  expect(screen.getByRole("button")).not.toBeDisabled();
-});
diff --git a/web/src/beta/components/TabButton/index.tsx b/web/src/beta/components/TabButton/index.tsx
deleted file mode 100644
index 032b3a5aa..000000000
--- a/web/src/beta/components/TabButton/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-import type { FC } from "react";
-
-import Icon, { Icons } from "../Icon";
-
-export type Props = {
-  label: string;
-  icon?: Icons;
-  onClick?: () => void;
-  selected?: boolean;
-};
-
-const TabButton: FC<Props> = ({ label, icon, onClick, selected }) => {
-  return (
-    <Button onClick={onClick} selected={selected} disabled={selected}>
-      {icon && <Icon icon={icon} size={20} />}
-      <Text size="body" customColor>
-        {label}
-      </Text>
-    </Button>
-  );
-};
-
-type ButtonProps = {
-  selected?: boolean;
-};
-
-const Button = styled.button<ButtonProps>`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 4px 8px;
-  gap: 8px;
-  border-radius: 4px;
-  color: ${({ selected, theme }) =>
-    selected ? theme.content.main : theme.content.weak};
-  background: ${({ disabled, theme }) =>
-    disabled ? theme.bg[3] : theme.bg[0]};
-  line-height: 19px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  :hover {
-    background: ${({ theme }) => theme.bg[3]};
-    color: ${({ theme }) => theme.content.main};
-    transition: all 0.4s;
-  }
-`;
-
-export default TabButton;
diff --git a/web/src/beta/components/TabMenu/index.stories.tsx b/web/src/beta/components/TabMenu/index.stories.tsx
deleted file mode 100644
index 82b01ff21..000000000
--- a/web/src/beta/components/TabMenu/index.stories.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import Resizable from "@reearth/beta/components/Resizable";
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { ReactNode, CSSProperties } from "react";
-
-import TabMenu, { Props } from "./index";
-
-export default {
-  component: TabMenu
-} as Meta;
-
-type Story = StoryObj<typeof TabMenu>;
-
-const SampleComponent = () => {
-  return (
-    <div>
-      <Button
-        margin="auto"
-        buttonType="primary"
-        text="Disabled Sample Button"
-        disabled
-      />
-      <JSONTag>
-        {JSON.stringify(
-          {
-            type: "Feature",
-            geometry: {
-              type: "Point",
-              coordinates: [125.6, 10.1]
-            },
-            properties: {
-              name: "Dinagat Islands"
-            }
-          },
-          null,
-          2
-        )}
-      </JSONTag>
-    </div>
-  );
-};
-
-const JSONTag = styled.pre`
-  background: ${({ theme }) => theme.bg[0]};
-  color: ${({ theme }) => theme.content.main};
-  border-radius: 10px;
-  padding: 10px;
-`;
-
-const Container: React.FC<{ children?: ReactNode; style?: CSSProperties }> = ({
-  children,
-  style
-}) => (
-  <div style={{ display: "flex", height: "100vh", ...style }}>{children}</div>
-);
-
-const Pane = (
-  <div
-    style={{
-      flex: 1,
-      background: "#ffffff",
-      color: "black",
-      fontSize: 24,
-      textAlign: "center",
-      padding: "25vh 5rem"
-    }}
-  >
-    {" "}
-    Whatever the main area holds. The tab panel works only when on the{" "}
-    <b>left</b> with <b>flex 100%</b>. Which is to do with{" "}
-    <b>Resizable Component</b> and not the left panel.
-  </div>
-);
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = (tab: string) => updateArgs({ selectedTab: tab });
-
-  return (
-    <Container style={{ flexDirection: "row" }}>
-      {Pane}
-      <Resizable
-        direction="vertical"
-        gutter="start"
-        initialSize={500}
-        minSize={200}
-      >
-        <TabMenu {...args} onSelectedTabChange={handleChange} />
-      </Resizable>
-    </Container>
-  );
-};
-
-Default.args = {
-  tabs: [
-    {
-      id: "tab1",
-      name: "My infobox",
-      icon: "infobox",
-      component: <SampleComponent />
-    },
-    {
-      id: "tab2",
-      icon: "marker",
-      component: <Text size="body">Tab 2. Can be any react component</Text>
-    }
-  ],
-  selectedTab: "tab1"
-};
diff --git a/web/src/beta/components/TabMenu/index.tsx b/web/src/beta/components/TabMenu/index.tsx
deleted file mode 100644
index f7f1f713a..000000000
--- a/web/src/beta/components/TabMenu/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Icons from "@reearth/beta/components/Icon/icons";
-import { styled } from "@reearth/services/theme";
-import { FC, useMemo } from "react";
-
-import Text from "../Text";
-
-type menuAlignment = "top" | "left";
-
-export type TabObject = {
-  id: string;
-  name?: string;
-  icon?: keyof typeof Icons;
-  component?: JSX.Element;
-};
-
-export type Props = {
-  tabs: TabObject[];
-  selectedTab: string;
-  scrollable?: boolean;
-  onSelectedTabChange: (tab: string) => void;
-  menuAlignment?: menuAlignment;
-};
-
-const TabMenu: FC<Props> = ({
-  tabs,
-  selectedTab,
-  scrollable,
-  onSelectedTabChange,
-  menuAlignment
-}) => {
-  const selectedTabItem = useMemo(() => {
-    return tabs.find(({ id }) => id === selectedTab);
-  }, [selectedTab, tabs]);
-
-  return (
-    <Wrapper menuAlignment={menuAlignment}>
-      <Tabs menuAlignment={menuAlignment}>
-        {tabs.map(({ id, icon, name }) => (
-          <TabIconWrapper
-            key={id}
-            onClick={() => onSelectedTabChange(id)}
-            selected={id === selectedTab}
-            menuAlignment={menuAlignment}
-          >
-            {icon ? (
-              <Icon icon={icon} size={20} />
-            ) : (
-              <TabHeader size="footnote">{name}</TabHeader>
-            )}
-          </TabIconWrapper>
-        ))}
-      </Tabs>
-      <MainArea scrollable={scrollable}>
-        {selectedTabItem?.name && !menuAlignment && (
-          <Header>
-            <Text size="body">{selectedTabItem.name}</Text>
-          </Header>
-        )}
-        <Content>{selectedTabItem ? selectedTabItem.component : null}</Content>
-      </MainArea>
-    </Wrapper>
-  );
-};
-
-export default TabMenu;
-
-const Wrapper = styled.div<{ menuAlignment?: menuAlignment }>`
-  display: ${({ menuAlignment }) =>
-    menuAlignment === "top" ? "flex" : "grid"};
-  grid-template-columns: 28px 1fr;
-  flex-flow: column nowrap;
-  position: relative;
-  background: ${({ theme }) => theme.bg[1]};
-  height: 100%;
-`;
-
-const Tabs = styled.div<{ menuAlignment?: menuAlignment }>`
-  display: flex;
-  flex-flow: ${({ menuAlignment }) =>
-      menuAlignment === "top" ? "row" : "column"}
-    nowrap;
-  padding-top: 4px;
-  background: ${({ theme }) => theme.bg[0]};
-`;
-
-const TabIconWrapper = styled.div<{
-  selected: boolean;
-  menuAlignment?: menuAlignment;
-}>`
-  padding: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  color: ${({ selected, theme }) =>
-    selected ? theme.content.main : theme.content.weak};
-  background: ${(props) => (props.selected ? props.theme.bg[1] : "inherit")};
-  border-top-right-radius: ${({ menuAlignment }) =>
-    menuAlignment === "top" ? "4px" : "0"};
-  border-top-left-radius: ${({ menuAlignment }) =>
-    menuAlignment === "top" ? "4px" : "0"};
-`;
-
-const TabHeader = styled(Text)`
-  padding: 4px;
-`;
-
-const Header = styled.div`
-  padding: 12px;
-  border-bottom: 1px solid ${({ theme }) => theme.outline.weak};
-`;
-
-const MainArea = styled.div<{ scrollable?: boolean }>`
-  display: block;
-  height: auto;
-  overflow-y: ${({ scrollable }) => (scrollable ? "auto" : "unset")};
-`;
-
-const Content = styled.div`
-  padding: 12px;
-`;
diff --git a/web/src/beta/components/Toggle/index.stories.tsx b/web/src/beta/components/Toggle/index.stories.tsx
deleted file mode 100644
index f835256d2..000000000
--- a/web/src/beta/components/Toggle/index.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import Toggle, { Props } from ".";
-
-const meta: Meta<typeof Toggle> = {
-  component: Toggle
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (checked: boolean) => updateArgs({ checked: !checked }),
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <Toggle {...args} onChange={handleChange} />
-      </div>
-      <div>
-        <Toggle {...args} checked={!args.checked} onChange={handleChange} />
-      </div>
-      <div>
-        <Toggle
-          {...args}
-          checked={!args.checked}
-          disabled={true}
-          onChange={handleChange}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin-left: 2rem;
-  margin-top: 2rem;
-  height: 300px;
-`;
-
-Default.args = {
-  checked: true,
-  disabled: false,
-  onChange: () => console.log("clicked")
-};
diff --git a/web/src/beta/components/Toggle/index.tsx b/web/src/beta/components/Toggle/index.tsx
deleted file mode 100644
index 5663b6005..000000000
--- a/web/src/beta/components/Toggle/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { styled } from "@reearth/services/theme";
-
-export type Props = {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
-};
-
-const Toggle: React.FC<Props> = ({ checked, onChange, disabled = false }) => (
-  <Wrapper>
-    <Switch
-      checked={checked}
-      disabled={disabled}
-      onClick={() => onChange(!checked)}
-    >
-      <TopSlider checked={checked} />
-    </Switch>
-  </Wrapper>
-);
-
-export default Toggle;
-
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-const Switch = styled.label<{
-  checked: boolean;
-  disabled: boolean;
-}>`
-  cursor: ${({ disabled }) => (!disabled ? "pointer" : "not-allowed")};
-  width: 24px;
-  height: 14px;
-  background: ${({ checked, theme }) =>
-    checked ? theme.select.main : theme.secondary.main};
-  border: 1px solid
-    ${({ checked, theme }) =>
-      checked ? theme.select.main : theme.secondary.main};
-  border-radius: 12px;
-  opacity: ${({ disabled }) => (!disabled ? 1 : 0.5)};
-  transition: 0.4s;
-`;
-
-const TopSlider = styled.div<{
-  checked: boolean;
-}>`
-  width: 14px;
-  height: 14px;
-  background: ${({ theme }) => theme.content.withBackground};
-  transition: 0.4s;
-  border-radius: 50%;
-  transform: ${({ checked }) => checked && "translateX(10px)"};
-`;
diff --git a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx b/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
deleted file mode 100644
index d9ea0ca9a..000000000
--- a/web/src/beta/components/fields/CameraField/CapturePanel/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import NumberInput from "@reearth/beta/components/fields/common/NumberInput";
-import Text from "@reearth/beta/components/Text";
-import { Camera } from "@reearth/beta/utils/value";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useMemo } from "react";
-
-import PanelCommon from "../../common/PanelCommon";
-import type { RowType } from "../types";
-import { radiansToDegrees } from "../utils";
-
-type Props = {
-  camera?: Camera;
-  onSave: (value?: Camera) => void;
-  onClose: () => void;
-};
-
-const CapturePanel: React.FC<Props> = ({ camera, onSave, onClose }) => {
-  const t = useT();
-
-  const panelContent: Record<string, RowType> = useMemo(() => {
-    return {
-      [t("Current Position")]: [
-        { id: "lat", description: t("Latitude"), value: camera?.lat },
-        { id: "lng", description: t("Longitude"), value: camera?.lng },
-        { id: "height", description: t("Height"), value: camera?.height }
-      ],
-      [t("Current Rotation")]: [
-        {
-          id: "heading",
-          description: t("Heading"),
-          value: radiansToDegrees(camera?.heading ?? 0)
-        },
-        {
-          id: "pitch",
-          description: t("Pitch"),
-          value: radiansToDegrees(camera?.pitch ?? 0)
-        },
-        {
-          id: "roll",
-          description: t("Roll"),
-          value: radiansToDegrees(camera?.roll ?? 0)
-        }
-      ]
-    };
-  }, [t, camera]);
-
-  return (
-    <PanelCommon title={t("Camera Position Editor")} onClose={onClose}>
-      {Object.keys(panelContent).map((group) => (
-        <FieldGroup key={group}>
-          <Text size="footnote">{group}</Text>
-          <InputWrapper>
-            {panelContent[group].map((field) => (
-              <StyledNumberInput
-                key={field.id}
-                inputDescription={field.description}
-                value={field.value}
-                suffix={field.suffix}
-                disabled
-              />
-            ))}
-          </InputWrapper>
-        </FieldGroup>
-      ))}
-      <Divider />
-      <ButtonWrapper>
-        <StyledButton text={t("Cancel")} size="small" onClick={onClose} />
-        <StyledButton
-          text={t("Capture")}
-          size="small"
-          buttonType="primary"
-          onClick={() => onSave(camera)}
-        />
-      </ButtonWrapper>
-    </PanelCommon>
-  );
-};
-
-export default CapturePanel;
-
-const FieldGroup = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  gap: 4px;
-  padding: 4px;
-`;
-
-const InputWrapper = styled.div`
-  display: flex;
-  gap: 4px;
-`;
-
-const Divider = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.outline.weak};
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  gap: 8px;
-  padding: 8px;
-`;
-
-const StyledButton = styled(Button)`
-  flex: 1;
-`;
-
-const StyledNumberInput = styled(NumberInput)`
-  flex: 1;
-`;
diff --git a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts b/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
deleted file mode 100644
index ea3fec425..000000000
--- a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useT } from "@reearth/services/i18n";
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-import type { Camera, RowType } from "../types";
-import { saveFriendlyCamera, userFriendlyCamera } from "../utils";
-
-export default ({
-  camera,
-  onFlyTo,
-  onSave
-}: {
-  camera?: Camera;
-  onFlyTo?: (c?: Camera) => void;
-  onSave: (value?: Camera) => void;
-}) => {
-  const t = useT();
-  const [newCamera, setNewCamera] = useState<Camera | undefined>(
-    camera ? userFriendlyCamera(camera) : undefined
-  );
-
-  useEffect(() => {
-    if (!newCamera && camera) {
-      setNewCamera(userFriendlyCamera(camera));
-    }
-  }, [newCamera, camera]);
-
-  const handleFieldUpdate = useCallback(
-    (key: keyof Camera, update?: number) => {
-      if (update === undefined || !newCamera) return;
-      const updated: Camera = {
-        ...newCamera,
-        [key]: update
-      };
-      setNewCamera(updated);
-      onFlyTo?.(saveFriendlyCamera(updated));
-    },
-    [newCamera, onFlyTo]
-  );
-
-  const panelContent: Record<string, RowType> = useMemo(() => {
-    return {
-      [t("Location")]: [
-        { id: "lat", description: t("Latitude") },
-        { id: "lng", description: t("Longitude") }
-      ],
-      [t("Height")]: [{ id: "height", unit: "km", description: t("Height") }],
-      [t("Rotation")]: [
-        { id: "heading", description: t("Heading") },
-        { id: "pitch", description: t("Pitch") },
-        { id: "roll", description: t("Roll") }
-      ]
-    };
-  }, [t]);
-
-  const handleChange = useCallback(
-    (field: keyof Camera) => (value?: number) => {
-      if (value === newCamera?.[field]) return;
-      handleFieldUpdate(field, value);
-    },
-    [newCamera, handleFieldUpdate]
-  );
-
-  const handleSave = useCallback(() => {
-    if (!newCamera) return;
-    const saveFriendly = saveFriendlyCamera(newCamera);
-    onSave?.(saveFriendly);
-  }, [newCamera, onSave]);
-
-  return {
-    newCamera,
-    panelContent,
-    handleChange,
-    handleSave
-  };
-};
diff --git a/web/src/beta/components/fields/CameraField/EditPanel/index.tsx b/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
deleted file mode 100644
index 53be9d6f9..000000000
--- a/web/src/beta/components/fields/CameraField/EditPanel/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import NumberInput from "@reearth/beta/components/fields/common/NumberInput";
-import Text from "@reearth/beta/components/Text";
-import type { Camera } from "@reearth/beta/utils/value";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-
-import PanelCommon from "../../common/PanelCommon";
-
-import useHooks from "./hooks";
-
-type Props = {
-  camera?: Camera;
-  onSave: (value?: Camera) => void;
-  onFlyTo?: (camera?: Camera) => void;
-  onClose: () => void;
-};
-
-const EditPanel: React.FC<Props> = ({ camera, onSave, onFlyTo, onClose }) => {
-  const t = useT();
-
-  const { newCamera, panelContent, handleChange, handleSave } = useHooks({
-    camera,
-    onFlyTo,
-    onSave
-  });
-
-  return (
-    <PanelCommon title={t("Camera Position Editor")} onClose={onClose}>
-      {Object.keys(panelContent).map((group) => (
-        <FieldGroup key={group}>
-          <Text size="footnote">{group}</Text>
-          <InputWrapper>
-            {panelContent[group].map((field) => (
-              <StyledNumberInput
-                key={field.id}
-                value={newCamera?.[field.id] ?? 0}
-                inputDescription={field.description}
-                suffix={field.suffix}
-                onChange={handleChange(field.id)}
-              />
-            ))}
-          </InputWrapper>
-        </FieldGroup>
-      ))}
-      <Divider />
-      <ButtonWrapper>
-        <StyledButton text={t("Cancel")} size="small" onClick={onClose} />
-        <StyledButton
-          text={t("Apply")}
-          size="small"
-          buttonType="primary"
-          onClick={handleSave}
-        />
-      </ButtonWrapper>
-    </PanelCommon>
-  );
-};
-
-export default EditPanel;
-
-const FieldGroup = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  gap: 4px;
-  padding: 4px;
-`;
-
-const InputWrapper = styled.div`
-  display: flex;
-  gap: 4px;
-`;
-
-const Divider = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.outline.weak};
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  gap: 8px;
-  padding: 8px;
-`;
-
-const StyledButton = styled(Button)`
-  flex: 1;
-`;
-
-const StyledNumberInput = styled(NumberInput)`
-  flex: 1;
-`;
diff --git a/web/src/beta/components/fields/CameraField/index.stories.tsx b/web/src/beta/components/fields/CameraField/index.stories.tsx
deleted file mode 100644
index 59319041d..000000000
--- a/web/src/beta/components/fields/CameraField/index.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Camera } from "@reearth/beta/utils/value";
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import CameraField, { type Props } from ".";
-
-const meta: Meta<typeof CameraField> = {
-  component: CameraField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CameraField>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleSave = useCallback(
-    (value?: Camera) => updateArgs({ value: value }),
-    [updateArgs]
-  );
-
-  const handleFlyTo = useCallback(
-    () => updateArgs({ value: undefined }),
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <CameraField {...args} onSave={handleSave} onFlyTo={handleFlyTo} />
-      </div>
-      <div>
-        <CameraField {...args} disabled={true} />
-      </div>
-      <div>
-        <CameraField
-          {...args}
-          name="Camera field without controls"
-          onSave={handleSave}
-          onFlyTo={undefined}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-Default.args = {
-  name: "Camera field",
-  description: "Camera field description",
-  value: undefined,
-  disabled: false,
-  onSave: (value?: Camera) => console.log("saved camera value: ", value),
-  onFlyTo: (target) => console.log("Fly to", target)
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin-left: 2rem;
-  margin-top: 2rem;
-  height: 300px;
-`;
diff --git a/web/src/beta/components/fields/CameraField/index.tsx b/web/src/beta/components/fields/CameraField/index.tsx
deleted file mode 100644
index 344b701f0..000000000
--- a/web/src/beta/components/fields/CameraField/index.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import Icon from "@reearth/beta/components/Icon";
-import * as Popover from "@reearth/beta/components/Popover";
-import Text from "@reearth/beta/components/Text";
-// import Slider from "@reearth/beta/components/Slider";
-import { useCurrentCamera } from "@reearth/beta/features/Editor/atoms";
-import type { Camera } from "@reearth/beta/utils/value";
-import type { FlyTo } from "@reearth/core";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useCallback, useState } from "react";
-
-import Property from "..";
-
-import CapturePanel from "./CapturePanel";
-import EditPanel from "./EditPanel";
-
-type Panel = "editor" | "capture" | undefined;
-
-export type Props = {
-  name?: string;
-  description?: string;
-  value?: Camera;
-  disabled?: boolean;
-  onSave: (value?: Camera) => void;
-  onFlyTo?: FlyTo;
-};
-
-const CameraField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  disabled,
-  onSave,
-  onFlyTo
-}) => {
-  const t = useT();
-  const [open, setOpen] = useState<Panel>(undefined);
-
-  const handleClose = useCallback(() => setOpen(undefined), []);
-
-  const [currentCamera] = useCurrentCamera();
-
-  const handleClick = useCallback(
-    (panel: Panel) =>
-      setOpen((current) => (current === panel ? undefined : panel)),
-    []
-  );
-
-  const handleSave = useCallback(
-    (value?: Camera) => {
-      onSave(value);
-      setOpen(undefined);
-    },
-    [onSave]
-  );
-
-  const handleFlyto = useCallback(
-    (c?: Partial<Camera>) => {
-      const dest = c ?? currentCamera;
-      if (dest) {
-        onFlyTo?.(dest);
-      }
-    },
-    [currentCamera, onFlyTo]
-  );
-
-  const handleRemoveSetting = useCallback(() => {
-    if (!value) return;
-    handleSave();
-  }, [value, handleSave]);
-
-  return (
-    <Property name={name} description={description}>
-      <Popover.Provider open={!!open} placement="bottom-start">
-        <Popover.Trigger asChild>
-          <InputWrapper disabled={disabled}>
-            <Input positionSet={!!value}>
-              {value && (
-                <ZoomToIcon
-                  icon="zoomToLayer"
-                  size={10}
-                  onClick={() => handleFlyto(value)}
-                />
-              )}
-              <StyledText size="footnote" customColor>
-                {value ? t("Position Set") : t("Not set")}
-              </StyledText>
-              <DeleteIcon
-                icon="bin"
-                size={10}
-                disabled={!value}
-                onClick={handleRemoveSetting}
-              />
-            </Input>
-            <TriggerButton
-              buttonType="secondary"
-              text={t("Edit")}
-              icon="pencilSimple"
-              size="small"
-              iconPosition="left"
-              onClick={() => handleClick("editor")}
-              disabled={disabled}
-            />
-            <TriggerButton
-              buttonType="secondary"
-              text={t("Capture")}
-              icon="cameraButtonStoryBlock"
-              size="small"
-              iconPosition="left"
-              onClick={() => handleClick("capture")}
-              disabled={disabled}
-            />
-          </InputWrapper>
-        </Popover.Trigger>
-        <Popover.Content autoFocus={false}>
-          {open === "capture" ? (
-            <CapturePanel
-              camera={currentCamera}
-              onSave={handleSave}
-              onClose={handleClose}
-            />
-          ) : open === "editor" ? (
-            <EditPanel
-              camera={value}
-              onSave={handleSave}
-              onFlyTo={handleFlyto}
-              onClose={handleClose}
-            />
-          ) : null}
-        </Popover.Content>
-      </Popover.Provider>
-    </Property>
-  );
-};
-
-const InputWrapper = styled.div<{ disabled?: boolean }>`
-  display: flex;
-  gap: 10px;
-
-  flex-wrap: wrap;
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-`;
-
-const Input = styled.div<{ positionSet?: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  flex: 1;
-  padding: 0 8px;
-  height: 28px;
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  color: ${({ theme }) => theme.content.main};
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: ${({ theme }) => theme.shadow.input};
-
-  color: ${({ theme, positionSet }) =>
-    positionSet ? theme.content.main : theme.content.weak};
-`;
-
-const StyledText = styled(Text)`
-  white-space: nowrap;
-`;
-
-const TriggerButton = styled(Button)`
-  height: 28px;
-  margin: 0;
-`;
-
-const ZoomToIcon = styled(Icon)`
-  :hover {
-    cursor: pointer;
-  }
-`;
-
-const DeleteIcon = styled(Icon)<{ disabled?: boolean }>`
-  ${({ disabled, theme }) =>
-    disabled
-      ? `color: ${theme.content.weaker};`
-      : `:hover {
-    cursor: pointer;
-      }`}
-`;
-
-export default CameraField;
diff --git a/web/src/beta/components/fields/CameraField/types.ts b/web/src/beta/components/fields/CameraField/types.ts
deleted file mode 100644
index 25297cb76..000000000
--- a/web/src/beta/components/fields/CameraField/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Camera } from "@reearth/beta/utils/value";
-
-export type { Camera } from "@reearth/beta/utils/value";
-
-export type RowType = {
-  id: keyof Camera;
-  value?: number;
-  description?: string;
-  suffix?: string;
-  unit?: string;
-}[];
diff --git a/web/src/beta/components/fields/CameraField/utils.ts b/web/src/beta/components/fields/CameraField/utils.ts
deleted file mode 100644
index ae71db511..000000000
--- a/web/src/beta/components/fields/CameraField/utils.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Camera } from "./types";
-
-export const degreesToRadians = (degrees: number): number =>
-  degrees * (Math.PI / 180);
-
-export const radiansToDegrees = (radians: number): number =>
-  radians * (180 / Math.PI);
-
-export const userFriendlyCamera = (camera: Camera) => ({
-  lat: camera.lat,
-  lng: camera.lng,
-  height: camera.height,
-  heading: radiansToDegrees(camera.heading),
-  pitch: radiansToDegrees(camera.pitch),
-  roll: radiansToDegrees(camera.roll),
-  fov: camera?.fov
-});
-
-export const saveFriendlyCamera = (camera: Camera) => ({
-  lat: camera.lat,
-  lng: camera.lng,
-  height: camera.height,
-  heading: degreesToRadians(camera.heading),
-  pitch: degreesToRadians(camera.pitch),
-  roll: degreesToRadians(camera.roll),
-  fov: camera?.fov
-});
diff --git a/web/src/beta/components/fields/ColorField/hooks.ts b/web/src/beta/components/fields/ColorField/hooks.ts
deleted file mode 100644
index 01a125d7e..000000000
--- a/web/src/beta/components/fields/ColorField/hooks.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import tinycolor from "tinycolor2";
-
-import { Params, RGBA } from "./types";
-import { getChannelLabel, getChannelValue, getHexString } from "./utils";
-
-export default ({ value, onChange }: Params) => {
-  const [colorState, setColor] = useState<string>();
-  const [rgba, setRgba] = useState<RGBA>(tinycolor(value).toRgb());
-  const [tempColor, setTempColor] = useState(colorState);
-  const [open, setOpen] = useState(false);
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const pickerRef = useRef<HTMLDivElement>(null);
-
-  //Actions
-
-  const handleChange = useCallback((newColor: RGBA) => {
-    const color = getHexString(newColor);
-    if (!color) return;
-    setTempColor(color);
-    setRgba(newColor);
-  }, []);
-
-  const handleHexInput = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      e.preventDefault();
-      setColor(e.target.value);
-      setRgba(tinycolor(e.target.value ?? colorState).toRgb());
-    },
-    [colorState]
-  );
-
-  const handleRgbaInput = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      e.preventDefault();
-
-      handleChange({
-        ...rgba,
-        [e.target.name]: e.target.value ? Number(e.target.value) : undefined
-      });
-    },
-    [handleChange, rgba]
-  );
-
-  const handleClose = useCallback(() => {
-    if (value || colorState) {
-      setColor(value ?? colorState);
-      setRgba(tinycolor(value ?? colorState).toRgb());
-    } else {
-      setColor(undefined);
-      setRgba(tinycolor(colorState == null ? undefined : colorState).toRgb());
-    }
-    setTempColor(undefined);
-    setOpen(false);
-  }, [value, colorState]);
-
-  const handleSave = useCallback(() => {
-    if (!onChange) return;
-    if (tempColor && tempColor != value && tempColor != colorState) {
-      setColor(tempColor);
-      setRgba(tinycolor(tempColor).toRgb());
-      onChange(tempColor);
-      setTempColor(undefined);
-    } else if (colorState != value) {
-      onChange(colorState);
-    }
-    setOpen(false);
-  }, [colorState, onChange, tempColor, value]);
-
-  const handleHexSave = useCallback(() => {
-    const hexPattern = /^#?([a-fA-F0-9]{3,4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/;
-    if (!colorState || hexPattern.test(colorState)) {
-      handleSave();
-    } else if (value) {
-      setColor(value);
-    }
-  }, [colorState, handleSave, value]);
-
-  //events
-
-  const handleClick = useCallback(() => {
-    setOpen(!open);
-  }, [open]);
-
-  const handleKeyPress = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter") {
-        handleHexSave();
-      }
-    },
-    [handleHexSave]
-  );
-
-  //UseEffects
-
-  useEffect(() => {
-    if (value) {
-      setColor(value);
-      setRgba(tinycolor(value).toRgb());
-    } else {
-      setColor(undefined);
-    }
-  }, [value]);
-
-  const handleClickOutside = useCallback(
-    (e: MouseEvent | TouchEvent) => {
-      if (
-        open &&
-        wrapperRef.current &&
-        !wrapperRef.current.contains(e.target as Node)
-      ) {
-        if (colorState != value && !open) {
-          handleSave();
-        }
-        handleClose();
-        setOpen(false);
-      }
-    },
-    [open, value, colorState, handleSave, handleClose]
-  );
-
-  const handleClickOutsideRef = useRef(handleClickOutside);
-  handleClickOutsideRef.current = handleClickOutside;
-
-  const handleClickOutsideByRef = useCallback((e: MouseEvent | TouchEvent) => {
-    handleClickOutsideRef.current?.(e);
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutsideByRef);
-    document.addEventListener("touchstart", handleClickOutsideByRef);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutsideByRef);
-      document.removeEventListener("touchstart", handleClickOutsideByRef);
-    };
-  }, [handleClickOutsideByRef]);
-
-  return {
-    wrapperRef,
-    pickerRef,
-    colorState,
-    open,
-    rgba,
-    getChannelLabel,
-    getChannelValue,
-    handleClose,
-    handleSave,
-    handleHexSave,
-    handleChange,
-    handleRgbaInput,
-    handleHexInput,
-    handleClick,
-    handleKeyPress
-  };
-};
diff --git a/web/src/beta/components/fields/ColorField/index.stories.tsx b/web/src/beta/components/fields/ColorField/index.stories.tsx
deleted file mode 100644
index 700e1e479..000000000
--- a/web/src/beta/components/fields/ColorField/index.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { Meta, StoryObj } from "@storybook/react";
-
-import ColorField from ".";
-
-const meta: Meta<typeof ColorField> = {
-  component: ColorField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ColorField>;
-
-export const ColorFieldInput: Story = {
-  render: () => <ColorField name="Color Field" onChange={action("onchange")} />
-};
diff --git a/web/src/beta/components/fields/ColorField/index.tsx b/web/src/beta/components/fields/ColorField/index.tsx
deleted file mode 100644
index 2fa98dc2c..000000000
--- a/web/src/beta/components/fields/ColorField/index.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import Icon from "@reearth/beta/components/Icon";
-import * as Popover from "@reearth/beta/components/Popover";
-import Text from "@reearth/beta/components/Text";
-import { useT } from "@reearth/services/i18n";
-import { styled, css, useTheme } from "@reearth/services/theme";
-import React from "react";
-import { RgbaColorPicker } from "react-colorful";
-
-import Property from "..";
-
-import useHooks from "./hooks";
-import { Props, RGBA } from "./types";
-
-const channels = ["r", "g", "b", "a"];
-const hexPlaceholder = "#RRGGBBAA";
-
-const ColorField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  onChange,
-  className
-}) => {
-  const t = useT();
-  const theme = useTheme();
-  const {
-    wrapperRef,
-    pickerRef,
-    colorState,
-    open,
-    rgba,
-    getChannelValue,
-    handleClose,
-    handleSave,
-    handleHexSave,
-    handleChange,
-    handleRgbaInput,
-    handleHexInput,
-    handleClick,
-    handleKeyPress
-  } = useHooks({ value, onChange });
-
-  return (
-    <Property name={name} description={description} className={className}>
-      <Wrapper ref={wrapperRef}>
-        <Popover.Provider open={open} placement="bottom-start">
-          <Popover.Trigger asChild>
-            <InputWrapper ref={pickerRef}>
-              <Layers onClick={handleClick}>
-                <CheckedPattern />
-                <Swatch c={colorState || "transparent"} />
-              </Layers>
-              <Input
-                value={colorState || ""}
-                placeholder={hexPlaceholder}
-                onChange={handleHexInput}
-                onKeyPress={handleKeyPress}
-                onBlur={handleHexSave}
-              />
-            </InputWrapper>
-          </Popover.Trigger>
-          <PickerWrapper>
-            <HeaderWrapper>
-              <PickerTitle
-                size="footnote"
-                weight="regular"
-                color={theme.content.main}
-              >
-                {t("Color Picker")}
-              </PickerTitle>
-              {handleClose && (
-                <CloseIcon icon="cancel" size={12} onClick={handleClose} />
-              )}
-            </HeaderWrapper>
-            <SelectorPickerWrapper>
-              <ColorPicker
-                className="colorPicker"
-                color={rgba}
-                onChange={handleChange}
-              />
-              <RgbaInputWrapper>
-                <Text size="footnote">RGBA</Text>
-                <ValuesWrapper>
-                  {channels.map((channel) => (
-                    <Input
-                      key={channel}
-                      name={channel}
-                      type="number"
-                      value={getChannelValue(rgba, channel as keyof RGBA)}
-                      min={0}
-                      max={255}
-                      onChange={handleRgbaInput}
-                    />
-                  ))}
-                </ValuesWrapper>
-              </RgbaInputWrapper>
-            </SelectorPickerWrapper>
-            <FormButtonGroup>
-              <ButtonWrapper
-                buttonType="secondary"
-                text={t("Cancel")}
-                onClick={handleClose}
-                size="medium"
-              />
-              <ButtonWrapper
-                buttonType="primary"
-                text={t("Apply")}
-                onClick={handleSave}
-                size="medium"
-              />
-            </FormButtonGroup>
-          </PickerWrapper>
-        </Popover.Provider>
-      </Wrapper>
-    </Property>
-  );
-};
-
-const Wrapper = styled.div`
-  text-align: center;
-  width: 100%;
-  cursor: pointer;
-`;
-
-const InputWrapper = styled.div`
-  display: flex;
-  gap: 4px;
-  background: ${({ theme }) => theme.bg[1]};
-`;
-
-const Layers = styled.div`
-  position: relative;
-  min-width: 28px;
-  min-height: 28px;
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  box-shadow: ${({ theme }) => theme.shadow.input};
-`;
-
-const layerStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
-
-const check = (color: string) => ` 
-linear-gradient(
-  45deg, 
-  ${color} 25%, 
-  transparent 25%, 
-  transparent 75%, 
-  ${color} 25%, 
-  ${color} 
-) 
-`;
-
-const CheckedPattern = styled.div`
-  background-color: ${({ theme }) => theme.outline.main};
-  background-image: ${({ theme }) => check(theme.bg[3])},
-    ${({ theme }) => check(theme.bg[3])};
-  background-position:
-    0 0,
-    6px 6px;
-  background-size: 12px 12px;
-  ${layerStyle};
-`;
-
-const Swatch = styled.div<{ c?: string }>`
-  background: ${({ c }) => c || "transparent"};
-  ${layerStyle};
-`;
-
-const PickerWrapper = styled(Popover.Content)`
-  width: 286px;
-  height: 362px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  border-radius: 4px;
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-`;
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  padding: 4px 8px;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  height: 28px;
-  border-bottom: 1px solid ${({ theme }) => theme.outline.weak};
-`;
-
-const PickerTitle = styled(Text)`
-  text-align: center;
-  margin-right: auto;
-`;
-
-const CloseIcon = styled(Icon)`
-  margin-left: auto;
-  cursor: pointer;
-`;
-
-const SelectorPickerWrapper = styled.div`
-  display: flex;
-  padding: 8px;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-
-const ValuesWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 4px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-`;
-
-const Input = styled.input<{ type?: string }>`
-  display: flex;
-  padding: 4px 8px;
-  align-items: center;
-  margin: 0 auto;
-  border-radius: 4px;
-  gap: 4px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  color: ${({ theme }) => theme.content.main};
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: ${({ theme }) => theme.shadow.input};
-  box-sizing: border-box;
-  outline: none;
-  &:focus {
-    border-color: ${({ theme }) => theme.outline.main};
-  }
-  width: 100%;
-  height: 30px;
-`;
-
-const RgbaInputWrapper = styled.div`
-  display: flex;
-  height: 56px;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 8px;
-`;
-const FormButtonGroup = styled.div`
-  display: flex;
-  flex-direction: row;
-  height: 28px;
-  justify-content: center;
-  border-top: 1px solid ${({ theme }) => theme.bg[3]};
-  padding: 8px;
-  gap: 8px;
-`;
-const ButtonWrapper = styled(Button)`
-  height: 27px;
-  min-width: 135px;
-  padding: 0px;
-  margin: 0px;
-`;
-
-const ColorPickerStyles = css`
-  padding: 8px 8px 6px 0px;
-  gap: 12px;
-
-  .react-colorful__saturation-pointer {
-    width: 15px;
-    height: 15px;
-    border-width: 2px;
-  }
-
-  .react-colorful__hue-pointer,
-  .react-colorful__alpha-pointer {
-    width: 1px;
-    height: 10px;
-    border: 1px solid white;
-    border-radius: 2px;
-  }
-
-  .react-colorful__saturation {
-    margin-bottom: 10px;
-    border-radius: 3px;
-    width: 270px;
-    border-bottom: none;
-  }
-
-  .react-colorful__hue,
-  .react-colorful__alpha {
-    height: 10px;
-    width: 270px;
-    margin: 0 5px 10px 3px;
-    border-radius: 3px;
-  }
-`;
-
-const ColorPicker = styled(RgbaColorPicker)`
-  ${ColorPickerStyles}
-`;
-
-export default ColorField;
diff --git a/web/src/beta/components/fields/ColorField/types.ts b/web/src/beta/components/fields/ColorField/types.ts
deleted file mode 100644
index 5f253e1e8..000000000
--- a/web/src/beta/components/fields/ColorField/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Component Props
-export type Props = {
-  className?: string;
-  name?: string;
-  description?: string;
-  value?: string;
-  onChange?: (value?: string) => void;
-};
-
-export type RGBA = {
-  r: number;
-  g: number;
-  b: number;
-  a: number;
-};
-
-export type Params = {
-  value?: string;
-  onChange?: (value?: string) => void;
-};
diff --git a/web/src/beta/components/fields/ColorField/utils.ts b/web/src/beta/components/fields/ColorField/utils.ts
deleted file mode 100644
index 87322e43f..000000000
--- a/web/src/beta/components/fields/ColorField/utils.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import tinycolor, { ColorInput } from "tinycolor2";
-
-import { RGBA } from "./types";
-
-export const getHexString = (value?: ColorInput) => {
-  if (!value) return undefined;
-  const color = tinycolor(value);
-  return color.getAlpha() === 1 ? color.toHexString() : color.toHex8String();
-};
-
-export const getChannelLabel = (channel: string) => {
-  switch (channel) {
-    case "r":
-      return "Red";
-    case "g":
-      return "Green";
-    case "b":
-      return "Blue";
-    case "a":
-      return "Alpha";
-    default:
-      return "";
-  }
-};
-
-export function getChannelValue(rgba: RGBA, channel: keyof RGBA): number {
-  return rgba[channel];
-}
diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts b/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
deleted file mode 100644
index 205205f28..000000000
--- a/web/src/beta/components/fields/DateTimeField/EditPanel/hooks.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { getUniqueTimezones } from "@reearth/beta/utils/moment-timezone";
-import moment from "moment-timezone";
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-type Props = {
-  value?: string;
-  onChange?: (value?: string | undefined) => void;
-  setDateTime?: (value?: string | undefined) => void;
-};
-
-type TimezoneInfo = {
-  timezone: string;
-  offset: string;
-};
-
-export default ({ value, onChange, setDateTime }: Props) => {
-  const [date, setDate] = useState("");
-  const [time, setTime] = useState("");
-  const [selectedTimezone, setSelectedTimezone] = useState<TimezoneInfo>({
-    offset: "+00:00",
-    timezone: "Africa/Abidjan"
-  });
-
-  const handleTimeChange = useCallback((newValue: string | undefined) => {
-    if (newValue === undefined) return;
-    setTime(newValue);
-  }, []);
-
-  const handleDateChange = useCallback((newValue: string | undefined) => {
-    if (newValue === undefined) return;
-    setDate(newValue);
-  }, []);
-
-  const offsetFromUTC: TimezoneInfo[] = useMemo(() => {
-    return getUniqueTimezones(moment.tz.names());
-  }, []);
-
-  const handleApplyChange = useCallback(() => {
-    const selectedTimezoneInfo = offsetFromUTC.find(
-      (info) => info.timezone === selectedTimezone.timezone
-    );
-    if (selectedTimezoneInfo) {
-      const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
-      setDateTime?.(formattedDateTime);
-      onChange?.(formattedDateTime);
-    }
-  }, [
-    offsetFromUTC,
-    selectedTimezone.timezone,
-    date,
-    time,
-    setDateTime,
-    onChange
-  ]);
-
-  const handleTimezoneSelect = useCallback(
-    (newValue: string) => {
-      const updatedTimezone = offsetFromUTC.find(
-        (info) => info.timezone === newValue
-      );
-      setSelectedTimezone(updatedTimezone || selectedTimezone);
-    },
-    [offsetFromUTC, selectedTimezone]
-  );
-
-  useEffect(() => {
-    if (value) {
-      const [parsedDate, timeWithOffset] = value.split("T");
-      const [parsedTime, timezoneOffset] = timeWithOffset.split(/[-+]/);
-      const [timezoneOffsetHour, timezoneOffsetMinute] =
-        timezoneOffset.split(":");
-      const formattedTimezoneOffset =
-        timezoneOffsetHour.length === 2
-          ? timezoneOffset
-          : `${timezoneOffsetHour.padStart(2, "0")}:${timezoneOffsetMinute}`;
-
-      setTime(parsedTime);
-      setDate(parsedDate);
-
-      const updatedTimezone = offsetFromUTC.find(
-        (info) =>
-          info.offset ===
-          (timeWithOffset.includes("-")
-            ? `-${formattedTimezoneOffset}`
-            : `+${formattedTimezoneOffset}`)
-      );
-      if (updatedTimezone) setSelectedTimezone(updatedTimezone);
-    } else {
-      setDate("");
-      setTime("");
-      setSelectedTimezone({ offset: "+00:00", timezone: "Africa/Abidjan" });
-    }
-  }, [value, offsetFromUTC]);
-
-  return {
-    date,
-    time,
-    selectedTimezone,
-    offsetFromUTC,
-    handleTimeChange,
-    onTimezoneSelect: handleTimezoneSelect,
-    onDateChange: handleDateChange,
-    onDateTimeApply: handleApplyChange
-  };
-};
diff --git a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx b/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
deleted file mode 100644
index 50b267db9..000000000
--- a/web/src/beta/components/fields/DateTimeField/EditPanel/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import PanelCommon from "@reearth/beta/components/fields/common/PanelCommon";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useMemo } from "react";
-
-import TextInput from "../../common/TextInput";
-import SelectField from "../../SelectField";
-
-import useHooks from "./hooks";
-
-type Props = {
-  onChange?: (value?: string | undefined) => void;
-  onClose: () => void;
-  value?: string;
-  setDateTime?: (value?: string | undefined) => void;
-};
-
-const EditPanel: React.FC<Props> = ({
-  onChange,
-  onClose,
-  value,
-  setDateTime
-}) => {
-  const t = useT();
-
-  const {
-    date,
-    time,
-    selectedTimezone,
-    offsetFromUTC,
-    onDateChange,
-    onTimezoneSelect,
-    onDateTimeApply,
-    handleTimeChange
-  } = useHooks({ value, onChange, setDateTime });
-
-  const isButtonDisabled = useMemo(() => {
-    return date.trim() === "" || time.trim() === "";
-  }, [date, time]);
-
-  return (
-    <PanelCommon title={t("Set Time")} onClose={onClose}>
-      <FieldGroup>
-        <TextWrapper>
-          <Label>{t("Date")}</Label>
-          <Input type="date" value={date} onChange={onDateChange} />
-        </TextWrapper>
-        <TextWrapper>
-          <Label>{t("Time")}</Label>
-
-          <Input
-            type="time"
-            value={time}
-            onChange={handleTimeChange}
-            step={1}
-          />
-        </TextWrapper>
-        <SelectWrapper>
-          <Label>{t("Time Zone")}</Label>
-          <CustomSelect
-            value={selectedTimezone.timezone}
-            options={offsetFromUTC.map((timezone) => ({
-              key: timezone.timezone,
-              label: timezone?.offset
-            }))}
-            onChange={onTimezoneSelect}
-          />
-        </SelectWrapper>
-      </FieldGroup>
-      <Divider />
-      <ButtonWrapper>
-        <StyledButton text={t("Cancel")} size="small" onClick={onClose} />
-        <StyledButton
-          text={t("Apply")}
-          size="small"
-          buttonType="primary"
-          onClick={() => {
-            onDateTimeApply();
-            onClose();
-          }}
-          disabled={isButtonDisabled}
-        />
-      </ButtonWrapper>
-    </PanelCommon>
-  );
-};
-
-const TextWrapper = styled.div`
-  margin-left: 8px;
-  width: 88%;
-`;
-
-const Input = styled(TextInput)`
-  width: 100%;
-`;
-
-const FieldGroup = styled.div`
-  padding-bottom: 8px;
-`;
-
-const Label = styled.div`
-  font-size: 12px;
-  padding: 10px 0;
-`;
-
-const Divider = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.outline.weak};
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  gap: 8px;
-  padding: 8px;
-`;
-
-const StyledButton = styled(Button)`
-  flex: 1;
-`;
-
-const SelectWrapper = styled.div`
-  margin-left: 8px;
-  width: 95%;
-`;
-const CustomSelect = styled(SelectField)`
-  width: 100%;
-`;
-export default EditPanel;
diff --git a/web/src/beta/components/fields/DateTimeField/index.stories.tsx b/web/src/beta/components/fields/DateTimeField/index.stories.tsx
deleted file mode 100644
index dc7015db8..000000000
--- a/web/src/beta/components/fields/DateTimeField/index.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { Meta, StoryObj } from "@storybook/react";
-
-import DateTimeField from ".";
-
-const meta: Meta<typeof DateTimeField> = {
-  component: DateTimeField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DateTimeField>;
-
-export const DateTimeFieldInput: Story = {
-  render: () => (
-    <DateTimeField name="Date Time Field" onChange={action("onchange")} />
-  )
-};
diff --git a/web/src/beta/components/fields/DateTimeField/index.tsx b/web/src/beta/components/fields/DateTimeField/index.tsx
deleted file mode 100644
index 44fcbd56e..000000000
--- a/web/src/beta/components/fields/DateTimeField/index.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import Icon from "@reearth/beta/components/Icon";
-import * as Popover from "@reearth/beta/components/Popover";
-import Text from "@reearth/beta/components/Text";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useCallback, useEffect, useState } from "react";
-
-import Property from "..";
-
-import EditPanel from "./EditPanel";
-
-export type Props = {
-  name?: string;
-  description?: string;
-  value?: string;
-  disableField?: boolean;
-  fieldName?: string;
-  onChange?: (value?: string | undefined) => void;
-  onPopoverOpen?: (fieldId?: string) => void;
-  setDisabledFields?: (value: string[]) => void;
-};
-
-const DateTimeField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  disableField,
-  fieldName,
-  onChange,
-  onPopoverOpen,
-  setDisabledFields
-}) => {
-  const [open, setOpen] = useState(false);
-  const t = useT();
-
-  const handlePopOver = useCallback(() => {
-    if (disableField) {
-      setOpen(false);
-    } else {
-      onPopoverOpen?.(fieldName);
-      setOpen(!open);
-    }
-    if (open) setDisabledFields?.([]);
-  }, [disableField, open, onPopoverOpen, setDisabledFields, fieldName]);
-
-  const handleRemoveSetting = useCallback(() => {
-    if (!value) return;
-    setDateTime("");
-    onChange?.();
-  }, [value, onChange]);
-
-  const [dateTime, setDateTime] = useState(value);
-
-  useEffect(() => {
-    setDateTime(value);
-  }, [value]);
-
-  return (
-    <Property name={name} description={description}>
-      <Popover.Provider open={!!open} placement="bottom">
-        <Popover.Trigger asChild>
-          <InputWrapper disabled={true}>
-            <Input dataTimeSet={!!dateTime}>
-              <StyledText size="footnote" customColor>
-                {dateTime ? dateTime : "YYYY-MM-DDThh:mm:ss±hh:mm"}
-              </StyledText>
-              <DeleteIcon
-                icon="bin"
-                size={10}
-                disabled={!dateTime}
-                onClick={handleRemoveSetting}
-              />
-            </Input>
-            <TriggerButton
-              buttonType="secondary"
-              text={t("set")}
-              icon="clock"
-              size="small"
-              iconPosition="left"
-              onClick={() => handlePopOver()}
-            />
-          </InputWrapper>
-        </Popover.Trigger>
-        <Popover.Content autoFocus={false} attachToRoot>
-          {open && (
-            <EditPanel
-              setDateTime={setDateTime}
-              value={dateTime}
-              onChange={onChange}
-              onClose={handlePopOver}
-            />
-          )}
-        </Popover.Content>
-      </Popover.Provider>
-    </Property>
-  );
-};
-
-export default DateTimeField;
-
-const InputWrapper = styled.div<{ disabled?: boolean }>`
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-`;
-
-const Input = styled.div<{ dataTimeSet?: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  flex: 1;
-  padding: 0 8px;
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  color: ${({ theme }) => theme.content.strong};
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: ${({ theme }) => theme.shadow.input};
-  width: 65%;
-  color: ${({ theme, dataTimeSet }) =>
-    dataTimeSet ? theme.content.strong : theme.content.weak};
-`;
-
-const StyledText = styled(Text)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  padding: 4px 0;
-`;
-
-const TriggerButton = styled(Button)`
-  margin-left: 10px;
-`;
-
-const DeleteIcon = styled(Icon)<{ disabled?: boolean }>`
-  ${({ disabled, theme }) =>
-    disabled
-      ? `color: ${theme.content.weaker};`
-      : `:hover {
-    cursor: pointer;
-      }`}
-`;
diff --git a/web/src/beta/components/fields/ListField/index.stories.tsx b/web/src/beta/components/fields/ListField/index.stories.tsx
deleted file mode 100644
index 6728a4c2b..000000000
--- a/web/src/beta/components/fields/ListField/index.stories.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import ListField, { Props } from ".";
-
-const meta: Meta<typeof ListField> = {
-  component: ListField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ListField>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const addItem = useCallback(() => {
-    const randomId = (Math.random() + 1).toString(36).substring(7);
-    updateArgs({
-      items: [
-        ...args.items,
-        {
-          id: randomId,
-          value: `Item ${randomId}`
-        }
-      ]
-    });
-  }, [updateArgs, args.items]);
-
-  const removeItem = useCallback(
-    (key: string) => {
-      updateArgs({ items: args.items.filter(({ id }) => id != key) });
-    },
-    [updateArgs, args.items]
-  );
-
-  const onItemDrop = useCallback(
-    (item: { id: string; value: string }, index: number) => {
-      const items = [...args.items];
-      items.splice(
-        items.findIndex((x) => x.id === item.id),
-        1
-      );
-      items.splice(index, 0, item);
-      updateArgs({ items });
-    },
-    [updateArgs, args.items]
-  );
-
-  const onSelect = useCallback(
-    (id: string) => updateArgs({ selected: id }),
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <ListField
-          {...args}
-          addItem={addItem}
-          removeItem={removeItem}
-          onItemDrop={onItemDrop}
-          onSelect={onSelect}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin-left: 2rem;
-  margin-top: 2rem;
-  height: 300px;
-  width: 300px;
-`;
-
-Default.args = {
-  name: "List Field",
-  description: "List field Sample description",
-  items: [
-    {
-      id: "w3tlwi",
-      value: "Item w3tlwi"
-    },
-    {
-      id: "77eg5",
-      value: "Item 77eg5"
-    },
-    {
-      id: "7p218",
-      value: "Item 7p218"
-    },
-    {
-      id: "xquyo",
-      value: "Item xquyo"
-    },
-    {
-      id: "2mewj",
-      value: "Item 2mewj"
-    },
-    {
-      id: "d2gmu",
-      value: "Item d2gmu"
-    }
-  ]
-};
diff --git a/web/src/beta/components/fields/ListField/index.tsx b/web/src/beta/components/fields/ListField/index.tsx
deleted file mode 100644
index b2bda9e83..000000000
--- a/web/src/beta/components/fields/ListField/index.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import DragAndDropList, {
-  Props as DragAndDropProps
-} from "@reearth/beta/components/DragAndDropList";
-import Property from "@reearth/beta/components/fields";
-import Text from "@reearth/beta/components/Text";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useCallback, useEffect, useMemo } from "react";
-
-type ListItem = {
-  id: string;
-  value: string;
-};
-
-export type Props = {
-  className?: string;
-  name?: string;
-  description?: string;
-  items: ListItem[];
-  removeItem: (id: string) => void;
-  addItem: () => void;
-  onSelect: (id: string) => void;
-  selected?: string;
-  atLeastOneItem?: boolean;
-} & Pick<DragAndDropProps, "onItemDrop">;
-
-const ListField: React.FC<Props> = ({
-  className,
-  name,
-  description,
-  items,
-  removeItem,
-  addItem,
-  onItemDrop,
-  onSelect,
-  selected,
-  atLeastOneItem
-}: Props) => {
-  const t = useT();
-
-  const deleteItem = useCallback(() => {
-    if (!selected) return;
-    removeItem(selected);
-  }, [selected, removeItem]);
-
-  const getId = useCallback(({ id }: ListItem) => {
-    return id;
-  }, []);
-
-  const disableRemoveButton = useMemo(() => {
-    if (!selected || (atLeastOneItem && items.length === 1)) return true;
-
-    return !items.find(({ id }) => id == selected);
-  }, [items, selected, atLeastOneItem]);
-
-  // if atleastOneItem is true, make sure one item is always selected
-  useEffect(() => {
-    if (!atLeastOneItem) return;
-
-    const updateSelected =
-      !selected || !items.find(({ id }) => id === selected);
-    if (updateSelected) {
-      onSelect(items[0]?.id);
-    }
-  }, [selected, items, atLeastOneItem, onSelect]);
-
-  return (
-    <Property name={name} description={description}>
-      <FieldWrapper className={className}>
-        <DragAndDropList<ListItem>
-          uniqueKey="ListField"
-          items={items}
-          onItemDrop={onItemDrop}
-          getId={getId}
-          renderItem={({ id, value }) => (
-            <Item onClick={() => onSelect(id)} selected={selected === id}>
-              <StyledText size="footnote">{value}</StyledText>
-            </Item>
-          )}
-          gap={0}
-        />
-      </FieldWrapper>
-      <ButtonGroup>
-        <ButtonWrapper
-          onClick={deleteItem}
-          icon="trash"
-          buttonType="secondary"
-          text={t("Remove")}
-          size="medium"
-          disabled={disableRemoveButton}
-        />
-        <ButtonWrapper
-          onClick={addItem}
-          icon="plus"
-          buttonType="secondary"
-          text={t("Add")}
-          size="medium"
-        />
-      </ButtonGroup>
-    </Property>
-  );
-};
-
-const FieldWrapper = styled.div`
-  min-height: 84px;
-  max-height: 224px;
-  border-radius: 4px;
-  border: 1px solid rgba(77, 83, 88, 1);
-  overflow: auto;
-`;
-
-const Item = styled.div<{ selected: boolean }>`
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  height: 28px;
-  cursor: pointer;
-  background: ${({ theme, selected }) =>
-    selected ? theme.select.main : "inherit"};
-  &:hover {
-    background: ${({ theme, selected }) =>
-      selected ? theme.select.main : theme.bg[2]};
-  }
-`;
-
-const StyledText = styled(Text)`
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const ButtonGroup = styled.div`
-  display: flex;
-  gap: 4px;
-`;
-
-const ButtonWrapper = styled(Button)`
-  height: 28px;
-  width: 100%;
-  padding: 0px;
-  margin: 0px;
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-`;
-
-export default ListField;
diff --git a/web/src/beta/components/fields/LocationField/index.stories.tsx b/web/src/beta/components/fields/LocationField/index.stories.tsx
deleted file mode 100644
index f84a8e7b6..000000000
--- a/web/src/beta/components/fields/LocationField/index.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import LocationField from ".";
-
-const meta: Meta<typeof LocationField> = {
-  component: LocationField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof LocationField>;
-
-export const Sample: Story = {
-  args: {
-    name: "Location Field",
-    description: "Location field description",
-    value: { lat: 87.43, lng: 107.53 },
-    onChange: () => console.log("clicked")
-  }
-};
diff --git a/web/src/beta/components/fields/LocationField/index.tsx b/web/src/beta/components/fields/LocationField/index.tsx
deleted file mode 100644
index 2f335a8a9..000000000
--- a/web/src/beta/components/fields/LocationField/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { LatLng } from "@reearth/beta/utils/value";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useCallback, useState } from "react";
-
-import Property from "..";
-import NumberInput from "../common/NumberInput";
-
-type Props = {
-  name?: string;
-  description?: string;
-  value?: LatLng;
-  onChange?: (location: LatLng) => void;
-};
-
-const LocationField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  onChange
-}) => {
-  const t = useT();
-  const [location, setLocation] = useState<LatLng>(value || { lat: 0, lng: 0 });
-
-  const handleChange = useCallback(
-    (coordination: string, newValue: number | undefined) => {
-      if (newValue === undefined) return;
-
-      setLocation((prevLocation) => ({
-        ...prevLocation,
-        [coordination === "Latitude" ? "lat" : "lng"]: newValue
-      }));
-      onChange?.(location);
-    },
-    [location, onChange]
-  );
-
-  return (
-    <Property name={name} description={description}>
-      <Wrapper>
-        <NumberInput
-          value={location.lat}
-          inputDescription={t("Latitude")}
-          onChange={(newValue) => handleChange("Latitude", newValue)}
-        />
-        <NumberInput
-          value={location.lng}
-          inputDescription={t("Longitude")}
-          onChange={(newValue) => handleChange("Longitude", newValue)}
-        />
-      </Wrapper>
-    </Property>
-  );
-};
-
-export default LocationField;
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-`;
diff --git a/web/src/beta/components/fields/NumberField/index.stories.tsx b/web/src/beta/components/fields/NumberField/index.stories.tsx
deleted file mode 100644
index c4cef01d8..000000000
--- a/web/src/beta/components/fields/NumberField/index.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import NumberField, { Props } from ".";
-
-const meta: Meta<Props> = {
-  component: NumberField
-};
-
-export default meta;
-type Story = StoryObj<typeof NumberField>;
-
-export const Default: Story = {
-  args: {
-    name: "Number Field",
-    description: "The Number field",
-    value: 42,
-    inputDescription: "Value",
-    suffix: "px"
-  }
-};
-
-export const Disabled: Story = {
-  args: {
-    name: "Number Field",
-    description: "The Number field",
-    value: 15,
-    inputDescription: "Disabled",
-    suffix: "px",
-    disabled: true
-  }
-};
-
-export const Range: Story = {
-  args: {
-    name: "Number Field",
-    description: "The Number field",
-    value: 50,
-    inputDescription: "Range",
-    suffix: "px",
-    min: 4,
-    max: 100
-  }
-};
-
-export const NoValue: Story = {
-  args: {
-    name: "Number Field",
-    description: "The Number field",
-    inputDescription: "No Value",
-    suffix: "px"
-  }
-};
-
-export const WithMinValue: Story = {
-  args: {
-    name: "Number Field",
-    description: "The Number field",
-    value: 5,
-    inputDescription: "With Min Value",
-    suffix: "px",
-    min: 0
-  }
-};
-
-export const WithMaxValue: Story = {
-  args: {
-    name: "Number Field",
-    description: "The Number field",
-    value: 95,
-    inputDescription: "With Max Value",
-    suffix: "px",
-    max: 100
-  }
-};
-
-export const Editable: Story = {
-  args: {
-    name: "Number Field",
-    description: "The Number field",
-    value: 25,
-    inputDescription: "Editable",
-    suffix: "px"
-  }
-};
diff --git a/web/src/beta/components/fields/NumberField/index.tsx b/web/src/beta/components/fields/NumberField/index.tsx
deleted file mode 100644
index 419ae64ec..000000000
--- a/web/src/beta/components/fields/NumberField/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import Property from "..";
-import NumberInput from "../common/NumberInput";
-
-export type Props = {
-  name?: string;
-  description?: string;
-  suffix?: string;
-  min?: number;
-  max?: number;
-  disabled?: boolean;
-  inputDescription?: string;
-  value?: number;
-  onChange?: (value?: number | undefined) => void;
-};
-
-const NumberField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  min,
-  max,
-  suffix,
-  inputDescription,
-  disabled,
-  onChange
-}) => {
-  return (
-    <Property name={name} description={description}>
-      <NumberInput
-        value={value}
-        onChange={onChange}
-        min={min}
-        max={max}
-        suffix={suffix}
-        disabled={disabled}
-        inputDescription={inputDescription}
-      />
-    </Property>
-  );
-};
-
-export default NumberField;
diff --git a/web/src/beta/components/fields/Property/PropertyField/hooks.ts b/web/src/beta/components/fields/Property/PropertyField/hooks.ts
deleted file mode 100644
index e7408bab6..000000000
--- a/web/src/beta/components/fields/Property/PropertyField/hooks.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
-import { usePropertyFetcher } from "@reearth/services/api";
-import { useCallback } from "react";
-
-export default (propertyId: string, schemaGroup: string) => {
-  const {
-    useUpdatePropertyValue,
-    useAddPropertyItem,
-    useRemovePropertyItem,
-    useMovePropertyItem
-  } = usePropertyFetcher();
-
-  const handlePropertyValueUpdate = useCallback(
-    (fieldId: string, vt: ValueType, itemId?: string) => {
-      return async (v?: ValueTypes[ValueType]) => {
-        await useUpdatePropertyValue(
-          propertyId,
-          schemaGroup,
-          itemId,
-          fieldId,
-          "en",
-          v,
-          vt
-        );
-      };
-    },
-    [propertyId, schemaGroup, useUpdatePropertyValue]
-  );
-
-  const handleAddPropertyItem = useCallback(() => {
-    return useAddPropertyItem(propertyId, schemaGroup);
-  }, [propertyId, schemaGroup, useAddPropertyItem]);
-
-  const handleRemovePropertyItem = useCallback(
-    (itemId: string) => {
-      return useRemovePropertyItem(propertyId, schemaGroup, itemId);
-    },
-    [propertyId, schemaGroup, useRemovePropertyItem]
-  );
-
-  const handleMovePropertyItem = useCallback(
-    ({ id }: { id: string }, index: number) => {
-      return useMovePropertyItem(propertyId, schemaGroup, id, index);
-    },
-    [propertyId, schemaGroup, useMovePropertyItem]
-  );
-
-  return {
-    handlePropertyValueUpdate,
-    handleAddPropertyItem,
-    handleRemovePropertyItem,
-    handleMovePropertyItem
-  };
-};
diff --git a/web/src/beta/components/fields/Property/PropertyField/index.tsx b/web/src/beta/components/fields/Property/PropertyField/index.tsx
deleted file mode 100644
index 78e5d2b31..000000000
--- a/web/src/beta/components/fields/Property/PropertyField/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { LatLng } from "@reearth/beta/utils/value";
-import { FlyTo } from "@reearth/core";
-import { Field, SchemaField } from "@reearth/services/api/propertyApi/utils";
-import { useMemo } from "react";
-
-import CameraField from "../../CameraField";
-import { Camera } from "../../CameraField/types";
-import ColorField from "../../ColorField";
-import DateTimeField from "../../DateTimeField";
-import LocationField from "../../LocationField";
-import NumberField from "../../NumberField";
-import RangeField from "../../RangeField";
-import SelectField from "../../SelectField";
-import SliderField from "../../SliderField";
-import SpacingInput, { SpacingValues } from "../../SpacingInput";
-import TextInput from "../../TextField";
-import ToggleField from "../../ToggleField";
-import URLField from "../../URLField";
-
-import useHooks from "./hooks";
-
-type Props = {
-  propertyId: string;
-  itemId?: string;
-  schemaGroup: string;
-  schema: SchemaField;
-  field?: Field;
-  onFlyTo?: FlyTo;
-};
-
-const PropertyField: React.FC<Props> = ({
-  propertyId,
-  itemId,
-  field,
-  schemaGroup,
-  schema,
-  onFlyTo
-}) => {
-  const { handlePropertyValueUpdate } = useHooks(propertyId, schemaGroup);
-
-  const value = useMemo(
-    () => field?.mergedValue ?? field?.value ?? schema.defaultValue,
-    [field?.mergedValue, field?.value, schema.defaultValue]
-  );
-
-  const handleChange = handlePropertyValueUpdate(
-    schema.id,
-    schema.type,
-    itemId
-  );
-  return (
-    <>
-      {schema.type === "string" ? (
-        schema.ui === "datetime" ? (
-          <DateTimeField
-            key={schema.id}
-            name={schema.name}
-            value={(value as string) ?? ""}
-            description={schema.description}
-            onChange={handleChange}
-          />
-        ) : schema.ui === "color" ? (
-          <ColorField
-            key={schema.id}
-            name={schema.name}
-            value={(value as string) ?? ""}
-            description={schema.description}
-            onChange={handleChange}
-          />
-        ) : schema.ui === "selection" || schema.choices ? (
-          <SelectField
-            key={schema.id}
-            name={schema.name}
-            value={(value as string) ?? ""}
-            description={schema.description}
-            options={schema.choices}
-            onChange={handleChange}
-          />
-        ) : schema.ui === "buttons" ? (
-          <p key={schema.id}>Button radio field</p>
-        ) : (
-          <TextInput
-            key={schema.id}
-            name={schema.name}
-            value={(value as string) ?? ""}
-            description={schema.description}
-            onChange={handleChange}
-          />
-        )
-      ) : schema.type === "url" ? (
-        <URLField
-          key={schema.id}
-          name={schema.name}
-          entityType={
-            schema.ui === "image"
-              ? "image"
-              : schema.ui === "file"
-                ? "file"
-                : undefined
-          }
-          fileType={
-            schema.ui === "video" || schema.ui === undefined ? "URL" : "asset"
-          }
-          value={(value as string) ?? ""}
-          description={schema.description}
-          onChange={handleChange}
-        />
-      ) : schema.type === "spacing" ? (
-        <SpacingInput
-          key={schema.id}
-          name={schema.name}
-          value={(value as SpacingValues) ?? ""}
-          description={schema.description}
-          min={schema.min}
-          max={schema.max}
-          onChange={handleChange}
-        />
-      ) : schema.type === "bool" ? (
-        <ToggleField
-          key={schema.id}
-          name={schema.name}
-          checked={!!value}
-          description={schema.description}
-          onChange={handleChange}
-        />
-      ) : schema.type === "number" ? (
-        schema.ui === "slider" ? (
-          <SliderField
-            key={schema.id}
-            name={schema.name}
-            value={value as number}
-            min={schema.min}
-            max={schema.max}
-            description={schema.description}
-            onChange={handleChange}
-          />
-        ) : (
-          <NumberField
-            key={schema.id}
-            name={schema.name}
-            value={(value as number) ?? ""}
-            suffix={schema.suffix}
-            min={schema.min}
-            max={schema.max}
-            description={schema.description}
-            onChange={handleChange}
-          />
-        )
-      ) : schema.type === "latlng" ? (
-        <LocationField
-          key={schema.id}
-          name={schema.name}
-          value={value as LatLng}
-          description={schema.description}
-          onChange={handleChange}
-        />
-      ) : schema.type === "camera" ? (
-        <CameraField
-          key={schema.id}
-          name={schema.name}
-          value={value as Camera}
-          description={schema.description}
-          onSave={handleChange}
-          onFlyTo={onFlyTo}
-        />
-      ) : schema.type === "array" && schema.ui === "range" ? (
-        <RangeField
-          key={schema.id}
-          name={schema.name}
-          value={value as number[]}
-          defaultValue={schema.defaultValue as number[]}
-          min={schema.min}
-          max={schema.max}
-          description={schema.description}
-          onChange={handleChange}
-        />
-      ) : (
-        <p key={schema.id}>{schema.name} field</p>
-      )}
-    </>
-  );
-};
-
-export default PropertyField;
diff --git a/web/src/beta/components/fields/Property/PropertyItem/index.tsx b/web/src/beta/components/fields/Property/PropertyItem/index.tsx
deleted file mode 100644
index b014b3296..000000000
--- a/web/src/beta/components/fields/Property/PropertyItem/index.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { ValueType, ValueTypes, zeroValues } from "@reearth/beta/utils/value";
-import { FlyTo } from "@reearth/core";
-import {
-  Group,
-  GroupListItem,
-  Item
-} from "@reearth/services/api/propertyApi/utils";
-import { useT } from "@reearth/services/i18n";
-import { useMemo, useState } from "react";
-
-import PropertyField from "../PropertyField";
-import PropertyList, { ListItem } from "../PropertyList";
-
-type Props = {
-  propertyId: string;
-  item?: Item;
-  onFlyTo?: FlyTo;
-};
-
-const PropertyItem: React.FC<Props> = ({ propertyId, item, onFlyTo }) => {
-  const t = useT();
-  const [selected, select] = useState<string>();
-
-  const isList = item && "items" in item;
-  const layerMode = useMemo(() => {
-    if (!isList || !item?.representativeField) return false;
-    const sf = item.schemaFields.find((f) => f.id === item.representativeField);
-    return sf?.type === "ref" && sf.ui === "layer";
-  }, [isList, item?.representativeField, item?.schemaFields]);
-
-  const groups = useMemo<(GroupListItem | Group)[]>(
-    () => (item && "items" in item ? item.items : item ? [item] : []),
-    [item]
-  );
-
-  const selectedItem = isList
-    ? groups.find((g) => g.id === selected)
-    : groups[0];
-
-  const propertyListItems = useMemo(
-    () =>
-      groups
-        .map<ListItem | undefined>((i) => {
-          if (!i.id) return;
-
-          const representativeField = item?.representativeField
-            ? i.fields.find((f) => f.id === item.representativeField)
-            : undefined;
-          const nameSchemaField = item?.schemaFields?.find(
-            (sf) => sf.id === item.representativeField
-          );
-
-          const value =
-            representativeField?.value || nameSchemaField?.defaultValue;
-
-          const choice = nameSchemaField?.choices
-            ? nameSchemaField?.choices?.find((c) => c.key === value)?.label
-            : undefined;
-
-          const title = valueToString(choice || value);
-
-          return {
-            id: i.id,
-            title: (!layerMode ? title : undefined) ?? t("Settings"),
-            layerId: layerMode ? title : undefined
-          };
-        })
-        .filter((g): g is ListItem => !!g),
-    [groups, layerMode, item, t]
-  );
-  const schemaFields = useMemo(
-    () =>
-      selectedItem
-        ? item?.schemaFields.map((f) => {
-            const field = selectedItem?.fields.find((f2) => f2.id === f.id);
-            const condf =
-              f.only &&
-              selectedItem?.fields.find((f2) => f2.id === f.only?.field);
-            const condsf =
-              f.only && item.schemaFields.find((f2) => f2.id === f.only?.field);
-            const condv =
-              condf?.value ??
-              condf?.mergedValue ??
-              condsf?.defaultValue ??
-              (condsf?.type ? zeroValues[condsf.type] : undefined);
-            return {
-              schemaField: f,
-              field,
-              hidden: f.only && (!condv || condv !== f.only.value)
-            };
-          })
-        : [],
-    [item?.schemaFields, selectedItem]
-  );
-
-  return (
-    <>
-      {isList && !!item && (
-        <PropertyList
-          name={item.title || (item.id === "default" ? "defaultItemName" : "")}
-          items={propertyListItems}
-          propertyId={propertyId}
-          schemaGroup={item.schemaGroup}
-          //   layers={props.layers}
-          //   layerMode={layerMode}
-          selected={selected}
-          onSelect={select}
-        />
-      )}
-      {!!item &&
-        schemaFields?.map((f) => {
-          if (
-            (layerMode && f.schemaField.id === item.representativeField) ||
-            f.hidden
-          )
-            return null;
-          return (
-            <PropertyField
-              key={f.schemaField.id}
-              propertyId={propertyId}
-              schemaGroup={item.schemaGroup}
-              field={f.field}
-              itemId={selected}
-              schema={f.schemaField}
-              onFlyTo={onFlyTo}
-            />
-          );
-        })}
-    </>
-  );
-};
-
-export default PropertyItem;
-
-const valueToString = (
-  v: ValueTypes[ValueType] | undefined
-): string | undefined => {
-  if (typeof v === "string" || typeof v === "number") {
-    return v.toString();
-  }
-  return undefined;
-};
diff --git a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx b/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
deleted file mode 100644
index ada57c3cf..000000000
--- a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import ListField, { Props } from ".";
-
-const meta: Meta<typeof ListField> = {
-  component: ListField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ListField>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const onSelect = useCallback(
-    (id: string) => updateArgs({ selected: id }),
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <ListField {...args} onSelect={onSelect} />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin-left: 2rem;
-  margin-top: 2rem;
-  height: 300px;
-  width: 300px;
-`;
-
-Default.args = {
-  name: "List Field",
-  description: "List field Sample description",
-  items: [
-    {
-      id: "w3tlwi",
-      title: "Item w3tlwi"
-    },
-    {
-      id: "77eg5",
-      title: "Item 77eg5"
-    },
-    {
-      id: "7p218",
-      title: "Item 7p218"
-    },
-    {
-      id: "xquyo",
-      title: "Item xquyo"
-    },
-    {
-      id: "2mewj",
-      title: "Item 2mewj"
-    },
-    {
-      id: "d2gmu",
-      title: "Item d2gmu"
-    }
-  ]
-};
diff --git a/web/src/beta/components/fields/Property/PropertyList/index.tsx b/web/src/beta/components/fields/Property/PropertyList/index.tsx
deleted file mode 100644
index e66d9f710..000000000
--- a/web/src/beta/components/fields/Property/PropertyList/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import DragAndDropList from "@reearth/beta/components/DragAndDropList";
-import Property from "@reearth/beta/components/fields";
-import Text from "@reearth/beta/components/Text";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useCallback, useEffect, useMemo } from "react";
-
-import useHooks from "../hooks";
-
-export type ListItem = {
-  id: string;
-  title: string;
-};
-
-export type Props = {
-  className?: string;
-  name?: string;
-  description?: string;
-  items: ListItem[];
-  propertyId: string;
-  schemaGroup: string;
-  selected?: string;
-  atLeastOneItem?: boolean;
-  onSelect: (id: string) => void;
-};
-
-const PropertyList: React.FC<Props> = ({
-  className,
-  name,
-  description,
-  items,
-  propertyId,
-  schemaGroup,
-  selected,
-  atLeastOneItem,
-  onSelect
-}: Props) => {
-  const t = useT();
-
-  const {
-    handleAddPropertyItem,
-    handleRemovePropertyItem,
-    handleMovePropertyItem
-  } = useHooks(propertyId, schemaGroup);
-
-  const deleteItem = useCallback(() => {
-    if (!selected) return;
-    handleRemovePropertyItem(selected);
-  }, [selected, handleRemovePropertyItem]);
-
-  const getId = useCallback(({ id }: ListItem) => {
-    return id;
-  }, []);
-
-  const disableRemoveButton = useMemo(() => {
-    if (!selected || (atLeastOneItem && items.length === 1)) return true;
-
-    return !items.find(({ id }) => id == selected);
-  }, [items, selected, atLeastOneItem]);
-
-  // if atleastOneItem is true, make sure one item is always selected
-  useEffect(() => {
-    if (!atLeastOneItem) return;
-
-    const updateSelected =
-      !selected || !items.find(({ id }) => id === selected);
-    if (updateSelected) {
-      onSelect(items[0]?.id);
-    }
-  }, [selected, items, atLeastOneItem, onSelect]);
-
-  return (
-    <Property name={name} description={description}>
-      <FieldWrapper className={className}>
-        <DragAndDropList<ListItem>
-          uniqueKey="ListField"
-          items={items}
-          onItemDrop={handleMovePropertyItem}
-          getId={getId}
-          renderItem={({ id, title }) => (
-            <Item onClick={() => onSelect(id)} selected={selected === id}>
-              <StyledText size="footnote">{title}</StyledText>
-            </Item>
-          )}
-          gap={0}
-        />
-      </FieldWrapper>
-      <ButtonGroup>
-        <ButtonWrapper
-          onClick={deleteItem}
-          icon="trash"
-          buttonType="secondary"
-          text={t("Remove")}
-          size="medium"
-          disabled={disableRemoveButton}
-        />
-        <ButtonWrapper
-          onClick={handleAddPropertyItem}
-          icon="plus"
-          buttonType="secondary"
-          text={t("Add")}
-          size="medium"
-        />
-      </ButtonGroup>
-    </Property>
-  );
-};
-
-const FieldWrapper = styled.div`
-  min-height: 84px;
-  max-height: 224px;
-  border-radius: 4px;
-  border: 1px solid rgba(77, 83, 88, 1);
-  overflow: auto;
-`;
-
-const Item = styled.div<{ selected: boolean }>`
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  height: 28px;
-  cursor: pointer;
-  background: ${({ theme, selected }) =>
-    selected ? theme.select.main : "inherit"};
-  &:hover {
-    background: ${({ theme, selected }) =>
-      selected ? theme.select.main : theme.bg[2]};
-  }
-`;
-
-const StyledText = styled(Text)`
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const ButtonGroup = styled.div`
-  display: flex;
-  gap: 4px;
-`;
-
-const ButtonWrapper = styled(Button)`
-  height: 28px;
-  width: 100%;
-  padding: 0px;
-  margin: 0px;
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-`;
-
-export default PropertyList;
diff --git a/web/src/beta/components/fields/Property/hooks.ts b/web/src/beta/components/fields/Property/hooks.ts
deleted file mode 100644
index e7408bab6..000000000
--- a/web/src/beta/components/fields/Property/hooks.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
-import { usePropertyFetcher } from "@reearth/services/api";
-import { useCallback } from "react";
-
-export default (propertyId: string, schemaGroup: string) => {
-  const {
-    useUpdatePropertyValue,
-    useAddPropertyItem,
-    useRemovePropertyItem,
-    useMovePropertyItem
-  } = usePropertyFetcher();
-
-  const handlePropertyValueUpdate = useCallback(
-    (fieldId: string, vt: ValueType, itemId?: string) => {
-      return async (v?: ValueTypes[ValueType]) => {
-        await useUpdatePropertyValue(
-          propertyId,
-          schemaGroup,
-          itemId,
-          fieldId,
-          "en",
-          v,
-          vt
-        );
-      };
-    },
-    [propertyId, schemaGroup, useUpdatePropertyValue]
-  );
-
-  const handleAddPropertyItem = useCallback(() => {
-    return useAddPropertyItem(propertyId, schemaGroup);
-  }, [propertyId, schemaGroup, useAddPropertyItem]);
-
-  const handleRemovePropertyItem = useCallback(
-    (itemId: string) => {
-      return useRemovePropertyItem(propertyId, schemaGroup, itemId);
-    },
-    [propertyId, schemaGroup, useRemovePropertyItem]
-  );
-
-  const handleMovePropertyItem = useCallback(
-    ({ id }: { id: string }, index: number) => {
-      return useMovePropertyItem(propertyId, schemaGroup, id, index);
-    },
-    [propertyId, schemaGroup, useMovePropertyItem]
-  );
-
-  return {
-    handlePropertyValueUpdate,
-    handleAddPropertyItem,
-    handleRemovePropertyItem,
-    handleMovePropertyItem
-  };
-};
diff --git a/web/src/beta/components/fields/RangeField/index.stories.tsx b/web/src/beta/components/fields/RangeField/index.stories.tsx
deleted file mode 100644
index 6bc4387e2..000000000
--- a/web/src/beta/components/fields/RangeField/index.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-
-import RangeField, { Props } from ".";
-
-const meta: Meta<typeof RangeField> = {
-  component: RangeField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RangeField>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: number[]) => {
-      updateArgs({ value: value });
-    },
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <RangeField {...args} onChange={handleChange} />
-      </div>
-      <div>
-        <RangeField
-          {...args}
-          name="Disabled"
-          description="Disabled field"
-          disabled={true}
-          onChange={handleChange}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin: 2rem;
-  height: 300px;
-`;
-
-Default.args = {
-  name: "Slider Field",
-  description: "Slider field Sample description",
-  value: [0, 50],
-  min: 0,
-  max: 100,
-  step: 1,
-  disabled: false,
-  onChange: () => console.log("clicked")
-};
diff --git a/web/src/beta/components/fields/RangeField/index.tsx b/web/src/beta/components/fields/RangeField/index.tsx
deleted file mode 100644
index 7b8175015..000000000
--- a/web/src/beta/components/fields/RangeField/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import Property from "@reearth/beta/components/fields";
-import RangeSlider, {
-  Props as RangeProps
-} from "@reearth/beta/components/RangeSlider";
-import { useCallback, useEffect, useState } from "react";
-
-export type Props = {
-  name?: string;
-  description?: string;
-} & RangeProps;
-
-const RangeField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  onChange,
-  ...args
-}: Props) => {
-  const [internalState, setInternalState] = useState<number[] | undefined>(
-    value
-  );
-
-  const handleChange = useCallback(
-    (value: number[]) => {
-      setInternalState(value);
-    },
-    [setInternalState]
-  );
-
-  useEffect(() => {
-    setInternalState(value);
-  }, [value]);
-
-  return (
-    <Property name={name} description={description}>
-      <RangeSlider
-        value={internalState}
-        onChange={handleChange}
-        onAfterChange={onChange}
-        {...args}
-      />
-    </Property>
-  );
-};
-
-export default RangeField;
diff --git a/web/src/beta/components/fields/SelectField/index.stories.tsx b/web/src/beta/components/fields/SelectField/index.stories.tsx
deleted file mode 100644
index f41dd27b1..000000000
--- a/web/src/beta/components/fields/SelectField/index.stories.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-
-import SelectField, { SingleSelectProps, MultiSelectProps } from ".";
-
-const meta: Meta<typeof SelectField> = {
-  component: SelectField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SelectField>;
-
-export const Default: Story = (args: SingleSelectProps) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: string) => {
-      updateArgs({ value: value });
-    },
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <SelectField {...args} onChange={handleChange} />
-      </div>
-      <div>
-        <SelectField
-          {...args}
-          name="Disabled"
-          description="Props are controlled by the field above"
-          disabled={true}
-          onChange={handleChange}
-        />
-      </div>
-      <div>
-        <SelectField
-          {...args}
-          name="Multi Select"
-          description="You can select multiple options"
-          onChange={handleChange}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-export const MultiSelect: Story = (args: MultiSelectProps) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: string[] | undefined) => {
-      updateArgs({ value: value });
-    },
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <SelectField
-          {...args}
-          name="Multi Select"
-          description="You can select multiple options"
-          onChange={handleChange}
-          multiSelect
-        />
-      </div>
-      <div>
-        <SelectField
-          {...args}
-          name="Disabled"
-          description="Props are controlled by the field above"
-          disabled={true}
-          onChange={handleChange}
-          multiSelect
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-top: 2rem;
-  height: 300px;
-`;
-
-Default.args = {
-  name: "Select Field",
-  description: "Select from the options ",
-  disabled: false,
-  value: undefined,
-  options: [
-    {
-      label: "item 1 akas bakas moti kiran kapoor takhat buland biba kaur",
-      key: "item_1"
-    },
-    { label: "item 2", key: "item_2" },
-    { label: "item 3", key: "item_3" }
-  ],
-  onChange: () => console.log("clicked")
-};
-
-MultiSelect.args = {
-  name: "Select Field",
-  description: "Select from the options ",
-  disabled: false,
-  value: undefined,
-  options: [
-    {
-      label: "item 1",
-      key: "item_1"
-    },
-    { label: "item 2", key: "item_2" },
-    { label: "item 3", key: "item_3" },
-    { label: "item 4", key: "item_4" },
-    { label: "item 5", key: "item_5" },
-    { label: "item 6", key: "item_6" },
-    { label: "item 7", key: "item_7" }
-  ],
-  multiSelect: true,
-  onChange: () => console.log("clicked")
-};
diff --git a/web/src/beta/components/fields/SelectField/index.tsx b/web/src/beta/components/fields/SelectField/index.tsx
deleted file mode 100644
index 7346e88c0..000000000
--- a/web/src/beta/components/fields/SelectField/index.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import * as Popover from "@reearth/beta/components/Popover";
-import Text from "@reearth/beta/components/Text";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import React, { useState, useCallback, useMemo } from "react";
-
-import Property from "..";
-
-export type SelectValue = {
-  label: string;
-  key: string;
-};
-
-type CommonProps = {
-  className?: string;
-  options?: SelectValue[];
-  disabled?: boolean;
-  // Property field
-  name?: string;
-  description?: string;
-  attachToRoot?: boolean;
-};
-
-export type SingleSelectProps = {
-  onChange: (key: string) => void;
-  value?: string;
-  multiSelect?: false;
-} & CommonProps;
-
-export type MultiSelectProps = {
-  onChange: (keys: string[] | undefined) => void;
-  value?: string[];
-  multiSelect: true;
-} & CommonProps;
-
-export type Props = SingleSelectProps | MultiSelectProps;
-
-// TODO: Fix the onChange method TS error
-const SelectField: React.FC<Props> = ({
-  className,
-  options,
-  onChange,
-  value,
-  multiSelect,
-  disabled = false,
-  name,
-  description,
-  attachToRoot
-}) => {
-  const t = useT();
-
-  const [open, setOpen] = useState(false);
-
-  const handlePopOver = useCallback(
-    () => !disabled && setOpen(!open),
-    [open, disabled]
-  );
-
-  const handleClick = useCallback(
-    (key: string) => {
-      if (multiSelect === true) {
-        // handle multiselect
-        if (value && Array.isArray(value)) {
-          const tempArray = [...value];
-          if (tempArray.includes(key)) {
-            tempArray.splice(tempArray.indexOf(key), 1);
-          } else {
-            tempArray.push(key);
-          }
-          onChange(tempArray.length > 0 ? [...tempArray] : undefined);
-        } else {
-          onChange([key]);
-        }
-        return;
-      }
-
-      setOpen(false);
-      if (key != value) onChange(key);
-      return;
-    },
-    [setOpen, onChange, value, multiSelect]
-  );
-
-  const selected = useMemo(() => {
-    return value
-      ? Array.isArray(value)
-        ? value.map((key) => ({
-            key,
-            label: options?.find((x) => x.key === key)?.label
-          }))
-        : options?.find((x) => x.key === value)
-      : undefined;
-  }, [options, value]);
-
-  const checkSelected = useCallback(
-    (key: string) => {
-      return value
-        ? Array.isArray(value)
-          ? value.includes(key)
-          : value === key
-        : false;
-    },
-    [value]
-  );
-
-  return (
-    <Property name={name} description={description} className={className}>
-      <Popover.Provider
-        open={open}
-        placement="bottom-start"
-        onOpenChange={handlePopOver}
-      >
-        <ProviderWrapper multiSelect={Array.isArray(value) && value.length > 0}>
-          <Popover.Trigger asChild>
-            <InputWrapper disabled={disabled} onClick={handlePopOver}>
-              <Select selected={!!selected} open={open}>
-                {selected
-                  ? Array.isArray(selected)
-                    ? t("Options")
-                    : selected.label
-                  : t("Please choose an option")}
-              </Select>
-              <ArrowIcon icon="arrowDown" open={open} size={12} />
-            </InputWrapper>
-          </Popover.Trigger>
-          <PickerWrapper attachToRoot={attachToRoot}>
-            {options?.map(({ label: value, key }) => (
-              <OptionWrapper
-                key={key}
-                onClick={() => handleClick(key)}
-                selected={checkSelected(key)}
-              >
-                {multiSelect && (
-                  <CheckIcon
-                    icon={checkSelected(key) ? "checkmark" : "plus"}
-                    size={12}
-                  />
-                )}
-                <Text size="footnote">{value}</Text>
-              </OptionWrapper>
-            ))}
-          </PickerWrapper>
-          {Array.isArray(selected) && (
-            <SelectedWrapper>
-              {selected.map(({ label, key }) => (
-                <Selected key={key} disabled={disabled}>
-                  <Text size="footnote" key={key}>
-                    {label}
-                  </Text>
-                  <CancelIcon
-                    icon="cancel"
-                    size={16}
-                    onClick={() => !disabled && handleClick(key)}
-                    disabled={disabled}
-                  />
-                </Selected>
-              ))}
-            </SelectedWrapper>
-          )}
-        </ProviderWrapper>
-      </Popover.Provider>
-    </Property>
-  );
-};
-
-const ProviderWrapper = styled.div<{ multiSelect: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  border-radius: 4px;
-  width: 100%;
-`;
-
-const InputWrapper = styled.div<{ disabled: boolean }>`
-  display: flex;
-  position: relative;
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-`;
-
-const Select = styled.div<{ open: boolean; selected: boolean }>`
-  padding: 8px;
-  /* The width + placement of the arrow icon */
-  padding-right: 22px;
-  border-radius: 4px;
-  width: 100%;
-  font-size: 12px;
-  line-height: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: ${({ theme, selected }) =>
-    selected ? theme.content.main : theme.content.weaker};
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: ${({ theme }) => theme.shadow.input};
-  border: ${({ theme, open }) =>
-    open
-      ? `1px solid ${theme.select.strong}`
-      : `1px solid ${theme.outline.weak}`};
-
-  &:focus {
-    border: 1px solid ${({ theme }) => theme.select.strong};
-  }
-
-  &:focus-visible {
-    border: 1px solid ${({ theme }) => theme.select.strong};
-    outline: none;
-  }
-`;
-
-const ArrowIcon = styled(Icon)<{ open: boolean }>`
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: ${({ open }) =>
-    open ? "translateY(-50%) scaleY(-1)" : "translateY(-50%)"};
-  color: ${({ theme }) => theme.content.main};
-`;
-
-const PickerWrapper = styled(Popover.Content)`
-  min-width: 150px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  outline: none;
-  border-radius: 4px;
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-height: 200px;
-  overflow-y: auto;
-`;
-
-const OptionWrapper = styled.div<{ selected: boolean }>`
-  display: flex;
-  padding: 4px 8px;
-  align-items: center;
-  cursor: "pointer";
-  background: ${({ theme, selected }) => (selected ? theme.bg[2] : "inherit")};
-
-  &:hover {
-    background: ${({ theme, selected }) =>
-      selected ? theme.bg[2] : theme.select.main};
-  }
-`;
-
-const CheckIcon = styled(Icon)`
-  margin-right: 12px;
-`;
-
-const SelectedWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: 125px;
-  overflow: auto;
-`;
-
-const Selected = styled.div<{ disabled: boolean }>`
-  display: flex;
-  padding: 4px 8px;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 4px;
-  background: ${({ theme }) => theme.bg[2]};
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-`;
-
-const CancelIcon = styled(Icon)<{ disabled: boolean }>`
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-  color: ${({ theme }) => theme.content.weak};
-
-  :hover {
-    color: ${({ theme }) => theme.content.main};
-  }
-`;
-
-export default SelectField;
diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
deleted file mode 100644
index 68a1ba593..000000000
--- a/web/src/beta/components/fields/SliderField/index.stories.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-
-import SliderField, { Props } from ".";
-
-const meta: Meta<typeof SliderField> = {
-  component: SliderField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SliderField>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: number) => {
-      updateArgs({ value: value });
-    },
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <SliderField {...args} onChange={handleChange} />
-      </div>
-      <div>
-        <SliderField
-          {...args}
-          name="Inverse of above"
-          value={(args.max || 0) - (args?.value || 0)}
-          description={undefined}
-          onChange={handleChange}
-        />
-      </div>
-      <div>
-        <SliderField
-          {...args}
-          name="Disabled"
-          description="Disabled field"
-          disabled={true}
-          onChange={handleChange}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin: 2rem;
-  height: 300px;
-`;
-
-Default.args = {
-  name: "Slider Field",
-  description: "Slider field Sample description",
-  value: 50,
-  min: 0,
-  max: 100,
-  step: 1,
-  disabled: false,
-  onChange: () => console.log("clicked")
-};
diff --git a/web/src/beta/components/fields/SliderField/index.tsx b/web/src/beta/components/fields/SliderField/index.tsx
deleted file mode 100644
index 4897c7f35..000000000
--- a/web/src/beta/components/fields/SliderField/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import Property from "@reearth/beta/components/fields";
-import Slider, { Props as SliderProps } from "@reearth/beta/components/Slider";
-import { useCallback, useEffect, useState } from "react";
-
-export type Props = {
-  name?: string;
-  description?: string;
-} & SliderProps;
-
-const SliderField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  onChange,
-  ...args
-}: Props) => {
-  const [internalState, setInternalState] = useState(value);
-
-  const handleChange = useCallback(
-    (value: number) => {
-      setInternalState(value);
-    },
-    [setInternalState]
-  );
-
-  useEffect(() => {
-    setInternalState(value);
-  }, [value]);
-
-  return (
-    <Property name={name} description={description}>
-      <Slider
-        value={internalState}
-        onChange={handleChange}
-        onAfterChange={onChange}
-        {...args}
-      />
-    </Property>
-  );
-};
-
-export default SliderField;
diff --git a/web/src/beta/components/fields/SpacingInput/index.stories.tsx b/web/src/beta/components/fields/SpacingInput/index.stories.tsx
deleted file mode 100644
index 92475fa71..000000000
--- a/web/src/beta/components/fields/SpacingInput/index.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-
-import SpacingInput from "./index";
-
-export default {
-  component: SpacingInput
-} as Meta;
-
-const Template: Story = (args) => <SpacingInput {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  name: "Padding",
-  description: "Adjust the padding values"
-};
-
-export const WithValues = Template.bind({});
-WithValues.args = {
-  name: "Padding",
-  description: "Adjust the padding values",
-  value: {
-    top: "10",
-    left: "20",
-    right: "30",
-    bottom: "40"
-  }
-};
diff --git a/web/src/beta/components/fields/SpacingInput/index.tsx b/web/src/beta/components/fields/SpacingInput/index.tsx
deleted file mode 100644
index 8fdd1f0fd..000000000
--- a/web/src/beta/components/fields/SpacingInput/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useMemo, useState } from "react";
-
-import Property from "..";
-import NumberInput from "../common/NumberInput";
-
-export type SpacingValues = {
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-};
-
-const SPACING_POSITIONS = ["top", "left", "right", "bottom"];
-
-type Props = {
-  name?: string;
-  description?: string;
-  value?: SpacingValues;
-  min?: number;
-  max?: number;
-  onChange?: (values: SpacingValues) => void;
-};
-
-type Position = keyof SpacingValues;
-
-const SpacingInput: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  min,
-  max,
-  onChange
-}) => {
-  const [spacingValues, setSpacingValues] = useState<SpacingValues>(
-    value || { top: 0, left: 0, right: 0, bottom: 0 }
-  );
-
-  const memoizedSpacingValues = useMemo(
-    () =>
-      SPACING_POSITIONS.map((position) =>
-        getSpacingPosition(spacingValues, position as Position)
-      ),
-    [spacingValues]
-  );
-
-  const handleInputChange = (position: Position, newValue?: number) => {
-    const updatedValues = { ...spacingValues, [position]: newValue };
-    setSpacingValues(updatedValues);
-    onChange?.(updatedValues);
-  };
-
-  return (
-    <Property name={name} description={description}>
-      <StyledRectangle>
-        {SPACING_POSITIONS.map((position, index) => (
-          <SpacingField
-            key={position}
-            value={memoizedSpacingValues[index]}
-            suffix="px"
-            position={position}
-            min={min}
-            max={max}
-            expandWithContent
-            onChange={(newValue) =>
-              handleInputChange(position as Position, newValue)
-            }
-          />
-        ))}
-      </StyledRectangle>
-    </Property>
-  );
-};
-
-export default SpacingInput;
-
-const StyledRectangle = styled.div`
-  display: flex;
-  width: 100%;
-  height: 94px;
-  border: 1px dashed ${({ theme }) => theme.outline.weak};
-  box-sizing: border-box;
-  position: relative;
-`;
-
-const SpacingField = styled(NumberInput)<{ position: string }>`
-  position: absolute;
-  ${({ position }) =>
-    position === "top"
-      ? "top: 0; left: 50%; transform: translateX(-50%);"
-      : position === "left"
-        ? "left: 0; top: 50%; transform: translateY(-50%);"
-        : position === "right"
-          ? "right: 0; top: 50%; transform: translateY(-50%);"
-          : "bottom: 0; left: 50%; transform: translateX(-50%);"};
-`;
-
-function getSpacingPosition(
-  spacingValue: SpacingValues,
-  position: Position
-): number {
-  return spacingValue[position];
-}
diff --git a/web/src/beta/components/fields/TextAreaField/index.stories.tsx b/web/src/beta/components/fields/TextAreaField/index.stories.tsx
deleted file mode 100644
index b14168651..000000000
--- a/web/src/beta/components/fields/TextAreaField/index.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-import TextAreaField, { Props } from ".";
-
-const meta: Meta<typeof TextAreaField> = {
-  component: TextAreaField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextAreaField>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (value: string) => updateArgs({ value: value }),
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <TextAreaField {...args} onChange={handleChange} />
-      </div>
-      <div>
-        <TextAreaField
-          {...args}
-          onChange={handleChange}
-          description="set with minHeight"
-          minHeight={115}
-        />
-      </div>
-      <div>
-        <TextAreaField
-          {...args}
-          onChange={handleChange}
-          description="set with minHeight"
-          disabled={true}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-top: 2rem;
-  height: 300px;
-`;
-
-Default.args = {
-  name: "Text Area Field",
-  description: "Description around",
-  disabled: false,
-  value: undefined,
-  onChange: () => console.log("clicked")
-};
diff --git a/web/src/beta/components/fields/TextAreaField/index.tsx b/web/src/beta/components/fields/TextAreaField/index.tsx
deleted file mode 100644
index e0dffd39f..000000000
--- a/web/src/beta/components/fields/TextAreaField/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { debounce } from "lodash-es";
-import {
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useMemo,
-  useState,
-  useEffect
-} from "react";
-
-import Property from "..";
-
-export type Props = {
-  value: string;
-  onChange: (text: string) => void;
-  minHeight?: number;
-  placeholder?: string;
-  name?: string;
-  description?: string;
-  disabled?: boolean;
-  debounceBy?: number;
-};
-
-const TextAreaField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  onChange,
-  placeholder,
-  minHeight = 0,
-  disabled,
-  debounceBy = 1000
-}) => {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const t = useT();
-
-  const [text, setText] = useState(value);
-
-  const debouncedHandleTextUpdate = useMemo(
-    () => debounce(onChange, debounceBy),
-    [onChange, debounceBy]
-  );
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      setText(e.currentTarget.value);
-      debouncedHandleTextUpdate(e.currentTarget.value);
-    },
-    [debouncedHandleTextUpdate]
-  );
-
-  useLayoutEffect(() => {
-    if (!textareaRef?.current) return;
-    // Reset height - important to shrink on delete
-    textareaRef.current.style.height = "inherit";
-    // Set height
-    textareaRef.current.style.height = `${Math.max(minHeight, textareaRef.current.scrollHeight)}px`;
-  }, [text, minHeight]);
-
-  useEffect(() => {
-    setText(value);
-  }, [value]);
-
-  return (
-    <Property name={name} description={description}>
-      <StyledTextArea
-        ref={textareaRef}
-        placeholder={placeholder ?? t("Add text here")}
-        value={text}
-        onChange={handleChange}
-        minHeight={minHeight}
-        disabled={!!disabled}
-      />
-    </Property>
-  );
-};
-
-const StyledTextArea = styled.textarea<{
-  minHeight: number;
-  disabled: boolean;
-}>`
-  padding: 4px 8px;
-  width: 100%;
-  resize: none;
-  overflow: hidden;
-  min-height: ${({ minHeight }) => minHeight};
-  border-radius: 4px;
-  border: ${({ theme }) => `1px solid ${theme.outline.weak}`};
-  font-size: 14px;
-  outline: none;
-  color: ${({ theme }) => theme.content.main};
-  background: inherit;
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-  pointer-events: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")};
-  box-sizing: border-box;
-`;
-
-export default TextAreaField;
diff --git a/web/src/beta/components/fields/TextField/index.stories.tsx b/web/src/beta/components/fields/TextField/index.stories.tsx
deleted file mode 100644
index 5e34c976c..000000000
--- a/web/src/beta/components/fields/TextField/index.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import TextField, { Props } from "./index";
-
-const meta: Meta<Props> = {
-  component: TextField
-};
-
-export default meta;
-type Story = StoryObj<typeof TextField>;
-
-export const Default: Story = {
-  args: {
-    name: "Text input field",
-    value: "Text field",
-    description: "The text input description"
-  }
-};
-
-export const WithPlaceholder: Story = {
-  args: {
-    placeholder: "Text Input",
-    name: "Text input field",
-    description: "The text input description"
-  }
-};
diff --git a/web/src/beta/components/fields/TextField/index.tsx b/web/src/beta/components/fields/TextField/index.tsx
deleted file mode 100644
index 8f04b4276..000000000
--- a/web/src/beta/components/fields/TextField/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import TextInput from "@reearth/beta/components/fields/common/TextInput";
-
-import Property from "..";
-
-export type Props = {
-  className?: string;
-  name?: string;
-  description?: string;
-  value?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  onChange?: (text: string) => void;
-  onBlur?: () => void;
-};
-
-const TextField: React.FC<Props> = ({
-  className,
-  name,
-  description,
-  value,
-  placeholder,
-  disabled,
-  onChange,
-  onBlur
-}) => {
-  return (
-    <Property className={className} name={name} description={description}>
-      <TextInput
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        disabled={disabled}
-      />
-    </Property>
-  );
-};
-
-export default TextField;
diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts b/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
deleted file mode 100644
index 55c139243..000000000
--- a/web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-
-import { TimelineFieldProp } from "..";
-
-type Props = {
-  timelineValues?: TimelineFieldProp;
-  onChange?: (value?: TimelineFieldProp) => void;
-  onClose?: () => void;
-  setTimelineValues?: (value?: TimelineFieldProp) => void;
-};
-
-export default ({
-  timelineValues,
-  onChange,
-  onClose,
-  setTimelineValues
-}: Props) => {
-  const [warning, setWarning] = useState(false);
-
-  const handleOnChange = useCallback(
-    (newValue: string, fieldId: string) => {
-      const updatedData: TimelineFieldProp = {
-        ...timelineValues,
-        currentTime: timelineValues?.currentTime || "",
-        startTime: timelineValues?.startTime || "",
-        endTime: timelineValues?.endTime || ""
-      };
-
-      switch (fieldId) {
-        case "startTime":
-          updatedData.startTime = newValue || "";
-          break;
-        case "currentTime":
-          updatedData.currentTime = newValue;
-          if (
-            updatedData.startTime &&
-            new Date(updatedData.currentTime.substring(0, 19)) <
-              new Date(updatedData.startTime.substring(0, 19))
-          ) {
-            setWarning(true);
-          } else {
-            setWarning(false);
-          }
-          break;
-        case "endTime":
-          updatedData.endTime = newValue;
-          if (
-            updatedData.endTime &&
-            new Date(updatedData.currentTime.substring(0, 19)) >
-              new Date(updatedData?.endTime?.substring(0, 19))
-          ) {
-            setWarning(true);
-          } else {
-            setWarning(false);
-          }
-          break;
-        default:
-          break;
-      }
-
-      setTimelineValues?.(updatedData);
-    },
-    [timelineValues, setTimelineValues]
-  );
-
-  const [disabledFields, setDisabledFields] = useState<string[]>([]);
-
-  const handlePopoverOpen = useCallback((fieldId?: string) => {
-    switch (fieldId) {
-      case "startTime":
-        setDisabledFields(["endTime", "currentTime"]);
-        break;
-      case "endTime":
-        setDisabledFields(["startTime", "currentTime"]);
-        break;
-      case "currentTime":
-        setDisabledFields(["startTime", "endTime"]);
-        break;
-      default:
-        setDisabledFields([]);
-        break;
-    }
-  }, []);
-
-  const handleApplyChange = useCallback(() => {
-    if (
-      timelineValues?.currentTime !== "" &&
-      timelineValues?.startTime !== "" &&
-      timelineValues?.endTime !== ""
-    ) {
-      onChange?.(timelineValues);
-      onClose?.();
-    }
-  }, [timelineValues, onChange, onClose]);
-
-  const isDisabled = useMemo(() => {
-    if (timelineValues) {
-      return Object.values(timelineValues).every((value) => value !== "");
-    }
-    return false;
-  }, [timelineValues]);
-
-  return {
-    warning,
-    isDisabled,
-    disabledFields,
-    setDisabledFields,
-    handleOnChange,
-    handlePopoverOpen,
-    onAppyChange: handleApplyChange
-  };
-};
diff --git a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx b/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
deleted file mode 100644
index 34e539cbf..000000000
--- a/web/src/beta/components/fields/TimelineField/EditPanel/index.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import Icon from "@reearth/beta/components/Icon";
-import Modal from "@reearth/beta/components/Modal";
-import { getTimeZone } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useMemo } from "react";
-
-import { TimelineFieldProp } from "..";
-import DateTimeField from "../../DateTimeField";
-
-import useHooks from "./hooks";
-
-type EditPanelProps = {
-  isVisible?: boolean;
-  timelineValues?: TimelineFieldProp;
-  onClose?: () => void;
-  onChange?: (value?: TimelineFieldProp) => void;
-  setTimelineValues?: (value?: TimelineFieldProp) => void;
-};
-
-const EditPanel = ({
-  isVisible,
-  timelineValues,
-  setTimelineValues,
-  onClose,
-  onChange
-}: EditPanelProps) => {
-  const t = useT();
-  const {
-    isDisabled,
-    warning,
-    disabledFields,
-    setDisabledFields,
-    handleOnChange,
-    onAppyChange,
-    handlePopoverOpen
-  } = useHooks({
-    timelineValues,
-    onChange,
-    onClose,
-    setTimelineValues
-  });
-
-  const timezoneMatches = useMemo(() => {
-    if (!timelineValues) return false;
-
-    const startTimezone = getTimeZone(timelineValues?.startTime);
-    const currentTimezone = getTimeZone(timelineValues?.currentTime);
-    const endTimezone = getTimeZone(timelineValues?.endTime);
-
-    const areTimezonesEqual =
-      startTimezone === currentTimezone && currentTimezone === endTimezone;
-
-    return areTimezonesEqual;
-  }, [timelineValues]);
-
-  return (
-    <Modal
-      isVisible={isVisible}
-      size="sm"
-      title={t("Timeline Settings")}
-      button1={
-        <Button text={t("Cancel")} buttonType="secondary" onClick={onClose} />
-      }
-      button2={
-        <Button
-          text={t("Apply")}
-          buttonType="primary"
-          disabled={!isDisabled || warning || !timezoneMatches}
-          onClick={onAppyChange}
-        />
-      }
-    >
-      <FieldsWrapper>
-        <CustomDateTimeField
-          name={t("* Start Time")}
-          description={t("Start time for the timeline")}
-          onChange={(newValue) => handleOnChange(newValue || "", "startTime")}
-          value={timelineValues?.startTime}
-          fieldName={"startTime"}
-          disableField={disabledFields.includes("startTime")}
-          setDisabledFields={setDisabledFields}
-          onPopoverOpen={handlePopoverOpen}
-        />
-        <CustomDateTimeField
-          name={t("* Current Time")}
-          description={t("Current time should be between start and end time")}
-          onChange={(newValue) => handleOnChange(newValue || "", "currentTime")}
-          value={timelineValues?.currentTime}
-          disableField={disabledFields.includes("currentTime")}
-          fieldName={"currentTime"}
-          setDisabledFields={setDisabledFields}
-          onPopoverOpen={handlePopoverOpen}
-        />
-        <CustomDateTimeField
-          name={t("* End Time")}
-          onChange={(newValue) => handleOnChange(newValue || "", "endTime")}
-          description={t("End time for the timeline")}
-          value={timelineValues?.endTime}
-          fieldName={"endTime"}
-          disableField={disabledFields.includes("endTime")}
-          setDisabledFields={setDisabledFields}
-          onPopoverOpen={handlePopoverOpen}
-        />
-        {warning && (
-          <DangerItem>
-            <Icon icon="alert" size={30} />
-            {t(
-              "Please make sure the Current time must between the Start time and End Time."
-            )}
-          </DangerItem>
-        )}
-      </FieldsWrapper>
-    </Modal>
-  );
-};
-
-const FieldsWrapper = styled.div`
-  position: relative;
-`;
-
-const CustomDateTimeField = styled(DateTimeField)`
-  position: absolute;
-  background: blue;
-`;
-
-const DangerItem = styled.div`
-  padding-top: 8px;
-  color: ${({ theme }) => theme.dangerous.main};
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
-export default EditPanel;
diff --git a/web/src/beta/components/fields/TimelineField/index.tsx b/web/src/beta/components/fields/TimelineField/index.tsx
deleted file mode 100644
index 1da33c658..000000000
--- a/web/src/beta/components/fields/TimelineField/index.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { useT } from "@reearth/services/i18n";
-import { styled } from "@reearth/services/theme";
-import { useCallback, useEffect, useState } from "react";
-
-import Property from "..";
-
-import EditPanel from "./EditPanel";
-
-export type TimelineFieldProp = {
-  currentTime: string;
-  startTime: string;
-  endTime: string;
-};
-
-export type Props = {
-  name?: string;
-  description?: string;
-  value?: TimelineFieldProp;
-  onChange?: (value?: TimelineFieldProp) => void;
-};
-
-const TimelineField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  onChange
-}) => {
-  const [openModal, setOpenModal] = useState(false);
-  const t = useT();
-
-  const handleTimelineModalClose = useCallback(() => setOpenModal(false), []);
-
-  const handleTimelineModalOpen = useCallback(() => setOpenModal(true), []);
-
-  const [timelineValues, setTimelineValues] = useState(value);
-
-  const handleRemoveSetting = useCallback(() => {
-    if (!value) return;
-    onChange?.();
-  }, [value, onChange]);
-
-  useEffect(() => {
-    setTimelineValues(value);
-  }, [value]);
-
-  return (
-    <Property name={name} description={description}>
-      <Wrapper>
-        <InputWrapper disabled={true}>
-          <Input dataTimeSet={!!timelineValues}>
-            <Timeline>
-              <TextWrapper size="footnote" customColor>
-                {timelineValues?.startTime
-                  ? timelineValues?.startTime
-                  : t("not set")}
-              </TextWrapper>
-              <TextWrapper size="footnote" customColor>
-                {timelineValues?.currentTime
-                  ? timelineValues?.currentTime
-                  : t("not set")}
-              </TextWrapper>
-              <TextWrapper size="footnote" customColor>
-                {timelineValues?.endTime
-                  ? timelineValues?.endTime
-                  : t("not set")}
-              </TextWrapper>
-            </Timeline>
-            <DeleteIcon
-              icon="bin"
-              size={10}
-              disabled={!timelineValues}
-              onClick={handleRemoveSetting}
-            />
-          </Input>
-          <TriggerButton
-            buttonType="secondary"
-            text={t("set")}
-            icon="set"
-            size="small"
-            iconPosition="left"
-            onClick={() => handleTimelineModalOpen()}
-          />
-        </InputWrapper>
-      </Wrapper>
-      {openModal && (
-        <EditPanel
-          timelineValues={timelineValues}
-          onChange={onChange}
-          onClose={handleTimelineModalClose}
-          isVisible={openModal}
-          setTimelineValues={setTimelineValues}
-        />
-      )}
-    </Property>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding-bottom: 12px;
-`;
-
-const InputWrapper = styled.div<{ disabled?: boolean }>`
-  display: flex;
-  width: 100%;
-  gap: 10px;
-`;
-
-const Input = styled.div<{ dataTimeSet?: boolean }>`
-  gap: 14px;
-  width: 100%;
-  display: flex;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  border-radius: 4px;
-  height: auto;
-  align-items: center;
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  color: ${({ theme }) => theme.content.strong};
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: ${({ theme }) => theme.shadow.input};
-  color: ${({ theme, dataTimeSet }) =>
-    dataTimeSet ? theme.content.strong : theme.content.weak};
-`;
-
-const Timeline = styled.div`
-  padding-left: 26px;
-  position: relative;
-  width: 90%;
-  &:before {
-    position: absolute;
-    content: "";
-    width: 2px;
-    background: ${({ theme }) => theme.outline.weak};
-    top: 8px;
-    bottom: 10px;
-    left: 15px;
-  }
-  &:nth-of-type(2n) {
-    &:before {
-      display: none;
-    }
-  }
-`;
-
-const TextWrapper = styled(Text)`
-  position: relative;
-  margin: 5px 0;
-  :before {
-    position: absolute;
-  }
-  ::after {
-    position: absolute;
-    content: "";
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    top: 22%;
-    left: -15px;
-    background: ${({ theme }) => theme.content.main};
-    border: 1px solid ${({ theme }) => theme.outline.main};
-  }
-  &:nth-of-type(2) {
-    ::after {
-      background: transparent;
-      border: 1px solid ${({ theme }) => theme.outline.main};
-    }
-  }
-`;
-
-const TriggerButton = styled(Button)`
-  margin: 0;
-  height: 28px;
-`;
-
-const DeleteIcon = styled(Icon)<{ disabled?: boolean }>`
-  width: 10%;
-  ${({ disabled, theme }) =>
-    disabled
-      ? `color: ${theme.content.weaker};`
-      : `:hover {
-    cursor: pointer;
-      }`}
-`;
-
-export default TimelineField;
diff --git a/web/src/beta/components/fields/ToggleField/index.stories.tsx b/web/src/beta/components/fields/ToggleField/index.stories.tsx
deleted file mode 100644
index 9b77f4f6c..000000000
--- a/web/src/beta/components/fields/ToggleField/index.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { styled } from "@reearth/services/theme";
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import { useCallback } from "react";
-
-
-import ToggleField, { Props } from ".";
-
-const meta: Meta<typeof ToggleField> = {
-  component: ToggleField
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ToggleField>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = useCallback(
-    (checked: boolean) => updateArgs({ checked: !checked }),
-    [updateArgs]
-  );
-
-  return (
-    <Wrapper>
-      <div>
-        <ToggleField {...args} onChange={handleChange} />
-      </div>
-      <div>
-        <ToggleField
-          {...args}
-          name="Reverse Toggle"
-          description={"Invesere of above"}
-          checked={!args.checked}
-          onChange={handleChange}
-        />
-      </div>
-      <div>
-        <ToggleField
-          {...args}
-          name="Disabled"
-          description="Disabled field"
-          disabled={true}
-          onChange={handleChange}
-        />
-      </div>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10%;
-  margin-left: 2rem;
-  margin-top: 2rem;
-  height: 300px;
-`;
-
-Default.args = {
-  name: "Toggle Field",
-  description: "Sample description",
-  checked: true,
-  disabled: false,
-  onChange: () => console.log("clicked")
-};
diff --git a/web/src/beta/components/fields/ToggleField/index.tsx b/web/src/beta/components/fields/ToggleField/index.tsx
deleted file mode 100644
index 348e4522a..000000000
--- a/web/src/beta/components/fields/ToggleField/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Property from "@reearth/beta/components/fields";
-import Toggle, { Props as ToggleProps } from "@reearth/beta/components/Toggle";
-
-export type Props = {
-  name?: string;
-  description?: string;
-} & ToggleProps;
-
-const ToggleField: React.FC<Props> = ({
-  name,
-  description,
-  ...args
-}: Props) => (
-  <Property name={name} description={description}>
-    <Toggle {...args} />
-  </Property>
-);
-
-export default ToggleField;
diff --git a/web/src/beta/components/fields/URLField/index.stories.tsx b/web/src/beta/components/fields/URLField/index.stories.tsx
deleted file mode 100644
index 9c3ee2550..000000000
--- a/web/src/beta/components/fields/URLField/index.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import URLField, { Props } from ".";
-
-const meta: Meta<Props> = {
-  component: URLField
-};
-
-export default meta;
-type Story = StoryObj<typeof URLField>;
-
-export const AssetImageType: Story = {
-  args: {
-    name: "Asset",
-    description: "Defaul Asset Uploader",
-    fileType: "asset",
-    entityType: "image"
-  }
-};
-
-export const AssetFileType: Story = {
-  args: {
-    name: "Asset",
-    description: "Defaul Asset Uploader",
-    fileType: "asset",
-    entityType: "file"
-  }
-};
-
-export const URLType: Story = {
-  args: {
-    name: "URL",
-    description: "Defaul URL Input wrapper",
-    fileType: "URL"
-  }
-};
-
-export const AppearanceType: Story = {
-  args: {
-    name: "URL",
-    description: "Defaul URL Input wrapper",
-    fileType: "layerStyle",
-    entityType: "layerStyle"
-  }
-};
diff --git a/web/src/beta/components/fields/URLField/index.tsx b/web/src/beta/components/fields/URLField/index.tsx
deleted file mode 100644
index 02b7bc4e5..000000000
--- a/web/src/beta/components/fields/URLField/index.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import Property from "@reearth/beta/components/fields";
-import TextInput from "@reearth/beta/components/fields/common/TextInput";
-import {
-  FILE_FORMATS,
-  IMAGE_FORMATS
-} from "@reearth/beta/features/Assets/constants";
-import { AcceptedFileFormat } from "@reearth/beta/features/Assets/types";
-import AssetModal from "@reearth/beta/features/Modals/AssetModal";
-import LayerStyleModal from "@reearth/beta/features/Modals/LayerStyleModal";
-import useFileUploaderHook from "@reearth/beta/hooks/useAssetUploader/hooks";
-import { checkIfFileType } from "@reearth/beta/utils/util";
-import { useT } from "@reearth/services/i18n";
-import { useNotification, useWorkspace } from "@reearth/services/state";
-import { styled } from "@reearth/services/theme";
-import React, { useCallback, useEffect, useState } from "react";
-
-export type Props = {
-  value?: string;
-  name?: string;
-  description?: string;
-  fileType?: "asset" | "URL" | "layerStyle";
-  entityType?: "image" | "file" | "layerStyle";
-  sceneId?: string;
-  fileFormat?: AcceptedFileFormat;
-  onChange?: (value: string | undefined, name: string | undefined) => void;
-};
-
-const URLField: React.FC<Props> = ({
-  name,
-  description,
-  value,
-  fileType,
-  entityType,
-  sceneId,
-  fileFormat,
-  onChange
-}) => {
-  const t = useT();
-  const [open, setOpen] = useState(false);
-  const [currentWorkspace] = useWorkspace();
-  const [, setNotification] = useNotification();
-  const [currentValue, setCurrentValue] = useState(value);
-
-  const handleChange = useCallback(
-    (inputValue?: string, name?: string) => {
-      if (!inputValue) {
-        setCurrentValue(inputValue);
-        onChange?.(inputValue, name);
-      } else if (
-        fileType === "asset" &&
-        !(
-          checkIfFileType(inputValue, FILE_FORMATS) ||
-          checkIfFileType(inputValue, IMAGE_FORMATS)
-        )
-      ) {
-        setNotification({
-          type: "error",
-          text: t("Wrong file format")
-        });
-        setCurrentValue(undefined);
-      } else {
-        setCurrentValue(inputValue);
-        onChange?.(inputValue, name);
-      }
-    },
-    [fileType, onChange, setNotification, t]
-  );
-
-  const { handleFileUpload } = useFileUploaderHook({
-    workspaceId: currentWorkspace?.id,
-    onAssetSelect: handleChange,
-    assetType: entityType,
-    fileFormat
-  });
-
-  useEffect(() => {
-    setCurrentValue(value ?? "");
-  }, [value]);
-
-  const handleClick = useCallback(() => setOpen(!open), [open]);
-  const handleModalClose = useCallback(() => setOpen(false), []);
-
-  return (
-    <Property name={name} description={description}>
-      <TextInput
-        value={currentValue}
-        onChange={handleChange}
-        placeholder={t("Not set")}
-      />
-      {fileType === "asset" && (
-        <ButtonWrapper>
-          <SelectionButton
-            icon={entityType === "image" ? "imageStoryBlock" : "file"}
-            text={t("Choose")}
-            iconPosition="left"
-            onClick={handleClick}
-          />
-          <SelectionButton
-            icon="uploadSimple"
-            text={t("Upload")}
-            iconPosition="left"
-            onClick={handleFileUpload}
-          />
-        </ButtonWrapper>
-      )}
-      {fileType === "layerStyle" && (
-        <SelectionButton icon="layerStyle" onClick={handleClick} />
-      )}
-      {open && entityType !== "layerStyle" && (
-        <AssetModal
-          open={open}
-          onModalClose={handleModalClose}
-          assetType={entityType}
-          currentWorkspace={currentWorkspace}
-          currentValue={currentValue}
-          fileFormat={fileFormat}
-          onSelect={handleChange}
-        />
-      )}
-      {open && entityType === "layerStyle" && (
-        <LayerStyleModal
-          open={open}
-          sceneId={sceneId}
-          onClose={handleModalClose}
-          onSelect={handleChange}
-        />
-      )}
-    </Property>
-  );
-};
-
-const SelectionButton = styled(Button)<{ active?: boolean }>`
-  cursor: pointer;
-  padding: 4px;
-  flex: 1;
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  align-items: space-between;
-  gap: 4px;
-`;
-
-export default URLField;
diff --git a/web/src/beta/components/fields/common/PanelCommon.tsx b/web/src/beta/components/fields/common/PanelCommon.tsx
deleted file mode 100644
index 49a6351ff..000000000
--- a/web/src/beta/components/fields/common/PanelCommon.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled, useTheme } from "@reearth/services/theme";
-import { ReactNode } from "react";
-
-type Props = {
-  title: string;
-  children: ReactNode;
-  onClose: () => void;
-};
-
-const PanelCommon: React.FC<Props> = ({ title, children, onClose }) => {
-  const theme = useTheme();
-  return (
-    <Wrapper>
-      <HeaderWrapper>
-        <PickerTitle
-          size="footnote"
-          weight="regular"
-          color={theme.content.main}
-        >
-          {title}
-        </PickerTitle>
-        <CloseIcon icon="cancel" size={12} onClick={onClose} />
-      </HeaderWrapper>
-      <Content>{children}</Content>
-    </Wrapper>
-  );
-};
-
-export default PanelCommon;
-
-const Wrapper = styled.div`
-  width: 286px;
-  border: 1px solid ${({ theme }) => theme.outline.weak};
-  border-radius: 4px;
-  background: ${({ theme }) => theme.bg[1]};
-  box-shadow: ${({ theme }) => theme.shadow.popup};
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  padding: 4px 8px;
-  border-bottom: 1px solid ${({ theme }) => theme.outline.weak};
-`;
-
-const PickerTitle = styled(Text)`
-  text-align: center;
-  margin-right: auto;
-`;
-
-const CloseIcon = styled(Icon)`
-  margin-left: auto;
-  cursor: pointer;
-`;
-
-const Content = styled.div``;
diff --git a/web/src/beta/components/fields/utils.ts b/web/src/beta/components/fields/utils.ts
deleted file mode 100644
index 7227eee65..000000000
--- a/web/src/beta/components/fields/utils.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  Field,
-  Item,
-  SchemaField
-} from "@reearth/services/api/propertyApi/utils";
-
-export const filterVisibleItems = (items?: Item[]) => {
-  if (!items) return;
-
-  return items.filter((i) => {
-    if (!i.only) return true;
-    const res = searchField(items, i.only.field);
-    return res && (res[1]?.value ?? res[0].defaultValue) === i.only.value;
-  });
-};
-
-const searchField = (
-  items: Item[],
-  fid: string
-): [SchemaField, Field | undefined] | undefined => {
-  for (const i of items) {
-    const sf2 = i.schemaFields.find((f) => f.id === fid);
-    if (!("fields" in i)) return;
-    const field = i.fields.find((f) => f.id === fid);
-    if (sf2) {
-      return [sf2, field];
-    }
-  }
-  return;
-};
diff --git a/web/src/beta/features/Assets/constants.ts b/web/src/beta/features/Assets/constants.ts
deleted file mode 100644
index f34141b38..000000000
--- a/web/src/beta/features/Assets/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// TODO: Remove this file
-
-export const FILE_FORMATS =
-  ".kml,.czml,.topojson,.geojson,.json,.gltf,.glb,.csv";
-
-export const IMAGE_FORMATS = ".jpg,.jpeg,.png,.gif,.svg,.tiff,.webp";
diff --git a/web/src/beta/features/Assets/hooks.ts b/web/src/beta/features/Assets/hooks.ts
deleted file mode 100644
index 54a309163..000000000
--- a/web/src/beta/features/Assets/hooks.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { useApolloClient } from "@apollo/client";
-import { Asset, SortType } from "@reearth/beta/features/Assets/types";
-import {
-  autoFillPage,
-  onScrollToBottom
-} from "@reearth/beta/utils/infinite-scroll";
-import { useAssetsFetcher } from "@reearth/services/api";
-import { Maybe } from "@reearth/services/gql";
-import { useT } from "@reearth/services/i18n";
-import { useCallback, useState, useRef, useMemo, useEffect } from "react";
-
-// TODO: Remove this file
-
-const assetsPerPage = 20;
-
-// const enumTypeMapper: Partial<Record<GQLSortType, string>> = {
-//   [GQLSortType.Date]: "date",
-//   [GQLSortType.Name]: "name",
-//   [GQLSortType.Size]: "size",
-// };
-
-// function toGQLEnum(val?: SortType) {
-// if (!val) return;
-// return (Object.keys(enumTypeMapper) as GQLSortType[]).find(k => enumTypeMapper[k] === val);
-// }
-
-function pagination(
-  sort?: { type?: Maybe<SortType>; reverse?: boolean },
-  endCursor?: string | null
-) {
-  const reverseOrder =
-    !sort?.type || sort?.type === "date" ? !sort?.reverse : !!sort?.reverse;
-
-  return {
-    after: !reverseOrder ? endCursor : undefined,
-    before: reverseOrder ? endCursor : undefined,
-    first: !reverseOrder ? assetsPerPage : undefined,
-    last: reverseOrder ? assetsPerPage : undefined
-  };
-}
-
-export default ({
-  workspaceId
-}: {
-  workspaceId?: string;
-  onAssetSelect?: (inputValue?: string) => void;
-}) => {
-  const client = useApolloClient();
-
-  const [sort, setSort] = useState<{ type?: SortType; reverse?: boolean }>();
-  const [searchTerm, setSearchTerm] = useState<string>();
-  const [selectedAssets, selectAsset] = useState<Asset[]>([]);
-
-  const isGettingMore = useRef(false);
-
-  const { useAssetsQuery, useRemoveAssets } = useAssetsFetcher();
-
-  const { assets, hasMoreAssets, loading, isRefetching, endCursor, fetchMore } =
-    useAssetsQuery({
-      teamId: workspaceId ?? "",
-      pagination: pagination(sort),
-      // sort: toGQLEnum(sort?.type),
-      keyword: searchTerm
-    });
-
-  useEffect(() => {
-    return () => {
-      client.cache.evict({ fieldName: "assets" });
-      client.cache.gc();
-    };
-  }, [client.cache]);
-
-  const t = useT();
-  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
-  const [localSearchTerm, setLocalSearchTerm] = useState<string>(
-    searchTerm ?? ""
-  );
-  const openDeleteModal = useCallback(() => setDeleteModalVisible(true), []);
-  const closeDeleteModal = useCallback(() => setDeleteModalVisible(false), []);
-  const assetsWrapperRef = useRef<HTMLDivElement>(null);
-  const sortOptions: { value: string; label: string }[] = useMemo(
-    () => [
-      { value: "date", label: t("Last Uploaded") },
-      { value: "date-reverse", label: t("First Uploaded") },
-      { value: "name", label: t("A To Z") },
-      { value: "name-reverse", label: t("Z To A") },
-      { value: "size", label: t("Size Small to Large") },
-      { value: "size-reverse", label: t("Size Large to Small") }
-    ],
-    [t]
-  );
-
-  const handleGetMoreAssets = useCallback(async () => {
-    if (hasMoreAssets && !isGettingMore.current) {
-      isGettingMore.current = true;
-      await fetchMore({
-        variables: {
-          pagination: pagination(sort, endCursor)
-        }
-      });
-      isGettingMore.current = false;
-    }
-  }, [endCursor, sort, fetchMore, hasMoreAssets, isGettingMore]);
-
-  const handleSortChange = useCallback(
-    (type?: string, reverse?: boolean) => {
-      if (!type && reverse === undefined) return;
-      setSort({
-        type: (type as SortType) ?? sort?.type,
-        reverse: !!reverse
-      });
-    },
-    [sort]
-  );
-
-  const handleSearchTerm = useCallback((term?: string) => {
-    setSearchTerm(term);
-  }, []);
-
-  const handleRemove = useCallback(async () => {
-    if (selectedAssets?.length) {
-      const { status } = await useRemoveAssets(selectedAssets.map((a) => a.id));
-      if (status === "success") {
-        selectAsset([]);
-      }
-      setDeleteModalVisible(false);
-    }
-  }, [selectedAssets, useRemoveAssets]);
-
-  const handleReverse = useCallback(() => {
-    handleSortChange?.(undefined, !sort?.reverse);
-  }, [handleSortChange, sort?.reverse]);
-
-  const handleSearchInputChange = useCallback(
-    (value: string) => {
-      setLocalSearchTerm(value);
-    },
-    [setLocalSearchTerm]
-  );
-  const handleSearch = useCallback(() => {
-    if (!localSearchTerm || localSearchTerm.length < 1) {
-      handleSearchTerm?.(undefined);
-    } else {
-      handleSearchTerm?.(localSearchTerm);
-    }
-  }, [localSearchTerm, handleSearchTerm]);
-
-  const isAssetsLoading = useMemo(() => {
-    return loading ?? isRefetching;
-  }, [isRefetching, loading]);
-
-  useEffect(() => {
-    if (assetsWrapperRef.current && !isAssetsLoading && hasMoreAssets)
-      autoFillPage(assetsWrapperRef, handleGetMoreAssets);
-  }, [handleGetMoreAssets, hasMoreAssets, isAssetsLoading]);
-
-  const handleSelectAsset = useCallback(
-    (asset?: Asset) => {
-      if (!asset) return;
-      selectAsset(!selectedAssets.includes(asset) ? [asset] : []);
-    },
-    [selectedAssets, selectAsset]
-  );
-
-  return {
-    assets,
-    assetsWrapperRef,
-    isAssetsLoading,
-    hasMoreAssets,
-    sortOptions,
-    sort,
-    searchTerm,
-    localSearchTerm,
-    selectedAssets,
-    deleteModalVisible,
-    onScrollToBottom,
-    closeDeleteModal,
-    selectAsset,
-    handleGetMoreAssets,
-    handleSortChange,
-    handleSearchTerm,
-    handleSelectAsset,
-    openDeleteModal,
-    handleRemove,
-    handleReverse,
-    handleSearchInputChange,
-    handleSearch
-  };
-};
diff --git a/web/src/beta/features/Assets/types.ts b/web/src/beta/features/Assets/types.ts
deleted file mode 100644
index e9cc42e1b..000000000
--- a/web/src/beta/features/Assets/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// TODO: Remove this file
-
-export type Asset = {
-  id: string;
-  teamId: string;
-  name: string;
-  size: number;
-  url: string;
-  contentType: string;
-};
-
-export type SortType = "date" | "name" | "size";
-
-export type AcceptedFileFormat = "CSV" | "GeoJSON" | "KML" | "CZML";
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
index bf1b771f8..e66b4c51c 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx
@@ -1,4 +1,5 @@
-import URLField from "@reearth/beta/components/fields/URLField";
+
+import { IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
 import {
   Button,
   Modal,
@@ -7,6 +8,7 @@ import {
   TextInput,
   Typography
 } from "@reearth/beta/lib/reearth-ui";
+import { AssetField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useCallback, useState } from "react";
@@ -83,7 +85,7 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
             </FormInputWrapper>
             <FormInputWrapper>
               <Label>
-                <Typography size="body">{t("Description")}*</Typography>
+                <Typography size="body">{t("Description")}</Typography>
               </Label>
               <TextArea
                 value={description}
@@ -92,10 +94,10 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
                 onChange={(value) => handleOnChange("description", value)}
               />
             </FormInputWrapper>
-            <URLField
-              name={t("Cover Image")}
-              fileType="asset"
-              entityType="image"
+            <AssetField
+              commonTitle={t("Cover Image")}
+              inputMethod="asset"
+              assetsTypes={IMAGE_TYPES}
               value={imageUrl}
               onChange={(value) => handleOnChange("asset", value || "")}
             />
diff --git a/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts b/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
index 449f031f5..9247a68cc 100644
--- a/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
+++ b/web/src/beta/features/Editor/Story/PageSettingsPanel/hooks.ts
@@ -1,4 +1,5 @@
-import { filterVisibleItems } from "@reearth/beta/components/fields/utils";
+
+import { filterVisibleItems } from "@reearth/beta/ui/fields/utils";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useState, useEffect, useMemo, useCallback } from "react";
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx
deleted file mode 100644
index 4973c024e..000000000
--- a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import ActionItem from ".";
-
-export default {
-  component: ActionItem
-} as Meta;
-
-type Story = StoryObj<typeof ActionItem>;
-
-export const Default: Story = {
-  args: {
-    title: "New Page",
-    icon: "square"
-  }
-};
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
deleted file mode 100644
index 815989073..000000000
--- a/web/src/beta/features/Editor/Story/TempContentStory/Action/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-import { ComponentProps, FC } from "react";
-
-type IconProps = ComponentProps<typeof Icon>;
-
-type Props = {
-  icon: IconProps["icon"];
-  iconSize?: IconProps["size"];
-  iconColor?: IconProps["color"];
-  title: string;
-  onClick: () => void;
-};
-
-const StorySidePanelAction: FC<Props> = ({
-  icon,
-  iconSize,
-  iconColor,
-  title,
-  onClick
-}) => {
-  return (
-    <Wrapper onClick={onClick} type="button">
-      <IconWrapper>
-        <Icon icon={icon} size={iconSize ?? 12} color={iconColor} />
-      </IconWrapper>
-      <Text
-        size={"footnote"}
-        otherProperties={{ wordBreak: "break-all", textAlign: "left" }}
-      >
-        {title}
-      </Text>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 8px 12px;
-  gap: 8px;
-  border-radius: 6px;
-
-  min-height: 28px;
-  transition: all 0.15s;
-
-  background: ${(props) => props.theme.bg[1]};
-  border: 1px solid ${({ theme }) => theme.outline.weaker};
-
-  :hover {
-    background: ${(props) => props.theme.bg[2]};
-  }
-  user-select: none;
-  cursor: pointer;
-`;
-
-const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ theme }) => theme.content.weak};
-`;
-
-export default StorySidePanelAction;
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx
deleted file mode 100644
index b95f259e5..000000000
--- a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import ActionItem from "./index";
-
-export default {
-  component: ActionItem
-} as Meta;
-
-type Story = StoryObj<typeof ActionItem>;
-
-export const Default: Story = {
-  args: {
-    pageCount: 10,
-    isSwipeable: true,
-    children: <div>test</div>
-  }
-};
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
deleted file mode 100644
index 792b3e4f1..000000000
--- a/web/src/beta/features/Editor/Story/TempContentStory/PageItemWrapper/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled, useTheme } from "@reearth/services/theme";
-import { FC, ReactNode } from "react";
-
-type Props = {
-  children: ReactNode;
-  pageCount: number;
-  isSwipeable: boolean;
-};
-
-const StorySidePanelPageWrapper: FC<Props> = ({
-  children,
-  pageCount,
-  isSwipeable
-}) => {
-  const theme = useTheme();
-
-  return (
-    <Wrapper>
-      <Left>
-        <div>
-          <Text size="footnote">{pageCount}</Text>
-        </div>
-        <div>
-          <Icon
-            icon={isSwipeable ? "swiper" : "square"}
-            color={theme.content.weak}
-            size={12}
-          />
-        </div>
-      </Left>
-      <Right>{children}</Right>
-    </Wrapper>
-  );
-};
-
-export default StorySidePanelPageWrapper;
-
-const Wrapper = styled.div`
-  display: flex;
-  gap: 4px;
-`;
-const Left = styled.div``;
-const Right = styled.div`
-  flex-grow: 1;
-  width: 0;
-`;
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx b/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
deleted file mode 100644
index 3fe767b25..000000000
--- a/web/src/beta/features/Editor/Story/TempContentStory/index.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import ContentStory from ".";
-
-export default {
-  component: ContentStory
-} as Meta;
-
-type Story = StoryObj<typeof ContentStory>;
-
-export const Default: Story = {
-  render: (args) => {
-    return (
-      <div style={{ height: "100vh" }}>
-        <ContentStory {...args} />
-      </div>
-    );
-  }
-};
diff --git a/web/src/beta/features/Editor/Story/TempContentStory/index.tsx b/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
deleted file mode 100644
index 50a698123..000000000
--- a/web/src/beta/features/Editor/Story/TempContentStory/index.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import DragAndDropList from "@reearth/beta/components/DragAndDropList";
-import ListItem from "@reearth/beta/components/ListItem";
-import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
-import Action from "@reearth/beta/features/Editor/Story/TempContentStory/Action";
-import PageItemWrapper from "@reearth/beta/features/Editor/Story/TempContentStory/PageItemWrapper";
-import { styled } from "@reearth/services/theme";
-import { useState } from "react";
-
-type Props = {
-  onStorySelect: (id: string) => void;
-  onStoryAdd: () => void;
-  onStoryDelete: (id: string) => void;
-  onStoryClickSettings: (id: string) => void;
-  onStoryRename: (id: string) => void;
-};
-
-// !! NOTE !!
-// This component is not in use
-// Keeping it here for reference only
-
-// This component is created for the multiple stories, currently this is hidden
-// Need to replace text with i18n when use this
-const ContentStory: React.FC<Props> = ({
-  onStorySelect,
-  onStoryAdd,
-  onStoryDelete,
-  onStoryClickSettings,
-  onStoryRename
-}) => {
-  const [openedPageId, setOpenedPageId] = useState<string | undefined>(
-    undefined
-  );
-  const [items, setItems] = useState(
-    [...Array(100)].map((_, i) => ({
-      id: i.toString(),
-      index: i,
-      text: "page" + i
-    }))
-  );
-  return (
-    <SContent>
-      <SContentUp
-        onScroll={openedPageId ? () => setOpenedPageId(undefined) : undefined}
-      >
-        <DragAndDropList
-          uniqueKey="LeftPanelPages"
-          gap={8}
-          items={items}
-          getId={(item) => item.id}
-          onItemDrop={(item, index) => {
-            setItems((old) => {
-              const items = [...old];
-              items.splice(
-                old.findIndex((o) => o.id === item.id),
-                1
-              );
-              items.splice(index, 0, item);
-              return items;
-            });
-          }}
-          renderItem={(item) => {
-            return (
-              <PageItemWrapper
-                pageCount={item.index + 1}
-                isSwipeable={item.index % 2 === 0}
-              >
-                <ListItem
-                  border
-                  onItemClick={() => onStorySelect(item.id)}
-                  onActionClick={() =>
-                    setOpenedPageId((old) => (old ? undefined : item.id))
-                  }
-                  onOpenChange={(isOpen) => {
-                    setOpenedPageId(isOpen ? item.id : undefined);
-                  }}
-                  isSelected={item.index === 0}
-                  isOpenAction={openedPageId === item.id}
-                  actionContent={
-                    <PopoverMenuContent
-                      width="120px"
-                      size="md"
-                      items={[
-                        {
-                          icon: "pencilSimple",
-                          name: "Rename",
-                          onClick: () => {
-                            setOpenedPageId(undefined);
-                            onStoryRename(item.id);
-                          }
-                        },
-                        {
-                          icon: "gearSix",
-                          name: "Settings",
-                          onClick: () => {
-                            setOpenedPageId(undefined);
-                            onStoryClickSettings(item.id);
-                          }
-                        },
-                        {
-                          icon: "trash",
-                          name: "Delete Story",
-                          onClick: () => {
-                            setOpenedPageId(undefined);
-                            onStoryDelete(item.id);
-                          }
-                        }
-                      ]}
-                    />
-                  }
-                >
-                  Page
-                </ListItem>
-              </PageItemWrapper>
-            );
-          }}
-        />
-        {[...Array(100)].map((_, i) => (
-          <ListItem
-            key={i}
-            onItemClick={() => onStorySelect(i.toString())}
-            onActionClick={() =>
-              setOpenedPageId((old) => (old ? undefined : i.toString()))
-            }
-            onOpenChange={(isOpen) => {
-              setOpenedPageId(isOpen ? i.toString() : undefined);
-            }}
-            isSelected={false}
-            isOpenAction={openedPageId === i.toString()}
-            actionContent={
-              <PopoverMenuContent
-                width="128px"
-                size="md"
-                items={[
-                  {
-                    icon: "pencilSimple",
-                    name: "Rename",
-                    onClick: () => {
-                      setOpenedPageId(undefined);
-                      onStoryRename(i.toString());
-                    }
-                  },
-                  {
-                    icon: "gearSix",
-                    name: "Settings",
-                    onClick: () => {
-                      setOpenedPageId(undefined);
-                      onStoryClickSettings(i.toString());
-                    }
-                  },
-                  {
-                    icon: "trash",
-                    name: "Delete Story",
-                    onClick: () => {
-                      setOpenedPageId(undefined);
-                      onStoryDelete(i.toString());
-                    }
-                  }
-                ]}
-              />
-            }
-          >
-            Story
-          </ListItem>
-        ))}
-      </SContentUp>
-      <SContentBottom>
-        <Action
-          icon="book"
-          iconColor="#ffffff"
-          iconSize={16}
-          title={`+ New Story`}
-          onClick={onStoryAdd}
-        />
-      </SContentBottom>
-    </SContent>
-  );
-};
-
-export default ContentStory;
-
-const SContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-const SContentUp = styled.div`
-  flex-grow: 1;
-  height: 0;
-  overflow-y: auto;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  box-sizing: border-box;
-`;
-
-const SContentBottom = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 8px;
-`;
diff --git a/web/src/beta/features/Editor/Visualizer/type.ts b/web/src/beta/features/Editor/Visualizer/type.ts
index 7163f0949..6f15557e3 100644
--- a/web/src/beta/features/Editor/Visualizer/type.ts
+++ b/web/src/beta/features/Editor/Visualizer/type.ts
@@ -1,4 +1,9 @@
-import { Item } from "@reearth/beta/components/ContentPicker";
 import { Block } from "@reearth/beta/features/Visualizer/Crust";
 
+export interface Item {
+  id: string;
+  name: string;
+  icon?: string;
+}
+
 export type BlockType = Item & Pick<Block, "pluginId" | "extensionId">;
diff --git a/web/src/beta/features/Editor/utils.tsx b/web/src/beta/features/Editor/utils.tsx
deleted file mode 100644
index 537af8570..000000000
--- a/web/src/beta/features/Editor/utils.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-//This file will be removed later
-import SelectField from "@reearth/beta/components/fields/SelectField";
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
-import { styled } from "@reearth/services/theme";
-
-export const InputGroup: React.FC<{
-  label: string;
-  description?: string;
-  children: React.ReactNode;
-}> = ({ label, description, children }) => {
-  return (
-    <InputGroupWrapper>
-      <Label>{label}</Label>
-      {children}
-      {description && <Description>{description}</Description>}
-    </InputGroupWrapper>
-  );
-};
-
-const InputGroupWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-`;
-
-const Label = styled.label`
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  color: ${({ theme }) => theme.content.main};
-`;
-
-const Description = styled.div`
-  font-size: 0.625rem;
-  color: ${({ theme }) => theme.content.weak};
-`;
-
-export const Input = styled.input`
-  flex: auto;
-  background: transparent;
-  border: 1px solid #777;
-  border-radius: 4px;
-  outline: none;
-  padding: 5px 10px;
-  color: ${(props) => props.theme.content.main};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-top: auto;
-  ::placeholder {
-    color: ${({ theme }) => theme.content.weaker};
-  }
-`;
-
-export const AssetWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-export const ColJustifyBetween = styled.div`
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-export const SourceTypeWrapper = styled.div`
-  display: flex;
-  gap: 24px;
-`;
-
-export const RadioButtonLabel = styled.label`
-  display: flex;
-  align-items: center;
-
-  span {
-    font-size: 0.75rem;
-  }
-`;
-
-export const SubmitWrapper = styled.div`
-  margin-top: 24px;
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export const TextArea = styled.textarea`
-  flex: auto;
-  background: transparent;
-  border: 1px solid #777;
-  border-radius: 4px;
-  outline: none;
-  resize: none;
-  padding: 5px 10px;
-  color: ${(props) => props.theme.content.main};
-`;
-
-export const LayerWrapper = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-export const DeleteLayerIcon = styled(Icon)<{ disabled?: boolean }>`
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-  background: transparent;
-  border: 1px solid #777;
-  padding: 7px 6px;
-  border-radius: 4px;
-  outline: none;
-  opacity: ${({ disabled }) =>
-    disabled ? 0.5 : 1}; // Reduce opacity for disabled state
-`;
-
-export const AddLayerWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  margin-top: 5px;
-  justify-content: flex-start;
-`;
-
-export const LayerStyleIcon = styled(Icon)`
-  cursor: pointer;
-  background: transparent;
-  border: 1px solid #777;
-  padding: 7px 6px;
-  border-radius: 4px;
-  outline: none;
-`;
-
-export const InputWrapper = styled.div`
-  display: flex;
-  gap: 12px;
-`;
-
-export const AddButtonWrapper = styled.div`
-  width: 100%;
-  margin-top: 8px;
-`;
-export const SelectWrapper = styled(SelectField)`
-  display: block;
-  margin-top: 4px;
-  width: 100%;
-`;
-
-export const PropertyListHeader = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-
-export const StyledText = styled(Text)`
-  padding: 8px 2px;
-  cursor: pointer;
-  width: 100%;
-`;
-
-export const TitledText = styled(Text)`
-  padding: 8px 0px;
-  width: 44%;
-`;
-
-export const DeleteButton = styled(Icon)`
-  cursor: pointer;
-  outline: none;
-  margin-right: 6px;
-`;
-
-export const PropertyFieldContanier = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  background: ${({ theme }) => theme.bg[2]};
-  color: ${({ theme }) => theme.content.main};
-  border-radius: 4px;
-  box-sizing: border-box;
-  gap: 8px;
-`;
-
-export const PropertyField = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  width: 50%;
-  gap: 4px;
-`;
-
-export const HandleIcon = styled(Icon)`
-  color: ${({ theme }) => theme.content.weak};
-  cursor: move;
-  padding-left: 4px;
-  &:hover {
-    color: ${({ theme }) => theme.content.main};
-  }
-`;
diff --git a/web/src/beta/features/Modals/AssetModal/index.tsx b/web/src/beta/features/Modals/AssetModal/index.tsx
deleted file mode 100644
index 95d2cbbc8..000000000
--- a/web/src/beta/features/Modals/AssetModal/index.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import AssetCard from "@reearth/beta/components/CatalogCard";
-import TextInput from "@reearth/beta/components/fields/common/TextInput";
-import SelectField from "@reearth/beta/components/fields/SelectField";
-import Loading from "@reearth/beta/components/Loading";
-import Modal from "@reearth/beta/components/Modal";
-import Text from "@reearth/beta/components/Text";
-import {
-  FILE_FORMATS,
-  IMAGE_FORMATS
-} from "@reearth/beta/features/Assets/constants";
-import useHooks from "@reearth/beta/features/Assets/hooks";
-import { AcceptedFileFormat, Asset } from "@reearth/beta/features/Assets/types";
-import { checkIfFileType } from "@reearth/beta/utils/util";
-import { useT } from "@reearth/services/i18n";
-import { useNotification, Workspace } from "@reearth/services/state";
-import { styled } from "@reearth/services/theme";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-
-const getValue: Record<string, string> = {
-  "date-reverse": "date",
-  "name-reverse": "name",
-  "size-reverse": "size",
-  date: "date",
-  size: "size",
-  name: "name"
-};
-
-export type Props = {
-  className?: string;
-  assetType?: "file" | "image";
-  open?: boolean;
-  onSelect?: (value: string, name: string) => void;
-  currentWorkspace?: Workspace;
-  currentValue?: string;
-  onModalClose: () => void;
-  fileFormat?: AcceptedFileFormat;
-};
-
-const ChooseAssetModal: React.FC<Props> = ({
-  className,
-  currentWorkspace,
-  currentValue,
-  assetType,
-  open,
-  fileFormat,
-  onSelect,
-  onModalClose
-}) => {
-  const t = useT();
-
-  const [, setNotification] = useNotification();
-  const [selectedSortOption, setSelectedSortOption] = useState("date");
-  const {
-    assets,
-    isAssetsLoading,
-    hasMoreAssets,
-    searchTerm,
-    selectedAssets,
-    localSearchTerm,
-    assetsWrapperRef,
-    sortOptions,
-    onScrollToBottom,
-    selectAsset,
-    handleSearchInputChange,
-    handleSearch,
-    handleGetMoreAssets,
-    handleSortChange
-  } = useHooks({ workspaceId: currentWorkspace?.id });
-
-  const filteredAssets = useMemo(() => {
-    if (!assetType) {
-      return assets;
-    }
-
-    return assets?.filter((asset) => {
-      const isFile = checkIfFileType(asset.url, FILE_FORMATS);
-      const isImage = checkIfFileType(asset.url, IMAGE_FORMATS);
-
-      if (assetType === "file" && isFile) {
-        const assetFileFormat = asset.url.split(".").pop()?.toLowerCase();
-        return assetFileFormat === fileFormat?.toLocaleLowerCase();
-      } else {
-        return assetType === "image" && isImage;
-      }
-    });
-  }, [assetType, assets, fileFormat]);
-
-  const handleReset = useCallback(() => {
-    const selectedAsset = assets?.find((a) => a.url === currentValue);
-    if (selectedAsset) {
-      selectAsset([selectedAsset]);
-    }
-  }, [currentValue, assets, selectAsset]);
-
-  const onClose = useCallback(() => {
-    onModalClose();
-    handleReset();
-  }, [handleReset, onModalClose]);
-
-  const handleSelectButtonClick = useCallback(() => {
-    if (selectedAssets && selectedAssets.length > 0) {
-      onSelect?.(selectedAssets[0].url, selectedAssets[0].name);
-      onClose?.();
-    } else {
-      setNotification({
-        type: "warning",
-        text: t("Please select an asset before clicking Select.")
-      });
-    }
-  }, [onClose, onSelect, selectedAssets, setNotification, t]);
-
-  const onSelectAsset = useCallback(
-    (asset?: Asset) => {
-      if (!asset) return;
-      selectAsset(!selectedAssets.includes(asset) ? [asset] : []);
-    },
-    [selectedAssets, selectAsset]
-  );
-  const onSortChange = useCallback(
-    (selectedLabel: string) => {
-      setSelectedSortOption(selectedLabel);
-      const value = getValue[selectedLabel];
-      const reverse = selectedLabel.toLowerCase().includes("reverse");
-      handleSortChange?.(value, reverse);
-    },
-    [handleSortChange]
-  );
-
-  useEffect(() => {
-    handleReset();
-  }, [handleReset]);
-
-  return (
-    <Modal
-      title={t("Select Image")}
-      className={className}
-      isVisible={open}
-      onClose={onClose}
-      size="lg"
-      button1={
-        <Button
-          size="medium"
-          buttonType="secondary"
-          text={t("Cancel")}
-          onClick={() => onClose?.()}
-        />
-      }
-      button2={
-        <Button
-          size="medium"
-          buttonType="primary"
-          text={t("Select")}
-          onClick={() => {
-            handleSelectButtonClick();
-          }}
-        />
-      }
-    >
-      <ControlWarpper>
-        <SortWrapper>
-          <Text size="footnote">{t("Sort By")}</Text>
-          <SelectField
-            value={selectedSortOption}
-            options={sortOptions.map((option) => ({
-              key: option.value,
-              label: option.label
-            }))}
-            onChange={onSortChange}
-          />
-        </SortWrapper>
-        <SearchWarpper>
-          <TextInput
-            value={localSearchTerm}
-            onChange={handleSearchInputChange}
-          />
-          <SearchButton icon="search" margin="0" onClick={handleSearch} />
-        </SearchWarpper>
-      </ControlWarpper>
-      <AssetWrapper>
-        {!isAssetsLoading && (!assets || assets.length < 1) ? (
-          <Template>
-            <TemplateText size="body">
-              {searchTerm
-                ? t("No assets match your search.")
-                : t(
-                    "You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer."
-                  )}
-            </TemplateText>
-          </Template>
-        ) : (
-          <AssetListWrapper
-            ref={assetsWrapperRef}
-            onScroll={(e) =>
-              !isAssetsLoading &&
-              hasMoreAssets &&
-              onScrollToBottom?.(e, handleGetMoreAssets)
-            }
-          >
-            <AssetList>
-              {filteredAssets?.map((a) => (
-                <AssetCard
-                  key={a.id}
-                  name={a.name}
-                  icon={
-                    checkIfFileType(a.url, FILE_FORMATS)
-                      ? "file"
-                      : checkIfFileType(a.url, IMAGE_FORMATS)
-                        ? undefined
-                        : "assetNoSupport"
-                  }
-                  url={a.url}
-                  onSelect={() => onSelectAsset?.(a)}
-                  selected={selectedAssets?.includes(a)}
-                />
-              ))}
-            </AssetList>
-            {isAssetsLoading && <Loading />}
-          </AssetListWrapper>
-        )}
-      </AssetWrapper>
-    </Modal>
-  );
-};
-
-const AssetWrapper = styled.div`
-  max-height: 531px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const ControlWarpper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-`;
-
-const SortWrapper = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  left: 0px;
-`;
-
-const SearchWarpper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  right: 0;
-`;
-
-const SearchButton = styled(Button)`
-  width: 12px;
-  height: 28px;
-`;
-
-const AssetListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-`;
-
-const AssetList = styled.div`
-  margin-right: 8px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 114px);
-  grid-template-rows: repeat(auto-fill, 119px);
-  gap: ${({ theme }) => theme.spacing.small}px;
-  justify-content: space-between;
-  min-height: 373px;
-`;
-
-const Template = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 373px;
-`;
-
-const TemplateText = styled(Text)`
-  text-align: center;
-  width: 390px;
-`;
-export default ChooseAssetModal;
diff --git a/web/src/beta/features/Modals/LayerStyleModal/hooks.ts b/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
deleted file mode 100644
index 4182f4999..000000000
--- a/web/src/beta/features/Modals/LayerStyleModal/hooks.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  autoFillPage,
-  onScrollToBottom
-} from "@reearth/beta/utils/infinite-scroll";
-import { useLayerStylesFetcher } from "@reearth/services/api";
-import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
-
-const LayerStylesPerPage = 20;
-
-function pagination(endCursor?: string | null) {
-  return {
-    after: null,
-    before: endCursor,
-    first: LayerStylesPerPage,
-    last: LayerStylesPerPage
-  };
-}
-
-export default ({ sceneId }: { sceneId?: string }) => {
-  const layerStylesWrapperRef = useRef<HTMLDivElement>(null);
-  const isGettingMore = useRef(false);
-
-  const { useGetLayerStylesQuery } = useLayerStylesFetcher();
-  const { layerStyles, loading, isRefetching, fetchMore } =
-    useGetLayerStylesQuery({ sceneId });
-  const [selectedLayerStyles, selectLayerStyle] = useState<LayerStyle[]>([]);
-
-  const [searchTerm, setSearchTerm] = useState<string>();
-  const [localSearchTerm, setLocalSearchTerm] = useState<string>(
-    searchTerm ?? ""
-  );
-
-  const handleSearchInputChange = useCallback(
-    (value: string) => {
-      setLocalSearchTerm(value);
-    },
-    [setLocalSearchTerm]
-  );
-
-  const handleSearchTerm = useCallback(
-    (term?: string) => setSearchTerm(term),
-    []
-  );
-
-  const handleSearch = useCallback(() => {
-    if (!localSearchTerm || localSearchTerm.length < 1) {
-      handleSearchTerm?.(undefined);
-    } else {
-      handleSearchTerm?.(localSearchTerm);
-    }
-  }, [localSearchTerm, handleSearchTerm]);
-
-  const handleSelectLayerStyle = useCallback(
-    (layerStyle?: LayerStyle) => {
-      if (!layerStyle) return;
-      selectLayerStyle(
-        !selectedLayerStyles.includes(layerStyle) ? [layerStyle] : []
-      );
-    },
-    [selectLayerStyle, selectedLayerStyles]
-  );
-
-  const handleGetMoreLayerStyles = useCallback(async () => {
-    if (!isGettingMore.current) {
-      isGettingMore.current = true;
-      await fetchMore({
-        variables: {
-          pagination: pagination()
-        }
-      });
-      isGettingMore.current = false;
-    }
-  }, [fetchMore, isGettingMore]);
-
-  const isLayerStylesLoading = useMemo(
-    () => loading ?? isRefetching,
-    [loading, isRefetching]
-  );
-
-  useEffect(() => {
-    if (layerStylesWrapperRef.current && !isLayerStylesLoading) {
-      autoFillPage(layerStylesWrapperRef, handleGetMoreLayerStyles);
-    }
-  }, [handleGetMoreLayerStyles, isLayerStylesLoading]);
-
-  return {
-    layerStyles,
-    searchTerm,
-    localSearchTerm,
-    layerStylesWrapperRef,
-    isLayerStylesLoading: loading ?? isRefetching,
-    selectedLayerStyles,
-    onScrollToBottom,
-    selectLayerStyle,
-    handleSelectLayerStyle,
-    handleSearchInputChange,
-    handleSearch
-  };
-};
diff --git a/web/src/beta/features/Modals/LayerStyleModal/index.tsx b/web/src/beta/features/Modals/LayerStyleModal/index.tsx
deleted file mode 100644
index 66109248f..000000000
--- a/web/src/beta/features/Modals/LayerStyleModal/index.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import Button from "@reearth/beta/components/Button";
-import CatalogCard from "@reearth/beta/components/CatalogCard";
-import TextInput from "@reearth/beta/components/fields/common/TextInput";
-import Loading from "@reearth/beta/components/Loading";
-import Modal from "@reearth/beta/components/Modal";
-import Text from "@reearth/beta/components/Text";
-import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
-import { useT } from "@reearth/services/i18n";
-import { useNotification } from "@reearth/services/state";
-import { styled } from "@reearth/services/theme";
-import React, { useCallback } from "react";
-
-import useHooks from "./hooks";
-
-export type Props = {
-  sceneId?: string;
-  open?: boolean;
-  onSelect?: (value: string) => void;
-  onClose: () => void;
-};
-
-// TODO: Remove this file
-const ChooseLayerStyleModal: React.FC<Props> = ({
-  open,
-  sceneId,
-  onClose,
-  onSelect
-}) => {
-  const t = useT();
-  const [, setNotification] = useNotification();
-
-  const {
-    layerStyles,
-    localSearchTerm,
-    searchTerm,
-    layerStylesWrapperRef,
-    selectedLayerStyles,
-    isLayerStylesLoading,
-    handleSelectLayerStyle,
-    handleSearch,
-    handleSearchInputChange,
-    onScrollToBottom
-  } = useHooks({ sceneId });
-
-  const handleSelectButtonClick = useCallback(() => {
-    if (selectedLayerStyles && selectedLayerStyles.length > 0) {
-      onSelect?.(selectedLayerStyles[0].id);
-      onClose?.();
-    } else {
-      setNotification({
-        type: "warning",
-        text: t("Please select an layer style before clicking Select.")
-      });
-    }
-  }, [selectedLayerStyles, onSelect, onClose, setNotification, t]);
-
-  return (
-    <StyledModal
-      title={t("Select Layer Style")}
-      isVisible={open}
-      onClose={onClose}
-      button1={
-        <Button
-          size="medium"
-          buttonType="primary"
-          text={t("Select")}
-          onClick={handleSelectButtonClick}
-        />
-      }
-      button2={
-        <Button
-          size="medium"
-          buttonType="secondary"
-          text={t("Cancel")}
-          onClick={() => onClose?.()}
-        />
-      }
-    >
-      <ControlWarpper>
-        <SearchWarpper>
-          <TextInput
-            value={localSearchTerm}
-            onChange={handleSearchInputChange}
-          />
-          <SearchButton icon="search" margin="0" onClick={handleSearch} />
-        </SearchWarpper>
-      </ControlWarpper>
-      <LayerStyleWrapper>
-        {!isLayerStylesLoading && (!layerStyles || layerStyles.length < 1) ? (
-          <Template>
-            <TemplateText size="body">
-              {searchTerm
-                ? t("No layerStyle match your search.")
-                : t(
-                    "You haven't added any layerStyle yet. Click the add button in the bottom panel to get started."
-                  )}
-            </TemplateText>
-          </Template>
-        ) : (
-          <LayerStyleListWrapper
-            ref={layerStylesWrapperRef}
-            onScroll={(e) => !isLayerStylesLoading && onScrollToBottom?.(e)}
-          >
-            <LayerStyleList>
-              {layerStyles?.map((a) => (
-                <CatalogCard
-                  key={a.id}
-                  name={a.name}
-                  icon={"layerStyle"}
-                  onSelect={() => handleSelectLayerStyle?.(a as LayerStyle)}
-                  selected={selectedLayerStyles.some((ua) => ua.id === a.id)}
-                />
-              ))}
-            </LayerStyleList>
-            {isLayerStylesLoading && <Loading />}
-          </LayerStyleListWrapper>
-        )}
-      </LayerStyleWrapper>
-    </StyledModal>
-  );
-};
-
-const StyledModal = styled(Modal)`
-  width: 730px;
-`;
-const LayerStyleWrapper = styled.div`
-  max-height: calc(100vh - 240px);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const ControlWarpper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-`;
-
-const SearchWarpper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
-const SearchButton = styled(Button)`
-  width: 12px;
-  height: 28px;
-`;
-
-const LayerStyleListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-`;
-
-const LayerStyleList = styled.div`
-  margin-right: 8px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 114px);
-  grid-template-rows: repeat(auto-fill, 119px);
-  gap: ${({ theme }) => theme.spacing.small}px;
-  justify-content: space-between;
-  min-height: 373px;
-`;
-
-const Template = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 373px;
-`;
-
-const TemplateText = styled(Text)`
-  text-align: center;
-  width: 390px;
-`;
-export default ChooseLayerStyleModal;
diff --git a/web/src/beta/features/Navbar/useRightSection.tsx b/web/src/beta/features/Navbar/useRightSection.tsx
index 6994d06e0..a6754e95c 100644
--- a/web/src/beta/features/Navbar/useRightSection.tsx
+++ b/web/src/beta/features/Navbar/useRightSection.tsx
@@ -1,4 +1,4 @@
-import TabButton from "@reearth/beta/components/TabButton";
+
 import { useEditorNavigation } from "@reearth/beta/hooks/navigationHooks";
 import { IconButton } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
@@ -30,24 +30,24 @@ const useRightSide = ({ currentTab, page, sceneId }: Props) => {
         <RightSection>
           <TabButton
             onClick={() => handleEditorNavigation?.("map")}
-            selected={currentTab === "map"}
-            label={t("Map")}
-          />
+            selected={currentTab === "map"}>
+            {t("Map")}
+          </TabButton>
           <TabButton
             onClick={() => handleEditorNavigation?.("story")}
-            selected={currentTab === "story"}
-            label={t("Story")}
-          />
+            selected={currentTab === "story"}>
+            {t("Story")}
+          </TabButton>
           <TabButton
             onClick={() => handleEditorNavigation?.("widgets")}
-            selected={currentTab === "widgets"}
-            label={t("Widgets")}
-          />
+            selected={currentTab === "widgets"}>
+            {t("Widgets")}
+          </TabButton>
           <TabButton
             onClick={() => handleEditorNavigation?.("publish")}
-            selected={currentTab === "publish"}
-            label={t("Publish")}
-          />
+            selected={currentTab === "publish"}>
+            {t("Publish")}
+          </TabButton>
           {!!devPluginExtensions && (
             <IconButton
               icon="pluginInstall"
@@ -82,11 +82,26 @@ const useRightSide = ({ currentTab, page, sceneId }: Props) => {
   };
 };
 
-const RightSection = styled.div`
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 4px;
-`;
+const RightSection = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "center",
+  gap: theme.spacing.smallest,
+}));
+
+const TabButton = styled("button")<{ selected?: boolean }>(({ selected, theme }) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "center",
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+  gap: theme.spacing.small,
+  borderRadius: theme.radius.small,
+  color: selected ? theme.content.main : theme.content.weak,
+  background: selected ? theme.bg[3] : theme.bg[0],
+  "&:hover": {
+    background: theme.bg[3],
+    color: theme.content.main,
+  },
+}));
 
 export default useRightSide;
diff --git a/web/src/beta/features/Notification/index.tsx b/web/src/beta/features/Notification/index.tsx
index e020e184d..423aa2bbf 100644
--- a/web/src/beta/features/Notification/index.tsx
+++ b/web/src/beta/features/Notification/index.tsx
@@ -1,6 +1,7 @@
-import Icon from "@reearth/beta/components/Icon";
-import Text from "@reearth/beta/components/Text";
+
+import { IconButton, Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
+import { FC } from "react";
 
 import useHooks from "./hooks";
 
@@ -11,9 +12,8 @@ export type Notification = {
   text: string;
 };
 
-const NotificationBanner: React.FC = () => {
-  const { isHovered, visible, notification, setModal, setIsHovered } =
-    useHooks();
+const NotificationBanner: FC = () => {
+  const { isHovered, visible, notification, setModal, setIsHovered } = useHooks();
   const theme = useTheme();
 
   return (
@@ -26,27 +26,28 @@ const NotificationBanner: React.FC = () => {
       type={notification?.type}
     >
       <HeadingArea>
-        <Text size="body" color={theme.content.strong} weight="bold">
+        <Typography size="body" color={theme.content.strong} weight="bold">
           {notification?.heading}
-        </Text>
-        <CloseBtn
-          role="button"
-          icon="cancel"
-          size={20}
-          show={isHovered}
-          onClick={() => {
-            setModal?.(false);
-          }}
-        />
+        </Typography>
+        <IconWrapper show={isHovered}>
+          <IconButton
+            icon="close"
+            size="normal"
+            appearance="simple"
+            onClick={() => {
+              setModal?.(false);
+            }}
+          />
+        </IconWrapper>
       </HeadingArea>
       {notification?.text && (
-        <Text
+        <Typography
           size="footnote"
           color={theme.content.strong}
           otherProperties={{ padding: "8px 0 0 0" }}
         >
           {notification?.text}
-        </Text>
+        </Typography>
       )}
     </StyledNotificationBanner>
   );
@@ -54,52 +55,45 @@ const NotificationBanner: React.FC = () => {
 
 export default NotificationBanner;
 
-const StyledNotificationBanner = styled.div<{
+const StyledNotificationBanner = styled("div")<{
   type?: NotificationType;
   visible?: boolean;
-}>`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 30px;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  width: 312px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  box-shadow:
-    rgba(0, 0, 0, 0.3) 0px 19px 38px,
-    rgba(0, 0, 0, 0.22) 0px 15px 12px;
-  background-color: ${({ type, theme }) =>
+}>(({ visible, type, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  top: 30,
+  left: 0,
+  right: 0,
+  margin: "auto",
+  width: 312,
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+  borderRadius: theme.radius.normal,
+  boxShadow: "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
+  backgroundColor:
     type === "error"
       ? theme.dangerous.main
       : type === "warning"
-        ? theme.warning.main
-        : type === "success"
-          ? theme.select.strong
-          : theme.secondary.main};
-  color: ${({ theme }) => theme.content.main};
-  z-index: ${({ theme, visible }) =>
-    visible ? theme.zIndexes.editor.notificationBar : 0};
-  opacity: ${({ visible }) => (visible ? "1" : "0")};
-  transition: all 0.5s;
-  pointer-events: ${({ visible }) => (visible ? "auto" : "none")};
-
-  :hover {
-    padding: 8px 12px;
-  }
-`;
+      ? theme.warning.main
+      : type === "success"
+      ? theme.select.strong
+      : theme.secondary.main,
+  color: theme.content.main,
+  zIndex: visible ? theme.zIndexes.editor.notificationBar : 0,
+  opacity: visible ? "1" : "0",
+  pointerEvents: visible ? "auto" : "none",
+  transition: "all 0.5s",
+  "&:hover": {
+    padding: `${theme.spacing.small}px ${theme.spacing.normal}px`,
+  },
+}));
 
-const HeadingArea = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-`;
+const HeadingArea = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "space-between",
+  width: "100%",
+}));
 
-const CloseBtn = styled(Icon)<{ show: boolean }>`
-  cursor: pointer;
-  transition: all 1s;
-  opacity: ${({ show }) => (show ? "100%" : "0")};
-`;
+const IconWrapper = styled("div")<{ show: boolean }>(({ show }) => ({
+  opacity: show ? "100%" : "0",
+}));
diff --git a/web/src/beta/features/ProjectSettings/MenuList/index.tsx b/web/src/beta/features/ProjectSettings/MenuList/index.tsx
deleted file mode 100644
index 901759e68..000000000
--- a/web/src/beta/features/ProjectSettings/MenuList/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import Text from "@reearth/beta/components/Text";
-import { styled, useTheme } from "@reearth/services/theme";
-import { Link } from "react-router-dom";
-
-export const MenuItem: React.FC<{
-  text?: string;
-  linkTo?: string;
-  onClick?: () => void;
-  color?: string;
-  active?: boolean;
-}> = ({ text, linkTo, onClick, color, active }) => {
-  const theme = useTheme();
-  const content = (
-    <MenuItemWrapper onClick={onClick} active={active}>
-      <Text size="body" color={color || theme.content.strong}>
-        {text}
-      </Text>
-    </MenuItemWrapper>
-  );
-
-  return !linkTo ? (
-    content
-  ) : (
-    <StyledLinkButton to={linkTo}>{content}</StyledLinkButton>
-  );
-};
-
-export const MenuList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 0;
-  padding: 12px 0;
-  width: 200px;
-`;
-
-const MenuItemWrapper = styled.div<{ active?: boolean }>`
-  display: flex;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 8px 16px;
-  cursor: pointer;
-  background-color: ${({ active, theme }) => (active ? theme.select.main : "")};
-  transition: all 0.3s ease;
-  &:hover {
-    background-color: ${({ active, theme }) =>
-      active ? theme.select.main : theme.bg[2]};
-  }
-`;
-
-const StyledLinkButton = styled(Link)`
-  text-decoration: none;
-  width: 100%;
-
-  :hover {
-    text-decoration: none;
-  }
-`;
diff --git a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
index 6078dba52..9825935f5 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx
@@ -194,7 +194,7 @@ const DangerItem = styled("div")(({ theme }) => ({
   gap: theme.spacing.large
 }));
 
-const Divider = styled.div`
-  height: 1px;
-  background-color: ${({ theme }) => theme.outline.weaker};
-`;
+const Divider = styled("div")(({ theme }) => ({
+  height: "1px",
+  borderBlockColor: theme.outline.weaker,
+}));
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
index 2a9a0e8e4..c80538b30 100644
--- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
+++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PluginInstallCardButton.tsx
@@ -1,7 +1,7 @@
-import Text from "@reearth/beta/components/Text";
-import { Icon, IconName } from "@reearth/beta/lib/reearth-ui";
+
+import { Icon, IconName, Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
-import React from "react";
+import { FC } from "react";
 
 export type Props = {
   className?: string;
@@ -10,7 +10,7 @@ export type Props = {
   onClick?: () => void;
 };
 
-const PluginInstallCardButton: React.FC<Props> = ({
+const PluginInstallCardButton: FC<Props> = ({
   className,
   icon,
   text,
@@ -18,7 +18,7 @@ const PluginInstallCardButton: React.FC<Props> = ({
 }) => (
   <StyledButton onClick={onClick} className={className}>
     <Icon icon={icon} size={126} />
-    <Text size="h4">{text}</Text>
+    <Typography size="h4">{text}</Typography>
   </StyledButton>
 );
 
diff --git a/web/src/beta/features/RootPage/index.tsx b/web/src/beta/features/RootPage/index.tsx
index dc24bab7c..f021908fa 100644
--- a/web/src/beta/features/RootPage/index.tsx
+++ b/web/src/beta/features/RootPage/index.tsx
@@ -1,10 +1,11 @@
-import Loading from "@reearth/beta/components/Loading";
+
 import PageWrapper from "@reearth/beta/features/RootPage/PageWrapper";
-import React from "react";
+import { Loading } from "@reearth/beta/lib/reearth-ui";
+import { FC } from "react";
 
 import useHooks from "./hooks";
 
-const RootPage: React.FC = () => {
+const RootPage: FC = () => {
   const { isLoading, isAuthenticated, error } = useHooks();
 
   return isLoading ? (
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
deleted file mode 100644
index 006d4ec9b..000000000
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { truncMinutes } from "@reearth/beta/utils/time";
-import { render, screen } from "@reearth/test/utils";
-import { expect, test } from "vitest";
-
-import {
-  EPOCH_SEC,
-  GAP_HORIZONTAL,
-  HOURS_SECS,
-  SCALE_INTERVAL
-} from "./constants";
-import ScaleList from "./ScaleList";
-
-const START_DATE = new Date("2022-07-03T12:21:21.100");
-const END_DATA = new Date("2022-07-04T12:21:21.100");
-const DIFF = END_DATA.getTime() - truncMinutes(START_DATE).getTime();
-
-test("it should render memory and date label", () => {
-  // Convert epoch time to scale by every interval
-  const scaleCount = Math.trunc(DIFF / EPOCH_SEC / SCALE_INTERVAL);
-  const hoursCount = Math.trunc(HOURS_SECS / SCALE_INTERVAL);
-
-  const { container } = render(
-    <ScaleList
-      start={START_DATE}
-      scaleCount={scaleCount}
-      hoursCount={hoursCount}
-      scaleInterval={SCALE_INTERVAL}
-      strongScaleMinutes={12}
-      gapHorizontal={GAP_HORIZONTAL}
-    />
-  );
-
-  const children = Array.from(container.querySelector("div")?.children || []);
-  expect(children.length).toBe(scaleCount + 1);
-
-  const expectedStrongScaleLabelList = [
-    "Jul 03 2022 12:00:00.00",
-    "Jul 03 2022 14:00:00.00",
-    "Jul 03 2022 16:00:00.00",
-    "Jul 03 2022 18:00:00.00",
-    "Jul 03 2022 20:00:00.00",
-    "Jul 03 2022 22:00:00.00",
-    "Jul 04 2022 00:00:00.00",
-    "Jul 04 2022 02:00:00.00",
-    "Jul 04 2022 04:00:00.00",
-    "Jul 04 2022 06:00:00.00",
-    "Jul 04 2022 08:00:00.00",
-    "Jul 04 2022 10:00:00.00"
-  ];
-
-  expectedStrongScaleLabelList.forEach((label) => {
-    expect(screen.getByText(label)).toBeInTheDocument();
-  });
-});
-
-test("it should render memory and date label when scaleInterval is changed", () => {
-  const scaleInterval = 60;
-
-  // Convert epoch time to scale by every interval
-  const scaleCount = Math.trunc(DIFF / EPOCH_SEC / scaleInterval);
-  const hoursCount = Math.trunc(HOURS_SECS / scaleInterval);
-
-  const { container } = render(
-    <ScaleList
-      start={START_DATE}
-      scaleCount={scaleCount}
-      hoursCount={hoursCount}
-      scaleInterval={scaleInterval}
-      strongScaleMinutes={12}
-      gapHorizontal={GAP_HORIZONTAL}
-    />
-  );
-
-  const children = Array.from(container.querySelector("div")?.children || []);
-  expect(children.length).toBe(scaleCount + 1);
-
-  const expectedStrongScaleLabelList = [
-    "Jul 03 2022 12:00:00.00",
-    "Jul 03 2022 15:00:00.00",
-    "Jul 03 2022 18:00:00.00",
-    "Jul 03 2022 21:00:00.00",
-    "Jul 04 2022 00:00:00.00",
-    "Jul 04 2022 03:00:00.00",
-    "Jul 04 2022 06:00:00.00",
-    "Jul 04 2022 09:00:00.00"
-  ];
-
-  expectedStrongScaleLabelList.forEach((label) => {
-    expect(screen.getByText(label)).toBeInTheDocument();
-  });
-});
-
-test("it should render memory and date label when strongScaleMinutes is changed", () => {
-  const scaleInterval = 60;
-  const strongScaleMinutes = 1;
-
-  // Convert epoch time to scale by every interval
-  const scaleCount = Math.trunc(DIFF / EPOCH_SEC / scaleInterval);
-  const hoursCount = Math.trunc(HOURS_SECS / scaleInterval);
-
-  const { container } = render(
-    <ScaleList
-      start={START_DATE}
-      scaleCount={scaleCount}
-      hoursCount={hoursCount}
-      scaleInterval={scaleInterval}
-      strongScaleMinutes={strongScaleMinutes}
-      gapHorizontal={GAP_HORIZONTAL}
-    />
-  );
-
-  const children = Array.from(container.querySelector("div")?.children || []);
-  expect(children.length).toBe(scaleCount + 1);
-
-  const expectedStrongScaleLabelList = [
-    "Jul 03 2022 12:00:00.00",
-    "Jul 03 2022 13:00:00.00",
-    "Jul 03 2022 14:00:00.00",
-    "Jul 03 2022 15:00:00.00",
-    "Jul 03 2022 16:00:00.00",
-    "Jul 03 2022 17:00:00.00",
-    "Jul 03 2022 18:00:00.00",
-    "Jul 03 2022 19:00:00.00",
-    "Jul 03 2022 20:00:00.00",
-    "Jul 03 2022 21:00:00.00",
-    "Jul 03 2022 22:00:00.00",
-    "Jul 03 2022 23:00:00.00",
-    "Jul 04 2022 00:00:00.00",
-    "Jul 04 2022 01:00:00.00",
-    "Jul 04 2022 02:00:00.00",
-    "Jul 04 2022 03:00:00.00",
-    "Jul 04 2022 04:00:00.00",
-    "Jul 04 2022 05:00:00.00",
-    "Jul 04 2022 06:00:00.00",
-    "Jul 04 2022 07:00:00.00",
-    "Jul 04 2022 08:00:00.00",
-    "Jul 04 2022 09:00:00.00"
-  ];
-
-  expectedStrongScaleLabelList.forEach((label) => {
-    expect(screen.getByText(label)).toBeInTheDocument();
-  });
-});
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
index 798d0be4f..46fce621d 100644
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
+++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.tsx
@@ -1,4 +1,5 @@
-import Text from "@reearth/beta/components/Text";
+
+import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { PublishTheme, styled } from "@reearth/services/theme";
 import { memo } from "react";
 
@@ -61,13 +62,9 @@ const ScaleListInner: React.FC<ScaleListInnerProps> = memo(
 
             return (
               <LabeledScale key={idx}>
-                <ScaleLabel
-                  size="footnote"
-                  customColor
-                  publishedTheme={publishedTheme}
-                >
-                  {label}
-                </ScaleLabel>
+                <ScaleLabel size="footnote" publishedTheme={publishedTheme}>
+                {label}
+              </ScaleLabel>
                 <Scale
                   isHour={isHour}
                   isStrongScale={isStrongScale}
@@ -94,49 +91,47 @@ export type StyledColorProps = {
   publishedTheme: PublishTheme | undefined;
 };
 
-const ScaleContainer = styled.div`
-  display: flex;
-  width: 0;
-
-  height: 30px;
-  align-items: flex-end;
-  will-change: auto;
-  padding-left: ${PADDING_HORIZONTAL}px;
-  ::after {
-    content: "";
-    display: block;
-    padding-right: 1px;
-    height: 1px;
-  }
-`;
+const ScaleContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  width: 0,
+  alignItems: "flex-end",
+  willChange: "auto",
+  height: "30px",
+  paddingLeft: `${PADDING_HORIZONTAL}px`,
+  "&::after": {
+    content: '""',
+    display: "block",
+    paddingRight: theme.spacing.micro - 1,
+    height: "1px",
+  },
+}));
 
-const LabeledScale = styled.div`
-  display: flex;
-  align-items: flex-end;
-  position: relative;
-  height: 100%;
-`;
+const LabeledScale = styled("div")(() => ({
+  display: "flex",
+  alignItems: "flex-end",
+  position: "relative",
+  height: "100%",
+}));
 
-const ScaleLabel = styled(Text)<StyledColorProps>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: ${({ theme, publishedTheme }) =>
-    publishedTheme?.mainText || theme.content.main};
-  white-space: nowrap;
-`;
+const ScaleLabel = styled(Typography)<StyledColorProps>(({ publishedTheme, theme }) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  height: "100%",
+  whiteSpace: "nowrap",
+  color: publishedTheme?.mainText || theme.content.main,
+}));
 
-const Scale = styled.div<
+const Scale = styled("div")<
   StyledColorProps & {
     isHour: boolean;
     isStrongScale: boolean;
   }
->`
-  flex-shrink: 0;
-  width: ${({ isStrongScale }) =>
-    isStrongScale ? `${STRONG_SCALE_WIDTH}px` : `${NORMAL_SCALE_WIDTH}px`};
-  height: ${({ isHour }) => (isHour && "16px") || "12px"};
-  background: ${({ publishedTheme }) => publishedTheme?.weakText};
-`;
+>(({ isStrongScale, isHour, publishedTheme }) => ({
+  flexShrink: 0,
+  width: isStrongScale ? `${STRONG_SCALE_WIDTH}px` : `${NORMAL_SCALE_WIDTH}px`,
+  height: isHour ? "16px" : "12px",
+  background: publishedTheme?.weakText,
+}));
 
 export default ScaleList;
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
deleted file mode 100644
index 8424064ad..000000000
--- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.test.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { render, screen, fireEvent } from "@reearth/test/utils";
-import { useState } from "react";
-import { expect, test, vi, vitest } from "vitest";
-
-import { PADDING_HORIZONTAL, BORDER_WIDTH, GAP_HORIZONTAL } from "./constants";
-
-import Timeline from ".";
-
-global.ResizeObserver = class {
-  observe() {}
-  disconnect() {}
-} as any;
-
-const CURRENT_TIME = new Date("2022-07-03T00:00:00.000").getTime();
-// This is width when range is one day.
-const SCROLL_WIDTH = 2208;
-
-const TimelineWrapper: React.FC<{
-  isOpened?: boolean;
-  onPlay?: () => void;
-  onPlayReversed?: () => void;
-  onSpeedChange?: (speed: number) => void;
-}> = ({ isOpened = true, onPlay, onPlayReversed, onSpeedChange }) => {
-  const [currentTime, setCurrentTime] = useState(CURRENT_TIME);
-  return (
-    <Timeline
-      currentTime={currentTime}
-      range={{ start: CURRENT_TIME }}
-      onClick={setCurrentTime}
-      onDrag={setCurrentTime}
-      onPlay={onPlay}
-      onPlayReversed={onPlayReversed}
-      onSpeedChange={onSpeedChange}
-      isOpened={isOpened}
-    />
-  );
-};
-
-test("it should open when timeline open button is clicked", () => {
-  const { rerender } = render(<TimelineWrapper isOpened={false} />);
-
-  expect(screen.queryAllByRole("slider")).toHaveLength(0);
-
-  rerender(<TimelineWrapper isOpened />);
-
-  expect(screen.queryAllByRole("slider")).not.toHaveLength(0);
-});
-
-test("it should get time from clicked position", () => {
-  render(<TimelineWrapper />);
-  const slider = screen.getAllByRole("slider")[1];
-  const currentPosition = 12;
-  vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
-
-  fireEvent.click(slider, {
-    clientX: PADDING_HORIZONTAL + BORDER_WIDTH + currentPosition
-  });
-
-  const iconWrapper = screen.getByTestId("knob-icon");
-  expect(iconWrapper.style.left).toBe("-0.5px");
-});
-
-test("it should get time from mouse moved position", () => {
-  render(<TimelineWrapper />);
-  const slider = screen.getAllByRole("slider")[1];
-  const currentPosition = 12;
-  const clientX = PADDING_HORIZONTAL + BORDER_WIDTH + currentPosition;
-  const expectedLeft = "-0.5px";
-
-  const scroll = vi.fn();
-  window.HTMLElement.prototype.scroll = scroll;
-
-  vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
-
-  // Check initial position
-  expect(
-    Math.abs(
-      Math.trunc(
-        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10)
-      )
-    )
-  ).toBe(0);
-
-  // It should not move
-  fireEvent.mouseMove(slider, {
-    clientX
-  });
-  expect(
-    Math.abs(
-      Math.trunc(
-        parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10)
-      )
-    )
-  ).toBe(0);
-
-  // It should move
-  fireEvent.mouseDown(slider);
-  fireEvent.mouseMove(slider, {
-    clientX
-  });
-  fireEvent.mouseUp(slider);
-  expect(screen.getByTestId("knob-icon").style.left).toBe(expectedLeft);
-
-  // It should not move
-  fireEvent.mouseMove(slider, {
-    clientX: clientX * 2
-  });
-  expect(screen.getByTestId("knob-icon").style.left).toBe(expectedLeft);
-});
-
-test("it should get correct strongScaleHours from amount of scroll", () => {
-  render(<TimelineWrapper />);
-  const slider = screen.getAllByRole("slider")[1];
-  vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
-
-  fireEvent.wheel(slider, {
-    deltaY: -50
-  });
-  expect(
-    parseInt(
-      slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "",
-      10
-    )
-  ).toBe(GAP_HORIZONTAL * 1.5);
-
-  // Reset gap and increase memory.
-  fireEvent.wheel(slider, {
-    deltaY: -50
-  });
-  expect(
-    parseInt(
-      slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "",
-      10
-    )
-  ).toBe(GAP_HORIZONTAL);
-});
-
-test("it should invoke onPlay or onPlayReversed when play button is clicked", async () => {
-  const mockOnPlay = vitest.fn();
-  const mockOnPlayReversed = vitest.fn();
-  render(
-    <TimelineWrapper onPlay={mockOnPlay} onPlayReversed={mockOnPlayReversed} />
-  );
-
-  // TODO: get element by label text
-  // Click play button
-  fireEvent.click(screen.getAllByRole("button")[2]);
-  expect(mockOnPlay).toBeCalledWith(true);
-  // Click play button again
-  fireEvent.click(screen.getAllByRole("button")[2]);
-  expect(mockOnPlay).toBeCalledWith(false);
-
-  // TODO: get element by label text
-  // Click playback button
-  fireEvent.click(screen.getAllByRole("button")[1]);
-  expect(mockOnPlayReversed).toBeCalledWith(true);
-  // Click playback button again
-  fireEvent.click(screen.getAllByRole("button")[1]);
-  expect(mockOnPlayReversed).toBeCalledWith(false);
-
-  // Click play button
-  fireEvent.click(screen.getAllByRole("button")[2]);
-  expect(mockOnPlay).toBeCalledWith(true);
-  // And click playback button
-  fireEvent.click(screen.getAllByRole("button")[1]);
-  expect(mockOnPlayReversed).toBeCalledWith(true);
-  expect(mockOnPlay).toBeCalledWith(false);
-  // Finally click play button
-  fireEvent.click(screen.getAllByRole("button")[2]);
-  expect(mockOnPlay).toBeCalledWith(true);
-  expect(mockOnPlayReversed).toBeCalledWith(false);
-});
-
-test("it should invoke onSpeedChange when speed range is changed", async () => {
-  const mockOnSpeedChange = vitest.fn();
-  render(<TimelineWrapper onSpeedChange={mockOnSpeedChange} />);
-
-  // TODO: get element by label text
-  // Click play button
-  fireEvent.input(screen.getAllByRole("slider")[0], { target: { value: 100 } });
-
-  expect(mockOnSpeedChange).toBeCalledWith(100);
-});
diff --git a/web/src/beta/hooks/useAssetUploader/hooks.tsx b/web/src/beta/hooks/useAssetUploader/hooks.tsx
deleted file mode 100644
index 49fdb1ad0..000000000
--- a/web/src/beta/hooks/useAssetUploader/hooks.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AcceptedFileFormat } from "@reearth/beta/features/Assets/types";
-import { useAssetsFetcher } from "@reearth/services/api";
-import { useCallback, useMemo } from "react";
-import useFileInput from "use-file-input";
-
-import { FILE_FORMATS, IMAGE_FORMATS } from "../../features/Assets/constants";
-
-export default ({
-  workspaceId,
-  onAssetSelect,
-  assetType,
-  fileFormat
-}: {
-  workspaceId?: string;
-  onAssetSelect?: (inputValue?: string, name?: string) => void;
-  assetType?: string;
-  fileFormat?: AcceptedFileFormat;
-}) => {
-  const { useCreateAssets } = useAssetsFetcher();
-
-  const acceptedExtension = useMemo(() => {
-    return assetType === "image"
-      ? IMAGE_FORMATS
-      : assetType === "file"
-        ? fileFormat
-          ? `.${fileFormat?.toLocaleLowerCase()}`
-          : FILE_FORMATS
-        : IMAGE_FORMATS + "," + FILE_FORMATS;
-  }, [assetType, fileFormat]);
-
-  const handleAssetsCreate = useCallback(
-    async (files?: FileList) => {
-      if (!files) return;
-      const result = await useCreateAssets({
-        teamId: workspaceId ?? "",
-        file: files
-      });
-      const assetUrl = result?.data[0].data?.createAsset?.asset.url;
-      const assetName = result?.data[0].data?.createAsset?.asset.name;
-
-      onAssetSelect?.(assetUrl, assetName);
-    },
-    [workspaceId, useCreateAssets, onAssetSelect]
-  );
-  const handleFileUpload = useFileInput(
-    (files) => handleAssetsCreate?.(files),
-    {
-      accept: acceptedExtension,
-      multiple: true
-    }
-  );
-
-  return { handleFileUpload };
-};
diff --git a/web/src/beta/pages/AccountSettingsPage/index.tsx b/web/src/beta/pages/AccountSettingsPage/index.tsx
index 867f178e2..5e4e4853e 100644
--- a/web/src/beta/pages/AccountSettingsPage/index.tsx
+++ b/web/src/beta/pages/AccountSettingsPage/index.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import { FC } from "react";
 
-import Text from "@reearth/beta/components/Text";
+import { Typography } from "@reearth/beta/lib/reearth-ui";
 
 export type Props = {
   path?: string;
 };
 
-const AccountPage: React.FC<Props> = () => <Text size="h4">Account page</Text>;
+const AccountPage: FC<Props> = () => <Typography size="h4">Account page</Typography>;
 
 export default AccountPage;
diff --git a/web/src/beta/pages/GraphQLPlayground/index.tsx b/web/src/beta/pages/GraphQLPlayground/index.tsx
index d74f3669e..56ae0c338 100644
--- a/web/src/beta/pages/GraphQLPlayground/index.tsx
+++ b/web/src/beta/pages/GraphQLPlayground/index.tsx
@@ -1,10 +1,10 @@
 import { createGraphiQLFetcher } from "@graphiql/toolkit";
-import Filled from "@reearth/beta/components/Filled";
-import Text from "@reearth/beta/components/Text";
+import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { useAuth } from "@reearth/services/auth";
 import { GraphiQL } from "graphiql";
 import { useEffect, useState } from "react";
 import "graphiql/graphiql.css";
+import { styled } from "@reearth/services/theme";
 
 const fetcher = createGraphiQLFetcher({
   url: `${window.REEARTH_CONFIG?.api || "/api"}` + "/graphql"
@@ -24,6 +24,13 @@ export default function GraphQLPlayground(_: { path?: string }): JSX.Element {
       <GraphiQL fetcher={fetcher} isHeadersEditorEnabled headers={headers} />
     </Filled>
   ) : (
-    <Text size="h2">Please log in to Re:Earth</Text>
+    <Typography size="h2">Please log in to Re:Earth</Typography>
   );
 }
+
+const Filled = styled("div")(() => ({
+  width: "100%",
+  height: "100%",
+  position: "relative",
+  overflow: "hidden",
+}));
diff --git a/web/src/beta/pages/Page.tsx b/web/src/beta/pages/Page.tsx
index 44af3cdff..1e503feb3 100644
--- a/web/src/beta/pages/Page.tsx
+++ b/web/src/beta/pages/Page.tsx
@@ -6,7 +6,7 @@ import {
 import { AuthenticatedPage } from "@reearth/services/auth";
 import React, { ReactNode, useMemo } from "react";
 
-import Loading from "../components/Loading";
+import { Loading } from "../lib/reearth-ui";
 
 type RenderItemProps = {
   sceneId?: string;
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index ff60e40bc..bedc64480 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -1,54 +1,13 @@
-Current Position: ''
-Latitude: ''
-Longitude: ''
-Height: ''
-Current Rotation: ''
-Heading: ''
-Pitch: ''
-Roll: ''
-Camera Position Editor: ''
-Cancel: ''
-Capture: ''
-Location: ''
-Rotation: ''
-Apply: ''
-Position Set: ''
-Not set: ''
-Edit: ''
-Color Picker: ''
 You have passed the maximum value.: ''
 You have passed the minimum value.: ''
-Set Time: ''
-Date: ''
-Time: ''
-Time Zone: ''
-set: ''
-Remove: ''
-Add: ''
-Settings: ''
-Options: ''
-Please choose an option: ''
-Add text here: ''
-Timeline Settings: ''
-'* Start Time': ''
-Start time for the timeline: ''
-'* Current Time': ''
-Current time should be between start and end time: ''
-'* End Time': ''
-End time for the timeline: ''
-Please make sure the Current time must between the Start time and End Time.: ''
-not set: ''
-Wrong file format: ''
-Choose: ''
-Upload: ''
 Not found: ''
+Select Asset: ''
 Last Uploaded: ''
 First Uploaded: ''
 A To Z: ''
 Z To A: ''
 Size Small to Large: ''
 Size Large to Small: ''
-Select Asset: ''
 Upload File: ''
 Search in all assets library: ''
 Assets selected: ''
@@ -124,6 +83,7 @@ Delete Feature: ''
 Enable Infobox: ''
 Show infobox when the user clicks on a layer: ''
 Layer Style: ''
+Settings: ''
 Add Layer from Resource: ''
 Add Sketch Layer: ''
 Layers: ''
@@ -156,6 +116,7 @@ Publish your scene: ''
 Update your story: ''
 Update your scene: ''
 Ok: ''
+Cancel: ''
 Your published story will be updated. This means all current changes will overwrite the current published story.: ''
 Your published scene will be updated. This means all current changes will overwrite the current published scene.: ''
 Your story will be published. This means anybody with the below URL will be able to view this story.: ''
@@ -190,16 +151,6 @@ Align centered: ''
 Background color: ''
 Align System: ''
 Widget Manager: ''
-Please select an asset before clicking Select.: ''
-Select Image: ''
-Select: ''
-Sort By: ''
-No assets match your search.: ''
-You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: ''
-Please select an layer style before clicking Select.: ''
-Select Layer Style: ''
-No layerStyle match your search.: ''
-You haven't added any layerStyle yet. Click the add button in the bottom panel to get started.: ''
 Project settings: ''
 Plugin: ''
 Unknown: ''
@@ -276,6 +227,7 @@ Angle: ''
 Narrow: ''
 Wide: ''
 Spacing settings: ''
+Remove: ''
 Block: ''
 Unsupported field type: ''
 Write your story :): ''
@@ -304,9 +256,37 @@ Subscript: ''
 Superscript: ''
 Clear Formatting: ''
 'Sort:': ''
+Wrong file format: ''
+Not set: ''
 Position Capture: ''
+Latitude: ''
+Longitude: ''
+Height: ''
+Current Position: ''
+Current Rotation: ''
+Heading: ''
+Pitch: ''
+Roll: ''
+Camera Position Editor: ''
+Location: ''
 value: ''
+Rotation: ''
+Position Set: ''
+Edit: ''
+Capture: ''
 Time Period Settings: ''
+'* Start Time': ''
+Start time for the timeline: ''
+'* Current Time': ''
+Current time should be between start and end time: ''
+'* End Time': ''
+End time for the timeline: ''
+Please make sure the Current time must between the Start time and End Time.: ''
+set: ''
+Set Time: ''
+Date: ''
+Time: ''
+Time Zone: ''
 Failed to add one or more assets.: ''
 Successfully added one or more assets.: ''
 Failed to delete one or more assets.: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index e86d226d6..f09f0baa6 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -1,54 +1,13 @@
-Current Position: 現地
-Latitude: 緯度
-Longitude: 経度
-Height: 高さ
-Current Rotation: 現在のローテーション
-Heading: ヘッディング
-Pitch: ピッチ
-Roll: ロール
-Camera Position Editor: カメラ位置の編集
-Cancel: キャンセル
-Capture: キャプチャ
-Location: 位置
-Rotation: ローテーション
-Apply: 適用
-Position Set: 設定済み
-Not set: 未設定
-Edit: 編集
-Color Picker: カラーピッカー
-You have passed the maximum value.: 最大値を超えています
-You have passed the minimum value.: 最小値を下回っています
-Set Time: 時間設定
-Date: 時間帯
-Time: 時間
-Time Zone: 時間帯
-set: 設定
-Remove: 削除
-Add: 追加
-Settings: 設定
-Options: オプション
-Please choose an option: オプションを選んでください
-Add text here: テキストを書きましょう
-Timeline Settings: タイムライン設定
-'* Start Time': '* 開始時刻'
-Start time for the timeline: タイムラインの開始時刻
-'* Current Time': '* 現在時刻'
-Current time should be between start and end time: 現在時刻は開始時刻と終了時刻の間で設定してください
-'* End Time': '* 終了時刻'
-End time for the timeline: タイムラインの終了時刻
-Please make sure the Current time must between the Start time and End Time.: 現在時刻が開始時刻と終了時刻の間にあることを確認してください
-not set: 未設定
-Wrong file format: ファイルのフォーマットが異なります
-Choose: 選択
-Upload: アップロード
+You have passed the maximum value.: ''
+You have passed the minimum value.: ''
 Not found: ページが見つかりません
+Select Asset: ''
 Last Uploaded: 昇順（アップロード日）
 First Uploaded: 降順（アップロード日）
 A To Z: 昇順（ファイル名）
 Z To A: 降順（ファイル名）
 Size Small to Large: 昇順（サイズ）
 Size Large to Small: 降順（サイズ）
-Select Asset: ''
 Upload File: ''
 Search in all assets library: ''
 Assets selected: ''
@@ -124,6 +83,7 @@ Delete Feature: ''
 Enable Infobox: インフォボックスを有効化
 Show infobox when the user clicks on a layer: フェーチャーをクリックした際にインフォボックスを表示
 Layer Style: レイヤースタイル
+Settings: 設定
 Add Layer from Resource: リソースからレイヤーを追加
 Add Sketch Layer: スケッチレイヤーを追加
 Layers: レイヤー
@@ -156,6 +116,7 @@ Publish your scene: シーンを公開する
 Update your story: ストーリーを更新する
 Update your scene: シーンを更新する
 Ok: 確認
+Cancel: キャンセル
 Your published story will be updated. This means all current changes will overwrite the current published story.: 公開されたストーリーが更新されます。公開されているストーリーへ現在の内容が上書きされます。
 Your published scene will be updated. This means all current changes will overwrite the current published scene.: 公開されたシーンが更新されます。公開されているシーンへ現在の内容が上書きされます。
 Your story will be published. This means anybody with the below URL will be able to view this story.: ストーリーが公開されます。URLを知っている人は誰でもこのストーリーを見ることができるようになります。
@@ -190,16 +151,6 @@ Align centered: 中央に配置
 Background color: 背景色
 Align System: アラインシステム
 Widget Manager: ウィジェット管理
-Please select an asset before clicking Select.: アセットを選んで「選択」をクリックしてください。
-Select Image: イメージ選択
-Select: 選択
-Sort By: 並び替え
-No assets match your search.: 検索条件に該当するアセットは見つかりませんでした。
-You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: アセットライブラリ
-Please select an layer style before clicking Select.: レイヤースタイルを選んで「選択」をクリックしてください。
-Select Layer Style: レイヤースタイル選択
-No layerStyle match your search.: 検索からレイヤースタイルを見つけられません。
-You haven't added any layerStyle yet. Click the add button in the bottom panel to get started.: レイヤースタイルをまだ作成していません。「レイヤースタイル」パネルの＋ボタンをクリックし作成してください。
 Project settings: プロジェクト設定
 Plugin: プラグイン
 Unknown: 不明
@@ -276,6 +227,7 @@ Angle: 角度
 Narrow: 狭い
 Wide: 広い
 Spacing settings: 余白設定
+Remove: 削除
 Block: ブロック
 Unsupported field type: サポートされていないフィールドタイプです
 Write your story :): ストーリーを書きましょう!
@@ -304,9 +256,37 @@ Subscript: 下付き文字
 Superscript: 上付き文字
 Clear Formatting: 書式をクリア
 'Sort:': ''
+Wrong file format: ファイルのフォーマットが異なります
+Not set: 未設定
 Position Capture: ''
+Latitude: 緯度
+Longitude: 経度
+Height: 高さ
+Current Position: 現地
+Current Rotation: 現在のローテーション
+Heading: ヘッディング
+Pitch: ピッチ
+Roll: ロール
+Camera Position Editor: カメラ位置の編集
+Location: 位置
 value: ''
+Rotation: ローテーション
+Position Set: 設定済み
+Edit: 編集
+Capture: キャプチャ
 Time Period Settings: ''
+'* Start Time': '* 開始時刻'
+Start time for the timeline: タイムラインの開始時刻
+'* Current Time': '* 現在時刻'
+Current time should be between start and end time: 現在時刻は開始時刻と終了時刻の間で設定してください
+'* End Time': '* 終了時刻'
+End time for the timeline: タイムラインの終了時刻
+Please make sure the Current time must between the Start time and End Time.: 現在時刻が開始時刻と終了時刻の間にあることを確認してください
+set: 設定
+Set Time: 時間設定
+Date: 時間帯
+Time: 時間
+Time Zone: 時間帯
 Failed to add one or more assets.: アセットの作成に失敗しました。
 Successfully added one or more assets.: アセットの追加に成功しました。
 Failed to delete one or more assets.: アセットの削除に失敗しまたした。

From ff375f489ee47724d230aa12bb61e49bb360f653 Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Fri, 30 Aug 2024 12:30:56 +0300
Subject: [PATCH 21/23] fix(web): support content input scroll (#1122)

---
 web/src/beta/lib/reearth-ui/components/TextArea/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx b/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
index eb287e1ed..d20dd092d 100644
--- a/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextArea/index.tsx
@@ -123,8 +123,7 @@ const StyledTextArea = styled.textarea<{
   minHeight: fonts.lineHeights.body * 2 + theme.spacing.smallest * 2,
   overflowX: "hidden",
   boxSizing: "border-box",
-  pointerEvents: disabled ? "none" : "inherit",
-  "::placeholder": {
+    "::placeholder": {
     color: theme.content.weak
   }
 }));

From 32b3be49b4c4f03c8bb776b5747f5a64e8cf14e7 Mon Sep 17 00:00:00 2001
From: tantaka tomokazu <tantaka.tomokazu@gmail.com>
Date: Mon, 2 Sep 2024 13:42:21 +0900
Subject: [PATCH 22/23] feat(server): Add new policy enforcement for visualizer
 (#1094)

---
 server/Makefile                               |  13 ++
 server/gql/workspace.graphql                  |   3 +
 server/internal/adapter/gql/generated.go      | 162 ++++++++++++++++++
 .../adapter/gql/gqlmodel/convert_workspace.go |   3 +
 .../gql/gqlmodel/convert_workspace_test.go    |   6 +
 .../adapter/gql/gqlmodel/models_gen.go        |   3 +
 .../infrastructure/memory/nlslayer.go         |  18 ++
 .../mongo/migration/migrations.go             |  14 +-
 .../infrastructure/mongo/mongodoc/config.go   |   8 +-
 .../infrastructure/mongo/mongodoc/policy.go   |   6 +
 .../internal/infrastructure/mongo/nlslayer.go |  12 ++
 .../internal/usecase/interactor/nlslayer.go   |  29 ++++
 .../usecase/interactor/storytelling.go        |  54 ++++++
 server/internal/usecase/repo/nlslayer.go      |   1 +
 server/pkg/config/config.go                   |   7 +-
 server/pkg/policy/policy.go                   |  18 ++
 server/pkg/policy/policy_test.go              |  56 +++++-
 web/src/services/gql/__gen__/graphql.ts       |   3 +
 18 files changed, 403 insertions(+), 13 deletions(-)

diff --git a/server/Makefile b/server/Makefile
index ed74ae719..ea89ff1ac 100644
--- a/server/Makefile
+++ b/server/Makefile
@@ -1,3 +1,16 @@
+help:
+	@echo "Usage:"
+	@echo "  make <target>"
+	@echo ""
+	@echo "Targets:"
+	@echo "  lint       Run golangci-lint with auto-fix"
+	@echo "  test       Run unit tests with race detector in short mode"
+	@echo "  e2e        Run end-to-end tests"
+	@echo "  build      Build the project"
+	@echo "  run-app    Run the application"
+	@echo "  run-db     Run the MongoDB database using Docker Compose"
+	@echo "  gql        Generate GraphQL code"
+
 lint:
 	golangci-lint run --fix
 
diff --git a/server/gql/workspace.graphql b/server/gql/workspace.graphql
index db61e612e..fa0c64bea 100644
--- a/server/gql/workspace.graphql
+++ b/server/gql/workspace.graphql
@@ -25,6 +25,9 @@ type Policy {
   assetStorageSize: FileSize
   datasetSchemaCount: Int
   datasetCount: Int
+  nlsLayersCount: Int
+  pageCount: Int
+  blocksCount: Int
 }
 
 enum Role {
diff --git a/server/internal/adapter/gql/generated.go b/server/internal/adapter/gql/generated.go
index ca41d29db..eb21021df 100644
--- a/server/internal/adapter/gql/generated.go
+++ b/server/internal/adapter/gql/generated.go
@@ -803,12 +803,15 @@ type ComplexityRoot struct {
 
 	Policy struct {
 		AssetStorageSize      func(childComplexity int) int
+		BlocksCount           func(childComplexity int) int
 		DatasetCount          func(childComplexity int) int
 		DatasetSchemaCount    func(childComplexity int) int
 		ID                    func(childComplexity int) int
 		LayerCount            func(childComplexity int) int
 		MemberCount           func(childComplexity int) int
 		Name                  func(childComplexity int) int
+		NlsLayersCount        func(childComplexity int) int
+		PageCount             func(childComplexity int) int
 		ProjectCount          func(childComplexity int) int
 		PublishedProjectCount func(childComplexity int) int
 	}
@@ -5528,6 +5531,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Policy.AssetStorageSize(childComplexity), true
 
+	case "Policy.blocksCount":
+		if e.complexity.Policy.BlocksCount == nil {
+			break
+		}
+
+		return e.complexity.Policy.BlocksCount(childComplexity), true
+
 	case "Policy.datasetCount":
 		if e.complexity.Policy.DatasetCount == nil {
 			break
@@ -5570,6 +5580,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Policy.Name(childComplexity), true
 
+	case "Policy.nlsLayersCount":
+		if e.complexity.Policy.NlsLayersCount == nil {
+			break
+		}
+
+		return e.complexity.Policy.NlsLayersCount(childComplexity), true
+
+	case "Policy.pageCount":
+		if e.complexity.Policy.PageCount == nil {
+			break
+		}
+
+		return e.complexity.Policy.PageCount(childComplexity), true
+
 	case "Policy.projectCount":
 		if e.complexity.Policy.ProjectCount == nil {
 			break
@@ -10601,6 +10625,9 @@ type Policy {
   assetStorageSize: FileSize
   datasetSchemaCount: Int
   datasetCount: Int
+  nlsLayersCount: Int
+  pageCount: Int
+  blocksCount: Int
 }
 
 enum Role {
@@ -38150,6 +38177,129 @@ func (ec *executionContext) fieldContext_Policy_datasetCount(ctx context.Context
 	return fc, nil
 }
 
+func (ec *executionContext) _Policy_nlsLayersCount(ctx context.Context, field graphql.CollectedField, obj *gqlmodel.Policy) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Policy_nlsLayersCount(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.NlsLayersCount, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*int)
+	fc.Result = res
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Policy_nlsLayersCount(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Policy",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Policy_pageCount(ctx context.Context, field graphql.CollectedField, obj *gqlmodel.Policy) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Policy_pageCount(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.PageCount, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*int)
+	fc.Result = res
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Policy_pageCount(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Policy",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Policy_blocksCount(ctx context.Context, field graphql.CollectedField, obj *gqlmodel.Policy) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Policy_blocksCount(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.BlocksCount, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*int)
+	fc.Result = res
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Policy_blocksCount(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Policy",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Polygon_type(ctx context.Context, field graphql.CollectedField, obj *gqlmodel.Polygon) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Polygon_type(ctx, field)
 	if err != nil {
@@ -52945,6 +53095,12 @@ func (ec *executionContext) fieldContext_Team_policy(ctx context.Context, field
 				return ec.fieldContext_Policy_datasetSchemaCount(ctx, field)
 			case "datasetCount":
 				return ec.fieldContext_Policy_datasetCount(ctx, field)
+			case "nlsLayersCount":
+				return ec.fieldContext_Policy_nlsLayersCount(ctx, field)
+			case "pageCount":
+				return ec.fieldContext_Policy_pageCount(ctx, field)
+			case "blocksCount":
+				return ec.fieldContext_Policy_blocksCount(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type Policy", field.Name)
 		},
@@ -70168,6 +70324,12 @@ func (ec *executionContext) _Policy(ctx context.Context, sel ast.SelectionSet, o
 			out.Values[i] = ec._Policy_datasetSchemaCount(ctx, field, obj)
 		case "datasetCount":
 			out.Values[i] = ec._Policy_datasetCount(ctx, field, obj)
+		case "nlsLayersCount":
+			out.Values[i] = ec._Policy_nlsLayersCount(ctx, field, obj)
+		case "pageCount":
+			out.Values[i] = ec._Policy_pageCount(ctx, field, obj)
+		case "blocksCount":
+			out.Values[i] = ec._Policy_blocksCount(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
diff --git a/server/internal/adapter/gql/gqlmodel/convert_workspace.go b/server/internal/adapter/gql/gqlmodel/convert_workspace.go
index 5b61e48f2..c008a15c6 100644
--- a/server/internal/adapter/gql/gqlmodel/convert_workspace.go
+++ b/server/internal/adapter/gql/gqlmodel/convert_workspace.go
@@ -72,5 +72,8 @@ func ToPolicy(p *policy.Policy) *Policy {
 		AssetStorageSize:      o.AssetStorageSize,
 		DatasetSchemaCount:    o.DatasetSchemaCount,
 		DatasetCount:          o.DatasetCount,
+		NlsLayersCount:        o.NLSLayersCount,
+		PageCount:             o.PageCount,
+		BlocksCount:           o.BlocksCount,
 	}
 }
diff --git a/server/internal/adapter/gql/gqlmodel/convert_workspace_test.go b/server/internal/adapter/gql/gqlmodel/convert_workspace_test.go
index db73784b2..587a66239 100644
--- a/server/internal/adapter/gql/gqlmodel/convert_workspace_test.go
+++ b/server/internal/adapter/gql/gqlmodel/convert_workspace_test.go
@@ -36,6 +36,9 @@ func TestToPolicy(t *testing.T) {
 		AssetStorageSize:      lo.ToPtr(int64(5)),
 		DatasetCount:          lo.ToPtr(6),
 		DatasetSchemaCount:    lo.ToPtr(7),
+		NlsLayersCount:        lo.ToPtr(8),
+		PageCount:             lo.ToPtr(9),
+		BlocksCount:           lo.ToPtr(6),
 	}, ToPolicy(policy.New(policy.Option{
 		ID:                    policy.ID("x"),
 		Name:                  "aaa",
@@ -46,6 +49,9 @@ func TestToPolicy(t *testing.T) {
 		AssetStorageSize:      lo.ToPtr(int64(5)),
 		DatasetCount:          lo.ToPtr(6),
 		DatasetSchemaCount:    lo.ToPtr(7),
+		NLSLayersCount:        lo.ToPtr(8),
+		PageCount:             lo.ToPtr(9),
+		BlocksCount:           lo.ToPtr(6),
 	})))
 	assert.Nil(t, ToPolicy(nil))
 }
diff --git a/server/internal/adapter/gql/gqlmodel/models_gen.go b/server/internal/adapter/gql/gqlmodel/models_gen.go
index a8b7dbf80..912e50954 100644
--- a/server/internal/adapter/gql/gqlmodel/models_gen.go
+++ b/server/internal/adapter/gql/gqlmodel/models_gen.go
@@ -1120,6 +1120,9 @@ type Policy struct {
 	AssetStorageSize      *int64 `json:"assetStorageSize,omitempty"`
 	DatasetSchemaCount    *int   `json:"datasetSchemaCount,omitempty"`
 	DatasetCount          *int   `json:"datasetCount,omitempty"`
+	NlsLayersCount        *int   `json:"nlsLayersCount,omitempty"`
+	PageCount             *int   `json:"pageCount,omitempty"`
+	BlocksCount           *int   `json:"blocksCount,omitempty"`
 }
 
 type Polygon struct {
diff --git a/server/internal/infrastructure/memory/nlslayer.go b/server/internal/infrastructure/memory/nlslayer.go
index 37bcc93e9..51e95c9e6 100644
--- a/server/internal/infrastructure/memory/nlslayer.go
+++ b/server/internal/infrastructure/memory/nlslayer.go
@@ -127,6 +127,24 @@ func (r *NLSLayer) FindNLSLayerSimpleByID(ctx context.Context, id id.NLSLayerID)
 	return nil, rerror.ErrNotFound
 }
 
+func (r *NLSLayer) CountByScene(_ context.Context, sid id.SceneID) (n int, _ error) {
+	r.lock.Lock()
+	defer r.lock.Unlock()
+
+	if !r.f.CanRead(sid) {
+		return
+	}
+
+	for _, d := range r.data {
+		if d.Scene() == sid {
+			if lg := nlslayer.ToNLSLayerGroup(d); lg == nil && !lg.IsRoot() {
+				n++
+			}
+		}
+	}
+	return
+}
+
 func (r *NLSLayer) Save(ctx context.Context, l nlslayer.NLSLayer) error {
 	if !r.f.CanWrite(l.Scene()) {
 		return repo.ErrOperationDenied
diff --git a/server/internal/infrastructure/mongo/migration/migrations.go b/server/internal/infrastructure/mongo/migration/migrations.go
index e6ccbc8e3..41741bbf9 100644
--- a/server/internal/infrastructure/mongo/migration/migrations.go
+++ b/server/internal/infrastructure/mongo/migration/migrations.go
@@ -10,11 +10,11 @@ import "github.com/reearth/reearthx/usecasex/migration"
 // If the migration takes too long, the deployment may fail in a serverless environment.
 // Set the batch size to as large a value as possible without using up the RAM of the deployment destination.
 var migrations = migration.Migrations[DBClient]{
-	201217132559: AddSceneWidgetId,
-	201217193948: AddSceneDefaultTile,
-	210310145844: RemovePreviewToken,
-	210730175108: AddSceneAlignSystem,
-	220214180713: SplitSchemaOfProperties,
-	220309174648: AddSceneFieldToPropertySchema,
-	221028204300: MoveTerrainProperties,
+  201217132559: AddSceneWidgetId,
+  201217193948: AddSceneDefaultTile,
+  210310145844: RemovePreviewToken,
+  210730175108: AddSceneAlignSystem,
+  220214180713: SplitSchemaOfProperties,
+  220309174648: AddSceneFieldToPropertySchema,
+  221028204300: MoveTerrainProperties,
 }
diff --git a/server/internal/infrastructure/mongo/mongodoc/config.go b/server/internal/infrastructure/mongo/mongodoc/config.go
index b12f0755e..ac7356032 100644
--- a/server/internal/infrastructure/mongo/mongodoc/config.go
+++ b/server/internal/infrastructure/mongo/mongodoc/config.go
@@ -18,8 +18,9 @@ type Auth struct {
 
 func NewConfig(c config.Config) ConfigDocument {
 	return ConfigDocument{
-		Migration: c.Migration,
-		Auth:      NewConfigAuth(c.Auth),
+		Migration:     c.Migration,
+		Auth:          NewConfigAuth(c.Auth),
+		DefaultPolicy: c.DefaultPolicy,
 	}
 }
 
@@ -39,7 +40,8 @@ func (c *ConfigDocument) Model() *config.Config {
 	}
 
 	cfg := &config.Config{
-		Migration: c.Migration,
+		Migration:     c.Migration,
+		DefaultPolicy: c.DefaultPolicy,
 	}
 
 	if c.Auth != nil {
diff --git a/server/internal/infrastructure/mongo/mongodoc/policy.go b/server/internal/infrastructure/mongo/mongodoc/policy.go
index 346bd7d59..838e9a926 100644
--- a/server/internal/infrastructure/mongo/mongodoc/policy.go
+++ b/server/internal/infrastructure/mongo/mongodoc/policy.go
@@ -15,6 +15,9 @@ type PolicyDocument struct {
 	DatasetCount          *int
 	DatasetSchemaCount    *int
 	AssetStorageSize      *int64
+	NLSLayersCount        *int
+	PageCount             *int
+	BlocksCount           *int
 }
 
 func (d PolicyDocument) Model() *policy.Policy {
@@ -28,6 +31,9 @@ func (d PolicyDocument) Model() *policy.Policy {
 		DatasetCount:          d.DatasetCount,
 		DatasetSchemaCount:    d.DatasetSchemaCount,
 		AssetStorageSize:      d.AssetStorageSize,
+		NLSLayersCount:        d.NLSLayersCount,
+		PageCount:             d.PageCount,
+		BlocksCount:           d.BlocksCount,
 	})
 }
 
diff --git a/server/internal/infrastructure/mongo/nlslayer.go b/server/internal/infrastructure/mongo/nlslayer.go
index 73c7281be..4203b6434 100644
--- a/server/internal/infrastructure/mongo/nlslayer.go
+++ b/server/internal/infrastructure/mongo/nlslayer.go
@@ -136,6 +136,18 @@ func (r *NLSLayer) FindByScene(ctx context.Context, id id.SceneID) (nlslayer.NLS
 	})
 }
 
+func (r *NLSLayer) CountByScene(ctx context.Context, sid id.SceneID) (int, error) {
+	if !r.f.CanRead(sid) {
+		return 0, repo.ErrOperationDenied
+	}
+
+	c, err := r.client.Count(ctx, bson.M{
+		"scene":      sid.String(),
+		"group.root": bson.M{"$ne": true},
+	})
+	return int(c), err
+}
+
 func (r *NLSLayer) Save(ctx context.Context, layer nlslayer.NLSLayer) error {
 	if !r.f.CanWrite(layer.Scene()) {
 		return repo.ErrOperationDenied
diff --git a/server/internal/usecase/interactor/nlslayer.go b/server/internal/usecase/interactor/nlslayer.go
index 689c10341..5b0d7c43b 100644
--- a/server/internal/usecase/interactor/nlslayer.go
+++ b/server/internal/usecase/interactor/nlslayer.go
@@ -13,6 +13,7 @@ import (
 	"github.com/reearth/reearth/server/pkg/nlslayer/nlslayerops"
 	"github.com/reearth/reearth/server/pkg/plugin"
 	"github.com/reearth/reearth/server/pkg/property"
+	"github.com/reearth/reearthx/account/accountusecase/accountrepo"
 	"github.com/reearth/reearthx/rerror"
 	"github.com/reearth/reearthx/usecasex"
 )
@@ -26,6 +27,8 @@ type NLSLayer struct {
 	sceneRepo     repo.Scene
 	propertyRepo  repo.Property
 	pluginRepo    repo.Plugin
+	policyRepo    repo.Policy
+	workspaceRepo accountrepo.Workspace
 	transaction   usecasex.Transaction
 }
 
@@ -38,6 +41,8 @@ func NewNLSLayer(r *repo.Container) interfaces.NLSLayer {
 		sceneRepo:       r.Scene,
 		propertyRepo:    r.Property,
 		pluginRepo:      r.Plugin,
+		policyRepo:      r.Policy,
+		workspaceRepo:   r.Workspace,
 		transaction:     r.Transaction,
 	}
 }
@@ -87,6 +92,30 @@ func (i *NLSLayer) AddLayerSimple(ctx context.Context, inp interfaces.AddNLSLaye
 		return nil, err
 	}
 
+	s, err := i.sceneRepo.FindByID(ctx, inp.SceneID)
+	if err != nil {
+		return nil, err
+	}
+
+	ws, err := i.workspaceRepo.FindByID(ctx, s.Workspace())
+	if err != nil {
+		return nil, err
+	}
+
+	if policyID := operator.Policy(ws.Policy()); policyID != nil {
+		p, err := i.policyRepo.FindByID(ctx, *policyID)
+		if err != nil {
+			return nil, err
+		}
+		s, err := i.nlslayerRepo.CountByScene(ctx, s.ID())
+		if err != nil {
+			return nil, err
+		}
+		if err := p.EnforceNLSLayersCount(s + 1); err != nil {
+			return nil, err
+		}
+	}
+
 	if inp.Schema != nil {
 		featureCollection := nlslayer.NewFeatureCollection(
 			"FeatureCollection",
diff --git a/server/internal/usecase/interactor/storytelling.go b/server/internal/usecase/interactor/storytelling.go
index b3a3b0980..4424644b0 100644
--- a/server/internal/usecase/interactor/storytelling.go
+++ b/server/internal/usecase/interactor/storytelling.go
@@ -464,6 +464,28 @@ func (i *Storytelling) CreatePage(ctx context.Context, inp interfaces.CreatePage
 		return nil, nil, err
 	}
 
+	s, err := i.sceneRepo.FindByID(ctx, inp.SceneID)
+	if err != nil {
+		return nil, nil, err
+	}
+
+	ws, err := i.workspaceRepo.FindByID(ctx, s.Workspace())
+	if err != nil {
+		return nil, nil, err
+	}
+
+	if policyID := op.Policy(ws.Policy()); policyID != nil {
+		p, err := i.policyRepo.FindByID(ctx, *policyID)
+		if err != nil {
+			return nil, nil, err
+		}
+
+		var pageCount = len(story.Pages().Pages())
+		if err := p.EnforcePageCount(pageCount + 1); err != nil {
+			return nil, nil, err
+		}
+	}
+
 	story.Pages().AddAt(page, inp.Index)
 
 	if err = i.propertyRepo.Save(ctx, prop); err != nil {
@@ -789,6 +811,38 @@ func (i *Storytelling) CreateBlock(ctx context.Context, inp interfaces.CreateBlo
 		return nil, nil, nil, -1, err
 	}
 
+	s, err := i.sceneRepo.FindByID(ctx, story.Scene())
+	if err != nil {
+		return nil, nil, nil, -1, err
+	}
+
+	ws, err := i.workspaceRepo.FindByID(ctx, s.Workspace())
+	if err != nil {
+		return nil, nil, nil, -1, err
+	}
+
+	if policyID := op.Policy(ws.Policy()); policyID != nil {
+		p, err := i.policyRepo.FindByID(ctx, *policyID)
+		if err != nil {
+			return nil, nil, nil, -1, err
+		}
+
+		story, err := i.storytellingRepo.FindByID(ctx, inp.StoryID)
+		if err != nil {
+			return nil, nil, nil, -1, err
+		}
+
+		page := story.Pages().Page(inp.PageID)
+		if page == nil {
+			return nil, nil, nil, -1, interfaces.ErrPageNotFound
+		}
+
+		var s = page.Count()
+		if err := p.EnforceBlocksCount(s + 1); err != nil {
+			return nil, nil, nil, -1, err
+		}
+	}
+
 	_, extension, err := i.getPlugin(ctx, &inp.PluginID, &inp.ExtensionID)
 	if err != nil {
 		return nil, nil, nil, -1, err
diff --git a/server/internal/usecase/repo/nlslayer.go b/server/internal/usecase/repo/nlslayer.go
index 5fca22260..44ca883ab 100644
--- a/server/internal/usecase/repo/nlslayer.go
+++ b/server/internal/usecase/repo/nlslayer.go
@@ -18,6 +18,7 @@ type NLSLayer interface {
 	FindParentByID(context.Context, id.NLSLayerID) (*nlslayer.NLSLayerGroup, error)
 	FindParentsByIDs(context.Context, id.NLSLayerIDList) (nlslayer.NLSLayerGroupList, error)
 	FindByScene(context.Context, id.SceneID) (nlslayer.NLSLayerList, error)
+	CountByScene(context.Context, id.SceneID) (int, error)
 	Save(context.Context, nlslayer.NLSLayer) error
 	SaveAll(context.Context, nlslayer.NLSLayerList) error
 	Remove(context.Context, id.NLSLayerID) error
diff --git a/server/pkg/config/config.go b/server/pkg/config/config.go
index d5745c317..9c005dc8a 100644
--- a/server/pkg/config/config.go
+++ b/server/pkg/config/config.go
@@ -2,11 +2,14 @@ package config
 
 import (
 	"sort"
+
+	"github.com/reearth/reearth/server/pkg/policy"
 )
 
 type Config struct {
-	Migration int64
-	Auth      *Auth
+	Migration     int64
+	Auth          *Auth
+	DefaultPolicy *policy.ID
 }
 
 type Auth struct {
diff --git a/server/pkg/policy/policy.go b/server/pkg/policy/policy.go
index eede59af5..17c68c084 100644
--- a/server/pkg/policy/policy.go
+++ b/server/pkg/policy/policy.go
@@ -25,6 +25,9 @@ type Option struct {
 	AssetStorageSize      *int64
 	DatasetSchemaCount    *int
 	DatasetCount          *int
+	NLSLayersCount        *int
+	PageCount             *int
+	BlocksCount           *int
 }
 
 func New(opts Option) *Policy {
@@ -71,6 +74,18 @@ func (p *Policy) EnforceDatasetCount(count int) error {
 	return p.error(p == nil || p.opts.DatasetCount == nil || *p.opts.DatasetCount >= count)
 }
 
+func (p *Policy) EnforceNLSLayersCount(count int) error {
+	return p.error(p == nil || p.opts.NLSLayersCount == nil || *p.opts.NLSLayersCount >= count)
+}
+
+func (p *Policy) EnforcePageCount(count int) error {
+	return p.error(p == nil || p.opts.PageCount == nil || *p.opts.PageCount >= count)
+}
+
+func (p *Policy) EnforceBlocksCount(count int) error {
+	return p.error(p == nil || p.opts.BlocksCount == nil || *p.opts.BlocksCount >= count)
+}
+
 func (*Policy) error(ok bool) error {
 	if !ok {
 		return ErrPolicyViolation
@@ -96,5 +111,8 @@ func (p Option) Clone() Option {
 		AssetStorageSize:      util.CloneRef(p.AssetStorageSize),
 		DatasetSchemaCount:    util.CloneRef(p.DatasetSchemaCount),
 		DatasetCount:          util.CloneRef(p.DatasetCount),
+		NLSLayersCount:        util.CloneRef(p.NLSLayersCount),
+		PageCount:             util.CloneRef(p.PageCount),
+		BlocksCount:           util.CloneRef(p.BlocksCount),
 	}
 }
diff --git a/server/pkg/policy/policy_test.go b/server/pkg/policy/policy_test.go
index 3fe0bcdb5..373865a6f 100644
--- a/server/pkg/policy/policy_test.go
+++ b/server/pkg/policy/policy_test.go
@@ -150,6 +150,57 @@ func TestPolicy_EnforceDatasetCount(t *testing.T) {
 	})
 }
 
+func TestPolicy_EnforceNLSLayersCount(t *testing.T) {
+	tests := []policyTest[int]{
+		{limit: 0, arg: 0, fail: false},
+		{limit: 1, arg: 0, fail: false},
+		{limit: 1, arg: 1, fail: false},
+		{limit: 1, arg: 2, fail: true},
+		{limitNil: true, arg: 100, fail: false},
+		{policyNil: true, arg: 100, fail: false},
+	}
+
+	testPolicy(t, tests, func(d int) Option {
+		return Option{NLSLayersCount: lo.ToPtr(d)}
+	}, func(p *Policy, a int) error {
+		return p.EnforceNLSLayersCount(a)
+	})
+}
+
+func TestPolicy_EnforcePageCount(t *testing.T) {
+	tests := []policyTest[int]{
+		{limit: 0, arg: 0, fail: false},
+		{limit: 1, arg: 0, fail: false},
+		{limit: 1, arg: 1, fail: false},
+		{limit: 1, arg: 2, fail: true},
+		{limitNil: true, arg: 100, fail: false},
+		{policyNil: true, arg: 100, fail: false},
+	}
+
+	testPolicy(t, tests, func(d int) Option {
+		return Option{PageCount: lo.ToPtr(d)}
+	}, func(p *Policy, a int) error {
+		return p.EnforcePageCount(a)
+	})
+}
+
+func TestPolicy_EnforceBlocksCount(t *testing.T) {
+	tests := []policyTest[int]{
+		{limit: 0, arg: 0, fail: false},
+		{limit: 1, arg: 0, fail: false},
+		{limit: 1, arg: 1, fail: false},
+		{limit: 1, arg: 2, fail: true},
+		{limitNil: true, arg: 100, fail: false},
+		{policyNil: true, arg: 100, fail: false},
+	}
+
+	testPolicy(t, tests, func(d int) Option {
+		return Option{BlocksCount: lo.ToPtr(d)}
+	}, func(p *Policy, a int) error {
+		return p.EnforceBlocksCount(a)
+	})
+}
+
 func testPolicy[T any](t *testing.T, tests []policyTest[T], f func(d T) Option, tf func(p *Policy, a T) error) {
 	t.Helper()
 	for _, tt := range tests {
@@ -191,7 +242,10 @@ func TestPolicy_Clone(t *testing.T) {
 			LayerCount:            lo.ToPtr(1),
 			AssetStorageSize:      lo.ToPtr(int64(1)),
 			DatasetSchemaCount:    lo.ToPtr(1),
-			DatasetCount:          lo.ToPtr(2),
+			DatasetCount:          lo.ToPtr(1),
+			NLSLayersCount:        lo.ToPtr(1),
+			PageCount:             lo.ToPtr(1),
+			BlocksCount:           lo.ToPtr(1),
 		},
 	}
 	got := p.Clone()
diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts
index da41a8249..4678eab41 100644
--- a/web/src/services/gql/__gen__/graphql.ts
+++ b/web/src/services/gql/__gen__/graphql.ts
@@ -1742,12 +1742,15 @@ export type Point = {
 export type Policy = {
   __typename?: 'Policy';
   assetStorageSize?: Maybe<Scalars['FileSize']['output']>;
+  blocksCount?: Maybe<Scalars['Int']['output']>;
   datasetCount?: Maybe<Scalars['Int']['output']>;
   datasetSchemaCount?: Maybe<Scalars['Int']['output']>;
   id: Scalars['ID']['output'];
   layerCount?: Maybe<Scalars['Int']['output']>;
   memberCount?: Maybe<Scalars['Int']['output']>;
   name: Scalars['String']['output'];
+  nlsLayersCount?: Maybe<Scalars['Int']['output']>;
+  pageCount?: Maybe<Scalars['Int']['output']>;
   projectCount?: Maybe<Scalars['Int']['output']>;
   publishedProjectCount?: Maybe<Scalars['Int']['output']>;
 };

From 4e8cec9ed65108d2147b4b65d2199dd7d22c0356 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 2 Sep 2024 16:59:39 +0800
Subject: [PATCH 23/23] chore(web): update package.json version (#1123)

---
 web/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/package.json b/web/package.json
index ae4d5e771..8e8def855 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@reearth/visualizer",
-    "version": "1.0.0-alpha.2",
+    "version": "1.0.0-alpha.3",
     "repository": "https://github.com/reearth/reearth-visualizer.git",
     "author": "Re:Earth contributors <community@reearth.io>",
     "license": "Apache-2.0",