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

package/core/esm/dev.js

@@ -1,11 +1,11 @@
 /*
-* @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.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, useContext, createElement, Component } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useContext, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, Component } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
 import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
@@ -282,8 +282,9 @@ var runtime = {exports: {}};
             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;
@@ -343,7 +344,7 @@ var runtime = {exports: {}};
       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;
 
@@ -482,7 +483,7 @@ var runtime = {exports: {}};
       };
     };
     function values(iterable) {
-      if (iterable || iterable === "") {
+      if (iterable != null) {
         var iteratorMethod = iterable[iteratorSymbol];
         if (iteratorMethod) {
           return iteratorMethod.call(iterable);
@@ -708,26 +709,26 @@ var runtime = {exports: {}};
   }
 })(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);
@@ -2819,7 +2820,7 @@ var extend$1 = function extend() {
 
 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 = {
@@ -3184,15 +3185,14 @@ function theme$1(resolvedTheme) {
     },
     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
@@ -3518,7 +3518,6 @@ function resolveVariables(objTree, variables) {
     }
   });
 }
-
 styleResolver.resolveRawTheme = raw => {
   // TODO - validate format
   const c = extend$2(true, {}, raw);
@@ -4075,7 +4074,6 @@ function useEventCallback(fn) {
   });
   return React.useRef((...args) =>
   // @ts-expect-error hide `this`
-  // tslint:disable-next-line:ban-comma-operator
   (0, ref.current)(...args)).current;
 }
 
@@ -4327,6 +4325,7 @@ var ClassNameGenerator$1 = ClassNameGenerator;
 
 // 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',
@@ -5670,7 +5669,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @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
@@ -5749,7 +5748,6 @@ function createBreakpoints(breakpoints) {
         // desktop
         xl: 1536 // large screen
       },
-
       unit = 'px',
       step = 5
     } = breakpoints,
@@ -5824,7 +5822,6 @@ const values = {
   // 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.
@@ -6071,8 +6068,6 @@ padding.filterProps = paddingKeys;
 
 // 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.
@@ -6126,51 +6121,25 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = style$1({
-  prop: 'border',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderTop = style$1({
-  prop: 'borderTop',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderRight = style$1({
-  prop: 'borderRight',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderBottom = style$1({
-  prop: 'borderBottom',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderLeft = style$1({
-  prop: 'borderLeft',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderColor = style$1({
-  prop: 'borderColor',
-  themeKey: 'palette'
-});
-const borderTopColor = style$1({
-  prop: 'borderTopColor',
-  themeKey: 'palette'
-});
-const borderRightColor = style$1({
-  prop: 'borderRightColor',
-  themeKey: 'palette'
-});
-const borderBottomColor = style$1({
-  prop: 'borderBottomColor',
-  themeKey: 'palette'
-});
-const borderLeftColor = style$1({
-  prop: 'borderLeftColor',
-  themeKey: 'palette'
-});
+function createBorderStyle(prop, transform) {
+  return style$1({
+    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
@@ -6186,7 +6155,7 @@ const borderRadius$1 = props => {
 };
 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
@@ -6384,6 +6353,13 @@ const defaultSxConfig = {
   borderLeftColor: {
     themeKey: 'palette'
   },
+  outline: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  outlineColor: {
+    themeKey: 'palette'
+  },
   borderRadius: {
     themeKey: 'shape.borderRadius',
     style: borderRadius$1
@@ -6693,7 +6669,6 @@ function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-
     const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
 
     /*
@@ -7271,7 +7246,6 @@ function getLuminance(color) {
     if (color.type !== 'color') {
       val /= 255; // normalized
     }
-
     return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
   });
 
@@ -8551,7 +8525,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8562,9 +8536,49 @@ var InstanceContext = React__default.createContext({
   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] : () => {};
@@ -8607,169 +8621,97 @@ var createKeyStore = (function () {
   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);
-  useEffect$1(() => {
-    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 = forwardRef((_ref, ref) => {
   let {
     initialContext,
-    app,
-    renderCallback
+    renderCallback,
+    modelStore,
+    selectionStore
   } = _ref;
-  const [appSelections] = useAppSelections(app);
   const [context, setContext] = useState$1(initialContext);
   const [muiThemeName, setMuiThemeName] = useState$1();
   const {
@@ -8789,9 +8731,12 @@ const NebulaApp = forwardRef((_ref, ref) => {
       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__default.createElement(StyledEngineProvider, {
     injectFirst: true
   }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -8812,18 +8757,21 @@ function boot(_ref2) {
   const appRef = React__default.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__default.createElement(NebulaApp, {
     ref: appRef,
-    app: app,
     initialContext: context,
-    renderCallback: resolveRender
+    renderCallback: resolveRender,
+    modelStore: modelStore,
+    selectionStore: selectionStore
   }));
   const cells = {};
   const components = [];
@@ -8872,65 +8820,40 @@ function boot(_ref2) {
         }
         appRef.current.setContext(ctx);
       })();
-    },
-    getAppSelections: async () => {
-      await rendered;
-      return appRef.current.getAppSelections();
     }
-  }, appRef, rendered];
+  }, modelStore, selectionStore, appRef, rendered];
 }
 
-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
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useModelChangedStore() {
+  const {
+    useModelChangedStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useRpcResultStore() {
+  const {
+    useRpcResultStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useRpcRequestStore() {
+  const {
+    useRpcRequestStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useRpcRequestSessionModelStore() {
+  const {
+    useRpcRequestSessionModelStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
 
 function useSessionModel(definition, app) {
   const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
@@ -10058,7 +9981,6 @@ const getMaxFreqWidth = _ref2 => {
   if (frequencyMode === 'P') {
     return sizes.freqMinWidth; // because it will never grow beyond "100.0%"
   }
-
   return sizes.freqMaxWidth;
 };
 const getSelectedStyle = _ref3 => {
@@ -11065,7 +10987,6 @@ function getRowsKeyboardNavigation(_ref) {
         } else {
           return; // propagate to other Esc handler
         }
-
         break;
       case KEYS.HOME:
         focusListItems.setFirst(true);
@@ -11099,7 +11020,6 @@ function getRowsKeyboardNavigation(_ref) {
         return;
       // don't stop propagation since we want to outsource keydown to other handlers.
     }
-
     if (elementToFocus) {
       elementToFocus.focus();
     }
@@ -11265,7 +11185,6 @@ function RowColumn(_ref) {
   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.
@@ -14158,7 +14077,6 @@ function ListBox(_ref) {
     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 {
@@ -14943,6 +14861,7 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     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': {
@@ -14950,6 +14869,9 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
       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
@@ -14957,9 +14879,6 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     '& input': {
       color: styles.search.color,
       textAlign: isRtl ? 'right' : 'left'
-    },
-    '&.Mui-focused fieldset.OutlinedInput-notchedOutline': {
-      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
     }
   }, denseProps);
 });
@@ -15137,6 +15056,128 @@ function ListBoxSearch(_ref2) {
   });
 }
 
+/* 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
+  } = useContext(InstanceContext);
+  const [appSelectionsStore] = selectionStore.useAppSelectionsStore();
+  const key = app ? app.id : null;
+  let appSelections = appSelectionsStore.get(key);
+  useEffect$1(() => {
+    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 => {
@@ -15380,7 +15421,9 @@ function useObjectSelections(app, model, elements, options) {
   const elementsArr = Array.isArray(elements) ? elements : [elements];
   const [appSelections] = useAppSelections(app);
   const [layout] = useLayout$1(model);
-  const [appModalStore] = useAppModalStore();
+  const {
+    appModalStore
+  } = useContext(InstanceContext).selectionStore;
   const appModal = appModalStore.get(app.id);
   const [objectSelections, setObjectSelections] = useState$1();
   useEffect$1(() => {
@@ -16727,7 +16770,6 @@ class Color {
       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;
   }
 
@@ -17286,7 +17328,7 @@ function resolveBgImage(bgComp, app) {
 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);
     }
   }
@@ -17381,24 +17423,25 @@ function getOverridesAsObject() {
   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);
@@ -17442,8 +17485,7 @@ function getBackgroundColor(_ref2) {
       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;
 }
@@ -17463,14 +17505,16 @@ function getStyles(_ref3) {
   } = _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
@@ -17513,8 +17557,9 @@ function getStyles(_ref3) {
     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
   };
@@ -17780,7 +17825,6 @@ function OneField(_ref) {
   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;
@@ -18233,7 +18277,9 @@ function SelectedFields(_ref) {
     items: [],
     more: []
   });
-  const [modalObjectStore] = useModalObjectStore();
+  const {
+    modalObjectStore
+  } = useContext(InstanceContext).selectionStore;
   const [containerRef, containerRect] = useRect$1();
   const [maxItems, setMaxItems] = useState$1(0);
   const isInListboxPopover = () => {
@@ -19011,7 +19057,6 @@ function getListboxContainerKeyboardNavigation(_ref) {
         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;
@@ -19194,9 +19239,8 @@ function getContainerPadding(_ref) {
     }
     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;
 }
 
@@ -19268,7 +19312,6 @@ const Title = styled$1(Typography)(_ref3 => {
     paddingRight: '1px' // make place for italic font style
   });
 });
-
 const isModal = _ref4 => {
   var _app$isInModalSelecti, _app$isInModalSelecti2;
   let {
@@ -20143,7 +20186,6 @@ function ListBoxWrapper(_ref) {
       frequencyMode: getFrequencyModeLetter(options.frequencyMode) // stick to letter option hereafter
     });
   }
-
   const [changeCount, setChangeCount] = useState$1(0);
   useEffect$1(() => {
     if (changeCount) {
@@ -20545,7 +20587,6 @@ async function populateData(_ref, halo) {
     {
       console.warn('Attempting to add fields to an object without a specified data target'); // eslint-disable-line no-console
     }
-
     return;
   }
   const {
@@ -20644,7 +20685,6 @@ const getValue = (data, reference, defaultValue) => {
     if (step === '') {
       continue; // eslint-disable-line no-continue
     }
-
     if (dataContainer[step] === undefined || dataContainer[step] === null) {
       return defaultValue;
     }
@@ -20814,7 +20854,6 @@ function copyPropertyOrSetDefault(propertyName, source, target, defaultValue) {
 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')) {
@@ -21340,7 +21379,6 @@ const getDefaultExportPropertiesFn = path => {
   }
   return undefined; // TODO: add listbox and other
 };
-
 const getExportPropertiesFnc = qae => {
   if (qae.exportProperties) {
     return qae.exportProperties;
@@ -21355,7 +21393,6 @@ const getDefaultImportPropertiesFnc = path => {
   }
   return undefined; // TODO: add listbox and other
 };
-
 const getImportPropertiesFnc = qae => {
   if (qae.importProperties) {
     return qae.importProperties;
@@ -23393,7 +23430,6 @@ function flushMacro(hooks) {
   hooks.macro = null;
   maybeEndChain(hooks); // eslint-disable-line no-use-before-define
 }
-
 function maybeEndChain(hooks) {
   if (hooks.pendingPromises.length || hooks.micro || hooks.macro) {
     return;
@@ -24930,7 +24966,6 @@ const resolveValue = (data, reference, defaultValue) => {
     if (steps[i] === '') {
       continue; // eslint-disable-line no-continue
     }
-
     if (typeof dataContainer[steps[i]] === 'undefined') {
       return defaultValue;
     }
@@ -25406,7 +25441,6 @@ function viz() {
     // resize() {},
     // show() {},
   };
-
   return api;
 }
 
@@ -25468,7 +25502,7 @@ async function init(model, optional, halo, initialError) {
  * };
  * nebbie.render(createConfig);
  */
-async function createSessionObject(_ref, halo) {
+async function createSessionObject(_ref, halo, store) {
   let {
     type,
     version,
@@ -25481,6 +25515,10 @@ async function createSessionObject(_ref, halo) {
   } = _ref;
   let mergedProps = {};
   const children = [];
+  const {
+    modelStore,
+    subscribe
+  } = store;
   let error;
   try {
     const t = halo.types.get({
@@ -25512,7 +25550,6 @@ async function createSessionObject(_ref, halo) {
     };
     // console.error(e); // eslint-disable-line
   }
-
   const model = await halo.app.createSessionObject(mergedProps);
   if (children.length > 0) {
     await model.setFullPropertyTree({
@@ -25546,7 +25583,7 @@ async function createSessionObject(_ref, halo) {
  * @property {EngineAPI.IGenericObjectProperties=} properties
  */
 
-async function createObject(_ref, halo, generateOnly) {
+async function createObject(_ref, halo, generateOnly, store) {
   let {
     type,
     version,
@@ -25556,6 +25593,9 @@ async function createObject(_ref, halo, generateOnly) {
   } = _ref;
   let mergedProps = {};
   const children = [];
+  const {
+    modelStore
+  } = store;
   // let error;
   try {
     const t = halo.types.get({
@@ -25591,7 +25631,6 @@ async function createObject(_ref, halo, generateOnly) {
     }
     // console.error(e); // eslint-disable-line
   }
-
   if (!generateOnly) {
     const model = await halo.app.createObject(mergedProps);
     if (children.length > 0) {
@@ -25606,13 +25645,17 @@ async function createObject(_ref, halo, generateOnly) {
   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) {
@@ -25689,7 +25732,8 @@ function Sheet(_ref) {
   } = halo;
   const [layout] = useLayout$1(model);
   const {
-    theme: themeName
+    theme: themeName,
+    modelStore
   } = useContext(InstanceContext);
   const [cells, setCells] = useState$1([]);
   const [bgColor, setBgColor] = useState$1(undefined);
@@ -25734,7 +25778,7 @@ function Sheet(_ref) {
           }
           const vs = await getObject$1({
             id: c.name
-          }, halo);
+          }, halo, modelStore);
           return {
             model: vs.model,
             id: c.name,
@@ -25968,13 +26012,17 @@ async function initSheet(model, optional, halo, initialError) {
   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) {
@@ -26003,15 +26051,14 @@ function flagsFn () {
    * @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;
@@ -26458,6 +26505,7 @@ try {
 
 // 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');
@@ -26468,6 +26516,7 @@ const NO_DISPOSE_ON_SET = Symbol('noDisposeOnSet');
 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
@@ -26479,18 +26528,23 @@ const naiveLength = () => 1;
 // 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;
@@ -26499,32 +26553,40 @@ class LRUCache {
   }
 
   // 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;
@@ -26535,16 +26597,12 @@ class LRUCache {
     }
     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;
@@ -26552,7 +26610,8 @@ class LRUCache {
       walker = prev;
     }
   }
-  forEach(fn, thisp) {
+
+  forEach (fn, thisp) {
     thisp = thisp || this;
     for (let walker = this[LRU_LIST].head; walker !== null;) {
       const next = walker.next;
@@ -26560,49 +26619,65 @@ class LRUCache {
       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;
@@ -26610,44 +26685,57 @@ class LRUCache {
       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--) {
@@ -26655,7 +26743,8 @@ class LRUCache {
       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) {
@@ -26664,34 +26753,44 @@ class LRUCache {
       }
     }
   }
-  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.
@@ -26701,17 +26800,21 @@ const trim = self => {
     }
   }
 };
+
 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;
@@ -26719,14 +26822,18 @@ class Entry {
     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
@@ -27933,7 +28040,6 @@ async function load(name, version, _ref, loader) {
       {
         console.warn(e); // eslint-disable-line no-console
       }
-
       throw new Error("Failed to load visualization: '".concat(sKey, "'"));
     });
   }
@@ -28066,7 +28172,6 @@ function create(_ref) {
         {
           console.warn("Visualization ".concat(name, " is not registered. Adding it now.")); // eslint-disable-line no-console
         }
-
         this.register({
           name,
           version
@@ -28077,7 +28182,6 @@ function create(_ref) {
         {
           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);
@@ -28287,7 +28391,7 @@ function nuked() {
     let currentContext = _objectSpread2(_objectSpread2({}, configuration.context), {}, {
       translator: locale.translator
     });
-    const [root] = boot({
+    const [root, modelStore] = boot({
       app,
       context: currentContext
     });
@@ -28313,7 +28417,6 @@ function nuked() {
       translator: locale.translator,
       nebbie: null // actual value is set further down
     };
-
     const halo = {
       app,
       root,
@@ -28381,9 +28484,9 @@ function nuked() {
       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
@@ -28399,7 +28502,7 @@ function nuked() {
        *   }
        * );
        */
-      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.
@@ -28462,7 +28565,6 @@ function nuked() {
        */
       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.
@@ -28475,7 +28577,6 @@ function nuked() {
                 {
                   console.error('Already mounted'); // eslint-disable-line no-console
                 }
-
                 return;
               }
               selectionsComponentReference = mount({