From fc9c1a1fbe1f055d12739065d51cf4b78c47b65f Mon Sep 17 00:00:00 2001
From: michael shanks <mike@budibase.com>
Date: Wed, 31 Jul 2019 08:09:04 +0100
Subject: [PATCH] renaming store

---
 packages/builder/rollup.config.js             |  4 +-
 packages/builder/src/App.svelte               |  6 +--
 packages/builder/src/NoPackage.svelte         |  4 +-
 packages/builder/src/PackageRoot.svelte       | 10 ++--
 .../src/accessLevels/AccessLevelsRoot.svelte  | 18 +++----
 .../src/actionsAndTriggers/Actions.svelte     |  8 +--
 .../ActionsAndTriggersRoot.svelte             | 10 ++--
 .../src/actionsAndTriggers/Triggers.svelte    | 10 ++--
 .../builder/src/builderStore/createPackage.js |  4 +-
 packages/builder/src/builderStore/index.js    |  8 +--
 packages/builder/src/builderStore/store.js    | 52 +++++++++++++------
 .../builder/src/database/ActionsHeader.svelte | 16 +++---
 .../builder/src/database/DatabaseRoot.svelte  | 22 ++++----
 .../builder/src/database/FieldView.svelte     |  8 +--
 .../builder/src/database/HierarchyRow.svelte  |  4 +-
 .../builder/src/database/IndexView.svelte     |  8 +--
 .../builder/src/database/RecordView.svelte    | 18 +++----
 packages/builder/src/nav/Nav.svelte           |  1 -
 packages/builder/src/nav/NavItem.svelte       |  6 +--
 .../userInterface/UserInterfaceRoot.svelte    |  7 ++-
 .../pagesParsing/searchComponents.js          |  2 +-
 21 files changed, 125 insertions(+), 101 deletions(-)

diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index 58278d37d6..c2155343f6 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -11,7 +11,7 @@ import browsersync from "rollup-plugin-browsersync";
 import proxy from "http-proxy-middleware";
 import corePackageJson from "../core/package.json";
 
-const target = 'http://localhost:4001/_builder';
+const target = 'http://localhost:4001';
 const _builderProxy =  proxy('/_builder', {
   target:"http://localhost:3000",
   pathRewrite: {'^/_builder' : ''}
@@ -126,7 +126,7 @@ export default {
 		!production && livereload(outputpath),
 		!production && browsersync({
 			server: outputpath,
-			middleware: [_builderProxy, apiProxy]
+			middleware: [apiProxy,_builderProxy]
 		}),
 
 		// If we're building for production (npm run build
diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index cc1beff9bd..e23e1535a6 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -2,7 +2,7 @@
 	
 	import NoPackage from "./NoPackage.svelte";
 	import PackageRoot from "./PackageRoot.svelte";
-	import {database, initialise} from "./builderStore";
+	import {store, initialise} from "./builderStore";
 	import { onMount } from 'svelte';
 	
 	let init = initialise();
@@ -16,11 +16,11 @@
 		<h1>loading</h1>
 
 	{:then result}
-		{#if $database.hasAppPackage}
+		{#if $store.hasAppPackage}
 		<PackageRoot />
 		{/if}
 
-		{#if !$database.hasAppPackage}
+		{#if !$store.hasAppPackage}
 		<NoPackage />
 		{/if}
 
diff --git a/packages/builder/src/NoPackage.svelte b/packages/builder/src/NoPackage.svelte
index e95f335346..c3ff8c1aff 100644
--- a/packages/builder/src/NoPackage.svelte
+++ b/packages/builder/src/NoPackage.svelte
@@ -1,7 +1,7 @@
 <script>
 
 import Button from "./common/Button.svelte"
-import { database } from "./builderStore";
+import { store } from "./builderStore";
 
 let errors = [];
 
@@ -14,7 +14,7 @@ let errors = [];
             
             <div>
                 <h4 style="margin-bottom: 20px">Choose an Application</h4>
-                {#each $database.apps as app}
+                {#each $store.apps as app}
                 <a href={`#/${app}`} class="app-link">{app}</a>
                 {/each}
             </div>
diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte
index adf483381f..77ae02df39 100644
--- a/packages/builder/src/PackageRoot.svelte
+++ b/packages/builder/src/PackageRoot.svelte
@@ -7,7 +7,7 @@ import ActionsAndTriggers from "./actionsAndTriggers/ActionsAndTriggersRoot.svel
 import AccessLevels from "./accessLevels/AccessLevelsRoot.svelte" ;
 import ComingSoon from "./common/ComingSoon.svelte";
 
-import {database} from "./builderStore";
+import {store} from "./builderStore";
 
 export let navWidth = "50px";
 
@@ -18,13 +18,13 @@ export let navWidth = "50px";
   <Nav width={navWidth} />
   <div class="content" 
        style="width: calc(100% - {navWidth}); left: {navWidth}"> 
-    {#if $database.activeNav === "database"}
+    {#if $store.activeNav === "database"}
     <Database />
-    {:else if $database.activeNav === "actions"}
+    {:else if $store.activeNav === "actions"}
     <ActionsAndTriggers />
-    {:else if $database.activeNav === "access levels"}
+    {:else if $store.activeNav === "access levels"}
     <AccessLevels />
-    {:else if $database.activeNav === "user interface"}
+    {:else if $store.activeNav === "user interface"}
     <UserInterface />
     {/if}
   </div>
diff --git a/packages/builder/src/accessLevels/AccessLevelsRoot.svelte b/packages/builder/src/accessLevels/AccessLevelsRoot.svelte
index b6d46f32ef..19d995ff5a 100644
--- a/packages/builder/src/accessLevels/AccessLevelsRoot.svelte
+++ b/packages/builder/src/accessLevels/AccessLevelsRoot.svelte
@@ -2,7 +2,7 @@
 
 import ButtonGroup from "../common/ButtonGroup.svelte";
 import Button from "../common/Button.svelte";
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import {generateFullPermissions, getNewAccessLevel} from "../common/core";
 import getIcon from "../common/icon";
 import AccessLevelView from "./AccessLevelView.svelte";
@@ -13,7 +13,7 @@ let editingLevelIsNew = false;
 $: isEditing = (editingLevel !== null); 
 
 let allPermissions = [];
-database.subscribe(db => {
+store.subscribe(db => {
     allPermissions = generateFullPermissions(db.hierarchy, db.actions);
 })
 
@@ -27,7 +27,7 @@ let onLevelCancel = () => {
 };
 
 let onLevelDelete = (level) => {
-    database.deleteLevel(level);
+    store.deleteLevel(level);
 };
 
 
@@ -38,7 +38,7 @@ let createNewLevel = () => {
 
 let onEditingFinished = (level) => {
     if(level) {
-        database.saveLevel(level, editingLevelIsNew, editingLevel);
+        store.saveLevel(level, editingLevelIsNew, editingLevel);
     }
     editingLevel = null;
 }
@@ -55,7 +55,7 @@ const getPermissionsString = perms => {
     <Button grouped color="secondary" on:click={createNewLevel}>Create New Access Level</Button>
 </ButtonGroup>
 
-{#if $database.accessLevels}
+{#if $store.accessLevels}
 <table class="fields-table uk-table uk-table-small">
     <thead>
         <tr>
@@ -65,7 +65,7 @@ const getPermissionsString = perms => {
         </tr>
     </thead>
     <tbody>
-        {#each $database.accessLevels as level}
+        {#each $store.accessLevels as level}
         <tr>
             <td >{level.name}</td>
             <td >{getPermissionsString(level.permissions)}</td>
@@ -88,9 +88,9 @@ const getPermissionsString = perms => {
                      allPermissions={allPermissions}
                      onFinished={onEditingFinished}
                      isNew={editingLevelIsNew}
-                     allLevels={$database.accessLevels}
-                     hierarchy={$database.hierarchy}
-                     actions={$database.actions} />
+                     allLevels={$store.accessLevels}
+                     hierarchy={$store.hierarchy}
+                     actions={$store.actions} />
     {/if}    
 </Modal>
 
diff --git a/packages/builder/src/actionsAndTriggers/Actions.svelte b/packages/builder/src/actionsAndTriggers/Actions.svelte
index 91c5cd57e2..dfa825adb2 100644
--- a/packages/builder/src/actionsAndTriggers/Actions.svelte
+++ b/packages/builder/src/actionsAndTriggers/Actions.svelte
@@ -1,7 +1,7 @@
 <script>
 
 import getIcon from "../common/icon";
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import Button from "../common/Button.svelte";
 import ButtonGroup from "../common/ButtonGroup.svelte";
 import ActionView from "./ActionView.svelte";
@@ -39,7 +39,7 @@ let actionEditingFinished = (action) => {
 
 <h3>Actions</h3>
 
-{#if $database.actions}
+{#if $store.actions}
 <table class="fields-table uk-table uk-table-small">
     <thead>
         <tr>
@@ -51,7 +51,7 @@ let actionEditingFinished = (action) => {
         </tr>
     </thead>
     <tbody>
-        {#each $database.actions as action}
+        {#each $store.actions as action}
         <tr>
             <td >{action.name}</td>
             <td >{action.behaviourSource}</td>
@@ -73,7 +73,7 @@ let actionEditingFinished = (action) => {
 <Modal bind:isOpen={isEditing}>
     {#if isEditing}
     <ActionView action={editingAction}
-                allActions={$database.actions}
+                allActions={$store.actions}
                 onFinished={actionEditingFinished}
                 isNew={editingActionIsNew}/>
     {/if}    
diff --git a/packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte b/packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte
index aeae9f3980..62b0b73531 100644
--- a/packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte
+++ b/packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte
@@ -1,7 +1,7 @@
 <script>
 
 import getIcon from "../common/icon";
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import Button from "../common/Button.svelte";
 import ButtonGroup from "../common/ButtonGroup.svelte";
 import Actions from "./Actions.svelte";
@@ -31,7 +31,7 @@ let newAction = () => {
 }
 
 let onActionDelete = (action) => {
-    database.deleteAction(action);
+    store.deleteAction(action);
 }
 
 let deleteTrigger = () => {}
@@ -47,7 +47,7 @@ let newTrigger = () => {
 }
 
 let onActionSave = action => {
-    database.saveAction(
+    store.saveAction(
             action, 
             editingActionIsNew, 
             editingAction);
@@ -60,7 +60,7 @@ let onActionCancel = () => {
 }
 
 let onTriggerSave = trigger => {
-    database.saveTrigger(
+    store.saveTrigger(
             trigger, 
             editingTriggerIsNew, 
             editingTrigger);
@@ -79,7 +79,7 @@ let onTriggerEdit = (trigger) => {
 
 
 let onTriggerDelete = (trigger) => {
-    database.deleteTrigger(trigger);
+    store.deleteTrigger(trigger);
 }
 
 </script>
diff --git a/packages/builder/src/actionsAndTriggers/Triggers.svelte b/packages/builder/src/actionsAndTriggers/Triggers.svelte
index bccd45ee19..de882c232c 100644
--- a/packages/builder/src/actionsAndTriggers/Triggers.svelte
+++ b/packages/builder/src/actionsAndTriggers/Triggers.svelte
@@ -1,6 +1,6 @@
 <script>
 
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import getIcon from "../common/icon";
 import Button from "../common/Button.svelte";
 import Modal from "../common/Modal.svelte";
@@ -29,7 +29,7 @@ let triggerEditingFinished = (trigger) => {
 
 <h3>Triggers</h3>
 
-{#if $database.triggers}
+{#if $store.triggers}
 <table class="fields-table uk-table uk-table-small">
     <thead>
         <tr>
@@ -41,7 +41,7 @@ let triggerEditingFinished = (trigger) => {
         </tr>
     </thead>
     <tbody>
-        {#each $database.triggers as trigger}
+        {#each $store.triggers as trigger}
         <tr>
             <td >{trigger.eventName}</td>
             <td >{trigger.actionName}</td>
@@ -63,8 +63,8 @@ let triggerEditingFinished = (trigger) => {
 <Modal bind:isOpen={isEditing}>
     {#if isEditing}
     <TriggerView trigger={editingTrigger}
-                allActions={$database.actions}
-                allTriggers={$database.triggers}
+                allActions={$store.actions}
+                allTriggers={$store.triggers}
                 onFinished={triggerEditingFinished}
                 isNew={editingTriggerIsNew}/>
     {/if}    
diff --git a/packages/builder/src/builderStore/createPackage.js b/packages/builder/src/builderStore/createPackage.js
index 5d41f98d6f..ace7074b22 100644
--- a/packages/builder/src/builderStore/createPackage.js
+++ b/packages/builder/src/builderStore/createPackage.js
@@ -1,9 +1,9 @@
 import {createNewHierarchy} from "../common/core";
 
-export const createPackage = (packageInfo, database) => {
+export const createPackage = (packageInfo, store) => {
     packageInfo.createNewPackage("");
     const root = createNewHierarchy();
-    database.importAppDefinition({
+    store.importAppDefinition({
       hierarchy:root,
       actions:[],
       triggers:[],
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index e710b82af9..39aa444ee1 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -2,15 +2,15 @@ import {createPackage} from "./createPackage";
 import getStore from "./store";
 import { last } from "lodash/fp";
 
-export const database = getStore();
+export const store = getStore();
 
 export const createNewPackage = () =>
-    createPackage(packageInfo, database);
+    createPackage(packageInfo, store);
 
 export const initialise = async () => {
     try {
-        setupRouter(database);
-        await database.initialise();
+        setupRouter(store);
+        await store.initialise();
     } catch(err) {
         console.log(err);
     }
diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index 7e5dfdd6f3..ef27ee5d62 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -25,6 +25,7 @@ import {
 import {writable} from "svelte/store";
 import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject"
 import api from "./api";
+import { isRootComponent } from "../userInterface/pagesParsing/searchComponents";
 
 const pipe = common.$;
 
@@ -39,8 +40,7 @@ export const getStore = () => {
         pages:defaultPagesObject(),
         mainUi:{},
         unauthenticatedUi:{},
-        derivedComponents:[],
-        rootComponents:[],
+        allComponents:[],
         currentNodeIsNew: false,
         errors: [],
         activeNav: "database",
@@ -98,8 +98,8 @@ const initialise = (store, initial) => async () => {
     initial.hasAppPackage = true;
     initial.hierarchy = pkg.appDefinition.hierarchy;
     initial.accessLevels = pkg.accessLevels;
-    initial.derivedComponents = pkg.derivedComponents;
-    initial.rootComponents = pkg.rootComponents;
+    initial.allComponents = combineComponents(
+        pkg.derivedComponents, pkg.rootComponents);
     initial.actions = reduce((arr, action) => {
         arr.push(action);
         return arr;
@@ -118,6 +118,17 @@ const initialise = (store, initial) => async () => {
     return initial;
 }
 
+const combineComponents = (root, derived) => {
+    const all = []
+    for(let r in root) {
+        all.push(root[r]);
+    }
+    for(let d in derived) {
+        all.push(root[d]);
+    }
+    return all;
+}
+
 const newRecord = (store, useRoot) => () => {
     store.update(s => {
         s.currentNodeIsNew = true;
@@ -359,11 +370,12 @@ const saveDerivedComponent = store => (derivedComponent) => {
 
     store.update(s => {
 
-        const derivedComponents = pipe(s.derivedComponents, [
-            filter(c => c._name !== derivedComponent._name)
+        const components = pipe(s.allComponents, [
+            filter(c => c._name !== derivedComponent._name),
+            concat([derivedComponent])
         ]);
 
-        s.derivedComponents = derivedComponents;
+        s.allComponents = components;
 
         api.post(`/_builder/api/${s.appname}/derivedcomponent`, derivedComponent);
 
@@ -374,11 +386,11 @@ const saveDerivedComponent = store => (derivedComponent) => {
 const deleteDerivedComponent = store => name => {
     store.update(s => {
 
-        const derivedComponents = pipe(s.derivedComponents, [
+        const allComponents = pipe(s.allComponents, [
             filter(c => c._name !== name)
         ]);
 
-        s.derivedComponents = derivedComponents;
+        s.allComponents = allComponents;
 
         api.delete(`/_builder/api/${s.appname}/derivedcomponent/${name}`);
 
@@ -389,18 +401,18 @@ const deleteDerivedComponent = store => name => {
 const renameDerivedComponent = store => (oldname, newname) => {
     store.update(s => {
 
-        const component = pipe(s.derivedComponents, [
+        const component = pipe(s.allComponents, [
             find(c => c._name === name)
         ]);
 
         component._name = newname;
 
-        const derivedComponents = pipe(s.derivedComponents, [
+        const allComponents = pipe(s.allComponents, [
             filter(c => c._name !== name),
-            concat(component)
+            concat([component])
         ]);
 
-        s.derivedComponent = derivedComponents;
+        s.allComponents = allComponents;
 
         api.patch(`/_builder/api/${s.appname}/derivedcomponent`, {
             oldname, newname
@@ -430,8 +442,13 @@ const addComponentLibrary = store => async lib => {
     store.update(s => {
         s.componentsErrors.addComponent = error;
         if(success) {
+            
+            s.allComponents = pipe(s.allComponents, [
+                filter(c => !isRootComponent(c)),
+                concat(components)
+            ]);
+
             s.pages.componentLibraries.push(lib);
-            s.rootComponents = [...s.rootComponents, components];
         }
 
         return s;
@@ -440,6 +457,8 @@ const addComponentLibrary = store => async lib => {
 
 }
 
+
+
 const refreshComponents = store => async () => {
 
     const components = 
@@ -451,7 +470,10 @@ const refreshComponents = store => async () => {
     ]);
 
     store.update(s => {
-        s.rootComponents = rootComponents;
+        s.allComponents = pipe(s.allComponents, [
+            filter(c => !isRootComponent(c)),
+            concat(rootComponents)
+        ]);
         return s;
     });
 };
diff --git a/packages/builder/src/database/ActionsHeader.svelte b/packages/builder/src/database/ActionsHeader.svelte
index bf1196254f..138c3b2c4f 100644
--- a/packages/builder/src/database/ActionsHeader.svelte
+++ b/packages/builder/src/database/ActionsHeader.svelte
@@ -1,7 +1,7 @@
 <script>
 import Button from "../common/Button.svelte";
 import ButtonGroup from "../common/ButtonGroup.svelte";
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import Modal from "../common/Modal.svelte";
 import ErrorsBox from "../common/ErrorsBox.svelte";
 
@@ -13,7 +13,7 @@ const openConfirmDelete = () => {
 
 const deleteCurrentNode = () => {
     confirmDelete = false;
-    database.deleteCurrentNode();
+    store.deleteCurrentNode();
 }
 
 </script>
@@ -21,29 +21,29 @@ const deleteCurrentNode = () => {
 <div class="root" style="left: {left}">
 
     <ButtonGroup>
-        <Button color="secondary" grouped on:click={database.saveCurrentNode}>
-            {#if $database.currentNodeIsNew}
+        <Button color="secondary" grouped on:click={store.saveCurrentNode}>
+            {#if $store.currentNodeIsNew}
             Create
             {:else}
             Update
             {/if}
         </Button>
 
-        {#if !$database.currentNodeIsNew}
+        {#if !$store.currentNodeIsNew}
         <Button color="secondary" grouped on:click={openConfirmDelete}>
             Delete
         </Button>
         {/if}
     </ButtonGroup>
 
-    {#if !!$database.errors && $database.errors.length > 0}
+    {#if !!$store.errors && $store.errors.length > 0}
     <div style="width: 500px">
-        <ErrorsBox errors={$database.errors}/>
+        <ErrorsBox errors={$store.errors}/>
     </div>
     {/if}
     
     <Modal bind:isOpen={confirmDelete}>
-        <div style="margin: 10px 0px 20px 0px">Are you sure you want to delete {$database.currentNode.name} ?</div>
+        <div style="margin: 10px 0px 20px 0px">Are you sure you want to delete {$store.currentNode.name} ?</div>
         <div style="float:right">
             <Button color="primary"  on:click={deleteCurrentNode}>Yes</Button>
             <Button color="secondary" on:click={() => confirmDelete = false}>No</Button>
diff --git a/packages/builder/src/database/DatabaseRoot.svelte b/packages/builder/src/database/DatabaseRoot.svelte
index bcfd7c2e76..2b22ab5f71 100644
--- a/packages/builder/src/database/DatabaseRoot.svelte
+++ b/packages/builder/src/database/DatabaseRoot.svelte
@@ -4,7 +4,7 @@ import HierarchyRow from "./HierarchyRow.svelte";
 import RecordView from "./RecordView.svelte";
 import IndexView from "./IndexView.svelte";
 import ActionsHeader from "./ActionsHeader.svelte";
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import getIcon from "../common/icon";
 import DropdownButton from "../common/DropdownButton.svelte";
 import {hierarchy as hierarchyFunctions} from "../../../core/src";
@@ -13,18 +13,18 @@ const hierarchyWidth = "200px";
 
 const defaultNewIndexActions =  [{
     label:"New Root Index", 
-    onclick: database.newRootIndex
+    onclick: store.newRootIndex
 }];
 
 const defaultNewRecordActions = [{
     label:"New Root Record", 
-    onclick: database.newRootRecord
+    onclick: store.newRootRecord
 }];
 
 let newIndexActions = defaultNewIndexActions;
 let newRecordActions = defaultNewRecordActions;
 
-database.subscribe(db => {
+store.subscribe(db => {
     if(!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {
         newRecordActions = defaultNewRecordActions;
         newIndexActions = defaultNewIndexActions;
@@ -32,13 +32,13 @@ database.subscribe(db => {
         newRecordActions = [
             ...defaultNewRecordActions,
             {label: `New Child Record of ${db.currentNode.name}`, 
-            onclick: database.newChildRecord}
+            onclick: store.newChildRecord}
         ];
 
         newIndexActions = [
             ...defaultNewIndexActions,
             {label: `New Index on ${db.currentNode.name}`, 
-            onclick: database.newChildIndex}
+            onclick: store.newChildIndex}
         ];
     }
 });
@@ -52,7 +52,7 @@ database.subscribe(db => {
             <div class="hierarchy-title">Records</div>
             <DropdownButton iconName="plus" actions={newRecordActions} />
         </div>
-        {#each $database.hierarchy.children as record}
+        {#each $store.hierarchy.children as record}
         <HierarchyRow node={record} />
         {/each}
 
@@ -60,20 +60,20 @@ database.subscribe(db => {
             <div class="hierarchy-title">Indexes</div>
             <DropdownButton iconName="plus" actions={newIndexActions} />
         </div>
-        {#each $database.hierarchy.indexes as index}
+        {#each $store.hierarchy.indexes as index}
         <HierarchyRow node={index} />
         {/each}
     </div>
     <div class="node-container">
         <div class="actions-header">
-            {#if $database.currentNode}
+            {#if $store.currentNode}
             <ActionsHeader left={hierarchyWidth}/>
             {/if}
         </div>
         <div class="node-view">
-            {#if !$database.currentNode}
+            {#if !$store.currentNode}
             <h1 style="margin-left: 100px">:)</h1>
-            {:else if $database.currentNode.type === "record"}
+            {:else if $store.currentNode.type === "record"}
             <RecordView />
             {:else}
             <IndexView />
diff --git a/packages/builder/src/database/FieldView.svelte b/packages/builder/src/database/FieldView.svelte
index 5e26dd0c3c..f6abcbfe45 100644
--- a/packages/builder/src/database/FieldView.svelte
+++ b/packages/builder/src/database/FieldView.svelte
@@ -17,7 +17,7 @@ import {allTypes, validate, getPotentialReferenceIndexes,
 export let field;
 export let allFields;
 export let onFinished = () => {};
-export let database;
+export let store;
 
 let errors = [];
 let clonedField = cloneDeep(field);
@@ -25,19 +25,19 @@ let clonedField = cloneDeep(field);
 $: isNew = !!field && field.name.length === 0;
 
 $: possibleReferenceIndexes = getPotentialReferenceIndexes(
-    database.hierarchy, database.currentNode
+    store.hierarchy, store.currentNode
 );
 
 $: selectedReverseRefIndex = 
     !clonedField.typeOptions.indexNodeKey 
     ? ""
-    : getNode(database.hierarchy, clonedField.typeOptions.indexNodeKey);
+    : getNode(store.hierarchy, clonedField.typeOptions.indexNodeKey);
 
 $: possibleReverseReferenceIndexes = 
     !selectedReverseRefIndex 
     ? []
     : getPotentialReverseReferenceIndexes(
-        database.hierarchy, selectedReverseRefIndex);
+        store.hierarchy, selectedReverseRefIndex);
 
 const typeChanged = (ev) => 
     clonedField.typeOptions = getDefaultTypeOptions(ev.detail);
diff --git a/packages/builder/src/database/HierarchyRow.svelte b/packages/builder/src/database/HierarchyRow.svelte
index 7d5ec35d08..7194260713 100644
--- a/packages/builder/src/database/HierarchyRow.svelte
+++ b/packages/builder/src/database/HierarchyRow.svelte
@@ -1,6 +1,6 @@
 <script>
 
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import {cloneDeep} from "lodash";
 export let level = 0;
 export let node;
@@ -8,7 +8,7 @@ export let node;
 </script>
 
 <div class="root">
-    <div class="title" on:click={() => database.selectExistingNode(node.nodeId)} style="padding-left: {20 + (level * 20)}px">
+    <div class="title" on:click={() => store.selectExistingNode(node.nodeId)} style="padding-left: {20 + (level * 20)}px">
         {node.name}
     </div>
     {#if node.children}
diff --git a/packages/builder/src/database/IndexView.svelte b/packages/builder/src/database/IndexView.svelte
index 8635c8c056..123e058e8c 100644
--- a/packages/builder/src/database/IndexView.svelte
+++ b/packages/builder/src/database/IndexView.svelte
@@ -4,7 +4,7 @@ import Textbox from "../common/Textbox.svelte";
 import CodeArea from "../common/CodeArea.svelte";
 import Button from "../common/Button.svelte";
 import Dropdown from "../common/Dropdown.svelte";
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import {filter, some, map} from "lodash/fp";
 import {hierarchy as hierarchyFunctions, common} from "../../../core/src";
 
@@ -13,9 +13,9 @@ const chain = common.$;
 let index;
 let indexableRecords = [];
 
-database.subscribe($database => {
-    index = $database.currentNode;
-    indexableRecords = chain($database.hierarchy,[
+store.subscribe($store => {
+    index = $store.currentNode;
+    indexableRecords = chain($store.hierarchy,[
         hierarchyFunctions.getFlattenedHierarchy,
         filter(hierarchyFunctions.isDecendant(index.parent())),
         filter(hierarchyFunctions.isRecord),
diff --git a/packages/builder/src/database/RecordView.svelte b/packages/builder/src/database/RecordView.svelte
index 33751fc147..73d1a03771 100644
--- a/packages/builder/src/database/RecordView.svelte
+++ b/packages/builder/src/database/RecordView.svelte
@@ -7,7 +7,7 @@ import FieldView from "./FieldView.svelte";
 import Modal from "../common/Modal.svelte";
 import {map, join, filter, some, 
     find, keys, isDate} from "lodash/fp";
-import { database } from "../builderStore";
+import { store } from "../builderStore";
 import {common, hierarchy as h} from "../../../core/src";
 import {templateApi, chain, validate} from "../common/core";
 
@@ -22,9 +22,9 @@ let deleteField;
 let onFinishedFieldEdit;
 let editIndex;
 
-database.subscribe($database => {
-    record = $database.currentNode;
-    const flattened = h.getFlattenedHierarchy($database.hierarchy);
+store.subscribe($store => {
+    record = $store.currentNode;
+    const flattened = h.getFlattenedHierarchy($store.hierarchy);
     getIndexAllowedRecords = index => 
         chain(index.allowedRecordNodeIds, [
             filter(id => some(n => n.nodeId === id)(flattened)),
@@ -35,13 +35,13 @@ database.subscribe($database => {
 
     newField = () => {
         isNewField = true;
-        fieldToEdit = templateApi($database.hierarchy).getNewField("string");
+        fieldToEdit = templateApi($store.hierarchy).getNewField("string");
         editingField = true;
     }
 
     onFinishedFieldEdit = (field) => {
         if(field) {
-            database.saveField(field);
+            store.saveField(field);
         }
         editingField = false;
     }
@@ -53,11 +53,11 @@ database.subscribe($database => {
     }
 
     deleteField = (field) => {
-        database.deleteField(field);
+        store.deleteField(field);
     }
 
     editIndex = index => {
-        database.selectExistingNode(index.nodeId);
+        store.selectExistingNode(index.nodeId);
     }
 
 })
@@ -131,7 +131,7 @@ let getTypeOptions = typeOptions =>
         <FieldView field={fieldToEdit} 
                    onFinished={onFinishedFieldEdit}
                    allFields={record.fields} 
-                   database={$database}/>
+                   store={$store}/>
     </Modal>
     {/if}
 
diff --git a/packages/builder/src/nav/Nav.svelte b/packages/builder/src/nav/Nav.svelte
index 667c29087a..7af01132f6 100644
--- a/packages/builder/src/nav/Nav.svelte
+++ b/packages/builder/src/nav/Nav.svelte
@@ -13,7 +13,6 @@ export let width=50;
     <NavItem name="actions" label="Actions" icon="zap" />
     <NavItem name="access levels" label="Access Levels" icon="user" />
     <NavItem name="user interface" label="User Interface" icon="monitor"/>
-    <NavItem name="package" label="Package" icon="package"/>
 </nav>
 
 
diff --git a/packages/builder/src/nav/NavItem.svelte b/packages/builder/src/nav/NavItem.svelte
index 5feebab580..e045d47733 100644
--- a/packages/builder/src/nav/NavItem.svelte
+++ b/packages/builder/src/nav/NavItem.svelte
@@ -1,6 +1,6 @@
 <script>
 
-import {database} from "../builderStore";
+import {store} from "../builderStore";
 import getIcon from "../common/icon";
 
 export let name = "";
@@ -9,12 +9,12 @@ export let icon = "";
 
 let navActive = "";
 
-database.subscribe(db => {
+store.subscribe(db => {
     navActive = (db.activeNav === name ? "active" : "")
 });
 
 const setActive = () => 
-    database.setActiveNav(name);
+    store.setActiveNav(name);
 
 </script>
 
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index f1a001c5eb..51b5fa6de9 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -1,13 +1,14 @@
 <script>
 
 import ComingSoon from "../common/ComingSoon.svelte";
+import { store } from "../builderStore";
 
 </script>
 
 <div class="root">
     
     <div class="ui-nav">
-    
+
     </div>
 
     <div class="component-preview">
@@ -20,12 +21,14 @@ import ComingSoon from "../common/ComingSoon.svelte";
 
 .root {
     display: grid;
-    grid-template-columns: [uiNav] 200px [preview] auto;
+    grid-template-columns: [uiNav] 300px [preview] auto;
     height: 100%;
+    width: 100%;
 }
 
 .ui-nav {
     grid-column-start: uiNav;
+    background-color: red;
 }
 
 .component-preview {
diff --git a/packages/builder/src/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/userInterface/pagesParsing/searchComponents.js
index 3f7b7e8fe6..e063f967ce 100644
--- a/packages/builder/src/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/userInterface/pagesParsing/searchComponents.js
@@ -15,7 +15,7 @@ const pipe = common.$;
 
 const normalString = s => (s||"").trim().toLowerCase();
 
-const isRootComponent = c => isUndefined(c.inherits);
+export const isRootComponent = c => isUndefined(c.inherits);
 
 export const searchAllComponents = (derivedComponents, rootComponents, phrase) => {