lots of bugfixes and component changes

packages/builder/src/accessLevels/AccessLevelView.svelte

@@ -42,8 +42,8 @@ const save = () => {
 
     const newLevels = 
         isNew 
-        ? [...allLevels, clonedLevel]
-        : [...filter(l => l.name !== level.name)(allLevels), clonedLevel];
+        ? [...allLevels.levels, clonedLevel]
+        : [...filter(l => l.name !== level.name)(allLevels.levels), clonedLevel];
 
     errors = validateAccessLevels(
         hierarchy,
@@ -62,7 +62,7 @@ const permissionChanged = perm => ev => {
     if(hasPermission) {
         clonedLevel.permissions.push(perm);
     } else {
-        clonedLevel.permissions = filter(p => !matchPermissions(p, perm));
+        clonedLevel.permissions = filter(p => !matchPermissions(p, perm))(clonedLevel.permissions);
     }
 }
 

packages/builder/src/builderStore/store.js

@@ -14,7 +14,8 @@ import {writable} from "svelte/store";
 import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject"
 import { buildPropsHierarchy } from "../userInterface/pagesParsing/buildPropsHierarchy"
 import api from "./api";
-import { isRootComponent } from "../userInterface/pagesParsing/searchComponents";
+import { isRootComponent, getExactComponent } from "../userInterface/pagesParsing/searchComponents";
+import { rename } from "../userInterface/pagesParsing/renameComponent";
 import { 
     getComponentInfo, getNewComponentInfo 
 } from "../userInterface/pagesParsing/createProps";
@@ -114,7 +115,7 @@ const initialise = (store, initial) => async () => {
     initial.pages = pkg.pages;
     initial.hasAppPackage = true;
     initial.hierarchy = pkg.appDefinition.hierarchy;
-    initial.accessLevels = pkg.accessLevels;
+    initial.accessLevels = pkg.accessLevels.levels;
     initial.derivedComponents = pkg.derivedComponents;
     initial.allComponents = combineComponents(
         pkg.derivedComponents, pkg.rootComponents);
@@ -448,6 +449,7 @@ const createDerivedComponent = store => (componentName) => {
 
         s.currentFrontEndItem = newComponentInfo.component;
         s.currentComponentInfo = newComponentInfo;
+        s.currentFrontEndType = "component";
         s.currentComponentIsNew = true;
         return s;
     });
@@ -479,21 +481,33 @@ const deleteDerivedComponent = store => name => {
 const renameDerivedComponent = store => (oldname, newname) => {
     store.update(s => {
 
-        const component = pipe(s.allComponents, [
-            find(c => c.name === name)
-        ]);
+        const {
+            allComponents, pages, error, changedComponents
+        } = rename(s.pages, s.allComponents, oldname, newname);
 
-        component.name = newname;
-
-        const allComponents = pipe(s.allComponents, [
-            filter(c => c.name !== name),
-            concat([component])
-        ]);
+        if(error) {
+            // should really do something with this
+            return s;
+        }
 
         s.allComponents = allComponents;
+        s.pages = pages;
+        if(s.currentFrontEndItem.name === oldname)
+            s.currentFrontEndItem.name = newname;
+
+        const saveAllChanged = async () => {
+            for(let cname of changedComponents) {
+                const changedComponent = getExactComponent(allComponents, cname);
+                await api.post(`/_builder/api/${s.appname}/derivedcomponent`, changedComponent);
+            }
+        }
 
         api.patch(`/_builder/api/${s.appname}/derivedcomponent`, {
             oldname, newname
+        })
+        .then(() => saveAllChanged())
+        .then(() => {
+            savePackage(store, s);
         });        
 
         return s;
@@ -502,8 +516,8 @@ const renameDerivedComponent = store => (oldname, newname) => {
 
 const savePage = store => async page => {
     store.update(s => {
-        if(s.currentFrontEndType === "page" || !s.currentPageName) {
-            return;
+        if(s.currentFrontEndType !== "page" || !s.currentPageName) {
+            return s;
         }
 
         s.pages[s.currentPageName] = page;
@@ -621,8 +635,9 @@ const savePackage = (store, s) => {
     api.post(`/_builder/api/${s.appname}/appPackage`, data);
 }
 
-const setCurrentComponent = store => component => {
+const setCurrentComponent = store => componentName => {
     store.update(s => {
+        const component = getExactComponent(s.allComponents, componentName);
         s.currentFrontEndItem = component;
         s.currentFrontEndType = "component";
         s.currentComponentIsNew = false;

packages/builder/src/userInterface/ComponentPropSelector.svelte

@@ -76,13 +76,13 @@ const confirmClearComponent = () => {
     <div>
         {#if !disabled && componentSelected}
         <IconButton icon="edit" 
-                    on:click={onEdit}/>
+                    on:click={() => onEdit()}/>
 
         <IconButton icon="trash" 
-                    on:click={clearComponent} />
+                    on:click={() => clearComponent()} />
         {:else if !disabled && !componentSelected}
         <IconButton icon="plus" 
-                    on:click={chooseComponent} />
+                    on:click={() => chooseComponent()} />
         {/if}
         
     </div>

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -136,7 +136,7 @@ $: {
 
     {#each componentsThisLevel as component}
     <div class="hierarchy-item component" class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
-         on:click|stopPropagation={() => store.setCurrentComponent(component.component)}>
+         on:click|stopPropagation={() => store.setCurrentComponent(component.component.name)}>
         <span>{@html getIcon("circle", "7")}</span>
         <span class="title">{component.title}</span>
     </div>

packages/builder/src/userInterface/CurrentItemPreview.svelte

@@ -40,7 +40,7 @@ store.subscribe(s => {
 
 </script>
 
-<div class="component-preview" >
+
 <div class="component-container">
     <iframe style="height: 100%; width: 100%"
             title="componentPreview"
@@ -56,26 +56,39 @@ store.subscribe(s => {
             module.loadBudibase();
         })        
     </script>
+    <style>
+
+        body {
+            box-sizing: border-box;
+            padding: 20px;
+        }
+    </style>
 </head>
 <body>
 </body>
 </html>`}>
     </iframe>
 </div>
-</div>
+
 
 <style>
-.component-preview {
-    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 {
     grid-row-start: middle;
     grid-column-start: middle;
+    position: relative;
+    overflow: hidden;
+    padding-top: 56.25%;
+    margin: auto;
+}
+
+.component-container iframe {
+    border: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
 }
 
 </style>

packages/builder/src/userInterface/EditComponent.svelte

@@ -39,14 +39,17 @@ let editingComponentInstancePropName="";
 let editingComponentArrayIndex;
 let editingComponentArrayPropName;
 let editingComponentInstanceTitle;
-
+let originalName="";
 let allComponents;
+let ignoreStore = false;
 
 $: shortName = last(name.split("/"));
 
 store.subscribe(s => {
+    if(ignoreStore) return;
     component = s.currentFrontEndItem;
     if(!component) return;
+    originalName = component.name;
     name = component.name;
     description = component.description;
     tagsString = join(", ")(component.tags);
@@ -57,9 +60,13 @@ store.subscribe(s => {
 
 const save = () => {
 
-    if(!validate()) return;
+    ignoreStore = true;
+    if(!validate()) {
+        ignoreStore = false;
+        return;
+    }
 
-    component.name = name;
+    component.name = originalName;
     component.description = description;
     component.tags = pipe(tagsString, [
         split(","),
@@ -67,6 +74,12 @@ const save = () => {
     ]);
 
     store.saveDerivedComponent(component);
+
+    ignoreStore = false;
+    // now do the rename
+    if(name !== originalName) {
+        store.renameDerivedComponent(originalName, name);
+    }
 }
 
 const deleteComponent = () => {
@@ -165,10 +178,12 @@ const componentInstancePropsChanged = (instanceProps) => {
     </div>
 
     {#if editingComponentInstance}
+    <div class="component-props-container">
         <ComponentInstanceEditor onGoBack={componentInstanceCancelEdit}
                                 title={editingComponentInstanceTitle}
                                 instanceProps={editingComponentInstance}
                                 onPropsChanged={componentInstancePropsChanged}/>
+    </div>
     {:else}
     <div class="component-props-container">
 
@@ -182,14 +197,16 @@ const componentInstancePropsChanged = (instanceProps) => {
             <div class="info-text">
                 <Textbox label="Name" 
                         infoText="use forward slash to store in subfolders"
-                        bind:text={name}
-                        disabled={!$store.currentComponentIsNew}
+                        text={name}
+                        on:change={ev => name = ev.target.value}
                         hasError={!!nameInvalid}/>
                 <Textbox label="Description"
-                            bind:text={description}/>
+                         on:change={ev => description = ev.target.value}
+                         text={description}/>
                 <Textbox label="Tags" 
                          infoText="comma separated"
-                            bind:text={tagsString}/>
+                         on:change={ev => tagsString = ev.target.value}
+                         text={tagsString}/>
             </div>    
         </div>
         {/if}
@@ -215,7 +232,7 @@ const componentInstancePropsChanged = (instanceProps) => {
     <div class="uk-modal-dialog">
 
         <div class="uk-modal-header">
-            Delete {component.name} ? 
+            Delete {name} ? 
         </div>
 
         <div class="uk-modal-body">

packages/builder/src/userInterface/pagesParsing/buildPropsHierarchy.js

@@ -12,6 +12,7 @@ export const buildPropsHierarchy = (allComponents, baseComponent) => {
             if(propName === "_component") continue;
 
             const propDef = propsDefinition[propName];
+            if(!propDef) continue;
             if(propDef.type === "component") {
 
                 const subComponentProps = props[propName];

packages/builder/src/userInterface/pagesParsing/renameComponent.js

@@ -0,0 +1,75 @@
+import { 
+    isPlainObject, isArray, cloneDeep
+} from "lodash/fp";
+import {
+    isRootComponent, getExactComponent
+} from "./searchComponents";
+
+export const rename = (pages, allComponents, oldname, newname) => {
+
+    pages = cloneDeep(pages);
+    allComponents = cloneDeep(allComponents);
+    const changedComponents = [];
+
+    const existingWithNewName = getExactComponent(allComponents, newname);
+    if(existingWithNewName) return {
+        allComponents, pages, error: "Component by that name already exists"
+    };
+
+    const traverseProps = (props) => {
+        let hasEdited = false;
+        if(props._component && props._component === oldname) {
+            props._component = newname;
+            hasEdited = true;
+        } 
+
+        for(let propName in props) {
+            const prop = props[propName];
+            if(isPlainObject(prop) && prop._component) {
+                hasEdited = traverseProps(prop) || hasEdited;
+            }
+            if(isArray(prop)) {
+                for(let element of prop) {
+                    hasEdited = traverseProps(element) || hasEdited;
+                }
+            }
+        }
+        return hasEdited;
+    }
+
+
+    for(let component of allComponents) {
+        
+        if(isRootComponent(component)) {
+            continue;
+        }
+
+        let hasEdited = false;
+
+        if(component.name === oldname) {
+            component.name = newname;
+            hasEdited = true;
+        }
+
+        if(component.inherits === oldname) {
+            component.inherits = newname;
+            hasEdited = true;
+        }
+        
+        hasEdited = traverseProps(component.props) || hasEdited;
+
+        if(hasEdited && component.name !== newname)
+            changedComponents.push(component.name);
+    }
+
+    for(let pageName in pages) {
+        const page = pages[pageName];
+        if(page.appBody === oldname) {
+            page.appBody = newname;
+        }
+    }
+
+    return {allComponents, pages, changedComponents};
+
+
+}

packages/builder/tests/renameComponent.spec.js

@@ -0,0 +1,79 @@
+import {
+    searchAllComponents, 
+    getExactComponent,
+    getAncestorProps
+} from "../src/userInterface/pagesParsing/searchComponents";
+import {
+    rename
+} from "../src/userInterface/pagesParsing/renameComponent";
+import { allComponents } from "./testData";
+
+describe("rename component", () => {
+    it("should change the name of the component, duh", () => {
+
+        const components = allComponents();
+        
+        const result = rename({}, components, "PrimaryButton", "MainButton");
+
+        const newComponent = getExactComponent(result.allComponents, "MainButton");
+        const oldComponent = getExactComponent(result.allComponents, "Primary");
+        expect(oldComponent).toBeUndefined();
+        expect(newComponent).toBeDefined();
+        expect(newComponent.name).toBe("MainButton");
+
+    });
+
+    it("should chnge name on inherits", () => {
+
+        const components = allComponents();
+        
+        const result = rename({}, components, "common/SmallTextbox", "common/TinyTextbox");
+
+        const passwordTextbox = getExactComponent(result.allComponents, "common/PasswordBox");
+        expect(passwordTextbox.inherits).toBe("common/TinyTextbox");
+
+    });
+
+    it("should change name of nested _components", () => {
+        const components = allComponents();
+        const result = rename({}, components, "PrimaryButton", "MainButton");
+
+        const buttonGroup = getExactComponent(result.allComponents, "ButtonGroup");
+        expect(buttonGroup.props.header._component).toBe("MainButton");
+
+    });
+
+    it("should change name of nested _components inside arrays", () => {
+        const components = allComponents();
+        const result = rename({}, components, "PrimaryButton", "MainButton");
+
+        const buttonGroup = getExactComponent(result.allComponents, "ButtonGroup");
+        expect(buttonGroup.props.children[0].control._component).toBe("MainButton");
+
+    });
+
+
+    it("should change name of page appBody", () => {
+        const components = allComponents();
+        const pages = {
+            main: {
+                appBody: "PrimaryButton"
+            }
+        };
+
+        const result = rename(pages, components, "PrimaryButton", "MainButton");
+        expect(result.pages.main.appBody).toBe("MainButton");
+        
+    });
+
+    it("should return a list of changed components", () => {
+        const components = allComponents();
+        const result = rename({}, components, "PrimaryButton", "MainButton");
+
+        expect(result.changedComponents).toEqual(["ButtonGroup"]);
+
+        const result2 = rename({}, components, "common/SmallTextbox", "common/TinyTextBox");
+        expect(result2.changedComponents).toEqual(["common/PasswordBox"]);
+
+    });
+})

packages/client/src/api/authenticate.js

@@ -13,8 +13,8 @@ export const authenticate = (api) => async ({username, password}) => {
         return;
     } 
 
-    const user = await post({
-        url:`${rootPath}/api/authenticate`,
+    const user = await api.post({
+        url:"/api/authenticate",
         body : {username, password}
     });
 

packages/client/src/api/index.js

@@ -6,7 +6,7 @@ import {authenticate} from "./authenticate";
 export const createApi = ({rootPath, setState, getState}) => {
 
     const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-        fetch(url, {
+        fetch(`${rootPath}${url}`, {
             method: method,
             headers: {
                 'Content-Type': 'application/json',

packages/client/src/api/listRecords.js

@@ -1,5 +1,7 @@
+import {trimSlash} from "../common/trimSlash";
+
 export const listRecords = api => async ({indexKey, statePath}) => {
-    if(!recordKey) {
+    if(!indexKey) {
         api.error("Load Record: record key not set");
         return;
     }  
@@ -9,8 +11,8 @@ export const listRecords = api => async ({indexKey, statePath}) => {
         return;
     } 
 
-    const records = get({
-        url:`${rootPath}/api/listRecords/${indexKey}`
+    const records = api.get({
+        url:`/api/listRecords/${trimSlash(indexKey)}`
     });
 
     if(api.isSuccess(records))

packages/client/src/api/loadRecord.js

@@ -1,4 +1,4 @@
-
+import {trimSlash} from "../common/trimSlash";
 
  export const loadRecord = (api) => async ({recordKey, statePath}) => {
 
@@ -12,8 +12,8 @@
         return;
     } 
 
-    const record = await get({
-        url:`${rootPath}/api/record/${key}`
+    const record = await api.get({
+        url:`/api/record/${trimSlash(key)}`
     });
 
     if(api.isSuccess(record))

packages/client/src/api/saveRecord.js

@@ -1,4 +1,4 @@
-
+import {trimSlash} from "../common/trimSlash";
 
  export const saveRecord = (api) => async ({statePath}) => {
     
@@ -19,8 +19,8 @@
         return;
     }
 
-    const savedRecord = await post({
-        url:`${rootPath}/api/record/${recordtoSave.key}`,
+    const savedRecord = await api.post({
+        url:`/api/record/${trimSlash(recordtoSave.key)}`,
         body: recordtoSave
     });
 

packages/client/src/createApp.js

@@ -20,7 +20,7 @@ export const createApp = (componentLibraries, appDefinition, user) => {
 
         if(!componentName || !libName) return;
 
-        const {initialProps, bind} = setupBinding(store, props, coreApi, context);
+        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
 
         const component = new (componentLibraries[libName][componentName])({
             target: htmlElement,

packages/client/src/state/coreHandlers.js

@@ -1,6 +1,6 @@
 import { ERROR } from "./standardState";
 
-export const getNewChildRecordToState = (store, coreApi) =>
+export const getNewChildRecordToState = (store, coreApi, setState) =>
             ({recordKey, collectionName,childRecordType,statePath}) => {
     const error = errorHandler(setState);
     try {
@@ -33,7 +33,7 @@ export const getNewChildRecordToState = (store, coreApi) =>
 }
 
 
-export const getNewRecordToState = (store, coreApi) =>
+export const getNewRecordToState = (store, coreApi, setState) =>
             ({collectionKey,childRecordType,statePath}) => {
     const error = errorHandler(setState);
     try {

packages/client/src/state/eventHandlers.js

@@ -11,15 +11,17 @@ import {
 
 export const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-export const eventHandlers = (store,coreApi) => {
+export const eventHandlers = (store,coreApi,rootPath) => {
     
     const handler = (parameters, execute) => ({
         execute, parameters
     });
 
+    const setStateWithStore = (path, value) => setState(store, path, value);
+
     const api = createApi({
-        rootPath:"",
-        setState: (path, value) => setState(store, path, value),
+        rootPath:rootPath,
+        setState: (path, value) => setStateWithStore,
         getState: (path, fallback) => getState(store, path, fallback)
     });
 
@@ -33,11 +35,11 @@ export const eventHandlers = (store,coreApi) => {
         
         "Get New Child Record": handler(
             ["recordKey", "collectionName", "childRecordType", "statePath"], 
-            getNewChildRecordToState(store, coreApi)),
+            getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
         "Get New Record": handler(
             ["collectionKey", "childRecordType", "statePath"], 
-            getNewRecordToState(store, coreApi)),
+            getNewRecordToState(store, coreApi, setStateWithStore)),
 
         "Authenticate": handler(["username", "password"], api.authenticate)
     };

packages/client/src/state/stateBinding.js

@@ -13,7 +13,9 @@ import {
 } from "./isState";
 
 const doNothing = () => {};
-export const setupBinding = (store, rootProps, coreApi, context) => {
+doNothing.isPlaceholder=true;
+
+export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
 
     const rootInitialProps = {...rootProps};
 
@@ -89,7 +91,7 @@ export const setupBinding = (store, rootProps, coreApi, context) => {
             && rootBindings.componentEventHandlers.length === 0
             && rootBindings.boundArrays.length === 0) return;
 
-        const handlerTypes = eventHandlers(store, coreApi);
+        const handlerTypes = eventHandlers(store, coreApi, rootPath);
 
         const unsubscribe = store.subscribe(rootState => {
            

packages/core/src/indexApi/delete.js

@@ -1,5 +1,6 @@
 import {
   tryAwaitOrIgnore,
+  safeKey
 } from '../common';
 import {
   isIndex, isShardedIndex,
@@ -11,6 +12,7 @@ import {
 } from '../indexing/sharding';
 
 export const _deleteIndex = async (app, indexKey, includeFolder) => {
+  indexKey = safeKey(indexKey);
   const indexNode = getExactNodeForPath(app.hierarchy)(indexKey);
 
   if (!isIndex(indexNode)) { throw new Error('Supplied key is not an index'); }

packages/core/src/indexApi/listItems.js

@@ -14,13 +14,16 @@ import {
 } from '../templateApi/hierarchy';
 import { permission } from '../authApi/permissions';
 
-export const listItems = app => async (indexKey, options) => apiWrapper(
+export const listItems = app => async (indexKey, options) => {
+  indexKey = safeKey(indexKey);
+  return apiWrapper(
     app,
     events.indexApi.listItems,
     permission.readIndex.isAuthorized(indexKey),
     { indexKey, options },
     _listItems, app, indexKey, options,
   );
+}
 
 const defaultOptions = { rangeStartParams: null, rangeEndParams: null, searchPhrase: null };
 

packages/core/src/recordApi/delete.js

@@ -5,22 +5,23 @@ import {
 import { _load, getRecordFileName } from './load';
 import { _deleteCollection } from '../collectionApi/delete';
 import {
-  getExactNodeForPath,
-  getFlattenedHierarchy, getNode,
-  fieldReversesReferenceToNode,
+  getExactNodeForPath
 } from '../templateApi/hierarchy';
 import { _deleteIndex } from '../indexApi/delete';
 import { transactionForDeleteRecord } from '../transactions/create';
 import { removeFromAllIds } from '../indexing/allIds';
 import { permission } from '../authApi/permissions';
 
-export const deleteRecord = (app, disableCleanup = false) => async key => apiWrapper(
+export const deleteRecord = (app, disableCleanup = false) => async key => {
+  key = safeKey(key);
+  return apiWrapper(
     app,
     events.recordApi.delete,
     permission.deleteRecord.isAuthorized(key),
     { key },
     _deleteRecord, app, key, disableCleanup,
   );
+}
 
 // called deleteRecord because delete is a keyword
 export const _deleteRecord = async (app, key, disableCleanup) => {

packages/core/src/recordApi/getContext.js

@@ -5,20 +5,24 @@ import {
 } from '../templateApi/hierarchy';
 import { listItems } from '../indexApi/listItems';
 import {
-  $, apiWrapperSync, events,
+  $, apiWrapperSync, events, safeKey
 } from '../common';
 import { getIndexKey_BasedOnDecendant } from '../indexing/sharding';
 import { permission } from '../authApi/permissions';
 
-export const getContext = app => recordKey => apiWrapperSync(
+export const getContext = app => recordKey => {
+  recordKey = safeKey(recordKey);
+  return  apiWrapperSync(
     app,
     events.recordApi.getContext,
     permission.readRecord.isAuthorized(recordKey),
     { recordKey },
     _getContext, app, recordKey,
   );
+}
 
 export const _getContext = (app, recordKey) => {
+  recordKey = safeKey(recordKey);
   const recordNode = getExactNodeForPath(app.hierarchy)(recordKey);
 
   const cachedReferenceIndexes = {};

packages/core/src/recordApi/getNew.js

@@ -11,6 +11,7 @@ import { permission } from '../authApi/permissions';
 
 export const getNew = app => (collectionKey, recordTypeName) => {
   const recordNode = getRecordNode(app, collectionKey, recordTypeName);
+  collectionKey=safeKey(collectionKey);
   return apiWrapperSync(
     app,
     events.recordApi.getNew,

packages/core/src/recordApi/load.js

@@ -13,13 +13,16 @@ import { permission } from '../authApi/permissions';
 
 export const getRecordFileName = key => joinKey(key, 'record.json');
 
-export const load = app => async key => apiWrapper(
+export const load = app => async key => {
+  key = safeKey(key);
+  return apiWrapper(
     app,
     events.recordApi.load,
     permission.readRecord.isAuthorized(key),
     { key },
     _load, app, key,
   );
+}
 
 export const _load = async (app, key, keyStack = []) => {
   key = safeKey(key);

packages/server/appPackages/_master/access_levels.json

@@ -1,5 +1,4 @@
-{
-  "levels": [
+[
   {
     "name": "owner",
     "permissions": [
@@ -170,6 +169,4 @@
       }
     ]
   }
-  ],
-  "version": 0
-}
+]

packages/server/appPackages/_master/appDefinition.json

@@ -526,24 +526,211 @@
   },
   "props": {
     "main": {
-      "_component": "@budibase/standard-components/nav",
-      "navBarBackground": "silver",
-      "navBarBorder": "",
-      "navBarColor": "black",
-      "selectedItemBackground": "white",
-      "selectedItemColor": "black",
-      "selectedItemBorder": "",
-      "itemHoverBackground": "gainsboro",
-      "itemHoverColor": "black",
-      "items": [
+      "_component": "@budibase/standard-components/stackpanel",
+      "direction": "horizontal",
+      "children": [
         {
-          "_component": "items#array_element#",
-          "title": "Applications",
+          "_component": "children#array_element#",
+          "control": {
+            "_component": "@budibase/standard-components/panel",
+            "text": "Create New",
             "component": {
               "_component": ""
+            },
+            "containerClass": "",
+            "background": "",
+            "border": "1px solid black",
+            "borderRadius": "2px",
+            "font": "",
+            "color": "",
+            "padding": "10px",
+            "margin": "20px",
+            "hoverColor": "",
+            "hoverBackground": "gainsboro",
+            "height": "100px",
+            "width": "100px",
+            "onClick": [
+              {
+                "##eventHandlerType": "Get New Record",
+                "parameters": {
+                  "collectionKey": "/applications",
+                  "childRecordType": "application",
+                  "statePath": "currentApplication"
                 }
               }
-      ]
+            ],
+            "display": "inline"
+          }
+        }
+      ],
+      "width": "auto",
+      "height": "auto",
+      "containerClass": "",
+      "itemContainerClass": "",
+      "data": {
+        "##bbstate": "allApplications",
+        "##bbsource": "store"
+      },
+      "dataItemComponent": {
+        "_component": "@budibase/standard-components/panel",
+        "text": "",
+        "component": {
+          "_component": "@budibase/standard-components/stackpanel",
+          "direction": "horizontal",
+          "children": [
+            {
+              "_component": "children#array_element#",
+              "control": {
+                "_component": "@budibase/standard-components/text",
+                "value": "",
+                "containerClass": "",
+                "font": "",
+                "color": "",
+                "textAlign": "inline",
+                "verticalAlign": "inline",
+                "display": "inline"
+              }
+            }
+          ],
+          "width": "auto",
+          "height": "auto",
+          "containerClass": "",
+          "itemContainerClass": "",
+          "data": {
+            "##bbstate": ""
+          },
+          "dataItemComponent": {
+            "_component": ""
+          },
+          "onLoad": []
+        },
+        "containerClass": "",
+        "background": "",
+        "border": "1px solid dimgray",
+        "borderRadius": "2px",
+        "font": "",
+        "color": "black",
+        "padding": "10px",
+        "margin": "20px",
+        "hoverColor": "",
+        "hoverBackground": "",
+        "height": "",
+        "width": "",
+        "onClick": [
+          {
+            "##eventHandlerType": "Load Record",
+            "parameters": {
+              "recordKey": {
+                "##bbstate": "key",
+                "##bbsource": "context"
+              },
+              "statePath": "currentApp"
+            }
+          }
+        ],
+        "display": "inline"
+      },
+      "onLoad": [
+        {
+          "##eventHandlerType": "List Records",
+          "parameters": {
+            "indexKey": "/all_applications",
+            "statePath": "allApplications"
+          }
+        }
+      ],
+      "component": {
+        "_component": "@budibase/standard-components/stackpanel",
+        "direction": "horizontal",
+        "children": [
+          {
+            "_component": "#children#array_element",
+            "control": {
+              "_component": "@budibase/standard-components/text",
+              "value": "",
+              "containerClass": "",
+              "font": "",
+              "color": "",
+              "textAlign": "inline",
+              "verticalAlign": "inline",
+              "display": "inline"
+            }
+          }
+        ],
+        "width": "auto",
+        "height": "auto",
+        "containerClass": "",
+        "itemContainerClass": "",
+        "data": {
+          "##bbstate": "allApplications",
+          "##bbsource": "store"
+        },
+        "dataItemComponent": {
+          "_component": "apps/Application List Item",
+          "text": {
+            "##bbstate": "name",
+            "##bbstatefallback": "My App Name",
+            "##bbsource": "context"
+          },
+          "component": {
+            "_component": "@budibase/standard-components/stackpanel",
+            "direction": "horizontal",
+            "children": [
+              {
+                "_component": "#children#array_element",
+                "control": {
+                  "_component": "@budibase/standard-components/text",
+                  "value": "",
+                  "containerClass": "",
+                  "font": "",
+                  "color": "",
+                  "textAlign": "inline",
+                  "verticalAlign": "inline",
+                  "display": "inline"
+                }
+              }
+            ],
+            "width": "auto",
+            "height": "auto",
+            "containerClass": "",
+            "itemContainerClass": "",
+            "data": {
+              "##bbstate": "allApplications",
+              "##bbsource": "store"
+            },
+            "dataItemComponent": {
+              "_component": ""
+            },
+            "onLoad": []
+          },
+          "containerClass": "",
+          "background": "",
+          "border": "1px solid dimgray",
+          "borderRadius": "2px",
+          "font": "",
+          "color": "black",
+          "padding": "10px",
+          "margin": "20px",
+          "hoverColor": "",
+          "hoverBackground": "",
+          "height": "",
+          "width": "",
+          "onClick": [
+            {
+              "##eventHandlerType": "Load Record",
+              "parameters": {
+                "recordKey": {
+                  "##bbstate": "key",
+                  "##bbsource": "context"
+                },
+                "statePath": "currentApplication"
+              }
+            }
+          ],
+          "display": ""
+        },
+        "onLoad": []
+      }
     },
     "unauthenticated": {
       "_component": "@budibase/standard-components/login",
@@ -552,7 +739,8 @@
       "usernameLabel": "Username",
       "passwordLabel": "Password",
       "loginButtonLabel": "Login",
-      "buttonClass": ""
+      "buttonClass": "",
+      "inputClass": ""
     }
   }
 }

packages/server/appPackages/_master/components/Main App Root.json

@@ -1,21 +0,0 @@
-{
-  "name": "Main App Root",
-  "description": "",
-  "inherits": "@budibase/standard-components/nav",
-  "props": {
-    "items": [
-      {
-        "_component": "#items#array_element",
-        "title": "Applications",
-        "component": {
-          "_component": ""
-        }
-      }
-    ]
-  },
-  "tags": [
-    "nav",
-    "navigation",
-    "sidebar"
-  ]
-}

packages/server/appPackages/_master/components/apps/Application List Item.json

@@ -0,0 +1,65 @@
+{
+  "name": "apps/Application List Item",
+  "description": "",
+  "inherits": "@budibase/standard-components/panel",
+  "props": {
+    "border": "1px solid dimgray",
+    "borderRadius": "2px",
+    "color": "black",
+    "padding": "10px",
+    "margin": "20px",
+    "onClick": [
+      {
+        "##eventHandlerType": "Load Record",
+        "parameters": {
+          "recordKey": {
+            "##bbstate": "key",
+            "##bbsource": "context"
+          },
+          "statePath": "currentApplication"
+        }
+      }
+    ],
+    "component": {
+      "_component": "@budibase/standard-components/stackpanel",
+      "direction": "horizontal",
+      "children": [
+        {
+          "_component": "#children#array_element",
+          "control": {
+            "_component": "@budibase/standard-components/text",
+            "value": "",
+            "containerClass": "",
+            "font": "",
+            "color": "",
+            "textAlign": "inline",
+            "verticalAlign": "inline",
+            "display": "inline"
+          }
+        }
+      ],
+      "width": "auto",
+      "height": "auto",
+      "containerClass": "",
+      "itemContainerClass": "",
+      "data": {
+        "##bbstate": "allApplications",
+        "##bbsource": "store"
+      },
+      "dataItemComponent": {
+        "_component": ""
+      },
+      "onLoad": []
+    },
+    "display": "",
+    "text": {
+      "##bbstate": "name",
+      "##bbstatefallback": "My App Name",
+      "##bbsource": "context"
+    }
+  },
+  "tags": [
+    "div",
+    "container"
+  ]
+}

packages/server/appPackages/_master/components/apps/Apps List.json

@@ -0,0 +1,210 @@
+{
+  "name": "Main App Screen",
+  "description": "",
+  "inherits": "@budibase/standard-components/stackpanel",
+  "props": {
+    "children": [
+      {
+        "_component": "#children#array_element",
+        "control": {
+          "_component": "apps/Create App List Item",
+          "text": "Create New",
+          "component": {
+            "_component": ""
+          },
+          "containerClass": "",
+          "background": "",
+          "border": "1px solid black",
+          "borderRadius": "2px",
+          "font": "",
+          "color": "",
+          "padding": "10px",
+          "margin": "20px",
+          "hoverColor": "",
+          "hoverBackground": "gainsboro",
+          "height": "100px",
+          "width": "100px",
+          "onClick": [
+            {
+              "##eventHandlerType": "Get New Record",
+              "parameters": {
+                "collectionKey": "/applications",
+                "childRecordType": "application",
+                "statePath": "currentApplication"
+              }
+            }
+          ]
+        }
+      }
+    ],
+    "onLoad": [
+      {
+        "##eventHandlerType": "List Records",
+        "parameters": {
+          "indexKey": "/all_applications",
+          "statePath": "allApplications"
+        }
+      }
+    ],
+    "data": {
+      "##bbstate": "allApplications",
+      "##bbsource": "store"
+    },
+    "dataItemComponent": {
+      "_component": "apps/Application List Item",
+      "text": "",
+      "component": {
+        "_component": "@budibase/standard-components/stackpanel",
+        "children": [
+          {
+            "_component": "#children#array_element",
+            "control": {
+              "_component": "@budibase/standard-components/text",
+              "value": "",
+              "containerClass": "",
+              "font": "",
+              "color": "",
+              "textAlign": "inline",
+              "verticalAlign": "inline",
+              "display": "inline"
+            }
+          }
+        ],
+        "width": "auto",
+        "height": "auto",
+        "containerClass": "",
+        "itemContainerClass": "",
+        "data": {
+          "##bbstate": ""
+        },
+        "dataItemComponent": {
+          "_component": ""
+        },
+        "onLoad": []
+      },
+      "containerClass": "",
+      "background": "",
+      "border": "1px solid dimgray",
+      "borderRadius": "2px",
+      "font": "",
+      "color": "black",
+      "padding": "10px",
+      "margin": "20px",
+      "hoverColor": "",
+      "hoverBackground": "",
+      "height": "",
+      "width": "",
+      "onClick": [
+        {
+          "##eventHandlerType": "Load Record",
+          "parameters": {
+            "recordKey": {
+              "##bbstate": "key",
+              "##bbsource": "context"
+            },
+            "statePath": "currentApp"
+          }
+        }
+      ],
+      "display": "inline"
+    },
+    "component": {
+      "_component": "@budibase/standard-components/stackpanel",
+      "direction": "horizontal",
+      "children": [
+        {
+          "_component": "#children#array_element",
+          "control": {
+            "_component": "@budibase/standard-components/text",
+            "value": "",
+            "containerClass": "",
+            "font": "",
+            "color": "",
+            "textAlign": "inline",
+            "verticalAlign": "inline",
+            "display": "inline"
+          }
+        }
+      ],
+      "width": "auto",
+      "height": "auto",
+      "containerClass": "",
+      "itemContainerClass": "",
+      "data": {
+        "##bbstate": "allApplications",
+        "##bbsource": "store"
+      },
+      "dataItemComponent": {
+        "_component": "apps/Application List Item",
+        "text": {
+          "##bbstate": "name",
+          "##bbstatefallback": "My App Name",
+          "##bbsource": "context"
+        },
+        "component": {
+          "_component": "@budibase/standard-components/stackpanel",
+          "direction": "horizontal",
+          "children": [
+            {
+              "_component": "#children#array_element",
+              "control": {
+                "_component": "@budibase/standard-components/text",
+                "value": "",
+                "containerClass": "",
+                "font": "",
+                "color": "",
+                "textAlign": "inline",
+                "verticalAlign": "inline",
+                "display": "inline"
+              }
+            }
+          ],
+          "width": "auto",
+          "height": "auto",
+          "containerClass": "",
+          "itemContainerClass": "",
+          "data": {
+            "##bbstate": "allApplications",
+            "##bbsource": "store"
+          },
+          "dataItemComponent": {
+            "_component": ""
+          },
+          "onLoad": []
+        },
+        "containerClass": "",
+        "background": "",
+        "border": "1px solid dimgray",
+        "borderRadius": "2px",
+        "font": "",
+        "color": "black",
+        "padding": "10px",
+        "margin": "20px",
+        "hoverColor": "",
+        "hoverBackground": "",
+        "height": "",
+        "width": "",
+        "onClick": [
+          {
+            "##eventHandlerType": "Load Record",
+            "parameters": {
+              "recordKey": {
+                "##bbstate": "key",
+                "##bbsource": "context"
+              },
+              "statePath": "currentApplication"
+            }
+          }
+        ],
+        "display": ""
+      },
+      "onLoad": []
+    }
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel"
+  ]
+}

packages/server/appPackages/_master/components/apps/Create App List Item.json

@@ -0,0 +1,30 @@
+{
+  "name": "apps/Create App List Item",
+  "description": "",
+  "inherits": "@budibase/standard-components/panel",
+  "props": {
+    "text": "Create New",
+    "padding": "10px",
+    "hoverColor": "",
+    "margin": "20px",
+    "border": "1px solid black",
+    "borderRadius": "2px",
+    "hoverBackground": "gainsboro",
+    "height": "100px",
+    "width": "100px",
+    "onClick": [
+      {
+        "##eventHandlerType": "Get New Record",
+        "parameters": {
+          "collectionKey": "/applications",
+          "childRecordType": "application",
+          "statePath": "currentApplication"
+        }
+      }
+    ]
+  },
+  "tags": [
+    "div",
+    "container"
+  ]
+}

packages/server/appPackages/_master/pages.json

@@ -3,7 +3,7 @@
     "index": {
       "title": "Budibase"
     },
-    "appBody": "Main App Root"
+    "appBody": "apps/Apps List"
   },
   "unauthenticated": {
     "index": {

packages/server/appPackages/_master/public/main/budibase-client.js

@@ -18544,12 +18544,12 @@ var app = (function (exports) {
 	    return alphabetShuffled[index];
 	}
 
-	function get$1 () {
+	function get () {
 	  return alphabet || ORIGINAL;
 	}
 
 	var alphabet_1 = {
-	    get: get$1,
+	    get: get,
 	    characters: characters,
 	    seed: setSeed$1,
 	    lookup: lookup,
@@ -18949,7 +18949,7 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
-	const setState$1 = (store, path, value) => {
+	const setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
 
@@ -18989,6 +18989,12 @@ var app = (function (exports) {
 	    prop[BB_STATE_BINDINGSOURCE] === undefined 
 	    || prop[BB_STATE_BINDINGSOURCE] === "store";
 
+	const takeStateFromContext = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "context";
+
+	const takeStateFromEventParameters = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "event";
+
 	const getState = (s, path, fallback) => {
 
 	    if(!path || path.length === 0) return fallback;
@@ -19033,6 +19039,8 @@ var app = (function (exports) {
 
 	const ERROR = "##error_message";
 
+	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
+
 	const loadRecord = (api) => async ({recordKey, statePath}) => {
 
 	    if(!recordKey) {
@@ -19045,8 +19053,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const record = await get({
-	        url:`${rootPath}/api/record/${key}`
+	    const record = await api.get({
+	        url:`/api/record/${trimSlash(key)}`
 	    });
 
 	    if(api.isSuccess(record))
@@ -19054,7 +19062,7 @@ var app = (function (exports) {
 	};
 
 	const listRecords = api => async ({indexKey, statePath}) => {
-	    if(!recordKey) {
+	    if(!indexKey) {
 	        api.error("Load Record: record key not set");
 	        return;
 	    }  
@@ -19064,8 +19072,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const records = get({
-	        url:`${rootPath}/api/listRecords/${indexKey}`
+	    const records = api.get({
+	        url:`/api/listRecords/${trimSlash(indexKey)}`
 	    });
 
 	    if(api.isSuccess(records))
@@ -19086,8 +19094,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const user = await post({
-	        url:`${rootPath}/api/authenticate`,
+	    const user = await api.post({
+	        url:"/api/authenticate",
 	        body : {username, password}
 	    });
 
@@ -19099,7 +19107,7 @@ var app = (function (exports) {
 	const createApi = ({rootPath, setState, getState}) => {
 
 	    const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-	        fetch(url, {
+	        fetch(`${rootPath}${url}`, {
 	            method: method,
 	            headers: {
 	                'Content-Type': 'application/json',
@@ -19153,7 +19161,7 @@ var app = (function (exports) {
 	    }
 	};
 
-	const getNewChildRecordToState = (store, coreApi) =>
+	const getNewChildRecordToState = (store, coreApi, setState) =>
 	            ({recordKey, collectionName,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19186,7 +19194,7 @@ var app = (function (exports) {
 	};
 
 
-	const getNewRecordToState = (store, coreApi) =>
+	const getNewRecordToState = (store, coreApi, setState) =>
 	            ({collectionKey,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19217,19 +19225,21 @@ var app = (function (exports) {
 
 	const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-	const eventHandlers = (store,coreApi) => {
+	const eventHandlers = (store,coreApi,rootPath) => {
 	    
 	    const handler = (parameters, execute) => ({
 	        execute, parameters
 	    });
 
+	    const setStateWithStore = (path, value) => setState(store, path, value);
+
 	    const api = createApi({
-	        rootPath:"",
-	        setState: (path, value) => setState$1(store, path, value),
+	        rootPath:rootPath,
+	        setState: (path, value) => setStateWithStore,
 	        getState: (path, fallback) => getState(store, path, fallback)
 	    });
 
-	    const setStateHandler = ({path, value}) => setState$1(store, path, value);
+	    const setStateHandler = ({path, value}) => setState(store, path, value);
 	    
 	    return {
 	        "Set State": handler(["path", "value"],  setStateHandler),
@@ -19239,11 +19249,11 @@ var app = (function (exports) {
 	        
 	        "Get New Child Record": handler(
 	            ["recordKey", "collectionName", "childRecordType", "statePath"], 
-	            getNewChildRecordToState(store, coreApi)),
+	            getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Get New Record": handler(
 	            ["collectionKey", "childRecordType", "statePath"], 
-	            getNewRecordToState(store, coreApi)),
+	            getNewRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Authenticate": handler(["username", "password"], api.authenticate)
 	    };
@@ -19255,7 +19265,9 @@ var app = (function (exports) {
 	    && !fp_2(prop[0][EVENT_TYPE_MEMBER_NAME]);
 
 	const doNothing = () => {};
-	const setupBinding = (store, rootProps, coreApi) => {
+	doNothing.isPlaceholder=true;
+
+	const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
 
 	    const rootInitialProps = {...rootProps};
 
@@ -19282,6 +19294,17 @@ var app = (function (exports) {
 	                });
 
 	                initialProps[propName] = fallback;
+	            } else if(isBound(val) && takeStateFromContext(val)) {
+
+	                const binding = stateBinding(val);
+	                const fallback = stateFallback(val);
+
+	                initialProps[propName] = getState(
+	                    context || {},
+	                    binding,
+	                    fallback
+	                );
+
 	            } else if(isEventType(val)) {
 
 	                const handlers = { propName, handlers:[] };
@@ -19320,7 +19343,7 @@ var app = (function (exports) {
 	            && rootBindings.componentEventHandlers.length === 0
 	            && rootBindings.boundArrays.length === 0) return;
 
-	        const handlerTypes = eventHandlers(store, coreApi);
+	        const handlerTypes = eventHandlers(store, coreApi, rootPath);
 
 	        const unsubscribe = store.subscribe(rootState => {
 	           
@@ -19350,7 +19373,7 @@ var app = (function (exports) {
 	                    const closuredHandlers = [];
 	                    for(let h of boundHandler.handlers) {
 	                        const handlerType = handlerTypes[h.handlerType];
-	                        closuredHandlers.push((context) => {
+	                        closuredHandlers.push((eventContext) => {
 
 	                            const parameters = {};
 	                            for(let pname in h.parameters) {
@@ -19361,8 +19384,13 @@ var app = (function (exports) {
 	                                    : takeStateFromStore(p)
 	                                    ? getState(
 	                                        s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
-	                                    : getState(
-	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK]);
+	                                    : takeStateFromEventParameters(p)
+	                                    ? getState(
+	                                        eventContext, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : takeStateFromContext(p)
+	                                    ? getState(
+	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : p[BB_STATE_FALLBACK];
 	                                
 	                            }
 	                            handlerType.execute(parameters);
@@ -19557,7 +19585,7 @@ var app = (function (exports) {
 	}
 
 	var hasHandler = { has: has };
-	var allHandlers = { has: has, get: get$2 };
+	var allHandlers = { has: has, get: get$1 };
 	var globals = new Set();
 	var temp;
 
@@ -19572,7 +19600,7 @@ var app = (function (exports) {
 	  return globals.has(key) ? key in target : true;
 	}
 
-	function get$2(target, key) {
+	function get$1(target, key) {
 	  return key in temp ? temp[key] : target[key];
 	}
 
@@ -20279,6 +20307,7 @@ var app = (function (exports) {
 
 	const getNew = app => (collectionKey, recordTypeName) => {
 	  const recordNode = getRecordNode(app, collectionKey);
+	  collectionKey=safeKey(collectionKey);
 	  return apiWrapperSync(
 	    app,
 	    events.recordApi.getNew,
@@ -20324,26 +20353,25 @@ var app = (function (exports) {
 
 	};
 
-	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
-
 	const createApp = (componentLibraries, appDefinition, user) => {
 
-	    const initialiseComponent = (props, htmlElement) => {
+	    const initialiseComponent = (parentContext) => (props, htmlElement, context) => {
 
 	        const {componentName, libName} = splitName(props._component);
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi);
+	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb},
+	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
 	            hydrate:true
 	        });
 
 	        bind(component);
 
+	        return component;
 	    };
 
 	    const coreApi = createCoreApi(appDefinition, user);
@@ -20379,16 +20407,26 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
-	    const _bb = {
-	        initialiseComponent, 
+	    const bb = () => ({
+	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
+	    });
+
+	    const bbRoot = bb();
+
+	    const bbInContext = (context) => {
+	        if(!context) return bbRoot;
+	        const bbCxt = bb();
+	        bbCxt.context = context;
+	        bbCxt.initialiseComponent=initialiseComponent(context);
+	        return bbCxt;
 	    };
 
-	    return _bb;
+	    return bbRoot;
 
 	};
 

packages/server/appPackages/_master/public/unauthenticated/budibase-client.js

@@ -18544,12 +18544,12 @@ var app = (function (exports) {
 	    return alphabetShuffled[index];
 	}
 
-	function get$1 () {
+	function get () {
 	  return alphabet || ORIGINAL;
 	}
 
 	var alphabet_1 = {
-	    get: get$1,
+	    get: get,
 	    characters: characters,
 	    seed: setSeed$1,
 	    lookup: lookup,
@@ -18949,7 +18949,7 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
-	const setState$1 = (store, path, value) => {
+	const setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
 
@@ -18989,6 +18989,12 @@ var app = (function (exports) {
 	    prop[BB_STATE_BINDINGSOURCE] === undefined 
 	    || prop[BB_STATE_BINDINGSOURCE] === "store";
 
+	const takeStateFromContext = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "context";
+
+	const takeStateFromEventParameters = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "event";
+
 	const getState = (s, path, fallback) => {
 
 	    if(!path || path.length === 0) return fallback;
@@ -19033,6 +19039,8 @@ var app = (function (exports) {
 
 	const ERROR = "##error_message";
 
+	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
+
 	const loadRecord = (api) => async ({recordKey, statePath}) => {
 
 	    if(!recordKey) {
@@ -19045,8 +19053,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const record = await get({
-	        url:`${rootPath}/api/record/${key}`
+	    const record = await api.get({
+	        url:`/api/record/${trimSlash(key)}`
 	    });
 
 	    if(api.isSuccess(record))
@@ -19054,7 +19062,7 @@ var app = (function (exports) {
 	};
 
 	const listRecords = api => async ({indexKey, statePath}) => {
-	    if(!recordKey) {
+	    if(!indexKey) {
 	        api.error("Load Record: record key not set");
 	        return;
 	    }  
@@ -19064,8 +19072,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const records = get({
-	        url:`${rootPath}/api/listRecords/${indexKey}`
+	    const records = api.get({
+	        url:`/api/listRecords/${trimSlash(indexKey)}`
 	    });
 
 	    if(api.isSuccess(records))
@@ -19086,8 +19094,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const user = await post({
-	        url:`${rootPath}/api/authenticate`,
+	    const user = await api.post({
+	        url:"/api/authenticate",
 	        body : {username, password}
 	    });
 
@@ -19099,7 +19107,7 @@ var app = (function (exports) {
 	const createApi = ({rootPath, setState, getState}) => {
 
 	    const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-	        fetch(url, {
+	        fetch(`${rootPath}${url}`, {
 	            method: method,
 	            headers: {
 	                'Content-Type': 'application/json',
@@ -19153,7 +19161,7 @@ var app = (function (exports) {
 	    }
 	};
 
-	const getNewChildRecordToState = (store, coreApi) =>
+	const getNewChildRecordToState = (store, coreApi, setState) =>
 	            ({recordKey, collectionName,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19186,7 +19194,7 @@ var app = (function (exports) {
 	};
 
 
-	const getNewRecordToState = (store, coreApi) =>
+	const getNewRecordToState = (store, coreApi, setState) =>
 	            ({collectionKey,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19217,19 +19225,21 @@ var app = (function (exports) {
 
 	const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-	const eventHandlers = (store,coreApi) => {
+	const eventHandlers = (store,coreApi,rootPath) => {
 	    
 	    const handler = (parameters, execute) => ({
 	        execute, parameters
 	    });
 
+	    const setStateWithStore = (path, value) => setState(store, path, value);
+
 	    const api = createApi({
-	        rootPath:"",
-	        setState: (path, value) => setState$1(store, path, value),
+	        rootPath:rootPath,
+	        setState: (path, value) => setStateWithStore,
 	        getState: (path, fallback) => getState(store, path, fallback)
 	    });
 
-	    const setStateHandler = ({path, value}) => setState$1(store, path, value);
+	    const setStateHandler = ({path, value}) => setState(store, path, value);
 	    
 	    return {
 	        "Set State": handler(["path", "value"],  setStateHandler),
@@ -19239,11 +19249,11 @@ var app = (function (exports) {
 	        
 	        "Get New Child Record": handler(
 	            ["recordKey", "collectionName", "childRecordType", "statePath"], 
-	            getNewChildRecordToState(store, coreApi)),
+	            getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Get New Record": handler(
 	            ["collectionKey", "childRecordType", "statePath"], 
-	            getNewRecordToState(store, coreApi)),
+	            getNewRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Authenticate": handler(["username", "password"], api.authenticate)
 	    };
@@ -19255,7 +19265,9 @@ var app = (function (exports) {
 	    && !fp_2(prop[0][EVENT_TYPE_MEMBER_NAME]);
 
 	const doNothing = () => {};
-	const setupBinding = (store, rootProps, coreApi) => {
+	doNothing.isPlaceholder=true;
+
+	const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
 
 	    const rootInitialProps = {...rootProps};
 
@@ -19282,6 +19294,17 @@ var app = (function (exports) {
 	                });
 
 	                initialProps[propName] = fallback;
+	            } else if(isBound(val) && takeStateFromContext(val)) {
+
+	                const binding = stateBinding(val);
+	                const fallback = stateFallback(val);
+
+	                initialProps[propName] = getState(
+	                    context || {},
+	                    binding,
+	                    fallback
+	                );
+
 	            } else if(isEventType(val)) {
 
 	                const handlers = { propName, handlers:[] };
@@ -19320,7 +19343,7 @@ var app = (function (exports) {
 	            && rootBindings.componentEventHandlers.length === 0
 	            && rootBindings.boundArrays.length === 0) return;
 
-	        const handlerTypes = eventHandlers(store, coreApi);
+	        const handlerTypes = eventHandlers(store, coreApi, rootPath);
 
 	        const unsubscribe = store.subscribe(rootState => {
 	           
@@ -19350,7 +19373,7 @@ var app = (function (exports) {
 	                    const closuredHandlers = [];
 	                    for(let h of boundHandler.handlers) {
 	                        const handlerType = handlerTypes[h.handlerType];
-	                        closuredHandlers.push((context) => {
+	                        closuredHandlers.push((eventContext) => {
 
 	                            const parameters = {};
 	                            for(let pname in h.parameters) {
@@ -19361,8 +19384,13 @@ var app = (function (exports) {
 	                                    : takeStateFromStore(p)
 	                                    ? getState(
 	                                        s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
-	                                    : getState(
-	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK]);
+	                                    : takeStateFromEventParameters(p)
+	                                    ? getState(
+	                                        eventContext, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : takeStateFromContext(p)
+	                                    ? getState(
+	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : p[BB_STATE_FALLBACK];
 	                                
 	                            }
 	                            handlerType.execute(parameters);
@@ -19557,7 +19585,7 @@ var app = (function (exports) {
 	}
 
 	var hasHandler = { has: has };
-	var allHandlers = { has: has, get: get$2 };
+	var allHandlers = { has: has, get: get$1 };
 	var globals = new Set();
 	var temp;
 
@@ -19572,7 +19600,7 @@ var app = (function (exports) {
 	  return globals.has(key) ? key in target : true;
 	}
 
-	function get$2(target, key) {
+	function get$1(target, key) {
 	  return key in temp ? temp[key] : target[key];
 	}
 
@@ -20279,6 +20307,7 @@ var app = (function (exports) {
 
 	const getNew = app => (collectionKey, recordTypeName) => {
 	  const recordNode = getRecordNode(app, collectionKey);
+	  collectionKey=safeKey(collectionKey);
 	  return apiWrapperSync(
 	    app,
 	    events.recordApi.getNew,
@@ -20324,26 +20353,25 @@ var app = (function (exports) {
 
 	};
 
-	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
-
 	const createApp = (componentLibraries, appDefinition, user) => {
 
-	    const initialiseComponent = (props, htmlElement) => {
+	    const initialiseComponent = (parentContext) => (props, htmlElement, context) => {
 
 	        const {componentName, libName} = splitName(props._component);
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi);
+	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb},
+	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
 	            hydrate:true
 	        });
 
 	        bind(component);
 
+	        return component;
 	    };
 
 	    const coreApi = createCoreApi(appDefinition, user);
@@ -20379,16 +20407,26 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
-	    const _bb = {
-	        initialiseComponent, 
+	    const bb = () => ({
+	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
+	    });
+
+	    const bbRoot = bb();
+
+	    const bbInContext = (context) => {
+	        if(!context) return bbRoot;
+	        const bbCxt = bb();
+	        bbCxt.context = context;
+	        bbCxt.initialiseComponent=initialiseComponent(context);
+	        return bbCxt;
 	    };
 
-	    return _bb;
+	    return bbRoot;
 
 	};
 

packages/server/appPackages/testApp/public/main/budibase-client.js

@@ -18544,12 +18544,12 @@ var app = (function (exports) {
 	    return alphabetShuffled[index];
 	}
 
-	function get$1 () {
+	function get () {
 	  return alphabet || ORIGINAL;
 	}
 
 	var alphabet_1 = {
-	    get: get$1,
+	    get: get,
 	    characters: characters,
 	    seed: setSeed$1,
 	    lookup: lookup,
@@ -18949,7 +18949,7 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
-	const setState$1 = (store, path, value) => {
+	const setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
 
@@ -18989,6 +18989,12 @@ var app = (function (exports) {
 	    prop[BB_STATE_BINDINGSOURCE] === undefined 
 	    || prop[BB_STATE_BINDINGSOURCE] === "store";
 
+	const takeStateFromContext = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "context";
+
+	const takeStateFromEventParameters = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "event";
+
 	const getState = (s, path, fallback) => {
 
 	    if(!path || path.length === 0) return fallback;
@@ -19033,6 +19039,8 @@ var app = (function (exports) {
 
 	const ERROR = "##error_message";
 
+	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
+
 	const loadRecord = (api) => async ({recordKey, statePath}) => {
 
 	    if(!recordKey) {
@@ -19045,8 +19053,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const record = await get({
-	        url:`${rootPath}/api/record/${key}`
+	    const record = await api.get({
+	        url:`/api/record/${trimSlash(key)}`
 	    });
 
 	    if(api.isSuccess(record))
@@ -19054,7 +19062,7 @@ var app = (function (exports) {
 	};
 
 	const listRecords = api => async ({indexKey, statePath}) => {
-	    if(!recordKey) {
+	    if(!indexKey) {
 	        api.error("Load Record: record key not set");
 	        return;
 	    }  
@@ -19064,8 +19072,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const records = get({
-	        url:`${rootPath}/api/listRecords/${indexKey}`
+	    const records = api.get({
+	        url:`/api/listRecords/${trimSlash(indexKey)}`
 	    });
 
 	    if(api.isSuccess(records))
@@ -19086,8 +19094,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const user = await post({
-	        url:`${rootPath}/api/authenticate`,
+	    const user = await api.post({
+	        url:"/api/authenticate",
 	        body : {username, password}
 	    });
 
@@ -19099,7 +19107,7 @@ var app = (function (exports) {
 	const createApi = ({rootPath, setState, getState}) => {
 
 	    const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-	        fetch(url, {
+	        fetch(`${rootPath}${url}`, {
 	            method: method,
 	            headers: {
 	                'Content-Type': 'application/json',
@@ -19153,7 +19161,7 @@ var app = (function (exports) {
 	    }
 	};
 
-	const getNewChildRecordToState = (store, coreApi) =>
+	const getNewChildRecordToState = (store, coreApi, setState) =>
 	            ({recordKey, collectionName,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19186,7 +19194,7 @@ var app = (function (exports) {
 	};
 
 
-	const getNewRecordToState = (store, coreApi) =>
+	const getNewRecordToState = (store, coreApi, setState) =>
 	            ({collectionKey,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19217,19 +19225,21 @@ var app = (function (exports) {
 
 	const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-	const eventHandlers = (store,coreApi) => {
+	const eventHandlers = (store,coreApi,rootPath) => {
 	    
 	    const handler = (parameters, execute) => ({
 	        execute, parameters
 	    });
 
+	    const setStateWithStore = (path, value) => setState(store, path, value);
+
 	    const api = createApi({
-	        rootPath:"",
-	        setState: (path, value) => setState$1(store, path, value),
+	        rootPath:rootPath,
+	        setState: (path, value) => setStateWithStore,
 	        getState: (path, fallback) => getState(store, path, fallback)
 	    });
 
-	    const setStateHandler = ({path, value}) => setState$1(store, path, value);
+	    const setStateHandler = ({path, value}) => setState(store, path, value);
 	    
 	    return {
 	        "Set State": handler(["path", "value"],  setStateHandler),
@@ -19239,11 +19249,11 @@ var app = (function (exports) {
 	        
 	        "Get New Child Record": handler(
 	            ["recordKey", "collectionName", "childRecordType", "statePath"], 
-	            getNewChildRecordToState(store, coreApi)),
+	            getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Get New Record": handler(
 	            ["collectionKey", "childRecordType", "statePath"], 
-	            getNewRecordToState(store, coreApi)),
+	            getNewRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Authenticate": handler(["username", "password"], api.authenticate)
 	    };
@@ -19255,7 +19265,9 @@ var app = (function (exports) {
 	    && !fp_2(prop[0][EVENT_TYPE_MEMBER_NAME]);
 
 	const doNothing = () => {};
-	const setupBinding = (store, rootProps, coreApi) => {
+	doNothing.isPlaceholder=true;
+
+	const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
 
 	    const rootInitialProps = {...rootProps};
 
@@ -19282,6 +19294,17 @@ var app = (function (exports) {
 	                });
 
 	                initialProps[propName] = fallback;
+	            } else if(isBound(val) && takeStateFromContext(val)) {
+
+	                const binding = stateBinding(val);
+	                const fallback = stateFallback(val);
+
+	                initialProps[propName] = getState(
+	                    context || {},
+	                    binding,
+	                    fallback
+	                );
+
 	            } else if(isEventType(val)) {
 
 	                const handlers = { propName, handlers:[] };
@@ -19320,7 +19343,7 @@ var app = (function (exports) {
 	            && rootBindings.componentEventHandlers.length === 0
 	            && rootBindings.boundArrays.length === 0) return;
 
-	        const handlerTypes = eventHandlers(store, coreApi);
+	        const handlerTypes = eventHandlers(store, coreApi, rootPath);
 
 	        const unsubscribe = store.subscribe(rootState => {
 	           
@@ -19350,7 +19373,7 @@ var app = (function (exports) {
 	                    const closuredHandlers = [];
 	                    for(let h of boundHandler.handlers) {
 	                        const handlerType = handlerTypes[h.handlerType];
-	                        closuredHandlers.push((context) => {
+	                        closuredHandlers.push((eventContext) => {
 
 	                            const parameters = {};
 	                            for(let pname in h.parameters) {
@@ -19361,8 +19384,13 @@ var app = (function (exports) {
 	                                    : takeStateFromStore(p)
 	                                    ? getState(
 	                                        s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
-	                                    : getState(
-	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK]);
+	                                    : takeStateFromEventParameters(p)
+	                                    ? getState(
+	                                        eventContext, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : takeStateFromContext(p)
+	                                    ? getState(
+	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : p[BB_STATE_FALLBACK];
 	                                
 	                            }
 	                            handlerType.execute(parameters);
@@ -19557,7 +19585,7 @@ var app = (function (exports) {
 	}
 
 	var hasHandler = { has: has };
-	var allHandlers = { has: has, get: get$2 };
+	var allHandlers = { has: has, get: get$1 };
 	var globals = new Set();
 	var temp;
 
@@ -19572,7 +19600,7 @@ var app = (function (exports) {
 	  return globals.has(key) ? key in target : true;
 	}
 
-	function get$2(target, key) {
+	function get$1(target, key) {
 	  return key in temp ? temp[key] : target[key];
 	}
 
@@ -20279,6 +20307,7 @@ var app = (function (exports) {
 
 	const getNew = app => (collectionKey, recordTypeName) => {
 	  const recordNode = getRecordNode(app, collectionKey);
+	  collectionKey=safeKey(collectionKey);
 	  return apiWrapperSync(
 	    app,
 	    events.recordApi.getNew,
@@ -20324,26 +20353,25 @@ var app = (function (exports) {
 
 	};
 
-	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
-
 	const createApp = (componentLibraries, appDefinition, user) => {
 
-	    const initialiseComponent = (props, htmlElement) => {
+	    const initialiseComponent = (parentContext) => (props, htmlElement, context) => {
 
 	        const {componentName, libName} = splitName(props._component);
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi);
+	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb},
+	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
 	            hydrate:true
 	        });
 
 	        bind(component);
 
+	        return component;
 	    };
 
 	    const coreApi = createCoreApi(appDefinition, user);
@@ -20379,16 +20407,26 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
-	    const _bb = {
-	        initialiseComponent, 
+	    const bb = () => ({
+	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
+	    });
+
+	    const bbRoot = bb();
+
+	    const bbInContext = (context) => {
+	        if(!context) return bbRoot;
+	        const bbCxt = bb();
+	        bbCxt.context = context;
+	        bbCxt.initialiseComponent=initialiseComponent(context);
+	        return bbCxt;
 	    };
 
-	    return _bb;
+	    return bbRoot;
 
 	};
 

packages/server/appPackages/testApp/public/unauthenticated/budibase-client.js

@@ -18544,12 +18544,12 @@ var app = (function (exports) {
 	    return alphabetShuffled[index];
 	}
 
-	function get$1 () {
+	function get () {
 	  return alphabet || ORIGINAL;
 	}
 
 	var alphabet_1 = {
-	    get: get$1,
+	    get: get,
 	    characters: characters,
 	    seed: setSeed$1,
 	    lookup: lookup,
@@ -18949,7 +18949,7 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
-	const setState$1 = (store, path, value) => {
+	const setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
 
@@ -18989,6 +18989,12 @@ var app = (function (exports) {
 	    prop[BB_STATE_BINDINGSOURCE] === undefined 
 	    || prop[BB_STATE_BINDINGSOURCE] === "store";
 
+	const takeStateFromContext = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "context";
+
+	const takeStateFromEventParameters = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "event";
+
 	const getState = (s, path, fallback) => {
 
 	    if(!path || path.length === 0) return fallback;
@@ -19033,6 +19039,8 @@ var app = (function (exports) {
 
 	const ERROR = "##error_message";
 
+	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
+
 	const loadRecord = (api) => async ({recordKey, statePath}) => {
 
 	    if(!recordKey) {
@@ -19045,8 +19053,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const record = await get({
-	        url:`${rootPath}/api/record/${key}`
+	    const record = await api.get({
+	        url:`/api/record/${trimSlash(key)}`
 	    });
 
 	    if(api.isSuccess(record))
@@ -19054,7 +19062,7 @@ var app = (function (exports) {
 	};
 
 	const listRecords = api => async ({indexKey, statePath}) => {
-	    if(!recordKey) {
+	    if(!indexKey) {
 	        api.error("Load Record: record key not set");
 	        return;
 	    }  
@@ -19064,8 +19072,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const records = get({
-	        url:`${rootPath}/api/listRecords/${indexKey}`
+	    const records = api.get({
+	        url:`/api/listRecords/${trimSlash(indexKey)}`
 	    });
 
 	    if(api.isSuccess(records))
@@ -19086,8 +19094,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const user = await post({
-	        url:`${rootPath}/api/authenticate`,
+	    const user = await api.post({
+	        url:"/api/authenticate",
 	        body : {username, password}
 	    });
 
@@ -19099,7 +19107,7 @@ var app = (function (exports) {
 	const createApi = ({rootPath, setState, getState}) => {
 
 	    const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-	        fetch(url, {
+	        fetch(`${rootPath}${url}`, {
 	            method: method,
 	            headers: {
 	                'Content-Type': 'application/json',
@@ -19153,7 +19161,7 @@ var app = (function (exports) {
 	    }
 	};
 
-	const getNewChildRecordToState = (store, coreApi) =>
+	const getNewChildRecordToState = (store, coreApi, setState) =>
 	            ({recordKey, collectionName,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19186,7 +19194,7 @@ var app = (function (exports) {
 	};
 
 
-	const getNewRecordToState = (store, coreApi) =>
+	const getNewRecordToState = (store, coreApi, setState) =>
 	            ({collectionKey,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19217,19 +19225,21 @@ var app = (function (exports) {
 
 	const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-	const eventHandlers = (store,coreApi) => {
+	const eventHandlers = (store,coreApi,rootPath) => {
 	    
 	    const handler = (parameters, execute) => ({
 	        execute, parameters
 	    });
 
+	    const setStateWithStore = (path, value) => setState(store, path, value);
+
 	    const api = createApi({
-	        rootPath:"",
-	        setState: (path, value) => setState$1(store, path, value),
+	        rootPath:rootPath,
+	        setState: (path, value) => setStateWithStore,
 	        getState: (path, fallback) => getState(store, path, fallback)
 	    });
 
-	    const setStateHandler = ({path, value}) => setState$1(store, path, value);
+	    const setStateHandler = ({path, value}) => setState(store, path, value);
 	    
 	    return {
 	        "Set State": handler(["path", "value"],  setStateHandler),
@@ -19239,11 +19249,11 @@ var app = (function (exports) {
 	        
 	        "Get New Child Record": handler(
 	            ["recordKey", "collectionName", "childRecordType", "statePath"], 
-	            getNewChildRecordToState(store, coreApi)),
+	            getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Get New Record": handler(
 	            ["collectionKey", "childRecordType", "statePath"], 
-	            getNewRecordToState(store, coreApi)),
+	            getNewRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Authenticate": handler(["username", "password"], api.authenticate)
 	    };
@@ -19255,7 +19265,9 @@ var app = (function (exports) {
 	    && !fp_2(prop[0][EVENT_TYPE_MEMBER_NAME]);
 
 	const doNothing = () => {};
-	const setupBinding = (store, rootProps, coreApi) => {
+	doNothing.isPlaceholder=true;
+
+	const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
 
 	    const rootInitialProps = {...rootProps};
 
@@ -19282,6 +19294,17 @@ var app = (function (exports) {
 	                });
 
 	                initialProps[propName] = fallback;
+	            } else if(isBound(val) && takeStateFromContext(val)) {
+
+	                const binding = stateBinding(val);
+	                const fallback = stateFallback(val);
+
+	                initialProps[propName] = getState(
+	                    context || {},
+	                    binding,
+	                    fallback
+	                );
+
 	            } else if(isEventType(val)) {
 
 	                const handlers = { propName, handlers:[] };
@@ -19320,7 +19343,7 @@ var app = (function (exports) {
 	            && rootBindings.componentEventHandlers.length === 0
 	            && rootBindings.boundArrays.length === 0) return;
 
-	        const handlerTypes = eventHandlers(store, coreApi);
+	        const handlerTypes = eventHandlers(store, coreApi, rootPath);
 
 	        const unsubscribe = store.subscribe(rootState => {
 	           
@@ -19350,7 +19373,7 @@ var app = (function (exports) {
 	                    const closuredHandlers = [];
 	                    for(let h of boundHandler.handlers) {
 	                        const handlerType = handlerTypes[h.handlerType];
-	                        closuredHandlers.push((context) => {
+	                        closuredHandlers.push((eventContext) => {
 
 	                            const parameters = {};
 	                            for(let pname in h.parameters) {
@@ -19361,8 +19384,13 @@ var app = (function (exports) {
 	                                    : takeStateFromStore(p)
 	                                    ? getState(
 	                                        s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
-	                                    : getState(
-	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK]);
+	                                    : takeStateFromEventParameters(p)
+	                                    ? getState(
+	                                        eventContext, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : takeStateFromContext(p)
+	                                    ? getState(
+	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : p[BB_STATE_FALLBACK];
 	                                
 	                            }
 	                            handlerType.execute(parameters);
@@ -19557,7 +19585,7 @@ var app = (function (exports) {
 	}
 
 	var hasHandler = { has: has };
-	var allHandlers = { has: has, get: get$2 };
+	var allHandlers = { has: has, get: get$1 };
 	var globals = new Set();
 	var temp;
 
@@ -19572,7 +19600,7 @@ var app = (function (exports) {
 	  return globals.has(key) ? key in target : true;
 	}
 
-	function get$2(target, key) {
+	function get$1(target, key) {
 	  return key in temp ? temp[key] : target[key];
 	}
 
@@ -20279,6 +20307,7 @@ var app = (function (exports) {
 
 	const getNew = app => (collectionKey, recordTypeName) => {
 	  const recordNode = getRecordNode(app, collectionKey);
+	  collectionKey=safeKey(collectionKey);
 	  return apiWrapperSync(
 	    app,
 	    events.recordApi.getNew,
@@ -20324,26 +20353,25 @@ var app = (function (exports) {
 
 	};
 
-	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
-
 	const createApp = (componentLibraries, appDefinition, user) => {
 
-	    const initialiseComponent = (props, htmlElement) => {
+	    const initialiseComponent = (parentContext) => (props, htmlElement, context) => {
 
 	        const {componentName, libName} = splitName(props._component);
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi);
+	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb},
+	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
 	            hydrate:true
 	        });
 
 	        bind(component);
 
+	        return component;
 	    };
 
 	    const coreApi = createCoreApi(appDefinition, user);
@@ -20379,16 +20407,26 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
-	    const _bb = {
-	        initialiseComponent, 
+	    const bb = () => ({
+	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
+	    });
+
+	    const bbRoot = bb();
+
+	    const bbInContext = (context) => {
+	        if(!context) return bbRoot;
+	        const bbCxt = bb();
+	        bbCxt.context = context;
+	        bbCxt.initialiseComponent=initialiseComponent(context);
+	        return bbCxt;
 	    };
 
-	    return _bb;
+	    return bbRoot;
 
 	};
 

packages/server/appPackages/testApp2/access_levels.json

@@ -1,5 +1,4 @@
-{
-  "levels": [
+[
   {
     "name": "owner",
     "permissions": [
@@ -70,6 +69,4 @@
       }
     ]
   }
-  ],
-  "version": 0
-}
+]

packages/server/appPackages/testApp2/components/containers_eh/two_columns_yes.json

@@ -1,5 +1,5 @@
 {
-  "name": "/containers/two_columns",
+  "name": "containers/two_columns_yes",
   "description": "",
   "inherits": "@budibase/standard-components/grid",
   "props": {

packages/server/appPackages/testApp2/components/mike.json

@@ -1,7 +1,7 @@
 {
   "name": "mike",
   "description": "",
-  "inherits": "containers/two_columns",
+  "inherits": "containers_eh/two_columns_yes",
   "props": {
     "children": [
       {

packages/server/appPackages/testApp2/public/main/budibase-client.js

@@ -18544,12 +18544,12 @@ var app = (function (exports) {
 	    return alphabetShuffled[index];
 	}
 
-	function get$1 () {
+	function get () {
 	  return alphabet || ORIGINAL;
 	}
 
 	var alphabet_1 = {
-	    get: get$1,
+	    get: get,
 	    characters: characters,
 	    seed: setSeed$1,
 	    lookup: lookup,
@@ -18949,7 +18949,7 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
-	const setState$1 = (store, path, value) => {
+	const setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
 
@@ -18989,6 +18989,12 @@ var app = (function (exports) {
 	    prop[BB_STATE_BINDINGSOURCE] === undefined 
 	    || prop[BB_STATE_BINDINGSOURCE] === "store";
 
+	const takeStateFromContext = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "context";
+
+	const takeStateFromEventParameters = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "event";
+
 	const getState = (s, path, fallback) => {
 
 	    if(!path || path.length === 0) return fallback;
@@ -19033,6 +19039,8 @@ var app = (function (exports) {
 
 	const ERROR = "##error_message";
 
+	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
+
 	const loadRecord = (api) => async ({recordKey, statePath}) => {
 
 	    if(!recordKey) {
@@ -19045,8 +19053,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const record = await get({
-	        url:`${rootPath}/api/record/${key}`
+	    const record = await api.get({
+	        url:`/api/record/${trimSlash(key)}`
 	    });
 
 	    if(api.isSuccess(record))
@@ -19054,7 +19062,7 @@ var app = (function (exports) {
 	};
 
 	const listRecords = api => async ({indexKey, statePath}) => {
-	    if(!recordKey) {
+	    if(!indexKey) {
 	        api.error("Load Record: record key not set");
 	        return;
 	    }  
@@ -19064,8 +19072,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const records = get({
-	        url:`${rootPath}/api/listRecords/${indexKey}`
+	    const records = api.get({
+	        url:`/api/listRecords/${trimSlash(indexKey)}`
 	    });
 
 	    if(api.isSuccess(records))
@@ -19086,8 +19094,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const user = await post({
-	        url:`${rootPath}/api/authenticate`,
+	    const user = await api.post({
+	        url:"/api/authenticate",
 	        body : {username, password}
 	    });
 
@@ -19099,7 +19107,7 @@ var app = (function (exports) {
 	const createApi = ({rootPath, setState, getState}) => {
 
 	    const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-	        fetch(url, {
+	        fetch(`${rootPath}${url}`, {
 	            method: method,
 	            headers: {
 	                'Content-Type': 'application/json',
@@ -19153,7 +19161,7 @@ var app = (function (exports) {
 	    }
 	};
 
-	const getNewChildRecordToState = (store, coreApi) =>
+	const getNewChildRecordToState = (store, coreApi, setState) =>
 	            ({recordKey, collectionName,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19186,7 +19194,7 @@ var app = (function (exports) {
 	};
 
 
-	const getNewRecordToState = (store, coreApi) =>
+	const getNewRecordToState = (store, coreApi, setState) =>
 	            ({collectionKey,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19217,19 +19225,21 @@ var app = (function (exports) {
 
 	const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-	const eventHandlers = (store,coreApi) => {
+	const eventHandlers = (store,coreApi,rootPath) => {
 	    
 	    const handler = (parameters, execute) => ({
 	        execute, parameters
 	    });
 
+	    const setStateWithStore = (path, value) => setState(store, path, value);
+
 	    const api = createApi({
-	        rootPath:"",
-	        setState: (path, value) => setState$1(store, path, value),
+	        rootPath:rootPath,
+	        setState: (path, value) => setStateWithStore,
 	        getState: (path, fallback) => getState(store, path, fallback)
 	    });
 
-	    const setStateHandler = ({path, value}) => setState$1(store, path, value);
+	    const setStateHandler = ({path, value}) => setState(store, path, value);
 	    
 	    return {
 	        "Set State": handler(["path", "value"],  setStateHandler),
@@ -19239,11 +19249,11 @@ var app = (function (exports) {
 	        
 	        "Get New Child Record": handler(
 	            ["recordKey", "collectionName", "childRecordType", "statePath"], 
-	            getNewChildRecordToState(store, coreApi)),
+	            getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Get New Record": handler(
 	            ["collectionKey", "childRecordType", "statePath"], 
-	            getNewRecordToState(store, coreApi)),
+	            getNewRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Authenticate": handler(["username", "password"], api.authenticate)
 	    };
@@ -19255,7 +19265,9 @@ var app = (function (exports) {
 	    && !fp_2(prop[0][EVENT_TYPE_MEMBER_NAME]);
 
 	const doNothing = () => {};
-	const setupBinding = (store, rootProps, coreApi) => {
+	doNothing.isPlaceholder=true;
+
+	const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
 
 	    const rootInitialProps = {...rootProps};
 
@@ -19282,6 +19294,17 @@ var app = (function (exports) {
 	                });
 
 	                initialProps[propName] = fallback;
+	            } else if(isBound(val) && takeStateFromContext(val)) {
+
+	                const binding = stateBinding(val);
+	                const fallback = stateFallback(val);
+
+	                initialProps[propName] = getState(
+	                    context || {},
+	                    binding,
+	                    fallback
+	                );
+
 	            } else if(isEventType(val)) {
 
 	                const handlers = { propName, handlers:[] };
@@ -19320,7 +19343,7 @@ var app = (function (exports) {
 	            && rootBindings.componentEventHandlers.length === 0
 	            && rootBindings.boundArrays.length === 0) return;
 
-	        const handlerTypes = eventHandlers(store, coreApi);
+	        const handlerTypes = eventHandlers(store, coreApi, rootPath);
 
 	        const unsubscribe = store.subscribe(rootState => {
 	           
@@ -19350,7 +19373,7 @@ var app = (function (exports) {
 	                    const closuredHandlers = [];
 	                    for(let h of boundHandler.handlers) {
 	                        const handlerType = handlerTypes[h.handlerType];
-	                        closuredHandlers.push((context) => {
+	                        closuredHandlers.push((eventContext) => {
 
 	                            const parameters = {};
 	                            for(let pname in h.parameters) {
@@ -19361,8 +19384,13 @@ var app = (function (exports) {
 	                                    : takeStateFromStore(p)
 	                                    ? getState(
 	                                        s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
-	                                    : getState(
-	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK]);
+	                                    : takeStateFromEventParameters(p)
+	                                    ? getState(
+	                                        eventContext, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : takeStateFromContext(p)
+	                                    ? getState(
+	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : p[BB_STATE_FALLBACK];
 	                                
 	                            }
 	                            handlerType.execute(parameters);
@@ -19557,7 +19585,7 @@ var app = (function (exports) {
 	}
 
 	var hasHandler = { has: has };
-	var allHandlers = { has: has, get: get$2 };
+	var allHandlers = { has: has, get: get$1 };
 	var globals = new Set();
 	var temp;
 
@@ -19572,7 +19600,7 @@ var app = (function (exports) {
 	  return globals.has(key) ? key in target : true;
 	}
 
-	function get$2(target, key) {
+	function get$1(target, key) {
 	  return key in temp ? temp[key] : target[key];
 	}
 
@@ -20279,6 +20307,7 @@ var app = (function (exports) {
 
 	const getNew = app => (collectionKey, recordTypeName) => {
 	  const recordNode = getRecordNode(app, collectionKey);
+	  collectionKey=safeKey(collectionKey);
 	  return apiWrapperSync(
 	    app,
 	    events.recordApi.getNew,
@@ -20324,26 +20353,25 @@ var app = (function (exports) {
 
 	};
 
-	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
-
 	const createApp = (componentLibraries, appDefinition, user) => {
 
-	    const initialiseComponent = (props, htmlElement) => {
+	    const initialiseComponent = (parentContext) => (props, htmlElement, context) => {
 
 	        const {componentName, libName} = splitName(props._component);
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi);
+	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb},
+	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
 	            hydrate:true
 	        });
 
 	        bind(component);
 
+	        return component;
 	    };
 
 	    const coreApi = createCoreApi(appDefinition, user);
@@ -20379,16 +20407,26 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
-	    const _bb = {
-	        initialiseComponent, 
+	    const bb = () => ({
+	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
+	    });
+
+	    const bbRoot = bb();
+
+	    const bbInContext = (context) => {
+	        if(!context) return bbRoot;
+	        const bbCxt = bb();
+	        bbCxt.context = context;
+	        bbCxt.initialiseComponent=initialiseComponent(context);
+	        return bbCxt;
 	    };
 
-	    return _bb;
+	    return bbRoot;
 
 	};
 

packages/server/appPackages/testApp2/public/unauthenticated/budibase-client.js

@@ -18544,12 +18544,12 @@ var app = (function (exports) {
 	    return alphabetShuffled[index];
 	}
 
-	function get$1 () {
+	function get () {
 	  return alphabet || ORIGINAL;
 	}
 
 	var alphabet_1 = {
-	    get: get$1,
+	    get: get,
 	    characters: characters,
 	    seed: setSeed$1,
 	    lookup: lookup,
@@ -18949,7 +18949,7 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
-	const setState$1 = (store, path, value) => {
+	const setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
 
@@ -18989,6 +18989,12 @@ var app = (function (exports) {
 	    prop[BB_STATE_BINDINGSOURCE] === undefined 
 	    || prop[BB_STATE_BINDINGSOURCE] === "store";
 
+	const takeStateFromContext = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "context";
+
+	const takeStateFromEventParameters = (prop) => 
+	    prop[BB_STATE_BINDINGSOURCE] === "event";
+
 	const getState = (s, path, fallback) => {
 
 	    if(!path || path.length === 0) return fallback;
@@ -19033,6 +19039,8 @@ var app = (function (exports) {
 
 	const ERROR = "##error_message";
 
+	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
+
 	const loadRecord = (api) => async ({recordKey, statePath}) => {
 
 	    if(!recordKey) {
@@ -19045,8 +19053,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const record = await get({
-	        url:`${rootPath}/api/record/${key}`
+	    const record = await api.get({
+	        url:`/api/record/${trimSlash(key)}`
 	    });
 
 	    if(api.isSuccess(record))
@@ -19054,7 +19062,7 @@ var app = (function (exports) {
 	};
 
 	const listRecords = api => async ({indexKey, statePath}) => {
-	    if(!recordKey) {
+	    if(!indexKey) {
 	        api.error("Load Record: record key not set");
 	        return;
 	    }  
@@ -19064,8 +19072,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const records = get({
-	        url:`${rootPath}/api/listRecords/${indexKey}`
+	    const records = api.get({
+	        url:`/api/listRecords/${trimSlash(indexKey)}`
 	    });
 
 	    if(api.isSuccess(records))
@@ -19086,8 +19094,8 @@ var app = (function (exports) {
 	        return;
 	    } 
 
-	    const user = await post({
-	        url:`${rootPath}/api/authenticate`,
+	    const user = await api.post({
+	        url:"/api/authenticate",
 	        body : {username, password}
 	    });
 
@@ -19099,7 +19107,7 @@ var app = (function (exports) {
 	const createApi = ({rootPath, setState, getState}) => {
 
 	    const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-	        fetch(url, {
+	        fetch(`${rootPath}${url}`, {
 	            method: method,
 	            headers: {
 	                'Content-Type': 'application/json',
@@ -19153,7 +19161,7 @@ var app = (function (exports) {
 	    }
 	};
 
-	const getNewChildRecordToState = (store, coreApi) =>
+	const getNewChildRecordToState = (store, coreApi, setState) =>
 	            ({recordKey, collectionName,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19186,7 +19194,7 @@ var app = (function (exports) {
 	};
 
 
-	const getNewRecordToState = (store, coreApi) =>
+	const getNewRecordToState = (store, coreApi, setState) =>
 	            ({collectionKey,childRecordType,statePath}) => {
 	    const error = errorHandler(setState);
 	    try {
@@ -19217,19 +19225,21 @@ var app = (function (exports) {
 
 	const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-	const eventHandlers = (store,coreApi) => {
+	const eventHandlers = (store,coreApi,rootPath) => {
 	    
 	    const handler = (parameters, execute) => ({
 	        execute, parameters
 	    });
 
+	    const setStateWithStore = (path, value) => setState(store, path, value);
+
 	    const api = createApi({
-	        rootPath:"",
-	        setState: (path, value) => setState$1(store, path, value),
+	        rootPath:rootPath,
+	        setState: (path, value) => setStateWithStore,
 	        getState: (path, fallback) => getState(store, path, fallback)
 	    });
 
-	    const setStateHandler = ({path, value}) => setState$1(store, path, value);
+	    const setStateHandler = ({path, value}) => setState(store, path, value);
 	    
 	    return {
 	        "Set State": handler(["path", "value"],  setStateHandler),
@@ -19239,11 +19249,11 @@ var app = (function (exports) {
 	        
 	        "Get New Child Record": handler(
 	            ["recordKey", "collectionName", "childRecordType", "statePath"], 
-	            getNewChildRecordToState(store, coreApi)),
+	            getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Get New Record": handler(
 	            ["collectionKey", "childRecordType", "statePath"], 
-	            getNewRecordToState(store, coreApi)),
+	            getNewRecordToState(store, coreApi, setStateWithStore)),
 
 	        "Authenticate": handler(["username", "password"], api.authenticate)
 	    };
@@ -19255,7 +19265,9 @@ var app = (function (exports) {
 	    && !fp_2(prop[0][EVENT_TYPE_MEMBER_NAME]);
 
 	const doNothing = () => {};
-	const setupBinding = (store, rootProps, coreApi) => {
+	doNothing.isPlaceholder=true;
+
+	const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
 
 	    const rootInitialProps = {...rootProps};
 
@@ -19282,6 +19294,17 @@ var app = (function (exports) {
 	                });
 
 	                initialProps[propName] = fallback;
+	            } else if(isBound(val) && takeStateFromContext(val)) {
+
+	                const binding = stateBinding(val);
+	                const fallback = stateFallback(val);
+
+	                initialProps[propName] = getState(
+	                    context || {},
+	                    binding,
+	                    fallback
+	                );
+
 	            } else if(isEventType(val)) {
 
 	                const handlers = { propName, handlers:[] };
@@ -19320,7 +19343,7 @@ var app = (function (exports) {
 	            && rootBindings.componentEventHandlers.length === 0
 	            && rootBindings.boundArrays.length === 0) return;
 
-	        const handlerTypes = eventHandlers(store, coreApi);
+	        const handlerTypes = eventHandlers(store, coreApi, rootPath);
 
 	        const unsubscribe = store.subscribe(rootState => {
 	           
@@ -19350,7 +19373,7 @@ var app = (function (exports) {
 	                    const closuredHandlers = [];
 	                    for(let h of boundHandler.handlers) {
 	                        const handlerType = handlerTypes[h.handlerType];
-	                        closuredHandlers.push((context) => {
+	                        closuredHandlers.push((eventContext) => {
 
 	                            const parameters = {};
 	                            for(let pname in h.parameters) {
@@ -19361,8 +19384,13 @@ var app = (function (exports) {
 	                                    : takeStateFromStore(p)
 	                                    ? getState(
 	                                        s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
-	                                    : getState(
-	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK]);
+	                                    : takeStateFromEventParameters(p)
+	                                    ? getState(
+	                                        eventContext, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : takeStateFromContext(p)
+	                                    ? getState(
+	                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+	                                    : p[BB_STATE_FALLBACK];
 	                                
 	                            }
 	                            handlerType.execute(parameters);
@@ -19557,7 +19585,7 @@ var app = (function (exports) {
 	}
 
 	var hasHandler = { has: has };
-	var allHandlers = { has: has, get: get$2 };
+	var allHandlers = { has: has, get: get$1 };
 	var globals = new Set();
 	var temp;
 
@@ -19572,7 +19600,7 @@ var app = (function (exports) {
 	  return globals.has(key) ? key in target : true;
 	}
 
-	function get$2(target, key) {
+	function get$1(target, key) {
 	  return key in temp ? temp[key] : target[key];
 	}
 
@@ -20279,6 +20307,7 @@ var app = (function (exports) {
 
 	const getNew = app => (collectionKey, recordTypeName) => {
 	  const recordNode = getRecordNode(app, collectionKey);
+	  collectionKey=safeKey(collectionKey);
 	  return apiWrapperSync(
 	    app,
 	    events.recordApi.getNew,
@@ -20324,26 +20353,25 @@ var app = (function (exports) {
 
 	};
 
-	const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
-
 	const createApp = (componentLibraries, appDefinition, user) => {
 
-	    const initialiseComponent = (props, htmlElement) => {
+	    const initialiseComponent = (parentContext) => (props, htmlElement, context) => {
 
 	        const {componentName, libName} = splitName(props._component);
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi);
+	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb},
+	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
 	            hydrate:true
 	        });
 
 	        bind(component);
 
+	        return component;
 	    };
 
 	    const coreApi = createCoreApi(appDefinition, user);
@@ -20379,16 +20407,26 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
-	    const _bb = {
-	        initialiseComponent, 
+	    const bb = () => ({
+	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
+	    });
+
+	    const bbRoot = bb();
+
+	    const bbInContext = (context) => {
+	        if(!context) return bbRoot;
+	        const bbCxt = bb();
+	        bbCxt.context = context;
+	        bbCxt.initialiseComponent=initialiseComponent(context);
+	        return bbCxt;
 	    };
 
-	    return _bb;
+	    return bbRoot;
 
 	};
 

packages/server/builder/bundle.css

@@ -2,46 +2,46 @@ main.svelte-15fmzor{height:100%;width:100%;font-family:"Roboto", Helvetica, Aria
 .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-y7jhgd{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-y7jhgd{flex:0 0 auto;height:25px;background:white;padding:5px;width:100%}.content.svelte-y7jhgd{flex:1 1 auto;width:100%;height:100px}.content.svelte-y7jhgd>div.svelte-y7jhgd{height:100%;width:100%}.topnavitem.svelte-y7jhgd{cursor:pointer;color:var(--secondary50);padding:0px 15px;font-weight:600;font-size:.9rem}.topnavitem.svelte-y7jhgd:hover{color:var(--secondary75);font-weight:600}.active.svelte-y7jhgd{color:var(--primary100);font-weight:900}
 button.svelte-bxuckr{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-bxuckr:hover{color:var(--hovercolor)}button.svelte-bxuckr:active{outline:none}
-.root.svelte-q8uz1n{height:100%;display:flex}.content.svelte-q8uz1n{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-q8uz1n{flex:0 1 auto;width:300px;height:100%}
-.border-normal.svelte-vnon4v{border-radius:var(--borderradiusall)}.border-left.svelte-vnon4v{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-vnon4v{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-vnon4v{border-radius:0}button.svelte-vnon4v{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-vnon4v{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-vnon4v:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-vnon4v:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-vnon4v:hover{background-color:var(--primary10)}.primary-outline.svelte-vnon4v:pressed{background-color:var(--primary25)}.secondary.svelte-vnon4v{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-vnon4v:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-vnon4v:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-vnon4v:hover{background-color:var(--secondary10)}.secondary-outline.svelte-vnon4v:pressed{background-color:var(--secondary25)}.success.svelte-vnon4v{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-vnon4v:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-vnon4v:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-vnon4v:hover{background-color:var(--success10)}.success-outline.svelte-vnon4v:pressed{background-color:var(--success25)}.deletion.svelte-vnon4v{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-vnon4v:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-vnon4v:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-vnon4v:hover{background-color:var(--deletion10)}.deletion-outline.svelte-vnon4v:pressed{background-color:var(--deletion25)}
 .root.svelte-rjo9m0{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%;overflow-y:auto}.ui-nav.svelte-rjo9m0{grid-column-start:uiNav;background-color:var(--secondary5);height:100%}.properties-pane.svelte-rjo9m0{grid-column-start:properties;background-color:var(--secondary5);height:100%;overflow-y:hidden}.pages-list-container.svelte-rjo9m0{padding-top:2rem}.components-nav-header.svelte-rjo9m0{font-size:.9rem}.nav-group-header.svelte-rjo9m0{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-rjo9m0{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-rjo9m0{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-rjo9m0>span.svelte-rjo9m0:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3):hover{color:var(--primary75)}
-h4.svelte-sqtlby{margin-top:20px}
-.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}
-.items-root.svelte-19lmivt{display:flex;flex-direction:column;max-height:100%;height:100%;background-color:var(--secondary5)}.nav-group-header.svelte-19lmivt{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-19lmivt{flex:auto 1 1}.hierarchy.svelte-19lmivt{display:flex;flex-direction:column;flex:1 0 auto;height:100px}.hierarchy-items-container.svelte-19lmivt{flex:1 1 auto;overflow-y:auto}
-.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem}
-.root.svelte-wfv60d{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-wfv60d{flex:0 1 auto}.node-view.svelte-wfv60d{overflow-y:auto;flex:1 1 auto}
-.root.svelte-117bbrk{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-117bbrk{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-117bbrk:hover{color:var(--secondary100)}.component.svelte-117bbrk{margin-left:5px}.selected.svelte-117bbrk{color:var(--primary100);font-weight:bold}.title.svelte-117bbrk{margin-left:10px}
-.uk-modal-dialog.svelte-vwwrf9{border-radius:.3rem}
-.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon}
-.root.svelte-1abif7s{height:100%;display:flex;flex-direction:column}.padding.svelte-1abif7s{padding:1rem 1rem 0rem 1rem}.info-text.svelte-1abif7s{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-1abif7s{padding:2rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(2){grid-column-start:actions}.section-header.svelte-1abif7s{display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary50);font-size:.9rem;font-weight:bold;vertical-align:middle}.component-props-container.svelte-1abif7s{flex:1 1 auto;overflow-y:auto}
-.component-preview.svelte-1jir83x{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-1jir83x{grid-row-start:middle;grid-column-start:middle}
+.border-normal.svelte-vnon4v{border-radius:var(--borderradiusall)}.border-left.svelte-vnon4v{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-vnon4v{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-vnon4v{border-radius:0}button.svelte-vnon4v{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-vnon4v{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-vnon4v:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-vnon4v:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-vnon4v:hover{background-color:var(--primary10)}.primary-outline.svelte-vnon4v:pressed{background-color:var(--primary25)}.secondary.svelte-vnon4v{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-vnon4v:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-vnon4v:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-vnon4v:hover{background-color:var(--secondary10)}.secondary-outline.svelte-vnon4v:pressed{background-color:var(--secondary25)}.success.svelte-vnon4v{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-vnon4v:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-vnon4v:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-vnon4v:hover{background-color:var(--success10)}.success-outline.svelte-vnon4v:pressed{background-color:var(--success25)}.deletion.svelte-vnon4v{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-vnon4v:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-vnon4v:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-vnon4v:hover{background-color:var(--deletion10)}.deletion-outline.svelte-vnon4v:pressed{background-color:var(--deletion25)}
+.root.svelte-q8uz1n{height:100%;display:flex}.content.svelte-q8uz1n{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-q8uz1n{flex:0 1 auto;width:300px;height:100%}
 h1.svelte-16jkjx9{font-size:1.2em}
+.root.svelte-117bbrk{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-117bbrk{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-117bbrk:hover{color:var(--secondary100)}.component.svelte-117bbrk{margin-left:5px}.selected.svelte-117bbrk{color:var(--primary100);font-weight:bold}.title.svelte-117bbrk{margin-left:10px}
+.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon}
 .root.svelte-1r2dipt{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1r2dipt{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1r2dipt:hover{color:var(--secondary)}.component.svelte-1r2dipt{margin-left:5px}.currentfolder.svelte-1r2dipt{color:var(--secondary100)}.selected.svelte-1r2dipt{color:var(--primary100);font-weight:bold}.title.svelte-1r2dipt{margin-left:10px}
+.uk-modal-dialog.svelte-vwwrf9{border-radius:.3rem}
+.component-container.svelte-teqoiq{grid-row-start:middle;grid-column-start:middle;position:relative;overflow:hidden;padding-top:56.25%;margin:auto}.component-container.svelte-teqoiq iframe.svelte-teqoiq{border:0;height:100%;left:0;position:absolute;top:0;width:100%}
+h4.svelte-sqtlby{margin-top:20px}
 .root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
-.root.svelte-18xd5y3{height:100%;padding:2rem}.settings-title.svelte-18xd5y3{font-weight:700}.title.svelte-18xd5y3{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-18xd5y3{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-18xd5y3{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-18xd5y3{cursor:pointer}.edit-button.svelte-18xd5y3{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-18xd5y3:hover{cursor:pointer;color:var(--secondary75)}th.svelte-18xd5y3{text-align:left}td.svelte-18xd5y3{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-18xd5y3{font-size:14px;font-weight:500}thead.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-18xd5y3>tr.svelte-18xd5y3:hover{background-color:var(--primary10)}tbody.svelte-18xd5y3>tr:hover .edit-button.svelte-18xd5y3{color:var(--secondary75)}.index-container.svelte-18xd5y3{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-18xd5y3{color:var(--slate)}.index-name.svelte-18xd5y3{font-weight:bold;color:var(--primary100)}.index-container.svelte-18xd5y3 code.svelte-18xd5y3{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
-.root.svelte-ehsf0i{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-ehsf0i{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-ehsf0i:hover{background-color:var(--secondary10)}
-.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-wgyofl{padding:1.5rem;width:100%;align-items:right}
-.dropdown-background.svelte-11ifkop{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-11ifkop{cursor:pointer;z-index:1}.dropdown-content.svelte-11ifkop{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-11ifkop:not(:focus){display:none}.action-row.svelte-11ifkop{padding:7px 10px;cursor:pointer}.action-row.svelte-11ifkop:hover{background-color:var(--primary100);color:var(--white)}
-.root.svelte-17ju2r{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-17ju2r{padding-top:.5rem;padding-right:.5rem}.title.svelte-17ju2r:hover{background-color:var(--secondary10)}.active.svelte-17ju2r{background-color:var(--primary10)}
-.nav-item.svelte-1i5jqm7{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1i5jqm7:hover{background-color:var(--primary10)}.active.svelte-1i5jqm7{background-color:var(--primary10)}
-.edit-button.svelte-zm41av{cursor:pointer;color:var(--secondary25)}.title.svelte-zm41av{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-zm41av{font-weight:500;font-size:.9rem}tr.svelte-zm41av:hover .edit-button.svelte-zm41av{color:var(--secondary75)}
+.root.svelte-1abif7s{height:100%;display:flex;flex-direction:column}.padding.svelte-1abif7s{padding:1rem 1rem 0rem 1rem}.info-text.svelte-1abif7s{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-1abif7s{padding:2rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(2){grid-column-start:actions}.section-header.svelte-1abif7s{display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary50);font-size:.9rem;font-weight:bold;vertical-align:middle}.component-props-container.svelte-1abif7s{flex:1 1 auto;overflow-y:auto}
+.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem}
+.items-root.svelte-19lmivt{display:flex;flex-direction:column;max-height:100%;height:100%;background-color:var(--secondary5)}.nav-group-header.svelte-19lmivt{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-19lmivt{flex:auto 1 1}.hierarchy.svelte-19lmivt{display:flex;flex-direction:column;flex:1 0 auto;height:100px}.hierarchy-items-container.svelte-19lmivt{flex:1 1 auto;overflow-y:auto}
+.root.svelte-wfv60d{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-wfv60d{flex:0 1 auto}.node-view.svelte-wfv60d{overflow-y:auto;flex:1 1 auto}
+.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}
 .root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0}
-.edit-button.svelte-lhfdtn{cursor:pointer;color:var(--secondary25)}tr.svelte-lhfdtn:hover .edit-button.svelte-lhfdtn{color:var(--secondary75)}.title.svelte-lhfdtn{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-lhfdtn{font-weight:500;font-size:.9rem}
+.component.svelte-qxar5p{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-qxar5p:hover{background-color:var(--primary10)}.component.svelte-qxar5p>.title.svelte-qxar5p{font-size:13pt;color:var(--secondary100)}.component.svelte-qxar5p>.description.svelte-qxar5p{font-size:10pt;color:var(--primary75);font-style:italic}
+.root.svelte-47ohpz{font-size:10pt}.padding.svelte-47ohpz{padding:0 10px}.inherited-title.svelte-47ohpz{padding:1rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
 .info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)}
 .title.svelte-dhe1ge{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-dhe1ge>span.svelte-dhe1ge{margin-left:10px}
-.root.svelte-47ohpz{font-size:10pt}.padding.svelte-47ohpz{padding:0 10px}.inherited-title.svelte-47ohpz{padding:1rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
-.component.svelte-qxar5p{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-qxar5p:hover{background-color:var(--primary10)}.component.svelte-qxar5p>.title.svelte-qxar5p{font-size:13pt;color:var(--secondary100)}.component.svelte-qxar5p>.description.svelte-qxar5p{font-size:10pt;color:var(--primary75);font-style:italic}
-textarea.svelte-di7k4b{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px}
-.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px}
+.root.svelte-17ju2r{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-17ju2r{padding-top:.5rem;padding-right:.5rem}.title.svelte-17ju2r:hover{background-color:var(--secondary10)}.active.svelte-17ju2r{background-color:var(--primary10)}
+.nav-item.svelte-1i5jqm7{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1i5jqm7:hover{background-color:var(--primary10)}.active.svelte-1i5jqm7{background-color:var(--primary10)}
+.dropdown-background.svelte-11ifkop{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-11ifkop{cursor:pointer;z-index:1}.dropdown-content.svelte-11ifkop{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-11ifkop:not(:focus){display:none}.action-row.svelte-11ifkop{padding:7px 10px;cursor:pointer}.action-row.svelte-11ifkop:hover{background-color:var(--primary100);color:var(--white)}
+.edit-button.svelte-zm41av{cursor:pointer;color:var(--secondary25)}.title.svelte-zm41av{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-zm41av{font-weight:500;font-size:.9rem}tr.svelte-zm41av:hover .edit-button.svelte-zm41av{color:var(--secondary75)}
+.root.svelte-18xd5y3{height:100%;padding:2rem}.settings-title.svelte-18xd5y3{font-weight:700}.title.svelte-18xd5y3{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-18xd5y3{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-18xd5y3{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-18xd5y3{cursor:pointer}.edit-button.svelte-18xd5y3{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-18xd5y3:hover{cursor:pointer;color:var(--secondary75)}th.svelte-18xd5y3{text-align:left}td.svelte-18xd5y3{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-18xd5y3{font-size:14px;font-weight:500}thead.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-18xd5y3>tr.svelte-18xd5y3:hover{background-color:var(--primary10)}tbody.svelte-18xd5y3>tr:hover .edit-button.svelte-18xd5y3{color:var(--secondary75)}.index-container.svelte-18xd5y3{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-18xd5y3{color:var(--slate)}.index-name.svelte-18xd5y3{font-weight:bold;color:var(--primary100)}.index-container.svelte-18xd5y3 code.svelte-18xd5y3{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
+.root.svelte-wgyofl{padding:1.5rem;width:100%;align-items:right}
+.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
+.edit-button.svelte-lhfdtn{cursor:pointer;color:var(--secondary25)}tr.svelte-lhfdtn:hover .edit-button.svelte-lhfdtn{color:var(--secondary75)}.title.svelte-lhfdtn{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-lhfdtn{font-weight:500;font-size:.9rem}
+.root.svelte-ehsf0i{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-ehsf0i{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-ehsf0i:hover{background-color:var(--secondary10)}
 input.svelte-9fre0g{margin-right:7px}
-.root.svelte-16sjty9{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-16sjty9{padding:1rem}.option-container.svelte-16sjty9{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
 .root.svelte-1v0yya9{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-1v0yya9{font-size:0.8rem;color:var(--secondary100);font-weight:bold}
 .root.svelte-ogh8o0{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(2){grid-column-start:actions}.selectedname.svelte-ogh8o0{font-weight:bold;color:var(--secondary)}
-textarea.svelte-1kv2xk7{width:300px;height:200px}
+.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px}
+.root.svelte-16sjty9{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-16sjty9{padding:1rem}.option-container.svelte-16sjty9{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
+textarea.svelte-di7k4b{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px}
+.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)}
 .addelement-container.svelte-199q8jr{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-199q8jr:hover{background-color:var(--primary25)}.item-container.svelte-199q8jr{padding-left:3px;background:var(--secondary10)}
 .unbound-container.svelte-jubmd5{display:flex;margin:.5rem 0rem .5rem 0rem}.unbound-container.svelte-jubmd5>.svelte-jubmd5:nth-child(1){width:auto;flex:1 0 auto;font-size:0.8rem;color:var(--secondary100);border-radius:.2rem}.bound-header.svelte-jubmd5{display:flex}.bound-header.svelte-jubmd5>div.svelte-jubmd5:nth-child(1){flex:1 0 auto;width:30px;color:var(--secondary50);padding-left:5px}.binding-prop-label.svelte-jubmd5{color:var(--secondary50)}
-.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)}
+textarea.svelte-1kv2xk7{width:300px;height:200px}
 .type-selector-container.svelte-1b6pj9u{display:flex}.type-selector.svelte-1b6pj9u{border-color:var(--primary50);border-radius:2px;width:50px;flex:1 0 auto}
 
 /*# sourceMappingURL=bundle.css.map */

packages/server/builder/bundle.js

@@ -2237,12 +2237,12 @@
         return alphabetShuffled[index];
     }
 
-    function get$1 () {
+    function get () {
       return alphabet || ORIGINAL;
     }
 
     var alphabet_1 = {
-        get: get$1,
+        get: get,
         characters: characters,
         seed: setSeed$1,
         lookup: lookup,
@@ -20256,7 +20256,7 @@
     }
 
     var hasHandler = { has: has };
-    var allHandlers = { has: has, get: get$2 };
+    var allHandlers = { has: has, get: get$1 };
     var globals = new Set();
     var temp;
 
@@ -20271,7 +20271,7 @@
       return globals.has(key) ? key in target : true;
     }
 
-    function get$2(target, key) {
+    function get$1(target, key) {
       return key in temp ? temp[key] : target[key];
     }
 
@@ -28117,7 +28117,7 @@
 
     });
 
-    const setState$1 = (store, path, value) => {
+    const setState = (store, path, value) => {
 
         if(!path || path.length === 0) return;
 
@@ -28188,6 +28188,8 @@
 
     const ERROR = "##error_message";
 
+    const trimSlash = (str) => str.replace(/^\/+|\/+$/g, '');
+
     const loadRecord = (api) => async ({recordKey, statePath}) => {
 
         if(!recordKey) {
@@ -28200,8 +28202,8 @@
             return;
         } 
 
-        const record = await get({
-            url:`${rootPath}/api/record/${key}`
+        const record = await api.get({
+            url:`/api/record/${trimSlash(key)}`
         });
 
         if(api.isSuccess(record))
@@ -28209,7 +28211,7 @@
     };
 
     const listRecords = api => async ({indexKey, statePath}) => {
-        if(!recordKey) {
+        if(!indexKey) {
             api.error("Load Record: record key not set");
             return;
         }  
@@ -28219,8 +28221,8 @@
             return;
         } 
 
-        const records = get({
-            url:`${rootPath}/api/listRecords/${indexKey}`
+        const records = api.get({
+            url:`/api/listRecords/${trimSlash(indexKey)}`
         });
 
         if(api.isSuccess(records))
@@ -28241,8 +28243,8 @@
             return;
         } 
 
-        const user = await post({
-            url:`${rootPath}/api/authenticate`,
+        const user = await api.post({
+            url:"/api/authenticate",
             body : {username, password}
         });
 
@@ -28254,7 +28256,7 @@
     const createApi = ({rootPath, setState, getState}) => {
 
         const apiCall = (method) => ({url, body, notFound, badRequest, forbidden}) => {
-            fetch(url, {
+            fetch(`${rootPath}${url}`, {
                 method: method,
                 headers: {
                     'Content-Type': 'application/json',
@@ -28308,7 +28310,7 @@
         }
     };
 
-    const getNewChildRecordToState = (store, coreApi) =>
+    const getNewChildRecordToState = (store, coreApi, setState) =>
                 ({recordKey, collectionName,childRecordType,statePath}) => {
         const error = errorHandler(setState);
         try {
@@ -28341,7 +28343,7 @@
     };
 
 
-    const getNewRecordToState = (store, coreApi) =>
+    const getNewRecordToState = (store, coreApi, setState) =>
                 ({collectionKey,childRecordType,statePath}) => {
         const error = errorHandler(setState);
         try {
@@ -28372,19 +28374,21 @@
 
     const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
 
-    const eventHandlers = (store,coreApi) => {
+    const eventHandlers = (store,coreApi,rootPath) => {
         
         const handler = (parameters, execute) => ({
             execute, parameters
         });
 
+        const setStateWithStore = (path, value) => setState(store, path, value);
+
         const api = createApi({
-            rootPath:"",
-            setState: (path, value) => setState$1(store, path, value),
+            rootPath:rootPath,
+            setState: (path, value) => setStateWithStore,
             getState: (path, fallback) => getState(store, path, fallback)
         });
 
-        const setStateHandler = ({path, value}) => setState$1(store, path, value);
+        const setStateHandler = ({path, value}) => setState(store, path, value);
         
         return {
             "Set State": handler(["path", "value"],  setStateHandler),
@@ -28394,11 +28398,11 @@
             
             "Get New Child Record": handler(
                 ["recordKey", "collectionName", "childRecordType", "statePath"], 
-                getNewChildRecordToState(store, coreApi)),
+                getNewChildRecordToState(store, coreApi, setStateWithStore)),
 
             "Get New Record": handler(
                 ["collectionKey", "childRecordType", "statePath"], 
-                getNewRecordToState(store, coreApi)),
+                getNewRecordToState(store, coreApi, setStateWithStore)),
 
             "Authenticate": handler(["username", "password"], api.authenticate)
         };
@@ -28677,6 +28681,7 @@
                 if(propName === "_component") continue;
 
                 const propDef = propsDefinition[propName];
+                if(!propDef) continue;
                 if(propDef.type === "component") {
 
                     const subComponentProps = props[propName];
@@ -28735,13 +28740,82 @@
             body: body && JSON.stringify(body), 
         });
 
-    const post$1 = apiCall("POST");
-    const get$3 = apiCall("GET");
+    const post = apiCall("POST");
+    const get$2 = apiCall("GET");
     const patch = apiCall("PATCH");
     const del = apiCall("DELETE");
 
     var api$1 = {
-        post: post$1, get: get$3, patch, delete:del
+        post, get: get$2, patch, delete:del
+    };
+
+    const rename = (pages, allComponents, oldname, newname) => {
+
+        pages = fp_4(pages);
+        allComponents = fp_4(allComponents);
+        const changedComponents = [];
+
+        const existingWithNewName = getExactComponent(allComponents, newname);
+        if(existingWithNewName) return {
+            allComponents, pages, error: "Component by that name already exists"
+        };
+
+        const traverseProps = (props) => {
+            let hasEdited = false;
+            if(props._component && props._component === oldname) {
+                props._component = newname;
+                hasEdited = true;
+            } 
+
+            for(let propName in props) {
+                const prop = props[propName];
+                if(fp_60(prop) && prop._component) {
+                    hasEdited = traverseProps(prop) || hasEdited;
+                }
+                if(fp_26(prop)) {
+                    for(let element of prop) {
+                        hasEdited = traverseProps(element) || hasEdited;
+                    }
+                }
+            }
+            return hasEdited;
+        };
+
+
+        for(let component of allComponents) {
+            
+            if(isRootComponent(component)) {
+                continue;
+            }
+
+            let hasEdited = false;
+
+            if(component.name === oldname) {
+                component.name = newname;
+                hasEdited = true;
+            }
+
+            if(component.inherits === oldname) {
+                component.inherits = newname;
+                hasEdited = true;
+            }
+            
+            hasEdited = traverseProps(component.props) || hasEdited;
+
+            if(hasEdited && component.name !== newname)
+                changedComponents.push(component.name);
+        }
+
+        for(let pageName in pages) {
+            const page = pages[pageName];
+            if(page.appBody === oldname) {
+                page.appBody = newname;
+            }
+        }
+
+        return {allComponents, pages, changedComponents};
+
+
     };
 
     const loadLibs = async (appName, appPackage) => {
@@ -28861,7 +28935,7 @@
         initial.pages = pkg.pages;
         initial.hasAppPackage = true;
         initial.hierarchy = pkg.appDefinition.hierarchy;
-        initial.accessLevels = pkg.accessLevels;
+        initial.accessLevels = pkg.accessLevels.levels;
         initial.derivedComponents = pkg.derivedComponents;
         initial.allComponents = combineComponents(
             pkg.derivedComponents, pkg.rootComponents);
@@ -29195,6 +29269,7 @@
 
             s.currentFrontEndItem = newComponentInfo.component;
             s.currentComponentInfo = newComponentInfo;
+            s.currentFrontEndType = "component";
             s.currentComponentIsNew = true;
             return s;
         });
@@ -29226,21 +29301,33 @@
     const renameDerivedComponent = store => (oldname, newname) => {
         store.update(s => {
 
-            const component = pipe$1(s.allComponents, [
-                fp_13(c => c.name === name)
-            ]);
+            const {
+                allComponents, pages, error, changedComponents
+            } = rename(s.pages, s.allComponents, oldname, newname);
 
-            component.name = newname;
-
-            const allComponents = pipe$1(s.allComponents, [
-                fp_8(c => c.name !== name),
-                fp_34([component])
-            ]);
+            if(error) {
+                // should really do something with this
+                return s;
+            }
 
             s.allComponents = allComponents;
+            s.pages = pages;
+            if(s.currentFrontEndItem.name === oldname)
+                s.currentFrontEndItem.name = newname;
+
+            const saveAllChanged = async () => {
+                for(let cname of changedComponents) {
+                    const changedComponent = getExactComponent(allComponents, cname);
+                    await api$1.post(`/_builder/api/${s.appname}/derivedcomponent`, changedComponent);
+                }
+            };
 
             api$1.patch(`/_builder/api/${s.appname}/derivedcomponent`, {
                 oldname, newname
+            })
+            .then(() => saveAllChanged())
+            .then(() => {
+                savePackage(store, s);
             });        
 
             return s;
@@ -29249,8 +29336,8 @@
 
     const savePage = store => async page => {
         store.update(s => {
-            if(s.currentFrontEndType === "page" || !s.currentPageName) {
-                return;
+            if(s.currentFrontEndType !== "page" || !s.currentPageName) {
+                return s;
             }
 
             s.pages[s.currentPageName] = page;
@@ -29368,8 +29455,9 @@
         api$1.post(`/_builder/api/${s.appname}/appPackage`, data);
     };
 
-    const setCurrentComponent = store => component => {
+    const setCurrentComponent = store => componentName => {
         store.update(s => {
+            const component = getExactComponent(s.allComponents, componentName);
             s.currentFrontEndItem = component;
             s.currentFrontEndType = "component";
             s.currentComponentIsNew = false;
@@ -32336,9 +32424,9 @@
     			span1 = element("span");
     			t1 = text(t1_value);
     			t2 = space();
-    			add_location(span0, file$4, 139, 8, 3844);
+    			add_location(span0, file$4, 139, 8, 3849);
     			attr_dev(span1, "class", "title svelte-1r2dipt");
-    			add_location(span1, file$4, 140, 8, 3896);
+    			add_location(span1, file$4, 140, 8, 3901);
     			attr_dev(div, "class", "hierarchy-item component svelte-1r2dipt");
     			toggle_class(div, "selected", ctx.isComponentSelected(ctx.$store.currentFrontEndType, ctx.$store.currentFrontEndItem, ctx.component.component));
     			add_location(div, file$4, 137, 4, 3594);
@@ -32610,7 +32698,7 @@
 
     	const click_handler = ({ folder }) => expandFolder(folder);
 
-    	const click_handler_1 = ({ component }) => store.setCurrentComponent(component.component);
+    	const click_handler_1 = ({ component }) => store.setCurrentComponent(component.component.name);
 
     	$$self.$set = $$props => {
     		if ('components' in $$props) $$invalidate('components', components = $$props.components);
@@ -46376,7 +46464,7 @@
     	var current;
 
     	var iconbutton = new IconButton({ props: { icon: "plus" }, $$inline: true });
-    	iconbutton.$on("click", ctx.chooseComponent);
+    	iconbutton.$on("click", ctx.click_handler_2);
 
     	const block = {
     		c: function create() {
@@ -46413,10 +46501,10 @@
     	var t, current;
 
     	var iconbutton0 = new IconButton({ props: { icon: "edit" }, $$inline: true });
-    	iconbutton0.$on("click", ctx.onEdit);
+    	iconbutton0.$on("click", ctx.click_handler);
 
     	var iconbutton1 = new IconButton({ props: { icon: "trash" }, $$inline: true });
-    	iconbutton1.$on("click", ctx.clearComponent);
+    	iconbutton1.$on("click", ctx.click_handler_1);
 
     	const block = {
     		c: function create() {
@@ -46481,9 +46569,9 @@
     			div1 = element("div");
     			buttongroup.$$.fragment.c();
     			attr_dev(div0, "class", "uk-modal-body");
-    			add_location(div0, file$b, 98, 8, 2428);
+    			add_location(div0, file$b, 98, 8, 2452);
     			attr_dev(div1, "class", "uk-modal-footer");
-    			add_location(div1, file$b, 101, 8, 2514);
+    			add_location(div1, file$b, 101, 8, 2538);
     		},
 
     		m: function mount(target, anchor) {
@@ -46540,7 +46628,7 @@
     			div = element("div");
     			componentsearch.$$.fragment.c();
     			attr_dev(div, "class", "uk-modal-body");
-    			add_location(div, file$b, 94, 8, 2258);
+    			add_location(div, file$b, 94, 8, 2282);
     		},
 
     		m: function mount(target, anchor) {
@@ -46756,10 +46844,10 @@
     			attr_dev(div2, "class", "root uk-form-controls svelte-ogh8o0");
     			add_location(div2, file$b, 71, 0, 1592);
     			attr_dev(div3, "class", "uk-modal-dialog");
-    			add_location(div3, file$b, 91, 4, 2172);
+    			add_location(div3, file$b, 91, 4, 2196);
     			attr_dev(div4, "uk-modal", "");
     			attr_dev(div4, "class", "svelte-ogh8o0");
-    			add_location(div4, file$b, 90, 0, 2128);
+    			add_location(div4, file$b, 90, 0, 2152);
     		},
 
     		l: function claim(nodes) {
@@ -46933,6 +47021,12 @@
     		if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`<ComponentPropSelector> was created with unknown prop '${key}'`);
     	});
 
+    	const click_handler = () => onEdit();
+
+    	const click_handler_1 = () => clearComponent();
+
+    	const click_handler_2 = () => chooseComponent();
+
     	function div4_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			$$invalidate('modalElement', modalElement = $$value);
@@ -46986,6 +47080,9 @@
     		confirmClearComponent,
     		componentSelected,
     		shortName,
+    		click_handler,
+    		click_handler_1,
+    		click_handler_2,
     		div4_binding
     	};
     }
@@ -50754,7 +50851,7 @@
 
     const file$j = "src\\userInterface\\EditComponent.svelte";
 
-    // (172:4) {:else}
+    // (187:4) {:else}
     function create_else_block$4(ctx) {
     	var div2, div0, span0, t1, t2, t3, div1, span1, t5, current, dispose;
 
@@ -50792,14 +50889,14 @@
     			t5 = space();
     			propsview.$$.fragment.c();
     			set_style(span0, "margin-right", "7px");
-    			add_location(span0, file$j, 175, 12, 5076);
+    			add_location(span0, file$j, 190, 12, 5476);
     			attr_dev(div0, "class", "section-header padding svelte-1abif7s");
-    			add_location(div0, file$j, 174, 8, 4957);
-    			add_location(span1, file$j, 197, 12, 5975);
+    			add_location(div0, file$j, 189, 8, 5357);
+    			add_location(span1, file$j, 214, 12, 6496);
     			attr_dev(div1, "class", "section-header padding svelte-1abif7s");
-    			add_location(div1, file$j, 196, 8, 5926);
+    			add_location(div1, file$j, 213, 8, 6447);
     			attr_dev(div2, "class", "component-props-container svelte-1abif7s");
-    			add_location(div2, file$j, 172, 4, 4908);
+    			add_location(div2, file$j, 187, 4, 5308);
     			dispose = listen_dev(div0, "click", ctx.click_handler);
     		},
 
@@ -50879,13 +50976,13 @@
     			dispose();
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_else_block$4.name, type: "else", source: "(172:4) {:else}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_else_block$4.name, type: "else", source: "(187:4) {:else}", ctx });
     	return block;
     }
 
-    // (167:4) {#if editingComponentInstance}
+    // (180:4) {#if editingComponentInstance}
     function create_if_block$9(ctx) {
-    	var current;
+    	var div, current;
 
     	var componentinstanceeditor = new ComponentInstanceEditor({
     		props: {
@@ -50899,11 +50996,15 @@
 
     	const block = {
     		c: function create() {
+    			div = element("div");
     			componentinstanceeditor.$$.fragment.c();
+    			attr_dev(div, "class", "component-props-container svelte-1abif7s");
+    			add_location(div, file$j, 180, 4, 4945);
     		},
 
     		m: function mount(target, anchor) {
-    			mount_component(componentinstanceeditor, target, anchor);
+    			insert_dev(target, div, anchor);
+    			mount_component(componentinstanceeditor, div, null);
     			current = true;
     		},
 
@@ -50927,66 +51028,50 @@
     		},
 
     		d: function destroy(detaching) {
-    			destroy_component(componentinstanceeditor, detaching);
+    			if (detaching) {
+    				detach_dev(div);
+    			}
+
+    			destroy_component(componentinstanceeditor);
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block$9.name, type: "if", source: "(167:4) {#if editingComponentInstance}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block$9.name, type: "if", source: "(180:4) {#if editingComponentInstance}", ctx });
     	return block;
     }
 
-    // (180:8) {#if componentDetailsExpanded}
+    // (195:8) {#if componentDetailsExpanded}
     function create_if_block_1$4(ctx) {
-    	var div1, div0, updating_text, t0, updating_text_1, t1, updating_text_2, current;
+    	var div1, div0, t0, t1, current;
 
-    	function textbox0_text_binding(value) {
-    		ctx.textbox0_text_binding.call(null, value);
-    		updating_text = true;
-    		add_flush_callback(() => updating_text = false);
-    	}
-
-    	let textbox0_props = {
+    	var textbox0 = new Textbox({
+    		props: {
     		label: "Name",
     		infoText: "use forward slash to store in subfolders",
-    		disabled: !ctx.$store.currentComponentIsNew,
+    		text: ctx.name,
     		hasError: !!ctx.nameInvalid
-    	};
-    	if (ctx.name !== void 0) {
-    		textbox0_props.text = ctx.name;
-    	}
-    	var textbox0 = new Textbox({ props: textbox0_props, $$inline: true });
+    	},
+    		$$inline: true
+    	});
+    	textbox0.$on("change", ctx.change_handler);
 
-    	binding_callbacks.push(() => bind(textbox0, 'text', textbox0_text_binding));
+    	var textbox1 = new Textbox({
+    		props: {
+    		label: "Description",
+    		text: ctx.description
+    	},
+    		$$inline: true
+    	});
+    	textbox1.$on("change", ctx.change_handler_1);
 
-    	function textbox1_text_binding(value_1) {
-    		ctx.textbox1_text_binding.call(null, value_1);
-    		updating_text_1 = true;
-    		add_flush_callback(() => updating_text_1 = false);
-    	}
-
-    	let textbox1_props = { label: "Description" };
-    	if (ctx.description !== void 0) {
-    		textbox1_props.text = ctx.description;
-    	}
-    	var textbox1 = new Textbox({ props: textbox1_props, $$inline: true });
-
-    	binding_callbacks.push(() => bind(textbox1, 'text', textbox1_text_binding));
-
-    	function textbox2_text_binding(value_2) {
-    		ctx.textbox2_text_binding.call(null, value_2);
-    		updating_text_2 = true;
-    		add_flush_callback(() => updating_text_2 = false);
-    	}
-
-    	let textbox2_props = {
+    	var textbox2 = new Textbox({
+    		props: {
     		label: "Tags",
-    		infoText: "comma separated"
-    	};
-    	if (ctx.tagsString !== void 0) {
-    		textbox2_props.text = ctx.tagsString;
-    	}
-    	var textbox2 = new Textbox({ props: textbox2_props, $$inline: true });
-
-    	binding_callbacks.push(() => bind(textbox2, 'text', textbox2_text_binding));
+    		infoText: "comma separated",
+    		text: ctx.tagsString
+    	},
+    		$$inline: true
+    	});
+    	textbox2.$on("change", ctx.change_handler_2);
 
     	const block = {
     		c: function create() {
@@ -50998,9 +51083,9 @@
     			t1 = space();
     			textbox2.$$.fragment.c();
     			attr_dev(div0, "class", "info-text svelte-1abif7s");
-    			add_location(div0, file$j, 181, 12, 5323);
+    			add_location(div0, file$j, 196, 12, 5723);
     			attr_dev(div1, "class", "padding svelte-1abif7s");
-    			add_location(div1, file$j, 180, 8, 5289);
+    			add_location(div1, file$j, 195, 8, 5689);
     		},
 
     		m: function mount(target, anchor) {
@@ -51016,23 +51101,16 @@
 
     		p: function update(changed, ctx) {
     			var textbox0_changes = {};
-    			if (changed.$store) textbox0_changes.disabled = !ctx.$store.currentComponentIsNew;
+    			if (changed.name) textbox0_changes.text = ctx.name;
     			if (changed.nameInvalid) textbox0_changes.hasError = !!ctx.nameInvalid;
-    			if (!updating_text && changed.name) {
-    				textbox0_changes.text = ctx.name;
-    			}
     			textbox0.$set(textbox0_changes);
 
     			var textbox1_changes = {};
-    			if (!updating_text_1 && changed.description) {
-    				textbox1_changes.text = ctx.description;
-    			}
+    			if (changed.description) textbox1_changes.text = ctx.description;
     			textbox1.$set(textbox1_changes);
 
     			var textbox2_changes = {};
-    			if (!updating_text_2 && changed.tagsString) {
-    				textbox2_changes.text = ctx.tagsString;
-    			}
+    			if (changed.tagsString) textbox2_changes.text = ctx.tagsString;
     			textbox2.$set(textbox2_changes);
     		},
 
@@ -51066,11 +51144,11 @@
     			destroy_component(textbox2);
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block_1$4.name, type: "if", source: "(180:8) {#if componentDetailsExpanded}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block_1$4.name, type: "if", source: "(195:8) {#if componentDetailsExpanded}", ctx });
     	return block;
     }
 
-    // (227:16) <Button grouped                          on:click={confirmDeleteComponent}>
+    // (244:16) <Button grouped                          on:click={confirmDeleteComponent}>
     function create_default_slot_2$1(ctx) {
     	var t;
 
@@ -51089,11 +51167,11 @@
     			}
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot_2$1.name, type: "slot", source: "(227:16) <Button grouped                          on:click={confirmDeleteComponent}>", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot_2$1.name, type: "slot", source: "(244:16) <Button grouped                          on:click={confirmDeleteComponent}>", ctx });
     	return block;
     }
 
-    // (231:16) <Button grouped                          on:click={hideDialog}                          color="secondary" >
+    // (248:16) <Button grouped                          on:click={hideDialog}                          color="secondary" >
     function create_default_slot_1$1(ctx) {
     	var t;
 
@@ -51112,11 +51190,11 @@
     			}
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot_1$1.name, type: "slot", source: "(231:16) <Button grouped                          on:click={hideDialog}                          color=\"secondary\" >", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot_1$1.name, type: "slot", source: "(248:16) <Button grouped                          on:click={hideDialog}                          color=\"secondary\" >", ctx });
     	return block;
     }
 
-    // (226:12) <ButtonGroup>
+    // (243:12) <ButtonGroup>
     function create_default_slot$1(ctx) {
     	var t, current;
 
@@ -51190,12 +51268,12 @@
     			destroy_component(button1, detaching);
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot$1.name, type: "slot", source: "(226:12) <ButtonGroup>", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot$1.name, type: "slot", source: "(243:12) <ButtonGroup>", ctx });
     	return block;
     }
 
     function create_fragment$i(ctx) {
-    	var div3, div2, div0, t0, t1, div1, t2, t3, current_block_type_index, if_block, t4, div8, div7, div4, t5, t6_value = ctx.component.name + "", t6, t7, t8, div5, t10, div6, current;
+    	var div3, div2, div0, t0, t1, div1, t2, t3, current_block_type_index, if_block, t4, div8, div7, div4, t5, t6, t7, t8, div5, t10, div6, current;
 
     	var iconbutton0 = new IconButton({
     		props: {
@@ -51258,7 +51336,7 @@
     			div7 = element("div");
     			div4 = element("div");
     			t5 = text("Delete ");
-    			t6 = text(t6_value);
+    			t6 = text(ctx.name);
     			t7 = text(" ?");
     			t8 = space();
     			div5 = element("div");
@@ -51267,24 +51345,24 @@
     			div6 = element("div");
     			buttongroup.$$.fragment.c();
     			attr_dev(div0, "class", "svelte-1abif7s");
-    			add_location(div0, file$j, 153, 8, 4124);
+    			add_location(div0, file$j, 166, 8, 4456);
     			attr_dev(div1, "class", "svelte-1abif7s");
-    			add_location(div1, file$j, 154, 8, 4155);
+    			add_location(div1, file$j, 167, 8, 4487);
     			attr_dev(div2, "class", "title svelte-1abif7s");
-    			add_location(div2, file$j, 152, 4, 4096);
+    			add_location(div2, file$j, 165, 4, 4428);
     			attr_dev(div3, "class", "root svelte-1abif7s");
-    			add_location(div3, file$j, 150, 0, 4072);
+    			add_location(div3, file$j, 163, 0, 4404);
     			attr_dev(div4, "class", "uk-modal-header");
-    			add_location(div4, file$j, 216, 8, 6300);
+    			add_location(div4, file$j, 233, 8, 6821);
     			attr_dev(div5, "class", "uk-modal-body");
-    			add_location(div5, file$j, 220, 8, 6393);
+    			add_location(div5, file$j, 237, 8, 6904);
     			attr_dev(div6, "class", "uk-modal-footer");
-    			add_location(div6, file$j, 224, 8, 6506);
+    			add_location(div6, file$j, 241, 8, 7017);
     			attr_dev(div7, "class", "uk-modal-dialog");
-    			add_location(div7, file$j, 214, 4, 6261);
+    			add_location(div7, file$j, 231, 4, 6782);
     			attr_dev(div8, "uk-modal", "");
     			attr_dev(div8, "class", "svelte-1abif7s");
-    			add_location(div8, file$j, 213, 0, 6217);
+    			add_location(div8, file$j, 230, 0, 6738);
     		},
 
     		l: function claim(nodes) {
@@ -51344,8 +51422,8 @@
     				if_block.m(div3, null);
     			}
 
-    			if ((!current || changed.component) && t6_value !== (t6_value = ctx.component.name + "")) {
-    				set_data_dev(t6, t6_value);
+    			if (!current || changed.name) {
+    				set_data_dev(t6, ctx.name);
     			}
 
     			var buttongroup_changes = {};
@@ -51400,11 +51478,6 @@
     }
 
     function instance$i($$self, $$props, $$invalidate) {
-    	let $store;
-
-    	validate_store(store, 'store');
-    	component_subscribe($$self, store, $$value => { $store = $$value; $$invalidate('$store', $store); });
-
     	
 
     let component;
@@ -51421,12 +51494,15 @@
     let editingComponentArrayIndex;
     let editingComponentArrayPropName;
     let editingComponentInstanceTitle;
-
+    let originalName="";
     let allComponents;
+    let ignoreStore = false;
 
     store.subscribe(s => {
-        $$invalidate('component', component = s.currentFrontEndItem);
+        if(ignoreStore) return;
+        component = s.currentFrontEndItem;
         if(!component) return;
+        originalName = component.name;
         $$invalidate('name', name = component.name);
         $$invalidate('description', description = component.description);
         $$invalidate('tagsString', tagsString = fp_41(", ")(component.tags));
@@ -51437,16 +51513,26 @@
 
     const save = () => {
 
-        if(!validate()) return;
+        ignoreStore = true;
+        if(!validate()) {
+            ignoreStore = false;
+            return;
+        }
 
-        $$invalidate('component', component.name = name, component);
-        $$invalidate('component', component.description = description, component);
-        $$invalidate('component', component.tags = pipe$1(tagsString, [
+        component.name = originalName;
+        component.description = description;
+        component.tags = pipe$1(tagsString, [
             fp_5(","),
             fp_7(s => s.trim())
-        ]), component);
+        ]);
 
         store.saveDerivedComponent(component);
+
+        ignoreStore = false;
+        // now do the rename
+        if(name !== originalName) {
+            store.renameDerivedComponent(originalName, name);
+        }
     };
 
     const deleteComponent = () => {
@@ -51465,7 +51551,7 @@
     const updateComponent = doChange => {
         const newComponent = fp_4(component);
         doChange(newComponent);
-        $$invalidate('component', component = newComponent);
+        component = newComponent;
         $$invalidate('componentInfo', componentInfo = getComponentInfo(allComponents, newComponent));
     };
 
@@ -51524,20 +51610,11 @@
 
     	const click_handler = () => $$invalidate('componentDetailsExpanded', componentDetailsExpanded = !componentDetailsExpanded);
 
-    	function textbox0_text_binding(value) {
-    		name = value;
-    		$$invalidate('name', name);
-    	}
+    	const change_handler = (ev) => $$invalidate('name', name = ev.target.value);
 
-    	function textbox1_text_binding(value_1) {
-    		description = value_1;
-    		$$invalidate('description', description);
-    	}
+    	const change_handler_1 = (ev) => $$invalidate('description', description = ev.target.value);
 
-    	function textbox2_text_binding(value_2) {
-    		tagsString = value_2;
-    		$$invalidate('tagsString', tagsString);
-    	}
+    	const change_handler_2 = (ev) => $$invalidate('tagsString', tagsString = ev.target.value);
 
     	function div8_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -51550,7 +51627,7 @@
     	};
 
     	$$self.$inject_state = $$props => {
-    		if ('component' in $$props) $$invalidate('component', component = $$props.component);
+    		if ('component' in $$props) component = $$props.component;
     		if ('name' in $$props) $$invalidate('name', name = $$props.name);
     		if ('description' in $$props) $$invalidate('description', description = $$props.description);
     		if ('tagsString' in $$props) $$invalidate('tagsString', tagsString = $$props.tagsString);
@@ -51564,9 +51641,10 @@
     		if ('editingComponentArrayIndex' in $$props) editingComponentArrayIndex = $$props.editingComponentArrayIndex;
     		if ('editingComponentArrayPropName' in $$props) editingComponentArrayPropName = $$props.editingComponentArrayPropName;
     		if ('editingComponentInstanceTitle' in $$props) $$invalidate('editingComponentInstanceTitle', editingComponentInstanceTitle = $$props.editingComponentInstanceTitle);
+    		if ('originalName' in $$props) originalName = $$props.originalName;
     		if ('allComponents' in $$props) allComponents = $$props.allComponents;
+    		if ('ignoreStore' in $$props) ignoreStore = $$props.ignoreStore;
     		if ('shortName' in $$props) $$invalidate('shortName', shortName = $$props.shortName);
-    		if ('$store' in $$props) store.set($store);
     	};
 
     	let shortName;
@@ -51576,7 +51654,6 @@
     	};
 
     	return {
-    		component,
     		name,
     		description,
     		tagsString,
@@ -51596,11 +51673,10 @@
     		componentInstanceCancelEdit,
     		componentInstancePropsChanged,
     		shortName,
-    		$store,
     		click_handler,
-    		textbox0_text_binding,
-    		textbox1_text_binding,
-    		textbox2_text_binding,
+    		change_handler,
+    		change_handler_1,
+    		change_handler_2,
     		div8_binding
     	};
     }
@@ -51959,12 +52035,11 @@
     const file$m = "src\\userInterface\\CurrentItemPreview.svelte";
 
     function create_fragment$l(ctx) {
-    	var div1, div0, iframe, iframe_srcdoc_value;
+    	var div, iframe, iframe_srcdoc_value;
 
     	const block = {
     		c: function create() {
-    			div1 = element("div");
-    			div0 = element("div");
+    			div = element("div");
     			iframe = element("iframe");
     			set_style(iframe, "height", "100%");
     			set_style(iframe, "width", "100%");
@@ -51980,15 +52055,21 @@
             module.loadBudibase();
         })        
     </script>
+    <style>
+
+        body {
+            box-sizing: border-box;
+            padding: 20px;
+        }
+    </style>
 </head>
 <body>
 </body>
 </html>`);
-    			add_location(iframe, file$m, 44, 8, 1261);
-    			attr_dev(div0, "class", "component-container svelte-1jir83x");
-    			add_location(div0, file$m, 43, 4, 1219);
-    			attr_dev(div1, "class", "component-preview svelte-1jir83x");
-    			add_location(div1, file$m, 42, 0, 1182);
+    			attr_dev(iframe, "class", "svelte-teqoiq");
+    			add_location(iframe, file$m, 44, 4, 1221);
+    			attr_dev(div, "class", "component-container svelte-teqoiq");
+    			add_location(div, file$m, 43, 0, 1183);
     		},
 
     		l: function claim(nodes) {
@@ -51996,9 +52077,8 @@
     		},
 
     		m: function mount(target, anchor) {
-    			insert_dev(target, div1, anchor);
-    			append_dev(div1, div0);
-    			append_dev(div0, iframe);
+    			insert_dev(target, div, anchor);
+    			append_dev(div, iframe);
     		},
 
     		p: function update(changed, ctx) {
@@ -52013,6 +52093,13 @@
             module.loadBudibase();
         })        
     </script>
+    <style>
+
+        body {
+            box-sizing: border-box;
+            padding: 20px;
+        }
+    </style>
 </head>
 <body>
 </body>
@@ -52026,7 +52113,7 @@
 
     		d: function destroy(detaching) {
     			if (detaching) {
-    				detach_dev(div1);
+    				detach_dev(div);
     			}
     		}
     	};
@@ -64667,7 +64754,7 @@
     			div = element("div");
     			checkbox.$$.fragment.c();
     			t = space();
-    			add_location(div, file$J, 79, 8, 1844);
+    			add_location(div, file$J, 79, 8, 1883);
     		},
 
     		m: function mount(target, anchor) {
@@ -64892,8 +64979,8 @@
     			t2 = space();
     			buttongroup.$$.fragment.c();
     			attr_dev(form, "class", "uk-form-horizontal");
-    			add_location(form, file$J, 74, 4, 1691);
-    			add_location(div, file$J, 70, 0, 1652);
+    			add_location(form, file$J, 74, 4, 1730);
+    			add_location(div, file$J, 70, 0, 1691);
     		},
 
     		l: function claim(nodes) {
@@ -65031,8 +65118,8 @@
 
         const newLevels = 
             isNew 
-            ? [...allLevels, clonedLevel]
-            : [...fp_8(l => l.name !== level.name)(allLevels), clonedLevel];
+            ? [...allLevels.levels, clonedLevel]
+            : [...fp_8(l => l.name !== level.name)(allLevels.levels), clonedLevel];
 
         $$invalidate('errors', errors = validateAccessLevels$1(
             hierarchy,
@@ -65051,7 +65138,7 @@
         if(hasPermission) {
             clonedLevel.permissions.push(perm);
         } else {
-            $$invalidate('clonedLevel', clonedLevel.permissions = fp_8(p => !matchPermissions(p, perm)), clonedLevel);
+            $$invalidate('clonedLevel', clonedLevel.permissions = fp_8(p => !matchPermissions(p, perm))(clonedLevel.permissions), clonedLevel);
         }
     };
 

packages/server/middleware/routers.js

@@ -280,6 +280,11 @@ module.exports = (config, app) => {
         ctx.body = await ctx.instance.authApi.getAccessLevels();
         ctx.response.status = StatusCodes.OK;
     })
+    .get("/:appname/api/listRecords/:indexkey", async (ctx) => {
+        ctx.body = await ctx.instance.indexApi.listItems(
+            ctx.params.indexkey);
+        ctx.response.status = StatusCodes.OK;
+    })
     .post("/:appname/api/listRecords/:indexkey", async (ctx) => {
         ctx.body = await ctx.instance.indexApi.listItems(
             ctx.request.body.indexKey,

packages/standard-components/components.json

@@ -76,7 +76,8 @@
 			"containerClass":"string",
 			"itemContainerClass":"string",
 			"data": "state",
-			"dataItemComponent": "component"
+			"dataItemComponent": "component",
+			"onLoad": "event"
 		},
 		"tags": ["div", "container", "layout", "panel"]
 	},
@@ -153,6 +154,12 @@
 			"font": "string",
 			"color": "string",
 			"padding": "string",
+			"margin": "string",
+			"hoverColor": "string",
+			"hoverBackground": "string",
+			"height":"string",
+			"width":"string",
+			"onClick": "event",
 			"display": {
 				"type": "options", 
 				"default":"inline", 
@@ -182,7 +189,9 @@
 					"title": "string",
 					"component": "component"
 				}
-			}
+			},
+			"selectedItem":"string",
+			"hideNavBar":"bool"
 
 		},
 		"tags": ["nav", "navigation", "sidebar"]

packages/standard-components/public/bundle.css

@@ -1,12 +1,13 @@
 #current_component.svelte-1xqz9vm{height:100%;width:100%}
+.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%}
 .root.svelte-crnq0a{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-crnq0a{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-crnq0a{margin-bottom:20px
 }.logo-container.svelte-crnq0a>img.svelte-crnq0a{max-width:100%}.login-button-container.svelte-crnq0a{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-crnq0a{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-crnq0a{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-crnq0a{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-crnq0a{grid-column-start:control;padding:5px 10px}.default-input.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default-button.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default-button.svelte-crnq0a:active{background-color:#ddd}.default-button.svelte-crnq0a:focus{border-color:#666}
-.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%}
-.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
 .root.svelte-10kw8to{display:grid}
-.root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content}
+.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
 .table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer}
+.root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content}
 .horizontal.svelte-osi0db{display:inline-block}.vertical.svelte-osi0db{display:block}
+.panel.svelte-6yfcjx:hover{background:var(--hoverBackground);color:var(--hoverColor)}
 .default.svelte-1q8lga0{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-1q8lga0:active{background-color:#ddd}.default.svelte-1q8lga0:focus{border-color:#666}
 
 /*# sourceMappingURL=bundle.css.map */

packages/standard-components/public/bundle.css.map

@@ -3,26 +3,28 @@
   "file": "bundle.css",
   "sources": [
     "..\\src\\Test\\TestApp.svelte",
-    "..\\src\\Login.svelte",
     "..\\src\\Form.svelte",
-    "..\\src\\Textbox.svelte",
+    "..\\src\\Login.svelte",
     "..\\src\\Grid.svelte",
-    "..\\src\\Nav.svelte",
+    "..\\src\\Textbox.svelte",
     "..\\src\\Table.svelte",
+    "..\\src\\Nav.svelte",
     "..\\src\\StackPanel.svelte",
+    "..\\src\\Panel.svelte",
     "..\\src\\Button.svelte"
   ],
   "sourcesContent": [
-    "<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _bb;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _bb = a);\n\nconst testProps = props.boundStackPanel;\n\nlet currentComponent;\n\n$: {\n    if(_bb && currentComponent) {\n        _bb.initialiseComponent(testProps, currentComponent);\n    }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _bb}\n\n<div id=\"current_component\" bind:this={currentComponent}>\n</div>\n\n{/await}\n\n\n<style>\n#current_component {\n    height: 100%;\n    width: 100%;\n}\n</style>\n\n",
-    "<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\nexport let inputClass=\"\"\n\nexport let _bb;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\nlet _logo = \"\";\nlet _buttonClass = \"\";\nlet _inputClass = \"\";\n\n$: {\n    _logo = _bb.relativeUrl(logo);\n    _buttonClass = buttonClass || \"default-button\";\n    _inputClass = inputClass || \"default-input\";\n}\n\nconst login = () => {\n    busy = true;\n    _bb.api.post(\"/api/authenticate\", {username, password})\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            return r.json();\n        } else {\n            incorrect = true;\n            return;\n        }\n    })\n    .then(user => {\n        if(user) {\n            localStorage.setItem(\"budibase:user\", user);\n            location.reload();\n        }\n    })\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"content\">\n\n        {#if _logo}\n        <div class=\"logo-container\">\n            <img src={_logo} alt=\"logo\"/>\n        </div>\n        {/if}\n\n        <div class=\"form-root\">\n            <div class=\"label\">\n                {usernameLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={username} type=\"text\" class={_inputClass}/>\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={password} type=\"password\" class={_inputClass}/>\n            </div>\n        </div>\n\n        <div class=\"login-button-container\">\n            <button disabled={busy} \n                    on:click={login}\n                    class={_buttonClass}>\n                    {loginButtonLabel}\n            </button>\n        </div>\n\n        {#if incorrect}\n        <div class=\"incorrect-details-panel\">\n            Incorrect username or password\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    display:grid;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n    grid-column-start: middle;\n    grid-row-start: center;\n    width: 400px;\n}\n\n.logo-container {\n    margin-bottom: 20px\n}\n\n.logo-container > img {\n    max-width: 100%;\n}\n\n.login-button-container {\n    text-align: right;\n    margin-top: 20px;\n}\n\n.incorrect-details-panel {\n    margin-top: 30px;\n    padding: 10px;\n    border-style: solid;\n    border-width: 1px;\n    border-color: maroon;\n    border-radius: 1px;\n    text-align: center;\n    color: maroon;\n    background-color: mistyrose;\n}\n\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n\n.default-input {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default-button {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default-button:active {\n\tbackground-color: #ddd;\n}\n\n.default-button:focus {\n\tborder-color: #666;\n}\n\n</style>",
+    "<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _bb;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _bb = a);\n\nconst testProps = props.hiddenNav;\n\nlet currentComponent;\n\n$: {\n    if(_bb && currentComponent) {\n        _bb.initialiseComponent(testProps, currentComponent);\n    }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _bb}\n\n<div id=\"current_component\" bind:this={currentComponent}>\n</div>\n\n{/await}\n\n\n<style>\n#current_component {\n    height: 100%;\n    width: 100%;\n}\n</style>\n\n",
     "<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _bb;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n    let cIndex = 0;\n    for(let c of formControls) {\n        labels[cIndex] = c.label;\n        cIndex++;\n    }\n\n    if(_bb && htmlElements) {\n        for(let el in htmlElements) {\n            _bb.initialiseComponent(\n                formControls[el].control,\n                htmlElements[el]\n            );\n        }\n    }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n    {#each formControls as child, index}\n    <div class=\"label\">{labels[index]}</div>\n    <div class=\"control\"\n        bind:this={htmlElements[index]}>\n    </div>\n    {/each}\n</div>\n\n<style>\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n.overflow {\n    grid-column-start: overflow;\n}\n.full-width {\n    width: 100%;\n}\n</style>",
-    "<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _bb;\n\nlet actualValue = \"\";\n$: {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.subscribe(s => {\n\t\t\tactualValue = _bb.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t   type=\"password\" \n\t   value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n    width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>",
+    "<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\nexport let inputClass=\"\"\n\nexport let _bb;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\nlet _logo = \"\";\nlet _buttonClass = \"\";\nlet _inputClass = \"\";\n\n$: {\n    _logo = _bb.relativeUrl(logo);\n    _buttonClass = buttonClass || \"default-button\";\n    _inputClass = inputClass || \"default-input\";\n}\n\nconst login = () => {\n    busy = true;\n    _bb.api.post(\"/api/authenticate\", {username, password})\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            return r.json();\n        } else {\n            incorrect = true;\n            return;\n        }\n    })\n    .then(user => {\n        if(user) {\n            localStorage.setItem(\"budibase:user\", user);\n            location.reload();\n        }\n    })\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"content\">\n\n        {#if _logo}\n        <div class=\"logo-container\">\n            <img src={_logo} alt=\"logo\"/>\n        </div>\n        {/if}\n\n        <div class=\"form-root\">\n            <div class=\"label\">\n                {usernameLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={username} type=\"text\" class={_inputClass}/>\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={password} type=\"password\" class={_inputClass}/>\n            </div>\n        </div>\n\n        <div class=\"login-button-container\">\n            <button disabled={busy} \n                    on:click={login}\n                    class={_buttonClass}>\n                    {loginButtonLabel}\n            </button>\n        </div>\n\n        {#if incorrect}\n        <div class=\"incorrect-details-panel\">\n            Incorrect username or password\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    display:grid;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n    grid-column-start: middle;\n    grid-row-start: center;\n    width: 400px;\n}\n\n.logo-container {\n    margin-bottom: 20px\n}\n\n.logo-container > img {\n    max-width: 100%;\n}\n\n.login-button-container {\n    text-align: right;\n    margin-top: 20px;\n}\n\n.incorrect-details-panel {\n    margin-top: 30px;\n    padding: 10px;\n    border-style: solid;\n    border-width: 1px;\n    border-color: maroon;\n    border-radius: 1px;\n    text-align: center;\n    color: maroon;\n    background-color: mistyrose;\n}\n\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n\n.default-input {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default-button {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default-button:active {\n\tbackground-color: #ddd;\n}\n\n.default-button:focus {\n\tborder-color: #666;\n}\n\n</style>",
     "<script>\r\nimport { onMount } from 'svelte'\r\nimport {buildStyle} from \"./buildStyle\";\r\n\r\nexport let gridTemplateRows =\"\";\r\nexport let gridTemplateColumns =\"\";\r\nexport let children = [];\r\nexport let width = \"auto\";\r\nexport let height = \"auto\";\r\nexport let containerClass=\"\";\r\nexport let itemContainerClass=\"\";\r\n\r\n/*\"gridColumnStart\":\"string\",\r\n\"gridColumnEnd\":\"string\",\r\n\"gridRowStart\":\"string\",\r\n\"gridRowEnd\":\"string\"*/\r\n\r\n\r\nexport let _bb;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n    if(_bb && htmlElements) {\r\n        for(let el in htmlElements) {\r\n            _bb.initialiseComponent(\r\n                children[el].control,\r\n                htmlElements[el]\r\n            );\r\n        }\r\n    }\r\n}\r\n\r\nconst childStyle = child => \r\n    buildStyle({\r\n        \"grid-column-start\": child.gridColumnStart,\r\n        \"grid-column-end\": child.gridColumnEnd,\r\n        \"grid-column\": child.gridColumn,\r\n        \"grid-row-start\": child.gridRowStart,\r\n        \"grid-row-end\": child.gridRowStart,\r\n        \"grid-row\": child.gridRow,\r\n    });\r\n\r\n</script>\r\n\r\n<div class=\"root {containerClass}\"\r\n     style=\"width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};\">\r\n    {#each children as child, index}\r\n    <div class=\"{itemContainerClass}\"\r\n        style={childStyle(child)}\r\n        bind:this={htmlElements[index]}>\r\n    </div>\r\n    {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    display: grid;\r\n}\r\n\r\n</style>",
-    "<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = []\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex;\r\nlet contentElement;\r\n\r\n$: styleVars = {\r\n    navBarBackground, navBarBorder,\r\n    navBarColor, selectedItemBackground,\r\n    selectedItemColor, selectedItemBorder,\r\n    itemHoverBackground, itemHoverColor\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n    selectedIndex = index;\r\n    _bb.initialiseComponent(items[index].component, contentElement);\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n    <div class=\"navbar\">\r\n        {#each items as navItem, index}\r\n        <div class=\"navitem\"\r\n             on:click={onSelectItem(index)}\r\n             class:selected={selectedIndex === index}>\r\n            {navItem.title}\r\n        </div>\r\n        {/each}\r\n    </div>\r\n    <div class=\"content\"\r\n         bind:this={contentElement}>\r\n    </div>\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    height: 100%;\r\n    width:100%;\r\n    grid-template-columns: [navbar] auto [content] 1fr;\r\n    display: grid;\r\n}\r\n\r\n.navbar {\r\n    grid-column: navbar;\r\n    background: var(--navBarBackground);\r\n    border: var(--navBarBorder);\r\n    color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n    padding: 10px 17px;\r\n    cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n    background: var(--itemHoverBackground);\r\n    color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n    background: var(--selectedItemBackground);\r\n    border: var(--selectedItemBorder);\r\n    color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n    grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
+    "<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _bb;\n\nlet actualValue = \"\";\n$: {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.subscribe(s => {\n\t\t\tactualValue = _bb.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t   type=\"password\" \n\t   value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n    width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>",
     "<script>\r\n\r\nexport let columns=[];\r\nexport let data=\"\";\r\nexport let tableClass=\"\";\r\nexport let theadClass=\"\";\r\nexport let tbodyClass=\"\";\r\nexport let trClass=\"\";\r\nexport let thClass=\"\";\r\nexport let onRowClick;\r\n\r\nexport let _bb;\r\n\r\nconst rowClickHandler = (row) => () => {\r\n    onRowClick(row);\r\n}\r\n\r\n</script>\r\n\r\n <table class={tableClass}>\r\n    <thead class={theadClass}>\r\n        <tr class={trClass}>\r\n            {#each columns as col}\r\n            <th class={thClass}>{col.title}</th>\r\n            {/each}\r\n        </tr>\r\n    </thead>\r\n    <tbody class={tbodyClass}>\r\n        {#each data as row}\r\n        <tr class={trClass}\r\n            on:click={rowClickHandler(row)} >\r\n            {#each columns as col}\r\n            <th class={thClass}>{_bb.getStateOrValue(col.value, row)}</th>\r\n            {/each}\r\n        </tr>\r\n        {/each}\r\n    </tbody>\r\n</table> \r\n\r\n<style>\r\n\r\n.table-default {\r\n    width: 100%;\r\n    margin-bottom: 1rem;\r\n    color: #212529;\r\n    border-collapse: collapse;\r\n}\r\n\r\n.table-default .thead-default .th-default {\r\n    vertical-align: bottom;\r\n    border-bottom: 2px solid #dee2e6;\r\n    font-weight: bold;\r\n}\r\n\r\n.table-default .th-default {\r\n    padding: .75rem;\r\n    vertical-align: top;\r\n    border-top: 1px solid #dee2e6;\r\n    font-weight: normal;\r\n}\r\n\r\n.th-default {\r\n    text-align: inherit;\r\n}\r\n\r\n.table-default .tbody-default .tr-default:hover {\r\n    color: #212529;\r\n    background-color: rgba(0,0,0,.075);\r\n    cursor: pointer;\r\n}\r\n\r\n</style>",
-    "<script>\nimport { onMount } from 'svelte'\nimport { emptyProps } from \"./emptyProps\";\n\nexport let direction = \"horizontal\";\nexport let children = [];\nexport let width = \"auto\";\nexport let height = \"auto\";\nexport let containerClass=\"\";\nexport let itemContainerClass=\"\";\nexport let onLoad;\n\nexport let data=[];\nexport let dataItemComponent;\n\nexport let _bb;\n\nlet staticHtmlElements = {};\nlet staticComponents = {};\nlet dataBoundElements = {};\nlet dataBoundComponents = {};\n\nconst hasDataBoundComponents = () => \n    Object.getOwnPropertyNames(dataBoundComponents).length === 0;\n\nconst hasData = () => \n    Array.isArray(data) && data.length > 0;\n\nconst hasStaticComponents = () => {\n    return Object.getOwnPropertyNames(staticComponents).length === 0;\n}\n\n$: {\n\n    if(staticHtmlElements) {\n        if(hasStaticComponents()) {\n            for(let c in staticComponents) {\n                staticComponents[c].$destroy();\n            }\n            staticComponents = {};\n        }\n\n        for(let el in staticHtmlElements) {\n            staticComponents[el] = _bb.initialiseComponent(\n                children[el].control,\n                staticHtmlElements[el]\n            );\n        }\n    }\n    \n\n    if(hasDataBoundComponents()) {\n        for(let c in dataBoundComponents) {\n            dataBoundComponents[c].$destroy();\n        }\n        dataBoundComponents = {};\n    }\n\n    if(hasData()) {\n        let index = 0;\n        for(let d in dataBoundElements) {\n            _bb.initialiseComponent(\n                dataItemComponent,\n                dataBoundElements[d],\n                data[parseInt(d)]\n            );\n        }\n    }\n}\n\n\n</script>\n\n<div class=\"root {containerClass}\"\n     style=\"width: {width}; height: {height}\">\n    {#each children as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={staticHtmlElements[index]}>\n        </div>\n    </div>\n    {/each}\n    {#each data as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={dataBoundElements[index]}>\n        </div>\n    </div>\n    {/each}\n</div>\n\n<style>\n\n.horizontal {\n    display:inline-block;\n}\n\n.vertical {\n    display: block;\n}\n\n</style>",
+    "<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = [];\r\nexport let hideNavBar=false;\r\nexport let selectedItem=\"\";\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex = -1;\r\nlet contentElement;\r\nlet styleVars={};\r\nlet currentComponent;\r\n\r\n\r\n$: {\r\n    styleVars = {\r\n        navBarBackground, navBarBorder,\r\n        navBarColor, selectedItemBackground,\r\n        selectedItemColor, selectedItemBorder,\r\n        itemHoverBackground, itemHoverColor\r\n    };\r\n\r\n    if(items && items.length > 0 && contentElement) {\r\n        const currentSelectedItem = selectedIndex > 0\r\n                                   ? items[selectedIndex].title\r\n                                   : \"\";\r\n        if(selectedItem && currentSelectedItem !== selectedItem) {\r\n            let i=0;\r\n            for(let item of items) {\r\n                if(item.title === selectedItem) {\r\n                    onSelectItem(i)();\r\n                }\r\n                i++;\r\n            }\r\n        } else if(!currentSelectedItem) {\r\n            onSelectItem(0);\r\n        }\r\n    }\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n    selectedIndex = index;\r\n    if(currentComponent) currentComponent.$destoy();\r\n    currentComponent = _bb.initialiseComponent(items[index].component, contentElement);\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n    {#if !hideNavBar}\r\n    <div class=\"navbar\">\r\n        {#each items as navItem, index}\r\n        <div class=\"navitem\"\r\n             on:click={onSelectItem(index)}\r\n             class:selected={selectedIndex === index}>\r\n            {navItem.title}\r\n        </div>\r\n        {/each}\r\n    </div>\r\n    {/if}\r\n    <div class=\"content\"\r\n         bind:this={contentElement}>\r\n    </div>\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    height: 100%;\r\n    width:100%;\r\n    grid-template-columns: [navbar] auto [content] 1fr;\r\n    display: grid;\r\n}\r\n\r\n.navbar {\r\n    grid-column: navbar;\r\n    background: var(--navBarBackground);\r\n    border: var(--navBarBorder);\r\n    color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n    padding: 10px 17px;\r\n    cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n    background: var(--itemHoverBackground);\r\n    color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n    background: var(--selectedItemBackground);\r\n    border: var(--selectedItemBorder);\r\n    color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n    grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
+    "<script>\n\nimport { emptyProps } from \"./emptyProps\";\n\nexport let direction = \"horizontal\";\nexport let children = [];\nexport let width = \"auto\";\nexport let height = \"auto\";\nexport let containerClass=\"\";\nexport let itemContainerClass=\"\";\nexport let onLoad;\n\nexport let data=[];\nexport let dataItemComponent;\n\nexport let _bb;\n\nlet staticHtmlElements = {};\nlet staticComponents = {};\nlet dataBoundElements = {};\nlet dataBoundComponents = {};\n\nlet onLoadCalled = false;\n\nconst hasDataBoundComponents = () => \n    Object.getOwnPropertyNames(dataBoundComponents).length === 0;\n\nconst hasData = () => \n    Array.isArray(data) && data.length > 0;\n\nconst hasStaticComponents = () => {\n    return Object.getOwnPropertyNames(staticComponents).length === 0;\n}\n\n$: {\n\n    if(staticHtmlElements) {\n        if(hasStaticComponents()) {\n            for(let c in staticComponents) {\n                staticComponents[c].$destroy();\n            }\n            staticComponents = {};\n        }\n\n        for(let el in staticHtmlElements) {\n            staticComponents[el] = _bb.initialiseComponent(\n                children[el].control,\n                staticHtmlElements[el]\n            );\n        }\n    }\n    \n\n    if(hasDataBoundComponents()) {\n        for(let c in dataBoundComponents) {\n            dataBoundComponents[c].$destroy();\n        }\n        dataBoundComponents = {};\n    }\n\n    if(hasData()) {\n        let index = 0;\n        for(let d in dataBoundElements) {\n            _bb.initialiseComponent(\n                dataItemComponent,\n                dataBoundElements[d],\n                data[parseInt(d)]\n            );\n        }\n    }\n\n    if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {\n        onLoad();\n        onLoadCalled = true;\n    }\n}\n\n\n</script>\n\n<div class=\"root {containerClass}\"\n     style=\"width: {width}; height: {height}\">\n\n    {#if children}\n    {#each children as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={staticHtmlElements[index]}>\n        </div>\n    </div>\n    {/each}\n    {/if}\n\n    {#if data && data.length > 0}\n    {#each data as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={dataBoundElements[index]}>\n        </div>\n    </div>\n    {/each}\n    {/if}\n</div>\n\n<style>\n\n.horizontal {\n    display:inline-block;\n}\n\n.vertical {\n    display: block;\n}\n\n</style>",
+    "<script>\r\nimport {buildStyle} from \"./buildStyle\";\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let component=\"\";\r\nexport let text=\"\";\r\nexport let containerClass=\"\";\r\nexport let background=\"\";\r\nexport let border=\"\";\r\nexport let borderRadius=\"\";\r\nexport let font=\"\";\r\nexport let display=\"\";\r\nexport let textAlign=\"\";\r\nexport let color=\"\";\r\nexport let padding=\"\";\r\nexport let margin=\"\";\r\nexport let hoverBackground=\"\";\r\nexport let hoverColor=\"\";\r\nexport let onClick;\r\nexport let height;\r\nexport let width;\r\n\r\nexport let _bb;\r\n\r\nlet styleVars;\r\nlet style=\"\";\r\nlet componentElement;\r\n\r\n$: {\r\n    style=buildStyle({\r\n        border, background, font, margin,\r\n        padding, display, color, height, width,\r\n        \"text-align\": textAlign,\r\n        \"border-radius\":borderRadius,\r\n        cursor: onClick ? \"pointer\" : \"none\"\r\n    });\r\n\r\n    if(_bb && component) {\r\n        _bb.initialiseComponent(component, componentElement);\r\n    }\r\n\r\n    styleVars = {\r\n        hoverBackground:hoverBackground || background, \r\n        hoverColor:hoverColor || color\r\n    }\r\n}\r\n\r\nconst clickHandler = () => {\r\n    if(onClick) onClick();\r\n}\r\n\r\n</script>\r\n\r\n<div class=\"{containerClass} panel\" \r\n     style={style}\r\n     use:cssVars={styleVars}\r\n     this:bind={componentElement}\r\n     on:click={clickHandler}>\r\n    {component && component._component ? \"\" : text}\r\n</div>\r\n\r\n<style>\r\n\r\n.panel:hover {\r\n    background: var(--hoverBackground);\r\n    color: var(--hoverColor);\r\n\r\n}\r\n\r\n</style>\r\n",
     "<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {};\n\nexport let _bb;\nlet contentComponentContainer;\n\n$:{\n\tif(_bb && contentComponentContainer && contentComponent._component)\n\t\t_bb.initialiseComponent(contentComponent, contentComponentContainer);\n}\n\n\nconst clickHandler = () => {\n\tif(onClick) onClick();\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click={clickHandler}>\n    {#if contentComponent && contentComponent._component}\n\t<div bind:this={contentComponentContainer}>\n\t</div>\n    {:else if contentText}\n    {contentText}\n    {:else}\n    <slot />\n    {/if}\n</button>\n\n\n<style>\n\n.default {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default:active {\n\tbackground-color: #ddd;\n}\n\n.default:focus {\n\tborder-color: #666;\n}\n\n</style>"
   ],
   "names": [],
-  "mappings": "AAkCA,kBAAkB,eAAC,CAAC,AAChB,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,AACf,CAAC;AC4DD,KAAK,cAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,QAAQ,IAAI,CACZ,qBAAqB,CAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAC3D,kBAAkB,CAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,AAC5D,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,MAAM,CACzB,cAAc,CAAE,MAAM,CACtB,KAAK,CAAE,KAAK,AAChB,CAAC,AAED,eAAe,cAAC,CAAC,AACb,aAAa,CAAE,IAAI;AACvB,CAAC,AAED,6BAAe,CAAG,GAAG,cAAC,CAAC,AACnB,SAAS,CAAE,IAAI,AACnB,CAAC,AAED,uBAAuB,cAAC,CAAC,AACrB,UAAU,CAAE,KAAK,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AAED,wBAAwB,cAAC,CAAC,AACtB,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CACb,YAAY,CAAE,KAAK,CACnB,YAAY,CAAE,GAAG,CACjB,YAAY,CAAE,MAAM,CACpB,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAClB,KAAK,CAAE,MAAM,CACb,gBAAgB,CAAE,SAAS,AAC/B,CAAC,AAED,UAAU,cAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AAED,cAAc,cAAC,CAAC,AACf,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACnB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,eAAe,cAAC,CAAC,AAChB,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACtB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,OAAO,CACzB,OAAO,CAAE,IAAI,AACd,CAAC,AAED,6BAAe,OAAO,AAAC,CAAC,AACvB,gBAAgB,CAAE,IAAI,AACvB,CAAC,AAED,6BAAe,MAAM,AAAC,CAAC,AACtB,YAAY,CAAE,IAAI,AACnB,CAAC;AC9ID,UAAU,cAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AACD,SAAS,cAAC,CAAC,AACP,iBAAiB,CAAE,QAAQ,AAC/B,CAAC,AACD,WAAW,cAAC,CAAC,AACT,KAAK,CAAE,IAAI,AACf,CAAC;ACrBD,QAAQ,eAAC,CAAC,AACN,KAAK,CAAE,IAAI,CACd,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACnB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,uBAAQ,SAAS,AAAC,CAAC,AAClB,KAAK,CAAE,IAAI,AACZ,CAAC;ACQD,KAAK,eAAC,CAAC,AACH,OAAO,CAAE,IAAI,AACjB,CAAC;ACVD,KAAK,cAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,MAAM,IAAI,CACV,qBAAqB,CAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAClD,OAAO,CAAE,IAAI,AACjB,CAAC,AAED,OAAO,cAAC,CAAC,AACL,WAAW,CAAE,MAAM,CACnB,UAAU,CAAE,IAAI,kBAAkB,CAAC,CACnC,MAAM,CAAE,IAAI,cAAc,CAAC,CAC3B,KAAK,CAAE,IAAI,aAAa,CAAC,AAC7B,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,OAAO,CAAE,IAAI,CAAC,IAAI,CAClB,MAAM,CAAE,OAAO,AACnB,CAAC,AAED,sBAAQ,MAAM,AAAC,CAAC,AACZ,UAAU,CAAE,IAAI,qBAAqB,CAAC,CACtC,KAAK,CAAE,IAAI,gBAAgB,CAAC,AAChC,CAAC,AAED,QAAQ,SAAS,cAAC,CAAC,AACf,UAAU,CAAE,IAAI,wBAAwB,CAAC,CACzC,MAAM,CAAE,IAAI,oBAAoB,CAAC,CACjC,KAAK,CAAE,IAAI,mBAAmB,CAAC,AACnC,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,WAAW,CAAE,OAAO,AACxB,CAAC;ACzCD,cAAc,cAAC,CAAC,AACZ,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,IAAI,CACnB,KAAK,CAAE,OAAO,CACd,eAAe,CAAE,QAAQ,AAC7B,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,WAAW,cAAC,CAAC,AACvC,cAAc,CAAE,MAAM,CACtB,aAAa,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAChC,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,4BAAc,CAAC,WAAW,cAAC,CAAC,AACxB,OAAO,CAAE,MAAM,CACf,cAAc,CAAE,GAAG,CACnB,UAAU,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAC7B,WAAW,CAAE,MAAM,AACvB,CAAC,AAED,WAAW,cAAC,CAAC,AACT,UAAU,CAAE,OAAO,AACvB,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,yBAAW,MAAM,AAAC,CAAC,AAC7C,KAAK,CAAE,OAAO,CACd,gBAAgB,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAClC,MAAM,CAAE,OAAO,AACnB,CAAC;ACwBD,WAAW,cAAC,CAAC,AACT,QAAQ,YAAY,AACxB,CAAC,AAED,SAAS,cAAC,CAAC,AACP,OAAO,CAAE,KAAK,AAClB,CAAC;AC9DD,QAAQ,eAAC,CAAC,AACT,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACtB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,OAAO,CACzB,OAAO,CAAE,IAAI,AACd,CAAC,AAED,uBAAQ,OAAO,AAAC,CAAC,AAChB,gBAAgB,CAAE,IAAI,AACvB,CAAC,AAED,uBAAQ,MAAM,AAAC,CAAC,AACf,YAAY,CAAE,IAAI,AACnB,CAAC"
+  "mappings": "AAkCA,kBAAkB,eAAC,CAAC,AAChB,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,AACf,CAAC;ACCD,UAAU,cAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AACD,SAAS,cAAC,CAAC,AACP,iBAAiB,CAAE,QAAQ,AAC/B,CAAC,AACD,WAAW,cAAC,CAAC,AACT,KAAK,CAAE,IAAI,AACf,CAAC;ACwCD,KAAK,cAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,QAAQ,IAAI,CACZ,qBAAqB,CAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAC3D,kBAAkB,CAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,AAC5D,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,MAAM,CACzB,cAAc,CAAE,MAAM,CACtB,KAAK,CAAE,KAAK,AAChB,CAAC,AAED,eAAe,cAAC,CAAC,AACb,aAAa,CAAE,IAAI;AACvB,CAAC,AAED,6BAAe,CAAG,GAAG,cAAC,CAAC,AACnB,SAAS,CAAE,IAAI,AACnB,CAAC,AAED,uBAAuB,cAAC,CAAC,AACrB,UAAU,CAAE,KAAK,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AAED,wBAAwB,cAAC,CAAC,AACtB,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CACb,YAAY,CAAE,KAAK,CACnB,YAAY,CAAE,GAAG,CACjB,YAAY,CAAE,MAAM,CACpB,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAClB,KAAK,CAAE,MAAM,CACb,gBAAgB,CAAE,SAAS,AAC/B,CAAC,AAED,UAAU,cAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AAED,cAAc,cAAC,CAAC,AACf,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACnB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,eAAe,cAAC,CAAC,AAChB,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACtB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,OAAO,CACzB,OAAO,CAAE,IAAI,AACd,CAAC,AAED,6BAAe,OAAO,AAAC,CAAC,AACvB,gBAAgB,CAAE,IAAI,AACvB,CAAC,AAED,6BAAe,MAAM,AAAC,CAAC,AACtB,YAAY,CAAE,IAAI,AACnB,CAAC;AC1HD,KAAK,eAAC,CAAC,AACH,OAAO,CAAE,IAAI,AACjB,CAAC;ACxBD,QAAQ,eAAC,CAAC,AACN,KAAK,CAAE,IAAI,CACd,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACnB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,uBAAQ,SAAS,AAAC,CAAC,AAClB,KAAK,CAAE,IAAI,AACZ,CAAC;ACTD,cAAc,cAAC,CAAC,AACZ,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,IAAI,CACnB,KAAK,CAAE,OAAO,CACd,eAAe,CAAE,QAAQ,AAC7B,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,WAAW,cAAC,CAAC,AACvC,cAAc,CAAE,MAAM,CACtB,aAAa,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAChC,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,4BAAc,CAAC,WAAW,cAAC,CAAC,AACxB,OAAO,CAAE,MAAM,CACf,cAAc,CAAE,GAAG,CACnB,UAAU,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAC7B,WAAW,CAAE,MAAM,AACvB,CAAC,AAED,WAAW,cAAC,CAAC,AACT,UAAU,CAAE,OAAO,AACvB,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,yBAAW,MAAM,AAAC,CAAC,AAC7C,KAAK,CAAE,OAAO,CACd,gBAAgB,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAClC,MAAM,CAAE,OAAO,AACnB,CAAC;ACQD,KAAK,cAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,MAAM,IAAI,CACV,qBAAqB,CAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAClD,OAAO,CAAE,IAAI,AACjB,CAAC,AAED,OAAO,cAAC,CAAC,AACL,WAAW,CAAE,MAAM,CACnB,UAAU,CAAE,IAAI,kBAAkB,CAAC,CACnC,MAAM,CAAE,IAAI,cAAc,CAAC,CAC3B,KAAK,CAAE,IAAI,aAAa,CAAC,AAC7B,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,OAAO,CAAE,IAAI,CAAC,IAAI,CAClB,MAAM,CAAE,OAAO,AACnB,CAAC,AAED,sBAAQ,MAAM,AAAC,CAAC,AACZ,UAAU,CAAE,IAAI,qBAAqB,CAAC,CACtC,KAAK,CAAE,IAAI,gBAAgB,CAAC,AAChC,CAAC,AAED,QAAQ,SAAS,cAAC,CAAC,AACf,UAAU,CAAE,IAAI,wBAAwB,CAAC,CACzC,MAAM,CAAE,IAAI,oBAAoB,CAAC,CACjC,KAAK,CAAE,IAAI,mBAAmB,CAAC,AACnC,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,WAAW,CAAE,OAAO,AACxB,CAAC;ACHD,WAAW,cAAC,CAAC,AACT,QAAQ,YAAY,AACxB,CAAC,AAED,SAAS,cAAC,CAAC,AACP,OAAO,CAAE,KAAK,AAClB,CAAC;ACjDD,oBAAM,MAAM,AAAC,CAAC,AACV,UAAU,CAAE,IAAI,iBAAiB,CAAC,CAClC,KAAK,CAAE,IAAI,YAAY,CAAC,AAE5B,CAAC;AC9BD,QAAQ,eAAC,CAAC,AACT,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACtB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,OAAO,CACzB,OAAO,CAAE,IAAI,AACd,CAAC,AAED,uBAAQ,OAAO,AAAC,CAAC,AAChB,gBAAgB,CAAE,IAAI,AACvB,CAAC,AAED,uBAAQ,MAAM,AAAC,CAAC,AACf,YAAY,CAAE,IAAI,AACnB,CAAC"
 }

packages/standard-components/scripts/publishDev.js

@@ -8,12 +8,14 @@ const jsFile = dir => join(dir, "index.js");
 const jsMapFile = dir => join(dir, "index.js.map");
 const sourceJs = jsFile("dist");
 const sourceJsMap = jsMapFile("dist");
+const componentsFile = "components.json";
 
 const appPackages = join(packagesFolder, "server", "appPackages");
 
-const publicMain = appName => join(appPackages, appName, "public", "main");
-const publicUnauth = appName => join(appPackages, appName, "public", "unauthenticated");
-const nodeModules = appName => join(appPackages, appName, "node_modules", "@budibase", "standard-components", "dist");
+const publicMain = appName => join(appPackages, appName, "public", "main", "lib", "node_modules", "@budibase", "standard-components");
+const publicUnauth = appName => join(appPackages, appName, "public", "unauthenticated", "lib", "node_modules", "@budibase", "standard-components");
+const nodeModulesDist = appName => join(appPackages, appName, "node_modules", "@budibase", "standard-components", "dist");
+const nodeModules = appName => join(appPackages, appName, "node_modules", "@budibase", "standard-components");
 
 (async () => {
 
@@ -31,19 +33,21 @@ const nodeModules = appName => join(appPackages, appName, "node_modules", "@budi
 
     const copySourceJs = copySource(sourceJs);
     const copySourceJsMap = copySource(sourceJsMap);
+    const copyComponentsJson = copySource(componentsFile);
     
 
     for(let app of apps) {
         if(!(await stat(join(appPackages, app))).isDirectory()) continue;
 
-        await copySourceJs(nodeModules(app));
-        await copySourceJsMap(nodeModules(app));
+        await copySourceJs(nodeModulesDist(app));
+        await copySourceJsMap(nodeModulesDist(app));
+        await copyComponentsJson(nodeModules(app))
 
-        await copySourceJs(publicMain(app));
-        await copySourceJsMap(publicMain(app));
+        await copySourceJs(join(publicMain(app), "dist"));
+        await copySourceJsMap(join(publicMain(app), "dist"));
 
-        await copySourceJs(publicUnauth(app));
-        await copySourceJsMap(publicUnauth(app));
+        await copySourceJs(join(publicUnauth(app), "dist"));
+        await copySourceJsMap(join(publicUnauth(app), "dist"));
     }
 
 })();

packages/standard-components/src/Nav.svelte

@@ -9,29 +9,55 @@ export let selectedItemColor="";
 export let selectedItemBorder="";
 export let itemHoverBackground="";
 export let itemHoverColor="";
-export let items = []
+export let items = [];
+export let hideNavBar=false;
+export let selectedItem="";
 
 export let _bb;
 
-let selectedIndex;
+let selectedIndex = -1;
 let contentElement;
+let styleVars={};
+let currentComponent;
 
-$: styleVars = {
+
+$: {
+    styleVars = {
         navBarBackground, navBarBorder,
         navBarColor, selectedItemBackground,
         selectedItemColor, selectedItemBorder,
         itemHoverBackground, itemHoverColor
+    };
+
+    if(items && items.length > 0 && contentElement) {
+        const currentSelectedItem = selectedIndex > 0
+                                   ? items[selectedIndex].title
+                                   : "";
+        if(selectedItem && currentSelectedItem !== selectedItem) {
+            let i=0;
+            for(let item of items) {
+                if(item.title === selectedItem) {
+                    onSelectItem(i)();
+                }
+                i++;
+            }
+        } else if(!currentSelectedItem) {
+            onSelectItem(0);
+        }
+    }
 }
 
 const onSelectItem = (index) => () => {
     selectedIndex = index;
-    _bb.initialiseComponent(items[index].component, contentElement);
+    if(currentComponent) currentComponent.$destoy();
+    currentComponent = _bb.initialiseComponent(items[index].component, contentElement);
 }
 
 
 </script>
 
 <div class="root" use:cssVars={styleVars}>
+    {#if !hideNavBar}
     <div class="navbar">
         {#each items as navItem, index}
         <div class="navitem"
@@ -41,6 +67,7 @@ const onSelectItem = (index) => () => {
         </div>
         {/each}
     </div>
+    {/if}
     <div class="content"
          bind:this={contentElement}>
     </div>

packages/standard-components/src/Panel.svelte

@@ -1,5 +1,6 @@
 <script>
 import {buildStyle} from "./buildStyle";
+import cssVars from "./cssVars";
 
 export let component="";
 export let text="";
@@ -12,29 +13,58 @@ export let display="";
 export let textAlign="";
 export let color="";
 export let padding="";
+export let margin="";
+export let hoverBackground="";
+export let hoverColor="";
+export let onClick;
+export let height;
+export let width;
 
 export let _bb;
 
+let styleVars;
 let style="";
 let componentElement;
 
 $: {
     style=buildStyle({
-        border, background, font, 
-        padding, display, color,
+        border, background, font, margin,
+        padding, display, color, height, width,
         "text-align": textAlign,
-        "border-radius":borderRadius
+        "border-radius":borderRadius,
+        cursor: onClick ? "pointer" : "none"
     });
 
     if(_bb && component) {
         _bb.initialiseComponent(component, componentElement);
     }
+
+    styleVars = {
+        hoverBackground:hoverBackground || background, 
+        hoverColor:hoverColor || color
+    }
+}
+
+const clickHandler = () => {
+    if(onClick) onClick();
 }
 
 </script>
 
-<div class={containerClass}
+<div class="{containerClass} panel" 
      style={style}
-     this:bind={componentElement}>
-    {text}
+     use:cssVars={styleVars}
+     this:bind={componentElement}
+     on:click={clickHandler}>
+    {component && component._component ? "" : text}
 </div>
+
+<style>
+
+.panel:hover {
+    background: var(--hoverBackground);
+    color: var(--hoverColor);
+
+}
+
+</style>

packages/standard-components/src/StackPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-import { onMount } from 'svelte'
+
 import { emptyProps } from "./emptyProps";
 
 export let direction = "horizontal";
@@ -20,6 +20,8 @@ let staticComponents = {};
 let dataBoundElements = {};
 let dataBoundComponents = {};
 
+let onLoadCalled = false;
+
 const hasDataBoundComponents = () => 
     Object.getOwnPropertyNames(dataBoundComponents).length === 0;
 
@@ -66,6 +68,11 @@ $: {
             );
         }
     }
+
+    if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {
+        onLoad();
+        onLoadCalled = true;
+    }
 }
 
 
@@ -73,6 +80,8 @@ $: {
 
 <div class="root {containerClass}"
      style="width: {width}; height: {height}">
+
+    {#if children}
     {#each children as child, index}
     <div class={direction}>
         <div class="{itemContainerClass}"
@@ -80,6 +89,9 @@ $: {
         </div>
     </div>
     {/each}
+    {/if}
+
+    {#if data && data.length > 0}
     {#each data as child, index}
     <div class={direction}>
         <div class="{itemContainerClass}"
@@ -87,6 +99,7 @@ $: {
         </div>
     </div>
     {/each}
+    {/if}
 </div>
 
 <style>

packages/standard-components/src/Test/TestApp.svelte

@@ -7,7 +7,7 @@ let _bb;
 const _appPromise = createApp();
 _appPromise.then(a => _bb = a);
 
-const testProps = props.boundStackPanel;
+const testProps = props.hiddenNav;
 
 let currentComponent;
 

packages/standard-components/src/Test/createApp.js

@@ -8,6 +8,7 @@ import Nav from "../Nav.svelte";
 import Panel from "../Panel.svelte";
 import StackPanel from "../StackPanel.svelte";
 import Table from "../Table.svelte";
+import Button from "../Button.svelte";
 import { createApp } from "@budibase/client/src/createApp";
 
 export default async () =>  {
@@ -22,7 +23,8 @@ export default async () =>  {
             nav: Nav,
             panel: Panel,
             table: Table,
-            stackpanel: StackPanel
+            stackpanel: StackPanel,
+            button: Button
         }
     }
 

packages/standard-components/src/Test/props.js

@@ -172,8 +172,82 @@ export const props = {
                 "##bbstatefallback": "balls to that"
             },
             padding: "10px",
-            border: "5px solid black"
+            border: "5px solid black",
+            margin: "10px",
+            hoverColor: "white",
+            hoverBackground: "black",
+            height:"200px",
+            weight:"200px"
         }
+    },
+    hiddenNav: {
+        _component: "components/stackpanel",
+        children: [
+            {
+                control:{
+                    _component: "components/button",
+                    contentText: "Peep",
+                    onClick: [
+                        {
+                            "##eventHandlerType": "Set State",
+                            parameters: {
+                                path: "selected",
+                                value: "People"
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                control:{
+                    _component: "components/button",
+                    contentText: "Ani",
+                    onClick: [
+                        {
+                            "##eventHandlerType": "Set State",
+                            parameters: {
+                                path: "selected",
+                                value: "Animals"
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                control: {
+                    _component: "components/nav",
+                    hideNavBar: true,
+                    selectedItem: {
+                        "##bbstate":"selected",
+                        "##bbsource":"store",
+                        "##bbstatefallback": "Animals"
+                    },
+                    items: [
+                        {
+                            title: "People",
+                            component: {
+                                _component: "components/panel",
+                                text:"People Panel",
+                                padding: "40px",
+                                border: "2px solid pink",
+                                background: "mistyrose"
+            
+                            }
+                        },
+                        {
+                            title: "Animals",
+                            component: {
+                                _component: "components/panel",
+                                text:"Animals Panel",
+                                padding: "40px",
+                                border: "2px solid green",
+                                background: "azure"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
     }
 
 }