profile-pane 3.1.4 → 3.2.0

package/lib/sections/education/EducationEditDialog.js

@@ -0,0 +1,459 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEducationEditDialog = createEducationEditDialog;
+var _dialog = require("../../ui/dialog");
+var _litHtml = require("lit-html");
+require("../../styles/EditDialogs.css");
+require("../../styles/ContactInfoEditDialog.css");
+var _mutations = require("./mutations");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _rowState = require("../shared/rowState");
+var _textUtils = require("../../textUtils");
+var _texts = require("../../texts");
+function sanitizeEducationFieldValue(value) {
+  return (0, _textUtils.sanitizeTextValue)(value);
+}
+function parseYearMonthFromDateText(dateText) {
+  const normalized = (dateText || '').trim();
+  if (!normalized) return {
+    year: '',
+    month: ''
+  };
+  const isoYearMonth = normalized.match(/^(\d{4})-(\d{2})/);
+  if (isoYearMonth) {
+    return {
+      year: isoYearMonth[1],
+      month: isoYearMonth[2]
+    };
+  }
+  const fallbackYear = normalized.match(/(\d{4})/);
+  return {
+    year: fallbackYear ? fallbackYear[1] : '',
+    month: ''
+  };
+}
+function rowHasContent(row) {
+  return [row.school, (0, _textUtils.toText)(row.startDate), (0, _textUtils.toText)(row.endDate), row.degree, row.location, row.description].some(_textUtils.hasNonEmptyText);
+}
+function toFormState(educationData) {
+  const education = (educationData || []).map(educationEntry => ({
+    school: sanitizeEducationFieldValue((0, _textUtils.toText)(educationEntry.school)),
+    startDate: educationEntry.startDate,
+    endDate: educationEntry.endDate,
+    degree: sanitizeEducationFieldValue((0, _textUtils.toText)(educationEntry.degree)),
+    location: sanitizeEducationFieldValue((0, _textUtils.toText)(educationEntry.location)),
+    description: sanitizeEducationFieldValue((0, _textUtils.toText)(educationEntry.description)),
+    entryNode: (0, _textUtils.toText)(educationEntry.entryNode),
+    status: (0, _textUtils.toText)(educationEntry.entryNode) ? 'existing' : 'new'
+  })).filter(educationEntry => rowHasContent(educationEntry) || Boolean(educationEntry.entryNode));
+  return {
+    educationData: education.length ? education : [{
+      school: '',
+      startDate: undefined,
+      endDate: undefined,
+      degree: '',
+      location: '',
+      description: '',
+      entryNode: '',
+      status: 'new'
+    }]
+  };
+}
+function validateEducationBeforeSave(rows) {
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    if (!row || row.status === 'deleted') continue;
+    if (!rowHasContent(row)) continue;
+  }
+  return {
+    ok: true
+  };
+}
+function renderEducationInputRow({
+  educationData,
+  index,
+  displayIndex,
+  onDelete,
+  onChange
+}) {
+  const educationRow = educationData[index];
+  const label = `Education ${displayIndex + 1}`;
+  const educationHeadingId = `education-heading-${index}`;
+  const schoolName = `education-school-${index}`;
+  const degreeName = `education-degree-${index}`;
+  const descriptionName = `education-description-${index}`;
+  const descriptionCounterId = `education-description-counter-${index}`;
+  const descriptionMaxLength = 2000;
+  const descriptionCount = (educationRow?.description || '').length;
+  const startMonthLabel = `Start Month ${displayIndex + 1}`;
+  const startMonthInputName = `education-start-month-${index}`;
+  const startMonthSelectId = `education-start-month-select-${index}`;
+  const startYearLabel = `Start Year ${displayIndex + 1}`;
+  const startYearInputName = `education-start-year-${index}`;
+  const startYearSelectId = `education-start-year-select-${index}`;
+  const startDateText = (0, _textUtils.toText)(educationRow?.startDate);
+  const startDateParts = parseYearMonthFromDateText(startDateText);
+  const startMonthValue = startDateParts.month;
+  const startYearText = startDateParts.year;
+  const endMonthLabel = `End Month ${displayIndex + 1}`;
+  const endMonthInputName = `education-end-month-${index}`;
+  const endMonthSelectId = `education-end-month-select-${index}`;
+  const endDateText = (0, _textUtils.toText)(educationRow?.endDate);
+  const endYearLabel = `End Year ${displayIndex + 1}`;
+  const endYearInputName = `education-end-year-${index}`;
+  const endYearSelectId = `education-end-year-select-${index}`;
+  const endDateParts = parseYearMonthFromDateText(endDateText);
+  const endMonthValue = endDateParts.month;
+  const endYearParsedText = endDateParts.year;
+  const currentYear = new Date().getFullYear();
+  const baseYearOptions = Array.from({
+    length: 120
+  }, (_, i) => String(currentYear - i));
+  const yearOptions = Array.from(new Set([...baseYearOptions, startYearText, endYearParsedText].filter(Boolean))).sort((a, b) => Number(b) - Number(a));
+  const monthOptions = [{
+    value: '01',
+    label: 'January'
+  }, {
+    value: '02',
+    label: 'February'
+  }, {
+    value: '03',
+    label: 'March'
+  }, {
+    value: '04',
+    label: 'April'
+  }, {
+    value: '05',
+    label: 'May'
+  }, {
+    value: '06',
+    label: 'June'
+  }, {
+    value: '07',
+    label: 'July'
+  }, {
+    value: '08',
+    label: 'August'
+  }, {
+    value: '09',
+    label: 'September'
+  }, {
+    value: '10',
+    label: 'October'
+  }, {
+    value: '11',
+    label: 'November'
+  }, {
+    value: '12',
+    label: 'December'
+  }];
+  const renderMonthOptions = selectedMonth => (0, _litHtml.html)`
+    <option value="" ?selected=${!selectedMonth}>Select month</option>
+    ${monthOptions.map(month => (0, _litHtml.html)`
+      <option value=${month.value} ?selected=${month.value === selectedMonth}>${month.label}</option>
+    `)}
+  `;
+  const renderYearOptions = selectedYear => (0, _litHtml.html)`
+    <option value="" ?selected=${!selectedYear}>Select year</option>
+    ${yearOptions.map(year => (0, _litHtml.html)`
+      <option value=${year} ?selected=${year === selectedYear}>${year}</option>
+    `)}
+  `;
+  const handleEducationInput = field => e => {
+    const target = e.target;
+    const nextValue = sanitizeEducationFieldValue(target.value);
+    if (educationData[index]) {
+      (0, _rowState.applyRowFieldChange)(educationData[index], field, nextValue, rowHasContent);
+      onChange();
+    }
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  const buildDateLiteral = (month, year) => {
+    if (!month || !year) return undefined;
+    return `${year}-${month}-01`;
+  };
+  const handleStartMonthChange = event => {
+    const target = event.target;
+    const month = target.value;
+    const year = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.startDate)).year || String(currentYear);
+    const nextStartDate = buildDateLiteral(month, year);
+    if (educationData[index]) {
+      (0, _rowState.applyRowFieldChange)(educationData[index], 'startDate', nextStartDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleStartYearChange = event => {
+    const target = event.target;
+    const year = target.value;
+    const month = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.startDate)).month || '01';
+    const nextStartDate = buildDateLiteral(month, year);
+    if (educationData[index]) {
+      (0, _rowState.applyRowFieldChange)(educationData[index], 'startDate', nextStartDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleEndMonthChange = event => {
+    const target = event.target;
+    const month = target.value;
+    const year = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.endDate)).year || String(currentYear);
+    const nextEndDate = buildDateLiteral(month, year);
+    if (educationData[index]) {
+      (0, _rowState.applyRowFieldChange)(educationData[index], 'endDate', nextEndDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleEndYearChange = event => {
+    const target = event.target;
+    const year = target.value;
+    const month = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.endDate)).month || '01';
+    const nextEndDate = buildDateLiteral(month, year);
+    if (educationData[index]) {
+      (0, _rowState.applyRowFieldChange)(educationData[index], 'endDate', nextEndDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleDescriptionInput = event => {
+    const target = event.target;
+    const nextValue = sanitizeEducationFieldValue(target.value.slice(0, descriptionMaxLength));
+    if (educationData[index]) {
+      (0, _rowState.applyRowFieldChange)(educationData[index], 'description', nextValue, rowHasContent);
+      onChange();
+    }
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row" role="group" aria-labelledby=${educationHeadingId}>
+      <h4 id=${educationHeadingId} class="profile-edit-dialog__entry-heading">${label}</h4>
+      <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete education ${displayIndex + 1}`}
+          title=${_texts.deleteEntryButtonTitleText}
+          @click=${handleDelete}
+        >
+          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </button>
+      </div>
+    </div>
+    <label aria-label=${`${label} School/College`} class="label profile-edit-dialog__field">
+      School/College
+      <input
+        class="input"
+        type="text"
+        name=${schoolName}
+        .value=${educationData[index]?.school || ''}
+        data-contact-field="title"
+        data-entry-node=${educationData[index]?.entryNode || ''}
+        data-row-status=${educationData[index]?.status || 'n/a'}
+        placeholder="School/College"
+        autocomplete="organization"
+        inputmode="text"
+        @change=${handleEducationInput('school')}
+      />
+    </label>
+    <div class="profile-edit-dialog__row">
+      <label aria-label=${`${label} Degree`} class="label profile-edit-dialog__field">
+        Degree
+        <input
+          class="input"
+          type="text"
+          name=${degreeName}
+          .value=${educationData[index]?.degree || ''}
+          required
+          data-contact-field="degree"
+          data-entry-node=${educationData[index]?.entryNode || ''}
+          data-row-status=${educationData[index]?.status || 'n/a'}
+          placeholder="Degree"
+          autocomplete="off"
+          inputmode="text"
+          @change=${handleEducationInput('degree')}
+        />
+      </label>
+    </div>  
+    <div class="profile-edit-dialog__row">
+      <label aria-label=${startMonthLabel} class="label profile-edit-dialog__field-type">
+        Start Month
+        <select name=${startMonthInputName} id=${startMonthSelectId} @change=${handleStartMonthChange}>
+          ${renderMonthOptions(startMonthValue)}
+        </select>
+      </label>
+      <label aria-label=${startYearLabel} class="label profile-edit-dialog__field-type">
+        Start Year
+        <select name=${startYearInputName} id=${startYearSelectId} @change=${handleStartYearChange}>
+          ${renderYearOptions(startYearText)}
+        </select>
+      </label>
+      <label aria-label=${endMonthLabel} class="label profile-edit-dialog__field-type">
+        End Month
+        <select name=${endMonthInputName} id=${endMonthSelectId} @change=${handleEndMonthChange}>
+          ${renderMonthOptions(endMonthValue)}
+        </select>
+      </label>
+      <label aria-label=${endYearLabel} class="label profile-edit-dialog__field-type">
+        End Year
+        <select name=${endYearInputName} id=${endYearSelectId} @change=${handleEndYearChange}>
+          ${renderYearOptions(endYearParsedText)}
+        </select>
+      </label>
+    </div>
+    <label aria-label=${`${label} Description`} class="label profile-edit-dialog__field profile-edit-dialog__field--full profile-edit-dialog__field--stack">
+      <span>Description</span>
+      <textarea
+        class="profile-edit-dialog__textarea"
+        name=${descriptionName}
+        rows="4"
+        .value=${educationData[index]?.description || ''}
+        maxlength=${descriptionMaxLength}
+        aria-describedby=${descriptionCounterId}
+        data-contact-field="description"
+        data-entry-node=${educationData[index]?.entryNode || ''}
+        data-row-status=${educationData[index]?.status || 'n/a'}
+        placeholder="Description"
+        autocomplete="off"
+        inputmode="text"
+        @input=${handleDescriptionInput}
+      ></textarea>
+      <small id=${descriptionCounterId} aria-live="polite">${descriptionCount}/${descriptionMaxLength}</small>
+    </label>
+  `;
+}
+function renderEducationSection(educationData, onAddRow) {
+  const createNewRow = event => {
+    event.preventDefault();
+    educationData.push({
+      school: '',
+      degree: '',
+      location: '',
+      startDate: undefined,
+      endDate: undefined,
+      description: '',
+      entryNode: '',
+      status: 'new'
+    });
+    onAddRow();
+  };
+  const visibleEducationRows = educationData.map((education, index) => ({
+    education,
+    index
+  })).filter(({
+    education
+  }) => education.status !== 'deleted');
+  return (0, _litHtml.html)`
+    <section 
+      aria-labelledby="education-heading" 
+      class="educationEditSection section-bg">
+      <header class="profile__section-header">
+        <h3 id="education-heading" class="profile-edit-dialog__section-heading">
+          <span class="sectionTitleIcon" aria-hidden="true">&#9993;</span>
+          Education
+        </h3>
+        <button
+          type="button"
+          class="profile__action-button profile-action-text flex-center"
+          data-dialog-add-more="true"
+          aria-label="Add another education entry"
+          @click=${createNewRow}
+        >
+          <span class="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>
+        </button>
+      </header>
+      <fieldset>
+        <legend class="sr-only">Education entries</legend>
+        ${visibleEducationRows.map(({
+    index
+  }, displayIndex) => renderEducationInputRow({
+    educationData,
+    index,
+    displayIndex,
+    onDelete: () => {
+      (0, _rowState.deleteRow)(educationData, index);
+      onAddRow();
+    },
+    onChange: onAddRow
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function renderEducationEditTemplate(form, formState, rerender, viewerMode) {
+  (0, _litHtml.render)((0, _litHtml.html)`
+    ${renderEducationSection(formState.educationData, rerender)}
+    ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
+  `, form);
+}
+function createEducationEditForm(educationData, viewerMode) {
+  const form = document.createElement('form');
+  form.classList.add('profile__edit-form');
+  const formState = toFormState(educationData);
+  const rerender = () => renderEducationEditTemplate(form, formState, rerender, viewerMode);
+  rerender();
+  return {
+    form,
+    formState,
+    rerender
+  };
+}
+async function createEducationEditDialog(event, store, subject, educationData, viewerMode, onSaved) {
+  const dom = event.currentTarget?.ownerDocument || document;
+  const {
+    form,
+    formState,
+    rerender
+  } = createEducationEditForm(educationData, viewerMode);
+  const triggerAddMore = () => {
+    const addMoreButton = form.querySelector('[data-dialog-add-more="true"]');
+    if (addMoreButton) addMoreButton.click();
+  };
+  const result = await (0, _dialog.openInputDialog)({
+    title: _texts.editEducationDialogTitleText,
+    dom,
+    form,
+    headerAction: {
+      type: 'button',
+      label: 'Add More',
+      ariaLabel: 'Add another education entry',
+      onClick: triggerAddMore
+    },
+    submitLabel: _texts.dialogSubmitLabelText,
+    cancelLabel: _texts.dialogCancelLabelText,
+    validate: async () => {
+      if (viewerMode !== 'owner') {
+        return _texts.ownerLoginRequiredDialogMessageText;
+      }
+      const plan = (0, _rowState.summarizeRowOps)(formState.educationData, rowHasContent);
+      const hasChanges = plan.create.length > 0 || plan.update.length > 0 || plan.remove.length > 0;
+      if (!hasChanges) {
+        return 'No education changes detected.';
+      }
+      const validation = validateEducationBeforeSave(formState.educationData);
+      if (!validation.ok) {
+        return validation.message || 'Please complete the required education fields.';
+      }
+      return null;
+    },
+    onSave: async () => {
+      const plan = (0, _rowState.summarizeRowOps)(formState.educationData, rowHasContent);
+      await (0, _mutations.processEducationMutations)(store, subject, plan);
+      rerender();
+    },
+    formatSaveError: error => {
+      const message = error instanceof Error ? error.message : String(error);
+      return `${_texts.saveEducationUpdatesFailedPrefixText} ${message}`;
+    }
+  });
+  if (!result) return;
+  if (onSaved) {
+    await onSaved();
+    return;
+  }
+  await (0, _dialog.alertDialog)('Education updates saved. Refresh to see latest values.', 'Saved', dom);
+}

package/lib/sections/education/EducationSection.d.ts

@@ -0,0 +1,7 @@
+import { EducationDetails } from './types';
+import { ViewerMode } from '../../types';
+import '../../styles/EducationCard.css';
+import { LiveStore, NamedNode } from 'rdflib';
+export declare const EducationCard: (educationData: EducationDetails[], viewerMode: ViewerMode) => import("lit-html").TemplateResult<1>;
+export declare function renderEducationSection(store: LiveStore, subject: NamedNode, educationData: EducationDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+//# sourceMappingURL=EducationSection.d.ts.map

package/lib/sections/education/EducationSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EducationSection.d.ts","sourceRoot":"","sources":["../../../src/sections/education/EducationSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAyE7C,eAAO,MAAM,aAAa,GACxB,eAAe,gBAAgB,EAAE,EACjC,YAAY,UAAU,yCAevB,CAAA;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,gBAAgB,EAAE,EACjC,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAiDrC"}

package/lib/sections/education/EducationSection.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EducationCard = void 0;
+exports.renderEducationSection = renderEducationSection;
+var _litHtml = require("lit-html");
+require("../../styles/EducationCard.css");
+var _texts = require("../../texts");
+var _EducationEditDialog = require("./EducationEditDialog");
+var _sectionCardHelpers = require("../shared/sectionCardHelpers");
+var _collapsibleSection = require("../shared/collapsibleSection");
+var _profileIcons = require("../../icons-svg/profileIcons");
+function formatEducationMonthYearFull(date) {
+  if (!date) return '';
+  const value = date;
+  const year = value.slice(0, 4);
+  const month = value.slice(5, 7);
+  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const monthIndex = Number(month) - 1;
+  if (!year || monthIndex < 0 || monthIndex > 11) return value;
+  return `${monthNames[monthIndex]} ${year}`;
+}
+function renderEducationEntry(educationEntry, index) {
+  if (!educationEntry) return (0, _litHtml.html)``;
+  const schoolId = `school-title-${index}`;
+  const educationPeriodId = `education-period-${index}`;
+  const educationOrgId = `education-org-${index}`;
+  const educationDescriptionId = `education-description-${index}`;
+  const ariaDescribedBy = educationEntry.description ? `${educationPeriodId} ${educationOrgId} ${educationDescriptionId}` : `${educationPeriodId} ${educationOrgId}`;
+  return (0, _litHtml.html)`
+    <li class="education" role="listitem" aria-labelledby=${schoolId} aria-describedby=${ariaDescribedBy}>
+      <div class="educationHeader">
+        <h4 id=${schoolId}>${educationEntry.school}</h4>
+        <p id=${educationPeriodId} class="educationPeriod">
+          ${educationEntry.endDate ? (0, _litHtml.html)`<time datetime=${(0, _sectionCardHelpers.toMonthDateTime)(educationEntry.endDate)}>${formatEducationMonthYearFull(educationEntry.endDate)}</time>` : (0, _litHtml.html)`<span>End date unknown</span>`}
+        </p>
+      </div>
+      <p class="educationOrg" id=${educationOrgId}>
+        <strong>${educationEntry.degree}</strong>${educationEntry.location ? (0, _litHtml.html)` | ${educationEntry.location}` : ''}
+      </p>
+      ${educationEntry.description ? (0, _litHtml.html)`
+        <div class="cvDescriptionWrap">
+          <p class="cvDescriptionText" id=${educationDescriptionId}>${educationEntry.description}</p>
+          <button
+            type="button"
+            class="cvDescriptionToggle"
+            aria-controls=${educationDescriptionId}
+            aria-expanded="false"
+            hidden
+            @click=${_sectionCardHelpers.toggleDescription}
+          >
+            ...more
+          </button>
+        </div>
+      ` : ''}
+    </li>
+  `;
+}
+function renderEducation(educationData) {
+  if (!educationData || !educationData.length) return (0, _litHtml.html)``;
+  return (0, _litHtml.html)`${educationData.map((educationEntry, index) => renderEducationEntry(educationEntry, index))}`;
+}
+const EducationCard = (educationData, viewerMode) => {
+  void viewerMode;
+  const hasEducation = Array.isArray(educationData) && educationData.length > 0;
+  if (!hasEducation) return (0, _litHtml.html)``;
+  return (0, _litHtml.html)`
+    <article class="educationCard" aria-label="Education" data-testid="education">
+      <section class="educationSection">
+        <ul role="list" aria-label="Education in chronological order">
+          ${renderEducation(educationData)}
+        </ul>
+      </section>
+    </article>
+  `;
+};
+exports.EducationCard = EducationCard;
+function renderEducationSection(store, subject, educationData, viewerMode, onSaved) {
+  (0, _sectionCardHelpers.scheduleDescriptionOverflowCheck)();
+  const educationCard = EducationCard(educationData, viewerMode);
+  const educationDetails = educationData || [];
+  const hasEducation = educationDetails && educationDetails.length > 0;
+  const showSection = true;
+  const isOwner = viewerMode === 'owner';
+  return showSection ? (0, _litHtml.html)`
+    <section 
+      aria-labelledby="education-heading" 
+      class="profile-section-collapsible section-bg" 
+      role="region"
+      tabindex="-1"
+      data-expanded="false"
+    >
+      <header class="profile__section-header profile-section-collapsible__header">
+        <h2 id="education-heading" tabindex="-1">${_texts.educationHeadingText}</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 education details"
+              @click=${event => (0, _EducationEditDialog.createEducationEditDialog)(event, store, subject, educationDetails, viewerMode, onSaved)}
+            >
+              <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 education section"
+            aria-controls="education-panel"
+            aria-expanded="false"
+            @click=${_collapsibleSection.toggleCollapsibleSection}
+          >
+            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
+          </button>
+        </div>
+      </header>
+      <div id="education-panel" class="profile-section-collapsible__content" aria-hidden="true">
+        ${hasEducation ? educationCard : (0, _litHtml.html)`<p>No education details added yet.</p>`}
+      </div>
+    </section>
+  ` : '';
+}

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

@@ -0,0 +1,4 @@
+import { LiveStore, NamedNode } from 'rdflib';
+import { EducationMutationPlan } from './types';
+export declare function processEducationMutations(store: LiveStore, subject: NamedNode, mutationPlan: EducationMutationPlan): Promise<void>;
+//# sourceMappingURL=mutations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/education/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAqB,MAAM,QAAQ,CAAA;AAEhE,OAAO,EAAE,qBAAqB,EAAgB,MAAM,SAAS,CAAA;AAgE7D,wBAAsB,yBAAyB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,qBAAqB,iBAOxH"}

package/lib/sections/education/mutations.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processEducationMutations = processEducationMutations;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+var _rdfMutationHelpers = require("../shared/rdfMutationHelpers");
+var _texts = require("../../texts");
+const educationMembershipType = _solidUi.ns.schema('EducationalOccupationalCredential');
+function isEducationMembership(store, node, doc) {
+  return store.holds(node, _solidUi.ns.rdf('type'), educationMembershipType, doc);
+}
+function buildEducationStatements(subject, doc, node, education, includeMembershipLink = true) {
+  const inserts = includeMembershipLink ? [(0, _rdflib.st)(node, _solidUi.ns.org('member'), subject, doc)] : [];
+  inserts.push((0, _rdflib.st)(node, _solidUi.ns.rdf('type'), educationMembershipType, doc));
+  if (education.school) inserts.push((0, _rdflib.st)(node, _solidUi.ns.schema('name'), (0, _rdflib.literal)(education.school), doc));
+  if (education.degree) inserts.push((0, _rdflib.st)(node, _solidUi.ns.schema('educationalCredentialAwarded'), (0, _rdflib.literal)(education.degree), doc));
+  if (education.location) inserts.push((0, _rdflib.st)(node, _solidUi.ns.schema('location'), (0, _rdflib.literal)(education.location), doc));
+  if (education.startDate) inserts.push((0, _rdflib.st)(node, _solidUi.ns.schema('startDate'), (0, _rdflib.literal)(education.startDate), doc));
+  if (education.endDate) inserts.push((0, _rdflib.st)(node, _solidUi.ns.schema('endDate'), (0, _rdflib.literal)(education.endDate), doc));
+  if (education.description) inserts.push((0, _rdflib.st)(node, _solidUi.ns.schema('description'), (0, _rdflib.literal)(education.description), doc));
+  return inserts;
+}
+async function mutateEducationEntries(store, subject, educationOps) {
+  const doc = subject.doc();
+  const existingEducationNodes = store.each(null, _solidUi.ns.org('member'), subject, doc).filter(node => isEducationMembership(store, node, doc));
+  const deletions = [];
+  const insertions = [];
+  educationOps.remove.forEach(education => {
+    if (!education.entryNode) return;
+    const existingNode = (0, _rdfMutationHelpers.findExistingNode)(existingEducationNodes, education.entryNode);
+    if (existingNode) {
+      deletions.push(...(0, _rdfMutationHelpers.collectNodeStatements)(store, existingNode, doc));
+    }
+  });
+  educationOps.update.forEach(education => {
+    if (!education.entryNode) return;
+    const existingNode = (0, _rdfMutationHelpers.findExistingNode)(existingEducationNodes, education.entryNode);
+    if (!existingNode) {
+      insertions.push(...buildEducationStatements(subject, doc, store.bnode(), education));
+      return;
+    }
+    deletions.push(...(0, _rdfMutationHelpers.collectNodeStatements)(store, existingNode, doc));
+    insertions.push(...buildEducationStatements(subject, doc, existingNode, education));
+  });
+  educationOps.create.forEach(education => {
+    insertions.push(...buildEducationStatements(subject, doc, store.bnode(), education));
+  });
+  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+}
+async function processEducationMutations(store, subject, mutationPlan) {
+  try {
+    await mutateEducationEntries(store, subject, mutationPlan);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new Error(`${_texts.mutationEducationFailedPrefixText} ${message}`);
+  }
+}

package/lib/sections/education/selectors.d.ts

@@ -0,0 +1,4 @@
+import { LiveStore, NamedNode } from 'rdflib';
+import { EducationDetails } from './types';
+export declare function presentEducation(subject: NamedNode, store: LiveStore): EducationDetails[];
+//# sourceMappingURL=selectors.d.ts.map

package/lib/sections/education/selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../src/sections/education/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAQ,MAAM,QAAQ,CAAA;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AA2E1C,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,gBAAgB,EAAE,CAGzF"}