Merge branch 'master' into BUDI-9011

.github/workflows/budibase_ci.yml

@@ -202,6 +202,9 @@ jobs:
 
       - run: yarn --frozen-lockfile
 
+      - name: Build client library - necessary for component tests
+        run: yarn build:client
+
       - name: Set up PostgreSQL 16
         if: matrix.datasource == 'postgres'
         run: |

hosting/letsencrypt/nginx-ssl.conf

@@ -41,6 +41,11 @@ server {
     }
 
     location ~ ^/api/(system|admin|global)/ {
+        # Enable buffering for potentially large OIDC configs
+        proxy_buffering on;
+        proxy_buffer_size 16k;
+        proxy_buffers 4 32k;
+        
         proxy_pass      http://127.0.0.1:4002;
     }
 

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.4.4",
+  "version": "3.4.7",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {

package.json

@@ -18,6 +18,7 @@
     "eslint-plugin-jest": "28.9.0",
     "eslint-plugin-local-rules": "3.0.2",
     "eslint-plugin-svelte": "2.46.1",
+    "svelte-preprocess": "^6.0.3",
     "husky": "^8.0.3",
     "kill-port": "^1.6.1",
     "lerna": "7.4.2",
@@ -67,6 +68,7 @@
     "lint:fix:eslint": "eslint --fix --max-warnings=0 packages",
     "lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\" && prettier --write \"examples/**/*.{js,ts,svelte}\"",
     "lint:fix": "yarn run lint:fix:eslint && yarn run lint:fix:prettier",
+    "build:client": "lerna run --stream build --scope @budibase/client",
     "build:specs": "lerna run --stream specs",
     "build:docker:airgap": "node hosting/scripts/airgapped/airgappedDockerBuild",
     "build:docker:airgap:single": "SINGLE_IMAGE=1 node hosting/scripts/airgapped/airgappedDockerBuild",

packages/backend-core/__mocks__/@aws-sdk/client-s3.ts

@@ -0,0 +1,28 @@
+export class S3 {
+  headBucket() {
+    return jest.fn().mockReturnThis()
+  }
+  deleteObject() {
+    return jest.fn().mockReturnThis()
+  }
+  deleteObjects() {
+    return jest.fn().mockReturnThis()
+  }
+  createBucket() {
+    return jest.fn().mockReturnThis()
+  }
+  getObject() {
+    return jest.fn().mockReturnThis()
+  }
+  listObject() {
+    return jest.fn().mockReturnThis()
+  }
+  promise() {
+    return jest.fn().mockReturnThis()
+  }
+  catch() {
+    return jest.fn()
+  }
+}
+
+export const GetObjectCommand = jest.fn(inputs => ({ inputs }))

packages/backend-core/__mocks__/@aws-sdk/s3-request-presigner.ts

@@ -0,0 +1,4 @@
+export const getSignedUrl = jest.fn((_, cmd) => {
+  const { inputs } = cmd
+  return `http://s3.example.com/${inputs?.Bucket}/${inputs?.Key}`
+})

packages/backend-core/__mocks__/aws-sdk.ts

@@ -1,19 +0,0 @@
-const mockS3 = {
-  headBucket: jest.fn().mockReturnThis(),
-  deleteObject: jest.fn().mockReturnThis(),
-  deleteObjects: jest.fn().mockReturnThis(),
-  createBucket: jest.fn().mockReturnThis(),
-  getObject: jest.fn().mockReturnThis(),
-  listObject: jest.fn().mockReturnThis(),
-  getSignedUrl: jest.fn((operation: string, params: any) => {
-    return `http://s3.example.com/${params.Bucket}/${params.Key}`
-  }),
-  promise: jest.fn().mockReturnThis(),
-  catch: jest.fn(),
-}
-
-const AWS = {
-  S3: jest.fn(() => mockS3),
-}
-
-export default AWS

packages/backend-core/package.json

@@ -30,6 +30,9 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "3.709.0",
+    "@aws-sdk/lib-storage": "3.709.0",
+    "@aws-sdk/s3-request-presigner": "3.709.0",
     "@budibase/nano": "10.1.5",
     "@budibase/pouchdb-replication-stream": "1.2.11",
     "@budibase/shared-core": "*",
@@ -71,11 +74,13 @@
   "devDependencies": {
     "@jest/types": "^29.6.3",
     "@shopify/jest-koa-mocks": "5.1.1",
+    "@smithy/types": "4.0.0",
     "@swc/core": "1.3.71",
     "@swc/jest": "0.2.27",
     "@types/chance": "1.1.3",
     "@types/cookies": "0.7.8",
     "@types/jest": "29.5.5",
+    "@types/koa": "2.13.4",
     "@types/lodash": "4.14.200",
     "@types/node-fetch": "2.6.4",
     "@types/pouchdb": "6.4.2",
@@ -83,7 +88,6 @@
     "@types/semver": "7.3.7",
     "@types/tar-fs": "2.0.1",
     "@types/uuid": "8.3.4",
-    "@types/koa": "2.13.4",
     "chance": "1.1.8",
     "ioredis-mock": "8.9.0",
     "jest": "29.7.0",

packages/backend-core/src/docIds/params.ts

@@ -8,6 +8,10 @@ import {
 import { getProdAppID } from "./conversions"
 import { DatabaseQueryOpts, VirtualDocumentType } from "@budibase/types"
 
+const EXTERNAL_TABLE_ID_REGEX = new RegExp(
+  `^${DocumentType.DATASOURCE_PLUS}_(.+)__(.+)$`
+)
+
 /**
  * If creating DB allDocs/query params with only a single top level ID this can be used, this
  * is usually the case as most of our docs are top level e.g. tables, automations, users and so on.
@@ -64,6 +68,11 @@ export function getQueryIndex(viewName: ViewName) {
   return `database/${viewName}`
 }
 
+export const isExternalTableId = (id: string): boolean => {
+  const matches = id.match(EXTERNAL_TABLE_ID_REGEX)
+  return !!id && matches !== null
+}
+
 /**
  * Check if a given ID is that of a table.
  */
@@ -72,7 +81,7 @@ export const isTableId = (id: string): boolean => {
   return (
     !!id &&
     (id.startsWith(`${DocumentType.TABLE}${SEPARATOR}`) ||
-      id.startsWith(`${DocumentType.DATASOURCE_PLUS}${SEPARATOR}`))
+      isExternalTableId(id))
   )
 }
 

packages/backend-core/src/environment.ts

@@ -154,7 +154,7 @@ const environment = {
   MINIO_ACCESS_KEY: process.env.MINIO_ACCESS_KEY,
   MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY,
   AWS_SESSION_TOKEN: process.env.AWS_SESSION_TOKEN,
-  AWS_REGION: process.env.AWS_REGION,
+  AWS_REGION: process.env.AWS_REGION || "eu-west-1",
   MINIO_URL: process.env.MINIO_URL,
   MINIO_ENABLED: process.env.MINIO_ENABLED || 1,
   INTERNAL_API_KEY: process.env.INTERNAL_API_KEY,

packages/backend-core/src/objectStore/buckets/app.ts

@@ -13,7 +13,7 @@ export function clientLibraryPath(appId: string) {
  * due to issues with the domain we were unable to continue doing this - keeping
  * incase we are able to switch back to CDN path again in future.
  */
-export function clientLibraryCDNUrl(appId: string, version: string) {
+export async function clientLibraryCDNUrl(appId: string, version: string) {
   let file = clientLibraryPath(appId)
   if (env.CLOUDFRONT_CDN) {
     // append app version to bust the cache
@@ -24,7 +24,7 @@ export function clientLibraryCDNUrl(appId: string, version: string) {
     // file is public
     return cloudfront.getUrl(file)
   } else {
-    return objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, file)
+    return await objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, file)
   }
 }
 
@@ -44,10 +44,10 @@ export function clientLibraryUrl(appId: string, version: string) {
   return `/api/assets/client?${qs.encode(qsParams)}`
 }
 
-export function getAppFileUrl(s3Key: string) {
+export async function getAppFileUrl(s3Key: string) {
   if (env.CLOUDFRONT_CDN) {
     return cloudfront.getPresignedUrl(s3Key)
   } else {
-    return objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, s3Key)
+    return await objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, s3Key)
   }
 }

packages/backend-core/src/objectStore/buckets/global.ts

@@ -5,7 +5,11 @@ import * as cloudfront from "../cloudfront"
 
 // URLs
 
-export const getGlobalFileUrl = (type: string, name: string, etag?: string) => {
+export const getGlobalFileUrl = async (
+  type: string,
+  name: string,
+  etag?: string
+) => {
   let file = getGlobalFileS3Key(type, name)
   if (env.CLOUDFRONT_CDN) {
     if (etag) {
@@ -13,7 +17,7 @@ export const getGlobalFileUrl = (type: string, name: string, etag?: string) => {
     }
     return cloudfront.getPresignedUrl(file)
   } else {
-    return objectStore.getPresignedUrl(env.GLOBAL_BUCKET_NAME, file)
+    return await objectStore.getPresignedUrl(env.GLOBAL_BUCKET_NAME, file)
   }
 }
 

packages/backend-core/src/objectStore/buckets/plugins.ts

@@ -6,23 +6,25 @@ import { Plugin } from "@budibase/types"
 
 // URLS
 
-export function enrichPluginURLs(plugins?: Plugin[]): Plugin[] {
+export async function enrichPluginURLs(plugins?: Plugin[]): Promise<Plugin[]> {
   if (!plugins || !plugins.length) {
     return []
   }
-  return plugins.map(plugin => {
-    const jsUrl = getPluginJSUrl(plugin)
-    const iconUrl = getPluginIconUrl(plugin)
-    return { ...plugin, jsUrl, iconUrl }
-  })
+  return await Promise.all(
+    plugins.map(async plugin => {
+      const jsUrl = await getPluginJSUrl(plugin)
+      const iconUrl = await getPluginIconUrl(plugin)
+      return { ...plugin, jsUrl, iconUrl }
+    })
+  )
 }
 
-function getPluginJSUrl(plugin: Plugin) {
+async function getPluginJSUrl(plugin: Plugin) {
   const s3Key = getPluginJSKey(plugin)
   return getPluginUrl(s3Key)
 }
 
-function getPluginIconUrl(plugin: Plugin): string | undefined {
+async function getPluginIconUrl(plugin: Plugin) {
   const s3Key = getPluginIconKey(plugin)
   if (!s3Key) {
     return
@@ -30,11 +32,11 @@ function getPluginIconUrl(plugin: Plugin): string | undefined {
   return getPluginUrl(s3Key)
 }
 
-function getPluginUrl(s3Key: string) {
+async function getPluginUrl(s3Key: string) {
   if (env.CLOUDFRONT_CDN) {
     return cloudfront.getPresignedUrl(s3Key)
   } else {
-    return objectStore.getPresignedUrl(env.PLUGIN_BUCKET_NAME, s3Key)
+    return await objectStore.getPresignedUrl(env.PLUGIN_BUCKET_NAME, s3Key)
   }
 }
 

packages/backend-core/src/objectStore/buckets/tests/app.spec.ts

@@ -93,25 +93,25 @@ describe("app", () => {
         testEnv.multiTenant()
       })
 
-      it("gets url with embedded minio", () => {
+      it("gets url with embedded minio", async () => {
         testEnv.withMinio()
-        const url = getAppFileUrl()
+        const url = await getAppFileUrl()
         expect(url).toBe(
           "/files/signed/prod-budi-app-assets/app_123/attachments/image.jpeg"
         )
       })
 
-      it("gets url with custom S3", () => {
+      it("gets url with custom S3", async () => {
         testEnv.withS3()
-        const url = getAppFileUrl()
+        const url = await getAppFileUrl()
         expect(url).toBe(
           "http://s3.example.com/prod-budi-app-assets/app_123/attachments/image.jpeg"
         )
       })
 
-      it("gets url with cloudfront + s3", () => {
+      it("gets url with cloudfront + s3", async () => {
         testEnv.withCloudfront()
-        const url = getAppFileUrl()
+        const url = await getAppFileUrl()
         // omit rest of signed params
         expect(
           url.includes("http://cf.example.com/app_123/attachments/image.jpeg?")
@@ -126,8 +126,8 @@ describe("app", () => {
 
       it("gets url with embedded minio", async () => {
         testEnv.withMinio()
-        await testEnv.withTenant(() => {
-          const url = getAppFileUrl()
+        await testEnv.withTenant(async () => {
+          const url = await getAppFileUrl()
           expect(url).toBe(
             "/files/signed/prod-budi-app-assets/app_123/attachments/image.jpeg"
           )
@@ -136,8 +136,8 @@ describe("app", () => {
 
       it("gets url with custom S3", async () => {
         testEnv.withS3()
-        await testEnv.withTenant(() => {
-          const url = getAppFileUrl()
+        await testEnv.withTenant(async () => {
+          const url = await getAppFileUrl()
           expect(url).toBe(
             "http://s3.example.com/prod-budi-app-assets/app_123/attachments/image.jpeg"
           )
@@ -146,8 +146,8 @@ describe("app", () => {
 
       it("gets url with cloudfront + s3", async () => {
         testEnv.withCloudfront()
-        await testEnv.withTenant(() => {
-          const url = getAppFileUrl()
+        await testEnv.withTenant(async () => {
+          const url = await getAppFileUrl()
           // omit rest of signed params
           expect(
             url.includes(

packages/backend-core/src/objectStore/buckets/tests/global.spec.ts

@@ -3,7 +3,7 @@ import { testEnv } from "../../../../tests/extra"
 
 describe("global", () => {
   describe("getGlobalFileUrl", () => {
-    function getGlobalFileUrl() {
+    async function getGlobalFileUrl() {
       return global.getGlobalFileUrl("settings", "logoUrl", "etag")
     }
 
@@ -12,21 +12,21 @@ describe("global", () => {
         testEnv.singleTenant()
       })
 
-      it("gets url with embedded minio", () => {
+      it("gets url with embedded minio", async () => {
         testEnv.withMinio()
-        const url = getGlobalFileUrl()
+        const url = await getGlobalFileUrl()
         expect(url).toBe("/files/signed/global/settings/logoUrl")
       })
 
-      it("gets url with custom S3", () => {
+      it("gets url with custom S3", async () => {
         testEnv.withS3()
-        const url = getGlobalFileUrl()
+        const url = await getGlobalFileUrl()
         expect(url).toBe("http://s3.example.com/global/settings/logoUrl")
       })
 
-      it("gets url with cloudfront + s3", () => {
+      it("gets url with cloudfront + s3", async () => {
         testEnv.withCloudfront()
-        const url = getGlobalFileUrl()
+        const url = await getGlobalFileUrl()
         // omit rest of signed params
         expect(
           url.includes("http://cf.example.com/settings/logoUrl?etag=etag&")
@@ -41,16 +41,16 @@ describe("global", () => {
 
       it("gets url with embedded minio", async () => {
         testEnv.withMinio()
-        await testEnv.withTenant(tenantId => {
-          const url = getGlobalFileUrl()
+        await testEnv.withTenant(async tenantId => {
+          const url = await getGlobalFileUrl()
           expect(url).toBe(`/files/signed/global/${tenantId}/settings/logoUrl`)
         })
       })
 
       it("gets url with custom S3", async () => {
         testEnv.withS3()
-        await testEnv.withTenant(tenantId => {
-          const url = getGlobalFileUrl()
+        await testEnv.withTenant(async tenantId => {
+          const url = await getGlobalFileUrl()
           expect(url).toBe(
             `http://s3.example.com/global/${tenantId}/settings/logoUrl`
           )
@@ -59,8 +59,8 @@ describe("global", () => {
 
       it("gets url with cloudfront + s3", async () => {
         testEnv.withCloudfront()
-        await testEnv.withTenant(tenantId => {
-          const url = getGlobalFileUrl()
+        await testEnv.withTenant(async tenantId => {
+          const url = await getGlobalFileUrl()
           // omit rest of signed params
           expect(
             url.includes(

packages/backend-core/src/objectStore/buckets/tests/plugins.spec.ts

@@ -6,8 +6,8 @@ describe("plugins", () => {
   describe("enrichPluginURLs", () => {
     const plugin = structures.plugins.plugin()
 
-    function getEnrichedPluginUrls() {
-      const enriched = plugins.enrichPluginURLs([plugin])[0]
+    async function getEnrichedPluginUrls() {
+      const enriched = (await plugins.enrichPluginURLs([plugin]))[0]
       return {
         jsUrl: enriched.jsUrl!,
         iconUrl: enriched.iconUrl!,
@@ -19,9 +19,9 @@ describe("plugins", () => {
         testEnv.singleTenant()
       })
 
-      it("gets url with embedded minio", () => {
+      it("gets url with embedded minio", async () => {
         testEnv.withMinio()
-        const urls = getEnrichedPluginUrls()
+        const urls = await getEnrichedPluginUrls()
         expect(urls.jsUrl).toBe(
           `/files/signed/plugins/${plugin.name}/plugin.min.js`
         )
@@ -30,9 +30,9 @@ describe("plugins", () => {
         )
       })
 
-      it("gets url with custom S3", () => {
+      it("gets url with custom S3", async () => {
         testEnv.withS3()
-        const urls = getEnrichedPluginUrls()
+        const urls = await getEnrichedPluginUrls()
         expect(urls.jsUrl).toBe(
           `http://s3.example.com/plugins/${plugin.name}/plugin.min.js`
         )
@@ -41,9 +41,9 @@ describe("plugins", () => {
         )
       })
 
-      it("gets url with cloudfront + s3", () => {
+      it("gets url with cloudfront + s3", async () => {
         testEnv.withCloudfront()
-        const urls = getEnrichedPluginUrls()
+        const urls = await getEnrichedPluginUrls()
         // omit rest of signed params
         expect(
           urls.jsUrl.includes(
@@ -65,8 +65,8 @@ describe("plugins", () => {
 
       it("gets url with embedded minio", async () => {
         testEnv.withMinio()
-        await testEnv.withTenant(tenantId => {
-          const urls = getEnrichedPluginUrls()
+        await testEnv.withTenant(async tenantId => {
+          const urls = await getEnrichedPluginUrls()
           expect(urls.jsUrl).toBe(
             `/files/signed/plugins/${tenantId}/${plugin.name}/plugin.min.js`
           )
@@ -78,8 +78,8 @@ describe("plugins", () => {
 
       it("gets url with custom S3", async () => {
         testEnv.withS3()
-        await testEnv.withTenant(tenantId => {
-          const urls = getEnrichedPluginUrls()
+        await testEnv.withTenant(async tenantId => {
+          const urls = await getEnrichedPluginUrls()
           expect(urls.jsUrl).toBe(
             `http://s3.example.com/plugins/${tenantId}/${plugin.name}/plugin.min.js`
           )
@@ -91,8 +91,8 @@ describe("plugins", () => {
 
       it("gets url with cloudfront + s3", async () => {
         testEnv.withCloudfront()
-        await testEnv.withTenant(tenantId => {
-          const urls = getEnrichedPluginUrls()
+        await testEnv.withTenant(async tenantId => {
+          const urls = await getEnrichedPluginUrls()
           // omit rest of signed params
           expect(
             urls.jsUrl.includes(

packages/backend-core/src/objectStore/objectStore.ts

@@ -1,6 +1,15 @@
 const sanitize = require("sanitize-s3-objectkey")
 
-import AWS from "aws-sdk"
+import {
+  HeadObjectCommandOutput,
+  PutObjectCommandInput,
+  S3,
+  S3ClientConfig,
+  GetObjectCommand,
+  _Object as S3Object,
+} from "@aws-sdk/client-s3"
+import { Upload } from "@aws-sdk/lib-storage"
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner"
 import stream, { Readable } from "stream"
 import fetch from "node-fetch"
 import tar from "tar-fs"
@@ -13,8 +22,8 @@ import { bucketTTLConfig, budibaseTempDir } from "./utils"
 import { v4 } from "uuid"
 import { APP_PREFIX, APP_DEV_PREFIX } from "../db"
 import fsp from "fs/promises"
-import { HeadObjectOutput } from "aws-sdk/clients/s3"
 import { ReadableStream } from "stream/web"
+import { NodeJsClient } from "@smithy/types"
 
 const streamPipeline = promisify(stream.pipeline)
 // use this as a temporary store of buckets that are being created
@@ -84,26 +93,24 @@ export function sanitizeBucket(input: string) {
  * @constructor
  */
 export function ObjectStore(
-  bucket: string,
   opts: { presigning: boolean } = { presigning: false }
 ) {
-  const config: AWS.S3.ClientConfiguration = {
-    s3ForcePathStyle: true,
-    signatureVersion: "v4",
-    apiVersion: "2006-03-01",
-    accessKeyId: env.MINIO_ACCESS_KEY,
-    secretAccessKey: env.MINIO_SECRET_KEY,
+  const config: S3ClientConfig = {
+    forcePathStyle: true,
+    credentials: {
+      accessKeyId: env.MINIO_ACCESS_KEY!,
+      secretAccessKey: env.MINIO_SECRET_KEY!,
+    },
     region: env.AWS_REGION,
   }
-  if (bucket) {
-    config.params = {
-      Bucket: sanitizeBucket(bucket),
-    }
-  }
 
   // for AWS Credentials using temporary session token
   if (!env.MINIO_ENABLED && env.AWS_SESSION_TOKEN) {
-    config.sessionToken = env.AWS_SESSION_TOKEN
+    config.credentials = {
+      accessKeyId: env.MINIO_ACCESS_KEY!,
+      secretAccessKey: env.MINIO_SECRET_KEY!,
+      sessionToken: env.AWS_SESSION_TOKEN,
+    }
   }
 
   // custom S3 is in use i.e. minio
@@ -113,13 +120,13 @@ export function ObjectStore(
       // Normally a signed url will need to be generated with a specified host in mind.
       // To support dynamic hosts, e.g. some unknown self-hosted installation url,
       // use a predefined host. The host 'minio-service' is also forwarded to minio requests via nginx
-      config.endpoint = "minio-service"
+      config.endpoint = "http://minio-service"
     } else {
       config.endpoint = env.MINIO_URL
     }
   }
 
-  return new AWS.S3(config)
+  return new S3(config) as NodeJsClient<S3>
 }
 
 /**
@@ -132,26 +139,25 @@ export async function createBucketIfNotExists(
 ): Promise<{ created: boolean; exists: boolean }> {
   bucketName = sanitizeBucket(bucketName)
   try {
-    await client
-      .headBucket({
-        Bucket: bucketName,
-      })
-      .promise()
+    await client.headBucket({
+      Bucket: bucketName,
+    })
     return { created: false, exists: true }
   } catch (err: any) {
-    const promises: any = STATE.bucketCreationPromises
-    const doesntExist = err.statusCode === 404,
-      noAccess = err.statusCode === 403
+    const statusCode = err.statusCode || err.$response?.statusCode
+    const promises: Record<string, Promise<any> | undefined> =
+      STATE.bucketCreationPromises
+    const doesntExist = statusCode === 404,
+      noAccess = statusCode === 403
     if (promises[bucketName]) {
       await promises[bucketName]
       return { created: false, exists: true }
     } else if (doesntExist || noAccess) {
       if (doesntExist) {
-        promises[bucketName] = client
-          .createBucket({
-            Bucket: bucketName,
-          })
-          .promise()
+        promises[bucketName] = client.createBucket({
+          Bucket: bucketName,
+        })
+
         await promises[bucketName]
         delete promises[bucketName]
         return { created: true, exists: false }
@@ -180,25 +186,26 @@ export async function upload({
 
   const fileBytes = path ? (await fsp.open(path)).createReadStream() : body
 
-  const objectStore = ObjectStore(bucketName)
+  const objectStore = ObjectStore()
   const bucketCreated = await createBucketIfNotExists(objectStore, bucketName)
 
   if (ttl && bucketCreated.created) {
     let ttlConfig = bucketTTLConfig(bucketName, ttl)
-    await objectStore.putBucketLifecycleConfiguration(ttlConfig).promise()
+    await objectStore.putBucketLifecycleConfiguration(ttlConfig)
   }
 
   let contentType = type
-  if (!contentType) {
-    contentType = extension
-      ? CONTENT_TYPE_MAP[extension.toLowerCase()]
-      : CONTENT_TYPE_MAP.txt
-  }
-  const config: any = {
+  const finalContentType = contentType
+    ? contentType
+    : extension
+    ? CONTENT_TYPE_MAP[extension.toLowerCase()]
+    : CONTENT_TYPE_MAP.txt
+  const config: PutObjectCommandInput = {
     // windows file paths need to be converted to forward slashes for s3
+    Bucket: sanitizeBucket(bucketName),
     Key: sanitizeKey(filename),
-    Body: fileBytes,
-    ContentType: contentType,
+    Body: fileBytes as stream.Readable | Buffer,
+    ContentType: finalContentType,
   }
   if (metadata && typeof metadata === "object") {
     // remove any nullish keys from the metadata object, as these may be considered invalid
@@ -207,10 +214,15 @@ export async function upload({
         delete metadata[key]
       }
     }
-    config.Metadata = metadata
+    config.Metadata = metadata as Record<string, string>
   }
 
-  return objectStore.upload(config).promise()
+  const upload = new Upload({
+    client: objectStore,
+    params: config,
+  })
+
+  return upload.done()
 }
 
 /**
@@ -229,12 +241,12 @@ export async function streamUpload({
     throw new Error("Stream to upload is invalid/undefined")
   }
   const extension = filename.split(".").pop()
-  const objectStore = ObjectStore(bucketName)
+  const objectStore = ObjectStore()
   const bucketCreated = await createBucketIfNotExists(objectStore, bucketName)
 
   if (ttl && bucketCreated.created) {
     let ttlConfig = bucketTTLConfig(bucketName, ttl)
-    await objectStore.putBucketLifecycleConfiguration(ttlConfig).promise()
+    await objectStore.putBucketLifecycleConfiguration(ttlConfig)
   }
 
   // Set content type for certain known extensions
@@ -267,13 +279,15 @@ export async function streamUpload({
     ...extra,
   }
 
-  const details = await objectStore.upload(params).promise()
-  const headDetails = await objectStore
-    .headObject({
-      Bucket: bucket,
-      Key: objKey,
-    })
-    .promise()
+  const upload = new Upload({
+    client: objectStore,
+    params,
+  })
+  const details = await upload.done()
+  const headDetails = await objectStore.headObject({
+    Bucket: bucket,
+    Key: objKey,
+  })
   return {
     ...details,
     ContentLength: headDetails.ContentLength,
@@ -284,35 +298,46 @@ export async function streamUpload({
  * retrieves the contents of a file from the object store, if it is a known content type it
  * will be converted, otherwise it will be returned as a buffer stream.
  */
-export async function retrieve(bucketName: string, filepath: string) {
-  const objectStore = ObjectStore(bucketName)
+export async function retrieve(
+  bucketName: string,
+  filepath: string
+): Promise<string | stream.Readable> {
+  const objectStore = ObjectStore()
   const params = {
     Bucket: sanitizeBucket(bucketName),
     Key: sanitizeKey(filepath),
   }
-  const response: any = await objectStore.getObject(params).promise()
-  // currently these are all strings
+  const response = await objectStore.getObject(params)
+  if (!response.Body) {
+    throw new Error("Unable to retrieve object")
+  }
   if (STRING_CONTENT_TYPES.includes(response.ContentType)) {
-    return response.Body.toString("utf8")
+    return response.Body.transformToString()
   } else {
-    return response.Body
+    // this typecast is required - for some reason the AWS SDK V3 defines its own "ReadableStream"
+    // found in the @aws-sdk/types package which is meant to be the Node type, but due to the SDK
+    // supporting both the browser and Nodejs it is a polyfill which causes a type clash with Node.
+    const readableStream =
+      response.Body.transformToWebStream() as ReadableStream
+    return stream.Readable.fromWeb(readableStream)
   }
 }
 
-export async function listAllObjects(bucketName: string, path: string) {
-  const objectStore = ObjectStore(bucketName)
+export async function listAllObjects(
+  bucketName: string,
+  path: string
+): Promise<S3Object[]> {
+  const objectStore = ObjectStore()
   const list = (params: ListParams = {}) => {
-    return objectStore
-      .listObjectsV2({
-        ...params,
-        Bucket: sanitizeBucket(bucketName),
-        Prefix: sanitizeKey(path),
-      })
-      .promise()
+    return objectStore.listObjectsV2({
+      ...params,
+      Bucket: sanitizeBucket(bucketName),
+      Prefix: sanitizeKey(path),
+    })
   }
   let isTruncated = false,
     token,
-    objects: AWS.S3.Types.Object[] = []
+    objects: Object[] = []
   do {
     let params: ListParams = {}
     if (token) {
@@ -331,18 +356,19 @@ export async function listAllObjects(bucketName: string, path: string) {
 /**
  * Generate a presigned url with a default TTL of 1 hour
  */
-export function getPresignedUrl(
+export async function getPresignedUrl(
   bucketName: string,
   key: string,
   durationSeconds = 3600
 ) {
-  const objectStore = ObjectStore(bucketName, { presigning: true })
+  const objectStore = ObjectStore({ presigning: true })
   const params = {
     Bucket: sanitizeBucket(bucketName),
     Key: sanitizeKey(key),
-    Expires: durationSeconds,
   }
-  const url = objectStore.getSignedUrl("getObject", params)
+  const url = await getSignedUrl(objectStore, new GetObjectCommand(params), {
+    expiresIn: durationSeconds,
+  })
 
   if (!env.MINIO_ENABLED) {
     // return the full URL to the client
@@ -366,7 +392,11 @@ export async function retrieveToTmp(bucketName: string, filepath: string) {
   filepath = sanitizeKey(filepath)
   const data = await retrieve(bucketName, filepath)
   const outputPath = join(budibaseTempDir(), v4())
-  fs.writeFileSync(outputPath, data)
+  if (data instanceof stream.Readable) {
+    data.pipe(fs.createWriteStream(outputPath))
+  } else {
+    fs.writeFileSync(outputPath, data)
+  }
   return outputPath
 }
 
@@ -394,7 +424,7 @@ export async function retrieveDirectory(bucketName: string, path: string) {
     stream.pipe(writeStream)
     writePromises.push(
       new Promise((resolve, reject) => {
-        stream.on("finish", resolve)
+        writeStream.on("finish", resolve)
         stream.on("error", reject)
         writeStream.on("error", reject)
       })
@@ -408,17 +438,17 @@ export async function retrieveDirectory(bucketName: string, path: string) {
  * Delete a single file.
  */
 export async function deleteFile(bucketName: string, filepath: string) {
-  const objectStore = ObjectStore(bucketName)
+  const objectStore = ObjectStore()
   await createBucketIfNotExists(objectStore, bucketName)
   const params = {
     Bucket: bucketName,
     Key: sanitizeKey(filepath),
   }
-  return objectStore.deleteObject(params).promise()
+  return objectStore.deleteObject(params)
 }
 
 export async function deleteFiles(bucketName: string, filepaths: string[]) {
-  const objectStore = ObjectStore(bucketName)
+  const objectStore = ObjectStore()
   await createBucketIfNotExists(objectStore, bucketName)
   const params = {
     Bucket: bucketName,
@@ -426,7 +456,7 @@ export async function deleteFiles(bucketName: string, filepaths: string[]) {
       Objects: filepaths.map((path: any) => ({ Key: sanitizeKey(path) })),
     },
   }
-  return objectStore.deleteObjects(params).promise()
+  return objectStore.deleteObjects(params)
 }
 
 /**
@@ -438,13 +468,13 @@ export async function deleteFolder(
 ): Promise<any> {
   bucketName = sanitizeBucket(bucketName)
   folder = sanitizeKey(folder)
-  const client = ObjectStore(bucketName)
+  const client = ObjectStore()
   const listParams = {
     Bucket: bucketName,
     Prefix: folder,
   }
 
-  const existingObjectsResponse = await client.listObjects(listParams).promise()
+  const existingObjectsResponse = await client.listObjects(listParams)
   if (existingObjectsResponse.Contents?.length === 0) {
     return
   }
@@ -459,7 +489,7 @@ export async function deleteFolder(
     deleteParams.Delete.Objects.push({ Key: content.Key })
   })
 
-  const deleteResponse = await client.deleteObjects(deleteParams).promise()
+  const deleteResponse = await client.deleteObjects(deleteParams)
   // can only empty 1000 items at once
   if (deleteResponse.Deleted?.length === 1000) {
     return deleteFolder(bucketName, folder)
@@ -534,29 +564,33 @@ export async function getReadStream(
 ): Promise<Readable> {
   bucketName = sanitizeBucket(bucketName)
   path = sanitizeKey(path)
-  const client = ObjectStore(bucketName)
+  const client = ObjectStore()
   const params = {
     Bucket: bucketName,
     Key: path,
   }
-  return client.getObject(params).createReadStream()
+  const response = await client.getObject(params)
+  if (!response.Body || !(response.Body instanceof stream.Readable)) {
+    throw new Error("Unable to retrieve stream - invalid response")
+  }
+  return response.Body
 }
 
 export async function getObjectMetadata(
   bucket: string,
   path: string
-): Promise<HeadObjectOutput> {
+): Promise<HeadObjectCommandOutput> {
   bucket = sanitizeBucket(bucket)
   path = sanitizeKey(path)
 
-  const client = ObjectStore(bucket)
+  const client = ObjectStore()
   const params = {
     Bucket: bucket,
     Key: path,
   }
 
   try {
-    return await client.headObject(params).promise()
+    return await client.headObject(params)
   } catch (err: any) {
     throw new Error("Unable to retrieve metadata from object")
   }

packages/backend-core/src/objectStore/utils.ts

@@ -2,7 +2,10 @@ import path, { join } from "path"
 import { tmpdir } from "os"
 import fs from "fs"
 import env from "../environment"
-import { PutBucketLifecycleConfigurationRequest } from "aws-sdk/clients/s3"
+import {
+  LifecycleRule,
+  PutBucketLifecycleConfigurationCommandInput,
+} from "@aws-sdk/client-s3"
 import * as objectStore from "./objectStore"
 import {
   AutomationAttachment,
@@ -43,8 +46,8 @@ export function budibaseTempDir() {
 export const bucketTTLConfig = (
   bucketName: string,
   days: number
-): PutBucketLifecycleConfigurationRequest => {
-  const lifecycleRule = {
+): PutBucketLifecycleConfigurationCommandInput => {
+  const lifecycleRule: LifecycleRule = {
     ID: `${bucketName}-ExpireAfter${days}days`,
     Prefix: "",
     Status: "Enabled",

packages/backend-core/src/queue/inMemoryQueue.ts

@@ -199,6 +199,12 @@ class InMemoryQueue implements Partial<Queue> {
     return this as unknown as Queue
   }
 
+  off(event: string, callback: (...args: any[]) => void): Queue {
+    // @ts-expect-error - this callback can be one of many types
+    this._emitter.off(event, callback)
+    return this as unknown as Queue
+  }
+
   async count() {
     return this._messages.length
   }

packages/backend-core/src/users/db.ts

@@ -264,7 +264,9 @@ export class UserDB {
     const creatorsChange =
       (await isCreator(dbUser)) !== (await isCreator(user)) ? 1 : 0
     return UserDB.quotas.addUsers(change, creatorsChange, async () => {
-      await validateUniqueUser(email, tenantId)
+      if (!opts.isAccountHolder) {
+        await validateUniqueUser(email, tenantId)
+      }
 
       let builtUser = await UserDB.buildUser(user, opts, tenantId, dbUser)
       // don't allow a user to update its own roles/perms
@@ -569,6 +571,7 @@ export class UserDB {
       hashPassword: opts?.hashPassword,
       requirePassword: opts?.requirePassword,
       skipPasswordValidation: opts?.skipPasswordValidation,
+      isAccountHolder: true,
     })
   }
 

packages/bbui/src/Actions/click_outside.ts

@@ -93,7 +93,10 @@ const handleMouseDown = (e: MouseEvent) => {
 
 // Handle iframe clicks by detecting a loss of focus on the main window
 const handleBlur = () => {
-  if (document.activeElement?.tagName === "IFRAME") {
+  if (
+    document.activeElement &&
+    ["IFRAME", "BODY"].includes(document.activeElement.tagName)
+  ) {
     handleClick(
       new MouseEvent("click", { relatedTarget: document.activeElement })
     )

packages/builder/package.json

@@ -53,7 +53,7 @@
     "@budibase/shared-core": "*",
     "@budibase/string-templates": "*",
     "@budibase/types": "*",
-    "@codemirror/autocomplete": "^6.7.1",
+    "@codemirror/autocomplete": "6.9.0",
     "@codemirror/commands": "^6.2.4",
     "@codemirror/lang-javascript": "^6.1.8",
     "@codemirror/language": "^6.6.0",

packages/builder/src/components/backend/modals/DeleteDataConfirmationModal.svelte

@@ -151,6 +151,8 @@
     const screenCount = affectedScreens.length
     let message = `Removing ${source?.name} `
     let initialLength = message.length
+    const hasChanged = () => message.length !== initialLength
+
     if (sourceType === SourceType.TABLE) {
       const views = "views" in source ? Object.values(source?.views ?? []) : []
       message += `will delete its data${
@@ -169,10 +171,10 @@
         initialLength !== message.length
           ? ", and break connected screens:"
           : "will break connected screens:"
-    } else {
+    } else if (hasChanged()) {
       message += "."
     }
-    return message.length !== initialLength ? message : ""
+    return hasChanged() ? message : ""
   }
 </script>
 

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

@@ -45,10 +45,11 @@
   import { EditorModes } from "./"
   import { themeStore } from "@/stores/portal"
   import type { EditorMode } from "@budibase/types"
+  import type { BindingCompletion } from "@/types"
 
   export let label: string | undefined = undefined
   // TODO: work out what best type fits this
-  export let completions: any[] = []
+  export let completions: BindingCompletion[] = []
   export let mode: EditorMode = EditorModes.Handlebars
   export let value: string | null = ""
   export let placeholder: string | null = null

packages/builder/src/components/common/CodeEditor/index.ts

@@ -1,13 +1,10 @@
 import { getManifest } from "@budibase/string-templates"
 import sanitizeHtml from "sanitize-html"
 import { groupBy } from "lodash"
-import {
-  BindingCompletion,
-  EditorModesMap,
-  Helper,
-  Snippet,
-} from "@budibase/types"
+import { EditorModesMap, Helper, Snippet } from "@budibase/types"
 import { CompletionContext } from "@codemirror/autocomplete"
+import { EditorView } from "@codemirror/view"
+import { BindingCompletion, BindingCompletionOption } from "@/types"
 
 export const EditorModes: EditorModesMap = {
   JS: {
@@ -25,15 +22,7 @@ export const EditorModes: EditorModesMap = {
   },
 }
 
-export const SECTIONS = {
-  HB_HELPER: {
-    name: "Helper",
-    type: "helper",
-    icon: "Code",
-  },
-}
-
-export const buildHelperInfoNode = (completion: any, helper: Helper) => {
+const buildHelperInfoNode = (helper: Helper) => {
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
 
@@ -65,7 +54,7 @@ const toSpectrumIcon = (name: string) => {
   </svg>`
 }
 
-export const buildSectionHeader = (
+const buildSectionHeader = (
   type: string,
   sectionName: string,
   icon: string,
@@ -84,30 +73,27 @@ export const buildSectionHeader = (
   }
 }
 
-export const helpersToCompletion = (
+const helpersToCompletion = (
   helpers: Record<string, Helper>,
   mode: { name: "javascript" | "handlebars" }
-) => {
-  const { type, name: sectionName, icon } = SECTIONS.HB_HELPER
-  const helperSection = buildSectionHeader(type, sectionName, icon, 99)
+): BindingCompletionOption[] => {
+  const helperSection = buildSectionHeader("helper", "Helpers", "Code", 99)
 
   return Object.keys(helpers).flatMap(helperName => {
-    let helper = helpers[helperName]
+    const helper = helpers[helperName]
     return {
       label: helperName,
-      info: (completion: BindingCompletion) => {
-        return buildHelperInfoNode(completion, helper)
-      },
+      info: () => buildHelperInfoNode(helper),
       type: "helper",
       section: helperSection,
       detail: "Function",
       apply: (
-        view: any,
-        completion: BindingCompletion,
+        view: EditorView,
+        _completion: BindingCompletionOption,
         from: number,
         to: number
       ) => {
-        insertBinding(view, from, to, helperName, mode)
+        insertBinding(view, from, to, helperName, mode, AutocompleteType.HELPER)
       },
     }
   })
@@ -115,7 +101,7 @@ export const helpersToCompletion = (
 
 export const getHelperCompletions = (mode: {
   name: "javascript" | "handlebars"
-}) => {
+}): BindingCompletionOption[] => {
   // TODO: manifest needs to be properly typed
   const manifest: any = getManifest()
   return Object.keys(manifest).flatMap(key => {
@@ -123,49 +109,33 @@ export const getHelperCompletions = (mode: {
   })
 }
 
-export const snippetAutoComplete = (snippets: Snippet[]) => {
-  return function myCompletions(context: CompletionContext) {
-    if (!snippets?.length) {
-      return null
-    }
-    const word = context.matchBefore(/\w*/)
-    if (!word || (word.from == word.to && !context.explicit)) {
-      return null
-    }
-    return {
-      from: word.from,
-      options: snippets.map(snippet => ({
-        label: `snippets.${snippet.name}`,
-        type: "text",
-        simple: true,
-        apply: (
-          view: any,
-          completion: BindingCompletion,
-          from: number,
-          to: number
-        ) => {
-          insertSnippet(view, from, to, completion.label)
-        },
-      })),
-    }
-  }
+export const snippetAutoComplete = (snippets: Snippet[]): BindingCompletion => {
+  return setAutocomplete(
+    snippets.map(snippet => ({
+      section: buildSectionHeader("snippets", "Snippets", "Code", 100),
+      label: `snippets.${snippet.name}`,
+      displayLabel: snippet.name,
+    }))
+  )
 }
 
-const bindingFilter = (options: BindingCompletion[], query: string) => {
+const bindingFilter = (options: BindingCompletionOption[], query: string) => {
   return options.filter(completion => {
-    const section_parsed = completion.section.name.toLowerCase()
+    const section_parsed = completion.section?.toString().toLowerCase()
     const label_parsed = completion.label.toLowerCase()
     const query_parsed = query.toLowerCase()
 
     return (
-      section_parsed.includes(query_parsed) ||
+      section_parsed?.includes(query_parsed) ||
       label_parsed.includes(query_parsed)
     )
   })
 }
 
-export const hbAutocomplete = (baseCompletions: BindingCompletion[]) => {
-  async function coreCompletion(context: CompletionContext) {
+export const hbAutocomplete = (
+  baseCompletions: BindingCompletionOption[]
+): BindingCompletion => {
+  function coreCompletion(context: CompletionContext) {
     let bindingStart = context.matchBefore(EditorModes.Handlebars.match)
 
     let options = baseCompletions || []
@@ -191,9 +161,15 @@ export const hbAutocomplete = (baseCompletions: BindingCompletion[]) => {
   return coreCompletion
 }
 
-export const jsAutocomplete = (baseCompletions: BindingCompletion[]) => {
-  async function coreCompletion(context: CompletionContext) {
-    let jsBinding = context.matchBefore(/\$\("[\s\w]*/)
+function wrappedAutocompleteMatch(context: CompletionContext) {
+  return context.matchBefore(/\$\("[\s\w]*/)
+}
+
+export const jsAutocomplete = (
+  baseCompletions: BindingCompletionOption[]
+): BindingCompletion => {
+  function coreCompletion(context: CompletionContext) {
+    let jsBinding = wrappedAutocompleteMatch(context)
     let options = baseCompletions || []
 
     if (jsBinding) {
@@ -217,10 +193,42 @@ export const jsAutocomplete = (baseCompletions: BindingCompletion[]) => {
   return coreCompletion
 }
 
-export const buildBindingInfoNode = (
-  completion: BindingCompletion,
-  binding: any
-) => {
+export const jsHelperAutocomplete = (
+  baseCompletions: BindingCompletionOption[]
+): BindingCompletion => {
+  return setAutocomplete(
+    baseCompletions.map(helper => ({
+      ...helper,
+      displayLabel: helper.label,
+      label: `helpers.${helper.label}()`,
+    }))
+  )
+}
+
+function setAutocomplete(
+  options: BindingCompletionOption[]
+): BindingCompletion {
+  return function (context: CompletionContext) {
+    if (wrappedAutocompleteMatch(context)) {
+      return null
+    }
+
+    const word = context.matchBefore(/\b\w*(\.\w*)?/)
+    if (!word || (word.from == word.to && !context.explicit)) {
+      return null
+    }
+
+    return {
+      from: word.from,
+      options,
+    }
+  }
+}
+
+const buildBindingInfoNode = (binding: {
+  valueHTML: string
+  value: string | null
+}) => {
   if (!binding.valueHTML || binding.value == null) {
     return null
   }
@@ -278,18 +286,28 @@ export function jsInsert(
   return parsedInsert
 }
 
+const enum AutocompleteType {
+  BINDING,
+  HELPER,
+  TEXT,
+}
+
 // Autocomplete apply behaviour
-export const insertBinding = (
-  view: any,
+const insertBinding = (
+  view: EditorView,
   from: number,
   to: number,
   text: string,
-  mode: { name: "javascript" | "handlebars" }
+  mode: { name: "javascript" | "handlebars" },
+  type: AutocompleteType
 ) => {
   let parsedInsert
 
   if (mode.name == "javascript") {
-    parsedInsert = jsInsert(view.state.doc?.toString(), from, to, text)
+    parsedInsert = jsInsert(view.state.doc?.toString(), from, to, text, {
+      helper: type === AutocompleteType.HELPER,
+      disableWrapping: type === AutocompleteType.TEXT,
+    })
   } else if (mode.name == "handlebars") {
     parsedInsert = hbInsert(view.state.doc?.toString(), from, to, text)
   } else {
@@ -319,30 +337,11 @@ export const insertBinding = (
   })
 }
 
-export const insertSnippet = (
-  view: any,
-  from: number,
-  to: number,
-  text: string
-) => {
-  let cursorPos = from + text.length
-  view.dispatch({
-    changes: {
-      from,
-      to,
-      insert: text,
-    },
-    selection: {
-      anchor: cursorPos,
-    },
-  })
-}
-
 // TODO: typing in this function isn't great
 export const bindingsToCompletions = (
   bindings: any,
   mode: { name: "javascript" | "handlebars" }
-) => {
+): BindingCompletionOption[] => {
   const bindingByCategory = groupBy(bindings, "category")
   const categoryMeta = bindings?.reduce((acc: any, ele: any) => {
     acc[ele.category] = acc[ele.category] || {}
@@ -356,46 +355,54 @@ export const bindingsToCompletions = (
     return acc
   }, {})
 
-  const completions = Object.keys(bindingByCategory).reduce(
-    (comps: any, catKey: string) => {
-      const { icon, rank } = categoryMeta[catKey] || {}
+  const completions = Object.keys(bindingByCategory).reduce<
+    BindingCompletionOption[]
+  >((comps, catKey) => {
+    const { icon, rank } = categoryMeta[catKey] || {}
 
-      const bindingSectionHeader = buildSectionHeader(
-        // @ts-ignore something wrong with this - logically this should be dictionary
-        bindingByCategory.type,
-        catKey,
-        icon || "",
-        typeof rank == "number" ? rank : 1
-      )
+    const bindingSectionHeader = buildSectionHeader(
+      // @ts-ignore something wrong with this - logically this should be dictionary
+      bindingByCategory.type,
+      catKey,
+      icon || "",
+      typeof rank == "number" ? rank : 1
+    )
 
-      return [
-        ...comps,
-        ...bindingByCategory[catKey].reduce((acc, binding) => {
+    comps.push(
+      ...bindingByCategory[catKey].reduce<BindingCompletionOption[]>(
+        (acc, binding) => {
           let displayType = binding.fieldSchema?.type || binding.display?.type
           acc.push({
             label:
               binding.display?.name || binding.readableBinding || "NO NAME",
-            info: (completion: BindingCompletion) => {
-              return buildBindingInfoNode(completion, binding)
-            },
+            info: () => buildBindingInfoNode(binding),
             type: "binding",
             detail: displayType,
             section: bindingSectionHeader,
             apply: (
-              view: any,
-              completion: BindingCompletion,
+              view: EditorView,
+              _completion: BindingCompletionOption,
               from: number,
               to: number
             ) => {
-              insertBinding(view, from, to, binding.readableBinding, mode)
+              insertBinding(
+                view,
+                from,
+                to,
+                binding.readableBinding,
+                mode,
+                AutocompleteType.BINDING
+              )
             },
           })
           return acc
-        }, []),
-      ]
-    },
-    []
-  )
+        },
+        []
+      )
+    )
+
+    return comps
+  }, [])
 
   return completions
 }

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

@@ -23,6 +23,7 @@
     snippetAutoComplete,
     EditorModes,
     bindingsToCompletions,
+    jsHelperAutocomplete,
   } from "../CodeEditor"
   import BindingSidePanel from "./BindingSidePanel.svelte"
   import EvaluationSidePanel from "./EvaluationSidePanel.svelte"
@@ -34,7 +35,6 @@
   import { BindingMode, SidePanel } from "@budibase/types"
   import type {
     EnrichedBinding,
-    BindingCompletion,
     Snippet,
     Helper,
     CaretPositionFn,
@@ -42,7 +42,7 @@
     JSONValue,
   } from "@budibase/types"
   import type { Log } from "@budibase/string-templates"
-  import type { CompletionContext } from "@codemirror/autocomplete"
+  import type { BindingCompletion, BindingCompletionOption } from "@/types"
 
   const dispatch = createEventDispatcher()
 
@@ -91,7 +91,10 @@
   $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
   $: hbsCompletions = getHBSCompletions(bindingCompletions)
-  $: jsCompletions = getJSCompletions(bindingCompletions, snippets, useSnippets)
+  $: jsCompletions = getJSCompletions(bindingCompletions, snippets, {
+    useHelpers: allowHelpers,
+    useSnippets,
+  })
   $: {
     // Ensure a valid side panel option is always selected
     if (sidePanel && !sidePanelOptions.includes(sidePanel)) {
@@ -99,7 +102,7 @@
     }
   }
 
-  const getHBSCompletions = (bindingCompletions: BindingCompletion[]) => {
+  const getHBSCompletions = (bindingCompletions: BindingCompletionOption[]) => {
     return [
       hbAutocomplete([
         ...bindingCompletions,
@@ -109,17 +112,23 @@
   }
 
   const getJSCompletions = (
-    bindingCompletions: BindingCompletion[],
+    bindingCompletions: BindingCompletionOption[],
     snippets: Snippet[] | null,
-    useSnippets?: boolean
+    config: {
+      useHelpers: boolean
+      useSnippets: boolean
+    }
   ) => {
-    const completions: ((_: CompletionContext) => any)[] = [
-      jsAutocomplete([
-        ...bindingCompletions,
-        ...getHelperCompletions(EditorModes.JS),
-      ]),
-    ]
-    if (useSnippets && snippets) {
+    const completions: BindingCompletion[] = []
+    if (bindingCompletions.length) {
+      completions.push(jsAutocomplete([...bindingCompletions]))
+    }
+    if (config.useHelpers) {
+      completions.push(
+        jsHelperAutocomplete([...getHelperCompletions(EditorModes.JS)])
+      )
+    }
+    if (config.useSnippets && snippets) {
       completions.push(snippetAutoComplete(snippets))
     }
     return completions
@@ -381,7 +390,7 @@
               autofocus={autofocusEditor}
               placeholder={placeholder ||
                 "Add bindings by typing $ or use the menu on the right"}
-              jsBindingWrapping
+              jsBindingWrapping={bindingCompletions.length > 0}
             />
           {/key}
         {/if}

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

@@ -118,6 +118,7 @@
         allowHBS={false}
         allowJS
         allowSnippets={false}
+        allowHelpers={false}
         showTabBar={false}
         placeholder="return function(input) ❴ ... ❵"
         value={code}

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

@@ -13,6 +13,11 @@
   import { fly } from "svelte/transition"
   import { findComponentPath } from "@/helpers/components"
 
+  // Smallest possible 1x1 transparent GIF
+  const ghost = new Image(1, 1)
+  ghost.src =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+
   let searchString
   let searchRef
   let selectedIndex
@@ -217,7 +222,8 @@
     }
   })
 
-  const onDragStart = component => {
+  const onDragStart = (e, component) => {
+    e.dataTransfer.setDragImage(ghost, 0, 0)
     previewStore.startDrag(component)
   }
 
@@ -250,13 +256,12 @@
             {#each category.children as component}
               <div
                 draggable="true"
-                on:dragstart={() => onDragStart(component.component)}
+                on:dragstart={e => onDragStart(e, component.component)}
                 on:dragend={onDragEnd}
                 class="component"
                 class:selected={selectedIndex === orderMap[component.component]}
                 on:click={() => addComponent(component.component)}
-                on:mouseover={() => (selectedIndex = null)}
-                on:focus
+                on:mouseenter={() => (selectedIndex = null)}
               >
                 <Icon name={component.icon} />
                 <Body size="XS">{component.name}</Body>
@@ -308,7 +313,6 @@
   }
   .component:hover {
     background: var(--spectrum-global-color-gray-300);
-    cursor: pointer;
   }
   .component :global(.spectrum-Body) {
     line-height: 1.2 !important;

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

@@ -189,8 +189,8 @@
     } else if (type === "reload-plugin") {
       await componentStore.refreshDefinitions()
     } else if (type === "drop-new-component") {
-      const { component, parent, index } = data
-      await componentStore.create(component, null, parent, index)
+      const { component, parent, index, props } = data
+      await componentStore.create(component, props, parent, index)
     } else if (type === "add-parent-component") {
       const { componentId, parentType } = data
       await componentStore.addParent(componentId, parentType)

packages/builder/src/stores/builder/app.ts

@@ -39,7 +39,7 @@ interface AppMetaState {
   appInstance: { _id: string } | null
   initialised: boolean
   hasAppPackage: boolean
-  usedPlugins: Plugin[] | null
+  usedPlugins: Plugin[]
   automations: AutomationSettings
   routes: { [key: string]: any }
   version?: string
@@ -76,7 +76,7 @@ export const INITIAL_APP_META_STATE: AppMetaState = {
   appInstance: null,
   initialised: false,
   hasAppPackage: false,
-  usedPlugins: null,
+  usedPlugins: [],
   automations: {},
   routes: {},
 }
@@ -109,7 +109,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
       appInstance: app.instance,
       revertableVersion: app.revertableVersion,
       upgradableVersion: app.upgradableVersion,
-      usedPlugins: app.usedPlugins || null,
+      usedPlugins: app.usedPlugins || [],
       icon: app.icon,
       features: {
         ...INITIAL_APP_META_STATE.features,

packages/builder/src/stores/builder/components.ts

@@ -11,6 +11,7 @@ import {
   findComponentParent,
   findAllMatchingComponents,
   makeComponentUnique,
+  findComponentType,
 } from "@/helpers/components"
 import { getComponentFieldOptions } from "@/helpers/formFields"
 import { selectedScreen } from "./screens"
@@ -139,10 +140,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
 
   /**
    * Retrieve the component definition object
-   * @param {string} componentType
-   * @example
-   * '@budibase/standard-components/container'
-   * @returns {object}
    */
   getDefinition(componentType: string) {
     if (!componentType) {
@@ -151,10 +148,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
     return get(this.store).components[componentType]
   }
 
-  /**
-   *
-   * @returns {object}
-   */
   getDefaultDatasource() {
     // Ignore users table
     const validTables = get(tables).list.filter(x => x._id !== "ta_users")
@@ -188,8 +181,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
   /**
    * Takes an enriched component instance and applies any required migration
    * logic
-   * @param {object} enrichedComponent
-   * @returns {object} migrated Component
    */
   migrateSettings(enrichedComponent: Component) {
     const componentPrefix = "@budibase/standard-components"
@@ -230,22 +221,15 @@ export class ComponentStore extends BudiStore<ComponentState> {
     for (let setting of filterableTypes || []) {
       const isLegacy = Array.isArray(enrichedComponent[setting.key])
       if (isLegacy) {
-        const processedSetting = utils.processSearchFilters(
+        enrichedComponent[setting.key] = utils.processSearchFilters(
           enrichedComponent[setting.key]
         )
-        enrichedComponent[setting.key] = processedSetting
         migrated = true
       }
     }
     return migrated
   }
 
-  /**
-   *
-   * @param {object} component
-   * @param {object} opts
-   * @returns
-   */
   enrichEmptySettings(
     component: Component,
     opts: { screen?: Screen; parent?: Component; useDefaultValues?: boolean }
@@ -280,14 +264,25 @@ export class ComponentStore extends BudiStore<ComponentState> {
             type: "table",
           }
         } else if (setting.type === "dataProvider") {
-          // Pick closest data provider where required
+          let providerId
+
+          // Pick closest parent data provider if one exists
           const path = findComponentPath(screen.props, treeId)
           const providers = path.filter((component: Component) =>
             component._component?.endsWith("/dataprovider")
           )
-          if (providers.length) {
-            const id = providers[providers.length - 1]?._id
-            component[setting.key] = `{{ literal ${safe(id)} }}`
+          providerId = providers[providers.length - 1]?._id
+
+          // If none in our direct path, select the first one the screen
+          if (!providerId) {
+            providerId = findComponentType(
+              screen.props,
+              "@budibase/standard-components/dataprovider"
+            )?._id
+          }
+
+          if (providerId) {
+            component[setting.key] = `{{ literal ${safe(providerId)} }}`
           }
         } else if (setting.type.startsWith("field/")) {
           // Autofill form field names
@@ -427,17 +422,10 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
   }
 
-  /**
-   *
-   * @param {string} componentName
-   * @param {object} presetProps
-   * @param {object} parent
-   * @returns
-   */
   createInstance(
     componentType: string,
-    presetProps: any,
-    parent: any
+    presetProps?: Record<string, any>,
+    parent?: Component
   ): Component | null {
     const screen = get(selectedScreen)
     if (!screen) {
@@ -463,7 +451,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
       _id: Helpers.uuid(),
       _component: definition.component,
       _styles: {
-        normal: {},
+        normal: { ...presetProps?._styles?.normal },
         hover: {},
         active: {},
       },
@@ -512,19 +500,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
   }
 
-  /**
-   *
-   * @param {string} componentName
-   * @param {object} presetProps
-   * @param {object} parent
-   * @param {number} index
-   * @returns
-   */
   async create(
     componentType: string,
-    presetProps: any,
-    parent: Component,
-    index: number
+    presetProps?: Record<string, any>,
+    parent?: Component,
+    index?: number
   ) {
     const state = get(this.store)
     const componentInstance = this.createInstance(
@@ -611,13 +591,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
     return componentInstance
   }
 
-  /**
-   *
-   * @param {function} patchFn
-   * @param {string} componentId
-   * @param {string} screenId
-   * @returns
-   */
   async patch(
     patchFn: (component: Component, screen: Screen) => any,
     componentId?: string,
@@ -652,11 +625,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
     await screenStore.patch(patchScreen, screenId)
   }
 
-  /**
-   *
-   * @param {object} component
-   * @returns
-   */
   async delete(component: Component) {
     if (!component) {
       return
@@ -737,13 +705,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
     })
   }
 
-  /**
-   *
-   * @param {object} targetComponent
-   * @param {string} mode
-   * @param {object} targetScreen
-   * @returns
-   */
   async paste(
     targetComponent: Component,
     mode: string,
@@ -1101,6 +1062,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
 
   async updateStyles(styles: Record<string, string>, id: string) {
     const patchFn = (component: Component) => {
+      delete component._placeholder
       component._styles.normal = {
         ...component._styles.normal,
         ...styles,
@@ -1231,7 +1193,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     // Create new parent instance
-    const newParentDefinition = this.createInstance(parentType, null, parent)
+    const newParentDefinition = this.createInstance(parentType)
     if (!newParentDefinition) {
       return
     }
@@ -1267,10 +1229,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
 
   /**
    * Check if the components settings have been cached
-   * @param {string} componentType
-   * @example
-   * '@budibase/standard-components/container'
-   * @returns {boolean}
    */
   isCached(componentType: string) {
     const settings = get(this.store).settingsCache
@@ -1279,11 +1237,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
 
   /**
    * Cache component settings
-   * @param {string} componentType
-   * @param {object} definition
-   * @example
-   * '@budibase/standard-components/container'
-   * @returns {array} the settings
    */
   cacheSettings(componentType: string, definition: ComponentDefinition | null) {
     let settings: ComponentSetting[] = []
@@ -1313,12 +1266,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
   /**
    * Retrieve an array of the component settings.
    * These settings are cached because they cannot change at run time.
-   *
    * Searches a component's definition for a setting matching a certain predicate.
-   * @param {string} componentType
-   * @example
-   * '@budibase/standard-components/container'
-   * @returns {Array<object>}
    */
   getComponentSettings(componentType: string) {
     if (!componentType) {

packages/builder/src/stores/builder/navigation.ts

@@ -4,15 +4,13 @@ import { appStore } from "@/stores/builder"
 import { BudiStore } from "../BudiStore"
 import { AppNavigation, AppNavigationLink, UIObject } from "@budibase/types"
 
-interface BuilderNavigationStore extends AppNavigation {}
-
 export const INITIAL_NAVIGATION_STATE = {
   navigation: "Top",
   links: [],
   textAlign: "Left",
 }
 
-export class NavigationStore extends BudiStore<BuilderNavigationStore> {
+export class NavigationStore extends BudiStore<AppNavigation> {
   constructor() {
     super(INITIAL_NAVIGATION_STATE)
   }

packages/builder/src/stores/builder/preview.ts

@@ -54,7 +54,7 @@ export class PreviewStore extends BudiStore<PreviewState> {
     }))
   }
 
-  startDrag(component: any) {
+  async startDrag(component: string) {
     this.sendEvent("dragging-new-component", {
       dragging: true,
       component,

packages/builder/src/types/bindings.ts

@@ -0,0 +1,8 @@
+import { CompletionContext, Completion } from "@codemirror/autocomplete"
+
+export type BindingCompletion = (context: CompletionContext) => {
+  from: number
+  options: Completion[]
+} | null
+
+export type BindingCompletionOption = Completion

packages/builder/src/types/index.ts

@@ -0,0 +1 @@
+export * from "./bindings"

packages/cli/src/backups/objectStore.ts

@@ -3,6 +3,7 @@ import fs from "fs"
 import { join } from "path"
 import { TEMP_DIR, MINIO_DIR } from "./utils"
 import { progressBar } from "../utils"
+import * as stream from "node:stream"
 
 const {
   ObjectStoreBuckets,
@@ -20,15 +21,21 @@ export async function exportObjects() {
   let fullList: any[] = []
   let errorCount = 0
   for (let bucket of bucketList) {
-    const client = ObjectStore(bucket)
+    const client = ObjectStore()
     try {
-      await client.headBucket().promise()
+      await client.headBucket({
+        Bucket: bucket,
+      })
     } catch (err) {
       errorCount++
       continue
     }
-    const list = (await client.listObjectsV2().promise()) as { Contents: any[] }
-    fullList = fullList.concat(list.Contents.map(el => ({ ...el, bucket })))
+    const list = await client.listObjectsV2({
+      Bucket: bucket,
+    })
+    fullList = fullList.concat(
+      list.Contents?.map(el => ({ ...el, bucket })) || []
+    )
   }
   if (errorCount === bucketList.length) {
     throw new Error("Unable to access MinIO/S3 - check environment config.")
@@ -43,7 +50,13 @@ export async function exportObjects() {
       const dirs = possiblePath.slice(0, possiblePath.length - 1)
       fs.mkdirSync(join(path, object.bucket, ...dirs), { recursive: true })
     }
-    fs.writeFileSync(join(path, object.bucket, ...possiblePath), data)
+    if (data instanceof stream.Readable) {
+      data.pipe(
+        fs.createWriteStream(join(path, object.bucket, ...possiblePath))
+      )
+    } else {
+      fs.writeFileSync(join(path, object.bucket, ...possiblePath), data)
+    }
     bar.update(++count)
   }
   bar.stop()
@@ -60,7 +73,7 @@ export async function importObjects() {
   const bar = progressBar(total)
   let count = 0
   for (let bucket of buckets) {
-    const client = ObjectStore(bucket)
+    const client = ObjectStore()
     await createBucketIfNotExists(client, bucket)
     const files = await uploadDirectory(bucket, join(path, bucket), "/")
     count += files.length

packages/client/manifest.json

@@ -1455,7 +1455,8 @@
         "type": "icon",
         "label": "Icon",
         "key": "icon",
-        "required": true
+        "required": true,
+        "defaultValue": "ri-star-fill"
       },
       {
         "type": "select",

packages/client/package.json

@@ -5,7 +5,7 @@
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
   "type": "module",
-  "svelte": "src/index.js",
+  "svelte": "src/index.ts",
   "exports": {
     ".": {
       "import": "./dist/budibase-client.js",

packages/client/src/api/api.ts

@@ -1,10 +1,6 @@
 import { createAPIClient } from "@budibase/frontend-core"
 import { authStore } from "../stores/auth"
-import {
-  notificationStore,
-  devToolsEnabled,
-  devToolsStore,
-} from "../stores/index"
+import { notificationStore, devToolsEnabled, devToolsStore } from "../stores"
 import { get } from "svelte/store"
 
 export const API = createAPIClient({

packages/client/src/components/Block.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext, onDestroy, onMount, setContext } from "svelte"
-  import { builderStore } from "stores/builder.js"
-  import { blockStore } from "stores/blocks"
+  import { builderStore } from "@/stores/builder.js"
+  import { blockStore } from "@/stores/blocks"
 
   const component = getContext("component")
   const { styleable } = getContext("sdk")

packages/client/src/components/BlockComponent.svelte

@@ -2,7 +2,7 @@
   import { getContext, onDestroy } from "svelte"
   import { generate } from "shortid"
   import { builderStore } from "../stores/builder.js"
-  import Component from "components/Component.svelte"
+  import Component from "@/components/Component.svelte"
 
   export let type
   export let props

packages/client/src/components/ClientApp.svelte

@@ -6,7 +6,7 @@
   import { Constants, CookieUtils } from "@budibase/frontend-core"
   import { getThemeClassNames } from "@budibase/shared-core"
   import Component from "./Component.svelte"
-  import SDK from "sdk"
+  import SDK from "@/sdk"
   import {
     featuresStore,
     createContextStore,
@@ -22,28 +22,29 @@
     environmentStore,
     sidePanelStore,
     modalStore,
-  } from "stores"
-  import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
-  import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
-  import PeekScreenDisplay from "components/overlay/PeekScreenDisplay.svelte"
-  import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
-  import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
-  import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
-  import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
-  import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
-  import SettingsBar from "components/preview/SettingsBar.svelte"
-  import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
-  import HoverIndicator from "components/preview/HoverIndicator.svelte"
+  } from "@/stores"
+  import NotificationDisplay from "./overlay/NotificationDisplay.svelte"
+  import ConfirmationDisplay from "./overlay/ConfirmationDisplay.svelte"
+  import PeekScreenDisplay from "./overlay/PeekScreenDisplay.svelte"
+  import UserBindingsProvider from "./context/UserBindingsProvider.svelte"
+  import DeviceBindingsProvider from "./context/DeviceBindingsProvider.svelte"
+  import StateBindingsProvider from "./context/StateBindingsProvider.svelte"
+  import RowSelectionProvider from "./context/RowSelectionProvider.svelte"
+  import QueryParamsProvider from "./context/QueryParamsProvider.svelte"
+  import SettingsBar from "./preview/SettingsBar.svelte"
+  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
+  import HoverIndicator from "./preview/HoverIndicator.svelte"
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
-  import DNDHandler from "components/preview/DNDHandler.svelte"
-  import GridDNDHandler from "components/preview/GridDNDHandler.svelte"
-  import KeyboardManager from "components/preview/KeyboardManager.svelte"
-  import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
-  import DevTools from "components/devtools/DevTools.svelte"
-  import FreeFooter from "components/FreeFooter.svelte"
-  import MaintenanceScreen from "components/MaintenanceScreen.svelte"
+  import DNDHandler from "./preview/DNDHandler.svelte"
+  import GridDNDHandler from "./preview/GridDNDHandler.svelte"
+  import KeyboardManager from "./preview/KeyboardManager.svelte"
+  import DevToolsHeader from "./devtools/DevToolsHeader.svelte"
+  import DevTools from "./devtools/DevTools.svelte"
+  import FreeFooter from "./FreeFooter.svelte"
+  import MaintenanceScreen from "./MaintenanceScreen.svelte"
   import SnippetsProvider from "./context/SnippetsProvider.svelte"
   import EmbedProvider from "./context/EmbedProvider.svelte"
+  import DNDSelectionIndicators from "./preview/DNDSelectionIndicators.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -266,6 +267,7 @@
                       {#if $builderStore.inBuilder}
                         <DNDHandler />
                         <GridDNDHandler />
+                        <DNDSelectionIndicators />
                       {/if}
                     </div>
                   </SnippetsProvider>

packages/client/src/components/Component.svelte

@@ -11,7 +11,7 @@
 <script>
   import { getContext, setContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
-  import { enrichProps, propsAreSame } from "utils/componentProps"
+  import { enrichProps, propsAreSame } from "@/utils/componentProps"
   import { getSettingsDefinition } from "@budibase/frontend-core"
   import {
     builderStore,
@@ -20,12 +20,15 @@
     appStore,
     dndComponentPath,
     dndIsDragging,
-  } from "stores"
+  } from "@/stores"
   import { Helpers } from "@budibase/bbui"
-  import { getActiveConditions, reduceConditionActions } from "utils/conditions"
-  import EmptyPlaceholder from "components/app/EmptyPlaceholder.svelte"
-  import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
-  import ComponentErrorState from "components/error-states/ComponentErrorState.svelte"
+  import {
+    getActiveConditions,
+    reduceConditionActions,
+  } from "@/utils/conditions"
+  import EmptyPlaceholder from "@/components/app/EmptyPlaceholder.svelte"
+  import ScreenPlaceholder from "@/components/app/ScreenPlaceholder.svelte"
+  import ComponentErrorState from "@/components/error-states/ComponentErrorState.svelte"
   import {
     decodeJSBinding,
     findHBSBlocks,
@@ -35,7 +38,7 @@
     getActionContextKey,
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
-  import { gridLayout } from "utils/grid"
+  import { gridLayout } from "@/utils/grid"
 
   export let instance = {}
   export let parent = null
@@ -120,7 +123,7 @@
   $: children = instance._children || []
   $: id = instance._id
   $: name = isRoot ? "Screen" : instance._instanceName
-  $: icon = definition?.icon
+  $: icon = instance._icon || definition?.icon
 
   // Determine if the component is selected or is part of the critical path
   // leading to the selected component

packages/client/src/components/CustomThemeWrapper.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { themeStore } from "stores"
+  import { themeStore } from "@/stores"
   import { setContext } from "svelte"
   import { Context } from "@budibase/bbui"
 

packages/client/src/components/Router.svelte

@@ -1,7 +1,7 @@
 <script>
   import { setContext, getContext, onMount } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
-  import { routeStore, stateStore } from "stores"
+  import { routeStore, stateStore } from "@/stores"
   import Screen from "./Screen.svelte"
   import { get } from "svelte/store"
 

packages/client/src/components/Screen.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { screenStore, routeStore, builderStore } from "stores"
+  import { screenStore, routeStore, builderStore } from "@/stores"
   import { get } from "svelte/store"
   import Component from "./Component.svelte"
   import Provider from "./context/Provider.svelte"

packages/client/src/components/app/GridBlock.svelte

@@ -3,7 +3,7 @@
   // because it functions similarly to one
   import { getContext, onMount } from "svelte"
   import { get, derived, readable } from "svelte/store"
-  import { featuresStore } from "stores"
+  import { featuresStore } from "@/stores"
   import { Grid } from "@budibase/frontend-core"
   // import { processStringSync } from "@budibase/string-templates"
 

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -1,9 +1,9 @@
 <script>
   import { getContext } from "svelte"
-  import Block from "components/Block.svelte"
-  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "@/components/Block.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
-  import { enrichSearchColumns, enrichFilter } from "utils/blocks"
+  import { enrichSearchColumns, enrichFilter } from "@/utils/blocks"
   import { get } from "svelte/store"
 
   export let title

packages/client/src/components/app/blocks/ChartBlock.svelte

@@ -1,6 +1,6 @@
 <script>
-  import Block from "components/Block.svelte"
-  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "@/components/Block.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
 
   // Datasource

packages/client/src/components/app/blocks/FormBlockComponent.svelte

@@ -1,5 +1,5 @@
 <script>
-  import BlockComponent from "components/BlockComponent.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
   import { FieldType } from "@budibase/types"
 
   export let field

packages/client/src/components/app/blocks/MultiStepFormblock.svelte

@@ -1,8 +1,8 @@
 <script>
-  import BlockComponent from "components/BlockComponent.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
   import { Helpers } from "@budibase/bbui"
   import { getContext, setContext } from "svelte"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
   import { get, writable } from "svelte/store"

packages/client/src/components/app/blocks/RepeaterBlock.svelte

@@ -1,7 +1,7 @@
 <script>
-  import BlockComponent from "components/BlockComponent.svelte"
-  import Block from "components/Block.svelte"
-  import Placeholder from "components/app/Placeholder.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
+  import Block from "@/components/Block.svelte"
+  import Placeholder from "@/components/app/Placeholder.svelte"
   import { getContext } from "svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { get } from "svelte/store"

packages/client/src/components/app/blocks/RowExplorer.svelte

@@ -1,6 +1,6 @@
 <script>
-  import Block from "components/Block.svelte"
-  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "@/components/Block.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { generate } from "shortid"
   import { get } from "svelte/store"

packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte

@@ -1,6 +1,6 @@
 <script>
-  import BlockComponent from "components/BlockComponent.svelte"
-  import Block from "components/Block.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
+  import Block from "@/components/Block.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { getContext } from "svelte"
 

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -1,6 +1,6 @@
 <script>
-  import BlockComponent from "components/BlockComponent.svelte"
-  import Placeholder from "components/app/Placeholder.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
+  import Placeholder from "@/components/app/Placeholder.svelte"
   import { getContext } from "svelte"
   import FormBlockComponent from "../FormBlockComponent.svelte"
 

packages/client/src/components/app/container/GridContainer.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext, onMount } from "svelte"
   import { writable } from "svelte/store"
-  import { GridRowHeight, GridColumns } from "constants"
+  import { GridRowHeight, GridColumns } from "@/constants"
   import { memo } from "@budibase/frontend-core"
 
   export let onClick

packages/client/src/components/app/deprecated/TableBlock.svelte

@@ -2,10 +2,10 @@
   import { getContext } from "svelte"
   import { get } from "svelte/store"
   import { generate } from "shortid"
-  import Block from "components/Block.svelte"
-  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "@/components/Block.svelte"
+  import BlockComponent from "@/components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
-  import { enrichSearchColumns, enrichFilter } from "utils/blocks"
+  import { enrichSearchColumns, enrichFilter } from "@/utils/blocks"
   import { Utils } from "@budibase/frontend-core"
 
   export let title

packages/client/src/components/app/deprecated/table/Table.svelte

@@ -3,7 +3,7 @@
   import { Table } from "@budibase/bbui"
   import SlotRenderer from "./SlotRenderer.svelte"
   import { canBeSortColumn } from "@budibase/frontend-core"
-  import Provider from "components/context/Provider.svelte"
+  import Provider from "@/components/context/Provider.svelte"
 
   export let dataProvider
   export let columns

packages/client/src/components/app/forms/S3Upload.svelte

@@ -2,7 +2,7 @@
   import Field from "./Field.svelte"
   import { CoreDropzone, ProgressCircle, Helpers } from "@budibase/bbui"
   import { getContext, onMount, onDestroy } from "svelte"
-  import { builderStore } from "stores/builder.js"
+  import { builderStore } from "@/stores/builder.js"
   import { processStringSync } from "@budibase/string-templates"
 
   export let datasourceId

packages/client/src/components/context/DeviceBindingsProvider.svelte

@@ -1,7 +1,7 @@
 <script>
   import Provider from "./Provider.svelte"
   import { onMount, onDestroy } from "svelte"
-  import { themeStore } from "stores"
+  import { themeStore } from "@/stores"
 
   let width = window.innerWidth
   let height = window.innerHeight

packages/client/src/components/context/Provider.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext, setContext, onDestroy } from "svelte"
-  import { dataSourceStore, createContextStore } from "stores"
-  import { ActionTypes } from "constants"
+  import { dataSourceStore, createContextStore } from "@/stores"
+  import { ActionTypes } from "@/constants"
   import { generate } from "shortid"
 
   const { ContextScopes } = getContext("sdk")

packages/client/src/components/context/QueryParamsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { routeStore } from "stores"
+  import { routeStore } from "@/stores"
 </script>
 
 <Provider key="query" data={$routeStore.queryParams}>

packages/client/src/components/context/RowSelectionProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { rowSelectionStore } from "stores"
+  import { rowSelectionStore } from "@/stores"
 </script>
 
 <Provider key="rowSelection" data={$rowSelectionStore}>

packages/client/src/components/context/SnippetsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { snippets } from "stores"
+  import { snippets } from "@/stores"
 </script>
 
 <Provider key="snippets" data={$snippets}>

packages/client/src/components/context/StateBindingsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { stateStore } from "stores"
+  import { stateStore } from "@/stores"
 </script>
 
 <Provider key="state" data={$stateStore}>

packages/client/src/components/context/UserBindingsProvider.svelte

@@ -1,7 +1,7 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore, currentRole } from "stores"
-  import { ActionTypes } from "constants"
+  import { authStore, currentRole } from "@/stores"
+  import { ActionTypes } from "@/constants"
   import { Constants } from "@budibase/frontend-core"
 
   // Register this as a refreshable datasource so that user changes cause

packages/client/src/components/devtools/DevTools.svelte

@@ -3,7 +3,7 @@
   import { Layout, Heading, Tabs, Tab, Icon } from "@budibase/bbui"
   import DevToolsStatsTab from "./DevToolsStatsTab.svelte"
   import DevToolsComponentTab from "./DevToolsComponentTab.svelte"
-  import { devToolsStore } from "stores"
+  import { devToolsStore } from "@/stores"
 
   const context = getContext("context")
 </script>

packages/client/src/components/devtools/DevToolsComponentContextTab.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Layout, Select, Body } from "@budibase/bbui"
-  import { componentStore } from "stores/index.js"
+  import { componentStore } from "@/stores"
   import DevToolsStat from "./DevToolsStat.svelte"
 
   const ReadableBindingMap = {

packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte

@@ -2,7 +2,7 @@
   import { Layout, Toggle } from "@budibase/bbui"
   import { getSettingsDefinition } from "@budibase/frontend-core"
   import DevToolsStat from "./DevToolsStat.svelte"
-  import { componentStore } from "stores/index.js"
+  import { componentStore } from "@/stores"
 
   let showEnrichedSettings = true
 

packages/client/src/components/devtools/DevToolsComponentTab.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Body, Layout, Heading, Button, Tabs, Tab } from "@budibase/bbui"
-  import { builderStore, devToolsStore, componentStore } from "stores"
+  import { builderStore, devToolsStore, componentStore } from "@/stores"
   import DevToolsStat from "./DevToolsStat.svelte"
   import DevToolsComponentSettingsTab from "./DevToolsComponentSettingsTab.svelte"
   import DevToolsComponentContextTab from "./DevToolsComponentContextTab.svelte"

packages/client/src/components/devtools/DevToolsHeader.svelte

@@ -1,8 +1,8 @@
 <script>
   import { Heading, Select, ActionButton } from "@budibase/bbui"
-  import { devToolsStore, appStore } from "../../stores"
+  import { devToolsStore, appStore } from "@/stores"
   import { getContext, onMount } from "svelte"
-  import { API } from "api"
+  import { API } from "@/api"
 
   const context = getContext("context")
   const SELF_ROLE = "self"

packages/client/src/components/devtools/DevToolsStat.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Helpers } from "@budibase/bbui"
-  import { notificationStore } from "stores"
+  import { notificationStore } from "@/stores"
 
   export let label
   export let value

packages/client/src/components/devtools/DevToolsStatsTab.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Layout } from "@budibase/bbui"
-  import { authStore, appStore, screenStore, componentStore } from "stores"
+  import { authStore, appStore, screenStore, componentStore } from "@/stores"
   import DevToolsStat from "./DevToolsStat.svelte"
 </script>
 

packages/client/src/components/overlay/ConfirmationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { confirmationStore } from "stores"
+  import { confirmationStore } from "@/stores"
   import { Modal, ModalContent } from "@budibase/bbui"
 </script>
 

packages/client/src/components/overlay/NotificationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { notificationStore } from "stores"
+  import { notificationStore } from "@/stores"
   import { Notification } from "@budibase/bbui"
   import { fly } from "svelte/transition"
 </script>

packages/client/src/components/overlay/PeekScreenDisplay.svelte

@@ -5,7 +5,7 @@
     notificationStore,
     routeStore,
     stateStore,
-  } from "stores"
+  } from "@/stores"
   import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 

packages/client/src/components/preview/DNDHandler.svelte

@@ -1,19 +1,22 @@
-<script>
+<script lang="ts">
   import { onMount, onDestroy } from "svelte"
   import { get } from "svelte/store"
-  import IndicatorSet from "./IndicatorSet.svelte"
-  import {
-    builderStore,
-    screenStore,
-    dndStore,
-    dndParent,
-    dndIsDragging,
-  } from "stores"
-  import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte"
+  import { builderStore, screenStore, dndStore, isGridScreen } from "@/stores"
   import { Utils } from "@budibase/frontend-core"
-  import { findComponentById } from "utils/components.js"
-  import { DNDPlaceholderID } from "constants"
-  import { isGridEvent } from "utils/grid"
+  import { findComponentById } from "@/utils/components.js"
+  import { isGridEvent } from "@/utils/grid"
+  import { DNDPlaceholderID } from "@/constants"
+  import { Component } from "@budibase/types"
+
+  type ChildCoords = {
+    placeholder: boolean
+    centerX: number
+    centerY: number
+    left: number
+    right: number
+    top: number
+    bottom: number
+  }
 
   const ThrottleRate = 130
 
@@ -22,17 +25,19 @@
   $: source = $dndStore.source
   $: target = $dndStore.target
   $: drop = $dndStore.drop
+  $: gridScreen = $isGridScreen
 
   // Local flag for whether we are awaiting an async drop event
   let dropping = false
 
-  // Util to get the inner DOM node by a component ID
-  const getDOMNode = id => {
-    return document.getElementsByClassName(`${id}-dom`)[0]
+  // Util to get the inner DOM element by a component ID
+  const getDOMElement = (id: string): HTMLElement | undefined => {
+    const el = document.getElementsByClassName(`${id}-dom`)[0]
+    return el instanceof HTMLElement ? el : undefined
   }
 
   // Util to calculate the variance of a set of data
-  const variance = arr => {
+  const variance = (arr: number[]) => {
     const mean = arr.reduce((a, b) => a + b, 0) / arr.length
     let squareSum = 0
     arr.forEach(value => {
@@ -61,36 +66,43 @@
   }
 
   // Callback when initially starting a drag on a draggable component
-  const onDragStart = e => {
+  const onDragStart = (e: DragEvent) => {
     if (isGridEvent(e)) {
       return
     }
+    if (!(e.target instanceof HTMLElement)) {
+      return
+    }
     const component = e.target.closest(".component")
-    if (!component?.classList.contains("draggable")) {
+    if (
+      !(component instanceof HTMLElement) ||
+      !component.classList.contains("draggable")
+    ) {
       return
     }
 
     // Hide drag ghost image
-    e.dataTransfer.setDragImage(new Image(), 0, 0)
+    e.dataTransfer?.setDragImage(new Image(), 0, 0)
 
     // Add event handler to clear all drag state when dragging ends
     component.addEventListener("dragend", stopDragging)
 
     // Update state
-    const id = component.dataset.id
-    const parentId = component.dataset.parent
-    const parent = findComponentById(
+    const id = component.dataset.id!
+    const parentId = component.dataset.parent!
+    const parent: Component = findComponentById(
       get(screenStore).activeScreen?.props,
       parentId
     )
-    const index = parent._children.findIndex(
-      x => x._id === component.dataset.id
-    )
+    const index = parent._children!.findIndex(child => child._id === id)
     dndStore.actions.startDraggingExistingComponent({
       id,
       bounds: component.children[0].getBoundingClientRect(),
       parent: parentId,
       index,
+      name: component.dataset.name,
+      icon: component.dataset.icon,
+      type: parent._children![index]!._component,
     })
     builderStore.actions.selectComponent(id)
 
@@ -109,18 +121,18 @@
 
   // Core logic for handling drop events and determining where to render the
   // drop target placeholder
-  const processEvent = Utils.throttle((mouseX, mouseY) => {
+  const processEvent = Utils.throttle((mouseX: number, mouseY: number) => {
     if (!target) {
       return
     }
-    let { id, parent, node, acceptsChildren, empty } = target
+    let { id, parent, element, acceptsChildren, empty } = target
 
     // If we're over something that does not accept children then we go up a
     // level and consider the mouse position relative to the parent
     if (!acceptsChildren) {
       id = parent
       empty = false
-      node = getDOMNode(parent)
+      element = getDOMElement(parent)
     }
 
     // We're now hovering over something which does accept children.
@@ -133,51 +145,54 @@
       return
     }
 
-    // As the first DOM node in a component may not necessarily contain the
+    // As the first DOM element in a component may not necessarily contain the
     // child components, we can find to try the parent of the first child
     // component and use that as the real parent DOM node
-    const childNode = node.getElementsByClassName("component")[0]
-    if (childNode?.parentNode) {
-      node = childNode.parentNode
+    const childElement = element?.getElementsByClassName("component")[0]
+    if (childElement?.parentNode instanceof HTMLElement) {
+      element = childElement.parentNode
     }
 
     // Append an ephemeral div to allow us to determine layout if only one
     // child exists
     let ephemeralDiv
-    if (node.children.length === 1) {
+    if (element?.children.length === 1) {
       ephemeralDiv = document.createElement("div")
       ephemeralDiv.dataset.id = DNDPlaceholderID
-      node.appendChild(ephemeralDiv)
+      element.appendChild(ephemeralDiv)
     }
 
     // We're now hovering over something which accepts children and is not
     // empty, so we need to work out where to inside the placeholder
     // Calculate the coordinates of various locations on each child.
-    const childCoords = [...(node.children || [])].map(node => {
-      const child = node.children?.[0] || node
-      const bounds = child.getBoundingClientRect()
-      return {
-        placeholder: node.dataset.id === DNDPlaceholderID,
-        centerX: bounds.left + bounds.width / 2,
-        centerY: bounds.top + bounds.height / 2,
-        left: bounds.left,
-        right: bounds.right,
-        top: bounds.top,
-        bottom: bounds.bottom,
-      }
-    })
+    const childCoords: ChildCoords[] = [...(element?.children || [])]
+      .filter(el => el instanceof HTMLElement)
+      .map(el => {
+        const child = el.children?.[0] || el
+        const bounds = child.getBoundingClientRect()
+        return {
+          placeholder: el.dataset.id === DNDPlaceholderID,
+          centerX: bounds.left + bounds.width / 2,
+          centerY: bounds.top + bounds.height / 2,
+          left: bounds.left,
+          right: bounds.right,
+          top: bounds.top,
+          bottom: bounds.bottom,
+        }
+      })
 
     // Now that we've calculated the position of the children, we no longer need
     // the ephemeral div
     if (ephemeralDiv) {
-      node.removeChild(ephemeralDiv)
+      element?.removeChild(ephemeralDiv)
     }
 
     // Calculate the variance between each set of positions on the children
-    const variances = Object.keys(childCoords[0])
-      .filter(x => x !== "placeholder")
+    const variances = Object.keys(childCoords[0] || {})
+      .filter(key => key !== "placeholder")
       .map(key => {
-        const coords = childCoords.map(x => x[key])
+        const numericalKey = key as keyof Omit<ChildCoords, "placeholder">
+        const coords = childCoords.map(x => x[numericalKey])
         return {
           variance: variance(coords),
           side: key,
@@ -189,13 +204,13 @@
     variances.sort((a, b) => {
       return a.variance < b.variance ? -1 : 1
     })
-    const column = ["centerX", "left", "right"].includes(variances[0].side)
+    const column = ["centerX", "left", "right"].includes(variances[0]?.side)
 
     // Calculate breakpoints between child components so we can determine the
     // index to drop the component in.
     // We want to ignore the placeholder from this calculation as it should not
     // be considered a real child of the parent.
-    let breakpoints = childCoords
+    const breakpoints = childCoords
       .filter(x => !x.placeholder)
       .map(x => {
         return column ? x.centerY : x.centerX
@@ -213,38 +228,39 @@
     })
   }, ThrottleRate)
 
-  const handleEvent = e => {
+  const handleEvent = (e: DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
     processEvent(e.clientX, e.clientY)
   }
 
-  // Callback when on top of a component.
-  const onDragOver = e => {
-    if (!source || !target) {
+  // Callback when on top of a component
+  const onDragOver = (e: DragEvent) => {
+    if (!source || !target || gridScreen) {
       return
     }
     handleEvent(e)
   }
 
   // Callback when entering a potential drop target
-  const onDragEnter = e => {
-    if (!source) {
+  const onDragEnter = async (e: DragEvent) => {
+    if (!source || gridScreen || !(e.target instanceof HTMLElement)) {
       return
     }
 
     // Find the next valid component to consider dropping over, ignoring nested
     // block components
-    const component = e.target?.closest?.(
-      `.component:not(.block):not(.${source.id})`
-    )
-    if (component && component.classList.contains("droppable")) {
+    let comp = e.target.closest?.(`.component:not(.block):not(.${source.id})`)
+    if (!(comp instanceof HTMLElement)) {
+      return
+    }
+    if (comp?.classList.contains("droppable")) {
       dndStore.actions.updateTarget({
-        id: component.dataset.id,
-        parent: component.dataset.parent,
-        node: getDOMNode(component.dataset.id),
-        empty: component.classList.contains("empty"),
-        acceptsChildren: component.classList.contains("parent"),
+        id: comp.dataset.id!,
+        parent: comp.dataset.parent!,
+        element: getDOMElement(comp.dataset.id!),
+        empty: comp.classList.contains("empty"),
+        acceptsChildren: comp.classList.contains("parent"),
       })
       handleEvent(e)
     }
@@ -257,12 +273,13 @@
     }
 
     // Check if we're adding a new component rather than moving one
-    if (source.newComponentType) {
+    if (source.isNew) {
       dropping = true
       builderStore.actions.dropNewComponent(
-        source.newComponentType,
+        source.type,
         drop.parent,
-        drop.index
+        drop.index,
+        $dndStore.meta?.props
       )
       dropping = false
       stopDragging()
@@ -271,7 +288,7 @@
 
     // Convert parent + index into target + mode
     let legacyDropTarget, legacyDropMode
-    const parent = findComponentById(
+    const parent: Component | null = findComponentById(
       get(screenStore).activeScreen?.props,
       drop.parent
     )
@@ -333,14 +350,3 @@
     document.removeEventListener("drop", onDrop, false)
   })
 </script>
-
-<IndicatorSet
-  componentId={$dndParent}
-  color="var(--spectrum-global-color-static-green-500)"
-  zIndex={920}
-  prefix="Inside"
-/>
-
-{#if $dndIsDragging}
-  <DNDPlaceholderOverlay />
-{/if}

packages/client/src/components/preview/DNDPlaceholderOverlay.svelte

@@ -1,51 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { DNDPlaceholderID } from "constants"
-  import { Utils } from "@budibase/frontend-core"
-
-  let left, top, height, width
-
-  const updatePosition = () => {
-    let node = document.getElementsByClassName(DNDPlaceholderID)[0]
-    const insideGrid = node?.dataset.insideGrid === "true"
-    if (!insideGrid) {
-      node = document.getElementsByClassName(`${DNDPlaceholderID}-dom`)[0]
-    }
-    if (!node) {
-      height = 0
-      width = 0
-    } else {
-      const bounds = node.getBoundingClientRect()
-      left = bounds.left
-      top = bounds.top
-      height = bounds.height
-      width = bounds.width
-    }
-  }
-  const debouncedUpdate = Utils.domDebounce(updatePosition)
-
-  onMount(() => {
-    const interval = setInterval(debouncedUpdate, 100)
-    return () => {
-      clearInterval(interval)
-    }
-  })
-</script>
-
-{#if left != null && top != null && width && height}
-  <div
-    class="overlay"
-    style="left: {left}px; top: {top}px; width: {width}px; height: {height}px;"
-  />
-{/if}
-
-<style>
-  .overlay {
-    position: fixed;
-    z-index: 800;
-    background: hsl(160, 64%, 90%);
-    border-radius: 4px;
-    transition: all 130ms ease-out;
-    border: 2px solid var(--spectrum-global-color-static-green-500);
-  }
-</style>

packages/client/src/components/preview/DNDSelectionIndicators.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import {
+    isGridScreen,
+    dndParent,
+    dndSource,
+    dndIsDragging,
+    dndStore,
+  } from "@/stores"
+  import { DNDPlaceholderID } from "@/constants"
+  import IndicatorSet from "./IndicatorSet.svelte"
+
+  // On grid screens, don't draw the indicator until we've dragged over the
+  // screen. When this happens, the dndSource props will be set as we will have
+  // attached grid metadata styles.
+  $: waitingForGrid = $isGridScreen && !$dndStore.meta?.props
+</script>
+
+{#if $dndIsDragging}
+  {#if !$isGridScreen && $dndParent}
+    <IndicatorSet
+      componentId={$dndParent}
+      color="var(--spectrum-global-color-static-green-400)"
+      zIndex={920}
+      prefix="Inside"
+    />
+  {/if}
+
+  {#if !waitingForGrid}
+    <IndicatorSet
+      componentId={DNDPlaceholderID}
+      color="var(--spectrum-global-color-static-green-500)"
+      zIndex={930}
+      allowResizeAnchors={false}
+      background="hsl(160, 64%, 90%)"
+      animate={!$isGridScreen}
+      text={$dndSource?.name}
+      icon={$dndSource?.icon}
+    />
+  {/if}
+{/if}

packages/client/src/components/preview/GridDNDHandler.svelte

@@ -1,15 +1,50 @@
-<script>
+<script lang="ts">
   import { onMount, onDestroy, getContext } from "svelte"
-  import { builderStore, componentStore } from "stores"
+  import {
+    builderStore,
+    componentStore,
+    dndIsDragging,
+    dndStore,
+    dndSource,
+    isGridScreen,
+  } from "@/stores"
   import { Utils, memo } from "@budibase/frontend-core"
-  import { GridRowHeight } from "constants"
+  import { DNDPlaceholderID, GridRowHeight } from "@/constants"
   import {
     isGridEvent,
     GridParams,
     getGridVar,
     Devices,
-    GridDragModes,
-  } from "utils/grid"
+    GridDragMode,
+  } from "@/utils/grid"
+
+  type GridDragSide =
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right"
+
+  interface GridDragInfo {
+    mode: GridDragMode
+    side?: GridDragSide
+    domTarget?: HTMLElement
+    domComponent: HTMLElement
+    domGrid: HTMLElement
+    id: string
+    gridId: string
+    grid: {
+      startX: number
+      startY: number
+      rowStart: number
+      rowEnd: number
+      colStart: number
+      colEnd: number
+    }
+  }
 
   const context = getContext("context")
 
@@ -18,11 +53,12 @@
   ghost.src =
     "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
 
-  let dragInfo
-  let styles = memo()
+  let scrollElement: HTMLElement
+  let dragInfo: GridDragInfo | undefined
+  let styles = memo<Record<string, number> | undefined>()
 
   // Grid CSS variables
-  $: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
+  $: device = $context.device?.mobile ? Devices.Mobile : Devices.Desktop
   $: vars = {
     colStart: getGridVar(device, GridParams.ColStart),
     colEnd: getGridVar(device, GridParams.ColEnd),
@@ -35,27 +71,54 @@
 
   // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: $instance?.setEphemeralStyles($styles)
+  $: applyStyles($instance, $styles)
+
+  // Reset when not dragging new components
+  $: !$dndIsDragging && stopDragging()
+
+  const scrollOffset = () => scrollElement?.scrollTop || 0
+
+  const applyStyles = async (
+    instance: any,
+    styles: Record<string, number> | undefined
+  ) => {
+    instance?.setEphemeralStyles(styles)
+
+    // If dragging a new component on to a grid screen, tick to allow the
+    // real component to render in the new position before updating the DND
+    // store, preventing the green DND overlay from being out of position
+    if ($dndSource?.isNew && styles) {
+      dndStore.actions.updateNewComponentProps({
+        _styles: {
+          normal: styles,
+        },
+      })
+    }
+  }
 
   // Sugar for a combination of both min and max
-  const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
+  const minMax = (value: number, min: number, max: number) =>
+    Math.min(max, Math.max(min, value))
 
-  const processEvent = Utils.domDebounce((mouseX, mouseY) => {
+  const processEvent = Utils.domDebounce((mouseX: number, mouseY: number) => {
     if (!dragInfo?.grid) {
       return
     }
-    const { mode, side, grid, domGrid } = dragInfo
+    const { mode, grid, domGrid } = dragInfo
     const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
     if (!domGrid) {
       return
     }
-    const cols = parseInt(domGrid.dataset.cols)
-    const colSize = parseInt(domGrid.dataset.colSize)
+    const cols = parseInt(domGrid.dataset.cols || "")
+    const colSize = parseInt(domGrid.dataset.colSize || "")
+    if (isNaN(cols) || isNaN(colSize)) {
+      throw "DOM grid missing required dataset attributes"
+    }
     const diffX = mouseX - startX
     let deltaX = Math.round(diffX / colSize)
-    const diffY = mouseY - startY
+    const diffY = mouseY - startY + scrollOffset()
     let deltaY = Math.round(diffY / GridRowHeight)
-    if (mode === GridDragModes.Move) {
+    if (mode === GridDragMode.Move) {
       deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
       deltaY = Math.max(deltaY, 1 - rowStart)
       const newStyles = {
@@ -65,8 +128,9 @@
         [vars.rowEnd]: rowEnd + deltaY,
       }
       styles.set(newStyles)
-    } else if (mode === GridDragModes.Resize) {
-      let newStyles = {}
+    } else if (mode === GridDragMode.Resize) {
+      const { side } = dragInfo
+      let newStyles: Record<string, number> = {}
       if (side === "right") {
         newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
       } else if (side === "left") {
@@ -92,14 +156,50 @@
     }
   })
 
-  const handleEvent = e => {
+  const handleEvent = (e: DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
     processEvent(e.clientX, e.clientY)
   }
 
+  // Callback when dragging a new component over the preview iframe in a valid
+  // position for the first time
+  const startDraggingPlaceholder = () => {
+    const domComponent = document.getElementsByClassName(DNDPlaceholderID)[0]
+    const domGrid = domComponent?.closest(".grid")
+    if (
+      !(domComponent instanceof HTMLElement) ||
+      !(domGrid instanceof HTMLElement)
+    ) {
+      return
+    }
+    const styles = getComputedStyle(domComponent)
+    const bounds = domComponent.getBoundingClientRect()
+
+    // Show as active
+    domComponent.classList.add("dragging")
+    domGrid.classList.add("highlight")
+
+    // Update state
+    dragInfo = {
+      domComponent,
+      domGrid,
+      id: DNDPlaceholderID,
+      gridId: domGrid.parentElement!.dataset.id!,
+      mode: GridDragMode.Move,
+      grid: {
+        startX: bounds.left + bounds.width / 2,
+        startY: bounds.top + bounds.height / 2 + scrollOffset(),
+        rowStart: parseInt(styles.gridRowStart),
+        rowEnd: parseInt(styles.gridRowEnd),
+        colStart: parseInt(styles.gridColumnStart),
+        colEnd: parseInt(styles.gridColumnEnd),
+      },
+    }
+  }
+
   // Callback when initially starting a drag on a draggable component
-  const onDragStart = e => {
+  const onDragStart = (e: DragEvent) => {
     if (!isGridEvent(e)) {
       return
     }
@@ -108,27 +208,30 @@
     e.dataTransfer.setDragImage(ghost, 0, 0)
 
     // Extract state
-    let mode, id, side
+    let mode: GridDragMode, id: string, side
     if (e.target.dataset.indicator === "true") {
-      mode = e.target.dataset.dragMode
-      id = e.target.dataset.id
-      side = e.target.dataset.side
+      mode = e.target.dataset.dragMode as GridDragMode
+      id = e.target.dataset.id!
+      side = e.target.dataset.side as GridDragSide
     } else {
       // Handle move
-      mode = GridDragModes.Move
-      const component = e.target.closest(".component")
-      id = component.dataset.id
+      mode = GridDragMode.Move
+      const component = e.target.closest(".component") as HTMLElement
+      id = component.dataset.id!
     }
 
     // If holding ctrl/cmd then leave behind a duplicate of this component
-    if (mode === GridDragModes.Move && (e.ctrlKey || e.metaKey)) {
+    if (mode === GridDragMode.Move && (e.ctrlKey || e.metaKey)) {
       builderStore.actions.duplicateComponent(id, "above", false)
     }
 
     // Find grid parent and read from DOM
     const domComponent = document.getElementsByClassName(id)[0]
     const domGrid = domComponent?.closest(".grid")
-    if (!domGrid) {
+    if (
+      !(domComponent instanceof HTMLElement) ||
+      !(domGrid instanceof HTMLElement)
+    ) {
       return
     }
     const styles = getComputedStyle(domComponent)
@@ -144,25 +247,29 @@
       domComponent,
       domGrid,
       id,
-      gridId: domGrid.parentNode.dataset.id,
+      gridId: domGrid.parentElement!.dataset.id!,
       mode,
       side,
       grid: {
         startX: e.clientX,
-        startY: e.clientY,
-        rowStart: parseInt(styles["grid-row-start"]),
-        rowEnd: parseInt(styles["grid-row-end"]),
-        colStart: parseInt(styles["grid-column-start"]),
-        colEnd: parseInt(styles["grid-column-end"]),
+        startY: e.clientY + scrollOffset(),
+        rowStart: parseInt(styles.gridRowStart),
+        rowEnd: parseInt(styles.gridRowEnd),
+        colStart: parseInt(styles.gridColumnStart),
+        colEnd: parseInt(styles.gridColumnEnd),
       },
     }
 
     // Add event handler to clear all drag state when dragging ends
-    dragInfo.domTarget.addEventListener("dragend", stopDragging)
+    dragInfo.domTarget!.addEventListener("dragend", stopDragging, false)
   }
 
-  const onDragOver = e => {
+  const onDragOver = (e: DragEvent) => {
     if (!dragInfo) {
+      // Check if we're dragging a new component
+      if ($dndIsDragging && $dndSource?.isNew && $isGridScreen) {
+        startDraggingPlaceholder()
+      }
       return
     }
     handleEvent(e)
@@ -178,7 +285,7 @@
     // Reset DOM
     domComponent.classList.remove("dragging")
     domGrid.classList.remove("highlight")
-    domTarget.removeEventListener("dragend", stopDragging)
+    domTarget?.removeEventListener("dragend", stopDragging)
 
     // Save changes
     if ($styles) {
@@ -186,17 +293,22 @@
     }
 
     // Reset state
-    dragInfo = null
-    styles.set(null)
+    dragInfo = undefined
+    styles.set(undefined)
   }
 
   onMount(() => {
+    scrollElement = document.getElementsByClassName(
+      "screen-wrapper"
+    )[0] as HTMLElement
     document.addEventListener("dragstart", onDragStart, false)
     document.addEventListener("dragover", onDragOver, false)
+    document.addEventListener("scroll", processEvent)
   })
 
   onDestroy(() => {
     document.removeEventListener("dragstart", onDragStart, false)
     document.removeEventListener("dragover", onDragOver, false)
+    document.removeEventListener("scroll", processEvent)
   })
 </script>

packages/client/src/components/preview/GridStylesButton.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let style
   export let value

packages/client/src/components/preview/HoverIndicator.svelte

@@ -1,26 +1,30 @@
-<script>
+<script lang="ts">
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { dndIsDragging, hoverStore, builderStore } from "stores"
+  import { dndIsDragging, hoverStore, builderStore } from "@/stores"
 
   $: componentId = $hoverStore.hoveredComponentId
   $: selectedComponentId = $builderStore.selectedComponentId
   $: selected = componentId === selectedComponentId
 
-  const onMouseOver = e => {
+  const onMouseOver = (e: MouseEvent) => {
+    const target = e.target as HTMLElement
+
     // Ignore if dragging
     if (e.buttons > 0) {
       return
     }
 
     let newId
-    if (e.target.classList.contains("anchor")) {
+    if (target.classList.contains("anchor")) {
       // Handle resize anchors
-      newId = e.target.dataset.id
+      newId = target.dataset.id
     } else {
       // Handle normal components
-      const element = e.target.closest(".interactive.component:not(.root)")
-      newId = element?.dataset?.id
+      const element = target.closest(".interactive.component:not(.root)")
+      if (element instanceof HTMLElement) {
+        newId = element.dataset?.id
+      }
     }
 
     if (newId !== componentId) {
@@ -43,9 +47,11 @@
   })
 </script>
 
-<IndicatorSet
-  componentId={$dndIsDragging ? null : componentId}
-  color="var(--spectrum-global-color-static-blue-200)"
-  zIndex={selected ? 890 : 910}
-  allowResizeAnchors
-/>
+{#if !$dndIsDragging && componentId}
+  <IndicatorSet
+    {componentId}
+    color="var(--spectrum-global-color-static-blue-200)"
+    zIndex={selected ? 890 : 910}
+    allowResizeAnchors
+  />
+{/if}}

packages/client/src/components/preview/Indicator.svelte

@@ -1,19 +1,21 @@
-<script>
+<script lang="ts">
   import { Icon } from "@budibase/bbui"
-  import { GridDragModes } from "utils/grid"
+  import { GridDragMode } from "@/utils/grid"
 
-  export let top
-  export let left
-  export let width
-  export let height
-  export let text
-  export let icon
-  export let color
-  export let zIndex
-  export let componentId
+  export let top: number
+  export let left: number
+  export let width: number
+  export let height: number
+  export let text: string | undefined
+  export let icon: string | undefined
+  export let color: string
+  export let zIndex: number
+  export let componentId: string
   export let line = false
   export let alignRight = false
   export let showResizeAnchors = false
+  export let background: string | undefined
+  export let animate = false
 
   const AnchorSides = [
     "right",
@@ -33,10 +35,12 @@
   class="indicator"
   class:flipped
   class:line
-  style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
+  style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex}; --bg: {background ||
+    'none'};"
   class:withText={!!text}
   class:vCompact={height < 40}
   class:hCompact={width < 40}
+  class:animate
 >
   {#if text || icon}
     <div
@@ -46,7 +50,7 @@
       class:right={alignRight}
       draggable="true"
       data-indicator="true"
-      data-drag-mode={GridDragModes.Move}
+      data-drag-mode={GridDragMode.Move}
       data-id={componentId}
     >
       {#if icon}
@@ -65,7 +69,7 @@
         class="anchor {side}"
         draggable="true"
         data-indicator="true"
-        data-drag-mode={GridDragModes.Resize}
+        data-drag-mode={GridDragMode.Resize}
         data-side={side}
         data-id={componentId}
       >
@@ -84,6 +88,7 @@
     border: 2px solid var(--color);
     pointer-events: none;
     border-radius: 4px;
+    background: var(--bg);
   }
   .indicator.withText {
     border-top-left-radius: 0;
@@ -94,6 +99,9 @@
   .indicator.line {
     border-radius: 4px !important;
   }
+  .indicator.animate {
+    transition: all 130ms ease-out;
+  }
 
   /* Label styles */
   .label {

packages/client/src/components/preview/IndicatorSet.svelte

@@ -1,42 +1,68 @@
-<script>
+<script lang="ts">
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
   import { memo, Utils } from "@budibase/frontend-core"
 
-  export let componentId = null
-  export let color = null
-  export let zIndex = 900
-  export let prefix = null
-  export let allowResizeAnchors = false
+  export let componentId: string
+  export let color: string
+  export let zIndex: number = 900
+  export let prefix: string | undefined = undefined
+  export let allowResizeAnchors: boolean = false
+  export let background: string | undefined = undefined
+  export let animate: boolean = false
+  export let text: string | undefined = undefined
+  export let icon: string | undefined = undefined
+
+  interface IndicatorState {
+    visible: boolean
+    insideModal: boolean
+    insideSidePanel: boolean
+    top: number
+    left: number
+    width: number
+    height: number
+  }
+
+  interface IndicatorSetState {
+    // Cached props
+    componentId: string
+    color: string
+    zIndex: number
+    prefix?: string
+    allowResizeAnchors: boolean
+
+    // Computed state
+    indicators: IndicatorState[]
+    text?: string
+    icon?: string
+    insideGrid: boolean
+    error: boolean
+  }
 
-  // Offset = 6 (clip-root padding) - 1 (half the border thickness)
   const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
   const mutationObserver = new MutationObserver(() => debouncedUpdate())
-  const defaultState = () => ({
-    // Cached props
+  const defaultState = (): IndicatorSetState => ({
     componentId,
     color,
     zIndex,
     prefix,
     allowResizeAnchors,
-
-    // Computed state
     indicators: [],
-    text: null,
-    icon: null,
+    text,
+    icon,
     insideGrid: false,
     error: false,
   })
 
-  let interval
+  let interval: ReturnType<typeof setInterval>
   let state = defaultState()
   let observingMutations = false
   let updating = false
-  let intersectionObservers = []
+  let intersectionObservers: IntersectionObserver[] = []
   let callbackCount = 0
-  let nextState
+  let nextState: ReturnType<typeof defaultState>
 
   $: componentId, reset()
   $: visibleIndicators = state.indicators.filter(x => x.visible)
@@ -58,27 +84,34 @@
     updating = false
   }
 
-  const observeMutations = element => {
-    mutationObserver.observe(element, {
+  const getElements = (className: string): HTMLElement[] => {
+    return [...document.getElementsByClassName(className)]
+      .filter(el => el instanceof HTMLElement)
+      .slice(0, 100)
+  }
+
+  const observeMutations = (node: Node) => {
+    mutationObserver.observe(node, {
       attributes: true,
       attributeFilter: ["style"],
     })
     observingMutations = true
   }
 
-  const createIntersectionCallback = idx => entries => {
-    if (callbackCount >= intersectionObservers.length) {
-      return
+  const createIntersectionCallback =
+    (idx: number) => (entries: IntersectionObserverEntry[]) => {
+      if (callbackCount >= intersectionObservers.length) {
+        return
+      }
+      nextState.indicators[idx].visible =
+        nextState.indicators[idx].insideModal ||
+        nextState.indicators[idx].insideSidePanel ||
+        entries[0].isIntersecting
+      if (++callbackCount === intersectionObservers.length) {
+        state = nextState
+        updating = false
+      }
     }
-    nextState.indicators[idx].visible =
-      nextState.indicators[idx].insideModal ||
-      nextState.indicators[idx].insideSidePanel ||
-      entries[0].isIntersecting
-    if (++callbackCount === intersectionObservers.length) {
-      state = nextState
-      updating = false
-    }
-  }
 
   const updatePosition = () => {
     if (updating) {
@@ -86,11 +119,7 @@
     }
 
     // Sanity check
-    if (!componentId) {
-      state = defaultState()
-      return
-    }
-    let elements = document.getElementsByClassName(componentId)
+    let elements = getElements(componentId)
     if (!elements.length) {
       state = defaultState()
       return
@@ -108,17 +137,19 @@
     }
 
     // Check if we're inside a grid
-    if (allowResizeAnchors) {
-      nextState.insideGrid = elements[0]?.dataset.insideGrid === "true"
-    }
+    nextState.insideGrid = elements[0]?.dataset.insideGrid === "true"
 
-    // Get text to display
-    nextState.text = elements[0].dataset.name
-    if (nextState.prefix) {
-      nextState.text = `${nextState.prefix} ${nextState.text}`
+    // Get text and icon to display
+    if (!text) {
+      nextState.text = elements[0].dataset.name
+      if (nextState.prefix) {
+        nextState.text = `${nextState.prefix} ${nextState.text}`
+      }
     }
-    if (elements[0].dataset.icon) {
-      nextState.icon = elements[0].dataset.icon
+    if (!icon) {
+      if (elements[0].dataset.icon) {
+        nextState.icon = elements[0].dataset.icon
+      }
     }
     nextState.error = elements[0].classList.contains("error")
 
@@ -129,11 +160,8 @@
     // Extract valid children
     // Sanity limit of active indicators
     if (!nextState.insideGrid) {
-      elements = document.getElementsByClassName(`${componentId}-dom`)
+      elements = getElements(`${componentId}-dom`)
     }
-    elements = Array.from(elements)
-      .filter(x => x != null)
-      .slice(0, 100)
     const multi = elements.length > 1
 
     // If there aren't any nodes then reset
@@ -143,15 +171,20 @@
     }
 
     const device = document.getElementById("app-root")
+    if (!device) {
+      throw "app-root node not found"
+    }
     const deviceBounds = device.getBoundingClientRect()
     nextState.indicators = elements.map((element, idx) => {
       const elBounds = element.getBoundingClientRect()
-      let indicator = {
+      let indicator: IndicatorState = {
         top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
         left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
         width: Math.round(elBounds.width + 2),
         height: Math.round(elBounds.height + 2),
         visible: true,
+        insideModal: false,
+        insideSidePanel: false,
       }
 
       // If observing more than one node then we need to use an intersection
@@ -199,11 +232,13 @@
     left={indicator.left}
     width={indicator.width}
     height={indicator.height}
-    text={idx === 0 ? state.text : null}
-    icon={idx === 0 ? state.icon : null}
+    text={idx === 0 ? state.text : undefined}
+    icon={idx === 0 ? state.icon : undefined}
     showResizeAnchors={state.allowResizeAnchors && state.insideGrid}
     color={state.error ? errorColor : state.color}
     componentId={state.componentId}
     zIndex={state.zIndex}
+    {background}
+    {animate}
   />
 {/each}

packages/client/src/components/preview/KeyboardManager.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import { get } from "svelte/store"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   onMount(() => {
     if (get(builderStore).inBuilder) {

packages/client/src/components/preview/SelectionIndicator.svelte

@@ -1,5 +1,5 @@
-<script>
-  import { builderStore } from "stores"
+<script lang="ts">
+  import { dndIsDragging, builderStore } from "@/stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 
   $: color = $builderStore.editMode
@@ -7,9 +7,11 @@
     : "var(--spectrum-global-color-static-blue-600)"
 </script>
 
-<IndicatorSet
-  componentId={$builderStore.selectedComponentId}
-  {color}
-  zIndex={900}
-  allowResizeAnchors
-/>
+{#if !$dndIsDragging && $builderStore.selectedComponentId}
+  <IndicatorSet
+    componentId={$builderStore.selectedComponentId}
+    {color}
+    zIndex={900}
+    allowResizeAnchors
+  />
+{/if}

packages/client/src/components/preview/SettingsBar.svelte

@@ -4,9 +4,9 @@
   import GridStylesButton from "./GridStylesButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore, componentStore, dndIsDragging } from "stores"
+  import { builderStore, componentStore, dndIsDragging } from "@/stores"
   import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
-  import { getGridVar, GridParams, Devices } from "utils/grid"
+  import { getGridVar, GridParams, Devices } from "@/utils/grid"
 
   const context = getContext("context")
   const verticalOffset = 36

packages/client/src/components/preview/SettingsButton.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop

packages/client/src/components/preview/SettingsColorPicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let prop
   export let component

packages/client/src/components/preview/SettingsPicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore } from "stores"
+  import { builderStore } from "@/stores"
 
   export let prop
   export let options

packages/client/src/index.d.ts

@@ -1,5 +0,0 @@
-interface Window {
-  "##BUDIBASE_APP_ID##": string
-  "##BUDIBASE_IN_BUILDER##": string
-  MIGRATING_APP: boolean
-}

packages/client/src/index.js

@@ -1,138 +0,0 @@
-import ClientApp from "./components/ClientApp.svelte"
-import UpdatingApp from "./components/UpdatingApp.svelte"
-import {
-  builderStore,
-  appStore,
-  blockStore,
-  componentStore,
-  environmentStore,
-  dndStore,
-  eventStore,
-  hoverStore,
-  stateStore,
-} from "./stores"
-import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
-import { get } from "svelte/store"
-import { initWebsocket } from "./websocket.js"
-
-// Provide svelte and svelte/internal as globals for custom components
-import * as svelte from "svelte"
-import * as internal from "svelte/internal"
-
-window.svelte_internal = internal
-window.svelte = svelte
-
-// Initialise spectrum icons
-loadSpectrumIcons()
-
-let app
-
-const loadBudibase = async () => {
-  // Update builder store with any builder flags
-  builderStore.set({
-    ...get(builderStore),
-    inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
-    layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
-    screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
-    selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
-    previewId: window["##BUDIBASE_PREVIEW_ID##"],
-    theme: window["##BUDIBASE_PREVIEW_THEME##"],
-    customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
-    previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
-    navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
-    hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
-    usedPlugins: window["##BUDIBASE_USED_PLUGINS##"],
-    location: window["##BUDIBASE_LOCATION##"],
-    snippets: window["##BUDIBASE_SNIPPETS##"],
-    componentErrors: window["##BUDIBASE_COMPONENT_ERRORS##"],
-  })
-
-  // Set app ID - this window flag is set by both the preview and the real
-  // server rendered app HTML
-  appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
-
-  // Set the flag used to determine if the app is being loaded via an iframe
-  appStore.actions.setAppEmbedded(
-    window["##BUDIBASE_APP_EMBEDDED##"] === "true"
-  )
-
-  if (window.MIGRATING_APP) {
-    new UpdatingApp({
-      target: window.document.body,
-    })
-    return
-  }
-
-  // Fetch environment info
-  if (!get(environmentStore)?.loaded) {
-    await environmentStore.actions.fetchEnvironment()
-  }
-
-  // Register handler for runtime events from the builder
-  window.handleBuilderRuntimeEvent = (type, data) => {
-    if (!window["##BUDIBASE_IN_BUILDER##"]) {
-      return
-    }
-    if (type === "event-completed") {
-      eventStore.actions.resolveEvent(data)
-    } else if (type === "eject-block") {
-      const block = blockStore.actions.getBlock(data)
-      block?.eject()
-    } else if (type === "dragging-new-component") {
-      const { dragging, component } = data
-      if (dragging) {
-        const definition =
-          componentStore.actions.getComponentDefinition(component)
-        dndStore.actions.startDraggingNewComponent({ component, definition })
-      } else {
-        dndStore.actions.reset()
-      }
-    } else if (type === "request-context") {
-      const { selectedComponentInstance, screenslotInstance } =
-        get(componentStore)
-      const instance = selectedComponentInstance || screenslotInstance
-      const context = instance?.getDataContext()
-      let stringifiedContext = null
-      try {
-        stringifiedContext = JSON.stringify(context)
-      } catch (error) {
-        // Ignore - invalid context
-      }
-      eventStore.actions.dispatchEvent("provide-context", {
-        context: stringifiedContext,
-      })
-    } else if (type === "hover-component") {
-      hoverStore.actions.hoverComponent(data, false)
-    } else if (type === "builder-meta") {
-      builderStore.actions.setMetadata(data)
-    } else if (type === "builder-state") {
-      const [[key, value]] = Object.entries(data)
-      stateStore.actions.setValue(key, value)
-    }
-  }
-
-  // Register any custom components
-  if (window["##BUDIBASE_CUSTOM_COMPONENTS##"]) {
-    window["##BUDIBASE_CUSTOM_COMPONENTS##"].forEach(component => {
-      componentStore.actions.registerCustomComponent(component)
-    })
-  }
-
-  // Make a callback available for custom component bundles to register
-  // themselves at runtime
-  window.registerCustomComponent =
-    componentStore.actions.registerCustomComponent
-
-  // Initialise websocket
-  initWebsocket()
-
-  // Create app if one hasn't been created yet
-  if (!app) {
-    app = new ClientApp({
-      target: window.document.body,
-    })
-  }
-}
-
-// Attach to window so the HTML template can call this when it loads
-window.loadBudibase = loadBudibase

packages/client/src/index.ts

@@ -1,6 +1,83 @@
+import ClientApp from "./components/ClientApp.svelte"
+import UpdatingApp from "./components/UpdatingApp.svelte"
+import {
+  builderStore,
+  appStore,
+  blockStore,
+  componentStore,
+  environmentStore,
+  dndStore,
+  eventStore,
+  hoverStore,
+  stateStore,
+} from "@/stores"
+import { get } from "svelte/store"
+import { initWebsocket } from "@/websocket"
 import { APIClient } from "@budibase/frontend-core"
-import type { ActionTypes } from "./constants"
+import type { ActionTypes } from "@/constants"
 import { Readable } from "svelte/store"
+import {
+  Screen,
+  Layout,
+  Theme,
+  AppCustomTheme,
+  PreviewDevice,
+  AppNavigation,
+  Plugin,
+  Snippet,
+  UIComponentError,
+  CustomComponent,
+} from "@budibase/types"
+
+// Provide svelte and svelte/internal as globals for custom components
+import * as svelte from "svelte"
+// @ts-ignore
+import * as internal from "svelte/internal"
+window.svelte_internal = internal
+window.svelte = svelte
+
+// Initialise spectrum icons
+// eslint-disable-next-line local-rules/no-budibase-imports
+import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
+loadSpectrumIcons()
+
+// Extend global window scope
+declare global {
+  interface Window {
+    // Data from builder
+    "##BUDIBASE_APP_ID##"?: string
+    "##BUDIBASE_IN_BUILDER##"?: true
+    "##BUDIBASE_PREVIEW_LAYOUT##"?: Layout
+    "##BUDIBASE_PREVIEW_SCREEN##"?: Screen
+    "##BUDIBASE_SELECTED_COMPONENT_ID##"?: string
+    "##BUDIBASE_PREVIEW_ID##"?: number
+    "##BUDIBASE_PREVIEW_THEME##"?: Theme
+    "##BUDIBASE_PREVIEW_CUSTOM_THEME##"?: AppCustomTheme
+    "##BUDIBASE_PREVIEW_DEVICE##"?: PreviewDevice
+    "##BUDIBASE_APP_EMBEDDED##"?: string // This is a bool wrapped in a string
+    "##BUDIBASE_PREVIEW_NAVIGATION##"?: AppNavigation
+    "##BUDIBASE_HIDDEN_COMPONENT_IDS##"?: string[]
+    "##BUDIBASE_USED_PLUGINS##"?: Plugin[]
+    "##BUDIBASE_LOCATION##"?: {
+      protocol: string
+      hostname: string
+      port: string
+    }
+    "##BUDIBASE_SNIPPETS##"?: Snippet[]
+    "##BUDIBASE_COMPONENT_ERRORS##"?: Record<string, UIComponentError>[]
+    "##BUDIBASE_CUSTOM_COMPONENTS##"?: CustomComponent[]
+
+    // Other flags
+    MIGRATING_APP: boolean
+
+    // Client additions
+    handleBuilderRuntimeEvent: (type: string, data: any) => void
+    registerCustomComponent: typeof componentStore.actions.registerCustomComponent
+    loadBudibase: typeof loadBudibase
+    svelte: typeof svelte
+    svelte_internal: typeof internal
+  }
+}
 
 export interface SDK {
   API: APIClient
@@ -28,4 +105,114 @@ export type Component = Readable<{
   errorState: boolean
 }>
 
-export type Context = Readable<{}>
+export type Context = Readable<Record<string, any>>
+
+let app: ClientApp
+
+const loadBudibase = async () => {
+  // Update builder store with any builder flags
+  builderStore.set({
+    ...get(builderStore),
+    inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
+    layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
+    screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
+    selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
+    previewId: window["##BUDIBASE_PREVIEW_ID##"],
+    theme: window["##BUDIBASE_PREVIEW_THEME##"],
+    customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
+    previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
+    navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
+    hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
+    usedPlugins: window["##BUDIBASE_USED_PLUGINS##"],
+    location: window["##BUDIBASE_LOCATION##"],
+    snippets: window["##BUDIBASE_SNIPPETS##"],
+    componentErrors: window["##BUDIBASE_COMPONENT_ERRORS##"],
+  })
+
+  // Set app ID - this window flag is set by both the preview and the real
+  // server rendered app HTML
+  appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
+
+  // Set the flag used to determine if the app is being loaded via an iframe
+  appStore.actions.setAppEmbedded(
+    window["##BUDIBASE_APP_EMBEDDED##"] === "true"
+  )
+
+  if (window.MIGRATING_APP) {
+    new UpdatingApp({
+      target: window.document.body,
+    })
+    return
+  }
+
+  // Fetch environment info
+  if (!get(environmentStore)?.loaded) {
+    await environmentStore.actions.fetchEnvironment()
+  }
+
+  // Register handler for runtime events from the builder
+  window.handleBuilderRuntimeEvent = (type, data) => {
+    if (!window["##BUDIBASE_IN_BUILDER##"]) {
+      return
+    }
+    if (type === "event-completed") {
+      eventStore.actions.resolveEvent(data)
+    } else if (type === "eject-block") {
+      const block = blockStore.actions.getBlock(data)
+      block?.eject()
+    } else if (type === "dragging-new-component") {
+      const { dragging, component } = data
+      if (dragging) {
+        dndStore.actions.startDraggingNewComponent(component)
+      } else {
+        dndStore.actions.reset()
+      }
+    } else if (type === "request-context") {
+      const { selectedComponentInstance, screenslotInstance } =
+        get(componentStore)
+      const instance = selectedComponentInstance || screenslotInstance
+      const context = instance?.getDataContext()
+      let stringifiedContext = null
+      try {
+        stringifiedContext = JSON.stringify(context)
+      } catch (error) {
+        // Ignore - invalid context
+      }
+      eventStore.actions.dispatchEvent("provide-context", {
+        context: stringifiedContext,
+      })
+    } else if (type === "hover-component") {
+      hoverStore.actions.hoverComponent(data, false)
+    } else if (type === "builder-meta") {
+      builderStore.actions.setMetadata(data)
+    } else if (type === "builder-state") {
+      const [[key, value]] = Object.entries(data)
+      stateStore.actions.setValue(key, value)
+    }
+  }
+
+  // Register any custom components
+  if (window["##BUDIBASE_CUSTOM_COMPONENTS##"]) {
+    window["##BUDIBASE_CUSTOM_COMPONENTS##"].forEach(component => {
+      componentStore.actions.registerCustomComponent(component)
+    })
+  }
+
+  // Make a callback available for custom component bundles to register
+  // themselves at runtime
+  window.registerCustomComponent =
+    componentStore.actions.registerCustomComponent
+
+  // Initialise websocket
+  initWebsocket()
+
+  // Create app if one hasn't been created yet
+  if (!app) {
+    app = new ClientApp({
+      target: window.document.body,
+    })
+  }
+}
+
+// Attach to window so the HTML template can call this when it loads
+window.loadBudibase = loadBudibase

packages/client/src/sdk.js

@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import {
   authStore,
   notificationStore,
@@ -18,13 +18,13 @@ import {
   appStore,
   stateStore,
   createContextStore,
-} from "stores"
-import { styleable } from "utils/styleable"
-import { linkable } from "utils/linkable"
-import { getAction } from "utils/getAction"
-import Provider from "components/context/Provider.svelte"
-import Block from "components/Block.svelte"
-import BlockComponent from "components/BlockComponent.svelte"
+} from "@/stores"
+import { styleable } from "@/utils/styleable"
+import { linkable } from "@/utils/linkable"
+import { getAction } from "@/utils/getAction"
+import Provider from "@/components/context/Provider.svelte"
+import Block from "@/components/Block.svelte"
+import BlockComponent from "@/components/BlockComponent.svelte"
 import { ActionTypes } from "./constants"
 import {
   fetchDatasourceSchema,
@@ -41,7 +41,7 @@ import {
   memo,
   derivedMemo,
 } from "@budibase/frontend-core"
-import { createValidatorFromConstraints } from "components/app/forms/validation"
+import { createValidatorFromConstraints } from "@/components/app/forms/validation"
 
 export default {
   API,

packages/client/src/stores/app.js

@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import { get, writable, derived } from "svelte/store"
 
 const initialState = {

packages/client/src/stores/auth.ts

@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import { writable } from "svelte/store"
 
 const createAuthStore = () => {

packages/client/src/stores/builder.js

@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { devToolsStore } from "./devTools.js"
 import { eventStore } from "./events.js"
 
@@ -77,11 +77,12 @@ const createBuilderStore = () => {
         mode,
       })
     },
-    dropNewComponent: (component, parent, index) => {
+    dropNewComponent: (component, parent, index, props) => {
       eventStore.actions.dispatchEvent("drop-new-component", {
         component,
         parent,
         index,
+        props,
       })
     },
     setEditMode: enabled => {

packages/client/src/stores/dataSource.js

@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { FieldTypes } from "../constants"
 import { routeStore } from "./routes"
 

packages/client/src/stores/derived/dndComponentPath.js

@@ -1,6 +1,6 @@
 import { derived } from "svelte/store"
-import { findComponentPathById } from "utils/components.js"
-import { dndParent } from "../dnd.js"
+import { findComponentPathById } from "@/utils/components.js"
+import { dndParent } from "../dnd.ts"
 import { screenStore } from "../screens.js"
 
 export const dndComponentPath = derived(

packages/client/src/stores/dnd.js

@@ -1,88 +0,0 @@
-import { writable } from "svelte/store"
-import { derivedMemo } from "@budibase/frontend-core"
-
-const createDndStore = () => {
-  const initialState = {
-    // Info about the dragged component
-    source: null,
-
-    // Info about the target component being hovered over
-    target: null,
-
-    // Info about where the component would be dropped
-    drop: null,
-  }
-  const store = writable(initialState)
-
-  const startDraggingExistingComponent = ({ id, parent, bounds, index }) => {
-    store.set({
-      ...initialState,
-      source: { id, parent, bounds, index },
-    })
-  }
-
-  const startDraggingNewComponent = ({ component, definition }) => {
-    if (!component) {
-      return
-    }
-
-    // Get size of new component so we can show a properly sized placeholder
-    const width = definition?.size?.width || 128
-    const height = definition?.size?.height || 64
-
-    store.set({
-      ...initialState,
-      source: {
-        id: null,
-        parent: null,
-        bounds: { height, width },
-        index: null,
-        newComponentType: component,
-      },
-    })
-  }
-
-  const updateTarget = ({ id, parent, node, empty, acceptsChildren }) => {
-    store.update(state => {
-      state.target = { id, parent, node, empty, acceptsChildren }
-      return state
-    })
-  }
-
-  const updateDrop = ({ parent, index }) => {
-    store.update(state => {
-      state.drop = { parent, index }
-      return state
-    })
-  }
-
-  const reset = () => {
-    store.set(initialState)
-  }
-
-  return {
-    subscribe: store.subscribe,
-    actions: {
-      startDraggingExistingComponent,
-      startDraggingNewComponent,
-      updateTarget,
-      updateDrop,
-      reset,
-    },
-  }
-}
-
-export const dndStore = createDndStore()
-
-// The DND store is updated extremely frequently, so we can greatly improve
-// performance by deriving any state that needs to be externally observed.
-// By doing this and using primitives, we can avoid invalidating other stores
-// or components which depend on DND state unless values actually change.
-export const dndParent = derivedMemo(dndStore, x => x.drop?.parent)
-export const dndIndex = derivedMemo(dndStore, x => x.drop?.index)
-export const dndBounds = derivedMemo(dndStore, x => x.source?.bounds)
-export const dndIsDragging = derivedMemo(dndStore, x => !!x.source)
-export const dndIsNewComponent = derivedMemo(
-  dndStore,
-  x => x.source?.newComponentType != null
-)