From 18d20881543d65bdaf1c26e78f71f51d49e7db1b Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 10:39:54 +0200
Subject: [PATCH 01/13] adds fallback page to catch params

---
 .../pages/[application]/frontend/[page]/_fallback.svelte   | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
new file mode 100644
index 0000000000..c2568469f0
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { leftover } from "@sveltech/routify"
+
+  console.log($leftover)
+</script>
+
+TEST

From 0cea8502f17c33b3bb3b2357849b61cf6863ad1c Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 12:04:38 +0200
Subject: [PATCH 02/13] sets up basic structure

---
 .../frontend/[page]/[screen]/_fallback.svelte            | 9 +++++++++
 .../pages/[application]/frontend/[page]/_fallback.svelte | 7 -------
 .../pages/[application]/frontend/[page]/_layout.svelte   | 7 +++++++
 .../src/pages/[application]/frontend/[page]/index.svelte | 1 +
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
 delete mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/index.svelte

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
new file mode 100644
index 0000000000..29240e41a0
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { leftover } from "@sveltech/routify"
+
+  const structure = $leftover.split("/")
+
+  console.log(structure)
+</script>
+
+CREEN FALLBACK THINGIE!
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
deleted file mode 100644
index c2568469f0..0000000000
--- a/packages/builder/src/pages/[application]/frontend/[page]/_fallback.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { leftover } from "@sveltech/routify"
-
-  console.log($leftover)
-</script>
-
-TEST
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
new file mode 100644
index 0000000000..bfcfa9be45
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { params } from "@sveltech/routify"
+
+  console.log($params)
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
new file mode 100644
index 0000000000..2a02d41ce2
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
@@ -0,0 +1 @@
+TEST

From 5c73203d772360692a590270270bcc254a59ca14 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 13:59:29 +0200
Subject: [PATCH 03/13] moves frontend root to route component

---
 .../userInterface/UserInterfaceRoot.svelte    | 240 ------------------
 .../[application]/frontend/_layout.svelte     | 240 +++++++++++++++++-
 .../pages/[application]/frontend/index.svelte |   5 -
 3 files changed, 239 insertions(+), 246 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/UserInterfaceRoot.svelte

diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
deleted file mode 100644
index 4f32c55d24..0000000000
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ /dev/null
@@ -1,240 +0,0 @@
-<script>
-  import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import PageLayout from "./PageLayout.svelte"
-  import PagesList from "./PagesList.svelte"
-  import { store } from "builderStore"
-  import IconButton from "components/common/IconButton.svelte"
-  import NewScreen from "./NewScreen.svelte"
-  import CurrentItemPreview from "./CurrentItemPreview.svelte"
-  import SettingsView from "./SettingsView.svelte"
-  import PageView from "./PageView.svelte"
-  import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
-
-  let newScreenPicker
-  let confirmDeleteDialog
-  let componentToDelete = ""
-
-  const newScreen = () => {
-    newScreenPicker.show()
-  }
-
-  let settingsView
-  const settings = () => {
-    settingsView.show()
-  }
-
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
-  const lastPartOfName = c => (c ? last(c.split("/")) : "")
-</script>
-
-<div class="root">
-
-  <div class="ui-nav">
-
-    <div class="pages-list-container">
-      <div class="nav-header">
-        <span class="navigator-title">Navigator</span>
-        <div class="border-line" />
-
-        <span class="components-nav-page">Pages</span>
-      </div>
-
-      <div class="nav-items-container">
-        <PagesList />
-      </div>
-    </div>
-
-    <div class="border-line" />
-
-    <PageLayout layout={$store.pages[$store.currentPageName]} />
-
-    <div class="border-line" />
-
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <span class="components-nav-header" style="margin-top: 0;">
-          Screens
-        </span>
-        <div>
-          <button on:click={newScreen}>
-            <AddIcon />
-          </button>
-        </div>
-      </div>
-      <div class="nav-items-container">
-        <ComponentsHierarchy screens={$store.screens} />
-      </div>
-    </div>
-
-  </div>
-
-  <div class="preview-pane">
-    <CurrentItemPreview />
-  </div>
-
-  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
-    <div class="components-pane">
-      <ComponentsPaneSwitcher />
-    </div>
-  {/if}
-
-</div>
-
-<NewScreen bind:this={newScreenPicker} />
-<SettingsView bind:this={settingsView} />
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
-<style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    width: 20px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
-  .root {
-    display: grid;
-    grid-template-columns: 275px 1fr 275px;
-    height: 100%;
-    width: 100%;
-    background: #fafafa;
-  }
-
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr 300px;
-      height: 100%;
-      width: 100%;
-      background: #fafafa;
-    }
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-    padding: 0;
-    overflow: scroll;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .preview-pane {
-    grid-column: 2;
-    margin: 40px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-  }
-
-  .components-pane {
-    grid-column: 3;
-    background-color: var(--white);
-    min-height: 0px;
-    overflow-y: scroll;
-  }
-
-  .components-nav-page {
-    font-size: 13px;
-    color: #000333;
-    text-transform: uppercase;
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: #000333;
-    text-transform: uppercase;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .nav-group-header > div:nth-child(1) {
-    padding: 0rem 0.5rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-  }
-
-  .nav-group-header > span:nth-child(3) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
-
-  .nav-group-header > div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--primary75);
-  }
-
-  .nav-group-header > div:nth-child(3):hover {
-    color: var(--primary75);
-  }
-
-  .navigator-title {
-    font-size: 14px;
-    color: var(--secondary100);
-    font-weight: 600;
-    text-transform: uppercase;
-    padding: 0 20px 20px 20px;
-    line-height: 1rem !important;
-    letter-spacing: 1px;
-  }
-
-  .border-line {
-    border-bottom: 1px solid #d8d8d8;
-  }
-
-  .components-list-container {
-    padding: 20px 0px 0 0;
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index bead97cca4..3cdc507521 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -2,6 +2,19 @@
   import { store, backendUiStore } from "builderStore"
   import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
+  import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
+  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
+  import PageLayout from "components/userInterface/PageLayout.svelte"
+  import PagesList from "components/userInterface/PagesList.svelte"
+  import IconButton from "components/common/IconButton.svelte"
+  import NewScreen from "components/userInterface/NewScreen.svelte"
+  import CurrentItemPreview from "components/userInterface/CurrentItemPreview.svelte"
+  import SettingsView from "components/userInterface/SettingsView.svelte"
+  import PageView from "components/userInterface/PageView.svelte"
+  import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { last } from "lodash/fp"
+  import { AddIcon } from "components/common/Icons"
 
   $: instances = $store.appInstances
   $: views = $store.hierarchy.indexes
@@ -17,6 +30,231 @@
       await selectDatabase($store.appInstances[0])
     }
   })
+
+  let newScreenPicker
+  let confirmDeleteDialog
+  let componentToDelete = ""
+
+  const newScreen = () => {
+    newScreenPicker.show()
+  }
+
+  let settingsView
+  const settings = () => {
+    settingsView.show()
+  }
+
+  const confirmDeleteComponent = component => {
+    componentToDelete = component
+    confirmDeleteDialog.show()
+  }
+
+  const lastPartOfName = c => (c ? last(c.split("/")) : "")
+
+  $: console.log("Pages: ", $store.pages[$store.currentPageName])
+  $: console.log("Screens: ", $store.screens)
 </script>
 
-<slot />
+<div class="root">
+
+  <div class="ui-nav">
+
+    <div class="pages-list-container">
+      <div class="nav-header">
+        <span class="navigator-title">Navigator</span>
+        <div class="border-line" />
+
+        <span class="components-nav-page">Pages</span>
+      </div>
+
+      <div class="nav-items-container">
+        <PagesList />
+      </div>
+    </div>
+
+    <div class="border-line" />
+
+    <PageLayout layout={$store.pages[$store.currentPageName]} />
+
+    <div class="border-line" />
+
+    <div class="components-list-container">
+      <div class="nav-group-header">
+        <span class="components-nav-header" style="margin-top: 0;">
+          Screens
+        </span>
+        <div>
+          <button on:click={newScreen}>
+            <AddIcon />
+          </button>
+        </div>
+      </div>
+      <div class="nav-items-container">
+        <ComponentsHierarchy screens={$store.screens} />
+      </div>
+    </div>
+
+  </div>
+
+  <div class="preview-pane">
+    <CurrentItemPreview />
+  </div>
+
+  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
+    <div class="components-pane">
+      <ComponentsPaneSwitcher />
+    </div>
+  {/if}
+
+</div>
+
+<NewScreen bind:this={newScreenPicker} />
+<SettingsView bind:this={settingsView} />
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Delete"
+  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
+  okText="Delete Component"
+  onOk={() => store.deleteComponent(componentToDelete)} />
+
+<style>
+  button {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    width: 20px;
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+  }
+
+  .root {
+    display: grid;
+    grid-template-columns: 275px 1fr 275px;
+    height: 100%;
+    width: 100%;
+    background: #fafafa;
+  }
+
+  @media only screen and (min-width: 1800px) {
+    .root {
+      display: grid;
+      grid-template-columns: 300px 1fr 300px;
+      height: 100%;
+      width: 100%;
+      background: #fafafa;
+    }
+  }
+
+  .ui-nav {
+    grid-column: 1;
+    background-color: var(--white);
+    height: calc(100vh - 49px);
+    padding: 0;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .preview-pane {
+    grid-column: 2;
+    margin: 40px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  .components-pane {
+    grid-column: 3;
+    background-color: var(--white);
+    min-height: 0px;
+    overflow-y: scroll;
+  }
+
+  .components-nav-page {
+    font-size: 13px;
+    color: #000333;
+    text-transform: uppercase;
+    padding-left: 20px;
+    margin-top: 20px;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
+  }
+
+  .components-nav-header {
+    font-size: 13px;
+    color: #000333;
+    text-transform: uppercase;
+    margin-top: 20px;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
+  }
+
+  .nav-header {
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+  }
+
+  .nav-items-container {
+    padding: 1rem 0rem 0rem 0rem;
+  }
+
+  .nav-group-header {
+    display: flex;
+    padding: 0px 20px 0px 20px;
+    font-size: 0.9rem;
+    font-weight: bold;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .nav-group-header > div:nth-child(1) {
+    padding: 0rem 0.5rem 0rem 0rem;
+    vertical-align: bottom;
+    grid-column-start: icon;
+    margin-right: 5px;
+  }
+
+  .nav-group-header > span:nth-child(3) {
+    margin-left: 5px;
+    vertical-align: bottom;
+    grid-column-start: title;
+    margin-top: auto;
+  }
+
+  .nav-group-header > div:nth-child(3) {
+    vertical-align: bottom;
+    grid-column-start: button;
+    cursor: pointer;
+    color: var(--primary75);
+  }
+
+  .nav-group-header > div:nth-child(3):hover {
+    color: var(--primary75);
+  }
+
+  .navigator-title {
+    font-size: 14px;
+    color: var(--secondary100);
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0 20px 20px 20px;
+    line-height: 1rem !important;
+    letter-spacing: 1px;
+  }
+
+  .border-line {
+    border-bottom: 1px solid #d8d8d8;
+  }
+
+  .components-list-container {
+    padding: 20px 0px 0 0;
+  }
+</style>
diff --git a/packages/builder/src/pages/[application]/frontend/index.svelte b/packages/builder/src/pages/[application]/frontend/index.svelte
index 89b0a83720..e69de29bb2 100644
--- a/packages/builder/src/pages/[application]/frontend/index.svelte
+++ b/packages/builder/src/pages/[application]/frontend/index.svelte
@@ -1,5 +0,0 @@
-<script>
-  import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte"
-</script>
-
-<UserInterfaceRoot />

From d931b9018b393e3c0b7d9dfc2a4d2749a8db70d3 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 14:21:40 +0200
Subject: [PATCH 04/13] adds default navigation to main page

---
 .../builder/src/components/userInterface/PagesList.svelte   | 3 ++-
 .../builder/src/pages/[application]/frontend/_layout.svelte | 2 ++
 .../builder/src/pages/[application]/frontend/index.svelte   | 6 ++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 56b5fe7874..7b70e55183 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { params } from "@sveltech/routify"
   import { store } from "builderStore"
   import getIcon from "components/common/icon"
   import { CheckIcon } from "components/common/Icons"
@@ -19,7 +20,7 @@
     },
   ]
 
-  store.setCurrentPage("main")
+  store.setCurrentPage($params.page ? $params.page : "main")
 </script>
 
 <div class="root">
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 3cdc507521..d33b42c3fc 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -118,6 +118,8 @@
   okText="Delete Component"
   onOk={() => store.deleteComponent(componentToDelete)} />
 
+<slot />
+
 <style>
   button {
     cursor: pointer;
diff --git a/packages/builder/src/pages/[application]/frontend/index.svelte b/packages/builder/src/pages/[application]/frontend/index.svelte
index e69de29bb2..aa7968b989 100644
--- a/packages/builder/src/pages/[application]/frontend/index.svelte
+++ b/packages/builder/src/pages/[application]/frontend/index.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  $goto("../main")
+</script>
+
+<!-- routify:options index=false -->

From 6cc8d7982eb34b910c1e2f17b95da5e23ef8337f Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 14:28:23 +0200
Subject: [PATCH 05/13] corrects page switching behaviour in page selection
 component

---
 .../src/components/userInterface/PagesList.svelte   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 7b70e55183..33b93719a0 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { params } from "@sveltech/routify"
+  import { params, goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import getIcon from "components/common/icon"
   import { CheckIcon } from "components/common/Icons"
@@ -21,6 +21,11 @@
   ]
 
   store.setCurrentPage($params.page ? $params.page : "main")
+
+  const changePage = id => {
+    store.setCurrentPage(id)
+    $goto(`./${id}`)
+  }
 </script>
 
 <div class="root">
@@ -28,14 +33,14 @@
     {#each pages as { title, id }}
       <li>
         <span class="icon">
-          {#if id === $store.currentPageName}
+          {#if id === $params.page}
             <CheckIcon />
           {/if}
         </span>
 
         <button
-          class:active={id === $store.currentPageName}
-          on:click={() => store.setCurrentPage(id)}>
+          class:active={id === $params.page}
+          on:click={() => changePage(id)}>
           {title}
         </button>
       </li>

From eb1d2dc337b3ba6819d11a4f0e027fc89aa48897 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 28 Apr 2020 15:28:31 +0200
Subject: [PATCH 06/13] add setup to go to page-layout screen

---
 .../userInterface/ComponentsHierarchy.svelte  | 34 ++++++-----
 .../userInterface/PageLayout.svelte           | 56 +++++++++----------
 .../frontend/[page]/[screen]/_fallback.svelte |  9 ---
 .../frontend/[page]/_layout.svelte            |  7 ---
 4 files changed, 47 insertions(+), 59 deletions(-)
 delete mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 2df4f8feef..cdacd5b38f 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { params, goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
 
   import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
@@ -15,15 +16,12 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(
-      name,
-      [
-        trimCharsStart("./"),
-        trimCharsStart("~/"),
-        trimCharsStart("../"),
-        trimChars(" "),
-      ]
-    )
+    pipe(name, [
+      trimCharsStart("./"),
+      trimCharsStart("~/"),
+      trimCharsStart("../"),
+      trimChars(" "),
+    ])
 
   const lastPartOfName = c => {
     if (!c) return ""
@@ -35,10 +33,10 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _screens = pipe(
-    screens,
-    [map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
-  )
+  $: _screens = pipe(screens, [
+    map(c => ({ component: c, title: lastPartOfName(c) })),
+    sortBy("title"),
+  ])
 
   const isScreenSelected = component =>
     component.component &&
@@ -49,6 +47,14 @@
     componentToDelete = component
     confirmDeleteDialog.show()
   }
+
+  const changeScreen = screen => {
+    console.log("Screen: ", screen)
+    store.setCurrentScreen(screen.title)
+    $goto(`./:page/${screen.title}`)
+  }
+
+  $: console.log("Params: ", $params)
 </script>
 
 <div class="root">
@@ -57,7 +63,7 @@
     <div
       class="budibase__nav-item component"
       class:selected={$store.currentComponentInfo._id === screen.component.props._id}
-      on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}>
+      on:click|stopPropagation={() => changeScreen(screen)}>
 
       <span
         class="icon"
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 56d8cf8a2e..948f2c20e0 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   // import { tick } from "svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
 
@@ -16,15 +17,12 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(
-      name,
-      [
-        trimCharsStart("./"),
-        trimCharsStart("~/"),
-        trimCharsStart("../"),
-        trimChars(" "),
-      ]
-    )
+    pipe(name, [
+      trimCharsStart("./"),
+      trimCharsStart("~/"),
+      trimCharsStart("../"),
+      trimChars(" "),
+    ])
 
   const lastPartOfName = c =>
     c && last(c.name ? c.name.split("/") : c._component.split("/"))
@@ -33,10 +31,7 @@
 
   const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
 
-  $: _layout = pipe(
-    layout,
-    [c => ({ component: c, title: lastPartOfName(c) })]
-  )
+  $: _layout = pipe(layout, [c => ({ component: c, title: lastPartOfName(c) })])
 
   const isScreenSelected = component =>
     component.component &&
@@ -48,6 +43,11 @@
     // await tick()
     confirmDeleteDialog.show()
   }
+
+  const setCurrentScreenToLayout = () => {
+    store.setScreenType("page")
+    $goto("./:page/page-layout")
+  }
 </script>
 
 <div class="pagelayoutSection">
@@ -55,7 +55,7 @@
   <div
     class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
-    on:click|stopPropagation={() => store.setScreenType('page')}>
+    on:click|stopPropagation={setCurrentScreenToLayout}>
     <span
       class="icon"
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
@@ -89,23 +89,21 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
-.components-nav-page {
-  font-size: 13px;
-  color: #000333;
-  text-transform: uppercase;
-  margin-bottom: 10px;
-  padding-left: 20px;
-  font-weight: 600;
-  opacity: 0.4;
-  letter-spacing: 1px;
-}
+  .components-nav-page {
+    font-size: 13px;
+    color: #000333;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    padding-left: 20px;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
+  }
 
-
-.pagelayoutSection {
-  margin: 20px 0px 20px 0px;
-}
+  .pagelayoutSection {
+    margin: 20px 0px 20px 0px;
+  }
   .root {
-
   }
   .title {
     margin-left: 10px;
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
index 29240e41a0..e69de29bb2 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
@@ -1,9 +0,0 @@
-<script>
-  import { leftover } from "@sveltech/routify"
-
-  const structure = $leftover.split("/")
-
-  console.log(structure)
-</script>
-
-CREEN FALLBACK THINGIE!
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
deleted file mode 100644
index bfcfa9be45..0000000000
--- a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { params } from "@sveltech/routify"
-
-  console.log($params)
-</script>
-
-<slot />

From 3fba410cf8544b6ad9b01d305697c731f1a83c3b Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 29 Apr 2020 13:07:21 +0200
Subject: [PATCH 07/13] adds functionality to navigate to screens and layouts

---
 .../userInterface/ComponentsHierarchy.svelte       |  2 --
 .../frontend/[page]/[screen]/_layout.svelte        | 14 ++++++++++++++
 .../[application]/frontend/[page]/_layout.svelte   |  8 ++++++++
 .../[application]/frontend/[page]/index.svelte     |  1 -
 .../pages/[application]/frontend/_layout.svelte    |  3 ---
 5 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
 create mode 100644 packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index cdacd5b38f..05a3163911 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -53,8 +53,6 @@
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
   }
-
-  $: console.log("Params: ", $params)
 </script>
 
 <div class="root">
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
new file mode 100644
index 0000000000..5281705434
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { onMount } from "svelte"
+  import { params } from "@sveltech/routify"
+  import { store } from "builderStore"
+
+  if ($params.screen !== "page-layout") {
+    store.setCurrentScreen($params.screen)
+  } else {
+    store.setScreenType("page")
+  }
+</script>
+
+<slot />
+store.setScreenType("page")
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
new file mode 100644
index 0000000000..d379bba574
--- /dev/null
+++ b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { params } from "@sveltech/routify"
+  import { store } from "builderStore"
+
+  store.setCurrentPage($params.page)
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
index 2a02d41ce2..e69de29bb2 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte
@@ -1 +0,0 @@
-TEST
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index d33b42c3fc..24a9821cc2 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -50,9 +50,6 @@
   }
 
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
-
-  $: console.log("Pages: ", $store.pages[$store.currentPageName])
-  $: console.log("Screens: ", $store.screens)
 </script>
 
 <div class="root">

From 985ce2f50a02ada3a9a1f8a87f6e062a24cb03b4 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 29 Apr 2020 15:49:51 +0100
Subject: [PATCH 08/13] Colorpicker functionality for components panel

---
 .../src/components/common/Colorpicker.svelte  | 71 +++++++++++++++++++
 .../userInterface/StateBindingControl.svelte  |  3 +
 .../userInterface/pagesParsing/types.js       |  1 +
 packages/builder/src/index.html               |  2 +
 packages/standard-components/components.json  | 22 +++---
 .../standard-components/src/Heading.svelte    |  4 +-
 6 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 packages/builder/src/components/common/Colorpicker.svelte

diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte
new file mode 100644
index 0000000000..9cc3b3926a
--- /dev/null
+++ b/packages/builder/src/components/common/Colorpicker.svelte
@@ -0,0 +1,71 @@
+<script>
+  import { onMount, beforeUpdate, afterUpdate } from "svelte"
+
+  export let value = null
+  export let onChanged = () => {}
+  export let swatches = []
+
+  let picker
+  let cp = null
+
+  function getRecentColors() {
+    let colorStore = localStorage.getItem("bb:recentColors")
+    if (!!colorStore) {
+      swatches = JSON.parse(colorStore)
+    }
+  }
+
+  function setRecentColor(color) {
+    if (swatches.length >= 15) {
+      swatches.splice(0, 1)
+      picker.removeSwatch(0)
+    }
+    if (!swatches.includes(color)) {
+      swatches = [...swatches, color]
+      picker.addSwatch(color)
+      localStorage.setItem("bb:recentColors", JSON.stringify(swatches))
+    }
+  }
+
+  function createPicker() {
+    picker = Pickr.create({
+      el: cp,
+      theme: "nano",
+      default: value || "#000000",
+
+      swatches,
+      closeWithKey: "Escape",
+
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true,
+
+        interaction: {
+          hex: true,
+          rgba: true,
+          input: true,
+          save: true,
+        },
+      },
+    })
+  }
+
+  afterUpdate(() => {
+    picker.setColor(value)
+  })
+
+  onMount(() => {
+    getRecentColors()
+    createPicker()
+
+    picker.on("save", (colour, instance) => {
+      let color = colour.toHEXA().toString()
+      onChanged(color)
+      setRecentColor(color)
+      picker.hide()
+    })
+  })
+</script>
+
+<div bind:this={cp} class="color-picker" />
diff --git a/packages/builder/src/components/userInterface/StateBindingControl.svelte b/packages/builder/src/components/userInterface/StateBindingControl.svelte
index 40f62b51f2..266b61cd50 100644
--- a/packages/builder/src/components/userInterface/StateBindingControl.svelte
+++ b/packages/builder/src/components/userInterface/StateBindingControl.svelte
@@ -3,6 +3,7 @@
   import Input from "../common/Input.svelte"
   import PropertyCascader from "./PropertyCascader"
   import { isBinding, getBinding, setBinding } from "../common/binding"
+  import Colorpicker from "../common/Colorpicker.svelte"
 
   export let value = ""
   export let onChanged = () => {}
@@ -36,6 +37,8 @@
         {/if}
       {/each}
     </select>
+  {:else if type === 'colour'}
+    <Colorpicker {onChanged} {value} />
   {:else}
     <PropertyCascader {onChanged} {value} />
   {/if}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/types.js b/packages/builder/src/components/userInterface/pagesParsing/types.js
index 05d95e1956..3f331776d1 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/types.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/types.js
@@ -80,4 +80,5 @@ export const types = {
   asset: propType(() => "", isString, defaultDef("asset")),
   event: propType(() => [], isEventList, defaultDef("event")),
   state: propType(() => emptyState(), isBound, defaultDef("state")),
+  colour: propType(() => "#000000", isString, defaultDef("colour")),
 }
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index c878c3d67a..c708eeab2f 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -15,6 +15,8 @@
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
 	<link rel='stylesheet' href="/_builder/uikit.min.css">
+	<link rel='stylesheet' href="/_builder/nano.min.css">
+	<script src='/_builder/pickr.min.js'></script>
 </head>
 
 <body id="app">
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 4c4df1e1fc..3bea545c9b 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -12,10 +12,10 @@
 		"props": {
 			"logoUrl": "string",
 			"title": "string",
-			"backgroundColor": "string",
-			"color": "string",
+			"backgroundColor": "colour",
+			"color": "colour",
 			"borderWidth": "string",
-			"borderColor": "string",
+			"borderColor": "colour",
 			"borderStyle": "string"
 		}
 	},
@@ -30,8 +30,8 @@
 			"className": "string",
 			"disabled": "bool",
 			"onClick": "event",
-			"background": "string",
-			"color": "string",
+			"background": "colour",
+			"color": "colour",
 			"border": "string",
 			"padding": "string",
 			"hoverColor": "string",
@@ -167,6 +167,7 @@
 		"children": false,
 		"props": {
 			"text": "string",
+			"color": "colour",
 			"fontFamily": {
 				"type": "options",
 				"default": "initial",
@@ -182,8 +183,7 @@
 					"Lucida Sans Unicode"
 				]
 			},
-			"fontSize": "string",
-			"color": "string",
+			"fontSize": "string",			
 			"textAlign": {
 				"type": "options",
 				"default": "inline",
@@ -258,7 +258,8 @@
 		"description": "A HTML icon tag",
 		"props": {
 			"icon": "string",
-			"fontSize": "string"
+			"fontSize": "string",
+			"color": "colour"
 		}
 	},
 	"link": {
@@ -267,8 +268,8 @@
 			"url": "string",
 			"openInNewTab": "bool",
 			"text": "string",
-			"color": "string",
-			"hoverColor": "string",
+			"color": "colour",
+			"hoverColor": "colour",
 			"underline": "bool",
 			"fontSize": "string",
 			"fontFamily": {
@@ -355,6 +356,7 @@
 		"description": "An HTML H1 - H6 tag",
 		"props": {
 			"className": "string",
+			"color":"colour",
 			"text": "string",
 		"type": {
 				"type": "options",
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index f2aa583749..6a3a210dc3 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -5,11 +5,13 @@
   export let _bb
   export let text = ""
   export let fontFamily = ""
+  export let color = ""
 
   let containerElement
 
   $: containerElement && !text && _bb.attachChildren(containerElement)
-  $: style = buildStyle({ "font-family": fontFamily })
+  $: style = buildStyle({ "font-family": fontFamily, color })
+  // $: console.log("HEADING", color)
 </script>
 
 {#if type === 'h1'}

From 9d7999938d4efe8e15e8b7fe6cc2450f539dfd09 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 29 Apr 2020 16:02:17 +0100
Subject: [PATCH 09/13] Libraries for Colorpicker

---
 packages/server/.gitignore           | 2 ++
 packages/server/builder/nano.min.css | 1 +
 packages/server/builder/pickr.min.js | 3 +++
 3 files changed, 6 insertions(+)
 create mode 100644 packages/server/builder/nano.min.css
 create mode 100644 packages/server/builder/pickr.min.js

diff --git a/packages/server/.gitignore b/packages/server/.gitignore
index cf08d58354..dd9f0f7668 100644
--- a/packages/server/.gitignore
+++ b/packages/server/.gitignore
@@ -3,4 +3,6 @@ myapps/
 config.js
 /builder/*
 !/builder/assets/
+!/builder/pickr.min.js
+!/builder/nano.min.css
 public/
diff --git a/packages/server/builder/nano.min.css b/packages/server/builder/nano.min.css
new file mode 100644
index 0000000000..fb7e96080f
--- /dev/null
+++ b/packages/server/builder/nano.min.css
@@ -0,0 +1 @@
+/*! Pickr 1.5.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(.975);filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{-webkit-filter:brightness(.925);filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:currentColor;width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}
\ No newline at end of file
diff --git a/packages/server/builder/pickr.min.js b/packages/server/builder/pickr.min.js
new file mode 100644
index 0000000000..a9483e69b2
--- /dev/null
+++ b/packages/server/builder/pickr.min.js
@@ -0,0 +1,3 @@
+/*! Pickr 1.5.1 MIT | https://github.com/Simonwep/pickr */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)o.d(n,i,function(e){return t[e]}.bind(null,i));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=1)}([function(t){t.exports=JSON.parse('{"a":"1.5.1"}')},function(t,e,o){"use strict";o.r(e);var n={};function i(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function r(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?i(Object(o),!0).forEach((function(e){s(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):i(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function s(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function c(t,e,o,n,i={}){e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(o)||(o=[o]);for(const s of e)for(const e of o)s[t](e,n,r({capture:!1},i));return Array.prototype.slice.call(arguments,1)}o.r(n),o.d(n,"on",(function(){return a})),o.d(n,"off",(function(){return l})),o.d(n,"createElementFromString",(function(){return p})),o.d(n,"removeAttribute",(function(){return u})),o.d(n,"createFromTemplate",(function(){return h})),o.d(n,"eventPath",(function(){return d})),o.d(n,"resolveElement",(function(){return f})),o.d(n,"adjustableInputNumbers",(function(){return m}));const a=c.bind(null,"addEventListener"),l=c.bind(null,"removeEventListener");function p(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function u(t,e){const o=t.getAttribute(e);return t.removeAttribute(e),o}function h(t){return function t(e,o={}){const n=u(e,":obj"),i=u(e,":ref"),r=n?o[n]={}:o;i&&(o[i]=e);for(const o of Array.from(e.children)){const e=u(o,":arr"),n=t(o,e?{}:r);e&&(r[e]||(r[e]=[])).push(Object.keys(n).length?n:o)}return o}(p(t))}function d(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let o=t.target.parentElement;for(e=[t.target,o];o=o.parentElement;)e.push(o);return e.push(document,window),e}function f(t){return t instanceof Element?t:"string"==typeof t?t.split(/>>/g).reduce((t,e,o,n)=>(t=t.querySelector(e),o<n.length-1?t.shadowRoot:t),document):null}function m(t,e=(t=>t)){function o(o){const n=[.001,.01,.1][Number(o.shiftKey||2*o.ctrlKey)]*(o.deltaY<0?1:-1);let i=0,r=t.selectionStart;t.value=t.value.replace(/[\d.]+/g,(t,o)=>o<=r&&o+t.length>=r?(r=o,e(Number(t),n,i)):(i++,t)),t.focus(),t.setSelectionRange(r,r),o.preventDefault(),t.dispatchEvent(new Event("input"))}a(t,"focus",()=>a(window,"wheel",o,{passive:!1})),a(t,"blur",()=>l(window,"wheel",o))}var v=o(0);const{min:b,max:y,floor:g,round:_}=Math;function w(t,e,o){e/=100,o/=100;const n=g(t=t/360*6),i=t-n,r=o*(1-e),s=o*(1-i*e),c=o*(1-(1-i)*e),a=n%6;return[255*[o,s,r,r,c,o][a],255*[c,o,o,s,r,r][a],255*[r,r,c,o,o,s][a]]}function A(t,e,o){const n=(2-(e/=100))*(o/=100)/2;return 0!==n&&(e=1===n?0:n<.5?e*o/(2*n):e*o/(2-2*n)),[t,100*e,100*n]}function C(t,e,o){const n=b(t/=255,e/=255,o/=255),i=y(t,e,o),r=i-n;let s,c;if(0===r)s=c=0;else{c=r/i;const n=((i-t)/6+r/2)/r,a=((i-e)/6+r/2)/r,l=((i-o)/6+r/2)/r;t===i?s=l-a:e===i?s=1/3+n-l:o===i&&(s=2/3+a-n),s<0?s+=1:s>1&&(s-=1)}return[360*s,100*c,100*i]}function k(t,e,o,n){return e/=100,o/=100,[...C(255*(1-b(1,(t/=100)*(1-(n/=100))+n)),255*(1-b(1,e*(1-n)+n)),255*(1-b(1,o*(1-n)+n)))]}function S(t,e,o){return e/=100,[t,2*(e*=(o/=100)<.5?o:1-o)/(o+e)*100,100*(o+e)]}function O(t){return C(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function j(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,rgba:/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsla:/^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsva:/^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},o=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let n;t:for(const i in e){if(!(n=e[i].exec(t)))continue;const r=t=>!!n[2]==("number"==typeof t);switch(i){case"cmyk":{const[,t,e,r,s]=o(n);if(t>100||e>100||r>100||s>100)break t;return{values:k(t,e,r,s),type:i}}case"rgba":{const[,,,t,e,s,c]=o(n);if(t>255||e>255||s>255||c<0||c>1||!r(c))break t;return{values:[...C(t,e,s),c],a:c,type:i}}case"hexa":{let[,t]=n;4!==t.length&&3!==t.length||(t=t.split("").map(t=>t+t).join(""));const e=t.substring(0,6);let o=t.substring(6);return o=o?parseInt(o,16)/255:void 0,{values:[...O(e),o],a:o,type:i}}case"hsla":{const[,,,t,e,s,c]=o(n);if(t>360||e>100||s>100||c<0||c>1||!r(c))break t;return{values:[...S(t,e,s),c],a:c,type:i}}case"hsva":{const[,,,t,e,s,c]=o(n);if(t>360||e>100||s>100||c<0||c>1||!r(c))break t;return{values:[t,e,s,c],a:c,type:i}}}}return{values:null,type:null}}function x(t=0,e=0,o=0,n=1){const i=(t,e)=>(o=-1)=>e(~o?t.map(t=>Number(t.toFixed(o))):t),r={h:t,s:e,v:o,a:n,toHSVA(){const t=[r.h,r.s,r.v,r.a];return t.toString=i(t,t=>"hsva(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(r.a,")")),t},toHSLA(){const t=[...A(r.h,r.s,r.v),r.a];return t.toString=i(t,t=>"hsla(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(r.a,")")),t},toRGBA(){const t=[...w(r.h,r.s,r.v),r.a];return t.toString=i(t,t=>"rgba(".concat(t[0],", ").concat(t[1],", ").concat(t[2],", ").concat(r.a,")")),t},toCMYK(){const t=function(t,e,o){const n=w(t,e,o),i=n[0]/255,r=n[1]/255,s=n[2]/255,c=b(1-i,1-r,1-s);return[100*(1===c?0:(1-i-c)/(1-c)),100*(1===c?0:(1-r-c)/(1-c)),100*(1===c?0:(1-s-c)/(1-c)),100*c]}(r.h,r.s,r.v);return t.toString=i(t,t=>"cmyk(".concat(t[0],"%, ").concat(t[1],"%, ").concat(t[2],"%, ").concat(t[3],"%)")),t},toHEXA(){const t=function(t,e,o){return w(t,e,o).map(t=>_(t).toString(16).padStart(2,"0"))}(r.h,r.s,r.v),e=r.a>=1?"":Number((255*r.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return e&&t.push(e),t.toString=()=>"#".concat(t.join("").toUpperCase()),t},clone:()=>x(r.h,r.s,r.v,r.a)};return r}const E=t=>Math.max(Math.min(t,1),0);function L(t){const e={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},t),_keyboard(t){const{options:o}=e,{type:n,key:i}=t;if(document.activeElement===o.wrapper){const{lock:o}=e.options,r="ArrowUp"===i,s="ArrowRight"===i,c="ArrowDown"===i,a="ArrowLeft"===i;if("keydown"===n&&(r||s||c||a)){let n=0,i=0;"v"===o?n=r||s?1:-1:"h"===o?n=r||s?-1:1:(i=r?-1:c?1:0,n=a?-1:s?1:0),e.update(E(e.cache.x+.01*n),E(e.cache.y+.01*i)),t.preventDefault()}else i.startsWith("Arrow")&&(e.options.onstop(),t.preventDefault())}},_tapstart(t){a(document,["mouseup","touchend","touchcancel"],e._tapstop),a(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove(t){const{options:o,cache:n}=e,{lock:i,element:r,wrapper:s}=o,c=s.getBoundingClientRect();let a=0,l=0;if(t){const e=t&&t.touches&&t.touches[0];a=t?(e||t).clientX:0,l=t?(e||t).clientY:0,a<c.left?a=c.left:a>c.left+c.width&&(a=c.left+c.width),l<c.top?l=c.top:l>c.top+c.height&&(l=c.top+c.height),a-=c.left,l-=c.top}else n&&(a=n.x*c.width,l=n.y*c.height);"h"!==i&&(r.style.left="calc(".concat(a/c.width*100,"% - ").concat(r.offsetWidth/2,"px)")),"v"!==i&&(r.style.top="calc(".concat(l/c.height*100,"% - ").concat(r.offsetHeight/2,"px)")),e.cache={x:a/c.width,y:l/c.height};const p=E(a/c.width),u=E(l/c.height);switch(i){case"v":return o.onchange(p);case"h":return o.onchange(u);default:return o.onchange(p,u)}},_tapstop(){e.options.onstop(),l(document,["mouseup","touchend","touchcancel"],e._tapstop),l(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(t=0,o=0){const{left:n,top:i,width:r,height:s}=e.options.wrapper.getBoundingClientRect();"h"===e.options.lock&&(o=t),e._tapmove({clientX:n+r*t,clientY:i+s*o})},destroy(){const{options:t,_tapstart:o,_keyboard:n}=e;l(document,["keydown","keyup"],n),l([t.wrapper,t.element],"mousedown",o),l([t.wrapper,t.element],"touchstart",o,{passive:!1})}},{options:o,_tapstart:n,_keyboard:i}=e;return a([o.wrapper,o.element],"mousedown",n),a([o.wrapper,o.element],"touchstart",n,{passive:!1}),a(document,["keydown","keyup"],i),e}function P(t={}){t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=a(t.elements,"click",e=>{t.elements.forEach(o=>o.classList[e.target===o?"add":"remove"](t.className)),t.onchange(e)});return{destroy:()=>l(...e)}}function B({el:t,reference:e,padding:o=8}){const n={start:"sme",middle:"mse",end:"ems"},i={top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},r=((t={})=>(e,o=t[e])=>{if(o)return o;const[n,i="middle"]=e.split("-"),r="top"===n||"bottom"===n;return t[e]={position:n,variant:i,isVertical:r}})();return{update(s,c=!1){const{position:a,variant:l,isVertical:p}=r(s),u=e.getBoundingClientRect(),h=t.getBoundingClientRect(),d=t=>t?{t:u.top-h.height-o,b:u.bottom+o}:{r:u.right+o,l:u.left-h.width-o},f=t=>t?{s:u.left+u.width-h.width,m:-h.width/2+(u.left+u.width/2),e:u.left}:{s:u.bottom-h.height,m:u.bottom-u.height/2-h.height/2,e:u.bottom-u.height},m={},v=(t,e,o)=>{const n="top"===o,i=n?h.height:h.width,r=window[n?"innerHeight":"innerWidth"];for(const n of t){const t=e[n],s=m[o]="".concat(t,"px");if(t>0&&t+i<r)return s}return null};for(const e of[p,!p]){const o=e?"top":"left",r=e?"left":"top",s=v(i[a],d(e),o),c=v(n[l],f(e),r);if(s&&c)return t.style[r]=c,void(t.style[o]=s)}c?(t.style.top="".concat((window.innerHeight-h.height)/2,"px"),t.style.left="".concat((window.innerWidth-h.width)/2,"px")):(t.style.left=m.left,t.style.top=m.top)}}}function H(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class R{constructor(t){H(this,"_initializingActive",!0),H(this,"_recalc",!0),H(this,"_nanopop",null),H(this,"_root",null),H(this,"_color",x()),H(this,"_lastColor",x()),H(this,"_swatchColors",[]),H(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]}),this.options=t=Object.assign({appClass:null,theme:"classic",useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:"body",components:{interaction:{}},strings:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},t);const{swatches:e,components:o,theme:n,sliders:i,lockOpacity:r,padding:s}=t;["nano","monolith"].includes(n)&&!i&&(t.sliders="h"),o.interaction||(o.interaction={});const{preview:c,opacity:a,hue:l,palette:p}=o;o.opacity=!r&&a,o.palette=p||c||a||l,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),e&&e.length&&e.forEach(t=>this.addSwatch(t));const{button:u,app:h}=this._root;this._nanopop=B({reference:u,padding:s,el:h}),u.setAttribute("role","button"),u.setAttribute("aria-label","toggle color picker dialog");const d=this;requestAnimationFrame((function e(){if(!h.offsetWidth&&h.parentElement!==t.container)return requestAnimationFrame(e);d.setColor(t.default),d._rePositioningPicker(),t.defaultRepresentation&&(d._representation=t.defaultRepresentation,d.setColorRepresentation(d._representation)),t.showAlways&&d.show(),d._initializingActive=!1,d._emit("init")}))}_preBuild(){const t=this.options;for(const e of["el","container"])t[e]=f(t[e]);this._root=(({components:t,strings:e,useAsButton:o,inline:n,appClass:i,theme:r,lockOpacity:s})=>{const c=t=>t?"":'style="display:none" hidden',a=h('\n      <div :ref="root" class="pickr">\n\n        '.concat(o?"":'<button type="button" :ref="button" class="pcr-button"></button>','\n\n        <div :ref="app" class="pcr-app ').concat(i||"",'" data-theme="').concat(r,'" ').concat(n?'style="position: unset"':"",' aria-label="color picker dialog" role="form">\n          <div class="pcr-selection" ').concat(c(t.palette),'>\n            <div :obj="preview" class="pcr-color-preview" ').concat(c(t.preview),'>\n              <button type="button" :ref="lastColor" class="pcr-last-color" aria-label="use previous color"></button>\n              <div :ref="currentColor" class="pcr-current-color"></div>\n            </div>\n\n            <div :obj="palette" class="pcr-color-palette">\n              <div :ref="picker" class="pcr-picker"></div>\n              <div :ref="palette" class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>\n            </div>\n\n            <div :obj="hue" class="pcr-color-chooser" ').concat(c(t.hue),'>\n              <div :ref="picker" class="pcr-picker"></div>\n              <div :ref="slider" class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>\n            </div>\n\n            <div :obj="opacity" class="pcr-color-opacity" ').concat(c(t.opacity),'>\n              <div :ref="picker" class="pcr-picker"></div>\n              <div :ref="slider" class="pcr-opacity pcr-slider" tabindex="0" aria-label="opacity selection slider" role="slider"></div>\n            </div>\n          </div>\n\n          <div class="pcr-swatches ').concat(t.palette?"":"pcr-last",'" :ref="swatches"></div> \n\n          <div :obj="interaction" class="pcr-interaction" ').concat(c(Object.keys(t.interaction).length),'>\n            <input :ref="result" class="pcr-result" type="text" spellcheck="false" ').concat(c(t.interaction.input),'>\n\n            <input :arr="options" class="pcr-type" data-type="HEXA" value="').concat(s?"HEX":"HEXA",'" type="button" ').concat(c(t.interaction.hex),'>\n            <input :arr="options" class="pcr-type" data-type="RGBA" value="').concat(s?"RGB":"RGBA",'" type="button" ').concat(c(t.interaction.rgba),'>\n            <input :arr="options" class="pcr-type" data-type="HSLA" value="').concat(s?"HSL":"HSLA",'" type="button" ').concat(c(t.interaction.hsla),'>\n            <input :arr="options" class="pcr-type" data-type="HSVA" value="').concat(s?"HSV":"HSVA",'" type="button" ').concat(c(t.interaction.hsva),'>\n            <input :arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(c(t.interaction.cmyk),'>\n\n            <input :ref="save" class="pcr-save" value="').concat(e.save||"Save",'" type="button" ').concat(c(t.interaction.save),' aria-label="save and exit">\n            <input :ref="cancel" class="pcr-cancel" value="').concat(e.cancel||"Cancel",'" type="button" ').concat(c(t.interaction.cancel),' aria-label="cancel and exit">\n            <input :ref="clear" class="pcr-clear" value="').concat(e.clear||"Clear",'" type="button" ').concat(c(t.interaction.clear),' aria-label="clear and exit">\n          </div>\n        </div>\n      </div>\n    ')),l=a.interaction;return l.options.find(t=>!t.hidden&&!t.classList.add("active")),l.type=()=>l.options.find(t=>t.classList.contains("active")),a})(t),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const o=t.el.parentElement;t.el.nextSibling?o.insertBefore(e.app,t.el.nextSibling):o.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,o=(t.options.sliders||"v").repeat(2),[n,i]=o.match(/^[vh]+$/g)?o:[],r=()=>this._color||(this._color=this._lastColor.clone()),s={palette:L({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop",t),onchange(o,n){if(!e.palette)return;const i=r(),{_root:s,options:c}=t,{lastColor:a,currentColor:l}=s.preview;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput());const p=i.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background="\n                        linear-gradient(to top, rgba(0, 0, 0, ".concat(i.a,"), transparent),\n                        linear-gradient(to left, hsla(").concat(i.h,", 100%, 50%, ").concat(i.a,"), rgba(255, 255, 255, ").concat(i.a,"))\n                    "),c.comparison?c.useAsButton||t._lastColor||(a.style.color=p):(s.button.style.color=p,s.button.classList.remove("clear"));const u=i.toHEXA().toString();for(const{el:e,color:o}of t._swatchColors)e.classList[u===o.toHEXA().toString()?"add":"remove"]("pcr-active");l.style.color=p}}),hue:L({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop",t),onchange(o){if(!e.hue||!e.palette)return;const n=r();t._recalc&&(n.h=360*o),this.element.style.backgroundColor="hsl(".concat(n.h,", 100%, 50%)"),s.palette.trigger()}}),opacity:L({lock:"v"===n?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop",t),onchange(o){if(!e.opacity||!e.palette)return;const n=r();t._recalc&&(n.a=Math.round(100*o)/100),this.element.style.background="rgba(0, 0, 0, ".concat(n.a,")"),s.palette.trigger()}}),selectable:P({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput()}})};this._components=s}_bindEvents(){const{_root:t,options:e}=this,o=[a(t.interaction.clear,"click",()=>this._clearColor()),a([t.interaction.cancel,t.preview.lastColor],"click",()=>{this._emit("cancel",this),this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0)}),a(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),a(t.interaction.result,["keyup","input"],t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),a(t.interaction.result,["focus","blur"],t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput()}),a([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0)];if(!e.showAlways){const n=e.closeWithKey;o.push(a(t.button,"click",()=>this.isOpen()?this.hide():this.show()),a(document,"keyup",t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide()),a(document,["touchstart","mousedown"],e=>{this.isOpen()&&!d(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};m(t.interaction.result,(t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],r=t+(e>=100?1e3*o:o);return r<=0?0:Number((r<e?r:e).toPrecision(3))}return t})}if(e.autoReposition&&!e.inline){let t=null;const n=this;o.push(a(window,["scroll","resize"],()=>{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout(()=>t=null,100),requestAnimationFrame((function e(){n._rePositioningPicker(),null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout(()=>t=null,100)))},{capture:!0}))}this._eventBindings=o}_rePositioningPicker(){const{options:t}=this;t.inline||this._nanopop.update(t.position,!this._recalc)}_updateOutput(){const{_root:t,_color:e,options:o}=this;if(t.interaction.type()){const n="to".concat(t.interaction.type().getAttribute("data-type"));t.interaction.result.value="function"==typeof e[n]?e[n]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",e)}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||(e.button.style.color="rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),o.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear",this))}_parseLocalColor(t){const{values:e,type:o,a:n}=j(t),{lockOpacity:i}=this.options,r=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&r?null:e,type:o}}_emit(t,...e){this._eventListener[t].forEach(t=>t(...e,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t];if(o){const t=o.indexOf(e);~t&&o.splice(t,1)}return this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=x(...e),i=p('<button type="button" style="color: '.concat(n.toRGBA().toString(0),'" aria-label="color swatch"/>'));return o.swatches.appendChild(i),t.push({el:i,color:n}),this._eventBindings.push(a(i,"click",()=>{this.setHSVA(...n.toHSVA(),!0),this._emit("swatchselect",n),this._emit("change",n)})),!0}return!1}removeSwatch(t){const e=this._swatchColors[t];if(e){const{el:o}=e;return this._root.swatches.removeChild(o),this._swatchColors.splice(t,1),!0}return!1}applyColor(t=!1){const{preview:e,button:o}=this._root,n=this._color.toRGBA().toString(0);return e.lastColor.style.color=n,this.options.useAsButton||(o.style.color=n),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color),this}destroy(){this._eventBindings.forEach(t=>l(...t)),Object.keys(this._components).forEach(t=>this._components[t].destroy())}destroyAndRemove(){this.destroy();const{root:t,app:e}=this._root;t.parentElement&&t.parentElement.removeChild(t),e.parentElement.removeChild(e),Object.keys(this).forEach(t=>this[t]=null)}hide(){return this._root.app.classList.remove("visible"),this._emit("hide",this),this}show(){return this.options.disabled||(this._root.app.classList.add("visible"),this._rePositioningPicker(),this._emit("show",this)),this}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(t=360,e=0,o=0,n=1,i=!1){const r=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||o<0||o>100||n<0||n>1)return!1;this._color=x(t,e,o,n);const{hue:s,opacity:c,palette:a}=this._components;return s.update(t/360),c.update(n),a.update(e/100,1-o/100),i||this.applyColor(),r&&this._updateOutput(),this._recalc=r,!0}setColor(t,e=!1){if(null===t)return this._clearColor(e),!0;const{values:o,type:n}=this._parseLocalColor(t);if(o){const t=n.toUpperCase(),{options:i}=this._root.interaction,r=i.find(e=>e.getAttribute("data-type")===t);if(r&&!r.hidden)for(const t of i)t.classList[t===r?"add":"remove"]("active");return!!this.setHSVA(...o,e)&&this.setColorRepresentation(t)}return!1}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(e=>e.getAttribute("data-type").startsWith(t)&&!e.click())}getColorRepresentation(){return this._representation}getColor(){return this._color}getSelectedColor(){return this._lastColor}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}R.utils=n,R.libs={HSVaColor:x,Moveable:L,Nanopop:B,Selectable:P},R.create=t=>new R(t),R.version=v.a;e.default=R}]).default}));
+//# sourceMappingURL=pickr.min.js.map
\ No newline at end of file

From bb213d743a92095e386422d8dcc533f9c0c3645f Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 1 May 2020 16:20:25 +0200
Subject: [PATCH 10/13] adds functionality to navigate to specific component
 via URL

---
 .../frontend/[page]/[screen]/_layout.svelte   | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
index 5281705434..0110148f54 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -1,14 +1,51 @@
 <script>
   import { onMount } from "svelte"
-  import { params } from "@sveltech/routify"
+  import { params, leftover } from "@sveltech/routify"
   import { store } from "builderStore"
 
+  // Get any leftover params not caught by Routifys params store.
+  const componentIds = $leftover.split("/").filter(id => id !== "")
+
+  // It's a screen, set it to that screen
   if ($params.screen !== "page-layout") {
     store.setCurrentScreen($params.screen)
+
+    // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
+    if ($leftover) {
+      // Get the correct screen children.
+      const screenChildren = $store.pages[$params.page]._screens.find(
+        screen => screen.name === $params.screen
+      ).props._children
+      findComponent(componentIds, screenChildren)
+    }
   } else {
+    // It's a page, so set the screentype to page.
     store.setScreenType("page")
+
+    // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
+    if ($leftover) {
+      findComponent(componentIds, $store.pages[$params.page].props._children)
+    }
+  }
+
+  // Find Component with ID and continue
+  function findComponent(ids, children) {
+    // Setup stuff
+    let componentToSelect
+    let currentChildren = children
+
+    // Loop through each ID
+    ids.forEach(id => {
+      // Find ID and select it
+      componentToSelect = currentChildren.find(child => child._id === id)
+
+      // Update childrens array to selected components children
+      currentChildren = componentToSelect._children
+    })
+
+    // Select Component!
+    store.selectComponent(componentToSelect)
   }
 </script>
 
 <slot />
-store.setScreenType("page")

From 0a24d5e814ed4163bf0f45c4d3c1c803da945331 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 1 May 2020 17:39:50 +0200
Subject: [PATCH 11/13] move onSelect method ComponentsHierarchyChildren

---
 .../components/userInterface/ComponentsHierarchy.svelte   | 2 --
 .../userInterface/ComponentsHierarchyChildren.svelte      | 8 +++++++-
 .../src/components/userInterface/PageLayout.svelte        | 3 ---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 05a3163911..72e91d0600 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -49,7 +49,6 @@
   }
 
   const changeScreen = screen => {
-    console.log("Screen: ", screen)
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
   }
@@ -82,7 +81,6 @@
       <ComponentsHierarchyChildren
         components={screen.component.props._children}
         currentComponent={$store.currentComponentInfo}
-        onSelect={store.selectComponent}
         onDeleteComponent={confirmDeleteComponent}
         onMoveUpComponent={store.moveUpComponent}
         onMoveDownComponent={store.moveDownComponent}
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index f1d72da457..51301a32c1 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "../common/core"
   import {
@@ -16,6 +17,7 @@
   export let onMoveUpComponent
   export let onMoveDownComponent
   export let onCopyComponent
+  export let ids = []
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
@@ -28,11 +30,15 @@
       return onMoveDownComponent(c)
     }
   }
+
+  const selectComponent = (ids, component) => {
+    store.selectComponent(component)
+  }
 </script>
 
 <ul>
   {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => onSelect(component)}>
+    <li on:click|stopPropagation={() => selectComponent(ids, component)}>
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 948f2c20e0..fb56e142bd 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -73,7 +73,6 @@
     <ComponentsHierarchyChildren
       components={_layout.component.props._children}
       currentComponent={$store.currentComponentInfo}
-      onSelect={store.selectComponent}
       onDeleteComponent={confirmDeleteComponent}
       onMoveUpComponent={store.moveUpComponent}
       onMoveDownComponent={store.moveDownComponent}
@@ -103,8 +102,6 @@
   .pagelayoutSection {
     margin: 20px 0px 20px 0px;
   }
-  .root {
-  }
   .title {
     margin-left: 10px;
     font-size: 13px;

From 7b77195d1685649eab1b2a2cfd2ee50c79240006 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 4 May 2020 10:26:38 +0200
Subject: [PATCH 12/13] adds method on store to get path of IDs to component

---
 .../builder/src/builderStore/store/index.js   | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 8c1538e098..81b1109a07 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -2,7 +2,7 @@
 import { filter, cloneDeep, last, concat, isEmpty, values } from "lodash/fp"
 import { pipe, getNode, constructHierarchy } from "components/common/core"
 import * as backendStoreActions from "./backend"
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 import { defaultPagesObject } from "components/userInterface/pagesParsing/defaultPagesObject"
 import api from "../api"
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
@@ -92,6 +92,7 @@ export const getStore = () => {
   store.moveUpComponent = moveUpComponent(store)
   store.moveDownComponent = moveDownComponent(store)
   store.copyComponent = copyComponent(store)
+  store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
   return store
@@ -667,6 +668,38 @@ const copyComponent = store => component => {
   })
 }
 
+const getPathToComponent = store => component => {
+
+  // Gets all the components to needed to construct a path.
+  const tempStore = get(store)
+  let pathComponents = []
+  let parent = component;
+  let root = false
+  while (!root) {
+    parent = getParent(tempStore.currentPreviewItem.props, parent)
+    if (!parent) {
+      root = true
+    } else {
+      pathComponents.push(parent)
+    }
+  }
+
+  // Remove root entry since it's the screen or page layout.
+  // Reverse array since we need the correct order of the IDs
+  const reversedComponents = pathComponents.reverse().slice(1)
+
+  // Add component
+  const allComponents = [...reversedComponents, component]
+
+  // Map IDs
+  const IdList = allComponents.map(c => c._id)
+
+  // Construct ID Path:
+  const path = IdList.join('/')
+
+  return path
+}
+
 const getParent = (rootProps, child) => {
   let parent
   walkProps(rootProps, (p, breakWalk) => {

From 4514329dfa2fd18e05a99351613afca4ecb03afb Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 4 May 2020 10:32:25 +0200
Subject: [PATCH 13/13] adds working routing for clicking on components

---
 .../ComponentsHierarchyChildren.svelte              | 13 ++++++++++---
 .../src/components/userInterface/PageLayout.svelte  |  1 +
 .../src/components/userInterface/PagesList.svelte   |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 51301a32c1..18f9ec7ea9 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "../common/core"
@@ -17,7 +18,6 @@
   export let onMoveUpComponent
   export let onMoveDownComponent
   export let onCopyComponent
-  export let ids = []
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
@@ -31,14 +31,21 @@
     }
   }
 
-  const selectComponent = (ids, component) => {
+  const selectComponent = component => {
+    // Set current component
     store.selectComponent(component)
+
+    // Get ID path
+    const path = store.getPathToComponent(component)
+
+    // Go to correct URL
+    $goto(`./:page/:screen/${path}`)
   }
 </script>
 
 <ul>
   {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => selectComponent(ids, component)}>
+    <li on:click|stopPropagation={() => selectComponent(component)}>
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index fb56e142bd..4f55fcd992 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -71,6 +71,7 @@
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
     <ComponentsHierarchyChildren
+      thisComponent={_layout.component.props}
       components={_layout.component.props._children}
       currentComponent={$store.currentComponentInfo}
       onDeleteComponent={confirmDeleteComponent}
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 33b93719a0..562c813865 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -24,7 +24,7 @@
 
   const changePage = id => {
     store.setCurrentPage(id)
-    $goto(`./${id}`)
+    $goto(`./${id}/page-layout`)
   }
 </script>