@nebula.js/stardust 4.9.0 → 5.0.0-alpha.1

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.9.0
+* @nebula.js/stardust v5.0.0-alpha.1
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -296,8 +296,9 @@
 	            throw arg;
 	          }
 
-	          // Be forgiving, per 25.3.3.3.3 of the spec:
-	          // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+	          // Be forgiving, per GeneratorResume behavior specified since ES2015:
+	          // ES2015 spec, step 3: https://262.ecma-international.org/6.0/#sec-generatorresume
+	          // Latest spec, step 2: https://tc39.es/ecma262/#sec-generatorresume
 	          return doneResult();
 	        }
 	        context.method = method;
@@ -357,7 +358,7 @@
 	      var method = delegate.iterator[methodName];
 	      if (method === undefined$1) {
 	        // A .throw or .return when the delegate iterator has no .throw
-	        // method, or a missing .next mehtod, always terminate the
+	        // method, or a missing .next method, always terminate the
 	        // yield* loop.
 	        context.delegate = null;
 
@@ -496,7 +497,7 @@
 	      };
 	    };
 	    function values(iterable) {
-	      if (iterable || iterable === "") {
+	      if (iterable != null) {
 	        var iteratorMethod = iterable[iteratorSymbol];
 	        if (iteratorMethod) {
 	          return iteratorMethod.call(iterable);
@@ -722,26 +723,26 @@
 	  }
 	})(runtime);
 
-	function ownKeys(e, r) {
-	  var t = Object.keys(e);
+	function ownKeys(object, enumerableOnly) {
+	  var keys = Object.keys(object);
 	  if (Object.getOwnPropertySymbols) {
-	    var o = Object.getOwnPropertySymbols(e);
-	    r && (o = o.filter(function (r) {
-	      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-	    })), t.push.apply(t, o);
-	  }
-	  return t;
-	}
-	function _objectSpread2(e) {
-	  for (var r = 1; r < arguments.length; r++) {
-	    var t = null != arguments[r] ? arguments[r] : {};
-	    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-	      _defineProperty(e, r, t[r]);
-	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-	      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+	    var symbols = Object.getOwnPropertySymbols(object);
+	    enumerableOnly && (symbols = symbols.filter(function (sym) {
+	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+	    })), keys.push.apply(keys, symbols);
+	  }
+	  return keys;
+	}
+	function _objectSpread2(target) {
+	  for (var i = 1; i < arguments.length; i++) {
+	    var source = null != arguments[i] ? arguments[i] : {};
+	    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+	      _defineProperty(target, key, source[key]);
+	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+	      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
 	    });
 	  }
-	  return e;
+	  return target;
 	}
 	function _defineProperty(obj, key, value) {
 	  key = _toPropertyKey(key);
@@ -2876,7 +2877,7 @@
 
 	var extend$2 = /*@__PURE__*/getDefaultExportFromCjs(extend$1);
 
-	var fontSize = "13px";
+	var fontSize = "12px";
 	var fontFamily = "'Source Sans Pro', 'Arial', 'sans-serif'";
 	var backgroundColor$1 = "transparent";
 	var dataColors = {
@@ -3241,15 +3242,14 @@
 	    },
 	    dataColors() {
 	      /** @interface Theme~DataColorSpecials */
-	      return (/** @lends Theme~DataColorSpecials */{
-	          /** @type {string} */
-	          primary: resolvedTheme.dataColors.primaryColor,
-	          /** @type {string} */
-	          nil: resolvedTheme.dataColors.nullColor,
-	          /** @type {string} */
-	          others: resolvedTheme.dataColors.othersColor
-	        }
-	      );
+	      return /** @lends Theme~DataColorSpecials */{
+	        /** @type {string} */
+	        primary: resolvedTheme.dataColors.primaryColor,
+	        /** @type {string} */
+	        nil: resolvedTheme.dataColors.nullColor,
+	        /** @type {string} */
+	        others: resolvedTheme.dataColors.othersColor
+	      };
 	    },
 	    uiColor(c, shift) {
 	      // eslint-disable-next-line no-param-reassign
@@ -3575,7 +3575,6 @@
 	    }
 	  });
 	}
-
 	styleResolver.resolveRawTheme = raw => {
 	  // TODO - validate format
 	  const c = extend$2(true, {}, raw);
@@ -4542,7 +4541,6 @@
 	  });
 	  return reactExports.useRef((...args) =>
 	  // @ts-expect-error hide `this`
-	  // tslint:disable-next-line:ban-comma-operator
 	  (0, ref.current)(...args)).current;
 	}
 
@@ -4811,6 +4809,7 @@
 
 	// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
 	// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
+
 	const globalStateClassesMapping = {
 	  active: 'active',
 	  checked: 'checked',
@@ -6952,7 +6951,7 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.14.18
+	 * @mui/styled-engine v5.15.0
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
@@ -7031,7 +7030,6 @@
 	        // desktop
 	        xl: 1536 // large screen
 	      },
-
 	      unit = 'px',
 	      step = 5
 	    } = breakpoints,
@@ -7106,7 +7104,6 @@
 	  // desktop
 	  xl: 1536 // large screen
 	};
-
 	const defaultBreakpoints = {
 	  // Sorted ASC by size. That's important.
 	  // It can't be configured as it's used statically for propTypes.
@@ -7408,8 +7405,6 @@
 
 	// The different signatures imply different meaning for their arguments that can't be expressed structurally.
 	// We express the difference with variable names.
-	/* tslint:disable:unified-signatures */
-	/* tslint:enable:unified-signatures */
 
 	function createSpacing(spacingInput = 8) {
 	  // Already transformed.
@@ -7463,51 +7458,25 @@
 	  }
 	  return `${value}px solid`;
 	}
-	const border = style$2({
-	  prop: 'border',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderTop = style$2({
-	  prop: 'borderTop',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderRight = style$2({
-	  prop: 'borderRight',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderBottom = style$2({
-	  prop: 'borderBottom',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderLeft = style$2({
-	  prop: 'borderLeft',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderColor = style$2({
-	  prop: 'borderColor',
-	  themeKey: 'palette'
-	});
-	const borderTopColor = style$2({
-	  prop: 'borderTopColor',
-	  themeKey: 'palette'
-	});
-	const borderRightColor = style$2({
-	  prop: 'borderRightColor',
-	  themeKey: 'palette'
-	});
-	const borderBottomColor = style$2({
-	  prop: 'borderBottomColor',
-	  themeKey: 'palette'
-	});
-	const borderLeftColor = style$2({
-	  prop: 'borderLeftColor',
-	  themeKey: 'palette'
-	});
+	function createBorderStyle(prop, transform) {
+	  return style$2({
+	    prop,
+	    themeKey: 'borders',
+	    transform
+	  });
+	}
+	const border = createBorderStyle('border', borderTransform);
+	const borderTop = createBorderStyle('borderTop', borderTransform);
+	const borderRight = createBorderStyle('borderRight', borderTransform);
+	const borderBottom = createBorderStyle('borderBottom', borderTransform);
+	const borderLeft = createBorderStyle('borderLeft', borderTransform);
+	const borderColor = createBorderStyle('borderColor');
+	const borderTopColor = createBorderStyle('borderTopColor');
+	const borderRightColor = createBorderStyle('borderRightColor');
+	const borderBottomColor = createBorderStyle('borderBottomColor');
+	const borderLeftColor = createBorderStyle('borderLeftColor');
+	const outline = createBorderStyle('outline', borderTransform);
+	const outlineColor = createBorderStyle('outlineColor');
 
 	// false positive
 	// eslint-disable-next-line react/function-component-definition
@@ -7523,7 +7492,7 @@
 	};
 	borderRadius$1.propTypes = {};
 	borderRadius$1.filterProps = ['borderRadius'];
-	compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1);
+	compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1, outline, outlineColor);
 
 	// false positive
 	// eslint-disable-next-line react/function-component-definition
@@ -7721,6 +7690,13 @@
 	  borderLeftColor: {
 	    themeKey: 'palette'
 	  },
+	  outline: {
+	    themeKey: 'borders',
+	    transform: borderTransform
+	  },
+	  outlineColor: {
+	    themeKey: 'palette'
+	  },
 	  borderRadius: {
 	    themeKey: 'shape.borderRadius',
 	    style: borderRadius$1
@@ -8030,7 +8006,6 @@
 	    if (!sx) {
 	      return null; // Emotion & styled-components will neglect null
 	    }
-
 	    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
 
 	    /*
@@ -8697,7 +8672,6 @@
 	    if (color.type !== 'color') {
 	      val /= 255; // normalized
 	    }
-
 	    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
 	  });
 
@@ -10960,7 +10934,6 @@
 	  '&::-moz-focus-inner': {
 	    borderStyle: 'none' // Remove Firefox dotted outline.
 	  },
-
 	  [`&.${buttonBaseClasses$1.disabled}`]: {
 	    pointerEvents: 'none',
 	    // Disable link interactions
@@ -11127,7 +11100,7 @@
 	  });
 	  const handleKeyUp = useEventCallback(event => {
 	    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-	    // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+	    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
 	    if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
 	      keydownRef.current = false;
 	      rippleRef.current.stop(event, () => {
@@ -11820,7 +11793,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "8934" ;
+	const NEBULA_VERSION_HASH = "5ec7" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -11831,9 +11804,49 @@
 	  translator: null,
 	  constraints: {},
 	  interactions: {},
-	  themeApi: null
+	  themeApi: null,
+	  modelStore: {},
+	  selectionStore: {}
 	});
 
+	const DEFAULT_INTERACTIONS = {
+	  active: true,
+	  select: true,
+	  passive: true,
+	  edit: false
+	};
+	function pickConstraintsOrInteractions(context) {
+	  const {
+	    constraints = {},
+	    interactions = {}
+	  } = context;
+	  // If some interaction is defined, then we use that
+	  if (Object.keys(interactions).length > 0) {
+	    return interactions;
+	  }
+	  const ret = {};
+	  Object.keys(constraints).forEach(state => {
+	    ret[state] = !constraints[state];
+	  });
+	  return ret;
+	}
+	function unifyContraintsAndInteractions(context) {
+	  const interactions = {};
+	  const constraints = {};
+	  const definedSettings = pickConstraintsOrInteractions(context);
+	  Object.keys(DEFAULT_INTERACTIONS).forEach(state => {
+	    if (definedSettings[state] !== undefined) {
+	      interactions[state] = definedSettings[state];
+	      constraints[state] = !definedSettings[state];
+	    } else {
+	      interactions[state] = DEFAULT_INTERACTIONS[state];
+	      constraints[state] = !DEFAULT_INTERACTIONS[state];
+	    }
+	  });
+	  context.constraints = constraints;
+	  context.interactions = interactions;
+	}
+
 	var createKeyStore = (function () {
 	  let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 	  let applyMiddleware = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
@@ -11876,169 +11889,97 @@
 	  return [useKeyStore, store];
 	});
 
-	const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
-	const [useAppModalStore, appModalStore] = createKeyStore({});
-	const [useModalObjectStore, modalObjectStore] = createKeyStore({});
-
-	/* eslint no-underscore-dangle: 0 */
-	function createAppSelections(_ref) {
-	  let {
-	    app
-	  } = _ref;
-	  const key = "".concat(app.id);
-	  const end = async function () {
-	    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-	    const {
-	      model,
-	      objectSelections
-	    } = modalObjectStore.get(key) || {};
-	    if (model) {
-	      await model.endSelections(accept);
-	      modalObjectStore.clear(key);
-	      objectSelections.emit('deactivated');
-	    }
-	  };
-	  const begin = async _ref2 => {
-	    var _modalObjectStore$get;
+	function initializeStores$1(appId) {
+	  const [useRpcResultStore, rpcResultStore] = createKeyStore({});
+	  const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
+	  const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
+	  const [useRpcRequestModelStore, rpcRequestModelStore] = createKeyStore({});
+	  const [useModelChangedStore, modelChangedStore] = createKeyStore({});
+	  const [, modelInitializedStore] = createKeyStore({});
+	  const modelStoreMiddleware = _ref => {
 	    let {
-	      model,
-	      paths,
-	      accept = true,
-	      objectSelections
-	    } = _ref2;
-	    // Quick return if it's already in modal
-	    if (objectSelections === ((_modalObjectStore$get = modalObjectStore.get(key)) === null || _modalObjectStore$get === void 0 ? void 0 : _modalObjectStore$get.objectSelections)) {
-	      return;
+	      type,
+	      value: model
+	    } = _ref;
+	    const initialized = modelInitializedStore.get(model.id);
+	    modelInitializedStore.set(model.id, {});
+	    const onChanged = () => {
+	      rpcRequestStore.clear(model.id);
+	      modelChangedStore.set(model.id, {});
+	      modelChangedStore.dispatch(true); // Force new state to trigger hooks
+	    };
+	    const unsubscribe = () => {
+	      model.removeListener('changed', onChanged);
+	      rpcResultStore.clear(model.id);
+	      rpcRequestStore.clear(model.id);
+	      rpcRequestSessionModelStore.clear(model.id);
+	      rpcRequestModelStore.clear(model.id);
+	      modelChangedStore.clear(model.id);
+	      modelInitializedStore.clear(model.id);
+	    };
+	    switch (type) {
+	      case 'SET':
+	        if (!initialized) {
+	          model.on('changed', onChanged);
+	          model.once('closed', () => {
+	            unsubscribe();
+	          });
+	        }
+	        break;
 	    }
-
-	    // If other model is in modal state end it
-	    end(accept);
-
-	    // Pending modal
-	    modalObjectStore.set(key, {
-	      model,
-	      objectSelections
+	    return unsubscribe;
+	  };
+	  const [useModelStore, modelStore] = createKeyStore({}, modelStoreMiddleware);
+	  const subscribe = model => {
+	    const unsubscribe = modelStoreMiddleware({
+	      type: 'SET',
+	      value: model
 	    });
-	    const p = Array.isArray(paths) ? paths : [paths];
-	    const beginSelections = async skipRetry => {
-	      try {
-	        await model.beginSelections(p);
-	        modalObjectStore.set(key, {
-	          model,
-	          objectSelections
-	        }); // We have a modal
-	      } catch (err) {
-	        if (err.code === 6003 && !skipRetry) {
-	          await app.abortModal(accept);
-	          beginSelections(true);
-	        } else {
-	          modalObjectStore.clear(key); // No modal
-	        }
-	      }
+	    return () => {
+	      unsubscribe();
+	      modelStore.clear(model.id);
 	    };
-
-	    await beginSelections();
-	  };
-	  const appModal = {
-	    begin,
-	    end
 	  };
-	  appModalStore.set(key, appModal);
-
-	  /**
-	   * @class
-	   * @alias AppSelections
-	   */
-	  const appSelections = {
-	    model: app,
-	    isInModal() {
-	      return !!modalObjectStore.get(key);
-	    },
-	    isModal(objectSelections) {
-	      var _modalObjectStore$get2;
-	      // TODO check model state
-	      return objectSelections ? ((_modalObjectStore$get2 = modalObjectStore.get(key)) === null || _modalObjectStore$get2 === void 0 ? void 0 : _modalObjectStore$get2.objectSelections) === objectSelections : !!modalObjectStore.get(key);
-	    },
-	    forward() {
-	      return appModal.end().then(() => app.forward());
-	    },
-	    back() {
-	      return appModal.end().then(() => app.back());
-	    },
-	    clear() {
-	      return appModal.end().then(() => app.clearAll());
-	    },
-	    clearField(field) {
-	      let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
-	      return appModal.end().then(() => app.getField(field, state).then(f => f.clear()));
-	    }
+	  return {
+	    subscribe,
+	    useModelStore,
+	    modelStore,
+	    useModelChangedStore,
+	    useRpcResultStore,
+	    rpcResultStore,
+	    useRpcRequestStore,
+	    rpcRequestStore,
+	    useRpcRequestModelStore,
+	    rpcRequestModelStore,
+	    useRpcRequestSessionModelStore,
+	    rpcRequestSessionModelStore,
+	    modelChangedStore,
+	    appId
 	  };
-	  return appSelections;
-	}
-	function useAppSelections(app) {
-	  if (!app.session) {
-	    // assume the app is mocked if session is undefined
-	    return [];
-	  }
-	  const [appSelectionsStore] = useAppSelectionsStore();
-	  const key = app ? app.id : null;
-	  let appSelections = appSelectionsStore.get(key);
-	  reactExports.useEffect(() => {
-	    if (!app || appSelections) return;
-	    appSelections = createAppSelections({
-	      app
-	    });
-	    appSelectionsStore.set(key, appSelections);
-	    appSelectionsStore.dispatch(true);
-	  }, [app]);
-	  return [appSelections];
 	}
 
-	const DEFAULT_INTERACTIONS = {
-	  active: true,
-	  select: true,
-	  passive: true,
-	  edit: false
-	};
-	function pickConstraintsOrInteractions(context) {
-	  const {
-	    constraints = {},
-	    interactions = {}
-	  } = context;
-	  // If some interaction is defined, then we use that
-	  if (Object.keys(interactions).length > 0) {
-	    return interactions;
-	  }
-	  const ret = {};
-	  Object.keys(constraints).forEach(state => {
-	    ret[state] = !constraints[state];
-	  });
-	  return ret;
-	}
-	function unifyContraintsAndInteractions(context) {
-	  const interactions = {};
-	  const constraints = {};
-	  const definedSettings = pickConstraintsOrInteractions(context);
-	  Object.keys(DEFAULT_INTERACTIONS).forEach(state => {
-	    if (definedSettings[state] !== undefined) {
-	      interactions[state] = definedSettings[state];
-	      constraints[state] = !definedSettings[state];
-	    } else {
-	      interactions[state] = DEFAULT_INTERACTIONS[state];
-	      constraints[state] = !DEFAULT_INTERACTIONS[state];
-	    }
-	  });
-	  context.constraints = constraints;
-	  context.interactions = interactions;
+	function initializeStores(appId) {
+	  const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
+	  const [useAppModalStore, appModalStore] = createKeyStore({});
+	  const [useModalObjectStore, modalObjectStore] = createKeyStore({});
+	  return {
+	    useAppSelectionsStore,
+	    useAppModalStore,
+	    appSelectionsStore,
+	    appModalStore,
+	    useModalObjectStore,
+	    modalObjectStore,
+	    appId
+	  };
 	}
 
 	const NebulaApp = reactExports.forwardRef((_ref, ref) => {
 	  let {
 	    initialContext,
-	    app,
-	    renderCallback
+	    renderCallback,
+	    modelStore,
+	    selectionStore
 	  } = _ref;
-	  const [appSelections] = useAppSelections(app);
 	  const [context, setContext] = reactExports.useState(initialContext);
 	  const [muiThemeName, setMuiThemeName] = reactExports.useState();
 	  const {
@@ -12058,9 +11999,12 @@
 	      setComponents([...comps]);
 	    },
 	    setMuiThemeName,
-	    setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext),
-	    getAppSelections: () => appSelections
+	    setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext)
 	  }), []);
+	  if (context) {
+	    context.modelStore = modelStore;
+	    context.selectionStore = selectionStore;
+	  }
 	  return /*#__PURE__*/React.createElement(StyledEngineProvider, {
 	    injectFirst: true
 	  }, /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -12081,18 +12025,21 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.9.0" );
+	  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.1" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
 	    unifyContraintsAndInteractions(context);
 	  }
+	  const modelStore = initializeStores$1(app.id);
+	  const selectionStore = initializeStores(app.id);
 	  const root = client.createRoot(element);
 	  root.render( /*#__PURE__*/React.createElement(NebulaApp, {
 	    ref: appRef,
-	    app: app,
 	    initialContext: context,
-	    renderCallback: resolveRender
+	    renderCallback: resolveRender,
+	    modelStore: modelStore,
+	    selectionStore: selectionStore
 	  }));
 	  const cells = {};
 	  const components = [];
@@ -12141,12 +12088,8 @@
 	        }
 	        appRef.current.setContext(ctx);
 	      })();
-	    },
-	    getAppSelections: async () => {
-	      await rendered;
-	      return appRef.current.getAppSelections();
 	    }
-	  }, appRef, rendered];
+	  }, modelStore, selectionStore, appRef, rendered];
 	}
 
 	function getSvgIconUtilityClass(slot) {
@@ -16141,13 +16084,11 @@
 	      // IE11
 	      '&:focus::-ms-input-placeholder': placeholderVisible // Edge
 	    },
-
 	    [`&.${inputBaseClasses$1.disabled}`]: {
 	      opacity: 1,
 	      // Reset iOS opacity
 	      WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
 	    },
-
 	    '&:-webkit-autofill': {
 	      animationDuration: '5000s',
 	      animationName: 'mui-auto-fill'
@@ -16888,11 +16829,14 @@
 	});
 	var Badge$1 = Badge;
 
+	const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+	var boxClasses$1 = boxClasses;
+
 	const defaultTheme = createTheme();
 	const Box = createBox({
 	  themeId: THEME_ID,
 	  defaultTheme,
-	  defaultClassName: 'MuiBox-root',
+	  defaultClassName: boxClasses$1.root,
 	  generateClassName: ClassNameGenerator$1.generate
 	});
 	var Box$1 = Box;
@@ -17245,7 +17189,6 @@
 	})({
 	  display: 'block' // Keeps the progress centered
 	});
-
 	const CircularProgressCircle = styled$1('circle', {
 	  name: 'MuiCircularProgress',
 	  slot: 'Circle',
@@ -18672,10 +18615,10 @@
 	        color: "text.secondary",
 	        children: children
 	      }) : /*#__PURE__*/jsxRuntimeExports.jsxs(reactExports.Fragment, {
-	        children: [position === 'start' ? /* notranslate needed while Google Translate will not fix zero-width space issue */_span$1 || (_span$1 = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+	        children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span$1 || (_span$1 = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
 	          className: "notranslate",
 	          children: "\u200B"
-	        })) : null, children]
+	        }))) : null, children]
 	      })
 	    }))
 	  });
@@ -20849,57 +20792,36 @@
 	});
 	var Tooltip$1 = Tooltip;
 
-	const [useRpcResultStore, rpcResultStore] = createKeyStore({});
-	const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
-	const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
-	const [useRpcRequestModelStore, rpcRequestModelStore] = createKeyStore({});
-	const [useModelChangedStore, modelChangedStore] = createKeyStore({});
-	const [, modelInitializedStore] = createKeyStore({});
-	const modelStoreMiddleware = _ref => {
-	  let {
-	    type,
-	    value: model
-	  } = _ref;
-	  const initialized = modelInitializedStore.get(model.id);
-	  modelInitializedStore.set(model.id, {});
-	  const onChanged = () => {
-	    rpcRequestStore.clear(model.id);
-	    modelChangedStore.set(model.id, {});
-	    modelChangedStore.dispatch(true); // Force new state to trigger hooks
-	  };
-
-	  const unsubscribe = () => {
-	    model.removeListener('changed', onChanged);
-	    rpcResultStore.clear(model.id);
-	    rpcRequestStore.clear(model.id);
-	    rpcRequestSessionModelStore.clear(model.id);
-	    rpcRequestModelStore.clear(model.id);
-	    modelChangedStore.clear(model.id);
-	    modelInitializedStore.clear(model.id);
-	  };
-	  switch (type) {
-	    case 'SET':
-	      if (!initialized) {
-	        model.on('changed', onChanged);
-	        model.once('closed', () => {
-	          unsubscribe();
-	        });
-	      }
-	      break;
-	  }
-	  return unsubscribe;
-	};
-	const [useModelStore, modelStore] = createKeyStore({}, modelStoreMiddleware);
-	const subscribe = model => {
-	  const unsubscribe = modelStoreMiddleware({
-	    type: 'SET',
-	    value: model
-	  });
-	  return () => {
-	    unsubscribe();
-	    modelStore.clear(model.id);
-	  };
-	};
+	function useModelStore() {
+	  const {
+	    useModelStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useModelChangedStore() {
+	  const {
+	    useModelChangedStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useRpcResultStore() {
+	  const {
+	    useRpcResultStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useRpcRequestStore() {
+	  const {
+	    useRpcRequestStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useRpcRequestSessionModelStore() {
+	  const {
+	    useRpcRequestSessionModelStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
 
 	function useSessionModel(definition, app) {
 	  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
@@ -22027,7 +21949,6 @@
 	  if (frequencyMode === 'P') {
 	    return sizes.freqMinWidth; // because it will never grow beyond "100.0%"
 	  }
-
 	  return sizes.freqMaxWidth;
 	};
 	const getSelectedStyle = _ref3 => {
@@ -23034,7 +22955,6 @@
 	        } else {
 	          return; // propagate to other Esc handler
 	        }
-
 	        break;
 	      case KEYS.HOME:
 	        focusListItems.setFirst(true);
@@ -23068,7 +22988,6 @@
 	        return;
 	      // don't stop propagation since we want to outsource keydown to other handlers.
 	    }
-
 	    if (elementToFocus) {
 	      elementToFocus.focus();
 	    }
@@ -23234,7 +23153,6 @@
 	  if (!cell) {
 	    return null; // prevent rendering empty rows
 	  }
-
 	  const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
 	  const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
 	  // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
@@ -25977,7 +25895,6 @@
 	    if (s.scrollPosition === 'overflowEnd') {
 	      return; // Do keyScroll.reset() in fetchData() to avoid scrolling to top.
 	    }
-
 	    keyScroll.reset();
 	  }, [keyScroll.state.up, keyScroll.state.down, keyScroll.state.scrollPosition]);
 	  const {
@@ -26762,6 +26679,7 @@
 	    fontSize: 14,
 	    borderRadius: 0,
 	    backgroundColor: styles.search.backgroundColor,
+	    backdropFilter: styles.background.backgroundImage ? styles.search.backdropFilter : undefined,
 	    paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
 	    flexDirection: isRtl ? 'row-reverse' : 'row',
 	    '& fieldset': {
@@ -26769,6 +26687,9 @@
 	      borderWidth: '1px 0 1px 0',
 	      borderRadius: 0
 	    },
+	    '&.Mui-focused fieldset': {
+	      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
+	    },
 	    '& .MuiInputBase-root': _objectSpread2({}, styles.search),
 	    '& *': {
 	      color: styles.search.color
@@ -26776,9 +26697,6 @@
 	    '& input': {
 	      color: styles.search.color,
 	      textAlign: isRtl ? 'right' : 'left'
-	    },
-	    '&.Mui-focused fieldset.OutlinedInput-notchedOutline': {
-	      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
 	    }
 	  }, denseProps);
 	});
@@ -26956,6 +26874,128 @@
 	  });
 	}
 
+	/* eslint no-underscore-dangle: 0 */
+	function createAppSelections(_ref) {
+	  let {
+	    app,
+	    selectionStore
+	  } = _ref;
+	  const key = "".concat(app.id);
+	  const {
+	    modalObjectStore,
+	    appModalStore
+	  } = selectionStore;
+	  const end = async function () {
+	    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+	    const {
+	      model,
+	      objectSelections
+	    } = modalObjectStore.get(key) || {};
+	    if (model) {
+	      await model.endSelections(accept);
+	      modalObjectStore.clear(key);
+	      objectSelections.emit('deactivated');
+	    }
+	  };
+	  const begin = async _ref2 => {
+	    var _modalObjectStore$get;
+	    let {
+	      model,
+	      paths,
+	      accept = true,
+	      objectSelections
+	    } = _ref2;
+	    // Quick return if it's already in modal
+	    if (objectSelections === ((_modalObjectStore$get = modalObjectStore.get(key)) === null || _modalObjectStore$get === void 0 ? void 0 : _modalObjectStore$get.objectSelections)) {
+	      return;
+	    }
+
+	    // If other model is in modal state end it
+	    end(accept);
+
+	    // Pending modal
+	    modalObjectStore.set(key, {
+	      model,
+	      objectSelections
+	    });
+	    const p = Array.isArray(paths) ? paths : [paths];
+	    const beginSelections = async skipRetry => {
+	      try {
+	        await model.beginSelections(p);
+	        modalObjectStore.set(key, {
+	          model,
+	          objectSelections
+	        }); // We have a modal
+	      } catch (err) {
+	        if (err.code === 6003 && !skipRetry) {
+	          await app.abortModal(accept);
+	          beginSelections(true);
+	        } else {
+	          modalObjectStore.clear(key); // No modal
+	        }
+	      }
+	    };
+	    await beginSelections();
+	  };
+	  const appModal = {
+	    begin,
+	    end
+	  };
+	  appModalStore.set(key, appModal);
+
+	  /**
+	   * @class
+	   * @alias AppSelections
+	   */
+	  const appSelections = {
+	    model: app,
+	    isInModal() {
+	      return !!modalObjectStore.get(key);
+	    },
+	    isModal(objectSelections) {
+	      var _modalObjectStore$get2;
+	      // TODO check model state
+	      return objectSelections ? ((_modalObjectStore$get2 = modalObjectStore.get(key)) === null || _modalObjectStore$get2 === void 0 ? void 0 : _modalObjectStore$get2.objectSelections) === objectSelections : !!modalObjectStore.get(key);
+	    },
+	    forward() {
+	      return appModal.end().then(() => app.forward());
+	    },
+	    back() {
+	      return appModal.end().then(() => app.back());
+	    },
+	    clear() {
+	      return appModal.end().then(() => app.clearAll());
+	    },
+	    clearField(field) {
+	      let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
+	      return appModal.end().then(() => app.getField(field, state).then(f => f.clear()));
+	    }
+	  };
+	  return appSelections;
+	}
+	function useAppSelections(app) {
+	  if (!app.session) {
+	    // assume the app is mocked if session is undefined
+	    return [];
+	  }
+	  const {
+	    selectionStore
+	  } = reactExports.useContext(InstanceContext);
+	  const [appSelectionsStore] = selectionStore.useAppSelectionsStore();
+	  const key = app ? app.id : null;
+	  let appSelections = appSelectionsStore.get(key);
+	  reactExports.useEffect(() => {
+	    if (!app || appSelections) return;
+	    appSelections = createAppSelections({
+	      app,
+	      selectionStore
+	    });
+	    appSelectionsStore.set(key, appSelections);
+	    appSelectionsStore.dispatch(true);
+	  }, [app]);
+	  return [appSelections];
+	}
+
 	function eventmixin (obj) {
 	  /* eslint no-param-reassign: 0 */
 	  Object.keys(EventEmitter$1.prototype).forEach(key => {
@@ -27199,7 +27239,9 @@
 	  const elementsArr = Array.isArray(elements) ? elements : [elements];
 	  const [appSelections] = useAppSelections(app);
 	  const [layout] = useLayout$1(model);
-	  const [appModalStore] = useAppModalStore();
+	  const {
+	    appModalStore
+	  } = reactExports.useContext(InstanceContext).selectionStore;
 	  const appModal = appModalStore.get(app.id);
 	  const [objectSelections, setObjectSelections] = reactExports.useState();
 	  reactExports.useEffect(() => {
@@ -28546,7 +28588,6 @@
 	      this._lumi = 0.299 * this._r + 0.587 * this._g + 0.114 * this._b; // option 2
 	      // this._lumi = Math.sqrt( 0.241 * this._r * this._r + 0.691 * this._g * this._g + 0.068 * this._b * this._b ); // option 3
 	    }
-
 	    return this._lumi;
 	  }
 
@@ -29105,7 +29146,7 @@
 	function resolveBgColor(comp, theme, objectType) {
 	  const bgColor = comp === null || comp === void 0 ? void 0 : comp.bgColor;
 	  if (bgColor && theme) {
-	    if (bgColor.useExpression) {
+	    if (bgColor.useExpression || bgColor.useColorExpression) {
 	      return theme.validateColor(bgColor.colorExpression);
 	    }
 	  }
@@ -29200,24 +29241,25 @@
 	  return overrides;
 	}
 	function getSelectionColors(_ref) {
-	  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _selectionColors$sele, _theme$palette2, _selectionColors$alte, _theme$palette3, _selectionColors$excl, _theme$palette4, _selectionColors$sele2, _theme$palette5, _selectionColors$poss, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
+	  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _theme$palette2, _theme$palette3, _theme$palette4, _theme$palette5, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
 	  let {
+	    getColorPickerColor,
 	    theme,
 	    getListboxStyle,
 	    overrides,
 	    checkboxes
 	  } = _ref;
-	  const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.fontColor) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.color;
-	  const desiredTextColor = componentContentTextColor || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
+	  const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.fontColor;
+	  const desiredTextColor = getColorPickerColor(componentContentTextColor) || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
 	  const useContrastTextColor = !checkboxes && ((_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true);
 
 	  // Background colors
 	  const selectionColors = ((_overrides$selections = overrides.selections) === null || _overrides$selections === void 0 ? void 0 : _overrides$selections.colors) || {};
-	  const selected = ((_selectionColors$sele = selectionColors.selected) === null || _selectionColors$sele === void 0 ? void 0 : _selectionColors$sele.color) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
-	  const alternative = ((_selectionColors$alte = selectionColors.alternative) === null || _selectionColors$alte === void 0 ? void 0 : _selectionColors$alte.color) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
-	  const excluded = ((_selectionColors$excl = selectionColors.excluded) === null || _selectionColors$excl === void 0 ? void 0 : _selectionColors$excl.color) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
-	  const selectedExcluded = ((_selectionColors$sele2 = selectionColors.selectedExcluded) === null || _selectionColors$sele2 === void 0 ? void 0 : _selectionColors$sele2.color) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
-	  const possible = ((_selectionColors$poss = selectionColors.possible) === null || _selectionColors$poss === void 0 ? void 0 : _selectionColors$poss.color) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
+	  const selected = getColorPickerColor(selectionColors.selected) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
+	  const alternative = getColorPickerColor(selectionColors.alternative) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
+	  const excluded = getColorPickerColor(selectionColors.excluded) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
+	  const selectedExcluded = getColorPickerColor(selectionColors.selectedExcluded) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
+	  const possible = getColorPickerColor(selectionColors.possible) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
 
 	  // Font colors
 	  let selectedContrast = desiredTextColor || ((_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.selected.selectedContrastText);
@@ -29261,8 +29303,7 @@
 	      bgColor
 	    }, themeApi, 'listBox');
 	  } else {
-	    var _themeApi$getColorPic;
-	    color = (_themeApi$getColorPic = themeApi.getColorPickerColor(bgColor, true)) === null || _themeApi$getColorPic === void 0 ? void 0 : _themeApi$getColorPic.color;
+	    color = themeApi.getColorPickerColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color, false);
 	  }
 	  return color;
 	}
@@ -29282,14 +29323,16 @@
 	  } = _ref3;
 	  const overrides = getOverridesAsObject(components);
 	  const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
+	  const getColorPickerColor = c => (c === null || c === void 0 ? void 0 : c.index) > 0 || c !== null && c !== void 0 && c.color ? themeApi.getColorPickerColor(c, false) : undefined;
 	  const selections = getSelectionColors({
+	    getColorPickerColor,
 	    theme,
 	    getListboxStyle,
 	    overrides,
 	    checkboxes
 	  });
 	  const themeOverrides = overrides.theme || {};
-	  const headerColor = ((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 || (_themeOverrides$heade = _themeOverrides$heade.fontColor) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.color) || getListboxStyle('title.main', 'color');
+	  const headerColor = getColorPickerColor((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.fontColor) || getListboxStyle('title.main', 'color');
 	  const bgComponentColor = getBackgroundColor({
 	    themeApi,
 	    themeOverrides
@@ -29332,8 +29375,9 @@
 	    search: {
 	      color: searchColor,
 	      borderColor: theme.palette.divider,
-	      highlightBorderColor: theme.palette.primary.main,
-	      backgroundColor: searchBgColor
+	      highlightBorderColor: theme.palette.custom.focusBorder,
+	      backgroundColor: searchBgColor,
+	      backdropFilter: 'blur(8px)'
 	    },
 	    selections
 	  };
@@ -29599,7 +29643,6 @@
 	  segments.forEach((s, i) => {
 	    s.offset = i ? segments[i - 1].offset + segments[i - 1].ratio : 0; // eslint-disable-line
 	  });
-
 	  let Header = null;
 	  let Icon = null;
 	  let SegmentsIndicator = null;
@@ -30052,7 +30095,9 @@
 	    items: [],
 	    more: []
 	  });
-	  const [modalObjectStore] = useModalObjectStore();
+	  const {
+	    modalObjectStore
+	  } = reactExports.useContext(InstanceContext).selectionStore;
 	  const [containerRef, containerRect] = useRect$1();
 	  const [maxItems, setMaxItems] = reactExports.useState(0);
 	  const isInListboxPopover = () => {
@@ -30830,7 +30875,6 @@
 	        if (!event.target.classList.contains('listbox-container')) {
 	          break; // don't mess with keydown handlers within the listbox (e.g. row seletion)
 	        }
-
 	        keyboard.focus();
 	        prevent();
 	        break;
@@ -31013,9 +31057,8 @@
 	    }
 	    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
 	  } else {
-	    containerPadding = undefined; // to prevent overriding any default padding
+	    containerPadding = undefined;
 	  }
-
 	  return containerPadding;
 	}
 
@@ -31087,7 +31130,6 @@
 	    paddingRight: '1px' // make place for italic font style
 	  });
 	});
-
 	const isModal = _ref4 => {
 	  var _app$isInModalSelecti, _app$isInModalSelecti2;
 	  let {
@@ -31962,7 +32004,6 @@
 	      frequencyMode: getFrequencyModeLetter(options.frequencyMode) // stick to letter option hereafter
 	    });
 	  }
-
 	  const [changeCount, setChangeCount] = reactExports.useState(0);
 	  reactExports.useEffect(() => {
 	    if (changeCount) {
@@ -32364,7 +32405,6 @@
 	    {
 	      console.warn('Attempting to add fields to an object without a specified data target'); // eslint-disable-line no-console
 	    }
-
 	    return;
 	  }
 	  const {
@@ -32463,7 +32503,6 @@
 	    if (step === '') {
 	      continue; // eslint-disable-line no-continue
 	    }
-
 	    if (dataContainer[step] === undefined || dataContainer[step] === null) {
 	      return defaultValue;
 	    }
@@ -32633,7 +32672,6 @@
 	function getOthersLabel() {
 	  return 'Others'; // TODO: translator.get('properties.dimensionLimits.others')
 	}
-
 	function createDefaultDimension(dimensionDef, dimensionProperties) {
 	  const def = extend$2(true, {}, dimensionProperties, dimensionDef);
 	  if (!utils.getValue(def, 'qOtherTotalSpec.qOtherCounted')) {
@@ -33159,7 +33197,6 @@
 	  }
 	  return undefined; // TODO: add listbox and other
 	};
-
 	const getExportPropertiesFnc = qae => {
 	  if (qae.exportProperties) {
 	    return qae.exportProperties;
@@ -33174,7 +33211,6 @@
 	  }
 	  return undefined; // TODO: add listbox and other
 	};
-
 	const getImportPropertiesFnc = qae => {
 	  if (qae.importProperties) {
 	    return qae.importProperties;
@@ -35212,7 +35248,6 @@
 	  hooks.macro = null;
 	  maybeEndChain(hooks); // eslint-disable-line no-use-before-define
 	}
-
 	function maybeEndChain(hooks) {
 	  if (hooks.pendingPromises.length || hooks.micro || hooks.macro) {
 	    return;
@@ -36749,7 +36784,6 @@
 	    if (steps[i] === '') {
 	      continue; // eslint-disable-line no-continue
 	    }
-
 	    if (typeof dataContainer[steps[i]] === 'undefined') {
 	      return defaultValue;
 	    }
@@ -37225,7 +37259,6 @@
 	    // resize() {},
 	    // show() {},
 	  };
-
 	  return api;
 	}
 
@@ -37287,7 +37320,7 @@
 	 * };
 	 * nebbie.render(createConfig);
 	 */
-	async function createSessionObject(_ref, halo) {
+	async function createSessionObject(_ref, halo, store) {
 	  let {
 	    type,
 	    version,
@@ -37300,6 +37333,10 @@
 	  } = _ref;
 	  let mergedProps = {};
 	  const children = [];
+	  const {
+	    modelStore,
+	    subscribe
+	  } = store;
 	  let error;
 	  try {
 	    const t = halo.types.get({
@@ -37331,7 +37368,6 @@
 	    };
 	    // console.error(e); // eslint-disable-line
 	  }
-
 	  const model = await halo.app.createSessionObject(mergedProps);
 	  if (children.length > 0) {
 	    await model.setFullPropertyTree({
@@ -37365,7 +37401,7 @@
 	 * @property {EngineAPI.IGenericObjectProperties=} properties
 	 */
 
-	async function createObject(_ref, halo, generateOnly) {
+	async function createObject(_ref, halo, generateOnly, store) {
 	  let {
 	    type,
 	    version,
@@ -37375,6 +37411,9 @@
 	  } = _ref;
 	  let mergedProps = {};
 	  const children = [];
+	  const {
+	    modelStore
+	  } = store;
 	  // let error;
 	  try {
 	    const t = halo.types.get({
@@ -37410,7 +37449,6 @@
 	    }
 	    // console.error(e); // eslint-disable-line
 	  }
-
 	  if (!generateOnly) {
 	    const model = await halo.app.createObject(mergedProps);
 	    if (children.length > 0) {
@@ -37425,13 +37463,17 @@
 	  return mergedProps;
 	}
 
-	async function getObject$1(_ref, halo) {
+	async function getObject$1(_ref, halo, store) {
 	  let {
 	    id,
 	    options,
 	    plugins,
 	    element
 	  } = _ref;
+	  const {
+	    modelStore,
+	    rpcRequestModelStore
+	  } = store;
 	  const key = "".concat(id);
 	  let rpc = rpcRequestModelStore.get(key);
 	  if (!rpc) {
@@ -37508,7 +37550,8 @@
 	  } = halo;
 	  const [layout] = useLayout$1(model);
 	  const {
-	    theme: themeName
+	    theme: themeName,
+	    modelStore
 	  } = reactExports.useContext(InstanceContext);
 	  const [cells, setCells] = reactExports.useState([]);
 	  const [bgColor, setBgColor] = reactExports.useState(undefined);
@@ -37553,7 +37596,7 @@
 	          }
 	          const vs = await getObject$1({
 	            id: c.name
-	          }, halo);
+	          }, halo, modelStore);
 	          return {
 	            model: vs.model,
 	            id: c.name,
@@ -37787,13 +37830,17 @@
 	  return api;
 	}
 
-	async function getObject(_ref, halo) {
+	async function getObject(_ref, halo, store) {
 	  let {
 	    id,
 	    options,
 	    plugins,
 	    element
 	  } = _ref;
+	  const {
+	    modelStore,
+	    rpcRequestModelStore
+	  } = store;
 	  const key = "".concat(id);
 	  let rpc = rpcRequestModelStore.get(key);
 	  if (!rpc) {
@@ -37822,15 +37869,14 @@
 	   * @interface Flags
 	   */
 
-	  return (/** @lends Flags */{
-	      /**
-	       * Checks whether the specified flag is enabled.
-	       * @param {string} flag - The value flag to check.
-	       * @returns {boolean} True if the specified flag is enabled, false otherwise.
-	       */
-	      isEnabled: f => flags[f] === true
-	    }
-	  );
+	  return /** @lends Flags */{
+	    /**
+	     * Checks whether the specified flag is enabled.
+	     * @param {string} flag - The value flag to check.
+	     * @returns {boolean} True if the specified flag is enabled, false otherwise.
+	     */
+	    isEnabled: f => flags[f] === true
+	  };
 	}
 
 	var iterator;
@@ -38277,6 +38323,7 @@
 
 	// A linked list to keep track of recently-used-ness
 	const Yallist = yallist;
+
 	const MAX = Symbol('max');
 	const LENGTH = Symbol('length');
 	const LENGTH_CALCULATOR = Symbol('lengthCalculator');
@@ -38287,6 +38334,7 @@
 	const LRU_LIST = Symbol('lruList');
 	const CACHE = Symbol('cache');
 	const UPDATE_AGE_ON_GET = Symbol('updateAgeOnGet');
+
 	const naiveLength = () => 1;
 
 	// lruList is a yallist where the head is the youngest
@@ -38298,18 +38346,23 @@
 	// cache is a Map (or PseudoMap) that matches the keys to
 	// the Yallist.Node object.
 	class LRUCache {
-	  constructor(options) {
-	    if (typeof options === 'number') options = {
-	      max: options
-	    };
-	    if (!options) options = {};
-	    if (options.max && (typeof options.max !== 'number' || options.max < 0)) throw new TypeError('max must be a non-negative number');
+	  constructor (options) {
+	    if (typeof options === 'number')
+	      options = { max: options };
+
+	    if (!options)
+	      options = {};
+
+	    if (options.max && (typeof options.max !== 'number' || options.max < 0))
+	      throw new TypeError('max must be a non-negative number')
 	    // Kind of weird to have a default max of Infinity, but oh well.
 	    this[MAX] = options.max || Infinity;
+
 	    const lc = options.length || naiveLength;
-	    this[LENGTH_CALCULATOR] = typeof lc !== 'function' ? naiveLength : lc;
+	    this[LENGTH_CALCULATOR] = (typeof lc !== 'function') ? naiveLength : lc;
 	    this[ALLOW_STALE] = options.stale || false;
-	    if (options.maxAge && typeof options.maxAge !== 'number') throw new TypeError('maxAge must be a number');
+	    if (options.maxAge && typeof options.maxAge !== 'number')
+	      throw new TypeError('maxAge must be a number')
 	    this[MAX_AGE] = options.maxAge || 0;
 	    this[DISPOSE] = options.dispose;
 	    this[NO_DISPOSE_ON_SET] = options.noDisposeOnSet || false;
@@ -38318,32 +38371,40 @@
 	  }
 
 	  // resize the cache when the max changes.
-	  set max(mL) {
-	    if (typeof mL !== 'number' || mL < 0) throw new TypeError('max must be a non-negative number');
+	  set max (mL) {
+	    if (typeof mL !== 'number' || mL < 0)
+	      throw new TypeError('max must be a non-negative number')
+
 	    this[MAX] = mL || Infinity;
 	    trim(this);
 	  }
-	  get max() {
-	    return this[MAX];
+	  get max () {
+	    return this[MAX]
 	  }
-	  set allowStale(allowStale) {
+
+	  set allowStale (allowStale) {
 	    this[ALLOW_STALE] = !!allowStale;
 	  }
-	  get allowStale() {
-	    return this[ALLOW_STALE];
+	  get allowStale () {
+	    return this[ALLOW_STALE]
 	  }
-	  set maxAge(mA) {
-	    if (typeof mA !== 'number') throw new TypeError('maxAge must be a non-negative number');
+
+	  set maxAge (mA) {
+	    if (typeof mA !== 'number')
+	      throw new TypeError('maxAge must be a non-negative number')
+
 	    this[MAX_AGE] = mA;
 	    trim(this);
 	  }
-	  get maxAge() {
-	    return this[MAX_AGE];
+	  get maxAge () {
+	    return this[MAX_AGE]
 	  }
 
 	  // resize the cache when the lengthCalculator changes.
-	  set lengthCalculator(lC) {
-	    if (typeof lC !== 'function') lC = naiveLength;
+	  set lengthCalculator (lC) {
+	    if (typeof lC !== 'function')
+	      lC = naiveLength;
+
 	    if (lC !== this[LENGTH_CALCULATOR]) {
 	      this[LENGTH_CALCULATOR] = lC;
 	      this[LENGTH] = 0;
@@ -38354,16 +38415,12 @@
 	    }
 	    trim(this);
 	  }
-	  get lengthCalculator() {
-	    return this[LENGTH_CALCULATOR];
-	  }
-	  get length() {
-	    return this[LENGTH];
-	  }
-	  get itemCount() {
-	    return this[LRU_LIST].length;
-	  }
-	  rforEach(fn, thisp) {
+	  get lengthCalculator () { return this[LENGTH_CALCULATOR] }
+
+	  get length () { return this[LENGTH] }
+	  get itemCount () { return this[LRU_LIST].length }
+
+	  rforEach (fn, thisp) {
 	    thisp = thisp || this;
 	    for (let walker = this[LRU_LIST].tail; walker !== null;) {
 	      const prev = walker.prev;
@@ -38371,7 +38428,8 @@
 	      walker = prev;
 	    }
 	  }
-	  forEach(fn, thisp) {
+
+	  forEach (fn, thisp) {
 	    thisp = thisp || this;
 	    for (let walker = this[LRU_LIST].head; walker !== null;) {
 	      const next = walker.next;
@@ -38379,49 +38437,65 @@
 	      walker = next;
 	    }
 	  }
-	  keys() {
-	    return this[LRU_LIST].toArray().map(k => k.key);
+
+	  keys () {
+	    return this[LRU_LIST].toArray().map(k => k.key)
 	  }
-	  values() {
-	    return this[LRU_LIST].toArray().map(k => k.value);
+
+	  values () {
+	    return this[LRU_LIST].toArray().map(k => k.value)
 	  }
-	  reset() {
-	    if (this[DISPOSE] && this[LRU_LIST] && this[LRU_LIST].length) {
+
+	  reset () {
+	    if (this[DISPOSE] &&
+	        this[LRU_LIST] &&
+	        this[LRU_LIST].length) {
 	      this[LRU_LIST].forEach(hit => this[DISPOSE](hit.key, hit.value));
 	    }
+
 	    this[CACHE] = new Map(); // hash of items by key
 	    this[LRU_LIST] = new Yallist(); // list of items in order of use recency
 	    this[LENGTH] = 0; // length of items in the list
 	  }
 
-	  dump() {
-	    return this[LRU_LIST].map(hit => isStale(this, hit) ? false : {
-	      k: hit.key,
-	      v: hit.value,
-	      e: hit.now + (hit.maxAge || 0)
-	    }).toArray().filter(h => h);
+	  dump () {
+	    return this[LRU_LIST].map(hit =>
+	      isStale(this, hit) ? false : {
+	        k: hit.key,
+	        v: hit.value,
+	        e: hit.now + (hit.maxAge || 0)
+	      }).toArray().filter(h => h)
 	  }
-	  dumpLru() {
-	    return this[LRU_LIST];
+
+	  dumpLru () {
+	    return this[LRU_LIST]
 	  }
-	  set(key, value, maxAge) {
+
+	  set (key, value, maxAge) {
 	    maxAge = maxAge || this[MAX_AGE];
-	    if (maxAge && typeof maxAge !== 'number') throw new TypeError('maxAge must be a number');
+
+	    if (maxAge && typeof maxAge !== 'number')
+	      throw new TypeError('maxAge must be a number')
+
 	    const now = maxAge ? Date.now() : 0;
 	    const len = this[LENGTH_CALCULATOR](value, key);
+
 	    if (this[CACHE].has(key)) {
 	      if (len > this[MAX]) {
 	        del(this, this[CACHE].get(key));
-	        return false;
+	        return false
 	      }
+
 	      const node = this[CACHE].get(key);
 	      const item = node.value;
 
 	      // dispose of the old one before overwriting
 	      // split out into 2 ifs for better coverage tracking
 	      if (this[DISPOSE]) {
-	        if (!this[NO_DISPOSE_ON_SET]) this[DISPOSE](key, item.value);
+	        if (!this[NO_DISPOSE_ON_SET])
+	          this[DISPOSE](key, item.value);
 	      }
+
 	      item.now = now;
 	      item.maxAge = maxAge;
 	      item.value = value;
@@ -38429,44 +38503,57 @@
 	      item.length = len;
 	      this.get(key);
 	      trim(this);
-	      return true;
+	      return true
 	    }
+
 	    const hit = new Entry(key, value, len, now, maxAge);
 
 	    // oversized objects fall out of cache automatically.
 	    if (hit.length > this[MAX]) {
-	      if (this[DISPOSE]) this[DISPOSE](key, value);
-	      return false;
+	      if (this[DISPOSE])
+	        this[DISPOSE](key, value);
+
+	      return false
 	    }
+
 	    this[LENGTH] += hit.length;
 	    this[LRU_LIST].unshift(hit);
 	    this[CACHE].set(key, this[LRU_LIST].head);
 	    trim(this);
-	    return true;
+	    return true
 	  }
-	  has(key) {
-	    if (!this[CACHE].has(key)) return false;
+
+	  has (key) {
+	    if (!this[CACHE].has(key)) return false
 	    const hit = this[CACHE].get(key).value;
-	    return !isStale(this, hit);
+	    return !isStale(this, hit)
 	  }
-	  get(key) {
-	    return get(this, key, true);
+
+	  get (key) {
+	    return get(this, key, true)
 	  }
-	  peek(key) {
-	    return get(this, key, false);
+
+	  peek (key) {
+	    return get(this, key, false)
 	  }
-	  pop() {
+
+	  pop () {
 	    const node = this[LRU_LIST].tail;
-	    if (!node) return null;
+	    if (!node)
+	      return null
+
 	    del(this, node);
-	    return node.value;
+	    return node.value
 	  }
-	  del(key) {
+
+	  del (key) {
 	    del(this, this[CACHE].get(key));
 	  }
-	  load(arr) {
+
+	  load (arr) {
 	    // reset the cache
 	    this.reset();
+
 	    const now = Date.now();
 	    // A previous serialized cache has the most recent items first
 	    for (let l = arr.length - 1; l >= 0; l--) {
@@ -38474,7 +38561,8 @@
 	      const expiresAt = hit.e || 0;
 	      if (expiresAt === 0)
 	        // the item was created without expiration in a non aged cache
-	        this.set(hit.k, hit.v);else {
+	        this.set(hit.k, hit.v);
+	      else {
 	        const maxAge = expiresAt - now;
 	        // dont add already expired items
 	        if (maxAge > 0) {
@@ -38483,34 +38571,44 @@
 	      }
 	    }
 	  }
-	  prune() {
+
+	  prune () {
 	    this[CACHE].forEach((value, key) => get(this, key, false));
 	  }
 	}
+
 	const get = (self, key, doUse) => {
 	  const node = self[CACHE].get(key);
 	  if (node) {
 	    const hit = node.value;
 	    if (isStale(self, hit)) {
 	      del(self, node);
-	      if (!self[ALLOW_STALE]) return undefined;
+	      if (!self[ALLOW_STALE])
+	        return undefined
 	    } else {
 	      if (doUse) {
-	        if (self[UPDATE_AGE_ON_GET]) node.value.now = Date.now();
+	        if (self[UPDATE_AGE_ON_GET])
+	          node.value.now = Date.now();
 	        self[LRU_LIST].unshiftNode(node);
 	      }
 	    }
-	    return hit.value;
+	    return hit.value
 	  }
 	};
+
 	const isStale = (self, hit) => {
-	  if (!hit || !hit.maxAge && !self[MAX_AGE]) return false;
+	  if (!hit || (!hit.maxAge && !self[MAX_AGE]))
+	    return false
+
 	  const diff = Date.now() - hit.now;
-	  return hit.maxAge ? diff > hit.maxAge : self[MAX_AGE] && diff > self[MAX_AGE];
+	  return hit.maxAge ? diff > hit.maxAge
+	    : self[MAX_AGE] && (diff > self[MAX_AGE])
 	};
+
 	const trim = self => {
 	  if (self[LENGTH] > self[MAX]) {
-	    for (let walker = self[LRU_LIST].tail; self[LENGTH] > self[MAX] && walker !== null;) {
+	    for (let walker = self[LRU_LIST].tail;
+	      self[LENGTH] > self[MAX] && walker !== null;) {
 	      // We know that we're about to delete this one, and also
 	      // what the next least recently used key will be, so just
 	      // go ahead and set it now.
@@ -38520,17 +38618,21 @@
 	    }
 	  }
 	};
+
 	const del = (self, node) => {
 	  if (node) {
 	    const hit = node.value;
-	    if (self[DISPOSE]) self[DISPOSE](hit.key, hit.value);
+	    if (self[DISPOSE])
+	      self[DISPOSE](hit.key, hit.value);
+
 	    self[LENGTH] -= hit.length;
 	    self[CACHE].delete(hit.key);
 	    self[LRU_LIST].removeNode(node);
 	  }
 	};
+
 	class Entry {
-	  constructor(key, value, length, now, maxAge) {
+	  constructor (key, value, length, now, maxAge) {
 	    this.key = key;
 	    this.value = value;
 	    this.length = length;
@@ -38538,14 +38640,18 @@
 	    this.maxAge = maxAge || 0;
 	  }
 	}
+
 	const forEachStep = (self, fn, node, thisp) => {
 	  let hit = node.value;
 	  if (isStale(self, hit)) {
 	    del(self, node);
-	    if (!self[ALLOW_STALE]) hit = undefined;
+	    if (!self[ALLOW_STALE])
+	      hit = undefined;
 	  }
-	  if (hit) fn.call(thisp, hit.value, hit.key, self);
+	  if (hit)
+	    fn.call(thisp, hit.value, hit.key, self);
 	};
+
 	var lruCache = LRUCache;
 
 	// parse out just the options we care about
@@ -39752,7 +39858,6 @@
 	      {
 	        console.warn(e); // eslint-disable-line no-console
 	      }
-
 	      throw new Error("Failed to load visualization: '".concat(sKey, "'"));
 	    });
 	  }
@@ -39885,7 +39990,6 @@
 	        {
 	          console.warn("Visualization ".concat(name, " is not registered. Adding it now.")); // eslint-disable-line no-console
 	        }
-
 	        this.register({
 	          name,
 	          version
@@ -39896,7 +40000,6 @@
 	        {
 	          console.warn("Version ".concat(version, " of ").concat(name, " is not registered. Falling back to version ").concat(versionToUse)); // eslint-disable-line no-console
 	        }
-
 	        version = versionToUse;
 	      }
 	      return tc[name].get(version) || p.get(typeInfo);
@@ -40106,7 +40209,7 @@
 	    let currentContext = _objectSpread2(_objectSpread2({}, configuration.context), {}, {
 	      translator: locale.translator
 	    });
-	    const [root] = boot({
+	    const [root, modelStore] = boot({
 	      app,
 	      context: currentContext
 	    });
@@ -40132,7 +40235,6 @@
 	      translator: locale.translator,
 	      nebbie: null // actual value is set further down
 	    };
-
 	    const halo = {
 	      app,
 	      root,
@@ -40200,9 +40302,9 @@
 	      render: async cfg => {
 	        await currentThemePromise;
 	        if (cfg.id) {
-	          return getObject(cfg, halo);
+	          return getObject(cfg, halo, modelStore);
 	        }
-	        return createSessionObject(cfg, halo);
+	        return createSessionObject(cfg, halo, modelStore);
 	      },
 	      /**
 	       * Creates a visualization model
@@ -40218,7 +40320,7 @@
 	       *   }
 	       * );
 	       */
-	      create: async cfg => createObject(cfg, halo, false),
+	      create: async cfg => createObject(cfg, halo, false, modelStore),
 	      /**
 	       * Generates properties for a visualization object
 	       * @param {CreateConfig} cfg The create configuration.
@@ -40281,7 +40383,6 @@
 	       */
 	      selections: async () => {
 	        if (!selectionsApi) {
-	          // const appSelections = await root.getAppSelections(); // Don't expose this for now
 	          selectionsApi = /** @lends AppSelections# */{
 	            /**
 	             * Mounts the app selection UI into the provided HTMLElement.
@@ -40294,7 +40395,6 @@
 	                {
 	                  console.error('Already mounted'); // eslint-disable-line no-console
 	                }
-
 	                return;
 	              }
 	              selectionsComponentReference = mount({