Merge pull request #12969 from Budibase/monolith-cheeks-tweaks

Monolith cheeks tweaks

packages/builder/package.json

@@ -23,7 +23,6 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
       "\\.(css|less|sass|scss)$": "identity-obj-proxy",
       "components(.*)$": "<rootDir>/src/components$1",
-      "builder(.*)$": "<rootDir>/src/builder$1",
       "stores(.*)$": "<rootDir>/src/stores$1",
       "analytics(.*)$": "<rootDir>/src/analytics$1",
       "constants/backend": "<rootDir>/src/constants/backend/index.js"

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -13,7 +13,7 @@
   import { admin, licensing } from "stores/portal"
   import { externalActions } from "./ExternalActions"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
-  import { checkForCollectStep } from "builder/utils"
+  import { checkForCollectStep } from "helpers/utils"
 
   export let blockIdx
   export let lastStep

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -42,7 +42,7 @@
   import {
     getSchemaForDatasourcePlus,
     getEnvironmentBindings,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
   import { onMount } from "svelte"
   import { cloneDeep } from "lodash/fp"

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -28,7 +28,7 @@
     PrettyRelationshipDefinitions,
     DB_TYPE_EXTERNAL,
   } from "constants/backend"
-  import { getAutoColumnInformation, buildAutoColumn } from "builder/utils"
+  import { getAutoColumnInformation, buildAutoColumn } from "helpers/utils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import { getBindings } from "components/backend/DataTable/formula"

packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte

@@ -13,7 +13,7 @@
   } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { FIELDS } from "constants/backend"
-  import { generate } from "builder/schemaGenerator"
+  import { generate } from "helpers/schemaGenerator"
 
   export let schema = {}
   export let json

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -9,7 +9,6 @@
     views,
     viewsV2,
     userSelectedResourceMap,
-    database,
   } from "stores/builder"
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
@@ -75,69 +74,67 @@
     searchTerm && !showAppUsersTable && !enrichedDataSources.find(ds => ds.show)
 </script>
 
-{#if $database?._id}
+<div class="hierarchy-items-container">
-  <div class="hierarchy-items-container">
+  {#if showAppUsersTable}
-    {#if showAppUsersTable}
+    <NavItem
-      <NavItem
+      icon="UserGroup"
-        icon="UserGroup"
+      text={appUsersTableName}
-        text={appUsersTableName}
+      selected={$isActive("./table/:tableId") &&
-        selected={$isActive("./table/:tableId") &&
+        $tables.selected?._id === TableNames.USERS}
-          $tables.selected?._id === TableNames.USERS}
+      on:click={() => selectTable(TableNames.USERS)}
-        on:click={() => selectTable(TableNames.USERS)}
+      selectedBy={$userSelectedResourceMap[TableNames.USERS]}
-        selectedBy={$userSelectedResourceMap[TableNames.USERS]}
+    />
-      />
+  {/if}
-    {/if}
+  {#each enrichedDataSources.filter(ds => ds.show) as datasource}
-    {#each enrichedDataSources.filter(ds => ds.show) as datasource}
+    <NavItem
-      <NavItem
+      border
-        border
+      text={datasource.name}
-        text={datasource.name}
+      opened={datasource.open}
-        opened={datasource.open}
+      selected={$isActive("./datasource") && datasource.selected}
-        selected={$isActive("./datasource") && datasource.selected}
+      withArrow={true}
-        withArrow={true}
+      on:click={() => selectDatasource(datasource)}
-        on:click={() => selectDatasource(datasource)}
+      on:iconClick={() => toggleNode(datasource)}
-        on:iconClick={() => toggleNode(datasource)}
+      selectedBy={$userSelectedResourceMap[datasource._id]}
-        selectedBy={$userSelectedResourceMap[datasource._id]}
+    >
-      >
+      <div class="datasource-icon" slot="icon">
-        <div class="datasource-icon" slot="icon">
+        <IntegrationIcon
-          <IntegrationIcon
+          integrationType={datasource.source}
-            integrationType={datasource.source}
+          schema={datasource.schema}
-            schema={datasource.schema}
+          size="18"
-            size="18"
+        />
-          />
+      </div>
-        </div>
+      {#if datasource._id !== BUDIBASE_INTERNAL_DB_ID}
-        {#if datasource._id !== BUDIBASE_INTERNAL_DB_ID}
+        <EditDatasourcePopover {datasource} />
-          <EditDatasourcePopover {datasource} />
-        {/if}
-      </NavItem>
-
-      {#if datasource.open}
-        <TableNavigator tables={datasource.tables} {selectTable} />
-        {#each datasource.queries as query}
-          <NavItem
-            indentLevel={1}
-            icon="SQLQuery"
-            iconText={customQueryIconText(datasource, query)}
-            iconColor={customQueryIconColor(datasource, query)}
-            text={customQueryText(datasource, query)}
-            selected={$isActive("./query/:queryId") &&
-              $queries.selectedQueryId === query._id}
-            on:click={() => $goto(`./query/${query._id}`)}
-            selectedBy={$userSelectedResourceMap[query._id]}
-          >
-            <EditQueryPopover {query} />
-          </NavItem>
-        {/each}
       {/if}
-    {/each}
+    </NavItem>
-    {#if showNoResults}
+
-      <Layout paddingY="none" paddingX="L">
+    {#if datasource.open}
-        <div class="no-results">
+      <TableNavigator tables={datasource.tables} {selectTable} />
-          There aren't any datasources matching that name
+      {#each datasource.queries as query}
-        </div>
+        <NavItem
-      </Layout>
+          indentLevel={1}
+          icon="SQLQuery"
+          iconText={customQueryIconText(datasource, query)}
+          iconColor={customQueryIconColor(datasource, query)}
+          text={customQueryText(datasource, query)}
+          selected={$isActive("./query/:queryId") &&
+            $queries.selectedQueryId === query._id}
+          on:click={() => $goto(`./query/${query._id}`)}
+          selectedBy={$userSelectedResourceMap[query._id]}
+        >
+          <EditQueryPopover {query} />
+        </NavItem>
+      {/each}
     {/if}
-  </div>
+  {/each}
-{/if}
+  {#if showNoResults}
+    <Layout paddingY="none" paddingX="L">
+      <div class="no-results">
+        There aren't any datasources matching that name
+      </div>
+    </Layout>
+  {/if}
+</div>
 
 <style>
   .hierarchy-items-container {

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -4,7 +4,6 @@
     views,
     viewsV2,
     userSelectedResourceMap,
-    database,
   } from "stores/builder"
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
@@ -29,42 +28,40 @@
   }
 </script>
 
-{#if $database?._id}
+<div class="hierarchy-items-container">
-  <div class="hierarchy-items-container">
+  {#each sortedTables as table, idx}
-    {#each sortedTables as table, idx}
+    <NavItem
+      indentLevel={1}
+      border={idx > 0}
+      icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
+      text={table.name}
+      selected={$isActive("./table/:tableId") &&
+        $tablesStore.selected?._id === table._id}
+      on:click={() => selectTable(table._id)}
+      selectedBy={$userSelectedResourceMap[table._id]}
+    >
+      {#if table._id !== TableNames.USERS}
+        <EditTablePopover {table} />
+      {/if}
+    </NavItem>
+    {#each [...Object.entries(table.views || {})].sort() as [name, view], idx (idx)}
       <NavItem
-        indentLevel={1}
+        indentLevel={2}
-        border={idx > 0}
+        icon="Remove"
-        icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
+        text={name}
-        text={table.name}
+        selected={isViewActive(view, $isActive, $views, $viewsV2)}
-        selected={$isActive("./table/:tableId") &&
+        on:click={() => {
-          $tablesStore.selected?._id === table._id}
+          if (view.version === 2) {
-        on:click={() => selectTable(table._id)}
+            $goto(`./view/v2/${encodeURIComponent(view.id)}`)
-        selectedBy={$userSelectedResourceMap[table._id]}
+          } else {
+            $goto(`./view/v1/${encodeURIComponent(name)}`)
+          }
+        }}
+        selectedBy={$userSelectedResourceMap[name] ||
+          $userSelectedResourceMap[view.id]}
       >
-        {#if table._id !== TableNames.USERS}
+        <EditViewPopover {view} />
-          <EditTablePopover {table} />
-        {/if}
       </NavItem>
-      {#each [...Object.entries(table.views || {})].sort() as [name, view], idx (idx)}
-        <NavItem
-          indentLevel={2}
-          icon="Remove"
-          text={name}
-          selected={isViewActive(view, $isActive, $views, $viewsV2)}
-          on:click={() => {
-            if (view.version === 2) {
-              $goto(`./view/v2/${encodeURIComponent(view.id)}`)
-            } else {
-              $goto(`./view/v1/${encodeURIComponent(name)}`)
-            }
-          }}
-          selectedBy={$userSelectedResourceMap[name] ||
-            $userSelectedResourceMap[view.id]}
-        >
-          <EditViewPopover {view} />
-        </NavItem>
-      {/each}
     {/each}
-  </div>
+  {/each}
-{/if}
+</div>

packages/builder/src/components/common/LinkedRowSelector.svelte

@@ -2,7 +2,7 @@
   import { tables } from "stores/builder"
   import { API } from "api"
   import { Select, Label, Multiselect } from "@budibase/bbui"
-  import { capitalise } from "../../helpers"
+  import { capitalise } from "helpers"
   import { createEventDispatcher } from "svelte"
 
   export let schema

packages/builder/src/components/common/bindings/BindableCombobox.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import { createEventDispatcher } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -19,7 +19,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
 
   import { admin } from "stores/portal"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
 
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"

packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
 
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"

packages/builder/src/components/common/bindings/ModalBindableInput.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"

packages/builder/src/components/common/users/PasswordRepeatInput.svelte

@@ -1,9 +1,6 @@
 <script>
   import { Layout, Input } from "@budibase/bbui"
-  import {
+  import { createValidationStore, requiredValidator } from "helpers/validation"
-    createValidationStore,
-    requiredValidator,
-  } from "../../../helpers/validation"
 
   export let password
   export let error

packages/builder/src/components/design/ScreenDetailsModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { ModalContent, Input } from "@budibase/bbui"
-  import sanitizeUrl from "builder/store/screenTemplates/utils/sanitizeUrl"
+  import sanitizeUrl from "helpers/sanitizeUrl"
   import { get } from "svelte/store"
   import { screenStore } from "stores/builder"
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -16,7 +16,7 @@
     getActionBindings,
     makeStateBinding,
     updateReferencesInObject,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import { cloneDeep } from "lodash/fp"
 
   const flipDurationMs = 150

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ChangeFormStep.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "builder/dataBinding"
+  import { getActionProviders } from "dataBinding"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
@@ -10,7 +10,7 @@
   export let nested
 
   $: actionProviders = getActionProviders(
-    $currentAsset,
+    $selectedScreen,
     $componentStore.selectedComponentId,
     "ChangeFormStep",
     { includeSelf: nested }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearForm.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "builder/dataBinding"
+  import { getActionProviders } from "dataBinding"
 
   export let parameters
   export let nested
 
   $: actionProviders = getActionProviders(
-    $currentAsset,
+    $selectedScreen,
     $componentStore.selectedComponentId,
     "ClearForm",
     { includeSelf: nested }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte

@@ -1,7 +1,12 @@
 <script>
   import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
-  import { currentAsset, componentStore, tables, viewsV2 } from "stores/builder"
+  import {
-  import { getSchemaForDatasourcePlus } from "builder/dataBinding"
+    selectedScreen,
+    componentStore,
+    tables,
+    viewsV2,
+  } from "stores/builder"
+  import { getSchemaForDatasourcePlus } from "dataBinding"
   import SaveFields from "./SaveFields.svelte"
   import { getDatasourceLikeProviders } from "components/design/settings/controls/ButtonActionEditor/actions/utils"
 
@@ -10,7 +15,7 @@
   export let nested
 
   $: providerOptions = getDatasourceLikeProviders({
-    asset: $currentAsset,
+    asset: $selectedScreen,
     componentId: $componentStore.selectedComponentId,
     nested,
   })

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExportData.svelte

@@ -1,15 +1,9 @@
 <script>
   import { Label, Select, Body, Multiselect } from "@budibase/bbui"
-  import {
+  import { findAllMatchingComponents, findComponent } from "helpers/components"
-    findAllMatchingComponents,
+  import { selectedScreen } from "stores/builder"
-    findComponent,
-  } from "stores/builder/components/utils"
-  import { currentAsset } from "stores/builder"
   import { onMount } from "svelte"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
 
   export let parameters
 
@@ -24,14 +18,15 @@
     },
   ]
 
-  $: tables = findAllMatchingComponents($currentAsset?.props, component =>
+  $: tables = findAllMatchingComponents($selectedScreen?.props, component =>
     component._component.endsWith("table")
   ).map(table => ({
     label: table._instanceName,
     value: table._id,
   }))
-  $: tableBlocks = findAllMatchingComponents($currentAsset?.props, component =>
+  $: tableBlocks = findAllMatchingComponents(
-    component._component.endsWith("tableblock")
+    $selectedScreen?.props,
+    component => component._component.endsWith("tableblock")
   ).map(block => ({
     label: block._instanceName,
     value: `${block._id}-table`,
@@ -44,9 +39,9 @@
     if (tableId?.includes("-")) {
       tableId = tableId.split("-")[0]
     }
-    const selectedTable = findComponent($currentAsset?.props, tableId)
+    const selectedTable = findComponent($selectedScreen?.props, tableId)
-    const datasource = getDatasourceForProvider($currentAsset, selectedTable)
+    const datasource = getDatasourceForProvider($selectedScreen, selectedTable)
-    const { schema } = getSchemaForDatasource($currentAsset, datasource)
+    const { schema } = getSchemaForDatasource($selectedScreen, datasource)
     return Object.keys(schema || {})
   }
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
   import { selectedScreen } from "stores/builder"
-  import { findAllMatchingComponents } from "stores/builder/components/utils"
+  import { findAllMatchingComponents } from "helpers/components"
 
   export let parameters
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RefreshDataProvider.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "builder/dataBinding"
+  import { getActionProviders } from "dataBinding"
 
   export let parameters
   export let nested
 
   $: actionProviders = getActionProviders(
-    $currentAsset,
+    $selectedScreen,
     $componentStore.selectedComponentId,
     "RefreshDatasource",
     { includeSelf: nested }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/S3Upload.svelte

@@ -1,11 +1,11 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset } from "stores/builder"
+  import { selectedScreen } from "stores/builder"
-  import { findAllMatchingComponents } from "stores/builder/components/utils"
+  import { findAllMatchingComponents } from "helpers/components"
 
   export let parameters
 
-  $: components = findAllMatchingComponents($currentAsset?.props, component =>
+  $: components = findAllMatchingComponents($selectedScreen?.props, component =>
     component._component.endsWith("s3upload")
   )
 </script>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte

@@ -1,7 +1,12 @@
 <script>
   import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
-  import { currentAsset, componentStore, tables, viewsV2 } from "stores/builder"
+  import {
-  import { getSchemaForDatasourcePlus } from "builder/dataBinding"
+    selectedScreen,
+    componentStore,
+    tables,
+    viewsV2,
+  } from "stores/builder"
+  import { getSchemaForDatasourcePlus } from "dataBinding"
   import SaveFields from "./SaveFields.svelte"
   import { getDatasourceLikeProviders } from "components/design/settings/controls/ButtonActionEditor/actions/utils"
 
@@ -10,7 +15,7 @@
   export let nested
 
   $: providerOptions = getDatasourceLikeProviders({
-    asset: $currentAsset,
+    asset: $selectedScreen,
     componentId: $componentStore.selectedComponentId,
     nested,
   })

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte

@@ -1,20 +1,20 @@
 <script>
-  import { currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
   import { Label, Combobox, Select } from "@budibase/bbui"
-  import { getActionProviders, buildFormSchema } from "builder/dataBinding"
+  import { getActionProviders, buildFormSchema } from "dataBinding"
-  import { findComponent } from "stores/builder/components/utils"
+  import { findComponent } from "helpers/components"
 
   export let parameters
   export let nested
 
   $: formComponent = getFormComponent(
-    $currentAsset.props,
+    $selectedScreen.props,
     parameters.componentId
   )
   $: formSchema = buildFormSchema(formComponent)
   $: fieldOptions = Object.keys(formSchema || {})
   $: actionProviders = getActionProviders(
-    $currentAsset,
+    $selectedScreen,
     $componentStore.selectedComponentId,
     "ScrollTo",
     { includeSelf: nested }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte

@@ -2,9 +2,9 @@
   import { Select, Label, Combobox } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders, buildFormSchema } from "builder/dataBinding"
+  import { getActionProviders, buildFormSchema } from "dataBinding"
-  import { findComponent } from "stores/builder/components/utils"
+  import { findComponent } from "helpers/components"
 
   export let parameters
   export let bindings = []
@@ -22,13 +22,13 @@
   ]
 
   $: formComponent = getFormComponent(
-    $currentAsset.props,
+    $selectedScreen.props,
     parameters.componentId
   )
   $: formSchema = buildFormSchema(formComponent)
   $: fieldOptions = Object.keys(formSchema || {})
   $: actionProviders = getActionProviders(
-    $currentAsset,
+    $selectedScreen,
     $componentStore.selectedComponentId,
     "ValidateForm",
     { includeSelf: nested }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte

@@ -2,7 +2,7 @@
   import { Select, Label, Combobox, Checkbox, Body } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { getAllStateVariables } from "builder/dataBinding"
+  import { getAllStateVariables } from "dataBinding"
 
   export let parameters
   export let bindings = []

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "builder/dataBinding"
+  import { getActionProviders } from "dataBinding"
 
   export let parameters
   export let nested
 
   $: actionProviders = getActionProviders(
-    $currentAsset,
+    $selectedScreen,
     $componentStore.selectedComponentId,
     "ValidateForm",
     { includeSelf: nested }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js

@@ -1,4 +1,4 @@
-import { getComponentContexts } from "builder/dataBinding"
+import { getComponentContexts } from "dataBinding"
 import { capitalise } from "helpers"
 
 // Generates bindings for all components that provider "datasource like"

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte

@@ -4,7 +4,7 @@
   import { createEventDispatcher } from "svelte"
   import { Helpers } from "@budibase/bbui"
   import { componentStore } from "stores/builder"
-  import { getEventContextBindings } from "builder/dataBinding"
+  import { getEventContextBindings } from "dataBinding"
   import { cloneDeep, isEqual } from "lodash/fp"
 
   export let componentInstance

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte

@@ -1,7 +1,7 @@
 <script>
   import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
-  import { runtimeToReadableBinding } from "builder/dataBinding"
+  import { runtimeToReadableBinding } from "dataBinding"
   import { isJSBinding } from "@budibase/string-templates"
 
   export let item

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte

@@ -3,11 +3,8 @@
   import { createEventDispatcher } from "svelte"
   import ColumnDrawer from "./ColumnDrawer.svelte"
   import { cloneDeep } from "lodash/fp"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
+  import { selectedScreen } from "stores/builder"
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
-  import { currentAsset } from "stores/builder"
   import { getFields } from "helpers/searchFields"
 
   export let componentInstance
@@ -21,8 +18,8 @@
   let boundValue
 
   $: text = getText(value)
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: schema = getSchema($currentAsset, datasource)
+  $: schema = getSchema($selectedScreen, datasource)
   $: options = allowCellEditing
     ? Object.keys(schema || {})
     : enrichedSchemaFields?.map(field => field.name)

packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte

@@ -1,14 +1,14 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { makePropSafe } from "@budibase/string-templates"
-  import { currentAsset } from "stores/builder"
+  import { selectedScreen } from "stores/builder"
-  import { findAllMatchingComponents } from "stores/builder/components/utils"
+  import { findAllMatchingComponents } from "helpers/components"
 
   export let value
 
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
 
-  $: providers = findAllMatchingComponents($currentAsset?.props, c =>
+  $: providers = findAllMatchingComponents($selectedScreen?.props, c =>
     c._component?.endsWith("/dataprovider")
   )
 </script>

packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte

@@ -2,7 +2,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import {
     Button,
     Popover,
@@ -22,7 +22,7 @@
     queries as queriesStore,
     viewsV2 as viewsV2Store,
     views as viewsStore,
-    currentAsset,
+    selectedScreen,
     componentStore,
     datasources,
     integrations,
@@ -30,7 +30,7 @@
   import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
-  import { findAllComponents } from "stores/builder/components/utils"
+  import { findAllComponents } from "helpers/components"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import DataSourceCategory from "components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
   import { API } from "api"
@@ -76,7 +76,7 @@
       ...query,
       type: "query",
     }))
-  $: dataProviders = findAllComponents($currentAsset.props)
+  $: dataProviders = findAllComponents($selectedScreen.props)
     .filter(component => {
       return (
         component._component?.endsWith("/dataprovider") &&

packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte

@@ -3,7 +3,7 @@
   import { componentStore } from "stores/builder"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
-  import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
 
   export let anchor
   export let componentInstance

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -6,8 +6,8 @@
     getSchemaForDatasource,
     getBindableProperties,
     getComponentBindableProperties,
-  } from "builder/dataBinding"
+  } from "dataBinding"
-  import { selectedScreen, currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
   import DraggableList from "../DraggableList/DraggableList.svelte"
   import { createEventDispatcher } from "svelte"
   import FieldSetting from "./FieldSetting.svelte"
@@ -44,7 +44,7 @@
 
   $: datasource =
     componentInstance.dataSource ||
-    getDatasourceForProvider($currentAsset, componentInstance)
+    getDatasourceForProvider($selectedScreen, componentInstance)
 
   $: resourceId = datasource?.resourceId || datasource?.tableId
 
@@ -53,7 +53,7 @@
   }
 
   const updateState = value => {
-    schema = getSchema($currentAsset, datasource)
+    schema = getSchema($selectedScreen, datasource)
     options = Object.keys(schema || {})
     sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
     updateSanitsedFields(sanitisedValue)

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte

@@ -3,7 +3,7 @@
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
-  import { runtimeToReadableBinding } from "builder/dataBinding"
+  import { runtimeToReadableBinding } from "dataBinding"
   import { isJSBinding } from "@budibase/string-templates"
   import { componentStore } from "stores/builder"
 

packages/builder/src/components/design/settings/controls/FieldSelect.svelte

@@ -1,10 +1,7 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
+  import { selectedScreen } from "stores/builder"
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
-  import { currentAsset } from "stores/builder"
   import { createEventDispatcher } from "svelte"
 
   export let componentInstance = {}
@@ -12,8 +9,8 @@
   export let placeholder
 
   const dispatch = createEventDispatcher()
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
   $: boundValue = getValidValue(value, options)
 

packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte

@@ -1,12 +1,9 @@
 <script>
   import { notifications, ActionButton, Button, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
   import FilterDrawer from "./FilterDrawer.svelte"
-  import { currentAsset } from "stores/builder"
+  import { selectedScreen } from "stores/builder"
 
   const dispatch = createEventDispatcher()
 
@@ -18,8 +15,8 @@
   let drawer
 
   $: tempValue = value
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: dsSchema = getSchemaForDatasource($currentAsset, datasource)?.schema
+  $: dsSchema = getSchemaForDatasource($selectedScreen, datasource)?.schema
   $: schemaFields = Object.values(schema || dsSchema || {})
   $: text = getText(value?.filter(filter => filter.field))
 

packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Combobox } from "@budibase/bbui"
-  import { currentAsset } from "stores/builder"
+  import { selectedScreen } from "stores/builder"
   import { getComponentFieldOptions } from "helpers/formFields"
 
   export let componentInstance
@@ -8,7 +8,7 @@
   export let type
 
   $: options = getComponentFieldOptions(
-    $currentAsset?.props,
+    $selectedScreen?.props,
     componentInstance?._id,
     type
   )

packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte

@@ -1,8 +1,8 @@
 <script>
   import { createEventDispatcher, setContext } from "svelte"
-  import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
-  import { getDatasourceForProvider } from "builder/dataBinding"
+  import { getDatasourceForProvider } from "dataBinding"
-  import { currentAsset, componentStore, previewStore } from "stores/builder"
+  import { selectedScreen, componentStore, previewStore } from "stores/builder"
   import { Helpers } from "@budibase/bbui"
   import { derived, writable } from "svelte/store"
   import { Utils } from "@budibase/frontend-core"
@@ -36,7 +36,7 @@
 
   $: stepCount = cachedValue?.length || 0
   $: updateStore(stepCount)
-  $: dataSource = getDatasourceForProvider($currentAsset, cachedInstance)
+  $: dataSource = getDatasourceForProvider($selectedScreen, cachedInstance)
   $: emitCurrentStep($currentStep)
   $: stepLabel = getStepLabel($multiStepStore)
   $: stepDef = getDefinition(stepLabel)

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte

@@ -1,9 +1,6 @@
 <script>
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
+  import { selectedScreen, componentStore } from "stores/builder"
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
-  import { currentAsset, componentStore } from "stores/builder"
   import DraggableList from "../DraggableList/DraggableList.svelte"
   import { createEventDispatcher } from "svelte"
   import FieldSetting from "./FieldSetting.svelte"
@@ -32,12 +29,12 @@
     return schema
   }
 
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: primaryDisplayColumnName = getSchemaForDatasource(
-    $currentAsset,
+    $selectedScreen,
     datasource
   )?.table?.primaryDisplay
-  $: schema = getSchema(currentAsset, datasource)
+  $: schema = getSchema(selectedScreen, datasource)
   $: columns = getColumns({
     columns: value,
     schema,

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -1,10 +1,7 @@
 <script>
   import { Multiselect } from "@budibase/bbui"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
+  import { selectedScreen } from "stores/builder"
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
-  import { currentAsset } from "stores/builder"
   import { createEventDispatcher } from "svelte"
 
   export let componentInstance = {}
@@ -12,8 +9,8 @@
   export let placeholder
 
   const dispatch = createEventDispatcher()
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
   $: boundValue = getValidOptions(value, options)
 

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import { builderStore } from "stores/builder"
   import { onDestroy } from "svelte"
 

packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte

@@ -2,12 +2,9 @@
   import {
     findClosestMatchingComponent,
     findComponent,
-  } from "stores/builder/components/utils"
+  } from "helpers/components"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
+  import { tables, selectedScreen, componentStore } from "stores/builder"
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
-  import { tables, currentAsset, componentStore } from "stores/builder"
   import FilterEditor from "./FilterEditor/FilterEditor.svelte"
 
   export let componentInstance
@@ -17,29 +14,29 @@
 
   // Find the closest parent form
   $: form = findClosestMatchingComponent(
-    $currentAsset.props,
+    $selectedScreen.props,
     componentInstance._id,
     component => component._component.endsWith("/form")
   )
 
-  const resolveDatasource = (currentAsset, componentInstance, form) => {
+  const resolveDatasource = (selectedScreen, componentInstance, form) => {
     if (!form && componentInstance._id != $componentStore.selectedComponentId) {
       const block = findComponent(
-        currentAsset.props,
+        selectedScreen.props,
         $componentStore.selectedComponentId
       )
       const def = componentStore.getDefinition(block._component)
       return def?.block === true
-        ? getDatasourceForProvider(currentAsset, block)
+        ? getDatasourceForProvider(selectedScreen, block)
         : {}
     } else {
-      return getDatasourceForProvider(currentAsset, form)
+      return getDatasourceForProvider(selectedScreen, form)
     }
   }
 
   // Get that form's schema
-  $: datasource = resolveDatasource($currentAsset, componentInstance, form)
+  $: datasource = resolveDatasource($selectedScreen, componentInstance, form)
-  $: formSchema = getSchemaForDatasource($currentAsset, datasource)?.schema
+  $: formSchema = getSchemaForDatasource($selectedScreen, datasource)?.schema
 
   // Get the schema for the relationship field that this picker is using
   $: columnSchema = formSchema?.[column]

packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte

@@ -1,8 +1,8 @@
 <script>
   import { ActionButton, notifications } from "@budibase/bbui"
-  import { currentAsset, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "stores/builder"
-  import { findClosestMatchingComponent } from "stores/builder/components/utils"
+  import { findClosestMatchingComponent } from "helpers/components"
-  import { makeDatasourceFormComponents } from "builder/store/screenTemplates/utils/commonComponents"
+  import { makeDatasourceFormComponents } from "templates/commonComponents"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let componentInstance
@@ -11,7 +11,7 @@
 
   const resetFormFields = async () => {
     const form = findClosestMatchingComponent(
-      $currentAsset?.props,
+      $selectedScreen?.props,
       componentInstance._id,
       component => component._component.endsWith("/form")
     )

packages/builder/src/components/design/settings/controls/SearchFieldSelect.svelte

@@ -1,10 +1,7 @@
 <script>
   import { Multiselect } from "@budibase/bbui"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
+  import { selectedScreen, tables } from "stores/builder"
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
-  import { currentAsset, tables } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import { getFields } from "helpers/searchFields"
 
@@ -13,8 +10,8 @@
   export let placeholder
 
   const dispatch = createEventDispatcher()
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = getOptions(datasource, schema || {})
   $: boundValue = getSelectedOption(value, options)
 

packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte

@@ -1,10 +1,7 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import {
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-    getDatasourceForProvider,
+  import { selectedScreen } from "stores/builder"
-    getSchemaForDatasource,
-  } from "builder/dataBinding"
-  import { currentAsset } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import { canBeSortColumn } from "@budibase/shared-core"
 
@@ -13,8 +10,8 @@
   export let placeholder
 
   const dispatch = createEventDispatcher()
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = getSortableFields(schema)
   $: boundValue = getValidValue(value, options)
 

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -10,12 +10,9 @@
     Input,
     DatePicker,
   } from "@budibase/bbui"
-  import { currentAsset, selectedComponent } from "stores/builder"
+  import { selectedScreen, selectedComponent } from "stores/builder"
-  import { findClosestMatchingComponent } from "stores/builder/components/utils"
+  import { findClosestMatchingComponent } from "helpers/components"
-  import {
+  import { getSchemaForDatasource, getDatasourceForProvider } from "dataBinding"
-    getSchemaForDatasource,
-    getDatasourceForProvider,
-  } from "builder/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { generate } from "shortid"
 
@@ -127,13 +124,14 @@
     ],
   }
 
-  const resolveDatasource = (currentAsset, componentInstance, parent) => {
+  const resolveDatasource = (selectedScreen, componentInstance, parent) => {
     return (
-      getDatasourceForProvider(currentAsset, parent || componentInstance) || {}
+      getDatasourceForProvider(selectedScreen, parent || componentInstance) ||
+      {}
     )
   }
 
-  $: dataSourceSchema = getDataSourceSchema($currentAsset, $selectedComponent)
+  $: dataSourceSchema = getDataSourceSchema($selectedScreen, $selectedComponent)
   $: field = fieldName || $selectedComponent?.field
   $: schemaRules = parseRulesFromSchema(field, dataSourceSchema || {})
   $: fieldType = type?.split("/")[1] || "string"

packages/builder/src/components/integration/QueryBindingBuilder.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { createEventDispatcher } from "svelte"
 

packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte

@@ -1,6 +1,6 @@
 <script>
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import { getUserBindings } from "builder/dataBinding"
+  import { getUserBindings } from "dataBinding"
 
   export let queryBindings = []
 

packages/builder/src/components/integration/RestQueryViewer.svelte

@@ -48,7 +48,7 @@
     runtimeToReadableBinding,
     runtimeToReadableMap,
     toBindingsArray,
-  } from "builder/dataBinding"
+  } from "dataBinding"
 
   export let queryId
 

packages/builder/src/components/usage/Usage.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Body, ProgressBar, Heading, Icon, Link } from "@budibase/bbui"
-  import { admin, auth } from "../../stores/portal"
+  import { admin, auth } from "stores/portal"
   import { onMount } from "svelte"
 
   export let usage

packages/builder/src/dataBinding.js

@@ -5,9 +5,8 @@ import {
   findAllMatchingComponents,
   findComponent,
   findComponentPath,
-} from "stores/builder/components/utils"
+} from "helpers/components"
 import {
-  currentAsset,
   componentStore,
   screenStore,
   appStore,
@@ -15,6 +14,7 @@ import {
   queries as queriesStores,
   tables as tablesStore,
   roles as rolesStore,
+  selectedScreen,
 } from "stores/builder"
 import {
   makePropSafe,
@@ -22,7 +22,7 @@ import {
   decodeJSBinding,
   encodeJSBinding,
 } from "@budibase/string-templates"
-import { TableNames } from "../constants"
+import { TableNames } from "constants"
 import { JSONUtils } from "@budibase/frontend-core"
 import ActionDefinitions from "components/design/settings/controls/ButtonActionEditor/manifest.json"
 import { environment, licensing } from "stores/portal"
@@ -731,13 +731,11 @@ export const getEventContextBindings = ({
   asset,
 }) => {
   let bindings = []
-
+  asset = asset ?? get(selectedScreen)
-  const selectedAsset = asset ?? get(currentAsset)
 
   // Check if any context bindings are provided by the component for this
   // setting
-  const component =
+  const component = componentInstance ?? findComponent(asset.props, componentId)
-    componentInstance ?? findComponent(selectedAsset.props, componentId)
 
   if (!component) {
     return bindings

packages/builder/src/dataBinding.test.js

@@ -3,7 +3,7 @@ import {
   runtimeToReadableBinding,
   readableToRuntimeBinding,
   updateReferencesInObject,
-} from "builder/dataBinding"
+} from "dataBinding"
 
 describe("Builder dataBinding", () => {
   beforeEach(() => {

packages/builder/src/helpers/components.js

@@ -6,7 +6,7 @@ import {
   encodeJSBinding,
   findHBSBlocks,
 } from "@budibase/string-templates"
-import { capitalise } from "helpers"
+import { capitalise } from "./index"
 
 /**
  * Recursively searches for a specific component ID

packages/builder/src/helpers/formFields.js

@@ -1,8 +1,5 @@
-import { findClosestMatchingComponent } from "stores/builder/components/utils"
+import { findClosestMatchingComponent } from "helpers/components"
-import {
+import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  getDatasourceForProvider,
-  getSchemaForDatasource,
-} from "builder/dataBinding"
 
 export const getComponentFieldOptions = (asset, id, type, loose = true) => {
   const form = findClosestMatchingComponent(

packages/builder/src/helpers/utils.js

@@ -1,11 +1,11 @@
 import { ActionStepID } from "constants/backend/automations"
-import { TableNames } from "../constants"
+import { TableNames } from "constants"
 import {
   AUTO_COLUMN_DISPLAY_NAMES,
   AUTO_COLUMN_SUB_TYPES,
   FIELDS,
   isAutoColumnUserRelationship,
-} from "../constants/backend"
+} from "constants/backend"
 
 export function getAutoColumnInformation(enabled = true) {
   let info = {}

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte

@@ -12,7 +12,7 @@
   } from "@budibase/bbui"
   import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
   import BindableCombobox from "components/common/bindings/BindableCombobox.svelte"
-  import { getAuthBindings, getEnvironmentBindings } from "builder/dataBinding"
+  import { getAuthBindings, getEnvironmentBindings } from "dataBinding"
   import { environment, licensing, auth } from "stores/portal"
   import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
 

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Headers.svelte

@@ -5,7 +5,7 @@
     getRestBindings,
     readableToRuntimeBinding,
     runtimeToReadableMap,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import { cloneDeep } from "lodash/fp"
   import SaveDatasourceButton from "./SaveDatasourceButton.svelte"
   import Panel from "./Panel.svelte"

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte

@@ -2,7 +2,7 @@
   import { Heading, Layout } from "@budibase/bbui"
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
   import ViewDynamicVariables from "./ViewDynamicVariables.svelte"
-  import { getEnvironmentBindings } from "builder/dataBinding"
+  import { getEnvironmentBindings } from "dataBinding"
   import { licensing } from "stores/portal"
   import { queries } from "stores/builder"
   import { cloneDeep } from "lodash/fp"

packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { queries, datasources, database } from "stores/builder"
+  import { queries, datasources } from "stores/builder"
   import QueryViewer from "components/integration/QueryViewer.svelte"
   import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
   import { IntegrationTypes } from "constants/backend"
@@ -11,7 +11,7 @@
   $: isRestQuery = datasource?.source === IntegrationTypes.REST
 </script>
 
-{#if $database._id && query}
+{#if query}
   {#if isRestQuery}
     <RestQueryViewer queryId={$queries.selectedQueryId} />
   {:else}

packages/builder/src/pages/builder/app/[application]/data/query/new/[datasourceId]/index.svelte

@@ -3,7 +3,7 @@
   import QueryViewer from "components/integration/QueryViewer.svelte"
   import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
   import { IntegrationTypes } from "constants/backend"
-  import { database, datasources } from "stores/builder"
+  import { datasources } from "stores/builder"
 
   $: datasource = $datasources.list.find(ds => ds._id === $params.datasourceId)
   $: {
@@ -32,7 +32,7 @@
   }
 </script>
 
-{#if $database._id && datasource && query}
+{#if datasource && query}
   {#if isRestQuery}
     <RestQueryViewer />
   {:else}

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import TableDataTable from "components/backend/DataTable/TableDataTable.svelte"
-  import { tables, database } from "stores/builder"
+  import { tables } from "stores/builder"
   import { Banner } from "@budibase/bbui"
 
   const verifyAutocolumns = table => {
@@ -30,7 +30,7 @@
   })
 </script>
 
-{#if $database?._id && $tables?.selected?.name}
+{#if $tables?.selected?.name}
   {#if duplicates?.length}
     <div class="alert-wrap">
       <Banner type="warning" showCloseButton={false}>

packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/index.svelte

@@ -1,11 +1,11 @@
 <script>
   import ViewDataTable from "components/backend/DataTable/ViewDataTable.svelte"
-  import { views, database } from "stores/builder"
+  import { views } from "stores/builder"
 
   $: selectedView = $views.selected
 </script>
 
-{#if $database._id && selectedView}
+{#if selectedView}
   <ViewDataTable view={selectedView} />
 {:else}<i>Create your first table to start building</i>{/if}
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -9,11 +9,11 @@
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
-  import { getComponentName } from "stores/builder/components/utils"
+  import { getComponentName } from "helpers/components"
   import {
     getBindableProperties,
     getComponentBindableProperties,
-  } from "builder/dataBinding"
+  } from "dataBinding"
   import { ActionButton, notifications } from "@budibase/bbui"
   import { capitalise } from "helpers"
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte

@@ -15,7 +15,7 @@
     getBindableProperties,
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builder/dataBinding"
+  } from "dataBinding"
 
   export let componentInstance
   export let componentDefinition

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte

@@ -11,9 +11,9 @@
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import { selectedScreen, screenStore } from "stores/builder"
-  import sanitizeUrl from "builder/store/screenTemplates/utils/sanitizeUrl"
+  import sanitizeUrl from "helpers/sanitizeUrl"
   import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
-  import { getBindableProperties } from "builder/dataBinding"
+  import { getBindableProperties } from "dataBinding"
 
   $: bindings = getBindableProperties($selectedScreen, null)
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte

@@ -8,7 +8,7 @@
   } from "stores/builder"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
-  import { findComponent } from "stores/builder/components/utils"
+  import { findComponent } from "helpers/components"
   import ComponentSettingsPanel from "./_components/Component/ComponentSettingsPanel.svelte"
   import NavigationPanel from "./_components/Navigation/index.svelte"
   import ScreenSettingsPanel from "./_components/Screen/index.svelte"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte

@@ -11,7 +11,7 @@
   } from "stores/builder"
   import { onMount } from "svelte"
   import { fly } from "svelte/transition"
-  import { findComponentPath } from "stores/builder/components/utils"
+  import { findComponentPath } from "helpers/components"
 
   let searchString
   let searchRef

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

@@ -9,7 +9,6 @@
     appStore,
     navigationStore,
     selectedScreen,
-    currentAsset,
     hoverStore,
   } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -22,10 +21,7 @@
     notifications,
   } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
-  import {
+  import { findComponent, findComponentPath } from "helpers/components"
-    findComponent,
-    findComponentPath,
-  } from "stores/builder/components/utils"
   import { isActive, goto } from "@roxi/routify"
 
   let iframe
@@ -147,7 +143,7 @@
       const { key, ctrlKey } = data
       document.dispatchEvent(new KeyboardEvent("keydown", { key, ctrlKey }))
     } else if (type === "duplicate-component" && data.id) {
-      const rootComponent = get(currentAsset).props
+      const rootComponent = get(selectedScreen).props
       const component = findComponent(rootComponent, data.id)
       componentStore.copy(component)
       await componentStore.paste(component)
@@ -157,7 +153,7 @@
       loading = false
     } else if (type === "move-component") {
       const { componentId, destinationComponentId } = data
-      const rootComponent = get(currentAsset).props
+      const rootComponent = get(selectedScreen).props
 
       // Get source and destination components
       const source = findComponent(rootComponent, componentId)

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

@@ -5,7 +5,7 @@
     componentStore,
     selectedComponent,
   } from "stores/builder"
-  import { findComponent } from "stores/builder/components/utils"
+  import { findComponent } from "helpers/components"
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"

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

@@ -14,7 +14,7 @@
     findComponentPath,
     getComponentText,
     getComponentName,
-  } from "stores/builder/components/utils"
+  } from "helpers/components"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
 

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

@@ -1,8 +1,5 @@
 import { writable, get } from "svelte/store"
-import {
+import { findComponentParent, findComponentPath } from "helpers/components"
-  findComponentParent,
-  findComponentPath,
-} from "stores/builder/components/utils"
 import { selectedScreen, componentStore } from "stores/builder"
 
 export const DropPosition = {

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

@@ -10,8 +10,8 @@
     notifications,
   } from "@budibase/bbui"
   import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
-  import sanitizeUrl from "builder/store/screenTemplates/utils/sanitizeUrl"
+  import sanitizeUrl from "helpers/sanitizeUrl"
-  import { makeComponentUnique } from "stores/builder/components/utils"
+  import { makeComponentUnique } from "helpers/components"
 
   export let screenId
 

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte

@@ -2,11 +2,11 @@
   import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
   import DatasourceModal from "./DatasourceModal.svelte"
   import ScreenRoleModal from "./ScreenRoleModal.svelte"
-  import sanitizeUrl from "builder/store/screenTemplates/utils/sanitizeUrl"
+  import sanitizeUrl from "helpers/sanitizeUrl"
   import { Modal, notifications } from "@budibase/bbui"
   import { screenStore, navigationStore, tables } from "stores/builder"
   import { get } from "svelte/store"
-  import getTemplates from "builder/store/screenTemplates"
+  import getTemplates from "templates"
   import { Roles } from "constants/backend"
   import { capitalise } from "helpers"
   import { goto } from "@roxi/routify"

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte

@@ -4,7 +4,7 @@
   import ICONS from "components/backend/DatasourceNavigator/icons"
   import { IntegrationNames } from "constants"
   import { onMount } from "svelte"
-  import rowListScreen from "builder/store/screenTemplates/rowListScreen"
+  import rowListScreen from "templates/rowListScreen"
   import DatasourceTemplateRow from "./DatasourceTemplateRow.svelte"
 
   export let mode

packages/builder/src/pages/builder/portal/account/upgrade.svelte

@@ -16,7 +16,7 @@
   import { auth, admin } from "stores/portal"
   import { redirect } from "@roxi/routify"
   import { processStringSync } from "@budibase/string-templates"
-  import DeleteLicenseKeyModal from "../../../../components/portal/licensing/DeleteLicenseKeyModal.svelte"
+  import DeleteLicenseKeyModal from "components/portal/licensing/DeleteLicenseKeyModal.svelte"
   import { API } from "api"
   import { onMount } from "svelte"
   import { sdk } from "@budibase/shared-core"

packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte

@@ -5,7 +5,6 @@
   import { notifications } from "@budibase/bbui"
   import { SplitPage } from "@budibase/frontend-core"
   import { API } from "api"
-  import { database } from "stores/builder"
   import { auth, admin } from "stores/portal"
 
   let name = "My first app"
@@ -26,9 +25,6 @@
 
     const createdApp = await API.createApp(data)
 
-    // Select Correct Application/DB in prep for creating user
-    database.syncAppDatabase(createdApp)
-
     // Update checklist - in case first app
     await admin.init()
 

packages/builder/src/pages/builder/portal/users/users/_components/OnboardingTypeModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { ModalContent, Body, Layout, Icon } from "@budibase/bbui"
-  import { OnboardingType } from "../../../../../../constants"
+  import { OnboardingType } from "constants"
 
   export let chooseCreationType
 

packages/builder/src/pages/builder/portal/users/users/index.svelte

@@ -36,7 +36,7 @@
   import { get } from "svelte/store"
   import { Constants, Utils, fetchData } from "@budibase/frontend-core"
   import { API } from "api"
-  import { OnboardingType } from "../../../../../constants"
+  import { OnboardingType } from "constants"
   import ScimBanner from "../_components/SCIMBanner.svelte"
   import { sdk } from "@budibase/shared-core"
 

packages/builder/src/pages/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { auth } from "../stores/portal"
+  import { auth } from "stores/portal"
   import { onMount } from "svelte"
   import { notifications } from "@budibase/bbui"
 

packages/builder/src/stores/builder/automations.js

@@ -4,7 +4,7 @@ import { cloneDeep } from "lodash/fp"
 import { generate } from "shortid"
 import { createHistoryStore } from "stores/builder/history"
 import { notifications } from "@budibase/bbui"
-import { updateReferencesInObject } from "builder/dataBinding"
+import { updateReferencesInObject } from "dataBinding"
 
 const initialAutomationState = {
   automations: [],

packages/builder/src/stores/builder/components.js

@@ -11,18 +11,23 @@ import {
   findComponentParent,
   findAllMatchingComponents,
   makeComponentUnique,
-} from "stores/builder/components/utils"
+} from "helpers/components"
 import { getComponentFieldOptions } from "helpers/formFields"
-import { selectedScreen } from "../screens"
+import { selectedScreen } from "./screens"
-import { screenStore, appStore, previewStore, tables } from "stores/builder"
+import {
-import { buildFormSchema, getSchemaForDatasource } from "builder/dataBinding"
+  screenStore,
+  appStore,
+  previewStore,
+  tables,
+} from "stores/builder/index"
+import { buildFormSchema, getSchemaForDatasource } from "dataBinding"
 import {
   BUDIBASE_INTERNAL_DB_ID,
   DEFAULT_BB_DATASOURCE_ID,
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
 } from "constants/backend"
-import BudiStore from "../BudiStore"
+import BudiStore from "./BudiStore"
 import { Utils } from "@budibase/frontend-core"
 
 export const INITIAL_COMPONENTS_STATE = {
@@ -67,39 +72,6 @@ export class ComponentStore extends BudiStore {
     this.isCached = this.isCached.bind(this)
     this.cacheSettings = this.cacheSettings.bind(this)
     this.getComponentSettings = this.getComponentSettings.bind(this)
-
-    this.selected = derived(
-      [this.store, selectedScreen],
-      ([$store, $selectedScreen]) => {
-        if (
-          $selectedScreen &&
-          $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
-        ) {
-          return $selectedScreen?.props
-        }
-        if (!$selectedScreen || !$store.selectedComponentId) {
-          return null
-        }
-        const selected = findComponent(
-          $selectedScreen?.props,
-          $store.selectedComponentId
-        )
-
-        const clone = selected ? cloneDeep(selected) : selected
-        this.migrateSettings(clone)
-        return clone
-      }
-    )
-
-    this.selectedComponentPath = derived(
-      [this.store, selectedScreen],
-      ([$store, $selectedScreen]) => {
-        return findComponentPath(
-          $selectedScreen?.props,
-          $store.selectedComponentId
-        ).map(component => component._id)
-      }
-    )
   }
 
   /**
@@ -197,7 +169,7 @@ export class ComponentStore extends BudiStore {
     const componentPrefix = "@budibase/standard-components"
     let migrated = false
 
-    if (enrichedComponent?._component == `${componentPrefix}/formblock`) {
+    if (enrichedComponent?._component === `${componentPrefix}/formblock`) {
       // Use default config if the 'buttons' prop has never been initialised
       if (!("buttons" in enrichedComponent)) {
         enrichedComponent["buttons"] =
@@ -1080,11 +1052,11 @@ export class ComponentStore extends BudiStore {
    * @param {object} definition
    * @example
    * '@budibase/standard-components/container'
-   * @returns {boolean}
+   * @returns {array} the settings
    */
   cacheSettings(componentType, definition) {
     let settings = []
-    if (definition && componentType) {
+    if (definition) {
       settings = definition.settings?.filter(setting => !setting.section) ?? []
       definition.settings
         ?.filter(setting => setting.section)
@@ -1096,14 +1068,15 @@ export class ComponentStore extends BudiStore {
             }))
           )
         })
-      this.update(state => ({
-        ...state,
-        settingsCache: {
-          ...state.settingsCache,
-          [componentType]: settings,
-        },
-      }))
     }
+    this.update(state => ({
+      ...state,
+      settingsCache: {
+        ...state.settingsCache,
+        [componentType]: settings,
+      },
+    }))
+    return settings
   }
 
   /**
@@ -1129,18 +1102,49 @@ export class ComponentStore extends BudiStore {
       componentType = `@budibase/standard-components/${componentType}`
     }
 
-    if (this.isCached(componentType)) {
+    // Use cached value if possible
-      return get(this.store).settingsCache[componentType]
+    const cachedValue = get(this.store).settingsCache[componentType]
-    } else {
+    if (cachedValue) {
-      const def = this.getDefinition(componentType)
+      return cachedValue
-      this.cacheSettings(componentType, def)
-      return get(this.store).settingsCache[componentType]
     }
+
+    // Otherwise cache and return new value
+    const def = this.getDefinition(componentType)
+    return this.cacheSettings(componentType, def)
   }
 }
 
 export const componentStore = new ComponentStore()
 
-export const selectedComponent = componentStore.selected
+export const selectedComponent = derived(
+  [componentStore, selectedScreen],
+  ([$store, $selectedScreen]) => {
+    if (
+      $selectedScreen &&
+      $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
+    ) {
+      return $selectedScreen?.props
+    }
+    if (!$selectedScreen || !$store.selectedComponentId) {
+      return null
+    }
+    const selected = findComponent(
+      $selectedScreen?.props,
+      $store.selectedComponentId
+    )
 
-export const selectedComponentPath = componentStore.selectedComponentPath
+    const clone = selected ? cloneDeep(selected) : selected
+    componentStore.migrateSettings(clone)
+    return clone
+  }
+)
+
+export const selectedComponentPath = derived(
+  [componentStore, selectedScreen],
+  ([$store, $selectedScreen]) => {
+    return findComponentPath(
+      $selectedScreen?.props,
+      $store.selectedComponentId
+    ).map(component => component._id)
+  }
+)

packages/builder/src/stores/builder/database.js

@@ -1,16 +0,0 @@
-import { writable } from "svelte/store"
-
-export const createDatabaseStore = () => {
-  const store = writable({})
-
-  const syncAppDatabase = application => {
-    store.set({ ...application.instance })
-  }
-
-  return {
-    subscribe: store.subscribe,
-    syncAppDatabase,
-  }
-}
-
-export const database = createDatabaseStore()

packages/builder/src/stores/builder/index.js

@@ -7,12 +7,7 @@ import {
 } from "./components"
 import { navigationStore } from "./navigation.js"
 import { themeStore } from "./theme.js"
-import {
+import { screenStore, selectedScreen, sortedScreens } from "./screens.js"
-  screenStore,
-  selectedScreen,
-  currentAsset,
-  sortedScreens,
-} from "./screens.js"
 import { builderStore } from "./builder.js"
 import { hoverStore } from "./hover.js"
 import { previewStore } from "./preview.js"
@@ -23,7 +18,6 @@ import {
 } from "./automations.js"
 import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
-import { database } from "./database.js"
 
 // Backend
 import { tables } from "./tables"
@@ -39,7 +33,6 @@ import { flags } from "./flags"
 
 export {
   layoutStore,
-  database,
   appStore,
   componentStore,
   navigationStore,
@@ -52,7 +45,6 @@ export {
   automationStore,
   selectedAutomation,
   automationHistoryStore,
-  currentAsset,
   sortedScreens,
   userStore,
   isOnlyUser,
@@ -82,13 +74,15 @@ export const reset = () => {
 }
 
 const refreshBuilderData = async () => {
-  await automationStore.actions.fetch()
+  await Promise.all([
-  await datasources.init()
+    automationStore.actions.fetch(),
-  await integrations.init()
+    datasources.init(),
-  await queries.init()
+    integrations.init(),
-  await tables.init()
+    queries.init(),
-  await roles.fetch()
+    tables.init(),
-  await flags.fetch()
+    roles.fetch(),
+    flags.fetch(),
+  ])
 }
 
 const resetBuilderHistory = () => {
@@ -98,27 +92,16 @@ const resetBuilderHistory = () => {
 
 export const initialise = async pkg => {
   const { application } = pkg
-
+  await Promise.all([
-  appStore.syncAppPackage(pkg)
+    appStore.syncAppRoutes(),
-
+    componentStore.refreshDefinitions(application?.appId),
-  appStore.syncAppRoutes()
+  ])
-
   builderStore.init(application)
-
+  appStore.syncAppPackage(pkg)
   navigationStore.syncAppNavigation(application?.navigation)
-
-  await componentStore.refreshDefinitions(application?.appId)
-
   themeStore.syncAppTheme(application)
-
   screenStore.syncAppScreens(pkg)
-
   layoutStore.syncAppLayouts(pkg)
-
-  // required for api comms
-  database.syncAppDatabase(application)
-
   resetBuilderHistory()
-
   await refreshBuilderData()
 }

packages/builder/src/stores/builder/layouts.js

@@ -16,12 +16,6 @@ export class LayoutStore extends BudiStore {
     this.syncAppLayouts = this.syncAppLayouts.bind(this)
     this.select = this.select.bind(this)
     this.deleteLayout = this.deleteLayout.bind(this)
-
-    this.selectedLayout = derived(this.store, $store => {
-      return $store.layouts?.find(
-        layout => layout._id === $store.selectedLayoutId
-      )
-    })
   }
 
   reset() {
@@ -78,4 +72,6 @@ export class LayoutStore extends BudiStore {
 
 export const layoutStore = new LayoutStore()
 
-export const selectedLayout = layoutStore.selectedLayout
+export const selectedLayout = derived(layoutStore, $store => {
+  return $store.layouts?.find(layout => layout._id === $store.selectedLayoutId)
+})

packages/builder/src/stores/builder/screens.js

@@ -2,7 +2,7 @@ import { derived, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import { Helpers } from "@budibase/bbui"
 import { RoleUtils, Utils } from "@budibase/frontend-core"
-import { findAllMatchingComponents } from "stores/builder/components/utils"
+import { findAllMatchingComponents } from "helpers/components"
 import {
   layoutStore,
   appStore,
@@ -39,12 +39,6 @@ export class ScreenStore extends BudiStore {
     this.sequentialScreenPatch = this.sequentialScreenPatch.bind(this)
     this.removeCustomLayout = this.removeCustomLayout.bind(this)
 
-    this.selected = derived(this.store, $store => {
-      return get(this.store).screens.find(
-        screen => screen._id === $store.selectedScreenId
-      )
-    })
-
     this.history = createHistoryStore({
       getDoc: id => get(this.store).screens?.find(screen => screen._id === id),
       selectDoc: this.select,
@@ -485,9 +479,9 @@ export class ScreenStore extends BudiStore {
 
 export const screenStore = new ScreenStore()
 
-export const selectedScreen = screenStore.selected
+export const selectedScreen = derived(screenStore, $store => {
-
+  return $store.screens.find(screen => screen._id === $store.selectedScreenId)
-export const currentAsset = selectedScreen
+})
 
 export const sortedScreens = derived(screenStore, $screenStore => {
   return $screenStore.screens.slice().sort((a, b) => {

packages/builder/src/stores/builder/tests/fixtures/index.js

@@ -1,6 +1,6 @@
 import { v4 } from "uuid"
-import { Component } from "builder/store/screenTemplates/utils/Component"
+import { Component } from "templates/Component"
-import { Screen } from "builder/store/screenTemplates/utils/Screen"
+import { Screen } from "templates/Screen"
 import { get } from "svelte/store"
 import {
   BUDIBASE_INTERNAL_DB_ID,

packages/builder/src/stores/portal/apps.js

@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { AppStatus } from "../../constants"
+import { AppStatus } from "constants"
 import { API } from "api"
 
 // properties that should always come from the dev app, not the deployed

packages/builder/src/templates/commonComponents.js

@@ -1,5 +1,5 @@
 import { Component } from "./Component"
-import { getSchemaForDatasource } from "../../../dataBinding"
+import { getSchemaForDatasource } from "dataBinding"
 
 const fieldTypeToComponentMap = {
   string: "stringfield",

packages/builder/src/templates/createFromScratchScreen.js

@@ -1,4 +1,4 @@
-import { Screen } from "./utils/Screen"
+import { Screen } from "./Screen"
 
 export default {
   name: `Create from scratch`,

packages/builder/src/templates/rowListScreen.js

@@ -1,6 +1,6 @@
-import sanitizeUrl from "./utils/sanitizeUrl"
+import sanitizeUrl from "helpers/sanitizeUrl"
-import { Screen } from "./utils/Screen"
+import { Screen } from "./Screen"
-import { Component } from "./utils/Component"
+import { Component } from "./Component"
 
 export default function (datasources, mode = "table") {
   if (!Array.isArray(datasources)) {