generators seem to be working...

packages/builder/src/common/core.js

@@ -87,7 +87,7 @@ export const getIndexNodes = (hierarchy) =>
 export const getRecordNodes = (hierarchy) => 
     pipe(hierarchy, [
         hierarchyFunctions.getFlattenedHierarchy,
-        filter(hierarchyFunctions.isIndex)
+        filter(hierarchyFunctions.isRecord)
     ]);
 
 export const getIndexSchema = hierarchy => index => 

packages/builder/src/userInterface/GeneratedComponents.svelte

@@ -2,7 +2,7 @@
 import { store } from "../builderStore";
 import { splitName } from "./pagesParsing/splitRootComponentName";
 import {
-    getIndexNodes, getRecordNodes, getIndexSchema
+    getIndexNodes, getRecordNodes, getIndexSchema, pipe
 } from "../common/core";
 import {
     map, some, filter
@@ -43,11 +43,12 @@ const componentsWithDependencies = () => {
     
     const cmp = map(c => {
         const dependants = componentDependencies(
-            {}, selectedComponents, c);
+            {}, [...selectedComponents, ...existingComponents], c);
+        const exists = componentExists(c.name);
         return {
             dependants: dependants.dependantComponents, 
             component:c,
-            error: componentExists(c.name) ? "a component by this name already exists" : ""
+            error: exists ? "a component by this name already exists" : ""
         };
     })(allGeneratedComponents); 
     components = cmp;
@@ -62,7 +63,8 @@ $ : {
         componentName = sp.componentName;
 
         allGeneratedComponents = libs[libName][componentName](generateParameter);
-        selectedComponents = [...allGeneratedComponents];
+        selectedComponents = 
+            filter(c => !componentExists(c.name))(allGeneratedComponents);
         componentsWithDependencies();
     }
 }

packages/client/src/createApp.js

@@ -9,7 +9,9 @@ import {
 } from "./state/stateBinding";
 import { createCoreApi } from "./core";
 import { getStateOrValue } from "./state/getState";
+import { setState, setStateFromBinding } from "./state/setState";
 import { trimSlash } from "./common/trimSlash";
+import { isBound } from "./state/isState";
 
 
 export const createApp = (componentLibraries, appDefinition, user) => {
@@ -20,11 +22,27 @@ export const createApp = (componentLibraries, appDefinition, user) => {
 
         if(!componentName || !libName) return;
 
-        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+        const {initialProps, bind, boundProps} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+
+        const bindings = {};
+        if(boundProps && boundProps.length > 0) {
+            for(let p of boundProps) {
+                bindings[p.propName] = {
+                    path: p.path,
+                    fallback: p.fallback,
+                    source: p.source
+                }
+            }
+        }
+
+        const componentProps = {
+            ...initialProps, 
+            _bb:bb(bindings, context || parentContext)
+        };
 
         const component = new (componentLibraries[libName][componentName])({
             target: htmlElement,
-            props: {...initialProps, _bb:bbInContext(context || parentContext)},
+            props: componentProps,
             hydrate:true
         });
 
@@ -74,27 +92,22 @@ export const createApp = (componentLibraries, appDefinition, user) => {
         if(isFunction(event)) event(context);
     }
 
-    const bb = () => ({
+    const bb = (bindings, context) => ({
-        initialiseComponent: initialiseComponent(), 
+        initialiseComponent: initialiseComponent(context), 
         store,
         relativeUrl,
         api,
         call:safeCallEvent,
+        isBound,
+        setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
+        setState: (path, value) => setState(store, path, value),
         getStateOrValue: (prop, currentContext) => 
-            getStateOrValue(globalState, prop, currentContext)
+            getStateOrValue(globalState, prop, currentContext),
+        bindings,
+        context,        
     });
 
-    const bbRoot = bb();
+    return bb();
-
-    const bbInContext = (context) => {
-        if(!context) return bbRoot;
-        const bbCxt = bb();
-        bbCxt.context = context;
-        bbCxt.initialiseComponent=initialiseComponent(context);
-        return bbCxt;
-    }
-
-    return bbRoot;
 
 }
 

packages/client/src/state/isState.js

@@ -2,7 +2,10 @@ export const BB_STATE_BINDINGPATH = "##bbstate";
 export const BB_STATE_BINDINGSOURCE = "##bbsource";
 export const BB_STATE_FALLBACK = "##bbstatefallback";
 
-export const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
+export const isBound = (prop) =>
+    prop !== undefined 
+    && prop[BB_STATE_BINDINGPATH] !== undefined;
+    
 export const takeStateFromStore = (prop) => 
     prop[BB_STATE_BINDINGSOURCE] === undefined 
     || prop[BB_STATE_BINDINGSOURCE] === "store";

packages/client/src/state/setState.js

@@ -1,7 +1,7 @@
 import {
     isObject
 } from "lodash/fp";
-
+import { BB_STATE_BINDINGPATH } from "./isState";
 
 export const setState = (store, path, value) => {
 
@@ -32,4 +32,7 @@ export const setState = (store, path, value) => {
         safeSetPath(s);
         return s;
     });
-}
+};
+
+export const setStateFromBinding = (store, binding, value) => 
+    setState(store, binding[BB_STATE_BINDINGPATH], value);

packages/client/src/state/stateBinding.js

@@ -9,7 +9,7 @@ import {
 import {
     isBound, takeStateFromStore,
     takeStateFromContext, takeStateFromEventParameters,
-    BB_STATE_FALLBACK, BB_STATE_BINDINGPATH
+    BB_STATE_FALLBACK, BB_STATE_BINDINGPATH, BB_STATE_BINDINGSOURCE
 } from "./isState";
 
 const doNothing = () => {};
@@ -33,24 +33,27 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
             
             if(isBound(val) && takeStateFromStore(val)) {
 
-                const binding = stateBinding(val);
+                const binding = BindingPath(val);
-                const fallback = stateFallback(val);
+                const source = BindingSource(val);
+                const fallback = BindingFallback(val);
 
                 boundProps.push({ 
-                    stateBinding:binding,
+                    path:binding,
-                    fallback, propName
+                    fallback, propName, source
                 });
 
                 initialProps[propName] = fallback;
             } else if(isBound(val) && takeStateFromContext(val)) {
 
-                const binding = stateBinding(val);
+                const binding = BindingPath(val);
-                const fallback = stateFallback(val);
+                const fallback = BindingFallback(val);
+                const source = BindingSource(val);
 
                 initialProps[propName] = getState(
                     context || {},
                     binding,
-                    fallback
+                    fallback,
+                    source
                 );
 
             } else if(isEventType(val)) {
@@ -104,7 +107,7 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
                 for(let boundProp of boundProps) {
                     const val = getState(
                         s, 
-                        boundProp.stateBinding, 
+                        boundProp.path, 
                         boundProp.fallback);
 
                     if(val === undefined && newProps[boundProp.propName] !== undefined) {
@@ -180,13 +183,16 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
     const bindings = getBindings(rootProps, rootInitialProps);
 
     return {
-        initialProps:rootInitialProps, bind:bind(bindings)
+        initialProps:rootInitialProps, 
+        bind:bind(bindings), 
+        boundProps:bindings.boundProps
     };
 
 }
 
-const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
+const BindingPath = (prop) => prop[BB_STATE_BINDINGPATH];
-const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
+const BindingFallback = (prop) => prop[BB_STATE_FALLBACK];
+const BindingSource = (prop) => prop[BB_STATE_BINDINGSOURCE];
 
 
 

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

@@ -18949,6 +18949,24 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
+	const BB_STATE_BINDINGPATH = "##bbstate";
+	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	const BB_STATE_FALLBACK = "##bbstatefallback";
+
+	const isBound = (prop) =>
+	    prop !== undefined 
+	    && prop[BB_STATE_BINDINGPATH] !== undefined;
+	    
+	const takeStateFromStore = (prop) => 
+	    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 setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
@@ -18980,20 +18998,8 @@ var app = (function (exports) {
 	    });
 	};
 
-	const BB_STATE_BINDINGPATH = "##bbstate";
+	const setStateFromBinding = (store, binding, value) => 
-	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	    setState(store, binding[BB_STATE_BINDINGPATH], value);
-	const BB_STATE_FALLBACK = "##bbstatefallback";
-
-	const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-	const takeStateFromStore = (prop) => 
-	    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) => {
 
@@ -19285,25 +19291,26 @@ var app = (function (exports) {
 	            
 	            if(isBound(val) && takeStateFromStore(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const source = BindingSource(val);
+	                const fallback = BindingFallback(val);
 
 	                boundProps.push({ 
-	                    stateBinding:binding,
+	                    path:binding,
-	                    fallback, propName
+	                    fallback, propName, source
 	                });
 
 	                initialProps[propName] = fallback;
 	            } else if(isBound(val) && takeStateFromContext(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const fallback = BindingFallback(val);
+	                const source = BindingSource(val);
 
 	                initialProps[propName] = getState(
 	                    context || {},
 	                    binding,
-	                    fallback
+	                    fallback);
-	                );
 
 	            } else if(isEventType(val)) {
 
@@ -19356,7 +19363,7 @@ var app = (function (exports) {
 	                for(let boundProp of boundProps) {
 	                    const val = getState(
 	                        s, 
-	                        boundProp.stateBinding, 
+	                        boundProp.path, 
 	                        boundProp.fallback);
 
 	                    if(val === undefined && newProps[boundProp.propName] !== undefined) {
@@ -19432,13 +19439,16 @@ var app = (function (exports) {
 	    const bindings = getBindings(rootProps, rootInitialProps);
 
 	    return {
-	        initialProps:rootInitialProps, bind:bind(bindings)
+	        initialProps:rootInitialProps, 
+	        bind:bind(bindings), 
+	        boundProps:bindings.boundProps
 	    };
 
 	};
 
-	const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
+	const BindingPath = (prop) => prop[BB_STATE_BINDINGPATH];
-	const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingSource = (prop) => prop[BB_STATE_BINDINGSOURCE];
 
 	const createCoreApp = (appDefinition, user) => {
 	    const app = {
@@ -20361,11 +20371,27 @@ var app = (function (exports) {
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+	        const {initialProps, bind, boundProps} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+
+	        const bindings = {};
+	        if(boundProps && boundProps.length > 0) {
+	            for(let p of boundProps) {
+	                bindings[p.propName] = {
+	                    path: p.path,
+	                    fallback: p.fallback,
+	                    source: p.source
+	                };
+	            }
+	        }
+
+	        const componentProps = {
+	            ...initialProps, 
+	            _bb:bb(bindings, context || parentContext)
+	        };
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
+	            props: componentProps,
 	            hydrate:true
 	        });
 
@@ -20415,27 +20441,22 @@ var app = (function (exports) {
 	        if(isFunction(event)) event(context);
 	    };
 
-	    const bb = () => ({
+	    const bb = (bindings, context) => ({
-	        initialiseComponent: initialiseComponent(), 
+	        initialiseComponent: initialiseComponent(context), 
 	        store,
 	        relativeUrl,
 	        api,
 	        call:safeCallEvent,
+	        isBound,
+	        setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
+	        setState: (path, value) => setState(store, path, value),
 	        getStateOrValue: (prop, currentContext) => 
-	            getStateOrValue(globalState, prop, currentContext)
+	            getStateOrValue(globalState, prop, currentContext),
+	        bindings,
+	        context,        
 	    });
 
-	    const bbRoot = bb();
+	    return bb();
-
-	    const bbInContext = (context) => {
-	        if(!context) return bbRoot;
-	        const bbCxt = bb();
-	        bbCxt.context = context;
-	        bbCxt.initialiseComponent=initialiseComponent(context);
-	        return bbCxt;
-	    };
-
-	    return bbRoot;
 
 	};
 

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

@@ -18949,6 +18949,24 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
+	const BB_STATE_BINDINGPATH = "##bbstate";
+	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	const BB_STATE_FALLBACK = "##bbstatefallback";
+
+	const isBound = (prop) =>
+	    prop !== undefined 
+	    && prop[BB_STATE_BINDINGPATH] !== undefined;
+	    
+	const takeStateFromStore = (prop) => 
+	    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 setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
@@ -18980,20 +18998,8 @@ var app = (function (exports) {
 	    });
 	};
 
-	const BB_STATE_BINDINGPATH = "##bbstate";
+	const setStateFromBinding = (store, binding, value) => 
-	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	    setState(store, binding[BB_STATE_BINDINGPATH], value);
-	const BB_STATE_FALLBACK = "##bbstatefallback";
-
-	const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-	const takeStateFromStore = (prop) => 
-	    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) => {
 
@@ -19285,25 +19291,26 @@ var app = (function (exports) {
 	            
 	            if(isBound(val) && takeStateFromStore(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const source = BindingSource(val);
+	                const fallback = BindingFallback(val);
 
 	                boundProps.push({ 
-	                    stateBinding:binding,
+	                    path:binding,
-	                    fallback, propName
+	                    fallback, propName, source
 	                });
 
 	                initialProps[propName] = fallback;
 	            } else if(isBound(val) && takeStateFromContext(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const fallback = BindingFallback(val);
+	                const source = BindingSource(val);
 
 	                initialProps[propName] = getState(
 	                    context || {},
 	                    binding,
-	                    fallback
+	                    fallback);
-	                );
 
 	            } else if(isEventType(val)) {
 
@@ -19356,7 +19363,7 @@ var app = (function (exports) {
 	                for(let boundProp of boundProps) {
 	                    const val = getState(
 	                        s, 
-	                        boundProp.stateBinding, 
+	                        boundProp.path, 
 	                        boundProp.fallback);
 
 	                    if(val === undefined && newProps[boundProp.propName] !== undefined) {
@@ -19432,13 +19439,16 @@ var app = (function (exports) {
 	    const bindings = getBindings(rootProps, rootInitialProps);
 
 	    return {
-	        initialProps:rootInitialProps, bind:bind(bindings)
+	        initialProps:rootInitialProps, 
+	        bind:bind(bindings), 
+	        boundProps:bindings.boundProps
 	    };
 
 	};
 
-	const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
+	const BindingPath = (prop) => prop[BB_STATE_BINDINGPATH];
-	const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingSource = (prop) => prop[BB_STATE_BINDINGSOURCE];
 
 	const createCoreApp = (appDefinition, user) => {
 	    const app = {
@@ -20361,11 +20371,27 @@ var app = (function (exports) {
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+	        const {initialProps, bind, boundProps} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+
+	        const bindings = {};
+	        if(boundProps && boundProps.length > 0) {
+	            for(let p of boundProps) {
+	                bindings[p.propName] = {
+	                    path: p.path,
+	                    fallback: p.fallback,
+	                    source: p.source
+	                };
+	            }
+	        }
+
+	        const componentProps = {
+	            ...initialProps, 
+	            _bb:bb(bindings, context || parentContext)
+	        };
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
+	            props: componentProps,
 	            hydrate:true
 	        });
 
@@ -20415,27 +20441,22 @@ var app = (function (exports) {
 	        if(isFunction(event)) event(context);
 	    };
 
-	    const bb = () => ({
+	    const bb = (bindings, context) => ({
-	        initialiseComponent: initialiseComponent(), 
+	        initialiseComponent: initialiseComponent(context), 
 	        store,
 	        relativeUrl,
 	        api,
 	        call:safeCallEvent,
+	        isBound,
+	        setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
+	        setState: (path, value) => setState(store, path, value),
 	        getStateOrValue: (prop, currentContext) => 
-	            getStateOrValue(globalState, prop, currentContext)
+	            getStateOrValue(globalState, prop, currentContext),
+	        bindings,
+	        context,        
 	    });
 
-	    const bbRoot = bb();
+	    return bb();
-
-	    const bbInContext = (context) => {
-	        if(!context) return bbRoot;
-	        const bbCxt = bb();
-	        bbCxt.context = context;
-	        bbCxt.initialiseComponent=initialiseComponent(context);
-	        return bbCxt;
-	    };
-
-	    return bbRoot;
 
 	};
 

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

@@ -18949,6 +18949,24 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
+	const BB_STATE_BINDINGPATH = "##bbstate";
+	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	const BB_STATE_FALLBACK = "##bbstatefallback";
+
+	const isBound = (prop) =>
+	    prop !== undefined 
+	    && prop[BB_STATE_BINDINGPATH] !== undefined;
+	    
+	const takeStateFromStore = (prop) => 
+	    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 setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
@@ -18980,20 +18998,8 @@ var app = (function (exports) {
 	    });
 	};
 
-	const BB_STATE_BINDINGPATH = "##bbstate";
+	const setStateFromBinding = (store, binding, value) => 
-	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	    setState(store, binding[BB_STATE_BINDINGPATH], value);
-	const BB_STATE_FALLBACK = "##bbstatefallback";
-
-	const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-	const takeStateFromStore = (prop) => 
-	    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) => {
 
@@ -19285,25 +19291,26 @@ var app = (function (exports) {
 	            
 	            if(isBound(val) && takeStateFromStore(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const source = BindingSource(val);
+	                const fallback = BindingFallback(val);
 
 	                boundProps.push({ 
-	                    stateBinding:binding,
+	                    path:binding,
-	                    fallback, propName
+	                    fallback, propName, source
 	                });
 
 	                initialProps[propName] = fallback;
 	            } else if(isBound(val) && takeStateFromContext(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const fallback = BindingFallback(val);
+	                const source = BindingSource(val);
 
 	                initialProps[propName] = getState(
 	                    context || {},
 	                    binding,
-	                    fallback
+	                    fallback);
-	                );
 
 	            } else if(isEventType(val)) {
 
@@ -19356,7 +19363,7 @@ var app = (function (exports) {
 	                for(let boundProp of boundProps) {
 	                    const val = getState(
 	                        s, 
-	                        boundProp.stateBinding, 
+	                        boundProp.path, 
 	                        boundProp.fallback);
 
 	                    if(val === undefined && newProps[boundProp.propName] !== undefined) {
@@ -19432,13 +19439,16 @@ var app = (function (exports) {
 	    const bindings = getBindings(rootProps, rootInitialProps);
 
 	    return {
-	        initialProps:rootInitialProps, bind:bind(bindings)
+	        initialProps:rootInitialProps, 
+	        bind:bind(bindings), 
+	        boundProps:bindings.boundProps
 	    };
 
 	};
 
-	const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
+	const BindingPath = (prop) => prop[BB_STATE_BINDINGPATH];
-	const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingSource = (prop) => prop[BB_STATE_BINDINGSOURCE];
 
 	const createCoreApp = (appDefinition, user) => {
 	    const app = {
@@ -20361,11 +20371,27 @@ var app = (function (exports) {
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+	        const {initialProps, bind, boundProps} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+
+	        const bindings = {};
+	        if(boundProps && boundProps.length > 0) {
+	            for(let p of boundProps) {
+	                bindings[p.propName] = {
+	                    path: p.path,
+	                    fallback: p.fallback,
+	                    source: p.source
+	                };
+	            }
+	        }
+
+	        const componentProps = {
+	            ...initialProps, 
+	            _bb:bb(bindings, context || parentContext)
+	        };
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
+	            props: componentProps,
 	            hydrate:true
 	        });
 
@@ -20415,27 +20441,22 @@ var app = (function (exports) {
 	        if(isFunction(event)) event(context);
 	    };
 
-	    const bb = () => ({
+	    const bb = (bindings, context) => ({
-	        initialiseComponent: initialiseComponent(), 
+	        initialiseComponent: initialiseComponent(context), 
 	        store,
 	        relativeUrl,
 	        api,
 	        call:safeCallEvent,
+	        isBound,
+	        setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
+	        setState: (path, value) => setState(store, path, value),
 	        getStateOrValue: (prop, currentContext) => 
-	            getStateOrValue(globalState, prop, currentContext)
+	            getStateOrValue(globalState, prop, currentContext),
+	        bindings,
+	        context,        
 	    });
 
-	    const bbRoot = bb();
+	    return bb();
-
-	    const bbInContext = (context) => {
-	        if(!context) return bbRoot;
-	        const bbCxt = bb();
-	        bbCxt.context = context;
-	        bbCxt.initialiseComponent=initialiseComponent(context);
-	        return bbCxt;
-	    };
-
-	    return bbRoot;
 
 	};
 

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

@@ -18949,6 +18949,24 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
+	const BB_STATE_BINDINGPATH = "##bbstate";
+	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	const BB_STATE_FALLBACK = "##bbstatefallback";
+
+	const isBound = (prop) =>
+	    prop !== undefined 
+	    && prop[BB_STATE_BINDINGPATH] !== undefined;
+	    
+	const takeStateFromStore = (prop) => 
+	    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 setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
@@ -18980,20 +18998,8 @@ var app = (function (exports) {
 	    });
 	};
 
-	const BB_STATE_BINDINGPATH = "##bbstate";
+	const setStateFromBinding = (store, binding, value) => 
-	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	    setState(store, binding[BB_STATE_BINDINGPATH], value);
-	const BB_STATE_FALLBACK = "##bbstatefallback";
-
-	const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-	const takeStateFromStore = (prop) => 
-	    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) => {
 
@@ -19285,25 +19291,26 @@ var app = (function (exports) {
 	            
 	            if(isBound(val) && takeStateFromStore(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const source = BindingSource(val);
+	                const fallback = BindingFallback(val);
 
 	                boundProps.push({ 
-	                    stateBinding:binding,
+	                    path:binding,
-	                    fallback, propName
+	                    fallback, propName, source
 	                });
 
 	                initialProps[propName] = fallback;
 	            } else if(isBound(val) && takeStateFromContext(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const fallback = BindingFallback(val);
+	                const source = BindingSource(val);
 
 	                initialProps[propName] = getState(
 	                    context || {},
 	                    binding,
-	                    fallback
+	                    fallback);
-	                );
 
 	            } else if(isEventType(val)) {
 
@@ -19356,7 +19363,7 @@ var app = (function (exports) {
 	                for(let boundProp of boundProps) {
 	                    const val = getState(
 	                        s, 
-	                        boundProp.stateBinding, 
+	                        boundProp.path, 
 	                        boundProp.fallback);
 
 	                    if(val === undefined && newProps[boundProp.propName] !== undefined) {
@@ -19432,13 +19439,16 @@ var app = (function (exports) {
 	    const bindings = getBindings(rootProps, rootInitialProps);
 
 	    return {
-	        initialProps:rootInitialProps, bind:bind(bindings)
+	        initialProps:rootInitialProps, 
+	        bind:bind(bindings), 
+	        boundProps:bindings.boundProps
 	    };
 
 	};
 
-	const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
+	const BindingPath = (prop) => prop[BB_STATE_BINDINGPATH];
-	const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingSource = (prop) => prop[BB_STATE_BINDINGSOURCE];
 
 	const createCoreApp = (appDefinition, user) => {
 	    const app = {
@@ -20361,11 +20371,27 @@ var app = (function (exports) {
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+	        const {initialProps, bind, boundProps} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+
+	        const bindings = {};
+	        if(boundProps && boundProps.length > 0) {
+	            for(let p of boundProps) {
+	                bindings[p.propName] = {
+	                    path: p.path,
+	                    fallback: p.fallback,
+	                    source: p.source
+	                };
+	            }
+	        }
+
+	        const componentProps = {
+	            ...initialProps, 
+	            _bb:bb(bindings, context || parentContext)
+	        };
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
+	            props: componentProps,
 	            hydrate:true
 	        });
 
@@ -20415,27 +20441,22 @@ var app = (function (exports) {
 	        if(isFunction(event)) event(context);
 	    };
 
-	    const bb = () => ({
+	    const bb = (bindings, context) => ({
-	        initialiseComponent: initialiseComponent(), 
+	        initialiseComponent: initialiseComponent(context), 
 	        store,
 	        relativeUrl,
 	        api,
 	        call:safeCallEvent,
+	        isBound,
+	        setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
+	        setState: (path, value) => setState(store, path, value),
 	        getStateOrValue: (prop, currentContext) => 
-	            getStateOrValue(globalState, prop, currentContext)
+	            getStateOrValue(globalState, prop, currentContext),
+	        bindings,
+	        context,        
 	    });
 
-	    const bbRoot = bb();
+	    return bb();
-
-	    const bbInContext = (context) => {
-	        if(!context) return bbRoot;
-	        const bbCxt = bb();
-	        bbCxt.context = context;
-	        bbCxt.initialiseComponent=initialiseComponent(context);
-	        return bbCxt;
-	    };
-
-	    return bbRoot;
 
 	};
 

packages/server/appPackages/testApp2/components/Application Root.json

@@ -0,0 +1,20 @@
+{
+  "name": "Application Root",
+  "inherits": "@budibase/standard-components/nav",
+  "props": {
+    "items": [
+      {
+        "title": "Yeo index",
+        "component": {
+          "_component": "tables/Yeo index Table"
+        }
+      },
+      {
+        "title": "everyones_invoices",
+        "component": {
+          "_component": "tables/everyones_invoices Table"
+        }
+      }
+    ]
+  }
+}

packages/server/appPackages/testApp2/components/common/H1.json

@@ -0,0 +1,11 @@
+{
+  "name": "common/H1",
+  "description": "Header 1",
+  "inherits": "@budibase/standard-components/text",
+  "props": {
+    "font": "29pt"
+  },
+  "tags": [
+    ""
+  ]
+}

packages/server/appPackages/testApp2/components/common/H2.json

@@ -0,0 +1,8 @@
+{
+  "name": "common/H2",
+  "description": "Header 2",
+  "inherits": "@budibase/standard-components/text",
+  "props": {
+    "font": "15pt"
+  }
+}

packages/server/appPackages/testApp2/components/common/H3.json

@@ -0,0 +1,8 @@
+{
+  "name": "common/H3",
+  "description": "Header 3",
+  "inherits": "@budibase/standard-components/text",
+  "props": {
+    "font": "12pt bold"
+  }
+}

packages/server/appPackages/testApp2/components/common/H4.json

@@ -0,0 +1,8 @@
+{
+  "name": "common/H4",
+  "description": "Header 4",
+  "inherits": "@budibase/standard-components/text",
+  "props": {
+    "font": "10pt bold"
+  }
+}

packages/server/appPackages/testApp2/components/customer Form.json

@@ -0,0 +1,83 @@
+{
+  "name": "customer Form",
+  "description": "All fields on record '/customers/1-{id}' ",
+  "inherits": "@budibase/standard-components/stackpanel",
+  "props": {
+    "direction": "vertical",
+    "children": [
+      {
+        "control": {
+          "_component": "common/H1",
+          "value": "Edit customer"
+        }
+      },
+      {
+        "control": {
+          "_component": "@budibase/standard-components/form",
+          "formControls": [
+            {
+              "label": "name",
+              "control": {
+                "_component": "@budibase/standard-components/textbox",
+                "value": {
+                  "##bbstate": "currentcustomer.name",
+                  "##bbstatefallback": "mike",
+                  "##bbsource": "store"
+                },
+                "hideValue": false,
+                "className": "default"
+              }
+            }
+          ]
+        }
+      },
+      {
+        "control": {
+          "_component": "@budibase/standard-components/stackpanel",
+          "direction": "horizontal",
+          "children": [
+            {
+              "control": {
+                "_component": "@budibase/standard-components/panel",
+                "padding": "20px",
+                "component": {
+                  "_component": "common/Primary Button",
+                  "contentText": "Save customer",
+                  "onClick": [
+                    {
+                      "##eventHandlerType": "Save Record",
+                      "parameters": {
+                        "statePath": "currentcustomer"
+                      }
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "control": {
+                "_component": "@budibase/standard-components/panel",
+                "padding": "20px",
+                "component": {
+                  "_component": "common/Secondary Button",
+                  "contentText": "Cancel",
+                  "onClick": [
+                    {
+                      "##eventHandlerType": "Save Record",
+                      "parameters": {
+                        "statePath": "currentcustomer"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "tags": [
+    ""
+  ]
+}

packages/server/appPackages/testApp2/components/invoiceyooo Form.json

@@ -0,0 +1,77 @@
+{
+  "name": "invoiceyooo Form",
+  "description": "All fields on record '/customers/1-{id}/invoices/2-{id}' ",
+  "inherits": "@budibase/standard-components/stackpanel",
+  "props": {
+    "direction": "vertical",
+    "children": [
+      {
+        "control": {
+          "_component": "common/H1",
+          "value": "Edit invoiceyooo"
+        }
+      },
+      {
+        "control": {
+          "_component": "@budibase/standard-components/form",
+          "formControls": [
+            {
+              "label": "amount",
+              "control": {
+                "_component": "@budibase/standard-components/textbox",
+                "value": {
+                  "##bbstate": "currentinvoiceyooo.amount",
+                  "##bbsource": "store"
+                }
+              }
+            }
+          ]
+        }
+      },
+      {
+        "control": {
+          "_component": "@budibase/standard-components/stackpanel",
+          "direction": "horizontal",
+          "children": [
+            {
+              "control": {
+                "_component": "@budibase/standard-components/panel",
+                "padding": "20px",
+                "component": {
+                  "_component": "common/Primary Button",
+                  "contentText": "Save invoiceyooo",
+                  "onClick": [
+                    {
+                      "##eventHandlerType": "Save Record",
+                      "parameters": {
+                        "statePath": "currentinvoiceyooo"
+                      }
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "control": {
+                "_component": "@budibase/standard-components/panel",
+                "padding": "20px",
+                "component": {
+                  "_component": "common/Secondary Button",
+                  "contentText": "Cancel",
+                  "onClick": [
+                    {
+                      "##eventHandlerType": "Save Record",
+                      "parameters": {
+                        "statePath": "currentinvoiceyooo"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

packages/server/appPackages/testApp2/components/tables/Yeo index Table.json

@@ -0,0 +1,54 @@
+{
+  "name": "tables/Yeo index Table",
+  "inherits": "@budibase/standard-components/table",
+  "props": {
+    "data": {
+      "##bbstate": "/Yeo index",
+      "##bbsource": "store"
+    },
+    "columns": [
+      {
+        "title": "id",
+        "value": {
+          "##bbstate": "id",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "isNew",
+        "value": {
+          "##bbstate": "isNew",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "key",
+        "value": {
+          "##bbstate": "key",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "name",
+        "value": {
+          "##bbstate": "name",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "type",
+        "value": {
+          "##bbstate": "type",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "sortKey",
+        "value": {
+          "##bbstate": "sortKey",
+          "##bbsource": "context"
+        }
+      }
+    ]
+  }
+}

packages/server/appPackages/testApp2/components/tables/everyones_invoices Table.json

@@ -0,0 +1,54 @@
+{
+  "name": "tables/everyones_invoices Table",
+  "inherits": "@budibase/standard-components/table",
+  "props": {
+    "data": {
+      "##bbstate": "/everyones_invoices",
+      "##bbsource": "store"
+    },
+    "columns": [
+      {
+        "title": "amount",
+        "value": {
+          "##bbstate": "amount",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "id",
+        "value": {
+          "##bbstate": "id",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "isNew",
+        "value": {
+          "##bbstate": "isNew",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "key",
+        "value": {
+          "##bbstate": "key",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "type",
+        "value": {
+          "##bbstate": "type",
+          "##bbsource": "context"
+        }
+      },
+      {
+        "title": "sortKey",
+        "value": {
+          "##bbstate": "sortKey",
+          "##bbsource": "context"
+        }
+      }
+    ]
+  }
+}

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

@@ -18949,6 +18949,24 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
+	const BB_STATE_BINDINGPATH = "##bbstate";
+	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	const BB_STATE_FALLBACK = "##bbstatefallback";
+
+	const isBound = (prop) =>
+	    prop !== undefined 
+	    && prop[BB_STATE_BINDINGPATH] !== undefined;
+	    
+	const takeStateFromStore = (prop) => 
+	    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 setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
@@ -18980,20 +18998,8 @@ var app = (function (exports) {
 	    });
 	};
 
-	const BB_STATE_BINDINGPATH = "##bbstate";
+	const setStateFromBinding = (store, binding, value) => 
-	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	    setState(store, binding[BB_STATE_BINDINGPATH], value);
-	const BB_STATE_FALLBACK = "##bbstatefallback";
-
-	const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-	const takeStateFromStore = (prop) => 
-	    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) => {
 
@@ -19285,25 +19291,26 @@ var app = (function (exports) {
 	            
 	            if(isBound(val) && takeStateFromStore(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const source = BindingSource(val);
+	                const fallback = BindingFallback(val);
 
 	                boundProps.push({ 
-	                    stateBinding:binding,
+	                    path:binding,
-	                    fallback, propName
+	                    fallback, propName, source
 	                });
 
 	                initialProps[propName] = fallback;
 	            } else if(isBound(val) && takeStateFromContext(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const fallback = BindingFallback(val);
+	                const source = BindingSource(val);
 
 	                initialProps[propName] = getState(
 	                    context || {},
 	                    binding,
-	                    fallback
+	                    fallback);
-	                );
 
 	            } else if(isEventType(val)) {
 
@@ -19356,7 +19363,7 @@ var app = (function (exports) {
 	                for(let boundProp of boundProps) {
 	                    const val = getState(
 	                        s, 
-	                        boundProp.stateBinding, 
+	                        boundProp.path, 
 	                        boundProp.fallback);
 
 	                    if(val === undefined && newProps[boundProp.propName] !== undefined) {
@@ -19432,13 +19439,16 @@ var app = (function (exports) {
 	    const bindings = getBindings(rootProps, rootInitialProps);
 
 	    return {
-	        initialProps:rootInitialProps, bind:bind(bindings)
+	        initialProps:rootInitialProps, 
+	        bind:bind(bindings), 
+	        boundProps:bindings.boundProps
 	    };
 
 	};
 
-	const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
+	const BindingPath = (prop) => prop[BB_STATE_BINDINGPATH];
-	const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingSource = (prop) => prop[BB_STATE_BINDINGSOURCE];
 
 	const createCoreApp = (appDefinition, user) => {
 	    const app = {
@@ -20361,11 +20371,27 @@ var app = (function (exports) {
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+	        const {initialProps, bind, boundProps} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+
+	        const bindings = {};
+	        if(boundProps && boundProps.length > 0) {
+	            for(let p of boundProps) {
+	                bindings[p.propName] = {
+	                    path: p.path,
+	                    fallback: p.fallback,
+	                    source: p.source
+	                };
+	            }
+	        }
+
+	        const componentProps = {
+	            ...initialProps, 
+	            _bb:bb(bindings, context || parentContext)
+	        };
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
+	            props: componentProps,
 	            hydrate:true
 	        });
 
@@ -20415,27 +20441,22 @@ var app = (function (exports) {
 	        if(isFunction(event)) event(context);
 	    };
 
-	    const bb = () => ({
+	    const bb = (bindings, context) => ({
-	        initialiseComponent: initialiseComponent(), 
+	        initialiseComponent: initialiseComponent(context), 
 	        store,
 	        relativeUrl,
 	        api,
 	        call:safeCallEvent,
+	        isBound,
+	        setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
+	        setState: (path, value) => setState(store, path, value),
 	        getStateOrValue: (prop, currentContext) => 
-	            getStateOrValue(globalState, prop, currentContext)
+	            getStateOrValue(globalState, prop, currentContext),
+	        bindings,
+	        context,        
 	    });
 
-	    const bbRoot = bb();
+	    return bb();
-
-	    const bbInContext = (context) => {
-	        if(!context) return bbRoot;
-	        const bbCxt = bb();
-	        bbCxt.context = context;
-	        bbCxt.initialiseComponent=initialiseComponent(context);
-	        return bbCxt;
-	    };
-
-	    return bbRoot;
 
 	};
 

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

@@ -18949,6 +18949,24 @@ var app = (function (exports) {
 
 	const isArrayOfString = opts => fp_10(opts) && all(fp_26)(opts);
 
+	const BB_STATE_BINDINGPATH = "##bbstate";
+	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	const BB_STATE_FALLBACK = "##bbstatefallback";
+
+	const isBound = (prop) =>
+	    prop !== undefined 
+	    && prop[BB_STATE_BINDINGPATH] !== undefined;
+	    
+	const takeStateFromStore = (prop) => 
+	    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 setState = (store, path, value) => {
 
 	    if(!path || path.length === 0) return;
@@ -18980,20 +18998,8 @@ var app = (function (exports) {
 	    });
 	};
 
-	const BB_STATE_BINDINGPATH = "##bbstate";
+	const setStateFromBinding = (store, binding, value) => 
-	const BB_STATE_BINDINGSOURCE = "##bbsource";
+	    setState(store, binding[BB_STATE_BINDINGPATH], value);
-	const BB_STATE_FALLBACK = "##bbstatefallback";
-
-	const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-	const takeStateFromStore = (prop) => 
-	    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) => {
 
@@ -19285,25 +19291,26 @@ var app = (function (exports) {
 	            
 	            if(isBound(val) && takeStateFromStore(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const source = BindingSource(val);
+	                const fallback = BindingFallback(val);
 
 	                boundProps.push({ 
-	                    stateBinding:binding,
+	                    path:binding,
-	                    fallback, propName
+	                    fallback, propName, source
 	                });
 
 	                initialProps[propName] = fallback;
 	            } else if(isBound(val) && takeStateFromContext(val)) {
 
-	                const binding = stateBinding(val);
+	                const binding = BindingPath(val);
-	                const fallback = stateFallback(val);
+	                const fallback = BindingFallback(val);
+	                const source = BindingSource(val);
 
 	                initialProps[propName] = getState(
 	                    context || {},
 	                    binding,
-	                    fallback
+	                    fallback);
-	                );
 
 	            } else if(isEventType(val)) {
 
@@ -19356,7 +19363,7 @@ var app = (function (exports) {
 	                for(let boundProp of boundProps) {
 	                    const val = getState(
 	                        s, 
-	                        boundProp.stateBinding, 
+	                        boundProp.path, 
 	                        boundProp.fallback);
 
 	                    if(val === undefined && newProps[boundProp.propName] !== undefined) {
@@ -19432,13 +19439,16 @@ var app = (function (exports) {
 	    const bindings = getBindings(rootProps, rootInitialProps);
 
 	    return {
-	        initialProps:rootInitialProps, bind:bind(bindings)
+	        initialProps:rootInitialProps, 
+	        bind:bind(bindings), 
+	        boundProps:bindings.boundProps
 	    };
 
 	};
 
-	const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
+	const BindingPath = (prop) => prop[BB_STATE_BINDINGPATH];
-	const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingFallback = (prop) => prop[BB_STATE_FALLBACK];
+	const BindingSource = (prop) => prop[BB_STATE_BINDINGSOURCE];
 
 	const createCoreApp = (appDefinition, user) => {
 	    const app = {
@@ -20361,11 +20371,27 @@ var app = (function (exports) {
 
 	        if(!componentName || !libName) return;
 
-	        const {initialProps, bind} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+	        const {initialProps, bind, boundProps} = setupBinding(store, props, coreApi, context, appDefinition.appRootPath);
+
+	        const bindings = {};
+	        if(boundProps && boundProps.length > 0) {
+	            for(let p of boundProps) {
+	                bindings[p.propName] = {
+	                    path: p.path,
+	                    fallback: p.fallback,
+	                    source: p.source
+	                };
+	            }
+	        }
+
+	        const componentProps = {
+	            ...initialProps, 
+	            _bb:bb(bindings, context || parentContext)
+	        };
 
 	        const component = new (componentLibraries[libName][componentName])({
 	            target: htmlElement,
-	            props: {...initialProps, _bb:bbInContext(context || parentContext)},
+	            props: componentProps,
 	            hydrate:true
 	        });
 
@@ -20415,27 +20441,22 @@ var app = (function (exports) {
 	        if(isFunction(event)) event(context);
 	    };
 
-	    const bb = () => ({
+	    const bb = (bindings, context) => ({
-	        initialiseComponent: initialiseComponent(), 
+	        initialiseComponent: initialiseComponent(context), 
 	        store,
 	        relativeUrl,
 	        api,
 	        call:safeCallEvent,
+	        isBound,
+	        setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
+	        setState: (path, value) => setState(store, path, value),
 	        getStateOrValue: (prop, currentContext) => 
-	            getStateOrValue(globalState, prop, currentContext)
+	            getStateOrValue(globalState, prop, currentContext),
+	        bindings,
+	        context,        
 	    });
 
-	    const bbRoot = bb();
+	    return bb();
-
-	    const bbInContext = (context) => {
-	        if(!context) return bbRoot;
-	        const bbCxt = bb();
-	        bbCxt.context = context;
-	        bbCxt.initialiseComponent=initialiseComponent(context);
-	        return bbCxt;
-	    };
-
-	    return bbRoot;
 
 	};
 

packages/server/builder/bundle.css

@@ -2,44 +2,44 @@ 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-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%}
 .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}
-.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-nd1yft{height:100%;position:relative;padding:1.5rem}
-.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}
+.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-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-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}
+.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}
 h1.svelte-16jkjx9{font-size:1.2em}
-.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-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
 .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%}
+.uk-modal-dialog.svelte-vwwrf9{border-radius:.3rem}
+.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
 .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}
+.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-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}
+.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)}
 .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)}
 .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)}
-.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-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-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}
 .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-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-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
+.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}
+.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-wgyofl{padding:1.5rem;width:100%;align-items:right}
+.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-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)}
 .library-header.svelte-chhyel{font-size:1.1em;border-color:var(--primary25);border-width:1px 0px;border-style:solid;background-color:var(--primary10);padding:5px 0}.library-container.svelte-chhyel{padding:0 0 10px 10px}.inner-header.svelte-chhyel{font-size:0.9em;font-weight:bold;margin-top:7px;margin-bottom:3px}.component.svelte-chhyel{padding:2px 0px;cursor:pointer}.component.svelte-chhyel:hover{background-color:var(--lightslate)}.component.svelte-chhyel>.name.svelte-chhyel{color:var(--secondary100);display:inline-block}.component.svelte-chhyel>.description.svelte-chhyel{font-size:0.8em;color:var(--secondary75);display:inline-block;margin-left:10px}
 .info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)}
-.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)}
-.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}
 .component.svelte-3sgo90{padding:5px 0}.component.svelte-3sgo90 .title.svelte-3sgo90{width:300px
 }.component.svelte-3sgo90>.description.svelte-3sgo90{font-size:0.8em;color:var(--secondary75)}.button-container.svelte-3sgo90{text-align:right;margin-top:20px}.error.svelte-3sgo90{font-size:10pt;color:red}
-.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}
+.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}
-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}
 input.svelte-9fre0g{margin-right:7px}
-.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-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}
+.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}
 .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}
 .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)}

packages/server/builder/bundle.js

@@ -28172,7 +28172,7 @@
     const getRecordNodes = (hierarchy) => 
         pipe$1(hierarchy, [
             hierarchyFunctions.getFlattenedHierarchy,
-            fp_8(hierarchyFunctions.isIndex)
+            fp_8(hierarchyFunctions.isRecord)
         ]);
 
     const getIndexSchema = hierarchy => index => 
@@ -28248,6 +28248,14 @@
 
     });
 
+    const BB_STATE_BINDINGPATH = "##bbstate";
+    const BB_STATE_BINDINGSOURCE = "##bbsource";
+    const BB_STATE_FALLBACK = "##bbstatefallback";
+
+    const isBound = (prop) =>
+        prop !== undefined 
+        && prop[BB_STATE_BINDINGPATH] !== undefined;
+
     const setState = (store, path, value) => {
 
         if(!path || path.length === 0) return;
@@ -28279,12 +28287,6 @@
         });
     };
 
-    const BB_STATE_BINDINGPATH = "##bbstate";
-    const BB_STATE_BINDINGSOURCE = "##bbsource";
-    const BB_STATE_FALLBACK = "##bbstatefallback";
-
-    const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-
     const getState = (s, path, fallback) => {
 
         if(!path || path.length === 0) return fallback;
@@ -52746,7 +52748,7 @@
     	return child_ctx;
     }
 
-    // (114:8) {#if isComponentSelected(c)}
+    // (116:8) {#if isComponentSelected(c)}
     function create_if_block$a(ctx) {
     	var span, t_value = ctx.c.error + "", t;
 
@@ -52755,7 +52757,7 @@
     			span = element("span");
     			t = text(t_value);
     			attr_dev(span, "class", "error svelte-3sgo90");
-    			add_location(span, file$m, 114, 8, 3514);
+    			add_location(span, file$m, 116, 8, 3628);
     		},
 
     		m: function mount(target, anchor) {
@@ -52775,11 +52777,11 @@
     			}
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block$a.name, type: "if", source: "(114:8) {#if isComponentSelected(c)}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block$a.name, type: "if", source: "(116:8) {#if isComponentSelected(c)}", ctx });
     	return block;
     }
 
-    // (100:0) {#each components as c}
+    // (102:0) {#each components as c}
     function create_each_block$a(ctx) {
     	var div2, div0, input0, input0_disabled_value, input0_checked_value, t0, input1, input1_value_value, input1_class_value, t1, show_if = ctx.isComponentSelected(ctx.c), t2, div1, t3_value = ctx.c.component.description + "", t3, dispose;
 
@@ -52801,17 +52803,17 @@
     			input0.disabled = input0_disabled_value = ctx.c.dependants.length > 0;
     			attr_dev(input0, "class", "uk-checkbox");
     			input0.checked = input0_checked_value = ctx.isComponentSelected(ctx.c);
-    			add_location(input0, file$m, 104, 8, 3065);
+    			add_location(input0, file$m, 106, 8, 3179);
     			attr_dev(input1, "type", "text");
     			input1.value = input1_value_value = ctx.c.component.name;
     			attr_dev(input1, "class", input1_class_value = "uk-input title " + (ctx.c.error ? 'uk-form-danger' : '') + " svelte-3sgo90");
-    			add_location(input1, file$m, 109, 8, 3286);
+    			add_location(input1, file$m, 111, 8, 3400);
     			attr_dev(div0, "class", "uk-inline");
-    			add_location(div0, file$m, 103, 4, 3032);
+    			add_location(div0, file$m, 105, 4, 3146);
     			attr_dev(div1, "class", "description svelte-3sgo90");
-    			add_location(div1, file$m, 118, 4, 3585);
+    			add_location(div1, file$m, 120, 4, 3699);
     			attr_dev(div2, "class", "component svelte-3sgo90");
-    			add_location(div2, file$m, 101, 0, 3001);
+    			add_location(div2, file$m, 103, 0, 3115);
 
     			dispose = [
     				listen_dev(input0, "change", ctx.onSelectedChanged(ctx.c)),
@@ -52879,11 +52881,11 @@
     			run_all(dispose);
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block$a.name, type: "each", source: "(100:0) {#each components as c}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block$a.name, type: "each", source: "(102:0) {#each components as c}", ctx });
     	return block;
     }
 
-    // (128:4) <Button on:click={() => onConfirmGenerate(selectedComponents)}>
+    // (130:4) <Button on:click={() => onConfirmGenerate(selectedComponents)}>
     function create_default_slot$2(ctx) {
     	var t;
 
@@ -52902,7 +52904,7 @@
     			}
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot$2.name, type: "slot", source: "(128:4) <Button on:click={() => onConfirmGenerate(selectedComponents)}>", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_default_slot$2.name, type: "slot", source: "(130:4) <Button on:click={() => onConfirmGenerate(selectedComponents)}>", ctx });
     	return block;
     }
 
@@ -52936,7 +52938,7 @@
     			div = element("div");
     			button.$$.fragment.c();
     			attr_dev(div, "class", "button-container svelte-3sgo90");
-    			add_location(div, file$m, 126, 0, 3682);
+    			add_location(div, file$m, 128, 0, 3796);
     		},
 
     		l: function claim(nodes) {
@@ -53042,11 +53044,12 @@
         
         const cmp = fp_7(c => {
             const dependants = componentDependencies(
-                {}, selectedComponents, c);
+                {}, [...selectedComponents, ...existingComponents], c);
+            const exists = componentExists(c.name);
             return {
                 dependants: dependants.dependantComponents, 
                 component:c,
-                error: componentExists(c.name) ? "a component by this name already exists" : ""
+                error: exists ? "a component by this name already exists" : ""
             };
         })(allGeneratedComponents); 
         $$invalidate('components', components = cmp);
@@ -53120,7 +53123,8 @@
                     $$invalidate('componentName', componentName = sp.componentName);
             
                     $$invalidate('allGeneratedComponents', allGeneratedComponents = libs[libName][componentName](generateParameter));
-                    $$invalidate('selectedComponents', selectedComponents = [...allGeneratedComponents]);
+                    $$invalidate('selectedComponents', selectedComponents = 
+                        fp_8(c => !componentExists(c.name))(allGeneratedComponents));
                     componentsWithDependencies();
                 }
             } }

packages/standard-components/src/Panel.svelte

@@ -25,6 +25,7 @@ export let _bb;
 let styleVars;
 let style="";
 let componentElement;
+let componentInitialised=false;
 
 $: {
     style=buildStyle({
@@ -35,8 +36,9 @@ $: {
         cursor: onClick ? "pointer" : "none"
     });
 
-    if(_bb && component) {
+    if(_bb && component && componentElement && !componentInitialised) {
         _bb.initialiseComponent(component, componentElement);
+        componentInitialised = true;
     }
 
     styleVars = {
@@ -54,7 +56,7 @@ const clickHandler = () => {
 <div class="{containerClass} panel" 
      style={style}
      use:cssVars={styleVars}
-     this:bind={componentElement}
+     bind:this={componentElement}
      on:click={clickHandler}>
     {component && component._component ? "" : text}
 </div>

packages/standard-components/src/Textbox.svelte

@@ -7,19 +7,10 @@ export let className = "default";
 export let _bb;
 
 let actualValue = "";
-$: {
-	if(_bb && value._isstate) {
-		_bb.store.subscribe(s => {
-			actualValue = _bb.store.getValue(s, value);
-		});
-	}
-}
 
 const onchange = (ev) => {
-	if(_bb && value._isstate) {
+	if(_bb) {
-		_bb.store.setValue(value, ev.target.value);
+		_bb.setStateFromBinding(_bb.bindings.value, ev.target.value);
-	} else if(!value._isstate) {
-		actualValue = ev.target.value;
 	}
 }
 
@@ -28,9 +19,13 @@ const onchange = (ev) => {
 {#if hideValue}
 <input class={className} 
 	   type="password" 
-	   value={actualValue} on:change/>
+	   value={value} 
+	   on:change={onchange}/>
 {:else}
-<input class={className} type="text" value={actualValue}/>
+<input class={className} 
+	   type="text" 
+	   value={value}
+	   on:change={onchange}/>
 {/if}
 
 <style>

packages/standard-components/src/button.svelte

@@ -5,7 +5,7 @@ export let className = "default";
 export let disabled = false;
 export let contentText;
 export let contentComponent;
-export let onClick = () => {};
+export let onClick;
 export let background;
 export let color;
 export let border;
@@ -53,7 +53,7 @@ const clickHandler = () => {
 
 <button use:cssVars={cssVariables} 
 		class="{className} {customHoverColorClass} {customHoverBorderClass} {customHoverBackClass}" 
-		{disabled} 
+		disabled={disabled || false} 
 		on:click={clickHandler} 
 		style={buttonStyles}>
     {#if contentComponent && contentComponent._component}

packages/standard-components/src/generators/formsGenerator.js

@@ -1,5 +1,8 @@
-export const forms = ({records}) => 
+import {headers} from "./headersGenerator";
-    records.map(root);
+
+export const forms = ({records, indexes}) => 
+    [...headers({records, indexes}),
+    ...records.map(root)];
 
 const root = record => ({
     name: `${record.name} Form`,
@@ -9,8 +12,10 @@ const root = record => ({
         direction: "vertical",
         children: [
             {
-                _component: "common/Header 1",
+                control: {
-                value: `Edit ${record.name}`,
+                    _component: "common/H1",
+                    value: `Edit ${record.name}`,
+                }
             },
             form(record),
             saveCancelButtons(record)
@@ -19,55 +24,60 @@ const root = record => ({
 }) 
 
 const form = record => ({
-    _component: "@budibase/standard-components/form",
+    control: {
-    formControls: [
+        _component: "@budibase/standard-components/form",
-        record.fields.map(f => ({
+        formControls: 
-            label: f.label,
+            record.fields.map(f => ({
-            control: {
+                label: f.label,
-                _component: "@budibase/standard-components/textbox",
+                control: {
-                value: {
+                    _component: "@budibase/standard-components/textbox",
-                    "##bbstate":`current${record.name}.${f.name}`,
+                    value: {
-                    "##bbsource":"store"
+                        "##bbstate":`current${record.name}.${f.name}`,
+                        "##bbsource":"store"
+                    }
                 }
-            }
+            }))
-        }))
+    }
-    ]
 })
 
 const saveCancelButtons = (record) => ({
-    _component: "@budibase/standard-components/stackpanel",
+    control: {
-    direction: "horizontal",
+        _component: "@budibase/standard-components/stackpanel",
-    children: [
+        direction: "horizontal",
-        paddedPanelForButton({
+        children: [
-            _component: "common/Primary Button",
+            paddedPanelForButton({
-            contentText: `Save ${record.name}`,
+                _component: "common/Primary Button",
-            onClick: [                
+                contentText: `Save ${record.name}`,
-                {
+                onClick: [                
-                    "##eventHandlerType": "Save Record",
+                    {
-                    parameters: {
+                        "##eventHandlerType": "Save Record",
-                        statePath: `current${record.name}`,
+                        parameters: {
+                            statePath: `current${record.name}`,
+                        }
                     }
-                }
+                ]
-            ]
+            }),
-        }),
+            paddedPanelForButton({
-        paddedPanelForButton({
+                _component: "common/Secondary Button",
-            _component: "common/Secondary Button",
+                contentText: `Cancel`,
-            contentText: `Cancel`,
+                onClick: [
-            onClick: [
+                    {
-                {
+                        "##eventHandlerType": "Save Record",
-                    "##eventHandlerType": "Save Record",
+                        parameters: {
-                    parameters: {
+                            statePath: `current${record.name}`,
-                        statePath: `current${record.name}`,
+                        }
                     }
-                }
+                ]
-            ]
+            })
-        })
+        ]
-    ]
+    }
 })
 
 const paddedPanelForButton = (button) => ({
-    _component: "@budibase/standard-components/panel",
+    control: {
-    padding: "20px",
+        _component: "@budibase/standard-components/panel",
-    component: button
+        padding: "20px",
+        component: button
+    }
 });
 

packages/standard-components/src/generators/navGenerator.js

@@ -5,7 +5,9 @@ export const nav = ({records, indexes, helpers}) => [
         name: "Application Root",
         inherits: "@budibase/standard-components/nav",
         props: {
-            items: index.map(navItem)
+            items: indexes
+                    .filter(i => i.parent().type === "root")
+                    .map(navItem)
         }
     },
     ...indexTables({records, indexes, helpers})