profile-pane 3.1.5 → 3.2.0

package/lib/sections/languages/LanguageEditDialog.js

@@ -0,0 +1,457 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLanguageEditDialog = createLanguageEditDialog;
+var _dialog = require("../../ui/dialog");
+var _litHtml = require("lit-html");
+require("../../styles/EditDialogs.css");
+require("../../styles/ContactInfoEditDialog.css");
+var _rowState = require("../shared/rowState");
+var _textUtils = require("../../textUtils");
+var _mutations = require("./mutations");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _texts = require("../../texts");
+const WIKIDATA_LANGUAGE_ENDPOINT = 'https://query.wikidata.org/sparql';
+const LANGUAGE_OBJECT_URI_BASE = 'https://www.w3.org/ns/iana/language-code/';
+function sanitizeLanguageFieldValue(value) {
+  return (0, _textUtils.sanitizeTextValue)(value);
+}
+function rowHasContent(row) {
+  return [row.name, row.publicId, row.proficiency].some(_textUtils.hasNonEmptyText);
+}
+function normalizeLanguageCode(value) {
+  return (value || '').trim().toLowerCase();
+}
+function normalizeSuggestionKey(value) {
+  return sanitizeLanguageFieldValue(value).toLowerCase().replace(/\(.*?\)/g, ' ').replace(/[^a-z\s-]/g, ' ').replace(/\s+/g, ' ').trim();
+}
+function escapeSparqlRegex(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function buildLanguageSearchQuery(name) {
+  const escapedName = escapeSparqlRegex(name);
+  return `SELECT ?item ?subject ?name WHERE {
+    ?item wdt:P305 ?subject .
+    OPTIONAL {
+      ?item rdfs:label ?name .
+      FILTER(langMatches(lang(?name), "en"))
+    }
+    FILTER regex(?name, "${escapedName}", "i")
+    FILTER regex(?subject, "^..$", "i")
+  } LIMIT 12`;
+}
+function buildLanguagePublicId(subjectValue) {
+  const value = (subjectValue || '').trim();
+  if (!value) return '';
+  if (value.startsWith('http://') || value.startsWith('https://')) return value;
+  return `${LANGUAGE_OBJECT_URI_BASE}${normalizeLanguageCode(value)}`;
+}
+function preferredBindingValue(binding, key) {
+  const value = binding?.[key]?.value;
+  return typeof value === 'string' ? value : '';
+}
+async function fetchLanguageSuggestions(term) {
+  const queryTerm = sanitizeLanguageFieldValue(term);
+  if (queryTerm.length < 2 || typeof fetch !== 'function') return [];
+  const params = new URLSearchParams({
+    query: buildLanguageSearchQuery(queryTerm),
+    format: 'json'
+  });
+  try {
+    const response = await fetch(`${WIKIDATA_LANGUAGE_ENDPOINT}?${params.toString()}`, {
+      headers: {
+        Accept: 'application/sparql-results+json, application/json'
+      }
+    });
+    if (!response.ok) return [];
+    const payload = await response.json();
+    const bindings = Array.isArray(payload?.results?.bindings) ? payload.results.bindings : [];
+    const seen = new Set();
+    return bindings.map(binding => {
+      const code = normalizeLanguageCode(preferredBindingValue(binding, 'subject'));
+      const publicId = buildLanguagePublicId(code);
+      const name = sanitizeLanguageFieldValue(preferredBindingValue(binding, 'name') || code);
+      return {
+        name,
+        publicId,
+        code
+      };
+    }).filter(item => {
+      if (!item.name || !item.publicId || item.code.length !== 2) return false;
+      const key = item.publicId.toLowerCase();
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  } catch {
+    return [];
+  }
+}
+function matchLanguageSuggestion(suggestions, value) {
+  const normalized = sanitizeLanguageFieldValue(value).toLowerCase();
+  if (!normalized) return null;
+  const exact = suggestions.find(suggestion => suggestion.name.toLowerCase() === normalized);
+  if (exact) return exact;
+  const normalizedKey = normalizeSuggestionKey(value);
+  if (!normalizedKey) return null;
+  return suggestions.find(suggestion => normalizeSuggestionKey(suggestion.name) === normalizedKey) || null;
+}
+function toFormState(details) {
+  const rows = (details || []).map(detail => ({
+    name: sanitizeLanguageFieldValue((0, _textUtils.toText)(detail.name)),
+    publicId: sanitizeLanguageFieldValue((0, _textUtils.toText)(detail.publicId)),
+    proficiency: sanitizeLanguageFieldValue((0, _textUtils.toText)(detail.proficiency)),
+    entryNode: (0, _textUtils.toText)(detail.entryNode),
+    status: (0, _textUtils.toText)(detail.entryNode) ? 'existing' : 'new'
+  })).filter(row => Boolean(row.name || row.entryNode || row.proficiency || row.publicId));
+  return {
+    languages: rows.length ? rows : [{
+      name: '',
+      publicId: '',
+      proficiency: '',
+      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 validateLanguagesBeforeSave(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 language changes detected.';
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    if (!row || row.status === 'deleted') continue;
+    if (!(0, _textUtils.hasNonEmptyText)(row.name)) continue;
+    if (!(0, _textUtils.hasNonEmptyText)(row.publicId)) {
+      return `Language ${i + 1}: please choose a language from the suggestions list.`;
+    }
+  }
+  return null;
+}
+function hasInvalidLanguageSelection(rows) {
+  return rows.some(row => {
+    if (!row || row.status === 'deleted') return false;
+    if (!(0, _textUtils.hasNonEmptyText)(row.name)) return false;
+    return !(0, _textUtils.hasNonEmptyText)(row.publicId);
+  });
+}
+function updateLanguagesSubmitEnabled(rows) {
+  const submitButton = document.querySelector('#profile-modal #modal-buttons button.btn-primary');
+  if (!submitButton) return;
+  submitButton.disabled = hasInvalidLanguageSelection(rows);
+}
+function focusLanguageField(form, selector) {
+  const nextField = form.querySelector(selector);
+  if (!nextField || typeof nextField.focus !== 'function') return;
+  nextField.scrollIntoView({
+    block: 'start',
+    behavior: 'auto'
+  });
+  nextField.focus();
+  if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+    nextField.select();
+  }
+}
+function renderLanguageInputRow({
+  rows,
+  index,
+  displayIndex,
+  onDelete,
+  onChange,
+  onSearch,
+  suggestions,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  isDropTarget
+}) {
+  const row = rows[index];
+  const label = `Language ${displayIndex + 1}`;
+  const proficiencyLabel = `Language Proficiency ${displayIndex + 1}`;
+  const languageName = `language-${index}`;
+  const proficiencyInputName = `proficiency-${index}`;
+  const proficiencySelectId = `proficiency-${index}`;
+  const datalistId = `language-suggestions-${index}`;
+  const hasSelectionIssue = Boolean(row && row.status !== 'deleted' && (0, _textUtils.hasNonEmptyText)(row.name) && !(0, _textUtils.hasNonEmptyText)(row.publicId));
+  const handleLanguageInput = field => e => {
+    const target = e.target;
+    const nextValue = sanitizeLanguageFieldValue(target.value);
+    if (rows[index]) {
+      (0, _rowState.applyRowFieldChange)(rows[index], field, nextValue, rowHasContent);
+      const matchedSuggestion = matchLanguageSuggestion(suggestions, nextValue);
+      rows[index].publicId = matchedSuggestion?.publicId || '';
+      if (matchedSuggestion) {
+        rows[index].name = sanitizeLanguageFieldValue(matchedSuggestion.name);
+      }
+      onSearch(index, nextValue);
+      onChange();
+    }
+  };
+  const handleLanguageChange = field => e => {
+    handleLanguageInput(field)(e);
+  };
+  const handleProficiencyInput = e => {
+    const target = e.target;
+    const nextType = target.value;
+    if (rows[index]) {
+      (0, _rowState.applyRowSelectChange)(rows[index], 'proficiency', nextType);
+      onChange();
+    }
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  return (0, _litHtml.html)`
+    <div
+      class="profile-edit-dialog__row profile-edit-dialog__row--language ${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 language ${displayIndex + 1}`}
+        title="Drag to reorder"
+        draggable="true"
+        @dragstart=${() => onDragStart(index)}
+        @dragend=${() => onDragEnd()}
+      >
+        ${_profileIcons.bentoIcon}
+      </button>
+      <label aria-label=${`${label} Language`} class="label profile-edit-dialog__field">
+        <input
+          class="input"
+          type="text"
+          name=${languageName}
+          .value=${row?.name || ''}
+          required
+          data-contact-field="name"
+          data-entry-node=${row?.entryNode || ''}
+          data-row-status=${row?.status || 'n/a'}
+          placeholder="Language"
+          autocomplete="off"
+          list=${datalistId}
+          inputmode="text"
+          aria-invalid=${hasSelectionIssue ? 'true' : 'false'}
+          @input=${handleLanguageInput('name')}
+          @change=${handleLanguageChange('name')}
+        />
+        <datalist id=${datalistId}>
+          ${suggestions.map(suggestion => (0, _litHtml.html)`<option value=${suggestion.name}></option>`)}
+        </datalist>
+        <small class="profile-edit-dialog__input-help-text">Type to search and select one language suggestion.</small>
+      </label>
+      <label aria-label=${proficiencyLabel} class="label" hidden>
+        <select name=${proficiencyInputName} id=${proficiencySelectId} @change=${handleProficiencyInput} .value=${row?.proficiency || ''}>
+          <option value="Basic">Basic</option>
+          <option value="Intermediate">Intermediate</option>
+          <option value="Fluent">Fluent</option>
+        </select>
+      </label>
+      <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete language ${displayIndex + 1}`}
+          title=${_texts.deleteEntryButtonTitleText}
+          @click=${handleDelete}
+        >
+          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </button>
+      </div>
+    </div>
+  `;
+}
+function renderLanguageSection(rows, onAddRow, suggestionByIndex, onSearch) {
+  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);
+    Object.keys(suggestionByIndex).forEach(key => {
+      delete suggestionByIndex[Number(key)];
+    });
+  };
+  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;
+    onAddRow();
+  };
+  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="Languages">
+      <fieldset>
+        <legend class="sr-only">Language entries</legend>
+        ${visibleRows.map(({
+    index
+  }, displayIndex) => renderLanguageInputRow({
+    rows,
+    index,
+    displayIndex,
+    onChange: onAddRow,
+    onSearch,
+    suggestions: suggestionByIndex[index] || [],
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    onDragEnd: handleDragEnd,
+    isDropTarget: dropTargetIndex === index,
+    onDelete: () => {
+      (0, _rowState.deleteRow)(rows, index);
+      delete suggestionByIndex[index];
+      onAddRow();
+    }
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function renderLanguageEditTemplate(form, formState, viewerMode, options = {}) {
+  const formStateWithSearch = formState;
+  const suggestionByIndex = formStateWithSearch.suggestionByIndex || (formStateWithSearch.suggestionByIndex = {});
+  const searchSeqByIndex = formStateWithSearch.searchSeqByIndex || (formStateWithSearch.searchSeqByIndex = {});
+  const searchTimerByIndex = formStateWithSearch.searchTimerByIndex || (formStateWithSearch.searchTimerByIndex = {});
+  const rerender = (nextOptions = {}) => renderLanguageEditTemplate(form, formState, viewerMode, nextOptions);
+  const onSearch = (index, term) => {
+    if (searchTimerByIndex[index]) {
+      clearTimeout(searchTimerByIndex[index]);
+    }
+    const normalized = sanitizeLanguageFieldValue(term);
+    if (normalized.length < 2) {
+      suggestionByIndex[index] = [];
+      rerender();
+      return;
+    }
+    const seq = (searchSeqByIndex[index] || 0) + 1;
+    searchSeqByIndex[index] = seq;
+    searchTimerByIndex[index] = setTimeout(async () => {
+      const suggestions = await fetchLanguageSuggestions(normalized);
+      if (searchSeqByIndex[index] !== seq) return;
+      suggestionByIndex[index] = suggestions;
+      const row = formState.languages[index];
+      if (row) {
+        const matchedSuggestion = matchLanguageSuggestion(suggestions, row.name);
+        row.publicId = matchedSuggestion?.publicId || row.publicId;
+      }
+      rerender();
+    }, 220);
+  };
+  (0, _litHtml.render)((0, _litHtml.html)`
+    ${renderLanguageSection(formState.languages, rerender, suggestionByIndex, onSearch)}
+    ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
+  `, form);
+  updateLanguagesSubmitEnabled(formState.languages);
+  if (options.focusSelector) {
+    focusLanguageField(form, options.focusSelector);
+  }
+}
+function createLanguageEditForm(details, viewerMode) {
+  const form = document.createElement('form');
+  form.classList.add('profile__edit-form');
+  const formState = toFormState(details);
+  formState.initialExistingOrder = formState.languages.filter(row => Boolean((row.entryNode || '').trim())).map(row => (row.entryNode || '').trim());
+  renderLanguageEditTemplate(form, formState, viewerMode);
+  const addRow = () => {
+    formState.languages.unshift({
+      name: '',
+      publicId: '',
+      proficiency: '',
+      entryNode: '',
+      status: 'new'
+    });
+    const formStateWithSearch = formState;
+    formStateWithSearch.suggestionByIndex = {};
+    formStateWithSearch.searchSeqByIndex = {};
+    formStateWithSearch.searchTimerByIndex = {};
+    renderLanguageEditTemplate(form, formState, viewerMode, {
+      focusSelector: '[name="language-0"]'
+    });
+  };
+  return {
+    form,
+    formState,
+    addRow
+  };
+}
+async function createLanguageEditDialog(event, store, subject, languages, viewerMode, onSaved) {
+  const dom = event.currentTarget?.ownerDocument || document;
+  const {
+    form,
+    formState,
+    addRow
+  } = createLanguageEditForm(languages, viewerMode);
+  const result = await (0, _dialog.openInputDialog)({
+    title: _texts.editLanguagesDialogTitleText,
+    dom,
+    form,
+    headerAction: {
+      type: 'button',
+      label: '+ Add More',
+      ariaLabel: 'Add another language',
+      onClick: addRow
+    },
+    submitLabel: _texts.dialogSubmitLabelText,
+    cancelLabel: _texts.dialogCancelLabelText,
+    validate: () => {
+      if (viewerMode !== 'owner') {
+        return _texts.ownerLoginRequiredDialogMessageText;
+      }
+      return validateLanguagesBeforeSave(formState.languages, formState.initialExistingOrder);
+    },
+    onSave: async () => {
+      const languageOps = (0, _rowState.summarizeRowOps)(formState.languages, rowHasContent);
+      const plan = {
+        create: languageOps.create,
+        update: languageOps.update,
+        remove: languageOps.remove
+      };
+      await (0, _mutations.processLanguageMutations)(store, subject, plan, formState.languages);
+    },
+    formatSaveError: error => {
+      const message = error instanceof Error ? error.message : String(error);
+      return `${_texts.saveLanguageUpdatesFailedPrefixText} ${message}`;
+    }
+  });
+  if (!result) return;
+  if (onSaved) {
+    await onSaved();
+  }
+}

package/lib/sections/languages/LanguageSection.d.ts

@@ -0,0 +1,5 @@
+import { LiveStore, NamedNode } from 'rdflib';
+import { ViewerMode } from '../../types';
+import { LanguageDetails } from './types';
+export declare function renderLanguageSection(store: LiveStore, subject: NamedNode, languages: LanguageDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+//# sourceMappingURL=LanguageSection.d.ts.map

package/lib/sections/languages/LanguageSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSection.d.ts","sourceRoot":"","sources":["../../../src/sections/languages/LanguageSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAwJzC,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,eAAe,EAAE,EAC5B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAcrC"}

package/lib/sections/languages/LanguageSection.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderLanguageSection = renderLanguageSection;
+var _litHtml = require("lit-html");
+var _solidUi = require("solid-ui");
+var _LanguageEditDialog = require("./LanguageEditDialog");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _texts = require("../../texts");
+var _collapsibleSection = require("../shared/collapsibleSection");
+function renderLan(language, asList = false) {
+  if (!language) return (0, _litHtml.html)``;
+  return asList ? (0, _litHtml.html)`<li class="languages__item-label" role="listitem">${language.name}</li>` : (0, _litHtml.html)``;
+}
+function renderLanguages(languages, asList = false) {
+  if (!languages || !languages.length || !languages[0]) return (0, _litHtml.html)``;
+  return (0, _litHtml.html)`${renderLan(languages[0], asList)}${languages.length > 1 ? renderLanguages(languages.slice(1), asList) : (0, _litHtml.html)``}`;
+}
+function renderLanguagesSectionDefault(store, subject, languages, viewerMode, onSaved) {
+  const hasLanguages = Array.isArray(languages) && languages.length > 0;
+  const hasLanguageLinks = store.each(subject, _solidUi.ns.schema('knowsLanguage')).length > 0;
+  const isOwner = viewerMode === 'owner';
+  return (0, _litHtml.html)`
+    <section
+      class="profile__section border-lighter profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
+      aria-labelledby="languages-heading"
+      role="region"
+      tabindex="-1"
+      data-expanded="false"
+    >
+      <header class="profile__section-header profile-section-collapsible__header">
+        <h2 id="languages-heading">${_texts.languagesHeadingText}</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="Add or edit languages"
+              @click=${event => (0, _LanguageEditDialog.createLanguageEditDialog)(event, store, subject, languages, 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 More
+              </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 languages section"
+            aria-controls="languages-panel"
+            aria-expanded="false"
+            @click=${_collapsibleSection.toggleCollapsibleSection}
+          >
+            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
+          </button>
+        </div>
+      </header>
+      <div id="languages-panel" class="profile-section-collapsible__content" aria-hidden="true">
+        ${hasLanguages ? (0, _litHtml.html)`
+              <ul class="languages__list" role="list" aria-label="Known languages">
+                ${renderLanguages(languages, true)}
+              </ul>
+            ` : hasLanguageLinks ? (0, _litHtml.html)`<p>Language details are missing for one or more entries.</p>` : (0, _litHtml.html)`<p>No languages added yet.</p>`}
+      </div>
+    </section>
+  `;
+}
+function renderOwnerEmptyLanguagesContent(_store, _subject, _languages, _viewerMode, _onSaved) {
+  return (0, _litHtml.html)`
+      <div class="profile__empty-state-content flex-column-center" role="group" aria-label="Empty languages section">    
+        <div class="languages__empty-icon-wrapper">
+          <span class="languages__empty-icon inline-flex-row">${_profileIcons.commentIcon}</span>
+        </div>
+        <p class="profile__empty-state-message languages__empty-message">
+            No languages added yet.
+        </p>
+      </div>
+  `;
+}
+function renderOwnerEmptyLanguagesSection(store, subject, languages, viewerMode, onSaved) {
+  return (0, _litHtml.html)`
+    <section 
+      aria-labelledby="languages-heading" 
+      data-profile-section="languages"
+      class="profile__section--empty border-lighter 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="languages-heading" tabindex="-1">${_texts.languagesHeadingText}</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 languages"
+            @click=${event => {
+    return (0, _LanguageEditDialog.createLanguageEditDialog)(event, store, subject, languages, 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 Languages
+            </span>
+            <span class="profile-section-collapsible__edit-icon profile-section-collapsible__edit-icon--add" aria-hidden="true">${_profileIcons.plusIcon}</span>
+          </button>
+          <button
+            type="button"
+            class="inline-flex-row"
+            aria-label="Toggle languages section"
+            aria-controls="languages-panel"
+            aria-expanded="false"
+            @click=${_collapsibleSection.toggleCollapsibleSection}
+          >
+            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
+          </button>
+        </div>
+      </header>
+      <div id="languages-panel" class="profile-section-collapsible__content" aria-hidden="true">
+        ${renderOwnerEmptyLanguagesContent(store, subject, languages, viewerMode, onSaved)}
+      </div>
+    </section>
+  `;
+}
+function renderLanguageSection(store, subject, languages, viewerMode, onSaved) {
+  const safeLanguages = languages || [];
+  const hasLanguages = Array.isArray(safeLanguages) && safeLanguages.length > 0;
+  const showOwnerEmptyLanguages = !hasLanguages && viewerMode === 'owner';
+  const showSection = true;
+  return showSection ? (0, _litHtml.html)`
+    ${showOwnerEmptyLanguages ? renderOwnerEmptyLanguagesSection(store, subject, safeLanguages, viewerMode, onSaved) : renderLanguagesSectionDefault(store, subject, safeLanguages, viewerMode, onSaved)}
+  ` : '';
+}

package/lib/sections/languages/mutations.d.ts

@@ -0,0 +1,6 @@
+import { LiveStore, NamedNode } from 'rdflib';
+import { LanguageRow } from './types';
+import { MutationOps } from '../shared/types';
+export type LanguageMutationPlan = MutationOps<LanguageRow>;
+export declare function processLanguageMutations(store: LiveStore, subject: NamedNode, mutationPlan: LanguageMutationPlan, orderedRows?: LanguageRow[]): Promise<void>;
+//# sourceMappingURL=mutations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/languages/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,SAAS,EAAoB,MAAM,QAAQ,CAAA;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAM7C,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,WAAW,CAAC,CAAA;AAqW3D,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,YAAY,EAAE,oBAAoB,EAClC,WAAW,CAAC,EAAE,WAAW,EAAE,iBAS5B"}