builder layout redesign

7 years ago · bf7afe369d
14 changed files with 20563 additions and 20083 deletions
--- a/packages/builder/src/BackendRoot.svelte
+++ b/packages/builder/src/BackendRoot.svelte
@ -1,6 +1,6 @@
 <script>

-import Nav from "./nav/Nav.svelte";
+import BackendNav from "./nav/BackendNav.svelte";
 import Database from "./database/DatabaseRoot.svelte" ;
 import UserInterface from "./userInterface/UserInterfaceRoot.svelte" ;
 import ActionsAndTriggers from "./actionsAndTriggers/ActionsAndTriggersRoot.svelte" ;
@ -15,7 +15,9 @@ export let navWidth = "50px";
 </script>

 <div class="root">
-  <Nav width={navWidth} />
+  <div class="nav">
+    <BackendNav />
+  </div>
  <div class="content" 
       style="width: calc(100% - {navWidth}); left: {navWidth}"> 
    {#if $store.activeNav === "database"}
@ -33,15 +35,21 @@ export let navWidth = "50px";
 <style>
 	.root {
    height: 100%;
+    display: flex;
 	}
  

  .content {
-    position: fixed;
+    flex: 1 1 auto;
    height: 100%;
    background-color: var(--white);
    margin:0;
  }

+  .nav {
+    flex: 0 1 auto;
+    width: 300px;
+    height: 100%;
+  }

 </style>
--- a/packages/builder/src/PackageRoot.svelte
+++ b/packages/builder/src/PackageRoot.svelte
@ -11,12 +11,16 @@ import { fade } from "svelte/transition";
 <div class="root">

    <div class="top-nav">
-        <IconButton icon="home"/>
+        <IconButton icon="home" 
+                    color="var(--slate)"
+                    hoverColor="var(--secondary75)"/>
        <span class:active={$store.isBackend}
+              class="topnavitem"
              on:click={store.showBackend}>
              Backend
        </span>
        <span class:active={!$store.isBackend}
+              class="topnavitem"
              on:click={store.showFrontend}>
              Frontend
        </span>
@ -41,24 +45,25 @@ import { fade } from "svelte/transition";
 .root {
    height:100%;
    width:100%;
+    display: flex;
+    flex-direction: column;
 }

 .top-nav {
-    position:fixed;
-    height:40px;
-    margin: 0px;
+    flex: 0 0 auto;
+    height:25px;
    background: white;
    border-style:solid;
    border-width: 0px 0px 1px 0px;
    border-color: var(--lightslate);
    padding: 5px;
+    width: 100%;
 }

 .content {
-    position:fixed;
-    height:calc(100% - 40px);
-    top:40px;
-    margin: 0px;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100px;
 }

 .content > div {
@ -66,18 +71,19 @@ import { fade } from "svelte/transition";
    width:100%;
 }

-.active {
-    color: var(--secondary100);
-}
-
-.top-nav > span {
+.topnavitem {
    cursor: pointer;
    color: var(--slate);
    padding: 0px 15px;
 }

-.top-nav > span:hover {
+.topnavitem:hover {
    color: var(--secondary75);
 }

+.active {
+    color: var(--secondary100);
+}
+
+
 </style>
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@ -188,6 +188,7 @@ const selectExistingNode = (store) => (nodeId) => {
        );
        s.currentNodeIsNew = false;
        s.errors = [];
+        s.activeNav = "database";
        return s;
    })
 }
--- a/packages/builder/src/common/IconButton.svelte
+++ b/packages/builder/src/common/IconButton.svelte
@ -4,8 +4,8 @@ import getIcon from "./icon";
 export let size = 18;
 export let icon = "";
 export let style = "";
-export let color = "";
-export let hoverColor = "";
+export let color = "var(--secondary100)";
+export let hoverColor = "var(--secondary75)";
 export let attributes = {};

 $: borderClass = grouped 
@ -40,7 +40,7 @@ const addAttributes = (node, attributes) => {

 </script>

-<button style="{style} color:{color} --hovercolor:{hoverColor}"
+<button style="{style}{style ? ";" : ""} color:{color}; --hovercolor:{hoverColor}"
        on:click
        use:addAttributes={attributes}>
    {@html getIcon(icon, size)}
--- a/packages/builder/src/database/DatabaseRoot.svelte
+++ b/packages/builder/src/database/DatabaseRoot.svelte
@ -47,62 +47,29 @@ store.subscribe(db => {
 </script>

 <div class="root">
-    <div class="hierarchy" style="width: {hierarchyWidth}">
-        <div class="hierarchy-title-row">
-            <div class="hierarchy-title">Records</div>
-            <DropdownButton iconName="plus" actions={newRecordActions} />
-        </div>
-        {#each $store.hierarchy.children as record}
-        <HierarchyRow node={record} />
-        {/each}
-
-        <div class="hierarchy-title-row" style="margin-top: 20px">
-            <div class="hierarchy-title">Indexes</div>
-            <DropdownButton iconName="plus" actions={newIndexActions} />
-        </div>
-        {#each $store.hierarchy.indexes as index}
-        <HierarchyRow node={index} />
-        {/each}
+    <div class="actions-header">
+        {#if $store.currentNode}
+        <ActionsHeader left={hierarchyWidth}/>
+        {/if}
    </div>
-    <div class="node-container">
-        <div class="actions-header">
-            {#if $store.currentNode}
-            <ActionsHeader left={hierarchyWidth}/>
-            {/if}
-        </div>
-        <div class="node-view">
-            {#if !$store.currentNode}
-            <h1 style="margin-left: 100px">:)</h1>
-            {:else if $store.currentNode.type === "record"}
-            <RecordView />
-            {:else}
-            <IndexView />
-            {/if}
-        </div>
+    <div class="node-view">
+        {#if !$store.currentNode}
+        <h1 style="margin-left: 100px">:)</h1>
+        {:else if $store.currentNode.type === "record"}
+        <RecordView />
+        {:else}
+        <IndexView />
+        {/if}
    </div>
 </div>


 <style>
 .root {
-    display: flex;
    height: 100%;
    position: relative;
 }

-.hierarchy {
-    flex: 0 1 auto;
-    background-color: var(--primary10);
-    overflow-y: auto;
-    height: 100%;
-}
-
-.node-container {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-}
-
 .actions-header {
    flex: 0 1 auto;
 }
@ -112,18 +79,4 @@ store.subscribe(db => {
    flex: 1 1 auto;
 }

-.hierarchy-title-row {
-    padding: 15px 7px;
-    /*background-color: var(--secondary75);
-    color: var(--white);*/
-    font-size: 11pt;
-    display: flex;
-    font-weight: bold;
-}
-
-.hierarchy-title {
-    flex: auto 1 1;
-}
-
-
 </style>
--- a/packages/builder/src/nav/BackendNav.svelte
+++ b/packages/builder/src/nav/BackendNav.svelte
@ -0,0 +1,110 @@
+<script>
+
+import { store } from "../builderStore";
+import HierarchyRow from "./HierarchyRow.svelte";
+import DropdownButton from "../common/DropdownButton.svelte";
+import {hierarchy as hierarchyFunctions} from "../../../core/src";
+import NavItem from "./NavItem.svelte";
+
+const defaultNewChildActions =  [
+    {
+        label:"New Root Index", 
+        onclick: store.newRootIndex
+    }, 
+    {
+        label:"New Root Record", 
+        onclick: store.newRootRecord
+    }
+];
+
+let newChildActions = defaultNewChildActions;
+
+const setActiveNav = (name) => () => {
+    store.setActiveNav(name);
+}
+
+
+store.subscribe(db => {
+    if(!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {
+        newChildActions = defaultNewChildActions;
+    } else {
+        newChildActions = [
+            {label:"New Root Record", 
+            onclick: store.newRootRecord},
+            {label: `New Child Record of ${db.currentNode.name}`, 
+            onclick: store.newChildRecord},
+            {label:"New Root Index", 
+            onclick: store.newRootIndex},
+            {label: `New Index on ${db.currentNode.name}`, 
+            onclick: store.newChildIndex}
+        ];
+    }
+});
+
+</script>
+
+<div class="root">
+    <div class="items-root">
+        <div class="hierarchy">
+            <div class="hierarchy-title-row">
+                <div class="hierarchy-title">Database</div>
+                <DropdownButton iconName="plus" actions={newChildActions} />
+            </div>
+
+            {#each $store.hierarchy.children as record}
+            <HierarchyRow node={record}
+                        type="record" />
+            {/each}
+
+            {#each $store.hierarchy.indexes as index}
+            <HierarchyRow node={index}
+                        type="index" />
+            {/each}
+
+        </div>
+
+        <NavItem name="actions" label="Actions and Triggers"/>
+        <NavItem name="access levels" label="User Levels"/>
+        <div class="space-filler"></div>
+    </div>
+</div>
+
+<style>
+
+.root {
+    height: 100%;
+    background-color: var(--primary10);
+}
+
+.items-root {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 10px;
+}
+
+
+.hierarchy {
+    flex: 1 1 auto;
+}
+
+
+.hierarchy-title-row {
+    padding: 15px 7px;
+    font-size: 12pt;
+    display: flex;
+    font-weight: bold;
+}
+
+.hierarchy-title {
+    flex: auto 1 1;
+}
+
+
+
+.space-filler {
+    flex: 1 1 auto;
+}
+
+
+</style>
--- a/packages/builder/src/nav/HierarchyRow.svelte
+++ b/packages/builder/src/nav/HierarchyRow.svelte
@ -0,0 +1,66 @@
+<script>
+
+import {store} from "../builderStore";
+import {cloneDeep} from "lodash";
+import getIcon from "../common/icon";
+export let level = 0;
+export let node;
+export let type;
+
+let navActive = "";
+$:icon = type==="index" ? "list" : "file";
+
+store.subscribe(s => {
+    if(s.currentNode)
+        navActive = (s.activeNav === "database" && node.nodeId === s.currentNode.nodeId 
+                    ? "active" : "")
+});
+
+</script>
+
+<div class="root">
+    <div class="title {navActive}" on:click={() => store.selectExistingNode(node.nodeId)} style="padding-left: {20 + (level * 20)}px">
+        {@html getIcon(icon, 12)} <span style="margin-left: 5px">{node.name}</span>
+    </div>
+    {#if node.children}
+        {#each node.children as child}
+        <svelte:self node={child} 
+                    level={level+1}
+                    type="record"/>
+        {/each}
+    {/if}
+    {#if node.indexes}
+        {#each node.indexes as index}
+        <svelte:self node={index} 
+                    level={level+1}
+                    type="index"/>
+        {/each}
+    {/if}
+</div>
+
+
+<style>
+
+.root { 
+    display: block;
+    font-size: 12pt;
+    width: 100%;
+    cursor: pointer;
+}
+
+.title {
+    padding-top: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    color: var(--secondary100);
+}
+
+.title:hover {
+    background-color: var(--secondary10);
+}
+
+.active {
+    background-color: var(--primary10);
+}
+
+</style>
--- a/packages/builder/src/nav/Nav.svelte
+++ b/packages/builder/src/nav/Nav.svelte
@ -1,36 +0,0 @@
-<script>
-
-import NavItem from "./NavItem.svelte";
-
-export let width=50;
-
-</script>
-
-<nav class="nav"
-     style="width: {width};">
-    <img src="/_builder/assets/budibase-logo-only.png" class="logo" alt="budibase logo"/>
-    <NavItem name="database" label="Database" icon="database" />
-    <NavItem name="actions" label="Actions" icon="zap" />
-    <NavItem name="access levels" label="Access Levels" icon="user" />
-</nav>
-
-
-
-<style>
-
-.nav {
-  height: 100%;
-  position: fixed;
-  left: 0px;
-  background-color: var(--secondary100);
-  color: var(--darkslate);
-}
-
-.nav > img {
-  width:100%;
-  margin-bottom: 30px;
-  margin-top: 5px;
-  margin-left:0px;
-}
-
-</style>
--- a/packages/builder/src/nav/NavItem.svelte
+++ b/packages/builder/src/nav/NavItem.svelte
@ -5,7 +5,6 @@ import getIcon from "../common/icon";

 export let name = "";
 export let label = "";
-export let icon = "";

 let navActive = "";

@ -18,58 +17,27 @@ const setActive = () =>

 </script>

-<div class="{navActive}">
-    <div class="nav-item" 
-        on:click={setActive}>
-        <div class="inner">
-            <div class="icon">{@html getIcon(icon)}</div>
-        </div>
-    </div>
+<div class="nav-item {navActive}" on:click={setActive}>
+    {label}
 </div>


 <style>

 .nav-item {
-    padding: 0px 5px;
-    display: block;
-    padding: 10px;
-    color: var(--slate);
+    padding: 7px;
+    font-size: 12pt;
+    font-weight: bold;
    cursor: pointer;
-}
-
-.inner {
-    padding: 0px 20px 10px 0px;
-    display: inline-block;
-    width:100%;
+    flex: 0 0 auto;
 }

 .nav-item:hover {
-    background-color: var(--primary25);
-}
-
-.icon {
-    font-size:0.9em; 
-    display: inline-block; 
-    position: relative;
-    top: 5px;
-    margin-right:5px;
-    width:100%;
-}
-
-.active > div {
    background-color: var(--primary10);
-    color: var(--secondary100);
-}
-
-.active>div:hover {
-    background-color: var(--slate);
-    color: var(--secondary100);
 }

 .active {
-    background-color: white; 
+    background-color: var(--primary10);
 }

-
 </style>
--- a/packages/server/appPackages/testApp2/appDefinition.json
+++ b/packages/server/appPackages/testApp2/appDefinition.json
@ -41,7 +41,20 @@
            "children": [],
            "validationRules": [],
            "nodeId": 2,
-            "indexes": [],
+            "indexes": [
+              {
+                "name": "Some index",
+                "type": "index",
+                "map": "return {...record};",
+                "filter": "",
+                "indexType": "ancestor",
+                "getShardName": "",
+                "getSortKey": "record.id",
+                "aggregateGroups": [],
+                "allowedRecordNodeIds": [],
+                "nodeId": 3
+              }
+            ],
            "allidsShardFactor": 1,
            "collectionName": "invoices",
            "isSingle": false
@ -56,7 +69,22 @@
      }
    ],
    "pathMaps": [],
-    "indexes": [],
+    "indexes": [
+      {
+        "name": "Yeo index",
+        "type": "index",
+        "map": "return {...record};",
+        "filter": "",
+        "indexType": "ancestor",
+        "getShardName": "",
+        "getSortKey": "record.id",
+        "aggregateGroups": [],
+        "allowedRecordNodeIds": [
+          1
+        ],
+        "nodeId": 4
+      }
+    ],
    "nodeId": 0
  },
  "triggers": [
@ -78,12 +106,14 @@
      [
        [
          [
-            {
-              "name": "output_to_file",
-              "behaviourSource": "main",
-              "behaviourName": "outputToFile",
-              "initialOptions": {}
-            }
+            [
+              {
+                "name": "output_to_file",
+                "behaviourSource": "main",
+                "behaviourName": "outputToFile",
+                "initialOptions": {}
+              }
+            ]
          ]
        ]
      ]
--- a/packages/server/builder/bundle.css
+++ b/packages/server/builder/bundle.css
@ -1,39 +1,41 @@
 main.svelte-j8mzr7{height:100%;width:100%;font-family:"Lato", Helvetica, Arial, sans-serif}
-.root.svelte-i0dstr{height:100%}.content.svelte-i0dstr{position:fixed;height:100%;background-color:var(--white);margin:0}
+.root.svelte-fkeby9{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-fkeby9{flex:0 0 auto;height:25px;background:white;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);padding:5px;width:100%}.content.svelte-fkeby9{flex:1 1 auto;width:100%;height:100px}.content.svelte-fkeby9>div.svelte-fkeby9{height:100%;width:100%}.topnavitem.svelte-fkeby9{cursor:pointer;color:var(--slate);padding:0px 15px}.topnavitem.svelte-fkeby9:hover{color:var(--secondary75)}.active.svelte-fkeby9{color:var(--secondary100)}
 .root.svelte-e4n7zy{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-e4n7zy{display:inline-block;margin:auto}.logo.svelte-e4n7zy{width:300px;margin-bottom:40px}.root.svelte-e4n7zy .option{width:250px}.app-link.svelte-e4n7zy{margin-top:10px;display:block}
-.root.svelte-ui57a{display:flex;height:100%;position:relative}.hierarchy.svelte-ui57a{flex:0 1 auto;background-color:var(--primary10);overflow-y:auto;height:100%}.node-container.svelte-ui57a{flex:1 1 auto;display:flex;flex-direction:column}.actions-header.svelte-ui57a{flex:0 1 auto}.node-view.svelte-ui57a{overflow-y:auto;flex:1 1 auto}.hierarchy-title-row.svelte-ui57a{padding:15px 7px;font-size:11pt;display:flex;font-weight:bold}.hierarchy-title.svelte-ui57a{flex:auto 1 1}
-.nav.svelte-lgepe1{height:100%;position:fixed;left:0px;background-color:var(--secondary100);color:var(--darkslate)}.nav.svelte-lgepe1>img.svelte-lgepe1{width:100%;margin-bottom:30px;margin-top:5px;margin-left:0px}
-.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
-h4.svelte-o0id5a{margin-top:20px}
+.root.svelte-uaf5ep{height:100%;display:flex}.content.svelte-uaf5ep{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-uaf5ep{flex:0 1 auto;width:300px;height:100%}
+button.svelte-4po3k2{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-4po3k2:hover{color:var(--hovercolor)}button.svelte-4po3k2:active{outline:none}
 .root.svelte-1dih19s{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1dih19s{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1dih19s{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1dih19s{padding-top:20px}.nav-group-header.svelte-1dih19s{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1dih19s{padding-top:10px}.nav-group-header.svelte-1dih19s{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1dih19s>span.svelte-1dih19s:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3):hover{color:var(--primary75)}
 .border-normal.svelte-7rfkdx{border-radius:var(--borderradiusall)}.border-left.svelte-7rfkdx{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-7rfkdx{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-7rfkdx{border-radius:0}button.svelte-7rfkdx{border-style:solid;padding:7px 15px;cursor:pointer}.primary.svelte-7rfkdx{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-7rfkdx:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-7rfkdx:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-7rfkdx:hover{background-color:var(--primary10)}.primary-outline.svelte-7rfkdx:pressed{background-color:var(--primary25)}.secondary.svelte-7rfkdx{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-7rfkdx:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-7rfkdx:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-7rfkdx:hover{background-color:var(--secondary10)}.secondary-outline.svelte-7rfkdx:pressed{background-color:var(--secondary25)}.success.svelte-7rfkdx{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-7rfkdx:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-7rfkdx:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-7rfkdx:hover{background-color:var(--success10)}.success-outline.svelte-7rfkdx:pressed{background-color:var(--success25)}.deletion.svelte-7rfkdx{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-7rfkdx:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-7rfkdx:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-7rfkdx:hover{background-color:var(--deletion10)}.deletion-outline.svelte-7rfkdx:pressed{background-color:var(--deletion25)}
+h4.svelte-o0id5a{margin-top:20px}
+.root.svelte-1py90dy{height:100%;background-color:var(--primary10)}.items-root.svelte-1py90dy{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-1py90dy{flex:1 1 auto}.hierarchy-title-row.svelte-1py90dy{padding:15px 7px;font-size:12pt;display:flex;font-weight:bold}.hierarchy-title.svelte-1py90dy{flex:auto 1 1}.space-filler.svelte-1py90dy{flex:1 1 auto}
 .root.svelte-zzs4qg{padding:10px}
-.root.svelte-1tilbnf{padding:5px;top:0;width:100%}
-.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
-.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
-.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
-.root.svelte-d6wwkb{display:flex}.root.svelte-d6wwkb:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-d6wwkb:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-d6wwkb:not(:first-child):not(:last-child){border-radius:0}
-.nav-item.svelte-5cf6ht{padding:0px 5px;display:block;padding:10px;color:var(--slate);cursor:pointer}.inner.svelte-5cf6ht{padding:0px 20px 10px 0px;display:inline-block;width:100%}.nav-item.svelte-5cf6ht:hover{background-color:var(--primary25)}.icon.svelte-5cf6ht{font-size:0.9em;display:inline-block;position:relative;top:5px;margin-right:5px;width:100%}.active.svelte-5cf6ht>div.svelte-5cf6ht{background-color:var(--primary10);color:var(--secondary100)}.active.svelte-5cf6ht>div.svelte-5cf6ht:hover{background-color:var(--slate);color:var(--secondary100)}.active.svelte-5cf6ht{background-color:white}
-.dropdown-background.svelte-179p8ge{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-179p8ge{cursor:pointer;z-index:1}.dropdown-content.svelte-179p8ge{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-179p8ge:not(:focus){display:none}.action-row.svelte-179p8ge{padding:7px 10px;cursor:pointer}.action-row.svelte-179p8ge:hover{background-color:var(--primary100);color:var(--white)}
-.root.svelte-ffb307{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-ffb307{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-ffb307:hover{color:var(--secondary75)}.component.svelte-ffb307{margin-left:5px}.selected.svelte-ffb307{color:var(--primary100)}.title.svelte-ffb307{margin-left:10px}
-button.svelte-4po3k2{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-4po3k2:hover{color:var(--hovercolor)}button.svelte-4po3k2:active{outline:none}
+.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
+.root.svelte-apja7r{height:100%;position:relative}.actions-header.svelte-apja7r{flex:0 1 auto}.node-view.svelte-apja7r{overflow-y:auto;flex:1 1 auto}
+h1.svelte-2ukyrk{font-size:1.2em}
 .root.svelte-1cnqtw{color:var(--secondary50)}.hierarchy-item.svelte-1cnqtw{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1cnqtw:hover{color:var(--secondary75)}.component.svelte-1cnqtw{margin-left:5px}.currentfolder.svelte-1cnqtw{color:var(--secondary100)}.selected.svelte-1cnqtw{color:var(--primary100)}.title.svelte-1cnqtw{margin-left:10px}
-.root.svelte-xai2hc{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-xai2hc{padding:0px 5px 0px 10px}.title.svelte-xai2hc{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(2){grid-column-start:actions}.section-header.svelte-xai2hc{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-xai2hc{vertical-align:middle;margin-top:20px}
+.root.svelte-183dehm{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-183dehm{padding:0px 5px 0px 10px}.title.svelte-183dehm{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-183dehm>div.svelte-183dehm:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-183dehm>div.svelte-183dehm:nth-child(2){grid-column-start:actions}.section-header.svelte-183dehm{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-183dehm{vertical-align:middle;margin-top:20px}
+.root.svelte-ffb307{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-ffb307{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-ffb307:hover{color:var(--secondary75)}.component.svelte-ffb307{margin-left:5px}.selected.svelte-ffb307{color:var(--primary100)}.title.svelte-ffb307{margin-left:10px}
+.component-preview.svelte-3nuv7g{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-3nuv7g{grid-row-start:middle;grid-column-start:middle}
 .section-container.svelte-1t0x31f{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-1t0x31f:nth-child(1){margin-bottom:15px}.row-text.svelte-1t0x31f{margin-right:15px;color:var(--primary100)}input.svelte-1t0x31f{margin-right:15px}p.svelte-1t0x31f>span.svelte-1t0x31f{margin-left:30px}.header.svelte-1t0x31f{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(1){grid-column-start:title}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(2){grid-column-start:icon}
-h1.svelte-2ukyrk{font-size:1.2em}
-.component-preview.svelte-1d56h9p{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-1d56h9p{grid-row-start:middle;grid-column-start:middle}
-.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
+.dropdown-background.svelte-179p8ge{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-179p8ge{cursor:pointer;z-index:1}.dropdown-content.svelte-179p8ge{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-179p8ge:not(:focus){display:none}.action-row.svelte-179p8ge{padding:7px 10px;cursor:pointer}.action-row.svelte-179p8ge:hover{background-color:var(--primary100);color:var(--white)}
+.root.svelte-d6wwkb{display:flex}.root.svelte-d6wwkb:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-d6wwkb:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-d6wwkb:not(:first-child):not(:last-child){border-radius:0}
 .edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
-textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
-.error-container.svelte-jwy920{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-jwy920{padding:5px 0px}
-.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
-input.svelte-66516k{margin-right:7px}
+.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
+.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
+.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
+.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
+.root.svelte-1tilbnf{padding:5px;top:0;width:100%}
 .root.svelte-1sxai5n{font-size:10pt}.padding.svelte-1sxai5n{padding:0 10px}.inherited-title.svelte-1sxai5n{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
+.component.svelte-13tuzj8{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-13tuzj8:hover{background-color:var(--primary10)}.component.svelte-13tuzj8>.title.svelte-13tuzj8{font-size:13pt;color:var(--secondary100)}.component.svelte-13tuzj8>.description.svelte-13tuzj8{font-size:10pt;color:var(--primary75);font-style:italic}
+.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
 .title.svelte-1pp53c5{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-1pp53c5>span.svelte-1pp53c5{margin-left:10px}
+.root.svelte-1bn4xbe{display:block;font-size:12pt;width:100%;cursor:pointer}.title.svelte-1bn4xbe{padding-top:5px;padding-right:5px;padding-bottom:5px;color:var(--secondary100)}.title.svelte-1bn4xbe:hover{background-color:var(--secondary10)}.active.svelte-1bn4xbe{background-color:var(--primary10)}
 .root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
-.component.svelte-13tuzj8{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-13tuzj8:hover{background-color:var(--primary10)}.component.svelte-13tuzj8>.title.svelte-13tuzj8{font-size:13pt;color:var(--secondary100)}.component.svelte-13tuzj8>.description.svelte-13tuzj8{font-size:10pt;color:var(--primary75);font-style:italic}
-textarea.svelte-1wfv4cc{width:300px;height:200px}
-.root.svelte-woqcuf{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(2){grid-column-start:actions}.selectedname.svelte-woqcuf{font-weight:bold;color:var(--secondary)}
+input.svelte-66516k{margin-right:7px}
+.error-container.svelte-jwy920{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-jwy920{padding:5px 0px}
+textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
 .root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
+.root.svelte-woqcuf{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(2){grid-column-start:actions}.selectedname.svelte-woqcuf{font-weight:bold;color:var(--secondary)}
+textarea.svelte-1wfv4cc{width:300px;height:200px}
+.nav-item.svelte-1y614ns{padding:7px;font-size:12pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1y614ns:hover{background-color:var(--primary10)}.active.svelte-1y614ns{background-color:var(--primary10)}

 /*# sourceMappingURL=bundle.css.map */
--- a/packages/server/builder/bundle.css.map
+++ b/packages/server/builder/bundle.css.map
--- a/packages/server/builder/bundle.js
+++ b/packages/server/builder/bundle.js
--- a/packages/server/builder/bundle.js.map
+++ b/packages/server/builder/bundle.js.map