Merge pull request #1834 from Budibase/design-panel-v2

Design panel V2 + big performance improvements + misc features
2021-06-28 11:11:00 +01:00 · 2021-06-28 11:11:00 +01:00 · 91b701a746
parent b6223d880e 39197b318b
commit 91b701a746
64 changed files with 1892 additions and 1426 deletions
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@ -0,0 +1,239 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
+  import Icon from "../Icon/Icon.svelte"
+  import Input from "../Form/Input.svelte"
+  import { capitalise } from "../utils/helpers"
+
+  export let value
+  export let size = "M"
+
+  let open = false
+
+  $: color = value || "transparent"
+  $: customValue = getCustomValue(value)
+  $: checkColor = getCheckColor(value)
+
+  const dispatch = createEventDispatcher()
+  const categories = [
+    {
+      label: "Grays",
+      colors: [
+        "white",
+        "gray-100",
+        "gray-200",
+        "gray-300",
+        "gray-400",
+        "gray-500",
+        "gray-600",
+        "gray-700",
+        "gray-800",
+        "gray-900",
+        "black",
+      ],
+    },
+    {
+      label: "Colors",
+      colors: [
+        "red-400",
+        "orange-400",
+        "yellow-400",
+        "green-400",
+        "seafoam-400",
+        "blue-400",
+        "indigo-400",
+        "magenta-400",
+
+        "red-500",
+        "orange-500",
+        "yellow-500",
+        "green-500",
+        "seafoam-500",
+        "blue-500",
+        "indigo-500",
+        "magenta-500",
+
+        "red-600",
+        "orange-600",
+        "yellow-600",
+        "green-600",
+        "seafoam-600",
+        "blue-600",
+        "indigo-600",
+        "magenta-600",
+
+        "red-700",
+        "orange-700",
+        "yellow-700",
+        "green-700",
+        "seafoam-700",
+        "blue-700",
+        "indigo-700",
+        "magenta-700",
+      ],
+    },
+  ]
+
+  const onChange = value => {
+    dispatch("change", value)
+    open = false
+  }
+
+  const getCustomValue = value => {
+    if (!value) {
+      return value
+    }
+    let found = false
+    const comparisonValue = value.substring(35, value.length - 1)
+    for (let category of categories) {
+      found = category.colors.includes(comparisonValue)
+      if (found) {
+        break
+      }
+    }
+    return found ? null : value
+  }
+
+  const prettyPrint = color => {
+    return capitalise(color.split("-").join(" "))
+  }
+
+  const getCheckColor = value => {
+    return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
+      ? "black"
+      : "white"
+  }
+</script>
+
+<div class="container">
+  <div
+    class="preview size--{size || 'M'}"
+    style="background: {color};"
+    on:click={() => (open = true)}
+  />
+  {#if open}
+    <div
+      use:clickOutside={() => (open = false)}
+      transition:fly={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    >
+      {#each categories as category}
+        <div class="category">
+          <div class="heading">{category.label}</div>
+          <div class="colors">
+            {#each category.colors as color}
+              <div
+                on:click={() => {
+                  onChange(`var(--spectrum-global-color-static-${color})`)
+                }}
+                class="color"
+                style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
+                title={prettyPrint(color)}
+              >
+                {#if value === `var(--spectrum-global-color-static-${color})`}
+                  <Icon name="Checkmark" size="S" />
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+      <div class="category category--custom">
+        <div class="heading">Custom</div>
+        <div class="custom">
+          <Input
+            updateOnChange={false}
+            quiet
+            placeholder="Hex, RGB, HSL..."
+            value={customValue}
+            on:change
+          />
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            on:click={() => onChange(null)}
+          />
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    position: relative;
+  }
+  .preview {
+    width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    transition: border-color 130ms ease-in-out;
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
+  }
+  .preview:hover {
+    cursor: pointer;
+    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
+  }
+  .size--S {
+    width: 20px;
+    height: 20px;
+  }
+  .size--M {
+    width: 32px;
+    height: 32px;
+  }
+  .size--L {
+    width: 48px;
+    height: 48px;
+  }
+  .spectrum-Popover {
+    width: 210px;
+    z-index: 999;
+    top: 100%;
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
+  }
+  .colors {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    gap: var(--spacing-xs);
+  }
+  .heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    letter-spacing: 0.14px;
+    flex: 1 1 auto;
+    text-transform: uppercase;
+    grid-column: 1 / 5;
+    margin-bottom: var(--spacing-s);
+  }
+  .color {
+    height: 16px;
+    width: 16px;
+    border-radius: 100%;
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
+    display: grid;
+    place-items: center;
+  }
+  .color:hover {
+    cursor: pointer;
+    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
+  }
+  .custom {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--spacing-m);
+    margin-right: var(--spacing-xs);
+  }
+  .category--custom .heading {
+    margin-bottom: var(--spacing-xs);
+  }
+</style>
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@ -2,13 +2,15 @@
  import Icon from "../Icon/Icon.svelte"
  import { createEventDispatcher } from "svelte"

+  export let name
+  export let show = false
+  export let collapsible = true
+
  const dispatch = createEventDispatcher()
-
-  export let thin = false
-  export let name,
-    show = false
-
  const onHeaderClick = () => {
+    if (!collapsible) {
+      return
+    }
    show = !show
    if (show) {
      dispatch("open")
@ -16,14 +18,14 @@
  }
 </script>

-<div class="property-group-container" class:thin>
+<div class="property-group-container">
  <div class="property-group-name" on:click={onHeaderClick}>
-    <div class:thin class="name">{name}</div>
-    <div class="icon">
+    <div class="name">{name}</div>
+    {#if collapsible}
      <Icon size="S" name={show ? "Remove" : "Add"} />
-    </div>
+    {/if}
  </div>
-  <div class="property-panel" class:show>
+  <div class="property-panel" class:show={show || !collapsible}>
    <slot />
  </div>
 </div>
@ -32,10 +34,9 @@
  .property-group-container {
    display: flex;
    flex-direction: column;
-    height: auto;
-    justify-content: center;
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans);
+    justify-content: flex-start;
+    align-items: stretch;
+    border-bottom: var(--border-light);
  }

  .property-group-name {
@ -45,42 +46,38 @@
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
+    padding: var(--spacing-m) var(--spacing-xl);
+    color: var(--spectrum-global-color-gray-600);
+    transition: color 130ms ease-in-out;
+  }
+  .property-group-name:hover {
+    color: var(--spectrum-global-color-gray-900);
  }

  .name {
    text-align: left;
-    font-size: 14px;
+    font-size: var(--font-size-s);
    font-weight: 600;
    letter-spacing: 0.14px;
-    color: var(--ink);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
-    text-transform: capitalize;
+    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
  }
-  .name.thin {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-  }
-
-  .icon {
-    flex: 0 0 20px;
-    text-align: center;
-  }

  .property-panel {
-    /* height: 0px;
-    overflow: hidden; */
    display: none;
+    padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
+      var(--spacing-xl);
  }

  .show {
-    /* overflow: auto;
-    height: auto; */
    display: flex;
    flex-direction: column;
-    flex: 1;
-    margin-top: var(--spacing-m);
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
  }
 </style>
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -20,6 +20,7 @@
  export let open = false
  export let readonly = false
  export let quiet = false
+  export let autoWidth = false

  const dispatch = createEventDispatcher()
  const onClick = () => {
@ -41,7 +42,11 @@
  aria-haspopup="listbox"
  on:mousedown={onClick}
 >
-  <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
+  <span
+    class="spectrum-Picker-label"
+    class:is-placeholder={isPlaceholder}
+    class:auto-width={autoWidth}
+  >
    {fieldText}
  </span>
  {#if error}
@ -67,11 +72,12 @@
    use:clickOutside={() => (open = false)}
    transition:fly={{ y: -20, duration: 200 }}
    class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    class:auto-width={autoWidth}
  >
    <ul class="spectrum-Menu" role="listbox">
      {#if placeholderOption}
        <li
-          class="spectrum-Menu-item"
+          class="spectrum-Menu-item placeholder"
          class:is-selected={isPlaceholder}
          role="option"
          aria-selected="true"
@ -118,17 +124,28 @@
 <style>
  .spectrum-Popover {
    max-height: 240px;
-    width: 100%;
    z-index: 999;
    top: 100%;
  }
+  .spectrum-Popover:not(.auto-width) {
+    width: 100%;
+  }
+  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
+    white-space: nowrap;
+  }
  .spectrum-Picker {
    width: 100%;
  }
-  .spectrum-Picker-label {
+  .spectrum-Picker-label:not(.auto-width) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 0;
  }
+  .placeholder {
+    font-style: italic;
+  }
+  .spectrum-Picker-label.auto-width.is-placeholder {
+    padding-right: 2px;
+  }
 </style>
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@ -12,6 +12,7 @@
  export let getOptionValue = option => option
  export let readonly = false
  export let quiet = false
+  export let autoWidth = false

  const dispatch = createEventDispatcher()
  let open = false
@ -51,6 +52,7 @@
  {readonly}
  {fieldText}
  {options}
+  {autoWidth}
  {getOptionLabel}
  {getOptionValue}
  isPlaceholder={value == null || value === ""}
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@ -10,6 +10,7 @@
  export let id = null
  export let readonly = false
  export let updateOnChange = true
+  export let quiet = false

  const dispatch = createEventDispatcher()
  let focus = false
@ -59,6 +60,7 @@

 <div
  class="spectrum-Textfield"
+  class:spectrum-Textfield--quiet={quiet}
  class:is-invalid={!!error}
  class:is-disabled={disabled}
  class:is-focused={focus}
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@ -12,6 +12,7 @@
  export let readonly = false
  export let error = null
  export let updateOnChange = true
+  export let quiet = false

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -29,6 +30,7 @@
    {value}
    {placeholder}
    {type}
+    {quiet}
    on:change={onChange}
    on:click
    on:input
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@ -14,6 +14,7 @@
  export let getOptionLabel = option => extractProperty(option, "label")
  export let getOptionValue = option => extractProperty(option, "value")
  export let quiet = false
+  export let autoWidth = false

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -37,6 +38,7 @@
    {value}
    {options}
    {placeholder}
+    {autoWidth}
    {getOptionLabel}
    {getOptionValue}
    on:change={onChange}
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@ -5,6 +5,8 @@

  export let selected
  export let vertical = false
+  export let noPadding = false
+
  let _id = id()
  const tab = writable({ title: selected, id: _id })
  setContext("tab", tab)
@ -63,14 +65,17 @@
  {/if}
 </div>

-<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
+<div
+  class="spectrum-Tabs-content spectrum-Tabs-content-{_id}"
+  class:noPadding
+/>

 <style>
  .spectrum-Tabs {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    position: relative;
-    border-width: 1px !important;
+    border-bottom: var(--border-light);
  }
  .spectrum-Tabs-content {
    margin-top: var(--spectrum-global-dimension-static-size-150);
@ -81,4 +86,7 @@
  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
    bottom: 0 !important;
  }
+  .noPadding {
+    margin: 0;
+  }
 </style>
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@ -55,6 +55,7 @@ export { default as Search } from "./Form/Search.svelte"
 export { default as Pagination } from "./Pagination/Pagination.svelte"
 export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
+export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"

 // Typography
 export { default as Body } from "./Typography/Body.svelte"
--- a/packages/bbui/src/utils/helpers.js
+++ b/packages/bbui/src/utils/helpers.js
@ -4,3 +4,5 @@ export const generateID = () => {
  // Starts with a letter so that its a valid DOM ID
  return `A${rand}`
 }
+
+export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -488,12 +488,12 @@ export const getFrontendStore = () => {
        })
        await Promise.all(promises)
      },
-      updateStyle: async (type, name, value) => {
+      updateStyle: async (name, value) => {
        const selected = get(selectedComponent)
        if (value == null || value === "") {
-          delete selected._styles[type][name]
+          delete selected._styles.normal[name]
        } else {
-          selected._styles[type][name] = value
+          selected._styles.normal[name] = value
        }
        await store.actions.preview.saveSelected()
      },
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@ -54,6 +54,10 @@ function generateTitleContainer(table) {
    .type("h2")
    .instanceName("Title")
    .text(table.name)
+    .customProps({
+      size: "M",
+      align: "left",
+    })

  return new Component("@budibase/standard-components/container")
    .normalStyle({
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
@ -21,6 +21,7 @@ export class Screen extends BaseStructure {
        hAlign: "stretch",
        vAlign: "top",
        size: "grow",
+        gap: "M",
      },
      routing: {
        route: "",
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@ -25,11 +25,8 @@ export function makeLinkComponent(tableName) {
    .customProps({
      url: `/${tableName.toLowerCase()}`,
      openInNewTab: false,
-      color: "",
-      hoverColor: "",
-      underline: false,
-      fontSize: "",
-      fontFamily: "initial",
+      size: "S",
+      align: "left",
    })
 }

@ -62,6 +59,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
    .customStyle(spectrumColor(700))
    .text(">")
    .instanceName("Arrow")
+    .customProps({
+      size: "S",
+      align: "left",
+    })

  const textStyling = {
    color: "#000000",
@ -77,6 +78,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
    .customStyle(spectrumColor(700))
    .text(text)
    .instanceName("Identifier")
+    .customProps({
+      size: "S",
+      align: "left",
+    })

  return new Component("@budibase/standard-components/container")
    .normalStyle({
@ -148,6 +153,10 @@ export function makeTitleContainer(title) {
    .type("h2")
    .instanceName("Title")
    .text(title)
+    .customProps({
+      size: "M",
+      align: "left",
+    })

  return new Component("@budibase/standard-components/container")
    .normalStyle({
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@ -45,7 +45,7 @@
  size="L"
  confirmText="Create"
  onConfirm={saveDatasource}
-  disabled={error || !name}
+  disabled={error || !name || !integration?.type}
 >
  <Input
    data-cy="datasource-name-input"
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@ -4,10 +4,13 @@
  import iframeTemplate from "./iframeTemplate"
  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
  import { FrontendTypes } from "constants"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"

  let iframe
  let layout
  let screen
+  let confirmDeleteDialog
+  let idToDelete

  // Create screen slot placeholder for use when a page is selected rather
  // than a screen
@ -73,15 +76,26 @@
    // Add listener for events sent by cliebt library in preview
    iframe.contentWindow.addEventListener("bb-event", event => {
      const { type, data } = event.detail
-      if (type === "select-component") {
+      if (type === "select-component" && data.id) {
        store.actions.components.select({ _id: data.id })
      } else if (type === "update-prop") {
        store.actions.components.updateProp(data.prop, data.value)
+      } else if (type === "delete-component" && data.id) {
+        idToDelete = data.id
+        confirmDeleteDialog.show()
      } else {
        console.log(data)
      }
    })
  })
+
+  const deleteComponent = () => {
+    store.actions.components.delete({ _id: idToDelete })
+    idToDelete = null
+  }
+  const cancelDeleteComponent = () => {
+    idToDelete = null
+  }
 </script>

 <div class="component-container">
@ -92,6 +106,14 @@
    srcdoc={template}
  />
 </div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  body={`Are you sure you want to delete this component?`}
+  okText="Delete component"
+  onOk={deleteComponent}
+  onCancel={cancelDeleteComponent}
+/>

 <style>
  .component-container {
--- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
@ -1,40 +0,0 @@
-<script>
-  export let categories = []
-  export let selectedCategory = {}
-  export let onClick = () => {}
-</script>
-
-<div class="tabs">
-  {#each categories as category}
-    <li
-      data-cy={category.name}
-      on:click={() => onClick(category)}
-      class:active={selectedCategory === category}
-    >
-      {category.name}
-    </li>
-  {/each}
-</div>
-
-<style>
-  .tabs {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    list-style: none;
-    font-size: var(--font-size-m);
-    font-weight: 600;
-    height: 24px;
-  }
-
-  li {
-    color: var(--grey-5);
-    cursor: pointer;
-    margin-right: 20px;
-  }
-
-  .active {
-    color: var(--ink);
-  }
-</style>
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@ -1,11 +1,13 @@
 <script>
-  import { get } from "lodash"
  import { isEmpty } from "lodash/fp"
-  import { Button, Checkbox, Input, Select } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { currentAsset } from "builderStore"
-  import { findClosestMatchingComponent } from "builderStore/storeUtils"
-  import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
+  import {
+    Checkbox,
+    Input,
+    Select,
+    DetailSummary,
+    ColorPicker,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@ -20,7 +22,6 @@
  import EventsEditor from "./PropertyControls/EventsEditor"
  import FilterEditor from "./PropertyControls/FilterEditor/FilterEditor.svelte"
  import { IconSelect } from "./PropertyControls/IconSelect"
-  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
  import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
  import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
  import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
@ -29,13 +30,11 @@
  import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
  import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
  import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
+  import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"

-  export let componentDefinition = {}
-  export let componentInstance = {}
+  export let componentDefinition
+  export let componentInstance
  export let assetInstance
-  export let onChange = () => {}
-  export let onScreenPropChange = () => {}
-  export let showDisplayName = false

  const layoutDefinition = []
  const screenDefinition = [
@ -44,12 +43,12 @@
    { key: "routing.roleId", label: "Access", control: RoleSelect },
    { key: "layoutId", label: "Layout", control: LayoutSelect },
  ]
-  let confirmResetFieldsDialog

  $: settings = componentDefinition?.settings ?? []
  $: isLayout = assetInstance && assetInstance.favicon
  $: assetDefinition = isLayout ? layoutDefinition : screenDefinition

+  const updateProp = store.actions.components.updateProp
  const controlMap = {
    text: Input,
    select: Select,
@ -91,51 +90,19 @@
    }
    return true
  }
-
-  const onInstanceNameChange = name => {
-    onChange("_instanceName", name)
-  }
-
-  const resetFormFields = () => {
-    const form = findClosestMatchingComponent(
-      $currentAsset.props,
-      componentInstance._id,
-      component => component._component.endsWith("/form")
-    )
-    const dataSource = form?.dataSource
-    const fields = makeDatasourceFormComponents(dataSource)
-    onChange(
-      "_children",
-      fields.map(field => field.json())
-    )
-  }
 </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}
+<DetailSummary name="General" collapsible={false}>
+  {#if !componentInstance._component.endsWith("/layout")}
    <PropertyControl
      bindable={false}
      control={Input}
      label="Name"
      key="_instanceName"
      value={componentInstance._instanceName}
-      onChange={onInstanceNameChange}
+      onChange={val => updateProp("_instanceName", val)}
    />
  {/if}
-
  {#if settings && settings.length > 0}
    {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
      {#if canRenderControl(setting)}
@ -147,52 +114,28 @@
          value={componentInstance[setting.key] ??
            componentInstance[setting.key]?.defaultValue}
          {componentInstance}
-          onChange={val => onChange(setting.key, val)}
-          props={{ options: setting.options, placeholder: setting.placeholder }}
+          onChange={val => updateProp(setting.key, val)}
+          props={{
+            options: setting.options,
+            placeholder: setting.placeholder,
+          }}
        />
      {/if}
    {/each}
-  {:else}
-    <div class="text">This component doesn't have any additional settings.</div>
+  {/if}
+  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
+    <ResetFieldsButton {componentInstance} />
  {/if}
  {#if componentDefinition?.info}
    <div class="text">
      {@html componentDefinition?.info}
    </div>
  {/if}
-
-  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
-    <div class="buttonWrapper">
-      <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
-        Update Form Fields
-      </Button>
-    </div>
-  {/if}
-</div>
-<ConfirmDialog
-  bind:this={confirmResetFieldsDialog}
-  body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
-  okText="Update"
-  onOk={resetFormFields}
-  title="Confirm Form Field Update"
-/>
+</DetailSummary>

 <style>
-  .settings-view-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    gap: var(--spacing-s);
-  }
  .text {
    font-size: var(--spectrum-global-dimension-font-size-75);
-    margin-top: var(--spacing-m);
    color: var(--grey-6);
  }
-  .buttonWrapper {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
@ -0,0 +1,60 @@
+<script>
+  import {
+    TextArea,
+    DetailSummary,
+    ActionButton,
+    Drawer,
+    DrawerContent,
+    Layout,
+    Body,
+    Button,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  export let componentInstance
+
+  let tempValue
+  let drawer
+
+  const openDrawer = () => {
+    tempValue = componentInstance?._styles?.custom
+    drawer.show()
+  }
+
+  const save = () => {
+    store.actions.components.updateCustomStyle(tempValue)
+    drawer.hide()
+  }
+</script>
+
+<DetailSummary
+  name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
+  collapsible={false}
+>
+  <div>
+    <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
+  </div>
+</DetailSummary>
+<Drawer bind:this={drawer} title="Custom CSS">
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">
+    <div class="content">
+      <Layout gap="S">
+        <Body size="S">Custom CSS overrides all other component styles.</Body>
+        <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
+      </Layout>
+    </div>
+  </DrawerContent>
+</Drawer>
+
+<style>
+  .content {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .content :global(textarea) {
+    font-family: monospace;
+    min-height: 240px !important;
+    font-size: var(--font-size-s);
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
@ -0,0 +1,34 @@
+<script>
+  import StyleSection from "./StyleSection.svelte"
+  import * as ComponentStyles from "./componentStyles"
+
+  export let componentDefinition
+  export let componentInstance
+
+  const getStyles = def => {
+    if (!def?.styles?.length) {
+      return [...ComponentStyles.all]
+    }
+    let styles = [...ComponentStyles.all]
+    def.styles.forEach(style => {
+      if (ComponentStyles[style]) {
+        styles.push(ComponentStyles[style])
+      }
+    })
+    return styles
+  }
+
+  $: styles = getStyles(componentDefinition)
+</script>
+
+{#if styles?.length > 0}
+  {#each styles as style}
+    <StyleSection
+      {style}
+      name={style.label}
+      columns={style.columns}
+      properties={style.settings}
+      {componentInstance}
+    />
+  {/each}
+{/if}
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@ -1,111 +0,0 @@
-<script>
-  import { TextArea, DetailSummary, Button } from "@budibase/bbui"
-  import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
-  import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
-  import { allStyles } from "./componentStyles"
-
-  export let componentDefinition = {}
-  export let componentInstance = {}
-  export let onStyleChanged = () => {}
-  export let onCustomStyleChanged = () => {}
-  export let onResetStyles = () => {}
-
-  let selectedCategory = "normal"
-  let currentGroup
-
-  function onChange(category) {
-    selectedCategory = category
-  }
-
-  const buttonProps = [
-    { value: "normal", text: "Normal" },
-    { value: "hover", text: "Hover" },
-    { value: "active", text: "Active" },
-  ]
-
-  $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
-</script>
-
-<div class="container">
-  <div class="state-categories">
-    <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
-  </div>
-
-  <div class="positioned-wrapper">
-    <div class="property-groups">
-      {#if groups.length > 0}
-        {#each groups as groupName}
-          <PropertyGroup
-            name={groupName}
-            properties={allStyles[groupName]}
-            styleCategory={selectedCategory}
-            {onStyleChanged}
-            {componentInstance}
-            open={currentGroup === groupName}
-            on:open={() => (currentGroup = groupName)}
-          />
-        {/each}
-        <DetailSummary
-          name={`Custom Styles${componentInstance._styles.custom ? " *" : ""}`}
-          on:open={() => (currentGroup = "custom")}
-          show={currentGroup === "custom"}
-          thin
-        >
-          <div class="custom-styles">
-            <TextArea
-              value={componentInstance._styles.custom}
-              on:change={event => onCustomStyleChanged(event.detail)}
-              placeholder="Enter some CSS..."
-            />
-          </div>
-        </DetailSummary>
-        <Button secondary wide on:click={onResetStyles}>Reset Styles</Button>
-      {:else}
-        <div class="no-design">
-          This component doesn't have any design properties.
-        </div>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    gap: var(--spacing-l);
-  }
-
-  .positioned-wrapper {
-    position: relative;
-    display: flex;
-    min-height: 0;
-    flex: 1 1 auto;
-  }
-
-  .property-groups {
-    flex: 1;
-    overflow-y: auto;
-    min-height: 0;
-    margin: 0 -20px;
-    padding: 0 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-m);
-  }
-
-  .no-design {
-    font-size: var(--font-size-xs);
-    color: var(--grey-5);
-  }
-
-  .custom-styles :global(textarea) {
-    font-family: monospace;
-    min-height: 120px;
-    font-size: var(--font-size-xs);
-  }
-</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@ -1,84 +1,33 @@
 <script>
-  import { get } from "svelte/store"
-  import { store, selectedComponent, currentAsset } from "builderStore"
+  import { store, selectedComponent } from "builderStore"
  import { Tabs, Tab } from "@budibase/bbui"
-  import { FrontendTypes } from "constants"
-  import DesignView from "./DesignView.svelte"
-  import SettingsView from "./SettingsView.svelte"
-  import { setWith } from "lodash"
+  import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
+  import DesignSection from "./DesignSection.svelte"
+  import CustomStylesSection from "./CustomStylesSection.svelte"

-  $: definition = store.actions.components.getDefinition(
+  $: componentInstance = $selectedComponent
+  $: componentDefinition = 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
-
-  function setAssetProps(name, value) {
-    const selectedAsset = get(currentAsset)
-    store.update(state => {
-      if (
-        name === "_instanceName" &&
-        state.currentFrontEndType === FrontendTypes.SCREEN
-      ) {
-        selectedAsset.props._instanceName = value
-      } else {
-        setWith(selectedAsset, name.split("."), value, Object)
-      }
-      return state
-    })
-    store.actions.preview.saveSelected()
-  }
 </script>

-<Tabs selected="Settings">
+<Tabs selected="Settings" noPadding>
  <Tab title="Settings">
-    <div class="tab-content-padding">
-      {#if definition && definition.name}
-        <div class="instance-name">{definition.name}</div>
-      {/if}
-      <SettingsView
-        componentInstance={$selectedComponent}
-        componentDefinition={definition}
-        {showDisplayName}
-        onChange={store.actions.components.updateProp}
-        onScreenPropChange={setAssetProps}
-        assetInstance={$store.currentView !== "component" && $currentAsset}
-      />
-    </div>
-  </Tab>
-  <Tab title="Design">
-    <div class="tab-content-padding">
-      {#if definition && definition.name}
-        <div class="instance-name">{definition.name}</div>
-      {/if}
-      <DesignView
-        componentInstance={$selectedComponent}
-        componentDefinition={definition}
-        {onStyleChanged}
-        {onCustomStyleChanged}
-        {onResetStyles}
-      />
+    <div class="container">
+      <ScreenSettingsSection {componentInstance} {componentDefinition} />
+      <ComponentSettingsSection {componentInstance} {componentDefinition} />
+      <DesignSection {componentInstance} {componentDefinition} />
+      <CustomStylesSection {componentInstance} {componentDefinition} />
    </div>
  </Tab>
 </Tabs>

 <style>
-  .tab-content-padding {
-    padding: 0 var(--spacing-xl);
-  }
-
-  .instance-name {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    margin-bottom: var(--spacing-m);
-    margin-top: var(--spacing-xs);
-    font-weight: 600;
-    color: var(--grey-7);
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer } from "@budibase/bbui"
+  import { Button, Icon, Drawer, Label } from "@budibase/bbui"
  import { store, currentAsset } from "builderStore"
  import {
    getBindableProperties,
@ -70,7 +70,11 @@
 </script>

 <div class="property-control" bind:this={anchor} data-cy={`setting-${key}`}>
-  <div class="label">{label}</div>
+  {#if type !== "boolean"}
+    <div class="label">
+      <Label>{label}</Label>
+    </div>
+  {/if}
  <div data-cy={`${key}-prop-control`} class="control">
    <svelte:component
      this={control}
@ -79,63 +83,55 @@
      updateOnChange={false}
      on:change={handleChange}
      onChange={handleChange}
+      name={key}
+      text={label}
      {type}
      {...props}
-      name={key}
    />
-  </div>
-  {#if bindable && !key.startsWith("_") && type === "text"}
-    <div
-      class="icon"
-      data-cy={`${key}-binding-button`}
-      on:click={bindingDrawer.show}
-    >
-      <Icon size="S" name="FlashOn" />
-    </div>
-    <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
-      <svelte:fragment slot="description">
-        Add the objects on the left to enrich your text.
-      </svelte:fragment>
-      <Button cta slot="buttons" disabled={!valid} on:click={handleClose}
-        >Save</Button
+    {#if bindable && !key.startsWith("_") && type === "text"}
+      <div
+        class="icon"
+        data-cy={`${key}-binding-button`}
+        on:click={bindingDrawer.show}
      >
-      <BindingPanel
-        slot="body"
-        bind:valid
-        value={safeValue}
-        close={handleClose}
-        on:update={e => (temporaryBindableValue = e.detail)}
-        {bindableProperties}
-      />
-    </Drawer>
-  {/if}
+        <Icon size="S" name="FlashOn" />
+      </div>
+      <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
+        <svelte:fragment slot="description">
+          Add the objects on the left to enrich your text.
+        </svelte:fragment>
+        <Button cta slot="buttons" disabled={!valid} on:click={handleClose}>
+          Save
+        </Button>
+        <BindingPanel
+          slot="body"
+          bind:valid
+          value={safeValue}
+          close={handleClose}
+          on:update={e => (temporaryBindableValue = e.detail)}
+          {bindableProperties}
+        />
+      </Drawer>
+    {/if}
+  </div>
 </div>

 <style>
  .property-control {
    position: relative;
    display: flex;
-    flex-flow: row;
-    align-items: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
  }

  .label {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    font-weight: 400;
-    flex: 0 0 80px;
-    text-align: left;
-    color: var(--ink);
-    margin-right: auto;
    text-transform: capitalize;
+    padding-bottom: var(--spectrum-global-dimension-size-65);
  }

  .control {
-    flex: 1;
-    display: inline-block;
-    padding-left: 2px;
-    width: 0;
+    position: relative;
  }

  .icon {
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@ -1,54 +0,0 @@
-<script>
-  import PropertyControl from "./PropertyControl.svelte"
-  import { DetailSummary } from "@budibase/bbui"
-
-  export let name = ""
-  export let styleCategory = "normal"
-  export let properties = []
-  export let componentInstance = {}
-  export let onStyleChanged = () => {}
-  export let open = false
-
-  $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(prop => hasPropChanged(style, prop))
-
-  const hasPropChanged = (style, prop) => {
-    return style[prop.key] != null && style[prop.key] !== ""
-  }
-
-  const getControlProps = props => {
-    let controlProps = { ...(props || {}) }
-    delete controlProps.label
-    delete controlProps.key
-    delete controlProps.control
-    return controlProps
-  }
-</script>
-
-<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin>
-  {#if open}
-    <div>
-      {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
-        <PropertyControl
-          bindable={false}
-          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
-          control={prop.control}
-          key={prop.key}
-          value={style[prop.key]}
-          onChange={value => onStyleChanged(styleCategory, prop.key, value)}
-          props={getControlProps(prop)}
-        />
-      {/each}
-    </div>
-  {/if}
-</DetailSummary>
-
-<style>
-  div {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-s);
-  }
-</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
@ -0,0 +1,43 @@
+<script>
+  import { ActionButton } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { findClosestMatchingComponent } from "builderStore/storeUtils"
+  import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let componentInstance
+
+  let confirmResetFieldsDialog
+
+  const resetFormFields = () => {
+    const form = findClosestMatchingComponent(
+      $currentAsset.props,
+      componentInstance._id,
+      component => component._component.endsWith("/form")
+    )
+    const dataSource = form?.dataSource
+    const fields = makeDatasourceFormComponents(dataSource)
+    store.actions.components.updateProp(
+      "_children",
+      fields.map(field => field.json())
+    )
+  }
+</script>
+
+<div>
+  <ActionButton
+    secondary
+    wide
+    on:click={() => confirmResetFieldsDialog?.show()}
+  >
+    Update form fields
+  </ActionButton>
+</div>
+
+<ConfirmDialog
+  bind:this={confirmResetFieldsDialog}
+  body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
+  okText="Update"
+  onOk={resetFormFields}
+  title="Confirm Form Field Update"
+/>
--- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@ -0,0 +1,50 @@
+<script>
+  import { get } from "svelte/store"
+  import { get as deepGet, setWith } from "lodash"
+  import { Input, DetailSummary } from "@budibase/bbui"
+  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
+  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
+  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
+  import { currentAsset, store } from "builderStore"
+  import { FrontendTypes } from "constants"
+
+  export let componentInstance
+
+  function setAssetProps(name, value) {
+    const selectedAsset = get(currentAsset)
+    store.update(state => {
+      if (
+        name === "_instanceName" &&
+        state.currentFrontEndType === FrontendTypes.SCREEN
+      ) {
+        selectedAsset.props._instanceName = value
+      } else {
+        setWith(selectedAsset, name.split("."), value, Object)
+      }
+      return state
+    })
+    store.actions.preview.saveSelected()
+  }
+
+  const screenSettings = [
+    // { 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 },
+  ]
+</script>
+
+{#if $store.currentView !== "component" && $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
+  <DetailSummary name="Screen" collapsible={false}>
+    {#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
+      <PropertyControl
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={deepGet($currentAsset, def.key)}
+        onChange={val => setAssetProps(def.key, val)}
+      />
+    {/each}
+  </DetailSummary>
+{/if}
--- a/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
@ -0,0 +1,51 @@
+<script>
+  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
+  import { DetailSummary } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  export let name
+  export let columns
+  export let properties
+  export let componentInstance
+
+  $: style = componentInstance._styles.normal || {}
+  $: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
+
+  const hasPropChanged = (style, prop) => {
+    return style[prop.key] != null && style[prop.key] !== ""
+  }
+
+  const getControlProps = props => {
+    let controlProps = { ...(props || {}) }
+    delete controlProps.label
+    delete controlProps.key
+    delete controlProps.control
+    return controlProps
+  }
+</script>
+
+<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
+  <div class="group-content" style="grid-template-columns: {columns || '1fr'}">
+    {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
+      <div style="grid-column: {prop.column || 'auto'}">
+        <PropertyControl
+          bindable={false}
+          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+          control={prop.control}
+          key={prop.key}
+          value={style[prop.key]}
+          onChange={val => store.actions.components.updateStyle(prop.key, val)}
+          props={getControlProps(prop)}
+        />
+      </div>
+    {/each}
+  </div>
+</DetailSummary>
+
+<style>
+  .group-content {
+    display: grid;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -62,15 +62,17 @@
 {#if datasource && integration}
  <section>
    <Layout>
-      <header>
-        <svelte:component
-          this={ICONS[datasource.source]}
-          height="26"
-          width="26"
-        />
-        <Heading size="M">{datasource.name}</Heading>
-      </header>
-      <Body size="S" grey lh>{integration.description}</Body>
+      <Layout gap="XS" noPadding>
+        <header>
+          <svelte:component
+            this={ICONS[datasource.source]}
+            height="26"
+            width="26"
+          />
+          <Heading size="M">{datasource.name}</Heading>
+        </header>
+        <Body size="M">{integration.description}</Body>
+      </Layout>
      <Divider />
      <div class="container">
        <div class="config-header">
@ -139,7 +141,6 @@
  }

  header {
-    margin: 0 0 var(--spacing-xs) 0;
    display: flex;
    gap: var(--spacing-l);
    align-items: center;
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
@ -14,14 +14,16 @@

 <section>
  <Layout>
-    <header>
-      <svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
-      <Heading size="M">Budibase Internal</Heading>
-    </header>
-    <Body size="S" grey lh
-      >Budibase internal tables are part of your app, the data will be stored in
-      your apps context.</Body
-    >
+    <Layout gap="XS" noPadding>
+      <header>
+        <svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
+        <Heading size="M">Budibase Internal</Heading>
+      </header>
+      <Body size="M">
+        Budibase internal tables are part of your app, so the data will be
+        stored in your apps context.
+      </Body>
+    </Layout>
    <Divider />
    <Heading size="S">Tables</Heading>
    <div class="table-list">
@ -32,7 +34,7 @@
        >
          <Body size="S">{table.name}</Body>
          {#if table.primaryDisplay}
-            <Body size="S">display column: {table.primaryDisplay}</Body>
+            <Body size="S">Display column: {table.primaryDisplay}</Body>
          {/if}
        </div>
      {/each}
@ -50,7 +52,6 @@
  }

  header {
-    margin: 0 0 var(--spacing-xs) 0;
    display: flex;
    gap: var(--spacing-l);
    align-items: center;
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@ -91,14 +91,15 @@
 {/if}

 <style>
-  #spectrum-root {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-  }
+  #spectrum-root,
  #app-root {
    height: 100%;
    width: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  #app-root {
    position: relative;
  }
 </style>
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@ -23,6 +23,11 @@
  // props with old ones, depending on how long enrichment takes.
  let latestUpdateTime

+  // Keep track of stringified representations of context and instance
+  // to avoid enriching bindings as much as possible
+  let lastContextKey
+  let lastInstanceKey
+
  // Get contexts
  const context = getContext("context")
  const insideScreenslot = !!getContext("screenslot")
@ -42,7 +47,9 @@
    definition?.hasChildren &&
    definition?.showEmptyState !== false &&
    $builderStore.inBuilder
-  $: updateComponentProps(instance, $context)
+  $: rawProps = getRawProps(instance)
+  $: instanceKey = JSON.stringify(rawProps)
+  $: updateComponentProps(rawProps, instanceKey, $context)
  $: selected =
    $builderStore.inBuilder &&
    $builderStore.selectedComponentId === instance._id
@ -59,6 +66,16 @@
    name,
  })

+  const getRawProps = instance => {
+    let validProps = {}
+    Object.entries(instance)
+      .filter(([name]) => !name.startsWith("_"))
+      .forEach(([key, value]) => {
+        validProps[key] = value
+      })
+    return validProps
+  }
+
  // Gets the component constructor for the specified component
  const getComponentConstructor = component => {
    const split = component?.split("/")
@ -76,13 +93,23 @@
  }

  // Enriches any string component props using handlebars
-  const updateComponentProps = (instance, context) => {
+  const updateComponentProps = (rawProps, instanceKey, context) => {
+    const instanceSame = instanceKey === lastInstanceKey
+    const contextSame = context.key === lastContextKey
+
+    if (instanceSame && contextSame) {
+      return
+    } else {
+      lastInstanceKey = instanceKey
+      lastContextKey = context.key
+    }
+
    // Record the timestamp so we can reference it after enrichment
    latestUpdateTime = Date.now()
    const enrichmentTime = latestUpdateTime

    // Enrich props with context
-    const enrichedProps = enrichProps(instance, context)
+    const enrichedProps = enrichProps(rawProps, context)

    // Abandon this update if a newer update has started
    if (enrichmentTime !== latestUpdateTime) {
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@ -14,18 +14,32 @@
  const newContext = createContextStore(context)
  setContext("context", newContext)

-  $: providerKey = key || $component.id
+  const providerKey = key || $component.id

-  // Add data context
-  $: newContext.actions.provideData(providerKey, data)
+  // Generate a permanent unique ID for this component and use it to register
+  // any datasource actions
+  const instanceId = generate()

-  // Instance ID is unique to each instance of a provider
-  let instanceId
+  // Keep previous state around so we can avoid updating unless necessary
+  let lastDataKey
+  let lastActionsKey

-  // Add actions context
-  $: {
-    if (instanceId) {
-      actions?.forEach(({ type, callback, metadata }) => {
+  $: provideData(data)
+  $: provideActions(actions, instanceId)
+
+  const provideData = newData => {
+    const dataKey = JSON.stringify(newData)
+    if (dataKey !== lastDataKey) {
+      newContext.actions.provideData(providerKey, newData)
+      lastDataKey = dataKey
+    }
+  }
+
+  const provideActions = newActions => {
+    const actionsKey = JSON.stringify(newActions)
+    if (actionsKey !== lastActionsKey) {
+      lastActionsKey = actionsKey
+      newActions?.forEach(({ type, callback, metadata }) => {
        newContext.actions.provideAction(providerKey, type, callback)

        // Register any "refresh datasource" actions with a singleton store
@ -43,10 +57,6 @@
  }

  onMount(() => {
-    // Generate a permanent unique ID for this component and use it to register
-    // any datasource actions
-    instanceId = generate()
-
    // Unregister all datasource instances when unmounting this provider
    return () => dataSourceStore.actions.unregisterInstance(instanceId)
  })
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@ -1,6 +1,8 @@
 <script>
  import { onMount, onDestroy } from "svelte"
  import SettingsButton from "./SettingsButton.svelte"
+  import SettingsColorPicker from "./SettingsColorPicker.svelte"
+  import SettingsPicker from "./SettingsPicker.svelte"
  import { builderStore } from "../../store"
  import { domDebounce } from "../../utils/domDebounce"

@ -87,19 +89,44 @@
  >
    {#each settings as setting, idx}
      {#if setting.type === "select"}
-        {#each setting.options as option}
-          <SettingsButton
+        {#if setting.barStyle === "buttons"}
+          {#each setting.options as option}
+            <SettingsButton
+              prop={setting.key}
+              value={option.value}
+              icon={option.barIcon}
+              title={option.barTitle}
+            />
+          {/each}
+        {:else}
+          <SettingsPicker
            prop={setting.key}
-            value={option.value}
-            icon={option.barIcon}
-            title={option.barTitle}
+            options={setting.options}
+            label={setting.label}
          />
-        {/each}
+        {/if}
+      {:else if setting.type === "boolean"}
+        <SettingsButton
+          prop={setting.key}
+          icon={setting.barIcon}
+          title={setting.barTitle}
+          bool
+        />
+      {:else if setting.type === "color"}
+        <SettingsColorPicker prop={setting.key} />
      {/if}
-      {#if idx < settings.length - 1}
+      {#if setting.barSeparator !== false}
        <div class="divider" />
      {/if}
    {/each}
+    <SettingsButton
+      icon="Delete"
+      on:click={() => {
+        builderStore.actions.deleteComponent(
+          $builderStore.selectedComponent._id
+        )
+      }}
+    />
  </div>
 {/if}

--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@ -1,6 +1,7 @@
 <script>
  import { Icon } from "@budibase/bbui"
  import { builderStore } from "../../store"
+  import { createEventDispatcher } from "svelte"

  export let prop
  export let value
@ -9,6 +10,7 @@
  export let rotate = false
  export let bool = false

+  const dispatch = createEventDispatcher()
  $: currentValue = $builderStore.selectedComponent?.[prop]
  $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
@ -22,6 +24,7 @@
      const newValue = bool ? !currentValue : value
      builderStore.actions.updateProp(prop, newValue)
    }
+    dispatch("click")
  }}
 >
  <Icon name={icon} size="S" />
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@ -0,0 +1,26 @@
+<script>
+  import { ColorPicker } from "@budibase/bbui"
+  import { builderStore } from "../../store"
+
+  export let prop
+
+  $: currentValue = $builderStore.selectedComponent?.[prop]
+</script>
+
+<div>
+  <ColorPicker
+    size="S"
+    value={currentValue}
+    on:change={e => {
+      if (prop) {
+        builderStore.actions.updateProp(prop, e.detail)
+      }
+    }}
+  />
+</div>
+
+<style>
+  div {
+    padding: 0 4px;
+  }
+</style>
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@ -0,0 +1,31 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { builderStore } from "../../store"
+
+  export let prop
+  export let options
+  export let label
+
+  $: currentValue = $builderStore.selectedComponent?.[prop]
+</script>
+
+<div>
+  <Select
+    quiet
+    autoWidth
+    placeholder={label}
+    {options}
+    value={currentValue}
+    on:change={e => {
+      if (prop) {
+        builderStore.actions.updateProp(prop, e.detail)
+      }
+    }}
+  />
+</div>
+
+<style>
+  div {
+    padding: 0 4px;
+  }
+</style>
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@ -56,13 +56,14 @@ const createBuilderStore = () => {

  const actions = {
    selectComponent: id => {
-      if (id) {
-        dispatchEvent("select-component", { id })
-      }
+      dispatchEvent("select-component", { id })
    },
    updateProp: (prop, value) => {
      dispatchEvent("update-prop", { prop, value })
    },
+    deleteComponent: id => {
+      dispatchEvent("delete-component", { id })
+    },
  }
  return {
    ...writableStore,
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@ -4,7 +4,21 @@ export const createContextStore = oldContext => {
  const newContext = writable({})
  const contexts = oldContext ? [oldContext, newContext] : [newContext]
  const totalContext = derived(contexts, $contexts => {
-    return $contexts.reduce((total, context) => ({ ...total, ...context }), {})
+    // The key is the serialized representation of context
+    let key = ""
+    for (let i = 0; i < $contexts.length - 1; i++) {
+      key += $contexts[i].key
+    }
+    key += JSON.stringify($contexts[$contexts.length - 1])
+
+    // Reduce global state
+    const reducer = (total, context) => ({ ...total, ...context })
+    const context = $contexts.reduce(reducer, {})
+
+    return {
+      ...context,
+      key,
+    }
  })

  // Adds a data context layer to the tree
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@ -31,8 +31,14 @@ const triggerAutomationHandler = async action => {
 }

 const navigationHandler = action => {
-  if (action.parameters.url) {
-    routeStore.actions.navigate(action.parameters.url)
+  const { url } = action.parameters
+  if (url) {
+    const external = !url.startsWith("/")
+    if (external) {
+      window.location.href = url
+    } else {
+      routeStore.actions.navigate(action.parameters.url)
+    }
  }
 }

--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@ -22,14 +22,6 @@ export const propsAreSame = (a, b) => {
 * Data bindings are enriched, and button actions are enriched.
 */
 export const enrichProps = (props, context) => {
-  // Exclude all private props that start with an underscore
-  let validProps = {}
-  Object.entries(props)
-    .filter(([name]) => !name.startsWith("_"))
-    .forEach(([key, value]) => {
-      validProps[key] = value
-    })
-
  // Create context of all bindings and data contexts
  // Duplicate the closest context as "data" which the builder requires
  const totalContext = {
@ -41,7 +33,7 @@ export const enrichProps = (props, context) => {
  }

  // Enrich all data bindings in top level props
-  let enrichedProps = enrichDataBindings(validProps, totalContext)
+  let enrichedProps = enrichDataBindings(props, totalContext)

  // Enrich click actions if they exist
  if (enrichedProps.onClick) {
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@ -31,6 +31,12 @@ export const styleable = (node, styles = {}) => {
    if (newStyles.empty) {
      baseStyles.border = "2px dashed var(--grey-5)"
      baseStyles.padding = "var(--spacing-l)"
+      baseStyles.overflow = "hidden"
+    }
+
+    // Append border-style css if border-width is specified
+    if (newStyles.normal?.["border-width"]) {
+      baseStyles["border-style"] = "solid"
    }

    const componentId = newStyles.id
--- a/packages/server/src/api/controllers/layout.js
+++ b/packages/server/src/api/controllers/layout.js
@ -14,6 +14,7 @@ exports.save = async function (ctx) {
      ...EMPTY_LAYOUT,
      ...layout,
    }
+    layout.props._instanceName = layout.name
  }

  layout._id = layout._id || generateLayoutID()
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@ -57,6 +57,7 @@ const BASE_LAYOUTS = [
    name: "Navigation Layout",
    props: {
      _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
+      _instanceName: "Navigation Layout",
      _component: "@budibase/standard-components/layout",
      _children: [
        {
@ -102,6 +103,7 @@ const BASE_LAYOUTS = [
    name: "Empty Layout",
    props: {
      _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
+      _instanceName: "Empty Layout",
      _component: "@budibase/standard-components/layout",
      _children: [
        {
--- a/packages/server/src/constants/screens.js
+++ b/packages/server/src/constants/screens.js
@ -20,15 +20,13 @@ exports.createHomeScreen = () => ({
        _id: "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
        _component: "@budibase/standard-components/heading",
        _styles: {
-          normal: {
-            "text-align": "left",
-          },
          hover: {},
          active: {},
          selected: {},
        },
        text: "Welcome to your Budibase App 👋",
-        type: "h2",
+        size: "M",
+        align: "left",
        _instanceName: "Heading",
        _children: [],
      },
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -4,8 +4,7 @@
    "description": "This component is specific only to layouts",
    "icon": "Sandbox",
    "hasChildren": true,
-    "styleable": true,
-    "illegalChildren": [],
+    "styles": ["padding", "background"],
    "settings": [
      {
        "type": "text",
@ -61,14 +60,15 @@
    "description": "This component contains things within itself",
    "icon": "Sandbox",
    "hasChildren": true,
-    "styleable": true,
    "showSettingsBar": true,
+    "styles": ["padding", "size", "background", "border", "shadow"],
    "settings": [
      {
        "type": "select",
        "label": "Direction",
        "key": "direction",
        "showInBar": true,
+        "barStyle": "buttons",
        "options": [
          {
            "label": "Column",
@ -90,6 +90,7 @@
        "label": "Horiz. Align",
        "key": "hAlign",
        "showInBar": true,
+        "barStyle": "buttons",
        "options": [
          {
            "label": "Left",
@ -122,7 +123,8 @@
        "type": "select",
        "label": "Vert. Align",
        "key": "vAlign",
-        "showInBar": "true",
+        "showInBar": true,
+        "barStyle": "buttons",
        "options": [
          {
            "label": "Top",
@ -156,6 +158,7 @@
        "label": "Size",
        "key": "size",
        "showInBar": true,
+        "barStyle": "buttons",
        "options": [
          {
            "label": "Shrink",
@ -171,6 +174,40 @@
          }
        ],
        "defaultValue": "shrink"
+      },
+      {
+        "type": "select",
+        "label": "Gap",
+        "key": "gap",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [
+          {
+            "label": "None",
+            "value": "N"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M"
+      },
+      {
+        "type": "boolean",
+        "label": "Wrap",
+        "key": "wrap",
+        "showInBar": true,
+        "barIcon": "ModernGridView",
+        "barTitle": "Wrap"
      }
    ]
  },
@ -179,7 +216,6 @@
    "description": "Add a section to your application",
    "icon": "ColumnTwoB",
    "hasChildren": true,
-    "styleable": true,
    "illegalChildren": ["section"],
    "showEmptyState": false,
    "settings": [
@ -194,15 +230,13 @@
  "screenslot": {
    "name": "Screenslot",
    "icon": "WebPage",
-    "description": "Contains your app screens",
-    "styleable": true
+    "description": "Contains your app screens"
  },
  "button": {
    "name": "Button",
    "description": "A basic html button that is ready for styling",
    "icon": "Button",
    "illegalChildren": ["section"],
-    "styleable": true,
    "settings": [
      {
        "type": "text",
@ -211,16 +245,49 @@
      },
      {
        "type": "select",
-        "label": "Button Type",
+        "label": "Variant",
        "key": "type",
-        "options": ["primary", "secondary", "cta", "warning"],
+        "options": [
+          {
+            "label": "Primary",
+            "value": "primary"
+          }, {
+            "label": "Secondary",
+            "value": "secondary"
+          },
+          {
+            "label": "Action",
+            "value": "cta"
+          },
+          {
+            "label": "Warning",
+            "value": "warning"
+          }
+        ],
        "defaultValue": "primary"
      },
      {
        "type": "select",
        "label": "Size",
        "key": "size",
-        "options": ["S", "M", "L", "XL"],
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra large",
+            "value": "XL"
+          }
+        ],
        "defaultValue": "M"
      },
      {
@ -239,7 +306,6 @@
    "name": "Repeater",
    "description": "A configurable data list that attaches to your backend tables.",
    "icon": "ViewList",
-    "styleable": true,
    "illegalChildren": ["section"],
    "hasChildren": true,
    "showSettingsBar": true,
@ -265,6 +331,7 @@
        "label": "Direction",
        "key": "direction",
        "showInBar": true,
+        "barStyle": "buttons",
        "options": [
          {
            "label": "Column",
@ -286,6 +353,7 @@
        "label": "Horiz. Align",
        "key": "hAlign",
        "showInBar": true,
+        "barStyle": "buttons",
        "options": [
          {
            "label": "Left",
@ -318,7 +386,8 @@
        "type": "select",
        "label": "Vert. Align",
        "key": "vAlign",
-        "showInBar": "true",
+        "showInBar": true,
+        "barStyle": "buttons",
        "options": [
          {
            "label": "Top",
@ -346,6 +415,32 @@
          }
        ],
        "defaultValue": "top"
+      },
+      {
+        "type": "select",
+        "label": "Gap",
+        "key": "gap",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [
+          {
+            "label": "None",
+            "value": "N"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M"
      }
    ],
    "context": {
@ -356,7 +451,6 @@
    "name": "Stacked List",
    "icon": "TaskList",
    "description": "A basic card component that can contain content and actions.",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -386,7 +480,6 @@
    "name": "Vertical Card",
    "description": "A basic card component that can contain content and actions.",
    "icon": "ViewColumn",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -447,13 +540,93 @@
    "name": "Paragraph",
    "description": "A component for displaying paragraph text.",
    "icon": "TextParagraph",
-    "styleable": true,
    "illegalChildren": ["section"],
+    "showSettingsBar": true,
    "settings": [
      {
        "type": "text",
        "label": "Text",
        "key": "text"
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "M",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
      }
    ]
  },
@ -461,8 +634,8 @@
    "name": "Headline",
    "icon": "TextBold",
    "description": "A component for displaying heading text",
-    "styleable": true,
    "illegalChildren": ["section"],
+    "showSettingsBar": true,
    "settings": [
      {
        "type": "text",
@ -471,10 +644,83 @@
      },
      {
        "type": "select",
-        "key": "type",
-        "label": "Type",
-        "options": ["h1", "h2", "h3", "h4", "h5", "h6"],
-        "defaultValue": "h1"
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "M",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
      }
    ]
  },
@ -482,8 +728,8 @@
    "name": "Image",
    "description": "A basic component for displaying images",
    "icon": "Image",
-    "styleable": true,
    "illegalChildren": ["section"],
+    "styles": ["size"],
    "settings": [
      {
        "type": "text",
@ -496,7 +742,7 @@
    "name": "Background Image",
    "description": "A background image",
    "icon": "Images",
-    "styleable": true,
+    "styles": ["size"],
    "illegalChildren": ["section"],
    "settings": [
      {
@ -554,7 +800,6 @@
    "name": "Icon",
    "description": "A basic component for displaying icons",
    "icon": "Bell",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -602,7 +847,6 @@
    "name": "Nav Bar",
    "description": "A component for handling the navigation within your app.",
    "icon": "BreadcrumbNavigation",
-    "styleable": true,
    "illegalChildren": ["section"],
    "hasChildren": true,
    "settings": [
@ -623,7 +867,7 @@
    "name": "Link",
    "description": "A basic link component for internal and external links",
    "icon": "Link",
-    "styleable": true,
+    "showSettingsBar": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -642,10 +886,85 @@
        "label": "New Tab",
        "key": "openInNewTab"
      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "M",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
      {
        "type": "boolean",
-        "label": "External",
-        "key": "external"
+        "label": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
      }
    ]
  },
@ -653,7 +972,6 @@
    "name": "Horizontal Card",
    "description": "A basic card component that can contain content and actions.",
    "icon": "ViewRow",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -726,7 +1044,6 @@
    "name": "Stat Card",
    "description": "A card component for displaying numbers.",
    "icon": "Card",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -753,8 +1070,8 @@
    "name": "Embed",
    "icon": "Code",
    "description": "Embed content from 3rd party sources",
-    "styleable": true,
    "illegalChildren": ["section"],
+    "styles": ["size"],
    "settings": [
      {
        "type": "text",
@ -767,7 +1084,6 @@
    "name": "Bar Chart",
    "description": "Bar chart",
    "icon": "GraphBarVertical",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -868,7 +1184,6 @@
    "name": "Line Chart",
    "description": "Line chart",
    "icon": "GraphTrend",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -970,7 +1285,6 @@
    "name": "Area Chart",
    "description": "Line chart",
    "icon": "GraphAreaStacked",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1084,7 +1398,6 @@
    "name": "Pie Chart",
    "description": "Pie chart",
    "icon": "GraphPie",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1162,7 +1475,6 @@
    "name": "Donut Chart",
    "description": "Donut chart",
    "icon": "GraphDonut",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1240,7 +1552,6 @@
    "name": "Candlestick Chart",
    "description": "Candlestick chart",
    "icon": "GraphBarVerticalStacked",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1322,7 +1633,6 @@
  "form": {
    "name": "Form",
    "icon": "Form",
-    "styleable": true,
    "hasChildren": true,
    "illegalChildren": ["section"],
    "actions": [
@ -1395,7 +1705,6 @@
  "fieldgroup": {
    "name": "Field Group",
    "icon": "Group",
-    "styleable": true,
    "illegalChildren": ["section"],
    "hasChildren": true,
    "settings": [
@ -1424,7 +1733,6 @@
  "stringfield": {
    "name": "Text Field",
    "icon": "Text",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1453,7 +1761,6 @@
  "numberfield": {
    "name": "Number Field",
    "icon": "123",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1482,7 +1789,6 @@
  "passwordfield": {
    "name": "Password Field",
    "icon": "LockClosed",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1511,7 +1817,6 @@
  "optionsfield": {
    "name": "Options Picker",
    "icon": "ViewList",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1541,7 +1846,6 @@
  "booleanfield": {
    "name": "Checkbox",
    "icon": "Checkmark",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1570,7 +1874,6 @@
  "longformfield": {
    "name": "Rich Text",
    "icon": "TextParagraph",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1600,7 +1903,6 @@
  "datetimefield": {
    "name": "Date Picker",
    "icon": "DateInput",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1635,7 +1937,6 @@
  "attachmentfield": {
    "name": "Attachment",
    "icon": "Attach",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1659,7 +1960,6 @@
  "relationshipfield": {
    "name": "Relationship Picker",
    "icon": "TaskList",
-    "styleable": true,
    "illegalChildren": ["section"],
    "settings": [
      {
@ -1689,7 +1989,6 @@
    "name": "Data Provider",
    "info": "Pagination is only available for data stored in internal tables.",
    "icon": "Data",
-    "styleable": false,
    "illegalChildren": ["section"],
    "hasChildren": true,
    "settings": [
@ -1753,7 +2052,6 @@
  "table": {
    "name": "Table",
    "icon": "Table",
-    "styleable": true,
    "illegalChildren": ["section"],
    "hasChildren": true,
    "showEmptyState": false,
@ -1809,11 +2107,6 @@
          }
        ]
      },
-      {
-        "type": "boolean",
-        "label": "Quiet",
-        "key": "quiet"
-      },
      {
        "type": "multifield",
        "label": "Columns",
@ -1823,7 +2116,12 @@
      },
      {
        "type": "boolean",
-        "label": "Auto Cols.",
+        "label": "Quiet",
+        "key": "quiet"
+      },
+      {
+        "type": "boolean",
+        "label": "Auto Columns",
        "key": "showAutoColumns",
        "defaultValue": false
      }
@ -1835,7 +2133,6 @@
  "daterangepicker": {
    "name": "Date Range",
    "icon": "Date",
-    "styleable": true,
    "hasChildren": false,
    "info": "Your data provider will be automatically filtered to the given date range.",
    "settings": [
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@ -1,7 +1,8 @@
 <script>
  import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"

-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
  const component = getContext("component")

  export let url
@ -18,13 +19,24 @@
  }
 </script>

-<div class="outer" use:styleable={$component.styles}>
-  <div class="inner" {style} />
-</div>
+{#if url}
+  <div class="outer" use:styleable={$component.styles}>
+    <div class="inner" {style} />
+  </div>
+{:else if $builderStore.inBuilder}
+  <div
+    class="placeholder"
+    use:styleable={{ ...$component.styles, empty: true }}
+  >
+    <Placeholder />
+  </div>
+{/if}

 <style>
  .outer {
    position: relative;
+    width: 100%;
+    height: 400px;
  }

  .inner {
@ -35,4 +47,9 @@
    background-size: cover;
    background-position: center center;
  }
+
+  .placeholder {
+    display: grid;
+    place-items: center;
+  }
 </style>
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@ -19,3 +19,10 @@
 >
  {text || ""}
 </button>
+
+<style>
+  button {
+    width: fit-content;
+    width: -moz-fit-content;
+  }
+</style>
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@ -8,17 +8,24 @@
  export let hAlign
  export let vAlign
  export let size
+  export let gap
+  export let wrap

  $: directionClass = direction ? `valid-container direction-${direction}` : ""
  $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
  $: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
  $: sizeClass = size ? `size-${size}` : ""
+  $: gapClass = gap ? `gap-${gap}` : ""
+  $: classNames = [
+    directionClass,
+    hAlignClass,
+    vAlignClass,
+    sizeClass,
+    gapClass,
+  ].join(" ")
 </script>

-<div
-  class={[directionClass, hAlignClass, vAlignClass, sizeClass].join(" ")}
-  use:styleable={$component.styles}
->
+<div class={classNames} use:styleable={$component.styles} class:wrap>
  <slot />
 </div>

@ -83,4 +90,18 @@
  .direction-column.hAlign-stretch {
    align-items: stretch;
  }
+
+  .gap-S {
+    gap: 8px;
+  }
+  .gap-M {
+    gap: 16px;
+  }
+  .gap-L {
+    gap: 32px;
+  }
+
+  .wrap {
+    flex-wrap: wrap;
+  }
 </style>
--- a/packages/standard-components/src/Embed.svelte
+++ b/packages/standard-components/src/Embed.svelte
@ -1,23 +1,29 @@
 <script>
  import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"

-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
  const component = getContext("component")

  export let embed
 </script>

-<div use:styleable={$component.styles}>
-  {@html embed}
-</div>
+{#if embed}
+  <div class="embed" use:styleable={$component.styles}>
+    {@html embed}
+  </div>
+{:else if $builderStore.inBuilder}
+  <div use:styleable={{ ...$component.styles, empty: true }}>
+    <Placeholder />
+  </div>
+{/if}

 <style>
-  div {
+  .embed {
    position: relative;
  }
-  div :global(> *) {
+  .embed :global(> *) {
    width: 100%;
    height: 100%;
-    position: absolute;
  }
 </style>
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@ -4,41 +4,84 @@
  const { styleable, builderStore } = getContext("sdk")
  const component = getContext("component")

-  export let type
  export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size

  $: placeholder = $builderStore.inBuilder && !text
  $: componentText = $builderStore.inBuilder
    ? text || "Placeholder text"
    : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>

-{#if type === "h1"}
-  <h1 class:placeholder use:styleable={$component.styles}>{componentText}</h1>
-{:else if type === "h2"}
-  <h2 class:placeholder use:styleable={$component.styles}>{componentText}</h2>
-{:else if type === "h3"}
-  <h3 class:placeholder use:styleable={$component.styles}>{componentText}</h3>
-{:else if type === "h4"}
-  <h4 class:placeholder use:styleable={$component.styles}>{componentText}</h4>
-{:else if type === "h5"}
-  <h5 class:placeholder use:styleable={$component.styles}>{componentText}</h5>
-{:else if type === "h6"}
-  <h6 class:placeholder use:styleable={$component.styles}>{componentText}</h6>
-{/if}
+<h1
+  use:styleable={styles}
+  class:placeholder
+  class:bold
+  class:italic
+  class:underline
+  class="align--{align || 'left'} size--{size || 'M'}"
+>
+  {#if bold}
+    <strong>{componentText}</strong>
+  {:else}
+    {componentText}
+  {/if}
+</h1>

 <style>
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1 {
+    display: inline-block;
    white-space: pre-wrap;
+    font-weight: 600;
+    margin: 0;
  }
-
  .placeholder {
    font-style: italic;
    color: var(--grey-6);
  }
+  .bold {
+    font-weight: 700;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 18px;
+  }
+  .size--M {
+    font-size: 22px;
+  }
+  .size--L {
+    font-size: 28px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
+  }
 </style>
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@ -1,21 +1,27 @@
 <script>
  import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"

-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
  const component = getContext("component")

-  export let className = ""
-  export let url = ""
-  export let description = ""
-  export let height
-  export let width
+  export let url
 </script>

-<img
-  {height}
-  {width}
-  class={className}
-  src={url}
-  alt={description}
-  use:styleable={$component.styles}
-/>
+{#if url}
+  <img src={url} alt={$component.name} use:styleable={$component.styles} />
+{:else if $builderStore.inBuilder}
+  <div
+    class="placeholder"
+    use:styleable={{ ...$component.styles, empty: true }}
+  >
+    <Placeholder />
+  </div>
+{/if}
+
+<style>
+  .placeholder {
+    display: grid;
+    place-items: center;
+  }
+</style>
--- a/packages/standard-components/src/Layout.svelte
+++ b/packages/standard-components/src/Layout.svelte
@ -123,6 +123,8 @@
    align-items: stretch;
    height: 100%;
    overflow: auto;
+    overflow-x: hidden;
+    position: relative;
  }

  .nav-wrapper {
@ -131,7 +133,7 @@
    justify-content: center;
    align-items: stretch;
    background: white;
-    z-index: 1;
+    z-index: 2;
    box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
  }
  .layout--top .nav-wrapper.sticky {
@ -163,6 +165,7 @@
    justify-content: center;
    align-items: stretch;
    flex: 1 1 auto;
+    z-index: 1;
  }
  .main {
    display: flex;
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@ -1,31 +1,105 @@
 <script>
  import { getContext } from "svelte"

-  const { linkable, styleable } = getContext("sdk")
+  const { linkable, styleable, builderStore } = getContext("sdk")
  const component = getContext("component")

-  export let url = ""
-  export let text = ""
-  export let openInNewTab = false
-  export let external = false
+  export let url
+  export let text
+  export let openInNewTab
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size

+  $: external = url && !url.startsWith("/")
  $: target = openInNewTab ? "_blank" : "_self"
+  $: placeholder = $builderStore.inBuilder && !text
+  $: componentText = $builderStore.inBuilder
+    ? text || "Placeholder link"
+    : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>

-{#if external}
-  <a href={url || "/"} {target} use:styleable={$component.styles}>
-    {text}
-    <slot />
-  </a>
-{:else}
-  <a href={url || "/"} use:linkable {target} use:styleable={$component.styles}>
-    {text}
-    <slot />
-  </a>
+{#if $builderStore.inBuilder || componentText}
+  {#if external}
+    <a
+      {target}
+      href={url || "/"}
+      use:styleable={styles}
+      class:placeholder
+      class:bold
+      class:italic
+      class:underline
+      class="align--{align || 'left'} size--{size || 'M'}"
+    >
+      {componentText}
+    </a>
+  {:else}
+    <a
+      use:linkable
+      href={url || "/"}
+      use:styleable={styles}
+      class:placeholder
+      class:bold
+      class:italic
+      class:underline
+      class="align--{align || 'left'} size--{size || 'M'}"
+    >
+      {componentText}
+    </a>
+  {/if}
 {/if}

 <style>
  a {
    color: var(--spectrum-alias-text-color);
+    display: inline-block;
+    white-space: pre-wrap;
+  }
+  .placeholder {
+    font-style: italic;
+    color: var(--grey-6);
+  }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 14px;
+  }
+  .size--M {
+    font-size: 16px;
+  }
+  .size--L {
+    font-size: 18px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
  }
 </style>
--- a/packages/standard-components/src/Placeholder.svelte
+++ b/packages/standard-components/src/Placeholder.svelte
@ -4,12 +4,12 @@
  const { builderStore } = getContext("sdk")
  const component = getContext("component")

-  export let text = $component.name || "Placeholder"
+  export let text
 </script>

 {#if $builderStore.inBuilder}
  <div>
-    {text}
+    {text || $component.name || "Placeholder"}
  </div>
 {/if}

--- a/packages/standard-components/src/Repeater.svelte
+++ b/packages/standard-components/src/Repeater.svelte
@ -8,6 +8,7 @@
  export let direction
  export let hAlign
  export let vAlign
+  export let gap

  const { Provider } = getContext("sdk")
  const component = getContext("component")
@ -16,7 +17,7 @@
  $: loaded = dataProvider?.loaded ?? true
 </script>

-<Container {direction} {hAlign} {vAlign}>
+<Container {direction} {hAlign} {vAlign} {gap} wrap>
  {#if $component.empty}
    <Placeholder />
  {:else if rows.length > 0}
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@ -5,14 +5,37 @@
  const component = getContext("component")

  export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size

  $: placeholder = $builderStore.inBuilder && !text
  $: componentText = $builderStore.inBuilder
    ? text || "Placeholder text"
    : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>

-<p use:styleable={$component.styles} class:placeholder>
+<p
+  use:styleable={styles}
+  class:placeholder
+  class:bold
+  class:italic
+  class:underline
+  class="align--{align || 'left'} size--{size || 'M'}"
+>
  {componentText}
 </p>

@ -20,10 +43,40 @@
  p {
    display: inline-block;
    white-space: pre-wrap;
+    margin: 0;
  }
-
  .placeholder {
    font-style: italic;
    color: var(--grey-6);
  }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 14px;
+  }
+  .size--M {
+    font-size: 16px;
+  }
+  .size--L {
+    font-size: 18px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
+  }
 </style>
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@ -21,7 +21,7 @@

  const setUpChart = provider => {
    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
      return null
    }

--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@ -21,7 +21,7 @@
  // Fetch data on mount
  const setUpChart = provider => {
    const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
      return null
    }

--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@ -28,7 +28,7 @@
  // Fetch data on mount
  const setUpChart = provider => {
    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || allCols.find(x => x == null)) {
+    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
      return null
    }

--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@ -18,7 +18,7 @@

  // Fetch data on mount
  const setUpChart = provider => {
-    if (!provider || !labelColumn || !valueColumn) {
+    if (!provider || !provider.rows?.length || !labelColumn || !valueColumn) {
      return null
    }

--- a/packages/string-templates/src/index.cjs
+++ b/packages/string-templates/src/index.cjs
@ -92,8 +92,6 @@ module.exports.processStringSync = (string, context) => {
  }
  // take a copy of input incase error
  const input = string
-  const clonedContext = removeNull(updateContext(cloneDeep(context)))
-  // remove any null/undefined properties
  if (typeof string !== "string") {
    throw "Cannot process non-string types."
  }
@ -103,7 +101,10 @@ module.exports.processStringSync = (string, context) => {
    const template = hbsInstance.compile(string, {
      strict: false,
    })
-    return processors.postprocess(template(clonedContext))
+    return processors.postprocess(template({
+      now: new Date().toISOString(),
+      ...context,
+    }))
  } catch (err) {
    return removeHandlebarsStatements(input)
  }
--- a/packages/string-templates/src/utilities.js
+++ b/packages/string-templates/src/utilities.js
@ -1,4 +1,3 @@
-const _ = require("lodash")
 const ALPHA_NUMERIC_REGEX = /^[A-Za-z0-9]+$/g

 module.exports.FIND_HBS_REGEX = /{{([^{].*?)}}/g
@ -11,38 +10,6 @@ module.exports.swapStrings = (string, start, length, swap) => {
  return string.slice(0, start) + swap + string.slice(start + length)
 }

-// removes null and undefined
-module.exports.removeNull = obj => {
-  obj = _(obj).omitBy(_.isUndefined).omitBy(_.isNull).value()
-  for (let [key, value] of Object.entries(obj)) {
-    // only objects
-    if (typeof value === "object" && !Array.isArray(value)) {
-      obj[key] = module.exports.removeNull(value)
-    }
-  }
-  return obj
-}
-
-module.exports.updateContext = obj => {
-  if (obj.now == null) {
-    obj.now = new Date().toISOString()
-  }
-  function recurse(obj) {
-    for (let key of Object.keys(obj)) {
-      if (!obj[key]) {
-        continue
-      }
-      if (obj[key] instanceof Date) {
-        obj[key] = obj[key].toISOString()
-      } else if (typeof obj[key] === "object") {
-        obj[key] = recurse(obj[key])
-      }
-    }
-    return obj
-  }
-  return recurse(obj)
-}
-
 module.exports.removeHandlebarsStatements = string => {
  let regexp = new RegExp(exports.FIND_HBS_REGEX)
  let matches = string.match(regexp)
--- a/packages/string-templates/test/basic.spec.js
+++ b/packages/string-templates/test/basic.spec.js
@ -111,7 +111,7 @@ describe("check the utility functions", () => {
  it("should be able to handle an input date object", async () => {
    const date = new Date()
    const output = await processString("{{ dateObj }}", { dateObj: date })
-    expect(date.toISOString()).toEqual(output)
+    expect(date.toString()).toEqual(output)
  })
 })