solid-ui 2.4.21-f8053087 → 2.4.22-027fc53e

package/dist/main.js

@@ -219,7 +219,7 @@ var AccessController = /*#__PURE__*/function () {
     value: function renderTemporaryStatus(message) {
       var _this5 = this;
 
-      // @@ TODO Introduce better system for error notification to user https://github.com/solid/mashlib/issues/87
+      // @@ TODO Introduce better system for error notification to user https://github.com/solidos/mashlib/issues/87
       this.statusElement.classList.add(this.classes.aclControlBoxStatusRevealed);
       this.statusElement.innerText = message;
       this.statusElement.classList.add(this.classes.temporaryStatusInit);
@@ -233,7 +233,7 @@ var AccessController = /*#__PURE__*/function () {
   }, {
     key: "renderStatus",
     value: function renderStatus(message) {
-      // @@ TODO Introduce better system for error notification to user https://github.com/solid/mashlib/issues/87
+      // @@ TODO Introduce better system for error notification to user https://github.com/solidos/mashlib/issues/87
       this.statusElement.classList.toggle(this.classes.aclControlBoxStatusRevealed, !!message);
       this.statusElement.innerText = message;
     }
@@ -555,7 +555,7 @@ var EXPLANATION = {
 
 /**
  * Renders the table of Owners, Editors, Posters, Submitters, Viewers
- * for https://github.com/solid/userguide/blob/main/views/sharing/userguide.md
+ * for https://github.com/solidos/userguide/blob/main/views/sharing/userguide.md
  */
 var AccessGroups = /*#__PURE__*/function () {
   // @@ was LiveStore but does not need to be connected to web
@@ -1058,7 +1058,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /**
  * Functions for rendering the ACL User Interface.
- * See https://github.com/solid/userguide/blob/main/views/sharing/userguide.md#view
+ * See https://github.com/solidos/userguide/blob/main/views/sharing/userguide.md#view
  * for a screenshot.
  * @packageDocumentation
  */
@@ -1155,7 +1155,7 @@ function shortNameForFolder(x) {
   if (slash >= 0) {
     str = str.slice(slash + 1);
   } // Return the folder's filename, or '/' if nothing found
-  // (but see https://github.com/solid/solid-ui/issues/196
+  // (but see https://github.com/solidos/solid-ui/issues/196
   // regarding whether this happens at the domain root or
   // not)
 
@@ -1168,7 +1168,7 @@ function shortNameForFolder(x) {
  * Presumably the '5' is a version number of some sort,
  * but all we know is it was already called ACLControlBox5
  * when it was introduced into solid-ui in
- * https://github.com/solid/solid-ui/commit/948b874bd93e7bf5160e6e224821b888f07d15f3#diff-4192a29f38a0ababd563b36b47eba5bbR54
+ * https://github.com/solidos/solid-ui/commit/948b874bd93e7bf5160e6e224821b888f07d15f3#diff-4192a29f38a0ababd563b36b47eba5bbR54
  */
 
 
@@ -1285,13 +1285,13 @@ function getDirectory(doc) {
 function isStorage(doc, aclDoc, store) {
   // @@ TODO: The methods used for targetIsStorage are HACKs - it should not be relied upon, and work is
   // @@ underway to standardize a behavior that does not rely upon this hack
-  // @@ hopefully fixed as part of https://github.com/solid/data-interoperability-panel/issues/10
+  // @@ hopefully fixed as part of https://github.com/solidos/data-interoperability-panel/issues/10
   return store.holds(doc, ns.rdf('type'), ns.space('Storage'), aclDoc);
 }
 
 function hasProtectedAcl(targetDoc) {
   // @@ TODO: This is hacky way of knowing whether or not a certain ACL file can be removed
-  // Hopefully we'll find a better, standardized solution to this - https://github.com/solid/specification/issues/37
+  // Hopefully we'll find a better, standardized solution to this - https://github.com/solidos/specification/issues/37
   return targetDoc.uri === targetDoc.site().uri;
 }
 /** @internal */
@@ -1360,7 +1360,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /**
  * Non-UI functions for access control.
- * See https://github.com/solid/web-access-control-spec
+ * See https://github.com/solidos/web-access-control-spec
  * for the spec that defines how ACL documents work.
  * @packageDocumentation
  */
@@ -1962,7 +1962,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /**
  * Renders the Sharing pane's "+" button and the menus behind it,
- * see https://github.com/solid/userguide/blob/main/views/sharing/userguide.md#add
+ * see https://github.com/solidos/userguide/blob/main/views/sharing/userguide.md#add
  */
 var AddAgentButtons = /*#__PURE__*/function () {
   function AddAgentButtons(groupList) {
@@ -2531,7 +2531,7 @@ exports.styles = void 0;
 
 /**
  * Contains CSS styles for the Sharing pane,
- * see https://github.com/solid/userguide/blob/main/views/sharing/userguide.md
+ * see https://github.com/solidos/userguide/blob/main/views/sharing/userguide.md
  * @packageDocumentation
  */
 var styles = {
@@ -2745,8 +2745,7 @@ function updatePromise(del, ins) {
     }); // callback
 
   }); // promise
-} // export findBookmarkDocument,
-
+}
 /*         Bookmarking
  */
 
@@ -7102,11 +7101,12 @@ var _debug = __webpack_require__(/*! ./debug */ "./lib/debug.js");
  *
  * You can also use it if you want to just run a mashlib whhich takes its
  * icons seved by other than github.
-*/
+ */
 
 /* eslint-disable multiline-ternary */
-// Do not export. lways us this module to find the icons, as it varies
-var iconsOnGithub = 'https://solid.github.io/solid-ui/src';
+// Do not export. Always us this module to find the icons, as they vary
+var iconsOnGithub = 'https://solidos.github.io/solid-ui/src'; // changed org 2022-05
+
 var icons = module.scriptURI // Firefox extension
 ? {
   iconBase: module.scriptURI.slice(0, module.scriptURI.lastIndexOf('/')) + '/icons/',
@@ -7162,7 +7162,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 If you would like to know more about the solid Solid project, please see
-https://github.com/solid/solid
+https://github.com/solidos/solid
 */
 
 /**
@@ -7436,7 +7436,7 @@ var stylesheetsMap = new Map();
 /**
  * returns a StyleSheet object.
  * See https://cssinjs.org/ for more info about JSS.
- * (despite the name, see https://github.com/solid/solid-ui/issues/199)
+ * (despite the name, see https://github.com/solidos/solid-ui/issues/199)
  */
 
 function getClasses(insertionPoint, styles) {
@@ -7446,7 +7446,7 @@ function getClasses(insertionPoint, styles) {
 /**
  * returns a JSS object.
  * See https://cssinjs.org/ for more info about JSS.
- * (despite the name, see https://github.com/solid/solid-ui/issues/199)
+ * (despite the name, see https://github.com/solidos/solid-ui/issues/199)
  */
 
 
@@ -7754,7 +7754,9 @@ exports.loginStatusBox = loginStatusBox;
 exports.newAppInstance = newAppInstance;
 exports.registrationControl = registrationControl;
 exports.registrationList = registrationList;
+exports.renderScopeHeadingRow = renderScopeHeadingRow;
 exports.renderSignInPopup = renderSignInPopup;
+exports.scopeLabel = scopeLabel;
 exports.selectWorkspace = selectWorkspace;
 
 var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"));
@@ -7775,7 +7777,7 @@ var _signup = __webpack_require__(/*! ../signup/signup.js */ "./lib/signup/signu
 
 var _style = __webpack_require__(/*! ../style */ "./lib/style.js");
 
-var _index = __webpack_require__(/*! ../utils/index */ "./lib/utils/index.js");
+var utils = _interopRequireWildcard(__webpack_require__(/*! ../utils */ "./lib/utils/index.js"));
 
 var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./lib/widgets/index.js"));
 
@@ -7783,37 +7785,20 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var store = _solidLogic.solidLogicSingleton.store;
 /**
- * Signing in, signing up, profile and preferences reloading
- * Type index management
+ * Resolves with the logged in user's WebID
  *
- * Many functions in this module take a context object which
- * holds various RDF symbols, add to it, and return a promise of it.
- *
- * * `me`                RDF symbol for the user's WebID
- * * `publicProfile`     The user's public profile, iff loaded
- * * `preferencesFile`   The user's personal preference file, iff loaded
- * * `index.public`      The user's public type index file
- * * `index.private`     The user's private type index file
- *
- * Not RDF symbols:
- * * `noun`            A string in english for the type of thing -- like "address book"
- * * `instance`        An array of nodes which are existing instances
- * * `containers`      An array of nodes of containers of instances
- * * `div`             A DOM element where UI can be displayed
- * * `statusArea`      A DOM element (opt) progress stuff can be displayed, or error messages
- * *
- * * Vocabulary:  "load" loads a file if it exists;
- * *  'Ensure" CREATES the file if it does not exist (if it can) and then loads it.
- * @packageDocumentation
+ * @param context
  */
-
-/**
-  * Resolves with the logged in user's WebID
-  *
-  * @param context
-  */
 // used to be logIn
+
 function ensureLoggedIn(context) {
   var me = _solidLogic.authn.currentUser();
 
@@ -7855,7 +7840,7 @@ function ensureLoggedIn(context) {
 // used to be logInLoadPreferences
 
 
-function ensureLoadedPreferences(_x2) {
+function ensureLoadedPreferences(_x) {
   return _ensureLoadedPreferences.apply(this, arguments);
 }
 /**
@@ -8002,7 +7987,7 @@ function _ensureLoadedPreferences() {
   return _ensureLoadedPreferences.apply(this, arguments);
 }
 
-function ensureLoadedProfile(_x3) {
+function ensureLoadedProfile(_x2) {
   return _ensureLoadedProfile.apply(this, arguments);
 }
 /**
@@ -8010,6 +7995,8 @@ function ensureLoadedProfile(_x3) {
   *
   * 2016-12-11 change to include forClass arc a la
   * https://github.com/solid/solid/blob/main/proposals/data-discovery.md
+  * This is now legacy; should instead use solid-logic getAppInstances
+  * leaving the `isPublic` param undefined will bring in community index things, too
   */
 
 
@@ -8074,210 +8061,139 @@ function _ensureLoadedProfile() {
   return _ensureLoadedProfile.apply(this, arguments);
 }
 
-function findAppInstances(_x4, _x5, _x6) {
+function findAppInstances(_x3, _x4, _x5) {
   return _findAppInstances.apply(this, arguments);
 }
-/**
-  * UI to control registration of instance
-  */
-
 
 function _findAppInstances() {
   _findAppInstances = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(context, theClass, isPublic) {
-    var visibility, index, thisIndex, registrations, instances, containers, unique, e, i, cont;
+    var items;
     return _regenerator["default"].wrap(function _callee6$(_context6) {
       while (1) {
         switch (_context6.prev = _context6.next) {
           case 0:
-            unique = function _unique(arr) {
-              return Array.from(new Set(arr));
-            };
-
-            if (!(isPublic === undefined)) {
-              _context6.next = 7;
+            if (!context.me) {
+              _context6.next = 6;
               break;
             }
 
-            _context6.next = 4;
-            return findAppInstances(context, theClass, true);
+            _context6.next = 3;
+            return (0, _solidLogic.getScopedAppInstances)(store, theClass, context.me);
 
-          case 4:
-            _context6.next = 6;
-            return findAppInstances(context, theClass, false);
+          case 3:
+            _context6.t0 = _context6.sent;
+            _context6.next = 7;
+            break;
 
           case 6:
-            return _context6.abrupt("return", context);
+            _context6.t0 = [];
 
           case 7:
-            _context6.prev = 7;
-            _context6.next = 10;
-            return isPublic ? ensureLoadedProfile(context) : ensureLoadedPreferences(context);
-
-          case 10:
-            _context6.next = 15;
-            break;
-
-          case 12:
-            _context6.prev = 12;
-            _context6.t0 = _context6["catch"](7);
-            widgets.complain(context, "loadIndex: login and load problem ".concat(_context6.t0));
-
-          case 15:
-            // console.log('awaited LogInLoad!', context)
-            visibility = isPublic ? 'public' : 'private';
-            _context6.prev = 16;
-            _context6.next = 19;
-            return (0, _solidLogic.loadIndex)(context, isPublic);
-
-          case 19:
-            _context6.next = 24;
-            break;
-
-          case 21:
-            _context6.prev = 21;
-            _context6.t1 = _context6["catch"](16);
-            debug.error(_context6.t1);
-
-          case 24:
-            index = context.index;
-            thisIndex = index[visibility];
-            registrations = thisIndex.map(function (ix) {
-              return _solidLogic.solidLogicSingleton.store.each(undefined, ns.solid('forClass'), theClass, ix);
-            }).reduce(function (acc, curr) {
-              return acc.concat(curr);
-            }, []);
-            instances = registrations.map(function (reg) {
-              return _solidLogic.solidLogicSingleton.store.each(reg, ns.solid('instance'));
-            }).reduce(function (acc, curr) {
-              return acc.concat(curr);
-            }, []);
-            containers = registrations.map(function (reg) {
-              return _solidLogic.solidLogicSingleton.store.each(reg, ns.solid('instanceContainer'));
-            }).reduce(function (acc, curr) {
-              return acc.concat(curr);
-            }, []);
-            context.instances = context.instances || [];
-            context.instances = unique(context.instances.concat(instances));
-            context.containers = context.containers || [];
-            context.containers = unique(context.containers.concat(containers));
-
-            if (containers.length) {
-              _context6.next = 35;
-              break;
-            }
-
-            return _context6.abrupt("return", context);
+            items = _context6.t0;
 
-          case 35:
-            _context6.prev = 35;
-            _context6.next = 38;
-            return _solidLogic.solidLogicSingleton.load(containers);
-
-          case 38:
-            _context6.next = 45;
-            break;
-
-          case 40:
-            _context6.prev = 40;
-            _context6.t2 = _context6["catch"](35);
-            e = new Error("[FAI] Unable to load containers".concat(_context6.t2));
-            debug.log(e); // complain
-
-            widgets.complain(context, "Error looking for ".concat(_index.utils.label(theClass), ":  ").concat(_context6.t2)); // but then ignore it
-            // throw new Error(e)
-
-          case 45:
-            i = 0;
-
-          case 46:
-            if (!(i < containers.length)) {
-              _context6.next = 56;
-              break;
+            if (isPublic === true) {
+              // old API - not recommended!
+              items = items.filter(function (item) {
+                return item.scope.label === 'public';
+              });
+            } else if (isPublic === false) {
+              items = items.filter(function (item) {
+                return item.scope.label === 'private';
+              });
             }
 
-            cont = containers[i];
-            _context6.t3 = context.instances;
-            _context6.next = 51;
-            return _solidLogic.solidLogicSingleton.getContainerMembers(cont.value);
-
-          case 51:
-            _context6.t4 = _context6.sent.map(function (uri) {
-              return _solidLogic.solidLogicSingleton.store.sym(uri);
+            context.instances = items.map(function (item) {
+              return item.instance;
             });
-            context.instances = _context6.t3.concat.call(_context6.t3, _context6.t4);
-
-          case 53:
-            i++;
-            _context6.next = 46;
-            break;
-
-          case 56:
             return _context6.abrupt("return", context);
 
-          case 57:
+          case 11:
           case "end":
             return _context6.stop();
         }
       }
-    }, _callee6, null, [[7, 12], [16, 21], [35, 40]]);
+    }, _callee6);
   }));
   return _findAppInstances.apply(this, arguments);
 }
 
-function registrationControl(_x7, _x8, _x9) {
-  return _registrationControl.apply(this, arguments);
+function scopeLabel(context, scope) {
+  var mine = context.me && context.me.sameTerm(scope.agent);
+  var name = mine ? '' : utils.label(scope.agent) + ' ';
+  return "".concat(name).concat(scope.label);
 }
 /**
-  * UI to List at all registered things
-  */
+ * UI to control registration of instance
+ */
 
 
+function registrationControl(_x6, _x7, _x8) {
+  return _registrationControl.apply(this, arguments);
+}
+
 function _registrationControl() {
   _registrationControl = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7(context, instance, theClass) {
-    var dom, box, context2, msg, tbody, form, registrationStatements, index, statements, _msg;
+    var registrationStatements, renderScopeCheckbox, dom, box, me, scopes, msg, tbody, form, _iterator, _step, scope, row;
 
     return _regenerator["default"].wrap(function _callee7$(_context7) {
       while (1) {
         switch (_context7.prev = _context7.next) {
           case 0:
+            renderScopeCheckbox = function _renderScopeCheckbox(scope) {
+              var statements = registrationStatements(scope.index);
+              var name = scopeLabel(context, scope);
+              var label = "".concat(name, " link to this ").concat(context.noun);
+              return widgets.buildCheckboxForm(context.dom, _solidLogic.solidLogicSingleton.store, label, null, statements, form, scope.index);
+            };
+
+            registrationStatements = function _registrationStatemen(index) {
+              var registrations = _solidLogic.solidLogicSingleton.getRegistrations(instance, theClass);
+
+              var reg = registrations.length ? registrations[0] : widgets.newThing(index);
+              return [(0, _rdflib.st)(reg, ns.solid('instance'), instance, index), (0, _rdflib.st)(reg, ns.solid('forClass'), theClass, index)];
+            };
+
+            /// / body of registrationControl
             dom = context.dom;
 
             if (!(!dom || !context.div)) {
-              _context7.next = 3;
+              _context7.next = 5;
               break;
             }
 
-            return _context7.abrupt("return", context);
+            throw new Error('registrationControl: need dom and div');
 
-          case 3:
+          case 5:
             box = dom.createElement('div');
             context.div.appendChild(box);
             context.me = _solidLogic.authn.currentUser(); // @@
 
-            if (context.me) {
-              _context7.next = 9;
+            me = context.me;
+
+            if (me) {
+              _context7.next = 12;
               break;
             }
 
             box.innerHTML = '<p style="margin:2em;">(Log in to save a link to this)</p>';
             return _context7.abrupt("return", context);
 
-          case 9:
-            _context7.prev = 9;
-            _context7.next = 12;
-            return (0, _solidLogic.ensureTypeIndexes)(context);
-
           case 12:
-            context2 = _context7.sent;
-            _context7.next = 19;
-            break;
+            _context7.prev = 12;
+            _context7.next = 15;
+            return (0, _solidLogic.loadAllTypeIndexes)(store, me);
 
           case 15:
-            _context7.prev = 15;
-            _context7.t0 = _context7["catch"](9);
+            scopes = _context7.sent;
+            _context7.next = 23;
+            break;
+
+          case 18:
+            _context7.prev = 18;
+            _context7.t0 = _context7["catch"](12);
 
             if (context.div && context.preferencesFileError) {
-              msg = '(Preferences not available)';
+              msg = '(Lists of stuff not available)';
               context.div.appendChild(dom.createElement('p')).textContent = msg;
             } else if (context.div) {
               msg = "registrationControl: Type indexes not available: ".concat(_context7.t0);
@@ -8285,168 +8201,201 @@ function _registrationControl() {
             }
 
             debug.log(msg);
+            return _context7.abrupt("return", context);
 
-          case 19:
-            box.innerHTML = '<table><tbody><tr></tr><tr></tr></tbody></table>'; // tbody will be inserted anyway
+          case 23:
+            box.innerHTML = '<table><tbody></tbody></table>'; // tbody will be inserted anyway
 
             box.setAttribute('style', 'font-size: 120%; text-align: right; padding: 1em; border: solid gray 0.05em;');
             tbody = box.children[0].children[0];
             form = new _rdflib.BlankNode(); // @@ say for now
 
-            registrationStatements = function registrationStatements(index) {
-              var registrations = _solidLogic.solidLogicSingleton.getRegistrations(instance, theClass);
-
-              var reg = registrations.length ? registrations[0] : widgets.newThing(index);
-              return [(0, _rdflib.st)(reg, ns.solid('instance'), instance, index), (0, _rdflib.st)(reg, ns.solid('forClass'), theClass, index)];
-            };
+            _iterator = _createForOfIteratorHelper(scopes);
 
             try {
-              if (context2.index && context2.index["public"] && context2.index["public"].length > 0) {
-                index = context2.index["public"][0];
-                statements = registrationStatements(index);
-                tbody.children[0].appendChild(widgets.buildCheckboxForm(context2.dom, _solidLogic.solidLogicSingleton.store, "Public link to this ".concat(context2.noun), null, statements, form, index));
-              }
-
-              if (context2.index && context2.index["private"] && context2.index["private"].length > 0) {
-                index = context2.index["private"][0];
-                statements = registrationStatements(index);
-                tbody.children[1].appendChild(widgets.buildCheckboxForm(context2.dom, _solidLogic.solidLogicSingleton.store, "Personal note of this ".concat(context2.noun), null, statements, form, index));
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                scope = _step.value;
+                row = tbody.appendChild(dom.createElement('tr'));
+                row.appendChild(renderScopeCheckbox(scope)); // @@ index
               }
-            } catch (e) {
-              _msg = "registrationControl: Error making panel: ".concat(e);
-
-              if (context.div) {
-                context.div.appendChild(widgets.errorMessageBlock(context.dom, e));
-              }
-
-              debug.log(_msg);
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
             }
 
-            return _context7.abrupt("return", context2);
+            return _context7.abrupt("return", context);
 
-          case 26:
+          case 30:
           case "end":
             return _context7.stop();
         }
       }
-    }, _callee7, null, [[9, 15]]);
+    }, _callee7, null, [[12, 18]]);
   }));
   return _registrationControl.apply(this, arguments);
 }
 
-function registrationList(_x10, _x11) {
-  return _registrationList.apply(this, arguments);
+function renderScopeHeadingRow(context, store, scope) {
+  var backgroundColor = {
+    "private": '#fee',
+    "public": '#efe'
+  };
+  var dom = context.dom;
+  var name = scopeLabel(context, scope);
+  var row = dom.createElement('tr');
+  var cell = row.appendChild(dom.createElement('td'));
+  cell.setAttribute('colspan', '3');
+  cell.style.backgoundColor = backgroundColor[scope.label] || 'white';
+  var header = cell.appendChild(dom.createElement('h3'));
+  header.textContent = name + ' links';
+  header.style.textAlign = 'left';
+  return row;
 }
+/**
+  * UI to List at all registered things
+  */
+
+
+function registrationList(_x9, _x10) {
+  return _registrationList.apply(this, arguments);
+} // registrationList
+
 
 function _registrationList() {
-  _registrationList = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(context0, options) {
-    var dom, div, box;
-    return _regenerator["default"].wrap(function _callee8$(_context8) {
+  _registrationList = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9(context, options) {
+    var dom, div, box, scopes, table, tbody, _iterator2, _step2, scope, headingRow, items, _iterator3, _step3, _loop;
+
+    return _regenerator["default"].wrap(function _callee9$(_context9) {
       while (1) {
-        switch (_context8.prev = _context8.next) {
+        switch (_context9.prev = _context9.next) {
           case 0:
-            dom = context0.dom;
-            div = context0.div;
+            dom = context.dom;
+            div = context.div;
             box = dom.createElement('div');
             div.appendChild(box);
-            context0.me = _solidLogic.authn.currentUser(); // @@
+            context.me = _solidLogic.authn.currentUser(); // @@
 
-            if (context0.me) {
-              _context8.next = 8;
+            if (context.me) {
+              _context9.next = 8;
               break;
             }
 
             box.innerHTML = '<p style="margin:2em;">(Log in list your stuff)</p>';
-            return _context8.abrupt("return", context0);
+            return _context9.abrupt("return", context);
 
           case 8:
-            return _context8.abrupt("return", (0, _solidLogic.ensureTypeIndexes)(context0).then(function (context) {
-              box.innerHTML = '<table><tbody></tbody></table>'; // tbody will be inserted anyway
-
-              // tbody will be inserted anyway
-              box.setAttribute('style', 'font-size: 120%; text-align: right; padding: 1em; border: solid #eee 0.5em;');
-              var table = box.firstChild;
-              var ix = [];
-              var sts = [];
-              var vs = ['private', 'public'];
-              vs.forEach(function (visibility) {
-                if (context.index && context.index[visibility].length > 0 && options[visibility]) {
-                  ix = ix.concat(context.index[visibility][0]);
-                  sts = sts.concat(_solidLogic.solidLogicSingleton.store.statementsMatching(undefined, ns.solid('instance'), undefined, context.index[visibility][0]));
-                }
-              });
+            _context9.next = 10;
+            return (0, _solidLogic.loadAllTypeIndexes)(store, context.me);
 
-              var _loop = function _loop(i) {
-                var statement = sts[i];
+          case 10:
+            scopes = _context9.sent;
+            // includes community indexes
+            // console.log('@@ registrationList ', scopes)
+            box.innerHTML = '<table><tbody></tbody></table>'; // tbody will be inserted anyway
 
-                if (options.type) {
-                  // now check  terms:forClass
-                  if (!_solidLogic.solidLogicSingleton.store.holds(statement.subject, ns.solid('forClass'), options.type, statement.why)) {
-                    return "continue"; // skip irrelevant ones
-                  }
-                } // const cla = statement.subject
+            box.setAttribute('style', 'font-size: 120%; text-align: right; padding: 1em; border: solid #eee 0.5em;');
+            table = box.firstChild;
+            tbody = table.firstChild;
+            _iterator2 = _createForOfIteratorHelper(scopes);
+            _context9.prev = 16;
+
+            _iterator2.s();
+
+          case 18:
+            if ((_step2 = _iterator2.n()).done) {
+              _context9.next = 30;
+              break;
+            }
 
+            scope = _step2.value;
+            // need some predicate for listing/adding agents
+            headingRow = renderScopeHeadingRow(context, store, scope);
+            tbody.appendChild(headingRow);
+            _context9.next = 24;
+            return (0, _solidLogic.getScopedAppsFromIndex)(store, scope, options.type || null);
+
+          case 24:
+            items = _context9.sent;
+            // any class
+            if (items.length === 0) headingRow.style.display = 'none'; // console.log(`registrationList: @@ instance items for class ${options.type || 'undefined' }:`, items)
+
+            _iterator3 = _createForOfIteratorHelper(items);
+
+            try {
+              _loop = function _loop() {
+                var item = _step3.value;
+                var row = widgets.personTR(dom, ns.solid('instance'), item.instance, {
+                  deleteFunction: function () {
+                    var _deleteFunction = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+                      return _regenerator["default"].wrap(function _callee8$(_context8) {
+                        while (1) {
+                          switch (_context8.prev = _context8.next) {
+                            case 0:
+                              _context8.next = 2;
+                              return (0, _solidLogic.deleteTypeIndexRegistration)(store, item);
+
+                            case 2:
+                              tbody.removeChild(row);
+
+                            case 3:
+                            case "end":
+                              return _context8.stop();
+                          }
+                        }
+                      }, _callee8);
+                    }));
 
-                // const cla = statement.subject
-                var inst = statement.object;
-                table.appendChild(widgets.personTR(dom, ns.solid('instance'), inst, {
-                  deleteFunction: function deleteFunction(_x) {
-                    if (!_solidLogic.solidLogicSingleton.store.updater) {
-                      throw new Error('Cannot delete this, store has no updater');
+                    function deleteFunction() {
+                      return _deleteFunction.apply(this, arguments);
                     }
 
-                    _solidLogic.solidLogicSingleton.store.updater.update([statement], [], function (uri, ok, errorBody) {
-                      if (ok) {
-                        debug.log("Removed from index: ".concat(statement.subject));
-                      } else {
-                        debug.log("Error: Cannot delete ".concat(statement, ": ").concat(errorBody));
-                      }
-                    });
-                  }
-                }));
+                    return deleteFunction;
+                  }()
+                });
+                row.children[0].style.paddingLeft = '3em';
+                tbody.appendChild(row);
               };
 
-              for (var i = 0; i < sts.length; i++) {
-                var _ret = _loop(i);
+              for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                _loop();
+              }
+            } catch (err) {
+              _iterator3.e(err);
+            } finally {
+              _iterator3.f();
+            }
 
-                if (_ret === "continue") continue;
-              } // registrationList
+          case 28:
+            _context9.next = 18;
+            break;
 
-              /*
-                  //const containers = solidLogicSingleton.store.each(theClass, ns.solid('instanceContainer'));
-                  if (containers.length) {
-                  fetcher.load(containers).then(function(xhrs){
-                  for (const i=0; i<containers.length; i++) {
-                  const cont = containers[i];
-                  instances = instances.concat(solidLogicSingleton.store.each(cont, ns.ldp('contains')));
-                  }
-                  });
-                  }
-                  */
+          case 30:
+            _context9.next = 35;
+            break;
 
+          case 32:
+            _context9.prev = 32;
+            _context9.t0 = _context9["catch"](16);
 
-              // registrationList
+            _iterator2.e(_context9.t0);
 
-              /*
-                  //const containers = solidLogicSingleton.store.each(theClass, ns.solid('instanceContainer'));
-                  if (containers.length) {
-                  fetcher.load(containers).then(function(xhrs){
-                  for (const i=0; i<containers.length; i++) {
-                  const cont = containers[i];
-                  instances = instances.concat(solidLogicSingleton.store.each(cont, ns.ldp('contains')));
-                  }
-                  });
-                  }
-                  */
-              return context;
-            }));
+          case 35:
+            _context9.prev = 35;
 
-          case 9:
+            _iterator2.f();
+
+            return _context9.finish(35);
+
+          case 38:
+            return _context9.abrupt("return", context);
+
+          case 39:
           case "end":
-            return _context8.stop();
+            return _context9.stop();
         }
       }
-    }, _callee8);
+    }, _callee9, null, [[16, 32, 35, 38]]);
   }));
   return _registrationList.apply(this, arguments);
 }
@@ -8455,14 +8404,14 @@ function getDefaultSignInButtonStyle() {
   return 'padding: 1em; border-radius:0.5em; font-size: 100%;';
 }
 /**
-  * Bootstrapping identity
-  * (Called by `loginStatusBox()`)
-  *
-  * @param dom
-  * @param setUserCallback
-  *
-  * @returns
-  */
+ * Bootstrapping identity
+ * (Called by `loginStatusBox()`)
+ *
+ * @param dom
+ * @param setUserCallback
+ *
+ * @returns
+ */
 
 
 function signInOrSignUpBox(dom, setUserCallback) {
@@ -8540,8 +8489,8 @@ function signInOrSignUpBox(dom, setUserCallback) {
 
 function renderSignInPopup(dom) {
   /**
-    * Issuer Menu
-    */
+   * Issuer Menu
+   */
   var issuerPopup = dom.createElement('div');
   issuerPopup.setAttribute('style', 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center;');
   dom.body.appendChild(issuerPopup);
@@ -8555,7 +8504,7 @@ function renderSignInPopup(dom) {
   issuerPopupBoxLabel.setAttribute('style', 'margin-right: 5px; font-weight: 800');
   issuerPopupBoxLabel.innerText = 'Select an identity provider';
   var issuerPopupBoxCloseButton = dom.createElement('button');
-  issuerPopupBoxCloseButton.innerHTML = '<img src="https://solid.github.io/solid-ui/src/icons/noun_1180156.svg" style="width: 2em; height: 2em;" title="Cancel">';
+  issuerPopupBoxCloseButton.innerHTML = '<img src="https://solidos.github.io/solid-ui/src/icons/noun_1180156.svg" style="width: 2em; height: 2em;" title="Cancel">';
   issuerPopupBoxCloseButton.setAttribute('style', 'background-color: transparent; border: none;');
   issuerPopupBoxCloseButton.addEventListener('click', function () {
     issuerPopup.remove();
@@ -8603,13 +8552,13 @@ function renderSignInPopup(dom) {
       }, _callee, null, [[0, 8]]);
     }));
 
-    return function loginToIssuer(_x12) {
+    return function loginToIssuer(_x11) {
       return _ref.apply(this, arguments);
     };
   }();
   /**
-     * Text-based idp selection
-     */
+   * Text-based idp selection
+   */
 
 
   var issuerTextContainer = dom.createElement('div');
@@ -8636,8 +8585,8 @@ function renderSignInPopup(dom) {
   issuerTextContainer.appendChild(issuerTextInputContainer);
   issuerPopupBox.appendChild(issuerTextContainer);
   /**
-     * Button-based idp selection
-     */
+   * Button-based idp selection
+   */
 
   var issuerButtonContainer = dom.createElement('div');
   issuerButtonContainer.setAttribute('style', "\n      display: flex;\n      flex-direction: column;\n      padding-top: 10px;\n    ");
@@ -8657,15 +8606,15 @@ function renderSignInPopup(dom) {
   issuerPopupBox.appendChild(issuerButtonContainer);
 }
 /**
-  * Login status box
-  *
-  * A big sign-up/sign in box or a logout box depending on the state
-  *
-  * @param dom
-  * @param listener
-  *
-  * @returns
-  */
+ * Login status box
+ *
+ * A big sign-up/sign in box or a logout box depending on the state
+ *
+ * @param dom
+ * @param listener
+ *
+ * @returns
+ */
 
 
 function loginStatusBox(dom) {
@@ -8826,28 +8775,28 @@ _solidLogic.authSession.onLogout( /*#__PURE__*/(0, _asyncToGenerator2["default"]
   }, _callee2, null, [[2, 17]]);
 })));
 /**
-  * Workspace selection etc
-  * See https://github.com/solid/userguide/issues/16
-  */
+ * Workspace selection etc
+ * See https://github.com/solidos/userguide/issues/16
+ */
 
 /**
-  * Returns a UI object which, if it selects a workspace,
-  * will callback(workspace, newBase).
-  * See https://github.com/solid/userguide/issues/16 for more info on workspaces.
-  *
-  * If necessary, will get an account, preference file, etc. In sequence:
-  *
-  *   - If not logged in, log in.
-  *   - Load preference file
-  *   - Prompt user for workspaces
-  *   - Allows the user to just type in a URI by hand
-  *
-  * Calls back with the workspace and the base URI
-  *
-  * @param dom
-  * @param appDetails
-  * @param callbackWS
-  */
+ * Returns a UI object which, if it selects a workspace,
+ * will callback(workspace, newBase).
+ * See https://github.com/solidos/userguide/issues/16 for more info on workspaces.
+ *
+ * If necessary, will get an account, preference file, etc. In sequence:
+ *
+ *   - If not logged in, log in.
+ *   - Load preference file
+ *   - Prompt user for workspaces
+ *   - Allows the user to just type in a URI by hand
+ *
+ * Calls back with the workspace and the base URI
+ *
+ * @param dom
+ * @param appDetails
+ * @param callbackWS
+ */
 
 
 function selectWorkspace(dom, appDetails, callbackWS) {
@@ -8890,7 +8839,7 @@ function selectWorkspace(dom, appDetails, callbackWS) {
 
   function displayOptions(context) {
     // console.log('displayOptions!', context)
-    function makeNewWorkspace(_x13) {
+    function makeNewWorkspace(_x12) {
       return _makeNewWorkspace.apply(this, arguments);
     } // const status = ''
 
@@ -9110,21 +9059,21 @@ function selectWorkspace(dom, appDetails, callbackWS) {
 } // selectWorkspace
 
 /**
-  * Creates a new instance of an app.
-  *
-  * An instance of an app could be e.g. an issue tracker for a given project,
-  * or a chess game, or calendar, or a health/fitness record for a person.
-  *
-  * Note that this use of the term 'app' refers more to entries in the user's
-  * type index than to actual software applications that use the personal data
-  * to which these entries point.
-  *
-  * @param dom
-  * @param appDetails
-  * @param callback
-  *
-  * @returns A div with a button in it for making a new app instance
-  */
+ * Creates a new instance of an app.
+ *
+ * An instance of an app could be e.g. an issue tracker for a given project,
+ * or a chess game, or calendar, or a health/fitness record for a person.
+ *
+ * Note that this use of the term 'app' refers more to entries in the user's
+ * type index than to actual software applications that use the personal data
+ * to which these entries point.
+ *
+ * @param dom
+ * @param appDetails
+ * @param callback
+ *
+ * @returns A div with a button in it for making a new app instance
+ */
 
 
 function newAppInstance(dom, appDetails, callback) {
@@ -9159,77 +9108,77 @@ function getUserRoles() {
 
 
 function _getUserRoles() {
-  _getUserRoles = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+  _getUserRoles = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
     var _yield$ensureLoadedPr, me, preferencesFile, preferencesFileError;
 
-    return _regenerator["default"].wrap(function _callee9$(_context9) {
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
       while (1) {
-        switch (_context9.prev = _context9.next) {
+        switch (_context10.prev = _context10.next) {
           case 0:
-            _context9.prev = 0;
-            _context9.next = 3;
+            _context10.prev = 0;
+            _context10.next = 3;
             return ensureLoadedPreferences({});
 
           case 3:
-            _yield$ensureLoadedPr = _context9.sent;
+            _yield$ensureLoadedPr = _context10.sent;
             me = _yield$ensureLoadedPr.me;
             preferencesFile = _yield$ensureLoadedPr.preferencesFile;
             preferencesFileError = _yield$ensureLoadedPr.preferencesFileError;
 
             if (!(!preferencesFile || preferencesFileError)) {
-              _context9.next = 9;
+              _context10.next = 9;
               break;
             }
 
             throw new Error(preferencesFileError);
 
           case 9:
-            return _context9.abrupt("return", _solidLogic.solidLogicSingleton.store.each(me, ns.rdf('type'), null, preferencesFile.doc()));
+            return _context10.abrupt("return", _solidLogic.solidLogicSingleton.store.each(me, ns.rdf('type'), null, preferencesFile.doc()));
 
           case 12:
-            _context9.prev = 12;
-            _context9.t0 = _context9["catch"](0);
-            debug.warn('Unable to fetch your preferences - this was the error: ', _context9.t0);
+            _context10.prev = 12;
+            _context10.t0 = _context10["catch"](0);
+            debug.warn('Unable to fetch your preferences - this was the error: ', _context10.t0);
 
           case 15:
-            return _context9.abrupt("return", []);
+            return _context10.abrupt("return", []);
 
           case 16:
           case "end":
-            return _context9.stop();
+            return _context10.stop();
         }
       }
-    }, _callee9, null, [[0, 12]]);
+    }, _callee10, null, [[0, 12]]);
   }));
   return _getUserRoles.apply(this, arguments);
 }
 
-function filterAvailablePanes(_x14) {
+function filterAvailablePanes(_x13) {
   return _filterAvailablePanes.apply(this, arguments);
 }
 
 function _filterAvailablePanes() {
-  _filterAvailablePanes = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10(panes) {
+  _filterAvailablePanes = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11(panes) {
     var userRoles;
-    return _regenerator["default"].wrap(function _callee10$(_context10) {
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
       while (1) {
-        switch (_context10.prev = _context10.next) {
+        switch (_context11.prev = _context11.next) {
           case 0:
-            _context10.next = 2;
+            _context11.next = 2;
             return getUserRoles();
 
           case 2:
-            userRoles = _context10.sent;
-            return _context10.abrupt("return", panes.filter(function (pane) {
+            userRoles = _context11.sent;
+            return _context11.abrupt("return", panes.filter(function (pane) {
               return isMatchingAudience(pane, userRoles);
             }));
 
           case 4:
           case "end":
-            return _context10.stop();
+            return _context11.stop();
         }
       }
-    }, _callee10);
+    }, _callee11);
   }));
   return _filterAvailablePanes.apply(this, arguments);
 }
@@ -11405,7 +11354,7 @@ function participationObject(subject, padDoc, me) {
     });
 
     if (parps.length > 1) {
-      // This can happen. https://github.com/solid/chat-pane/issues/71
+      // This can happen. https://github.com/solidos/chat-pane/issues/71
       var candidates = [];
 
       var _iterator = _createForOfIteratorHelper(parps),
@@ -12024,6 +11973,83 @@ module.exports = style; // @@ No way to do this in ESM
 
 /***/ }),
 
+/***/ "./lib/style_multiSelect.js":
+/*!**********************************!*\
+  !*** ./lib/style_multiSelect.js ***!
+  \**********************************/
+/***/ ((module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.style = void 0;
+
+/*
+ * BASED ON:
+ * IconicMultiSelect v0.7.0
+ * Licence:  MIT
+ * (c) 2021 Sidney Wimart.
+ * repo & configuration: https://github.com/sidneywm/iconic-multiselect
+ */
+
+/**
+ * @version IconicMultiSelect v0.7.0
+ * @licence  MIT
+ */
+var style = {
+  multiselect__container: "\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n        background-color: #fff;\n        border-radius: 2px;\n        -webkit-box-shadow: 0 1px 3px 0 #d1d1d2, 0 0 0 1px #d1d1d2;\n                box-shadow: 0 1px 3px 0 #d1d1d2, 0 0 0 1px #d1d1d2;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        min-height: 36px;\n        padding: 4px 8px 0 8px;\n        position: relative;\n        width: 354px;\n        margin-bottom: 5px;\n        font-size: 100%\n    ",
+
+  /*
+    multiselect__container:after: `
+        content: '';
+        min-height:inherit;
+        font-size:0;
+    `,
+     multiselect__container > *: `
+    color: #656565;
+    font-size: 14px;
+    `,
+  */
+  multiselect__wrapper: "\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -ms-flex-wrap: wrap;\n            flex-wrap: wrap;\n        height: 100%;\n        width: 100%;\n    ",
+  multiselect__clear_btn: "\n        cursor: pointer;\n        align-items: center;\n        margin-bottom: 4px;\n        margin-left: 4px;\n    ",
+  multiselect__options: "\n        background-color: #f6f6f6;\n        border-radius: 2px;\n        left: 0;\n        max-height: 0;\n        overflow: hidden;\n        position: absolute;\n        top: calc(100% + 3px);\n        z-index: 9999;\n        width: 100%;\n        opacity: 0;\n        transition: max-height 0.1s ease;\n    ",
+  multiselect__options_visible: "\n        background-color: #f6f6f6;\n        border-radius: 2px;\n        left: 0;\n        max-height: 0;\n        overflow: hidden;\n        position: absolute;\n        top: calc(100% + 3px);\n        z-index: 9999;\n        width: 100%;\n        opacity: 0;\n        transition: max-height 0.1s ease;\n        max-height: 200px;\n        -webkit-box-shadow: 0 1px 3px 0 #d1d1d2, 0 0 0 1px #d1d1d2;\n        box-shadow: 0 1px 3px 0 #d1d1d2, 0 0 0 1px #d1d1d2;\n        opacity: 1;\n        transition: max-height 0.2s ease;\n    ",
+  multiselect__options_ul: "\n        list-style: none;\n        margin: 0;\n        padding: 2px 0;\n        max-height: 200px;\n        overflow: auto;\n    ",
+  multiselect__options_ul_li: "\n        cursor: pointer;\n        padding: 4px 8px;\n    ",
+  // multiselect__options ul li:hover: `
+  multiselect__options_ul_li_hover: "\n        background-color: #dedede;\n    ",
+
+  /*
+    multiselect__options ul li *: `
+    pointer-events: none;
+    `,
+  */
+  multiselect__options_ul_p_multiselect__options_no_results: "\n        margin: 0;\n        padding: 8px;\n        text-align: center;\n    ",
+  multiselect__options_ul_p_multiselect__options_no_data: "\n        margin: 0;\n        padding: 8px;\n        text-align: center;\n    ",
+  // multiselect__options ul li.multiselect__options--selected: `
+  multiselect__options_ul_li_multiselect__options_selected: "\n        background-color: #656565;\n        color: #fff;\n    ",
+  // multiselect__options ul li.multiselect__options--selected:hover: `
+  multiselect__options_ul_li_multiselect__options_selected_hover: "\n    background-color: #656565;\n    ",
+  // multiselect__options ul li.arrow-selected: `
+  multiselect__options_ul_li_arrow_selected: "\n        border: 2px solid rgba(101, 101, 101, 0.5);\n    ",
+  multiselect__selected: "\n        background-color: #656565;\n        border-radius: 2px;\n        color: #fff;\n        margin-bottom: 4px;\n        margin-right: 4px;\n        padding: 4px 8px;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n    ",
+  multiselect__selected_multiselect__remove_btn: "\n        cursor: pointer;\n        display: flex;\n        margin-left: 6px;\n    ",
+  multiselect__input: "\n        border: none;\n        -ms-flex-preferred-size: 40%;\n            flex-basis: 40%;\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        height: 5px;        \n        margin-bottom: 4px;\n        min-width: 40%;\n        outline: none;      \n    "
+};
+exports.style = style;
+
+style.setStyle = function setStyle(ele, styleName) {
+  ele.style = style[styleName];
+};
+
+module.exports = style;
+//# sourceMappingURL=style_multiSelect.js.map
+
+/***/ }),
+
 /***/ "./lib/table.js":
 /*!**********************!*\
   !*** ./lib/table.js ***!
@@ -13750,7 +13776,7 @@ var TabElement = /*#__PURE__*/function (_HTMLElement3) {
 /**
  * Use this widget to generate tabs from triples set in the global store.
  *
- * [Here you can see examples of the tabs](https://solid.github.io/solid-ui/examples/tabs/).
+ * [Here you can see examples of the tabs](https://solidos.github.io/solid-ui/examples/tabs/).
  *
  * It assumes that items to use for tabs will be in a collection by default,
  * e.g.:
@@ -13912,9 +13938,9 @@ function tabWidget(options) {
   var marginsPrepped = margins.concat(margins).slice(orientation, orientation + 4);
   var marginsStyle = "margin: ".concat(marginsPrepped.join(' '), ";");
   var paddingStyle = "padding: ".concat(marginsPrepped.join(' '), ";");
-  var tabStyle = cornersStyle + "padding: 0.7em; max-width: 20em; color: ".concat(color, ";");
-  var unselectedStyle = "".concat(tabStyle + marginsStyle, "opacity: 50%; background-color: ").concat(backgroundColor, ";");
-  var selectedStyle = "".concat(tabStyle + marginsStyle, "background-color: ").concat(selectedColor, ";");
+  var tabStyle = cornersStyle + "position: relative; padding: 0.7em; max-width: 20em; color: ".concat(color, ";");
+  var unselectedStyle = "".concat(tabStyle + marginsStyle, " opacity: 50%; background-color: ").concat(backgroundColor, ";");
+  var selectedStyle = "".concat(tabStyle + marginsStyle, " background-color: ").concat(selectedColor, ";");
   var shownStyle = 'height: 100%; width: 100%;';
   var hiddenStyle = shownStyle + 'display: none;';
   rootElement.refresh = orderedSync;
@@ -13930,7 +13956,9 @@ function tabWidget(options) {
     var selectedTabURI = options.selectedTab.uri;
     var selectedTab1 = Array.from(tabContainer.children) // @ts-ignore
     .find(function (tab) {
-      return tab.subject && tab.subject.uri && tab.subject.uri === selectedTabURI;
+      return tab.subject && // @ts-ignore
+      tab.subject.uri && // @ts-ignore
+      tab.subject.uri === selectedTabURI;
     });
     var tab = selectedTab1 || selectedTab0 || tabContainer.children[0];
     var clickMe = tab.firstChild; // @ts-ignore
@@ -13945,7 +13973,7 @@ function tabWidget(options) {
   function addCancelButton(tabContainer) {
     if (tabContainer.dataset.onCloseSet) {
       // @@ TODO: this is only here to make the browser tests work
-      // Discussion at https://github.com/solid/solid-ui/pull/110#issuecomment-527080663
+      // Discussion at https://github.com/solidos/solid-ui/pull/110#issuecomment-527080663
       var existingCancelButton = tabContainer.querySelector('.unstyled');
       tabContainer.removeChild(existingCancelButton);
     }
@@ -13972,35 +14000,50 @@ function tabWidget(options) {
 
   function makeNewSlot(item) {
     var ele = dom.createElement(tabElement);
+    ele.setAttribute('style', unselectedStyle);
     ele.subject = item;
-    var div = ele.appendChild(dom.createElement('div'));
-    div.setAttribute('style', unselectedStyle);
-    div.addEventListener('click', function (e) {
-      if (!e.metaKey) {
-        resetTabStyle();
-        resetBodyStyle();
+    var div = ele.appendChild(dom.createElement('button'));
+    div.setAttribute('style', 'background: none; border: none; font: inherit; cursor: pointer');
+    var ellipsis = dom.createElement('button');
+    ellipsis.textContent = '...';
+    ellipsis.setAttribute('style', 'position: absolute; right: 0; bottom: 0; width: 20%; background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;');
+
+    div.onclick = function () {
+      resetTabStyle();
+      resetBodyStyle();
+      ele.setAttribute('style', selectedStyle);
+      if (!ele.bodyTR) return;
+      ele.bodyTR.setAttribute('style', shownStyle);
+      var bodyMain = getOrCreateContainerElement(ele);
+
+      if (options.renderMain && ele.subject && bodyMain.asSettings !== false) {
+        bodyMain.innerHTML = 'loading item ...' + item;
+        options.renderMain(bodyMain, ele.subject);
+        bodyMain.asSettings = false;
       }
+    };
 
-      div.setAttribute('style', selectedStyle);
+    ellipsis.onclick = function () {
+      resetTabStyle();
+      resetBodyStyle();
+      ele.setAttribute('style', selectedStyle);
       if (!ele.bodyTR) return;
       ele.bodyTR.setAttribute('style', shownStyle);
       var bodyMain = getOrCreateContainerElement(ele);
 
-      if (options.renderTabSettings && e.altKey && ele.subject && bodyMain.asSettings !== true) {
+      if (options.renderTabSettings && ele.subject && bodyMain.asSettings !== true) {
         bodyMain.innerHTML = 'loading settings ...' + item;
         options.renderTabSettings(bodyMain, ele.subject);
         bodyMain.asSettings = true;
-      } else if (options.renderMain && ele.subject && bodyMain.asSettings !== false) {
-        bodyMain.innerHTML = 'loading item ...' + item;
-        options.renderMain(bodyMain, ele.subject);
-        bodyMain.asSettings = false;
       }
-    });
+    };
 
     if (options.renderTab) {
       options.renderTab(div, item);
+      ele.appendChild(ellipsis);
     } else {
-      div.textContent = (0, _utils.label)(item);
+      div.innerHTML = (0, _utils.label)(item);
+      ele.appendChild(ellipsis);
     }
 
     return ele;
@@ -14080,10 +14123,8 @@ function tabWidget(options) {
 
       if (_tab.classList.contains('unstyled')) {
         continue;
-      }
-
-      if (_tab.children[0]) {
-        _tab.children[0].setAttribute('style', unselectedStyle);
+      } else {
+        _tab.setAttribute('style', unselectedStyle);
       }
     }
   }
@@ -14281,63 +14322,68 @@ function _getPodOwner() {
             podOwner = store.any(pod, _.ns.solid('owner'), null, pod) || store.any(null, _.ns.space('storage'), pod, pod);
 
             if (!podOwner) {
-              _context.next = 30;
+              _context.next = 31;
               break;
             }
 
             _context.prev = 18;
-            store.fetcher.load(podOwner.doc());
-            _context.next = 26;
+            _context.next = 21;
+            return store.fetcher.load(podOwner.doc());
+
+          case 21:
+            _context.next = 27;
             break;
 
-          case 22:
-            _context.prev = 22;
+          case 23:
+            _context.prev = 23;
             _context.t1 = _context["catch"](18);
             console.warn('Unable to load profile of pod owner ' + podOwner);
             return _context.abrupt("return", null);
 
-          case 26:
+          case 27:
             if (!store.holds(podOwner, _.ns.space('storage'), pod, podOwner.doc())) {
               console.warn("Pod owner ".concat(podOwner, " does NOT list pod ").concat(pod, " as their storage"));
             }
 
             return _context.abrupt("return", podOwner);
 
-          case 30:
+          case 31:
             // pod owner not declared in pod
             // @@ TODO: This is given the structure that NSS provides
             // This is a massive guess.  For old pods which don't have owner link
             guess = (0, _rdflib.sym)("".concat(pod.uri, "profile/card#me"));
-            _context.prev = 31;
-            // @ts-ignore  LiveStore always has fetcher
-            store.fetcher.load(guess);
-            _context.next = 39;
-            break;
+            _context.prev = 32;
+            _context.next = 35;
+            return store.fetcher.load(guess);
 
           case 35:
-            _context.prev = 35;
-            _context.t2 = _context["catch"](31);
+            _context.next = 41;
+            break;
+
+          case 37:
+            _context.prev = 37;
+            _context.t2 = _context["catch"](32);
             console.error('Ooops. Guessed wrong pod owner webid {$guess} : can\'t load it.');
             return _context.abrupt("return", null);
 
-          case 39:
+          case 41:
             if (!store.holds(guess, _.ns.space('storage'), pod, guess.doc())) {
-              _context.next = 42;
+              _context.next = 44;
               break;
             }
 
             console.warn('Using guessed pod owner webid but it links back.');
             return _context.abrupt("return", guess);
 
-          case 42:
+          case 44:
             return _context.abrupt("return", null);
 
-          case 43:
+          case 45:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[0, 9], [18, 22], [31, 35]]);
+    }, _callee, null, [[0, 9], [18, 23], [32, 37]]);
   }));
   return _getPodOwner.apply(this, arguments);
 }
@@ -15163,7 +15209,7 @@ function slice(s, suffix) {
 
 function getWellKnownLabel(thing) {
   return _solidLogic.store.any(thing, UI.ns.ui('label')) || // Prioritize ui:label
-  _solidLogic.store.any(thing, UI.ns.link('message')) || _solidLogic.store.any(thing, UI.ns.vcard('fn')) || _solidLogic.store.any(thing, UI.ns.foaf('name')) || _solidLogic.store.any(thing, UI.ns.dct('title')) || _solidLogic.store.any(thing, UI.ns.dc('title')) || _solidLogic.store.any(thing, UI.ns.rss('title')) || _solidLogic.store.any(thing, UI.ns.contact('fullName')) || _solidLogic.store.any(thing, _solidLogic.store.sym('http://www.w3.org/2001/04/roadmap/org#name')) || _solidLogic.store.any(thing, UI.ns.cal('summary')) || _solidLogic.store.any(thing, UI.ns.foaf('nick')) || _solidLogic.store.any(thing, UI.ns.as('name')) || _solidLogic.store.any(thing, UI.ns.schema('name')) || _solidLogic.store.any(thing, UI.ns.rdfs('label'));
+  _solidLogic.store.any(thing, UI.ns.link('message')) || _solidLogic.store.any(thing, UI.ns.vcard('fn')) || _solidLogic.store.any(thing, UI.ns.foaf('name')) || _solidLogic.store.any(thing, UI.ns.dct('title')) || _solidLogic.store.any(thing, UI.ns.dc('title')) || _solidLogic.store.any(thing, UI.ns.rss('title')) || _solidLogic.store.any(thing, UI.ns.contact('fullName')) || _solidLogic.store.any(thing, _solidLogic.store.sym('http://www.w3.org/2001/04/roadmap/org#name')) || _solidLogic.store.any(thing, UI.ns.cal('summary')) || _solidLogic.store.any(thing, UI.ns.foaf('nick')) || _solidLogic.store.any(thing, UI.ns.as('name')) || _solidLogic.store.any(thing, UI.ns.schema('name')) || _solidLogic.store.any(thing, UI.ns.rdfs('label')) || _solidLogic.store.any(thing, _solidLogic.store.sym('http://www.w3.org/2004/02/skos/core#prefLabel'));
 }
 //# sourceMappingURL=label.js.map
 
@@ -15183,11 +15229,11 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports.versionInfo = void 0;
 var versionInfo = {
-  buildTime: '2022-04-02T16:37:28Z',
-  commit: 'f8053087e41e525219e5a5e1cbc4703e4d8fa9ea',
+  buildTime: '2022-06-14T09:29:49Z',
+  commit: '027fc53ec9891c526b2c97f308a2f570faa0ea07',
   npmInfo: {
-    'solid-ui': '2.4.21',
-    npm: '6.14.16',
+    'solid-ui': '2.4.22',
+    npm: '6.14.17',
     ares: '1.18.1',
     brotli: '1.0.9',
     cldr: '40.0',
@@ -15196,12 +15242,12 @@ var versionInfo = {
     modules: '83',
     napi: '8',
     nghttp2: '1.42.0',
-    node: '14.19.0',
-    openssl: '1.1.1m',
+    node: '14.19.3',
+    openssl: '1.1.1o',
     tz: '2021a3',
     unicode: '14.0',
     uv: '1.42.0',
-    v8: '8.4.371.23-node.85',
+    v8: '8.4.371.23-node.87',
     zlib: '1.2.11'
   }
 };
@@ -16271,6 +16317,7 @@ function openHrefInOutlineMode(e) {
 
   if (dom.outlineManager) {
     // @@ TODO Remove the use of document as a global object
+    // TODO fix dependency cycle to solid-panes by calling outlineManager
     ;
     dom.outlineManager.GotoSubject(_solidLogic.store.sym(uri), true, undefined, true, undefined);
   } else if (window && window.panes && window.panes.getOutliner) {
@@ -16398,6 +16445,7 @@ function linkButton(dom, object) {
   b.textContent = 'Goto ' + utils.label(object);
   b.addEventListener('click', function (_event) {
     // b.parentNode.removeChild(b)
+    // TODO fix dependency cycle to solid-panes by calling outlineManager
     ;
     dom.outlineManager.GotoSubject(object, true, undefined, true, undefined);
   }, true);
@@ -17038,7 +17086,7 @@ function uploadFiles(fetcher, files, fileBase, imageBase, successHandler) {
 /*!******************************!*\
   !*** ./lib/widgets/error.js ***!
   \******************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
@@ -17048,6 +17096,8 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports.errorMessageBlock = errorMessageBlock;
 
+var _widgets = __webpack_require__(/*! ../widgets */ "./lib/widgets/index.js");
+
 /**
  * Create an error message block
  * @param dom The DOM on which dom.createElement will be called
@@ -17078,6 +17128,9 @@ function errorMessageBlock(dom, err, backgroundColor, err2) {
     div.textContent = err;
   }
 
+  div.appendChild((0, _widgets.cancelButton)(dom, function () {
+    if (div.parentNode) div.parentNode.removeChild(div);
+  })).style = 'width: 2em; height: 2em; align: right;';
   div.setAttribute('style', 'margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: ' + (backgroundColor || '#fee') + '; color:black;');
   return div;
 }
@@ -17116,6 +17169,12 @@ Object.defineProperty(exports, "field", ({
     return _fieldFunction.field;
   }
 }));
+Object.defineProperty(exports, "fieldFunction", ({
+  enumerable: true,
+  get: function get() {
+    return _fieldFunction.fieldFunction;
+  }
+}));
 Object.defineProperty(exports, "fieldLabel", ({
   enumerable: true,
   get: function get() {
@@ -17138,8 +17197,15 @@ exports.findClosest = findClosest;
 exports.formsFor = formsFor;
 exports.makeDescription = makeDescription;
 exports.makeSelectForCategory = makeSelectForCategory;
+exports.makeSelectForChoice = makeSelectForChoice;
 exports.makeSelectForNestedCategory = makeSelectForNestedCategory;
 exports.makeSelectForOptions = makeSelectForOptions;
+Object.defineProperty(exports, "mostSpecificClassURI", ({
+  enumerable: true,
+  get: function get() {
+    return _fieldFunction.mostSpecificClassURI;
+  }
+}));
 exports.newButton = newButton;
 exports.newThing = newThing;
 exports.promptForNew = promptForNew;
@@ -17187,6 +17253,8 @@ var _solidLogic = __webpack_require__(/*! solid-logic */ "./node_modules/solid-l
 
 var utils = _interopRequireWildcard(__webpack_require__(/*! ../utils */ "./lib/utils/index.js"));
 
+var _multiSelect = __webpack_require__(/*! ./multiSelect */ "./lib/widgets/multiSelect.js");
+
 var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./lib/widgets/index.js"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -17249,14 +17317,16 @@ _fieldFunction.field[ns.ui('Form').uri] = _fieldFunction.field[ns.ui('Group').ur
   var ui = ns.ui;
   if (container) container.appendChild(box); // Prevent loops
 
+  if (!form) return;
   var key = subject.toNT() + '|' + form.toNT();
 
   if (already[key]) {
     // been there done that
-    box.appendChild(dom.createTextNode('Group: see above ' + key));
-    var plist = [$rdf.st(subject, ns.owl('sameAs'), subject)]; // @@ need prev subject
+    box.appendChild(dom.createTextNode('Group: see above ' + key)); // TODO fix dependency cycle to solid-panes by calling outlineManager
+    // const plist = [$rdf.st(subject, ns.owl('sameAs'), subject)] // @@ need prev subject
+    // dom.outlineManager.appendPropertyTRs(box, plist)
+    // dom.appendChild(plist)
 
-    dom.outlineManager.appendPropertyTRs(box, plist);
     return box;
   }
 
@@ -17357,47 +17427,43 @@ _fieldFunction.field[ns.ui('Options').uri] = function (dom, container, already,
     values = kb.each(subject, dependingOn);
   }
 
-  if (values.length === 0) {
-    box.appendChild((0, _error.errorMessageBlock)(dom, "Can't select subform as no value of: " + dependingOn));
-  } else {
-    for (var i = 0; i < cases.length; i++) {
-      var c = cases[i];
-      var tests = kb.each(c, ui('for'), null, formDoc); // There can be multiple 'for'
+  for (var i = 0; i < cases.length; i++) {
+    var c = cases[i];
+    var tests = kb.each(c, ui('for'), null, formDoc); // There can be multiple 'for'
 
-      var match = false;
+    var match = false;
 
-      for (var j = 0; j < tests.length; j++) {
-        var _iterator = _createForOfIteratorHelper(values),
-            _step;
+    for (var j = 0; j < tests.length; j++) {
+      var _iterator = _createForOfIteratorHelper(values),
+          _step;
 
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var value = _step.value;
-            var test = tests[j];
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var value = _step.value;
+          var test = tests[j];
 
-            if (value.sameTerm(tests) || value.termType === test.termType && value.value === test.value) {
-              match = true;
-            }
+          if (value.sameTerm(tests) || value.termType === test.termType && value.value === test.value) {
+            match = true;
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
+    }
 
-      if (match) {
-        var _field3 = kb.the(c, ui('use'));
-
-        if (!_field3) {
-          box.appendChild((0, _error.errorMessageBlock)(dom, 'No "use" part for case in form ' + form));
-          return box;
-        } else {
-          appendForm(dom, box, already, subject, _field3, dataDoc, callbackFunction);
-        }
+    if (match) {
+      var _field3 = kb.the(c, ui('use'));
 
-        break;
+      if (!_field3) {
+        box.appendChild((0, _error.errorMessageBlock)(dom, 'No "use" part for case in form ' + form));
+        return box;
+      } else {
+        appendForm(dom, box, already, subject, _field3, dataDoc, callbackFunction);
       }
+
+      break;
     }
   } // @@ Add box.refresh() to sync fields with values
 
@@ -17685,7 +17751,7 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
     // delete button and move buttons
 
     if (kb.updater.editable(dataDoc.uri)) {
-      buttons.deleteButtonWithCheck(dom, subField, utils.label(property), deleteThisItem);
+      buttons.deleteButtonWithCheck(dom, subField, multipleUIlabel, deleteThisItem);
 
       if (ordered) {
         // Add controsl in a frame
@@ -17736,7 +17802,7 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
 
         var _shim = dom.createElement('div');
 
-        _shim.appendChild(subField); // Subfield has its own laytout
+        _shim.appendChild(subField); // Subfield has its own layout
 
 
         frame.appendChild(_shim);
@@ -17785,6 +17851,8 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
     return shim;
   }
 
+  var multipleUIlabel = kb.any(form, ui('label'));
+  if (!multipleUIlabel) multipleUIlabel = utils.label(property);
   var min = kb.any(form, ui('min')); // This is the minimum number -- default 0
 
   min = min ? 0 + min.value : 0;
@@ -17825,10 +17893,9 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
     img.setAttribute('src', plusIconURI); //  plus sign
 
     img.setAttribute('style', 'margin: 0.2em; width: 1.5em; height:1.5em');
-    img.title = 'Click to add one or more ' + utils.predicateLabel(property, reverse);
-    var prompt = tail.appendChild(dom.createElement('span'));
-    prompt.textContent = (values.length === 0 ? 'Add one or more ' : 'Add more ') + utils.predicateLabel(property, reverse); // utils.label(property)
-
+    img.title = 'Click to add another ' + multipleUIlabel;
+    var prompt = dom.createElement('span');
+    prompt.textContent = (values.length === 0 ? 'Add another ' : 'Add ') + multipleUIlabel;
     tail.addEventListener('click', /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(_eventNotUsed) {
         return _regenerator["default"].wrap(function _callee5$(_context5) {
@@ -17850,6 +17917,7 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
         return _ref3.apply(this, arguments);
       };
     }(), true);
+    tail.appendChild(prompt);
   }
 
   function createListIfNecessary() {
@@ -18111,28 +18179,38 @@ _fieldFunction.field[ns.ui('Classifier').uri] = function (dom, container, alread
  **
  **  Not nested.  Generates a link to something from a given class.
  **  Optional subform for the thing selected.
+ **  Generates a subForm based on a ui:use form
+ **  Will look like:
+ ** <div id=dropDownDiv>
+ **   <div id=labelOfDropDown>
+ **   <div id=selectDiv>
+ **     <select id=dropDownSelect>
+ **       <option> ....
+ **     <subForm>
  **  Alternative implementatons caould be:
  ** -- pop-up menu (as here)
  ** -- radio buttons
  ** -- auto-complete typing
  **
- ** Todo: Deal with multiple.  Maybe merge with multiple code.
+ ** TODO: according to ontology ui:choice can also have ns.ui('default') - this is not implemented yet
  */
 
 
 _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, subject, form, dataDoc, callbackFunction) {
   var ui = ns.ui;
   var kb = _solidLogic.store;
-  var multiple = false;
   var formDoc = form.doc ? form.doc() : null; // @@ if blank no way to know
 
   var p;
-  var box = dom.createElement('div'); // Set flexDirection column?
+  var box = dom.createElement('div');
+  box.setAttribute('class', 'choiceBox'); // Set flexDirection column?
 
   if (container) container.appendChild(box);
   var lhs = dom.createElement('div');
+  lhs.setAttribute('class', 'formFieldName choiceBox-label');
   box.appendChild(lhs);
   var rhs = dom.createElement('div');
+  rhs.setAttribute('class', 'formFieldValue choiceBox-selectBox');
   box.appendChild(rhs);
   var property = kb.any(form, ui('property'));
 
@@ -18141,87 +18219,128 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
   }
 
   lhs.appendChild((0, _basic.fieldLabel)(dom, property, form));
-  var from = kb.any(form, ui('from'));
+  var uiFrom = kb.any(form, ui('from'));
 
-  if (!from) {
+  if (!uiFrom) {
     return (0, _error.errorMessageBlock)(dom, "No 'from' for Choice: " + form);
   }
 
   var subForm = kb.any(form, ui('use')); // Optional
+  // const follow = kb.anyJS(form, ui('follow'), null, formDoc) // data doc moves to new subject?
 
-  var follow = kb.anyJS(form, ui('follow'), null, formDoc); // data doc moves to new subject?
-
-  var possible = [];
-  var possibleProperties;
-  var nullLabel = '--' + utils.label(property) + '-?';
   var opts = {
     form: form,
-    multiple: multiple,
-    nullLabel: nullLabel,
+    subForm: subForm,
     disambiguate: false
   };
-  possible = kb.each(undefined, ns.rdf('type'), from, formDoc);
 
-  for (var x in kb.findMembersNT(from)) {
-    possible.push(kb.fromNT(x));
-  } // Use rdfs
+  function getSelectorOptions() {
+    var possible = [];
+    var possibleProperties;
+    possible = kb.each(undefined, ns.rdf('type'), uiFrom, formDoc);
 
+    for (var x in kb.findMembersNT(uiFrom)) {
+      possible.push(kb.fromNT(x));
+    } // Use rdfs
 
-  if (from.sameTerm(ns.rdfs('Class'))) {
-    for (p in buttons.allClassURIs()) {
-      possible.push(kb.sym(p));
-    } // log.debug("%%% Choice field: possible.length 2 = "+possible.length)
 
-  } else if (from.sameTerm(ns.rdf('Property'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+    if (uiFrom.sameTerm(ns.rdfs('Class'))) {
+      for (p in buttons.allClassURIs()) {
+        possible.push(kb.sym(p));
+      } // log.debug("%%% Choice field: possible.length 2 = "+possible.length)
 
-    for (p in possibleProperties.op) {
-      possible.push(kb.fromNT(p));
-    }
+    } else if (uiFrom.sameTerm(ns.rdf('Property'))) {
+      possibleProperties = buttons.propertyTriage(kb);
 
-    for (p in possibleProperties.dp) {
-      possible.push(kb.fromNT(p));
-    }
+      for (p in possibleProperties.op) {
+        possible.push(kb.fromNT(p));
+      }
 
-    opts.disambiguate = true; // This is a big class, and the labels won't be enough.
-  } else if (from.sameTerm(ns.owl('ObjectProperty'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+      for (p in possibleProperties.dp) {
+        possible.push(kb.fromNT(p));
+      }
 
-    for (p in possibleProperties.op) {
-      possible.push(kb.fromNT(p));
-    }
+      opts.disambiguate = true; // This is a big class, and the labels won't be enough.
+    } else if (uiFrom.sameTerm(ns.owl('ObjectProperty'))) {
+      possibleProperties = buttons.propertyTriage(kb);
 
-    opts.disambiguate = true;
-  } else if (from.sameTerm(ns.owl('DatatypeProperty'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+      for (p in possibleProperties.op) {
+        possible.push(kb.fromNT(p));
+      }
+
+      opts.disambiguate = true;
+    } else if (uiFrom.sameTerm(ns.owl('DatatypeProperty'))) {
+      possibleProperties = buttons.propertyTriage(kb);
+
+      for (p in possibleProperties.dp) {
+        possible.push(kb.fromNT(p));
+      }
 
-    for (p in possibleProperties.dp) {
-      possible.push(kb.fromNT(p));
+      opts.disambiguate = true;
     }
 
-    opts.disambiguate = true;
-  }
+    return possible; // return sortByLabel(possible)
+  } // TODO: this checks for any occurrence, regardless of true or false setting
 
-  var object = kb.any(subject, property);
 
-  function addSubForm() {
-    object = kb.any(subject, property);
-    (0, _fieldFunction.fieldFunction)(dom, subForm)(dom, rhs, already, object, subForm, follow ? object.doc() : dataDoc, callbackFunction);
+  if (kb.any(form, ui('canMintNew'))) {
+    opts.mint = '* Create new *'; // @@ could be better
   }
 
-  var possible2 = sortByLabel(possible);
+  var multiSelect = kb.any(form, ui('multiselect')); // Optional
 
-  if (kb.any(form, ui('canMintNew'))) {
-    opts.mint = '* New *'; // @@ could be better
+  var selector;
 
-    opts.subForm = subForm;
-  }
+  rhs.refresh = function () {
+    // from ui:property
+    var selectedOptions = kb.each(subject, property, null, dataDoc).map(function (object) {
+      return object.value;
+    }); // from ui:from + ui:property
 
-  var selector = makeSelectForOptions(dom, kb, subject, property, possible2, opts, dataDoc, callbackFunction);
-  rhs.appendChild(selector);
-  if (object && subForm) addSubForm();
+    var possibleOptions = getSelectorOptions();
+    possibleOptions.push(selectedOptions);
+    possibleOptions = sortByLabel(possibleOptions);
+    selector = makeSelectForChoice(dom, rhs, kb, subject, property, possibleOptions, selectedOptions, uiFrom, opts, dataDoc, callbackFunction);
+    rhs.innerHTML = '';
+    rhs.appendChild(selector);
+
+    if (multiSelect) {
+      var multiSelectDiv = new _multiSelect.IconicMultiSelect({
+        placeholder: selector.selected,
+        select: selector,
+        container: rhs,
+        textField: 'textField',
+        valueField: 'valueField'
+      });
+      multiSelectDiv.init();
+      multiSelectDiv.subscribe(function (event) {
+        if (event.action === 'REMOVE_OPTION') {
+          selectedOptions = selectedOptions.filter(function (value) {
+            return value !== event.value;
+          });
+        }
+
+        if (event.action === 'CLEAR_ALL_OPTIONS') {
+          selectedOptions = [];
+        }
+
+        if (event.action === 'ADD_OPTION') {
+          selectedOptions.push(event.value);
+        }
+
+        selector.update(selectedOptions);
+      });
+    }
+  };
+
+  rhs.refresh();
+  if (selector && selector.refresh) selector.refresh();
   return box;
-}; //          Documentation - non-interactive fields
+};
+
+function addSubFormChoice(dom, selectDiv, already, subject, subForm, dataDoc, callbackFunction) {
+  (0, _fieldFunction.fieldFunction)(dom, subForm)(dom, selectDiv, already, subject, subForm, dataDoc, callbackFunction);
+} //          Documentation - non-interactive fields
 //
 
 
@@ -18424,7 +18543,8 @@ function promptForNew(dom, kb, subject, predicate, theClass, form, dataDoc, call
       b.setAttribute('type', 'button');
       b.setAttribute('style', 'float: right;');
       b.innerHTML = 'Goto ' + utils.label(theClass);
-      b.addEventListener('click', function (_e) {
+      b.addEventListener('click', // TODO fix dependency cycle to solid-panes by calling outlineManager
+      function (_e) {
         dom.outlineManager.GotoSubject(theClass, true, undefined, true, undefined);
       }, false);
       return box;
@@ -18559,10 +18679,8 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
 // @param subject - a term, the subject of the statement(s) being edited.
 // @param predicate - a term, the predicate of the statement(s) being edited
 // @param possible - a list of terms, the possible value the object can take
-// @param options.multiple - Boolean - Whether more than one at a time is allowed
 // @param options.nullLabel - a string to be displayed as the
 //                        option for none selected (for non multiple)
-// @param options.mint - User may create thing if this sent to the prompt string eg "New foo"
 // @param options.subForm - If mint, then the form to be used for minting the new thing
 // @param dataDoc - The web document being edited
 // @param callbackFunction - takes (boolean ok, string errorBody)
@@ -18586,7 +18704,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
   } // uris is now the set of possible options
 
 
-  if (n === 0 && !options.mint) {
+  if (n === 0) {
     return (0, _error.errorMessageBlock)(dom, "Can't do selector with no options, subject= " + subject + ' property = ' + predicate + '.');
   }
 
@@ -18600,7 +18718,9 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
       actual = kb.findTypeURIs(subject);
     } else {
       kb.each(subject, predicate, null, dataDoc).forEach(function (x) {
-        actual[x.uri] = true;
+        if (x.uri) {
+          actual[x.uri] = true;
+        }
       });
     }
 
@@ -18621,33 +18741,8 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
       }
     };
 
-    var newObject;
-
     for (var _i = 0; _i < select.options.length; _i++) {
       var opt = select.options[_i];
-
-      if (opt.selected && opt.AJAR_mint) {
-        if (options.mintClass) {
-          var thisForm = promptForNew(dom, kb, subject, predicate, options.mintClass, null, dataDoc, function (ok, body) {
-            if (!ok) {
-              callbackFunction(ok, body, {
-                change: 'new'
-              }); // @@ if ok, need some form of refresh of the select for the new thing
-            }
-          });
-          select.parentNode.appendChild(thisForm);
-          newObject = thisForm.AJAR_subject;
-        } else {
-          newObject = newThing(dataDoc);
-        }
-
-        is.push($rdf.st(subject, predicate, newObject, dataDoc));
-
-        if (options.mintStatementsFun) {
-          is = is.concat(options.mintStatementsFun(newObject));
-        }
-      }
-
       if (!opt.AJAR_uri) continue; // a prompt or mint
 
       if (opt.selected && !(opt.AJAR_uri in actual)) {
@@ -18677,24 +18772,12 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
       sel = sel.superSelect;
     }
 
-    function doneNew(ok, _body) {
-      callbackFunction(ok, {
-        widget: 'select',
-        event: 'new'
-      });
-    }
-
     log.info('selectForOptions: data doc = ' + dataDoc);
     kb.updater.update(ds, is, function (uri, ok, body) {
       actual = getActual(); // refresh
 
       if (ok) {
         select.disabled = false; // data written back
-
-        if (newObject) {
-          var fn = (0, _fieldFunction.fieldFunction)(dom, options.subForm);
-          fn(dom, select.parentNode, {}, newObject, options.subForm, dataDoc, doneNew);
-        }
       } else {
         return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in select: ' + body));
       }
@@ -18708,7 +18791,6 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
 
   var select = dom.createElement('select');
   select.setAttribute('style', style.formSelectSTyle);
-  if (options.multiple) select.setAttribute('multiple', 'true');
   select.currentURI = null;
 
   select.refresh = function () {
@@ -18751,15 +18833,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
     select.appendChild(option);
   }
 
-  if (editable && options.mint) {
-    var mint = dom.createElement('option');
-    mint.appendChild(dom.createTextNode(options.mint));
-    mint.AJAR_mint = true; // Flag it
-
-    select.insertBefore(mint, select.firstChild);
-  }
-
-  if (select.currentURI == null && !options.multiple) {
+  if (!select.currentURI) {
     var prompt = dom.createElement('option');
     prompt.appendChild(dom.createTextNode(options.nullLabel));
     select.insertBefore(prompt, select.firstChild);
@@ -18782,28 +18856,16 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
 function makeSelectForCategory(dom, kb, subject, category, dataDoc, callbackFunction) {
   var du = kb.any(category, ns.owl('disjointUnionOf'));
   var subs;
-  var multiple = false;
 
   if (!du) {
     subs = kb.each(undefined, ns.rdfs('subClassOf'), category);
-    multiple = true;
   } else {
     subs = du.elements;
   }
 
   log.debug('Select list length ' + subs.length);
-
-  if (subs.length === 0) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with no subclasses of category: ' + category);
-  }
-
-  if (subs.length === 1) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with only 1 subclass of category: ' + category + ':' + subs[1]);
-  }
-
   return makeSelectForOptions(dom, kb, subject, ns.rdf('type'), subs, {
-    multiple: multiple,
-    nullPrompt: '--classify--'
+    nullLabel: '* Select type *'
   }, dataDoc, callbackFunction);
 }
 /** Make SELECT element to select subclasses recurively
@@ -18837,8 +18899,7 @@ function makeSelectForNestedCategory(dom, kb, subject, category, dataDoc, callba
   function onChange(ok, body) {
     if (ok) update();
     callbackFunction(ok, body);
-  } // eslint-disable-next-line prefer-const
-
+  }
 
   var select = makeSelectForCategory(dom, kb, subject, category, dataDoc, onChange);
   container.appendChild(select);
@@ -18993,6 +19054,264 @@ function newThing(doc) {
   var now = new Date();
   return $rdf.sym(doc.uri + '#' + 'id' + ('' + now.getTime()));
 }
+/** Make SELECT element to select options
+//
+// @param subject - a term, the subject of the statement(s) being edited.
+// @param predicate - a term, the predicate of the statement(s) being edited
+// @param possible - a list of terms, the possible value the object can take
+// @param options.mint - User may create thing if this sent to the prompt string eg "New foo"
+// @param options.subForm - If mint, then the form to be used for minting the new thing
+// @param dataDoc - The web document being edited
+// @param callbackFunction - takes (boolean ok, string errorBody)
+*/
+
+
+function makeSelectForChoice(dom, container, kb, subject, predicate, inputPossibleOptions, selectedOptions, uiFrom, options, dataDoc, callbackFunction) {
+  var optionsFromClassUIfrom = {}; // Count them
+
+  var editable = kb.updater.editable(dataDoc.uri);
+
+  for (var i = 0; i < inputPossibleOptions.length; i++) {
+    var sub = inputPossibleOptions[i]; // @@ Maybe; make this so it works with blank nodes too
+    // if (!sub.uri) debug.warn(`makeSelectForChoice: option does not have an uri: ${sub}, with predicate: ${predicate}`)
+
+    if (!sub.uri || sub.uri in optionsFromClassUIfrom) continue;
+    optionsFromClassUIfrom[sub.uri] = true;
+  }
+
+  var isEmpty = Object.keys(optionsFromClassUIfrom).length === 0;
+
+  if (isEmpty && !options.mint) {
+    return (0, _error.errorMessageBlock)(dom, "Can't do selector with no options, subject= " + subject + ' property = ' + predicate + '.');
+  }
+
+  log.debug('makeSelectForChoice: dataDoc=' + dataDoc);
+
+  function createDefaultSelectOptionText() {
+    var firstSelectOptionText = '--- choice ---';
+
+    if (predicate && !(predicate.termType === 'BlankNode')) {
+      firstSelectOptionText = '* Select for property: ' + utils.label(predicate) + ' *';
+    }
+
+    if (subject && !(subject.termType === 'BlankNode')) {
+      firstSelectOptionText = '* Select for ' + utils.label(subject, true) + ' *';
+    }
+
+    return firstSelectOptionText;
+  }
+
+  function createDefaultSelectOption() {
+    var option = dom.createElement('option');
+    option.appendChild(dom.createTextNode(createDefaultSelectOptionText()));
+    option.disabled = true;
+    option.value = true;
+    option.hidden = true;
+    option.selected = true;
+    return option;
+  }
+
+  var onChange = function onChange(_e) {
+    container.removeChild(container.lastChild);
+    select.refresh();
+  };
+
+  var select = dom.createElement('select');
+  select.setAttribute('style', style.formSelectSTyle);
+  select.setAttribute('id', 'formSelect');
+  select.currentURI = null;
+
+  for (var uri in optionsFromClassUIfrom) {
+    select.appendChild(createOption(uri));
+  }
+
+  if (editable && options.mint) {
+    var mint = dom.createElement('option');
+    mint.appendChild(dom.createTextNode(options.mint));
+    mint.AJAR_mint = true; // Flag it
+
+    select.insertBefore(mint, select.firstChild);
+  }
+
+  if (select.children.length === 0) select.insertBefore(createDefaultSelectOption(), select.firstChild);
+
+  select.update = function (newSelectedOptions) {
+    selectedOptions = newSelectedOptions;
+    var ds = [];
+    var is = [];
+
+    var removeValue = function removeValue(t) {
+      if (kb.holds(subject, predicate, t, dataDoc)) {
+        ds.push($rdf.st(subject, predicate, t, dataDoc));
+      }
+    };
+
+    var addValue = function addValue(t) {
+      if (!kb.holds(subject, predicate, t, dataDoc)) {
+        is.push($rdf.st(subject, predicate, t, dataDoc)); // console.log("----value added " + t)
+      }
+
+      if (uiFrom && !kb.holds(t, ns.rdf('type'), kb.sym(uiFrom), dataDoc)) {
+        is.push($rdf.st(t, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // console.log("----added type to value " + uiFrom)
+      }
+    };
+
+    var existingValues = kb.each(subject, predicate, null, dataDoc).map(function (object) {
+      return object.value;
+    });
+
+    var _iterator2 = _createForOfIteratorHelper(existingValues),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var value = _step2.value;
+        if (!containsObject(value, selectedOptions)) removeValue($rdf.sym(value));
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+
+    var _iterator3 = _createForOfIteratorHelper(selectedOptions),
+        _step3;
+
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _value = _step3.value;
+        if (!(_value in existingValues)) addValue($rdf.sym(_value));
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+
+    kb.updater.update(ds, is, function (uri, ok, body) {
+      if (!ok) return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in select: ' + body));
+      select.refresh();
+      if (callbackFunction) callbackFunction(ok, {
+        widget: 'select',
+        event: 'change'
+      });
+    });
+  };
+
+  select.refresh = function () {
+    select.disabled = true; // unlocked any conflict we had got into
+
+    var is = [];
+    var newObject;
+
+    for (var _i3 = 0; _i3 < select.options.length; _i3++) {
+      var opt = select.options[_i3];
+
+      if (opt.selected && opt.AJAR_mint) {
+        // not sure if this 'if' is used because I cannot find mintClass
+        if (options.mintClass) {
+          var thisForm = promptForNew(dom, kb, subject, predicate, options.mintClass, null, dataDoc, function (ok, body) {
+            if (!ok) {
+              callbackFunction(ok, body, {
+                change: 'new'
+              }); // @@ if ok, need some form of refresh of the select for the new thing
+            }
+          });
+          select.parentNode.appendChild(thisForm);
+          newObject = thisForm.AJAR_subject;
+        } else {
+          newObject = newThing(dataDoc);
+        }
+
+        is.push($rdf.st(subject, predicate, kb.sym(newObject), dataDoc));
+        if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // not sure if this 'if' is used because I cannot find mintStatementsFun
+
+        if (options.mintStatementsFun) {
+          is = is.concat(options.mintStatementsFun(newObject));
+        }
+
+        select.currentURI = newObject;
+      }
+
+      if (!opt.AJAR_uri) continue; // a prompt or mint
+
+      if (opt.selected && containsObject(opt.AJAR_uri, selectedOptions)) {
+        select.currentURI = opt.AJAR_uri;
+      }
+
+      if (!containsObject(opt.AJAR_uri, selectedOptions)) opt.removeAttribute('selected');
+      if (containsObject(opt.AJAR_uri, selectedOptions)) opt.setAttribute('selected', 'true');
+    }
+
+    log.info('selectForOptions: data doc = ' + dataDoc);
+
+    if (select.currentURI && options.subForm) {
+      addSubFormChoice(dom, container, {}, $rdf.sym(select.currentURI), options.subForm, dataDoc, function (ok, body) {
+        if (ok) {
+          kb.updater.update([], is, function (uri, success, errorBody) {
+            if (!success) container.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating select: ' + errorBody));
+          });
+          if (callbackFunction) callbackFunction(ok, {
+            widget: 'select',
+            event: 'new'
+          });
+        } else {
+          container.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+        }
+      });
+    }
+
+    select.disabled = false;
+  };
+
+  function createOption(uri) {
+    var option = dom.createElement('option');
+    var c = kb.sym(uri);
+    var label;
+
+    if (options.disambiguate) {
+      label = utils.labelWithOntology(c, true); // Init. cap
+    } else {
+      label = utils.label(c, true);
+    }
+
+    option.appendChild(dom.createTextNode(label)); // Init.
+
+    option.setAttribute('value', uri);
+    var backgroundColor = kb.any(c, kb.sym('http://www.w3.org/ns/ui#backgroundColor'));
+
+    if (backgroundColor) {
+      option.setAttribute('style', 'background-color: ' + backgroundColor.value + '; ');
+    }
+
+    option.AJAR_uri = uri;
+
+    if (containsObject(c.value, selectedOptions)) {
+      option.setAttribute('selected', 'true');
+    }
+
+    return option;
+  }
+
+  if (editable) {
+    select.addEventListener('change', onChange, false);
+  }
+
+  return select;
+} // makeSelectForChoice
+
+
+function containsObject(obj, list) {
+  var i;
+
+  for (i = 0; i < list.length; i++) {
+    if (list[i] === obj) {
+      return true;
+    }
+  }
+
+  return false;
+}
 //# sourceMappingURL=forms.js.map
 
 /***/ }),
@@ -20767,7 +21086,7 @@ function queryESCODataByName(_x, _x2, _x3) {
 *
 * Wikidata bug: https://phabricator.wikimedia.org/T283962
 * This will not be needed whn that  WDQS bug fixed.
-* This is aptured in https://github.com/solid/solid-ui/issues/403
+* This is aptured in https://github.com/solidos/solid-ui/issues/403
 */
 
 
@@ -21967,6 +22286,800 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /***/ }),
 
+/***/ "./lib/widgets/multiSelect.js":
+/*!************************************!*\
+  !*** ./lib/widgets/multiSelect.js ***!
+  \************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
+
+var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "./node_modules/@babel/runtime/helpers/typeof.js");
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.IconicMultiSelect = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));
+
+var _classCallCheck2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"));
+
+var _createClass2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"));
+
+var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
+
+var style = _interopRequireWildcard(__webpack_require__(/*! ../style_multiSelect */ "./lib/style_multiSelect.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * IconicMultiSelect v0.7.0
+ * Licence:  MIT
+ * (c) 2021 Sidney Wimart.
+ * repo & configuration: https://github.com/sidneywm/iconic-multiselect
+ */
+
+/**
+ * @version IconicMultiSelect v0.7.0
+ * @licence  MIT
+ */
+var IconicMultiSelect = /*#__PURE__*/function () {
+  /**
+   * Iconic Multiselect constructor.
+   * @param { Object[] } data - Array of objects.
+   * @param { string } noData - Defines the message when there is no data input.
+   * @param { string } noResults - Defines the message when there is no result if options are filtered.
+   * @param { string } placeholder -  Defines the placeholder's text.
+   * @param { string } select - DOM element to be selected. It must be a HTML Select tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+   * @param { string } textField - Field to select in the object for the text.
+   * @param { string } valueField - Field to select in the object for the value.
+   */
+  function IconicMultiSelect(_ref) {
+    var data = _ref.data,
+        itemTemplate = _ref.itemTemplate,
+        noData = _ref.noData,
+        noResults = _ref.noResults,
+        placeholder = _ref.placeholder,
+        select = _ref.select,
+        container = _ref.container,
+        tagTemplate = _ref.tagTemplate,
+        textField = _ref.textField,
+        valueField = _ref.valueField;
+    (0, _classCallCheck2["default"])(this, IconicMultiSelect);
+    (0, _defineProperty2["default"])(this, "_data", void 0);
+    (0, _defineProperty2["default"])(this, "_domElements", void 0);
+    (0, _defineProperty2["default"])(this, "_event", function () {});
+    (0, _defineProperty2["default"])(this, "_itemTemplate", void 0);
+    (0, _defineProperty2["default"])(this, "_multiselect", void 0);
+    (0, _defineProperty2["default"])(this, "_noData", void 0);
+    (0, _defineProperty2["default"])(this, "_noResults", void 0);
+    (0, _defineProperty2["default"])(this, "_options", []);
+    (0, _defineProperty2["default"])(this, "_placeholder", void 0);
+    (0, _defineProperty2["default"])(this, "_select", void 0);
+    (0, _defineProperty2["default"])(this, "_selectContainer", void 0);
+    (0, _defineProperty2["default"])(this, "_selectedOptions", []);
+    (0, _defineProperty2["default"])(this, "_tagTemplate", void 0);
+    (0, _defineProperty2["default"])(this, "_textField", void 0);
+    (0, _defineProperty2["default"])(this, "_valueField", void 0);
+    (0, _defineProperty2["default"])(this, "_cross", "\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n    ");
+    this._data = data !== null && data !== void 0 ? data : [];
+    this._itemTemplate = itemTemplate !== null && itemTemplate !== void 0 ? itemTemplate : null;
+    this._noData = noData !== null && noData !== void 0 ? noData : 'No data found.';
+    this._noResults = noResults !== null && noResults !== void 0 ? noResults : 'No results found.';
+    this._placeholder = placeholder !== null && placeholder !== void 0 ? placeholder : 'Select...';
+    this._select = select; // Timea added a container here
+
+    this._selectContainer = container;
+    this._tagTemplate = tagTemplate !== null && tagTemplate !== void 0 ? tagTemplate : null;
+    this._textField = textField !== null && textField !== void 0 ? textField : null;
+    this._valueField = valueField !== null && valueField !== void 0 ? valueField : null;
+  }
+  /**
+   * Initialize the Iconic Multiselect component.
+   * @public
+   */
+
+
+  (0, _createClass2["default"])(IconicMultiSelect, [{
+    key: "init",
+    value: function init() {
+      // Timea change to use this._select instead of this._selectContainer
+      if (this._select && this._select.nodeName === 'SELECT') {
+        if (this._itemTemplate && this._data.length === 0) {
+          throw new Error('itemTemplate must be initialized with data from the component settings');
+        }
+
+        if (this._tagTemplate && this._data.length === 0) {
+          throw new Error('tagTemplate must be initialized with data from the component settings');
+        }
+
+        this._options = this._data.length > 0 ? this._getDataFromSettings() : this._getDataFromSelectTag();
+
+        this._renderMultiselect();
+
+        this._renderOptionsList();
+
+        this._domElements = {
+          clear: this._multiselect.querySelector('.multiselect__clear-btn'),
+          input: this._multiselect.querySelector('.multiselect__input'),
+          optionsContainer: this._multiselect.querySelector('.multiselect__options'),
+          optionsContainerList: this._multiselect.querySelector('.multiselect__options > ul'),
+          options: {
+            list: this._multiselect.querySelectorAll('.multiselect__options > ul > li'),
+            find: function find(callbackFn) {
+              for (var i = 0; i < this.list.length; i++) {
+                var node = this.list[i];
+                if (callbackFn(node)) return node;
+              }
+
+              return undefined;
+            },
+            some: function some(callbackFn) {
+              for (var i = 0; i < this.list.length; i++) {
+                var node = this.list[i];
+                if (callbackFn(node, i)) return true;
+              }
+
+              return false;
+            }
+          }
+        };
+
+        this._enableEventListenners();
+
+        this._initSelectedList();
+      } else {
+        throw new Error("The selector '".concat(this._select, "' did not select any valid select tag."));
+      }
+    }
+    /**
+     * Subscribes to the emitted events.
+     * @param { Function } callback - Callback function which emits a custom event object.
+     * @public
+     */
+
+  }, {
+    key: "subscribe",
+    value: function subscribe(callback) {
+      if (typeof callback === 'function') {
+        this._event = callback;
+      } else {
+        throw new Error('parameter in the subscribe method is not a function');
+      }
+    }
+    /**
+     * Add an option to the selection list.
+     * @param { Object: { text: string; value: string; }} option
+     * @private
+     */
+
+  }, {
+    key: "_addOptionToList",
+    value: function _addOptionToList(option, index) {
+      var _this = this;
+
+      var html = "<span class=\"multiselect__selected\" style=\"".concat(style.multiselect__selected, "\" data-value=\"").concat(option.value, "\">").concat(this._tagTemplate ? this._processTemplate(this._tagTemplate, index) : option.text, "<span class=\"multiselect__remove-btn\" style=\"").concat(style.multiselect__remove_btn, "\">").concat(this._cross, "</span></span>");
+
+      this._domElements.input.insertAdjacentHTML('beforebegin', html);
+
+      var _this$_multiselect$qu = this._multiselect.querySelector("span[data-value=\"".concat(option.value, "\"]")),
+          removeBtn = _this$_multiselect$qu.lastElementChild;
+
+      removeBtn.addEventListener('click', function () {
+        var target = _this._domElements.options.find(function (el) {
+          return el.dataset.value === option.value;
+        });
+
+        _this._handleOption(target);
+      });
+    }
+    /**
+     * Clears all selected options.
+     * @private
+     */
+
+  }, {
+    key: "_clearSelection",
+    value: function _clearSelection() {
+      var _this2 = this;
+
+      var _loop = function _loop(i) {
+        var option = _this2._selectedOptions[i];
+
+        var target = _this2._domElements.options.find(function (el) {
+          return el.dataset.value === option.value;
+        });
+
+        target.classList.remove('multiselect__options--selected');
+        target.setAttribute('style', style.multiselect__options);
+
+        _this2._removeOptionFromList(target.dataset.value);
+      };
+
+      for (var i = 0; i < this._selectedOptions.length; i++) {
+        _loop(i);
+      }
+
+      this._selectedOptions = [];
+
+      this._handleClearSelectionBtn();
+
+      this._handlePlaceholder();
+
+      this._dispatchEvent({
+        action: 'CLEAR_ALL_OPTIONS',
+        selection: this._selectedOptions
+      });
+    }
+    /**
+     * Close the options container.
+     * @private
+     */
+
+  }, {
+    key: "_closeList",
+    value: function _closeList() {
+      this._domElements.input.value = '';
+
+      this._domElements.optionsContainer.classList.remove('visible');
+
+      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options);
+
+      this._filterOptions('');
+
+      this._removeAllArrowSelected();
+    }
+    /**
+     * Dispatches new events.
+     * @param { object : { action: string; selection: { option: string; text: string; }[]; value?: string; } } event
+     * @private
+     */
+
+  }, {
+    key: "_dispatchEvent",
+    value: function _dispatchEvent(event) {
+      this._event(event);
+    }
+    /**
+     * Enables all main event listenners.
+     * @private
+     */
+
+  }, {
+    key: "_enableEventListenners",
+    value: function _enableEventListenners() {
+      var _this3 = this;
+
+      document.addEventListener('mouseup', function (_ref2) {
+        var target = _ref2.target;
+
+        if (!_this3._multiselect.contains(target)) {
+          _this3._filterOptions('');
+
+          _this3._closeList();
+
+          _this3._handlePlaceholder();
+        }
+      });
+
+      this._domElements.clear.addEventListener('click', function () {
+        _this3._clearSelection();
+      });
+
+      for (var i = 0; i < this._domElements.options.list.length; i++) {
+        var option = this._domElements.options.list[i];
+        option.addEventListener('click', function (_ref3) {
+          var target = _ref3.target;
+
+          _this3._handleOption(target);
+
+          _this3._closeList();
+        });
+      }
+
+      this._domElements.input.addEventListener('focus', function () {
+        _this3._domElements.optionsContainer.classList.add('visible');
+
+        _this3._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible);
+      });
+
+      this._domElements.input.addEventListener('input', function (_ref4) {
+        var value = _ref4.target.value;
+
+        if (_this3._domElements.options.list.length > 0) {
+          _this3._filterOptions(value);
+        }
+      });
+
+      this._domElements.input.addEventListener('keydown', function (e) {
+        _this3._handleArrows(e);
+
+        _this3._handleBackspace(e);
+
+        _this3._handleEnter(e);
+      });
+    }
+    /**
+     * Filters user input.
+     * @param { string } value
+     * @private
+     */
+
+  }, {
+    key: "_filterOptions",
+    value: function _filterOptions(value) {
+      var _this4 = this;
+
+      var isOpen = this._domElements.optionsContainer.classList.contains('visible');
+
+      var valueLowerCase = value.toLowerCase();
+
+      if (!isOpen && value.length > 0) {
+        this._domElements.optionsContainer.classList.add('visible');
+
+        this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible);
+      }
+
+      if (this._domElements.options.list.length > 0) {
+        for (var i = 0; i < this._domElements.options.list.length; i++) {
+          var el = this._domElements.options.list[i];
+          var text = this._itemTemplate ? this._data[i][this._textField] : el.textContent;
+
+          if (text.toLowerCase().substring(0, valueLowerCase.length) === valueLowerCase) {
+            this._domElements.optionsContainerList.appendChild(el);
+          } else {
+            el.parentNode && el.parentNode.removeChild(el);
+          }
+        }
+
+        var hasResults = this._domElements.options.some(function (el, index) {
+          return (_this4._itemTemplate ? _this4._data[index][_this4._textField] : el.textContent).toLowerCase().substring(0, valueLowerCase.length) === valueLowerCase;
+        });
+
+        this._showNoResults(!hasResults);
+      }
+    }
+  }, {
+    key: "_generateId",
+    value: function _generateId(length) {
+      var result = '';
+      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      var charactersLength = characters.length;
+
+      for (var i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+      }
+
+      return result;
+    }
+    /**
+     * Gets data from select tag.
+     * @private
+     */
+
+  }, {
+    key: "_getDataFromSelectTag",
+    value: function _getDataFromSelectTag() {
+      var arr = [];
+      var options = this._select.options;
+
+      for (var i = 0; i < options.length; i++) {
+        var item = options[i];
+        arr.push({
+          text: item.text,
+          value: item.value,
+          selected: item.hasAttribute('selected')
+        });
+      }
+
+      return arr;
+    }
+    /**
+     * Gets data from settings.
+     * @private
+     */
+
+  }, {
+    key: "_getDataFromSettings",
+    value: function _getDataFromSettings() {
+      if (this._data.length > 0 && this._valueField && this._textField) {
+        var isValueFieldValid = typeof this._valueField === 'string';
+        var isTextFieldValid = typeof this._textField === 'string';
+        var arr = [];
+
+        if (!isValueFieldValid || !isTextFieldValid) {
+          throw new Error('textField and valueField must be of type string');
+        }
+
+        for (var i = 0; i < this._data.length; i++) {
+          var item = this._data[i];
+          arr.push({
+            value: item[this._valueField],
+            text: item[this._textField],
+            selected: typeof item.selected === 'boolean' ? item.selected : false
+          });
+        }
+
+        return arr;
+      } else {
+        return null;
+      }
+    }
+    /**
+     * Handles Arrow up & Down. Selection of an option is also possible with these keys.
+     * @param { Event } event
+     * @private
+     */
+
+  }, {
+    key: "_handleArrows",
+    value: function _handleArrows(event) {
+      if (event.keyCode === 40 || event.keyCode === 38) {
+        event.preventDefault();
+
+        var isOpen = this._domElements.optionsContainer.classList.contains('visible'); // An updated view of the container is needed because of the filtering option
+
+
+        var optionsContainerList = this._multiselect.querySelector('.multiselect__options > ul');
+
+        if (!isOpen) {
+          this._domElements.optionsContainer.classList.add('visible');
+
+          this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible);
+
+          optionsContainerList.firstElementChild.classList.add('arrow-selected');
+          optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected);
+          optionsContainerList.firstElementChild.scrollIntoView(false);
+        } else {
+          var selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected');
+
+          var action = {
+            ArrowUp: 'previous',
+            Up: 'previous',
+            ArrowDown: 'next',
+            Down: 'next'
+          };
+
+          if (!selected) {
+            optionsContainerList.firstElementChild.classList.add('arrow-selected');
+            optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected);
+            optionsContainerList.firstElementChild.scrollIntoView(false);
+            return;
+          }
+
+          selected.classList.remove('arrow-selected');
+          selected.setAttribute('style', style.multiselect__options_ul_li);
+          selected = selected[action[event.key] + 'ElementSibling']; // Go to start or end of the popup list
+
+          if (!selected) {
+            selected = optionsContainerList.children[action[event.key] === 'next' ? 0 : optionsContainerList.children.length - 1];
+            selected.classList.add('arrow-selected');
+            selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected);
+
+            this._scrollIntoView(optionsContainerList, selected);
+
+            return;
+          }
+
+          selected.classList.add('arrow-selected');
+          selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected);
+
+          this._scrollIntoView(optionsContainerList, selected);
+        }
+      }
+    }
+    /**
+     * Handles the backspace key event - Deletes the preceding option in the selection list.
+     * @param { Event } e
+     * @private
+     */
+
+  }, {
+    key: "_handleBackspace",
+    value: function _handleBackspace(e) {
+      if (e.keyCode === 8 && e.target.value === '') {
+        var lastSelectedOption = this._selectedOptions.length > 0 ? this._selectedOptions[this._selectedOptions.length - 1] : null;
+
+        if (lastSelectedOption) {
+          var targetLastSelectedOption = this._multiselect.querySelector("li[data-value=\"".concat(lastSelectedOption.value, "\"]"));
+
+          this._handleOption(targetLastSelectedOption);
+
+          if (this._selectedOptions.length === 0) {
+            this._domElements.optionsContainer.classList.remove('visible');
+
+            this._domElements.optionsContainer.setAttribute('style', style.multiselect__options);
+          }
+        }
+      }
+    }
+    /**
+     * Shows clear selection button if some options are selected.
+     * @private
+     */
+
+  }, {
+    key: "_handleClearSelectionBtn",
+    value: function _handleClearSelectionBtn() {
+      if (this._selectedOptions.length > 0) {
+        this._domElements.clear.style.display = 'flex';
+      } else {
+        this._domElements.clear.style.display = 'none';
+      }
+    }
+    /**
+     * Handles the enter key event.
+     * @param { Event } event
+     * @private
+     */
+
+  }, {
+    key: "_handleEnter",
+    value: function _handleEnter(event) {
+      if (event.keyCode === 13) {
+        var selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected');
+
+        if (selected) {
+          this._handleOption(selected);
+
+          this._closeList();
+        }
+      }
+    }
+  }, {
+    key: "_handleOption",
+    value: function _handleOption(target) {
+      var dispatchEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+      // Remove
+      for (var i = 0; i < this._selectedOptions.length; i++) {
+        var el = this._selectedOptions[i];
+
+        if (el.value === target.dataset.value) {
+          target.classList.remove('multiselect__options--selected');
+          target.setAttribute('style', style.multiselect__options);
+
+          this._selectedOptions.splice(i, 1);
+
+          this._removeOptionFromList(target.dataset.value);
+
+          this._handleClearSelectionBtn();
+
+          this._handlePlaceholder();
+
+          return dispatchEvent && this._dispatchEvent({
+            action: 'REMOVE_OPTION',
+            value: target.dataset.value,
+            selection: this._selectedOptions
+          });
+        }
+      } // Add
+
+
+      for (var _i = 0; _i < this._options.length; _i++) {
+        var option = this._options[_i];
+
+        if (option.value === target.dataset.value) {
+          target.classList.add('multiselect__options--selected');
+          target.setAttribute('style', style.multiselect__options_selected);
+          this._selectedOptions = [].concat((0, _toConsumableArray2["default"])(this._selectedOptions), [option]);
+
+          this._addOptionToList(option, _i);
+
+          this._handleClearSelectionBtn();
+
+          this._handlePlaceholder();
+
+          return dispatchEvent && this._dispatchEvent({
+            action: 'ADD_OPTION',
+            value: target.dataset.value,
+            selection: this._selectedOptions
+          });
+        }
+      }
+    }
+    /**
+     * Shows the placeholder if no options are selected.
+     * @private
+     */
+
+  }, {
+    key: "_handlePlaceholder",
+    value: function _handlePlaceholder() {
+      this._domElements.input.placeholder = this._placeholder;
+    }
+  }, {
+    key: "_initSelectedList",
+    value: function _initSelectedList() {
+      var _this5 = this;
+
+      var hasItemsSelected = false;
+
+      var _loop2 = function _loop2(i) {
+        var option = _this5._options[i];
+
+        if (option.selected) {
+          hasItemsSelected = true;
+
+          var target = _this5._domElements.options.find(function (el) {
+            return el.dataset.value === option.value;
+          });
+
+          target.classList.add('multiselect__options--selected');
+          target.setAttribute('style', style.multiselect__options_selected);
+          _this5._selectedOptions = [].concat((0, _toConsumableArray2["default"])(_this5._selectedOptions), [option]);
+
+          _this5._addOptionToList(option, i);
+        }
+      };
+
+      for (var i = 0; i < this._options.length; i++) {
+        _loop2(i);
+      }
+
+      if (hasItemsSelected) {
+        this._handleClearSelectionBtn();
+      }
+
+      this._handlePlaceholder();
+    }
+    /**
+     * Process the custom template.
+     * @param { string } template
+     * @private
+     */
+
+  }, {
+    key: "_processTemplate",
+    value: function _processTemplate(template, index) {
+      var processedTemplate = template;
+      var objAttr = template.match(/\$\{(\w+)\}/g).map(function (e) {
+        return e.replace(/\$\{|\}/g, '');
+      });
+
+      for (var i = 0; i < objAttr.length; i++) {
+        var _this$_data$index$att;
+
+        var attr = objAttr[i]; // eslint-disable-next-line no-useless-escape
+
+        processedTemplate = processedTemplate.replace("${".concat(attr, "}"), (_this$_data$index$att = this._data[index][attr]) !== null && _this$_data$index$att !== void 0 ? _this$_data$index$att : '');
+      }
+
+      return processedTemplate;
+    }
+  }, {
+    key: "_removeAllArrowSelected",
+    value: function _removeAllArrowSelected() {
+      var className = 'arrow-selected';
+
+      var target = this._domElements.options.find(function (el) {
+        return el.classList.contains(className);
+      });
+
+      target && target.classList.remove(className) && target.setAttribute('style', style.multiselect__options_ul_li);
+    }
+    /**
+     * Removes an option from the list.
+     * @param { string } value
+     * @private
+     */
+
+  }, {
+    key: "_removeOptionFromList",
+    value: function _removeOptionFromList(value) {
+      var optionDom = this._multiselect.querySelector("span[data-value=\"".concat(value, "\"]"));
+
+      optionDom && optionDom.parentNode && optionDom.parentNode.removeChild(optionDom);
+    }
+    /**
+     * Renders the multiselect options list view.
+     * @private
+     */
+
+  }, {
+    key: "_renderOptionsList",
+    value: function _renderOptionsList() {
+      var _this6 = this;
+
+      var html = "\n        <div class=\"multiselect__options\" style=\"".concat(style.multiselect__options, "\">\n          <ul style=\"").concat(style.multiselect__options_ul, "\">\n          ").concat(this._options.length > 0 && !this._itemTemplate ? this._options.map(function (option) {
+        return "\n              <li data-value=\"".concat(option.value, "\" style=\"").concat(style.multiselect__options_ul_li, "\">").concat(option.text, "</li>\n            ");
+      }).join('') : '', "\n\n          ").concat(this._options.length > 0 && this._itemTemplate ? this._options.map(function (option, index) {
+        return "\n              <li data-value=\"".concat(option.value, "\" style=\"").concat(style.multiselect__options_ul_li, "\">").concat(_this6._processTemplate(_this6._itemTemplate, index), "</li>\n            ");
+      }).join('') : '', "\n          ").concat(this._showNoData(this._options.length === 0), "\n          </ul>\n        </div>\n      ");
+
+      this._multiselect.insertAdjacentHTML('beforeend', html);
+    }
+    /**
+     * Renders the multiselect view.
+     * @private
+     */
+
+  }, {
+    key: "_renderMultiselect",
+    value: function _renderMultiselect() {
+      this._select.style.display = 'none';
+
+      var id = 'iconic-' + this._generateId(20); // Timea created dedicated div element because previous code was not rendering
+
+
+      this._multiselect = document.createElement('div');
+
+      this._multiselect.setAttribute('id', id);
+
+      this._multiselect.setAttribute('class', 'multiselect__container');
+
+      this._multiselect.setAttribute('style', style.multiselect__container);
+
+      var html = "\n        <div class=\"multiselect__wrapper\" style=\"".concat(style.multiselect__wrapper, "\">\n          <input class=\"multiselect__input\" style=\"").concat(style.multiselect__input, "\" placeholder=\"").concat(this._placeholder, "\" />\n        </div>\n        <span style=\"display: none;\" class=\"multiselect__clear-btn\" style=\"").concat(style.multiselect__clear_btn, "\">").concat(this._cross, "</span>\n    ");
+      this._multiselect.innerHTML = html;
+
+      this._selectContainer.appendChild(this._multiselect);
+    }
+    /**
+     * ScrollIntoView - This small utility reproduces the behavior of .scrollIntoView({ block: "nearest", inline: "nearest" })
+     * This is for IE compatibility without a need of a polyfill
+     * @private
+     */
+
+  }, {
+    key: "_scrollIntoView",
+    value: function _scrollIntoView(parent, child) {
+      var rectParent = parent.getBoundingClientRect();
+      var rectChild = child.getBoundingClientRect(); // Detect if not visible at top and then scroll to the top
+
+      if (!(rectParent.top < rectChild.bottom - child.offsetHeight)) {
+        parent.scrollTop = child.clientHeight + (child.offsetTop - child.offsetHeight);
+      } // Detect if not visible at bottom and then scroll to the bottom
+
+
+      if (!(rectParent.bottom > rectChild.top + child.offsetHeight)) {
+        parent.scrollTop = child.clientHeight + (child.offsetTop - child.offsetHeight) - (parent.offsetHeight - (child.offsetHeight + (child.offsetHeight - child.clientHeight)));
+      }
+    }
+    /**
+     * Shows a no data message.
+     * @param { boolean } condition
+     * @private
+     */
+
+  }, {
+    key: "_showNoData",
+    value: function _showNoData(condition) {
+      return condition ? "<p class=\"multiselect__options--no-data\" style=\"".concat(style.multiselect__options_ul_p_multiselect__options_no_data, "\">").concat(this._noData, "</p>") : '';
+    }
+    /**
+     * Shows a no results message.
+     * @param { boolean } condition
+     * @private
+     */
+
+  }, {
+    key: "_showNoResults",
+    value: function _showNoResults(condition) {
+      var dom = this._multiselect.querySelector('.multiselect__options--no-results');
+
+      if (condition) {
+        var html = "<p class=\"multiselect__options--no-results\" style=\"".concat(style.multiselect__options_ul_p_multiselect__options_no_results, "\">").concat(this._noResults, "</p>");
+        !dom && this._domElements.optionsContainerList.insertAdjacentHTML('beforeend', html);
+      } else {
+        dom && dom.parentNode && dom.parentNode.removeChild(dom);
+      }
+    }
+  }]);
+  return IconicMultiSelect;
+}();
+
+exports.IconicMultiSelect = IconicMultiSelect;
+//# sourceMappingURL=multiSelect.js.map
+
+/***/ }),
+
 /***/ "./lib/widgets/peoplePicker.js":
 /*!*************************************!*\
   !*** ./lib/widgets/peoplePicker.js ***!
@@ -22638,6 +23751,22 @@ module.exports = _arrayWithHoles, module.exports.__esModule = true, module.expor
 
 /***/ }),
 
+/***/ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js ***!
+  \******************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var arrayLikeToArray = __webpack_require__(/*! ./arrayLikeToArray.js */ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js");
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return arrayLikeToArray(arr);
+}
+
+module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
 /***/ "./node_modules/@babel/runtime/helpers/assertThisInitialized.js":
 /*!**********************************************************************!*\
   !*** ./node_modules/@babel/runtime/helpers/assertThisInitialized.js ***!
@@ -22903,6 +24032,20 @@ module.exports = _isNativeReflectConstruct, module.exports.__esModule = true, mo
 
 /***/ }),
 
+/***/ "./node_modules/@babel/runtime/helpers/iterableToArray.js":
+/*!****************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/iterableToArray.js ***!
+  \****************************************************************/
+/***/ ((module) => {
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
 /***/ "./node_modules/@babel/runtime/helpers/iterableToArrayLimit.js":
 /*!*********************************************************************!*\
   !*** ./node_modules/@babel/runtime/helpers/iterableToArrayLimit.js ***!
@@ -22957,6 +24100,20 @@ module.exports = _nonIterableRest, module.exports.__esModule = true, module.expo
 
 /***/ }),
 
+/***/ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/nonIterableSpread.js ***!
+  \******************************************************************/
+/***/ ((module) => {
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
 /***/ "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js":
 /*!**************************************************************************!*\
   !*** ./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js ***!
@@ -23043,6 +24200,28 @@ module.exports = _taggedTemplateLiteral, module.exports.__esModule = true, modul
 
 /***/ }),
 
+/***/ "./node_modules/@babel/runtime/helpers/toConsumableArray.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/toConsumableArray.js ***!
+  \******************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var arrayWithoutHoles = __webpack_require__(/*! ./arrayWithoutHoles.js */ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js");
+
+var iterableToArray = __webpack_require__(/*! ./iterableToArray.js */ "./node_modules/@babel/runtime/helpers/iterableToArray.js");
+
+var unsupportedIterableToArray = __webpack_require__(/*! ./unsupportedIterableToArray.js */ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");
+
+var nonIterableSpread = __webpack_require__(/*! ./nonIterableSpread.js */ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js");
+
+function _toConsumableArray(arr) {
+  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
+}
+
+module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+
+/***/ }),
+
 /***/ "./node_modules/@babel/runtime/helpers/typeof.js":
 /*!*******************************************************!*\
   !*** ./node_modules/@babel/runtime/helpers/typeof.js ***!
@@ -44570,8 +45749,8 @@ class N3Parser {
   _saveContext(type, graph, subject, predicate, object) {
     const n3Mode = this._n3Mode;
     this._contextStack.push({
-      subject: subject, predicate: predicate, object: object,
-      graph: graph, type: type,
+      type,
+      subject, predicate, object, graph,
       inverse: n3Mode ? this._inversePredicate : false,
       blankPrefix: n3Mode ? this._prefixes._ : '',
       quantified: n3Mode ? this._quantified : null,
@@ -44590,14 +45769,20 @@ class N3Parser {
 
   // ### `_restoreContext` restores the parent context
   // when leaving a scope (list, blank node, formula)
-  _restoreContext() {
-    const context = this._contextStack.pop(), n3Mode = this._n3Mode;
+  _restoreContext(type, token) {
+    // Obtain the previous context
+    const context = this._contextStack.pop();
+    if (!context || context.type !== type)
+      return this._error(`Unexpected ${token.type}`, token);
+
+    // Restore the quad of the previous context
     this._subject   = context.subject;
     this._predicate = context.predicate;
     this._object    = context.object;
     this._graph     = context.graph;
-    // The settings below only apply to N3 streams
-    if (n3Mode) {
+
+    // Restore N3 context settings
+    if (this._n3Mode) {
       this._inversePredicate = context.inverse;
       this._prefixes._ = context.blankPrefix;
       this._quantified = context.quantified;
@@ -44870,7 +46055,7 @@ class N3Parser {
 
     // Restore the parent context containing this blank node
     const empty = this._predicate === null;
-    this._restoreContext();
+    this._restoreContext('blank', token);
     // If the blank node was the object, restore previous context and read punctuation
     if (this._object !== null)
       return this._getContextEndReader();
@@ -44921,7 +46106,7 @@ class N3Parser {
       break;
     case ')':
       // Closing the list; restore the parent context
-      this._restoreContext();
+      this._restoreContext('list', token);
       // If this list is contained within a parent list, return the membership quad here.
       // This will be `<parent list element> rdf:first <this list>.`.
       if (stack.length !== 0 && stack[stack.length - 1].type === 'list')
@@ -45072,7 +46257,7 @@ class N3Parser {
       this._emit(this._subject, this._predicate, this._object, this._graph);
 
     // Restore the parent context containing this formula
-    this._restoreContext();
+    this._restoreContext('formula', token);
     // If the formula was the subject, continue reading the predicate.
     // If the formula was the object, read punctuation.
     return this._object === null ? this._readPredicate : this._getContextEndReader();
@@ -45281,7 +46466,7 @@ class N3Parser {
         // The list item is the remaining subejct after reading the path
         const item = this._subject;
         // Switch back to the context of the list
-        this._restoreContext();
+        this._restoreContext('item', token);
         // Output the list item
         this._emit(this._subject, this.RDF_FIRST, item, this._graph);
       }
@@ -45343,7 +46528,7 @@ class N3Parser {
     // Read the quad and restore the previous context
     const quad = this._quad(this._subject, this._predicate, this._object,
       this._graph || this.DEFAULTGRAPH);
-    this._restoreContext();
+    this._restoreContext('<<', token);
     // If the triple was the subject, continue by reading the predicate.
     if (this._subject === null) {
       this._subject = quad;
@@ -65607,7 +66792,7 @@ var SolidAuthnLogic = /** @class */ (function () {
         if (app.viewingNoAuthPage) {
             return (0, rdflib_1.sym)(app.webId);
         }
-        if (this.session.info.webId && this.session.info.isLoggedIn) {
+        if (this && this.session && this.session.info && this.session.info.webId && this.session.info.isLoggedIn) {
             return (0, rdflib_1.sym)(this.session.info.webId);
         }
         return (0, authUtil_1.offlineTestID)(); // null unless testing
@@ -65797,7 +66982,7 @@ function offlineTestID() {
         return (0, rdflib_1.sym)($SolidTestEnvironment.username);
     }
     // hack that makes SolidOS work in offline mode by adding the webId directly in html
-    // example usage: https://github.com/solid/mashlib/blob/29b8b53c46bf02e0e219f0bacd51b0e9951001dd/test/contact/local.html#L37
+    // example usage: https://github.com/solidos/mashlib/blob/29b8b53c46bf02e0e219f0bacd51b0e9951001dd/test/contact/local.html#L37
     if (typeof document !== 'undefined' &&
         document.location &&
         ('' + document.location).slice(0, 16) === 'http://localhost') {
@@ -66134,6 +67319,29 @@ exports.determineChatContainer = determineChatContainer;
 
 "use strict";
 
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -66170,16 +67378,128 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.loadAllTypeIndexes = exports.loadCommunityTypeIndexes = exports.loadTypeIndexesFor = exports.loadPreferences = exports.loadProfile = void 0;
+exports.deleteTypeIndexRegistration = exports.registerInstanceInTypeIndex = exports.getAppInstances = exports.getScopedAppInstances = exports.getScopedAppsFromIndex = exports.uniqueNodes = exports.loadAllTypeIndexes = exports.loadCommunityTypeIndexes = exports.loadTypeIndexesFor = exports.loadPreferences = exports.loadProfile = exports.followOrCreateLink = exports.suggestPrivateTypeIndex = exports.suggestPublicTypeIndex = exports.suggestPreferencesFile = exports.loadOrCreateIfNotExists = void 0;
 var rdflib_1 = __webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js");
-var ns = {
-    solid: (0, rdflib_1.Namespace)('http://www.w3.org/ns/solid/terms#'),
-    space: (0, rdflib_1.Namespace)('http://www.w3.org/ns/pim/space#')
-};
+var $rdf = __importStar(__webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js"));
+var solidLogicSingleton_1 = __webpack_require__(/*! ../logic/solidLogicSingleton */ "./node_modules/solid-logic/lib/logic/solidLogicSingleton.js");
+var uri_1 = __webpack_require__(/*! ../util/uri */ "./node_modules/solid-logic/lib/util/uri.js");
+var solid_namespace_1 = __importDefault(__webpack_require__(/*! solid-namespace */ "./node_modules/solid-namespace/index.js"));
+var authn = solidLogicSingleton_1.solidLogicSingleton.authn;
+var currentUser = authn.currentUser;
+var ns = (0, solid_namespace_1.default)($rdf);
+/**
+ * Create a resource if it really does not exist
+ * Be absolutely sure something does not exist before creating a new empty file
+ * as otherwise existing could  be deleted.
+ * @param doc {NamedNode} - The resource
+ */
+function loadOrCreateIfNotExists(store, doc) {
+    return __awaiter(this, void 0, void 0, function () {
+        var response, err_1, msg, msg;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, store.fetcher.load(doc)];
+                case 1:
+                    response = _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _a.sent();
+                    if (err_1.response.status === 404) {
+                        try {
+                            store.fetcher.webOperation('PUT', doc, { data: '', contentType: 'text/turtle' });
+                        }
+                        catch (err) {
+                            msg = 'createIfNotExists: PUT FAILED: ' + doc + ': ' + err;
+                            throw new Error(msg);
+                        }
+                        delete store.fetcher.requested[doc.uri]; // delete cached 404 error
+                    }
+                    else {
+                        msg = 'createIfNotExists doc load error NOT 404:  ' + doc + ': ' + err_1;
+                        throw new Error(msg); // @@ add nested errors
+                    }
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/, response];
+            }
+        });
+    });
+}
+exports.loadOrCreateIfNotExists = loadOrCreateIfNotExists;
+function suggestPreferencesFile(me) {
+    var stripped = me.uri.replace('/profile/', '/').replace('/public/', '/');
+    // const stripped = me.uri.replace(\/[p|P]rofile/\g, '/').replace(\/[p|P]ublic/\g, '/')
+    var folderURI = stripped.split('/').slice(0, -1).join('/') + '/Settings/';
+    var fileURI = folderURI + 'Preferences.ttl';
+    return (0, rdflib_1.sym)(fileURI);
+}
+exports.suggestPreferencesFile = suggestPreferencesFile;
+function suggestPublicTypeIndex(me) {
+    var _a;
+    return (0, rdflib_1.sym)(((_a = me.doc().dir()) === null || _a === void 0 ? void 0 : _a.uri) + 'publicTypeIndex.ttl');
+}
+exports.suggestPublicTypeIndex = suggestPublicTypeIndex;
+// Note this one is based off the pref file not the profile
+function suggestPrivateTypeIndex(preferencesFile) {
+    var _a;
+    return (0, rdflib_1.sym)(((_a = preferencesFile.doc().dir()) === null || _a === void 0 ? void 0 : _a.uri) + 'privateTypeIndex.ttl');
+}
+exports.suggestPrivateTypeIndex = suggestPrivateTypeIndex;
+/* Follow link from this doc to another thing, or else make a new link
+**
+** return: null no ld one and failed to make a new one
+*/
+function followOrCreateLink(store, subject, predicate, object, doc) {
+    return __awaiter(this, void 0, void 0, function () {
+        var result, err_2, err_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, store.fetcher.load(doc)];
+                case 1:
+                    _a.sent();
+                    result = store.any(subject, predicate, null, doc);
+                    if (result)
+                        return [2 /*return*/, result];
+                    if (!store.updater.editable(doc)) {
+                        return [2 /*return*/, null];
+                    }
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 4, , 5]);
+                    return [4 /*yield*/, store.updater.update([], [(0, rdflib_1.st)(subject, predicate, object, doc)])];
+                case 3:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_2 = _a.sent();
+                    console.warn("followOrCreateLink: Error making link in ".concat(doc, " to ").concat(object, ": ").concat(err_2));
+                    return [2 /*return*/, null];
+                case 5:
+                    _a.trys.push([5, 7, , 8]);
+                    return [4 /*yield*/, loadOrCreateIfNotExists(store, object)
+                        // store.fetcher.webOperation('PUT', object, { data: '', contentType: 'text/turtle'})
+                    ];
+                case 6:
+                    _a.sent();
+                    return [3 /*break*/, 8];
+                case 7:
+                    err_3 = _a.sent();
+                    console.warn("followOrCreateLink: Error loading or saving new linked document: ".concat(object, ": ").concat(err_3));
+                    return [3 /*break*/, 8];
+                case 8: return [2 /*return*/, object];
+            }
+        });
+    });
+}
+exports.followOrCreateLink = followOrCreateLink;
 function loadProfile(store, user) {
     return __awaiter(this, void 0, void 0, function () {
-        var err_1;
+        var err_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -66194,8 +67514,8 @@ function loadProfile(store, user) {
                     _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    err_1 = _a.sent();
-                    throw new Error("Unable to load profile of user <".concat(user, ">: ").concat(err_1));
+                    err_4 = _a.sent();
+                    throw new Error("Unable to load profile of user ".concat(user, ": ").concat(err_4));
                 case 4: return [2 /*return*/, user.doc()];
             }
         });
@@ -66204,27 +67524,32 @@ function loadProfile(store, user) {
 exports.loadProfile = loadProfile;
 function loadPreferences(store, user) {
     return __awaiter(this, void 0, void 0, function () {
-        var profile, preferencesFile;
+        var possiblePreferencesFile, preferencesFile, message, err_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, loadProfile(store, user)];
                 case 1:
-                    profile = _a.sent();
-                    preferencesFile = store.any(user, ns.space('preferencesFile'), undefined, profile);
+                    _a.sent();
+                    possiblePreferencesFile = suggestPreferencesFile(user);
+                    return [4 /*yield*/, followOrCreateLink(store, user, ns.space('preferencesFile'), possiblePreferencesFile, user.doc())];
+                case 2:
+                    preferencesFile = _a.sent();
                     if (!preferencesFile) {
-                        // throw new Error(`USer ${user} has no pointer in profile to preferences file.`)
+                        message = "User ".concat(user, " has no pointer in profile to preferences file.");
+                        console.warn(message);
                         return [2 /*return*/, undefined];
                     }
-                    try {
-                        store.fetcher.load(preferencesFile);
-                    }
-                    catch (err) { // Mabeb a permission propblem or origin problem
-                        return [2 /*return*/, undefined
-                            // throw new Error(`Unable to load preferences file ${preferencesFile} of user <${user}>: ${err}`)
-                        ];
-                        // throw new Error(`Unable to load preferences file ${preferencesFile} of user <${user}>: ${err}`)
-                    }
-                    return [2 /*return*/, preferencesFile];
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 5, , 6]);
+                    return [4 /*yield*/, store.fetcher.load(preferencesFile)];
+                case 4:
+                    _a.sent();
+                    return [3 /*break*/, 6];
+                case 5:
+                    err_5 = _a.sent();
+                    return [2 /*return*/, undefined];
+                case 6: return [2 /*return*/, preferencesFile];
             }
         });
     });
@@ -66232,7 +67557,7 @@ function loadPreferences(store, user) {
 exports.loadPreferences = loadPreferences;
 function loadTypeIndexesFor(store, user) {
     return __awaiter(this, void 0, void 0, function () {
-        var profile, publicTypeIndex, _a, pub, preferencesFile, privateTypeIndexes, priv;
+        var profile, suggestion, publicTypeIndex, publicScopes, preferencesFile, err_6, privateScopes, suggestedPrivateTypeIndex, privateTypeIndex, _a, scopes, files, err_7;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -66241,30 +67566,55 @@ function loadTypeIndexesFor(store, user) {
                     return [4 /*yield*/, loadProfile(store, user)];
                 case 1:
                     profile = _b.sent();
-                    publicTypeIndex = store.any(user, ns.solid('publicTypeIndex'), undefined, profile);
-                    if (!publicTypeIndex) return [3 /*break*/, 5];
-                    _b.label = 2;
+                    suggestion = suggestPublicTypeIndex(user);
+                    return [4 /*yield*/, followOrCreateLink(store, user, ns.solid('publicTypeIndex'), suggestion, profile)];
                 case 2:
-                    _b.trys.push([2, 4, , 5]);
-                    return [4 /*yield*/, store.fetcher.load(publicTypeIndex)];
+                    publicTypeIndex = _b.sent();
+                    publicScopes = publicTypeIndex ? [{ label: 'public', index: publicTypeIndex, agent: user }] : [];
+                    _b.label = 3;
                 case 3:
-                    _b.sent();
-                    return [3 /*break*/, 5];
+                    _b.trys.push([3, 5, , 6]);
+                    return [4 /*yield*/, loadPreferences(store, user)];
                 case 4:
-                    _a = _b.sent();
-                    return [3 /*break*/, 5];
+                    preferencesFile = _b.sent();
+                    return [3 /*break*/, 6];
                 case 5:
-                    pub = publicTypeIndex ? [{ label: 'public', index: publicTypeIndex, agent: user }] : [];
-                    return [4 /*yield*/, loadPreferences(store, user)];
+                    err_6 = _b.sent();
+                    preferencesFile = null;
+                    return [3 /*break*/, 6];
                 case 6:
-                    preferencesFile = _b.sent();
-                    if (preferencesFile) { // watch out - can be in either as spec was not clear
-                        privateTypeIndexes = store.each(user, ns.solid('privateTypeIndex'), undefined, preferencesFile)
-                            .concat(store.each(user, ns.solid('privateTypeIndex'), undefined, profile));
-                        priv = privateTypeIndexes.length > 0 ? [{ label: 'priSo @@@@@vate', index: privateTypeIndexes[0], agent: user }] : [];
-                        return [2 /*return*/, pub.concat(priv)];
-                    }
-                    return [2 /*return*/, pub];
+                    if (!preferencesFile) return [3 /*break*/, 9];
+                    suggestedPrivateTypeIndex = suggestPrivateTypeIndex(preferencesFile);
+                    _a = store.any(user, ns.solid('privateTypeIndex'), undefined, profile);
+                    if (_a) return [3 /*break*/, 8];
+                    return [4 /*yield*/, followOrCreateLink(store, user, ns.solid('privateTypeIndex'), suggestedPrivateTypeIndex, preferencesFile)];
+                case 7:
+                    _a = (_b.sent());
+                    _b.label = 8;
+                case 8:
+                    privateTypeIndex = _a;
+                    privateScopes = privateTypeIndex ? [{ label: 'private', index: privateTypeIndex, agent: user }] : [];
+                    return [3 /*break*/, 10];
+                case 9:
+                    privateScopes = [];
+                    _b.label = 10;
+                case 10:
+                    scopes = publicScopes.concat(privateScopes);
+                    if (scopes.length === 0)
+                        return [2 /*return*/, scopes];
+                    files = scopes.map(function (scope) { return scope.index; });
+                    _b.label = 11;
+                case 11:
+                    _b.trys.push([11, 13, , 14]);
+                    return [4 /*yield*/, store.fetcher.load(files)];
+                case 12:
+                    _b.sent();
+                    return [3 /*break*/, 14];
+                case 13:
+                    err_7 = _b.sent();
+                    console.warn('Problems loading type index: ', err_7);
+                    return [3 /*break*/, 14];
+                case 14: return [2 /*return*/, scopes];
             }
         });
     });
@@ -66272,44 +67622,30 @@ function loadTypeIndexesFor(store, user) {
 exports.loadTypeIndexesFor = loadTypeIndexesFor;
 function loadCommunityTypeIndexes(store, user) {
     return __awaiter(this, void 0, void 0, function () {
-        var preferencesFile, communities, communityTypeIndexesPromise, result1;
-        var _this = this;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var preferencesFile, communities, result, _i, communities_1, org, _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0: return [4 /*yield*/, loadPreferences(store, user)];
                 case 1:
-                    preferencesFile = _a.sent();
-                    if (preferencesFile) {
-                        communities = store.each(user, ns.solid('community'), undefined, preferencesFile);
-                        communityTypeIndexesPromise = communities.map(function (community) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0: return [4 /*yield*/, loadTypeIndexesFor(store, community)];
-                                case 1: return [2 /*return*/, _a.sent()];
-                            }
-                        }); }); });
-                        result1 = Promise.all(communityTypeIndexesPromise);
-                        // const result2 = Promise.all(result1)
-                        // const flat = result2.flat()
-                        return [2 /*return*/, result1
-                            // const communityTypeIndexes = await Promise.all(communityTypeIndexesPromise)
-                            /*
-                          let result = [] as TypeIndex[]
-                          for(const community of communities) {
-                            result = result.concat(await loadTypeIndexesFor(store, community as NamedNode)) as TypeIndex[] // @@ how oto make functional with async?
-                          }
-                          */
-                            // return communityTypeIndexesPromise.resolve()
-                        ];
-                        // const communityTypeIndexes = await Promise.all(communityTypeIndexesPromise)
-                        /*
-                      let result = [] as TypeIndex[]
-                      for(const community of communities) {
-                        result = result.concat(await loadTypeIndexesFor(store, community as NamedNode)) as TypeIndex[] // @@ how oto make functional with async?
-                      }
-                      */
-                        // return communityTypeIndexesPromise.resolve()
-                    }
-                    return [2 /*return*/, []];
+                    preferencesFile = _c.sent();
+                    if (!preferencesFile) return [3 /*break*/, 6];
+                    communities = store.each(user, ns.solid('community'), undefined, preferencesFile).concat(store.each(user, ns.solid('community'), undefined, user.doc()));
+                    result = [];
+                    _i = 0, communities_1 = communities;
+                    _c.label = 2;
+                case 2:
+                    if (!(_i < communities_1.length)) return [3 /*break*/, 5];
+                    org = communities_1[_i];
+                    _b = (_a = result).concat;
+                    return [4 /*yield*/, loadTypeIndexesFor(store, org)];
+                case 3:
+                    result = _b.apply(_a, [_c.sent()]);
+                    _c.label = 4;
+                case 4:
+                    _i++;
+                    return [3 /*break*/, 2];
+                case 5: return [2 /*return*/, result];
+                case 6: return [2 /*return*/, []]; // No communities
             }
         });
     });
@@ -66330,11 +67666,159 @@ function loadAllTypeIndexes(store, user) {
     });
 }
 exports.loadAllTypeIndexes = loadAllTypeIndexes;
+// Utility: remove duplicates from Array of NamedNodes
+function uniqueNodes(arr) {
+    var uris = arr.map(function (x) { return x.uri; });
+    var set = new Set(uris);
+    var uris2 = Array.from(set);
+    var arr2 = uris2.map(function (u) { return new rdflib_1.NamedNode(u); });
+    return arr2; // Array.from(new Set(arr.map(x => x.uri))).map(u => sym(u))
+}
+exports.uniqueNodes = uniqueNodes;
+function getScopedAppsFromIndex(store, scope, theClass) {
+    return __awaiter(this, void 0, void 0, function () {
+        var index, registrations, relevant, directInstances, instances, instanceContainers, containers, i, cont, contents;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    index = scope.index;
+                    registrations = store.statementsMatching(null, ns.solid('instance'), null, index)
+                        .concat(store.statementsMatching(null, ns.solid('instanceContainer'), null, index))
+                        .map(function (st) { return st.subject; });
+                    relevant = theClass ? registrations.filter(function (reg) { return store.any(reg, ns.solid('forClass'), null, index).sameTerm(theClass); })
+                        : registrations;
+                    directInstances = relevant.map(function (reg) { return store.each(reg, ns.solid('instance'), null, index); }).flat();
+                    instances = uniqueNodes(directInstances);
+                    instanceContainers = relevant.map(function (reg) { return store.each(reg, ns.solid('instanceContainer'), null, index); }).flat();
+                    containers = uniqueNodes(instanceContainers);
+                    if (containers.length > 0) {
+                        console.log('@@ getScopedAppsFromIndex containers ', containers);
+                    }
+                    i = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(i < containers.length)) return [3 /*break*/, 4];
+                    cont = containers[i];
+                    return [4 /*yield*/, store.fetcher.load(cont)];
+                case 2:
+                    _a.sent();
+                    contents = store.each(cont, ns.ldp('contains'), null, cont);
+                    instances = instances.concat(contents);
+                    _a.label = 3;
+                case 3:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/, instances.map(function (instance) { return { instance: instance, scope: scope }; })];
+            }
+        });
+    });
+}
+exports.getScopedAppsFromIndex = getScopedAppsFromIndex;
+function getScopedAppInstances(store, klass, user) {
+    return __awaiter(this, void 0, void 0, function () {
+        var scopes, scopedApps, _i, scopes_1, scope, scopedApps0;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, loadAllTypeIndexes(store, user)];
+                case 1:
+                    scopes = _a.sent();
+                    scopedApps = [];
+                    _i = 0, scopes_1 = scopes;
+                    _a.label = 2;
+                case 2:
+                    if (!(_i < scopes_1.length)) return [3 /*break*/, 5];
+                    scope = scopes_1[_i];
+                    return [4 /*yield*/, getScopedAppsFromIndex(store, scope, klass)];
+                case 3:
+                    scopedApps0 = _a.sent();
+                    scopedApps = scopedApps.concat(scopedApps0);
+                    _a.label = 4;
+                case 4:
+                    _i++;
+                    return [3 /*break*/, 2];
+                case 5: return [2 /*return*/, scopedApps];
+            }
+        });
+    });
+}
+exports.getScopedAppInstances = getScopedAppInstances;
+// This is the function signature which used to be in solid-ui/logic
+// Recommended to use getScopedAppInstances instead as it provides more information.
+//
+function getAppInstances(store, klass) {
+    return __awaiter(this, void 0, void 0, function () {
+        var user, scopedAppInstances;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = currentUser();
+                    if (!user)
+                        throw new Error('getAppInstances: Must be logged in to find apps.');
+                    return [4 /*yield*/, getScopedAppInstances(store, klass, user)];
+                case 1:
+                    scopedAppInstances = _a.sent();
+                    return [2 /*return*/, scopedAppInstances.map(function (scoped) { return scoped.instance; })];
+            }
+        });
+    });
+}
+exports.getAppInstances = getAppInstances;
 /*
-export async function getAppInstances (store:LiveStore, klass: NamedNode) {
-
+ * Register a new app in a type index
+ * used in chat in bookmark.js (solid-ui)
+ * Returns the registration object if successful else null
+ */
+function registerInstanceInTypeIndex(store, instance, index, theClass) {
+    return __awaiter(this, void 0, void 0, function () {
+        var registration, ins, err_8, msg;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    registration = (0, uri_1.newThing)(index);
+                    ins = [
+                        // See https://github.com/solid/solid/blob/main/proposals/data-discovery.md
+                        (0, rdflib_1.st)(registration, ns.rdf('type'), ns.solid('TypeRegistration'), index),
+                        (0, rdflib_1.st)(registration, ns.solid('forClass'), theClass, index),
+                        (0, rdflib_1.st)(registration, ns.solid('instance'), instance, index)
+                    ];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, store.updater.update([], ins)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_8 = _a.sent();
+                    msg = "Unable to register ".concat(instance, " in index ").concat(index, ": ").concat(err_8);
+                    console.warn(msg);
+                    return [2 /*return*/, null];
+                case 4: return [2 /*return*/, registration];
+            }
+        });
+    });
 }
-*/
+exports.registerInstanceInTypeIndex = registerInstanceInTypeIndex;
+function deleteTypeIndexRegistration(store, item) {
+    return __awaiter(this, void 0, void 0, function () {
+        var reg, statements;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    reg = store.the(null, ns.solid('instance'), item.instance, item.scope.index);
+                    if (!reg)
+                        throw new Error("deleteTypeIndexRegistration: No registration found for ".concat(item.instance));
+                    statements = store.statementsMatching(reg, null, null, item.scope.index);
+                    return [4 /*yield*/, store.updater.update(statements, [])];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.deleteTypeIndexRegistration = deleteTypeIndexRegistration;
+// ENDS
 //# sourceMappingURL=discoveryLogic.js.map
 
 /***/ }),
@@ -66348,7 +67832,7 @@ export async function getAppInstances (store:LiveStore, klass: NamedNode) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.profile = exports.chat = exports.store = exports.authSession = exports.authn = exports.FetchError = exports.NotFoundError = exports.SameOriginForbiddenError = exports.CrossOriginForbiddenError = exports.UnauthorizedError = exports.solidLogicSingleton = exports.getSuggestedIssuers = exports.ACL_LINK = exports.appContext = exports.offlineTestID = exports.SolidLogic = exports.loadAllTypeIndexes = exports.loadCommunityTypeIndexes = exports.loadTypeIndexesFor = exports.loadPreferences = exports.loadProfile = exports.loadIndex = exports.registerInTypeIndex = exports.loadTypeIndexes = exports.ensureTypeIndexes = exports.genACLText = exports.setACLUserPublic = void 0;
+exports.profile = exports.chat = exports.store = exports.authSession = exports.authn = exports.FetchError = exports.NotFoundError = exports.SameOriginForbiddenError = exports.CrossOriginForbiddenError = exports.UnauthorizedError = exports.solidLogicSingleton = exports.getSuggestedIssuers = exports.ACL_LINK = exports.appContext = exports.offlineTestID = exports.SolidLogic = exports.uniqueNodes = exports.suggestPublicTypeIndex = exports.suggestPrivateTypeIndex = exports.suggestPreferencesFile = exports.registerInstanceInTypeIndex = exports.loadTypeIndexesFor = exports.loadProfile = exports.loadPreferences = exports.loadOrCreateIfNotExists = exports.loadCommunityTypeIndexes = exports.loadAllTypeIndexes = exports.getScopedAppsFromIndex = exports.getScopedAppInstances = exports.getAppInstances = exports.followOrCreateLink = exports.deleteTypeIndexRegistration = exports.loadIndex = exports.registerInTypeIndex = exports.loadTypeIndexes = exports.ensureTypeIndexes = exports.genACLText = exports.setACLUserPublic = void 0;
 // Make these variables directly accessible as it is what you need most of the time
 // This also makes these variable globaly accesible in mashlib
 var solidLogicSingleton_1 = __webpack_require__(/*! ./logic/solidLogicSingleton */ "./node_modules/solid-logic/lib/logic/solidLogicSingleton.js");
@@ -66370,12 +67854,25 @@ Object.defineProperty(exports, "ensureTypeIndexes", ({ enumerable: true, get: fu
 Object.defineProperty(exports, "loadTypeIndexes", ({ enumerable: true, get: function () { return typeIndexLogic_1.loadTypeIndexes; } }));
 Object.defineProperty(exports, "registerInTypeIndex", ({ enumerable: true, get: function () { return typeIndexLogic_1.registerInTypeIndex; } }));
 Object.defineProperty(exports, "loadIndex", ({ enumerable: true, get: function () { return typeIndexLogic_1.loadIndex; } }));
+// Generate by
+//  grep export src/discovery/discoveryLogic.ts | sed -e 's/export //g'  | sed -e 's/async //g'| sed -e 's/function //g' | sed -e 's/ .*/,/g' | sort
 var discoveryLogic_1 = __webpack_require__(/*! ./discovery/discoveryLogic */ "./node_modules/solid-logic/lib/discovery/discoveryLogic.js");
-Object.defineProperty(exports, "loadProfile", ({ enumerable: true, get: function () { return discoveryLogic_1.loadProfile; } }));
+Object.defineProperty(exports, "deleteTypeIndexRegistration", ({ enumerable: true, get: function () { return discoveryLogic_1.deleteTypeIndexRegistration; } }));
+Object.defineProperty(exports, "followOrCreateLink", ({ enumerable: true, get: function () { return discoveryLogic_1.followOrCreateLink; } }));
+Object.defineProperty(exports, "getAppInstances", ({ enumerable: true, get: function () { return discoveryLogic_1.getAppInstances; } }));
+Object.defineProperty(exports, "getScopedAppInstances", ({ enumerable: true, get: function () { return discoveryLogic_1.getScopedAppInstances; } }));
+Object.defineProperty(exports, "getScopedAppsFromIndex", ({ enumerable: true, get: function () { return discoveryLogic_1.getScopedAppsFromIndex; } }));
+Object.defineProperty(exports, "loadAllTypeIndexes", ({ enumerable: true, get: function () { return discoveryLogic_1.loadAllTypeIndexes; } }));
+Object.defineProperty(exports, "loadCommunityTypeIndexes", ({ enumerable: true, get: function () { return discoveryLogic_1.loadCommunityTypeIndexes; } }));
+Object.defineProperty(exports, "loadOrCreateIfNotExists", ({ enumerable: true, get: function () { return discoveryLogic_1.loadOrCreateIfNotExists; } }));
 Object.defineProperty(exports, "loadPreferences", ({ enumerable: true, get: function () { return discoveryLogic_1.loadPreferences; } }));
+Object.defineProperty(exports, "loadProfile", ({ enumerable: true, get: function () { return discoveryLogic_1.loadProfile; } }));
 Object.defineProperty(exports, "loadTypeIndexesFor", ({ enumerable: true, get: function () { return discoveryLogic_1.loadTypeIndexesFor; } }));
-Object.defineProperty(exports, "loadCommunityTypeIndexes", ({ enumerable: true, get: function () { return discoveryLogic_1.loadCommunityTypeIndexes; } }));
-Object.defineProperty(exports, "loadAllTypeIndexes", ({ enumerable: true, get: function () { return discoveryLogic_1.loadAllTypeIndexes; } }));
+Object.defineProperty(exports, "registerInstanceInTypeIndex", ({ enumerable: true, get: function () { return discoveryLogic_1.registerInstanceInTypeIndex; } }));
+Object.defineProperty(exports, "suggestPreferencesFile", ({ enumerable: true, get: function () { return discoveryLogic_1.suggestPreferencesFile; } }));
+Object.defineProperty(exports, "suggestPrivateTypeIndex", ({ enumerable: true, get: function () { return discoveryLogic_1.suggestPrivateTypeIndex; } }));
+Object.defineProperty(exports, "suggestPublicTypeIndex", ({ enumerable: true, get: function () { return discoveryLogic_1.suggestPublicTypeIndex; } }));
+Object.defineProperty(exports, "uniqueNodes", ({ enumerable: true, get: function () { return discoveryLogic_1.uniqueNodes; } }));
 var SolidLogic_1 = __webpack_require__(/*! ./logic/SolidLogic */ "./node_modules/solid-logic/lib/logic/SolidLogic.js");
 Object.defineProperty(exports, "SolidLogic", ({ enumerable: true, get: function () { return SolidLogic_1.SolidLogic; } }));
 var authUtil_1 = __webpack_require__(/*! ./authn/authUtil */ "./node_modules/solid-logic/lib/authn/authUtil.js");
@@ -66951,7 +68448,7 @@ var _fetch = function (url, requestInit) { return __awaiter(void 0, void 0, void
     var omitCreds;
     return __generator(this, function (_a) {
         omitCreds = requestInit && requestInit.credentials && requestInit.credentials == 'omit';
-        if (authSession_1.authSession.info.webId && !omitCreds) { // see https://github.com/solid/solidos/issues/114
+        if (authSession_1.authSession.info.webId && !omitCreds) { // see https://github.com/solidos/solidos/issues/114
             // In fact ftech should respect crentials omit itself
             return [2 /*return*/, authSession_1.authSession.fetch(url, requestInit)];
         }
@@ -67182,7 +68679,7 @@ function ensureLoadedPreferences(context) {
  * Resolves with the same context, outputting
  * output: index.public, index.private
  *  @@ This is a very bizare function
- * @see https://github.com/solid/solid/blob/main/proposals/data-discovery.md#discoverability
+ * @see https://github.com/solidos/solid/blob/main/proposals/data-discovery.md#discoverability
  */
 function loadIndex(context, isPublic) {
     return __awaiter(this, void 0, void 0, function () {
@@ -67245,7 +68742,7 @@ function loadTypeIndexes(context) {
 exports.loadTypeIndexes = loadTypeIndexes;
 /**
  * Resolves with the same context, outputting
- * @see https://github.com/solid/solid/blob/main/proposals/data-discovery.md#discoverability
+ * @see https://github.com/solidos/solid/blob/main/proposals/data-discovery.md#discoverability
  */
 function ensureTypeIndexes(context, agent) {
     return __awaiter(this, void 0, void 0, function () {
@@ -67273,7 +68770,7 @@ exports.ensureTypeIndexes = ensureTypeIndexes;
  * Many reasons for failing including script not having permission etc
  *
  * Adds its output to the context
- * @see https://github.com/solid/solid/blob/main/proposals/data-discovery.md#discoverability
+ * @see https://github.com/solidos/solid/blob/main/proposals/data-discovery.md#discoverability
  */
 function ensureOneTypeIndex(context, isPublic, agent) {
     return __awaiter(this, void 0, void 0, function () {
@@ -67426,7 +68923,7 @@ function registerInTypeIndex(context, instance, theClass, isPublic, agent // Def
                     index = indexes[0];
                     registration = (0, uri_1.newThing)(index);
                     ins = [
-                        // See https://github.com/solid/solid/blob/main/proposals/data-discovery.md
+                        // See https://github.com/solidos/solid/blob/main/proposals/data-discovery.md
                         (0, rdflib_1.st)(registration, exports.ns.rdf('type'), exports.ns.solid('TypeRegistration'), index),
                         (0, rdflib_1.st)(registration, exports.ns.solid('forClass'), theClass, index),
                         (0, rdflib_1.st)(registration, exports.ns.solid('instance'), instance, index)
@@ -67530,7 +69027,7 @@ var UtilityLogic = /** @class */ (function () {
             });
         });
     };
-    // Copied from https://github.com/solid/web-access-control-tests/blob/v3.0.0/test/surface/delete.test.ts#L5
+    // Copied from https://github.com/solidos/web-access-control-tests/blob/v3.0.0/test/surface/delete.test.ts#L5
     UtilityLogic.prototype.setSinglePeerAccess = function (options) {
         return __awaiter(this, void 0, void 0, function () {
             var str, aclDocUrl;
@@ -67618,7 +69115,7 @@ var UtilityLogic = /** @class */ (function () {
                                 headers: {
                                     "Content-Type": "text/turtle",
                                     "If-None-Match": "*",
-                                    Link: '<http://www.w3.org/ns/ldp#BasicContainer>; rel="type"', // See https://github.com/solid/node-solid-server/issues/1465
+                                    Link: '<http://www.w3.org/ns/ldp#BasicContainer>; rel="type"', // See https://github.com/solidos/node-solid-server/issues/1465
                                 },
                                 body: " ", // work around https://github.com/michielbdejong/community-server/issues/4#issuecomment-776222863
                             })];