diff --git a/lerna.json b/lerna.json
index c893e4b402..18c131fe56 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 0fa4687242..a70d19209e 100644
--- a/packages/builder/package.json
+++ b/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",
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index bc88f0f981..2acde47539 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/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
diff --git a/packages/builder/src/components/common/CodeEditor/index.ts b/packages/builder/src/components/common/CodeEditor/index.ts
index 0c974e0bf4..5529484665 100644
--- a/packages/builder/src/components/common/CodeEditor/index.ts
+++ b/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
 }
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index ffb477012c..4bd37bf72c 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/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}
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index f10c44f81f..4862217b13 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/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) &#10100; ... &#10101;"
         value={code}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index aa0b26f6b7..d13d72b89f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/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;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index ba600c8eef..59548ada01 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/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)
diff --git a/packages/builder/src/stores/builder/app.ts b/packages/builder/src/stores/builder/app.ts
index 3c8ed4afc1..abebb5d9f1 100644
--- a/packages/builder/src/stores/builder/app.ts
+++ b/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,
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index b1198ca7b4..b3e897fa3c 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/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
@@ -316,6 +311,8 @@ export class ComponentStore extends BudiStore<ComponentState> {
             component[setting.key] = fieldOptions[0]
             component.label = fieldOptions[0]
           }
+        } else if (setting.type === "icon") {
+          component[setting.key] = "ri-star-fill"
         } else if (useDefaultValues && setting.defaultValue !== undefined) {
           // Use default value where required
           component[setting.key] = setting.defaultValue
@@ -427,17 +424,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 +453,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
       _id: Helpers.uuid(),
       _component: definition.component,
       _styles: {
-        normal: {},
+        normal: { ...presetProps?._styles?.normal },
         hover: {},
         active: {},
       },
@@ -512,19 +502,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 +593,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 +627,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 +707,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 +1064,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 +1195,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 +1231,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 +1239,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 +1268,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) {
diff --git a/packages/builder/src/stores/builder/navigation.ts b/packages/builder/src/stores/builder/navigation.ts
index 1574efee2a..1ef019a11c 100644
--- a/packages/builder/src/stores/builder/navigation.ts
+++ b/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)
   }
diff --git a/packages/builder/src/stores/builder/preview.ts b/packages/builder/src/stores/builder/preview.ts
index 87b2b9355e..a382eeefb0 100644
--- a/packages/builder/src/stores/builder/preview.ts
+++ b/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,
diff --git a/packages/builder/src/types/bindings.ts b/packages/builder/src/types/bindings.ts
new file mode 100644
index 0000000000..00571f1d8b
--- /dev/null
+++ b/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
diff --git a/packages/builder/src/types/index.ts b/packages/builder/src/types/index.ts
new file mode 100644
index 0000000000..f280d975b4
--- /dev/null
+++ b/packages/builder/src/types/index.ts
@@ -0,0 +1 @@
+export * from "./bindings"
diff --git a/packages/client/package.json b/packages/client/package.json
index 2ae049f6d0..72be403698 100644
--- a/packages/client/package.json
+++ b/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",
diff --git a/packages/client/src/api/api.ts b/packages/client/src/api/api.ts
index b944f7bd7c..564f401164 100644
--- a/packages/client/src/api/api.ts
+++ b/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({
diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 48c11f152a..5f39f7eef1 100644
--- a/packages/client/src/components/Block.svelte
+++ b/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")
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index 12555a7fb5..062218f963 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/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
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 2840d82f47..b1ee03e84a 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/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>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3e22ffada1..77414ed37f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/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
diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index f15cd29ed8..61f3b577a8 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/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"
 
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index d19585dcec..5e75edfeb8 100644
--- a/packages/client/src/components/Router.svelte
+++ b/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"
 
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index bf91a3a6df..591afc567d 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/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"
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index b75ca46223..74542d52ec 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/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"
 
diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 34707c394d..9756cf6561 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/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
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 4bd2fec0da..5d650a3003 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/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
diff --git a/packages/client/src/components/app/blocks/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
index f931319118..10e53241eb 100644
--- a/packages/client/src/components/app/blocks/FormBlockComponent.svelte
+++ b/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
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index 6cecf57a2c..238cdb9508 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/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"
diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index d8816b6c24..b143c508d5 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/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"
diff --git a/packages/client/src/components/app/blocks/RowExplorer.svelte b/packages/client/src/components/app/blocks/RowExplorer.svelte
index ebddaa83a7..8d338aa577 100644
--- a/packages/client/src/components/app/blocks/RowExplorer.svelte
+++ b/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"
diff --git a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
index 5b89018fdf..903cc59637 100644
--- a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
+++ b/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"
 
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index cf833642d2..4a0b14d04f 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/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"
 
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 696b65abcd..03598d53bd 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/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
diff --git a/packages/client/src/components/app/deprecated/TableBlock.svelte b/packages/client/src/components/app/deprecated/TableBlock.svelte
index cdb45cfed7..cc6059801d 100644
--- a/packages/client/src/components/app/deprecated/TableBlock.svelte
+++ b/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
diff --git a/packages/client/src/components/app/deprecated/table/Table.svelte b/packages/client/src/components/app/deprecated/table/Table.svelte
index ca97a012bc..92309c9273 100644
--- a/packages/client/src/components/app/deprecated/table/Table.svelte
+++ b/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
diff --git a/packages/client/src/components/app/forms/S3Upload.svelte b/packages/client/src/components/app/forms/S3Upload.svelte
index 7ac0532dca..e6d3c28b5e 100644
--- a/packages/client/src/components/app/forms/S3Upload.svelte
+++ b/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
diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index 2bd21d02e7..064704b263 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/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
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index fe4463821e..7693bc8af7 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/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")
diff --git a/packages/client/src/components/context/QueryParamsProvider.svelte b/packages/client/src/components/context/QueryParamsProvider.svelte
index 7f111a7043..e972dd9167 100644
--- a/packages/client/src/components/context/QueryParamsProvider.svelte
+++ b/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}>
diff --git a/packages/client/src/components/context/RowSelectionProvider.svelte b/packages/client/src/components/context/RowSelectionProvider.svelte
index 2c87a5fa00..da731e6f05 100644
--- a/packages/client/src/components/context/RowSelectionProvider.svelte
+++ b/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}>
diff --git a/packages/client/src/components/context/SnippetsProvider.svelte b/packages/client/src/components/context/SnippetsProvider.svelte
index 53fa1e8b7f..104147ecf7 100644
--- a/packages/client/src/components/context/SnippetsProvider.svelte
+++ b/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}>
diff --git a/packages/client/src/components/context/StateBindingsProvider.svelte b/packages/client/src/components/context/StateBindingsProvider.svelte
index a1166594a8..4ef99228c1 100644
--- a/packages/client/src/components/context/StateBindingsProvider.svelte
+++ b/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}>
diff --git a/packages/client/src/components/context/UserBindingsProvider.svelte b/packages/client/src/components/context/UserBindingsProvider.svelte
index 98769cf76a..02293e2f50 100644
--- a/packages/client/src/components/context/UserBindingsProvider.svelte
+++ b/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
diff --git a/packages/client/src/components/devtools/DevTools.svelte b/packages/client/src/components/devtools/DevTools.svelte
index bc7625bd57..47e257f6c6 100644
--- a/packages/client/src/components/devtools/DevTools.svelte
+++ b/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>
diff --git a/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte b/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
index 3b4c426851..02032aa0a5 100644
--- a/packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
+++ b/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 = {
diff --git a/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte b/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
index 809f64ab48..40af184d3d 100644
--- a/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
+++ b/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
 
diff --git a/packages/client/src/components/devtools/DevToolsComponentTab.svelte b/packages/client/src/components/devtools/DevToolsComponentTab.svelte
index a553a78720..6fa12a996b 100644
--- a/packages/client/src/components/devtools/DevToolsComponentTab.svelte
+++ b/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"
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index eca085a88a..38650789fc 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/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"
diff --git a/packages/client/src/components/devtools/DevToolsStat.svelte b/packages/client/src/components/devtools/DevToolsStat.svelte
index 62dbe6959c..605c67b750 100644
--- a/packages/client/src/components/devtools/DevToolsStat.svelte
+++ b/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
diff --git a/packages/client/src/components/devtools/DevToolsStatsTab.svelte b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
index bc0b1a562b..2036226863 100644
--- a/packages/client/src/components/devtools/DevToolsStatsTab.svelte
+++ b/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>
 
diff --git a/packages/client/src/components/overlay/ConfirmationDisplay.svelte b/packages/client/src/components/overlay/ConfirmationDisplay.svelte
index b96af502df..823c1c1ab2 100644
--- a/packages/client/src/components/overlay/ConfirmationDisplay.svelte
+++ b/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>
 
diff --git a/packages/client/src/components/overlay/NotificationDisplay.svelte b/packages/client/src/components/overlay/NotificationDisplay.svelte
index 46b3a2a6a1..28f4b33433 100644
--- a/packages/client/src/components/overlay/NotificationDisplay.svelte
+++ b/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>
diff --git a/packages/client/src/components/overlay/PeekScreenDisplay.svelte b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
index 6e0fa81b43..17a92797d5 100644
--- a/packages/client/src/components/overlay/PeekScreenDisplay.svelte
+++ b/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"
 
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index bdd538748b..15177a90c4 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/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}
diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
deleted file mode 100644
index 61cecc885b..0000000000
--- a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
+++ /dev/null
@@ -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>
diff --git a/packages/client/src/components/preview/DNDSelectionIndicators.svelte b/packages/client/src/components/preview/DNDSelectionIndicators.svelte
new file mode 100644
index 0000000000..cd7eb8302d
--- /dev/null
+++ b/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}
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index f173dfd960..e5297e9208 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/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>
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 430a0659ec..059971b0da 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/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
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index f1c151ce16..981e82bc2e 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/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}}
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index dce7945b29..800bc0423b 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/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 {
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 4af1224622..83535f92cb 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/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}
diff --git a/packages/client/src/components/preview/KeyboardManager.svelte b/packages/client/src/components/preview/KeyboardManager.svelte
index 1eedb0fde7..50ab496940 100644
--- a/packages/client/src/components/preview/KeyboardManager.svelte
+++ b/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) {
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index a271389cbd..ac1c52c0fa 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/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}
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 9dae1dcb22..32d2e8e62e 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/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
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 16a4fe23d0..01e5964917 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/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
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
index aa4b3cb1d1..04b0d0cd93 100644
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/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
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 6b354f8d65..f6d8e02123 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/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
diff --git a/packages/client/src/index.d.ts b/packages/client/src/index.d.ts
deleted file mode 100644
index 7e13670b33..0000000000
--- a/packages/client/src/index.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-interface Window {
-  "##BUDIBASE_APP_ID##": string
-  "##BUDIBASE_IN_BUILDER##": string
-  MIGRATING_APP: boolean
-}
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
deleted file mode 100644
index 8a48aa08e5..0000000000
--- a/packages/client/src/index.js
+++ /dev/null
@@ -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
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
index 08330a60fa..443648eb08 100644
--- a/packages/client/src/index.ts
+++ b/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
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index c641d339d5..15b88d3123 100644
--- a/packages/client/src/sdk.js
+++ b/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,
diff --git a/packages/client/src/stores/app.js b/packages/client/src/stores/app.js
index ea20b23131..0d7d0bdb8c 100644
--- a/packages/client/src/stores/app.js
+++ b/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 = {
diff --git a/packages/client/src/stores/auth.ts b/packages/client/src/stores/auth.ts
index 15f44e7c32..d9450780c6 100644
--- a/packages/client/src/stores/auth.ts
+++ b/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 = () => {
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 1ae7d3a670..287d23e767 100644
--- a/packages/client/src/stores/builder.js
+++ b/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 => {
diff --git a/packages/client/src/stores/dataSource.js b/packages/client/src/stores/dataSource.js
index 2e99a55aa3..cf1e5b83a8 100644
--- a/packages/client/src/stores/dataSource.js
+++ b/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"
 
diff --git a/packages/client/src/stores/derived/dndComponentPath.js b/packages/client/src/stores/derived/dndComponentPath.js
index 58fb395dd6..55c14c8edf 100644
--- a/packages/client/src/stores/derived/dndComponentPath.js
+++ b/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(
diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js
deleted file mode 100644
index 43d4eeeed8..0000000000
--- a/packages/client/src/stores/dnd.js
+++ /dev/null
@@ -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
-)
diff --git a/packages/client/src/stores/dnd.ts b/packages/client/src/stores/dnd.ts
new file mode 100644
index 0000000000..c04ca9547e
--- /dev/null
+++ b/packages/client/src/stores/dnd.ts
@@ -0,0 +1,147 @@
+import { writable, get } from "svelte/store"
+import { derivedMemo } from "@budibase/frontend-core"
+import { screenStore, isGridScreen, componentStore } from "@/stores"
+import { ScreenslotID } from "@/constants"
+import { ComponentDefinition } from "@budibase/types"
+
+interface DNDSource {
+  id?: string
+  parent?: string
+  index?: number
+  bounds: {
+    height: number
+    width: number
+  }
+  name?: string
+  icon?: string
+  type: string
+  isNew: boolean
+}
+
+interface DNDTarget {
+  id: string
+  parent: string
+  empty: boolean
+  acceptsChildren: boolean
+  element?: HTMLElement
+}
+
+interface DNDDrop {
+  parent: string
+  index: number
+}
+
+interface DNDMeta {
+  props?: Record<string, any>
+}
+
+interface DNDState {
+  source?: DNDSource
+  target?: DNDTarget
+  drop?: DNDDrop
+  meta?: DNDMeta
+}
+
+const createDndStore = () => {
+  const store = writable<DNDState>({})
+
+  const startDraggingExistingComponent = (source: Omit<DNDSource, "isNew">) => {
+    store.set({
+      source: {
+        ...source,
+        isNew: false,
+      },
+    })
+  }
+
+  const startDraggingNewComponent = (type: string) => {
+    // On grid screens, we already know exactly where to insert the component
+    let target: DNDTarget | undefined = undefined
+    let drop: DNDDrop | undefined = undefined
+    if (get(isGridScreen)) {
+      const screen = get(screenStore)?.activeScreen
+      const id = screen.props._id
+      target = {
+        id,
+        parent: ScreenslotID,
+        empty: false,
+        acceptsChildren: true,
+      }
+      drop = {
+        parent: id,
+        index: screen?.props?._children?.length,
+      }
+    }
+
+    // Get size of new component so we can show a properly sized placeholder
+    const definition: ComponentDefinition =
+      componentStore.actions.getComponentDefinition(type)
+    const width = definition?.size?.width || 128
+    const height = definition?.size?.height || 64
+
+    store.set({
+      source: {
+        bounds: { height, width },
+        type,
+        isNew: true,
+        name: `New ${definition?.name || "component"}`,
+        icon: definition?.icon || "Selection",
+      },
+      target,
+      drop,
+    })
+  }
+
+  const updateTarget = (target: DNDTarget) => {
+    store.update(state => {
+      state.target = target
+      return state
+    })
+  }
+
+  const updateDrop = (drop: DNDDrop) => {
+    store.update(state => {
+      state.drop = drop
+      return state
+    })
+  }
+
+  const reset = () => {
+    store.set({})
+  }
+
+  const updateNewComponentProps = (props: Record<string, any>) => {
+    store.update(state => {
+      return {
+        ...state,
+        meta: {
+          ...state.meta,
+          props,
+        },
+      }
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: {
+      startDraggingExistingComponent,
+      startDraggingNewComponent,
+      updateTarget,
+      updateDrop,
+      reset,
+      updateNewComponentProps,
+    },
+  }
+}
+
+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 dndSource = derivedMemo(dndStore, x => x.source)
+export const dndIsDragging = derivedMemo(dndStore, x => !!x.source)
diff --git a/packages/client/src/stores/environment.js b/packages/client/src/stores/environment.js
index bcc1493cd9..54b2dfdbfb 100644
--- a/packages/client/src/stores/environment.js
+++ b/packages/client/src/stores/environment.js
@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import { writable } from "svelte/store"
 
 const initialState = {
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.ts
similarity index 88%
rename from packages/client/src/stores/index.js
rename to packages/client/src/stores/index.ts
index f2b80ed732..522fadc643 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.ts
@@ -2,7 +2,7 @@ export { authStore } from "./auth"
 export { appStore } from "./app"
 export { notificationStore } from "./notification"
 export { routeStore } from "./routes"
-export { screenStore } from "./screens"
+export { screenStore, isGridScreen } from "./screens"
 export { builderStore } from "./builder"
 export { dataSourceStore } from "./dataSource"
 export { confirmationStore } from "./confirmation"
@@ -18,14 +18,7 @@ export { environmentStore } from "./environment"
 export { eventStore } from "./events"
 export { orgStore } from "./org"
 export { roleStore } from "./roles"
-export {
-  dndStore,
-  dndIndex,
-  dndParent,
-  dndBounds,
-  dndIsNewComponent,
-  dndIsDragging,
-} from "./dnd"
+export { dndStore, dndIndex, dndParent, dndIsDragging, dndSource } from "./dnd"
 export { sidePanelStore } from "./sidePanel"
 export { modalStore } from "./modal"
 export { hoverStore } from "./hover"
diff --git a/packages/client/src/stores/org.js b/packages/client/src/stores/org.js
index d8a17f7c32..8ba061eca5 100644
--- a/packages/client/src/stores/org.js
+++ b/packages/client/src/stores/org.js
@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import { writable, get } from "svelte/store"
 import { appStore } from "./app"
 
diff --git a/packages/client/src/stores/roles.js b/packages/client/src/stores/roles.js
index 693082d80b..c001d8ce89 100644
--- a/packages/client/src/stores/roles.js
+++ b/packages/client/src/stores/roles.js
@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import { writable } from "svelte/store"
 import { currentRole } from "./derived"
 
diff --git a/packages/client/src/stores/routes.ts b/packages/client/src/stores/routes.ts
index 3f200a9c88..e6cb6288d2 100644
--- a/packages/client/src/stores/routes.ts
+++ b/packages/client/src/stores/routes.ts
@@ -1,6 +1,6 @@
 import { get, writable } from "svelte/store"
 import { push } from "svelte-spa-router"
-import { API } from "api"
+import { API } from "@/api"
 import { peekStore } from "./peek"
 import { builderStore } from "./builder"
 
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index a7277ca2b5..4163f87e1a 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -3,11 +3,11 @@ import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
 import { orgStore } from "./org"
-import { dndIndex, dndParent, dndIsNewComponent, dndBounds } from "./dnd.js"
+import { dndIndex, dndParent, dndSource } from "./dnd.ts"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
-import { DNDPlaceholderID, ScreenslotID, ScreenslotType } from "constants"
+import { DNDPlaceholderID, ScreenslotID, ScreenslotType } from "@/constants"
 
 const createScreenStore = () => {
   const store = derived(
@@ -18,8 +18,7 @@ const createScreenStore = () => {
       orgStore,
       dndParent,
       dndIndex,
-      dndIsNewComponent,
-      dndBounds,
+      dndSource,
     ],
     ([
       $appStore,
@@ -28,8 +27,7 @@ const createScreenStore = () => {
       $orgStore,
       $dndParent,
       $dndIndex,
-      $dndIsNewComponent,
-      $dndBounds,
+      $dndSource,
     ]) => {
       let activeLayout, activeScreen
       let screens
@@ -85,7 +83,7 @@ const createScreenStore = () => {
 
         // Remove selected component from tree if we are moving an existing
         // component
-        if (!$dndIsNewComponent && selectedParent) {
+        if (!$dndSource.isNew && selectedParent) {
           selectedParent._children = selectedParent._children?.filter(
             x => x._id !== selectedComponentId
           )
@@ -97,11 +95,11 @@ const createScreenStore = () => {
           _id: DNDPlaceholderID,
           _styles: {
             normal: {
-              width: `${$dndBounds?.width || 400}px`,
-              height: `${$dndBounds?.height || 200}px`,
+              width: `${$dndSource?.bounds?.width || 400}px`,
+              height: `${$dndSource?.bounds?.height || 200}px`,
               opacity: 0,
-              "--default-width": $dndBounds?.width || 400,
-              "--default-height": $dndBounds?.height || 200,
+              "--default-width": $dndSource?.bounds?.width || 400,
+              "--default-height": $dndSource?.bounds?.height || 200,
             },
           },
           static: true,
@@ -198,3 +196,7 @@ const createScreenStore = () => {
 }
 
 export const screenStore = createScreenStore()
+
+export const isGridScreen = derived(screenStore, $screenStore => {
+  return $screenStore.activeScreen?.props?.layout === "grid"
+})
diff --git a/packages/client/src/utils/api.js b/packages/client/src/utils/api.js
index 4e6025873d..d4b25e5f68 100644
--- a/packages/client/src/utils/api.js
+++ b/packages/client/src/utils/api.js
@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 
 export const getAPIKey = async () => {
   const { apiKey } = await API.fetchDeveloperInfo()
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 16dc3c97e7..a467cc81ed 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -13,9 +13,9 @@ import {
   rowSelectionStore,
   sidePanelStore,
   modalStore,
-} from "stores"
-import { API } from "api"
-import { ActionTypes } from "constants"
+} from "@/stores"
+import { API } from "@/api"
+import { ActionTypes } from "@/constants"
 import { enrichDataBindings } from "./enrichDataBinding"
 import { Helpers } from "@budibase/bbui"
 
diff --git a/packages/client/src/utils/grid.ts b/packages/client/src/utils/grid.ts
index 69797e9120..3412e734c6 100644
--- a/packages/client/src/utils/grid.ts
+++ b/packages/client/src/utils/grid.ts
@@ -1,6 +1,6 @@
 import { GridSpacing, GridRowHeight } from "@/constants"
-import { builderStore } from "stores"
-import { buildStyleString } from "utils/styleable.js"
+import { builderStore } from "@/stores"
+import { buildStyleString } from "@/utils/styleable.js"
 
 interface GridMetadata {
   id: string
@@ -37,46 +37,54 @@ interface GridMetadata {
  */
 
 // Enum representing the different CSS variables we use for grid metadata
-export const GridParams = {
-  HAlign: "h-align",
-  VAlign: "v-align",
-  ColStart: "col-start",
-  ColEnd: "col-end",
-  RowStart: "row-start",
-  RowEnd: "row-end",
+export enum GridParams {
+  HAlign = "h-align",
+  VAlign = "v-align",
+  ColStart = "col-start",
+  ColEnd = "col-end",
+  RowStart = "row-start",
+  RowEnd = "row-end",
 }
 
 // Classes used in selectors inside grid containers to control child styles
-export const GridClasses = {
-  DesktopFill: "grid-desktop-grow",
-  MobileFill: "grid-mobile-grow",
+export enum GridClasses {
+  DesktopFill = "grid-desktop-grow",
+  MobileFill = "grid-mobile-grow",
 }
 
 // Enum for device preview type, included in grid CSS variables
-export const Devices = {
-  Desktop: "desktop",
-  Mobile: "mobile",
+export enum Devices {
+  Desktop = "desktop",
+  Mobile = "mobile",
 }
 
-export const GridDragModes = {
-  Resize: "resize",
-  Move: "move",
+export enum GridDragMode {
+  Resize = "resize",
+  Move = "move",
 }
 
 // Builds a CSS variable name for a certain piece of grid metadata
 export const getGridVar = (device: string, param: string) =>
   `--grid-${device}-${param}`
 
+export interface GridEvent extends DragEvent {
+  target: HTMLElement
+  dataTransfer: DataTransfer
+}
+
 // Determines whether a JS event originated from immediately within a grid
-export const isGridEvent = (e: Event & { target: HTMLElement }): boolean => {
+export const isGridEvent = (e: Event): e is GridEvent => {
+  if (!(e.target instanceof HTMLElement)) {
+    return false
+  }
+  const componentParent = e.target.closest?.(".component")?.parentNode as
+    | HTMLElement
+    | undefined
+  const gridDOMCandidate = componentParent?.closest(".component")
+    ?.childNodes[0] as HTMLElement | undefined
   return (
     e.target.dataset?.indicator === "true" ||
-    // @ts-expect-error: api is not properly typed
-    e.target
-      .closest?.(".component")
-      // @ts-expect-error
-      ?.parentNode.closest(".component")
-      ?.childNodes[0]?.classList?.contains("grid")
+    !!gridDOMCandidate?.classList?.contains("grid")
   )
 }
 
diff --git a/packages/client/src/utils/linkable.ts b/packages/client/src/utils/linkable.ts
index 2b6cd0ebfd..18d39cce3f 100644
--- a/packages/client/src/utils/linkable.ts
+++ b/packages/client/src/utils/linkable.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { link, LinkActionOpts } from "svelte-spa-router"
-import { builderStore } from "stores"
+import { builderStore } from "@/stores"
 
 export const linkable = (node: HTMLElement, href?: LinkActionOpts) => {
   if (get(builderStore).inBuilder) {
diff --git a/packages/client/src/utils/schema.ts b/packages/client/src/utils/schema.ts
index 9ea868751d..5d68ddc5cc 100644
--- a/packages/client/src/utils/schema.ts
+++ b/packages/client/src/utils/schema.ts
@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import { DataFetchMap, DataFetchType } from "@budibase/frontend-core"
 import { FieldType, TableSchema } from "@budibase/types"
 
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 884420a1fd..136771ba5c 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,4 +1,4 @@
-import { builderStore } from "stores"
+import { builderStore } from "@/stores"
 
 /**
  * Helper to build a CSS string from a style object.
diff --git a/packages/client/src/websocket.js b/packages/client/src/websocket.js
index 8ca95fdc84..950eeb9839 100644
--- a/packages/client/src/websocket.js
+++ b/packages/client/src/websocket.js
@@ -1,8 +1,4 @@
-import {
-  builderStore,
-  environmentStore,
-  notificationStore,
-} from "./stores/index.js"
+import { builderStore, environmentStore, notificationStore } from "@/stores"
 import { get } from "svelte/store"
 import { createWebsocket } from "@budibase/frontend-core"
 
diff --git a/packages/client/vite.config.mjs b/packages/client/vite.config.mjs
index 7c163181ae..fdec280d91 100644
--- a/packages/client/vite.config.mjs
+++ b/packages/client/vite.config.mjs
@@ -20,7 +20,7 @@ export default defineConfig(({ mode }) => {
     },
     build: {
       lib: {
-        entry: "src/index.js",
+        entry: "src/index.ts",
         formats: ["iife"],
         outDir: "dist",
         name: "budibase_client",
@@ -47,34 +47,6 @@ export default defineConfig(({ mode }) => {
           find: "manifest.json",
           replacement: path.resolve("./manifest.json"),
         },
-        {
-          find: "api",
-          replacement: path.resolve("./src/api"),
-        },
-        {
-          find: "components",
-          replacement: path.resolve("./src/components"),
-        },
-        {
-          find: "stores",
-          replacement: path.resolve("./src/stores"),
-        },
-        {
-          find: "utils",
-          replacement: path.resolve("./src/utils"),
-        },
-        {
-          find: "constants",
-          replacement: path.resolve("./src/constants"),
-        },
-        {
-          find: "@/constants",
-          replacement: path.resolve("./src/constants"),
-        },
-        {
-          find: "sdk",
-          replacement: path.resolve("./src/sdk"),
-        },
         {
           find: "@budibase/types",
           replacement: path.resolve("../types/src"),
@@ -87,6 +59,10 @@ export default defineConfig(({ mode }) => {
           find: "@budibase/bbui",
           replacement: path.resolve("../bbui/src"),
         },
+        {
+          find: "@",
+          replacement: path.resolve(__dirname, "src"),
+        },
       ],
     },
   }
diff --git a/packages/frontend-core/src/utils/memo.d.ts b/packages/frontend-core/src/utils/memo.d.ts
index 04d3416e49..a00dc345b1 100644
--- a/packages/frontend-core/src/utils/memo.d.ts
+++ b/packages/frontend-core/src/utils/memo.d.ts
@@ -1,7 +1,7 @@
 import { Readable, Writable } from "svelte/store"
 
 declare module "./memo" {
-  export function memo<T>(value: T): Writable<T>
+  export function memo<T>(value?: T): Writable<T>
 
   export function derivedMemo<TStore, TResult>(
     store: Readable<TStore>,
diff --git a/packages/server/jest.config.ts b/packages/server/jest.config.ts
index 6fadec6e29..6341c8e5bd 100644
--- a/packages/server/jest.config.ts
+++ b/packages/server/jest.config.ts
@@ -21,20 +21,7 @@ const baseConfig: Config.InitialProjectOptions = {
   transform: {
     "^.+\\.ts?$": "@swc/jest",
     "^.+\\.js?$": "@swc/jest",
-    "^.+\\.svelte$": [
-      "jest-chain-transform", // https://github.com/svelteness/svelte-jester/issues/166
-      {
-        transformers: [
-          [
-            "svelte-jester",
-            {
-              preprocess: true,
-            },
-          ],
-          "@swc/jest",
-        ],
-      },
-    ],
+    "^.+\\.svelte?$": "<rootDir>/scripts/svelteTransformer.js",
   },
   transformIgnorePatterns: ["/node_modules/(?!svelte/).*"],
   moduleNameMapper: {
diff --git a/packages/server/package.json b/packages/server/package.json
index b73d3f5f99..9a70ecba9c 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -99,7 +99,7 @@
     "jsonschema": "1.4.0",
     "jsonwebtoken": "9.0.2",
     "knex": "2.4.2",
-    "koa": "2.13.4",
+    "koa": "2.15.4",
     "koa-body": "4.2.0",
     "koa-compress": "4.0.1",
     "koa-send": "5.0.1",
@@ -139,7 +139,6 @@
     "@babel/core": "^7.22.5",
     "@babel/preset-env": "7.16.11",
     "@jest/types": "^29.6.3",
-    "@sveltejs/vite-plugin-svelte": "1.4.0",
     "@swc/core": "1.3.71",
     "@swc/jest": "0.2.27",
     "@types/archiver": "6.0.2",
@@ -165,7 +164,6 @@
     "docker-compose": "0.23.17",
     "ioredis-mock": "8.9.0",
     "jest": "29.7.0",
-    "jest-chain-transform": "^0.0.8",
     "jest-extended": "^4.0.2",
     "jest-openapi": "0.14.2",
     "nock": "13.5.4",
diff --git a/packages/server/scripts/dev/manage.js b/packages/server/scripts/dev/manage.js
index 84e1abea69..a07fa1b582 100644
--- a/packages/server/scripts/dev/manage.js
+++ b/packages/server/scripts/dev/manage.js
@@ -46,6 +46,7 @@ async function init() {
     HTTP_LOGGING: "0",
     VERSION: "0.0.0+local",
     PASSWORD_MIN_LENGTH: "1",
+    OPENAI_API_KEY: "sk-abcdefghijklmnopqrstuvwxyz1234567890abcd",
   }
 
   config = { ...config, ...existingConfig }
diff --git a/packages/server/scripts/svelteTransformer.js b/packages/server/scripts/svelteTransformer.js
new file mode 100644
index 0000000000..6b67971581
--- /dev/null
+++ b/packages/server/scripts/svelteTransformer.js
@@ -0,0 +1,11 @@
+const { compile } = require("svelte/compiler")
+const { transformSync } = require("@babel/core")
+
+module.exports = {
+  process(sourceText) {
+    const { js } = compile(sourceText, { css: "injected", generate: "ssr" })
+    const { code } = transformSync(js.code, { babelrc: true })
+
+    return { code: code }
+  },
+}
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index ccaaf22ad1..809f893169 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -1,8 +1,9 @@
-<script lang="ts">
+<script>
   import ClientAppSkeleton from "@budibase/frontend-core/src/components/ClientAppSkeleton.svelte"
-  import type { BudibaseAppProps } from "@budibase/types"
 
-  export let props: BudibaseAppProps
+  /** @type {BudibaseAppProps} this receives all the props in one structure, following
+   * the type from @budibase/types */
+  export let props
 </script>
 
 <svelte:head>
diff --git a/packages/server/svelte.config.js b/packages/server/svelte.config.js
deleted file mode 100644
index 77aeada229..0000000000
--- a/packages/server/svelte.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte")
-
-module.exports = {
-  preprocess: vitePreprocess(),
-}
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index acd0ea4fa8..a80c2ec15c 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -33,6 +33,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "8.3.0",
+    "@types/doctrine": "^0.0.9",
     "doctrine": "^3.0.0",
     "jest": "29.7.0",
     "marked": "^4.0.10",
diff --git a/packages/string-templates/scripts/gen-collection-info.ts b/packages/string-templates/scripts/gen-collection-info.ts
index 8b3825bf5c..f7df88ee85 100644
--- a/packages/string-templates/scripts/gen-collection-info.ts
+++ b/packages/string-templates/scripts/gen-collection-info.ts
@@ -7,18 +7,30 @@ import { marked } from "marked"
 import { join, dirname } from "path"
 
 const helpers = require("@budibase/handlebars-helpers")
-const doctrine = require("doctrine")
+import doctrine, { Annotation } from "doctrine"
 
-type HelperInfo = {
+type BudibaseAnnotation = Annotation & {
+  example?: string
   acceptsInline?: boolean
   acceptsBlock?: boolean
+}
+
+type Helper = {
+  args: string[]
+  numArgs: number
   example?: string
   description: string
-  tags?: any[]
+  requiresBlock?: boolean
+}
+
+type Manifest = {
+  [category: string]: {
+    [helper: string]: Helper
+  }
 }
 
 const FILENAME = join(__dirname, "..", "src", "manifest.json")
-const outputJSON: any = {}
+const outputJSON: Manifest = {}
 const ADDED_HELPERS = {
   date: {
     date: {
@@ -38,11 +50,10 @@ const ADDED_HELPERS = {
   },
 }
 
-function fixSpecialCases(name: string, obj: any) {
-  const args = obj.args
+function fixSpecialCases(name: string, obj: Helper) {
   if (name === "ifNth") {
-    args[0] = "a"
-    args[1] = "b"
+    obj.args = ["a", "b", "options"]
+    obj.numArgs = 3
   }
   if (name === "eachIndex") {
     obj.description = "Iterates the array, listing an item and the index of it."
@@ -66,10 +77,10 @@ function lookForward(lines: string[], funcLines: string[], idx: number) {
   return true
 }
 
-function getCommentInfo(file: string, func: string): HelperInfo {
+function getCommentInfo(file: string, func: string): BudibaseAnnotation {
   const lines = file.split("\n")
   const funcLines = func.split("\n")
-  let comment = null
+  let comment: string | null = null
   for (let idx = 0; idx < lines.length; ++idx) {
     // from here work back until we have the comment
     if (lookForward(lines, funcLines, idx)) {
@@ -91,15 +102,9 @@ function getCommentInfo(file: string, func: string): HelperInfo {
     }
   }
   if (comment == null) {
-    return { description: "" }
+    return { description: "", tags: [] }
   }
-  const docs: {
-    acceptsInline?: boolean
-    acceptsBlock?: boolean
-    example: string
-    description: string
-    tags: any[]
-  } = doctrine.parse(comment, { unwrap: true })
+  const docs: BudibaseAnnotation = doctrine.parse(comment, { unwrap: true })
   // some hacky fixes
   docs.description = docs.description.replace(/\n/g, " ")
   docs.description = docs.description.replace(/[ ]{2,}/g, " ")
@@ -135,7 +140,7 @@ function run() {
       )}/lib/${collection}.js`,
       "utf8"
     )
-    const collectionInfo: any = {}
+    const collectionInfo: { [name: string]: Helper } = {}
     // collect information about helper
     let hbsHelperInfo = helpers[collection]()
     for (let entry of Object.entries(hbsHelperInfo)) {
@@ -154,11 +159,8 @@ function run() {
       const jsDocInfo = getCommentInfo(collectionFile, fnc)
       let args = jsDocInfo.tags
         .filter(tag => tag.title === "param")
-        .map(
-          tag =>
-            tag.description &&
-            tag.description.replace(/`/g, "").split(" ")[0].trim()
-        )
+        .filter(tag => tag.description)
+        .map(tag => tag.description!.replace(/`/g, "").split(" ")[0].trim())
       collectionInfo[name] = fixSpecialCases(name, {
         args,
         numArgs: args.length,
diff --git a/packages/types/src/ui/bindings/binding.ts b/packages/types/src/ui/bindings/binding.ts
index a770a25a3e..fdeb4a6c13 100644
--- a/packages/types/src/ui/bindings/binding.ts
+++ b/packages/types/src/ui/bindings/binding.ts
@@ -1,10 +1,3 @@
-export interface BindingCompletion {
-  section: {
-    name: string
-  }
-  label: string
-}
-
 export interface EnrichedBinding {
   runtimeBinding: string
   readableBinding: string
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index 37b43ea203..728731baa5 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -2,6 +2,16 @@ export * from "./sidepanel"
 export * from "./codeEditor"
 export * from "./errors"
 
+export interface CustomComponent {
+  Component: any
+  schema: {
+    type: "component"
+    metadata: Record<string, any>
+    schema: ComponentDefinition
+  }
+  version: string
+}
+
 export interface ComponentDefinition {
   component: string
   name: string
@@ -13,6 +23,11 @@ export interface ComponentDefinition {
   legalDirectChildren: string[]
   requiredAncestors?: string[]
   illegalChildren: string[]
+  icon?: string
+  size?: {
+    width: number
+    height: number
+  }
 }
 
 export type DependsOnComponentSetting =
diff --git a/packages/worker/package.json b/packages/worker/package.json
index ff21d88ac0..c5e32d11a0 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -58,7 +58,7 @@
     "joi": "17.6.0",
     "jsonwebtoken": "9.0.2",
     "knex": "2.4.2",
-    "koa": "2.13.4",
+    "koa": "2.15.4",
     "koa-body": "4.2.0",
     "koa-compress": "4.0.1",
     "koa-passport": "4.1.4",
diff --git a/yarn.lock b/yarn.lock
index b2ca6a0568..efbac62306 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2834,16 +2834,26 @@
   dependencies:
     "@bull-board/api" "5.10.2"
 
-"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.7.1":
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.7.1.tgz#3364799b78dff70fb8f81615536c52ea53ce40b2"
-  integrity sha512-hSxf9S0uB+GV+gBsjY1FZNo53e1FFdzPceRfCfD1gWOnV6o21GfB5J5Wg9G/4h76XZMPrF0A6OCK/Rz5+V1egg==
+"@codemirror/autocomplete@6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.9.0.tgz#1a1e63122288b8f8e1e9d7aff2eb39a83e04d8a9"
+  integrity sha512-Fbwm0V/Wn3BkEJZRhr0hi5BhCo5a7eBL6LYaliPjOSwCyfOpnjXY59HruSxOUNV+1OYer0Tgx1zRNQttjXyDog==
   dependencies:
     "@codemirror/language" "^6.0.0"
     "@codemirror/state" "^6.0.0"
     "@codemirror/view" "^6.6.0"
     "@lezer/common" "^1.0.0"
 
+"@codemirror/autocomplete@^6.0.0":
+  version "6.18.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz#4394f55d6771727179f2e28a871ef46bbbeb11b1"
+  integrity sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+
 "@codemirror/commands@^6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
@@ -2893,6 +2903,13 @@
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.0.tgz#a0fb08403ced8c2a68d1d0acee926bd20be922f2"
   integrity sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==
 
+"@codemirror/state@^6.5.0":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
+  integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
+  dependencies:
+    "@marijn/find-cluster-break" "^1.0.0"
+
 "@codemirror/theme-one-dark@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
@@ -2912,6 +2929,15 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
+"@codemirror/view@^6.17.0":
+  version "6.36.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.36.2.tgz#aeb644e161440734ac5a153bf6e5b4a4355047be"
+  integrity sha512-DZ6ONbs8qdJK0fdN7AB82CgI6tYXf4HWk1wSVa0+9bhVznCuuvhQtX8bFBoy3dv8rZSQqUd8GvhVAcielcidrA==
+  dependencies:
+    "@codemirror/state" "^6.5.0"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@colors/colors@1.6.0", "@colors/colors@^1.6.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.6.0.tgz#ec6cd237440700bc23ca23087f513c75508958b0"
@@ -4133,6 +4159,11 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@marijn/find-cluster-break@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
+  integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
+
 "@mongodb-js/saslprep@^1.1.5":
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/@mongodb-js/saslprep/-/saslprep-1.1.7.tgz#d1700facfd6916c50c2c88fd6d48d363a56c702f"
@@ -6456,6 +6487,11 @@
     "@types/node" "*"
     "@types/ssh2" "*"
 
+"@types/doctrine@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.9.tgz#d86a5f452a15e3e3113b99e39616a9baa0f9863f"
+  integrity sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==
+
 "@types/estree@*", "@types/estree@1.0.5", "@types/estree@^1.0.0", "@types/estree@^1.0.1":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -9385,7 +9421,7 @@ cookiejar@^2.1.4:
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.4.tgz#ee669c1fea2cf42dc31585469d193fef0d65771b"
   integrity sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==
 
-cookies@0.8.0, cookies@~0.8.0:
+cookies@0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.8.0.tgz#1293ce4b391740a8406e3c9870e828c4b54f3f90"
   integrity sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==
@@ -9393,6 +9429,14 @@ cookies@0.8.0, cookies@~0.8.0:
     depd "~2.0.0"
     keygrip "~1.1.0"
 
+cookies@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.9.1.tgz#3ffed6f60bb4fb5f146feeedba50acc418af67e3"
+  integrity sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==
+  dependencies:
+    depd "~2.0.0"
+    keygrip "~1.1.0"
+
 copyfiles@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5"
@@ -9784,10 +9828,10 @@ dd-trace@5.26.0:
     shell-quote "^1.8.1"
     tlhunter-sorted-set "^0.1.0"
 
-debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
-  version "4.3.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
-  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.5:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
   dependencies:
     ms "^2.1.3"
 
@@ -9805,10 +9849,10 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.5:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
-  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
   dependencies:
     ms "^2.1.3"
 
@@ -13739,11 +13783,6 @@ jake@^10.8.5:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
-jest-chain-transform@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/jest-chain-transform/-/jest-chain-transform-0.0.8.tgz#cbb4d3aef8d02678b1852968a9b0c861f75eef5a"
-  integrity sha512-AELTTzYJ34WrmQKAbxUGT+xqnAHu0/XJZhahYNGvBVUhnAayjm1QmT45DQjwEbQPQp7gn6CXzu6rZA03riwBuw==
-
 jest-changed-files@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a"
@@ -14701,45 +14740,16 @@ koa2-ratelimit@1.1.1:
   resolved "https://registry.yarnpkg.com/koa2-ratelimit/-/koa2-ratelimit-1.1.1.tgz#9c1d8257770e4a0a08063ba2ddcaf690fd457d23"
   integrity sha512-IpxGMdZqEhMykW0yYKGVB4vDEacPvSBH4hNpDL38ABj3W2KHNLujAljGEDg7eEjXvrRbXRSWXzANhV3c9v7nyg==
 
-koa@2.13.4:
-  version "2.13.4"
-  resolved "https://registry.yarnpkg.com/koa/-/koa-2.13.4.tgz#ee5b0cb39e0b8069c38d115139c774833d32462e"
-  integrity sha512-43zkIKubNbnrULWlHdN5h1g3SEKXOEzoAlRsHOTFpnlDu8JlAOZSMJBLULusuXRequboiwJcj5vtYXKB3k7+2g==
+koa@2.15.4, koa@^2.13.1, koa@^2.13.4:
+  version "2.15.4"
+  resolved "https://registry.yarnpkg.com/koa/-/koa-2.15.4.tgz#7000b3d8354558671adb1ba1b1c09bedb5f8da75"
+  integrity sha512-7fNBIdrU2PEgLljXoPWoyY4r1e+ToWCmzS/wwMPbUNs7X+5MMET1ObhJBlUkF5uZG9B6QhM2zS1TsH6adegkiQ==
   dependencies:
     accepts "^1.3.5"
     cache-content-type "^1.0.0"
     content-disposition "~0.5.2"
     content-type "^1.0.4"
-    cookies "~0.8.0"
-    debug "^4.3.2"
-    delegates "^1.0.0"
-    depd "^2.0.0"
-    destroy "^1.0.4"
-    encodeurl "^1.0.2"
-    escape-html "^1.0.3"
-    fresh "~0.5.2"
-    http-assert "^1.3.0"
-    http-errors "^1.6.3"
-    is-generator-function "^1.0.7"
-    koa-compose "^4.1.0"
-    koa-convert "^2.0.0"
-    on-finished "^2.3.0"
-    only "~0.0.2"
-    parseurl "^1.3.2"
-    statuses "^1.5.0"
-    type-is "^1.6.16"
-    vary "^1.1.2"
-
-koa@^2.13.1, koa@^2.13.4:
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/koa/-/koa-2.14.1.tgz#defb9589297d8eb1859936e777f3feecfc26925c"
-  integrity sha512-USJFyZgi2l0wDgqkfD27gL4YGno7TfUkcmOe6UOLFOVuN+J7FwnNu4Dydl4CUQzraM1lBAiGed0M9OVJoT0Kqw==
-  dependencies:
-    accepts "^1.3.5"
-    cache-content-type "^1.0.0"
-    content-disposition "~0.5.2"
-    content-type "^1.0.4"
-    cookies "~0.8.0"
+    cookies "~0.9.0"
     debug "^4.3.2"
     delegates "^1.0.0"
     depd "^2.0.0"
@@ -19961,6 +19971,11 @@ style-mod@^4.0.0:
   resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad"
   integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==
 
+style-mod@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.2.tgz#ca238a1ad4786520f7515a8539d5a63691d7bf67"
+  integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
+
 stylus-lookup@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-3.0.2.tgz#c9eca3ff799691020f30b382260a67355fefdddd"