From f63b6946ecc422c82684f2fdbcce313aad88a67f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Dec 2020 08:54:09 +0000
Subject: [PATCH 01/22] Fix empty screen list when navigating between roles

---
 .../ComponentsPaneSwitcher.svelte             | 82 -------------------
 .../design/[assetType]/_layout.svelte         | 10 ++-
 2 files changed, 7 insertions(+), 85 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
deleted file mode 100644
index beae2d7e3f..0000000000
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import { store, allScreens } from "builderStore"
-  import { FrontendTypes } from "constants"
-  import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
-  import ComponentSelectionList from "./ComponentSelectionList.svelte"
-
-  const PROPERTIES_TAB = "properties"
-  const COMPONENT_SELECTION_TAB = "components"
-
-  let selected = PROPERTIES_TAB
-
-  const isSelected = tab => selected === tab
-
-  const selectTab = tab => (selected = tab)
-
-  const toggleTab = () =>
-    (selected =
-      selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
-</script>
-
-<div class="root">
-  {#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
-    <div class="switcher">
-      <button
-        class:selected={selected === COMPONENT_SELECTION_TAB}
-        on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
-        Add
-      </button>
-
-      <button
-        class:selected={selected === PROPERTIES_TAB}
-        on:click={() => selectTab(PROPERTIES_TAB)}>
-        Edit
-      </button>
-    </div>
-
-    <div class="panel">
-      {#if selected === PROPERTIES_TAB}
-        <ComponentPropertiesPanel {toggleTab} />
-      {/if}
-
-      {#if selected === COMPONENT_SELECTION_TAB}
-        <ComponentSelectionList {toggleTab} />
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 5px 20px 10px;
-    border-left: solid 1px var(--grey-2);
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--grey-5);
-    margin-right: 20px;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-
-  .panel {
-    height: 100%;
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
index b797a18dc4..df013f2abe 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
@@ -1,7 +1,11 @@
 <script>
-  import { store, backendUiStore, currentAsset } from "builderStore"
+  import {
+    store,
+    backendUiStore,
+    currentAsset,
+    selectedComponent,
+  } from "builderStore"
   import { onMount } from "svelte"
-  import { FrontendTypes } from "constants"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
@@ -43,7 +47,7 @@
     {/if}
   </div>
 
-  {#if $store.currentFrontEndType === FrontendTypes.SCREEN || $store.currentFrontEndType === FrontendTypes.LAYOUT}
+  {#if $selectedComponent != null}
     <div class="components-pane">
       <ComponentPropertiesPanel />
     </div>

From fb3a3d504ed972c904c1e6ea1e4d6fc580d2d4c2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Dec 2020 09:23:03 +0000
Subject: [PATCH 02/22] Fix new layouts having bad styling

---
 .../userInterface/SettingsView.svelte         |  4 ++--
 packages/server/src/api/controllers/layout.js |  4 ++--
 packages/server/src/constants/layouts.js      | 23 +++++++++++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index eee50d8cf6..211e04d009 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -41,7 +41,7 @@
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
 
-  const layoutDefinition = [{ key: "title", label: "Title", control: Input }]
+  const layoutDefinition = []
 
   const canRenderControl = (key, dependsOn) => {
     let test = !isEmpty(componentInstance[dependsOn])
@@ -119,7 +119,7 @@
     {/if}
   {/if}
 
-  {#if panelDefinition && panelDefinition.length > 0}
+  {#if !isLayout && panelDefinition && panelDefinition.length > 0}
     {#each panelDefinition as definition}
       {#if canRenderControl(definition.key, definition.dependsOn)}
         <PropertyControl
diff --git a/packages/server/src/api/controllers/layout.js b/packages/server/src/api/controllers/layout.js
index 433a173d1c..de4c647c9f 100644
--- a/packages/server/src/api/controllers/layout.js
+++ b/packages/server/src/api/controllers/layout.js
@@ -8,8 +8,8 @@ exports.save = async function(ctx) {
 
   if (!layout.props) {
     layout = {
-      ...layout,
       ...EMPTY_LAYOUT,
+      ...layout,
     }
   }
 
@@ -34,7 +34,7 @@ exports.destroy = async function(ctx) {
     )
   ).rows.map(element => element.doc.layoutId)
   if (layoutsUsedByScreens.includes(layoutId)) {
-    ctx.throw(400, "Cannot delete a base layout")
+    ctx.throw(400, "Cannot delete a layout that's being used by a screen")
   }
 
   await db.remove(layoutId, layoutRev)
diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js
index f2ad5b2675..0b25bf52a9 100644
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@@ -16,7 +16,17 @@ const EMPTY_LAYOUT = {
         _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
         _component: "##builtin/screenslot",
         _styles: {
-          normal: {},
+          normal: {
+            flex: "1 1 auto",
+            display: "flex",
+            "flex-direction": "column",
+            "justify-content": "flex-start",
+            "align-items": "stretch",
+            "max-width": "100%",
+            "margin-left": "20px",
+            "margin-right": "20px",
+            width: "1400px",
+          },
           hover: {},
           active: {},
           selected: {},
@@ -28,7 +38,16 @@ const EMPTY_LAYOUT = {
     _styles: {
       active: {},
       hover: {},
-      normal: {},
+      normal: {
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "center",
+        "justify-content": "flex-start",
+        "margin-right": "auto",
+        "margin-left": "auto",
+        "min-height": "100%",
+        "background-image": "#f5f5f5",
+      },
       selected: {},
     },
     className: "",

From f8e6dd99ef622f6579df9464bc1745062b12c357 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Dec 2020 09:56:18 +0000
Subject: [PATCH 03/22] Fix lag when swapping between settings and design
 options

---
 .../userInterface/PropertyGroup.svelte        | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 2fb304f5c8..e2a712f45f 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -14,17 +14,19 @@
 </script>
 
 <DetailSummary {name} on:open show={open} thin>
-  <div>
-    {#each properties as props}
-      <PropertyControl
-        label={props.label}
-        control={props.control}
-        key={props.key}
-        value={style[props.key]}
-        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-        props={{ ...excludeProps(props, ['control', 'label']) }} />
-    {/each}
-  </div>
+  {#if open}
+    <div>
+      {#each properties as props}
+        <PropertyControl
+          label={props.label}
+          control={props.control}
+          key={props.key}
+          value={style[props.key]}
+          onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+          props={{ ...excludeProps(props, ['control', 'label']) }} />
+      {/each}
+    </div>
+  {/if}
 </DetailSummary>
 
 <style>

From 1a1aa5963d76e14b420aa08ec1da39227624d45b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 4 Jan 2021 18:39:17 +0000
Subject: [PATCH 04/22] Add ability to enter custom component CSS

---
 .../src/builderStore/store/frontend.js        | 26 +++++++++----------
 .../ComponentPropertiesPanel.svelte           |  7 ++++-
 .../userInterface/DesignView.svelte           | 20 +++++++++++++-
 packages/client/src/utils/styleable.js        | 16 +++++++-----
 4 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 263041aadd..a12e3a4538 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -366,20 +366,20 @@ export const getFrontendStore = () => {
         await Promise.all(promises)
       },
       updateStyle: async (type, name, value) => {
-        let promises = []
         const selected = get(selectedComponent)
-
-        store.update(state => {
-          if (!selected._styles) {
-            selected._styles = {}
-          }
-          selected._styles[type][name] = value
-
-          // save without messing with the store
-          promises.push(store.actions.preview.saveSelected())
-          return state
-        })
-        await Promise.all(promises)
+        if (!selected._styles) {
+          selected._styles = {}
+        }
+        selected._styles[type][name] = value
+        await store.actions.preview.saveSelected()
+      },
+      updateCustomStyle: async style => {
+        const selected = get(selectedComponent)
+        if (!selected._styles) {
+          selected._styles = {}
+        }
+        selected._styles.custom = style
+        await store.actions.preview.saveSelected()
       },
       updateProp: (name, value) => {
         store.update(state => {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 4699a8e415..422dcca85c 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -31,6 +31,7 @@
     componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.actions.components.updateStyle
+  const onCustomStyleChanged = store.actions.components.updateCustomStyle
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
@@ -93,7 +94,11 @@
 
 <div class="component-props-container">
   {#if selectedCategory.value === 'design'}
-    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+    <DesignView
+      {panelDefinition}
+      {componentInstance}
+      {onStyleChanged}
+      {onCustomStyleChanged} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView
       {componentInstance}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 66ec1a2676..2ab7e8d5f6 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { TextArea, DetailSummary } from "@budibase/bbui"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
@@ -7,6 +7,7 @@
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
+  export let onCustomStyleChanged = () => {}
 
   let selectedCategory = "normal"
   let propGroup = null
@@ -44,6 +45,17 @@
             open={currentGroup === groupName}
             on:open={() => (currentGroup = groupName)} />
         {/each}
+        <DetailSummary
+          name="Custom Styles"
+          on:open={() => (currentGroup = 'custom')}
+          show={currentGroup === 'custom'}
+          thin>
+          <div class="custom-styles">
+            <TextArea
+              value={componentInstance._styles.custom}
+              on:change={event => onCustomStyleChanged(event.target.value)} />
+          </div>
+        </DetailSummary>
       {:else}
         <div class="no-design">
           This component doesn't have any design properties.
@@ -85,4 +97,10 @@
     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>
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 1953139714..4c6f8ca3b7 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,16 +1,17 @@
 /**
  * Helper to build a CSS string from a style object
  */
-const buildStyleString = (styles, selected) => {
+const buildStyleString = (styleObject, customStyles, selected) => {
   let str = ""
-  if (selected) {
-    styles.border = "2px solid #0055ff !important"
-  }
-  Object.entries(styles).forEach(([style, value]) => {
+  Object.entries(styleObject).forEach(([style, value]) => {
     if (style && value != null) {
       str += `${style}: ${value}; `
     }
   })
+  str += customStyles || ""
+  if (selected) {
+    str += ";border: 2px solid #0055ff !important;"
+  }
   return str
 }
 
@@ -24,6 +25,7 @@ export const styleable = (node, styles = {}) => {
   // Creates event listeners and applies initial styles
   const setupStyles = newStyles => {
     const selected = newStyles.selected
+    const customStyles = newStyles.custom
     const normalStyles = newStyles.normal || {}
     const hoverStyles = {
       ...normalStyles,
@@ -31,11 +33,11 @@ export const styleable = (node, styles = {}) => {
     }
 
     applyNormalStyles = () => {
-      node.style = buildStyleString(normalStyles, selected)
+      node.style = buildStyleString(normalStyles, customStyles, selected)
     }
 
     applyHoverStyles = () => {
-      node.style = buildStyleString(hoverStyles, selected)
+      node.style = buildStyleString(hoverStyles, customStyles, selected)
     }
 
     // Add listeners to toggle hover styles

From 5867ba09ac44b7e5a168e357c5e0cb5ac9bb3ab1 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 5 Jan 2021 11:24:28 +0000
Subject: [PATCH 05/22] Fix for: Small Typo in Data Binding textbox #962

---
 .../builder/src/components/userInterface/BindingDropdown.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index e62f76e4b7..afbad79f96 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -62,7 +62,7 @@
     <TextArea
       thin
       bind:value
-      placeholder="Add text, or lick the objects on the left to add them to the
+      placeholder="Add text, or click the objects on the left to add them to the
       textbox." />
     <div class="controls">
       <a href="https://docs.budibase.com/design/binding">

From faa090f6f10bbc4bdf86d8e7aad1c1523bed1052 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:44:58 +0000
Subject: [PATCH 06/22] Add fontend store method to reset styles and delete
 unset styles when updating styles

---
 .../src/builderStore/store/frontend.js        | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index a12e3a4538..bce663325b 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -23,6 +23,7 @@ import {
   getComponentDefinition,
   findParent,
 } from "../storeUtils"
+import { defaults } from "../../components/userInterface/propertyCategories"
 
 const INITIAL_FRONTEND_STATE = {
   apps: [],
@@ -367,20 +368,27 @@ export const getFrontendStore = () => {
       },
       updateStyle: async (type, name, value) => {
         const selected = get(selectedComponent)
-        if (!selected._styles) {
-          selected._styles = {}
+        if (value == null || value === "") {
+          delete selected._styles[type][name]
+        } else {
+          selected._styles[type][name] = value
         }
-        selected._styles[type][name] = value
         await store.actions.preview.saveSelected()
       },
       updateCustomStyle: async style => {
         const selected = get(selectedComponent)
-        if (!selected._styles) {
-          selected._styles = {}
-        }
         selected._styles.custom = style
         await store.actions.preview.saveSelected()
       },
+      resetStyles: async () => {
+        const selected = get(selectedComponent)
+        selected._styles = {
+          normal: defaults,
+          hover: defaults,
+          active: defaults,
+        }
+        await store.actions.preview.saveSelected()
+      },
       updateProp: (name, value) => {
         store.update(state => {
           let current_component = get(selectedComponent)

From 2a478f7f03fe4a834c86b10700a6ff388a8233bc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:45:50 +0000
Subject: [PATCH 07/22] Add placeholders for all style options, add pretty
 labels for all style options

---
 .../userInterface/propertyCategories.js       | 233 ++++++++++++------
 1 file changed, 153 insertions(+), 80 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index bb35f2704c..71514fb209 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -11,9 +11,10 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "",
     options: [
-      { label: "N/A ", value: "N/A" },
+      { label: "Choose option", value: "" },
+      { label: "Block", value: "block" },
+      { label: "Inline Block", value: "inline-block" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -31,15 +32,15 @@ export const layout = [
         padding: "0px 5px",
         value: "columnReverse",
       },
+      { icon: "ri-close-line", value: "" },
     ],
   },
   {
     label: "Justify",
     key: "justify-content",
     control: OptionSelect,
-    initialValue: "Flex Start",
     options: [
-      { label: "", value: "" },
+      { label: "Choose option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -52,8 +53,8 @@ export const layout = [
     label: "Align",
     key: "align-items",
     control: OptionSelect,
-    initialValue: "Flex Start",
     options: [
+      { label: "Choose option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -66,8 +67,9 @@ export const layout = [
     key: "flex-wrap",
     control: OptionSelect,
     options: [
-      { label: "wrap", value: "wrap" },
-      { label: "no wrap", value: "noWrap" },
+      { label: "Choose option", value: "" },
+      { label: "Wrap", value: "wrap" },
+      { label: "No wrap", value: "nowrap" },
     ],
   },
   {
@@ -75,6 +77,7 @@ export const layout = [
     key: "gap",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -93,6 +96,7 @@ export const margin = [
     key: "margin",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -112,6 +116,7 @@ export const margin = [
     key: "margin-top",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -131,6 +136,7 @@ export const margin = [
     key: "margin-right",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -150,6 +156,7 @@ export const margin = [
     key: "margin-bottom",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -169,6 +176,7 @@ export const margin = [
     key: "margin-left",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -191,6 +199,7 @@ export const padding = [
     key: "padding",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -208,6 +217,7 @@ export const padding = [
     key: "padding-top",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -225,6 +235,7 @@ export const padding = [
     key: "padding-right",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -242,6 +253,7 @@ export const padding = [
     key: "padding-bottom",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -259,6 +271,7 @@ export const padding = [
     key: "padding-left",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -278,8 +291,8 @@ export const size = [
     label: "Flex",
     key: "flex",
     control: OptionSelect,
-    defaultValue: "0 1 auto",
     options: [
+      { label: "Choose option", value: "" },
       { label: "Shrink", value: "0 1 auto" },
       { label: "Grow", value: "1 1 auto" },
     ],
@@ -333,9 +346,8 @@ export const position = [
     label: "Position",
     key: "position",
     control: OptionSelect,
-    initialValue: "None",
     options: [
-      { label: "None", value: "none" },
+      { label: "Choose option", value: "" },
       { label: "Static", value: "static" },
       { label: "Relative", value: "relative" },
       { label: "Fixed", value: "fixed" },
@@ -375,7 +387,18 @@ export const position = [
     label: "Z-index",
     key: "z-index",
     control: OptionSelect,
-    options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "-9999", value: "-9999" },
+      { label: "-3", value: "-3" },
+      { label: "-2", value: "-2" },
+      { label: "-1", value: "-1" },
+      { label: "0", value: "0" },
+      { label: "1", value: "1" },
+      { label: "2", value: "2" },
+      { label: "3", value: "3" },
+      { label: "9999", value: "9999" },
+    ],
   },
 ]
 
@@ -384,22 +407,22 @@ export const typography = [
     label: "Font",
     key: "font-family",
     control: OptionSelect,
-    defaultValue: "Arial",
     options: [
-      "Arial",
-      "Arial Black",
-      "Cursive",
-      "Courier",
-      "Comic Sans MS",
-      "Helvetica",
-      "Helvetica Neue",
-      "Impact",
-      "Inter",
-      "Lucida Sans Unicode",
-      "Roboto",
-      "Roboto Mono",
-      "Times New Roman",
-      "Verdana",
+      { label: "Choose option", value: "" },
+      { label: "Arial", value: "Arial" },
+      { label: "Arial Black", value: "Arial Black" },
+      { label: "Cursive", value: "Cursive" },
+      { label: "Courier", value: "Courier" },
+      { label: "Comic Sans MS", value: "Comic Sans MS" },
+      { label: "Helvetica", value: "Helvetica" },
+      { label: "Helvetica Neue", value: "Helvetica Neue" },
+      { label: "Impact", value: "Impact" },
+      { label: "Inter", value: "Inter" },
+      { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
+      { label: "Roboto", value: "Roboto" },
+      { label: "Roboto Mono", value: "Roboto Mono" },
+      { label: "Times New Roman", value: "Times New Roman" },
+      { label: "Verdana", value: "Verdana" },
     ],
     styleBindingProperty: "font-family",
   },
@@ -407,25 +430,36 @@ export const typography = [
     label: "Weight",
     key: "font-weight",
     control: OptionSelect,
-    options: ["200", "300", "400", "500", "600", "700", "800", "900"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "200", value: "200" },
+      { label: "300", value: "300" },
+      { label: "400", value: "400" },
+      { label: "500", value: "500" },
+      { label: "600", value: "600" },
+      { label: "700", value: "700" },
+      { label: "800", value: "800" },
+      { label: "900", value: "900" },
+    ],
   },
   {
     label: "size",
     key: "font-size",
     control: OptionSelect,
     options: [
-      "8px",
-      "10px",
-      "12px",
-      "14px",
-      "16px",
-      "18px",
-      "20px",
-      "24px",
-      "32px",
-      "48px",
-      "60px",
-      "72px",
+      { label: "Choose option", value: "" },
+      { label: "8px", value: "8px" },
+      { label: "10px", value: "10px" },
+      { label: "12px", value: "12px" },
+      { label: "14px", value: "14px" },
+      { label: "16px", value: "16px" },
+      { label: "18px", value: "18px" },
+      { label: "20px", value: "20px" },
+      { label: "24px", value: "24px" },
+      { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
+      { label: "60px", value: "60px" },
+      { label: "72px", value: "72px" },
     ],
     textAlign: "center",
   },
@@ -433,13 +467,20 @@ export const typography = [
     label: "Line H",
     key: "line-height",
     control: OptionSelect,
-    options: ["1", "1.25", "1.5", "1.75", "2", "4"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "1", value: "1" },
+      { label: "1.25", value: "1.25" },
+      { label: "1.5", value: "1.5" },
+      { label: "1.75", value: "1.75" },
+      { label: "2", value: "2" },
+      { label: "4", value: "4" },
+    ],
   },
   {
     label: "Color",
     key: "color",
     control: Colorpicker,
-    defaultValue: "#000",
   },
   {
     label: "align",
@@ -450,6 +491,7 @@ export const typography = [
       { icon: "ri-align-center", padding: "0px 5px", value: "center" },
       { icon: "ri-align-right", padding: "0px 5px", value: "right" },
       { icon: "ri-align-justify", padding: "0px 5px", value: "justify" },
+      { icon: "ri-close-line", value: "" },
     ],
   },
   {
@@ -460,16 +502,15 @@ export const typography = [
       { text: "BB", value: "uppercase" },
       { text: "Bb", value: "capitalize" },
       { text: "bb", value: "lowercase" },
-      { text: "&times;", value: "none" },
+      { icon: "ri-close-line", value: "" },
     ],
   },
   {
     label: "Decoration",
     key: "text-decoration-line",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
-      { label: "None", value: "none" },
+      { label: "Choose option", value: "" },
       { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
       { label: "Line-through", value: "line-through" },
@@ -483,15 +524,14 @@ export const background = [
     label: "Color",
     key: "background",
     control: Colorpicker,
-    defaultValue: "#000",
   },
   {
     label: "Gradient",
     key: "background-image",
     control: OptionSelect,
-    defaultValue: "",
     options: [
       { label: "Select option", value: "" },
+      { label: "None", value: "none" },
       {
         label: "Warm Flame",
         value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
@@ -567,7 +607,7 @@ export const background = [
     label: "Image",
     key: "background",
     control: Input,
-    placeholder: "url",
+    placeholder: "URL",
   },
 ]
 
@@ -576,8 +616,8 @@ export const border = [
     label: "Radius",
     key: "border-radius",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "X Small", value: "0.125rem" },
       { label: "Small", value: "0.25rem" },
@@ -592,8 +632,8 @@ export const border = [
     label: "Width",
     key: "border-width",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "X Small", value: "0.5px" },
       { label: "Small", value: "1px" },
@@ -606,24 +646,23 @@ export const border = [
     label: "Color",
     key: "border-color",
     control: Colorpicker,
-    defaultValue: "#000",
   },
   {
     label: "Style",
     key: "border-style",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
-      "None",
-      "Hidden",
-      "Dotted",
-      "Dashed",
-      "Solid",
-      "Double",
-      "Groove",
-      "Ridge",
-      "Inset",
-      "Outset",
+      { label: "Choose option", value: "" },
+      { label: "None", value: "none" },
+      { label: "Hidden", value: "hidden" },
+      { label: "Dotted", value: "dotted" },
+      { label: "Dashed", value: "dashed" },
+      { label: "Solid", value: "solid" },
+      { label: "Double", value: "double" },
+      { label: "Groove", value: "groove" },
+      { label: "Ridge", value: "ridge" },
+      { label: "Inset", value: "inset" },
+      { label: "Outset", value: "outset" },
     ],
   },
 ]
@@ -634,14 +673,22 @@ export const effects = [
     key: "opacity",
     control: OptionSelect,
     textAlign: "center",
-    options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "0", value: "0" },
+      { label: "0.2", value: "0.2" },
+      { label: "0.4", value: "0.4" },
+      { label: "0.6", value: "0.6" },
+      { label: "0.8", value: "0.8" },
+      { label: "1", value: "1" },
+    ],
   },
   {
     label: "Rotate",
     key: "transform",
     control: OptionSelect,
-    defaultValue: "0",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "45 deg", value: "rotate(45deg)" },
       { label: "90 deg", value: "rotate(90deg)" },
@@ -657,8 +704,8 @@ export const effects = [
     label: "Shadow",
     key: "box-shadow",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "none" },
       { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
       {
@@ -691,19 +738,20 @@ export const transitions = [
     key: "transition-property",
     control: OptionSelect,
     options: [
-      "None",
-      "All",
-      "Background Color",
-      "Color",
-      "Font Size",
-      "Font Weight",
-      "Height",
-      "Margin",
-      "Opacity",
-      "Padding",
-      "Rotate",
-      "Shadow",
-      "Width",
+      { label: "Choose option", value: "" },
+      { label: "None", value: "none" },
+      { label: "All", value: "all" },
+      { label: "Background Color", value: "background color" },
+      { label: "Color", value: "color" },
+      { label: "Font Size", value: "font size" },
+      { label: "Font Weight", value: "font weight" },
+      { label: "Height", value: "height" },
+      { label: "Margin", value: "margin" },
+      { label: "Opacity", value: "opacity" },
+      { label: "Padding", value: "padding" },
+      { label: "Rotate", value: "rotate" },
+      { label: "Shadow", value: "shadow" },
+      { label: "Width", value: "width" },
     ],
   },
   {
@@ -712,13 +760,28 @@ export const transitions = [
     control: OptionSelect,
     textAlign: "center",
     placeholder: "sec",
-    options: ["0.4s", "0.6s", "0.8s", "1s", "2s", "4s"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "0.4s", value: "0.4s" },
+      { label: "0.6s", value: "0.6s" },
+      { label: "0.8s", value: "0.8s" },
+      { label: "1s", value: "1s" },
+      { label: "2s", value: "2s" },
+      { label: "4s", value: "4s" },
+    ],
   },
   {
     label: "Ease",
-    key: "transition-timing-function:",
+    key: "transition-timing-function",
     control: OptionSelect,
-    options: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "Linear", value: "linear" },
+      { label: "Ease", value: "ease" },
+      { label: "Ease in", value: "ease-in" },
+      { label: "Ease out", value: "ease-out" },
+      { label: "Ease in out", value: "ease-in-out" },
+    ],
   },
 ]
 
@@ -744,3 +807,13 @@ export function excludeProps(props, propsToExclude) {
   }
   return modifiedProps
 }
+
+let defaultStyles = {}
+Object.values(all).forEach(category => {
+  category.forEach(prop => {
+    if (prop.initialValue) {
+      defaultStyles[prop.key] = prop.initialValue
+    }
+  })
+})
+export const defaults = defaultStyles

From 4ea8b34ff1f41d2a06634a6bacbb8ada58c22c3e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:46:31 +0000
Subject: [PATCH 08/22] Ensure new components are created with any default
 styles already applied

---
 .../userInterface/assetParsing/createProps.js       | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/assetParsing/createProps.js b/packages/builder/src/components/userInterface/assetParsing/createProps.js
index 5f9b692023..5068243e3b 100644
--- a/packages/builder/src/components/userInterface/assetParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/assetParsing/createProps.js
@@ -2,6 +2,7 @@ import { isString, isUndefined, cloneDeep } from "lodash/fp"
 import { TYPE_MAP } from "./types"
 import { assign } from "lodash"
 import { uuid } from "builderStore/uuid"
+import { defaults } from "../propertyCategories"
 
 export const getBuiltin = _component => {
   const { props } = createProps({ _component })
@@ -24,7 +25,11 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   const props = {
     _id: uuid(),
     _component: componentDefinition._component,
-    _styles: { normal: {}, hover: {}, active: {}, selected: {} },
+    _styles: {
+      normal: defaults,
+      hover: defaults,
+      active: defaults,
+    },
   }
 
   const errors = []
@@ -75,7 +80,11 @@ export const makePropsSafe = (componentDefinition, props) => {
   }
 
   if (!props._styles) {
-    props._styles = { normal: {}, hover: {}, active: {}, selected: {} }
+    props._styles = {
+      normal: defaults,
+      hover: defaults,
+      active: defaults,
+    }
   }
 
   return props

From f94733db05fb65f4abbc6d9d9769e866085f3048 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:47:09 +0000
Subject: [PATCH 09/22] Make option select component select placeholder option
 whenever the value is nullish

---
 .../builder/src/components/userInterface/OptionSelect.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index cabb9a8efc..2496047c34 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -98,7 +98,7 @@
   $: isOptionsObject = options.every(o => typeof o === "object")
 
   $: selectedOption = isOptionsObject
-    ? options.find(o => o.value === value)
+    ? options.find(o => o.value === value || (o.value === "" && value == null))
     : {}
 
   $: if (open && selectMenu) {

From 19d71e318b5cd3bd0fef2a0478e8a533a6b99928 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:47:56 +0000
Subject: [PATCH 10/22] Mark style categories as changed whenever any of their
 properties have changed

---
 .../src/components/userInterface/PropertyGroup.svelte     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 2fb304f5c8..84422f1ee1 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -11,9 +11,15 @@
   export let open = false
 
   $: style = componentInstance["_styles"][styleCategory] || {}
+  $: changed = properties.some(
+    prop =>
+      style[prop.key] != null &&
+      style[prop.key] !== "" &&
+      style[prop.key] !== prop.initialValue
+  )
 </script>
 
-<DetailSummary {name} on:open show={open} thin>
+<DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
   <div>
     {#each properties as props}
       <PropertyControl

From 57d69d1c9a0568de7182b27fb1b15ec9bda85327 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:48:14 +0000
Subject: [PATCH 11/22] Add button to reset styles

---
 .../userInterface/ComponentPropertiesPanel.svelte        | 4 +++-
 .../src/components/userInterface/DesignView.svelte       | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 422dcca85c..3aa88eac85 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -32,6 +32,7 @@
 
   const onStyleChanged = store.actions.components.updateStyle
   const onCustomStyleChanged = store.actions.components.updateCustomStyle
+  const onResetStyles = store.actions.components.resetStyles
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
@@ -98,7 +99,8 @@
       {panelDefinition}
       {componentInstance}
       {onStyleChanged}
-      {onCustomStyleChanged} />
+      {onCustomStyleChanged}
+      {onResetStyles} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView
       {componentInstance}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 2ab7e8d5f6..694928fce2 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextArea, DetailSummary } from "@budibase/bbui"
+  import { TextArea, DetailSummary, Button } from "@budibase/bbui"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
@@ -8,6 +8,7 @@
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
+  export let onResetStyles = () => {}
 
   let selectedCategory = "normal"
   let propGroup = null
@@ -46,16 +47,18 @@
             on:open={() => (currentGroup = groupName)} />
         {/each}
         <DetailSummary
-          name="Custom Styles"
+          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.target.value)} />
+              on:change={event => onCustomStyleChanged(event.target.value)}
+              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.

From 207eaed27be2a4ba4d723343c164a48c875dee0f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:59:19 +0000
Subject: [PATCH 12/22] Mark individual styles as changed if they have been
 changed

---
 .../userInterface/PropertyGroup.svelte        | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 84422f1ee1..9481df4237 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -10,25 +10,27 @@
   export let onStyleChanged = () => {}
   export let open = false
 
+  const hasPropChanged = prop => {
+    if (prop.initialValue !== undefined) {
+      return style[prop.key] !== prop.initialValue
+    }
+    return style[prop.key] != null && style[prop.key] !== ""
+  }
+
   $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(
-    prop =>
-      style[prop.key] != null &&
-      style[prop.key] !== "" &&
-      style[prop.key] !== prop.initialValue
-  )
+  $: changed = properties.some(prop => hasPropChanged(prop))
 </script>
 
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
   <div>
-    {#each properties as props}
+    {#each properties as prop}
       <PropertyControl
-        label={props.label}
-        control={props.control}
-        key={props.key}
-        value={style[props.key]}
+        label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
+        control={prop.control}
+        key={prop.key}
+        value={style[prop.key]}
         onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-        props={{ ...excludeProps(props, ['control', 'label']) }} />
+        props={{ ...excludeProps(prop, ['control', 'label']) }} />
     {/each}
   </div>
 </DetailSummary>

From c101715c0e66e4263f6b6de30e74f64caf663bb0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:11:56 +0000
Subject: [PATCH 13/22] Pass preview type to client app so it can decide
 whether components are selectable

---
 .../AppPreview/CurrentItemPreview.svelte       | 18 ++++++++++--------
 .../AppPreview/iframeTemplate.html             | 17 ++++++-----------
 packages/client/src/store/builder.js           | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 0c0fa6156f..c5bcb2951a 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { store, currentAsset } from "builderStore"
+  import { store, currentAsset, selectedComponent } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
   import { FrontendTypes } from "../../../constants"
@@ -33,6 +33,7 @@
     layout,
     screen,
     selectedComponentId,
+    previewType: $store.currentFrontEndType,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.
@@ -54,17 +55,18 @@
   // Refresh the preview when required
   $: refreshContent(strippedJson)
 
-  // Initialise the app when mounted
   onMount(() => {
+    // Initialise the app when mounted
     iframe.contentWindow.addEventListener(
       "bb-ready",
-      () => {
-        refreshContent(strippedJson)
-      },
-      {
-        once: true,
-      }
+      () => refreshContent(strippedJson),
+      { once: true }
     )
+
+    // Add listener to select components
+    iframe.contentWindow.addEventListener("bb-select-component", data => {
+      store.actions.components.select({ _id: data.detail })
+    })
   })
 </script>
 
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
index 96b32e1967..2facc9ad70 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
@@ -10,6 +10,9 @@
       *, *:before, *:after {
         box-sizing: border-box;
       }
+      * {
+        pointer-events: none;
+      }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>
@@ -19,7 +22,7 @@
         }
 
         // Extract data from message
-        const { selectedComponentId, layout, screen } = JSON.parse(event.data)
+        const { selectedComponentId, layout, screen, previewType } = JSON.parse(event.data)
 
         // Set some flags so the app knows we're in the builder
         window["##BUDIBASE_IN_BUILDER##"] = true
@@ -27,21 +30,13 @@
         window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
-        
+        window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
+
         // Initialise app
         if (window.loadBudibase) {
           loadBudibase()
         }
       }
-      
-      // Ignore clicks
-      ["click", "mousedown"].forEach(type => {
-        document.addEventListener(type, function(e) {
-          e.preventDefault()
-          e.stopPropagation()
-          return false
-        }, true)
-      })
 
       window.addEventListener("message", receiveMessage)
       window.dispatchEvent(new Event("bb-ready"))
diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 69f489f64f..7cbe49bde8 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -7,8 +7,20 @@ const createBuilderStore = () => {
     screen: null,
     selectedComponentId: null,
     previewId: null,
+    previewType: null,
+  }
+  const store = writable(initialState)
+  const actions = {
+    selectComponent: id => {
+      window.dispatchEvent(
+        new CustomEvent("bb-select-component", { detail: id })
+      )
+    },
+  }
+  return {
+    ...store,
+    actions,
   }
-  return writable(initialState)
 }
 
 export const builderStore = createBuilderStore()

From a40bf95c413dd008a7c25f1b88a080a2fb434355 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:13:30 +0000
Subject: [PATCH 14/22] Enable selecting components from the builder preview
 and apply any custom styles

---
 .../client/src/components/ClientApp.svelte    |  1 +
 .../client/src/components/Component.svelte    | 12 ++-
 packages/client/src/components/Router.svelte  |  5 +-
 packages/client/src/utils/styleable.js        | 89 ++++++++++++++++---
 4 files changed, 93 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index a7a972a435..222344420e 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -9,6 +9,7 @@
   setContext("sdk", SDK)
   setContext("component", writable({}))
   setContext("data", createDataStore())
+  setContext("screenslot", false)
 
   let loaded = false
 
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 56591133e5..23ba364dfb 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -8,8 +8,9 @@
 
   export let definition = {}
 
-  // Get local data binding context
+  // Get contexts
   const dataContext = getContext("data")
+  const screenslotContext = getContext("screenslot")
 
   // Create component context
   const componentStore = writable({})
@@ -20,10 +21,15 @@
   $: children = definition._children
   $: id = definition._id
   $: enrichedProps = enrichProps(definition, $dataContext, $bindingStore)
-  $: selected = id === $builderStore.selectedComponentId
+  $: styles = definition._styles
+
+  // Allow component selection in the builder preview if we're previewing a
+  // layout, or we're preview a screen and we're inside the screenslot
+  $: allowSelection =
+    $builderStore.previewType === "layout" || screenslotContext
 
   // Update component context
-  $: componentStore.set({ id, styles: { ...definition._styles, selected } })
+  $: componentStore.set({ id, styles: { ...styles, id, allowSelection } })
 
   // Gets the component constructor for the specified component
   const getComponentConstructor = component => {
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 3c2d71c422..5477d02f86 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, setContext } from "svelte"
   import Router from "svelte-spa-router"
   import { routeStore } from "../store"
   import Screen from "./Screen.svelte"
@@ -7,6 +7,9 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
+  // Set context flag so components know that we're now inside the screenslot
+  setContext("screenslot", true)
+
   // Only wrap this as an array to take advantage of svelte keying,
   // to ensure the svelte-spa-router is fully remounted when route config
   // changes
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 4c6f8ca3b7..a3c4cb7ca5 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,49 +1,111 @@
+import { get } from "svelte/store"
+import { builderStore } from "../store"
+
+const selectedComponentWidth = 2
+const selectedComponentColor = "#4285f4"
+
 /**
- * Helper to build a CSS string from a style object
+ * Helper to build a CSS string from a style object.
  */
-const buildStyleString = (styleObject, customStyles, selected) => {
+const buildStyleString = (styleObject, customStyles) => {
   let str = ""
   Object.entries(styleObject).forEach(([style, value]) => {
     if (style && value != null) {
       str += `${style}: ${value}; `
     }
   })
-  str += customStyles || ""
-  if (selected) {
-    str += ";border: 2px solid #0055ff !important;"
+  return str + (customStyles || "")
+}
+
+/**
+ * Applies styles to enrich the builder preview.
+ * Applies styles to highlight the selected component, and allows pointer
+ * events for any selectable components (overriding the blanket ban on pointer
+ * events in the iframe HTML).
+ */
+const addBuilderPreviewStyles = (styleString, componentId, selectable) => {
+  let str = styleString
+
+  // Apply extra styles if we're in the builder preview
+  const state = get(builderStore)
+  if (state.inBuilder) {
+    // Allow pointer events and always enable cursor
+    if (selectable) {
+      str += ";pointer-events: all !important; cursor: pointer !important;"
+    }
+
+    // Highlighted selected element
+    if (componentId === state.selectedComponentId) {
+      str += `;box-shadow: 0 0 0 ${selectedComponentWidth}px ${selectedComponentColor} inset !important;`
+    }
   }
+
   return str
 }
 
 /**
  * Svelte action to apply correct component styles.
+ * This also applies handlers for selecting components from the builder preview.
  */
 export const styleable = (node, styles = {}) => {
   let applyNormalStyles
   let applyHoverStyles
+  let selectComponent
+
+  // Kill JS even bubbling
+  const blockEvent = event => {
+    event.preventDefault()
+    event.stopPropagation()
+    return false
+  }
 
   // Creates event listeners and applies initial styles
   const setupStyles = newStyles => {
-    const selected = newStyles.selected
+    const componentId = newStyles.id
+    const selectable = newStyles.allowSelection
     const customStyles = newStyles.custom
-    const normalStyles = newStyles.normal || {}
+    const normalStyles = newStyles.normal
     const hoverStyles = {
       ...normalStyles,
       ...newStyles.hover,
     }
 
-    applyNormalStyles = () => {
-      node.style = buildStyleString(normalStyles, customStyles, selected)
+    // Applies a style string to a DOM node, enriching it for the builder
+    // preview
+    const applyStyles = styleString => {
+      node.style = addBuilderPreviewStyles(styleString, componentId, selectable)
     }
 
+    // Applies the "normal" style definition
+    applyNormalStyles = () => {
+      applyStyles(buildStyleString(normalStyles, customStyles))
+    }
+
+    // Applies any "hover" styles as well as the base "normal" styles
     applyHoverStyles = () => {
-      node.style = buildStyleString(hoverStyles, customStyles, selected)
+      applyStyles(buildStyleString(hoverStyles, customStyles))
+    }
+
+    // Handler to select a component in the builder when clicking it in the
+    // builder preview
+    selectComponent = event => {
+      builderStore.actions.selectComponent(newStyles.id)
+      return blockEvent(event)
     }
 
     // Add listeners to toggle hover styles
     node.addEventListener("mouseover", applyHoverStyles)
     node.addEventListener("mouseout", applyNormalStyles)
 
+    // Add builder preview click listener
+    if (get(builderStore).inBuilder) {
+      node.addEventListener("click", selectComponent, false)
+
+      // Kill other interaction events
+      node.addEventListener("mousedown", blockEvent)
+      node.addEventListener("mouseup", blockEvent)
+    }
+
     // Apply initial normal styles
     applyNormalStyles()
   }
@@ -52,6 +114,13 @@ export const styleable = (node, styles = {}) => {
   const removeListeners = () => {
     node.removeEventListener("mouseover", applyHoverStyles)
     node.removeEventListener("mouseout", applyNormalStyles)
+
+    // Remove builder preview click listener
+    if (get(builderStore).inBuilder) {
+      node.removeEventListener("click", selectComponent)
+      node.removeEventListener("mousedown", blockEvent)
+      node.removeEventListener("mouseup", blockEvent)
+    }
   }
 
   // Apply initial styles

From 34509e0c128d71f4b3f6e3f96d07b71be6ebf80d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:14:05 +0000
Subject: [PATCH 15/22] Prevent client app links from functioning in the
 builder preview

---
 packages/client/src/sdk.js            |  2 +-
 packages/client/src/utils/linkable.js | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/utils/linkable.js

diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index a0b8aa6719..fefd659986 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -1,8 +1,8 @@
 import * as API from "./api"
 import { authStore, routeStore, screenStore, bindingStore } from "./store"
 import { styleable } from "./utils/styleable"
+import { linkable } from "./utils/linkable"
 import { getAppId } from "./utils/getAppId"
-import { link as linkable } from "svelte-spa-router"
 import DataProvider from "./components/DataProvider.svelte"
 
 export default {
diff --git a/packages/client/src/utils/linkable.js b/packages/client/src/utils/linkable.js
new file mode 100644
index 0000000000..13549e4c5c
--- /dev/null
+++ b/packages/client/src/utils/linkable.js
@@ -0,0 +1,10 @@
+import { get } from "svelte/store"
+import { link } from "svelte-spa-router"
+import { builderStore } from "../store"
+
+export const linkable = (node, href) => {
+  if (get(builderStore).inBuilder) {
+    return
+  }
+  link(node, href)
+}

From 59b7ccfac834c36a7a07df30c46b7b6f1b555630 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:14:36 +0000
Subject: [PATCH 16/22] Remove styleable action from screenslot placeholder
 component, which was creating a fake component layer

---
 .../standard-components/src/ScreenSlotPlaceholder.svelte | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/standard-components/src/ScreenSlotPlaceholder.svelte b/packages/standard-components/src/ScreenSlotPlaceholder.svelte
index 039a351bfb..82e8b28c0e 100644
--- a/packages/standard-components/src/ScreenSlotPlaceholder.svelte
+++ b/packages/standard-components/src/ScreenSlotPlaceholder.svelte
@@ -1,11 +1,4 @@
-<script>
-  import { getContext } from "svelte"
-
-  const component = getContext("component")
-  const { styleable } = getContext("sdk")
-</script>
-
-<div use:styleable={$component.styles}>
+<div>
   <h1>Screen Slot</h1>
   <span>
     The screens that you create will be displayed inside this box.

From 27dd7dba75aeb75d89f08630698d35fe31aea693 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:15:22 +0000
Subject: [PATCH 17/22] Use initialValue rather than defaultValue for style
 definitions

---
 .../src/components/userInterface/PropertyControl.svelte     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 44e98ad7d9..2901dc6f3f 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -6,11 +6,9 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-    CAPTURE_VAR_INSIDE_MUSTACHE,
   } from "builderStore/replaceBindings"
   import { DropdownMenu } from "@budibase/bbui"
   import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
-  import { onMount } from "svelte"
 
   export let label = ""
   export let bindable = true
@@ -70,8 +68,8 @@
 
     let temp = runtimeToReadableBinding(bindableProperties, value)
 
-    return value == null && props.defaultValue !== undefined
-      ? props.defaultValue
+    return value == null && props.initialValue !== undefined
+      ? props.initialValue
       : temp
   }
 

From 0cfc05f6a8a0432b44843a3a2081ca999404811f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:16:21 +0000
Subject: [PATCH 18/22] Initialise client app with preview type, left out from
 previous commit

---
 packages/client/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 3ef22d3362..19ac28d6fb 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -11,6 +11,7 @@ const loadBudibase = () => {
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
+    previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
   })
 
   // Create app if one hasn't been created yet

From 750d00a95a6fe339a5a672bddaa6416fabdedb3e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:17:51 +0000
Subject: [PATCH 19/22] Update colorpicker to work with nullish values by
 always providing a fallback default value

---
 .../builder/src/builderStore/store/frontend.js   |  7 +------
 .../userInterface/PropertyGroup.svelte           |  9 +++++++--
 .../userInterface/assetParsing/createProps.js    | 13 ++-----------
 .../userInterface/propertyCategories.js          | 16 +++-------------
 4 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index bce663325b..acb5929b3c 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -23,7 +23,6 @@ import {
   getComponentDefinition,
   findParent,
 } from "../storeUtils"
-import { defaults } from "../../components/userInterface/propertyCategories"
 
 const INITIAL_FRONTEND_STATE = {
   apps: [],
@@ -382,11 +381,7 @@ export const getFrontendStore = () => {
       },
       resetStyles: async () => {
         const selected = get(selectedComponent)
-        selected._styles = {
-          normal: defaults,
-          hover: defaults,
-          active: defaults,
-        }
+        selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
       updateProp: (name, value) => {
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 939672cf18..e1d90f0158 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -11,8 +11,13 @@
   export let open = false
 
   const hasPropChanged = prop => {
-    if (prop.initialValue !== undefined) {
-      return style[prop.key] !== prop.initialValue
+    // TODO: replace color picker with one that works better.
+    // Currently it cannot support null values, so this is a hack which
+    // prevents the color fields from always being marked as changed
+    if (!["color", "background", "border-color"].includes(prop.key)) {
+      if (prop.initialValue !== undefined) {
+        return style[prop.key] !== prop.initialValue
+      }
     }
     return style[prop.key] != null && style[prop.key] !== ""
   }
diff --git a/packages/builder/src/components/userInterface/assetParsing/createProps.js b/packages/builder/src/components/userInterface/assetParsing/createProps.js
index 5068243e3b..0bd2a4aa15 100644
--- a/packages/builder/src/components/userInterface/assetParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/assetParsing/createProps.js
@@ -2,7 +2,6 @@ import { isString, isUndefined, cloneDeep } from "lodash/fp"
 import { TYPE_MAP } from "./types"
 import { assign } from "lodash"
 import { uuid } from "builderStore/uuid"
-import { defaults } from "../propertyCategories"
 
 export const getBuiltin = _component => {
   const { props } = createProps({ _component })
@@ -25,11 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   const props = {
     _id: uuid(),
     _component: componentDefinition._component,
-    _styles: {
-      normal: defaults,
-      hover: defaults,
-      active: defaults,
-    },
+    _styles: { normal: {}, hover: {}, active: {} },
   }
 
   const errors = []
@@ -80,11 +75,7 @@ export const makePropsSafe = (componentDefinition, props) => {
   }
 
   if (!props._styles) {
-    props._styles = {
-      normal: defaults,
-      hover: defaults,
-      active: defaults,
-    }
+    props._styles = { normal: {}, hover: {}, active: {} }
   }
 
   return props
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 71514fb209..ab92cad7b6 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -2,9 +2,6 @@ import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
 import Colorpicker from "@budibase/colorpicker"
-/*
-  TODO: Allow for default values for all properties
-*/
 
 export const layout = [
   {
@@ -481,6 +478,7 @@ export const typography = [
     label: "Color",
     key: "color",
     control: Colorpicker,
+    initialValue: "#000",
   },
   {
     label: "align",
@@ -524,6 +522,7 @@ export const background = [
     label: "Color",
     key: "background",
     control: Colorpicker,
+    initialValue: "#000",
   },
   {
     label: "Gradient",
@@ -646,6 +645,7 @@ export const border = [
     label: "Color",
     key: "border-color",
     control: Colorpicker,
+    initialValue: "#000",
   },
   {
     label: "Style",
@@ -807,13 +807,3 @@ export function excludeProps(props, propsToExclude) {
   }
   return modifiedProps
 }
-
-let defaultStyles = {}
-Object.values(all).forEach(category => {
-  category.forEach(prop => {
-    if (prop.initialValue) {
-      defaultStyles[prop.key] = prop.initialValue
-    }
-  })
-})
-export const defaults = defaultStyles

From 7e8735c2d219fd7514fe5bae77c9bd964c0350c2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:23:42 +0000
Subject: [PATCH 20/22] Remove deprecated prop

---
 packages/builder/src/components/userInterface/DesignView.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 694928fce2..cbc110d3b9 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -5,7 +5,6 @@
 
   export let panelDefinition = {}
   export let componentInstance = {}
-  export let componentDefinition = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
   export let onResetStyles = () => {}
@@ -41,7 +40,6 @@
             properties={panelDefinition[groupName]}
             styleCategory={selectedCategory}
             {onStyleChanged}
-            {componentDefinition}
             {componentInstance}
             open={currentGroup === groupName}
             on:open={() => (currentGroup = groupName)} />

From 7b82896cf15518d286a09bd2bff0950ef9f19839 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 11:52:02 +0000
Subject: [PATCH 21/22] Standardise design panel setting placeholders

---
 .../builder/src/components/userInterface/propertyCategories.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index ab92cad7b6..ebaab9bf39 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -529,7 +529,7 @@ export const background = [
     key: "background-image",
     control: OptionSelect,
     options: [
-      { label: "Select option", value: "" },
+      { label: "Choose option", value: "" },
       { label: "None", value: "none" },
       {
         label: "Warm Flame",

From 2cd2fba3429c451a67d57d9170103f5440d9c7e7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 11:57:34 +0000
Subject: [PATCH 22/22] Only highlight style changes for the currently selected
 state (normal / hover)

---
 .../src/components/userInterface/PropertyGroup.svelte       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index e1d90f0158..69797c4a21 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -10,7 +10,7 @@
   export let onStyleChanged = () => {}
   export let open = false
 
-  const hasPropChanged = prop => {
+  const hasPropChanged = (style, prop) => {
     // TODO: replace color picker with one that works better.
     // Currently it cannot support null values, so this is a hack which
     // prevents the color fields from always being marked as changed
@@ -23,7 +23,7 @@
   }
 
   $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(prop => hasPropChanged(prop))
+  $: changed = properties.some(prop => hasPropChanged(style, prop))
 </script>
 
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
@@ -31,7 +31,7 @@
     <div>
       {#each properties as prop}
         <PropertyControl
-          label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
+          label={`${prop.label}${hasPropChanged(style, prop) ? ' *' : ''}`}
           control={prop.control}
           key={prop.key}
           value={style[prop.key]}