profile-pane 3.2.1 → 3.2.2-test.0

package/lib/sections/social/SocialSection.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SocialCard = void 0;
-exports.renderSocialAccounts = renderSocialAccounts;
+exports.renderSocialSection = renderSocialSection;
 var _litHtml = require("lit-html");
-require("../../styles/SocialCard.css");
+require("solid-ui/components/actions/button");
+require("./SocialSection.css");
 var _texts = require("../../texts");
 var _SocialEditDialog = require("./SocialEditDialog");
 var _collapsibleSection = require("../shared/collapsibleSection");
@@ -17,39 +18,41 @@ function isRenderableAccount(account) {
 }
 function expandSocialAccounts(event) {
   const button = event.currentTarget;
-  const socialCard = button?.closest('.socialCard');
+  const socialCard = button?.closest('.social-card');
   if (!button || !socialCard) return;
   socialCard.setAttribute('data-mobile-expanded', 'true');
   button.setAttribute('aria-expanded', 'true');
   button.hidden = true;
 }
-const SocialCard = (SocialData, viewerMode) => {
-  void viewerMode;
+const SocialCard = (SocialData, _viewerMode) => {
   const accounts = (SocialData.accounts || []).filter(isRenderableAccount);
   const hiddenAccountsCount = Math.max(0, accounts.length - MAX_VISIBLE_SOCIAL_ACCOUNTS_MOBILE);
   if (accounts.length) {
     return (0, _litHtml.html)`
       <section
-        class="socialCard"
+        id="social-media"
+        class="social-card"
         aria-label="Social media"
-        data-testid="social-media"
-        data-mobile-expanded="${hiddenAccountsCount > 0 ? 'false' : 'true'}"
+        SocialData: SocialPresentation
       >
         <nav aria-label="Social media profiles">
-          <ul class="socialList list-reset" role="list">
+          <ul class="social-card__list" role="list">
             ${accounts.map(account => renderAccount(account))}
           </ul>
         </nav>
         ${hiddenAccountsCount > 0 ? (0, _litHtml.html)`
-              <button
+              <solid-ui-button
                 type="button"
-                class="socialCard__more-button"
+                variant="secondary"
+                size="sm"
+                label=${`${hiddenAccountsCount} more`}
+                class="social-card__more-button"
                 aria-controls="social-media"
                 aria-expanded="false"
                 @click=${expandSocialAccounts}
               >
                 ${hiddenAccountsCount} more
-              </button>
+              </solid-ui-button>
             ` : (0, _litHtml.html)``}
       </section>
     `;
@@ -57,15 +60,16 @@ const SocialCard = (SocialData, viewerMode) => {
   return (0, _litHtml.html)``;
   function renderAccount(account) {
     return (0, _litHtml.html)`
-      <li class="socialItem" role="listitem">
+      <li class="social-card__item" role="listitem">
         <a 
+          class="social-card__link"
           href="${account.homepage}" 
           target="_blank" 
           rel="noopener noreferrer" 
           aria-label="Visit ${account.name} profile (opens in new tab)"
         >
           <img 
-            class="socialIcon" 
+            class="social-card__icon" 
             src="${account.icon}" 
             alt="${account.name} icon"
             width="40"
@@ -94,38 +98,46 @@ function renderSocialSectionDefault(store, subject, socialData, viewerMode, onSa
   return showSection ? (0, _litHtml.html)`
         <section 
           aria-labelledby="social-heading" 
-          class="profile__section border-lighter profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
+          data-profile-section="social"
+          class="profile__section profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
           role="region"
           tabindex="-1"
           data-expanded="false"
         >
           <header class="profile__section-header profile-section-collapsible__header">
-            <h2 id="social-heading" tabindex="-1">${_texts.socialAccountsHeadingText}</h2>
-            <div class="profile-section-collapsible__actions flex-column">
+            <h3 id="social-heading" tabindex="-1">${_texts.socialAccountsHeadingText}</h3>
+            <div class="profile-section-collapsible__actions">
               ${isOwner ? (0, _litHtml.html)`
-                <button
+                <solid-ui-button
                   type="button"
-                  class="profile__action-button profile-action-text flex-center profile-section-collapsible__edit-button"
+                  variant="secondary"
+                  size="sm"
+                  class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
                   aria-label="Edit social accounts"
                   @click=${handleEdit}
                 >
-                  <span class="profile-section-collapsible__edit-label">${_profileIcons.editIcon} Edit</span>
+                  <span class="profile-section-collapsible__edit-label profile__add-more-content">
+                    <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+                    <span>Add More</span>
+                  </span>
                   <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-                </button>
+                </solid-ui-button>
               ` : (0, _litHtml.html)``}
-              <button
+              <solid-ui-button
                 type="button"
-                class="inline-flex-row"
+                variant="icon"
+                size="sm"
+                class="profile-section-collapsible__toggle-button"
                 aria-label="Toggle social accounts section"
                 aria-controls="social-panel"
                 aria-expanded="false"
                 @click=${_collapsibleSection.toggleCollapsibleSection}
               >
-                <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
-              </button>
+                <span slot="icon" class="profile-section-collapsible__chevron" aria-hidden="true">${_profileIcons.chevronDownIcon}</span>
+              </solid-ui-button>
             </div>
           </header>
-          <div id="social-panel" class="profile-section-collapsible__content" aria-hidden="true">
+          <div id="social-panel" class="profile-section-collapsible__content">
             ${renderSocialSectionContent(socialData, viewerMode)}
           </div>
         </section>
@@ -133,9 +145,9 @@ function renderSocialSectionDefault(store, subject, socialData, viewerMode, onSa
 }
 function renderOwnerEmptySocialContent(_store, _subject, _socialData, _viewerMode, _onSaved) {
   return (0, _litHtml.html)`
-      <div class="profile__empty-state-content flex-column-center" role="group" aria-label="Empty social accounts section">
+      <div class="profile__empty-state-content" role="group" aria-label="Empty social accounts section">
         <div class="social__empty-icon-wrapper">
-          <span class="social__empty-icon inline-flex-row">${_profileIcons.globeIcon}</span>
+          <span class="social__empty-icon">${_profileIcons.globeIcon}</span>
         </div>
         <p class="profile__empty-state-message social__empty-message">
             No social media links added yet.
@@ -148,47 +160,51 @@ function renderOwnerEmptySocialSection(store, subject, socialData, viewerMode, o
     <section 
       aria-labelledby="social-heading" 
       data-profile-section="social"
-      class="profile__section--empty border-lighter flex-column-center rounded-md gap-lg profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
+      class="profile__section--empty profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
       role="region"
       tabindex="-1"
       data-expanded="false"
     >
       <header class="profile__section-header profile-section-collapsible__header">
-        <h2 id="social-heading" tabindex="-1">${_texts.socialAccountsHeadingText}</h2>
-        <div class="profile-section-collapsible__actions flex-column">
-          <button
+        <h3 id="social-heading" tabindex="-1">${_texts.socialAccountsHeadingText}</h3>
+        <div class="profile-section-collapsible__actions">
+          <solid-ui-button
             type="button"
-            class="profile__action-button profile-action-text flex-center profile-section-collapsible__edit-button"
+            variant="secondary"
+            size="sm"
+            class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
             aria-label="Add social accounts"
             @click=${event => {
     return (0, _SocialEditDialog.createSocialEditDialog)(event, store, subject, socialData.accounts, viewerMode, onSaved);
   }}
           >
-            <span class="profile-section-collapsible__edit-label profile__add-more-content inline-flex-row">
-              <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-              Add Account
+            <span class="profile-section-collapsible__edit-label profile__add-more-content">
+              <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+              <span>Add More</span>
             </span>
             <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-          </button>
-          <button
+          </solid-ui-button>
+          <solid-ui-button
             type="button"
-            class="inline-flex-row"
+            variant="icon"
+            size="sm"
+            class="profile-section-collapsible__toggle-button"
             aria-label="Toggle social accounts section"
             aria-controls="social-panel"
             aria-expanded="false"
             @click=${_collapsibleSection.toggleCollapsibleSection}
           >
-            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
-          </button>
+            <span slot="icon" class="profile-section-collapsible__chevron" aria-hidden="true">${_profileIcons.chevronDownIcon}</span>
+          </solid-ui-button>
         </div>
       </header>
-      <div id="social-panel" class="profile-section-collapsible__content" aria-hidden="true">
+      <div id="social-panel" class="profile-section-collapsible__content">
         ${renderOwnerEmptySocialContent(store, subject, socialData, viewerMode, onSaved)}
       </div>
     </section>
   `;
 }
-function renderSocialAccounts(store, subject, socialData, viewerMode, onSaved) {
+function renderSocialSection(store, subject, socialData, viewerMode, onSaved) {
   const safeSocialData = socialData || {
     accounts: []
   };

package/lib/sections/social/mutations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/social/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,SAAS,EAA0B,MAAM,QAAQ,CAAA;AAEhF,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAoYvD,wBAAsB,sBAAsB,CAC3C,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,YAAY,EAAE,kBAAkB,EAChC,WAAW,CAAC,EAAE,SAAS,EAAE,iBAQzB"}
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/social/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,SAAS,EAA0B,MAAM,QAAQ,CAAA;AAEjF,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAwQvD,wBAAsB,sBAAsB,CAC3C,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,YAAY,EAAE,kBAAkB,EAChC,WAAW,CAAC,EAAE,SAAS,EAAE,iBASzB"}

package/lib/sections/social/mutations.js

@@ -12,6 +12,7 @@ var _texts = require("../../texts");
 var _helpers = require("./helpers");
 var _selectors = require("./selectors");
 var _rdfList = require("../shared/rdfList");
+var _debug = require("../../utils/debug");
 /* The code below for handling reordering were generated by AI Model: GPT-5.3-Codex. */
 /* Prompt: can you implement on SocialEditDialog add the bentoIcon as the first item 
 on the row, you should be able to drag this button around and it should allow you 
@@ -20,33 +21,10 @@ that happen for this data. */
 
 const SOCIAL_ONTOLOGY_NS = 'https://solidos.github.io/profile-pane/src/ontology/socialMedia.ttl#';
 function ensureSocialPrefix(store) {
-  const anyStore = store;
-  if (typeof anyStore.setPrefixForURI === 'function') {
-    anyStore.setPrefixForURI('soc', SOCIAL_ONTOLOGY_NS);
-    return;
-  }
-  if (!anyStore.namespaces) {
-    anyStore.namespaces = {};
-  }
-  anyStore.namespaces.soc = SOCIAL_ONTOLOGY_NS;
-}
-function isSocialPatchDebugEnabled() {
-  const debugFlag = globalThis?.__PROFILE_PANE_SOCIAL_DEBUG__;
-  return debugFlag === true || debugFlag === '1' || debugFlag === 'true';
-}
-function statementDebugValue(term) {
-  if (!term) return '';
-  if (typeof term.toNT === 'function') return term.toNT();
-  if (typeof term.value === 'string') return term.value;
-  return String(term);
+  (0, _rdfMutationHelpers.registerStorePrefix)(store, 'soc', SOCIAL_ONTOLOGY_NS);
 }
-function statementToDebugObject(statement) {
-  return {
-    subject: statementDebugValue(statement?.subject),
-    predicate: statementDebugValue(statement?.predicate),
-    object: statementDebugValue(statement?.object),
-    graph: statementDebugValue(statement?.why)
-  };
+function nodeKey(node) {
+  return `${node.termType}:${node.value}`;
 }
 function toObjectNode(value) {
   const normalized = (value || '').trim();
@@ -114,93 +92,6 @@ function buildSocialStatements(doc, node, row, accountOption) {
   }
   return inserts;
 }
-function statementKey(statement) {
-  return `${statement.subject?.toNT?.() || statement.subject?.value} ${statement.predicate?.toNT?.() || statement.predicate?.value} ${statement.object?.toNT?.() || statement.object?.value} ${statement.why?.toNT?.() || statement.why?.value}`;
-}
-function uniqueStatements(statements) {
-  return Array.from(new Map((statements || []).map(statement => [statementKey(statement), statement])).values());
-}
-function buildRdfListStatements(doc, items) {
-  if (!items.length) {
-    return {
-      head: _solidUi.ns.rdf('nil'),
-      statements: []
-    };
-  }
-  const listNodes = items.map(() => (0, _rdflib.blankNode)());
-  const statements = [];
-  items.forEach((item, index) => {
-    const current = listNodes[index];
-    const next = listNodes[index + 1] || _solidUi.ns.rdf('nil');
-    statements.push((0, _rdflib.st)(current, _solidUi.ns.rdf('first'), item, doc));
-    statements.push((0, _rdflib.st)(current, _solidUi.ns.rdf('rest'), next, doc));
-  });
-  return {
-    head: listNodes[0],
-    statements
-  };
-}
-function isPatchFailure(message) {
-  const text = (message || '').toLowerCase();
-  return text.includes(' on patch ') || text.includes('web error: 400') || text.includes('web error: 405') || text.includes('web error: 501');
-}
-function sanitizePatchStatements(store, deletions, insertions) {
-  const safeDeletions = Array.from(new Map((deletions || []).filter(statement => {
-    if (!statement || !statement.subject || !statement.predicate || !statement.object) return false;
-    if (store.holds(statement.subject, statement.predicate, statement.object, statement.why)) return true;
-    return store.statementsMatching(statement.subject, statement.predicate, statement.object, statement.why).length > 0;
-  }).map(statement => [statementKey(statement), statement])).values());
-  const safeInsertions = Array.from(new Map((insertions || []).filter(statement => Boolean(statement && statement.subject && statement.predicate && statement.object)).map(statement => [statementKey(statement), statement])).values());
-  return {
-    safeDeletions,
-    safeInsertions
-  };
-}
-async function runPutFallback(store, doc, deletions, insertions) {
-  const updater = store.updater;
-  const fetcher = store.fetcher;
-  if (!updater || typeof updater.serialize !== 'function' || !fetcher || typeof fetcher.webOperation !== 'function') {
-    throw new Error('Social updates are not supported by this store updater.');
-  }
-  const currentStatements = store.statementsMatching(undefined, undefined, undefined, doc).slice();
-  const deletionKeys = new Set((deletions || []).map(statement => statementKey(statement)));
-  const nextStatements = currentStatements.filter(statement => !deletionKeys.has(statementKey(statement))).concat(insertions || []);
-  const contentType = 'text/turtle';
-  const body = updater.serialize(doc.value, nextStatements, contentType);
-  const response = await fetcher.webOperation('PUT', doc.value, {
-    noMeta: true,
-    contentType,
-    body
-  });
-  if (!response || response.ok !== true) {
-    const status = response?.status || 'unknown';
-    throw new Error(`Web error: ${status} on PUT of <${doc.value}>`);
-  }
-  store.remove(deletions);
-  insertions.forEach(statement => {
-    store.add(statement.subject, statement.predicate, statement.object, statement.why);
-  });
-}
-async function applySocialPatchWithFallback(store, doc, deletions, insertions) {
-  if (!store.updater) {
-    throw new Error(_texts.updaterUnsupportedStoreErrorMessageText);
-  }
-  const {
-    safeDeletions,
-    safeInsertions
-  } = sanitizePatchStatements(store, deletions, insertions);
-  if (safeDeletions.length === 0 && safeInsertions.length === 0) {
-    return;
-  }
-  try {
-    await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, safeDeletions, safeInsertions);
-    return;
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    if (!isPatchFailure(message)) throw error;
-  }
-  await runPutFallback(store, doc, safeDeletions, safeInsertions);
-}
 function collectListChainNodes(store, listHead, doc) {
   if (!store.any(listHead, _solidUi.ns.rdf('first'), null, doc)) return [];
   const visited = new Set();
@@ -253,8 +144,9 @@ async function mutateSocialEntries(store, subject, socialOps, orderedRows) {
     status: 'existing'
   }));
   const nextRows = orderedRows && orderedRows.length ? rowsFromOrderedInput(orderedRows) : mergeSocialOps(existingRows, socialOps);
+  const canForcePut = Boolean(store.updater?.serialize && store.fetcher?.webOperation);
   const accountObjects = store.each(subject, _solidUi.ns.foaf('account'), null, doc);
-  const existingListNodes = uniqueStatements(accountObjects.flatMap(objectNode => {
+  const existingListNodes = (0, _rdfMutationHelpers.uniqueStatements)(accountObjects.flatMap(objectNode => {
     return collectListChainNodes(store, objectNode, doc).flatMap(node => store.statementsMatching(node, null, null, doc));
   }));
   const existingAccountNodes = Array.from(new Map(accountObjects.flatMap(objectNode => (0, _rdfList.expandRdfList)(store, objectNode)).filter(node => node.termType === 'NamedNode').map(node => [`${node.termType}:${node.value}`, node])).values());
@@ -265,34 +157,33 @@ async function mutateSocialEntries(store, subject, socialOps, orderedRows) {
     }
     return (0, _idNodeFactory.createIdNode)(doc);
   });
+  const retainedAccountNodeKeys = new Set(rowEntryNodes.map(node => nodeKey(node)));
+  const retainedAccountNodes = existingAccountNodes.filter(node => retainedAccountNodeKeys.has(nodeKey(node)));
+  const removedAccountNodes = existingAccountNodes.filter(node => !retainedAccountNodeKeys.has(nodeKey(node)));
   const insertions = [];
   if (rowEntryNodes.length > 0) {
-    const rdfList = buildRdfListStatements(doc, rowEntryNodes);
-    insertions.push((0, _rdflib.st)(subject, _solidUi.ns.foaf('account'), rdfList.head, doc));
-    insertions.push(...rdfList.statements);
+    insertions.push((0, _rdflib.st)(subject, _solidUi.ns.foaf('account'), new _rdflib.Collection(rowEntryNodes), doc));
   }
   nextRows.forEach((row, index) => {
     insertions.push(...buildSocialStatements(doc, rowEntryNodes[index], row, optionForRow(row)));
   });
-  const deletions = uniqueStatements([...store.statementsMatching(subject, _solidUi.ns.foaf('account'), null, doc), ...existingListNodes, ...existingAccountNodes.flatMap(node => (0, _rdfMutationHelpers.collectNodeStatements)(store, node, doc))]);
-  if (isSocialPatchDebugEnabled()) {
-    console.log('[social-mutations] patch payload', {
-      subject: subject.value,
-      doc: doc.value,
-      nextRows,
-      deletionsCount: deletions.length,
-      insertionsCount: insertions.length,
-      deletions: deletions.map(statementToDebugObject),
-      insertions: uniqueStatements(insertions).map(statementToDebugObject)
-    });
-  }
-  await applySocialPatchWithFallback(store, doc, deletions, uniqueStatements(insertions));
+  const deletions = (0, _rdfMutationHelpers.uniqueStatements)([...store.statementsMatching(subject, _solidUi.ns.foaf('account'), null, doc), ...existingListNodes, ...removedAccountNodes.flatMap(node => (0, _rdfMutationHelpers.collectNodeStatements)(store, node, doc)), ...retainedAccountNodes.flatMap(node => [...store.statementsMatching(node, _solidUi.ns.rdf('type'), null, doc), ...store.statementsMatching(node, _solidUi.ns.foaf('accountName'), null, doc), ...store.statementsMatching(node, _solidUi.ns.foaf('homepage'), null, doc), ...store.statementsMatching(node, _solidUi.ns.foaf('icon'), null, doc), ...store.statementsMatching(node, _solidUi.ns.rdfs('label'), null, doc)])]);
+  await (0, _rdfMutationHelpers.runUpdateTransport)(store, doc, deletions, (0, _rdfMutationHelpers.uniqueStatements)(insertions), {
+    unsupportedMessage: 'Social updates are not supported by this store updater.',
+    failureMessage: 'Failed to save updates',
+    forcePut: canForcePut,
+    useDavFallback: !canForcePut,
+    usePutFallback: true
+  });
 }
 async function processSocialMutations(store, subject, mutationPlan, orderedRows) {
   try {
     await mutateSocialEntries(store, subject, mutationPlan, orderedRows);
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`${_texts.saveSocialUpdatesFailedPrefixText} ${message}`);
+    const rootError = error instanceof Error ? error : new Error(String(error));
+    (0, _debug.error)(_texts.socialMutationSaveFailedDebugText, rootError);
+    throw new Error(_texts.saveSocialUpdatesFailedMessageText, {
+      cause: rootError
+    });
   }
 }

package/lib/specialButtons/AddMeToYourFriends.css

@@ -0,0 +1,54 @@
+.profile-friends-button__section {
+  --profile-friends-button-color: var(--color-primary, #7C4DFF);
+  width: 100%;
+  min-width: 0;
+  display: grid;
+}
+
+.profile-friends-button__section[hidden] {
+  display: none !important;
+}
+
+.profile-friends-button__section solid-ui-button.profile__btn-friends {
+  width: 100%;
+  min-width: 0;
+  --button-hover-background: var(--profile-friends-button-color);
+  --button-hover-border: var(--profile-friends-button-color);
+  --button-hover-text: var(--color-text-on-action, var(--white, #FFF));
+}
+
+.profile-friends-button__section solid-ui-button.profile__btn-friends[disabled],
+.profile-friends-button__section solid-ui-button.profile__btn-friends[aria-disabled="true"] {
+  pointer-events: none;
+  --button-hover-background: var(--button-background, transparent);
+  --button-hover-border: var(--button-border, var(--profile-friends-button-color));
+  --button-hover-text: var(--button-text, var(--profile-friends-button-color));
+}
+
+.profile-friends-button__section .profile__btn-friends-label {
+  color: var(--profile-friends-button-color);
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: var(--font-weight-md, 500);
+  line-height: 1;
+  letter-spacing: -0.01em;
+}
+
+.profile-friends-button__section solid-ui-button.profile__btn-friends:not([disabled]):hover .profile__btn-friends-label,
+.profile-friends-button__section solid-ui-button.profile__btn-friends:not([disabled]):focus-visible .profile__btn-friends-label,
+.profile-friends-button__section solid-ui-button.profile__btn-friends:not([aria-disabled="true"]):hover .profile__btn-friends-label,
+.profile-friends-button__section solid-ui-button.profile__btn-friends:not([aria-disabled="true"]):focus-visible .profile__btn-friends-label {
+  color: var(--color-text-on-action, var(--white, #FFF));
+}
+
+.profile-friends-button__section .profile__btn-friends-label--short {
+  display: none;
+}
+
+.profile-friends-button__section .profile__btn-friends-label--short::before {
+  content: attr(data-short-label-text);
+}
+
+.profile-friends-button__container input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+}