From bb221109f1ce332336e2c92fceed526481b0a61e Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Wed, 25 Sep 2024 13:29:32 +0800
Subject: [PATCH 1/7] refactor: support edit sketch geometry on editor

---
 .../LayerInspector/FeatureInspector/index.tsx |  71 ++++++++--
 .../InspectorPanel/LayerInspector/index.tsx   |  24 +++-
 .../Editor/Map/InspectorPanel/index.tsx       |  10 +-
 web/src/beta/features/Editor/Map/context.tsx  |   6 +-
 .../beta/features/Editor/Visualizer/index.tsx |   6 +
 web/src/beta/features/Editor/hooks/index.ts   |  28 +++-
 .../beta/features/Editor/hooks/useSketch.ts   | 131 +++++++++++++++---
 web/src/beta/features/Editor/index.tsx        |   7 +-
 .../Visualizer/Crust/Plugins/hooks/index.ts   |   2 +
 .../Crust/Plugins/hooks/useSketch.ts          |  19 ++-
 .../Crust/Plugins/pluginAPI/types/sketch.ts   |   1 +
 .../Visualizer/Crust/Plugins/types.ts         |   1 +
 .../beta/features/Visualizer/Crust/index.tsx  |   2 +
 web/src/beta/features/Visualizer/index.tsx    |   6 +
 14 files changed, 270 insertions(+), 44 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 ccba0c1f1d..ded4c43b88 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
@@ -25,6 +25,10 @@ type Props = {
   sketchFeature?: SketchFeature;
   onGeoJsonFeatureUpdate?: (inp: GeoJsonFeatureUpdateProps) => void;
   onGeoJsonFeatureDelete?: (inp: GeoJsonFeatureDeleteProps) => void;
+  isEditingGeometry?: boolean;
+  onSketchGeometryEditStart?: () => void;
+  onSketchGeometryEditApply?: () => void;
+  onSketchGeometryEditCancel?: () => void;
 };
 
 export type ValueProp = string | number | boolean | undefined;
@@ -40,7 +44,11 @@ const FeatureData: FC<Props> = ({
   layer,
   sketchFeature,
   onGeoJsonFeatureUpdate,
-  onGeoJsonFeatureDelete
+  onGeoJsonFeatureDelete,
+  isEditingGeometry,
+  onSketchGeometryEditStart,
+  onSketchGeometryEditApply,
+  onSketchGeometryEditCancel
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -110,6 +118,7 @@ const FeatureData: FC<Props> = ({
       newProperties,
       ...fields.map((f) => ({ [f.title]: f.value }))
     );
+
     onGeoJsonFeatureUpdate?.({
       layerId: layer.id,
       featureId: sketchFeature.id,
@@ -144,6 +153,44 @@ const FeatureData: FC<Props> = ({
 
   return (
     <Wrapper>
+      {!!layer?.isSketch && sketchFeature?.id && (
+        <SketchFeatureButtons>
+          <GeometryEditButtons>
+            {isEditingGeometry ? (
+              <>
+                <Button
+                  onClick={onSketchGeometryEditApply}
+                  size="small"
+                  icon="check"
+                  appearance="primary"
+                  extendWidth
+                />
+                <Button
+                  onClick={onSketchGeometryEditCancel}
+                  size="small"
+                  icon="close"
+                  extendWidth
+                />
+              </>
+            ) : (
+              <Button
+                onClick={onSketchGeometryEditStart}
+                size="small"
+                icon="pencilLine"
+                extendWidth
+              />
+            )}
+          </GeometryEditButtons>
+          {!isEditingGeometry && (
+            <Button
+              onClick={handleDeleteSketchFeature}
+              size="small"
+              icon="trash"
+              extendWidth
+            />
+          )}
+        </SketchFeatureButtons>
+      )}
       {!!layer?.isSketch && (
         <Collapse
           title={t("Custom Properties")}
@@ -208,15 +255,6 @@ const FeatureData: FC<Props> = ({
           />
         </ValueWrapper>
       </Collapse>
-      {!!layer?.isSketch && sketchFeature?.id && (
-        <Button
-          title={t("Delete Feature")}
-          onClick={handleDeleteSketchFeature}
-          size="small"
-          icon="trash"
-          extendWidth
-        />
-      )}
     </Wrapper>
   );
 };
@@ -244,3 +282,16 @@ const ValueWrapper = styled("div")(({ theme }) => ({
   background: theme.bg[1],
   padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`
 }));
+
+const SketchFeatureButtons = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  gap: theme.spacing.small
+}));
+
+const GeometryEditButtons = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "row",
+  gap: theme.spacing.small
+}));
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 f1a88de2a2..20e3801afc 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
@@ -4,6 +4,7 @@ import {
   GeoJsonFeatureUpdateProps
 } from "@reearth/beta/features/Editor/hooks/useSketch";
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
+import { SketchEditingFeature } from "@reearth/core";
 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";
@@ -26,6 +27,10 @@ type Props = {
   onLayerConfigUpdate?: (inp: LayerConfigUpdateProps) => void;
   onGeoJsonFeatureUpdate?: (inp: GeoJsonFeatureUpdateProps) => void;
   onGeoJsonFeatureDelete?: (inp: GeoJsonFeatureDeleteProps) => void;
+  sketchEditingFeature?: SketchEditingFeature;
+  onSketchGeometryEditStart?: () => void;
+  onSketchGeometryEditCancel?: () => void;
+  onSketchGeometryEditApply?: () => void;
 };
 
 const InspectorTabs: FC<Props> = ({
@@ -35,7 +40,11 @@ const InspectorTabs: FC<Props> = ({
   sceneId,
   onLayerConfigUpdate,
   onGeoJsonFeatureUpdate,
-  onGeoJsonFeatureDelete
+  onGeoJsonFeatureDelete,
+  sketchEditingFeature,
+  onSketchGeometryEditStart,
+  onSketchGeometryEditCancel,
+  onSketchGeometryEditApply
 }) => {
   const selectedFeature = useMemo(() => {
     if (!selectedLayer?.computedFeature?.id) return;
@@ -87,8 +96,15 @@ const InspectorTabs: FC<Props> = ({
             selectedFeature={selectedFeature}
             layer={selectedLayer?.layer}
             sketchFeature={selectedSketchFeature}
+            isEditingGeometry={
+              selectedSketchFeature?.properties?.id ===
+              sketchEditingFeature?.feature?.id
+            }
             onGeoJsonFeatureUpdate={onGeoJsonFeatureUpdate}
             onGeoJsonFeatureDelete={onGeoJsonFeatureDelete}
+            onSketchGeometryEditStart={onSketchGeometryEditStart}
+            onSketchGeometryEditApply={onSketchGeometryEditApply}
+            onSketchGeometryEditCancel={onSketchGeometryEditCancel}
           />
         )
       },
@@ -125,7 +141,11 @@ const InspectorTabs: FC<Props> = ({
       sceneId,
       onLayerConfigUpdate,
       onGeoJsonFeatureUpdate,
-      onGeoJsonFeatureDelete
+      onGeoJsonFeatureDelete,
+      sketchEditingFeature,
+      onSketchGeometryEditStart,
+      onSketchGeometryEditCancel,
+      onSketchGeometryEditApply
     ]
   );
 
diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
index f42c37cca3..c76a657d86 100644
--- a/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
+++ b/web/src/beta/features/Editor/Map/InspectorPanel/index.tsx
@@ -18,10 +18,14 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
     selectedSceneSetting,
     sceneSettings,
     selectedLayer,
+    sketchEditingFeature,
     handleFlyTo,
     handleLayerConfigUpdate,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete
+    handleGeoJsonFeatureDelete,
+    handleSketchGeometryEditStart,
+    handleSketchGeometryEditCancel,
+    handleSketchGeometryEditApply
   } = useMapPage();
 
   const t = useT();
@@ -57,6 +61,10 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
           onLayerConfigUpdate={handleLayerConfigUpdate}
           onGeoJsonFeatureUpdate={handleGeoJsonFeatureUpdate}
           onGeoJsonFeatureDelete={handleGeoJsonFeatureDelete}
+          sketchEditingFeature={sketchEditingFeature}
+          onSketchGeometryEditStart={handleSketchGeometryEditStart}
+          onSketchGeometryEditCancel={handleSketchGeometryEditCancel}
+          onSketchGeometryEditApply={handleSketchGeometryEditApply}
         />
       )}
     </Panel>
diff --git a/web/src/beta/features/Editor/Map/context.tsx b/web/src/beta/features/Editor/Map/context.tsx
index a0c20320ad..b87ebe349d 100644
--- a/web/src/beta/features/Editor/Map/context.tsx
+++ b/web/src/beta/features/Editor/Map/context.tsx
@@ -1,5 +1,5 @@
 import { AreaSize } from "@reearth/beta/ui/layout";
-import { FlyTo, SketchType } from "@reearth/core";
+import { FlyTo, SketchEditingFeature, SketchType } from "@reearth/core";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { Item } from "@reearth/services/api/propertyApi/utils";
@@ -48,6 +48,10 @@ export interface MapPageContextType {
   sketchEnabled: boolean;
   sketchType: SketchType | undefined;
   handleSketchTypeChange: (type: SketchType | undefined) => void;
+  sketchEditingFeature?: SketchEditingFeature;
+  handleSketchGeometryEditStart: () => void;
+  handleSketchGeometryEditCancel: () => void;
+  handleSketchGeometryEditApply: () => void;
   sceneSettings?: Item[];
   layerStyles?: LayerStyle[];
   sceneId?: string;
diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx
index 56855a8a9f..4e5a603e86 100644
--- a/web/src/beta/features/Editor/Visualizer/index.tsx
+++ b/web/src/beta/features/Editor/Visualizer/index.tsx
@@ -32,8 +32,10 @@ export type Props = {
   onStoryBlockMove: (id: string, targetId: number, blockId: string) => void;
   onSketchTypeChange?: (type: SketchType | undefined) => void;
   onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureUpdate?: (feature: SketchFeature | null) => void;
   onVisualizerReady: (value: boolean) => void;
   onCoreLayerSelect: (props: LayerSelectProps) => void;
+  onCoreAPIReady?: () => void;
   setSelectedStoryPageId: (value: string | undefined) => void;
   selectWidgetArea: (
     update?: SetStateAction<WidgetAreaState | undefined>
@@ -57,8 +59,10 @@ const EditorVisualizer: React.FC<Props> = ({
   onStoryBlockMove: handleStoryBlockMove,
   onSketchTypeChange,
   onSketchFeatureCreate,
+  onSketchFeatureUpdate,
   onVisualizerReady,
   onCoreLayerSelect,
+  onCoreAPIReady,
   setSelectedStoryPageId,
   selectWidgetArea
 }) => {
@@ -126,7 +130,9 @@ const EditorVisualizer: React.FC<Props> = ({
       handleZoomToLayer={zoomToLayer}
       handleSketchTypeChange={onSketchTypeChange}
       handleSketchFeatureCreate={onSketchFeatureCreate}
+      handleSketchFeatureUpdate={onSketchFeatureUpdate}
       handleMount={handleMount}
+      handleCoreAPIReady={onCoreAPIReady}
       // story
       showStoryPanel={showStoryPanel}
       storyPanelRef={storyPanelRef}
diff --git a/web/src/beta/features/Editor/hooks/index.ts b/web/src/beta/features/Editor/hooks/index.ts
index 016b3d411b..7a24d899b0 100644
--- a/web/src/beta/features/Editor/hooks/index.ts
+++ b/web/src/beta/features/Editor/hooks/index.ts
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import { Tab } from "../../Navbar";
 import { MapPageContextType } from "../Map/context";
@@ -59,13 +59,19 @@ export default ({ sceneId, projectId, tab }: Props) => {
   const {
     handleSketchTypeChange,
     handleSketchFeatureCreate,
+    handleSketchFeatureUpdate,
     sketchType,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete
+    handleGeoJsonFeatureDelete,
+    sketchEditingFeature,
+    handleSketchGeometryEditStart,
+    handleSketchGeometryEditCancel,
+    handleSketchGeometryEditApply,
+    initSketch
   } = useSketch({
     tab,
     nlsLayers,
-    selectedLayer: selectedLayer?.layer,
+    selectedLayer,
     ignoreCoreLayerUnselect,
     visualizerRef
   });
@@ -162,6 +168,10 @@ export default ({ sceneId, projectId, tab }: Props) => {
       sketchEnabled: !!selectedLayer?.layer?.isSketch,
       sketchType,
       handleSketchTypeChange,
+      sketchEditingFeature,
+      handleSketchGeometryEditStart,
+      handleSketchGeometryEditCancel,
+      handleSketchGeometryEditApply,
       sceneSettings,
       layerStyles,
       sceneId,
@@ -198,6 +208,10 @@ export default ({ sceneId, projectId, tab }: Props) => {
       handleFlyTo,
       sketchType,
       handleSketchTypeChange,
+      sketchEditingFeature,
+      handleSketchGeometryEditStart,
+      handleSketchGeometryEditCancel,
+      handleSketchGeometryEditApply,
       sceneSettings,
       layerStyles,
       sceneId,
@@ -297,6 +311,10 @@ export default ({ sceneId, projectId, tab }: Props) => {
     ]
   );
 
+  const handleCoreAPIReady = useCallback(() => {
+    initSketch();
+  }, [initSketch]);
+
   return {
     visualizerSize,
     isVisualizerResizing,
@@ -311,6 +329,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleStoryBlockMove,
     handleSketchTypeChange,
     handleSketchFeatureCreate,
+    handleSketchFeatureUpdate,
     handleIsVisualizerUpdate,
     handleCoreLayerSelectFromUI,
     selectStoryPage,
@@ -329,6 +348,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     layerStyles,
     layers: nlsLayers,
     layerId,
-    handleCustomPropertySchemaUpdate
+    handleCustomPropertySchemaUpdate,
+    handleCoreAPIReady
   };
 };
diff --git a/web/src/beta/features/Editor/hooks/useSketch.ts b/web/src/beta/features/Editor/hooks/useSketch.ts
index 656500ab4c..f94d2a067b 100644
--- a/web/src/beta/features/Editor/hooks/useSketch.ts
+++ b/web/src/beta/features/Editor/hooks/useSketch.ts
@@ -1,5 +1,10 @@
 import { MapRef } from "@reearth/beta/features/Visualizer/Crust/types";
-import { SketchFeature, SketchType, Geometry } from "@reearth/core";
+import {
+  SketchFeature,
+  SketchType,
+  Geometry,
+  SketchEditingFeature
+} from "@reearth/core";
 import { useFeatureCollectionFetcher } from "@reearth/services/api";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import {
@@ -12,10 +17,12 @@ import {
 
 import { Tab } from "../../Navbar";
 
+import { SelectedLayer } from "./useLayers";
+
 type Props = {
   tab: Tab;
   nlsLayers: NLSLayer[];
-  selectedLayer: NLSLayer | undefined;
+  selectedLayer: SelectedLayer | undefined;
   visualizerRef: MutableRefObject<MapRef | null>;
   ignoreCoreLayerUnselect: MutableRefObject<boolean>;
 };
@@ -73,7 +80,7 @@ export default ({
 
   const handleSketchLayerAdd = useCallback(
     async (inp: FeatureProps) => {
-      if (!selectedLayer?.id) return;
+      if (!selectedLayer?.layer?.id) return;
       await useAddGeoJsonFeature({
         layerId: inp.layerId,
         geometry: inp.geometry,
@@ -87,45 +94,39 @@ export default ({
   const handleSketchFeatureCreate = useCallback(
     async (feature: SketchFeature | null) => {
       // TODO: create a new layer if there is no selected sketch layer
-      if (!feature || !selectedLayer?.id || !selectedLayer.isSketch) return;
+      if (
+        !feature ||
+        !selectedLayer?.layer?.id ||
+        !selectedLayer?.layer?.isSketch
+      )
+        return;
 
       await handleSketchLayerAdd({
         type: feature.type,
-        layerId: selectedLayer?.id,
+        layerId: selectedLayer?.layer?.id,
         properties: { ...feature.properties },
         geometry: feature.geometry
       });
 
       pendingSketchSelectionRef.current = {
-        layerId: selectedLayer.id,
+        layerId: selectedLayer.layer?.id,
         featureId: feature.properties.id
       };
 
       ignoreCoreLayerUnselect.current = true;
     },
-    [
-      selectedLayer?.id,
-      selectedLayer?.isSketch,
-      ignoreCoreLayerUnselect,
-      handleSketchLayerAdd
-    ]
+    [selectedLayer?.layer, ignoreCoreLayerUnselect, handleSketchLayerAdd]
   );
 
   useEffect(() => {
+    // Workaround: in order to show the indicator of the selected sketch feature we need to unselect it first.
+    visualizerRef?.current?.layers.select(undefined);
     // 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;
-        const layer = visualizerRef?.current?.layers
-          ?.layers?.()
-          ?.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);
-        }
+        visualizerRef?.current?.layers.selectFeature(layerId, featureId);
         pendingSketchSelectionRef.current = undefined;
         ignoreCoreLayerUnselect.current = false;
       }
@@ -142,7 +143,7 @@ export default ({
   }, [tab, handleSketchTypeChange]);
 
   useEffect(() => {
-    if (!selectedLayer?.isSketch) {
+    if (!selectedLayer?.layer?.isSketch) {
       handleSketchTypeChange(undefined);
     }
   }, [selectedLayer, handleSketchTypeChange]);
@@ -174,11 +175,95 @@ export default ({
     [useDeleteGeoJSONFeature]
   );
 
+  const handleSketchFeatureUpdate = useCallback(
+    async (feature: SketchFeature | null) => {
+      if (
+        !selectedLayer?.layer?.id ||
+        !selectedLayer?.computedFeature?.id ||
+        !selectedLayer.computedFeature.id !== !feature?.properties?.id ||
+        !feature
+      )
+        return;
+
+      const featureDataId =
+        selectedLayer.layer?.sketch?.featureCollection?.features?.find(
+          (f) => f.properties.id === feature.properties.id
+        )?.id;
+
+      if (!featureDataId) return;
+
+      await handleGeoJsonFeatureUpdate({
+        layerId: selectedLayer.layer.id,
+        featureId: featureDataId,
+        geometry: feature.geometry,
+        properties: {
+          ...selectedLayer.computedFeature.properties,
+          ...feature.properties
+        }
+      });
+
+      pendingSketchSelectionRef.current = {
+        layerId: selectedLayer.layer.id,
+        featureId: feature.properties.id
+      };
+    },
+    [selectedLayer, handleGeoJsonFeatureUpdate]
+  );
+
+  const [sketchEditingFeature, setSketchEditingFeatrue] = useState<
+    SketchEditingFeature | undefined
+  >();
+
+  const handleEditSketchFeature = useCallback(() => {
+    if (
+      !selectedLayer?.layer?.id ||
+      !selectedLayer?.computedFeature?.id ||
+      !selectedLayer?.layer?.isSketch
+    )
+      return;
+    visualizerRef.current?.sketch.editFeature({
+      layerId: selectedLayer.layer.id,
+      feature: selectedLayer.computedFeature
+    });
+  }, [visualizerRef, selectedLayer]);
+
+  const handleCancelEditSketchFeature = useCallback(() => {
+    visualizerRef.current?.sketch.cancelEdit();
+  }, [visualizerRef]);
+
+  const handleApplyEditSketchFeature = useCallback(() => {
+    visualizerRef.current?.sketch.applyEdit();
+  }, [visualizerRef]);
+
+  const initSketch = useCallback(() => {
+    visualizerRef.current?.sketch.overrideOptions({
+      dataOnly: true
+    });
+    visualizerRef.current?.sketch.onEditFeatureChange(setSketchEditingFeatrue);
+  }, [visualizerRef]);
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     visualizerRef.current?.sketch.overrideOptions({
+  //       dataOnly: true
+  //     });
+  //     visualizerRef.current?.sketch.onEditFeatureChange(
+  //       setSketchEditingFeatrue
+  //     );
+  //   }, 1000);
+  // }, [visualizerRef]);
+
   return {
     sketchType,
+    sketchEditingFeature,
     handleSketchTypeChange,
     handleSketchFeatureCreate,
+    handleSketchFeatureUpdate,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete
+    handleGeoJsonFeatureDelete,
+    handleSketchGeometryEditStart: handleEditSketchFeature,
+    handleSketchGeometryEditCancel: handleCancelEditSketchFeature,
+    handleSketchGeometryEditApply: handleApplyEditSketchFeature,
+    initSketch
   };
 };
diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
index 3d220e342a..3bcc596d1f 100644
--- a/web/src/beta/features/Editor/index.tsx
+++ b/web/src/beta/features/Editor/index.tsx
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import { Provider as DndProvider } from "@reearth/beta/utils/use-dnd";
 import { FC } from "react";
 
-
 import Navbar, { Tab } from "../Navbar";
 
 import useHooks from "./hooks";
@@ -41,6 +40,7 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     handleStoryBlockMove,
     handleSketchTypeChange,
     handleSketchFeatureCreate,
+    handleSketchFeatureUpdate,
     handleIsVisualizerUpdate,
     handleCoreLayerSelectFromUI,
     selectStoryPage,
@@ -59,7 +59,8 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     layerStyles,
     layers,
     layerId,
-    handleCustomPropertySchemaUpdate
+    handleCustomPropertySchemaUpdate,
+    handleCoreAPIReady
   } = useHooks({ sceneId, tab, projectId });
 
   // TODO remove DndProvider, use DragAndDropContext instead
@@ -89,8 +90,10 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
               onStoryBlockMove={handleStoryBlockMove}
               onSketchTypeChange={handleSketchTypeChange}
               onSketchFeatureCreate={handleSketchFeatureCreate}
+              onSketchFeatureUpdate={handleSketchFeatureUpdate}
               onVisualizerReady={handleIsVisualizerUpdate}
               onCoreLayerSelect={handleCoreLayerSelectFromUI}
+              onCoreAPIReady={handleCoreAPIReady}
               setSelectedStoryPageId={selectStoryPage}
               selectWidgetArea={selectWidgetArea}
             />
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 58a83c5088..3f508f637e 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts
@@ -33,6 +33,7 @@ export default function ({
   onLayerSelectWithRectMove,
   onLayerSelectWithRectEnd,
   onSketchPluginFeatureCreate,
+  onSketchPluginFeatureUpdate,
   onSketchTypeChange,
   onLayerVisibility,
   onLayerLoad,
@@ -142,6 +143,7 @@ export default function ({
   } = useSketch({
     mapRef,
     onSketchPluginFeatureCreate,
+    onSketchPluginFeatureUpdate,
     onSketchTypeChange
   });
 
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 fb26640742..53312794de 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/hooks/useSketch.ts
@@ -8,10 +8,14 @@ import { events } from "../utils/events";
 export default ({
   mapRef,
   onSketchPluginFeatureCreate,
+  onSketchPluginFeatureUpdate,
   onSketchTypeChange
 }: Pick<
   Props,
-  "mapRef" | "onSketchPluginFeatureCreate" | "onSketchTypeChange"
+  | "mapRef"
+  | "onSketchPluginFeatureCreate"
+  | "onSketchPluginFeatureUpdate"
+  | "onSketchTypeChange"
 >) => {
   const getSketchTool = useCallback(
     () => mapRef?.current?.sketch?.getType(),
@@ -50,6 +54,19 @@ export default ({
     }
   }, [emit, onSketchPluginFeatureCreate]);
 
+  const sketchPluginFeatureUpdateEventBinded = useRef(false);
+  useEffect(() => {
+    if (
+      !sketchPluginFeatureUpdateEventBinded.current &&
+      onSketchPluginFeatureUpdate
+    ) {
+      onSketchPluginFeatureUpdate?.((e) => {
+        emit("update", e);
+      });
+      sketchPluginFeatureUpdateEventBinded.current = true;
+    }
+  }, [emit, onSketchPluginFeatureUpdate]);
+
   const sketchTypeChangeEventBinded = useRef(false);
   useEffect(() => {
     if (!sketchTypeChangeEventBinded.current && onSketchTypeChange) {
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 e95145974e..ca1fdf4f2c 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
@@ -38,6 +38,7 @@ export declare type SketchOptions = {
 
 export declare type SketchEventType = {
   create: [props: SketchEventProps];
+  update: [props: SketchEventProps];
   toolChange: [props: SketchType | undefined];
 };
 
diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
index 0d891b85da..67bbb47a6c 100644
--- a/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
+++ b/web/src/beta/features/Visualizer/Crust/Plugins/types.ts
@@ -61,6 +61,7 @@ export type Props = PropsWithChildren<{
   ) => void;
   onLayerSelectWithRectEnd?: (cb: (e: LayerSelectWithRectEnd) => void) => void;
   onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;
+  onSketchPluginFeatureUpdate?: (cb: SketchEventCallback) => void;
   onSketchTypeChange?: (cb: (type: SketchType | undefined) => void) => void;
   onLayerVisibility?: (cb: (e: LayerVisibilityEvent) => void) => void;
   onLayerLoad?: (cb: (e: LayerLoadEvent) => void) => void;
diff --git a/web/src/beta/features/Visualizer/Crust/index.tsx b/web/src/beta/features/Visualizer/Crust/index.tsx
index 6a3072e359..b04522e110 100644
--- a/web/src/beta/features/Visualizer/Crust/index.tsx
+++ b/web/src/beta/features/Visualizer/Crust/index.tsx
@@ -207,6 +207,7 @@ export default function Crust({
     onLayerEdit,
     handleInteractionModeChange,
     onSketchPluginFeatureCreate,
+    onSketchPluginFeatureUpdate,
     onSketchTypeChange,
     onLayerVisibility,
     onLayerLoad,
@@ -278,6 +279,7 @@ export default function Crust({
       onLayerSelectWithRectMove={onLayerSelectWithRectMove}
       onLayerSelectWithRectEnd={onLayerSelectWithRectEnd}
       onSketchPluginFeatureCreate={onSketchPluginFeatureCreate}
+      onSketchPluginFeatureUpdate={onSketchPluginFeatureUpdate}
       onLayerVisibility={onLayerVisibility}
       onLayerLoad={onLayerLoad}
       onSketchTypeChange={onSketchTypeChange}
diff --git a/web/src/beta/features/Visualizer/index.tsx b/web/src/beta/features/Visualizer/index.tsx
index ad7ca081e2..460c292967 100644
--- a/web/src/beta/features/Visualizer/index.tsx
+++ b/web/src/beta/features/Visualizer/index.tsx
@@ -73,7 +73,9 @@ type VisualizerProps = {
   handleZoomToLayer?: (layerId: string | undefined) => void;
   handleSketchTypeChange?: (type: SketchType | undefined) => void;
   handleSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  handleSketchFeatureUpdate?: (feature: SketchFeature | null) => void;
   handleMount?: () => void;
+  handleCoreAPIReady?: () => void;
   //
   widgetThemeOptions?: WidgetThemeOptions;
   widgetAlignEditorActivated?: boolean;
@@ -172,7 +174,9 @@ const Visualizer: FC<VisualizerProps> = ({
   handleZoomToLayer,
   handleSketchTypeChange,
   handleSketchFeatureCreate,
+  handleSketchFeatureUpdate,
   handleMount,
+  handleCoreAPIReady,
   // story
   showStoryPanel,
   storyPanelRef,
@@ -235,7 +239,9 @@ const Visualizer: FC<VisualizerProps> = ({
         onZoomToLayer={handleZoomToLayer}
         onSketchTypeChangeProp={handleSketchTypeChange}
         onSketchFeatureCreate={handleSketchFeatureCreate}
+        onSketchFeatureUpdate={handleSketchFeatureUpdate}
         onMount={handleMount}
+        onAPIReady={handleCoreAPIReady}
       >
         <Crust
           engineName={engine}

From e0e927bb79f827b99c51f5aee3a4bed93e08fe1c Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Tue, 1 Oct 2024 15:40:42 +0800
Subject: [PATCH 2/7] refactor: logic updates

---
 web/src/beta/features/Editor/hooks/index.ts   |  4 ++-
 .../beta/features/Editor/hooks/useSketch.ts   | 28 +++++--------------
 web/src/beta/features/Editor/hooks/useUI.ts   | 28 +++++++++++++++++--
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/web/src/beta/features/Editor/hooks/index.ts b/web/src/beta/features/Editor/hooks/index.ts
index 7a24d899b0..6253d6dd89 100644
--- a/web/src/beta/features/Editor/hooks/index.ts
+++ b/web/src/beta/features/Editor/hooks/index.ts
@@ -116,7 +116,9 @@ export default ({ sceneId, projectId, tab }: Props) => {
     tab,
     handleLayerSelect,
     handleCoreLayerSelect,
-    handleSceneSettingSelect
+    handleSceneSettingSelect,
+    handleSketchTypeChange,
+    handleSketchGeometryEditCancel
   });
 
   const {
diff --git a/web/src/beta/features/Editor/hooks/useSketch.ts b/web/src/beta/features/Editor/hooks/useSketch.ts
index f94d2a067b..18685d3d74 100644
--- a/web/src/beta/features/Editor/hooks/useSketch.ts
+++ b/web/src/beta/features/Editor/hooks/useSketch.ts
@@ -139,15 +139,9 @@ export default ({
   ]);
 
   useEffect(() => {
-    handleSketchTypeChange(undefined);
+    handleSketchTypeChange(undefined, "editor");
   }, [tab, handleSketchTypeChange]);
 
-  useEffect(() => {
-    if (!selectedLayer?.layer?.isSketch) {
-      handleSketchTypeChange(undefined);
-    }
-  }, [selectedLayer, handleSketchTypeChange]);
-
   const handleGeoJsonFeatureUpdate = useCallback(
     async (inp: GeoJsonFeatureUpdateProps) => {
       await useUpdateGeoJSONFeature({
@@ -227,9 +221,12 @@ export default ({
     });
   }, [visualizerRef, selectedLayer]);
 
-  const handleCancelEditSketchFeature = useCallback(() => {
-    visualizerRef.current?.sketch.cancelEdit();
-  }, [visualizerRef]);
+  const handleCancelEditSketchFeature = useCallback(
+    (ignoreAutoReSelect?: boolean) => {
+      visualizerRef.current?.sketch.cancelEdit(ignoreAutoReSelect);
+    },
+    [visualizerRef]
+  );
 
   const handleApplyEditSketchFeature = useCallback(() => {
     visualizerRef.current?.sketch.applyEdit();
@@ -242,17 +239,6 @@ export default ({
     visualizerRef.current?.sketch.onEditFeatureChange(setSketchEditingFeatrue);
   }, [visualizerRef]);
 
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     visualizerRef.current?.sketch.overrideOptions({
-  //       dataOnly: true
-  //     });
-  //     visualizerRef.current?.sketch.onEditFeatureChange(
-  //       setSketchEditingFeatrue
-  //     );
-  //   }, 1000);
-  // }, [visualizerRef]);
-
   return {
     sketchType,
     sketchEditingFeature,
diff --git a/web/src/beta/features/Editor/hooks/useUI.ts b/web/src/beta/features/Editor/hooks/useUI.ts
index 741f603588..dc2e9d9ba3 100644
--- a/web/src/beta/features/Editor/hooks/useUI.ts
+++ b/web/src/beta/features/Editor/hooks/useUI.ts
@@ -1,3 +1,4 @@
+import { SketchType } from "@reearth/core";
 import { useCallback, useEffect, useState } from "react";
 
 import { Tab } from "../../Navbar";
@@ -12,13 +13,20 @@ type Props = {
   handleLayerSelect: (props: LayerSelectProps) => void;
   handleCoreLayerSelect: (props: LayerSelectProps) => void;
   handleSceneSettingSelect: (collection?: string) => void;
+  handleSketchTypeChange: (
+    type: SketchType | undefined,
+    from: "editor" | "plugin"
+  ) => void;
+  handleSketchGeometryEditCancel: (ignoreAutoReSelect?: boolean) => void;
 };
 
 export default ({
   tab,
   handleLayerSelect,
   handleCoreLayerSelect,
-  handleSceneSettingSelect
+  handleSceneSettingSelect,
+  handleSketchTypeChange,
+  handleSketchGeometryEditCancel
 }: Props) => {
   const [currentProjectType, setCurrentProjectType] =
     useState<VisualizerProjectType>(tab === "story" ? "story" : "default");
@@ -48,9 +56,16 @@ export default ({
   const handleLayerSelectFromUI = useCallback(
     (layerId?: string) => {
       handleSceneSettingSelect(undefined);
+      handleSketchTypeChange(undefined, "editor");
+      handleSketchGeometryEditCancel(true);
       handleLayerSelect({ layerId });
     },
-    [handleLayerSelect, handleSceneSettingSelect]
+    [
+      handleLayerSelect,
+      handleSketchTypeChange,
+      handleSceneSettingSelect,
+      handleSketchGeometryEditCancel
+    ]
   );
 
   const handleCoreLayerSelectFromUI = useCallback(
@@ -64,12 +79,19 @@ export default ({
   const handleSceneSettingSelectFromUI = useCallback(
     (collection?: string) => {
       handleLayerSelect(undefined);
+      handleSketchTypeChange(undefined, "editor");
+      handleSketchGeometryEditCancel(true);
       // change to select layer could effect the scene setting selection
       requestAnimationFrame(() => {
         handleSceneSettingSelect(collection);
       });
     },
-    [handleLayerSelect, handleSceneSettingSelect]
+    [
+      handleLayerSelect,
+      handleSceneSettingSelect,
+      handleSketchTypeChange,
+      handleSketchGeometryEditCancel
+    ]
   );
 
   // modals

From 2ba42b4a96d1f6dd2618c34d3f6514e5fa502316 Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Wed, 2 Oct 2024 08:54:57 +0800
Subject: [PATCH 3/7] chore: update core version

---
 web/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/package.json b/web/package.json
index e22cd09970..ceb0a9dd46 100644
--- a/web/package.json
+++ b/web/package.json
@@ -124,7 +124,7 @@
     "@lexical/utils": "0.12.0",
     "@monaco-editor/react": "4.6.0",
     "@popperjs/core": "2.11.8",
-    "@reearth/core": "0.0.7-alpha.14",
+    "@reearth/core": "0.0.7-alpha.15",
     "@rot1024/use-transition": "1.0.0",
     "@sentry/browser": "7.77.0",
     "@seznam/compose-react-refs": "1.0.6",
@@ -180,4 +180,4 @@
     "uuid": "10.0.0"
   },
   "packageManager": "yarn@4.4.0"
-}
+}
\ No newline at end of file

From c9189d14d621701e70dca4056c505df692591281 Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Wed, 2 Oct 2024 08:56:54 +0800
Subject: [PATCH 4/7] chore: update yarn.lock

---
 web/package.json |  2 +-
 web/yarn.lock    | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/package.json b/web/package.json
index ceb0a9dd46..a87ab78880 100644
--- a/web/package.json
+++ b/web/package.json
@@ -180,4 +180,4 @@
     "uuid": "10.0.0"
   },
   "packageManager": "yarn@4.4.0"
-}
\ No newline at end of file
+}
diff --git a/web/yarn.lock b/web/yarn.lock
index 942b31c659..ed908ab4a5 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -8186,9 +8186,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reearth/core@npm:0.0.7-alpha.14":
-  version: 0.0.7-alpha.14
-  resolution: "@reearth/core@npm:0.0.7-alpha.14"
+"@reearth/core@npm:0.0.7-alpha.15":
+  version: 0.0.7-alpha.15
+  resolution: "@reearth/core@npm:0.0.7-alpha.15"
   dependencies:
     "@radix-ui/react-checkbox": "npm:1.1.1"
     "@radix-ui/react-dialog": "npm:1.1.1"
@@ -8197,6 +8197,7 @@ __metadata:
     "@radix-ui/react-separator": "npm:1.1.0"
     "@radix-ui/react-slot": "npm:1.1.0"
     "@radix-ui/react-switch": "npm:1.1.0"
+    "@radix-ui/react-toggle": "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"
@@ -8240,7 +8241,7 @@ __metadata:
     cesium: 1.118.x
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 10c0/c3d742702ea3396ec4a2774bcd89f62c7686cda31e3587e05a9e2f9cff2400957af4924f426eec0b6a10c3653cdec4959f48ed8bd75c409a21a7db082e6352a5
+  checksum: 10c0/38e5d4950a116ff52ef5a04eb0614d499721291dd51fe8e442ba4a087417bca580c6748a169dcda505d0d218c9fda760e2d173f503e70d7bcf733a675e7e05f4
   languageName: node
   linkType: hard
 
@@ -8280,7 +8281,7 @@ __metadata:
     "@monaco-editor/react": "npm:4.6.0"
     "@playwright/test": "npm:1.46.1"
     "@popperjs/core": "npm:2.11.8"
-    "@reearth/core": "npm:0.0.7-alpha.14"
+    "@reearth/core": "npm:0.0.7-alpha.15"
     "@rollup/plugin-yaml": "npm:4.1.2"
     "@rot1024/use-transition": "npm:1.0.0"
     "@sentry/browser": "npm:7.77.0"

From 34a085d1a4dd013d5490df54d2a6a25e9772dced Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Wed, 2 Oct 2024 09:21:03 +0800
Subject: [PATCH 5/7] refactor: update i18n

---
 web/src/services/i18n/translations/en.yml | 1 -
 web/src/services/i18n/translations/ja.yml | 1 -
 2 files changed, 2 deletions(-)

diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 732b2416ee..3de293ba1d 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -97,7 +97,6 @@ Save & Apply: ''
 No custom properties: ''
 Geometry: ''
 Properties: ''
-Delete Feature: ''
 Enable Infobox: ''
 Show infobox when the user clicks on a layer: ''
 Layer Style: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index 07daf70bc6..adaebce36b 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -97,7 +97,6 @@ Save & Apply: ''
 No custom properties: ''
 Geometry: ジオメトリ
 Properties: プロパティ
-Delete Feature: ''
 Enable Infobox: インフォボックスを有効化
 Show infobox when the user clicks on a layer: フェーチャーをクリックした際にインフォボックスを表示
 Layer Style: レイヤースタイル

From 75fcf3d79e6693e6d3b2e1416fed8db71c30fd7a Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Wed, 2 Oct 2024 09:26:30 +0800
Subject: [PATCH 6/7] refactor: correct condition & typo

---
 web/src/beta/features/Editor/hooks/useSketch.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/beta/features/Editor/hooks/useSketch.ts b/web/src/beta/features/Editor/hooks/useSketch.ts
index 18685d3d74..88de09bcad 100644
--- a/web/src/beta/features/Editor/hooks/useSketch.ts
+++ b/web/src/beta/features/Editor/hooks/useSketch.ts
@@ -174,7 +174,7 @@ export default ({
       if (
         !selectedLayer?.layer?.id ||
         !selectedLayer?.computedFeature?.id ||
-        !selectedLayer.computedFeature.id !== !feature?.properties?.id ||
+        selectedLayer.computedFeature.id !== feature?.properties?.id ||
         !feature
       )
         return;
@@ -204,7 +204,7 @@ export default ({
     [selectedLayer, handleGeoJsonFeatureUpdate]
   );
 
-  const [sketchEditingFeature, setSketchEditingFeatrue] = useState<
+  const [sketchEditingFeature, setSketchEditingFeature] = useState<
     SketchEditingFeature | undefined
   >();
 
@@ -236,7 +236,7 @@ export default ({
     visualizerRef.current?.sketch.overrideOptions({
       dataOnly: true
     });
-    visualizerRef.current?.sketch.onEditFeatureChange(setSketchEditingFeatrue);
+    visualizerRef.current?.sketch.onEditFeatureChange(setSketchEditingFeature);
   }, [visualizerRef]);
 
   return {

From 9bea7e4388e693cecfa24f02146b876f182844d4 Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Wed, 2 Oct 2024 09:30:13 +0800
Subject: [PATCH 7/7] refactor: simplify buttons

---
 .../LayerInspector/FeatureInspector/index.tsx | 59 ++++++++-----------
 1 file changed, 25 insertions(+), 34 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 ded4c43b88..4cc35f5324 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
@@ -155,39 +155,37 @@ const FeatureData: FC<Props> = ({
     <Wrapper>
       {!!layer?.isSketch && sketchFeature?.id && (
         <SketchFeatureButtons>
-          <GeometryEditButtons>
-            {isEditingGeometry ? (
-              <>
-                <Button
-                  onClick={onSketchGeometryEditApply}
-                  size="small"
-                  icon="check"
-                  appearance="primary"
-                  extendWidth
-                />
-                <Button
-                  onClick={onSketchGeometryEditCancel}
-                  size="small"
-                  icon="close"
-                  extendWidth
-                />
-              </>
-            ) : (
+          {isEditingGeometry ? (
+            <>
+              <Button
+                onClick={onSketchGeometryEditApply}
+                size="small"
+                icon="check"
+                appearance="primary"
+                extendWidth
+              />
+              <Button
+                onClick={onSketchGeometryEditCancel}
+                size="small"
+                icon="close"
+                extendWidth
+              />
+            </>
+          ) : (
+            <>
               <Button
                 onClick={onSketchGeometryEditStart}
                 size="small"
                 icon="pencilLine"
                 extendWidth
               />
-            )}
-          </GeometryEditButtons>
-          {!isEditingGeometry && (
-            <Button
-              onClick={handleDeleteSketchFeature}
-              size="small"
-              icon="trash"
-              extendWidth
-            />
+              <Button
+                onClick={handleDeleteSketchFeature}
+                size="small"
+                icon="trash"
+                extendWidth
+              />
+            </>
           )}
         </SketchFeatureButtons>
       )}
@@ -288,10 +286,3 @@ const SketchFeatureButtons = styled("div")(({ theme }) => ({
   flexDirection: "row",
   gap: theme.spacing.small
 }));
-
-const GeometryEditButtons = styled("div")(({ theme }) => ({
-  width: "100%",
-  display: "flex",
-  flexDirection: "row",
-  gap: theme.spacing.small
-}));