Visually hide components when cutting but do not remove from real definition

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -85,6 +85,10 @@
     previewDevice: $store.previewDevice,
     messagePassing: $store.clientFeatures.messagePassing,
     navigation: $store.navigation,
+    hiddenComponentIds:
+      $store.componentToPaste?._id && $store.componentToPaste?.isCut
+        ? [$store.componentToPaste?._id]
+        : [],
     isBudibaseEvent: true,
   }
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js

@@ -65,7 +65,8 @@ export default `
           theme,
           customTheme,
           previewDevice,
-          navigation
+          navigation,
+          hiddenComponentIds
         } = parsed
 
         // Set some flags so the app knows we're in the builder
@@ -79,6 +80,7 @@ export default `
         window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
         window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
         window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
+        window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
 
         // Initialise app
         try {

packages/client/src/components/Component.svelte

@@ -121,6 +121,8 @@
     !isScreen &&
     definition?.draggable !== false
   $: droppable = interactive && !isLayout && !isScreen
+  $: builderHidden =
+    $builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
 
   // Empty components are those which accept children but do not have any.
   // Empty states can be shown for these components, but can be disabled
@@ -434,7 +436,7 @@
   })
 </script>
 
-{#if constructor && initialSettings && (visible || inSelectedPath)}
+{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
   <div

packages/client/src/index.js

@@ -20,6 +20,7 @@ const loadBudibase = () => {
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
     previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
     navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
+    hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real

packages/client/src/stores/builder.js

@@ -17,6 +17,7 @@ const createBuilderStore = () => {
     previewDevice: "desktop",
     isDragging: false,
     navigation: null,
+    hiddenComponentIds: [],
 
     // Legacy - allow the builder to specify a layout
     layout: null,