chat-pane 2.4.24 → 2.4.25-bc02cfbd

package/dist/main.js

@@ -21420,7 +21420,6 @@ var longChatPane = {
     }
     return null; // Suppress pane otherwise
   },
-
   mintClass: mainClass,
   mintNew: function mintNew(context, newPaneOptions) {
     var kb = context.session.store;
@@ -21481,7 +21480,6 @@ var longChatPane = {
       // If not loaded already
       rdflib__WEBPACK_IMPORTED_MODULE_2__["default"](preferencesFormText, kb, preferencesFormDoc.uri, 'text/turtle'); // Load form directly
     }
-
     var preferenceProperties = kb.statementsMatching(null, ns.ui.property, null, preferencesFormDoc).map(function (st) {
       return st.object;
     });
@@ -39465,7 +39463,7 @@ var Serializer = /*#__PURE__*/function () {
         // Unicode encoding NTriples style
         uri = backslashUify(uri);
       } else {
-        uri = hexify(uri);
+        uri = hexify(decodeURI(uri));
       }
       return '<' + uri + '>';
     }
@@ -42180,9 +42178,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
 /* @file Update Manager Class
 **
-** 2007-07-15 originall sparl update module by Joe Presbrey <presbrey@mit.edu>
+** 2007-07-15 original SPARQL Update module by Joe Presbrey <presbrey@mit.edu>
 ** 2010-08-08 TimBL folded in Kenny's WEBDAV
-** 2010-12-07 TimBL addred local file write code
+** 2010-12-07 TimBL added local file write code
 */
 
 
@@ -42248,8 +42246,8 @@ var UpdateManager = /*#__PURE__*/function () {
     }
 
     /** Remove from the store HTTP authorization metadata
-    * The editble function below relies on copies we have in the store
-    * of the results of previous HTTP transactions. Howver, when
+    * The editable function below relies on copies we have in the store
+    * of the results of previous HTTP transactions. However, when
     * the user logs in, then that data misrepresents what would happen
     * if the user tried again.
     */
@@ -42290,7 +42288,7 @@ var UpdateManager = /*#__PURE__*/function () {
      * and local write access is determined by those headers.
      * This async version not only looks at past HTTP requests, it also makes new ones if necessary.
      *
-     * @returns The method string SPARQL or DAV or
+     * @returns The method string N3PATCH or SPARQL or DAV or
      *   LOCALFILE or false if known, undefined if not known.
      */
   }, {
@@ -42402,6 +42400,7 @@ var UpdateManager = /*#__PURE__*/function () {
             if (acceptPatch.length) {
               for (var i = 0; i < acceptPatch.length; i++) {
                 method = acceptPatch[i].value.trim();
+                if (method.indexOf('text/n3') >= 0) return 'N3PATCH';
                 if (method.indexOf('application/sparql-update') >= 0) return 'SPARQL';
                 if (method.indexOf('application/sparql-update-single-match') >= 0) return 'SPARQL';
               }
@@ -42449,7 +42448,8 @@ var UpdateManager = /*#__PURE__*/function () {
   }, {
     key: "anonymize",
     value: function anonymize(obj) {
-      return obj.toNT().substr(0, 2) === '_:' && this.mentioned(obj) ? '?' + obj.toNT().substr(2) : obj.toNT();
+      var anonymized = obj.toNT().substr(0, 2) === '_:' && this.mentioned(obj) ? '?' + obj.toNT().substr(2) : obj.toNT();
+      return anonymized;
     }
   }, {
     key: "anonymizeNT",
@@ -42647,7 +42647,7 @@ var UpdateManager = /*#__PURE__*/function () {
         // console.log('UpdateManager: sending update to <' + uri + '>')
 
         options.noMeta = true;
-        options.contentType = 'application/sparql-update';
+        options.contentType = options.contentType || 'application/sparql-update';
         options.body = query;
         return _this.store.fetcher.webOperation('PATCH', uri, options);
       }).then(function (response) {
@@ -42665,7 +42665,7 @@ var UpdateManager = /*#__PURE__*/function () {
       });
     }
 
-    // ARE THESE THEE FUNCTIONS USED? DEPROCATE?
+    // ARE THESE THREE FUNCTIONS USED? DEPRECATE?
 
     /** return a statemnet updating function
      *
@@ -42975,7 +42975,93 @@ var UpdateManager = /*#__PURE__*/function () {
     }
 
     /**
-     * This high-level function updates the local store iff the web is changed successfully.
+     * @private
+     * 
+     * This helper function constructs SPARQL Update query from resolved arguments.
+     * 
+     * @param ds: deletions array.
+     * @param is: insertions array.
+     * @param bnodes_context: Additional context to uniquely identify any blank nodes.
+     */
+  }, {
+    key: "constructSparqlUpdateQuery",
+    value: function constructSparqlUpdateQuery(ds, is, bnodes_context) {
+      var whereClause = this.contextWhere(bnodes_context);
+      var query = '';
+      if (whereClause.length) {
+        // Is there a WHERE clause?
+        if (ds.length) {
+          query += 'DELETE { ';
+          for (var i = 0; i < ds.length; i++) {
+            query += this.anonymizeNT(ds[i]) + '\n';
+          }
+          query += ' }\n';
+        }
+        if (is.length) {
+          query += 'INSERT { ';
+          for (var _i5 = 0; _i5 < is.length; _i5++) {
+            query += this.anonymizeNT(is[_i5]) + '\n';
+          }
+          query += ' }\n';
+        }
+        query += whereClause;
+      } else {
+        // no where clause
+        if (ds.length) {
+          query += 'DELETE DATA { ';
+          for (var _i6 = 0; _i6 < ds.length; _i6++) {
+            query += this.anonymizeNT(ds[_i6]) + '\n';
+          }
+          query += ' } \n';
+        }
+        if (is.length) {
+          if (ds.length) query += ' ; ';
+          query += 'INSERT DATA { ';
+          for (var _i7 = 0; _i7 < is.length; _i7++) {
+            query += this.nTriples(is[_i7]) + '\n';
+          }
+          query += ' }\n';
+        }
+      }
+      return query;
+    }
+
+    /**
+     * @private
+     * 
+     * This helper function constructs n3-patch query from resolved arguments.
+     * 
+     * @param ds: deletions array.
+     * @param is: insertions array.
+     * @param bnodes_context: Additional context to uniquely identify any blanknodes.
+     */
+  }, {
+    key: "constructN3PatchQuery",
+    value: function constructN3PatchQuery(ds, is, bnodes_context) {
+      var _this3 = this;
+      var query = "\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ex: <http://www.example.org/terms#>.\n\n_:patch\n";
+      // If bnode context is non trivial, express it as ?conditions formula.
+      if (bnodes_context && bnodes_context.length > 0) {
+        query += "\n      solid:where {\n        ".concat(bnodes_context.map(function (x) {
+          return _this3.anonymizeNT(x);
+        }).join('\n        '), "\n      };");
+      }
+      if (ds.length > 0) {
+        query += "\n      solid:deletes {\n        ".concat(ds.map(function (x) {
+          return _this3.anonymizeNT(x);
+        }).join('\n        '), "\n      };");
+      }
+      if (is.length > 0) {
+        query += "\n      solid:inserts {\n        ".concat(is.map(function (x) {
+          return _this3.anonymizeNT(x);
+        }).join('\n        '), "\n      };");
+      }
+      query += "   a solid:InsertDeletePatch .\n";
+      return query;
+    }
+
+    /**
+     * This high-level function updates the local store if the web is changed successfully.
      * Deletions, insertions may be undefined or single statements or lists or formulae (may contain bnodes which can be indirectly identified by a where clause).
      * The `why` property of each statement must be the same and give the web document to be updated.
      * @param deletions - Statement or statements to be deleted.
@@ -42987,7 +43073,7 @@ var UpdateManager = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(deletions, insertions, callback, secondTry) {
-      var _this3 = this;
+      var _this4 = this;
       var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
       if (!callback) {
         var thisUpdater = this;
@@ -43055,64 +43141,31 @@ var UpdateManager = /*#__PURE__*/function () {
         if (protocol === undefined) {
           // Not enough metadata
           if (secondTry) {
-            throw new Error('Update: Loaded ' + doc + "but stil can't figure out what editing protcol it supports.");
+            throw new Error('Update: Loaded ' + doc + "but still can't figure out what editing protocol it supports.");
           }
           // console.log(`Update: have not loaded ${doc} before: loading now...`);
           this.store.fetcher.load(doc).then(function (response) {
-            _this3.update(deletions, insertions, callback, true, options);
+            _this4.update(deletions, insertions, callback, true, options);
           }, function (err) {
             if (err.response.status === 404) {
               // nonexistent files are fine
-              _this3.update(deletions, insertions, callback, true, options);
+              _this4.update(deletions, insertions, callback, true, options);
             } else {
               throw new Error("Update: Can't get updatability status ".concat(doc, " before patching: ").concat(err));
             }
           });
           return;
-        } else if (protocol.indexOf('SPARQL') >= 0) {
+        } else if (protocol.indexOf('SPARQL') >= 0 || protocol.indexOf('N3PATCH') >= 0) {
+          var isSparql = protocol.indexOf('SPARQL') >= 0;
           var bnodes = [];
           // change ReadOnly type to Mutable type
 
           if (ds.length) bnodes = this.statementArrayBnodes(ds);
           if (is.length) bnodes = bnodes.concat(this.statementArrayBnodes(is));
           var context = this.bnodeContext(bnodes, doc);
-          var whereClause = this.contextWhere(context);
-          var query = '';
-          if (whereClause.length) {
-            // Is there a WHERE clause?
-            if (ds.length) {
-              query += 'DELETE { ';
-              for (var i = 0; i < ds.length; i++) {
-                query += this.anonymizeNT(ds[i]) + '\n';
-              }
-              query += ' }\n';
-            }
-            if (is.length) {
-              query += 'INSERT { ';
-              for (var _i5 = 0; _i5 < is.length; _i5++) {
-                query += this.anonymizeNT(is[_i5]) + '\n';
-              }
-              query += ' }\n';
-            }
-            query += whereClause;
-          } else {
-            // no where clause
-            if (ds.length) {
-              query += 'DELETE DATA { ';
-              for (var _i6 = 0; _i6 < ds.length; _i6++) {
-                query += this.anonymizeNT(ds[_i6]) + '\n';
-              }
-              query += ' } \n';
-            }
-            if (is.length) {
-              if (ds.length) query += ' ; ';
-              query += 'INSERT DATA { ';
-              for (var _i7 = 0; _i7 < is.length; _i7++) {
-                query += this.nTriples(is[_i7]) + '\n';
-              }
-              query += ' }\n';
-            }
-          }
+          var query = isSparql ? this.constructSparqlUpdateQuery(ds, is, context) : this.constructN3PatchQuery(ds, is, context);
+          options.contentType = isSparql ? 'application/sparql-update' : 'text/n3';
+
           // Track pending upstream patches until they have finished their callbackFunction
           control.pendingUpstream = control.pendingUpstream ? control.pendingUpstream + 1 : 1;
           if ('upstreamCount' in control) {
@@ -43133,8 +43186,8 @@ var UpdateManager = /*#__PURE__*/function () {
                 success = false;
                 body = 'Remote Ok BUT error deleting ' + ds.length + ' from store!!! ' + e;
               } // Add in any case -- help recover from weirdness??
-              for (var _i8 = 0; _i8 < is.length; _i8++) {
-                kb.add(is[_i8].subject, is[_i8].predicate, is[_i8].object, doc);
+              for (var i = 0; i < is.length; i++) {
+                kb.add(is[i].subject, is[i].predicate, is[i].object, doc);
               }
             }
             callback(uri, success, body, response);
@@ -43188,8 +43241,8 @@ var UpdateManager = /*#__PURE__*/function () {
       for (var i = 0; i < ds.length; i++) {
         _utils_js__WEBPACK_IMPORTED_MODULE_12__.RDFArrayRemove(newSts, ds[i]);
       }
-      for (var _i9 = 0; _i9 < is.length; _i9++) {
-        newSts.push(is[_i9]);
+      for (var _i8 = 0; _i8 < is.length; _i8++) {
+        newSts.push(is[_i8]);
       }
       var documentString = this.serialize(doc.value, newSts, contentType);
 
@@ -43206,11 +43259,11 @@ var UpdateManager = /*#__PURE__*/function () {
         if (!response.ok) {
           throw new Error(response.error);
         }
-        for (var _i10 = 0; _i10 < ds.length; _i10++) {
-          kb.remove(ds[_i10]);
+        for (var _i9 = 0; _i9 < ds.length; _i9++) {
+          kb.remove(ds[_i9]);
         }
-        for (var _i11 = 0; _i11 < is.length; _i11++) {
-          kb.add(is[_i11].subject, is[_i11].predicate, is[_i11].object, doc);
+        for (var _i10 = 0; _i10 < is.length; _i10++) {
+          kb.add(is[_i10].subject, is[_i10].predicate, is[_i10].object, doc);
         }
         callbackFunction(doc.value, response.ok, response.responseText, response);
       }).catch(function (err) {
@@ -43240,8 +43293,8 @@ var UpdateManager = /*#__PURE__*/function () {
       for (var i = 0; i < ds.length; i++) {
         _utils_js__WEBPACK_IMPORTED_MODULE_12__.RDFArrayRemove(newSts, ds[i]);
       }
-      for (var _i12 = 0; _i12 < is.length; _i12++) {
-        newSts.push(is[_i12]);
+      for (var _i11 = 0; _i11 < is.length; _i11++) {
+        newSts.push(is[_i11]);
       }
       // serialize to the appropriate format
       var dot = doc.value.lastIndexOf('.');
@@ -43257,11 +43310,11 @@ var UpdateManager = /*#__PURE__*/function () {
       options.contentType = contentType;
       kb.fetcher.webOperation('PUT', doc.value, options).then(function (response) {
         if (!response.ok) return callbackFunction(doc.value, false, response.error);
-        for (var _i13 = 0; _i13 < ds.length; _i13++) {
-          kb.remove(ds[_i13]);
+        for (var _i12 = 0; _i12 < ds.length; _i12++) {
+          kb.remove(ds[_i12]);
         }
-        for (var _i14 = 0; _i14 < is.length; _i14++) {
-          kb.add(is[_i14].subject, is[_i14].predicate, is[_i14].object, doc);
+        for (var _i13 = 0; _i13 < is.length; _i13++) {
+          kb.add(is[_i13].subject, is[_i13].predicate, is[_i13].object, doc);
         }
         callbackFunction(doc.value, true, ''); // success!
       });
@@ -43309,11 +43362,11 @@ var UpdateManager = /*#__PURE__*/function () {
   }, {
     key: "put",
     value: function put(doc, data, contentType, callback) {
-      var _this4 = this;
+      var _this5 = this;
       var kb = this.store;
       var documentString;
       return Promise.resolve().then(function () {
-        documentString = _this4.serialize(doc.value, data, contentType);
+        documentString = _this5.serialize(doc.value, data, contentType);
         return kb.fetcher.webOperation('PUT', doc.value, {
           contentType: contentType,
           body: documentString
@@ -48102,7 +48155,6 @@ function findAgent(uri, kb) {
       obj: (0, _rdflib.sym)(uri.slice(0, -1))
     }; // Fix a URI where the drag and drop system has added a spurious slash
   }
-
   if (ns.vcard('WebID').uri in types) return {
     pred: 'agent',
     obj: obj
@@ -48113,7 +48165,6 @@ function findAgent(uri, kb) {
       obj: obj
     }; // @@ note vcard membership not RDFs
   }
-
   if (obj.sameTerm(ns.foaf('Agent')) || obj.sameTerm(ns.acl('AuthenticatedAgent')) ||
   // AuthenticatedAgent
   obj.sameTerm(ns.rdf('Resource')) || obj.sameTerm(ns.owl('Thing'))) {
@@ -48503,7 +48554,6 @@ function readACL(doc, aclDoc) {
       });
     });
   });
-
   return ac;
   function getDefaultsFallback(kb, ns) {
     return kb.each(undefined, ns.acl('default'), doc).concat(kb.each(undefined, ns.acl('defaultForNew'), doc));
@@ -48841,7 +48891,6 @@ function getACLorDefault(doc, callbackFunction) {
         if (!defaults.length) {
           return tryParent(uri); // Keep searching
         }
-
         var defaultHolder = kb.sym(uri);
         return callbackFunction(true, false, doc, aclDoc, defaultHolder, defaultACLDoc);
       });
@@ -49839,7 +49888,7 @@ var ChatChannel = exports.ChatChannel = /*#__PURE__*/function () {
   */
   (0, _createClass2["default"])(ChatChannel, [{
     key: "createMessage",
-    value: function () {
+    value: (function () {
       var _createMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(text) {
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -49860,9 +49909,10 @@ var ChatChannel = exports.ChatChannel = /*#__PURE__*/function () {
       as a replacement for an existing one.
       The old one iis left, and the two are linked
     */
+    )
   }, {
     key: "updateMessage",
-    value: function () {
+    value: (function () {
       var _updateMessage = (0, _asyncToGenerator2["default"])(function (text) {
         var _this = this;
         var oldMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -49960,9 +50010,10 @@ var ChatChannel = exports.ChatChannel = /*#__PURE__*/function () {
     * Wee add a new version of the message,m witha deletion flag (deletion date)
     * so that the deletion can be revoked by adding another non-deleted update
     */
+    )
   }, {
     key: "deleteMessage",
-    value: function () {
+    value: (function () {
       var _deleteMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(message) {
         return _regenerator["default"].wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -49978,7 +50029,7 @@ var ChatChannel = exports.ChatChannel = /*#__PURE__*/function () {
         return _deleteMessage.apply(this, arguments);
       }
       return deleteMessage;
-    }()
+    }())
   }]);
   return ChatChannel;
 }(); // class ChatChannel
@@ -50683,7 +50734,6 @@ function _infiniteMessageArea() {
                     if (freeze) {
                       div.scrollTop = scrollTop; // while adding below keep same things in view
                     }
-
                     if (fixScroll) fixScroll();
                     if (!done) {
                       _context10.next = 31;
@@ -50964,7 +51014,6 @@ function _infiniteMessageArea() {
               } else {
                 messageTable.appendChild(tr); // not newestFirst
               }
-
               messageTable.inputRow = tr;
             }
 
@@ -51004,7 +51053,6 @@ function _infiniteMessageArea() {
                 messageTable.appendChild(scrollBackbuttonTR); //  newestFirst
               }
             }
-
             var sts = _solidLogic.store.statementsMatching(null, ns.wf('message'), null, chatDocument);
             if (!live && sts.length === 0) {
               // not todays
@@ -51142,7 +51190,6 @@ function _infiniteMessageArea() {
             if ((0, _chatLogic.isDeleted)(latest) && !options.showDeletedMessages) {
               return; // ignore deleted messaged -- @@ could also leave a placeholder
             }
-
             insertMessageIntoTable(channelObject, messageTable, message, messageTable.fresh, options, userContext); // fresh from elsewhere
           };
           syncMessages = function _syncMessages(about, messageTable) {
@@ -51203,7 +51250,6 @@ function _infiniteMessageArea() {
           /* Add the live message block with entry field for today
            */
           // Body of main function
-
           options = options || {};
           options.authorDateOnLeft = false; // @@ make a user optiosn
           newestFirst = options.newestFirst === '1' || options.newestFirst === true; // hack for now
@@ -51527,9 +51573,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; } /**  UI code for individual messages: display them, edit them
-                                                                                                                                                                                     *
-                                                                                                                                                                                     * @packageDocumentation
-                                                                                                                                                                                     */ /* global $rdf */
+ *
+ * @packageDocumentation
+ */ /* global $rdf */
 var dom = window.document;
 var messageBodyStyle = style.messageBodyStyle;
 var label = utils.label;
@@ -51565,7 +51611,6 @@ var anchor = function anchor(text, term) {
     a.addEventListener('click', widgets.openHrefInOutlineMode, true);
     a.setAttribute('style', 'color: #3B5998; text-decoration: none; '); // font-weight: bold
   }
-
   a.textContent = text;
   return a;
 };
@@ -51822,7 +51867,6 @@ function renderMessageEditor(channelObject, messageTable, userContext, options,
                   oldRow.style.backgroundColor = '#fee';
                   oldRow.style.visibility = 'hidden'; // @@ FIX THIS AND REMOVE FROM DOM INSTEAD
                 }
-
                 messageEditor.parentNode.removeChild(messageEditor); // no longer need editor
               } else {
                 if (fromMainField) {
@@ -51836,7 +51880,6 @@ function renderMessageEditor(channelObject, messageTable, userContext, options,
               }
               // await channelObject.div.refresh() // Add new day if nec  @@ add back
             };
-
             // const me = authn.currentUser() // Must be logged on or wuld have got login button
             if (fromMainField) {
               field.setAttribute('style', messageBodyStyle + 'color: #bbb;'); // pendingedit
@@ -52053,7 +52096,6 @@ function renderMessageEditor(channelObject, messageTable, userContext, options,
     sortDate = '9999-01-01T00:00:00Z'; // ISO format for field sort
     // text = ''
   }
-
   var messageEditor = dom.createElement('tr');
   var lhs = dom.createElement('td');
   var middle = dom.createElement('td');
@@ -52130,6 +52172,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // import * as pad from '../pad'
 // pull in first avoid cross-refs
 // import * as style from '../style'
+
 var dom = window.document;
 
 // THE UNUSED ICONS are here as reminders for possible future functionality
@@ -52633,7 +52676,6 @@ function newThingUI(createContext, dataBrowserContext, thePanes) {
       iconArray[i].setAttribute('style', st); // eg 'background-color: #ccc;'
     }
   }
-
   function selectTool(icon) {
     styleTheIcons('display: none;'); // 'background-color: #ccc;'
     icon.setAttribute('style', iconStyle + 'background-color: yellow;');
@@ -52688,7 +52730,6 @@ function newThingUI(createContext, dataBrowserContext, thePanes) {
               // selectUI.parentNode.removeChild(selectUI) // Clean up
               // selectUIParent.removeChild(selectUI) // Clean up
             }
-
             selectNewTool(); // toggle star to plain and menu vanish again
           })["catch"](function (err) {
             complain(err);
@@ -53998,29 +54039,29 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; } /* eslint-disable camelcase */ /**
-                                                                                                                                                                                                                    * Signing in, signing up, profile and preferences reloading
-                                                                                                                                                                                                                    * Type index management
-                                                                                                                                                                                                                    *
-                                                                                                                                                                                                                    * 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
-                                                                                                                                                                                                                    */ // eslint-disable-next-line camelcase
+ * Signing in, signing up, profile and preferences reloading
+ * Type index management
+ *
+ * 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
+ */ // eslint-disable-next-line camelcase
 var store = _solidLogic.solidLogicSingleton.store;
 var _solidLogicSingleton$ = _solidLogic.solidLogicSingleton.profile,
   loadPreferences = _solidLogicSingleton$.loadPreferences,
@@ -54058,7 +54099,6 @@ function ensureLoggedIn(context) {
         _solidLogic.authn.saveUser(webIdUri, context);
         resolve(context); // always pass growing context
       });
-
       context.div.appendChild(box);
     });
   });
@@ -54389,6 +54429,15 @@ function renderScopeHeadingRow(context, store, scope) {
 function registrationList(_x9, _x10) {
   return _registrationList.apply(this, arguments);
 } // registrationList
+/**
+ * Bootstrapping identity
+ * (Called by `loginStatusBox()`)
+ *
+ * @param dom
+ * @param setUserCallback
+ *
+ * @returns
+ */
 function _registrationList() {
   _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;
@@ -54520,23 +54569,10 @@ function _registrationList() {
   }));
   return _registrationList.apply(this, arguments);
 }
-function getDefaultSignInButtonStyle() {
-  return 'padding: 1em; border-radius:0.5em; font-size: 100%;';
-}
-
-/**
- * Bootstrapping identity
- * (Called by `loginStatusBox()`)
- *
- * @param dom
- * @param setUserCallback
- *
- * @returns
- */
 function signInOrSignUpBox(dom, setUserCallback) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   options = options || {};
-  var signInButtonStyle = options.buttonStyle || getDefaultSignInButtonStyle();
+  var signInButtonStyle = options.buttonStyle || style.signInAndUpButtonStyle;
   var box = dom.createElement('div');
   var magicClassName = 'SolidSignInOrSignUpBox';
   debug.log('widgets.signInOrSignUpBox');
@@ -54549,7 +54585,7 @@ function signInOrSignUpBox(dom, setUserCallback) {
   box.appendChild(signInPopUpButton);
   signInPopUpButton.setAttribute('type', 'button');
   signInPopUpButton.setAttribute('value', 'Log in');
-  signInPopUpButton.setAttribute('style', "".concat(signInButtonStyle, "background-color: #eef;").concat(style.headerBannerLoginInput));
+  signInPopUpButton.setAttribute('style', "".concat(signInButtonStyle).concat(style.headerBannerLoginInput) + style.signUpBackground);
   _solidLogic.authSession.onLogin(function () {
     var me = _solidLogic.authn.currentUser();
     // const sessionInfo = authSession.info
@@ -54590,7 +54626,7 @@ function signInOrSignUpBox(dom, setUserCallback) {
   box.appendChild(signupButton);
   signupButton.setAttribute('type', 'button');
   signupButton.setAttribute('value', 'Sign Up for Solid');
-  signupButton.setAttribute('style', "".concat(signInButtonStyle, "background-color: #efe;").concat(style.headerBannerLoginInput));
+  signupButton.setAttribute('style', "".concat(signInButtonStyle).concat(style.headerBannerLoginInput) + style.signInBackground);
   signupButton.addEventListener('click', function (_event) {
     var signupMgr = new _signup.Signup();
     signupMgr.signup().then(function (uri) {
@@ -54758,7 +54794,7 @@ function loginStatusBox(dom) {
     });
   }
   function logoutButton(me, options) {
-    var signInButtonStyle = options.buttonStyle || getDefaultSignInButtonStyle();
+    var signInButtonStyle = options.buttonStyle || style.signInAndUpButtonStyle;
     var logoutLabel = 'WebID logout';
     if (me) {
       var nick = _solidLogic.solidLogicSingleton.store.any(me, ns.foaf('nick')) || _solidLogic.solidLogicSingleton.store.any(me, ns.foaf('name'));
@@ -54770,7 +54806,7 @@ function loginStatusBox(dom) {
     // signOutButton.className = 'WebIDCancelButton'
     signOutButton.setAttribute('type', 'button');
     signOutButton.setAttribute('value', logoutLabel);
-    signOutButton.setAttribute('style', "".concat(signInButtonStyle, "background-color: #eee;"));
+    signOutButton.setAttribute('style', "".concat(signInButtonStyle));
     signOutButton.addEventListener('click', logoutButtonHandler, false);
     return signOutButton;
   }
@@ -55327,10 +55363,8 @@ function matrixForQuery(dom, query, vx, vy, vvalue, options, whenDone) {
         return matrix.insertBefore(tr, ele); // return the tr
       }
     }
-
     return matrix.appendChild(tr); // return the tr
   };
-
   var columnNumberFor = function columnNumberFor(x1) {
     var xNT = x1.toNT(); // xNT is a NT string
     var col = null;
@@ -55507,21 +55541,21 @@ var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime
 var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
 var debug = _interopRequireWildcard(__webpack_require__(/*! ../debug */ "./node_modules/solid-ui/lib/debug.js"));
 var _iconBase = __webpack_require__(/*! ../iconBase */ "./node_modules/solid-ui/lib/iconBase.js");
+var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./node_modules/solid-ui/lib/style.js"));
 var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./node_modules/solid-ui/lib/widgets/index.js"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-/// /////////////////////////////////////////////
 //
 //   Media input widget
 //
 //
 // Workflow:
-// The HTML5 functionality (on mobille) is to prompt for either
-// a realtime camera capture , OR a selection from images already ont the device
+// The HTML5 functionality (on mobile) is to prompt for either
+// a realtime camera capture, OR a selection from images already on the device
 // (eg camera roll).
 //
-// The solid alternative is to either take a phtoto
-// or access cemra roll (etc) OR to access solid cloud storage of favorite photo almbums.
+// The solid alternative is to either take a photo
+// or access camera roll (etc) OR to access solid cloud storage of favorite photo albums.
 // (Especially latest taken ones)
 //
 
@@ -55530,10 +55564,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var cameraIcon = _iconBase.icons.iconBase + 'noun_Camera_1618446_000000.svg'; // Get it from github
 var retakeIcon = _iconBase.icons.iconBase + 'noun_479395.svg'; // Get it from github
 
-var canvasWidth = '640';
-var canvasHeight = '480';
-var controlStyle = "border-radius: 0.5em; margin: 0.8em; width: ".concat(canvasWidth, "; height:").concat(canvasHeight, ";");
-// const controlStyle = 'border-radius: 0.5em; margin: 0.8em; width: 320; height:240;'
 var contentType = 'image/png';
 
 /** A control to capture a picture using camera
@@ -55578,7 +55608,7 @@ function cameraCaptureControl(dom, store, getImageDoc, doneCallback) {
     player = main.appendChild(dom.createElement('video'));
     player.setAttribute('controls', '1');
     player.setAttribute('autoplay', '1');
-    player.setAttribute('style', controlStyle);
+    player.setAttribute('style', style.controlStyle);
     if (!navigator.mediaDevices) {
       throw new Error('navigator.mediaDevices not available');
     }
@@ -55596,13 +55626,12 @@ function cameraCaptureControl(dom, store, getImageDoc, doneCallback) {
     main.removeChild(canvas);
     displayPlayer(); // Make new one as old one is stuck black
   }
-
   function grabCanvas() {
     // Draw the video frame to the canvas.
     canvas = dom.createElement('canvas');
-    canvas.setAttribute('width', canvasWidth);
-    canvas.setAttribute('height', canvasHeight);
-    canvas.setAttribute('style', controlStyle);
+    canvas.setAttribute('width', style.canvasWidth);
+    canvas.setAttribute('height', style.canvasHeight);
+    canvas.setAttribute('style', style.controlStyle);
     main.appendChild(canvas);
     var context = canvas.getContext('2d');
     context.drawImage(player, 0, 0, canvas.width, canvas.height);
@@ -55616,13 +55645,11 @@ function cameraCaptureControl(dom, store, getImageDoc, doneCallback) {
       // alert(msg)
     }, contentType); // toBlob
   }
-
   function reviewImage() {
     sendButton.style.visibility = 'visible';
     retakeButton.style.visibility = 'visible';
     shutterButton.style.visibility = 'collapse'; // Hide for now
   }
-
   function stopVideo() {
     if (player && player.srcObject) {
       player.srcObject.getVideoTracks().forEach(function (track) {
@@ -55659,9 +55686,9 @@ function cameraCaptureControl(dom, store, getImageDoc, doneCallback) {
  * @param {IndexedForumla} store - The quadstore to store data in
  * @param {fuunction} getImageDoc - returns NN of the image file to be created
  * @param {function<Node>} doneCallback - called with the image taken
- * @returns {DomElement} - A div element with the buton in it
+ * @returns {DomElement} - A div element with the button in it
  *
- * This expacts the buttton to a large control when it is pressed
+ * This expands the button to a large control when it is pressed
  */
 
 function cameraButton(dom, store, getImageDoc, doneCallback) {
@@ -55760,7 +55787,6 @@ function messageArea(dom, kb, subject, messageStore, options) {
       a.addEventListener('click', UI.widgets.openHrefInOutlineMode, true);
       a.setAttribute('style', 'color: #3B5998; text-decoration: none; '); // font-weight: bold
     }
-
     a.textContent = text;
     return a;
   };
@@ -55929,7 +55955,6 @@ function messageArea(dom, kb, subject, messageStore, options) {
     };
     renderMessage(bindings, true); // fresh from elsewhere
   };
-
   var renderMessage = function renderMessage(bindings, fresh) {
     var creator = bindings['?creator'];
     var message = bindings['?msg'];
@@ -56003,7 +56028,6 @@ function messageArea(dom, kb, subject, messageStore, options) {
   } else {
     messageTable.appendChild(tr); // not newestFirst
   }
-
   var query;
   // Do this with a live query to pull in messages from web
   if (options.query) {
@@ -56023,7 +56047,6 @@ function messageArea(dom, kb, subject, messageStore, options) {
   function doneQuery() {
     messageTable.fresh = true; // any new are fresh and so will be greenish
   }
-
   kb.query(query, renderMessage, undefined, doneQuery);
   div.refresh = function () {
     syncMessages(subject, messageTable);
@@ -56099,10 +56122,10 @@ Object.defineProperty(exports, "recordParticipation", ({
     return _participation.recordParticipation;
   }
 }));
-Object.defineProperty(exports, "renderPartipants", ({
+Object.defineProperty(exports, "renderParticipants", ({
   enumerable: true,
   get: function get() {
-    return _participation.renderPartipants;
+    return _participation.renderParticipants;
   }
 }));
 exports.xmlEncode = xmlEncode;
@@ -56120,14 +56143,15 @@ var _widgets = __webpack_require__(/*! ./widgets */ "./node_modules/solid-ui/lib
 var _utils = __webpack_require__(/*! ./utils */ "./node_modules/solid-ui/lib/utils/index.js");
 var _debug = __webpack_require__(/*! ./debug */ "./node_modules/solid-ui/lib/debug.js");
 var _solidLogic = __webpack_require__(/*! solid-logic */ "./node_modules/solid-logic/lib/index.js");
+var style = _interopRequireWildcard(__webpack_require__(/*! ./style */ "./node_modules/solid-ui/lib/style.js"));
 var _participation = __webpack_require__(/*! ./participation */ "./node_modules/solid-ui/lib/participation.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** **************
-                                                                                                                                                                                                                                                                                                                                           *   Notepad Widget
-                                                                                                                                                                                                                                                                                                                                           */ /** @module pad
-                                                                                                                                                                                                                                                                                                                                               */
+ *   Notepad Widget
+ */ /** @module pad
+ */
 var store = _solidLogic.solidLogicSingleton.store;
 var PAD = (0, _rdflib.Namespace)('http://www.w3.org/ns/pim/pad#');
 /**
@@ -56187,7 +56211,7 @@ function lightColorHash(author) {
 /**  notepad
  *
  * @param {HTMLDocument} dom - the web page of the browser
- * @param {NamedNode} padDoc - the document into which the particpation should be shown
+ * @param {NamedNode} padDoc - the document in which the participation should be shown
  * @param {NamedNode} subject - the thing in which participation is happening
  * @param {NamedNode} me - person who is logged into the pod
  * @param {notepadOptions} options - the options that can be passed in consist of statusArea, exists
@@ -56200,7 +56224,7 @@ function notepad(dom, padDoc, subject, me, options) {
   if (me && !me.uri) throw new Error('UI.pad.notepad:  Invalid userid');
   var updater = store.updater;
   var PAD = (0, _rdflib.Namespace)('http://www.w3.org/ns/pim/pad#');
-  table.setAttribute('style', 'padding: 1em; overflow: auto; resize: horizontal; min-width: 40em;');
+  table.setAttribute('style', style.notepadStyle);
   var upstreamStatus = null;
   var downstreamStatus = null;
   if (options.statusArea) {
@@ -56209,10 +56233,10 @@ function notepad(dom, padDoc, subject, me, options) {
     upstreamStatus = tr.appendChild(dom.createElement('td'));
     downstreamStatus = tr.appendChild(dom.createElement('td'));
     if (upstreamStatus) {
-      upstreamStatus.setAttribute('style', 'width:50%');
+      upstreamStatus.setAttribute('style', style.upstreamStatus);
     }
     if (downstreamStatus) {
-      downstreamStatus.setAttribute('style', 'width:50%');
+      downstreamStatus.setAttribute('style', style.downstreamStatus);
     }
   }
   /* @@ TODO want to look into this, it seems upstream should be a boolean and default to false ?
@@ -56235,9 +56259,9 @@ function notepad(dom, padDoc, subject, me, options) {
   var setPartStyle = function setPartStyle(part, colors, pending) {
     var chunk = part.subject;
     colors = colors || '';
-    var baseStyle = 'font-size: 100%; font-family: monospace; width: 100%; border: none; white-space: pre-wrap;';
-    var headingCore = 'font-family: sans-serif; font-weight: bold;  border: none;';
-    var headingStyle = ['font-size: 110%;  padding-top: 0.5em; padding-bottom: 0.5em; width: 100%;', 'font-size: 120%; padding-top: 1em; padding-bottom: 1em; width: 100%;', 'font-size: 150%; padding-top: 1em; padding-bottom: 1em; width: 100%;'];
+    var baseStyle = style.baseStyle;
+    var headingCore = style.headingCore;
+    var headingStyle = style.headingStyle;
     var author = kb.any(chunk, ns.dc('author'));
     if (!colors && author) {
       // Hash the user webid for now -- later allow user selection!
@@ -56249,9 +56273,9 @@ function notepad(dom, padDoc, subject, me, options) {
     // and when the indent is stored as a Number itself, not in an object.
     var indent = kb.any(chunk, PAD('indent'));
     indent = indent ? indent.value : 0;
-    var style = indent >= 0 ? baseStyle + 'text-indent: ' + indent * 3 + 'em;' : headingCore + headingStyle[-1 - indent];
+    var localStyle = indent >= 0 ? baseStyle + 'text-indent: ' + indent * 3 + 'em;' : headingCore + headingStyle[-1 - indent];
     // ? baseStyle + 'padding-left: ' + (indent * 3) + 'em;'
-    part.setAttribute('style', style + colors);
+    part.setAttribute('style', localStyle + colors);
   };
   var removePart = function removePart(part) {
     var chunk = part.subject;
@@ -56330,29 +56354,6 @@ function notepad(dom, padDoc, subject, me, options) {
       }
     });
   };
-
-  // Use this sort of code to split the line when return pressed in the middle @@
-  /*
-  function doGetCaretPosition doGetCaretPosition (oField) {
-    var iCaretPos = 0
-        // IE Support
-    if (document.selection) {
-            // Set focus on the element to avoid IE bug
-      oField.focus()
-            // To get cursor position, get empty selection range
-      var oSel = document.selection.createRange()
-            // Move selection start to 0 position
-      oSel.moveStart('character', -oField.value.length)
-            // The caret position is selection length
-      iCaretPos = oSel.text.length
-        // Firefox suppor
-    } else if (oField.selectionStart || oField.selectionStart === '0') {
-      iCaretPos = oField.selectionStart
-    }
-        // Return results
-    return (iCaretPos)
-  }
-  */
   var addListeners = function addListeners(part, chunk) {
     part.addEventListener('keydown', function (event) {
       if (!updater) {
@@ -56393,9 +56394,9 @@ function notepad(dom, padDoc, subject, me, options) {
                 // contents need to be sent again
                 part.state = 4; // delete me
                 return;
-              case 3: // being deleted already
+              case 3: // already being deleted
               case 4:
-                // already deleme state
+                // already deleted state
                 return;
               case undefined:
               case 0:
@@ -56510,7 +56511,6 @@ function notepad(dom, padDoc, subject, me, options) {
         }
       });
     };
-
     part.addEventListener('input', function inputChangeListener(_event) {
       // debug.log("input changed "+part.value);
       setPartStyle(part, undefined, true); // grey out - not synced
@@ -56696,8 +56696,6 @@ function notepad(dom, padDoc, subject, me, options) {
       }
       return;
     }
-    // var last = kb.the(undefined, PAD('previous'), subject)
-    // var chunk = first //  = kb.the(subject, PAD('next'));
     var row;
 
     // First see which of the logical chunks have existing physical manifestations
@@ -56759,7 +56757,7 @@ function notepad(dom, padDoc, subject, me, options) {
     (0, _debug.log)('    reloaded OK');
     clearStatus();
     if (!consistencyCheck()) {
-      complain('CONSITENCY CHECK FAILED');
+      complain('CONSISTENCY CHECK FAILED');
     } else {
       refreshTree(table);
     }
@@ -56769,7 +56767,6 @@ function notepad(dom, padDoc, subject, me, options) {
       (0, _debug.log)('   Already reloading - stop');
       return; // once only needed
     }
-
     reloading = true;
     var retryTimeout = 1000; // ms
     var tryReload = function tryReload() {
@@ -56826,7 +56823,6 @@ function notepad(dom, padDoc, subject, me, options) {
       }
     });
   }
-
   return table;
 }
 
@@ -56926,7 +56922,7 @@ Object.defineProperty(exports, "__esModule", ({
 exports.manageParticipation = manageParticipation;
 exports.participationObject = participationObject;
 exports.recordParticipation = recordParticipation;
-exports.renderPartipants = renderPartipants;
+exports.renderParticipants = renderParticipants;
 var _createClass2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"));
 var _classCallCheck2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"));
 var _assertThisInitialized2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/assertThisInitialized */ "./node_modules/@babel/runtime/helpers/assertThisInitialized.js"));
@@ -56942,6 +56938,8 @@ var ns = _interopRequireWildcard(__webpack_require__(/*! ./ns */ "./node_modules
 var _widgets = __webpack_require__(/*! ./widgets */ "./node_modules/solid-ui/lib/widgets/index.js");
 var _utils = __webpack_require__(/*! ./utils */ "./node_modules/solid-ui/lib/utils/index.js");
 var _pad = __webpack_require__(/*! ./pad */ "./node_modules/solid-ui/lib/pad.js");
+var style = _interopRequireWildcard(__webpack_require__(/*! ./style */ "./node_modules/solid-ui/lib/style.js"));
+var _styleConstants = _interopRequireDefault(__webpack_require__(/*! ./styleConstants */ "./node_modules/solid-ui/lib/styleConstants.js"));
 var _solidLogic = __webpack_require__(/*! solid-logic */ "./node_modules/solid-logic/lib/index.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -56949,8 +56947,8 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* Manage a UI for the particpation of a person in any thing
-                                                                                                                                                                                                                                                                                                                                          */ // import { currentUser } from './authn/authn'
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* Manage a UI for the participation of a person in any thing
+*/ // import { currentUser } from './authn/authn'
 var ParticipationTableElement = /*#__PURE__*/function (_HTMLTableElement) {
   (0, _inherits2["default"])(ParticipationTableElement, _HTMLTableElement);
   var _super = _createSuper(ParticipationTableElement);
@@ -56975,11 +56973,11 @@ var store = _solidLogic.solidLogicSingleton.store;
 *  @param {NamedNode} unused1/document - the document to render (this argument is no longer used, but left in for backwards compatibility)
 *  @param {NamedNode} subject - the thing in which the participation is happening
 *  @param {NamedNode} unused2/me - user that is logged into the pod (this argument is no longer used, but left in for backwards compatibility)
-*  @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable these are used by the personTR button
+*  @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable; these are used by the personTR button
 */
-function renderPartipants(dom, table, unused1, subject, unused2, options) {
-  table.setAttribute('style', 'margin: 0.8em;');
-  var newRowForParticpation = function newRowForParticpation(parp) {
+function renderParticipants(dom, table, unused1, subject, unused2, options) {
+  table.setAttribute('style', style.participantsStyle);
+  var newRowForParticipation = function newRowForParticipation(parp) {
     var person = store.any(parp, ns.wf('participant'));
     var tr;
     if (!person) {
@@ -56987,13 +56985,14 @@ function renderPartipants(dom, table, unused1, subject, unused2, options) {
       tr.textContent = '???'; // Don't crash - invalid part'n entry
       return tr;
     }
-    var bg = store.anyValue(parp, ns.ui('backgroundColor')) || 'white';
+    var bg = store.anyValue(parp, ns.ui('backgroundColor')) || _styleConstants["default"].participationDefaultBackground;
     var block = dom.createElement('div');
-    block.setAttribute('style', 'height: 1.5em; width: 1.5em; margin: 0.3em; border 0.01em solid #888; background-color: ' + bg);
+    block.setAttribute('style', style.participantsBlock);
+    block.style.backgroundColor = bg;
     tr = (0, _widgets.personTR)(dom, null, person, options);
     table.appendChild(tr);
     var td = dom.createElement('td');
-    td.setAttribute('style', 'vertical-align: middle;');
+    td.setAttribute('style', style.personTableTD);
     td.appendChild(block);
     tr.insertBefore(td, tr.firstChild);
     return tr;
@@ -57007,16 +57006,16 @@ function renderPartipants(dom, table, unused1, subject, unused2, options) {
     var participations = parps.map(function (p) {
       return p[1];
     });
-    (0, _utils.syncTableToArray)(table, participations, newRowForParticpation);
+    (0, _utils.syncTableToArray)(table, participations, newRowForParticipation);
   };
   table.refresh = syncTable;
   syncTable();
   return table;
 }
 
-/** Record, or find old, Particpation object
+/** Record, or find old, Participation object
  *
- * A particpaption object is a place to record things specifically about
+ * A participation object is a place to record things specifically about
  * subject and the user, such as preferences, start of membership, etc
  * @param {NamedNode} subject - the thing in which the participation is happening
  * @param {NamedNode} document -  where to record the data
@@ -57051,20 +57050,19 @@ function participationObject(subject, padDoc, me) {
       }
       candidates.sort(); // Pick the earliest
       // @@ Possibly, for extra credit, delete the others, if we have write access
-      debug.warn('Multiple particpation objects, picking earliest, in ' + padDoc);
+      debug.warn('Multiple participation objects, picking earliest, in ' + padDoc);
       resolve(candidates[0][1]);
       // throw new Error('Multiple records of your participation')
     }
-
     if (parps.length) {
       // If I am not already recorded
-      resolve(parps[0]); // returns the particpation object
+      resolve(parps[0]); // returns the participation object
     } else {
       var _participation2 = (0, _widgets.newThing)(padDoc);
       var ins = [(0, _rdflib.st)(subject, ns.wf('participation'), _participation2, padDoc), (0, _rdflib.st)(_participation2, ns.wf('participant'), me, padDoc), (0, _rdflib.st)(_participation2, ns.cal('dtstart'), new Date(), padDoc), (0, _rdflib.st)(_participation2, ns.ui('backgroundColor'), (0, _pad.lightColorHash)(me), padDoc)];
       store.updater.update([], ins, function (uri, ok, errorMessage) {
         if (!ok) {
-          reject(new Error('Error recording your partipation: ' + errorMessage));
+          reject(new Error('Error recording your participation: ' + errorMessage));
         } else {
           resolve(_participation2);
         }
@@ -57077,7 +57075,7 @@ function participationObject(subject, padDoc, me) {
 /** Record my participation and display participants
  *
  * @param {NamedNode} subject - the thing in which participation is happening
- * @param {NamedNode} padDoc - the document into which the particpation should be recorded
+ * @param {NamedNode} padDoc - the document into which the participation should be recorded
  * @param {DOMNode} refreshable - a DOM element whose refresh() is to be called if the change works
  *
  */
@@ -57093,24 +57091,22 @@ function recordParticipation(subject, padDoc, refreshable) {
   }
   if (parps.length) {
     // If I am not already recorded
-    return parps[0]; // returns the particpation object
+    return parps[0]; // returns the participation object
   } else {
     if (!store.updater.editable(padDoc)) {
-      debug.log('Not recording participation, as no write acesss as ' + me + ' to ' + padDoc);
+      debug.log('Not recording participation, as no write access as ' + me + ' to ' + padDoc);
       return null;
     }
     var participation = (0, _widgets.newThing)(padDoc);
     var ins = [(0, _rdflib.st)(subject, ns.wf('participation'), participation, padDoc), (0, _rdflib.st)(participation, ns.wf('participant'), me, padDoc), (0, _rdflib.st)(participation, ns.cal('dtstart'), new Date(), padDoc), (0, _rdflib.st)(participation, ns.ui('backgroundColor'), (0, _pad.lightColorHash)(me), padDoc)];
     store.updater.update([], ins, function (uri, ok, errorMessage) {
       if (!ok) {
-        throw new Error('Error recording your partipation: ' + errorMessage);
+        throw new Error('Error recording your participation: ' + errorMessage);
       }
       if (refreshable && refreshable.refresh) {
         refreshable.refresh();
       }
-      // UI.pad.renderPartipants(dom, table, padDoc, subject, me, options)
     });
-
     return participation;
   }
 }
@@ -57119,23 +57115,22 @@ function recordParticipation(subject, padDoc, refreshable) {
 *
 *   @param {Document} dom  - the web page loaded into the browser
 *   @param {HTMLDivElement} container - the container element where the participants should be displayed
-*   @param {NamedNode} document - the document into which the particpation should be shown
+*   @param {NamedNode} document - the document into which the participation should be shown
 *   @param {NamedNode} subject - the thing in which participation is happening
 *   @param {NamedNode} me - the logged in user
-*   @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable these are used by the personTR button
+*   @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable; these are used by the personTR button
 *
 */
 function manageParticipation(dom, container, padDoc, subject, me, options) {
   var table = dom.createElement('table');
   container.appendChild(table);
-  renderPartipants(dom, table, padDoc, subject, me, options);
+  renderParticipants(dom, table, padDoc, subject, me, options);
   var _participation;
   try {
     _participation = recordParticipation(subject, padDoc, table);
   } catch (e) {
-    container.appendChild((0, _widgets.errorMessageBlock)(dom, 'Error recording your partipation: ' + e)); // Clean up?
+    container.appendChild((0, _widgets.errorMessageBlock)(dom, 'Error recording your participation: ' + e)); // Clean up?
   }
-
   return table;
 }
 //# sourceMappingURL=participation.js.map
@@ -57505,41 +57500,34 @@ Signup.prototype.signup = function signup(signupUrl) {
 /*!********************************************!*\
   !*** ./node_modules/solid-ui/lib/style.js ***!
   \********************************************/
-/***/ ((module, exports) => {
+/***/ ((module, exports, __webpack_require__) => {
 
 "use strict";
 
 
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.style = void 0;
+var _styleConstants = _interopRequireDefault(__webpack_require__(/*! ./styleConstants */ "./node_modules/solid-ui/lib/styleConstants.js"));
 // Common readable consistent stylesheet
 // to avoid using style sheets which are document-global
 // and make programmable style toggling with selection, drag over, etc easier
-
 // These must all end with semicolon so they can be appended to.
 
-var formBorderColor = '#888888'; // Mid-grey
-var lowProfileLinkColor = '#3B5998'; // Grey-blue, e.g., for field labels linking to ontology
-var formFieldNameBoxWidth = '8em'; // The fixed amount to get form fields to line up
-// The latter we put in when switching awy from using tables.  Getting allignment between
-// fields in different groups though is hard problem.
-
 var style = exports.style = {
   // styleModule
 
   checkboxStyle: 'color: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
-  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
+  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em;',
   fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
-  formSelectSTyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.4em;',
-  textInputStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.4em;',
+  formSelectStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
+  textInputStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
   textInputStyleUneditable:
   // Color difference only
-  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.4em;',
-  textInputSize: 20,
-  // Default text input size in characters roughly
-  buttonStyle: 'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;',
+  'background-color: white; padding: 0.5em;  border: .05em solid white; border-radius:0.2em; font-size: 100%; margin:0.4em;',
+  buttonStyle: 'background-color: #fff; padding: 0.7em;  border: .01em solid white; border-radius:0.2em; font-size: 100%; margin: 0.3em;',
   // 'background-color: #eef;
   commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',
   iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
@@ -57547,20 +57535,18 @@ var style = exports.style = {
   classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;',
   // combine with buttonStyle
   confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;',
-  tabBorderRadius: '0.2em',
   messageBodyStyle: 'white-space: pre-wrap; width: 99%; font-size:100%; border: 0.07em solid #eee; border-radius:0.2em; padding: .3em 0.5em; margin: 0.1em;',
   pendingeditModifier: 'color: #bbb;',
-  highlightColor: '#7C4DFF',
-  // Solid lavendar https://design.inrupt.com/atomic-core/?cat=Core
-
   // Contacts
   personaBarStyle: 'width: 100%; height: 4em; background-color: #eee; vertical-align: middle;',
   searchInputStyle: 'border: 0.1em solid #444; border-radius: 0.2em; width: 100%; font-size: 100%; padding: 0.1em 0.6em; margin 0.2em;',
   autocompleteRowStyle: 'border: 0.2em solid straw;',
   // Login buttons
-  signInButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;',
+  signInAndUpButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;',
   // was 0.5em radius
-
+  headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important;',
+  signUpBackground: 'background-color: #eef;',
+  signInBackground: 'background-color: #efe;',
   // Forms
   heading1Style: 'font-size: 180%; font-weight: bold; color: #888888; padding: 0.5em; margin: 0.7em 0.0m;',
   // originally was brown; now grey
@@ -57571,87 +57557,104 @@ var style = exports.style = {
   heading4Style: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em; margin: 0.7em 0.0em;',
   // Lowest level used by default in small things
 
-  formBorderColor: formBorderColor,
-  // originally was brown; now grey
-  formHeadingColor: '#888888',
-  // originally was brown; now grey
   formHeadingStyle: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em;  margin: 0.7em 0.0em;',
   // originally was brown; now grey
   formTextInput: 'font-size: 100%; margin: 0.1em; padding: 0.1em;',
   // originally used this
-  formGroupStyle: ["padding-left: 0em; border: 0.0em solid ".concat(formBorderColor, "; border-radius: 0.2em;"), // weight 0
-  "padding-left: 2em; border: 0.05em solid ".concat(formBorderColor, "; border-radius: 0.2em;"), "padding-left: 2em; border: 0.1em solid ".concat(formBorderColor, "; border-radius: 0.2em;"), "padding-left: 2em; border: 0.2em solid ".concat(formBorderColor, "; border-radius: 0.2em;") // @@ pink
+  formGroupStyle: ["padding-left: 0em; border: 0.0em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;"), // weight 0
+  "padding-left: 2em; border: 0.05em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;"), "padding-left: 2em; border: 0.1em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;"), "padding-left: 2em; border: 0.2em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;") // @@ pink
   ],
-  formFieldLabelStyle: "'color: ".concat(lowProfileLinkColor, "; text-decoration: none;'"),
-  formFieldNameBoxWidth: formFieldNameBoxWidth,
-  formFieldNameBoxStyle: "padding: 0.3em; vertical-align: middle; width:".concat(formFieldNameBoxWidth, ";"),
-  textInputBackgroundColor: '#eef',
-  textInputBackgroundColorUneditable: '#fff',
-  textInputColor: '#000',
-  textInputColorPending: '#888',
+  formFieldLabelStyle: "color: ".concat(_styleConstants["default"].lowProfileLinkColor, "; text-decoration: none;"),
+  formFieldNameBoxStyle: "padding: 0.3em; vertical-align: middle; width:".concat(_styleConstants["default"].formFieldNameBoxWidth, ";"),
   multilineTextInputStyle: 'font-size:100%; white-space: pre-wrap; background-color: #eef;' + ' border: 0.07em solid gray; padding: 1em 0.5em; margin: 1em 1em;',
   // Buttons
   renderAsDivStyle: 'display: flex; align-items: center; justify-content: space-between; height: 2.5em; padding: 1em;',
   imageDivStyle: 'width:2.5em; padding:0.5em; height: 2.5em;',
   linkDivStyle: 'width:2em; padding:0.5em; height: 4em;',
   // ACL
-  aclControlBoxContainer: 'margin: 1em',
-  aclControlBoxHeader: 'font-size: 120%; margin: 0 0 1rem',
-  aclControlBoxStatus: 'display: none; margin: 1rem 0',
-  aclControlBoxStatusRevealed: 'display: block',
-  aclGroupContent: 'maxWidth: 650',
-  accessGroupList: 'display: grid; grid-template-columns: 1fr; margin: 1em; width: 100%',
-  accessGroupListItem: 'display: grid; grid-template-columns: 100px auto 30%',
-  defaultsController: 'display: flex',
-  defaultsControllerNotice: 'color: #888; flexGrow: 1; fontSize: 80%',
-  bigButton: 'background-color: white; border: 0.1em solid #888; border-radius: 0.3em; max-width: 50%; padding-bottom: 1em; padding-top: 1em',
-  group: 'color: #888',
-  group1: 'color: green',
-  group2: 'color: #cc0',
-  group3: 'color: orange',
-  group5: 'color: red',
-  group9: 'color: blue',
-  group13: 'color: purple',
-  trustedAppAddApplicationsTable: 'background-color: #eee',
-  trustedAppCancelButton: 'float: right',
-  trustedAppControllerI: 'border-color: orange; borderRadius: 1em; borderWidth: 0.1em',
-  temporaryStatusInit: 'background: green',
-  temporaryStatusEnd: 'background: transparent; transition: background 5s linear',
+  aclControlBoxContainer: 'margin: 1em;',
+  aclControlBoxHeader: 'font-size: 120%; margin: 0 0 1rem;',
+  aclControlBoxStatus: 'display: none; margin: 1rem 0;',
+  aclControlBoxStatusRevealed: 'display: block;',
+  aclGroupContent: 'maxWidth: 650;',
+  accessGroupList: 'display: grid; grid-template-columns: 1fr; margin: 1em; width: 100%;',
+  accessGroupListItem: 'display: grid; grid-template-columns: 100px auto 30%;',
+  defaultsController: 'display: flex;',
+  defaultsControllerNotice: 'color: #888; flexGrow: 1; fontSize: 80%;',
+  bigButton: 'background-color: white; border: 0.1em solid #888; border-radius: 0.3em; max-width: 50%; padding-bottom: 1em; padding-top: 1em;',
+  group: 'color: #888;',
+  group1: 'color: green;',
+  group2: 'color: #cc0;',
+  group3: 'color: orange;',
+  group5: 'color: red;',
+  group9: 'color: blue;',
+  group13: 'color: purple;',
+  trustedAppAddApplicationsTable: 'background-color: #eee;',
+  trustedAppCancelButton: 'float: right;',
+  trustedAppControllerI: 'border-color: orange; border-radius: 1em; border-width: 0.1em;',
+  temporaryStatusInit: 'background: green;',
+  temporaryStatusEnd: 'background: transparent; transition: background 5s linear;',
   // header
-  headerUserMenuLink: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none',
-  headerUserMenuLinkHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
-  headerUserMenuTrigger: 'background: none; border: 0; cursor: pointer; width: 60px; height: 60px',
-  headerUserMenuTriggerImg: 'border-radius: 50%; height: 56px; width: 28px !important',
-  headerUserMenuButton: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%',
-  headerUserMenuButtonHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
-  headerUserMenuList: 'list-style: none; margin: 0; padding: 0',
-  headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true',
-  headerUserMenuNavigationMenu: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: true',
-  headerUserMenuNavigationMenuNotDisplayed: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: none',
-  headerUserMenuListItem: 'border-bottom: solid 1px #000000',
-  headerUserMenuPhoto: 'border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px',
-  headerBanner: 'box-shadow: 0px 1px 4px #000000; display: flex; justify-content: space-between; padding: 0 1.5em; margin-bottom: 4px',
-  headerBannerLink: 'display: block',
-  headerBannerRightMenu: 'display: flex',
-  headerBannerLogin: 'margin-left: auto',
-  allChildrenVisible: 'display:true',
-  headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important',
-  headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto',
-  headerBannerHelpMenu: 'border-left: solid 1px #000000; margin.left: auto',
-  headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important',
+  headerUserMenuLink: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none;',
+  headerUserMenuLinkHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);',
+  headerUserMenuTrigger: 'background: none; border: 0; cursor: pointer; width: 60px; height: 60px;',
+  headerUserMenuTriggerImg: 'border-radius: 50%; height: 56px; width: 28px !important;',
+  headerUserMenuButton: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%;',
+  headerUserMenuButtonHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);',
+  headerUserMenuList: 'list-style: none; margin: 0; padding: 0;',
+  headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true;',
+  headerUserMenuNavigationMenu: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: true;',
+  headerUserMenuNavigationMenuNotDisplayed: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: none;',
+  headerUserMenuListItem: 'border-bottom: solid 1px #000000;',
+  headerUserMenuPhoto: 'border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px;',
+  headerBanner: 'box-shadow: 0px 1px 4px #000000; display: flex; justify-content: space-between; padding: 0 1.5em; margin-bottom: 4px;',
+  headerBannerLink: 'display: block;',
+  headerBannerRightMenu: 'display: flex;',
+  headerBannerLogin: 'margin-left: auto;',
+  allChildrenVisible: 'display:true;',
+  headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto;',
+  headerBannerHelpMenu: 'border-left: solid 1px #000000; margin-left: auto;',
+  headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important;',
   // may just be 65px round($icon-size * 352 / 322);
 
   // footer
-  footer: 'border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em',
+  footer: 'border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em;',
   // buttons
-  primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  primaryButtonHover: 'background-color: #9f7dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
-  primaryButtonNoBorder: 'background-color: #ffffff; color: #7c4dff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  primaryButtonNoBorderHover: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
-  secondaryButton: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  secondaryButtonHover: 'background-color: #37cde6; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
-  secondaryButtonNoBorder: 'background-color: #ffffff; color: #01c9ea; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  secondaryButtonNoBorderHover: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out'
+  primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  primaryButtonHover: 'background-color: #9f7dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
+  primaryButtonNoBorder: 'background-color: #ffffff; color: #7c4dff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  primaryButtonNoBorderHover: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
+  secondaryButton: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  secondaryButtonHover: 'background-color: #37cde6; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
+  secondaryButtonNoBorder: 'background-color: #ffffff; color: #01c9ea; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  secondaryButtonNoBorderHover: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
+  // media
+  controlStyle: "border-radius: 0.5em; margin: 0.8em; width:".concat(_styleConstants["default"].mediaModuleCanvasWidth, "; height:").concat(_styleConstants["default"].mediaModuleCanvasHeight, ";"),
+  // dragAndDrop
+  dragEvent: 'background-color: #ccc; border: 0.25em dashed black; border-radius: 0.3em;',
+  dropEvent: 'background-color: white; border: 0em solid black;',
+  restoreStyle: 'background-color: white;',
+  // errors
+  errorCancelButton: 'width: 2em; height: 2em; align: right;',
+  errorMessageBlockStyle: 'margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; color:black;',
+  // pad
+  notepadStyle: 'padding: 1em; overflow: auto; resize: horizontal; min-width: 40em;',
+  upstreamStatus: 'width: 50%;',
+  downstreamStatus: 'width: 50%;',
+  baseStyle: 'font-size: 100%; font-family: monospace; width: 100%; border: none; white-space: pre-wrap;',
+  headingCore: 'font-family: sans-serif; font-weight: bold;  border: none;',
+  headingStyle: ['font-size: 110%; padding-top: 0.5em; padding-bottom: 0.5em; width: 100%;', 'font-size: 120%; padding-top: 1em; padding-bottom: 1em; width: 100%;', 'font-size: 150%; padding-top: 1em; padding-bottom: 1em; width: 100%;'],
+  // participation
+  participantsStyle: 'margin: 0.8em;',
+  participantsBlock: 'height: 1.5em; width: 1.5em; margin: 0.3em; border 0.01em solid #888;',
+  personTableTD: 'vertical-align: middle;',
+  // tabs
+  tabsNavElement: 'margin: 0;',
+  tabsRootElement: 'display: flex; height: 100%; width: 100%;',
+  tabsMainElement: 'margin: 0; width:100%; height: 100%;',
+  tabContainer: 'list-style-type: none; display: flex; height: 100%; width: 100%; margin: 0; padding: 0;',
+  makeNewSlot: 'background: none; border: none; font: inherit; cursor: pointer;',
+  ellipsis: 'position: absolute; right: 0; bottom: 0; width: 20%; background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;'
 };
 style.setStyle = function setStyle(ele, styleName) {
   ele.style = style[styleName];
@@ -57661,6 +57664,51 @@ module.exports = style; // @@ No way to do this in ESM
 
 /***/ }),
 
+/***/ "./node_modules/solid-ui/lib/styleConstants.js":
+/*!*****************************************************!*\
+  !*** ./node_modules/solid-ui/lib/styleConstants.js ***!
+  \*****************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+var _default = exports["default"] = {
+  highlightColor: '#7C4DFF',
+  // Solid lavender https://design.inrupt.com/atomic-core/?cat=Core
+
+  formBorderColor: '#888888',
+  // Mid-grey
+  formHeadingColor: '#888888',
+  // originally was brown; now grey
+  lowProfileLinkColor: '#3B5998',
+  // Grey-blue, e.g., for field labels linking to ontology
+  formFieldNameBoxWidth: '8em',
+  // The fixed amount to get form fields to line up
+  // We put in the latter when switching away from using tables.  However, getting
+  // alignment between fields in different groups is a hard problem.
+
+  mediaModuleCanvasWidth: '640',
+  mediaModuleCanvasHeight: '480',
+  textInputSize: 20,
+  // Rough default text input size, in characters
+  tabBorderRadius: '0.2em',
+  textInputBackgroundColor: '#eef',
+  textInputBackgroundColorUneditable: '#fff',
+  textInputColor: '#000',
+  textInputColorPending: '#888',
+  defaultErrorBackgroundColor: '#fee',
+  participationDefaultBackground: 'white',
+  basicMaxLength: '4096'
+};
+//# sourceMappingURL=styleConstants.js.map
+
+/***/ }),
+
 /***/ "./node_modules/solid-ui/lib/style_multiSelect.js":
 /*!********************************************************!*\
   !*** ./node_modules/solid-ui/lib/style_multiSelect.js ***!
@@ -58171,7 +58219,6 @@ function renderTableViewPane(doc, options) {
         if (this.predicate.sameTerm(ns.rdf('type')) && this.superClass) {
           return utils.label(this.superClass, true); // do initial cap
         }
-
         return utils.label(this.predicate);
       } else if (this.variable) {
         return this.variable.toString();
@@ -59006,7 +59053,6 @@ function renderTableViewPane(doc, options) {
           }
         }
       }
-
       tr.appendChild(td);
     }
 
@@ -59113,7 +59159,6 @@ function renderTableViewPane(doc, options) {
       // oldStyle = rows[i]._htmlRow.getAttribute('style') || ''
       // rows[i]._htmlRow.style.background = '#ffe'; //setAttribute('style', ' background-color: #ffe;')// yellow
     }
-
     var onResult = function onResult(values) {
       if (!query.running) {
         return;
@@ -59183,7 +59228,6 @@ function renderTableViewPane(doc, options) {
       }
       if (options.onDone) options.onDone(resultDiv); // return div makes testing easier
     };
-
     kb.query(query, onResult, undefined, onDone);
   }
 
@@ -59331,6 +59375,7 @@ function renderTableViewPane(doc, options) {
 
 
 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
 }));
@@ -59347,7 +59392,10 @@ var _wrapNativeSuper2 = _interopRequireDefault(__webpack_require__(/*! @babel/ru
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
 var _widgets = __webpack_require__(/*! ./widgets */ "./node_modules/solid-ui/lib/widgets/index.js");
 var _utils = __webpack_require__(/*! ./utils */ "./node_modules/solid-ui/lib/utils/index.js");
+var style = _interopRequireWildcard(__webpack_require__(/*! ./style */ "./node_modules/solid-ui/lib/style.js"));
 var _solidLogic = __webpack_require__(/*! solid-logic */ "./node_modules/solid-logic/lib/index.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /**
@@ -59529,11 +59577,12 @@ var TabElement = /*#__PURE__*/function (_HTMLElement3) {
  *
  * @param options
  */
+var tabsDefaultBackgroundColor = '#ddddcc';
 function tabWidget(options) {
   var subject = options.subject;
   var dom = options.dom || document;
   var orientation = parseInt(options.orientation || '0');
-  var backgroundColor = options.backgroundColor || '#ddddcc';
+  var backgroundColor = options.backgroundColor || tabsDefaultBackgroundColor;
   var flipped = orientation & 2;
   var vertical = orientation & 1;
   var onClose = options.onClose;
@@ -59544,13 +59593,15 @@ function tabWidget(options) {
   var bodyMainStyle = "flex: 2; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ".concat(selectedColor, "; padding: 1em;");
   var rootElement = dom.createElement('div'); // 20200117a
 
-  rootElement.setAttribute('style', 'display: flex; height: 100%; width: 100%; flex-direction: ' + (vertical ? 'row' : 'column') + (flipped ? '-reverse;' : ';'));
+  rootElement.setAttribute('style', style.tabsRootElement);
+  rootElement.style.flexDirection = (vertical ? 'row' : 'column') + (flipped ? '-reverse' : '');
   var navElement = rootElement.appendChild(dom.createElement('nav'));
-  navElement.setAttribute('style', 'margin: 0;');
+  navElement.setAttribute('style', style.tabsNavElement);
   var mainElement = rootElement.appendChild(dom.createElement('main'));
-  mainElement.setAttribute('style', 'margin: 0; width:100%; height: 100%;'); // override tabbedtab.css
+  mainElement.setAttribute('style', style.tabsMainElement); // override tabbedtab.css
   var tabContainer = navElement.appendChild(dom.createElement('ul'));
-  tabContainer.setAttribute('style', "\n    list-style-type: none;\n    display: flex;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    flex-direction: ".concat(vertical ? 'column' : 'row', "\n  "));
+  tabContainer.setAttribute('style', style.tabContainer);
+  tabContainer.style.flexDirection = "".concat(vertical ? 'column' : 'row');
   var tabElement = 'li';
   var bodyContainer = mainElement;
   rootElement.tabContainer = tabContainer;
@@ -59570,7 +59621,7 @@ function tabWidget(options) {
   rootElement.refresh = orderedSync;
   orderedSync();
   if (!options.startEmpty && tabContainer.children.length && options.selectedTab) {
-    var selectedTab0 = Array.from(tabContainer.children) // Version left for compatability with ??
+    var selectedTab0 = Array.from(tabContainer.children) // Version left for compatibility with ??
     .map(function (tab) {
       return tab.firstChild;
     }).find(function (tab) {
@@ -59593,7 +59644,6 @@ function tabWidget(options) {
   } else if (!options.startEmpty) {
     tabContainer.children[0].firstChild.click(); // Open first tab
   }
-
   return rootElement;
   function addCancelButton(tabContainer) {
     if (tabContainer.dataset.onCloseSet) {
@@ -59624,7 +59674,7 @@ function tabWidget(options) {
     ele.setAttribute('style', unselectedStyle);
     ele.subject = item;
     var div = ele.appendChild(dom.createElement('button'));
-    div.setAttribute('style', 'background: none; border: none; font: inherit; cursor: pointer');
+    div.setAttribute('style', style.makeNewSlot);
     div.onclick = function () {
       resetTabStyle();
       resetBodyStyle();
@@ -59641,7 +59691,7 @@ function tabWidget(options) {
     if (options.renderTabSettings && ele.subject) {
       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;');
+      ellipsis.setAttribute('style', style.ellipsis);
       ellipsis.onclick = function () {
         resetTabStyle();
         resetBodyStyle();
@@ -59689,7 +59739,6 @@ function tabWidget(options) {
     if (!differ && items.length === tabContainer.children.length) {
       return; // The two just match in order: a case to optimize for
     }
-
     for (right = tabContainer.children.length - 1; right >= 0; right--) {
       slot = tabContainer.children[right];
       j = right - tabContainer.children.length + items.length;
@@ -60076,7 +60125,6 @@ function hashColor(who) {
   };
   return '#' + (hash(who) & 0xffffff | 0xc0c0c0).toString(16); // c0c0c0 or 808080 forces pale
 }
-
 function genUuid() {
   // http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -60151,7 +60199,6 @@ function syncTableToArrayReOrdered(table, things, createNewRow) {
     var row = table.children[i];
     elementMap[row.subject.toNT()] = row; // More sophisticaed would be to have a bag of duplicates
   }
-
   for (var g = 0; g < things.length; g++) {
     var thing = things[g];
     if (g >= table.children.length) {
@@ -60255,7 +60302,6 @@ function getAbout(kb, target) {
       //            if (level.tagName=='TR') return undefined//this is to prevent literals passing through
     }
   }
-
   UI.log.debug('getAbout: No about found');
   return undefined;
 }
@@ -60363,7 +60409,6 @@ function shortName(uri) {
   for (var _ns in this.prefixes) {
     namespaces[this.prefixes[_ns]] = _ns; // reverse index
   }
-
   var pok;
   var canUse = function canUse(pp) {
     // if (!__Serializer.prototype.validPrefix.test(pp)) return false; // bad format
@@ -60413,11 +60458,9 @@ function ontologyLabel(term) {
       return term.uri + '?!'; // strange should have # or /
     }
   }
-
   for (var _ns2 in UI.ns) {
     namespaces[UI.ns[_ns2]] = _ns2; // reverse index
   }
-
   try {
     return namespaces[s];
   } catch (e) {}
@@ -60436,7 +60479,6 @@ function ontologyLabel(term) {
     }
   }
 }
-
 function labelWithOntology(x, initialCap) {
   var t = _solidLogic.store.findTypeURIs(x);
   if (t[UI.ns.rdf('Predicate').uri] || t[UI.ns.rdfs('Class').uri]) {
@@ -60927,28 +60969,28 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports.versionInfo = void 0;
 var versionInfo = exports.versionInfo = {
-  buildTime: '2023-11-01T10:00:12Z',
-  commit: '408c1ba06cc43e7d1a006287fe11b9938f8b7b7b',
+  buildTime: '2023-12-04T10:26:57Z',
+  commit: 'd6736c162182daa4832d184fd6d2cb74ae6f44e3',
   npmInfo: {
-    'solid-ui': '2.4.29',
+    'solid-ui': '2.4.32',
     npm: '8.19.4',
-    node: '16.14.0',
-    v8: '9.4.146.24-node.20',
+    node: '16.20.2',
+    v8: '9.4.146.26-node.26',
     uv: '1.43.0',
     zlib: '1.2.11',
     brotli: '1.0.9',
-    ares: '1.18.1',
+    ares: '1.19.1',
     modules: '93',
-    nghttp2: '1.45.1',
+    nghttp2: '1.47.0',
     napi: '8',
-    llhttp: '6.0.4',
-    openssl: '1.1.1m+quic',
-    cldr: '40.0',
-    icu: '70.1',
-    tz: '2021a3',
+    llhttp: '6.0.11',
+    openssl: '1.1.1v+quic',
+    cldr: '41.0',
+    icu: '71.1',
+    tz: '2022f',
     unicode: '14.0',
-    ngtcp2: '0.1.0-DEV',
-    nghttp3: '0.1.0-DEV'
+    ngtcp2: '0.8.1',
+    nghttp3: '0.7.0'
   }
 };
 //# sourceMappingURL=versionInfo.js.map
@@ -61029,7 +61071,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * UI Widgets such as buttons
  * @packageDocumentation
  */
+
 /* global alert */
+
 var iconBase = _iconBase.icons.iconBase;
 var cancelIconURI = iconBase + 'noun_1180156.svg'; // black X
 var checkIconURI = iconBase + 'noun_1180158.svg'; // green checkmark; Continue
@@ -61257,7 +61301,6 @@ function findImageFromURI(x) {
       // message: is apple bug-- should be mid:
       return iconDir + 'noun_480183.svg'; // envelope  noun_567486
     }
-
     if (x.uri.startsWith('mailto:')) {
       return iconDir + 'noun_567486.svg'; // mailbox - an email desitination
     }
@@ -61268,7 +61311,6 @@ function findImageFromURI(x) {
       // todo: pick up a possible favicon for the web page itself from a link
       // was: return iconDir + 'noun_681601.svg' // document - under solid assumptions
     }
-
     return null;
   }
   return iconDir + 'noun_10636_grey.svg'; // Grey Circle -  some thing
@@ -61297,7 +61339,6 @@ function findImage(thing) {
   if (thing.sameTerm(ns.foaf('Agent')) || thing.sameTerm(ns.rdf('Resource'))) {
     return iconDir + 'noun_98053.svg'; // Globe
   }
-
   var image = kb.any(thing, ns.sioc('avatar')) || kb.any(thing, ns.foaf('img')) || kb.any(thing, ns.vcard('logo')) || kb.any(thing, ns.vcard('hasPhoto')) || kb.any(thing, ns.vcard('photo')) || kb.any(thing, ns.foaf('depiction'));
   return image ? image.uri : null;
 }
@@ -61338,7 +61379,6 @@ function trySetImage(element, thing, iconForClassMap) {
       return false; // maybe we can do better
     }
   }
-
   element.setAttribute('src', iconBase + 'noun_10636_grey.svg'); // Grey Circle -  some thing
   return false; // we can do better
 }
@@ -61381,7 +61421,6 @@ function faviconOrDefault(dom, x) {
   };
   image.setAttribute('src', iconBase + (isOrigin(x) ? 'noun_15177.svg' : 'noun_681601.svg') // App symbol vs document
   );
-
   if (x.uri && x.uri.startsWith('https:') && x.uri.indexOf('#') < 0) {
     var res = dom.createElement('object'); // favico with a fallback of a default image if no favicon
     res.setAttribute('data', tempSite(x) + 'favicon.ico');
@@ -61561,7 +61600,6 @@ function cancelButton(dom, handler) {
     // sigh for tsc
     b.firstChild.style.opacity = '0.3'; // Black X is too harsh: current language is grey X
   }
-
   return b;
 }
 
@@ -61649,7 +61687,6 @@ function renderAsRow(dom, pred, obj, options) {
   } else {
     setName(td2, obj); // This is async
   }
-
   if (options.deleteFunction) {
     deleteButtonWithCheck(dom, td3, options.noun || 'one', options.deleteFunction);
   }
@@ -61838,7 +61875,6 @@ function attachmentList(dom, subject, div) {
   var attachmentTable = attachmentRight.appendChild(dom.createElement('table'));
   attachmentTable.appendChild(dom.createElement('tr')) // attachmentTableTop
   ;
-
   attachmentOuter.refresh = refresh; // Participate in downstream changes
   // ;(attachmentTable as any).refresh = refresh   <- outer should be best?
 
@@ -61859,7 +61895,6 @@ function attachmentList(dom, subject, div) {
       // buttonDiv.children[1].style =  buttonStyle
     }
   }
-
   return attachmentOuter;
 }
 
@@ -62162,7 +62197,6 @@ function twoLineTransaction(dom, x) {
     if (!y) failed += '@@ No value for ' + p + '! ';
     return y ? utils.escapeForXML(y.value) : '?'; // @@@@
   };
-
   var box = dom.createElement('table');
   box.innerHTML = "\n      <tr>\n      <td colspan=\"2\"> ".concat(enc('payee'), "</td>\n      < /tr>\n      < tr >\n      <td>").concat(enc('date').slice(0, 10), "</td>\n      <td style = \"text-align: right;\">").concat(enc('amount'), "</td>\n      </tr>");
   if (failed) {
@@ -62362,39 +62396,34 @@ exports.makeDropTarget = makeDropTarget;
 exports.uploadFiles = uploadFiles;
 var debug = _interopRequireWildcard(__webpack_require__(/*! ../debug */ "./node_modules/solid-ui/lib/debug.js"));
 var mime = _interopRequireWildcard(__webpack_require__(/*! mime-types */ "./node_modules/mime-types/index.js"));
+var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./node_modules/solid-ui/lib/style.js"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 /* Drag and drop common functionality
  *
  * It is easy to make something draggable, or to make it a drag target!
- * Just call the functions below.  In a solid world, any part of the UI which
- * represent one thing which has a UR, should be made draggable using makeDraggable
+ * Just call the functions below. In a Solid world, any part of the UI which
+ * represents one thing which has a URI, should be made draggable using makeDraggable.
  * Any list of things should typically allow you to drag new members of the list
  * onto it.
- * The file upload function uploadFiles is provided as often of someone drags a file from the computer
- * desktop, you may want to upload it into the pod.
+ * The file upload function, uploadFiles, is provided as often as someone drags a file from the computer
+ * desktop. You may want to upload it into the pod.
  */
 
 /* global FileReader alert */
 
 function makeDropTarget(ele, droppedURIHandler, droppedFileHandler) {
   var dragoverListener = function dragoverListener(e) {
-    e.preventDefault(); // Neeed else drop does not work [sic]
+    e.preventDefault(); // Need this; otherwise, drop does not work.
     e.dataTransfer.dropEffect = 'copy';
   };
   var dragenterListener = function dragenterListener(e) {
     debug.log('dragenter event dropEffect: ' + e.dataTransfer.dropEffect);
-    if (this.style) {
+    if (this.localStyle) {
       //  necessary not sure when
       if (!this.savedStyle) {
-        this.savedStyle = {};
-        this.savedStyle.border = this.style.border;
-        this.savedStyle.backgroundColor = this.style.backgroundColor;
-        this.savedStyle.borderRadius = this.style.borderRadius;
+        this.savedStyle = style.dragEvent;
       }
-      this.style.backgroundColor = '#ccc';
-      this.style.border = '0.25em dashed black';
-      this.style.borderRadius = '0.3em';
     }
     e.dataTransfer.dropEffect = 'link';
     debug.log('dragenter event dropEffect 2: ' + e.dataTransfer.dropEffect);
@@ -62402,12 +62431,9 @@ function makeDropTarget(ele, droppedURIHandler, droppedFileHandler) {
   var dragleaveListener = function dragleaveListener(e) {
     debug.log('dragleave event dropEffect: ' + e.dataTransfer.dropEffect);
     if (this.savedStyle) {
-      this.style.border = this.savedStyle.border;
-      this.style.backgroundColor = this.savedStyle.backgroundColor;
-      this.style.borderRadius = this.savedStyle.borderRadius;
+      this.localStyle = this.savedStyle;
     } else {
-      this.style.backgroundColor = 'white';
-      this.style.border = '0em solid black';
+      this.localStyle = style.dropEvent;
     }
   };
   var dropListener = function dropListener(e) {
@@ -62446,7 +62472,7 @@ function makeDropTarget(ele, droppedURIHandler, droppedFileHandler) {
     if (uris) {
       droppedURIHandler(uris);
     }
-    this.style.backgroundColor = 'white'; // restore style
+    this.localStyle = style.restoreStyle; // restore style
     return false;
   }; // dropListener
 
@@ -62534,7 +62560,6 @@ function uploadFiles(fetcher, files, fileBase, imageBase, successHandler) {
             // console.log('MIME TYPE MISMATCH: ' + mime.lookup(theFile.name) + ': adding extension: ' + suffix)
           }
         }
-
         var folderName = theFile.type.startsWith('image/') ? imageBase || fileBase : fileBase;
         var destURI = folderName + (folderName.endsWith('/') ? '' : '/') + encodeURIComponent(theFile.name) + suffix;
         fetcher.webOperation('PUT', destURI, {
@@ -62568,11 +62593,17 @@ function uploadFiles(fetcher, files, fileBase, imageBase, successHandler) {
 /* provided dependency */ var console = __webpack_require__(/*! ./node_modules/console-browserify/index.js */ "./node_modules/console-browserify/index.js");
 
 
+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.errorMessageBlock = errorMessageBlock;
 var _widgets = __webpack_require__(/*! ../widgets */ "./node_modules/solid-ui/lib/widgets/index.js");
+var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./node_modules/solid-ui/lib/style.js"));
+var _styleConstants = _interopRequireDefault(__webpack_require__(/*! ../styleConstants */ "./node_modules/solid-ui/lib/styleConstants.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 /**
  * Create an error message block
  * @param dom The DOM on which dom.createElement will be called
@@ -62601,8 +62632,9 @@ function errorMessageBlock(dom, err, backgroundColor, err2) {
   }
   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;');
+  })).style = style.errorCancelButton;
+  div.setAttribute('style', style.errorMessageBlockStyle);
+  div.style.backgroundColor = backgroundColor || _styleConstants["default"].defaultErrorBackgroundColor;
   return div;
 }
 //# sourceMappingURL=error.js.map
@@ -62699,6 +62731,7 @@ var _error = __webpack_require__(/*! ./error */ "./node_modules/solid-ui/lib/wid
 var _basic = __webpack_require__(/*! ./forms/basic */ "./node_modules/solid-ui/lib/widgets/forms/basic.js");
 var _autocompleteField = __webpack_require__(/*! ./forms/autocomplete/autocompleteField */ "./node_modules/solid-ui/lib/widgets/forms/autocomplete/autocompleteField.js");
 var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./node_modules/solid-ui/lib/style.js"));
+var _styleConstants = _interopRequireDefault(__webpack_require__(/*! ../styleConstants */ "./node_modules/solid-ui/lib/styleConstants.js"));
 var _iconBase = __webpack_require__(/*! ../iconBase */ "./node_modules/solid-ui/lib/iconBase.js");
 var log = _interopRequireWildcard(__webpack_require__(/*! ../log */ "./node_modules/solid-ui/lib/log.js"));
 var ns = _interopRequireWildcard(__webpack_require__(/*! ../ns */ "./node_modules/solid-ui/lib/ns.js"));
@@ -62712,9 +62745,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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(_e2) { throw _e2; }, 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(_e3) { didErr = true; err = _e3; }, 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; } /*       F O R M S
-                                                                                                                                                                                     *
-                                                                                                                                                                                     *      A Vanilla Dom implementation of the form language
-                                                                                                                                                                                     */ /* eslint-disable multiline-ternary */ /* global alert */ // Note default export
+ *
+ *      A Vanilla Dom implementation of the form language
+ */ /* eslint-disable multiline-ternary */ /* global alert */ // Note default export
 var checkMarkCharacter = "\u2713";
 var cancelCharacter = "\u2715";
 var dashCharacter = '-';
@@ -62756,7 +62789,6 @@ function refreshOpionsSubfieldinGroup(dom, already, subject, dataDoc, callbackFu
     }
   }
 }
-
 _fieldFunction.field[ns.ui('Form').uri] = _fieldFunction.field[ns.ui('Group').uri] = function (dom, container, already, subject, form, dataDoc, callbackFunction) {
   var box = dom.createElement('div');
   var ui = ns.ui;
@@ -63297,7 +63329,6 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
       vals = reverse ? kb.each(null, property, subject, dataDoc) : kb.each(subject, property, null, dataDoc);
       vals.sort(); // achieve consistency on each refresh
     }
-
     utils.syncTableToArrayReOrdered(body, vals, renderItem);
   }
   body.refresh = refresh; // Allow live update
@@ -63387,7 +63418,7 @@ _fieldFunction.field[ns.ui('MultiLineTextField').uri] = function (dom, container
   box.style.display = 'flex';
   box.style.flexDirection = 'row';
   var left = box.appendChild(dom.createElement('div'));
-  left.style.width = style.formFieldNameBoxWidth;
+  left.style.width = _styleConstants["default"].formFieldNameBoxWidth;
   var right = box.appendChild(dom.createElement('div'));
   left.appendChild((0, _basic.fieldLabel)(dom, property, form));
   dataDoc = (0, _basic.fieldStore)(subject, property, dataDoc);
@@ -63546,7 +63577,6 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
   if (kb.any(form, ui('canMintNew'))) {
     opts.mint = '* Create new *'; // @@ could be better
   }
-
   var multiSelect = kb.any(form, ui('multiselect')); // Optional
   if (multiSelect) opts.multiSelect = true;
 
@@ -63812,9 +63842,8 @@ function promptForNew(dom, kb, subject, predicate, theClass, form, dataDoc, call
     log.debug('lists[0] is ' + lists[0]);
     form = lists[0]; // Pick any one
   }
-
   log.debug('form is ' + form);
-  box.setAttribute('style', "border: 0.05em solid ".concat(style.formBorderColor, "; color: ").concat(style.formBorderColor)); // @@color?
+  box.setAttribute('style', "border: 0.05em solid ".concat(_styleConstants["default"].formBorderColor, "; color: ").concat(_styleConstants["default"].formBorderColor)); // @@color?
   box.innerHTML = '<h3>New ' + utils.label(theClass) + '</h3>';
   var formFunction = (0, _fieldFunction.fieldFunction)(dom, form);
   var object = newThing(dataDoc);
@@ -63862,7 +63891,6 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
     // field.value = utils.label(predicate); // Was"enter a description here" @@ possibly: add prompt which disappears
     field.select(); // Select it ready for user input -- doesn't work
   }
-
   group.refresh = function () {
     var v = kb.any(subject, predicate, null, dataDoc);
     if (v && v.value !== field.value) {
@@ -63870,17 +63898,16 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
       // @@ this is the place to color the field from the user who chanaged it
     }
   };
-
   function saveChange(_e) {
     submit.disabled = true;
     submit.setAttribute('style', 'visibility: hidden; float: right;'); // Keep UI clean
     field.disabled = true;
-    field.style.color = style.textInputColorPending; // setAttribute('style', style + 'color: gray;') // pending
+    field.style.color = _styleConstants["default"].textInputColorPending;
     var ds = kb.statementsMatching(subject, predicate, null, dataDoc);
     var is = $rdf.st(subject, predicate, field.value, dataDoc);
     kb.updater.update(ds, is, function (uri, ok, body) {
       if (ok) {
-        field.style.color = style.textInputColor;
+        field.style.color = _styleConstants["default"].textInputColor;
         field.disabled = false;
       } else {
         group.appendChild((0, _error.errorMessageBlock)(dom, 'Error (while saving change to ' + dataDoc.uri + '): ' + body));
@@ -63909,7 +63936,7 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
     field.addEventListener('change', saveChange, true);
   } else {
     field.disabled = true; // @@ change color too
-    field.style.backgroundColor = style.textInputBackgroundColorUneditable;
+    field.style.backgroundColor = _styleConstants["default"].textInputBackgroundColorUneditable;
   }
   return group;
 }
@@ -63977,7 +64004,6 @@ function makeSelectForClassifierOptions(dom, kb, subject, predicate, possible, o
               }); // @@ if ok, need some form of refresh of the select for the new thing
             }
           });
-
           select.parentNode.appendChild(thisForm);
           newObject = thisForm.AJAR_subject;
         } else {
@@ -64034,7 +64060,7 @@ function makeSelectForClassifierOptions(dom, kb, subject, predicate, possible, o
     });
   };
   var select = dom.createElement('select');
-  select.setAttribute('style', style.formSelectSTyle);
+  select.setAttribute('style', style.formSelectStyle);
   if (options.multiple) select.setAttribute('multiple', 'true');
   select.currentURI = null;
   select.refresh = function () {
@@ -64047,7 +64073,6 @@ function makeSelectForClassifierOptions(dom, kb, subject, predicate, possible, o
     }
     select.disabled = false; // unlocked any conflict we had got into
   };
-
   for (var uri in uris) {
     var c = kb.sym(uri);
     var option = dom.createElement('option');
@@ -64056,7 +64081,6 @@ function makeSelectForClassifierOptions(dom, kb, subject, predicate, possible, o
     } else {
       option.appendChild(dom.createTextNode(utils.label(c, true))); // Init.
     }
-
     var backgroundColor = kb.any(c, kb.sym('http://www.w3.org/ns/ui#backgroundColor'));
     if (backgroundColor) {
       option.setAttribute('style', 'background-color: ' + backgroundColor.value + '; ');
@@ -64067,7 +64091,6 @@ function makeSelectForClassifierOptions(dom, kb, subject, predicate, possible, o
       select.currentURI = uri;
       // dump("Already in class: "+ uri+"\n")
     }
-
     select.appendChild(option);
   }
   if (editable && options.mint) {
@@ -64177,7 +64200,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
     });
   };
   var select = dom.createElement('select');
-  select.setAttribute('style', style.formSelectSTyle);
+  select.setAttribute('style', style.formSelectStyle);
   select.currentURI = null;
   select.refresh = function () {
     actual = getActual(); // refresh
@@ -64189,7 +64212,6 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
     }
     select.disabled = false; // unlocked any conflict we had got into
   };
-
   for (var uri in uris) {
     var c = kb.sym(uri);
     var option = dom.createElement('option');
@@ -64198,7 +64220,6 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
     } else {
       option.appendChild(dom.createTextNode(utils.label(c, true))); // Init.
     }
-
     var backgroundColor = kb.any(c, kb.sym('http://www.w3.org/ns/ui#backgroundColor'));
     if (backgroundColor) {
       option.setAttribute('style', 'background-color: ' + backgroundColor.value + '; ');
@@ -64209,7 +64230,6 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, options, da
       select.currentURI = uri;
       // dump("Already in class: "+ uri+"\n")
     }
-
     select.appendChild(option);
   }
   if (!select.currentURI) {
@@ -64307,10 +64327,8 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
       if (!x.why) {
         x.why = dataDoc; // be back-compaitible  with old code
       }
-
       return [x]; // one statements
     }
-
     if (x instanceof Array) return x;
     throw new Error('buildCheckboxForm: bad param ' + x);
   }
@@ -64376,7 +64394,6 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
       }
     });
   };
-
   input.addEventListener('click', boxHandler, false);
   return box;
 }
@@ -64463,7 +64480,7 @@ function makeSelectForChoice(dom, container, kb, subject, predicate, inputPossib
     select.refresh();
   };
   var select = dom.createElement('select');
-  select.setAttribute('style', style.formSelectSTyle);
+  select.setAttribute('style', style.formSelectStyle);
   select.setAttribute('id', 'formSelect');
   select.currentURI = null;
   for (var uri in optionsFromClassUIfrom) {
@@ -64490,13 +64507,11 @@ function makeSelectForChoice(dom, container, kb, subject, predicate, inputPossib
         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;
     });
@@ -64549,7 +64564,6 @@ function makeSelectForChoice(dom, container, kb, subject, predicate, inputPossib
               }); // @@ if ok, need some form of refresh of the select for the new thing
             }
           });
-
           select.parentNode.appendChild(thisForm);
           newObject = thisForm.AJAR_subject;
         } else {
@@ -64711,11 +64725,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; } /* The Autocomplete Control with decorations
-                                                                                                                                                                                    
-                                                                                                                                                                                    This control has the buttons which control the state between editing, viewing, searching, accepting
-                                                                                                                                                                                    and so on.  See the state diagram in the documentation.  The AUtocomplete Picker does the main work.
-                                                                                                                                                                                    
-                                                                                                                                                                                    */
+
+This control has the buttons which control the state between editing, viewing, searching, accepting
+and so on.  See the state diagram in the documentation.  The AUtocomplete Picker does the main work.
+
+*/
 // dbpediaParameters
 
 var WEBID_NOUN = 'Solid ID';
@@ -65226,7 +65240,6 @@ function autocompleteField(dom, container, already, subject, form, doc, callback
   }, function (err) {
     rhs.appendChild(widgets.errorMessageBlock(dom, "Error rendering autocomplete ".concat(form, ": ").concat(err), '#fee', err)); //
   });
-
   return box;
 }
 
@@ -65255,6 +65268,7 @@ var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime
 var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
 var debug = _interopRequireWildcard(__webpack_require__(/*! ../../../debug */ "./node_modules/solid-ui/lib/debug.js"));
 var style = _interopRequireWildcard(__webpack_require__(/*! ../../../style */ "./node_modules/solid-ui/lib/style.js"));
+var _styleConstants = _interopRequireDefault(__webpack_require__(/*! ../../../styleConstants */ "./node_modules/solid-ui/lib/styleConstants.js"));
 var widgets = _interopRequireWildcard(__webpack_require__(/*! ../../../widgets */ "./node_modules/solid-ui/lib/widgets/index.js"));
 var _solidLogic = __webpack_require__(/*! solid-logic */ "./node_modules/solid-logic/lib/index.js");
 var _publicData = __webpack_require__(/*! ./publicData */ "./node_modules/solid-ui/lib/widgets/forms/autocomplete/publicData.js");
@@ -65264,10 +65278,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; } /* Autocomplete Picker: Create and edit data using public data
-                                                                                                                                                                                    **
-                                                                                                                                                                                    ** As the data source is passed as a parameter, all kinds of APIa and query services can be used
-                                                                                                                                                                                    **
-                                                                                                                                                                                    */
+**
+** As the data source is passed as a parameter, all kinds of APIa and query services can be used
+**
+*/
 var AUTOCOMPLETE_THRESHOLD = 4; // don't check until this many characters typed
 var AUTOCOMPLETE_ROWS = 20; // 20?
 var AUTOCOMPLETE_ROWS_STRETCH = 40;
@@ -65318,14 +65332,12 @@ function _renderAutoComplete() {
             if (decoration.acceptButton) {
               setVisible(decoration.acceptButton, false); // hide until input complete
             }
-
             if (decoration.editButton) {
               setVisible(decoration.editButton, true);
             }
             if (decoration.cancelButton) {
               setVisible(decoration.cancelButton, false); // only allow cancel when there is something to cancel
             }
-
             inputEventHandlerLock = false;
             clearList();
           };
@@ -65409,7 +65421,6 @@ function _renderAutoComplete() {
                     if (loadedEnough && slimmed.length <= AUTOCOMPLETE_ROWS_STRETCH) {
                       numberOfRows = slimmed.length; // stretch if it means we get all items
                     }
-
                     allDisplayed = loadedEnough && slimmed.length <= numberOfRows;
                     debug.log(" Filter:\"".concat(filter, "\" lastBindings: ").concat(lastBindings.length, ", slimmed to ").concat(slimmed.length, "; rows: ").concat(numberOfRows, ", Enough? ").concat(loadedEnough, ", All displayed? ").concat(allDisplayed));
                     displayable = slimmed.slice(0, numberOfRows);
@@ -65657,7 +65668,7 @@ function _renderAutoComplete() {
           searchInput = cell.appendChild(dom.createElement('input'));
           searchInput.setAttribute('type', 'text');
           initialize();
-          size = acOptions.size || style.textInputSize || 20;
+          size = acOptions.size || _styleConstants["default"].textInputSize || 20;
           searchInput.setAttribute('size', size);
           searchInput.setAttribute('data-testid', 'autocomplete-input');
           searchInputStyle = style.textInputStyle ||
@@ -65972,7 +65983,6 @@ var escoParameters = exports.escoParameters = {
   // returnFormat: 'ESCO',
   // targetClass: {}
 };
-
 var dbpediaParameters = exports.dbpediaParameters = {
   label: 'DBPedia',
   logo: _solidLogic.store.sym('https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/DBpediaLogo.svg/263px-DBpediaLogo.svg.png'),
@@ -66018,7 +66028,6 @@ var wikidataIncomingClassMap = exports.wikidataIncomingClassMap = {
   // geographic location
   'http://www.wikidata.org/entity/Q167037': ns.schema('Corporation') // Corporation
 };
-
 var variableNameToPredicateMap = exports.variableNameToPredicateMap = {
   // allow other mappings to be added in theory hence var
   // wikidata:
@@ -66129,7 +66138,6 @@ function ESCOResultToBindings(json) {
       }
     }; // simulate SPARQL bindings
   });
-
   return bindings;
 }
 
@@ -66545,6 +66553,7 @@ function _getDbpediaDetails() {
 "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
@@ -66557,6 +66566,7 @@ var _rdflib = __webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index
 var _solidLogic = __webpack_require__(/*! solid-logic */ "./node_modules/solid-logic/lib/index.js");
 var ns = _interopRequireWildcard(__webpack_require__(/*! ../../ns */ "./node_modules/solid-ui/lib/ns.js"));
 var _style = __webpack_require__(/*! ../../style */ "./node_modules/solid-ui/lib/style.js");
+var _styleConstants = _interopRequireDefault(__webpack_require__(/*! ../../styleConstants */ "./node_modules/solid-ui/lib/styleConstants.js"));
 var _utils = __webpack_require__(/*! ../../utils */ "./node_modules/solid-ui/lib/utils/index.js");
 var _error = __webpack_require__(/*! ../error */ "./node_modules/solid-ui/lib/widgets/error.js");
 var _fieldFunction = __webpack_require__(/*! ./fieldFunction */ "./node_modules/solid-ui/lib/widgets/forms/fieldFunction.js");
@@ -66572,7 +66582,7 @@ function renderNameValuePair(dom, kb, box, form, label) {
   box.style.display = 'flex';
   box.style.flexDirection = 'row';
   var lhs = box.appendChild(dom.createElement('div'));
-  lhs.style.width = _style.formFieldNameBoxWidth;
+  lhs.style.width = _styleConstants["default"].formFieldNameBoxWidth;
   var rhs = box.appendChild(dom.createElement('div'));
   lhs.setAttribute('class', 'formFieldName');
   lhs.setAttribute('style', _style.formFieldNameBoxStyle);
@@ -66677,10 +66687,10 @@ function basicField(dom, container, already, subject, form, doc, callbackFunctio
   field.style = style;
   rhs.appendChild(field);
   field.setAttribute('type', params.type ? params.type : 'text');
-  var size = kb.anyJS(form, ns.ui('size')) || _style.textInputSize || 20;
+  var size = kb.anyJS(form, ns.ui('size')) || _styleConstants["default"].textInputSize || 20;
   field.setAttribute('size', size);
   var maxLength = kb.any(form, ns.ui('maxLength'));
-  field.setAttribute('maxLength', maxLength ? '' + maxLength : '4096');
+  field.setAttribute('maxLength', maxLength ? '' + maxLength : _styleConstants["default"].basicMaxLength);
   doc = doc || fieldStore(subject, property, doc);
   var obj = kb.any(subject, property, undefined, doc);
   if (!obj) {
@@ -66702,11 +66712,9 @@ function basicField(dom, container, already, subject, form, doc, callbackFunctio
     field.readOnly = true // was: disabled. readOnly is better
     ;
     field.style = _style.textInputStyleUneditable + paramStyle;
-    // backgroundColor = textInputBackgroundColorUneditable
     if (suppressEmptyUneditable && field.value === '') {
       box.style.display = 'none'; // clutter
     }
-
     return box;
   }
 
@@ -66890,63 +66898,63 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * field in questions, different values may be read
  * from here.
  */
-var fieldParams = exports.fieldParams = (_fieldParams = {}, (0, _defineProperty2["default"])(_fieldParams, ns.ui('ColorField').uri, {
+var fieldParams = exports.fieldParams = (_fieldParams = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_fieldParams, ns.ui('ColorField').uri, {
   size: 9,
   type: 'color',
   style: 'height: 3em;',
   // around 1.5em is padding
   dt: 'color',
   pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('DateField').uri, {
+}), ns.ui('DateField').uri, {
   size: 20,
   type: 'date',
   dt: 'date',
   pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?Z?\s*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('DateTimeField').uri, {
+}), ns.ui('DateTimeField').uri, {
   size: 20,
   type: 'datetime-local',
   // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime
   dt: 'dateTime',
   pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?(T[0-2][0-9]:[0-5][0-9](:[0-5][0-9])?)?Z?\s*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('TimeField').uri, {
+}), ns.ui('TimeField').uri, {
   size: 10,
   type: 'time',
   dt: 'time',
   pattern: /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('IntegerField').uri, {
+}), ns.ui('IntegerField').uri, {
   size: 12,
   style: 'text-align: right;',
   dt: 'integer',
   pattern: /^\s*-?[0-9]+\s*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('DecimalField').uri, {
+}), ns.ui('DecimalField').uri, {
   size: 12,
   style: 'text-align: right;',
   dt: 'decimal',
   pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('FloatField').uri, {
+}), ns.ui('FloatField').uri, {
   size: 12,
   style: 'text-align: right;',
   dt: 'float',
   pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('SingleLineTextField').uri, {}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('NamedNodeURIField').uri, {
+}), ns.ui('SingleLineTextField').uri, {}), ns.ui('NamedNodeURIField').uri, {
   namedNode: true
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('TextField').uri, {}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('PhoneField').uri, {
+}), ns.ui('TextField').uri, {}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_fieldParams, ns.ui('PhoneField').uri, {
   size: 20,
   uriPrefix: 'tel:',
   pattern: /^\+?[\d-]+[\d]*$/
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('EmailField').uri, {
+}), ns.ui('EmailField').uri, {
   size: 30,
   uriPrefix: 'mailto:',
   pattern: /^\s*.*@.*\..*\s*$/ // @@ Get the right regexp here
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('Group').uri, {
+}), ns.ui('Group').uri, {
   style: _style.formGroupStyle
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('Comment').uri, {
+}), ns.ui('Comment').uri, {
   element: 'p',
-  style: _style.commentStyle // was `padding: 0.1em 1.5em; color: ${formHeadingColor}; white-space: pre-wrap;`
-}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('Heading').uri, {
+  style: _style.commentStyle
+}), ns.ui('Heading').uri, {
   element: 'h3',
-  style: _style.formHeadingStyle // was: `font-size: 110%; font-weight: bold; color: ${formHeadingColor}; padding: 0.2em;`
-}), _fieldParams);
+  style: _style.formHeadingStyle
+}));
 //# sourceMappingURL=fieldParams.js.map
 
 /***/ }),
@@ -68270,7 +68278,6 @@ function patch(url, _ref3) {
   //     }
   //   })
 }
-
 function indexes(book) {
   return {
     // bookIndex: book,