diff --git a/.prettierignore b/.prettierignore
index 3f27c3f9da..13f012fd89 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,4 @@
-packages/builder/src/userInterface/CurrentItemPreview.svelte
+packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
 public
 dist
 packages/server/builder
diff --git a/README.md b/README.md
index f0fe339a02..2cc352607b 100644
--- a/README.md
+++ b/README.md
@@ -103,13 +103,9 @@ The Budibase builder runs in Electron, on Mac, PC and Linux. Follow the steps be
 
 ## 🤖 Self-hosting
 
-<p align="center">
-  <img src="https://i.imgur.com/Z52cEvT.png?1" />
-</p>
-
 Budibase wants to make sure anyone can use the tools we develop and we know a lot of people need to be able to host the apps they make on their own systems - that is why we've decided to try and make self hosting as easy as possible!
 
-Currently, you can host your apps using Docker. The documentation for self-hosting can be found [here](https://docs.budibase.com/self-hosting/introduction-to-self-hosting).
+Currently, you can host your apps using Docker or Digital Ocean. The documentation for self-hosting can be found [here](https://docs.budibase.com/self-hosting/introduction-to-self-hosting).
 
 
 ## 🎓 Learning Budibase
diff --git a/packages/builder/package.json b/packages/builder/package.json
index a98da6e8d1..41b98750e9 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.54.0",
+    "@budibase/bbui": "^1.54.1",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/string-templates": "^0.5.3",
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
new file mode 100644
index 0000000000..022e78c637
--- /dev/null
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -0,0 +1,209 @@
+import { cloneDeep } from "lodash/fp"
+import { get } from "svelte/store"
+import { backendUiStore, store } from "builderStore"
+import { findAllMatchingComponents, findComponentPath } from "./storeUtils"
+
+// Regex to match all instances of template strings
+const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
+
+/**
+ * Gets all bindable data context fields and instance fields.
+ */
+export const getBindableProperties = (rootComponent, componentId) => {
+  const contextBindings = getContextBindings(rootComponent, componentId)
+  const componentBindings = getComponentBindings(rootComponent)
+  return [...contextBindings, ...componentBindings]
+}
+
+/**
+ * Gets all data provider components above a component.
+ */
+export const getDataProviderComponents = (rootComponent, componentId) => {
+  if (!rootComponent || !componentId) {
+    return []
+  }
+
+  // Get the component tree leading up to this component, ignoring the component
+  // itself
+  const path = findComponentPath(rootComponent, componentId)
+  path.pop()
+
+  // Filter by only data provider components
+  return path.filter(component => {
+    const def = store.actions.components.getDefinition(component._component)
+    return def?.dataProvider
+  })
+}
+
+/**
+ * Gets a datasource object for a certain data provider component
+ */
+export const getDatasourceForProvider = component => {
+  const def = store.actions.components.getDefinition(component?._component)
+  if (!def) {
+    return null
+  }
+
+  // Extract datasource from component instance
+  const datasourceSetting = def.settings.find(setting => {
+    return setting.type === "datasource" || setting.type === "table"
+  })
+  if (!datasourceSetting) {
+    return null
+  }
+
+  // There are different types of setting which can be a datasource, for
+  // example an actual datasource object, or a table ID string.
+  // Convert the datasource setting into a proper datasource object so that
+  // we can use it properly
+  if (datasourceSetting.type === "datasource") {
+    return component[datasourceSetting?.key]
+  } else if (datasourceSetting.type === "table") {
+    return {
+      tableId: component[datasourceSetting?.key],
+      type: "table",
+    }
+  }
+  return null
+}
+
+/**
+ * Gets all bindable data contexts. These are fields of schemas of data contexts
+ * provided by data provider components, such as lists or row detail components.
+ */
+export const getContextBindings = (rootComponent, componentId) => {
+  // Extract any components which provide data contexts
+  const dataProviders = getDataProviderComponents(rootComponent, componentId)
+  let contextBindings = []
+  dataProviders.forEach(component => {
+    const datasource = getDatasourceForProvider(component)
+    if (!datasource) {
+      return
+    }
+
+    // Get schema and add _id and _rev fields for certain types
+    let { schema, table } = getSchemaForDatasource(datasource)
+    if (!schema || !table) {
+      return
+    }
+    if (datasource.type === "table" || datasource.type === "link") {
+      schema["_id"] = { type: "string" }
+      schema["_rev"] = { type: "string " }
+    }
+    const keys = Object.keys(schema).sort()
+
+    // Create bindable properties for each schema field
+    keys.forEach(key => {
+      const fieldSchema = schema[key]
+      // Replace certain bindings with a new property to help display components
+      let runtimeBoundKey = key
+      if (fieldSchema.type === "link") {
+        runtimeBoundKey = `${key}_count`
+      } else if (fieldSchema.type === "attachment") {
+        runtimeBoundKey = `${key}_first`
+      }
+
+      contextBindings.push({
+        type: "context",
+        runtimeBinding: `${component._id}.${runtimeBoundKey}`,
+        readableBinding: `${component._instanceName}.${table.name}.${key}`,
+        fieldSchema,
+        providerId: component._id,
+        tableId: datasource.tableId,
+        field: key,
+      })
+    })
+  })
+  return contextBindings
+}
+
+/**
+ * Gets all bindable components. These are form components which allow their
+ * values to be bound to.
+ */
+export const getComponentBindings = rootComponent => {
+  if (!rootComponent) {
+    return []
+  }
+  const componentSelector = component => {
+    const type = component._component
+    const definition = store.actions.components.getDefinition(type)
+    return definition?.bindable
+  }
+  const components = findAllMatchingComponents(rootComponent, componentSelector)
+  return components.map(component => {
+    return {
+      type: "instance",
+      providerId: component._id,
+      runtimeBinding: `${component._id}`,
+      readableBinding: `${component._instanceName}`,
+    }
+  })
+}
+
+/**
+ * Gets a schema for a datasource object.
+ */
+export const getSchemaForDatasource = datasource => {
+  let schema, table
+  if (datasource) {
+    const { type } = datasource
+    if (type === "query") {
+      const queries = get(backendUiStore).queries
+      table = queries.find(query => query._id === datasource._id)
+    } else {
+      const tables = get(backendUiStore).tables
+      table = tables.find(table => table._id === datasource.tableId)
+    }
+    if (table) {
+      if (type === "view") {
+        schema = cloneDeep(table.views?.[datasource.name]?.schema)
+      } else {
+        schema = cloneDeep(table.schema)
+      }
+    }
+  }
+  return { schema, table }
+}
+
+/**
+ * Converts a readable data binding into a runtime data binding
+ */
+export function readableToRuntimeBinding(bindableProperties, textWithBindings) {
+  if (typeof textWithBindings !== "string") {
+    return textWithBindings
+  }
+  const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_TEMPLATE) || []
+  let result = textWithBindings
+  boundValues.forEach(boundValue => {
+    const binding = bindableProperties.find(({ readableBinding }) => {
+      return boundValue === `{{ ${readableBinding} }}`
+    })
+    if (binding) {
+      result = result.replace(boundValue, `{{ ${binding.runtimeBinding} }}`)
+    }
+  })
+  return result
+}
+
+/**
+ * Converts a runtime data binding into a readable data binding
+ */
+export function runtimeToReadableBinding(bindableProperties, textWithBindings) {
+  if (typeof textWithBindings !== "string") {
+    return textWithBindings
+  }
+  const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_TEMPLATE) || []
+  let result = textWithBindings
+  boundValues.forEach(boundValue => {
+    const binding = bindableProperties.find(({ runtimeBinding }) => {
+      return boundValue === `{{ ${runtimeBinding} }}`
+    })
+    // Show invalid bindings as invalid rather than a long ID
+    result = result.replace(
+      boundValue,
+      `{{ ${binding?.readableBinding ?? "Invalid binding"} }}`
+    )
+  })
+  return result
+}
diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
deleted file mode 100644
index 9302f3c0f0..0000000000
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import { cloneDeep, difference } from "lodash/fp"
-
-/**
- * parameter for fetchBindableProperties function
- * @typedef {Object} fetchBindablePropertiesParameter
- * @property {string}  componentInstanceId - an _id of a component that has been added to a screen, which you want to fetch bindable props for
- * @propperty {Object} screen - current screen - where componentInstanceId lives
- * @property {Object} components - dictionary of component definitions
- * @property {Array} tables - array of all tables
- */
-
-/**
- *
- * @typedef {Object} BindableProperty
- * @property {string} type - either "instance" (binding to a component instance) or "context" (binding to data in context e.g. List Item)
- * @property {Object} instance - relevant component instance. If "context" type, this instance is the component that provides the context... e.g. the List
- * @property {string} runtimeBinding - a binding string that is a) saved against the string, and b) used at runtime to read/write the value
- * @property {string} readableBinding - a binding string that is displayed to the user, in the builder
- */
-
-/**
- * Generates all allowed bindings from within any particular component instance
- * @param {fetchBindablePropertiesParameter} param
- * @returns {Array.<BindableProperty>}
- */
-export default function({
-  componentInstanceId,
-  screen,
-  components,
-  tables,
-  queries,
-}) {
-  const result = walk({
-    // cloning so we are free to mutate props (e.g. by adding _contexts)
-    instance: cloneDeep(screen.props),
-    targetId: componentInstanceId,
-    components,
-    tables,
-    queries,
-  })
-
-  return [
-    ...result.bindableInstances
-      .filter(isInstanceInSharedContext(result))
-      .map(componentInstanceToBindable),
-    ...(result.target?._contexts.map(contextToBindables(tables)).flat() ?? []),
-    ...(result.target?._contexts
-      .map(context => queriesToBindables(queries, context))
-      .flat() ?? []),
-  ]
-}
-
-const isInstanceInSharedContext = walkResult => i =>
-  // should cover
-  // - neither are in any context
-  // - both in same context
-  // - instance is in ancestor context of target
-  i.instance._contexts.length <= walkResult.target._contexts.length &&
-  difference(i.instance._contexts, walkResult.target._contexts).length === 0
-
-// turns a component instance prop into binding expressions
-// used by the UI
-const componentInstanceToBindable = i => {
-  return {
-    type: "instance",
-    instance: i.instance,
-    // how the binding expression persists, and is used in the app at runtime
-    runtimeBinding: `${i.instance._id}`,
-    // how the binding exressions looks to the user of the builder
-    readableBinding: `${i.instance._instanceName}`,
-  }
-}
-
-const queriesToBindables = (queries, context) => {
-  let queryId = context.table._id
-
-  const query = queries.find(query => query._id === queryId)
-  let schema = query?.schema
-
-  // Avoid crashing whenever no data source has been selected
-  if (!schema) {
-    return []
-  }
-
-  const queryBindings = Object.entries(schema).map(([key, value]) => ({
-    type: "context",
-    fieldSchema: value,
-    instance: context.instance,
-    // how the binding expression persists, and is used in the app at runtime
-    runtimeBinding: `${context.instance._id}.${key}`,
-    // how the binding expressions looks to the user of the builder
-    readableBinding: `${context.instance._instanceName}.${query.name}.${key}`,
-    // table / view info
-    table: context.table,
-  }))
-
-  return queryBindings
-}
-
-const contextToBindables = tables => context => {
-  let tableId = context.table?.tableId ?? context.table
-
-  const table = tables.find(table => table._id === tableId || context.table._id)
-  let schema =
-    context.table?.type === "view"
-      ? table?.views?.[context.table.name]?.schema
-      : table?.schema
-
-  // Avoid crashing whenever no data source has been selected
-  if (!schema) {
-    return []
-  }
-
-  const newBindable = ([key, fieldSchema]) => {
-    // Replace certain bindings with a new property to help display components
-    let runtimeBoundKey = key
-    if (fieldSchema.type === "link") {
-      runtimeBoundKey = `${key}_count`
-    } else if (fieldSchema.type === "attachment") {
-      runtimeBoundKey = `${key}_first`
-    }
-    return {
-      type: "context",
-      fieldSchema,
-      instance: context.instance,
-      // how the binding expression persists, and is used in the app at runtime
-      runtimeBinding: `${context.instance._id}.${runtimeBoundKey}`,
-      // how the binding expressions looks to the user of the builder
-      readableBinding: `${context.instance._instanceName}.${table.name}.${key}`,
-      // table / view info
-      table: context.table,
-    }
-  }
-
-  const stringType = { type: "string" }
-  return (
-    Object.entries(schema)
-      .map(newBindable)
-      // add _id and _rev fields - not part of schema, but always valid
-      .concat([
-        newBindable(["_id", stringType]),
-        newBindable(["_rev", stringType]),
-      ])
-  )
-}
-
-const walk = ({ instance, targetId, components, tables, result }) => {
-  if (!result) {
-    result = {
-      target: null,
-      bindableInstances: [],
-      allContexts: [],
-      currentContexts: [],
-    }
-  }
-
-  if (!instance._contexts) instance._contexts = []
-
-  // "component" is the component definition (object in component.json)
-  const component = components[instance._component]
-
-  if (instance._id === targetId) {
-    // found it
-    result.target = instance
-  } else {
-    if (component && component.bindable) {
-      // pushing all components in here initially
-      // but this will not be correct, as some of
-      // these components will be in another context
-      // but we dont know this until the end of the walk
-      // so we will filter in another method
-      result.bindableInstances.push({
-        instance,
-        prop: component.bindable,
-      })
-    }
-  }
-
-  // a component that provides context to it's children
-  const contextualInstance =
-    component && component.context && instance[component.context]
-
-  if (contextualInstance) {
-    // add to currentContexts (ancestory of context)
-    // before walking children
-    const table = instance[component.context]
-    result.currentContexts.push({ instance, table })
-  }
-
-  const currentContexts = [...result.currentContexts]
-  for (let child of instance._children || []) {
-    // attaching _contexts of components, for easy comparison later
-    // these have been deep cloned above, so shouldn't modify the
-    // original component instances
-    child._contexts = currentContexts
-    walk({ instance: child, targetId, components, tables, result })
-  }
-
-  if (contextualInstance) {
-    // child walk done, remove from currentContexts
-    result.currentContexts.pop()
-  }
-
-  return result
-}
diff --git a/packages/builder/src/builderStore/getNewComponentName.js b/packages/builder/src/builderStore/getNewComponentName.js
deleted file mode 100644
index 98ca05b827..0000000000
--- a/packages/builder/src/builderStore/getNewComponentName.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { walkProps } from "./storeUtils"
-import { get_capitalised_name } from "../helpers"
-import { get } from "svelte/store"
-import { allScreens } from "builderStore"
-import { FrontendTypes } from "../constants"
-import { currentAsset } from "."
-
-export default function(component, state) {
-  const capitalised = get_capitalised_name(
-    component.name || component._component
-  )
-
-  const matchingComponents = []
-
-  const findMatches = props => {
-    walkProps(props, c => {
-      const thisInstanceName = get_capitalised_name(c._instanceName)
-      if ((thisInstanceName || "").startsWith(capitalised)) {
-        matchingComponents.push(thisInstanceName)
-      }
-    })
-  }
-
-  // check layouts first
-  for (let layout of state.layouts) {
-    findMatches(layout.props)
-  }
-
-  // if viewing screen, check current screen for duplicate
-  if (state.currentFrontEndType === FrontendTypes.SCREEN) {
-    findMatches(get(currentAsset).props)
-  } else {
-    // viewing a layout - need to find against all screens
-    for (let screen of get(allScreens)) {
-      findMatches(screen.props)
-    }
-  }
-
-  let index = 1
-  let name
-  while (!name) {
-    const tryName = `${capitalised || "Copy"} ${index}`
-    if (!matchingComponents.includes(tryName)) name = tryName
-    index++
-  }
-
-  return name
-}
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index ca2864aeaf..2e9ec1166c 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -7,7 +7,7 @@ import { getThemeStore } from "./store/theme"
 import { derived, writable } from "svelte/store"
 import analytics from "analytics"
 import { FrontendTypes, LAYOUT_NAMES } from "../constants"
-import { makePropsSafe } from "components/userInterface/assetParsing/createProps"
+import { findComponent } from "./storeUtils"
 
 export const store = getFrontendStore()
 export const backendUiStore = getBackendUiStore()
@@ -28,31 +28,10 @@ export const currentAsset = derived(store, $store => {
 export const selectedComponent = derived(
   [store, currentAsset],
   ([$store, $currentAsset]) => {
-    if (!$currentAsset || !$store.selectedComponentId) return null
-
-    function traverse(node, callback) {
-      if (node._id === $store.selectedComponentId) return callback(node)
-
-      if (node._children) {
-        node._children.forEach(child => traverse(child, callback))
-      }
-
-      if (node.props) {
-        traverse(node.props, callback)
-      }
+    if (!$currentAsset || !$store.selectedComponentId) {
+      return null
     }
-
-    let component
-    traverse($currentAsset, found => {
-      const componentIdentifier = found._component ?? found.props._component
-      const componentDef = componentIdentifier.startsWith("##")
-        ? found
-        : $store.components[componentIdentifier]
-
-      component = makePropsSafe(componentDef, found)
-    })
-
-    return component
+    return findComponent($currentAsset.props, $store.selectedComponentId)
   }
 )
 
diff --git a/packages/builder/src/builderStore/loadComponentLibraries.js b/packages/builder/src/builderStore/loadComponentLibraries.js
index 9d534f86fe..e6516f7d79 100644
--- a/packages/builder/src/builderStore/loadComponentLibraries.js
+++ b/packages/builder/src/builderStore/loadComponentLibraries.js
@@ -21,12 +21,9 @@ export const fetchComponentLibDefinitions = async appId => {
  */
 export const fetchComponentLibModules = async application => {
   const allLibraries = {}
-
   for (let libraryName of application.componentLibraries) {
     const LIBRARY_URL = `/${application._id}/componentlibrary?library=${libraryName}`
-    const libraryModule = await import(LIBRARY_URL)
-    allLibraries[libraryName] = libraryModule
+    allLibraries[libraryName] = await import(LIBRARY_URL)
   }
-
   return allLibraries
 }
diff --git a/packages/builder/src/builderStore/replaceBindings.js b/packages/builder/src/builderStore/replaceBindings.js
deleted file mode 100644
index 3afda0c658..0000000000
--- a/packages/builder/src/builderStore/replaceBindings.js
+++ /dev/null
@@ -1,39 +0,0 @@
-export const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
-
-export function readableToRuntimeBinding(bindableProperties, textWithBindings) {
-  // Find all instances of template strings
-  const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_TEMPLATE)
-
-  let result = textWithBindings
-  // Replace readableBindings with runtimeBindings
-  boundValues &&
-    boundValues.forEach(boundValue => {
-      const binding = bindableProperties.find(({ readableBinding }) => {
-        return boundValue === `{{ ${readableBinding} }}`
-      })
-      if (binding) {
-        result = result.replace(boundValue, `{{ ${binding.runtimeBinding} }}`)
-      }
-    })
-  return result
-}
-
-export function runtimeToReadableBinding(bindableProperties, textWithBindings) {
-  let temp = textWithBindings
-  const boundValues =
-    (typeof textWithBindings === "string" &&
-      textWithBindings.match(CAPTURE_VAR_INSIDE_TEMPLATE)) ||
-    []
-
-  // Replace runtimeBindings with readableBindings:
-  boundValues.forEach(v => {
-    const binding = bindableProperties.find(({ runtimeBinding }) => {
-      return v === `{{ ${runtimeBinding} }}`
-    })
-    if (binding) {
-      temp = temp.replace(v, `{{ ${binding.readableBinding} }}`)
-    }
-  })
-
-  return temp
-}
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 2082a3e49b..340e2829aa 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -1,9 +1,5 @@
 import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import {
-  createProps,
-  getBuiltin,
-} from "components/userInterface/assetParsing/createProps"
 import {
   allScreens,
   backendUiStore,
@@ -15,15 +11,10 @@ import {
 } from "builderStore"
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
-import { FrontendTypes } from "../../constants"
-import getNewComponentName from "../getNewComponentName"
+import { FrontendTypes } from "constants"
 import analytics from "analytics"
-import {
-  findChildComponentType,
-  generateNewIdsForComponent,
-  getComponentDefinition,
-  findParent,
-} from "../storeUtils"
+import { findComponentType, findComponentParent } from "../storeUtils"
+import { uuid } from "../uuid"
 
 const INITIAL_FRONTEND_STATE = {
   apps: [],
@@ -50,37 +41,27 @@ export const getFrontendStore = () => {
   store.actions = {
     initialise: async pkg => {
       const { layouts, screens, application } = pkg
-
-      store.update(state => {
-        state.appId = application._id
-        return state
-      })
-
-      const components = await fetchComponentLibDefinitions(pkg.application._id)
-
+      const components = await fetchComponentLibDefinitions(application._id)
       store.update(state => ({
         ...state,
-        libraries: pkg.application.componentLibraries,
+        libraries: application.componentLibraries,
         components,
-        name: pkg.application.name,
-        url: pkg.application.url,
-        description: pkg.application.description,
-        appId: pkg.application._id,
+        name: application.name,
+        description: application.description,
+        appId: application._id,
+        url: application.url,
         layouts,
         screens,
         hasAppPackage: true,
-        builtins: [getBuiltin("##builtin/screenslot")],
-        appInstance: pkg.application.instance,
+        appInstance: application.instance,
       }))
-
       await hostingStore.actions.fetch()
-      await backendUiStore.actions.database.select(pkg.application.instance)
+      await backendUiStore.actions.database.select(application.instance)
     },
     routing: {
       fetch: async () => {
         const response = await api.get("/api/routing")
         const json = await response.json()
-
         store.update(state => {
           state.routes = json.routes
           return state
@@ -243,128 +224,231 @@ export const getFrontendStore = () => {
     },
     components: {
       select: component => {
+        if (!component) {
+          return
+        }
+
+        // If this is the root component, select the asset instead
+        const asset = get(currentAsset)
+        const parent = findComponentParent(asset.props, component._id)
+        if (parent == null) {
+          const state = get(store)
+          const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT
+          if (isLayout) {
+            store.actions.layouts.select(asset._id)
+          } else {
+            store.actions.screens.select(asset._id)
+          }
+          return
+        }
+
+        // Otherwise select the component
         store.update(state => {
           state.selectedComponentId = component._id
           state.currentView = "component"
           return state
         })
       },
-      create: (componentToAdd, presetProps) => {
-        const selectedAsset = get(currentAsset)
+      getDefinition: componentName => {
+        if (!componentName) {
+          return null
+        }
+        if (!componentName.startsWith("@budibase")) {
+          componentName = `@budibase/standard-components/${componentName}`
+        }
+        return get(store).components[componentName]
+      },
+      createInstance: (componentName, presetProps) => {
+        const definition = store.actions.components.getDefinition(componentName)
+        if (!definition) {
+          return null
+        }
 
-        store.update(state => {
-          function findSlot(component_array) {
-            if (!component_array) {
-              return false
+        // Generate default props
+        let props = { ...presetProps }
+        if (definition.settings) {
+          definition.settings.forEach(setting => {
+            if (setting.defaultValue !== undefined) {
+              props[setting.key] = setting.defaultValue
             }
-            for (let component of component_array) {
-              if (component._component === "##builtin/screenslot") {
-                return true
-              }
-
-              if (component._children) findSlot(component)
-            }
-            return false
-          }
-
-          if (
-            componentToAdd.startsWith("##") &&
-            findSlot(selectedAsset?.props._children)
-          ) {
-            return state
-          }
-
-          const component = getComponentDefinition(state, componentToAdd)
-
-          const instanceId = get(backendUiStore).selectedDatabase._id
-          const instanceName = getNewComponentName(component, state)
-
-          const newComponent = createProps(component, {
-            ...presetProps,
-            _instanceId: instanceId,
-            _instanceName: instanceName,
           })
+        }
 
-          const selected = get(selectedComponent)
+        // Add any extra properties the component needs
+        let extras = {}
+        if (definition.hasChildren) {
+          extras._children = []
+        }
 
-          const currentComponentDefinition =
-            state.components[selected._component]
+        return {
+          _id: uuid(),
+          _component: definition.component,
+          _styles: { normal: {}, hover: {}, active: {} },
+          _instanceName: `New ${definition.name}`,
+          ...cloneDeep(props),
+          ...extras,
+        }
+      },
+      create: (componentName, presetProps) => {
+        const selected = get(selectedComponent)
+        const asset = get(currentAsset)
+        const state = get(store)
 
-          const allowsChildren = currentComponentDefinition.children
+        // Only allow one screen slot, and in the layout
+        if (componentName.endsWith("screenslot")) {
+          const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT
+          const slot = findComponentType(asset.props, componentName)
+          if (!isLayout || slot != null) {
+            return
+          }
+        }
 
-          // Determine where to put the new component.
-          let targetParent
-          if (allowsChildren) {
-            // Child of the selected component
-            targetParent = selected
+        // Create new component
+        const componentInstance = store.actions.components.createInstance(
+          componentName,
+          presetProps
+        )
+        if (!componentInstance) {
+          return
+        }
+
+        // Find parent node to attach this component to
+        let parentComponent
+
+        if (!asset) {
+          return
+        }
+        if (selected) {
+          // Use current screen or layout as parent if no component is selected
+          const definition = store.actions.components.getDefinition(
+            selected._component
+          )
+          if (definition?.hasChildren) {
+            // Use selected component if it allows children
+            parentComponent = selected
           } else {
-            // Sibling of selected component
-            targetParent = findParent(selectedAsset.props, selected)
+            // Otherwise we need to use the parent of this component
+            parentComponent = findComponentParent(asset.props, selected._id)
           }
+        } else {
+          // Use screen or layout if no component is selected
+          parentComponent = asset.props
+        }
 
-          // Don't continue if there's no parent
-          if (!targetParent) return state
-
-          // Push the new component
-          targetParent._children.push(newComponent.props)
-
-          store.actions.preview.saveSelected()
+        // Attach component
+        if (!parentComponent) {
+          return
+        }
+        if (!parentComponent._children) {
+          parentComponent._children = []
+        }
+        parentComponent._children.push(componentInstance)
 
+        // Save components and update UI
+        store.actions.preview.saveSelected()
+        store.update(state => {
           state.currentView = "component"
-          state.selectedComponentId = newComponent.props._id
-
-          analytics.captureEvent("Added Component", {
-            name: newComponent.props._component,
-          })
+          state.selectedComponentId = componentInstance._id
           return state
         })
+
+        // Log event
+        analytics.captureEvent("Added Component", {
+          name: componentInstance._component,
+        })
+
+        return componentInstance
+      },
+      delete: component => {
+        if (!component) {
+          return
+        }
+        const asset = get(currentAsset)
+        if (!asset) {
+          return
+        }
+        const parent = findComponentParent(asset.props, component._id)
+        if (parent) {
+          parent._children = parent._children.filter(
+            child => child._id !== component._id
+          )
+          store.actions.components.select(parent)
+        }
+        store.actions.preview.saveSelected()
       },
       copy: (component, cut = false) => {
         const selectedAsset = get(currentAsset)
+        if (!selectedAsset) {
+          return null
+        }
+
+        // Update store with copied component
         store.update(state => {
           state.componentToPaste = cloneDeep(component)
           state.componentToPaste.isCut = cut
-          if (cut) {
-            const parent = findParent(selectedAsset.props, component._id)
+          return state
+        })
+
+        // Remove the component from its parent if we're cutting
+        if (cut) {
+          const parent = findComponentParent(selectedAsset.props, component._id)
+          if (parent) {
             parent._children = parent._children.filter(
               child => child._id !== component._id
             )
             store.actions.components.select(parent)
           }
-
-          return state
-        })
+        }
       },
       paste: async (targetComponent, mode) => {
-        const selectedAsset = get(currentAsset)
         let promises = []
         store.update(state => {
-          if (!state.componentToPaste) return state
-
-          const componentToPaste = cloneDeep(state.componentToPaste)
-          // retain the same ids as things may be referencing this component
-          if (componentToPaste.isCut) {
-            // in case we paste a second time
-            state.componentToPaste.isCut = false
-          } else {
-            generateNewIdsForComponent(componentToPaste, state)
-          }
-          delete componentToPaste.isCut
-
-          if (mode === "inside") {
-            targetComponent._children.push(componentToPaste)
+          // Stop if we have nothing to paste
+          if (!state.componentToPaste) {
             return state
           }
 
-          const parent = findParent(selectedAsset.props, targetComponent)
+          // Clone the component to paste
+          // Retain the same ID if cutting as things may be referencing this component
+          const cut = state.componentToPaste.isCut
+          delete state.componentToPaste.isCut
+          let componentToPaste = cloneDeep(state.componentToPaste)
+          if (cut) {
+            state.componentToPaste = null
+          } else {
+            componentToPaste._id = uuid()
+          }
 
-          const targetIndex = parent._children.indexOf(targetComponent)
-          const index = mode === "above" ? targetIndex : targetIndex + 1
-          parent._children.splice(index, 0, cloneDeep(componentToPaste))
+          if (mode === "inside") {
+            // Paste inside target component if chosen
+            if (!targetComponent._children) {
+              targetComponent._children = []
+            }
+            targetComponent._children.push(componentToPaste)
+          } else {
+            // Otherwise find the parent so we can paste in the correct order
+            // in the parents child components
+            const selectedAsset = get(currentAsset)
+            if (!selectedAsset) {
+              return state
+            }
+            const parent = findComponentParent(
+              selectedAsset.props,
+              targetComponent._id
+            )
+            if (!parent) {
+              return state
+            }
 
+            // Insert the component in the correct position
+            const targetIndex = parent._children.indexOf(targetComponent)
+            const index = mode === "above" ? targetIndex : targetIndex + 1
+            parent._children.splice(index, 0, cloneDeep(componentToPaste))
+          }
+
+          // Save and select the new component
           promises.push(store.actions.preview.saveSelected())
           store.actions.components.select(componentToPaste)
-
           return state
         })
         await Promise.all(promises)
@@ -389,90 +473,56 @@ export const getFrontendStore = () => {
         await store.actions.preview.saveSelected()
       },
       updateProp: (name, value) => {
+        let component = get(selectedComponent)
+        if (!name || !component) {
+          return
+        }
+        component[name] = value
         store.update(state => {
-          let current_component = get(selectedComponent)
-          current_component[name] = value
-
-          state.selectedComponentId = current_component._id
-          store.actions.preview.saveSelected()
+          state.selectedComponentId = component._id
           return state
         })
-      },
-      findRoute: component => {
-        // Gets all the components to needed to construct a path.
-        const selectedAsset = get(currentAsset)
-        let pathComponents = []
-        let parent = component
-        let root = false
-        while (!root) {
-          parent = findParent(selectedAsset.props, parent)
-          if (!parent) {
-            root = true
-          } else {
-            pathComponents.push(parent)
-          }
-        }
-
-        // Remove root entry since it's the screen or layout.
-        // Reverse array since we need the correct order of the IDs
-        const reversedComponents = pathComponents.reverse().slice(1)
-
-        // Add component
-        const allComponents = [...reversedComponents, component]
-
-        // Map IDs
-        const IdList = allComponents.map(c => c._id)
-
-        // Construct ID Path:
-        return IdList.join("/")
+        store.actions.preview.saveSelected()
       },
       links: {
         save: async (url, title) => {
-          let promises = []
           const layout = get(mainLayout)
-          store.update(state => {
-            // Try to extract a nav component from the master layout
-            const nav = findChildComponentType(
-              layout,
-              "@budibase/standard-components/navigation"
-            )
-            if (nav) {
-              let newLink
+          if (!layout) {
+            return
+          }
 
-              // Clone an existing link if one exists
-              if (nav._children && nav._children.length) {
-                // Clone existing link style
-                newLink = cloneDeep(nav._children[0])
+          // Find a nav bar in the main layout
+          const nav = findComponentType(
+            layout.props,
+            "@budibase/standard-components/navigation"
+          )
+          if (!nav) {
+            return
+          }
 
-                // Manipulate IDs to ensure uniqueness
-                generateNewIdsForComponent(newLink, state, false)
+          let newLink
+          if (nav._children && nav._children.length) {
+            // Clone an existing link if one exists
+            newLink = cloneDeep(nav._children[0])
 
-                // Set our new props
-                newLink._instanceName = `${title} Link`
-                newLink.url = url
-                newLink.text = title
-              } else {
-                // Otherwise create vanilla new link
-                const component = getComponentDefinition(
-                  state,
-                  "@budibase/standard-components/link"
-                )
-                const instanceId = get(backendUiStore).selectedDatabase._id
-                newLink = createProps(component, {
-                  url,
-                  text: title,
-                  _instanceName: `${title} Link`,
-                  _instanceId: instanceId,
-                }).props
-              }
-
-              // Save layout
-              nav._children = [...nav._children, newLink]
-              promises.push(store.actions.layouts.save(layout))
+            // Set our new props
+            newLink._id = uuid()
+            newLink._instanceName = `${title} Link`
+            newLink.url = url
+            newLink.text = title
+          } else {
+            // Otherwise create vanilla new link
+            newLink = {
+              ...store.actions.components.createInstance("link"),
+              url,
+              text: title,
+              _instanceName: `${title} Link`,
             }
-            return state
-          })
-          await Promise.all(promises)
+          }
+
+          // Save layout
+          nav._children = [...nav._children, newLink]
+          await store.actions.layouts.save(layout)
         },
       },
     },
diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js
index ddf48cbe44..7272f3514c 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/index.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/index.js
@@ -4,8 +4,6 @@ import rowListScreen from "./rowListScreen"
 import emptyNewRowScreen from "./emptyNewRowScreen"
 import createFromScratchScreen from "./createFromScratchScreen"
 import emptyRowDetailScreen from "./emptyRowDetailScreen"
-import { generateNewIdsForComponent } from "../../storeUtils"
-import { uuid } from "builderStore/uuid"
 
 const allTemplates = tables => [
   createFromScratchScreen,
@@ -16,13 +14,9 @@ const allTemplates = tables => [
   emptyRowDetailScreen,
 ]
 
-// allows us to apply common behaviour to all create() functions
+// Allows us to apply common behaviour to all create() functions
 const createTemplateOverride = (frontendState, create) => () => {
   const screen = create()
-  for (let component of screen.props._children) {
-    generateNewIdsForComponent(component, frontendState, false)
-  }
-  screen.props._id = uuid()
   screen.name = screen.props._id
   screen.routing.route = screen.routing.route.toLowerCase()
   return screen
diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 74f9b55fc8..2790a68677 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -21,26 +21,29 @@ export default function(tables) {
 export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
-function generateTitleContainer(table) {
-  return makeTitleContainer("New Row").addChild(makeSaveButton(table))
+function generateTitleContainer(table, providerId) {
+  return makeTitleContainer("New Row").addChild(
+    makeSaveButton(table, providerId)
+  )
 }
 
 const createScreen = table => {
-  const dataform = new Component(
-    "@budibase/standard-components/dataformwide"
-  ).instanceName("Form")
-
-  const container = makeMainContainer()
-    .addChild(makeBreadcrumbContainer(table.name, "New"))
-    .addChild(generateTitleContainer(table))
-    .addChild(dataform)
-
-  return new Screen()
+  const screen = new Screen()
     .component("@budibase/standard-components/newrow")
     .table(table._id)
     .route(newRowUrl(table))
     .instanceName(`${table.name} - New`)
     .name("")
-    .addChild(container)
-    .json()
+
+  const dataform = new Component(
+    "@budibase/standard-components/dataformwide"
+  ).instanceName("Form")
+
+  const providerId = screen._json.props._id
+  const container = makeMainContainer()
+    .addChild(makeBreadcrumbContainer(table.name, "New"))
+    .addChild(generateTitleContainer(table, providerId))
+    .addChild(dataform)
+
+  return screen.addChild(container).json()
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 526f457f3e..0a9148eaf8 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -25,9 +25,9 @@ export default function(tables) {
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
 export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
 
-function generateTitleContainer(table, title) {
+function generateTitleContainer(table, title, providerId) {
   // have to override style for this, its missing margin
-  const saveButton = makeSaveButton(table).normalStyle({
+  const saveButton = makeSaveButton(table, providerId).normalStyle({
     background: "#000000",
     "border-width": "0",
     "border-style": "None",
@@ -60,8 +60,8 @@ function generateTitleContainer(table, title) {
       onClick: [
         {
           parameters: {
-            rowId: "{{ data._id }}",
-            revId: "{{ data._rev }}",
+            rowId: `{{ ${providerId}._id }}`,
+            revId: `{{ ${providerId}._rev }}`,
             tableId: table._id,
           },
           "##eventHandlerType": "Delete Row",
@@ -82,21 +82,22 @@ function generateTitleContainer(table, title) {
 }
 
 const createScreen = (table, heading) => {
-  const dataform = new Component(
-    "@budibase/standard-components/dataformwide"
-  ).instanceName("Form")
-
-  const container = makeMainContainer()
-    .addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
-    .addChild(generateTitleContainer(table, heading || "Edit Row"))
-    .addChild(dataform)
-
-  return new Screen()
+  const screen = new Screen()
     .component("@budibase/standard-components/rowdetail")
     .table(table._id)
     .instanceName(`${table.name} - Detail`)
     .route(rowDetailUrl(table))
     .name("")
-    .addChild(container)
-    .json()
+
+  const dataform = new Component(
+    "@budibase/standard-components/dataformwide"
+  ).instanceName("Form")
+
+  const providerId = screen._json.props._id
+  const container = makeMainContainer()
+    .addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
+    .addChild(generateTitleContainer(table, heading || "Edit Row", providerId))
+    .addChild(dataform)
+
+  return screen.addChild(container).json()
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
index bd03fc7cdc..a74ea526f7 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
@@ -1,4 +1,4 @@
-import { v4 } from "uuid"
+import { uuid } from "builderStore/uuid"
 import { BaseStructure } from "./BaseStructure"
 
 export class Component extends BaseStructure {
@@ -6,7 +6,7 @@ export class Component extends BaseStructure {
     super(false)
     this._children = []
     this._json = {
-      _id: v4(),
+      _id: uuid(),
       _component: name,
       _styles: {
         normal: {},
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
index 00bd43ec2c..79e1632ad2 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
@@ -1,4 +1,5 @@
 import { BaseStructure } from "./BaseStructure"
+import { uuid } from "builderStore/uuid"
 
 export class Screen extends BaseStructure {
   constructor() {
@@ -6,7 +7,7 @@ export class Screen extends BaseStructure {
     this._json = {
       layoutId: "layout_private_master",
       props: {
-        _id: "",
+        _id: uuid(),
         _component: "",
         _styles: {
           normal: {},
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index 89e08cecdb..a00f66f828 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -78,7 +78,7 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .addChild(identifierText)
 }
 
-export function makeSaveButton(table) {
+export function makeSaveButton(table, providerId) {
   return new Component("@budibase/standard-components/button")
     .normalStyle({
       background: "#000000",
@@ -100,8 +100,7 @@ export function makeSaveButton(table) {
       onClick: [
         {
           parameters: {
-            contextPath: "data",
-            tableId: table._id,
+            providerId,
           },
           "##eventHandlerType": "Save Row",
         },
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index 4ee2dd7ccc..00f5a209a3 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -1,80 +1,105 @@
-import { getBuiltin } from "components/userInterface/assetParsing/createProps"
-import { uuid } from "./uuid"
-import getNewComponentName from "./getNewComponentName"
+/**
+ * Recursively searches for a specific component ID
+ */
+export const findComponent = (rootComponent, id) => {
+  return searchComponentTree(rootComponent, comp => comp._id === id)
+}
 
 /**
- * Find the parent component of the passed in child.
- * @param {Object} rootProps - props to search for the parent in
- * @param {String|Object} child - id of the child or the child itself to find the parent of
+ * Recursively searches for a specific component type
  */
-export const findParent = (rootProps, child) => {
-  let parent
-  walkProps(rootProps, (props, breakWalk) => {
-    if (
-      props._children &&
-      (props._children.includes(child) ||
-        props._children.some(c => c._id === child))
-    ) {
-      parent = props
-      breakWalk()
-    }
-  })
-  return parent
+export const findComponentType = (rootComponent, type) => {
+  return searchComponentTree(rootComponent, comp => comp._component === type)
 }
 
-export const walkProps = (props, action, cancelToken = null) => {
-  cancelToken = cancelToken || { cancelled: false }
-  action(props, () => {
-    cancelToken.cancelled = true
-  })
-
-  if (props._children) {
-    for (let child of props._children) {
-      if (cancelToken.cancelled) return
-      walkProps(child, action, cancelToken)
-    }
-  }
-}
-
-export const generateNewIdsForComponent = (
-  component,
-  state,
-  changeName = true
-) =>
-  walkProps(component, prop => {
-    prop._id = uuid()
-    if (changeName) prop._instanceName = getNewComponentName(prop, state)
-  })
-
-export const getComponentDefinition = (state, name) =>
-  name.startsWith("##") ? getBuiltin(name) : state.components[name]
-
-export const findChildComponentType = (node, typeToFind) => {
-  // Stop recursion if invalid props
-  if (!node || !typeToFind) {
+/**
+ * Recursively searches for the parent component of a specific component ID
+ */
+export const findComponentParent = (rootComponent, id, parentComponent) => {
+  if (!rootComponent || !id) {
     return null
   }
-
-  // Stop recursion if this element matches
-  if (node._component === typeToFind) {
-    return node
+  if (rootComponent._id === id) {
+    return parentComponent
   }
-
-  // Otherwise check if any children match
-  // Stop recursion if no valid children to process
-  const children = node._children || (node.props && node.props._children)
-  if (!children || !children.length) {
+  if (!rootComponent._children) {
     return null
   }
-
-  // Recurse and check each child component
-  for (let child of children) {
-    const childResult = findChildComponentType(child, typeToFind)
+  for (const child of rootComponent._children) {
+    const childResult = findComponentParent(child, id, rootComponent)
+    if (childResult) {
+      return childResult
+    }
+  }
+  return null
+}
+
+/**
+ * Recursively searches for a specific component ID and records the component
+ * path to this component
+ */
+export const findComponentPath = (rootComponent, id, path = []) => {
+  if (!rootComponent || !id) {
+    return []
+  }
+  if (rootComponent._id === id) {
+    return [...path, rootComponent]
+  }
+  if (!rootComponent._children) {
+    return []
+  }
+  for (const child of rootComponent._children) {
+    const newPath = [...path, rootComponent]
+    const childResult = findComponentPath(child, id, newPath)
+    if (childResult?.length) {
+      return childResult
+    }
+  }
+  return []
+}
+
+/**
+ * Recurses through the component tree and finds all components of a certain
+ * type.
+ */
+export const findAllMatchingComponents = (rootComponent, selector) => {
+  if (!rootComponent || !selector) {
+    return []
+  }
+  let components = []
+  if (rootComponent._children) {
+    rootComponent._children.forEach(child => {
+      components = [
+        ...components,
+        ...findAllMatchingComponents(child, selector),
+      ]
+    })
+  }
+  if (selector(rootComponent)) {
+    components.push(rootComponent)
+  }
+  return components.reverse()
+}
+
+/**
+ * Recurses through a component tree evaluating a matching function against
+ * components until a match is found
+ */
+const searchComponentTree = (rootComponent, matchComponent) => {
+  if (!rootComponent || !matchComponent) {
+    return null
+  }
+  if (matchComponent(rootComponent)) {
+    return rootComponent
+  }
+  if (!rootComponent._children) {
+    return null
+  }
+  for (const child of rootComponent._children) {
+    const childResult = searchComponentTree(child, matchComponent)
     if (childResult) {
       return childResult
     }
   }
-
-  // If we reach here then no children were valid
   return null
 }
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 5d3371ee7d..439687d0c2 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -5,7 +5,7 @@
   import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import BindableInput from "components/userInterface/BindableInput.svelte"
+  import BindableInput from "../../common/BindableInput.svelte"
 
   export let block
   export let webhookModal
diff --git a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/GenericBindingPopover.svelte
rename to packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 117f00d1a3..43fa4b8bf1 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,7 +1,7 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { Input, Select, Label } from "@budibase/bbui"
-  import BindableInput from "../../userInterface/BindableInput.svelte"
+  import { Select } from "@budibase/bbui"
+  import BindableInput from "../../common/BindableInput.svelte"
 
   export let value
   export let bindings
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
index 9588b34dd7..f6ef036f40 100644
--- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
@@ -103,6 +103,15 @@
     opacity: 1;
   }
 
+  .column-header-name {
+    white-space: normal !important;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
   .sort-icon {
     position: relative;
     top: 2px;
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index aa8954cb8d..2369f99e74 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -43,8 +43,8 @@
         <div class="datasource-icon" slot="icon">
           <svelte:component
             this={ICONS[datasource.source]}
-            height="15"
-            width="15" />
+            height="18"
+            width="18" />
         </div>
         <EditDatasourcePopover {datasource} />
       </NavItem>
@@ -61,3 +61,10 @@
     {/each}
   </div>
 {/if}
+
+<style>
+  .datasource-icon {
+    margin-right: 3px;
+    padding-top: 3px;
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index 79bb951c01..f92224e39a 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -7,10 +7,9 @@
 <form>
   {#each Object.keys(integration) as configKey}
     <Input
-      thin
       type={integration[configKey].type}
       label={configKey}
       bind:value={integration[configKey]} />
-    <Spacer medium />
+    <Spacer large />
   {/each}
 </form>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
new file mode 100644
index 0000000000..bc34d4d80c
--- /dev/null
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
@@ -0,0 +1,42 @@
+<script>
+  import { backendUiStore, store, allScreens } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import { DropdownMenu, Button, Input, TextButton, Icon } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
+
+  export let bindable
+  export let parameters
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+
+  function hideEditor() {
+    dropdown?.hide()
+  }
+</script>
+
+<div on:click|stopPropagation bind:this={anchor}>
+  <TextButton
+    text
+    on:click={dropdown.show}
+    active={false}>
+      <Icon name="add" />
+      Add Parameters
+  </TextButton>
+  <DropdownMenu align="right" {anchor} bind:this={dropdown}>
+    <div class="wrapper">
+      <ParameterBuilder bind:parameters {bindable} />
+    </div>
+  </DropdownMenu>
+</div>
+
+<style>
+  .wrapper {
+    padding: var(--spacing-xl);
+    min-width: 600px;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/common/BindableInput.svelte
similarity index 93%
rename from packages/builder/src/components/userInterface/BindableInput.svelte
rename to packages/builder/src/components/common/BindableInput.svelte
index b1521bee20..0e2cc2174f 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/common/BindableInput.svelte
@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte"
-  import GenericBindingPopover from "./GenericBindingPopover.svelte"
+  import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
   import { Input, Icon } from "@budibase/bbui"
 
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index 98fda9efb1..2f179858a3 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -5,12 +5,7 @@
   export let disabled
 </script>
 
-<div
-  class="dropdown-item"
-  class:disabled
-  on:click
-  class:big={subtitle != null}
-  {...$$restProps}>
+<div class="dropdown-item" class:disabled on:click {...$$restProps}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">
     <div class="title">{title}</div>
@@ -27,7 +22,7 @@
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-m);
-    padding: var(--spacing-xs) var(--spacing-l);
+    padding: var(--spacing-s) var(--spacing-l);
     color: var(--ink);
   }
   .dropdown-item.disabled,
@@ -35,9 +30,6 @@
     pointer-events: none;
     color: var(--grey-5);
   }
-  .dropdown-item.big {
-    padding: var(--spacing-s) var(--spacing-l);
-  }
   .dropdown-item:not(.disabled):hover {
     background-color: var(--grey-2);
     cursor: pointer;
@@ -65,10 +57,6 @@
   }
 
   i {
-    padding: 0.5rem;
-    background-color: var(--grey-2);
-    font-size: 24px;
-    border-radius: var(--border-radius-s);
-    color: var(--ink);
+    font-size: var(--font-size-m);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
similarity index 56%
rename from packages/builder/src/components/userInterface/ComponentSelectionList.svelte
rename to packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 60f40be6e2..7ec58fc2c3 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -6,47 +6,62 @@
     selectedComponent,
     currentAssetId,
   } from "builderStore"
-  import components from "./temporaryPanelStructure.js"
+  import structure from "./componentStructure.json"
   import { DropdownMenu } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
-  const categories = components.categories
+  $: enrichedStructure = enrichStructure(structure, $store.components)
+
   let selectedIndex
   let anchors = []
   let popover
   $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
 
-  const close = () => {
-    popover.hide()
+  const enrichStructure = (structure, definitions) => {
+    let enrichedStructure = []
+    structure.forEach(item => {
+      if (typeof item === "string") {
+        const def = definitions[`@budibase/standard-components/${item}`]
+        if (def) {
+          enrichedStructure.push({
+            ...def,
+            isCategory: false,
+          })
+        }
+      } else {
+        enrichedStructure.push({
+          ...item,
+          isCategory: true,
+          children: enrichStructure(item.children || [], definitions),
+        })
+      }
+    })
+    return enrichedStructure
   }
 
-  const onCategoryChosen = (category, idx) => {
-    if (category.isCategory) {
+  const onItemChosen = (item, idx) => {
+    if (item.isCategory) {
+      // Select and open this category
       selectedIndex = idx
       popover.show()
     } else {
-      onComponentChosen(category)
+      // Add this component
+      store.actions.components.create(item.component)
+      popover.hide()
     }
   }
-
-  const onComponentChosen = component => {
-    store.actions.components.create(component._component, component.presetProps)
-    const path = store.actions.components.findRoute($selectedComponent)
-    $goto(`./${$currentAssetId}/${path}`)
-    close()
-  }
 </script>
 
 <div class="container">
-  {#each categories as category, idx}
+  {#each enrichedStructure as item, idx}
     <div
       bind:this={anchors[idx]}
       class="category"
-      on:click={() => onCategoryChosen(category, idx)}
+      on:click={() => onItemChosen(item, idx)}
       class:active={idx === selectedIndex}>
-      {#if category.icon}<i class={category.icon} />{/if}
-      <span>{category.name}</span>
-      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+      {#if item.icon}<i class={item.icon} />{/if}
+      <span>{item.name}</span>
+      {#if item.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
     </div>
   {/each}
 </div>
@@ -56,12 +71,12 @@
   {anchor}
   align="left">
   <DropdownContainer>
-    {#each categories[selectedIndex].children as item}
+    {#each enrichedStructure[selectedIndex].children as item}
       {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
         <DropdownItem
           icon={item.icon}
           title={item.name}
-          on:click={() => onComponentChosen(item)} />
+          on:click={() => onItemChosen(item)} />
       {/if}
     {/each}
   </DropdownContainer>
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
similarity index 97%
rename from packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
rename to packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index bb152accc9..45607431e4 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -14,7 +14,7 @@
   const screenPlaceholder = new Screen()
     .name("Screen Placeholder")
     .route("*")
-    .component("@budibase/standard-components/screenslotplaceholder")
+    .component("@budibase/standard-components/screenslot")
     .instanceName("Content Placeholder")
     .json()
 
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
new file mode 100644
index 0000000000..bed95c607f
--- /dev/null
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -0,0 +1,62 @@
+[
+  "container",
+  "datagrid",
+  "list",
+  "button",
+  {
+    "name": "Form",
+    "icon": "ri-file-edit-line",
+    "children": [
+      "dataform",
+      "dataformwide",
+      "input",
+      "richtext",
+      "datepicker"
+    ]
+  },
+  {
+    "name": "Card",
+    "icon": "ri-archive-drawer-line",
+    "children": [
+      "stackedlist",
+      "card",
+      "cardhorizontal",
+      "cardstat"
+    ]
+  },
+  {
+    "name": "Chart",
+    "icon": "ri-bar-chart-2-line",
+    "children": [
+      "bar",
+      "line",
+      "area",
+      "pie",
+      "donut",
+      "candlestick"
+    ]
+  },
+  {
+    "name": "Elements",
+    "icon": "ri-paragraph",
+    "children": [
+      "heading",
+      "text",
+      "image",
+      "link",
+      "icon",
+      "embed"
+    ]
+  },
+  {
+    "name": "Other",
+    "icon": "ri-more-2-line",
+    "children": [
+      "screenslot",
+      "navigation",
+      "login",
+      "rowdetail",
+      "newrow"
+    ]
+  }
+]
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html b/packages/builder/src/components/design/AppPreview/iframeTemplate.html
similarity index 100%
rename from packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
rename to packages/builder/src/components/design/AppPreview/iframeTemplate.html
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
similarity index 100%
rename from packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
rename to packages/builder/src/components/design/AppPreview/iframeTemplate.js
diff --git a/packages/builder/src/components/userInterface/AppPreview/index.js b/packages/builder/src/components/design/AppPreview/index.js
similarity index 100%
rename from packages/builder/src/components/userInterface/AppPreview/index.js
rename to packages/builder/src/components/design/AppPreview/index.js
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
similarity index 63%
rename from packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
rename to packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index 251a60155f..a027beab18 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@@ -1,11 +1,9 @@
 <script>
-  import { goto } from "@sveltech/routify"
   import { get } from "svelte/store"
   import { store, currentAsset } from "builderStore"
-  import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
-  import { findParent } from "builderStore/storeUtils"
+  import { findComponentParent } from "builderStore/storeUtils"
   import { DropdownMenu } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -17,7 +15,7 @@
 
   $: noChildrenAllowed =
     !component ||
-    !getComponentDefinition($store, component._component)?.children
+    !store.actions.components.getDefinition(component._component)?.hasChildren
   $: noPaste = !$store.componentToPaste
 
   const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
@@ -28,48 +26,38 @@
 
   const selectComponent = component => {
     store.actions.components.select(component)
-    const path = store.actions.components.findRoute(component)
-    $goto(`./${$store.currentFrontEndType}/${path}`)
   }
 
   const moveUpComponent = () => {
-    store.update(state => {
-      const asset = get(currentAsset)
-      const parent = findParent(asset.props, component)
-
-      if (parent) {
-        const currentIndex = parent._children.indexOf(component)
-        if (currentIndex === 0) return state
-
-        const newChildren = parent._children.filter(c => c !== component)
-        newChildren.splice(currentIndex - 1, 0, component)
-        parent._children = newChildren
-      }
-      state.selectedComponentId = component._id
-      store.actions.preview.saveSelected()
-
-      return state
-    })
+    const asset = get(currentAsset)
+    const parent = findComponentParent(asset.props, component._id)
+    if (!parent) {
+      return
+    }
+    const currentIndex = parent._children.indexOf(component)
+    if (currentIndex === 0) {
+      return
+    }
+    const newChildren = parent._children.filter(c => c !== component)
+    newChildren.splice(currentIndex - 1, 0, component)
+    parent._children = newChildren
+    store.actions.preview.saveSelected()
   }
 
   const moveDownComponent = () => {
-    store.update(state => {
-      const asset = get(currentAsset)
-      const parent = findParent(asset.props, component)
-
-      if (parent) {
-        const currentIndex = parent._children.indexOf(component)
-        if (currentIndex === parent._children.length - 1) return state
-
-        const newChildren = parent._children.filter(c => c !== component)
-        newChildren.splice(currentIndex + 1, 0, component)
-        parent._children = newChildren
-      }
-      state.selectedComponentId = component._id
-      store.actions.preview.saveSelected()
-
-      return state
-    })
+    const asset = get(currentAsset)
+    const parent = findComponentParent(asset.props, component._id)
+    if (!parent) {
+      return
+    }
+    const currentIndex = parent._children.indexOf(component)
+    if (currentIndex === parent._children.length - 1) {
+      return
+    }
+    const newChildren = parent._children.filter(c => c !== component)
+    newChildren.splice(currentIndex + 1, 0, component)
+    parent._children = newChildren
+    store.actions.preview.saveSelected()
   }
 
   const duplicateComponent = () => {
@@ -78,18 +66,7 @@
   }
 
   const deleteComponent = () => {
-    store.update(state => {
-      const asset = get(currentAsset)
-      const parent = findParent(asset.props, component)
-
-      if (parent) {
-        parent._children = parent._children.filter(child => child !== component)
-        selectComponent(parent)
-      }
-
-      store.actions.preview.saveSelected()
-      return state
-    })
+    store.actions.components.delete(component)
   }
 
   const storeComponentForCopy = (cut = false) => {
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
similarity index 87%
rename from packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
rename to packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
index 320a81f00d..f99d90d2e7 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@@ -1,7 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
   import { store, currentAssetId } from "builderStore"
-  import { getComponentDefinition } from "builderStore/storeUtils"
   import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
@@ -12,17 +11,10 @@
   export let level = 0
   export let dragDropStore
 
-  const isScreenslot = name => name === "##builtin/screenslot"
+  const isScreenslot = name => name?.endsWith("screenslot")
 
   const selectComponent = component => {
-    // Set current component
     store.actions.components.select(component)
-
-    // Get ID path
-    const path = store.actions.components.findRoute(component)
-
-    // Go to correct URL
-    $goto(`./${$currentAssetId}/${path}`)
   }
 
   const dragstart = component => e => {
@@ -31,9 +23,11 @@
   }
 
   const dragover = (component, index) => e => {
+    const definition = store.actions.components.getDefinition(
+      component._component
+    )
     const canHaveChildrenButIsEmpty =
-      getComponentDefinition($store, component._component).children &&
-      component._children.length === 0
+      definition?.hasChildren && !component._children?.length
 
     e.dataTransfer.dropEffect = DropEffect.COPY
 
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte
rename to packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
similarity index 96%
rename from packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
rename to packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index 1b69ee770e..c9e9d27958 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -24,9 +24,7 @@
   $: selectedScreen = $currentAsset
 
   const changeScreen = screenId => {
-    // select the route
     store.actions.screens.select(screenId)
-    $goto(`./${screenId}`)
   }
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
rename to packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
similarity index 66%
rename from packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
rename to packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
index e657b12bb9..37c2f9867e 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
@@ -1,5 +1,6 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 import { store as frontendStore } from "builderStore"
+import { findComponentPath } from "builderStore/storeUtils"
 
 export const DropEffect = {
   MOVE: "move",
@@ -72,19 +73,30 @@ export default function() {
       })
     },
     drop: () => {
-      store.update(state => {
-        if (state.targetComponent !== state.dragged) {
-          frontendStore.actions.components.copy(state.dragged, true)
-          frontendStore.actions.components.paste(
-            state.targetComponent,
-            state.dropPosition
-          )
-        }
+      const state = get(store)
 
-        store.actions.reset()
+      // Stop if the target and source are the same
+      if (state.targetComponent === state.dragged) {
+        return
+      }
+      // Stop if the target or source are null
+      if (!state.targetComponent || !state.dragged) {
+        return
+      }
+      // Stop if the target is a child of source
+      const path = findComponentPath(state.dragged, state.targetComponent._id)
+      const ids = path.map(component => component._id)
+      if (ids.includes(state.targetComponent._id)) {
+        return
+      }
 
-        return state
-      })
+      // Cut and paste the component
+      frontendStore.actions.components.copy(state.dragged, true)
+      frontendStore.actions.components.paste(
+        state.targetComponent,
+        state.dropPosition
+      )
+      store.actions.reset()
     },
   }
 
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
rename to packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
similarity index 88%
rename from packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
rename to packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 698476dcd8..147f32bb3e 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -9,10 +9,10 @@
     selectedAccessRole,
   } from "builderStore"
   import { FrontendTypes } from "constants"
-  import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
-  import Layout from "components/userInterface/Layout.svelte"
-  import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import NewLayoutModal from "components/userInterface/NewLayoutModal.svelte"
+  import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
+  import Layout from "components/design/NavigationPanel/Layout.svelte"
+  import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
+  import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
   import { Modal, Switcher, Select } from "@budibase/bbui"
 
   const tabs = [
@@ -28,7 +28,7 @@
 
   let modal
   let routes = {}
-  let tab = $params.assetType
+  $: tab = $params.assetType
 
   const navigate = ({ detail }) => {
     if (!detail) {
diff --git a/packages/builder/src/components/userInterface/Layout.svelte b/packages/builder/src/components/design/NavigationPanel/Layout.svelte
similarity index 97%
rename from packages/builder/src/components/userInterface/Layout.svelte
rename to packages/builder/src/components/design/NavigationPanel/Layout.svelte
index 77bab330c5..bab9cf56b6 100644
--- a/packages/builder/src/components/userInterface/Layout.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/Layout.svelte
@@ -19,7 +19,6 @@
 
   const selectLayout = () => {
     store.actions.layouts.select(layout._id)
-    $goto(`./${layout._id}`)
   }
 </script>
 
diff --git a/packages/builder/src/components/userInterface/NewLayoutModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
similarity index 85%
rename from packages/builder/src/components/userInterface/NewLayoutModal.svelte
rename to packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
index 1781c6a2d3..7920f9bbf5 100644
--- a/packages/builder/src/components/userInterface/NewLayoutModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
@@ -8,8 +8,7 @@
 
   async function save() {
     try {
-      const layout = await store.actions.layouts.save({ name })
-      $goto(`./${layout._id}`)
+      await store.actions.layouts.save({ name })
       notifier.success(`Layout ${name} created successfully`)
     } catch (err) {
       notifier.danger(`Error creating layout ${name}.`)
diff --git a/packages/builder/src/components/userInterface/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
similarity index 96%
rename from packages/builder/src/components/userInterface/NewScreenModal.svelte
rename to packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index db9181b1bd..c33d12c1a1 100644
--- a/packages/builder/src/components/userInterface/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -63,7 +63,7 @@
     draftScreen.props._component = baseComponent
     draftScreen.routing = { route, roleId }
 
-    const createdScreen = await store.actions.screens.create(draftScreen)
+    await store.actions.screens.create(draftScreen)
     if (createLink) {
       await store.actions.components.links.save(route, name)
     }
@@ -75,8 +75,6 @@
         template: template.id || template.name,
       })
     }
-
-    $goto(`./${createdScreen._id}`)
   }
 
   const routeExists = (route, roleId) => {
diff --git a/packages/builder/src/components/userInterface/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
similarity index 97%
rename from packages/builder/src/components/userInterface/BindingPanel.svelte
rename to packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 6ab2504077..612dc9caa5 100644
--- a/packages/builder/src/components/userInterface/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -9,7 +9,7 @@
   export let bindingDrawer
 
   function addToText(readableBinding) {
-    value = value + `{{ ${readableBinding} }}`
+    value = `${value || ""}{{ ${readableBinding} }}`
   }
   let originalValue = value
 
diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/CategoryTab.svelte
rename to packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
similarity index 84%
rename from packages/builder/src/components/userInterface/DesignView.svelte
rename to packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index cbc110d3b9..dee6595ed5 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -1,16 +1,16 @@
 <script>
   import { TextArea, DetailSummary, Button } from "@budibase/bbui"
-  import PropertyGroup from "./PropertyGroup.svelte"
-  import FlatButtonGroup from "./FlatButtonGroup.svelte"
+  import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
+  import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
+  import { allStyles } from "./componentStyles"
 
-  export let panelDefinition = {}
+  export let componentDefinition = {}
   export let componentInstance = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
   export let onResetStyles = () => {}
 
   let selectedCategory = "normal"
-  let propGroup = null
   let currentGroup
 
   function onChange(category) {
@@ -23,7 +23,7 @@
     { value: "active", text: "Active" },
   ]
 
-  $: propertyGroupNames = panelDefinition ? Object.keys(panelDefinition) : []
+  $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
 </script>
 
 <div class="design-view-container">
@@ -32,12 +32,12 @@
   </div>
 
   <div class="positioned-wrapper">
-    <div bind:this={propGroup} class="design-view-property-groups">
-      {#if propertyGroupNames.length > 0}
-        {#each propertyGroupNames as groupName}
+    <div class="design-view-property-groups">
+      {#if groups.length > 0}
+        {#each groups as groupName}
           <PropertyGroup
             name={groupName}
-            properties={panelDefinition[groupName]}
+            properties={allStyles[groupName]}
             styleCategory={selectedCategory}
             {onStyleChanged}
             {componentInstance}
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
similarity index 70%
rename from packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 3aa88eac85..6291917cd0 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -2,46 +2,30 @@
   import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
   import { FrontendTypes } from "constants"
-  import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
   import SettingsView from "./SettingsView.svelte"
   import { setWith } from "lodash"
 
-  let flattenedPanel = flattenComponents(panelStructure.categories)
-  let categories = [
+  const categories = [
     { value: "settings", name: "Settings" },
     { value: "design", name: "Design" },
   ]
   let selectedCategory = categories[0]
 
-  $: componentInstance =
-    $store.currentView !== "component"
-      ? { ...$currentAsset, ...$selectedComponent }
-      : $selectedComponent
-  $: componentDefinition = $store.components[componentInstance._component]
-  $: componentPropDefinition =
-    flattenedPanel.find(
-      // use for getting controls for each component property
-      c => c._component === componentInstance._component
-    ) || {}
-
-  $: panelDefinition =
-    componentPropDefinition.properties &&
-    componentPropDefinition.properties[selectedCategory.value]
+  $: definition = store.actions.components.getDefinition(
+    $selectedComponent._component
+  )
+  $: isComponentOrScreen =
+    $store.currentView === "component" ||
+    $store.currentFrontEndType === FrontendTypes.SCREEN
+  $: isNotScreenslot = !$selectedComponent._component.endsWith("screenslot")
+  $: showDisplayName = isComponentOrScreen && isNotScreenslot
 
   const onStyleChanged = store.actions.components.updateStyle
   const onCustomStyleChanged = store.actions.components.updateCustomStyle
   const onResetStyles = store.actions.components.resetStyles
 
-  $: isComponentOrScreen =
-    $store.currentView === "component" ||
-    $store.currentFrontEndType === FrontendTypes.SCREEN
-  $: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
-
-  $: displayName =
-    isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
-
   function walkProps(component, action) {
     action(component)
     if (component.children) {
@@ -89,24 +73,23 @@
   {categories}
   {selectedCategory} />
 
-{#if displayName}
-  <div class="instance-name">{componentInstance._instanceName}</div>
+{#if showDisplayName}
+  <div class="instance-name">{$selectedComponent._instanceName}</div>
 {/if}
 
 <div class="component-props-container">
   {#if selectedCategory.value === 'design'}
     <DesignView
-      {panelDefinition}
-      {componentInstance}
+      componentInstance={$selectedComponent}
+      componentDefinition={definition}
       {onStyleChanged}
       {onCustomStyleChanged}
       {onResetStyles} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView
-      {componentInstance}
-      {componentDefinition}
-      {panelDefinition}
-      displayNameField={displayName}
+      componentInstance={$selectedComponent}
+      componentDefinition={definition}
+      {showDisplayName}
       onChange={store.actions.components.updateProp}
       onScreenPropChange={setAssetProps}
       assetInstance={$store.currentView !== 'component' && $currentAsset} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte
new file mode 100644
index 0000000000..5eaf81cdbc
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte
@@ -0,0 +1,7 @@
+<script>
+  import Checkbox from "components/common/Checkbox.svelte"
+
+  export let value
+</script>
+
+<Checkbox checked={value} on:change />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
new file mode 100644
index 0000000000..63ce8da6c4
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte
@@ -0,0 +1,7 @@
+<script>
+  import Colorpicker from "@budibase/colorpicker"
+
+  export let value
+</script>
+
+<Colorpicker value={value || '#000'} on:change />
diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/DetailScreenSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
similarity index 98%
rename from packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 5dd8f8a423..f15b87d867 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -13,13 +13,12 @@
 
   const EVENT_TYPE_KEY = "##eventHandlerType"
 
-  export let event
+  export let actions
 
   let addActionButton
   let addActionDropdown
   let selectedAction
 
-  $: actions = event || []
   $: selectedActionComponent =
     selectedAction &&
     actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
similarity index 92%
rename from packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
index 9340ec4c28..241864839a 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
@@ -7,7 +7,7 @@
 
   const dispatch = createEventDispatcher()
 
-  export let value
+  export let value = []
   export let name
 
   let drawer
@@ -57,12 +57,12 @@
   }
 </script>
 
-<Button secondary small on:click={drawer.show}>Define Actions</Button>
+<Button secondary wide on:click={drawer.show}>Define Actions</Button>
 <Drawer bind:this={drawer} title={'Actions'}>
   <heading slot="buttons">
     <Button thin blue on:click={saveEventData}>Save</Button>
   </heading>
   <div slot="body">
-    <EventEditor event={value} eventType={name} />
+    <EventEditor bind:actions={value} eventType={name} />
   </div>
 </Drawer>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
new file mode 100644
index 0000000000..e61fadd57b
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
@@ -0,0 +1,72 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { store, currentAsset } from "builderStore"
+  import {
+    getDataProviderComponents,
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: dataProviderComponents = getDataProviderComponents(
+    $currentAsset.props,
+    $store.selectedComponentId
+  )
+  $: {
+    // Automatically set rev and table ID based on row ID
+    if (parameters.rowId) {
+      parameters.revId = parameters.rowId.replace("_id", "_rev")
+      const providerComponent = dataProviderComponents.find(
+        provider => provider._id === parameters.providerId
+      )
+      const datasource = getDatasourceForProvider(providerComponent)
+      const { table } = getSchemaForDatasource(datasource)
+      if (table) {
+        parameters.tableId = table._id
+      }
+    }
+  }
+</script>
+
+<div class="root">
+  {#if dataProviderComponents.length === 0}
+    <div class="cannot-use">
+      Delete row can only be used within a component that provides data, such as
+      a List
+    </div>
+  {:else}
+    <Label size="m" color="dark">Datasource</Label>
+    <Select secondary bind:value={parameters.rowId}>
+      <option value="" />
+      {#each dataProviderComponents as provider}
+        <option value={`{{ ${provider._id}._id }}`}>
+          {provider._instanceName}
+        </option>
+      {/each}
+    </Select>
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(> div:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .cannot-use {
+    color: var(--red);
+    font-size: var(--font-size-s);
+    text-align: center;
+    width: 70%;
+    margin: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
similarity index 77%
rename from packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
index 05171a0256..a59f1c4954 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@@ -1,22 +1,18 @@
 <script>
   import { Select, Label, Spacer } from "@budibase/bbui"
   import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-  import ParameterBuilder from "../../../integration/QueryParameterBuilder.svelte"
+  import { getBindableProperties } from "builderStore/dataBinding"
+  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
 
   export let parameters
 
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === parameters.datasourceId
   )
-  // TODO: binding needs to be centralised
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries,
-  }).map(property => ({
+  $: bindableProperties = getBindableProperties(
+    $currentAsset.props,
+    $store.selectedComponentId
+  ).map(property => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
similarity index 86%
rename from packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index 6b8aa8bc43..a27acab956 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -1,5 +1,4 @@
 <script>
-  // accepts an array of field names, and outputs an object of { FieldName: value }
   import {
     DataList,
     Label,
@@ -8,13 +7,13 @@
     Select,
     Input,
   } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-  import { CloseCircleIcon, AddIcon } from "components/common/Icons"
+  import { store, currentAsset } from "builderStore"
   import {
+    getBindableProperties,
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/replaceBindings"
+  } from "builderStore/dataBinding"
+  import { CloseCircleIcon, AddIcon } from "components/common/Icons"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -25,6 +24,11 @@
 
   const emptyField = () => ({ name: "", value: "" })
 
+  $: bindableProperties = getBindableProperties(
+    $currentAsset.props,
+    $store.selectedComponentId
+  )
+
   // this statement initialises fields from parameters.fields
   $: fields =
     fields ||
@@ -39,14 +43,6 @@
         "",
     }))
 
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries,
-  })
-
   const addField = () => {
     const newFields = fields.filter(f => f.name)
     newFields.push(emptyField())
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
new file mode 100644
index 0000000000..9811ba1734
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
@@ -0,0 +1,78 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { store, currentAsset } from "builderStore"
+  import {
+    getDataProviderComponents,
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import SaveFields from "./SaveFields.svelte"
+
+  export let parameters
+
+  $: dataProviderComponents = getDataProviderComponents(
+    $currentAsset.props,
+    $store.selectedComponentId
+  )
+  $: providerComponent = dataProviderComponents.find(
+    provider => provider._id === parameters.providerId
+  )
+  $: schemaFields = getSchemaFields(providerComponent)
+
+  const getSchemaFields = component => {
+    const datasource = getDatasourceForProvider(component)
+    const { schema } = getSchemaForDatasource(datasource)
+    return Object.values(schema || {})
+  }
+
+  const onFieldsChanged = e => {
+    parameters.fields = e.detail
+  }
+</script>
+
+<div class="root">
+  {#if !dataProviderComponents.length}
+    <div class="cannot-use">
+      Save Row can only be used within a component that provides data, such as a
+      Repeater
+    </div>
+  {:else}
+    <Label size="m" color="dark">Datasource</Label>
+    <Select secondary bind:value={parameters.providerId}>
+      <option value="" />
+      {#each dataProviderComponents as provider}
+        <option value={provider._id}>{provider._instanceName}</option>
+      {/each}
+    </Select>
+
+    {#if parameters.providerId}
+      <SaveFields
+        parameterFields={parameters.fields}
+        {schemaFields}
+        on:fieldschanged={onFieldsChanged} />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(> div:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .cannot-use {
+    color: var(--red);
+    font-size: var(--font-size-s);
+    text-align: center;
+    width: 70%;
+    margin: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
similarity index 98%
rename from packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
index 18431daf0a..3f61bbcb7e 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
@@ -91,7 +91,6 @@
   {/if}
 
   <SaveFields
-    parameterFields={parameters.fields}
     schemaFields={automationStatus === AUTOMATION_STATUS.EXISTING && selectedAutomation && selectedAutomation.schema}
     fieldLabel="Field"
     on:fieldschanged={onFieldsChanged} />
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
similarity index 100%
rename from packages/builder/src/components/userInterface/EventsEditor/actions/index.js
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js
new file mode 100644
index 0000000000..8966c4ab26
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js
@@ -0,0 +1,2 @@
+import EventsEditor from "./EventPropertyControl.svelte"
+export default EventsEditor
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/FlatButton.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/FlatButtonGroup.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/index.js
new file mode 100644
index 0000000000..5221ae4ef4
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/index.js
@@ -0,0 +1,2 @@
+import FlatButtonGroup from "./FlatButtonGroup.svelte"
+export default FlatButtonGroup
diff --git a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
diff --git a/packages/builder/src/components/userInterface/IconSelect/icons.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/icons.js
similarity index 100%
rename from packages/builder/src/components/userInterface/IconSelect/icons.js
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/icons.js
diff --git a/packages/builder/src/components/userInterface/IconSelect/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js
similarity index 100%
rename from packages/builder/src/components/userInterface/IconSelect/index.js
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js
diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
diff --git a/packages/builder/src/components/userInterface/LayoutSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
similarity index 84%
rename from packages/builder/src/components/userInterface/LayoutSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
index 71bf7e1163..c85f86f409 100644
--- a/packages/builder/src/components/userInterface/LayoutSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { store, currentAsset } from "builderStore"
+  import { store } from "builderStore"
   import { Select } from "@budibase/bbui"
 
   export let value
diff --git a/packages/builder/src/components/userInterface/MultiOptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
similarity index 96%
rename from packages/builder/src/components/userInterface/MultiOptionSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
index d8ae2b2d59..d31e7a2b15 100644
--- a/packages/builder/src/components/userInterface/MultiOptionSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
@@ -3,7 +3,6 @@
 
   export let options = []
   export let value = []
-  export let styleBindingProperty
   export let onChange = () => {}
 
   let boundValue = getValidOptions(value, options)
diff --git a/packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
similarity index 98%
rename from packages/builder/src/components/userInterface/OptionSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
index 2496047c34..3ee839fbd0 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import Portal from "svelte-portal"
-  import { buildStyle } from "../../helpers.js"
+  import { buildStyle } from "../../../../helpers.js"
 
   export let options = []
   export let value = ""
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
similarity index 54%
rename from packages/builder/src/components/userInterface/PropertyControl.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 5ea4eaa996..be5563143b 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -1,83 +1,65 @@
 <script>
   import { Button, Icon, Drawer, Body } from "@budibase/bbui"
-  import Input from "./PropertyPanelControls/Input.svelte"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import { store, currentAsset } from "builderStore"
   import {
+    getBindableProperties,
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/replaceBindings"
-  import BindingPanel from "components/userInterface/BindingPanel.svelte"
+  } from "builderStore/dataBinding"
+  import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
 
   export let label = ""
   export let bindable = true
   export let componentInstance = {}
   export let control = null
   export let key = ""
-  export let value
+  export let type = ""
+  export let value = null
   export let props = {}
   export let onChange = () => {}
 
   let bindingDrawer
-
   let temporaryBindableValue = value
-  let bindableProperties = []
   let anchor
 
-  function handleClose() {
-    handleChange(key, temporaryBindableValue)
+  $: bindableProperties = getBindableProperties(
+    $currentAsset.props,
+    $store.selectedComponentId
+  )
+  $: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
+  $: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
+
+  const handleClose = () => {
+    handleChange(temporaryBindableValue)
     bindingDrawer.hide()
   }
 
-  function getBindableProperties() {
-    // Get all bindableProperties
-    bindableProperties = fetchBindableProperties({
-      componentInstanceId: $store.selectedComponentId,
-      components: $store.components,
-      screen: $currentAsset,
-      tables: $backendUiStore.tables,
-      queries: $backendUiStore.queries,
-    })
-  }
-
-  function replaceBindings(textWithBindings) {
-    getBindableProperties()
-    textWithBindings = readableToRuntimeBinding(
-      bindableProperties,
-      textWithBindings
-    )
-    onChange(key, textWithBindings)
-  }
-
-  function handleChange(key, v) {
-    let innerVal = v
-    if (typeof v === "object") {
-      if ("detail" in v) {
-        innerVal = v.detail
-      } else if ("target" in v) {
-        innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
+  // Handle a value change of any type
+  // String values have any bindings handled
+  const handleChange = value => {
+    let innerVal = value
+    if (value && typeof value === "object") {
+      if ("detail" in value) {
+        innerVal = value.detail
+      } else if ("target" in value) {
+        innerVal = value.target.value
       }
     }
     if (typeof innerVal === "string") {
-      replaceBindings(innerVal)
+      onChange(replaceBindings(innerVal))
     } else {
-      onChange(key, innerVal)
+      onChange(innerVal)
     }
   }
 
-  const safeValue = () => {
-    getBindableProperties()
-
-    let temp = runtimeToReadableBinding(bindableProperties, value)
-
-    return value == null && props.initialValue !== undefined
-      ? props.initialValue
-      : temp
+  // The "safe" value is the value with eny bindings made readable
+  // If there is no value set, any default value is used
+  const getSafeValue = (value, defaultValue, bindableProperties) => {
+    const enriched = runtimeToReadableBinding(bindableProperties, value)
+    return enriched == null && defaultValue !== undefined
+      ? defaultValue
+      : enriched
   }
-
-  // Incase the component has a different value key name
-  const handlevalueKey = value =>
-    props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
 
 <div class="property-control" bind:this={anchor}>
@@ -86,13 +68,13 @@
     <svelte:component
       this={control}
       {componentInstance}
-      {...handlevalueKey(value)}
-      on:change={val => handleChange(key, val)}
-      onChange={val => handleChange(key, val)}
+      value={safeValue}
+      on:change={handleChange}
+      onChange={handleChange}
       {...props}
       name={key} />
   </div>
-  {#if bindable && !key.startsWith('_') && control === Input}
+  {#if bindable && !key.startsWith('_') && type === 'text'}
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
@@ -101,7 +83,6 @@
     </div>
   {/if}
 </div>
-
 <Drawer bind:this={bindingDrawer} title="Bindings">
   <div slot="description">
     <Body extraSmall grey>
@@ -113,7 +94,7 @@
   </heading>
   <div slot="body">
     <BindingPanel
-      {...handlevalueKey(value)}
+      value={safeValue}
       close={handleClose}
       on:update={e => (temporaryBindableValue = e.detail)}
       {bindableProperties} />
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
similarity index 65%
rename from packages/builder/src/components/userInterface/PropertyGroup.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
index 69797c4a21..9d0bb4a40d 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { excludeProps } from "./propertyCategories.js"
   import PropertyControl from "./PropertyControl.svelte"
   import { DetailSummary } from "@budibase/bbui"
 
@@ -10,20 +9,17 @@
   export let onStyleChanged = () => {}
   export let open = false
 
+  $: style = componentInstance["_styles"][styleCategory] || {}
+  $: changed = properties.some(prop => hasPropChanged(style, prop))
+
   const hasPropChanged = (style, prop) => {
-    // TODO: replace color picker with one that works better.
-    // Currently it cannot support null values, so this is a hack which
-    // prevents the color fields from always being marked as changed
-    if (!["color", "background", "border-color"].includes(prop.key)) {
-      if (prop.initialValue !== undefined) {
-        return style[prop.key] !== prop.initialValue
-      }
-    }
     return style[prop.key] != null && style[prop.key] !== ""
   }
 
-  $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(prop => hasPropChanged(style, prop))
+  const getControlProps = props => {
+    const { label, key, control, ...otherProps } = props || {}
+    return otherProps || {}
+  }
 </script>
 
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
@@ -31,12 +27,13 @@
     <div>
       {#each properties as prop}
         <PropertyControl
+          bindable={false}
           label={`${prop.label}${hasPropChanged(style, prop) ? ' *' : ''}`}
           control={prop.control}
           key={prop.key}
           value={style[prop.key]}
-          onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-          props={{ ...excludeProps(prop, ['control', 'label']) }} />
+          onChange={value => onStyleChanged(styleCategory, prop.key, value)}
+          props={getControlProps(prop)} />
       {/each}
     </div>
   {/if}
diff --git a/packages/builder/src/components/userInterface/RoleSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/RoleSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/RoleSelect.svelte
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ScreenSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ScreenSelect.svelte
new file mode 100644
index 0000000000..993e49faa6
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ScreenSelect.svelte
@@ -0,0 +1,80 @@
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store, allScreens, currentAsset } from "builderStore"
+  import { getBindableProperties } from "builderStore/dataBinding"
+
+  export let value = ""
+
+  $: urls = getUrls($allScreens, $currentAsset, $store.selectedComponentId)
+
+  // Update value on blur
+  const dispatch = createEventDispatcher()
+  const handleBlur = () => dispatch("change", value)
+
+  // Get all valid screen URL, as well as detail screens which can be used in
+  // the current data context
+  const getUrls = (screens, asset, componentId) => {
+    // Get all screens which aren't detail screens
+    let urls = screens
+      .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+      .map(screen => ({
+        name: screen.props._instanceName,
+        url: screen.routing.route,
+        sort: screen.props._component,
+      }))
+
+    // Add detail screens enriched with the current data context
+    const bindableProperties = getBindableProperties(asset.props, componentId)
+    screens
+      .filter(screen => screen.props._component.endsWith("/rowdetail"))
+      .forEach(detailScreen => {
+        // Find any _id bindings that match the detail screen's table
+        const binding = bindableProperties.find(p => {
+          return (
+            p.type === "context" &&
+            p.runtimeBinding.endsWith("._id") &&
+            p.tableId === detailScreen.props.table
+          )
+        })
+        if (binding) {
+          urls.push({
+            name: detailScreen.props._instanceName,
+            url: detailScreen.routing.route.replace(
+              ":id",
+              `{{ ${binding.runtimeBinding} }}`
+            ),
+            sort: detailScreen.props._component,
+          })
+        }
+      })
+
+    return urls
+  }
+</script>
+
+<div>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/TableSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableSelect.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/TableSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableSelect.svelte
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewFieldSelect.svelte
new file mode 100644
index 0000000000..32935d8d0a
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewFieldSelect.svelte
@@ -0,0 +1,23 @@
+<script>
+  import OptionSelect from "./OptionSelect.svelte"
+  import MultiOptionSelect from "./MultiOptionSelect.svelte"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let onChange = () => {}
+  export let multiselect = false
+
+  $: datasource = getDatasourceForProvider(componentInstance)
+  $: schema = getSchemaForDatasource(datasource).schema
+  $: options = Object.keys(schema || {})
+</script>
+
+{#if multiselect}
+  <MultiOptionSelect {value} {onChange} {options} />
+{:else}
+  <OptionSelect {value} {onChange} {options} />
+{/if}
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
similarity index 89%
rename from packages/builder/src/components/userInterface/TableViewSelect.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
index 02ab2be12e..4e5201a180 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableViewSelect.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { getBindableProperties } from "builderStore/dataBinding"
   import {
     Button,
     Icon,
@@ -12,7 +13,6 @@
   import { notifier } from "builderStore/store/notifications"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
-  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
   let anchorRight, dropdownRight
@@ -22,11 +22,9 @@
 
   $: tables = $backendUiStore.tables.map(m => ({
     label: m.name,
-    name: `all_${m._id}`,
     tableId: m._id,
     type: "table",
   }))
-
   $: views = $backendUiStore.tables.reduce((acc, cur) => {
     let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
       label: key,
@@ -36,41 +34,38 @@
     }))
     return [...acc, ...viewsArr]
   }, [])
-
   $: queries = $backendUiStore.queries.map(query => ({
     label: query.name,
     name: query.name,
+    tableId: query._id,
     ...query,
     schema: query.schema,
     parameters: query.parameters,
     type: "query",
   }))
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries,
-  })
-
+  $: bindableProperties = getBindableProperties(
+    $currentAsset.props,
+    $store.selectedComponentId
+  )
   $: queryBindableProperties = bindableProperties.map(property => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
     path: property.readableBinding,
   }))
-
   $: links = bindableProperties
     .filter(x => x.fieldSchema?.type === "link")
     .map(property => {
       return {
-        providerId: property.instance._id,
+        providerId: property.providerId,
         label: property.readableBinding,
         fieldName: property.fieldSchema.name,
-        name: `all_${property.fieldSchema.tableId}`,
         tableId: property.fieldSchema.tableId,
         type: "link",
+        // These properties will be enriched by the client library and provide
+        // details of the parent row of the relationship field, from context
+        rowId: `{{ ${property.providerId}._id }}`,
+        rowTableId: `{{ ${property.providerId}.tableId }}`,
       }
     })
 
@@ -83,9 +78,7 @@
     const source = $backendUiStore.datasources.find(
       ds => ds._id === query.datasourceId
     ).source
-    return $backendUiStore.integrations[source].query[query.queryVerb][
-      query.queryType
-    ]
+    return $backendUiStore.integrations[source].query[query.queryVerb]
   }
 </script>
 
@@ -93,12 +86,12 @@
   class="dropdownbutton"
   bind:this={anchorRight}
   on:click={dropdownRight.show}>
-  <span>{value.label ? value.label : 'Table / View / Query'}</span>
+  <span>{value?.label ? value.label : 'Choose option'}</span>
   <Icon name="arrowdown" />
 </div>
-{#if value.type === 'query'}
+{#if value?.type === 'query'}
   <i class="ri-settings-5-line" on:click={drawer.show} />
-  <Drawer title={'Query'}>
+  <Drawer title={'Query'} bind:this={drawer}>
     <div slot="buttons">
       <Button
         blue
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
new file mode 100644
index 0000000000..6d3c0d07d3
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -0,0 +1,140 @@
+<script>
+  import { get } from "lodash"
+  import { isEmpty } from "lodash/fp"
+
+  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
+  import Input from "./PropertyControls/Input.svelte"
+  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
+  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
+  import OptionSelect from "./PropertyControls/OptionSelect.svelte"
+  import MultiTableViewFieldSelect from "./PropertyControls/MultiTableViewFieldSelect.svelte"
+  import Checkbox from "./PropertyControls/Checkbox.svelte"
+  import TableSelect from "./PropertyControls/TableSelect.svelte"
+  import TableViewSelect from "./PropertyControls/TableViewSelect.svelte"
+  import TableViewFieldSelect from "./PropertyControls/TableViewFieldSelect.svelte"
+  import EventsEditor from "./PropertyControls/EventsEditor"
+  import ScreenSelect from "./PropertyControls/ScreenSelect.svelte"
+  import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte"
+  import { IconSelect } from "./PropertyControls/IconSelect"
+  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
+
+  export let componentDefinition = {}
+  export let componentInstance = {}
+  export let assetInstance
+  export let onChange = () => {}
+  export let onScreenPropChange = () => {}
+  export let showDisplayName = false
+
+  const layoutDefinition = []
+  const screenDefinition = [
+    { key: "description", label: "Description", control: Input },
+    { key: "routing.route", label: "Route", control: Input },
+    { key: "routing.roleId", label: "Access", control: RoleSelect },
+    { key: "layoutId", label: "Layout", control: LayoutSelect },
+  ]
+  const assetProps = [
+    "title",
+    "description",
+    "routing.route",
+    "layoutId",
+    "routing.roleId",
+  ]
+
+  $: settings = componentDefinition?.settings ?? []
+  $: isLayout = assetInstance && assetInstance.favicon
+  $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
+
+  const controlMap = {
+    text: Input,
+    select: OptionSelect,
+    datasource: TableViewSelect,
+    screen: ScreenSelect,
+    detailScreen: DetailScreenSelect,
+    boolean: Checkbox,
+    number: Input,
+    event: EventsEditor,
+    table: TableSelect,
+    color: ColorPicker,
+    icon: IconSelect,
+    field: TableViewFieldSelect,
+    multifield: MultiTableViewFieldSelect,
+  }
+
+  const getControl = type => {
+    return controlMap[type]
+  }
+
+  const canRenderControl = setting => {
+    const control = getControl(setting?.type)
+    if (!control) {
+      return false
+    }
+    if (setting.dependsOn && isEmpty(componentInstance[setting.dependsOn])) {
+      return false
+    }
+    return true
+  }
+
+  const onInstanceNameChange = name => {
+    onChange("_instanceName", name)
+  }
+</script>
+
+<div class="settings-view-container">
+  {#if assetInstance}
+    {#each assetDefinition as def (`${componentInstance._id}-${def.key}`)}
+      <PropertyControl
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={get(assetInstance, def.key)}
+        onChange={val => onScreenPropChange(def.key, val)} />
+    {/each}
+  {/if}
+
+  {#if showDisplayName}
+    <PropertyControl
+      bindable={false}
+      control={Input}
+      label="Name"
+      key="_instanceName"
+      value={componentInstance._instanceName}
+      onChange={onInstanceNameChange} />
+  {/if}
+
+  {#if settings && settings.length > 0}
+    {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
+      {#if canRenderControl(setting)}
+        <PropertyControl
+          type={setting.type}
+          control={getControl(setting.type)}
+          label={setting.label}
+          key={setting.key}
+          value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue}
+          {componentInstance}
+          onChange={val => onChange(setting.key, val)}
+          props={{ options: setting.options }} />
+      {/if}
+    {/each}
+  {:else}
+    <div class="empty">
+      This component doesn't have any additional settings.
+    </div>
+  {/if}
+</div>
+
+<style>
+  .settings-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: var(--spacing-s);
+  }
+  .empty {
+    font-size: var(--font-size-xs);
+    margin-top: var(--spacing-m);
+    color: var(--grey-5);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
similarity index 96%
rename from packages/builder/src/components/userInterface/propertyCategories.js
rename to packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index ebaab9bf39..f3cdaad094 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -1,7 +1,7 @@
-import Input from "./PropertyPanelControls/Input.svelte"
-import OptionSelect from "./OptionSelect.svelte"
-import FlatButtonGroup from "./FlatButtonGroup.svelte"
-import Colorpicker from "@budibase/colorpicker"
+import Input from "./PropertyControls/Input.svelte"
+import OptionSelect from "./PropertyControls/OptionSelect.svelte"
+import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
+import Colorpicker from "./PropertyControls/ColorPicker.svelte"
 
 export const layout = [
   {
@@ -299,42 +299,36 @@ export const size = [
     key: "width",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Height",
     key: "height",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Min Width",
     key: "min-width",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Max Width",
     key: "max-width",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Min Height",
     key: "min-height",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Max Height",
     key: "max-height",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
 ]
 
@@ -357,28 +351,24 @@ export const position = [
     key: "top",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Right",
     key: "right",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Bottom",
     key: "bottom",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Left",
     key: "left",
     control: Input,
     placeholder: "px",
-    textAlign: "center",
   },
   {
     label: "Z-index",
@@ -458,7 +448,6 @@ export const typography = [
       { label: "60px", value: "60px" },
       { label: "72px", value: "72px" },
     ],
-    textAlign: "center",
   },
   {
     label: "Line H",
@@ -478,7 +467,6 @@ export const typography = [
     label: "Color",
     key: "color",
     control: Colorpicker,
-    initialValue: "#000",
   },
   {
     label: "align",
@@ -522,7 +510,6 @@ export const background = [
     label: "Color",
     key: "background",
     control: Colorpicker,
-    initialValue: "#000",
   },
   {
     label: "Gradient",
@@ -645,7 +632,6 @@ export const border = [
     label: "Color",
     key: "border-color",
     control: Colorpicker,
-    initialValue: "#000",
   },
   {
     label: "Style",
@@ -672,7 +658,6 @@ export const effects = [
     label: "Opacity",
     key: "opacity",
     control: OptionSelect,
-    textAlign: "center",
     options: [
       { label: "Choose option", value: "" },
       { label: "0", value: "0" },
@@ -758,7 +743,6 @@ export const transitions = [
     label: "Duration",
     key: "transition-duration",
     control: OptionSelect,
-    textAlign: "center",
     placeholder: "sec",
     options: [
       { label: "Choose option", value: "" },
@@ -785,7 +769,7 @@ export const transitions = [
   },
 ]
 
-export const all = {
+export const allStyles = {
   layout,
   margin,
   padding,
@@ -797,13 +781,3 @@ export const all = {
   effects,
   transitions,
 }
-
-export function excludeProps(props, propsToExclude) {
-  const modifiedProps = {}
-  for (const prop in props) {
-    if (!propsToExclude.includes(prop)) {
-      modifiedProps[prop] = props[prop]
-    }
-  }
-  return modifiedProps
-}
diff --git a/packages/builder/src/components/userInterface/Feedback/FeedbackIframe.svelte b/packages/builder/src/components/feedback/FeedbackIframe.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/Feedback/FeedbackIframe.svelte
rename to packages/builder/src/components/feedback/FeedbackIframe.svelte
diff --git a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte b/packages/builder/src/components/feedback/FeedbackNavLink.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
rename to packages/builder/src/components/feedback/FeedbackNavLink.svelte
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 22cddb5606..2b5965613e 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -155,8 +155,9 @@
   }
 
   :global(.CodeMirror) {
-    height: auto !important;
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
+    height: 500px !important;
+    border-radius: var(--border-radius-s);
+    font-family: monospace !important;
+    line-height: 1.3;
   }
 </style>
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 83a03c72d1..d5f4b3bd8b 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -24,18 +24,18 @@
 </script>
 
 <form on:submit|preventDefault>
+<div class="field">
   {#each schemaKeys as field}
-    <Label extraSmall grey>{field}</Label>
-    <div class="field">
       <Input
+        placeholder="Enter {field} name"
+        outline
         disabled={!editable}
         type={schema.fields[field]?.type}
         required={schema.fields[field]?.required}
         bind:value={fields[field]} />
-    </div>
   {/each}
+</div>
 </form>
-<Label extraSmall grey>Data</Label>
 {#if schema.customisable}
   <Editor
     label="Query"
@@ -49,7 +49,7 @@
   .field {
     margin-bottom: var(--spacing-m);
     display: grid;
-    grid-template-columns: 1fr 2%;
+    grid-template-columns: 1fr 1fr;
     grid-gap: var(--spacing-m);
     align-items: center;
   }
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 1be4a9d1ce..d7eaa3bec1 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
-  import BindableInput from "components/userInterface/BindableInput.svelte"
+  import { Button, Input, Heading, Spacer } from "@budibase/bbui"
+  import BindableInput from "components/common/BindableInput.svelte"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/replaceBindings"
+  } from "builderStore/dataBinding"
 
   export let bindable = true
   export let parameters = []
@@ -31,23 +31,26 @@
 
 <section>
   <Heading extraSmall black>Parameters</Heading>
+  <Spacer large />
   <div class="parameters" class:bindable>
-    <Label extraSmall grey>Parameter Name</Label>
-    <Label extraSmall grey>Default</Label>
-    {#if bindable}
-      <Label extraSmall grey>Value</Label>
-    {:else}
-      <div />
-    {/if}
     {#each parameters as parameter, idx}
-      <Input thin disabled={bindable} bind:value={parameter.name} />
-      <Input thin disabled={bindable} bind:value={parameter.default} />
+      <Input
+        placeholder="Parameter Name"
+        thin
+        disabled={bindable}
+        bind:value={parameter.name} />
+      <Input
+        placeholder="Default"
+        thin
+        disabled={bindable}
+        bind:value={parameter.default} />
       {#if bindable}
         <BindableInput
+          placeholder="Value"
           type="string"
           thin
           on:change={evt => onBindingChange(parameter.name, evt.detail)}
-          value={runtimeToReadableBinding(bindings, customParams[parameter.name])}
+          value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}
           {bindings} />
       {:else}
         <i
@@ -57,9 +60,7 @@
     {/each}
   </div>
   {#if !bindable}
-    <Button thin secondary small on:click={newQueryParameter}>
-      Add Parameter
-    </Button>
+    <Button secondary on:click={newQueryParameter}>Add Parameter</Button>
   {/if}
 </section>
 
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 5ac3e550c1..da5f4e1a40 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -16,6 +16,7 @@
   import { FIELDS } from "constants/backend"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
+  import EditQueryParamsPopover from "components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte"
   import { backendUiStore } from "builderStore"
 
   const PREVIEW_HEADINGS = [
@@ -40,6 +41,7 @@
   let tab = "JSON"
   let parameters
   let data = []
+  let popover
 
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === query.datasourceId
@@ -61,7 +63,7 @@
   $: config = $backendUiStore.integrations[datasourceType]?.query
   $: docsLink = $backendUiStore.integrations[datasourceType]?.docs
 
-  $: shouldShowQueryConfig = config && query.queryVerb && query.queryType
+  $: shouldShowQueryConfig = config && query.queryVerb
 
   function newField() {
     fields = [...fields, {}]
@@ -129,62 +131,44 @@
 </script>
 
 <header>
-  <Heading small>{query.name}</Heading>
+  <div class="input">
+    <Input placeholder="✎ Edit Query Name" bind:value={query.name} />
+  </div>
   {#if config}
-    <div class="queryVerbs">
-      {#each Object.keys(config) as queryVerb}
-        <div
-          class="queryVerb"
-          class:selected={queryVerb === query.queryVerb}
-          on:click={() => {
-            query.queryVerb = queryVerb
-          }}>
-          {queryVerb}
-        </div>
-      {/each}
-    </div>
-    {#if query.queryVerb}
-      <Select thin secondary bind:value={query.queryType}>
-        <option value={''}>Select an option</option>
-        {#each Object.keys(config[query.queryVerb]) as queryType}
-          <option value={queryType}>{queryType}</option>
+  <div class="props">
+    <div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
+    <div class="select">
+      <Select primary thin bind:value={query.queryVerb}>
+        {#each Object.keys(config) as queryVerb}
+          <option value={queryVerb}>{queryVerb}</option>
         {/each}
       </Select>
-    {/if}
-    <Spacer medium />
-    <Button primary href={docsLink} target="_blank">
-      <i class="ri-book-2-line" />
-    </Button>
+  </div>
+    </div>
+    <EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
   {/if}
 </header>
-
-<Spacer large />
+<Spacer extraLarge />
 
 {#if shouldShowQueryConfig}
   <section>
     <div class="config">
-      <Label extraSmall grey>Query Name</Label>
-      <Input thin bind:value={query.name} />
-
-      <Spacer medium />
-
       <IntegrationQueryEditor
         {query}
-        schema={config[query.queryVerb][query.queryType]}
+        schema={config[query.queryVerb]}
         bind:parameters />
 
-      <Spacer medium />
+      <Spacer extraLarge />
+      <Spacer large />
 
       <div class="viewer-controls">
         <Button
-          wide
-          thin
           blue
           disabled={data.length === 0}
           on:click={saveQuery}>
-          Save
+          Save Query
         </Button>
-        <Button wide thin primary on:click={previewQuery}>Run</Button>
+        <Button primary on:click={previewQuery}>Run Query</Button>
       </div>
 
       <section class="viewer">
@@ -196,10 +180,11 @@
               <ExternalDataSourceTable {query} {data} />
             {:else if tab === 'SCHEMA'}
               {#each fields as field, idx}
+                <Spacer small />
                 <div class="field">
-                  <Input thin type={'text'} bind:value={field.name} />
-                  <Select secondary thin bind:value={field.type}>
-                    <option value={''}>Select an option</option>
+                  <Input outline placeholder="Field Name" type={'text'} bind:value={field.name} />
+                  <Select thin border bind:value={field.type}>
+                    <option value={''}>Select a field type</option>
                     <option value={'STRING'}>Text</option>
                     <option value={'NUMBER'}>Number</option>
                     <option value={'BOOLEAN'}>Boolean</option>
@@ -210,7 +195,8 @@
                     on:click={() => deleteField(idx)} />
                 </div>
               {/each}
-              <Button thin secondary on:click={newField}>Add Field</Button>
+                <Spacer small />
+                <Button thin secondary on:click={newField}>Add Field</Button>
             {/if}
           </Switcher>
         {/if}
@@ -220,11 +206,28 @@
 {/if}
 
 <style>
+
+  .input {
+    width: 300px;
+  }
+
+  .select {
+    width: 200px;
+    margin-right: 40px;
+  }
+
+  .props {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+    align-items: center;
+    gap: var(--layout-l);
+  }
+
   .field {
     display: grid;
-    grid-gap: 10px;
     grid-template-columns: 1fr 1fr 50px;
-    margin-bottom: var(--spacing-m);
+    gap: var(--spacing-l);
   }
 
   a {
@@ -240,6 +243,16 @@
     cursor: pointer;
   }
 
+  .query-type {
+    font-family: var(--font-sans);
+    color: var(--grey-8);
+    font-size: var(--font-size-s);
+  }
+
+  .query-type-span {
+    text-transform: uppercase;
+  }
+
   .preview {
     width: 800px;
     height: 100%;
@@ -253,32 +266,18 @@
     align-items: center;
   }
 
-  .queryVerbs {
-    display: flex;
-    flex: 1;
-    font-size: var(--font-size-m);
-    align-items: center;
-    margin-left: var(--spacing-l);
-  }
-
-  .queryVerb {
-    text-transform: capitalize;
-    margin-right: var(--spacing-m);
-    color: var(--grey-5);
-    cursor: pointer;
-  }
-
-  .selected {
-    color: var(--white);
-    font-weight: 500;
-  }
-
   .viewer-controls {
-    display: grid;
-    grid-gap: var(--spacing-m);
-    grid-auto-flow: column;
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
     direction: rtl;
-    grid-template-columns: 10% 10% 1fr;
-    margin-bottom: var(--spacing-m);
+    z-index: 5;
+    gap: var(--spacing-m);
+    min-width: 150px;
+  }
+
+  .viewer {
+    margin-top: -28px;
+    z-index: -2;
   }
 </style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 1f0aa30c49..a4f59459c0 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -20,13 +20,6 @@
   }
 </script>
 
-{#if editable}
-  <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-  <Spacer large />
-{/if}
-
-<Heading extraSmall black>Query</Heading>
-<Spacer medium />
 
 {#if schema}
   {#key query._id}
@@ -38,7 +31,6 @@
         readOnly={!editable}
         value={query.fields.sql} />
     {:else if schema.type === QueryTypes.JSON}
-      <Spacer large />
       <Editor
         label="Query"
         mode="json"
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
deleted file mode 100644
index fa2186a909..0000000000
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-  import SaveFields from "./SaveFields.svelte"
-
-  export let parameters
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries,
-  })
-
-  const tableFields = tableId => {
-    const table = $backendUiStore.tables.find(m => m._id === tableId)
-
-    return Object.keys(table.schema).map(k => ({
-      name: k,
-      type: table.schema[k].type,
-    }))
-  }
-
-  $: schemaFields =
-    parameters && parameters.tableId ? tableFields(parameters.tableId) : []
-
-  const onFieldsChanged = e => {
-    parameters.fields = e.detail
-  }
-</script>
-
-<div class="root">
-  <Label size="m" color="dark">Table</Label>
-  <Select secondary bind:value={parameters.tableId}>
-    <option value="" />
-    {#each $backendUiStore.tables as table}
-      <option value={table._id}>{table.name}</option>
-    {/each}
-  </Select>
-
-  {#if parameters.tableId}
-    <SaveFields
-      parameterFields={parameters.fields}
-      {schemaFields}
-      on:fieldschanged={onFieldsChanged} />
-  {/if}
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-s);
-    row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
-  }
-
-  .root :global(> div:nth-child(2)) {
-    grid-column-start: 2;
-    grid-column-end: 6;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
deleted file mode 100644
index 287f93f835..0000000000
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-
-  export let parameters
-
-  let idFields
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries,
-  })
-
-  $: idFields = bindableProperties.filter(
-    bindable =>
-      bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
-  )
-
-  $: {
-    if (parameters.rowId) {
-      // Set rev ID
-      parameters.revId = parameters.rowId.replace("_id", "_rev")
-
-      // Set table ID
-      const idBinding = bindableProperties.find(
-        prop =>
-          prop.runtimeBinding ===
-          parameters.rowId
-            .replace("{{", "")
-            .replace("}}", "")
-            .trim()
-      )
-      if (idBinding) {
-        const { instance } = idBinding
-        const component = $store.components[instance._component]
-        const tableInfo = instance[component.context]
-        if (tableInfo) {
-          parameters.tableId =
-            typeof tableInfo === "string" ? tableInfo : tableInfo.tableId
-        }
-      }
-    }
-  }
-</script>
-
-<div class="root">
-  {#if idFields.length === 0}
-    <div class="cannot-use">
-      Delete row can only be used within a component that provides data, such as
-      a List
-    </div>
-  {:else}
-    <Label size="m" color="dark">Datasource</Label>
-    <Select secondary bind:value={parameters.rowId}>
-      <option value="" />
-      {#each idFields as idField}
-        <option value={`{{ ${idField.runtimeBinding} }}`}>
-          {idField.instance._instanceName}
-        </option>
-      {/each}
-    </Select>
-  {/if}
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-s);
-    row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
-  }
-
-  .root :global(> div:nth-child(2)) {
-    grid-column-start: 2;
-    grid-column-end: 6;
-  }
-
-  .cannot-use {
-    color: var(--red);
-    font-size: var(--font-size-s);
-    text-align: center;
-    width: 70%;
-    margin: auto;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte
deleted file mode 100644
index 5347dc47f5..0000000000
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-  import SaveFields from "./SaveFields.svelte"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "builderStore/replaceBindings"
-
-  // parameters.contextPath used in the client handler to determine which row to save
-  // this could be "data" or "data.parent", "data.parent.parent" etc
-  export let parameters
-
-  let idFields
-  let schemaFields
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries,
-  })
-
-  $: {
-    if (parameters && parameters.contextPath) {
-      schemaFields = schemaFromContextPath(parameters.contextPath)
-    } else {
-      schemaFields = []
-    }
-  }
-
-  const idBindingToContextPath = id => id.substring(0, id.length - 4)
-  const contextPathToId = path => `${path}._id`
-
-  $: {
-    idFields = bindableProperties.filter(
-      bindable =>
-        bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
-    )
-    // ensure contextPath is always defaulted - there is usually only one option
-    if (idFields.length > 0 && !parameters.contextPath) {
-      parameters.contextPath = idBindingToContextPath(
-        idFields[0].runtimeBinding
-      )
-      parameters = parameters
-    }
-  }
-
-  // just wraps binding in {{ ... }}
-  const toBindingExpression = bindingPath => `{{ ${bindingPath} }}`
-
-  // finds the selected idBinding, then reads the table/view
-  // from the component instance that it belongs to.
-  // then returns the field names for that schema
-  const schemaFromContextPath = contextPath => {
-    if (!contextPath) return []
-
-    const idBinding = bindableProperties.find(
-      prop => prop.runtimeBinding === contextPathToId(contextPath)
-    )
-    if (!idBinding) return []
-
-    const { instance } = idBinding
-
-    const component = $store.components[instance._component]
-
-    // component.context is the name of the prop that holds the tableId
-    const tableInfo = instance[component.context]
-    const tableId =
-      typeof tableInfo === "string" ? tableInfo : tableInfo.tableId
-
-    if (!tableInfo) return []
-
-    const table = $backendUiStore.tables.find(m => m._id === tableId)
-    parameters.tableId = tableId
-    return Object.keys(table.schema).map(k => ({
-      name: k,
-      type: table.schema[k].type,
-    }))
-  }
-
-  const onFieldsChanged = e => {
-    parameters.fields = e.detail
-  }
-</script>
-
-<div class="root">
-  {#if idFields.length === 0}
-    <div class="cannot-use">
-      Update row can only be used within a component that provides data, such as
-      a List
-    </div>
-  {:else}
-    <Label size="m" color="dark">Datasource</Label>
-    <Select secondary bind:value={parameters.contextPath}>
-      <option value="" />
-      {#each idFields as idField}
-        <option value={idBindingToContextPath(idField.runtimeBinding)}>
-          {idField.instance._instanceName}
-        </option>
-      {/each}
-    </Select>
-  {/if}
-
-  {#if parameters.contextPath}
-    <SaveFields
-      parameterFields={parameters.fields}
-      {schemaFields}
-      on:fieldschanged={onFieldsChanged} />
-  {/if}
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-s);
-    row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
-  }
-
-  .root :global(> div:nth-child(2)) {
-    grid-column-start: 2;
-    grid-column-end: 6;
-  }
-
-  .cannot-use {
-    color: var(--red);
-    font-size: var(--font-size-s);
-    text-align: center;
-    width: 70%;
-    margin: auto;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte
deleted file mode 100644
index 4630adfb2a..0000000000
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte
+++ /dev/null
@@ -1,134 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-  import SaveFields from "./SaveFields.svelte"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "builderStore/replaceBindings"
-
-  export let parameters
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries,
-  })
-
-  let idFields
-  let rowId
-  $: {
-    idFields = bindableProperties.filter(
-      bindable =>
-        bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
-    )
-    // ensure rowId is always defaulted - there is usually only one option
-    if (idFields.length > 0 && !parameters._id) {
-      rowId = idFields[0].runtimeBinding
-      parameters = parameters
-    } else if (!rowId && parameters._id) {
-      rowId = parameters._id
-        .replace("{{", "")
-        .replace("}}", "")
-        .trim()
-    }
-  }
-
-  $: parameters._id = `{{ ${rowId} }}`
-
-  // just wraps binding in {{ ... }}
-  const toBindingExpression = bindingPath => `{{ ${bindingPath} }}`
-
-  // finds the selected idBinding, then reads the table/view
-  // from the component instance that it belongs to.
-  // then returns the field names for that schema
-  const schemaFromIdBinding = rowId => {
-    if (!rowId) return []
-
-    const idBinding = bindableProperties.find(
-      prop => prop.runtimeBinding === rowId
-    )
-    if (!idBinding) return []
-
-    const { instance } = idBinding
-
-    const component = $store.components[instance._component]
-
-    // component.context is the name of the prop that holds the tableId
-    const tableInfo = instance[component.context]
-
-    if (!tableInfo) return []
-
-    const table = $backendUiStore.tables.find(m => m._id === tableInfo.tableId)
-    parameters.tableId = tableInfo.tableId
-    return Object.keys(table.schema).map(k => ({
-      name: k,
-      type: table.schema[k].type,
-    }))
-  }
-
-  let schemaFields
-  $: {
-    if (parameters && rowId) {
-      schemaFields = schemaFromIdBinding(rowId)
-    } else {
-      schemaFields = []
-    }
-  }
-
-  const onFieldsChanged = e => {
-    parameters.fields = e.detail
-  }
-</script>
-
-<div class="root">
-  {#if idFields.length === 0}
-    <div class="cannot-use">
-      Update row can only be used within a component that provides data, such as
-      a List
-    </div>
-  {:else}
-    <Label size="m" color="dark">Row Id</Label>
-    <Select secondary bind:value={rowId}>
-      <option value="" />
-      {#each idFields as idField}
-        <option value={idField.runtimeBinding}>
-          {idField.readableBinding}
-        </option>
-      {/each}
-    </Select>
-  {/if}
-
-  {#if rowId}
-    <SaveFields
-      parameterFields={parameters.fields}
-      {schemaFields}
-      on:fieldschanged={onFieldsChanged} />
-  {/if}
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-s);
-    row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr auto;
-    align-items: baseline;
-  }
-
-  .root :global(> div:nth-child(2)) {
-    grid-column-start: 2;
-    grid-column-end: 6;
-  }
-
-  .cannot-use {
-    color: var(--red);
-    font-size: var(--font-size-s);
-    text-align: center;
-    width: 70%;
-    margin: auto;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
deleted file mode 100644
index 619b6a11d3..0000000000
--- a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script>
-  export let meta = []
-  export let size = ""
-  export let values = []
-  export let propertyName
-  export let onStyleChanged = () => {}
-
-  let selectedLayoutValues = values.map(v => v)
-
-  $: onStyleChanged(selectedLayoutValues)
-
-  const PROPERTY_OPTIONS = {
-    Direction: {
-      vertical: ["column", "ri-arrow-up-down-line"],
-      horizontal: ["row", "ri-arrow-left-right-line"],
-    },
-    Align: {
-      left: ["flex-start", "ri-layout-bottom-line"],
-      center: ["center", "ri-layout-row-line"],
-      right: ["flex-end", "ri-layout-top-line"],
-      space: ["space-between", "ri-space"],
-    },
-    Justify: {
-      left: ["flex-start", "ri-layout-left-line"],
-      center: ["center", "ri-layout-column-line"],
-      right: ["flex-end", "ri-layout-right-line"],
-      space: ["space-between", "ri-space"],
-    },
-  }
-
-  $: propertyChoices = Object.entries(PROPERTY_OPTIONS[propertyName])
-</script>
-
-<div class="inputs {size}">
-  {#each meta as { placeholder }, i}
-    {#each propertyChoices as [displayName, [cssPropValue, icon]]}
-      <button
-        class:selected={cssPropValue === selectedLayoutValues[i]}
-        on:click={() => {
-          const newPropertyValue = cssPropValue === selectedLayoutValues[i] ? '' : cssPropValue
-          selectedLayoutValues[i] = newPropertyValue
-        }}>
-        <i class={icon} />
-      </button>
-    {/each}
-  {/each}
-</div>
-
-<style>
-  .selected {
-    color: var(--blue);
-    background: var(--grey-1);
-    opacity: 1;
-  }
-
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 3px;
-
-    min-width: 1.6rem;
-    min-height: 1.6rem;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: var(--ink);
-  }
-
-  .inputs {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
deleted file mode 100644
index a1f9f76f20..0000000000
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-  import { DataList } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { store, allScreens, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-
-  $: urls = getUrls()
-
-  const handleBlur = () => dispatch("change", value)
-
-  // this will get urls of all screens, but only
-  // choose detail screens that are usable in the current context
-  // and substitute the :id param for the actual {{ ._id }} binding
-  const getUrls = () => {
-    const urls = [
-      ...$allScreens
-        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
-        .map(screen => ({
-          name: screen.props._instanceName,
-          url: screen.routing.route,
-          sort: screen.props._component,
-        })),
-    ]
-
-    const bindableProperties = fetchBindableProperties({
-      componentInstanceId: $store.selectedComponentId,
-      components: $store.components,
-      screen: $currentAsset,
-      tables: $backendUiStore.tables,
-      queries: $backendUiStore.queries,
-    })
-
-    const detailScreens = $allScreens.filter(screen =>
-      screen.props._component.endsWith("/rowdetail")
-    )
-
-    for (let detailScreen of detailScreens) {
-      const idBinding = bindableProperties.find(p => {
-        if (
-          p.type === "context" &&
-          p.runtimeBinding.endsWith("._id") &&
-          p.table
-        ) {
-          const tableId =
-            typeof p.table === "string" ? p.table : p.table.tableId
-          return tableId === detailScreen.props.table
-        }
-        return false
-      })
-
-      if (idBinding) {
-        urls.push({
-          name: detailScreen.props._instanceName,
-          url: detailScreen.routing.route.replace(
-            ":id",
-            `{{ ${idBinding.runtimeBinding} }}`
-          ),
-          sort: detailScreen.props._component,
-        })
-      }
-    }
-
-    return urls
-  }
-</script>
-
-<div>
-  <DataList
-    editable
-    secondary
-    extraThin
-    on:blur={handleBlur}
-    on:change
-    bind:value>
-    <option value="" />
-    {#each urls as url}
-      <option value={url.url}>{url.name}</option>
-    {/each}
-  </DataList>
-</div>
-
-<style>
-  div {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-  }
-  div :global(> div) {
-    flex: 1 1 auto;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
deleted file mode 100644
index 211e04d009..0000000000
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ /dev/null
@@ -1,163 +0,0 @@
-<script>
-  import { get } from "lodash"
-  import { isEmpty } from "lodash/fp"
-  import { FrontendTypes } from "constants"
-  import PropertyControl from "./PropertyControl.svelte"
-  import LayoutSelect from "./LayoutSelect.svelte"
-  import RoleSelect from "./RoleSelect.svelte"
-  import Input from "./PropertyPanelControls/Input.svelte"
-  import { excludeProps } from "./propertyCategories.js"
-  import { store, allScreens, currentAsset } from "builderStore"
-  import { walkProps } from "builderStore/storeUtils"
-
-  export let panelDefinition = []
-  export let componentDefinition = {}
-  export let componentInstance = {}
-  export let onChange = () => {}
-  export let onScreenPropChange = () => {}
-  export let displayNameField = false
-  export let assetInstance
-
-  let assetProps = [
-    "title",
-    "description",
-    "routing.route",
-    "layoutId",
-    "routing.roleId",
-  ]
-  let duplicateName = false
-
-  const propExistsOnComponentDef = prop =>
-    assetProps.includes(prop) || prop in componentDefinition.props
-
-  function handleChange(key, data) {
-    data.target ? onChange(key, data.target.value) : onChange(key, data)
-  }
-
-  const screenDefinition = [
-    { key: "description", label: "Description", control: Input },
-    { key: "routing.route", label: "Route", control: Input },
-    { key: "routing.roleId", label: "Access", control: RoleSelect },
-    { key: "layoutId", label: "Layout", control: LayoutSelect },
-  ]
-
-  const layoutDefinition = []
-
-  const canRenderControl = (key, dependsOn) => {
-    let test = !isEmpty(componentInstance[dependsOn])
-
-    return (
-      propExistsOnComponentDef(key) &&
-      (!dependsOn || !isEmpty(componentInstance[dependsOn]))
-    )
-  }
-
-  $: isLayout = assetInstance && assetInstance.favicon
-  $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
-
-  const isDuplicateName = name => {
-    let duplicate = false
-
-    const lookForDuplicate = rootProps => {
-      walkProps(rootProps, (inst, cancel) => {
-        if (inst._instanceName === name && inst._id !== componentInstance._id) {
-          duplicate = true
-          cancel()
-        }
-      })
-    }
-    // check against layouts
-    for (let layout of $store.layouts) {
-      lookForDuplicate(layout.props)
-    }
-    // if viewing screen, check current screen for duplicate
-    if ($store.currentFrontEndType === FrontendTypes.SCREEN) {
-      lookForDuplicate($currentAsset.props)
-    } else {
-      // need to dedupe against all screens
-      for (let screen of $allScreens) {
-        lookForDuplicate(screen.props)
-      }
-    }
-
-    return duplicate
-  }
-
-  const onInstanceNameChange = (_, name) => {
-    if (isDuplicateName(name)) {
-      duplicateName = true
-    } else {
-      duplicateName = false
-      onChange("_instanceName", name)
-    }
-  }
-</script>
-
-<div class="settings-view-container">
-  {#if assetInstance}
-    {#each assetDefinition as def}
-      <PropertyControl
-        bindable={false}
-        control={def.control}
-        label={def.label}
-        key={def.key}
-        value={get(assetInstance, def.key)}
-        onChange={onScreenPropChange}
-        props={{ ...excludeProps(def, ['control', 'label']) }} />
-    {/each}
-  {/if}
-
-  {#if displayNameField}
-    <PropertyControl
-      control={Input}
-      label="Name"
-      key="_instanceName"
-      value={componentInstance._instanceName}
-      onChange={onInstanceNameChange} />
-    {#if duplicateName}
-      <span class="duplicate-name">Name must be unique</span>
-    {/if}
-  {/if}
-
-  {#if !isLayout && panelDefinition && panelDefinition.length > 0}
-    {#each panelDefinition as definition}
-      {#if canRenderControl(definition.key, definition.dependsOn)}
-        <PropertyControl
-          control={definition.control}
-          label={definition.label}
-          key={definition.key}
-          value={componentInstance[definition.key] ?? componentInstance[definition.key]?.defaultValue}
-          {componentInstance}
-          {onChange}
-          props={{ ...excludeProps(definition, ['control', 'label']) }} />
-      {/if}
-    {/each}
-  {:else}
-    <div class="empty">
-      This component doesn't have any additional settings.
-    </div>
-  {/if}
-</div>
-
-<style>
-  .settings-view-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    gap: var(--spacing-s);
-  }
-
-  .empty {
-    font-size: var(--font-size-xs);
-    margin-top: var(--spacing-m);
-    color: var(--grey-5);
-  }
-
-  .duplicate-name {
-    color: var(--red);
-    font-size: var(--font-size-xs);
-    position: relative;
-    top: -10px;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte b/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
deleted file mode 100644
index 0b4b000488..0000000000
--- a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import OptionSelect from "./OptionSelect.svelte"
-  import { backendUiStore } from "builderStore"
-  import MultiOptionSelect from "./MultiOptionSelect.svelte"
-
-  export let componentInstance = {}
-  export let value = ""
-  export let onChange = () => {}
-  export let multiselect = false
-
-  const tables = $backendUiStore.tables
-  const queries = $backendUiStore.queries
-
-  let options = []
-
-  $: table =
-    componentInstance.datasource?.type === "table"
-      ? tables.find(m => m._id === componentInstance.datasource.tableId)
-      : queries.find(query => query._id === componentInstance.datasource._id)
-
-  $: type = componentInstance.datasource.type
-
-  $: if (table) {
-    options =
-      type === "table" || type === "link" || type === "query"
-        ? Object.keys(table.schema)
-        : Object.keys(table.views[componentInstance.datasource.name].schema)
-  }
-</script>
-
-{#if multiselect}
-  <MultiOptionSelect {value} {onChange} {options} />
-{:else}
-  <OptionSelect {value} {onChange} {options} />
-{/if}
diff --git a/packages/builder/src/components/userInterface/assetParsing/createProps.js b/packages/builder/src/components/userInterface/assetParsing/createProps.js
deleted file mode 100644
index 0bd2a4aa15..0000000000
--- a/packages/builder/src/components/userInterface/assetParsing/createProps.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { isString, isUndefined, cloneDeep } from "lodash/fp"
-import { TYPE_MAP } from "./types"
-import { assign } from "lodash"
-import { uuid } from "builderStore/uuid"
-
-export const getBuiltin = _component => {
-  const { props } = createProps({ _component })
-
-  return {
-    _component,
-    name: "Screenslot",
-    props,
-  }
-}
-
-/**
- * @param {object} componentDefinition - component definition from a component library
- * @param {object} derivedFromProps - extra props derived from a components given props.
- * @return {object} the fully created properties for the component, and any property parsing errors
- */
-export const createProps = (componentDefinition, derivedFromProps) => {
-  const errorOccurred = (propName, error) => errors.push({ propName, error })
-
-  const props = {
-    _id: uuid(),
-    _component: componentDefinition._component,
-    _styles: { normal: {}, hover: {}, active: {} },
-  }
-
-  const errors = []
-
-  if (!componentDefinition._component) {
-    errorOccurred("_component", "Component name not supplied")
-  }
-
-  for (let propName in componentDefinition.props) {
-    const parsedPropDef = parsePropDef(componentDefinition.props[propName])
-
-    if (parsedPropDef.error) {
-      errors.push({ propName, error: parsedPropDef.error })
-    } else {
-      props[propName] = parsedPropDef
-    }
-  }
-
-  if (derivedFromProps) {
-    assign(props, derivedFromProps)
-  }
-
-  if (isUndefined(props._children)) {
-    props._children = []
-  }
-
-  return {
-    props,
-    errors,
-  }
-}
-
-export const makePropsSafe = (componentDefinition, props) => {
-  if (!componentDefinition) {
-    console.error(
-      "No component definition passed to makePropsSafe. Please check the component definition is being passed correctly."
-    )
-  }
-  const safeProps = createProps(componentDefinition, props).props
-  for (let propName in safeProps) {
-    props[propName] = safeProps[propName]
-  }
-
-  for (let propName in props) {
-    if (safeProps[propName] === undefined) {
-      delete props[propName]
-    }
-  }
-
-  if (!props._styles) {
-    props._styles = { normal: {}, hover: {}, active: {} }
-  }
-
-  return props
-}
-
-const parsePropDef = propDef => {
-  const error = message => ({ error: message, propDef })
-
-  if (isString(propDef)) {
-    if (!TYPE_MAP[propDef]) return error(`Type ${propDef} is not recognised.`)
-
-    return cloneDeep(TYPE_MAP[propDef].default)
-  }
-
-  const type = TYPE_MAP[propDef.type]
-  if (!type) return error(`Type ${propDef.type} is not recognised.`)
-
-  return cloneDeep(propDef.default)
-}
diff --git a/packages/builder/src/components/userInterface/assetParsing/getRootComponent.js b/packages/builder/src/components/userInterface/assetParsing/getRootComponent.js
deleted file mode 100644
index adaed50299..0000000000
--- a/packages/builder/src/components/userInterface/assetParsing/getRootComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { isRootComponent } from "./searchComponents"
-import { find } from "lodash/fp"
-
-export const getRootComponent = (componentName, components) => {
-  const component = find(c => c.name === componentName)(components)
-
-  if (isRootComponent(component)) return component
-
-  return getRootComponent(component.props._component, components)
-}
diff --git a/packages/builder/src/components/userInterface/assetParsing/searchComponents.js b/packages/builder/src/components/userInterface/assetParsing/searchComponents.js
deleted file mode 100644
index 66ece481f2..0000000000
--- a/packages/builder/src/components/userInterface/assetParsing/searchComponents.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { isUndefined, filter, some, includes } from "lodash/fp"
-import { pipe } from "../../../helpers"
-
-const normalString = s => (s || "").trim().toLowerCase()
-
-export const isRootComponent = c =>
-  isComponent(c) && isUndefined(c.props._component)
-
-export const isComponent = c => {
-  const hasProp = n => !isUndefined(c[n])
-  return hasProp("name") && hasProp("props")
-}
-
-export const searchAllComponents = (components, phrase) => {
-  const hasPhrase = (...vals) =>
-    pipe(vals, [some(v => includes(normalString(phrase))(normalString(v)))])
-
-  const componentMatches = c => {
-    if (hasPhrase(c._instanceName, ...(c.tags || []))) return true
-
-    if (isRootComponent(c)) return false
-
-    const parent = getExactComponent(components, c.props._component)
-
-    return componentMatches(parent)
-  }
-
-  return filter(componentMatches)(components)
-}
-
-export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find(comp =>
-    isScreen ? comp.props._instanceName === name : comp._instanceName === name
-  )
-}
-
-export const getAncestorProps = (components, name, found = []) => {
-  const thisComponent = getExactComponent(components, name)
-
-  if (isRootComponent(thisComponent)) return [thisComponent.props, ...found]
-
-  return getAncestorProps(components, thisComponent.props._component, [
-    { ...thisComponent.props },
-    ...found,
-  ])
-}
diff --git a/packages/builder/src/components/userInterface/assetParsing/splitRootComponentName.js b/packages/builder/src/components/userInterface/assetParsing/splitRootComponentName.js
deleted file mode 100644
index 1776ddf230..0000000000
--- a/packages/builder/src/components/userInterface/assetParsing/splitRootComponentName.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { split, last } from "lodash/fp"
-import { pipe } from "../../../helpers"
-
-export const splitName = fullname => {
-  const componentName = pipe(fullname, [split("/"), last])
-
-  const libName = fullname.substring(
-    0,
-    fullname.length - componentName.length - 1
-  )
-
-  return { libName, componentName }
-}
diff --git a/packages/builder/src/components/userInterface/assetParsing/types.js b/packages/builder/src/components/userInterface/assetParsing/types.js
deleted file mode 100644
index 9050cb72b7..0000000000
--- a/packages/builder/src/components/userInterface/assetParsing/types.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export const TYPE_MAP = {
-  string: {
-    default: "",
-  },
-  bool: {
-    default: false,
-  },
-  number: {
-    default: 0,
-  },
-  options: {
-    default: [],
-  },
-  event: {
-    default: [],
-  },
-  state: {
-    default: {
-      "##bbstate": "",
-    },
-  },
-  tables: {
-    default: {},
-  },
-}
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
deleted file mode 100644
index d41491d56a..0000000000
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ /dev/null
@@ -1,1286 +0,0 @@
-import Input from "./PropertyPanelControls/Input.svelte"
-import OptionSelect from "./OptionSelect.svelte"
-import MultiTableViewFieldSelect from "./MultiTableViewFieldSelect.svelte"
-import Checkbox from "../common/Checkbox.svelte"
-import TableSelect from "components/userInterface/TableSelect.svelte"
-import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
-import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
-import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
-import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
-import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
-import { IconSelect } from "components/userInterface/IconSelect"
-import Colorpicker from "@budibase/colorpicker"
-
-import { all } from "./propertyCategories.js"
-/* 
-{ label: "N/A ", value: "N/A" },
-{ label: "Flex", value: "flex" },
-{ label: "Inline Flex", value: "inline-flex" }, 
-*/
-
-export default {
-  categories: [
-    {
-      _component: "@budibase/standard-components/container",
-      name: "Container",
-      description: "This component contains things within itself",
-      icon: "ri-layout-column-line",
-      commonProps: {},
-      children: [],
-      properties: {
-        design: { ...all },
-        settings: [
-          {
-            key: "type",
-            label: "Type",
-            control: OptionSelect,
-            options: [
-              "article",
-              "aside",
-              "details",
-              "div",
-              "figure",
-              "figcaption",
-              "footer",
-              "header",
-              "main",
-              "mark",
-              "nav",
-              "paragraph",
-              "summary",
-            ],
-          },
-        ],
-      },
-    },
-    {
-      name: "Grid",
-      _component: "@budibase/standard-components/datagrid",
-      description:
-        "a datagrid component with functionality to add, remove and edit rows.",
-      icon: "ri-grid-line",
-      properties: {
-        design: { ...all },
-        settings: [
-          {
-            label: "Source",
-            key: "datasource",
-            control: TableViewSelect,
-          },
-          {
-            label: "Detail URL",
-            key: "detailUrl",
-            control: DetailScreenSelect,
-          },
-          {
-            label: "Editable",
-            key: "editable",
-            valueKey: "checked",
-            control: Checkbox,
-          },
-          {
-            label: "Theme",
-            key: "theme",
-            control: OptionSelect,
-            options: [
-              "alpine",
-              "alpine-dark",
-              "balham",
-              "balham-dark",
-              "material",
-            ],
-            placeholder: "alpine",
-          },
-          {
-            label: "Height",
-            key: "height",
-            defaultValue: "500",
-            control: Input,
-          },
-          {
-            label: "Pagination",
-            key: "pagination",
-            valueKey: "checked",
-            control: Checkbox,
-          },
-        ],
-      },
-      children: [],
-    },
-    {
-      name: "Repeater",
-      _component: "@budibase/standard-components/list",
-      description: "Renders all children once per row, of a given table",
-      icon: "ri-list-check-2",
-      properties: {
-        design: { ...all },
-        settings: [
-          {
-            label: "Data",
-            key: "datasource",
-            control: TableViewSelect,
-          },
-        ],
-      },
-      children: [],
-    },
-    {
-      _component: "@budibase/standard-components/button",
-      name: "Button",
-      description: "A basic html button that is ready for styling",
-      icon: "ri-share-box-line",
-      children: [],
-      properties: {
-        design: {
-          ...all,
-        },
-        settings: [
-          { label: "Text", key: "text", control: Input },
-          {
-            label: "Disabled",
-            key: "disabled",
-            valueKey: "checked",
-            control: Checkbox,
-          },
-          { label: "On Click", key: "onClick", control: Event },
-        ],
-      },
-    },
-    {
-      name: "Form",
-      icon: "ri-file-edit-line",
-      isCategory: true,
-      children: [
-        {
-          _component: "@budibase/standard-components/dataform",
-          name: "Form Basic",
-          icon: "ri-file-edit-line",
-          properties: {
-            design: { ...all },
-            settings: [],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/dataformwide",
-          name: "Form Wide",
-          icon: "ri-file-edit-line",
-          properties: {
-            design: { ...all },
-            settings: [],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/input",
-          name: "Textfield",
-          description:
-            "A textfield component that allows the user to input text.",
-          icon: "ri-edit-box-line",
-          properties: {
-            design: { ...all },
-            settings: [
-              { label: "Label", key: "label", control: Input },
-              {
-                label: "Type",
-                key: "type",
-                control: OptionSelect,
-                options: ["text", "password"],
-              },
-            ],
-          },
-        },
-        // {
-        //   _component: "@budibase/standard-components/richtext",
-        //   name: "Rich Text",
-        //   description:
-        //     "A component that allows the user to enter long form text.",
-        //   icon: "ri-edit-box-line",
-        //   properties: {
-        //     design: { ...all },
-        //     settings: [],
-        //   },
-        // },
-        {
-          _component: "@budibase/standard-components/datepicker",
-          name: "Date Picker",
-          description: "A basic date picker component",
-          icon: "ri-calendar-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              { label: "Placeholder", key: "placeholder", control: Input },
-            ],
-          },
-        },
-      ],
-    },
-    {
-      name: "Card",
-      icon: "ri-archive-drawer-line",
-      isCategory: true,
-      children: [
-        {
-          _component: "@budibase/standard-components/stackedlist",
-          name: "Stacked List",
-          icon: "ri-archive-drawer-line",
-          description:
-            "A basic card component that can contain content and actions.",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Image",
-                key: "imageUrl",
-                control: Input,
-                placeholder: "{{{context.Image}}}",
-              },
-              {
-                label: "Heading",
-                key: "heading",
-                control: Input,
-                placeholder: "{{context.Heading}}",
-              },
-              {
-                label: "Text 1",
-                key: "text1",
-                control: Input,
-                placeholder: "{{context.Text 1}}",
-              },
-              {
-                label: "Text 2",
-                key: "text2",
-                control: Input,
-                placeholder: "{{context.Text 2}}",
-              },
-              {
-                label: "Text 3",
-                key: "text3",
-                control: Input,
-                placeholder: "{{context.Text 3}}",
-              },
-              {
-                label: "Link URL",
-                key: "destinationUrl",
-                control: ScreenSelect,
-                placeholder: "/table/_id",
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/card",
-          name: "Vertical",
-          description:
-            "A basic card component that can contain content and actions.",
-          icon: "ri-layout-column-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Image",
-                key: "imageUrl",
-                control: Input,
-                placeholder: "Image",
-              },
-              {
-                label: "Heading",
-                key: "heading",
-                control: Input,
-                placeholder: "Heading",
-              },
-              {
-                label: "Description",
-                key: "description",
-                control: Input,
-                placeholder: "Description",
-              },
-              {
-                label: "Link Text",
-                key: "linkText",
-                control: Input,
-                placeholder: "Link Text",
-              },
-              {
-                label: "Link Url",
-                key: "linkUrl",
-                control: ScreenSelect,
-                placeholder: "Link URL",
-              },
-              {
-                label: "Link Color",
-                key: "linkColor",
-                control: Colorpicker,
-                defaultValue: "#000",
-              },
-              {
-                label: "Hover Color",
-                key: "linkHoverColor",
-                control: Colorpicker,
-                defaultValue: "#222",
-              },
-              {
-                label: "Image Height",
-                key: "imageHeight",
-                control: OptionSelect,
-                options: ["12rem", "16rem", "20rem", "24rem"],
-                placeholder: "Image Height",
-              },
-              {
-                label: "Card Width",
-                key: "cardWidth",
-                control: OptionSelect,
-                options: ["16rem", "20rem", "24rem"],
-                placeholder: "Card Width",
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/cardhorizontal",
-          name: "Horizontal",
-          description:
-            "A basic card component that can contain content and actions.",
-          icon: "ri-layout-row-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Image",
-                key: "imageUrl",
-                control: Input,
-                placeholder: "Image",
-              },
-              {
-                label: "Heading",
-                key: "heading",
-                control: Input,
-                placeholder: "Heading",
-              },
-              {
-                label: "Description",
-                key: "description",
-                control: Input,
-                placeholder: "Description",
-              },
-              {
-                label: "Subtext",
-                key: "subtext",
-                control: Input,
-                placeholder: "Subtext",
-              },
-              {
-                label: "Link Text",
-                key: "linkText",
-                control: Input,
-                placeholder: "Link Text",
-              },
-              {
-                label: "Link Url",
-                key: "linkUrl",
-                control: ScreenSelect,
-                placeholder: "Link URL",
-              },
-              {
-                label: "Link Color",
-                key: "linkColor",
-                control: Colorpicker,
-                defaultValue: "#000",
-              },
-              {
-                label: "Hover Color",
-                key: "linkHoverColor",
-                control: Colorpicker,
-                defaultValue: "#222",
-              },
-              {
-                label: "Card Width",
-                key: "cardWidth",
-                control: OptionSelect,
-                options: [
-                  "24rem",
-                  "28rem",
-                  "32rem",
-                  "40rem",
-                  "48rem",
-                  "60rem",
-                  "100%",
-                ],
-                placeholder: "Card Height",
-              },
-              {
-                label: "Image Width",
-                key: "imageWidth",
-                control: OptionSelect,
-                options: ["8rem", "12rem", "16rem"],
-                placeholder: "Image Width",
-              },
-              {
-                label: "Image Height",
-                key: "imageHeight",
-                control: OptionSelect,
-                options: ["8rem", "12rem", "16rem", "auto"],
-                placeholder: "Image Height",
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/cardstat",
-          name: "Stat",
-          description: "A card component for displaying numbers.",
-          icon: "ri-dual-sim-2-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-                placeholder: "Total Revenue",
-              },
-              {
-                label: "Value",
-                key: "value",
-                control: Input,
-                placeholder: "$1,981,983",
-              },
-              {
-                label: "Label",
-                key: "label",
-                control: Input,
-                placeholder: "Stripe",
-              },
-            ],
-          },
-        },
-      ],
-    },
-    {
-      name: "Chart",
-      icon: "ri-bar-chart-2-line",
-      isCategory: true,
-      children: [
-        {
-          name: "Bar Chart",
-          _component: "@budibase/standard-components/bar",
-          description: "Bar chart",
-          icon: "ri-bar-chart-line",
-          properties: {
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Label Col.",
-                key: "labelColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Data Cols.",
-                key: "valueColumns",
-                dependsOn: "datasource",
-                control: MultiTableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Axis Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Axis Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                label: "Stacked",
-                key: "stacked",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                label: "Data Labels",
-                key: "dataLabels",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                label: "Animate",
-                key: "animate",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-              {
-                label: "Legend",
-                key: "legend",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-            ],
-          },
-        },
-        {
-          name: "Line Chart",
-          _component: "@budibase/standard-components/line",
-          description: "Line chart",
-          icon: "ri-line-chart-line",
-          properties: {
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Label Col.",
-                key: "labelColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Data Cols.",
-                key: "valueColumns",
-                dependsOn: "datasource",
-                control: MultiTableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Axis Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Axis Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Curve",
-                key: "curve",
-                control: OptionSelect,
-                options: ["Smooth", "Straight", "Stepline"],
-                defaultValue: "Smooth",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                label: "Data Labels",
-                key: "dataLabels",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                label: "Animate",
-                key: "animate",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-              {
-                label: "Legend",
-                key: "legend",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-            ],
-          },
-        },
-        {
-          name: "Area Chart",
-          _component: "@budibase/standard-components/area",
-          description: "Line chart",
-          icon: "ri-line-chart-fill",
-          properties: {
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Label Col.",
-                key: "labelColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Data Cols.",
-                key: "valueColumns",
-                dependsOn: "datasource",
-                control: MultiTableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Curve",
-                key: "curve",
-                control: OptionSelect,
-                options: ["Smooth", "Straight", "Stepline"],
-                defaultValue: "Smooth",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                label: "Data Labels",
-                key: "dataLabels",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                label: "Animate",
-                key: "animate",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-              {
-                label: "Legend",
-                key: "legend",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                label: "Stacked",
-                key: "stacked",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-              {
-                label: "Gradient",
-                key: "gradient",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-            ],
-          },
-        },
-        {
-          name: "Pie Chart",
-          _component: "@budibase/standard-components/pie",
-          description: "Pie chart",
-          icon: "ri-pie-chart-line",
-          properties: {
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Label Col.",
-                key: "labelColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Data Col.",
-                key: "valueColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "200",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                label: "Data Labels",
-                key: "dataLabels",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                label: "Animate",
-                key: "animate",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-              {
-                label: "Legend",
-                key: "legend",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-            ],
-          },
-        },
-        {
-          name: "Donut Chart",
-          _component: "@budibase/standard-components/donut",
-          description: "Donut chart",
-          icon: "ri-donut-chart-line",
-          properties: {
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Label Col.",
-                key: "labelColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Data Col.",
-                key: "valueColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "200",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                label: "Data Labels",
-                key: "dataLabels",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                label: "Animate",
-                key: "animate",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-              {
-                label: "Legend",
-                key: "legend",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-            ],
-          },
-        },
-        {
-          name: "Candlestick Chart",
-          _component: "@budibase/standard-components/candlestick",
-          description: "Candlestick chart",
-          icon: "ri-stock-line",
-          properties: {
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Date Col.",
-                key: "dateColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Open Col.",
-                key: "openColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Close Col.",
-                key: "closeColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "High Col.",
-                key: "highColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Low Col.",
-                key: "lowColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Axis Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Axis Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Animate",
-                key: "animate",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-            ],
-          },
-        },
-      ],
-    },
-    {
-      name: "Elements",
-      icon: "ri-paragraph",
-      isCategory: true,
-      children: [
-        {
-          _component: "@budibase/standard-components/heading",
-          name: "Headline",
-          icon: "ri-heading",
-          description: "A component for displaying heading text",
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                key: "text",
-                label: "Text",
-                control: Input,
-              },
-              {
-                key: "type",
-                label: "Type",
-                control: OptionSelect,
-                options: ["h1", "h2", "h3", "h4", "h5", "h6"],
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/text",
-          name: "Paragraph",
-          description: "A component for displaying paragraph text.",
-          icon: "ri-paragraph",
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Text",
-                key: "text",
-                control: Input,
-              },
-              {
-                label: "Type",
-                key: "type",
-                control: OptionSelect,
-                options: [
-                  "none",
-                  "bold",
-                  "strong",
-                  "italic",
-                  "emphasis",
-                  "mark",
-                  "small",
-                  "del",
-                  "ins",
-                  "sub",
-                  "sup",
-                ],
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/image",
-          name: "Image",
-          description: "A basic component for displaying images",
-          icon: "ri-image-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [{ label: "URL", key: "url", control: Input }],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/link",
-          name: "Link",
-          description: "A basic link component for internal and external links",
-          icon: "ri-link",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
-              { label: "Text", key: "text", control: Input },
-              { label: "Url", key: "url", control: ScreenSelect },
-              {
-                label: "New Tab",
-                key: "openInNewTab",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/icon",
-          name: "Icon",
-          description: "A basic component for displaying icons",
-          icon: "ri-sun-fill",
-          children: [],
-          properties: {
-            design: {},
-            settings: [
-              { label: "Icon", key: "icon", control: IconSelect },
-              {
-                label: "Size",
-                key: "size",
-                control: OptionSelect,
-                defaultValue: "md",
-                options: [
-                  { value: "ri-xxs", label: "xxs" },
-                  { value: "ri-xs", label: "xs" },
-                  { value: "ri-sm", label: "sm" },
-                  { value: "ri-1x", label: "md" },
-                  { value: "ri-lg", label: "lg" },
-                  { value: "ri-xl", label: "xl" },
-                  { value: "ri-2x", label: "2x" },
-                  { value: "ri-3x", label: "3x" },
-                  { value: "ri-4x", label: "4x" },
-                  { value: "ri-5x", label: "5x" },
-                  { value: "ri-6x", label: "6x" },
-                  { value: "ri-7x", label: "7x" },
-                  { value: "ri-8x", label: "8x" },
-                  { value: "ri-9x", label: "9x" },
-                  { value: "ri-10x", label: "10x" },
-                ],
-              },
-              {
-                label: "Color",
-                key: "color",
-                control: Colorpicker,
-                defaultValue: "#000",
-              },
-            ],
-          },
-        },
-        {
-          _component: "@budibase/standard-components/embed",
-          icon: "ri-code-line",
-          name: "Embed",
-          description: "Embed content from 3rd party sources",
-          properties: {
-            design: {
-              ...all,
-            },
-            settings: [{ label: "Embed", key: "embed", control: Input }],
-          },
-        },
-      ],
-    },
-    {
-      name: "Other",
-      icon: "ri-more-2-line",
-      isCategory: true,
-      children: [
-        {
-          _component: "##builtin/screenslot",
-          name: "Screen Slot",
-          description:
-            "This component is a placeholder for the rendering of a screen within a layout.",
-          icon: "ri-crop-2-line",
-          properties: { design: { ...all } },
-          commonProps: {},
-          children: [],
-        },
-        {
-          name: "Nav Bar",
-          _component: "@budibase/standard-components/navigation",
-          description:
-            "A component for handling the navigation within your app.",
-          icon: "ri-navigation-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
-          },
-        },
-        {
-          name: "Login",
-          _component: "@budibase/standard-components/login",
-          description:
-            "A component that automatically generates a login screen for your app.",
-          icon: "ri-login-box-line",
-          children: [],
-          showOnAsset: ["login-screen"],
-          properties: {
-            design: { ...all },
-            settings: [
-              {
-                label: "Name",
-                key: "name",
-                control: Input,
-              },
-              {
-                label: "Logo",
-                key: "logo",
-                control: Input,
-              },
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Button Text",
-                key: "buttonText",
-                control: Input,
-              },
-            ],
-          },
-        },
-        {
-          name: "Row Detail",
-          _component: "@budibase/standard-components/rowdetail",
-          description:
-            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
-          },
-          children: [],
-        },
-        {
-          name: "New Row",
-          _component: "@budibase/standard-components/newrow",
-          description:
-            "Sets up a new row for creation, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
-          },
-          children: [],
-        },
-      ],
-    },
-  ],
-}
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index a02287a89e..71a0e918f2 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -3,7 +3,7 @@
   import { Button } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
-  import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
+  import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
   import { isActive, goto, layout } from "@sveltech/routify"
 
@@ -73,7 +73,7 @@
         <a
           target="_blank"
           href="https://github.com/Budibase/budibase/discussions">
-          <i class="ri-question-line" />
+          <i class="ri-github-fill" />
         </a>
       </div>
       <SettingsLink />
@@ -89,8 +89,8 @@
   <div class="beta">
     <Button
       secondary
-      href="https://www.budibase.com/blog/budibase-public-beta/">
-      Budibase is in Beta
+      href="https://github.com/Budibase/budibase/discussions/categories/ideas">
+      Request feature
     </Button>
   </div>
 
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index 11ad9d43ff..c2419dd9a6 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -21,9 +21,9 @@
     query => query._id === $backendUiStore.selectedQueryId
   ) || {
     datasourceId: $params.selectedDatasource,
-    name: "New Query",
     parameters: [],
     fields: {},
+    queryVerb: "read",
   }
 </script>
 
@@ -35,8 +35,10 @@
 
 <style>
   section {
-    background: var(--background);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius-m);
+    overflow: scroll;
+  }
+  ::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
index 1c5696a552..5f78bc9ce8 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { Button, Spacer, Icon, TextButton } from "@budibase/bbui"
+  import { Button, Spacer, Icon } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
@@ -14,31 +14,129 @@
     await backendUiStore.actions.datasources.save(datasource)
     notifier.success(`Datasource ${name} saved successfully.`)
   }
+
+  function onClickQuery(query) {
+    if ($backendUiStore.selectedQueryId === query._id) {
+      return
+    }
+    backendUiStore.actions.queries.select(query)
+    $goto(`../${query._id}`)
+  }
 </script>
 
 {#if datasource}
-  <TextButton text small on:click={() => $goto('../new')}>
-    <Icon name="filter" />
-    Create Query
-  </TextButton>
   <section>
-    <h4>{datasource.name}: Configuration</h4>
-    <IntegrationConfigForm integration={datasource.config} />
     <Spacer medium />
-    <footer>
-      <Button blue wide on:click={saveDatasource}>Save</Button>
-    </footer>
+    <header>
+      <h3 class="section-title">{datasource.name}</h3>
+    </header>
+    <Spacer extraLarge />
+    <div class="container">
+      <div class="config-header">
+        <h5>Configuration</h5>
+        <Button secondary on:click={saveDatasource}>Save</Button>
+      </div>
+      <Spacer medium />
+      <IntegrationConfigForm integration={datasource.config} />
+    </div>
+    <Spacer extraLarge />
+    <div class="container">
+      <div class="query-header">
+        <h5>Queries</h5>
+        <Button blue on:click={() => $goto('../new')}>Create Query</Button>
+      </div>
+      <Spacer extraLarge />
+      <div class="query-list">
+        {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
+          <div class="query-list-item" on:click={() => onClickQuery(query)}>
+            <p class="query-name">{query.name}</p>
+            <p>{query.queryVerb}</p>
+            <p>4000 records</p>
+            <p>→</p>
+          </div>
+        {/each}
+        <Spacer medium />
+      </div>
+    </div>
   </section>
+
 {/if}
 
 <style>
-  h4 {
-    margin-top: var(--spacing-xl);
-    margin-bottom: var(--spacing-s);
+  h3 {
+    margin: 0;
   }
   section {
-    background: var(--background);
+    margin: 0 auto;
+    width: 800px;
+  }
+
+  header {
+    margin: 0 0 var(--spacing-xs) 0;
+  }
+
+  .section-title {
+    text-transform: capitalize;
+  }
+
+  .config-header {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 var(--spacing-xs) 0;
+  }
+
+  .container {
     border-radius: var(--border-radius-m);
-    padding: var(--spacing-xl);
+    background: var(--background);
+    padding: var(--layout-s);
+    margin: 0 auto;
+  }
+
+  h5 {
+    margin: 0 !important;
+  }
+
+  .query-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 var(--spacing-s) 0;
+  }
+
+  .query-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+
+  .query-list-item {
+    border-radius: var(--border-radius-m);
+    background: var(--background);
+    border: var(--border-grey);
+    display: grid;
+    grid-template-columns: 2fr 0.75fr 0.75fr 1fr 20px;
+    align-items: center;
+    padding: var(--spacing-m) var(--layout-xs);
+    gap: var(--layout-xs);
+    transition: 200ms background ease;
+  }
+
+  .query-list-item:hover {
+    background: var(--grey-1);
+    cursor: pointer;
+  }
+
+  p {
+    font-size: var(--font-size-xs);
+    color: var(--grey-8);
+  }
+
+  .query-name {
+    color: var(--ink);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--font-size-s);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte
index 462601ff48..a2657ff1ab 100644
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@@ -7,7 +7,7 @@
   import Spinner from "components/common/Spinner.svelte"
   import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
   import analytics from "analytics"
-  import FeedbackIframe from "components/userInterface/Feedback/FeedbackIframe.svelte"
+  import FeedbackIframe from "components/feedback/FeedbackIframe.svelte"
 
   let loading = false
   let deployments = []
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte
deleted file mode 100644
index eb266293d9..0000000000
--- a/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-  import { params, leftover, goto } from "@sveltech/routify"
-  import { FrontendTypes } from "constants"
-  import { store, allScreens } from "builderStore"
-
-  // Get any leftover params not caught by Routifys params store.
-  const componentIds = $leftover.split("/").filter(id => id !== "")
-
-  const currentAssetId = decodeURI($params.asset)
-
-  let assetList
-  let actions
-
-  // Determine screens or layouts based on the URL
-  if ($params.assetType === FrontendTypes.SCREEN) {
-    assetList = $allScreens
-    actions = store.actions.screens
-  } else {
-    assetList = $store.layouts
-    actions = store.actions.layouts
-  }
-
-  // select the screen or layout in the UI
-  actions.select(currentAssetId)
-
-  // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
-  if ($leftover) {
-    // Get the correct screen children.
-    const assetChildren =
-      assetList.find(
-        asset =>
-          asset._id === $params.asset ||
-          asset._id === decodeURIComponent($params.asset)
-      )?.props._children ?? []
-    findComponent(componentIds, assetChildren)
-  }
-  // }
-
-  // Find Component with ID and continue
-  function findComponent(ids, children) {
-    // Setup stuff
-    let componentToSelect
-    let currentChildren = children
-
-    // Loop through each ID
-    ids.forEach(id => {
-      // Find ID
-      const component = currentChildren.find(child => child._id === id)
-
-      // If it does not exist, ignore (use last valid route)
-      if (!component) return
-
-      componentToSelect = component
-
-      // Update childrens array to selected components children
-      currentChildren = componentToSelect._children
-    })
-
-    // Select Component!
-    if (componentToSelect) store.actions.components.select(componentToSelect)
-  }
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
index 64060ef6b7..ad7df634ef 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
@@ -1,34 +1,134 @@
 <script>
   import {
     store,
-    backendUiStore,
     currentAsset,
     selectedComponent,
+    allScreens,
   } from "builderStore"
-  import { onMount } from "svelte"
-  import CurrentItemPreview from "components/userInterface/AppPreview"
-  import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
-  import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
-  import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
+  import CurrentItemPreview from "components/design/AppPreview"
+  import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte"
+  import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte"
+  import FrontendNavigatePane from "components/design/NavigationPanel/FrontendNavigatePane.svelte"
+  import { goto, leftover, params } from "@sveltech/routify"
+  import { FrontendTypes } from "constants"
+  import { findComponent, findComponentPath } from "builderStore/storeUtils"
+  import { get } from "svelte/store"
 
-  $: instance = $store.appInstance
+  // Cache previous values so we don't update the URL more than necessary
+  let previousType
+  let previousAsset
+  let previousComponentId
 
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
+  // Hydrate state from URL params
+  $: hydrateStateFromURL($params, $leftover)
+
+  // Keep URL in sync with state
+  $: updateURLFromState(
+    $store.currentFrontEndType,
+    $currentAsset,
+    $store.selectedComponentId
+  )
+
+  const hydrateStateFromURL = (params, leftover) => {
+    // Do nothing if no asset type, as that means we've left the page
+    if (!params.assetType) {
+      return
+    }
+
+    const state = get(store)
+    const selectedAsset = get(currentAsset)
+
+    // Hydrate asset type
+    let assetType = params.assetType
+    if (![FrontendTypes.LAYOUT, FrontendTypes.SCREEN].includes(assetType)) {
+      assetType = FrontendTypes.SCREEN
+    }
+    if (assetType !== state.currentFrontEndType) {
+      store.update(state => {
+        state.currentFrontEndType = assetType
+        return state
+      })
+    }
+
+    // Hydrate asset
+    const assetId = decodeURI(params.asset)
+    let asset
+    if (assetId) {
+      let assetList
+      let actions
+
+      // Determine screens or layouts based on the URL
+      if (assetType === FrontendTypes.SCREEN) {
+        assetList = get(allScreens)
+        actions = store.actions.screens
+      } else {
+        assetList = state.layouts
+        actions = store.actions.layouts
+      }
+
+      // Find and select the current asset
+      asset = assetList.find(asset => asset._id === assetId)
+      if (asset && asset._id !== selectedAsset?._id) {
+        actions.select(assetId)
+      }
+    }
+
+    // Hydrate component ID if one is present in the URL
+    const selectedComponentId = leftover.split("/").pop()
+    if (asset && selectedComponentId) {
+      const component = findComponent(asset.props, selectedComponentId)
+      if (component && component._id !== state.selectedComponentId) {
+        store.actions.components.select(component)
+      }
+    }
   }
 
-  onMount(async () => {
-    if ($store.appInstance && !$backendUiStore.database) {
-      await selectDatabase($store.appInstance)
+  // Updates the route params in the URL to the specified values
+  const updateURLFromState = (assetType, asset, componentId) => {
+    // Check we have different params than last invocation
+    if (
+      assetType === previousType &&
+      asset === previousAsset &&
+      componentId === previousComponentId
+    ) {
+      return
+    } else {
+      previousType = assetType
+      previousAsset = asset
+      previousComponentId = componentId
     }
-  })
 
-  let confirmDeleteDialog
-  let componentToDelete = ""
+    // Extract current URL params
+    const currentParams = get(params)
+    const currentLeftover = get(leftover)
+    const paramAssetType = currentParams.assetType
+    const paramAssetId = currentParams.asset
+    const paramComponentId = currentLeftover.split("/").pop()
 
-  let settingsView
-  const settings = () => {
-    settingsView.show()
+    // Only update params if the params actually changed
+    if (
+      assetType !== paramAssetType ||
+      asset?._id !== paramAssetId ||
+      componentId !== paramComponentId
+    ) {
+      // Build and navigate to a valid URL
+      let url = "../"
+      if ([FrontendTypes.SCREEN, FrontendTypes.LAYOUT].includes(assetType)) {
+        url += `${assetType}`
+        if (asset?._id) {
+          url += `/${asset._id}`
+          if (componentId) {
+            const componentPath = findComponentPath(asset.props, componentId)
+            const componentURL = componentPath
+              .slice(1)
+              .map(comp => comp._id)
+              .join("/")
+            url += `/${componentURL}`
+          }
+        }
+      }
+      $goto(url)
+    }
   }
 </script>
 
@@ -49,7 +149,7 @@
 
   {#if $selectedComponent != null}
     <div class="components-pane">
-      <ComponentPropertiesPanel />
+      <PropertiesPanel />
     </div>
   {/if}
 </div>
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/index.svelte b/packages/builder/src/pages/[application]/design/[assetType]/index.svelte
index 30545212a9..f1383c9190 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/index.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/index.svelte
@@ -1,36 +1,50 @@
 <script>
-  import { store, allScreens } from "builderStore"
+  import { get } from "svelte/store"
+  import { store, allScreens, selectedAccessRole } from "builderStore"
   import { FrontendTypes } from "constants"
-  import { goto, params } from "@sveltech/routify"
+  import { params } from "@sveltech/routify"
 
-  // Go to first layout
-  if ($params.assetType === FrontendTypes.LAYOUT) {
-    // Try to use previously selected layout first
-    let id
-    if (
-      $store.selectedLayoutId &&
-      $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
-    ) {
-      id = $store.selectedLayoutId
-    } else {
-      id = $store.layouts[0]?._id
-    }
-    $goto(`../${id}`)
-  }
+  $: selectValidAsset($params.assetType)
 
-  // Go to first screen
-  if ($params.assetType === FrontendTypes.SCREEN) {
-    // Try to use previously selected layout first
+  // If we ever land on this index page we want to correctly update state
+  // to select a valid asset. The layout page will in turn update the URL
+  // to reflect state.
+  const selectValidAsset = assetType => {
     let id
-    if (
-      $store.selectedScreenId &&
-      $allScreens.find(screen => screen._id === $store.selectedScreenId)
-    ) {
-      id = $store.selectedScreenId
-    } else {
-      id = $allScreens[0]?._id
+    const state = get(store)
+    const screens = get(allScreens)
+    const role = get(selectedAccessRole)
+
+    // Get ID or first correct asset type and select it
+    if (assetType === FrontendTypes.LAYOUT) {
+      if (
+        state.selectedLayoutId &&
+        state.layouts.find(layout => layout._id === state.selectedLayoutId)
+      ) {
+        id = state.selectedLayoutId
+      } else {
+        id = state.layouts[0]?._id
+      }
+      if (id) {
+        store.actions.layouts.select(id)
+      }
+    } else if (assetType === FrontendTypes.SCREEN) {
+      if (
+        state.selectedScreenId &&
+        screens.find(screen => screen._id === state.selectedScreenId)
+      ) {
+        id = state.selectedScreenId
+      } else {
+        // Select the first screen matching the selected role ID
+        const filteredScreens = screens.filter(screen => {
+          return screen.routing?.roleId === role
+        })
+        id = filteredScreens[0]?._id
+      }
+      if (id) {
+        store.actions.screens.select(id)
+      }
     }
-    $goto(`../${id}`)
   }
 </script>
 
diff --git a/packages/builder/tests/createProps.spec.js b/packages/builder/tests/createProps.spec.js
deleted file mode 100644
index 5c555386a3..0000000000
--- a/packages/builder/tests/createProps.spec.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import { createProps } from "../src/components/userInterface/assetParsing/createProps"
-import { keys, some } from "lodash/fp"
-import { stripStandardProps } from "./testData"
-
-describe("createDefaultProps", () => {
-  const getcomponent = () => ({
-    _component: "some_component",
-    name: "some_component",
-    props: {
-      fieldName: { type: "string", default: "something" },
-    },
-  })
-
-  it("should create a object with single string value, when default string field set", () => {
-    const { props, errors } = createProps(getcomponent())
-
-    expect(errors).toEqual([])
-    expect(props.fieldName).toBeDefined()
-    expect(props.fieldName).toBe("something")
-    stripStandardProps(props)
-    expect(keys(props).length).toBe(3)
-  })
-
-  it("should set component _component", () => {
-    const { props, errors } = createProps(getcomponent())
-
-    expect(errors).toEqual([])
-    expect(props._component).toBe("some_component")
-  })
-
-  it("should create a object with single blank string value, when prop definition is 'string' ", () => {
-    const comp = getcomponent()
-    comp.props.fieldName = "string"
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props.fieldName).toBeDefined()
-    expect(props.fieldName).toBe("")
-  })
-
-  it("should create a object with single fals value, when prop definition is 'bool' ", () => {
-    const comp = getcomponent()
-    comp.props.isVisible = "bool"
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props.isVisible).toBeDefined()
-    expect(props.isVisible).toBe(false)
-  })
-
-  it("should create a object with single 0 value, when prop definition is 'number' ", () => {
-    const comp = getcomponent()
-    comp.props.width = "number"
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props.width).toBeDefined()
-    expect(props.width).toBe(0)
-  })
-
-  it("should create a object with empty _children array, when children===true ", () => {
-    const comp = getcomponent()
-    comp.children = true
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props._children).toBeDefined()
-    expect(props._children).toEqual([])
-  })
-
-  it("should create a object with single empty array, when prop definition is 'event' ", () => {
-    const comp = getcomponent()
-    comp.props.onClick = "event"
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props.onClick).toBeDefined()
-    expect(props.onClick).toEqual([])
-  })
-
-  it("should create a object children array when children == true ", () => {
-    const comp = getcomponent()
-    comp.children = true
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props._children).toBeDefined()
-    expect(props._children).toEqual([])
-  })
-
-  it("should always create _children ", () => {
-    const comp = getcomponent()
-    comp.children = false
-
-    const createRes1 = createProps(comp)
-
-    expect(createRes1.errors).toEqual([])
-    expect(createRes1.props._children).toBeDefined()
-
-    const comp2 = getcomponent()
-    comp2.children = true
-
-    const createRes2 = createProps(comp)
-
-    expect(createRes2.errors).toEqual([])
-    expect(createRes2.props._children).toBeDefined()
-  })
-
-  it("should create an object with multiple prop names", () => {
-    const comp = getcomponent()
-    comp.props.fieldName = "string"
-    comp.props.fieldLength = { type: "number", default: 500 }
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props.fieldName).toBeDefined()
-    expect(props.fieldName).toBe("")
-    expect(props.fieldLength).toBeDefined()
-    expect(props.fieldLength).toBe(500)
-  })
-
-  it("should return error when invalid type", () => {
-    const comp = getcomponent()
-    comp.props.fieldName = "invalid type name"
-    comp.props.fieldLength = { type: "invalid type name " }
-
-    const { errors } = createProps(comp)
-
-    expect(errors.length).toBe(2)
-    expect(some(e => e.propName === "fieldName")(errors)).toBeTruthy()
-    expect(some(e => e.propName === "fieldLength")(errors)).toBeTruthy()
-  })
-
-  it("should merge in derived props", () => {
-    const comp = getcomponent()
-    comp.props.fieldName = "string"
-    comp.props.fieldLength = { type: "number", default: 500 }
-
-    const derivedFrom = {
-      fieldName: "surname",
-    }
-
-    const { props, errors } = createProps(comp, derivedFrom)
-
-    expect(errors.length).toBe(0)
-    expect(props.fieldName).toBe("surname")
-    expect(props.fieldLength).toBe(500)
-  })
-
-  it("should create standard props", () => {
-    const comp = getcomponent()
-    comp.props.fieldName = { type: "string", default: 1 }
-    const { props } = createProps(comp)
-    expect(props._styles).toBeDefined()
-  })
-})
diff --git a/packages/builder/tests/fetchBindableProperties.spec.js b/packages/builder/tests/fetchBindableProperties.spec.js
deleted file mode 100644
index 0122573307..0000000000
--- a/packages/builder/tests/fetchBindableProperties.spec.js
+++ /dev/null
@@ -1,253 +0,0 @@
-import fetchBindableProperties from "../src/builderStore/fetchBindableProperties"
-
-describe("fetch bindable properties", () => {
-  it("should return bindable properties from screen components", () => {
-    const result = fetchBindableProperties({
-      componentInstanceId: "heading-id",
-      ...testData(),
-    })
-    const componentBinding = result.find(
-      r => r.instance._id === "search-input-id" && r.type === "instance"
-    )
-    expect(componentBinding).toBeDefined()
-    expect(componentBinding.type).toBe("instance")
-    expect(componentBinding.runtimeBinding).toBe("search-input-id")
-  })
-
-  it("should not return bindable components when not in their context", () => {
-    const result = fetchBindableProperties({
-      componentInstanceId: "heading-id",
-      ...testData(),
-    })
-    const componentBinding = result.find(
-      r => r.instance._id === "list-item-input-id"
-    )
-    expect(componentBinding).not.toBeDefined()
-  })
-
-  it("should return table schema, when inside a context", () => {
-    const result = fetchBindableProperties({
-      componentInstanceId: "list-item-input-id",
-      ...testData(),
-    })
-    const contextBindings = result.filter(
-      r => r.instance._id === "list-id" && r.type === "context"
-    )
-    // 2 fields + _id + _rev
-    expect(contextBindings.length).toBe(4)
-
-    const namebinding = contextBindings.find(
-      b => b.runtimeBinding === "list-id.name"
-    )
-    expect(namebinding).toBeDefined()
-    expect(namebinding.readableBinding).toBe("list-name.Test Table.name")
-
-    const descriptionbinding = contextBindings.find(
-      b => b.runtimeBinding === "list-id.description"
-    )
-    expect(descriptionbinding).toBeDefined()
-    expect(descriptionbinding.readableBinding).toBe(
-      "list-name.Test Table.description"
-    )
-
-    const idbinding = contextBindings.find(
-      b => b.runtimeBinding === "list-id._id"
-    )
-    expect(idbinding).toBeDefined()
-    expect(idbinding.readableBinding).toBe("list-name.Test Table._id")
-  })
-
-  it("should return table schema, for grantparent context", () => {
-    const result = fetchBindableProperties({
-      componentInstanceId: "child-list-item-input-id",
-      ...testData(),
-    })
-    const contextBindings = result.filter(r => r.type === "context")
-    // 2 fields + _id + _rev ... x 2 tables
-    expect(contextBindings.length).toBe(8)
-
-    const namebinding_parent = contextBindings.find(
-      b => b.runtimeBinding === "list-id.name"
-    )
-    expect(namebinding_parent).toBeDefined()
-    expect(namebinding_parent.readableBinding).toBe("list-name.Test Table.name")
-
-    const descriptionbinding_parent = contextBindings.find(
-      b => b.runtimeBinding === "list-id.description"
-    )
-    expect(descriptionbinding_parent).toBeDefined()
-    expect(descriptionbinding_parent.readableBinding).toBe(
-      "list-name.Test Table.description"
-    )
-
-    const namebinding_own = contextBindings.find(
-      b => b.runtimeBinding === "child-list-id.name"
-    )
-    expect(namebinding_own).toBeDefined()
-    expect(namebinding_own.readableBinding).toBe(
-      "child-list-name.Test Table.name"
-    )
-
-    const descriptionbinding_own = contextBindings.find(
-      b => b.runtimeBinding === "child-list-id.description"
-    )
-    expect(descriptionbinding_own).toBeDefined()
-    expect(descriptionbinding_own.readableBinding).toBe(
-      "child-list-name.Test Table.description"
-    )
-  })
-
-  it("should return bindable component props, from components in same context", () => {
-    const result = fetchBindableProperties({
-      componentInstanceId: "list-item-heading-id",
-      ...testData(),
-    })
-    const componentBinding = result.find(
-      r => r.instance._id === "list-item-input-id" && r.type === "instance"
-    )
-    expect(componentBinding).toBeDefined()
-    expect(componentBinding.runtimeBinding).toBe("list-item-input-id")
-  })
-
-  it("should not return components from child context", () => {
-    const result = fetchBindableProperties({
-      componentInstanceId: "list-item-heading-id",
-      ...testData(),
-    })
-    const componentBinding = result.find(
-      r =>
-        r.instance._id === "child-list-item-input-id" && r.type === "instance"
-    )
-    expect(componentBinding).not.toBeDefined()
-  })
-
-  it("should return bindable component props, from components in same context (when nested context)", () => {
-    const result = fetchBindableProperties({
-      componentInstanceId: "child-list-item-heading-id",
-      ...testData(),
-    })
-    const componentBinding = result.find(
-      r =>
-        r.instance._id === "child-list-item-input-id" && r.type === "instance"
-    )
-    expect(componentBinding).toBeDefined()
-  })
-})
-
-const testData = () => {
-  const screen = {
-    instanceName: "test screen",
-    name: "screen-id",
-    route: "/",
-    props: {
-      _id: "screent-root-id",
-      _component: "@budibase/standard-components/container",
-      _children: [
-        {
-          _id: "heading-id",
-          _instanceName: "list item heading",
-          _component: "@budibase/standard-components/heading",
-          text: "Screen Title",
-        },
-        {
-          _id: "search-input-id",
-          _instanceName: "Search Input",
-          _component: "@budibase/standard-components/input",
-          value: "search phrase",
-        },
-        {
-          _id: "list-id",
-          _component: "@budibase/standard-components/list",
-          _instanceName: "list-name",
-          table: {
-            type: "table",
-            tableId: "test-table-id",
-            label: "Test Table",
-            name: "all_test-table-id",
-          },
-          _children: [
-            {
-              _id: "list-item-heading-id",
-              _instanceName: "list item heading",
-              _component: "@budibase/standard-components/heading",
-              text: "hello",
-            },
-            {
-              _id: "list-item-input-id",
-              _instanceName: "List Item Input",
-              _component: "@budibase/standard-components/input",
-              value: "list item",
-            },
-            {
-              _id: "child-list-id",
-              _component: "@budibase/standard-components/list",
-              _instanceName: "child-list-name",
-              table: {
-                type: "table",
-                tableId: "test-table-id",
-                label: "Test Table",
-                name: "all_test-table-id",
-              },
-              _children: [
-                {
-                  _id: "child-list-item-heading-id",
-                  _instanceName: "child list item heading",
-                  _component: "@budibase/standard-components/heading",
-                  text: "hello",
-                },
-                {
-                  _id: "child-list-item-input-id",
-                  _instanceName: "Child List Item Input",
-                  _component: "@budibase/standard-components/input",
-                  value: "child list item",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  }
-
-  const tables = [
-    {
-      _id: "test-table-id",
-      name: "Test Table",
-      schema: {
-        name: {
-          type: "string",
-        },
-        description: {
-          type: "string",
-        },
-      },
-    },
-  ]
-
-  const queries = []
-
-  const components = {
-    "@budibase/standard-components/container": {
-      props: {},
-    },
-    "@budibase/standard-components/list": {
-      context: "table",
-      props: {
-        table: "string",
-      },
-    },
-    "@budibase/standard-components/input": {
-      bindable: "value",
-      props: {
-        value: "string",
-      },
-    },
-    "@budibase/standard-components/heading": {
-      props: {
-        text: "string",
-      },
-    },
-  }
-
-  return { screen, tables, components, queries }
-}
diff --git a/packages/builder/tests/searchComponentsProps.spec.js b/packages/builder/tests/searchComponentsProps.spec.js
deleted file mode 100644
index abf1dad7da..0000000000
--- a/packages/builder/tests/searchComponentsProps.spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  searchAllComponents,
-  getExactComponent,
-  getAncestorProps,
-} from "../src/components/userInterface/assetParsing/searchComponents"
-import { componentsAndScreens } from "./testData"
-
-
-describe("getExactComponent", () => {
-  it("should get component by name", () => {
-    const { components } = componentsAndScreens()
-    const result = getExactComponent(
-      components,
-      "TextBox"
-    )
-
-    expect(result).toBeDefined()
-    expect(result._instanceName).toBe("TextBox")
-  })
-
-  test("Should not find as isScreen is not specified", () => {
-    const { screens } = componentsAndScreens()
-    const result = getExactComponent(screens, "SmallTextbox")
-
-    expect(result).not.toBeDefined()
-  })
-
-  test("Should find as isScreen is specified", () => {
-    const { screens } = componentsAndScreens()
-    const result = getExactComponent(screens, "SmallTextbox", true)
-
-    expect(result).toBeDefined()
-    expect(result.props._instanceName).toBe("SmallTextbox")
-
-  })
-})
-
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index ce6a5b6e63..85bbdab526 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.54.0":
-  version "1.54.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.0.tgz#60e6c0faa3d8f1781c503e74f8b8990f75ba2c40"
-  integrity sha512-98koXkueqda6oQT6q0NPNvdL878ETRevtmmm34aSz9C6B4Oz68VVCsiFzRWuHvP/7wiNaAxMgY1nsEsCwP3LpQ==
+"@budibase/bbui@^1.54.1":
+  version "1.54.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.1.tgz#ad0439c0be6a4dc818cd9dacda00f053b0daa9d5"
+  integrity sha512-ZY2OP/tF+ReMSyzZIGZV6wpQ4eIEzYGxZV3n+C+oNjzK5u3rwWPCDEVDlZgJSqJ61z+sEf2zuIyAh88lq9RTaA==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index aea4944aae..e5e41a6753 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -78,7 +78,7 @@ const makeCachedApiCall = async params => {
 const requestApiCall = method => async params => {
   const { url, cache = false } = params
   const fixedUrl = `/${url}`.replace("//", "/")
-  const enrichedParams = { ...params, method, fixedUrl }
+  const enrichedParams = { ...params, method, url: fixedUrl }
   return await (cache ? makeCachedApiCall : makeApiCall)(enrichedParams)
 }
 
diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index ff91a9f61d..7e5e11cd08 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -1,16 +1,14 @@
-import { get } from "svelte/store"
+import { cloneDeep } from "lodash/fp"
 import { fetchTableData } from "./tables"
 import { fetchViewData } from "./views"
 import { fetchRelationshipData } from "./relationships"
 import { executeQuery } from "./queries"
 import { enrichRows } from "./rows"
-import { enrichDataBindings } from "../utils/enrichDataBinding"
-import { bindingStore } from "../store/binding"
 
 /**
  * Fetches all rows for a particular Budibase data source.
  */
-export const fetchDatasource = async (datasource, dataContext) => {
+export const fetchDatasource = async datasource => {
   if (!datasource || !datasource.type) {
     return []
   }
@@ -23,28 +21,22 @@ export const fetchDatasource = async (datasource, dataContext) => {
   } else if (type === "view") {
     rows = await fetchViewData(datasource)
   } else if (type === "query") {
-    const bindings = get(bindingStore)
-
     // Set the default query params
-    let queryParams = datasource.queryParams || {}
+    let parameters = cloneDeep(datasource.queryParams || {})
     for (let param of datasource.parameters) {
-      if (!queryParams[param.name]) {
-        queryParams[param.name] = param.default
+      if (!parameters[param.name]) {
+        parameters[param.name] = param.default
       }
     }
-    const parameters = enrichDataBindings(queryParams, {
-      ...bindings,
-      ...dataContext,
-    })
     return await executeQuery({ queryId: datasource._id, parameters })
   } else if (type === "link") {
-    const row = dataContext[datasource.providerId]
     rows = await fetchRelationshipData({
-      rowId: row?._id,
-      tableId: row?.tableId,
+      rowId: datasource.rowId,
+      tableId: datasource.rowTableId,
       fieldName,
     })
   }
-  // Enrich rows
+
+  // Enrich rows so they can displayed properly
   return await enrichRows(rows, tableId)
 }
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 5912524023..4e89921bb6 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -11,8 +11,8 @@ export const executeQuery = async ({ queryId, parameters }) => {
       parameters,
     },
   })
-  res.error
-    ? notificationStore.danger("An error has occurred")
-    : notificationStore.success("Query successful")
+  if (res.error) {
+    notificationStore.danger("An error has occurred")
+  }
   return res
 }
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a303b0262f..208ba21718 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -3,11 +3,14 @@
   import { writable } from "svelte/store"
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
-  import { enrichProps } from "../utils/componentProps"
+  import { enrichProps, propsAreSame } from "../utils/componentProps"
   import { bindingStore, builderStore } from "../store"
 
   export let definition = {}
 
+  let enrichedProps
+  let componentProps
+
   // Get contexts
   const dataContext = getContext("data")
   const screenslotContext = getContext("screenslot")
@@ -16,14 +19,12 @@
   const componentStore = writable({})
   setContext("component", componentStore)
 
-  // Enrich component props
-  let enrichedProps
-  $: enrichComponentProps(definition, $dataContext, $bindingStore)
-
   // Extract component definition info
   $: constructor = getComponentConstructor(definition._component)
-  $: children = definition._children
+  $: children = definition._children || []
   $: id = definition._id
+  $: enrichComponentProps(definition, $dataContext, $bindingStore)
+  $: updateProps(enrichedProps)
   $: styles = definition._styles
 
   // Allow component selection in the builder preview if we're previewing a
@@ -38,11 +39,31 @@
     styles: { ...styles, id, allowSelection },
   })
 
+  // Updates the component props.
+  // Most props are deeply compared so that svelte will only trigger reactive
+  // statements on props that have actually changed.
+  const updateProps = props => {
+    if (!props) {
+      return
+    }
+    if (!componentProps) {
+      componentProps = {}
+    }
+    Object.keys(props).forEach(key => {
+      if (!propsAreSame(props[key], componentProps[key])) {
+        componentProps[key] = props[key]
+      }
+    })
+  }
+
   // Gets the component constructor for the specified component
   const getComponentConstructor = component => {
     const split = component?.split("/")
     const name = split?.[split.length - 1]
-    return name === "screenslot" ? Router : ComponentLibrary[name]
+    if (name === "screenslot" && $builderStore.previewType !== "layout") {
+      return Router
+    }
+    return ComponentLibrary[name]
   }
 
   // Enriches any string component props using handlebars
@@ -59,9 +80,9 @@
   }
 </script>
 
-{#if constructor && enrichedProps}
-  <svelte:component this={constructor} {...enrichedProps}>
-    {#if children && children.length}
+{#if constructor && componentProps}
+  <svelte:component this={constructor} {...componentProps}>
+    {#if children.length}
       {#each children as child (getChildKey(child._id))}
         <svelte:self definition={child} />
       {/each}
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 98cff20679..b5efe1257c 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -5,6 +5,7 @@ import {
   routeStore,
   screenStore,
   bindingStore,
+  builderStore,
 } from "./store"
 import { styleable } from "./utils/styleable"
 import { linkable } from "./utils/linkable"
@@ -16,6 +17,7 @@ export default {
   notifications: notificationStore,
   routeStore,
   screenStore,
+  builderStore,
   styleable,
   linkable,
   DataProvider,
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 54be3e51be..178abd328d 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -1,51 +1,57 @@
+import { get } from "svelte/store"
 import { enrichDataBinding, enrichDataBindings } from "./enrichDataBinding"
-import { routeStore } from "../store"
+import { routeStore, builderStore } from "../store"
 import { saveRow, deleteRow, executeQuery, triggerAutomation } from "../api"
 
 const saveRowHandler = async (action, context) => {
-  let draft = context[`${action.parameters.contextPath}_draft`]
-  if (action.parameters.fields) {
-    for (let [key, entry] of Object.entries(action.parameters.fields)) {
-      draft[key] = await enrichDataBinding(entry.value, context)
+  const { fields, providerId } = action.parameters
+  if (providerId) {
+    let draft = context[`${providerId}_draft`]
+    if (fields) {
+      for (let [key, entry] of Object.entries(fields)) {
+        draft[key] = await enrichDataBinding(entry.value, context)
+      }
     }
+    await saveRow(draft)
   }
-  await saveRow(draft)
 }
 
 const deleteRowHandler = async (action, context) => {
   const { tableId, revId, rowId } = action.parameters
-  const [enrichTable, enrichRow, enrichRev] = await Promise.all([
-    enrichDataBinding(tableId, context),
-    enrichDataBinding(rowId, context),
-    enrichDataBinding(revId, context),
-  ])
-  await deleteRow({
-    tableId: enrichTable,
-    rowId: enrichRow,
-    revId: enrichRev,
-  })
+  if (tableId && revId && rowId) {
+    const [enrichTable, enrichRow, enrichRev] = await Promise.all([
+      enrichDataBinding(tableId, context),
+      enrichDataBinding(rowId, context),
+      enrichDataBinding(revId, context),
+    ])
+    await deleteRow({
+      tableId: enrichTable,
+      rowId: enrichRow,
+      revId: enrichRev,
+    })
+  }
 }
 
 const triggerAutomationHandler = async (action, context) => {
-  const params = {}
-  for (let field in action.parameters.fields) {
-    params[field] = await enrichDataBinding(
-      action.parameters.fields[field].value,
-      context
-    )
+  const { fields } = action.parameters()
+  if (fields) {
+    const params = {}
+    for (let field in fields) {
+      params[field] = await enrichDataBinding(fields[field].value, context)
+    }
+    await triggerAutomation(action.parameters.automationId, params)
   }
-  await triggerAutomation(action.parameters.automationId, params)
 }
 
 const navigationHandler = action => {
-  routeStore.actions.navigate(action.parameters.url)
+  if (action.parameters.url) {
+    routeStore.actions.navigate(action.parameters.url)
+  }
 }
 
 const queryExecutionHandler = async (action, context) => {
   const { datasourceId, queryId, queryParams } = action.parameters
-
-  const enrichedQueryParameters = enrichDataBindings(queryParams, context)
-
+  const enrichedQueryParameters = enrichDataBindings(queryParams || {}, context)
   await executeQuery({
     datasourceId,
     queryId,
@@ -66,6 +72,10 @@ const handlerMap = {
  * actions in the current context.
  */
 export const enrichButtonActions = (actions, context) => {
+  // Prevent button actions in the builder preview
+  if (get(builderStore).inBuilder) {
+    return () => {}
+  }
   const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
   return async () => {
     for (let i = 0; i < handlers.length; i++) {
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 170faf47a1..7b322ec80f 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -1,6 +1,22 @@
 import { enrichDataBindings } from "./enrichDataBinding"
 import { enrichButtonActions } from "./buttonActions"
 
+/**
+ * Deeply compares 2 props using JSON.stringify.
+ * Does not consider functions, as currently only button actions have a function
+ * prop and it's cheaper to just always re-render buttons than it is to deeply
+ * compare them.
+ */
+export const propsAreSame = (a, b) => {
+  if (a === b) {
+    return true
+  }
+  if (typeof a === "function" || typeof b === "function") {
+    return false
+  }
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
 /**
  * Enriches component props.
  * Data bindings are enriched, and button actions are enriched.
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index f6682777b5..b8c5020c74 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -1,4 +1,5 @@
-import { processString } from "@budibase/string-templates"
+import { cloneDeep } from "lodash/fp"
+import { processString, processObject } from "@budibase/string-templates"
 
 // Regex to test inputs with to see if they are likely candidates for template strings
 const looksLikeTemplate = /{{.*}}/
@@ -19,12 +20,9 @@ export const enrichDataBinding = async (input, context) => {
 }
 
 /**
- * Enriches each prop in a props object
+ * Recursively enriches all props in a props object and returns the new props.
+ * Props are deeply cloned so that no mutation is done to the source object.
  */
 export const enrichDataBindings = async (props, context) => {
-  let enrichedProps = {}
-  for (let [key, value] of Object.entries(props)) {
-    enrichedProps[key] = await enrichDataBinding(value, context)
-  }
-  return enrichedProps
+  return await processObject(cloneDeep(props), context)
 }
diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js
index 2d28520609..092d154817 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -21,7 +21,7 @@ exports.fetchAppComponentDefinitions = async function(ctx) {
       appDirectory,
       componentLibrary,
       ctx.isDev ? "" : "package",
-      "components.json"
+      "manifest.json"
     ))
 
     const result = {}
@@ -29,9 +29,9 @@ exports.fetchAppComponentDefinitions = async function(ctx) {
     // map over the components.json and add the library identifier as a key
     // button -> @budibase/standard-components/button
     for (let key of Object.keys(componentJson)) {
-      const fullComponentName = `${componentLibrary}/${key}`
+      const fullComponentName = `${componentLibrary}/${key}`.toLowerCase()
       result[fullComponentName] = {
-        _component: fullComponentName,
+        component: fullComponentName,
         ...componentJson[key],
       }
     }
diff --git a/packages/server/src/api/controllers/integration.js b/packages/server/src/api/controllers/integration.js
index edd3eeef25..d8c726c8f3 100644
--- a/packages/server/src/api/controllers/integration.js
+++ b/packages/server/src/api/controllers/integration.js
@@ -2,7 +2,6 @@ const { definitions } = require("../../integrations")
 
 exports.fetch = async function(ctx) {
   // TODO: fetch these from a github repo etc
-  console.log(definitions)
   ctx.status = 200
   ctx.body = definitions
 }
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index 2096b3039e..4f3d8d1611 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -177,6 +177,7 @@ exports.serveApp = async function(ctx) {
   })
 
   const appHbs = fs.readFileSync(`${__dirname}/templates/app.hbs`, "utf8")
+  console.log(appHbs)
   ctx.body = await processString(appHbs, {
     head,
     body: html,
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 62ddc83ac0..ae5e6bc317 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -31,7 +31,6 @@ function generateQueryValidation() {
       default: Joi.string()
     })),
     queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
-    queryType: Joi.string().required(),
     schema: Joi.object({}).required().unknown(true)
   }))
 }
diff --git a/packages/server/src/api/routes/tests/datasource.spec.js b/packages/server/src/api/routes/tests/datasource.spec.js
index b699710143..768d54fbcd 100644
--- a/packages/server/src/api/routes/tests/datasource.spec.js
+++ b/packages/server/src/api/routes/tests/datasource.spec.js
@@ -26,7 +26,6 @@ const TEST_QUERY = {
   fields:{},
   schema:{},
   queryVerb:"read",
-  queryType:"Table",
 }
 
 describe("/datasources", () => {
diff --git a/packages/server/src/api/routes/tests/query.spec.js b/packages/server/src/api/routes/tests/query.spec.js
index f8c31e48e6..3262845ca3 100644
--- a/packages/server/src/api/routes/tests/query.spec.js
+++ b/packages/server/src/api/routes/tests/query.spec.js
@@ -26,7 +26,6 @@ const TEST_QUERY = {
   fields:{},
   schema:{},
   queryVerb:"read",
-  queryType:"Table",
 }
 
 describe("/queries", () => {
diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js
index 221acb4925..d32ce4453d 100644
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@@ -16,7 +16,7 @@ const EMPTY_LAYOUT = {
     _children: [
       {
         _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-        _component: "##builtin/screenslot",
+        _component: "@budibase/standard-components/screenslot",
         _styles: {
           normal: {
             flex: "1 1 auto",
@@ -152,7 +152,7 @@ const BASE_LAYOUTS = [
         },
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-          _component: "##builtin/screenslot",
+          _component: "@budibase/standard-components/screenslot",
           _styles: {
             normal: {
               flex: "1 1 auto",
@@ -207,7 +207,7 @@ const BASE_LAYOUTS = [
       _children: [
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-          _component: "##builtin/screenslot",
+          _component: "@budibase/standard-components/screenslot",
           _styles: {
             normal: {
               flex: "1 1 auto",
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index cd72c5e3e2..088f642d51 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -17,48 +17,40 @@ const SCHEMA = {
   },
   query: {
     create: {
-      "Airtable Record": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
     read: {
-      Table: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          view: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        view: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
     update: {
-      Fields: {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
     delete: {
-      "Airtable Ids": {
-        type: FIELD_TYPES.JSON,
-      },
+      type: FIELD_TYPES.JSON,
     },
   },
 }
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index bf2a009027..6fcfe27784 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -16,28 +16,20 @@ const SCHEMA = {
   },
   query: {
     create: {
-      "CouchDB DSL": {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
     },
     read: {
-      "CouchDB DSL": {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
     },
     update: {
-      "CouchDB Document": {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
     },
     delete: {
-      "Document ID": {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index 026d791b1f..c2b19e70e8 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -20,56 +20,48 @@ const SCHEMA = {
   },
   query: {
     create: {
-      DynamoConfig: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          customisable: true,
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
+        customisable: true,
       },
     },
     read: {
-      DynamoConfig: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          index: {
-            type: FIELD_TYPES.STRING,
-          },
-          customisable: true,
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
+        index: {
+          type: FIELD_TYPES.STRING,
+        },
+        customisable: true,
       },
     },
     update: {
-      DynamoConfig: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          customisable: true,
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
+        customisable: true,
       },
     },
     delete: {
-      "Dynamo Partition Key": {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          key: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        key: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index e8637f7c32..eba82a8924 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -13,57 +13,49 @@ const SCHEMA = {
   },
   query: {
     create: {
-      "ES Query DSL": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
     read: {
-      "ES Query DSL": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
     update: {
-      "ES Query DSL": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
     delete: {
-      "Document ID": {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
         },
       },
     },
diff --git a/packages/server/src/integrations/microsoftSqlServer.js b/packages/server/src/integrations/microsoftSqlServer.js
index 7431465065..b7713cf15b 100644
--- a/packages/server/src/integrations/microsoftSqlServer.js
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@@ -24,14 +24,10 @@ const SCHEMA = {
   },
   query: {
     create: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
     },
     read: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
     },
   },
 }
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 96457d5c2f..944d315b05 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -20,14 +20,10 @@ const SCHEMA = {
   },
   query: {
     create: {
-      JSON: {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
     },
     read: {
-      JSON: {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
     },
   },
 }
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index f295066a78..6f3e5ed2d7 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -31,24 +31,16 @@ const SCHEMA = {
   },
   query: {
     create: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
     },
     read: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
     },
     update: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
     },
     delete: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
     },
   },
 }
diff --git a/packages/server/src/integrations/s3.js b/packages/server/src/integrations/s3.js
index 30a204a175..d17906d891 100644
--- a/packages/server/src/integrations/s3.js
+++ b/packages/server/src/integrations/s3.js
@@ -19,13 +19,11 @@ const SCHEMA = {
   },
   query: {
     read: {
-      Bucket: {
-        type: "fields",
-        fields: {
-          bucket: {
-            type: "string",
-            required: true,
-          },
+      type: "fields",
+      fields: {
+        bucket: {
+          type: "string",
+          required: true,
         },
       },
     },
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 101cde76b4..2bacb8b6cf 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -228,6 +228,27 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.5.3.tgz#d2406b9a5b25ac446ba0f776b0ef3a38777a131a"
+  integrity sha512-pv8pMH5vxgvIAEl+2zjp1ScWAtqVWqeH65e9EDqX6oVK2AsnJe9r0HxywOHN5mCgOFxou972+39c6fYR9/enyw==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    svelte-spa-router "^3.0.5"
+
+"@budibase/string-templates@^0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-0.5.3.tgz#749afa7cfa43455b730540c9b792d8f13f6b444d"
+  integrity sha512-kYmQO31bi8y7A2NLqlunpGnqNMxYwC9XI312vXezljR0TxJk2RDHQ0Q9tOJ536ac5V7aRkkCmS5/GznGeb0k+Q==
+  dependencies:
+    handlebars "^4.7.6"
+    handlebars-helpers "^0.10.0"
+    handlebars-utils "^1.0.6"
+    helper-date "^1.0.1"
+    lodash "^4.17.20"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1173,6 +1194,130 @@ ansi-align@^3.0.0:
   dependencies:
     string-width "^3.0.0"
 
+ansi-bgblack@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgblack/-/ansi-bgblack-0.1.1.tgz#a68ba5007887701b6aafbe3fa0dadfdfa8ee3ca2"
+  integrity sha1-poulAHiHcBtqr74/oNrf36juPKI=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgblue@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgblue/-/ansi-bgblue-0.1.1.tgz#67bdc04edc9b9b5278969da196dea3d75c8c3613"
+  integrity sha1-Z73ATtybm1J4lp2hlt6j11yMNhM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgcyan@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgcyan/-/ansi-bgcyan-0.1.1.tgz#58489425600bde9f5507068dd969ebfdb50fe768"
+  integrity sha1-WEiUJWAL3p9VBwaN2Wnr/bUP52g=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bggreen@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bggreen/-/ansi-bggreen-0.1.1.tgz#4e3191248529943f4321e96bf131d1c13816af49"
+  integrity sha1-TjGRJIUplD9DIelr8THRwTgWr0k=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgmagenta@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgmagenta/-/ansi-bgmagenta-0.1.1.tgz#9b28432c076eaa999418672a3efbe19391c2c7a1"
+  integrity sha1-myhDLAduqpmUGGcqPvvhk5HCx6E=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgred@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgred/-/ansi-bgred-0.1.1.tgz#a76f92838382ba43290a6c1778424f984d6f1041"
+  integrity sha1-p2+Sg4OCukMpCmwXeEJPmE1vEEE=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgwhite@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgwhite/-/ansi-bgwhite-0.1.1.tgz#6504651377a58a6ececd0331994e480258e11ba8"
+  integrity sha1-ZQRlE3elim7OzQMxmU5IAljhG6g=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bgyellow@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bgyellow/-/ansi-bgyellow-0.1.1.tgz#c3fe2eb08cd476648029e6874d15a0b38f61d44f"
+  integrity sha1-w/4usIzUdmSAKeaHTRWgs49h1E8=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-black@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-black/-/ansi-black-0.1.1.tgz#f6185e889360b2545a1ec50c0bf063fc43032453"
+  integrity sha1-9hheiJNgslRaHsUMC/Bj/EMDJFM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-blue@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-blue/-/ansi-blue-0.1.1.tgz#15b804990e92fc9ca8c5476ce8f699777c21edbf"
+  integrity sha1-FbgEmQ6S/JyoxUds6PaZd3wh7b8=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-bold@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bold/-/ansi-bold-0.1.1.tgz#3e63950af5acc2ae2e670e6f67deb115d1a5f505"
+  integrity sha1-PmOVCvWswq4uZw5vZ96xFdGl9QU=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-colors@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-0.2.0.tgz#72c31de2a0d9a2ccd0cac30cc9823eeb2f6434b5"
+  integrity sha1-csMd4qDZoszQysMMyYI+6y9kNLU=
+  dependencies:
+    ansi-bgblack "^0.1.1"
+    ansi-bgblue "^0.1.1"
+    ansi-bgcyan "^0.1.1"
+    ansi-bggreen "^0.1.1"
+    ansi-bgmagenta "^0.1.1"
+    ansi-bgred "^0.1.1"
+    ansi-bgwhite "^0.1.1"
+    ansi-bgyellow "^0.1.1"
+    ansi-black "^0.1.1"
+    ansi-blue "^0.1.1"
+    ansi-bold "^0.1.1"
+    ansi-cyan "^0.1.1"
+    ansi-dim "^0.1.1"
+    ansi-gray "^0.1.1"
+    ansi-green "^0.1.1"
+    ansi-grey "^0.1.1"
+    ansi-hidden "^0.1.1"
+    ansi-inverse "^0.1.1"
+    ansi-italic "^0.1.1"
+    ansi-magenta "^0.1.1"
+    ansi-red "^0.1.1"
+    ansi-reset "^0.1.1"
+    ansi-strikethrough "^0.1.1"
+    ansi-underline "^0.1.1"
+    ansi-white "^0.1.1"
+    ansi-yellow "^0.1.1"
+    lazy-cache "^2.0.1"
+
+ansi-cyan@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
+  integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-dim@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-dim/-/ansi-dim-0.1.1.tgz#40de4c603aa8086d8e7a86b8ff998d5c36eefd6c"
+  integrity sha1-QN5MYDqoCG2Oeoa4/5mNXDbu/Ww=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-escapes@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -1185,6 +1330,62 @@ ansi-escapes@^4.2.1:
   dependencies:
     type-fest "^0.11.0"
 
+ansi-gray@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
+  integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-green@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-green/-/ansi-green-0.1.1.tgz#8a5d9a979e458d57c40e33580b37390b8e10d0f7"
+  integrity sha1-il2al55FjVfEDjNYCzc5C44Q0Pc=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-grey@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-grey/-/ansi-grey-0.1.1.tgz#59d98b6ac2ba19f8a51798e9853fba78339a33c1"
+  integrity sha1-WdmLasK6GfilF5jphT+6eDOaM8E=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-hidden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-hidden/-/ansi-hidden-0.1.1.tgz#ed6a4c498d2bb7cbb289dbf2a8d1dcc8567fae0f"
+  integrity sha1-7WpMSY0rt8uyidvyqNHcyFZ/rg8=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-inverse@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-inverse/-/ansi-inverse-0.1.1.tgz#b6af45826fe826bfb528a6c79885794355ccd269"
+  integrity sha1-tq9Fgm/oJr+1KKbHmIV5Q1XM0mk=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-italic@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-italic/-/ansi-italic-0.1.1.tgz#104743463f625c142a036739cf85eda688986f23"
+  integrity sha1-EEdDRj9iXBQqA2c5z4XtpoiYbyM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-magenta@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-magenta/-/ansi-magenta-0.1.1.tgz#063b5ba16fb3f23e1cfda2b07c0a89de11e430ae"
+  integrity sha1-BjtboW+z8j4c/aKwfAqJ3hHkMK4=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-red@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
+  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -1205,6 +1406,20 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-reset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-reset/-/ansi-reset-0.1.1.tgz#e7e71292c3c7ddcd4d62ef4a6c7c05980911c3b7"
+  integrity sha1-5+cSksPH3c1NYu9KbHwFmAkRw7c=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-strikethrough@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-strikethrough/-/ansi-strikethrough-0.1.1.tgz#d84877140b2cff07d1c93ebce69904f68885e568"
+  integrity sha1-2Eh3FAss/wfRyT685pkE9oiF5Wg=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1219,6 +1434,32 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-underline@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-underline/-/ansi-underline-0.1.1.tgz#dfc920f4c97b5977ea162df8ffb988308aaa71a4"
+  integrity sha1-38kg9Ml7WXfqFi34/7mIMIqqcaQ=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-white@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-white/-/ansi-white-0.1.1.tgz#9c77b7c193c5ee992e6011d36ec4c921b4578944"
+  integrity sha1-nHe3wZPF7pkuYBHTbsTJIbRXiUQ=
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-wrap@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
+
+ansi-yellow@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-yellow/-/ansi-yellow-0.1.1.tgz#cb9356f2f46c732f0e3199e6102955a77da83c1d"
+  integrity sha1-y5NW8vRscy8OMZnmEClVp32oPB0=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 any-base@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
@@ -1285,7 +1526,7 @@ archive-type@^4.0.0:
   dependencies:
     file-type "^4.2.0"
 
-argparse@^1.0.7:
+argparse@^1.0.10, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -1327,6 +1568,20 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
+array-sort@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-0.1.4.tgz#662855eaeb671b4188df4451b2f24a0753992b23"
+  integrity sha512-BNcM+RXxndPxiZ2rd76k6nyQLRZr2/B/sdi8pQ+Joafr5AH279L40dfokSUTp8O+AaqYjXWhblBWa2st2nc4fQ==
+  dependencies:
+    default-compare "^1.0.0"
+    get-value "^2.0.6"
+    kind-of "^5.0.2"
+
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -1404,6 +1659,20 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
+autolinker@~0.28.0:
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.28.1.tgz#0652b491881879f0775dace0cdca3233942a4e47"
+  integrity sha1-BlK0kYgYefB3XazgzcoyM5QqTkc=
+  dependencies:
+    gulp-header "^1.7.1"
+
+available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.767.0:
   version "2.771.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.771.0.tgz#ff4beb0a04d6ab1ae962c85dfb42e3e9bfe2b93b"
@@ -1796,6 +2065,14 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -2051,6 +2328,13 @@ concat-stream@^1.6.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-with-sourcemaps@*:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
+  integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
+  dependencies:
+    source-map "^0.6.1"
+
 config-chain@^1.1.11:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -2130,6 +2414,16 @@ crc@^3.4.4:
   dependencies:
     buffer "^5.1.0"
 
+create-frame@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/create-frame/-/create-frame-1.0.0.tgz#8b95f2691e3249b6080443e33d0bad9f8f6975aa"
+  integrity sha1-i5XyaR4ySbYIBEPjPQutn49pdao=
+  dependencies:
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    isobject "^3.0.0"
+    lazy-cache "^2.0.2"
+
 cross-spawn@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -2196,6 +2490,13 @@ date-utils@*:
   resolved "https://registry.yarnpkg.com/date-utils/-/date-utils-1.2.21.tgz#61fb16cdc1274b3c9acaaffe9fc69df8720a2b64"
   integrity sha1-YfsWzcEnSzyayq/+n8ad+HIKK2Q=
 
+date.js@^0.3.1:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/date.js/-/date.js-0.3.3.tgz#ef1e92332f507a638795dbb985e951882e50bbda"
+  integrity sha512-HgigOS3h3k6HnW011nAb43c5xx5rBXk8P2v/WIT9Zv4koIaVXiH2BURguI78VVp+5Qc076T7OR378JViCnZtBw==
+  dependencies:
+    debug "~3.1.0"
+
 dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -2306,6 +2607,27 @@ decompress@^4.2.1:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
+deep-equal@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
+  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
+  dependencies:
+    call-bind "^1.0.0"
+    es-get-iterator "^1.1.1"
+    get-intrinsic "^1.0.1"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.1.1"
+    isarray "^2.0.5"
+    object-is "^1.1.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.3"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2326,6 +2648,13 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+default-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
+  integrity sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==
+  dependencies:
+    kind-of "^5.0.2"
+
 default-shell@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/default-shell/-/default-shell-1.0.1.tgz#752304bddc6174f49eb29cb988feea0b8813c8bc"
@@ -2673,6 +3002,11 @@ ensure-error@^2.0.0:
   resolved "https://registry.yarnpkg.com/ensure-error/-/ensure-error-2.1.0.tgz#f11fbe383c0cf4a54850ac77acceb7bc06e0f99d"
   integrity sha512-+BMSJHw9gxiJAAp2ZR1E0TNcL09dD3lOvkl7WVm4+Y6xnes/pMetP/TzCHiDduh8ihNDjbGfuYxl7l4PA1xZ8A==
 
+ent@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+  integrity sha1-6WQhkyWiHQX0RGai9obtbOX13R0=
+
 env-paths@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
@@ -2692,6 +3026,11 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/error-symbol/-/error-symbol-0.1.0.tgz#0a4dae37d600d15a29ba453d8ef920f1844333f6"
+  integrity sha1-Ck2uN9YA0VopukU9jvkg8YRDM/Y=
+
 es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.7"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
@@ -2727,6 +3066,40 @@ es-abstract@^1.18.0-next.0:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-abstract@^1.18.0-next.1:
+  version "1.18.0-next.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.2.tgz#088101a55f0541f595e7e057199e27ddc8f3a5c2"
+  integrity sha512-Ih4ZMFHEtZupnUh6497zEL4y2+w8+1ljnCyaTa+adcoafI1GOvMwFlDjBLfWR7y9VLfrjRJe9ocuHY1PSR9jjw==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.1"
+    object-inspect "^1.9.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.3"
+    string.prototype.trimstart "^1.0.3"
+
+es-get-iterator@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
+  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.1"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3096,6 +3469,13 @@ falafel@^1.0.1:
     isarray "0.0.1"
     object-keys "^1.0.6"
 
+"falsey@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/falsey/-/falsey-0.3.2.tgz#b21c90c5c34660fc192bf909575db95b6880d597"
+  integrity sha512-lxEuefF5MBIVDmE6XeqCdM4BWk1+vYmGZtkbKZ/VFcg6uBBw6fXNEbWmxCjDdQlFc9hy450nkiWwM3VAW6G1qg==
+  dependencies:
+    kind-of "^5.0.2"
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -3284,11 +3664,18 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-for-in@^1.0.2:
+for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=
+  dependencies:
+    for-in "^1.0.1"
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -3347,6 +3734,11 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-exists-sync@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
+  integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
+
 fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -3404,6 +3796,23 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
+  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-object@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/get-object/-/get-object-0.2.0.tgz#d92ff7d5190c64530cda0543dac63a3d47fe8c0c"
+  integrity sha1-2S/31RkMZFMM2gVD2sY6PUf+jAw=
+  dependencies:
+    is-number "^2.0.2"
+    isobject "^0.2.0"
+
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -3588,6 +3997,77 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gulp-header@^1.7.1:
+  version "1.8.12"
+  resolved "https://registry.yarnpkg.com/gulp-header/-/gulp-header-1.8.12.tgz#ad306be0066599127281c4f8786660e705080a84"
+  integrity sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==
+  dependencies:
+    concat-with-sourcemaps "*"
+    lodash.template "^4.4.0"
+    through2 "^2.0.0"
+
+handlebars-helper-create-frame@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/handlebars-helper-create-frame/-/handlebars-helper-create-frame-0.1.0.tgz#8aa51d10aeb6408fcc6605d40d77356288487a03"
+  integrity sha1-iqUdEK62QI/MZgXUDXc1YohIegM=
+  dependencies:
+    create-frame "^1.0.0"
+    isobject "^3.0.0"
+
+handlebars-helpers@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/handlebars-helpers/-/handlebars-helpers-0.10.0.tgz#663d49e718928eafbead1473419ed7bc24bcd45a"
+  integrity sha512-QiyhQz58u/DbuV41VnfpE0nhy6YCH4vB514ajysV8SoKmP+DxU+pR+fahVyNECHj+jiwEN2VrvxD/34/yHaLUg==
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-sort "^0.1.4"
+    create-frame "^1.0.0"
+    define-property "^1.0.0"
+    "falsey" "^0.3.2"
+    for-in "^1.0.2"
+    for-own "^1.0.0"
+    get-object "^0.2.0"
+    get-value "^2.0.6"
+    handlebars "^4.0.11"
+    handlebars-helper-create-frame "^0.1.0"
+    handlebars-utils "^1.0.6"
+    has-value "^1.0.0"
+    helper-date "^1.0.1"
+    helper-markdown "^1.0.0"
+    helper-md "^0.2.2"
+    html-tag "^2.0.0"
+    is-even "^1.0.0"
+    is-glob "^4.0.0"
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    lazy-cache "^2.0.2"
+    logging-helpers "^1.0.0"
+    micromatch "^3.1.4"
+    relative "^3.0.2"
+    striptags "^3.1.0"
+    to-gfm-code-block "^0.1.1"
+    year "^0.2.1"
+
+handlebars-utils@^1.0.2, handlebars-utils@^1.0.4, handlebars-utils@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/handlebars-utils/-/handlebars-utils-1.0.6.tgz#cb9db43362479054782d86ffe10f47abc76357f9"
+  integrity sha512-d5mmoQXdeEqSKMtQQZ9WkiUcO1E3tPbWxluCK9hVgIDPzQa9WsKo3Lbe/sGflTe7TomHEeZaOgwIkyIr1kfzkw==
+  dependencies:
+    kind-of "^6.0.0"
+    typeof-article "^0.1.1"
+
+handlebars@^4.0.11, handlebars@^4.7.6:
+  version "4.7.6"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e"
+  integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.0"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -3671,6 +4151,39 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+helper-date@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/helper-date/-/helper-date-1.0.1.tgz#12fedea3ad8e44a7ca4c4efb0ff4104a5120cffb"
+  integrity sha512-wU3VOwwTJvGr/w5rZr3cprPHO+hIhlblTJHD6aFBrKLuNbf4lAmkawd2iK3c6NbJEvY7HAmDpqjOFSI5/+Ey2w==
+  dependencies:
+    date.js "^0.3.1"
+    handlebars-utils "^1.0.4"
+    moment "^2.18.1"
+
+helper-markdown@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/helper-markdown/-/helper-markdown-1.0.0.tgz#ee7e9fc554675007d37eb90f7853b13ce74f3e10"
+  integrity sha512-AnDqMS4ejkQK0MXze7pA9TM3pu01ZY+XXsES6gEE0RmCGk5/NIfvTn0NmItfyDOjRAzyo9z6X7YHbHX4PzIvOA==
+  dependencies:
+    handlebars-utils "^1.0.2"
+    highlight.js "^9.12.0"
+    remarkable "^1.7.1"
+
+helper-md@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/helper-md/-/helper-md-0.2.2.tgz#c1f59d7e55bbae23362fd8a0e971607aec69d41f"
+  integrity sha1-wfWdflW7riM2L9ig6XFgeuxp1B8=
+  dependencies:
+    ent "^2.2.0"
+    extend-shallow "^2.0.1"
+    fs-exists-sync "^0.1.0"
+    remarkable "^1.6.2"
+
+highlight.js@^9.12.0:
+  version "9.18.5"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -3700,6 +4213,14 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-tag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-tag/-/html-tag-2.0.0.tgz#36c3bc8d816fd30b570d5764a497a641640c2fed"
+  integrity sha512-XxzooSo6oBoxBEUazgjdXj7VwTn/iSTSZzTYKzYY6I916tkaYzypHxy+pbVU1h+0UQ9JlVf5XkNQyxOAiiQO1g==
+  dependencies:
+    is-self-closing "^1.0.1"
+    kind-of "^6.0.0"
+
 http-assert@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.4.1.tgz#c5f725d677aa7e873ef736199b89686cceb37878"
@@ -3857,6 +4378,11 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
+info-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/info-symbol/-/info-symbol-0.1.0.tgz#27841d72867ddb4242cd612d79c10633881c6a78"
+  integrity sha1-J4QdcoZ920JCzWEtecEGM4gcang=
+
 inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -3928,11 +4454,23 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
+  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3940,6 +4478,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
+  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3976,7 +4521,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4004,6 +4549,13 @@ is-docker@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
   integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
 
+is-even@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-even/-/is-even-1.0.0.tgz#76b5055fbad8d294a86b6a949015e1c97b717c06"
+  integrity sha1-drUFX7rY0pSoa2qUkBXhyXtxfAY=
+  dependencies:
+    is-odd "^0.1.2"
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -4061,6 +4613,11 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
@@ -4071,11 +4628,28 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
+is-negative-zero@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
+  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
+
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
+is-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
+is-number@^2.0.2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
+  dependencies:
+    kind-of "^3.0.2"
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4083,6 +4657,11 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -4098,6 +4677,13 @@ is-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
   integrity sha1-iVJojF7C/9awPsyF52ngKQMINHA=
 
+is-odd@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-0.1.2.tgz#bc573b5ce371ef2aad6e6f49799b72bef13978a7"
+  integrity sha1-vFc7XONx7yqtbm9JeZtyvvE5eKc=
+  dependencies:
+    is-number "^3.0.0"
+
 is-path-inside@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
@@ -4127,12 +4713,29 @@ is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
+is-self-closing@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-self-closing/-/is-self-closing-1.0.1.tgz#5f406b527c7b12610176320338af0fa3896416e4"
+  integrity sha512-E+60FomW7Blv5GXTlYee2KDrnG6srxF7Xt1SjrhWUGUEsTFIqY/nq2y3DaftCsgUMdh89V07IVfhY9KIJhLezg==
+  dependencies:
+    self-closing-tags "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-symbol@^1.0.2:
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
@@ -4148,6 +4751,17 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
+is-typed-array@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
+  integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4158,6 +4772,16 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4190,6 +4814,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -4200,6 +4829,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+isobject@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-0.2.0.tgz#a3432192f39b910b5f02cc989487836ec70aa85e"
+  integrity sha1-o0MhkvObkQtfAsyYlIeDbscKqF4=
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -4878,7 +5512,7 @@ keyv@^3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.1.0, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
@@ -4892,7 +5526,7 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^5.0.0:
+kind-of@^5.0.0, kind-of@^5.0.2:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
@@ -5022,6 +5656,13 @@ latest-version@^5.0.0:
   dependencies:
     package-json "^6.3.0"
 
+lazy-cache@^2.0.1, lazy-cache@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
+  integrity sha1-uRkKT5EzVGlIQIWfio9whNiCImQ=
+  dependencies:
+    set-getter "^0.1.0"
+
 lazy-val@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.4.tgz#882636a7245c2cfe6e0a4e3ba6c5d68a137e5c65"
@@ -5200,6 +5841,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -5270,6 +5916,21 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.template@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
 lodash.without@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
@@ -5280,11 +5941,40 @@ lodash.xor@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.xor/-/lodash.xor-4.5.0.tgz#4d48ed7e98095b0632582ba714d3ff8ae8fb1db6"
   integrity sha1-TUjtfpgJWwYyWCunFNP/iuj7HbY=
 
-lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.3:
+lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+log-ok@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/log-ok/-/log-ok-0.1.1.tgz#bea3dd36acd0b8a7240d78736b5b97c65444a334"
+  integrity sha1-vqPdNqzQuKckDXhza1uXxlREozQ=
+  dependencies:
+    ansi-green "^0.1.1"
+    success-symbol "^0.1.0"
+
+log-utils@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/log-utils/-/log-utils-0.2.1.tgz#a4c217a0dd9a50515d9b920206091ab3d4e031cf"
+  integrity sha1-pMIXoN2aUFFdm5ICBgkas9TgMc8=
+  dependencies:
+    ansi-colors "^0.2.0"
+    error-symbol "^0.1.0"
+    info-symbol "^0.1.0"
+    log-ok "^0.1.1"
+    success-symbol "^0.1.0"
+    time-stamp "^1.0.1"
+    warning-symbol "^0.1.0"
+
+logging-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/logging-helpers/-/logging-helpers-1.0.0.tgz#b5a37b32ad53eb0137c58c7898a47b175ddb7c36"
+  integrity sha512-qyIh2goLt1sOgQQrrIWuwkRjUx4NUcEqEGAcYqD8VOnOC6ItwkrVE8/tA4smGpjzyp4Svhc6RodDp9IO5ghpyA==
+  dependencies:
+    isobject "^3.0.0"
+    log-utils "^0.2.1"
+
 loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -5507,6 +6197,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.18.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 mongodb@^3.6.3:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-3.6.3.tgz#eddaed0cc3598474d7a15f0f2a5b04848489fd05"
@@ -5544,6 +6239,11 @@ mssql@^6.2.3:
     tarn "^1.1.5"
     tedious "^6.6.2"
 
+mustache@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.1.0.tgz#8c1b042238a982d2eb2d30efc6c14296ae3f699d"
+  integrity sha512-0FsgP/WVq4mKyjolIyX+Z9Bd+3WS8GOwoUTyKXT5cTYMGeauNTi2HPCwERqseC1IHAy0Z7MDZnJBfjabd4O8GQ==
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -5601,6 +6301,11 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
+neo-async@^2.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
 new-github-issue-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz#e17be1f665a92de465926603e44b9f8685630c1d"
@@ -5755,6 +6460,19 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-inspect@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
+object-is@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
+  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5777,6 +6495,16 @@ object.assign@^4.1.1:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
 object.getownpropertydescriptors@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
@@ -6710,6 +7438,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
+  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+regexparam@1.3.0, regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -6729,6 +7470,21 @@ registry-url@^5.0.0:
   dependencies:
     rc "^1.2.8"
 
+relative@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/relative/-/relative-3.0.2.tgz#0dcd8ec54a5d35a3c15e104503d65375b5a5367f"
+  integrity sha1-Dc2OxUpdNaPBXhBFA9ZTdbWlNn8=
+  dependencies:
+    isobject "^2.0.0"
+
+remarkable@^1.6.2, remarkable@^1.7.1:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.4.tgz#19073cb960398c87a7d6546eaa5e50d2022fcd00"
+  integrity sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==
+  dependencies:
+    argparse "^1.0.10"
+    autolinker "~0.28.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -6992,6 +7748,11 @@ seek-bzip@^1.0.5:
   dependencies:
     commander "^2.8.1"
 
+self-closing-tags@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/self-closing-tags/-/self-closing-tags-1.0.1.tgz#6c5fa497994bb826b484216916371accee490a5d"
+  integrity sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA==
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -7036,6 +7797,13 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-getter@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
+  integrity sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=
+  dependencies:
+    to-object-path "^0.3.0"
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -7094,6 +7862,15 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+side-channel@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7381,6 +8158,14 @@ string.prototype.trimend@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
+string.prototype.trimend@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b"
+  integrity sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
@@ -7389,6 +8174,14 @@ string.prototype.trimstart@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
+string.prototype.trimstart@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz#9b4cb590e123bb36564401d59824298de50fd5aa"
+  integrity sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -7477,6 +8270,11 @@ strip-outer@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+striptags@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.1.1.tgz#c8c3e7fdd6fb4bb3a32a3b752e5b5e3e38093ebd"
+  integrity sha1-yMPn/db7S7OjKjt1LltePjgJPr0=
+
 sublevel-pouchdb@7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/sublevel-pouchdb/-/sublevel-pouchdb-7.2.2.tgz#49e46cd37883bf7ff5006d7c5b9bcc7bcc1f422f"
@@ -7487,6 +8285,11 @@ sublevel-pouchdb@7.2.2:
     ltgt "2.2.1"
     readable-stream "1.1.14"
 
+success-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/success-symbol/-/success-symbol-0.1.0.tgz#24022e486f3bf1cdca094283b769c472d3b72897"
+  integrity sha1-JAIuSG878c3KCUKDt2nEctO3KJc=
+
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -7539,6 +8342,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-spa-router@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
+  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
+  dependencies:
+    regexparam "1.3.0"
+
 svelte@^3.30.0:
   version "3.31.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.2.tgz#d2ddf6cacbb95e4cc3796207510b660a25586324"
@@ -7677,6 +8487,11 @@ through@^2.3.6, through@^2.3.8, through@~2.3.4:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+time-stamp@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
+  integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
+
 timed-out@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
@@ -7719,6 +8534,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
+to-gfm-code-block@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/to-gfm-code-block/-/to-gfm-code-block-0.1.1.tgz#25d045a5fae553189e9637b590900da732d8aa82"
+  integrity sha1-JdBFpfrlUxielje1kJANpzLYqoI=
+
 to-json-schema@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/to-json-schema/-/to-json-schema-0.2.5.tgz#ef3c3f11ad64460dcfbdbafd0fd525d69d62a98f"
@@ -7892,6 +8712,18 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typeof-article@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/typeof-article/-/typeof-article-0.1.1.tgz#9f07e733c3fbb646ffa9e61c08debacd460e06af"
+  integrity sha1-nwfnM8P7tkb/qeYcCN66zUYOBq8=
+  dependencies:
+    kind-of "^3.1.0"
+
+uglify-js@^3.1.4:
+  version "3.11.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.11.4.tgz#b47b7ae99d4bd1dca65b53aaa69caa0909e6fadf"
+  integrity sha512-FyYnoxVL1D6+jDGQpbK5jW6y/2JlVfRfEeQ67BPCUg5wfCjaKOpr2XeceE4QL+MkhxliLtf5EbrMDZgzpt2CNw==
+
 unbzip2-stream@^1.0.9:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
@@ -8115,6 +8947,11 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning-symbol@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/warning-symbol/-/warning-symbol-0.1.0.tgz#bb31dd11b7a0f9d67ab2ed95f457b65825bbad21"
+  integrity sha1-uzHdEbeg+dZ6su2V9Fe2WCW7rSE=
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -8150,11 +8987,45 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -8174,6 +9045,11 @@ word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+wordwrap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
@@ -8380,6 +9256,11 @@ yauzl@^2.10.0, yauzl@^2.4.2:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+year@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/year/-/year-0.2.1.tgz#4083ae520a318b23ec86037f3000cb892bdf9bb0"
+  integrity sha1-QIOuUgoxiyPshgN/MADLiSvfm7A=
+
 ylru@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"
diff --git a/packages/standard-components/README.md b/packages/standard-components/README.md
index 71e531fc9d..67729ac3db 100644
--- a/packages/standard-components/README.md
+++ b/packages/standard-components/README.md
@@ -1,33 +1,43 @@
-*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*
+## Manifest
 
----
-
-# component-template
-
-A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit):
-
-```bash
-npx degit sveltejs/component-template my-new-component
-cd my-new-component
-npm install # or yarn
-```
-
-Your component's source code lives in `src/index.html`.
-
-TODO
-
-* [ ] some firm opinions about the best way to test components
-* [ ] update `degit` so that it automates some of the setup work
+The `manifest.json` file exports the definitions of all components available in this version
+of the client library. The manifest is used by the builder to correctly display components and
+their settings, and know how to correctly interact with them.
 
 
-## Setting up
 
-* Run `npm init` (or `yarn init`)
-* Replace this README with your own
+### Component Definitions
+
+The object key is the name of the component, as exported by `index.js`.
+
+- **name** - the name displayed in the builder
+- **description** - not currently used
+- **icon** - the icon displayed in the builder
+- **hasChildren** - whether the component accepts children or not
+- **styleable** - whether the component accepts design props or not
+- **dataProvider** - whether the component provides a data context or not
+- **bindable** - whether the components provides a bindable value or not
+- **settings** - array of settings displayed in the builder
+
+###Settings Definitions
+
+The `type` field in each setting is used by the builder to know which component to use to display
+the setting, so it's important that this field is correct. The valid options are:
+
+- **text** - A text field
+- **select** - A select dropdown. Accompany these with an `options` field to provide options
+- **datasource** - A datasource (e.g. a table or a view)
+- **boolean** - A boolean field
+- **number** - A numeric text field
+- **detailURL** - A URL to a page which displays details about a row.
+Exclusively used for grids which link to row details.
 
 
-## Consuming components
+The available fields in each setting definition are:
 
-Your package.json has a `"svelte"` field pointing to `src/index.html`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.**
-
-For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`index.mjs`) and a UMD script (`index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.
+- **type** - the type of field which determines which component the builder will use
+to display the setting
+- **key** - the key of this setting in the component
+- **label** - the label displayed in the builder
+- **defaultValue** - the default value of the setting
+- **placeholder** - the placeholder for the setting
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
deleted file mode 100644
index fb924c08ee..0000000000
--- a/packages/standard-components/components.json
+++ /dev/null
@@ -1,678 +0,0 @@
-{
-	"_lib": "./dist/index.js",
-	"_templates": {
-		"saveRowButton": {
-			"description": "Save row button",
-			"component": "button"
-		}
-	},
-	"embed": {
-		"name": "Embed",
-		"description": "Embed stuff",
-		"props": {
-			"embed": "string"
-		}
-	},
-	"navigation": {
-		"name": "Navigation",
-		"description": "A basic header navigation component",
-		"children": true,
-		"props": {
-			"logoUrl": "string"
-		}
-	},
-	"button": {
-		"name": "Button",
-		"description": "an html <button />",
-		"props": {
-			"text": "string",
-			"disabled": "bool",
-			"onClick": "event"
-		},
-		"tags": [
-			"layout"
-		],
-		"presets": {
-			"primary": {
-				"contentText": "Primary Button Preset",
-				"color": "papayawhip",
-				"padding": "20px",
-				"background": "blue"
-			},
-			"secondary": {
-				"contentText": "Secondary Button Preset",
-				"color": "rebeccapurple",
-				"padding": "10px",
-				"background": "#fff",
-				"border": "1px solid red"
-			},
-			"error": {
-				"contentText": "ERROR",
-				"color": "red",
-				"padding": "10px",
-				"border": "1px solid red"
-			}
-		}
-	},
-	"login": {
-		"name": "Login Control",
-		"description": "A control that accepts email, password an also handles password resets",
-		"props": {
-			"logo": "string",
-			"title": "string",
-			"buttonText": "string"
-		},
-		"tags": [
-			"login",
-			"credentials",
-			"password",
-			"logon"
-		]
-	},
-	"input": {
-		"name": "Textfield",
-		"bindable": "value",
-		"description": "An HTML input",
-		"props": {
-			"type": {
-				"type": "options",
-				"options": [
-					"text",
-					"password",
-					"checkbox",
-					"color",
-					"date",
-					"datetime-local",
-					"email",
-					"file",
-					"hidden",
-					"image",
-					"month",
-					"number",
-					"radio",
-					"range",
-					"reset",
-					"search",
-					"submit",
-					"tel",
-					"time",
-					"week"
-				],
-				"default": "text"
-			}
-		},
-		"tags": [
-			"form"
-		]
-	},
-	"text": {
-		"name": "Text",
-		"description": "stylable block of text",
-		"props": {
-			"text": "string",
-			"type": {
-				"type": "string",
-				"default": "none"
-			}
-		},
-		"tags": [
-			"div",
-			"container"
-		]
-	},
-	"richtext": {
-		"name": "Rich Text",
-		"description": "A component that allows the user to enter long form text.",
-		"props": {
-			"value": "string"
-		}
-	},
-	"icon": {
-		"description": "A HTML icon tag",
-		"props": {
-			"icon": "string",
-			"size": {
-				"type": "string",
-				"default": "md"
-			},
-			"color": {
-				"type": "string",
-				"default": "#000"
-			}
-		}
-	},
-	"datagrid": {
-		"name": "Grid",
-		"description": "a datagrid component with functionality to add, remove and edit rows.",
-		"data": true,
-		"props": {
-			"datasource": "tables",
-			"editable": "bool",
-			"theme": {
-				"type": "options",
-				"default": "alpine",
-				"options": [
-					"alpine",
-					"alpine-dark",
-					"balham",
-					"balham-dark",
-					"material"
-				]
-			},
-			"height": {
-				"type": "number",
-				"default": "540"
-			},
-			"pagination": {
-				"type": "bool",
-				"default": true
-			},
-			"detailUrl": "string"
-		}
-	},
-	"dataform": {
-		"name": "Form",
-		"description": "an HTML table that fetches data from a table or view and displays it.",
-		"data": true,
-		"props": {}
-	},
-	"dataformwide": {
-		"name": "Form Wide",
-		"description": "an HTML table that fetches data from a table or view and displays it.",
-		"data": true,
-		"props": {}
-	},
-	"list": {
-		"name": "Repeater",
-		"description": "A configurable data list that attaches to your backend tables.",
-		"context": "datasource",
-		"children": true,
-		"data": true,
-		"props": {
-			"datasource": "tables"
-		}
-	},
-	"stackedlist": {
-		"name": "Stacked List",
-		"description": "A stacked list component for displaying information",
-		"props": {
-			"imageUrl": "string",
-			"heading": "string",
-			"text1": "string",
-			"text2": "string",
-			"text3": "string",
-			"destinationUrl": "string"
-		}
-	},
-	"rowdetail": {
-		"name": "Row Detail",
-		"description": "Loads a row, using an ID in the url",
-		"context": "table",
-		"children": true,
-		"data": true,
-		"baseComponent": true,
-		"props": {
-			"table": "tables"
-		}
-	},
-	"newrow": {
-		"name": "New Row",
-		"description": "Prepares a new row for creation",
-		"context": "table",
-		"children": true,
-		"data": true,
-		"baseComponent": true,
-		"props": {
-			"table": "tables"
-		}
-	},
-	"card": {
-		"name": "Card",
-		"props": {
-			"imageUrl": "string",
-			"heading": "string",
-			"description": "string",
-			"linkText": "string",
-			"linkUrl": "string",
-			"linkColor": {
-				"type": "string",
-				"default": "#000"
-			},
-			"linkHoverColor": {
-				"type": "string",
-				"default": "#000"
-			},
-			"imageHeight": {
-				"type": "options",
-				"default": "20rem",
-				"options": [
-					"12rem",
-					"16rem",
-					"20rem",
-					"24rem"
-				]
-			},
-			"cardWidth": {
-				"type": "options",
-				"default": "20rem",
-				"options": [
-					"16rem",
-					"20rem",
-					"24rem"
-				]
-			}
-		}
-	},
-	"cardstat": {
-		"name": "Stat Card",
-		"props": {
-			"title": "string",
-			"value": "string",
-			"label": "string"
-		}
-	},
-	"cardhorizontal": {
-		"name": "Horizontal Card",
-		"props": {
-			"imageUrl": "string",
-			"heading": "string",
-			"description": "string",
-			"subtext": "string",
-			"linkText": "string",
-			"linkUrl": "string",
-			"linkColor": {
-				"type": "string",
-				"default": "#000"
-			},
-			"linkHoverColor": {
-				"type": "string",
-				"default": "#000"
-			},
-			"imageWidth": {
-				"type": "options",
-				"default": "8rem",
-				"options": [
-					"8rem",
-					"12rem",
-					"16rem"
-				]
-			},
-			"cardWidth": {
-				"type": "options",
-				"default": "32rem",
-				"options": [
-					"24rem",
-					"28rem",
-					"32rem",
-					"40rem",
-					"48rem",
-					"60rem",
-					"100%"
-				]
-			},
-			"imageHeight": {
-				"type": "options",
-				"default": "8rem",
-				"options": [
-					"8rem",
-					"12rem",
-					"16rem"
-				]
-			}
-		}
-	},
-	"bar": {
-		"description": "Bar Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumns": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"dataLabels": "bool",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"legend": "bool",
-			"stacked": "bool",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"line": {
-		"description": "Line Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumns": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"dataLabels": {
-				"type": "bool",
-				"default": false
-			},
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"curve": {
-				"type": "options",
-				"options": [
-					"Smooth",
-					"Straight",
-					"Stepline"
-				],
-				"default": "Smooth"
-			},
-			"legend": "bool",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"area": {
-		"description": "Area Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumns": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"dataLabels": {
-				"type": "bool",
-				"default": false
-			},
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"curve": {
-				"type": "options",
-				"options": [
-					"Smooth",
-					"Straight",
-					"Stepline"
-				],
-				"default": "Smooth"
-			},
-			"legend": "bool",
-			"stacked": {
-				"type": "bool",
-				"default": true
-			},
-			"gradient": "bool",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"pie": {
-		"description": "Pie Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumn": "string",
-			"height": {
-				"type": "string",
-				"default": "200"
-			},
-			"width": "string",
-			"dataLabels": "bool",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"legend": {
-				"type": "bool",
-				"default": true
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"donut": {
-		"description": "Donut Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumn": "string",
-			"height": {
-				"type": "string",
-				"default": "200"
-			},
-			"width": "string",
-			"dataLabels": "bool",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"legend": {
-				"type": "bool",
-				"default": true
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"candlestick": {
-		"description": "Candlestick Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"dateColumn": "string",
-			"openColumn": "string",
-			"closeColumn": "string",
-			"highColumn": "string",
-			"lowColumn": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			}
-		}
-	},
-	"datepicker": {
-		"name": "Date Picker",
-		"description": "Date Picker",
-		"bindable": "value",
-		"props": {
-			"placeholder": "string"
-		}
-	},
-	"link": {
-		"name": "Link",
-		"description": "an HTML anchor <a> tag",
-		"props": {
-			"url": "string",
-			"openInNewTab": "bool",
-			"text": "string"
-		}
-	},
-	"image": {
-		"description": "an HTML <img> tag",
-		"props": {
-			"url": "string"
-		}
-	},
-	"container": {
-		"name": "Container",
-		"children": true,
-		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
-		"props": {
-			"type": {
-				"type": "options",
-				"options": [
-					"article",
-					"aside",
-					"details",
-					"div",
-					"firgure",
-					"figcaption",
-					"footer",
-					"header",
-					"main",
-					"mark",
-					"nav",
-					"paragraph",
-					"summary"
-				],
-				"default": "div"
-			}
-		},
-		"baseComponent": true,
-		"tags": [
-			"div",
-			"container",
-			"layout"
-		]
-	},
-	"heading": {
-		"name": "Heading",
-		"description": "An HTML H1 - H6 tag",
-		"props": {
-			"text": "string",
-			"type": {
-				"type": "options",
-				"default": "h1",
-				"options": [
-					"h1",
-					"h2",
-					"h3",
-					"h4",
-					"h5",
-					"h6"
-				]
-			}
-		},
-		"tags": []
-	}
-}
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
new file mode 100644
index 0000000000..65352761b9
--- /dev/null
+++ b/packages/standard-components/manifest.json
@@ -0,0 +1,1103 @@
+{
+  "container": {
+    "name": "Container",
+    "description": "This component contains things within itself",
+    "icon": "ri-layout-column-line",
+    "hasChildren": true,
+    "styleable": true,
+    "settings": [
+      {
+        "type": "select",
+        "key": "type",
+        "label": "Type",
+        "defaultValue": "div",
+        "options": [
+          "article",
+          "aside",
+          "details",
+          "div",
+          "figure",
+          "figcaption",
+          "footer",
+          "header",
+          "main",
+          "mark",
+          "nav",
+          "paragraph",
+          "summary"
+        ]
+      }
+    ]
+  },
+  "datagrid": {
+    "name": "Grid",
+    "description": "A datagrid component with functionality to add, remove and edit rows.",
+    "icon": "ri-grid-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "datasource",
+        "label": "Source",
+        "key": "datasource"
+      },
+      {
+        "type": "detailScreen",
+        "label": "Detail URL",
+        "key": "detailUrl"
+      },
+      {
+        "type": "boolean",
+        "label": "Editable",
+        "key": "editable"
+      },
+      {
+        "type": "select",
+        "label": "Theme",
+        "key": "theme",
+        "options": ["alpine", "alpine-dark", "balham", "balham-dark", "material"],
+        "defaultValue": "alpine"
+      },
+      {
+        "type": "number",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "500"
+      },
+      {
+        "type": "boolean",
+        "label": "Pagination",
+        "key": "pagination"
+      }
+    ]
+  },
+  "screenslot": {
+    "name": "Screenslot",
+    "icon": "ri-artboard-2-line",
+    "description": "Contains your app screens",
+    "styleable": true
+  },
+  "button": {
+    "name": "Button",
+    "description": "A basic html button that is ready for styling",
+    "icon": "ri-share-box-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled"
+      },
+      {
+        "type": "event",
+        "label": "On Click",
+        "key": "onClick"
+      }
+    ]
+  },
+  "list": {
+    "name": "Repeater",
+    "description": "A configurable data list that attaches to your backend tables.",
+    "icon": "ri-list-check-2",
+    "styleable": true,
+    "hasChildren": true,
+    "dataProvider": true,
+    "settings": [
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      }
+    ]
+  },
+  "dataform": {
+    "name": "Form",
+    "icon": "ri-file-edit-line",
+    "styleable": true
+  },
+  "dataformwide": {
+    "name": "Wide Form",
+    "icon": "ri-file-edit-line",
+    "styleable": true
+  },
+  "input": {
+    "name": "Text Field",
+    "description": "A textfield component that allows the user to input text.",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "bindable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "label": "Type",
+        "key": "type",
+        "defaultValue": "text",
+        "options": ["text", "password"]
+      }
+    ]
+  },
+  "richtext": {
+    "name": "Rich Text",
+    "description": "A component that allows the user to enter long form text.",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "bindable": true
+  },
+  "datepicker": {
+    "name": "Date Picker",
+    "description": "A basic date picker component",
+    "icon": "ri-calendar-line",
+    "styleable": true,
+    "bindable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
+      }
+    ]
+  },
+  "stackedlist": {
+    "name": "Stacked List",
+    "icon": "ri-archive-drawer-line",
+    "description": "A basic card component that can contain content and actions.",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Image",
+        "key": "imageUrl"
+      },
+      {
+        "type": "text",
+        "label": "Heading",
+        "key": "heading"
+      },
+      {
+        "type": "text",
+        "label": "Text 1",
+        "key": "text1"
+      },
+      {
+        "type": "text",
+        "label": "Text 2",
+        "key": "text2"
+      },
+      {
+        "type": "text",
+        "label": "Text 3",
+        "key": "text3"
+      },
+      {
+        "type": "screen",
+        "label": "Link URL",
+        "key": "destinationUrl"
+      }
+    ]
+  },
+  "card": {
+    "name": "Vertical Card",
+    "description": "A basic card component that can contain content and actions.",
+    "icon": "ri-layout-column-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Image",
+        "key": "imageUrl"
+      },
+      {
+        "type": "text",
+        "label": "Heading",
+        "key": "heading"
+      },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "description"
+      },
+      {
+        "type": "text",
+        "label": "Link Text",
+        "key": "linkText"
+      },
+      {
+        "type": "screen",
+        "label": "Link Url",
+        "key": "linkUrl"
+      },
+      {
+        "type": "color",
+        "label": "Link Color",
+        "key": "linkColor",
+        "defaultValue": "#000"
+      },
+      {
+        "type": "color",
+        "label": "Hover Color",
+        "key": "linkHoverColor",
+        "defaultValue": "#222"
+      },
+      {
+        "type": "select",
+        "label": "Image Height",
+        "key": "imageHeight",
+        "options": ["auto", "12rem", "16rem", "20rem", "24rem"],
+        "defaultValue": "auto"
+      },
+      {
+        "type": "select",
+        "label": "Card Width",
+        "key": "cardWidth",
+        "options": ["16rem", "20rem", "24rem"],
+        "defaultValue": "20rem"
+      }
+    ]
+  },
+  "text": {
+    "name": "Paragraph",
+    "description": "A component for displaying paragraph text.",
+    "icon": "ri-paragraph",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      }
+    ]
+  },
+  "heading": {
+    "name": "Headline",
+    "icon": "ri-heading",
+    "description": "A component for displaying heading text",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "key": "text",
+        "label": "Text"
+      },
+      {
+        "type": "select",
+        "key": "type",
+        "label": "Type",
+        "options": ["h1", "h2", "h3", "h4", "h5", "h6"],
+        "defaultValue": "h1"
+      }
+    ]
+  },
+  "image": {
+    "name": "Image",
+    "description": "A basic component for displaying images",
+    "icon": "ri-image-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "URL",
+        "key": "url"
+      }
+    ]
+  },
+  "icon": {
+    "name": "Icon",
+    "description": "A basic component for displaying icons",
+    "icon": "ri-sun-fill",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "icon",
+        "label": "Icon",
+        "key": "icon"
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "md",
+        "options": [
+          { "value": "ri-xxs", "label": "xxs" },
+          { "value": "ri-xs", "label": "xs" },
+          { "value": "ri-sm", "label": "sm" },
+          { "value": "ri-1x", "label": "md" },
+          { "value": "ri-lg", "label": "lg" },
+          { "value": "ri-xl", "label": "xl" },
+          { "value": "ri-2x", "label": "2x" },
+          { "value": "ri-3x", "label": "3x" },
+          { "value": "ri-4x", "label": "4x" },
+          { "value": "ri-5x", "label": "5x" },
+          { "value": "ri-6x", "label": "6x" },
+          { "value": "ri-7x", "label": "7x" },
+          { "value": "ri-8x", "label": "8x" },
+          { "value": "ri-9x", "label": "9x" },
+          { "value": "ri-10x", "label": "10x" }
+        ]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "defaultValue": "#000"
+      }
+    ]
+  },
+  "login": {
+    "name": "Login Form",
+    "description": "A component that automatically generates a login screen for your app.",
+    "icon": "ri-login-box-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Logo",
+        "key": "logo"
+      },
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "text",
+        "label": "Button Text",
+        "key": "buttonText"
+      }
+    ]
+  },
+  "navigation": {
+    "name": "Nav Bar",
+    "description": "A component for handling the navigation within your app.",
+    "icon": "ri-navigation-line",
+    "styleable": true,
+    "hasChildren": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Logo URL",
+        "key": "logoUrl"
+      }
+    ]
+  },
+  "link": {
+    "name": "Link",
+    "description": "A basic link component for internal and external links",
+    "icon": "ri-link",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      },
+      {
+        "type": "screen",
+        "label": "URL",
+        "key": "url"
+      },
+      {
+        "type": "boolean",
+        "label": "New Tab",
+        "key": "openInNewTab"
+      }
+    ]
+  },
+  "rowdetail": {
+    "name": "Row Detail",
+    "description": "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
+    "icon": "ri-profile-line",
+    "styleable": true,
+    "hasChildren": true,
+    "dataProvider": true,
+    "settings": [
+      {
+        "type": "table",
+        "label": "Table",
+        "key": "table"
+      }
+    ]
+  },
+  "newrow": {
+    "name": "New Row",
+    "description": "Sets up a new row for creation, which can be used with {{ context }}, in children",
+    "icon": "ri-profile-line",
+    "hasChildren": true,
+    "styleable": true,
+    "dataProvider": true,
+    "settings": [
+      {
+        "type": "table",
+        "label": "Table",
+        "key": "table"
+      }
+    ]
+  },
+  "cardhorizontal": {
+    "name": "Horizontal Card",
+    "description": "A basic card component that can contain content and actions.",
+    "icon": "ri-layout-row-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Image",
+        "key": "imageUrl"
+      },
+      {
+        "type": "text",
+        "label": "Heading",
+        "key": "heading"
+      },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "description"
+      },
+      {
+        "type": "text",
+        "label": "Subtext",
+        "key": "subtext"
+      },
+      {
+        "type": "text",
+        "label": "Link Text",
+        "key": "linkText"
+      },
+      {
+        "type": "screen",
+        "label": "Link URL",
+        "key": "linkUrl"
+      },
+      {
+        "type": "color",
+        "label": "Link Color",
+        "key": "linkColor",
+        "defaultValue": "#000"
+      },
+      {
+        "type": "color",
+        "label": "Hover Color",
+        "key": "linkHoverColor",
+        "defaultValue": "#222"
+      },
+      {
+        "type": "select",
+        "label": "Card Width",
+        "key": "cardWidth",
+        "options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"],
+        "defaultValue": "32rem"
+      },
+      {
+        "type": "select",
+        "label": "Image Width",
+        "key": "imageWidth",
+        "options": ["auto", "8rem", "12rem", "16rem"],
+        "defaultValue": "8rem"
+      },
+      {
+        "type": "select",
+        "label": "Image Height",
+        "key": "imageHeight",
+        "options": ["auto", "8rem", "12rem", "16rem", "auto"],
+        "defaultValue": "auto"
+      }
+    ]
+  },
+  "cardstat": {
+    "name": "Stat Card",
+    "description": "A card component for displaying numbers.",
+    "icon": "ri-dual-sim-2-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title",
+        "placeholder": "Total Revenue"
+      },
+      {
+        "type": "text",
+        "label": "Value",
+        "key": "value",
+        "placeholder": "$1,981,983"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label",
+        "placeholder": "Stripe"
+      }
+    ]
+  },
+  "embed": {
+    "name": "Embed",
+    "icon": "ri-code-line",
+    "description": "Embed content from 3rd party sources",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Embed",
+        "key": "embed"
+      }
+    ]
+  },
+  "bar": {
+    "name": "Bar Chart",
+    "description": "Bar chart",
+    "icon": "ri-bar-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "multifield",
+        "label": "Data Cols.",
+        "key": "valueColumns",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Stacked",
+        "key": "stacked",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "line": {
+    "name": "Line Chart",
+    "description": "Line chart",
+    "icon": "ri-line-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "multifield",
+        "label": "Data Cols.",
+        "key": "valueColumns",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Curve",
+        "key": "curve",
+        "options": ["Smooth", "Straight", "Stepline"],
+        "defaultValue": "Smooth"
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "area": {
+    "name": "Area Chart",
+    "description": "Line chart",
+    "icon": "ri-line-chart-fill",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "multifield",
+        "label": "Data Cols.",
+        "key": "valueColumns",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Curve",
+        "key": "curve",
+        "options": ["Smooth", "Straight", "Stepline"],
+        "defaultValue": "Smooth"
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Stacked",
+        "key": "stacked",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Gradient",
+        "key": "gradient",
+        "defaultValue": false
+      }
+    ]
+  },
+  "pie": {
+    "name": "Pie Chart",
+    "description": "Pie chart",
+    "icon": "ri-pie-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Data Col.",
+        "key": "valueColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "donut": {
+    "name": "Donut Chart",
+    "description": "Donut chart",
+    "icon": "ri-donut-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Data Col.",
+        "key": "valueColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "candlestick": {
+    "name": "Candlestick Chart",
+    "description": "Candlestick chart",
+    "icon": "ri-stock-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Date Col.",
+        "key": "dateColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Open Col.",
+        "key": "openColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Close Col.",
+        "key": "closeColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "High Col.",
+        "key": "highColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Low Col.",
+        "key": "lowColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      }
+    ]
+  }
+}
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index e2a98bb74d..7ce4256844 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -6,7 +6,7 @@
 
   export let className = "default"
   export let disabled = false
-  export let text
+  export let text = ""
   export let onClick
 </script>
 
@@ -15,7 +15,7 @@
   disabled={disabled || false}
   use:styleable={$component.styles}
   on:click={onClick}>
-  {text}
+  {text || ''}
 </button>
 
 <style>
diff --git a/packages/standard-components/src/Card.svelte b/packages/standard-components/src/Card.svelte
index 74121590e3..3252c7a19f 100644
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import { cssVars } from "./helpers"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -16,22 +15,21 @@
   export let imageHeight
   export let cardWidth
 
-  $: cssVariables = {
-    imageHeight,
-    cardWidth,
+  $: cardStyles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles.normal,
+      width: cardWidth,
+    },
   }
 
   $: showImage = !!imageUrl
 </script>
 
-<div
-  use:cssVars={cssVariables}
-  class="container"
-  use:styleable={$component.styles}
-  style="--cardWidth: {cardWidth}">
+<div class="container" use:styleable={cardStyles}>
   {#if showImage}
     <img
-      style="--imageWidth: {imageWidth}; --imageHeight: {imageHeight}"
+      style="--imageHeight: {imageHeight}"
       class="image"
       src={imageUrl}
       alt="" />
diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte
index f868956dd9..0da894b31e 100644
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@@ -28,8 +28,8 @@
   const getFormData = async context => {
     if (context) {
       const tableDefinition = await API.fetchTableDefinition(context.tableId)
-      schema = tableDefinition.schema
-      fields = Object.keys(schema)
+      schema = tableDefinition?.schema
+      fields = Object.keys(schema ?? {})
 
       // Use the draft version for editing
       row = $dataContext[`${$dataContext.closestComponentId}_draft`]
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 34ebd95941..3ae9ffe6dd 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -7,6 +7,7 @@
   export let icon = ""
   export let size = "fa-lg"
   export let color = "#f00"
+
   $: styles = {
     ...$component.styles,
     normal: {
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 78cd6697a2..9ee59a79b7 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -1,40 +1,37 @@
 <script>
-  import { getContext, onMount } from "svelte"
+  import { getContext } from "svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API, styleable, DataProvider } = getContext("sdk")
+  const { API, styleable, DataProvider, builderStore } = getContext("sdk")
   const component = getContext("component")
-  const dataContext = getContext("data")
 
   export let datasource = []
 
   let rows = []
+  let loaded = false
 
-  $: datasource && fetchData()
+  $: fetchData(datasource)
 
-  async function fetchData() {
-    rows = await API.fetchDatasource(datasource, $dataContext)
-  }
-
-  onMount(async () => {
+  async function fetchData(datasource) {
     if (!isEmpty(datasource)) {
-      fetchData()
+      rows = await API.fetchDatasource(datasource)
     }
-  })
+    loaded = true
+  }
 </script>
 
 <div use:styleable={$component.styles}>
   {#if rows.length > 0}
-    {#each rows as row}
-      <DataProvider {row}>
-        {#if $component.children === 0}
-          <p>Add some components too.</p>
-        {:else}
+    {#if $component.children === 0 && $builderStore.inBuilder}
+      <p>Add some components too</p>
+    {:else}
+      {#each rows as row}
+        <DataProvider {row}>
           <slot />
-        {/if}
-      </DataProvider>
-    {/each}
-  {:else}
+        </DataProvider>
+      {/each}
+    {/if}
+  {:else if loaded && $builderStore.inBuilder}
     <p>Feed me some data</p>
   {/if}
 </div>
diff --git a/packages/standard-components/src/RichText.svelte b/packages/standard-components/src/RichText.svelte
index 18aca42b1a..3ad66e1703 100644
--- a/packages/standard-components/src/RichText.svelte
+++ b/packages/standard-components/src/RichText.svelte
@@ -3,6 +3,7 @@
   import { RichText } from "@budibase/bbui"
 
   const { styleable } = getContext("sdk")
+  const component = getContext("component")
 
   export let value = ""
 
diff --git a/packages/standard-components/src/ScreenSlot.svelte b/packages/standard-components/src/ScreenSlot.svelte
new file mode 100644
index 0000000000..f2b12a3299
--- /dev/null
+++ b/packages/standard-components/src/ScreenSlot.svelte
@@ -0,0 +1,32 @@
+<script>
+  // This component is overridden when running in a real app.
+  // This simply serves as a placeholder component for the real screen router
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+</script>
+
+<div use:styleable={$component.styles}>
+  <h1>Screen Slot</h1>
+  <span>
+    The screens that you create will be displayed inside this box.
+    <br />
+    This box is just a placeholder, to show you the position of screens.
+  </span>
+</div>
+
+<style>
+  div {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 20px !important;
+    text-align: center !important;
+    border-style: dashed !important;
+    border-width: 1px !important;
+    color: #000000 !important;
+    background-color: rgba(0, 0, 0, 0.05) !important;
+  }
+</style>
diff --git a/packages/standard-components/src/ScreenSlotPlaceholder.svelte b/packages/standard-components/src/ScreenSlotPlaceholder.svelte
deleted file mode 100644
index 82e8b28c0e..0000000000
--- a/packages/standard-components/src/ScreenSlotPlaceholder.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<div>
-  <h1>Screen Slot</h1>
-  <span>
-    The screens that you create will be displayed inside this box.
-    <br />
-    This box is just a placeholder, to show you the position of screens.
-  </span>
-</div>
-
-<style>
-  div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    text-align: center;
-    border-style: dashed !important;
-    border-width: 1px;
-    color: #000000;
-    background-color: rgba(0, 0, 0, 0.05);
-    flex: 1 1 auto;
-  }
-</style>
diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index 4bf01b9a21..51bc91046e 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -35,7 +35,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result
diff --git a/packages/standard-components/src/charts/CandleStickChart.svelte b/packages/standard-components/src/charts/CandleStickChart.svelte
index 341b1d714f..fbad22feaf 100644
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@@ -33,7 +33,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result
diff --git a/packages/standard-components/src/charts/LineChart.svelte b/packages/standard-components/src/charts/LineChart.svelte
index 6e7f7f65f0..256ec70fe6 100644
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@@ -41,7 +41,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result
diff --git a/packages/standard-components/src/charts/PieChart.svelte b/packages/standard-components/src/charts/PieChart.svelte
index 9a8db6b17a..65ac8ac490 100644
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@@ -31,7 +31,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource)
     const data = result
       .filter(row => row[labelColumn] != null && row[valueColumn] != null)
       .slice(0, 20)
diff --git a/packages/standard-components/src/grid/Component.svelte b/packages/standard-components/src/grid/Component.svelte
index d4e2c62db4..3004622bfd 100644
--- a/packages/standard-components/src/grid/Component.svelte
+++ b/packages/standard-components/src/grid/Component.svelte
@@ -3,7 +3,7 @@
   import { number } from "./valueSetters"
   import { getRenderer } from "./customRenderer"
   import { isEmpty } from "lodash/fp"
-  import { getContext, onMount } from "svelte"
+  import { getContext } from "svelte"
   import AgGrid from "@budibase/svelte-ag-grid"
   import {
     TextButton as DeleteButton,
@@ -34,6 +34,7 @@
       ["--grid-height"]: `${height}px`,
     },
   }
+  $: fetchData(datasource)
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -57,8 +58,11 @@
     pagination,
   }
 
-  async function fetchData() {
-    data = await API.fetchDatasource(datasource, $dataContext)
+  async function fetchData(datasource) {
+    if (isEmpty(datasource)) {
+      return
+    }
+    data = await API.fetchDatasource(datasource)
 
     let schema
 
@@ -115,12 +119,6 @@
     dataLoaded = true
   }
 
-  $: datasource && fetchData()
-
-  onMount(() => {
-    if (!isEmpty(datasource)) fetchData()
-  })
-
   const shouldHideField = name => {
     if (name.startsWith("_")) return true
     // always 'row'
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 65b0fdd3c0..a856e60a14 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -2,27 +2,27 @@ import "@budibase/bbui/dist/bbui.css"
 import "flatpickr/dist/flatpickr.css"
 
 export { default as container } from "./Container.svelte"
-export { default as text } from "./Text.svelte"
-export { default as heading } from "./Heading.svelte"
+export { default as datagrid } from "./grid/Component.svelte"
+export { default as screenslot } from "./ScreenSlot.svelte"
+export { default as button } from "./Button.svelte"
 export { default as input } from "./Input.svelte"
 export { default as richtext } from "./RichText.svelte"
-export { default as button } from "./Button.svelte"
-export { default as login } from "./Login.svelte"
-export { default as link } from "./Link.svelte"
-export { default as image } from "./Image.svelte"
-export { default as navigation } from "./Navigation.svelte"
-export { default as datagrid } from "./grid/Component.svelte"
-export { default as dataform } from "./DataForm.svelte"
-export { default as dataformwide } from "./DataFormWide.svelte"
 export { default as list } from "./List.svelte"
-export { default as embed } from "./Embed.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
+export { default as dataform } from "./DataForm.svelte"
+export { default as dataformwide } from "./DataFormWide.svelte"
+export { default as datepicker } from "./DatePicker.svelte"
+export { default as text } from "./Text.svelte"
+export { default as login } from "./Login.svelte"
+export { default as navigation } from "./Navigation.svelte"
+export { default as link } from "./Link.svelte"
+export { default as rowdetail } from "./RowDetail.svelte"
+export { default as heading } from "./Heading.svelte"
+export { default as image } from "./Image.svelte"
+export { default as embed } from "./Embed.svelte"
 export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as cardstat } from "./CardStat.svelte"
-export { default as rowdetail } from "./RowDetail.svelte"
 export { default as newrow } from "./NewRow.svelte"
-export { default as datepicker } from "./DatePicker.svelte"
 export { default as icon } from "./Icon.svelte"
-export { default as screenslotplaceholder } from "./ScreenSlotPlaceholder.svelte"
 export * from "./charts"
diff --git a/packages/string-templates/src/processors/preprocessor.js b/packages/string-templates/src/processors/preprocessor.js
index 131fb522f9..c984d61298 100644
--- a/packages/string-templates/src/processors/preprocessor.js
+++ b/packages/string-templates/src/processors/preprocessor.js
@@ -31,7 +31,8 @@ module.exports.processors = [
         statement = swapStrings(statement, startBraceIdx + lastIdx, 1, ".[")
       }
       lastIdx = startBraceIdx + 1
-      startBraceIdx = statement.substring(lastIdx + 1).indexOf("[")
+      const nextBraceIdx = statement.substring(lastIdx + 1).indexOf("[")
+      startBraceIdx = nextBraceIdx > 0 ? lastIdx + 1 + nextBraceIdx : -1
     }
     return statement
   }),