profile-pane 3.1.3 → 3.1.4

package/lib/profile-pane.js

@@ -222,6 +222,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
   min-width: 0;
 }
 
+/* Ensure prompt inputs stretch to fit their container */
+.add-friend-button-container input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .qrCodeSection {
   color: var(--color-text-secondary);
   font-size: 1em;
@@ -243,7 +249,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
   padding: 16px;
   background: white;
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.profileCard {\n  /* Component container */\n}\n\n.image {\n  width: 160px;\n  height: 160px;\n  border-radius: 50%;\n  object-fit: cover;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n}\n\n.image-alt {\n  width: 160px;\n  height: 160px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n  color: var(--color-text-secondary);\n}\n\n.name {\n  font-size: var(--font-size-xl);\n  font-weight: 700;\n  line-height: var(--line-height-tight);\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n  margin: 0;\n  letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n  color: var(--color-text-secondary);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  margin-bottom: var(--spacing-xs);\n  max-width: 40ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.buttonSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n  width: 100%;\n  min-width: 0;\n  display: grid;\n}\n\n.buttonSubSection button {\n  width: 100%;\n  min-width: 0;\n}\n\n.qrCodeSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.details {\n  color: var(--color-text-muted);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  max-width: 45ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n  border: 1px solid #ccc;\n  padding: 16px;\n  background: white;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA,wDAAwD;AACxD;EACE,WAAW;EACX,sBAAsB;AACxB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.profileCard {\n  /* Component container */\n}\n\n.image {\n  width: 160px;\n  height: 160px;\n  border-radius: 50%;\n  object-fit: cover;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n}\n\n.image-alt {\n  width: 160px;\n  height: 160px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n  color: var(--color-text-secondary);\n}\n\n.name {\n  font-size: var(--font-size-xl);\n  font-weight: 700;\n  line-height: var(--line-height-tight);\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n  margin: 0;\n  letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n  color: var(--color-text-secondary);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  margin-bottom: var(--spacing-xs);\n  max-width: 40ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.buttonSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n  width: 100%;\n  min-width: 0;\n  display: grid;\n}\n\n.buttonSubSection button {\n  width: 100%;\n  min-width: 0;\n}\n\n/* Ensure prompt inputs stretch to fit their container */\n.add-friend-button-container input[type=\"text\"] {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.qrCodeSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.details {\n  color: var(--color-text-muted);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  max-width: 45ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n  border: 1px solid #ccc;\n  padding: 16px;\n  background: white;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -269,26 +275,24 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileView.css */
 /* Uses utilities: .section-bg, .text-center */
 
-.profileSection {
-  
-}
-
 /* Horizontal layout for cards */
 .profile-grid .profileSection {
   width: 100%;
   max-width: 100%;
+  min-width: 0;
   box-sizing: border-box;
   margin-bottom: var(--spacing-md);
   box-sizing: border-box;
   margin-bottom: var(--spacing-md);
+  overflow-wrap: anywhere;
 }
 
 @media (min-width: 900px) {
-  .profileSection {
+  .profile-grid .profileSection {
     margin-bottom: 0;
   }
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/ProfileView.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,8CAA8C;;AAE9C;;AAEA;;AAEA,gCAAgC;AAChC;EACE,WAAW;EACX,eAAe;EACf,sBAAsB;EACtB,gCAAgC;EAChC,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":["/* ProfileView.css */\n/* Uses utilities: .section-bg, .text-center */\n\n.profileSection {\n  \n}\n\n/* Horizontal layout for cards */\n.profile-grid .profileSection {\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n}\n\n@media (min-width: 900px) {\n  .profileSection {\n    margin-bottom: 0;\n  }\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/ProfileView.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,8CAA8C;;AAE9C,gCAAgC;AAChC;EACE,WAAW;EACX,eAAe;EACf,YAAY;EACZ,sBAAsB;EACtB,gCAAgC;EAChC,sBAAsB;EACtB,gCAAgC;EAChC,uBAAuB;AACzB;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":["/* ProfileView.css */\n/* Uses utilities: .section-bg, .text-center */\n\n/* Horizontal layout for cards */\n.profile-grid .profileSection {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n  overflow-wrap: anywhere;\n}\n\n@media (min-width: 900px) {\n  .profile-grid .profileSection {\n    margin-bottom: 0;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -471,7 +475,91 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* StuffCard.css */
 
 /***/ },
 
-/***/ 9053
+/***/ 5179
+(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.profile-grid .add-friend-button-container,
+.profile-grid .add-community-button-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+/* Ensure the button container can shrink properly in narrow layouts */
+.profile-grid .add-community-button-container {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Allow any direct children to shrink so no element forces overflow */
+.profile-grid .add-community-button-container > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.profile-grid table {
+  margin: 0 !important;
+}
+
+.profile-grid td {
+  padding: 0;
+}
+
+.profile-grid .add-friend-button-container .span,
+.profile-grid .add-community-button-container .span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.profile-grid .add-friend-button-container > div,
+.profile-grid .add-community-button-container > div {
+  flex-basis: 100%;
+}
+
+/* Prevent the add-community input from overflowing its flex container */
+.profile-grid .add-community-button-container input {
+  min-width: 0;
+  max-width: 96%;
+  flex: 1 1 0;
+  word-break: break-word;
+}
+
+.profile-grid .profile-image {
+  width: var( --profile-image-size);
+  height: var( --profile-image-size);
+  margin: var(--spacing-xxxs);
+  border-radius: var(--spacing-lg);
+}
+
+.profile-grid .default-profile-image {
+  width: 140%;
+  height: 140%;
+  object-fit: cover;
+  margin-left: -0.6em;
+  border-radius: var(--spacing-lg);
+}`, "",{"version":3,"sources":["webpack://./src/styles/editProfile.css"],"names":[],"mappings":"AAAA;;EAEE,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,2BAA2B;AAC7B;;AAEA,sEAAsE;AACtE;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA,sEAAsE;AACtE;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,UAAU;AACZ;;AAEA;;EAEE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA,wEAAwE;AACxE;EACE,YAAY;EACZ,cAAc;EACd,WAAW;EACX,sBAAsB;AACxB;;AAEA;EACE,iCAAiC;EACjC,kCAAkC;EAClC,2BAA2B;EAC3B,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,mBAAmB;EACnB,gCAAgC;AAClC","sourcesContent":[".profile-grid .add-friend-button-container,\n.profile-grid .add-community-button-container {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-xxs);\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}\n\n/* Ensure the button container can shrink properly in narrow layouts */\n.profile-grid .add-community-button-container {\n  min-width: 0;\n  max-width: 100%;\n}\n\n/* Allow any direct children to shrink so no element forces overflow */\n.profile-grid .add-community-button-container > * {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.profile-grid table {\n  margin: 0 !important;\n}\n\n.profile-grid td {\n  padding: 0;\n}\n\n.profile-grid .add-friend-button-container .span,\n.profile-grid .add-community-button-container .span {\n  display: inline-flex;\n  align-items: center;\n}\n\n.profile-grid .add-friend-button-container > div,\n.profile-grid .add-community-button-container > div {\n  flex-basis: 100%;\n}\n\n/* Prevent the add-community input from overflowing its flex container */\n.profile-grid .add-community-button-container input {\n  min-width: 0;\n  max-width: 96%;\n  flex: 1 1 0;\n  word-break: break-word;\n}\n\n.profile-grid .profile-image {\n  width: var( --profile-image-size);\n  height: var( --profile-image-size);\n  margin: var(--spacing-xxxs);\n  border-radius: var(--spacing-lg);\n}\n\n.profile-grid .default-profile-image {\n  width: 140%;\n  height: 140%;\n  object-fit: cover;\n  margin-left: -0.6em;\n  border-radius: var(--spacing-lg);\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ },
+
+/***/ 6776
 (module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -487,9 +575,66 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* StuffCard.css */
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form sizing fixes scoped to Edit CV section */
+___CSS_LOADER_EXPORT___.push([module.id, `/* Delete pop up*/
+/* Make the Solid-UI delete confirmation popup appear near the last click position.
+   Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.
+*/
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] {
+/* only override positioning; keep styling (border/background/etc) from solid-ui */
+  position: absolute !important;
+  z-index: 9999 !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  display: grid !important;
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  padding: 0.7em !important;
+  min-width: 280px !important;
+  max-width: 90vw !important;
+  background: var(--color-background) !important;
+  border: 0.1em solid var(--color-primary) !important;
+  border-radius: var(--border-radius-base) !important;
+  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;
+  grid-template-columns: auto auto !important;
+  gap: 0.3em !important;
+}
+
+/* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] img[src\$=".svg"],
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] button {
+  background: transparent !important;
+}
+
+.profile-form .individualPane {
+  box-shadow: none !important;
+}
+
+.profile-form p {
+  padding: 0 !important;
+}
+
+.profile-form .mb-md {
+  margin-bottom: 0 !important;
+}
+
+.profile-form h2 {
+  margin-bottom: 1em !important;
+}
+
+.profile-form h3 {
+  color: var(--color-primary) !important;
+  padding: 0 !important;
+  font-size: 1em !important;
+  font-weight: 600 !important;
+}
+
+/* Shared form layout rules are imported from rdfFormsCommon.css */
+/* Solid-UI form sizing fixes scoped to Edit CV section */
 .profile-form .hoverControl:not(:has(> img:first-child)) {
   border: 0.1em solid rgb(136, 136, 136) !important;
+  flex-direction: column !important;
 }
 
 .profile-form .hoverControl:has(> img:first-child) {
@@ -498,85 +643,164 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form sizing fixes scoped t
   margin: 0 !important;
   border-radius: 0 !important;
   padding: 0.7em !important;
+  min-height: var(--min-touch-target);
+  min-width: var(--min-touch-target);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.profile-form .hoverControlHide {
+/* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */
+.profile-form .hoverControl,
+.profile-grid .hoverControl {
+  position: relative !important;
+}
+
+.hoverControl > img.hoverControlHide,
+.hoverControl > [data-testid="deleteButtonWithCheck"] {
+  position: absolute !important;
+  top: 0.2em !important;
+  right: 0.2em !important;
   width: 1.5em !important;
   height: 1.5em !important;
-  display: block;
-  margin-top: 0 !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  margin-bottom: 0.3em !important;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  float: none !important;
+  transform: none !important;
 }
 
-.profile-form .hoverControl:has(> img:first-child) > span {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 0.3em;
+/* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */
+.hoverControl > img.hoverControlHide:nth-child(1),
+.hoverControl > img.hoverControlHide:nth-child(2),
+.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(1),
+.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(2) {
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  display: inline-flex !important;
+}
+
+/* Show the delete icon only when the container is hovered */
+.profile-grid .hoverControl:hover > img.hoverControlHide,
+.profile-grid .hoverControl:hover > [data-testid="deleteButtonWithCheck"] {
+  display: inline-flex !important;
 }
 
-.profile-form div[style*="padding: 0.5em"]:has(> img) {
+/* Also show the delete icon when the entire row is hovered */
+.profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,
+.profile-grid .attachmentTable tr:hover .hoverControl > [data-testid="deleteButtonWithCheck"] {
+  display: inline-flex !important;
+}
+
+/* Make the hover-control cell easier to hit */
+.profile-grid .hoverControl {
+  padding: 0.75em !important;
+  min-width: 2.5em !important;
+  min-height: 2.5em !important;
+}
+
+/* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */
+.profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {
+  min-width: 0 !important;
+  min-height: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: visible !important;
+}
+
+/* Hide delete icon only in autocomplete fields */
+.profile-grid .formFieldValue:has(input[data-testid="autocomplete-input"]) [data-testid="delete-button"] {
+  display: none !important;
+}
+
+/* Keep autocomplete cancel button hidden when the user is not interacting.
+   This avoids the cancel button remaining visible when focus moves away. */
+.profile-grid .formFieldValue:not(:focus-within) [data-testid="cancel-button"] {
+  display: none !important;
+}
+
+.profile-grid .hoverControl:has(> img:first-child) > span {
   display: inline-flex;
   align-items: center;
+  margin-left: 0.3em;
 }
 
-.profile-form div[style*="padding: 0.5em"]:has(> img) > span {
+.profile-grid div[style*="padding: 0.5em"]:has(> img) > span {
   margin-left: 0.3em;
+  vertical-align: super !important;
 }
 
-.profile-form .hoverControl:has(> img:first-child):hover {
+.profile-grid .hoverControl:has(> img:first-child):hover {
   background-color: transparent !important;
 }
 
-.profile-form button:has(> img[src\$=".svg"]) {
-  background-color: transparent !important;
+.profile-grid button:has(> img[src\$=".svg"]),
+.profile-grid .formFieldValue input[type ="color"] {
+  background-color: var(--color-section-bg) !important;
   border: none !important;
   margin: 0 !important;
   border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0.5em !important;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  padding: 0 !important;
+}
+
+/* Specific icon button should have no extra padding */
+.profile-grid button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg"]) {
+  padding: 0 !important;
 }
 
 .profile-form button {
+  min-height: var(--min-touch-target);
+  min-width: var(--min-touch-target);
+}
 
+.profile-form input:not([type="color"]) {
+  width: 99%;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }
 
 .profile-form input:not([type="color"]),
 .profile-form textarea,
 .profile-form select {
-  max-width: 100%;
+  max-width: 96%;
   min-width: 0;
   box-sizing: border-box ;
-  background-color: #eef !important;
-  border: .05em solid #88c
-}
-
-.profile-form input[type="url"] {
-  width: 100%;
+  font: inherit;
+  color: var(--color-text);
+  background-color: var(--color-card-bg) !important;
+  border: 1px solid var(--color-border-pale);
 }
 
-.profile-form .formFieldValue {
-  min-width: 0;
-  margin-bottom: var(--spacing-sm);
+.profile-form textarea {
+  border-color: var(--color-border-pale) !important;
 }
 
-.profile-form .formFieldValue table {
-  margin: 0 !important;
-  padding: 0 !important;
+.profile-form input[type="date"],
+.profile-form input[type="month"],
+.profile-form input[type="week"],
+.profile-form input[type="time"],
+.profile-form input[type="datetime-local"] {
+  min-height: var(--min-touch-target);
 }
 
-.profile-form .formFieldValue td {
-  padding: 0 !important;
+.profile-form .hoverControl:has(> img:first-child):focus-visible,
+.profile-form button:focus-visible,
+.profile-form input:not([type="color"]):focus-visible,
+.profile-form textarea:focus-visible,
+.profile-form select:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-primary) !important;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 1px var(--color-background);
 }
 
-.profile-form .formFieldValue input:not([type="color"]),
-.profile-form .formFieldValue textarea,
-.profile-form .formFieldValue select {
+.profile-form input[type="url"] {
   width: 100%;
-  max-width: 100%;
 }
 
 .profile-form select#formSelect {
@@ -587,11 +811,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form sizing fixes scoped t
   margin-right: 0 !important;
 }
 
-.profile-form span select {
-  max-width: 96% !important;
-  box-sizing: border-box;
-}
-
 /* Remove border/padding from the first wrapper div (and its first child wrapper). */
 .profile-form > div:first-of-type,
 .profile-form > div:first-of-type > div:first-of-type {
@@ -612,6 +831,54 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
 }
 
 /* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */
+.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {
+  display: flex;
+}
+
+/* for the Resume inside corporation choice */
+/* Add space between classifierBox label and select box */
+.profile-form .choiceBox .classifierBox-label {
+  /* Optional: ensure label doesn't have extra margin */
+  margin-right: 0;
+  padding-left: 0.3em;
+}
+.profile-form .choiceBox .choiceBox-selectBox select {
+  margin-left: 2.1em !important;
+}
+
+/* for the Resume orga details */
+/* Add space between classifierBox label and select box */
+.profile-form .classifierBox .classifierBox-label {
+  /* Match .formFieldName for alignment */
+  margin-right: 0;
+  padding-left: 0.3em;
+  width: 8em;
+  padding: 0.3em;
+  vertical-align: middle;
+}
+.profile-form .classifierBox .classifierBox-selectBox {
+  margin-left: 0 !important;
+}
+
+.profile-form .classifierBox .classifierBox-selectBox select {
+  margin-left: 0 !important;
+}
+
+/* for the social media */
+/* Add space between classifierBox label and select box */
+section[data-testid="edit-social-section"] .classifierBox-label {
+  /* Optional: ensure label doesn't have extra margin */
+  margin-right: 0;
+  padding-left: 0.3em;
+}
+section[data-testid="edit-social-section"] .classifierBox-selectBox select {
+  margin-left: 0.7em !important;
+}
+
+.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {
+  margin-bottom: 0;
+}
+
 .profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://schema.org/"]),
 .profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/solid/terms#"]),
 .profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://xmlns.com/foaf/0.1/"]),
@@ -630,10 +897,20 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
+  flex: 1;
+  min-width: 0;
 }
 
-.profile-form textarea {
-  width: 100%;
+.profile-form textarea,
+.profile-form .formFieldValue textarea {
+  appearance: none;
+  -webkit-appearance: none;
+  border: .05em solid #88c !important;
+  border-style: solid !important;
+  border-width: .05em !important;
+  border-color: #88c !important;
+  border-radius: 0.2em !important;
+  width: 99%;
   box-sizing: border-box;
   margin-top: var(--spacing-xs);
   margin-left: 0 !important;
@@ -651,29 +928,81 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
 }
 
 .profile-form div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) > div:has(> a) {
-  padding-top: var(--spacing-xs);
+  padding-left: var(--spacing-xs);
+  padding-top: var(--spacing-sm);
 }
 
-.profile-form input:not([type="color"]) {
-  width: 100%;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+
+.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName {
+  padding-top: 0.55em !important;
 }
 
-/* Remove padding from table cells within webidControl */
-.webidControl table td {
-  padding: 0 !important;
+
+.profile-form input:disabled,
+.profile-form textarea:disabled,
+.profile-form select:disabled,
+.profile-form input[readonly],
+.profile-form textarea[readonly],
+.profile-form input:read-only,
+.profile-form textarea:read-only {
+  background-color: var(--color-background) !important;
+  cursor: not-allowed;
+  opacity: 0.75;
+  border: 0.05em solid white !important;
+}
+
+.webidControl table td div.contactPane.namedPane {
+  border: none !important;
 }
 
-/* Remove padding from contactPane divs inside webidControl table cells */
-.webidControl table td div.contactPane.namedPane.fullWidth.individualPane {
+/* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */
+img[src*="noun_253504.svg"],
+img[src*="noun_1180158.svg"] {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
   padding: 0 !important;
 }
 
-.webidControl table td div.contactPane.namedPane {
+/* Ensure the parent button for that icon doesn't add padding/margin or affect layout */
+button:has(> img[src*="noun_253504.svg"]),
+button:has(> img[src*="noun_1180158.svg"]) {
+  display: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
   border: none !important;
+  background: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+/* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */
+.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
+.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
+.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]) {
+  display: inline-flex !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+
+/* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */
+.profile-grid .profileSection .add-friend-button-container button:has(> img[title="Continue"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[title="Continue"]),
+.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
+.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"],
+.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"] {
+  display: inline-flex !important;
+  width: 2em !important;
+  height: 2em !important;
+  overflow: visible !important;
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/rdfFormsEnforced.css"],"names":[],"mappings":"AAAA,yDAAyD;AACzD;EACE,iDAAiD;AACnD;;AAEA;EACE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;EAC3B,yBAAyB;EACzB,eAAe;EACf,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;EACvB,wBAAwB;EACxB,cAAc;EACd,wBAAwB;EACxB,yBAAyB;EACzB,0BAA0B;EAC1B,+BAA+B;AACjC;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB;AACpB;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;AAC7B;;AAEA;;AAEA;;AAEA;;;EAGE,eAAe;EACf,YAAY;EACZ,uBAAuB;EACvB,iCAAiC;EACjC;AACF;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,YAAY;EACZ,gCAAgC;AAClC;;AAEA;EACE,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,qBAAqB;AACvB;;AAEA;;;EAGE,WAAW;EACX,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,cAAc;EACd,sBAAsB;EACtB,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA;EACE,yBAAyB;EACzB,sBAAsB;AACxB;;AAEA,oFAAoF;AACpF;;EAEE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,0FAA0F;AAC1F;EACE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,sEAAsE;AACtE;EACE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,8FAA8F;AAC9F;;;;;EAKE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;;;;;EAKE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;EACE,WAAW;EACX,sBAAsB;EACtB,6BAA6B;EAC7B,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,gFAAgF;AAChF;EACE,8BAA8B;AAChC;;AAEA,mDAAmD;AACnD;EACE,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;EACE,WAAW;EACX,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,wDAAwD;AACxD;EACE,qBAAqB;AACvB;;AAEA,yEAAyE;AACzE;EACE,qBAAqB;AACvB;;AAEA;EACE,uBAAuB;AACzB","sourcesContent":["/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n  border: 0.1em solid rgb(136, 136, 136) !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  padding: 0.7em !important;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.profile-form .hoverControlHide {\n  width: 1.5em !important;\n  height: 1.5em !important;\n  display: block;\n  margin-top: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  margin-bottom: 0.3em !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) {\n  display: inline-flex;\n  align-items: center;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n}\n\n.profile-form .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.profile-form button:has(> img[src$=\".svg\"]) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n}\n\n.profile-form button {\n\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form select {\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box ;\n  background-color: #eef !important;\n  border: .05em solid #88c\n}\n\n.profile-form input[type=\"url\"] {\n  width: 100%;\n}\n\n.profile-form .formFieldValue {\n  min-width: 0;\n  margin-bottom: var(--spacing-sm);\n}\n\n.profile-form .formFieldValue table {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.profile-form .formFieldValue td {\n  padding: 0 !important;\n}\n\n.profile-form .formFieldValue input:not([type=\"color\"]),\n.profile-form .formFieldValue textarea,\n.profile-form .formFieldValue select {\n  width: 100%;\n  max-width: 100%;\n}\n\n.profile-form select#formSelect {\n  width: 100%;\n  max-width: 97%;\n  box-sizing: border-box;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.profile-form span select {\n  max-width: 96% !important;\n  box-sizing: border-box;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.contactPane > div {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.profile-form textarea {\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: var(--spacing-xs);\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.profile-form div:has(> a) + div:has(textarea) {\n  margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n  padding-top: var(--spacing-xs);\n}\n\n.profile-form input:not([type=\"color\"]) {\n  width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Remove padding from table cells within webidControl */\n.webidControl table td {\n  padding: 0 !important;\n}\n\n/* Remove padding from contactPane divs inside webidControl table cells */\n.webidControl table td div.contactPane.namedPane.fullWidth.individualPane {\n  padding: 0 !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/profileRDFFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* Delete pop up*/\n/* Make the Solid-UI delete confirmation popup appear near the last click position.\n   Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.\n*/\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] {\n/* only override positioning; keep styling (border/background/etc) from solid-ui */\n  position: absolute !important;\n  z-index: 9999 !important;\n  top: 0 !important;\n  right: 0 !important;\n  left: auto !important;\n  display: grid !important;\n  pointer-events: auto !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n  padding: 0.7em !important;\n  min-width: 280px !important;\n  max-width: 90vw !important;\n  background: var(--color-background) !important;\n  border: 0.1em solid var(--color-primary) !important;\n  border-radius: var(--border-radius-base) !important;\n  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;\n  grid-template-columns: auto auto !important;\n  gap: 0.3em !important;\n}\n\n/* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] img[src$=\".svg\"],\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] button {\n  background: transparent !important;\n}\n\n.profile-form .individualPane {\n  box-shadow: none !important;\n}\n\n.profile-form p {\n  padding: 0 !important;\n}\n\n.profile-form .mb-md {\n  margin-bottom: 0 !important;\n}\n\n.profile-form h2 {\n  margin-bottom: 1em !important;\n}\n\n.profile-form h3 {\n  color: var(--color-primary) !important;\n  padding: 0 !important;\n  font-size: 1em !important;\n  font-weight: 600 !important;\n}\n\n/* Shared form layout rules are imported from rdfFormsCommon.css */\n/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n  border: 0.1em solid rgb(136, 136, 136) !important;\n  flex-direction: column !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  padding: 0.7em !important;\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */\n.profile-form .hoverControl,\n.profile-grid .hoverControl {\n  position: relative !important;\n}\n\n.hoverControl > img.hoverControlHide,\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"] {\n  position: absolute !important;\n  top: 0.2em !important;\n  right: 0.2em !important;\n  width: 1.5em !important;\n  height: 1.5em !important;\n  align-items: center;\n  justify-content: center;\n  margin: 0 !important;\n  float: none !important;\n  transform: none !important;\n}\n\n/* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */\n.hoverControl > img.hoverControlHide:nth-child(1),\n.hoverControl > img.hoverControlHide:nth-child(2),\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"]:nth-child(1),\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"]:nth-child(2) {\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  display: inline-flex !important;\n}\n\n/* Show the delete icon only when the container is hovered */\n.profile-grid .hoverControl:hover > img.hoverControlHide,\n.profile-grid .hoverControl:hover > [data-testid=\"deleteButtonWithCheck\"] {\n  display: inline-flex !important;\n}\n\n/* Also show the delete icon when the entire row is hovered */\n.profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,\n.profile-grid .attachmentTable tr:hover .hoverControl > [data-testid=\"deleteButtonWithCheck\"] {\n  display: inline-flex !important;\n}\n\n/* Make the hover-control cell easier to hit */\n.profile-grid .hoverControl {\n  padding: 0.75em !important;\n  min-width: 2.5em !important;\n  min-height: 2.5em !important;\n}\n\n/* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */\n.profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 0 !important;\n  height: 0 !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  overflow: visible !important;\n}\n\n/* Hide delete icon only in autocomplete fields */\n.profile-grid .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) [data-testid=\"delete-button\"] {\n  display: none !important;\n}\n\n/* Keep autocomplete cancel button hidden when the user is not interacting.\n   This avoids the cancel button remaining visible when focus moves away. */\n.profile-grid .formFieldValue:not(:focus-within) [data-testid=\"cancel-button\"] {\n  display: none !important;\n}\n\n.profile-grid .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.profile-grid div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n  vertical-align: super !important;\n}\n\n.profile-grid .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.profile-grid button:has(> img[src$=\".svg\"]),\n.profile-grid .formFieldValue input[type =\"color\"] {\n  background-color: var(--color-section-bg) !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  padding: 0.5em !important;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease;\n  padding: 0 !important;\n}\n\n/* Specific icon button should have no extra padding */\n.profile-grid button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg\"]) {\n  padding: 0 !important;\n}\n\n.profile-form button {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n.profile-form input:not([type=\"color\"]) {\n  width: 99%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form select {\n  max-width: 96%;\n  min-width: 0;\n  box-sizing: border-box ;\n  font: inherit;\n  color: var(--color-text);\n  background-color: var(--color-card-bg) !important;\n  border: 1px solid var(--color-border-pale);\n}\n\n.profile-form textarea {\n  border-color: var(--color-border-pale) !important;\n}\n\n.profile-form input[type=\"date\"],\n.profile-form input[type=\"month\"],\n.profile-form input[type=\"week\"],\n.profile-form input[type=\"time\"],\n.profile-form input[type=\"datetime-local\"] {\n  min-height: var(--min-touch-target);\n}\n\n.profile-form .hoverControl:has(> img:first-child):focus-visible,\n.profile-form button:focus-visible,\n.profile-form input:not([type=\"color\"]):focus-visible,\n.profile-form textarea:focus-visible,\n.profile-form select:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary) !important;\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.profile-form input[type=\"url\"] {\n  width: 100%;\n}\n\n.profile-form select#formSelect {\n  width: 100%;\n  max-width: 97%;\n  box-sizing: border-box;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.contactPane > div {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n  display: flex;\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.profile-form .choiceBox .classifierBox-label {\n  /* Optional: ensure label doesn't have extra margin */\n  margin-right: 0;\n  padding-left: 0.3em;\n}\n.profile-form .choiceBox .choiceBox-selectBox select {\n  margin-left: 2.1em !important;\n}\n\n/* for the Resume orga details */\n/* Add space between classifierBox label and select box */\n.profile-form .classifierBox .classifierBox-label {\n  /* Match .formFieldName for alignment */\n  margin-right: 0;\n  padding-left: 0.3em;\n  width: 8em;\n  padding: 0.3em;\n  vertical-align: middle;\n}\n.profile-form .classifierBox .classifierBox-selectBox {\n  margin-left: 0 !important;\n}\n\n.profile-form .classifierBox .classifierBox-selectBox select {\n  margin-left: 0 !important;\n}\n\n/* for the social media */\n/* Add space between classifierBox label and select box */\nsection[data-testid=\"edit-social-section\"] .classifierBox-label {\n  /* Optional: ensure label doesn't have extra margin */\n  margin-right: 0;\n  padding-left: 0.3em;\n}\nsection[data-testid=\"edit-social-section\"] .classifierBox-selectBox select {\n  margin-left: 0.7em !important;\n}\n\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n  margin-bottom: 0;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  flex: 1;\n  min-width: 0;\n}\n\n.profile-form textarea,\n.profile-form .formFieldValue textarea {\n  appearance: none;\n  -webkit-appearance: none;\n  border: .05em solid #88c !important;\n  border-style: solid !important;\n  border-width: .05em !important;\n  border-color: #88c !important;\n  border-radius: 0.2em !important;\n  width: 99%;\n  box-sizing: border-box;\n  margin-top: var(--spacing-xs);\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.profile-form div:has(> a) + div:has(textarea) {\n  margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n  padding-left: var(--spacing-xs);\n  padding-top: var(--spacing-sm);\n}\n\n\n.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n  padding-top: 0.55em !important;\n}\n\n\n.profile-form input:disabled,\n.profile-form textarea:disabled,\n.profile-form select:disabled,\n.profile-form input[readonly],\n.profile-form textarea[readonly],\n.profile-form input:read-only,\n.profile-form textarea:read-only {\n  background-color: var(--color-background) !important;\n  cursor: not-allowed;\n  opacity: 0.75;\n  border: 0.05em solid white !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}\n\n/* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */\nimg[src*=\"noun_253504.svg\"],\nimg[src*=\"noun_1180158.svg\"] {\n  display: none !important;\n  width: 0 !important;\n  height: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n/* Ensure the parent button for that icon doesn't add padding/margin or affect layout */\nbutton:has(> img[src*=\"noun_253504.svg\"]),\nbutton:has(> img[src*=\"noun_1180158.svg\"]) {\n  display: none !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  border: none !important;\n  background: none !important;\n  width: 0 !important;\n  height: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */\n.profile-grid .profileSection .add-friend-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"],\n.profile-grid .profileSection .add-community-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"],\n.profile-grid .profileSection .add-friend-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"]) {\n  display: inline-flex !important;\n  width: auto !important;\n  height: auto !important;\n  overflow: visible !important;\n}\n\n\n/* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */\n.profile-grid .profileSection .add-friend-button-container button:has(> img[title=\"Continue\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[title=\"Continue\"]),\n.profile-grid .profileSection .add-friend-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"]),\n.profile-grid .profileSection .add-friend-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"],\n.profile-grid .profileSection .add-community-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"] {\n  display: inline-flex !important;\n  width: 2em !important;\n  height: 2em !important;\n  overflow: visible !important;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -698,6 +1027,27 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layout, spacing, and responsiveness */
 
+:root {
+  --profile-image-size: 3em;
+}
+
+@media (max-width: 1000px) {
+  .profile-grid,
+  .profile-grid * {
+    font-size: 2rem !important;
+  }
+
+  .profile-grid .actionButton,
+  .profile-grid .searchInput,
+  .profile-grid .flatButton,
+  .profile-grid .buttonSection button,
+  .profile-grid .groupButtonsList button {
+    min-height: calc(var(--min-touch-target) + 0.5em) !important;
+    font-size: 2rem !important;
+    padding: 1em 1em !important;
+  }
+}
+
 .actionButton {
   width: 100%;
   min-width: 180px;
@@ -712,7 +1062,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
 
 .profile-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
+  /* Allow the grid to shrink below 30em on small viewports to avoid overflow */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));
   gap: var(--spacing-lg);
   background: var(--color-background);
 }
@@ -905,6 +1256,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
   box-shadow: none;
 }
 
+/* Prevent labels from appearing focusable to keyboard users. */
+label:focus,
+label:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 /* Better focus for text elements */
 .focusable-text:focus {
   background-color: rgba(124, 77, 255, 0.1);
@@ -1025,7 +1383,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
 .btn-transparent:hover {
   background-color: transparent;
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.actionButton {\n  width: 100%;\n  min-width: 180px;\n  max-width: 320px;\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n/* ===========================================\n   PROFILE GRID LAYOUT\n   =========================================== */\n\n.profile-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n  gap: var(--spacing-lg);\n  background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n  grid-column: 1 / -1;\n}\n\n.center {\n  justify-content: center;\n  align-items: center;\n}\n\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n  background: var(--color-primary);\n  color: #fff;\n}\n.bg-card {\n  background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.min-touch-target {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n  padding: inherit !important;\n  margin: inherit !important;\n  overflow: visible !important;\n  clip: auto !important;\n  white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n  position: absolute;\n  top: -100px;\n  left: 0;\n  z-index: 1000;\n}\n\n.skip-links a {\n  position: absolute;\n  left: 6px;\n  top: 6px;\n  padding: var(--spacing-sm);\n  background: var(--color-primary);\n  color: white;\n  text-decoration: none;\n  border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n  top: 6px;\n}\n\n.reduced-motion {\n  animation: none !important;\n  transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.no-focus-ring {\n  outline: none;\n}\n\n.no-focus-ring:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n  line-height: 1.5;\n  max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n  line-height: var(--line-height-base);\n  max-width: 65ch;\n}\n\n.text-lg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-base);\n}\n\n.text-small {\n  font-size: max(var(--font-size-sm), var(--min-font-size));\n  line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n  color: var(--color-text);\n  font-weight: 600;\n}\n\n:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n  background-color: rgba(124, 77, 255, 0.1);\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n  color: var(--color-text);\n  background: var(--color-background);\n  border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n   CONSOLIDATED COMPONENT PATTERNS\n   =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: 1px solid var(--color-primary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-primary);\n  color: white;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n  background: color-mix(in srgb, var(--color-primary) 90%, black);\n  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n  font-size: 1.25em;\n  font-weight: 600;\n  color: var(--color-primary);\n  margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.text-wrap-anywhere {\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n  color: var(--color-primary);\n  text-align: center;\n  margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n  background-color: transparent;\n}\n\n.btn-transparent:hover {\n  background-color: transparent;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n:root {\n  --profile-image-size: 3em;\n}\n\n@media (max-width: 1000px) {\n  .profile-grid,\n  .profile-grid * {\n    font-size: 2rem !important;\n  }\n\n  .profile-grid .actionButton,\n  .profile-grid .searchInput,\n  .profile-grid .flatButton,\n  .profile-grid .buttonSection button,\n  .profile-grid .groupButtonsList button {\n    min-height: calc(var(--min-touch-target) + 0.5em) !important;\n    font-size: 2rem !important;\n    padding: 1em 1em !important;\n  }\n}\n\n.actionButton {\n  width: 100%;\n  min-width: 180px;\n  max-width: 320px;\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n/* ===========================================\n   PROFILE GRID LAYOUT\n   =========================================== */\n\n.profile-grid {\n  display: grid;\n  /* Allow the grid to shrink below 30em on small viewports to avoid overflow */\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));\n  gap: var(--spacing-lg);\n  background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n  grid-column: 1 / -1;\n}\n\n.center {\n  justify-content: center;\n  align-items: center;\n}\n\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n  background: var(--color-primary);\n  color: #fff;\n}\n.bg-card {\n  background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.min-touch-target {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n  padding: inherit !important;\n  margin: inherit !important;\n  overflow: visible !important;\n  clip: auto !important;\n  white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n  position: absolute;\n  top: -100px;\n  left: 0;\n  z-index: 1000;\n}\n\n.skip-links a {\n  position: absolute;\n  left: 6px;\n  top: 6px;\n  padding: var(--spacing-sm);\n  background: var(--color-primary);\n  color: white;\n  text-decoration: none;\n  border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n  top: 6px;\n}\n\n.reduced-motion {\n  animation: none !important;\n  transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.no-focus-ring {\n  outline: none;\n}\n\n.no-focus-ring:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n  line-height: 1.5;\n  max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n  line-height: var(--line-height-base);\n  max-width: 65ch;\n}\n\n.text-lg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-base);\n}\n\n.text-small {\n  font-size: max(var(--font-size-sm), var(--min-font-size));\n  line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n  color: var(--color-text);\n  font-weight: 600;\n}\n\n:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Prevent labels from appearing focusable to keyboard users. */\nlabel:focus,\nlabel:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n  background-color: rgba(124, 77, 255, 0.1);\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n  color: var(--color-text);\n  background: var(--color-background);\n  border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n   CONSOLIDATED COMPONENT PATTERNS\n   =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: 1px solid var(--color-primary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-primary);\n  color: white;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n  background: color-mix(in srgb, var(--color-primary) 90%, black);\n  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n  font-size: 1.25em;\n  font-weight: 600;\n  color: var(--color-primary);\n  margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.text-wrap-anywhere {\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n  color: var(--color-primary);\n  text-align: center;\n  margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n  background-color: transparent;\n}\n\n.btn-transparent:hover {\n  background-color: transparent;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4835,12 +5193,12 @@ const logInToChatWithMeButtonText = 'Login to chat with me';
 const friendExistsAlreadyButtonText = 'Already part of friends';
 const chatWithMeButtonText = 'Chat with me';
 // Profile & Edit profile texts 
-const yourContactInformationHeading = 'Contact Information';
-const otherPreferencesHeadingText = 'Other Preferences';
-const communitiesHeadingText = 'Communities You Participate In';
+const yourContactInformationHeading = 'Your profile';
+const otherPreferencesHeadingText = 'Other preferences';
+const communitiesHeadingText = 'Your communities';
 const resumeHeadingText = 'Resume';
-const socialAccountsHeadingText = 'Social Accounts';
-const sharedItemsHeadingText = 'Shared Items';
+const socialAccountsHeadingText = 'Social accounts';
+const sharedItemsHeadingText = 'Shared items';
 const friendsHeadingText = 'Friends';
 const contactHeadingText = 'Contact';
 
@@ -4969,79 +5327,176 @@ const ChatWithMe_ChatWithMe = (subject, context) => {
     return b ` ${async_replace_h(chatContainer())} `;
 };
 
-;// ./src/FriendList.ts
+// EXTERNAL MODULE: external "rdflib"
+var external_rdflib_ = __webpack_require__(5491);
+;// ./src/addMeToYourFriends.ts
 
 
 
-const FriendList_FriendList = (subject, context) => {
-    var _a;
-    const friends = extractFriends(subject, context);
-    if (!friends || !((_a = friends.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
-        return null;
-    return b `
-    <section
-      class="friendListSection"
-      role="region"
-      aria-labelledby="friends-section-title"
-      data-testid="friend-list"
-    >
-      <nav aria-label="Friend profiles">
-        <ul class="list-reset zebra-stripe" role="list">
-          ${friends}
-        </ul>
-      </nav>
-    </section>
-  `;
-};
-const extractFriends = (subject, { dom }) => {
-    const target = dom.createElement('div');
-    external_UI_.widgets.attachmentList(dom, subject, target, {
-        doc: subject.doc(),
-        modify: false,
-        predicate: external_UI_.ns.foaf('knows'),
-        noun: 'friend',
-    });
-    if (target.textContent === '')
-        return null;
-    // Add 'friendItem' class and unique aria-label to each <li> for accessibility
-    target.querySelectorAll('li').forEach((li, idx) => {
-        li.classList.add('friendItem');
-        // Try to find a link or text to use as a label
-        const link = li.querySelector('a');
-        if (link && link.textContent) {
-            li.setAttribute('aria-label', `Friend: ${link.textContent.trim()}`);
-        }
-        else if (li.textContent) {
-            li.setAttribute('aria-label', `Friend: ${li.textContent.trim()}`);
-        }
-        else {
-            li.setAttribute('aria-label', `Friend ${idx + 1}`);
-        }
-    });
-    return target;
-};
 
-// EXTERNAL MODULE: ./node_modules/validate-color/lib/index.js
-var lib = __webpack_require__(6077);
-;// ./src/presenter.ts
 
 
 
-function pronounsAsText(subject) {
-    let pronouns = external_SolidLogic_.store.anyJS(subject, external_UI_.ns.solid('preferredSubjectPronoun')) || '';
-    if (pronouns) {
-        const them = external_SolidLogic_.store.anyJS(subject, external_UI_.ns.solid('preferredObjectPronoun'));
-        if (them) {
-            pronouns += '/' + them;
-            const their = external_SolidLogic_.store.anyJS(subject, external_UI_.ns.solid('preferredRelativePronoun'));
-            if (their) {
-                pronouns += '/' + their;
-            }
-        }
-        pronouns = ' (' + pronouns + ') ';
-    }
-    return pronouns || '';
-}
+let buttonContainer = document.createElement('section');
+const addMeToYourFriendsDiv = (subject, context) => {
+    buttonContainer = context.dom.createElement('section');
+    buttonContainer.setAttribute('class', 'buttonSubSection text-truncate text-center section-centered');
+    buttonContainer.setAttribute('aria-labelledby', 'add-me-to-your-friends-button-section');
+    buttonContainer.setAttribute('data-testid', 'button');
+    // Add a visually hidden heading for accessibility
+    const heading = context.dom.createElement('h3');
+    heading.setAttribute('id', 'add-me-to-your-friends-button-section');
+    heading.setAttribute('class', 'sr-only');
+    heading.textContent = 'Add me to your friends actions';
+    buttonContainer.appendChild(heading);
+    const button = createAddMeToYourFriendsButton(subject, context);
+    button.classList.add('actionButton', 'btn-primary', 'action-button-focus');
+    buttonContainer.appendChild(button);
+    return b `${buttonContainer}`;
+};
+const createAddMeToYourFriendsButton = (subject, context) => {
+    const me = external_SolidLogic_.authn.currentUser();
+    let label = addMeToYourFriends_checkIfAnyUserLoggedIn(me) ? addMeToYourFriendsButtonText.toUpperCase() : logInAddMeToYourFriendsButtonText.toUpperCase();
+    const button = external_UI_.widgets.button(context.dom, undefined, label, setButtonHandler, //sets an onclick event listener
+    {
+        needsBorder: true,
+    });
+    function setButtonHandler(event) {
+        event.preventDefault();
+        saveNewThing(subject, context, external_UI_.ns.foaf('knows'))
+            .then(() => {
+            clearPreviousMessage(buttonContainer);
+            mention(buttonContainer, friendWasAddedSuccesMessage);
+            refreshButton();
+        })
+            .catch((error) => {
+            clearPreviousMessage(buttonContainer);
+            //else UI.widgets.complain(buttonContainer, message); //displays an error message at the top of the window
+            complain(buttonContainer, context, error);
+        });
+    }
+    button.refresh = refreshButton();
+    function refreshButton() {
+        const me = external_SolidLogic_.authn.currentUser();
+        const store = context.session.store;
+        if (addMeToYourFriends_checkIfAnyUserLoggedIn(me)) {
+            checkIfThingExists(store, me, subject, external_UI_.ns.foaf('knows')).then((friendExists) => {
+                if (friendExists) {
+                    //logged in and friend exists or friend was just added
+                    button.innerHTML = friendExistsAlreadyButtonText.toUpperCase();
+                }
+                else {
+                    //logged in and friend does not exist yet
+                    button.innerHTML = addMeToYourFriendsButtonText.toUpperCase();
+                }
+            });
+        }
+        else {
+            //not logged in
+            button.innerHTML = logInAddMeToYourFriendsButtonText.toUpperCase();
+        }
+    }
+    return button;
+};
+async function saveNewThing(subject, context, predicate) {
+    const me = external_SolidLogic_.authn.currentUser();
+    const store = context.session.store;
+    if (addMeToYourFriends_checkIfAnyUserLoggedIn(me)) {
+        if (!(await checkIfThingExists(store, me, subject, predicate))) {
+            //if friend does not exist, we add her/him
+            await store.fetcher.load(me);
+            const updater = store.updater;
+            const toBeInserted = [(0,external_rdflib_.st)(me, predicate, subject, me.doc())];
+            try {
+                await updater.update([], toBeInserted);
+            }
+            catch (error) {
+                let errorMessage = error;
+                if (errorMessage.toString().includes('Unauthenticated'))
+                    errorMessage = userNotLoggedInErrorMessage;
+                throw new Error(errorMessage);
+            }
+        }
+        else
+            throw new Error(friendExistsMessage);
+    }
+    else
+        throw new Error(userNotLoggedInErrorMessage);
+}
+function addMeToYourFriends_checkIfAnyUserLoggedIn(me) {
+    if (me)
+        return true;
+    else
+        return false;
+}
+async function checkIfThingExists(store, me, subject, predicate) {
+    await store.fetcher.load(me);
+    if (store.whether(me, predicate, subject, me.doc()) === 0)
+        return false;
+    else
+        return true;
+}
+function extractFriends(editable, subject, { dom }) {
+    const target = dom.createElement('div');
+    console.log('Extracting friends for subject:', subject.doc()); // Debug log to check the subject
+    external_UI_.widgets.attachmentList(dom, subject, target, {
+        doc: subject.doc(),
+        modify: editable,
+        predicate: external_UI_.ns.foaf('knows'),
+        noun: 'friend',
+    });
+    if (target.textContent === '')
+        return null;
+    console.log('Extracted friends:', target.innerHTML); // Debug log to check the generated HTML
+    return target;
+}
+
+
+;// ./src/FriendList.ts
+
+
+
+const FriendList_FriendList = (subject, context) => {
+    var _a;
+    const friends = extractFriends(false, subject, context);
+    if (!friends || !((_a = friends.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
+        return null;
+    return b `
+    <section
+      class="friendListSection"
+      data-testid="friend-list"
+    >
+      <h2 id="friends-section-title" class="sr-only">Friends</h2>
+      <nav aria-label="Friend profiles">
+        <ul class="list-reset zebra-stripe" role="list">
+          ${friends}
+        </ul>
+      </nav>
+    </section>
+  `;
+};
+
+// EXTERNAL MODULE: ./node_modules/validate-color/lib/index.js
+var lib = __webpack_require__(6077);
+;// ./src/presenter.ts
+
+
+
+function pronounsAsText(subject) {
+    let pronouns = external_SolidLogic_.store.anyJS(subject, external_UI_.ns.solid('preferredSubjectPronoun')) || '';
+    if (pronouns) {
+        const them = external_SolidLogic_.store.anyJS(subject, external_UI_.ns.solid('preferredObjectPronoun'));
+        if (them) {
+            pronouns += '/' + them;
+            const their = external_SolidLogic_.store.anyJS(subject, external_UI_.ns.solid('preferredRelativePronoun'));
+            if (their) {
+                pronouns += '/' + their;
+            }
+        }
+        pronouns = ' (' + pronouns + ') ';
+    }
+    return pronouns || '';
+}
 const presentProfile = (subject, store) => {
     const name = external_UI_.utils.label(subject);
     const imageSrc = external_UI_.widgets.findImage(subject);
@@ -5087,8 +5542,6 @@ function validColorOrDefault(color, fallback) {
     return color && (0,lib.validateHTMLColorHex)(color) ? color : fallback;
 }
 
-// EXTERNAL MODULE: external "rdflib"
-var external_rdflib_ = __webpack_require__(5491);
 ;// ./src/CVPresenter.ts
 
 
@@ -5204,7 +5657,7 @@ function presentCV(subject, store) {
 }
 
 ;// ./src/ontology/socialMedia.ttl
-const socialMedia_namespaceObject = "@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix : <#>.\n\n########### ATTENTION - we cannot rename this ontology file name without migrating existing data on existing accounts\n\n########### Social Media - other accounts\n#\n# Twitter, linked In, Orkid, Mastodon, Matrix, Bluesky, Instagram, Facebook, Github,\n# Snapchat, TikTok, etc\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Social media form\" ;\n    a ui:Form ;\n    ui:parts (\n      :SocialsForm\n      ).\n\n:SocialsForm a ui:Multiple;\n    ui:label \"online account\";\n    ui:property foaf:account; # the triple is created with the foaf:acccounts predicate\n    ui:ordered true; # Allow user to order occounts most important first.\n    ui:part :AccountsForm.\n\n:AccountsForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :AccountField \n        :AccountIdField ).\n\n:AccountField a ui:Classifier; \n    ui:label \"Choose account\"@en;\n    ui:multiple false ; \n    ui:category foaf:Account. # the accounts are described by the foaf:Account predicate\n\n# this is what is needed to make a dropdown box\nfoaf:Account a rdfs:Class;\n    rdfs:label \"Online Account Provider\";\n    owl:disjointUnionOf ( \n        :BlueSkyAccount :DiggAccount :FacebookAccount :GithubAccount :InstagramAccount\n        :LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount \n        :OrcidAccount :PinterestAccount :RedditAccount :SnapchatAccount :StravaAccount \n        :TiktokAccount  :TumblrAccount  :TwitterAccount :OtherAccount) .\n\n:AccountIdField a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n     [ ui:for :BlueSkyAccount; ui:use :BlueSkyIdField ],\n     [ ui:for :DiggAccount; ui:use :DiggIdField],\n     [ ui:for :FacebookAccount; ui:use :FacebookIdField ],\n     [ ui:for :GithubAccount; ui:use :GithubIdField ],\n     [ ui:for :InstagramAccount; ui:use :InstagramIdField ],\n     [ ui:for :LinkedInAccount; ui:use :LinkedInIdField ],\n     [ ui:for :MastodonAccount; ui:use :MastodonIdField ],\n     [ ui:for :MatrixAccount; ui:use :MatrixIdField ],\n     [ ui:for :MediumAccount; ui:use :MediumIdField ],\n     [ ui:for :NostrAccount; ui:use :NostrIdField ],\n     [ ui:for :OrcidAccount; ui:use :OrcidIdField ],\n     [ ui:for :PinterestAccount; ui:use :PinterestIdField ],\n     [ ui:for :RedditAccount; ui:use :RedditIdField ],\n     [ ui:for :StravaAccount; ui:use :StravaIdField ],\n     [ ui:for :SnapchatAccount; ui:use :SnapchatIdField ],\n     [ ui:for :TiktokAccount; ui:use :TiktokIdField ],\n     [ ui:for :TumblrAccount; ui:use :TumblrIdField ],\n     [ ui:for :TwitterAccount; ui:use :TwitterIdField ],\n     [ ui:for :OtherAccount; ui:use :OtherIdForm  ] .\n\n:BlueSkyAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Bluesky\";\n    foaf:userProfilePrefix \"https://bsky.app/profile/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/bluesky-1.svg>;\n    foaf:homepage <https://bsky.app/> .\n\n:DiggAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Digg\";\n    foaf:userProfilePrefix \"https://www.digg.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/digg-icon.svg>;\n    foaf:homepage <https://www.digg.com/> .\n\n:FacebookAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Facebook\";\n    foaf:userProfilePrefix \"https://www.facebook.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/facebook-2020-2-1.svg>;\n    foaf:homepage <https://www.facebook.com/> .\n\n:GithubAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Github\";\n    foaf:userProfilePrefix \"https://www.github.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/github-icon.svg>;\n    foaf:homepage <https://github.com/> .\n\n:InstagramAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Instagram\";\n    foaf:userProfilePrefix \"https://www.instagram.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/instagram-2016-5.svg>;\n    foaf:homepage <https://www.instagram.com/> .\n\n:LinkedInAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"LinkedIn\";\n    foaf:userProfilePrefix \"https://www.linkedin.com/in/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/linkedin-icon.svg>;\n    foaf:homepage <https://linkedin.com/> .\n\n:MastodonAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Mastodon\" ;\n    foaf:userProfilePrefix \"https://mastodon.social/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/mastodon-2.svg>;\n    foaf:homepage <https://joinmastodon.org/> .\n\n:MatrixAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Matrix\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/matrix-logo-black.svg> ;\n    foaf:userProfilePrefix \"https://matrix.to/#/\" ;\n    foaf:homepage <https://matrix.org/> .\n\n:MediumAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Medium\";\n    foaf:userProfilePrefix \"https://medium.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/medium-logo-wordmark-black.svg>;\n    foaf:homepage <https://medium.com/> .\n\n:NostrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Nostr\";\n    foaf:userProfilePrefix \"https://primal.net/p/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/nostr-icon-purple-on-white.svg>;\n    foaf:homepage <https://nostr.net/> .\n\n:OrcidAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"ORCiD\";\n    foaf:userProfilePrefix \"https://orcid.org/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/ORCID-1.svg>;\n    foaf:homepage <https://orcid.org/> .\n\n:PinterestAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Pinterest\";\n    foaf:userProfilePrefix \"https://pin.it/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/pinterest-2-1.svg>;\n    foaf:homepage <https://pinterest.com/> .\n\n:RedditAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Reddit\";\n    foaf:userProfilePrefix \"https://www.reddit.com/user/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/reddit-4.svg>;\n    foaf:homepage <https://reddit.com/> .\n\n:SnapchatAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Snapchat\";\n    foaf:userProfilePrefix \"https://www.snapchat.com/add/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/snapchat-1.svg>;\n    foaf:homepage <https://www.snapchat.com/> .\n\n:StravaAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Strava\";\n    foaf:userProfilePrefix \"https://www.strava.com/athletes/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/strava-2.svg>;\n    foaf:homepage <https://strava.com/> .\n\n:TiktokAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"TikTok\";\n    foaf:userProfilePrefix \"https://www.tiktok.com/@\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tiktok-icon-2.svg>;\n    foaf:homepage <https://www.tiktok.com/> .\n\n:TumblrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Tumblr\";\n    foaf:userProfilePrefix \"https://www.tumblr.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tumblr-icon.svg>;\n    foaf:homepage <https://www.tumblr.com/> .\n\n:TwitterAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"X\";\n    foaf:userProfilePrefix \"https://x.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/x-2.svg>;\n    foaf:homepage <https://x.com/> .\n\n:OtherAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Other\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/noun_1689339.svg> .\n\n:BlueSkyIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:DiggIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:FacebookIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:GithubIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:InstagramIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:LinkedInIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MastodonIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MatrixIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MediumIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:NostrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:OrcidIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:PinterestIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:RedditIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:StravaIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:SnapchatIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TiktokIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TumblrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TwitterIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n# an unknown online account needs more info\n\n:OtherIdForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :OtherIdField \n        :OtherIconField \n        :OtherLabelField ).\n\n:OtherIdField\n    a ui:NamedNodeURIField ;\n    ui:label \"Account link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:homepage.\n\n:OtherIconField\n    a ui:NamedNodeURIField ;\n    ui:label \"Icon link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:icon.\n\n:OtherLabelField\n    a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property rdfs:label.\n\n# ends\n";
+const socialMedia_namespaceObject = "@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix : <#>.\n\n########### ATTENTION - we cannot rename this ontology file name without migrating existing data on existing accounts\n\n########### Social Media - other accounts\n#\n# Twitter, linked In, Orkid, Mastodon, Matrix, Bluesky, Instagram, Facebook, Github,\n# Snapchat, TikTok, etc\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Social media form\" ;\n    a ui:Form ;\n    ui:parts (\n      :SocialsForm\n      ).\n\n:SocialsForm a ui:Multiple;\n    ui:label \"online account\";\n    ui:property foaf:account; # the triple is created with the foaf:acccounts predicate\n    ui:ordered true; # Allow user to order occounts most important first.\n    ui:part :AccountsForm.\n\n:AccountsForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :AccountField \n        :AccountIdField ).\n\n:AccountField a ui:Classifier; \n    ui:label \"Account\"@en;\n    ui:multiple false ; \n    ui:category foaf:Account. # the accounts are described by the foaf:Account predicate\n\n# this is what is needed to make a dropdown box\nfoaf:Account a rdfs:Class;\n    rdfs:label \"Online Account Provider\";\n    owl:disjointUnionOf ( \n        :BlueSkyAccount :DiggAccount :FacebookAccount :GithubAccount :InstagramAccount\n        :LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount \n        :OrcidAccount :PinterestAccount :RedditAccount :SnapchatAccount :StravaAccount \n        :TiktokAccount  :TumblrAccount  :TwitterAccount :OtherAccount) .\n\n:AccountIdField a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n     [ ui:for :BlueSkyAccount; ui:use :BlueSkyIdField ],\n     [ ui:for :DiggAccount; ui:use :DiggIdField],\n     [ ui:for :FacebookAccount; ui:use :FacebookIdField ],\n     [ ui:for :GithubAccount; ui:use :GithubIdField ],\n     [ ui:for :InstagramAccount; ui:use :InstagramIdField ],\n     [ ui:for :LinkedInAccount; ui:use :LinkedInIdField ],\n     [ ui:for :MastodonAccount; ui:use :MastodonIdField ],\n     [ ui:for :MatrixAccount; ui:use :MatrixIdField ],\n     [ ui:for :MediumAccount; ui:use :MediumIdField ],\n     [ ui:for :NostrAccount; ui:use :NostrIdField ],\n     [ ui:for :OrcidAccount; ui:use :OrcidIdField ],\n     [ ui:for :PinterestAccount; ui:use :PinterestIdField ],\n     [ ui:for :RedditAccount; ui:use :RedditIdField ],\n     [ ui:for :StravaAccount; ui:use :StravaIdField ],\n     [ ui:for :SnapchatAccount; ui:use :SnapchatIdField ],\n     [ ui:for :TiktokAccount; ui:use :TiktokIdField ],\n     [ ui:for :TumblrAccount; ui:use :TumblrIdField ],\n     [ ui:for :TwitterAccount; ui:use :TwitterIdField ],\n     [ ui:for :OtherAccount; ui:use :OtherIdForm  ] .\n\n:BlueSkyAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Bluesky\";\n    foaf:userProfilePrefix \"https://bsky.app/profile/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/bluesky-1.svg>;\n    foaf:homepage <https://bsky.app/> .\n\n:DiggAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Digg\";\n    foaf:userProfilePrefix \"https://www.digg.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/digg-icon.svg>;\n    foaf:homepage <https://www.digg.com/> .\n\n:FacebookAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Facebook\";\n    foaf:userProfilePrefix \"https://www.facebook.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/facebook-2020-2-1.svg>;\n    foaf:homepage <https://www.facebook.com/> .\n\n:GithubAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Github\";\n    foaf:userProfilePrefix \"https://www.github.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/github-icon.svg>;\n    foaf:homepage <https://github.com/> .\n\n:InstagramAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Instagram\";\n    foaf:userProfilePrefix \"https://www.instagram.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/instagram-2016-5.svg>;\n    foaf:homepage <https://www.instagram.com/> .\n\n:LinkedInAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"LinkedIn\";\n    foaf:userProfilePrefix \"https://www.linkedin.com/in/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/linkedin-icon.svg>;\n    foaf:homepage <https://linkedin.com/> .\n\n:MastodonAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Mastodon\" ;\n    foaf:userProfilePrefix \"https://mastodon.social/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/mastodon-2.svg>;\n    foaf:homepage <https://joinmastodon.org/> .\n\n:MatrixAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Matrix\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/matrix-logo-black.svg> ;\n    foaf:userProfilePrefix \"https://matrix.to/#/\" ;\n    foaf:homepage <https://matrix.org/> .\n\n:MediumAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Medium\";\n    foaf:userProfilePrefix \"https://medium.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/medium-logo-wordmark-black.svg>;\n    foaf:homepage <https://medium.com/> .\n\n:NostrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Nostr\";\n    foaf:userProfilePrefix \"https://primal.net/p/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/nostr-icon-purple-on-white.svg>;\n    foaf:homepage <https://nostr.net/> .\n\n:OrcidAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"ORCiD\";\n    foaf:userProfilePrefix \"https://orcid.org/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/ORCID-1.svg>;\n    foaf:homepage <https://orcid.org/> .\n\n:PinterestAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Pinterest\";\n    foaf:userProfilePrefix \"https://pin.it/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/pinterest-2-1.svg>;\n    foaf:homepage <https://pinterest.com/> .\n\n:RedditAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Reddit\";\n    foaf:userProfilePrefix \"https://www.reddit.com/user/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/reddit-4.svg>;\n    foaf:homepage <https://reddit.com/> .\n\n:SnapchatAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Snapchat\";\n    foaf:userProfilePrefix \"https://www.snapchat.com/add/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/snapchat-1.svg>;\n    foaf:homepage <https://www.snapchat.com/> .\n\n:StravaAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Strava\";\n    foaf:userProfilePrefix \"https://www.strava.com/athletes/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/strava-2.svg>;\n    foaf:homepage <https://strava.com/> .\n\n:TiktokAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"TikTok\";\n    foaf:userProfilePrefix \"https://www.tiktok.com/@\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tiktok-icon-2.svg>;\n    foaf:homepage <https://www.tiktok.com/> .\n\n:TumblrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Tumblr\";\n    foaf:userProfilePrefix \"https://www.tumblr.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tumblr-icon.svg>;\n    foaf:homepage <https://www.tumblr.com/> .\n\n:TwitterAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"X\";\n    foaf:userProfilePrefix \"https://x.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/x-2.svg>;\n    foaf:homepage <https://x.com/> .\n\n:OtherAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Other\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/noun_1689339.svg> .\n\n:BlueSkyIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:DiggIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:FacebookIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:GithubIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:InstagramIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:LinkedInIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MastodonIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MatrixIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MediumIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:NostrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:OrcidIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:PinterestIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:RedditIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:StravaIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:SnapchatIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TiktokIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TumblrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TwitterIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n# an unknown online account needs more info\n\n:OtherIdForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :OtherIdField \n        :OtherIconField \n        :OtherLabelField ).\n\n:OtherIdField\n    a ui:NamedNodeURIField ;\n    ui:label \"Account link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:homepage.\n\n:OtherIconField\n    a ui:NamedNodeURIField ;\n    ui:label \"Icon link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:icon.\n\n:OtherLabelField\n    a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property rdfs:label.\n\n# ends\n";
 ;// ./src/rdfFormsHelper.ts
 
 
@@ -5222,7 +5675,101 @@ store, dom, editableProfile, whichForm) {
         if (!ok)
             external_UI_.widgets.errorMessageBlock(dom, mes);
     });
+    // Ensure that when a user clicks “Add skill” or “Add language”, the newly
+    // created input receives focus. Solid-UI provides only a generic "Add" button.
+    // We detect the "add" control by the plus icon it uses and focus the last
+    // text input in the surrounding multiple-field container.
+    enableFocusOnAdd(div);
+    // Track the last click/tap position so popups (like solid-ui delete confirmations)
+    // can be positioned closer to where the user clicked.
+    let lastClick = { x: 0, y: 0 };
+    div.addEventListener('pointerdown', (event) => {
+        lastClick = { x: event.clientX, y: event.clientY };
+    }, { capture: true });
+    // Solid-UI injects a popup DIV (position:absolute, top:-1em) under a relative container.
+    // Detect it and reposition it using last click coordinates.
+    const repositionPopup = (popup) => {
+        const win = dom.defaultView || window;
+        const padding = 10;
+        const maxWidth = win.innerWidth - padding;
+        const maxHeight = win.innerHeight - padding;
+        // Force fixed positioning, then clamp to viewport so it doesn't get cut off.
+        popup.style.position = 'fixed';
+        popup.style.zIndex = '9999';
+        popup.style.pointerEvents = 'auto';
+        popup.style.opacity = '1';
+        popup.style.visibility = 'visible';
+        // Use getBoundingClientRect after it is in DOM; if it is 0x0, fall back to default offset.
+        const rect = popup.getBoundingClientRect();
+        const popupWidth = rect.width || 200;
+        const popupHeight = rect.height || 100;
+        const left = Math.min(Math.max(lastClick.x + padding, padding), maxWidth - popupWidth);
+        const top = Math.min(Math.max(lastClick.y + padding, padding), maxHeight - popupHeight);
+        popup.style.left = `${left}px`;
+        popup.style.top = `${top}px`;
+    };
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            for (const node of Array.from(mutation.addedNodes)) {
+                if (!(node instanceof HTMLElement))
+                    continue;
+                // Solid-UI popups are divs with inline position:absolute and grid display
+                if (node.style.position === 'absolute' &&
+                    node.style.display === 'grid' &&
+                    node.style.top === '-1em') {
+                    repositionPopup(node);
+                    continue;
+                }
+                // Also handle nested cases where the popup is not the direct added node
+                const popup = node.querySelector('div[style*="position:absolute"][style*="display:grid"][style*="top:-1em"]');
+                if (popup)
+                    repositionPopup(popup);
+            }
+        }
+    });
+    observer.observe(div, { childList: true, subtree: true });
 } // renderForm
+function enableFocusOnAdd(root) {
+    const PLUS_ICON = 'noun_19460_green.svg';
+    const isAddButton = (el) => {
+        var _a;
+        const img = el.querySelector('img');
+        const label = el.querySelector('span');
+        return ((img === null || img === void 0 ? void 0 : img.src.includes(PLUS_ICON)) &&
+            ((_a = label === null || label === void 0 ? void 0 : label.textContent) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith('add ')));
+    };
+    const buttons = Array.from(root.querySelectorAll('div')).filter(isAddButton);
+    buttons.forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const scope = (function findScope(el) {
+                let cur = el;
+                while (cur && cur !== root) {
+                    if (cur.querySelector('input[data-testid="autocomplete-input"]'))
+                        return cur;
+                    cur = cur.parentElement;
+                }
+                return root;
+            })(btn);
+            const before = new Set(Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]')));
+            const start = Date.now();
+            const interval = setInterval(() => {
+                const current = Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]'));
+                const newInput = current.find((el) => !before.has(el));
+                if (newInput) {
+                    // New inputs are usually wrapped in a label/link; make sure focus jumps
+                    // straight to the input rather than the label link.
+                    skipLabelsFromTabbing(scope);
+                    newInput.focus();
+                    clearInterval(interval);
+                    return;
+                }
+                if (Date.now() - start > 1000) {
+                    clearInterval(interval);
+                }
+            }, 50);
+        });
+    });
+}
 // we need to load into the store some additional information about Social Media accounts
 function loadDocument(store, documentSource, documentName, documentURI) {
     const finalDocumentUri = documentURI || baseUri + documentName; // Full URI to the file
@@ -5233,6 +5780,33 @@ function loadDocument(store, documentSource, documentName, documentURI) {
         (0,external_rdflib_.parse)(documentSource, store, finalDocumentUri, 'text/turtle', () => null); // Load doc directly
     }
 }
+function skipLabelsFromTabbing(root) {
+    // Many Solid-UI forms render field labels as focusable links (hrefs).
+    // Make sure keyboard tabbing skips these label links entirely.
+    const selectors = [
+        'label',
+        '.formFieldName a',
+        '.classifierBox-label a',
+        '.choiceBox-label a',
+        '.label a',
+        // Skip focusable label-like links created by Solid-UI forms, including the vcard note link
+        'a[href="http://www.w3.org/2006/vcard/ns#note"]',
+        'a[href$="#note"]',
+    ].join(', ');
+    // querySelectorAll<HTMLElement> ensures the elements are typed correctly so we can access tabIndex.
+    const nodes = root === null || root === void 0 ? void 0 : root.querySelectorAll(selectors);
+    if (!nodes)
+        return;
+    Array.from(nodes).forEach(el => {
+        if (typeof el.tabIndex === 'number' && el.tabIndex !== -1) {
+            el.tabIndex = -1;
+        }
+        // Ensure those label links are not announced as focusable elements
+        if (el.getAttribute('aria-hidden') !== 'true') {
+            el.setAttribute('aria-hidden', 'true');
+        }
+    });
+}
 
 ;// ./src/SocialPresenter.ts
 
@@ -5380,115 +5954,6 @@ async function presentStuff(subject) {
     return { stuff };
 }
 
-;// ./src/addMeToYourFriends.ts
-
-
-
-
-
-
-
-let buttonContainer = document.createElement('section');
-const addMeToYourFriendsDiv = (subject, context) => {
-    buttonContainer = context.dom.createElement('section');
-    buttonContainer.setAttribute('class', 'buttonSubSection text-truncate text-center section-centered');
-    buttonContainer.setAttribute('aria-labelledby', 'add-me-to-your-friends-button-section');
-    buttonContainer.setAttribute('data-testid', 'button');
-    // Add a visually hidden heading for accessibility
-    const heading = context.dom.createElement('h3');
-    heading.setAttribute('id', 'add-me-to-your-friends-button-section');
-    heading.setAttribute('class', 'sr-only');
-    heading.textContent = 'Add me to your friends actions';
-    buttonContainer.appendChild(heading);
-    const button = createAddMeToYourFriendsButton(subject, context);
-    button.classList.add('actionButton', 'btn-primary', 'action-button-focus');
-    buttonContainer.appendChild(button);
-    return b `${buttonContainer}`;
-};
-const createAddMeToYourFriendsButton = (subject, context) => {
-    const me = external_SolidLogic_.authn.currentUser();
-    let label = addMeToYourFriends_checkIfAnyUserLoggedIn(me) ? addMeToYourFriendsButtonText.toUpperCase() : logInAddMeToYourFriendsButtonText.toUpperCase();
-    const button = external_UI_.widgets.button(context.dom, undefined, label, setButtonHandler, //sets an onclick event listener
-    {
-        needsBorder: true,
-    });
-    function setButtonHandler(event) {
-        event.preventDefault();
-        saveNewFriend(subject, context)
-            .then(() => {
-            clearPreviousMessage(buttonContainer);
-            mention(buttonContainer, friendWasAddedSuccesMessage);
-            refreshButton();
-        })
-            .catch((error) => {
-            clearPreviousMessage(buttonContainer);
-            //else UI.widgets.complain(buttonContainer, message); //displays an error message at the top of the window
-            complain(buttonContainer, context, error);
-        });
-    }
-    button.refresh = refreshButton();
-    function refreshButton() {
-        const me = external_SolidLogic_.authn.currentUser();
-        const store = context.session.store;
-        if (addMeToYourFriends_checkIfAnyUserLoggedIn(me)) {
-            checkIfFriendExists(store, me, subject).then((friendExists) => {
-                if (friendExists) {
-                    //logged in and friend exists or friend was just added
-                    button.innerHTML = friendExistsAlreadyButtonText.toUpperCase();
-                }
-                else {
-                    //logged in and friend does not exist yet
-                    button.innerHTML = addMeToYourFriendsButtonText.toUpperCase();
-                }
-            });
-        }
-        else {
-            //not logged in
-            button.innerHTML = logInAddMeToYourFriendsButtonText.toUpperCase();
-        }
-    }
-    return button;
-};
-async function saveNewFriend(subject, context) {
-    const me = external_SolidLogic_.authn.currentUser();
-    const store = context.session.store;
-    if (addMeToYourFriends_checkIfAnyUserLoggedIn(me)) {
-        if (!(await checkIfFriendExists(store, me, subject))) {
-            //if friend does not exist, we add her/him
-            await store.fetcher.load(me);
-            const updater = store.updater;
-            const toBeInserted = [(0,external_rdflib_.st)(me, external_UI_.ns.foaf('knows'), subject, me.doc())];
-            try {
-                await updater.update([], toBeInserted);
-            }
-            catch (error) {
-                let errorMessage = error;
-                if (errorMessage.toString().includes('Unauthenticated'))
-                    errorMessage = userNotLoggedInErrorMessage;
-                throw new Error(errorMessage);
-            }
-        }
-        else
-            throw new Error(friendExistsMessage);
-    }
-    else
-        throw new Error(userNotLoggedInErrorMessage);
-}
-function addMeToYourFriends_checkIfAnyUserLoggedIn(me) {
-    if (me)
-        return true;
-    else
-        return false;
-}
-async function checkIfFriendExists(store, me, subject) {
-    await store.fetcher.load(me);
-    if (store.whether(me, external_UI_.ns.foaf('knows'), subject, me.doc()) === 0)
-        return false;
-    else
-        return true;
-}
-
-
 ;// ./src/QRCodeCard.ts
 
 
@@ -6037,10 +6502,179 @@ function paneDiv(context, subject, paneName) {
     return container;
 }
 
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/profileRDFFormsEnforced.css
+var profileRDFFormsEnforced = __webpack_require__(6776);
+;// ./src/styles/profileRDFFormsEnforced.css
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var profileRDFFormsEnforced_options = {};
+
+profileRDFFormsEnforced_options.styleTagTransform = (styleTagTransform_default());
+profileRDFFormsEnforced_options.setAttributes = (setAttributesWithoutAttributes_default());
+profileRDFFormsEnforced_options.insert = insertBySelector_default().bind(null, "head");
+profileRDFFormsEnforced_options.domAPI = (styleDomAPI_default());
+profileRDFFormsEnforced_options.insertStyleElement = (insertStyleElement_default());
+
+var profileRDFFormsEnforced_update = injectStylesIntoStyleTag_default()(profileRDFFormsEnforced/* default */.A, profileRDFFormsEnforced_options);
+
+
+
+
+       /* harmony default export */ const styles_profileRDFFormsEnforced = (profileRDFFormsEnforced/* default */.A && profileRDFFormsEnforced/* default */.A.locals ? profileRDFFormsEnforced/* default */.A.locals : undefined);
+
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/editProfile.css
+var editProfile = __webpack_require__(5179);
+;// ./src/styles/editProfile.css
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var editProfile_options = {};
+
+editProfile_options.styleTagTransform = (styleTagTransform_default());
+editProfile_options.setAttributes = (setAttributesWithoutAttributes_default());
+editProfile_options.insert = insertBySelector_default().bind(null, "head");
+editProfile_options.domAPI = (styleDomAPI_default());
+editProfile_options.insertStyleElement = (insertStyleElement_default());
+
+var editProfile_update = injectStylesIntoStyleTag_default()(editProfile/* default */.A, editProfile_options);
+
+
+
+
+       /* harmony default export */ const styles_editProfile = (editProfile/* default */.A && editProfile/* default */.A.locals ? editProfile/* default */.A.locals : undefined);
+
+;// ./src/editProfilePane/editProfilePresenter.ts
+
+
+
+const editProfilePresenter_DEFAULT_ICON_URI = external_UI_.icons.iconBase + 'noun_10636_grey.svg'; // grey disc
+function refresh(dom, attachmentTable, me, editableProfile, predicate) {
+    // Keep the RDF terms so downstream Solid-UI helpers (e.g. findImage) can call term.sameTerm().
+    // We still sort by string value so the list order is stable.
+    const friendsList = external_SolidLogic_.store.each(me, predicate);
+    // Ensure profiles are loaded before we render rows, otherwise widgets.findImage / utils.label may return empty.
+    void (async () => {
+        if (external_SolidLogic_.store.fetcher) {
+            await Promise.all(friendsList.map((friend) => {
+                var _a;
+                if (!external_SolidLogic_.store.holds(friend, null, null, null)) {
+                    return (_a = external_SolidLogic_.store.fetcher) === null || _a === void 0 ? void 0 : _a.load(friend.value).catch(() => undefined);
+                }
+                return Promise.resolve();
+            }));
+        }
+        friendsList.sort((a, b) => (a.value > b.value ? 1 : a.value < b.value ? -1 : 0));
+        external_UI_.utils.syncTableToArray(attachmentTable, friendsList, (target) => createNewRow(dom, attachmentTable, target, me, editableProfile, predicate));
+    })();
+}
+function createNewRow(dom, attachmentTable, target, me, editableProfile, predicate) {
+    const theTarget = target;
+    const profileImg = dom.createElement('img');
+    profileImg.src = getProfileImg((0,external_rdflib_.sym)(target), profileImg);
+    profileImg.alt = `Image of ${external_UI_.utils.label((0,external_rdflib_.sym)(target))}`;
+    const opt = {
+        image: profileImg,
+        title: external_UI_.utils.label((0,external_rdflib_.sym)(target)),
+        link: true
+    };
+    if (!!editableProfile) {
+        opt.deleteFunction = function () {
+            deleteAttachment(dom, attachmentTable, me, editableProfile, theTarget, predicate);
+        };
+    }
+    return external_UI_.widgets.renderAsRow(dom, predicate, target, opt);
+}
+function getProfileImg(subject, profileImg) {
+    const img = external_UI_.widgets.findImage(subject);
+    if (img) {
+        profileImg.classList.add('profile-image');
+        return img;
+    }
+    profileImg.classList.add('default-profile-image');
+    return editProfilePresenter_DEFAULT_ICON_URI;
+}
+async function deleteAttachment(dom, attachmentTable, me, editableProfile, target, predicate) {
+    if (!external_SolidLogic_.store.updater) {
+        throw new Error('Store has no updater.');
+    }
+    // Delete the exact statements in the store so we don't rely on doc() matching
+    const statementsToDelete = external_SolidLogic_.store.statementsMatching(me, predicate, target, null);
+    if (!statementsToDelete.length) {
+        console.warn('No matching statement found to delete for', target.value);
+        refresh(dom, attachmentTable, me, editableProfile, predicate);
+        return;
+    }
+    try {
+        await external_SolidLogic_.store.updater.update(statementsToDelete, []);
+        // UpdateManager may mutate store asynchronously, so only remove locally if it still exists
+        if (typeof external_SolidLogic_.store.removeStatements === 'function') {
+            const stillThere = external_SolidLogic_.store.holds(me, predicate, target, null);
+            if (stillThere) {
+                try {
+                    external_SolidLogic_.store.removeStatements(statementsToDelete);
+                }
+                catch (e) {
+                    // Ignore if already gone
+                }
+            }
+        }
+        // Ensure store is up-to-date before re-rendering
+        if (external_SolidLogic_.store.fetcher)
+            await external_SolidLogic_.store.fetcher.load(me.doc());
+        refresh(dom, attachmentTable, me, editableProfile, predicate);
+    }
+    catch (error) {
+        console.error('Error deleting:', error);
+        // If update failed, try to keep UI in sync anyway
+        if (typeof external_SolidLogic_.store.removeStatements === 'function') {
+            try {
+                external_SolidLogic_.store.removeStatements(statementsToDelete);
+            }
+            catch (e) {
+                /* ignore */
+            }
+        }
+        if (external_SolidLogic_.store.fetcher)
+            await external_SolidLogic_.store.fetcher.load(me.doc());
+        refresh(dom, attachmentTable, me, editableProfile, predicate);
+    }
+}
+function isAWebID(subject) {
+    if (subject && subject.doc) {
+        const t = external_SolidLogic_.store.findTypeURIs(subject.doc());
+        return !!t[external_UI_.ns.foaf('PersonalProfileDocument').uri];
+    }
+    return false;
+}
+
 ;// ./src/editProfilePane/EditFriendsCard.ts
 
 
-function EditFriendsSection(context, me, editableProfile, profile) {
+
+
+
+
+
+
+const GREEN_PLUS = external_UI_.icons.iconBase + 'noun_34653_green.svg';
+function EditFriendsSection(context, me, editableProfile) {
     const section = context.dom.createElement('section');
     section.setAttribute('aria-labelledby', 'edit-profile-friends-heading');
     section.classList.add('profileSection', 'section-bg');
@@ -6052,31 +6686,62 @@ function EditFriendsSection(context, me, editableProfile, profile) {
     heading.textContent = friendsHeadingText;
     header.appendChild(heading);
     section.appendChild(header);
-    const comment1 = context.dom.createElement('p');
-    comment1.id = 'edit-profile-friends-description';
-    comment1.classList.add('p-md');
-    comment1.textContent = 'This is your public social network. Only put people here to whom you are happy to be publicly connected. (You can always keep private track of friends and family in your contacts.)';
-    section.appendChild(comment1);
-    let comment2 = null;
     if (editableProfile) {
-        comment2 = context.dom.createElement('p');
-        comment2.id = 'edit-profile-friends-help';
-        comment2.classList.add('p-md');
-        comment2.textContent = 'Drag people onto the target below to add people.';
-        section.appendChild(comment2);
+        let plusButtonDiv = context.dom.createElement('div');
+        plusButtonDiv.classList.add('add-friend-button-container');
+        createAddButton(plusButtonDiv, context);
+        section.appendChild(plusButtonDiv);
     }
-    const attachmentList = external_UI_.widgets.attachmentList(context.dom, me, section, {
-        doc: profile,
-        modify: !!editableProfile,
-        predicate: external_UI_.ns.foaf('knows'),
-        noun: 'friend'
-    });
-    const descriptions = [comment1.id];
-    if (comment2 === null || comment2 === void 0 ? void 0 : comment2.id) {
-        descriptions.push(comment2.id);
+    const attachmentOuter = section.appendChild(context.dom.createElement('table'));
+    attachmentOuter.classList.add('edit-friends-attachment-outer');
+    const attachmentOne = attachmentOuter.appendChild(context.dom.createElement('tr'));
+    const attachmentRight = attachmentOne.appendChild(context.dom.createElement('td'));
+    const attachmentTable = attachmentRight.appendChild(context.dom.createElement('table'));
+    attachmentTable.classList.add('attachmentTable', 'table', 'table-striped', 'table-hover');
+    attachmentOuter.refresh = refresh(context.dom, attachmentTable, me, editableProfile, external_UI_.ns.foaf('knows')); // Participate in downstream changes
+    refresh(context.dom, attachmentTable, me, editableProfile, external_UI_.ns.foaf('knows'));
+    function createAddButton(buttonContainer, context) {
+        const plus = buttonContainer.appendChild(external_UI_.widgets.button(context.dom, GREEN_PLUS, 'Add a friend', greenButtonHandler));
+        const predicate = external_UI_.ns.foaf('knows');
+        plus.setAttribute('class', 'add-button');
+        plus.setAttribute('aria-label', 'Add a friend');
+        const span = context.dom.createElement('span');
+        span.textContent = 'Add a friend'; // for screen readers
+        span.setAttribute('class', 'span');
+        buttonContainer.appendChild(span);
+        async function greenButtonHandler(_event) {
+            const webid = await external_UI_.widgets.askName(context.dom, external_SolidLogic_.store, buttonContainer, predicate, undefined, 'WebID of the friend you');
+            if (!webid) {
+                return;
+            }
+            try {
+                new URL(webid);
+            }
+            catch {
+                complain(buttonContainer, context, 'Not a URL');
+                return;
+            }
+            try {
+                await external_SolidLogic_.store.fetcher.load(external_SolidLogic_.store.sym(webid));
+            }
+            catch {
+                complain(buttonContainer, context, 'Not a valid WebID');
+                return;
+            }
+            if (!isAWebID(external_SolidLogic_.store.sym(webid))) {
+                complain(buttonContainer, context, 'WebID does not seem to exist');
+                return;
+            }
+            return saveNewThing(webid, context, predicate)
+                .then(() => {
+                refresh(context.dom, attachmentTable, me, editableProfile, predicate); // Update the button state after adding a friend
+            })
+                .catch((error) => {
+                clearPreviousMessage(buttonContainer);
+                complain(buttonContainer, context, error);
+            });
+        }
     }
-    attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
-    section.appendChild(attachmentList);
     return section;
 }
 
@@ -6098,13 +6763,7 @@ function EditSocialSection(context, me, editableProfile, store) {
     heading.textContent = socialAccountsHeadingText;
     header.appendChild(heading);
     section.appendChild(header);
-    if (editableProfile) {
-        const comment2 = context.dom.createElement('p');
-        comment2.classList.add('p-md');
-        comment2.textContent = 'Add links to your social media accounts here. These will be publicly visible on your profile.';
-        section.appendChild(comment2);
-    }
-    else {
+    if (!editableProfile) {
         const comment1 = context.dom.createElement('p');
         comment1.classList.add('p-md');
         comment1.textContent = 'Login to add social media accounts to your profile.';
@@ -6117,7 +6776,14 @@ function EditSocialSection(context, me, editableProfile, store) {
 ;// ./src/editProfilePane/EditCommunitiesCard.ts
 
 
-function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
+
+
+
+
+
+
+const EditCommunitiesCard_GREEN_PLUS = external_UI_.icons.iconBase + 'noun_34653_green.svg';
+function EditProfileCommunitiesSection(context, me, editableProfile) {
     const section = context.dom.createElement('section');
     section.setAttribute('aria-labelledby', 'edit-profile-communities-heading');
     section.classList.add('profileSection', 'section-bg');
@@ -6129,65 +6795,67 @@ function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
     heading.textContent = communitiesHeadingText;
     header.appendChild(heading);
     section.appendChild(header);
-    const comment1 = context.dom.createElement('p');
-    comment1.id = 'edit-profile-communities-description';
-    comment1.classList.add('p-md');
-    comment1.textContent = 'These are organizations and projects whose stuff you share';
-    section.appendChild(comment1);
-    let comment2 = null;
     if (editableProfile) {
-        comment2 = context.dom.createElement('p');
-        comment2.id = 'edit-profile-communities-help';
-        comment2.classList.add('p-md');
-        comment2.textContent = 'Drag organizations onto the target below to add organizations.';
-        section.appendChild(comment2);
+        let plusButtonDiv = context.dom.createElement('div');
+        plusButtonDiv.classList.add('add-community-button-container');
+        createAddButton(plusButtonDiv, context);
+        section.appendChild(plusButtonDiv);
     }
-    const attachmentList = external_UI_.widgets.attachmentList(context.dom, me, section, {
-        doc: profile,
-        modify: !!editableProfile,
-        predicate: external_UI_.ns.solid('community'),
-        noun: 'community'
-    });
-    const descriptions = [comment1.id];
-    if (comment2 === null || comment2 === void 0 ? void 0 : comment2.id) {
-        descriptions.push(comment2.id);
+    const attachmentOuter = section.appendChild(context.dom.createElement('table'));
+    attachmentOuter.classList.add('edit-community-attachment-outer');
+    const attachmentOne = attachmentOuter.appendChild(context.dom.createElement('tr'));
+    const attachmentRight = attachmentOne.appendChild(context.dom.createElement('td'));
+    const attachmentTable = attachmentRight.appendChild(context.dom.createElement('table'));
+    attachmentTable.classList.add('attachmentTable', 'table', 'table-striped', 'table-hover');
+    attachmentOuter.refresh = refresh(context.dom, attachmentTable, me, editableProfile, external_UI_.ns.solid('community')); // Participate in downstream changes
+    refresh(context.dom, attachmentTable, me, editableProfile, external_UI_.ns.solid('community'));
+    function createAddButton(buttonContainer, context) {
+        const plus = buttonContainer.appendChild(external_UI_.widgets.button(context.dom, EditCommunitiesCard_GREEN_PLUS, 'Add a project or community', greenButtonHandler));
+        const predicate = external_UI_.ns.solid('community');
+        plus.setAttribute('class', 'add-button');
+        plus.setAttribute('aria-label', 'Add a new community');
+        const span = context.dom.createElement('span');
+        span.textContent = 'Add a community or project'; // for screen readers
+        span.setAttribute('class', 'span');
+        buttonContainer.appendChild(span);
+        async function greenButtonHandler(_event) {
+            const webid = await external_UI_.widgets.askName(context.dom, external_SolidLogic_.store, buttonContainer, predicate, undefined, 'WebID of');
+            if (!webid) {
+                return;
+            }
+            try {
+                new URL(webid);
+            }
+            catch {
+                complain(buttonContainer, context, 'Not a URL');
+                return;
+            }
+            try {
+                await external_SolidLogic_.store.fetcher.load(external_SolidLogic_.store.sym(webid));
+            }
+            catch {
+                complain(buttonContainer, context, 'Not a valid WebID');
+                return;
+            }
+            if (!isAWebID(external_SolidLogic_.store.sym(webid))) {
+                complain(buttonContainer, context, 'WebID does not seem to exist');
+                return;
+            }
+            return saveNewThing(webid, context, predicate)
+                .then(() => {
+                refresh(context.dom, attachmentTable, me, editableProfile, predicate); // Update the button state after adding a community
+            })
+                .catch((error) => {
+                clearPreviousMessage(buttonContainer);
+                complain(buttonContainer, context, error);
+            });
+        }
     }
-    attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
-    section.appendChild(attachmentList);
     return section;
 }
 
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/rdfFormsEnforced.css
-var rdfFormsEnforced = __webpack_require__(9053);
-;// ./src/styles/rdfFormsEnforced.css
-
-      
-      
-      
-      
-      
-      
-      
-      
-      
-
-var rdfFormsEnforced_options = {};
-
-rdfFormsEnforced_options.styleTagTransform = (styleTagTransform_default());
-rdfFormsEnforced_options.setAttributes = (setAttributesWithoutAttributes_default());
-rdfFormsEnforced_options.insert = insertBySelector_default().bind(null, "head");
-rdfFormsEnforced_options.domAPI = (styleDomAPI_default());
-rdfFormsEnforced_options.insertStyleElement = (insertStyleElement_default());
-
-var rdfFormsEnforced_update = injectStylesIntoStyleTag_default()(rdfFormsEnforced/* default */.A, rdfFormsEnforced_options);
-
-
-
-
-       /* harmony default export */ const styles_rdfFormsEnforced = (rdfFormsEnforced/* default */.A && rdfFormsEnforced/* default */.A.locals ? rdfFormsEnforced/* default */.A.locals : undefined);
-
 ;// ./src/ontology/resumeForm.ttl
-const resumeForm_namespaceObject = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n    a ui:Form ;\n    ui:parts (\n      :CVGroup\n      :SkillsHeading :SkillsForm\n      :LanguagesHeading :LanguagesForm\n      ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :CVPrompt \n        :involvementWithOrganizationsForm \n    ).\n\n:CVPrompt a ui:Comment; ui:contents  \"What organizations have you been involved with?\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n    ui:label \"Involvement with organization\";\n    ui:property org:member; \n    ui:reverse true; # link back from role to member\n    ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n    ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Involvement with organization\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n    ui:weight 3; \n    ui:parts ( \n        :MembershipFormHeading \n        :roleNameField\n        :escoOccupationField \n        :orgField \n        :RoleClassifier \n        :RoleDatesForm \n        :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n    ui:contents \"Details of the role\"@en, \"Détailes de ce rôle\"@fr .\n\n:roleNameField a ui:SingleLineTextField; \n    ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n        ui:label \"Occupation\";\n        ui:property org:role;\n        ui:dataSource :ESCO_Occupation_DataSource;\n        ui:targetClass schema:Occupation .\n\n    :ESCO_Occupation_DataSource a ui:DataSource;\n        schema:name \"ESCO\";\n        ui:targetClass schema:Occupation ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n:orgField a ui:Choice; \n    ui:label \"Organization\"@en, \"Organization\"@fr;\n    ui:canMintNew true; \n    ui:use :OrganizationCreationForm ;\n    ui:property org:organization;\n    ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n    ui:label \"What sort of role?\"@en;\n    ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n        [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n        [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n        [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n    :TwoDateForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( :StartDateForm :EndDateForm ) .\n    :StartDateForm a ui:DateField; \n        ui:label \"Start\"@en,\"Début\"@fr;\n        ui:property schema:startDate .\n    :EndDateForm a ui:DateField; \n        ui:label \"End\"@en,\"Fin\"@fr;\n        ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n    owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n    owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien rôle\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"Rôle actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"Rôle à venir\"@fr, \"Zukünftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n    ui:property schema:description;\n    ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n    schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( \n        :OrgClassifier \n        :OrgSwitch   \n        :OrganizationNameField \n        :homePageURIField  ) .\n\n:OrgClassifier a ui:Classifier; \n    ui:label \"Type of organization?\"@en;\n    ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n    ui:dependingOn rdf:type;\n    ui:case\n        [ ui:for schema:Corporation; ui:use :CorporationForm ],\n        [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n        [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n        [ ui:for schema:Project; ui:use :ProjectForm ],\n        [ ui:for schema:NGO; ui:use :NGOForm ],\n        [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n        [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n        [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField\n    a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n    ui:label \"Homepage\"@en;\n    ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf  (\n    # Airline - a Corporation\n    # Consortium - a Corporation or a NGO\n    schema:Corporation\n    schema:EducationalOrganization\n    schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n    # FundingScheme - eh?\n    schema:GovernmentOrganization\n    # LibrarySystem\n    # LocalBusiness - Corporation\n    # MedicalOrganization - a Corporation or a NGO\n    schema:NGO\n    # NewsMediaOrganization - a Corporation or a NGO\n    schema:PerformingGroup # a band\n    schema:Project # like Solid\n    schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n    rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organización de investigación\"@es, \n    \"منظمة البحث\"@ar, \"अनुसंधान संगठन\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n#####  Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :CorporationPrompt \n        :CorporationAutocomplete ) .\n\n    :CorporationPrompt a ui:Comment; ui:contents \"Corporation details\".\n\n    :CorporationAutocomplete a ui:AutocompleteField; \n        ui:label \"Find in wikidata\";\n        ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n        ui:property solid:publicId; \n        ui:dataSource :WikidataInstancesByName.\n\n        :WikidataInstancesByName a ui:DataSource ;\n            schema:name \"Wikidata instances by name\";\n            ui:endpoint \"https://query.wikidata.org/sparql\" ;\n            ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n            WHERE {\n                ?klass wdt:P279* $(targetClass) .\n                ?subject wdt:P31 ?klass .\n                ?subject rdfs:label ?name.\n                FILTER regex(?name, \"$(name)\", \"i\")\n            } LIMIT $(limit) \"\"\" ;\n\n            # Note this form of the query is very experimental\n            ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                ui:where { ?klass wdt:P279 ?targetClass .\n                            ?subject wdt:P31 ?klass; rdfs:label ?name .\n                            };\n            ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :GovernmentOrganizationPrompt \n        :GovernmentOrganizationAutocomplete ) .\n\n    :GovernmentOrganizationPrompt a ui:Comment; ui:contents \"Government organization details\".\n\n    :GovernmentOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n            ui:property solid:publicId; \n            ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :EducationalOrganizationPrompt \n        :EducationalOrganizationAutocomplete ) .\n\n    :EducationalOrganizationPrompt a ui:Comment; ui:contents \"Educational organization details\".\n\n    :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n                ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n                ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ResearchOrganizationPrompt \n        :ResearchOrganizationAutocomplete ) .\n\n    :ResearchOrganizationPrompt a ui:Comment; ui:contents \"Research organizationd details\".\n\n    :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n    ui:parts ( \n        :NGOPrompt \n        :NGOAutocomplete ) .\n\n    :NGOPrompt a ui:Comment; ui:contents \"NGO details\".\n\n    :NGOAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :PerformingGroupPrompt \n        :PerformingGroupAutocomplete ) .\n\n    :PerformingGroupPrompt a ui:Comment; ui:contents \"Performing group details\".\n\n    :PerformingGroupAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ProjectPrompt \n        :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n    :ProjectPrompt a ui:Comment; ui:contents \"Project details\".\n\n    :ProjectAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n:SportsOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :SportsOrganizationPrompt \n        :SportsOrganizationAutocomplete ) .\n\n:SportsOrganizationPrompt a ui:Comment; ui:contents \"Sports organization details\".\n\n:SportsOrganizationAutocomplete\n    a ui:AutocompleteField; ui:label \"Find in wikidata\";\n        ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n        ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n    ui:contents  \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n    ui:label \"Skills\";\n    ui:property schema:skills;\n    ui:ordered false; # Allow reader to order skills\n    ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n    :escoSkillField a ui:AutocompleteField;\n            ui:label \"Find in ESCO\";\n            ui:property solid:publicId;\n            ui:dataSource :ESCO_Skill_DataSource;\n            ui:targetClass schema:Skill .\n\n    :ESCO_Skill_DataSource a ui:DataSource;\n        schema:name \"ESCO skill\";\n        ui:targetClass esco:Skill ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents  \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"Languages\";\n    ui:property schema:knowsLanguage; \n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\";\n          ui:property solid:publicId; \n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Find in wikidata\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n        ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n            WHERE\n            { ?item wdt:P305 ?subject .\n            OPTIONAL {?item rdfs:label ?name}\n            OPTIONAL {?item wdt:P1705 ?name}\n            FILTER regex(?name, \"$(name)\", \"i\")\n            FILTER regex(?subject, \"^..$\", \"i\")\n            }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
+const resumeForm_namespaceObject = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n    a ui:Form ;\n    ui:parts (\n      :CVGroup\n      :SkillsHeading :SkillsForm\n      :LanguagesHeading :LanguagesForm\n      ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :ResumeHeading \n        :involvementWithOrganizationsForm \n    ).\n\n:ResumeHeading a ui:Heading; \n    ui:contents  \"Add your work experience\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n    ui:label \"work experience\";\n    ui:property org:member; \n    ui:reverse true; # link back from role to member\n    ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n    ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Work experience\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n    ui:weight 3; \n    ui:parts ( \n        :MembershipFormHeading\n        :RoleClassifier  \n        :roleNameField\n        :escoOccupationField \n        :orgField \n        :RoleDatesForm \n        :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n    ui:contents \"Details of the role\"@en, \"Détailes de ce rôle\"@fr .\n\n:roleNameField a ui:SingleLineTextField;\n    ui:label \"Job title\";\n    ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n    ui:label \"Find in occupation catalog\";\n    ui:property org:role;\n    ui:dataSource :ESCO_Occupation_DataSource;\n    ui:targetClass schema:Occupation .\n\n    :ESCO_Occupation_DataSource a ui:DataSource;\n        schema:name \"ESCO\";\n        ui:targetClass schema:Occupation ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n:orgField a ui:Choice; \n    ui:label \"For organization\"@en, \"Pour l'organisation\"@fr;\n    ui:canMintNew true; \n    ui:use :OrganizationCreationForm ;\n    ui:property org:organization;\n    ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n    ui:label \"Job type\"@en;\n    ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n        [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n        [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n        [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n    :TwoDateForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( :StartDateForm :EndDateForm ) .\n    :StartDateForm a ui:DateField; \n        ui:label \"Start\"@en,\"Début\"@fr;\n        ui:property schema:startDate .\n    :EndDateForm a ui:DateField; \n        ui:label \"End\"@en,\"Fin\"@fr;\n        ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n    owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n    owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien rôle\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"Rôle actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"Rôle à venir\"@fr, \"Zukünftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n    ui:property schema:description;\n    ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n    schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( \n        :OrgClassifier \n        :OrganizationNameField\n        :OrgSwitch\n        :homePageURIField  ) .\n\n:OrgClassifier a ui:Classifier; \n    ui:label \"Type\"@en;\n    ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n    ui:dependingOn rdf:type;\n    ui:case\n        [ ui:for schema:Corporation; ui:use :CorporationForm ],\n        [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n        [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n        [ ui:for schema:Project; ui:use :ProjectForm ],\n        [ ui:for schema:NGO; ui:use :NGOForm ],\n        [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n        [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n        [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n    ui:label \"Homepage\"@en;\n    ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf  (\n    # Airline - a Corporation\n    # Consortium - a Corporation or a NGO\n    schema:Corporation\n    schema:EducationalOrganization\n    schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n    # FundingScheme - eh?\n    schema:GovernmentOrganization\n    # LibrarySystem\n    # LocalBusiness - Corporation\n    # MedicalOrganization - a Corporation or a NGO\n    schema:NGO\n    # NewsMediaOrganization - a Corporation or a NGO\n    schema:PerformingGroup # a band\n    schema:Project # like Solid\n    schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n    rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organización de investigación\"@es, \n    \"منظمة البحث\"@ar, \"अनुसंधान संगठन\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n#####  Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :CorporationAutocomplete ) .\n\n    :CorporationAutocomplete a ui:AutocompleteField; \n        ui:label \"Find in wikidata\";\n        ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n        ui:property solid:publicId; \n        ui:dataSource :WikidataInstancesByName.\n\n        :WikidataInstancesByName a ui:DataSource ;\n            schema:name \"Wikidata instances by name\";\n            ui:endpoint \"https://query.wikidata.org/sparql\" ;\n            ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n            WHERE {\n                ?klass wdt:P279* $(targetClass) .\n                ?subject wdt:P31 ?klass .\n                ?subject rdfs:label ?name.\n                FILTER regex(?name, \"$(name)\", \"i\")\n            } LIMIT $(limit) \"\"\" ;\n\n            # Note this form of the query is very experimental\n            ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                ui:where { ?klass wdt:P279 ?targetClass .\n                            ?subject wdt:P31 ?klass; rdfs:label ?name .\n                            };\n            ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :GovernmentOrganizationAutocomplete ) .\n\n    :GovernmentOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n            ui:property solid:publicId; \n            ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :EducationalOrganizationAutocomplete ) .\n\n    :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n                ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n                ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ResearchOrganizationAutocomplete ) .\n\n    :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n    ui:parts ( \n        :NGOAutocomplete ) .\n\n    :NGOAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :PerformingGroupAutocomplete ) .\n\n    :PerformingGroupAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n    :ProjectAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n    :SportsOrganizationForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( \n            :SportsOrganizationAutocomplete ) .\n\n    :SportsOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n    ui:contents  \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n    ui:label \"skill\";\n    ui:property schema:skills;\n    ui:ordered false; # Allow reader to order skills\n    ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n    :escoSkillField a ui:AutocompleteField;\n            ui:label \"Find in skills catalog\";\n            ui:property solid:publicId;\n            ui:dataSource :ESCO_Skill_DataSource;\n            ui:targetClass schema:Skill .\n\n    :ESCO_Skill_DataSource a ui:DataSource;\n        schema:name \"ESCO skill\";\n        ui:targetClass esco:Skill ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents  \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"language\";\n    ui:property schema:knowsLanguage; \n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\";\n          ui:property solid:publicId; \n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Find in wikidata\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n        ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n            WHERE\n            { ?item wdt:P305 ?subject .\n            OPTIONAL {?item rdfs:label ?name}\n            OPTIONAL {?item wdt:P1705 ?name}\n            FILTER regex(?name, \"$(name)\", \"i\")\n            FILTER regex(?subject, \"^..$\", \"i\")\n            }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
 ;// ./src/editProfilePane/EditCVCard.ts
 
 
@@ -6206,13 +6874,7 @@ function EditCVSection(context, me, editableProfile, store) {
     heading.textContent = resumeHeadingText;
     header.appendChild(heading);
     section.appendChild(header);
-    if (editableProfile) {
-        const comment2 = context.dom.createElement('p');
-        comment2.classList.add('p-md');
-        comment2.textContent = 'Edit your resume. These will be publicly visible on your profile.';
-        section.appendChild(comment2);
-    }
-    else {
+    if (!editableProfile) {
         const comment1 = context.dom.createElement('p');
         comment1.classList.add('p-md');
         comment1.textContent = 'Login to add resume information to your profile.';
@@ -6223,7 +6885,7 @@ function EditCVSection(context, me, editableProfile, store) {
 }
 
 ;// ./src/ontology/otherPreferencesForm.ttl
-const otherPreferencesForm_namespaceObject = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Other preferences form\" ;\n    a ui:Form ;\n    ui:parts (\n      :styleGroup\n      :nicknameGroup\n      :pronounsGroup\n      ).\n\n:styleGroup a ui:Group; ui:weight 0; \n    ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n\n:styleHeading a ui:Heading; ui:contents \"The style of your public profile.\".\n\n:backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n    ui:label \"Background color\"; ui:default \"#ffffff\".\n:highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n    ui:label \"Highlight color\"; ui:default \"#000000\".\n\n# Nickname\n\n:nicknameGroup a ui:Group; ui:weight 0; \n    ui:parts ( :nicknameHeading :nicknameField) .\n\n:nicknameHeading a ui:Heading; ui:contents  \"What is your nickname?\" .\n\n:nicknameField a ui:SingleLineTextField; \n    ui:property foaf:nick;\n    ui:label \"Nickname\"@en, \"Nom court\"@fr.\n\n# Pronouns\n\n:pronounsGroup a ui:Group; ui:weight 0; \n    ui:parts ( :pronounsHeading :subjectPronounForm :objectPronounForm :relativePronounForm) .\n\n:pronounsHeading a ui:Heading; ui:contents  \"What are your pronouns?\" .\n\n:subjectPronounForm a ui:SingleLineTextField; ui:property solid:preferredSubjectPronoun;\n    ui:size 10; ui:label \"he/she/they...\" .\n:objectPronounForm a ui:SingleLineTextField; ui:property solid:preferredObjectPronoun;\n    ui:size 10; ui:label \"him/her/them...\" .\n:relativePronounForm a ui:SingleLineTextField; ui:property solid:preferredRelativePronoun;\n    ui:size 10; ui:label \"his/hers/theirs...\" .";
+const otherPreferencesForm_namespaceObject = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Other preferences form\" ;\n    a ui:Form ;\n    ui:parts (\n      :styleGroup\n      ).\n\n:styleGroup a ui:Group; ui:weight 0; \n    ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n\n:styleHeading a ui:Heading; ui:contents \"The style of your public profile\".\n\n:backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n    ui:label \"Background color\"; ui:default \"#ffffff\".\n:highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n    ui:label \"Highlight color\"; ui:default \"#000000\".";
 ;// ./src/editProfilePane/EditOtherPreferences.ts
 
 
@@ -6265,6 +6927,7 @@ function EditOtherPreferencesSection(context, me, editableProfile, store) {
 
 
 
+
 const editProfileView = {
     global: true,
     icon: external_UI_.icons.iconBase + 'noun_492246.svg',
@@ -6336,9 +6999,11 @@ const editProfileView = {
             // Other preferences Section
             main.appendChild(EditOtherPreferencesSection(context, me, editableProfile, store));
             // People you know Section
-            main.appendChild(EditFriendsSection(context, me, editableProfile, profile));
+            main.appendChild(EditFriendsSection(context, me, editableProfile));
             // Communities you participate in Section
-            main.appendChild(EditProfileCommunitiesSection(context, me, editableProfile, profile));
+            main.appendChild(EditProfileCommunitiesSection(context, me, editableProfile));
+            // Ensure keyboard navigation skips labels (including those rendered as links).
+            skipLabelsFromTabbing(main);
             main.setAttribute('aria-busy', 'false');
             main.focus();
         }).catch(error => {