profile-pane 3.1.4 → 3.2.0

package/lib/sections/skills/selectors.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presentSkillDetails = presentSkillDetails;
+exports.presentSkills = presentSkills;
+exports.skillAsText = skillAsText;
+var _solidUi = require("solid-ui");
+function skillAsText(store, sk) {
+  if (sk.termType === 'Literal') return '';
+  const directName = store.anyJS(sk, _solidUi.ns.schema('name'));
+  if (directName) return directName;
+
+  // Canonical shape: entry node -> solid:publicId -> schema:name.
+  const publicId = store.any(sk, _solidUi.ns.solid('publicId'));
+  if (publicId && publicId.termType === 'NamedNode') {
+    const name = store.anyJS(publicId, _solidUi.ns.schema('name'));
+    if (name) return name;
+    return _solidUi.utils.label(publicId, true);
+  }
+  return '';
+}
+function presentSkillDetails(subject, store) {
+  return store.each(subject, _solidUi.ns.schema('skills')).filter(sk => sk.termType !== 'Literal').map(sk => {
+    const publicId = store.any(sk, _solidUi.ns.solid('publicId'));
+    const publicIdUri = publicId ? publicId.value : '';
+    return {
+      name: skillAsText(store, sk),
+      publicId: publicIdUri,
+      entryNode: sk
+    };
+  }).filter(detail => detail.name !== '');
+}
+function presentSkills(subject, store) {
+  return presentSkillDetails(subject, store).map(detail => detail.name);
+}

package/lib/sections/skills/types.d.ts

@@ -0,0 +1,14 @@
+import { Node } from 'rdflib';
+import { RowStatus } from '../shared/types';
+export interface SkillFields {
+    name: string;
+    publicId: string;
+}
+export interface SkillDetails extends SkillFields {
+    entryNode: Node;
+}
+export interface SkillRow extends SkillFields {
+    entryNode: string;
+    status: RowStatus;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/sections/skills/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,SAAS,EAAE,IAAI,CAAA;CAChB;AAED,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,SAAS,CAAA;CAClB"}

package/lib/sections/skills/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/sections/social/SocialEditDialog.d.ts

@@ -0,0 +1,7 @@
+import type { Account } from './types';
+import '../../styles/ContactInfoEditDialog.css';
+import '../../styles/EditDialogs.css';
+import { LiveStore, NamedNode } from 'rdflib';
+import { ViewerMode } from '../../types';
+export declare function createSocialEditDialog(event: Event, store: LiveStore, subject: NamedNode, socialAccounts: Account[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): Promise<void>;
+//# sourceMappingURL=SocialEditDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAa,MAAM,SAAS,CAAA;AACjD,OAAO,wCAAwC,CAAA;AAC/C,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAuYxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,cAAc,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA6CrC"}

package/lib/sections/social/SocialEditDialog.js

@@ -0,0 +1,362 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSocialEditDialog = createSocialEditDialog;
+var _dialog = require("../../ui/dialog");
+var _litHtml = require("lit-html");
+require("../../styles/ContactInfoEditDialog.css");
+require("../../styles/EditDialogs.css");
+var _rowState = require("../shared/rowState");
+var _textUtils = require("../../textUtils");
+var _mutations = require("./mutations");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _texts = require("../../texts");
+var _constants = require("./constants");
+var _helpers = require("./helpers");
+/* 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 
+to change the order of the rows and that should change the order in the mutations 
+that happen for this data. */
+
+function sanitizeSocialFieldValue(value) {
+  return (0, _textUtils.sanitizeTextValue)(value);
+}
+function sanitizeUrlFieldValue(value) {
+  return (0, _textUtils.sanitizeTextValue)(value).replace(/\s+/g, '');
+}
+function isValidProfileUrl(value) {
+  const normalized = (value || '').trim();
+  if (!normalized) return false;
+  try {
+    const parsed = new URL(normalized);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+function rowHasContent(row) {
+  // A social account is considered meaningful only when a personal profile URL is set.
+  return (0, _textUtils.hasNonEmptyText)(row.homepage);
+}
+function toFormState(socialAccounts) {
+  const rows = (socialAccounts || []).map(account => ({
+    name: sanitizeSocialFieldValue((0, _textUtils.toText)(account.name)),
+    icon: sanitizeSocialFieldValue((0, _textUtils.toText)(account.icon)),
+    homepage: sanitizeSocialFieldValue((0, _textUtils.toText)(account.homepage)),
+    entryNode: (0, _textUtils.toText)(account.entryNode),
+    status: (0, _textUtils.toText)(account.entryNode) ? 'existing' : 'new'
+  })).filter(row => Boolean(row.name || row.icon || row.homepage || row.entryNode));
+  return {
+    socialAccounts: rows.length ? rows : [{
+      name: '',
+      icon: '',
+      homepage: '',
+      entryNode: '',
+      status: 'new'
+    }],
+    initialExistingOrder: []
+  };
+}
+function hasOrderChanged(rows, initialExistingOrder) {
+  const currentExistingOrder = rows.filter(row => row.status !== 'deleted' && Boolean((row.entryNode || '').trim())).map(row => (row.entryNode || '').trim());
+  if (currentExistingOrder.length !== initialExistingOrder.length) return true;
+  for (let i = 0; i < currentExistingOrder.length; i++) {
+    if (currentExistingOrder[i] !== initialExistingOrder[i]) return true;
+  }
+  return false;
+}
+function validateSocialBeforeSave(rows, initialExistingOrder) {
+  const ops = (0, _rowState.summarizeRowOps)(rows, rowHasContent);
+  const hasChanges = ops.create.length > 0 || ops.update.length > 0 || ops.remove.length > 0;
+  const orderChanged = hasOrderChanged(rows, initialExistingOrder);
+  if (!hasChanges && !orderChanged) return 'No social changes detected.';
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    if (!row || row.status === 'deleted') continue;
+    const hasAnyValue = [row.name, row.icon, row.homepage].some(_textUtils.hasNonEmptyText);
+    if (!hasAnyValue) continue;
+    if (!(0, _textUtils.hasNonEmptyText)(row.name) || !(0, _textUtils.hasNonEmptyText)(row.icon)) {
+      return `Social account ${i + 1}: please choose an account type from the dropdown.`;
+    }
+    if (!(0, _textUtils.hasNonEmptyText)(row.homepage)) {
+      return `Social account ${i + 1}: please enter your personal profile link.`;
+    }
+    if (!isValidProfileUrl(row.homepage || '')) {
+      return `Social account ${i + 1}: profile link must be a valid http(s) URL.`;
+    }
+  }
+  return null;
+}
+function renderSocialAccountInputSelect(row, rowIndex, options, onChange) {
+  const selected = (0, _helpers.findSocialAccountOption)(options, row?.name || '');
+  const selectedLabel = selected?.label || '';
+  return (0, _litHtml.html)`
+    <select
+      class="profile-edit-dialog__social-account-select"
+      name=${`social-account-type-${rowIndex}`}
+      data-row-index=${String(rowIndex)}
+      autocomplete="off"
+      @change=${onChange}
+    >
+      <option value="">Select</option>
+      ${options.map(option => (0, _litHtml.html)`
+        <option value=${option.label} ?selected=${option.label === selectedLabel}>${option.label}</option>
+      `)}
+    </select>
+  `;
+}
+function renderSocialInputRow({
+  rows,
+  index,
+  displayIndex,
+  onDelete,
+  onChange,
+  options,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  isDropTarget
+}) {
+  const row = rows[index];
+  const nameLabel = `Social Account Name ${displayIndex + 1}`;
+  const homepageLabel = `Social Account Homepage ${displayIndex + 1}`;
+  const handleTextInput = field => event => {
+    const target = event.target;
+    const nextValue = field === 'homepage' ? sanitizeUrlFieldValue(target.value) : sanitizeSocialFieldValue(target.value);
+    if (rows[index]) {
+      (0, _rowState.applyRowFieldChange)(rows[index], field, nextValue, rowHasContent);
+      onChange();
+    }
+  };
+  const handleAccountTypeInput = event => {
+    const target = event.target;
+    const selected = (0, _helpers.findSocialAccountOption)(options, target.value);
+    if (!rows[index]) return;
+    if (!selected) {
+      (0, _rowState.applyRowFieldChange)(rows[index], 'name', '', rowHasContent);
+      (0, _rowState.applyRowFieldChange)(rows[index], 'icon', '', rowHasContent);
+      onChange();
+      return;
+    }
+    (0, _rowState.applyRowFieldChange)(rows[index], 'name', selected.label, rowHasContent);
+    (0, _rowState.applyRowFieldChange)(rows[index], 'icon', selected.icon || _constants.DEFAULT_ICON_URI, rowHasContent);
+    onChange();
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  return (0, _litHtml.html)`
+    <div
+      class="profile-edit-dialog__row profile-edit-dialog__row--social ${isDropTarget ? 'profile-edit-dialog__row--drop-target' : ''}"
+      @dragover=${event => onDragOver(event)}
+      @drop=${() => onDrop(index)}
+    >
+      <button
+        type="button"
+        class="profile-edit-dialog__drag-handle"
+        aria-label=${`Reorder social account ${displayIndex + 1}`}
+        title="Drag to reorder"
+        draggable="true"
+        @dragstart=${() => onDragStart(index)}
+        @dragend=${() => onDragEnd()}
+      >
+        ${_profileIcons.bentoIcon}
+      </button>
+      <img 
+        class="profile-edit-dialog__social-icon" 
+        src="${row?.icon || _constants.DEFAULT_ICON_URI}" 
+        alt="${row?.name || 'Social'} icon"
+        width="30"
+        height="30"
+        loading="lazy"
+      />
+      <label aria-label=${nameLabel} class="label profile-edit-dialog__field profile-edit-dialog__field--social-type">
+        ${renderSocialAccountInputSelect(row, index, options, handleAccountTypeInput)}
+      </label>
+      <label aria-label=${homepageLabel} class="label profile-edit-dialog__field profile-edit-dialog__field--social-url">
+        <input
+          class="input"
+          type="url"
+          name=${`social-homepage-${index}`}
+          .value=${row?.homepage || ''}
+          data-contact-field="homepage"
+          data-entry-node=${row?.entryNode || ''}
+          data-row-status=${row?.status || 'n/a'}
+          placeholder="Profile URL"
+          autocomplete="url"
+          inputmode="url"
+          required
+          @input=${handleTextInput('homepage')}
+        />
+          <small class="profile-edit-dialog__input-help-text">Paste your full profile URL (for example: https://example.com/username)</small>
+      </label>
+      <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete social account ${displayIndex + 1}`}
+          title=${_texts.deleteEntryButtonTitleText}
+          @click=${handleDelete}
+        >
+          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </button>
+      </div>
+    </div>
+  `;
+}
+function renderSocialSection(rows, options, onRerender) {
+  let dragSourceIndex = null;
+  let dropTargetIndex = null;
+  const reorderRows = (from, to) => {
+    if (from === to) return;
+    const row = rows[from];
+    if (!row) return;
+    rows.splice(from, 1);
+    rows.splice(to, 0, row);
+  };
+  const handleDragStart = index => {
+    dragSourceIndex = index;
+    dropTargetIndex = index;
+  };
+  const handleDragOver = event => {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+  };
+  const handleDrop = index => {
+    if (dragSourceIndex === null) return;
+    reorderRows(dragSourceIndex, index);
+    dragSourceIndex = null;
+    dropTargetIndex = null;
+    onRerender();
+  };
+  const handleDragEnd = () => {
+    dragSourceIndex = null;
+    dropTargetIndex = null;
+  };
+  const visibleRows = rows.map((row, index) => ({
+    row,
+    index
+  })).filter(({
+    row
+  }) => row.status !== 'deleted');
+  return (0, _litHtml.html)`
+    <section class="profile-edit-dialog__section" aria-label="Social Accounts">
+      <fieldset>
+        <legend class="sr-only">Social account entries</legend>
+        ${visibleRows.map(({
+    index
+  }, displayIndex) => renderSocialInputRow({
+    rows,
+    index,
+    displayIndex,
+    onDelete: () => {
+      (0, _rowState.deleteRow)(rows, index);
+      onRerender();
+    },
+    onChange: onRerender,
+    options,
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    onDragEnd: handleDragEnd,
+    isDropTarget: dropTargetIndex === index
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function focusSocialField(form, selector) {
+  const nextField = form.querySelector(selector);
+  if (!nextField || typeof nextField.focus !== 'function') return;
+  nextField.scrollIntoView({
+    block: 'start',
+    behavior: 'auto'
+  });
+  nextField.focus();
+}
+function renderSocialEditTemplate(form, formState, store, viewerMode, rerenderOptions = {}) {
+  const rerender = (nextOptions = {}) => renderSocialEditTemplate(form, formState, store, viewerMode, nextOptions);
+  const socialOptions = (0, _helpers.getSocialAccountOptions)(store);
+  (0, _litHtml.render)((0, _litHtml.html)`
+    ${renderSocialSection(formState.socialAccounts, socialOptions, rerender)}
+    ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
+  `, form);
+  if (rerenderOptions.focusSelector) {
+    focusSocialField(form, rerenderOptions.focusSelector);
+  }
+}
+function createSocialEditForm(details, store, viewerMode) {
+  const form = document.createElement('form');
+  form.classList.add('profile__edit-form');
+  const formState = toFormState(details);
+  formState.initialExistingOrder = formState.socialAccounts.filter(row => Boolean((row.entryNode || '').trim())).map(row => (row.entryNode || '').trim());
+  renderSocialEditTemplate(form, formState, store, viewerMode);
+  const addRow = () => {
+    formState.socialAccounts.unshift({
+      name: '',
+      icon: '',
+      homepage: '',
+      entryNode: '',
+      status: 'new'
+    });
+    renderSocialEditTemplate(form, formState, store, viewerMode, {
+      focusSelector: '[name="social-account-type-0"]'
+    });
+  };
+  return {
+    form,
+    formState,
+    addRow
+  };
+}
+async function createSocialEditDialog(event, store, subject, socialAccounts, viewerMode, onSaved) {
+  const dom = event.currentTarget?.ownerDocument || document;
+  const {
+    form,
+    formState,
+    addRow
+  } = createSocialEditForm(socialAccounts, store, viewerMode);
+  const result = await (0, _dialog.openInputDialog)({
+    title: _texts.editSocialDialogTitleText,
+    dom,
+    form,
+    headerAction: {
+      type: 'button',
+      label: '+ Add More',
+      ariaLabel: 'Add another social account',
+      onClick: addRow
+    },
+    submitLabel: _texts.dialogSubmitLabelText,
+    cancelLabel: _texts.dialogCancelLabelText,
+    validate: () => {
+      if (viewerMode !== 'owner') {
+        return _texts.ownerLoginRequiredDialogMessageText;
+      }
+      return validateSocialBeforeSave(formState.socialAccounts, formState.initialExistingOrder);
+    },
+    onSave: async () => {
+      const socialOps = (0, _rowState.summarizeRowOps)(formState.socialAccounts, rowHasContent);
+      const plan = {
+        create: socialOps.create,
+        update: socialOps.update,
+        remove: socialOps.remove
+      };
+      await (0, _mutations.processSocialMutations)(store, subject, plan, formState.socialAccounts);
+    },
+    formatSaveError: error => {
+      const message = error instanceof Error ? error.message : String(error);
+      return message.startsWith(_texts.saveSocialUpdatesFailedPrefixText) ? message : `${_texts.saveSocialUpdatesFailedPrefixText} ${message}`;
+    }
+  });
+  if (!result) return;
+  if (onSaved) {
+    await onSaved();
+  }
+}

package/lib/sections/social/SocialSection.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit-html';
+import { SocialPresentation } from './types';
+import { ViewerMode } from '../../types';
+import '../../styles/SocialCard.css';
+import { LiveStore, NamedNode } from 'rdflib';
+export declare const SocialCard: (SocialData: SocialPresentation, viewerMode: ViewerMode) => TemplateResult;
+export declare function renderSocialAccounts(store: LiveStore, subject: NamedNode, socialData: SocialPresentation, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): TemplateResult<1> | "";
+//# sourceMappingURL=SocialSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialSection.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialSection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAW,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,6BAA6B,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAoB7C,eAAO,MAAM,UAAU,GACrB,YAAY,kBAAkB,EAC9B,YAAY,UAAU,KACrB,cA6DF,CAAA;AAwJD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,kBAAkB,EAC9B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,0BAYrC"}

package/lib/sections/social/SocialSection.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SocialCard = void 0;
+exports.renderSocialAccounts = renderSocialAccounts;
+var _litHtml = require("lit-html");
+require("../../styles/SocialCard.css");
+var _texts = require("../../texts");
+var _SocialEditDialog = require("./SocialEditDialog");
+var _collapsibleSection = require("../shared/collapsibleSection");
+var _profileIcons = require("../../icons-svg/profileIcons");
+const MAX_VISIBLE_SOCIAL_ACCOUNTS_MOBILE = 10;
+function isRenderableAccount(account) {
+  return Boolean(account?.homepage && account?.name && account?.icon);
+}
+function expandSocialAccounts(event) {
+  const button = event.currentTarget;
+  const socialCard = button?.closest('.socialCard');
+  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 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"
+        aria-label="Social media"
+        data-testid="social-media"
+        data-mobile-expanded="${hiddenAccountsCount > 0 ? 'false' : 'true'}"
+      >
+        <nav aria-label="Social media profiles">
+          <ul class="socialList list-reset" role="list">
+            ${accounts.map(account => renderAccount(account))}
+          </ul>
+        </nav>
+        ${hiddenAccountsCount > 0 ? (0, _litHtml.html)`
+              <button
+                type="button"
+                class="socialCard__more-button"
+                aria-controls="social-media"
+                aria-expanded="false"
+                @click=${expandSocialAccounts}
+              >
+                ${hiddenAccountsCount} more
+              </button>
+            ` : (0, _litHtml.html)``}
+      </section>
+    `;
+  }
+  return (0, _litHtml.html)``;
+  function renderAccount(account) {
+    return (0, _litHtml.html)`
+      <li class="socialItem" role="listitem">
+        <a 
+          href="${account.homepage}" 
+          target="_blank" 
+          rel="noopener noreferrer" 
+          aria-label="Visit ${account.name} profile (opens in new tab)"
+        >
+          <img 
+            class="socialIcon" 
+            src="${account.icon}" 
+            alt="${account.name} icon"
+            width="40"
+            height="40"
+            loading="lazy"
+          />
+        </a>
+      </li>
+    `;
+  }
+};
+exports.SocialCard = SocialCard;
+function renderSocialSectionContent(socialData, viewerMode) {
+  const hasAccounts = socialData.accounts && socialData.accounts.length > 0;
+  return (0, _litHtml.html)`
+    ${hasAccounts ? SocialCard(socialData, viewerMode) : (0, _litHtml.html)`<p>No social accounts added yet.</p>`}
+  `;
+}
+function renderSocialSectionDefault(store, subject, socialData, viewerMode, onSaved) {
+  // const hasAccounts = socialData.accounts && socialData.accounts.length > 0
+  const showSection = true;
+  const isOwner = viewerMode === 'owner';
+  const handleEdit = event => {
+    return (0, _SocialEditDialog.createSocialEditDialog)(event, store, subject, socialData.accounts, viewerMode, onSaved);
+  };
+  return showSection ? (0, _litHtml.html)`
+        <section 
+          aria-labelledby="social-heading" 
+          class="profile__section border-lighter 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">
+              ${isOwner ? (0, _litHtml.html)`
+                <button
+                  type="button"
+                  class="profile__action-button profile-action-text flex-center 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-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
+                </button>
+              ` : (0, _litHtml.html)``}
+              <button
+                type="button"
+                class="inline-flex-row"
+                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>
+            </div>
+          </header>
+          <div id="social-panel" class="profile-section-collapsible__content" aria-hidden="true">
+            ${renderSocialSectionContent(socialData, viewerMode)}
+          </div>
+        </section>
+      ` : (0, _litHtml.html)``;
+}
+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="social__empty-icon-wrapper">
+          <span class="social__empty-icon inline-flex-row">${_profileIcons.globeIcon}</span>
+        </div>
+        <p class="profile__empty-state-message social__empty-message">
+            No social media links added yet.
+        </p>
+      </div>
+  `;
+}
+function renderOwnerEmptySocialSection(store, subject, socialData, viewerMode, onSaved) {
+  return (0, _litHtml.html)`
+    <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" 
+      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
+            type="button"
+            class="profile__action-button profile-action-text flex-center 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>
+            <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
+          </button>
+          <button
+            type="button"
+            class="inline-flex-row"
+            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>
+        </div>
+      </header>
+      <div id="social-panel" class="profile-section-collapsible__content" aria-hidden="true">
+        ${renderOwnerEmptySocialContent(store, subject, socialData, viewerMode, onSaved)}
+      </div>
+    </section>
+  `;
+}
+function renderSocialAccounts(store, subject, socialData, viewerMode, onSaved) {
+  const safeSocialData = socialData || {
+    accounts: []
+  };
+  const hasAccounts = Array.isArray(safeSocialData.accounts) && safeSocialData.accounts.length > 0;
+  const showOwnerEmptyAccounts = !hasAccounts && viewerMode === 'owner';
+  const showSection = true;
+  return showSection ? (0, _litHtml.html)`
+    ${showOwnerEmptyAccounts ? renderOwnerEmptySocialSection(store, subject, safeSocialData, viewerMode, onSaved) : renderSocialSectionDefault(store, subject, safeSocialData, viewerMode, onSaved)}
+  ` : '';
+}

package/lib/sections/social/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const socialMediaFormName = "socialMedia.ttl";
+export declare const DEFAULT_ICON_URI: string;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/sections/social/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,oBAAoB,CAAA;AAIpD,eAAO,MAAM,gBAAgB,QAGzB,CAAA"}

package/lib/sections/social/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.socialMediaFormName = exports.DEFAULT_ICON_URI = void 0;
+var _solidUi = require("solid-ui");
+var _profileIcons = require("../../icons-svg/profileIcons");
+const socialMediaFormName = exports.socialMediaFormName = 'socialMedia.ttl'; // The name of the file to upload
+
+const FALLBACK_ICON_URI = `${_solidUi.icons.iconBase}noun_10636_grey.svg`; // grey disc
+
+const DEFAULT_ICON_URI = exports.DEFAULT_ICON_URI = (() => {
+  const svgMarkup = _profileIcons.starIcon?.strings?.join('') || '';
+  return svgMarkup ? `data:image/svg+xml;utf8,${encodeURIComponent(svgMarkup)}` : FALLBACK_ICON_URI;
+})();