profile-pane 3.1.4 → 3.2.0

package/lib/sections/resume/ResumeEditDialog.js

@@ -0,0 +1,629 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createResumeEditDialog = createResumeEditDialog;
+var _dialog = require("../../ui/dialog");
+var _litHtml = require("lit-html");
+require("../../styles/EditDialogs.css");
+require("../../styles/ContactInfoEditDialog.css");
+var _rdflib = require("rdflib");
+var _mutations = require("./mutations");
+var _rowState = require("../shared/rowState");
+var _textUtils = require("../../textUtils");
+var _profileIcons = require("../../icons-svg/profileIcons");
+var _texts = require("../../texts");
+function sanitizeResumeFieldValue(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 Boolean(row.isCurrentRole) || [row.title, row.roleType, (0, _textUtils.toText)(row.startDate), (0, _textUtils.toText)(row.endDate), row.orgName, row.orgType, row.orgLocation, row.orgHomePage, row.description].some(_textUtils.hasNonEmptyText);
+}
+function toFormState(resumeData) {
+  const roles = (resumeData || []).map(role => ({
+    title: sanitizeResumeFieldValue((0, _textUtils.toText)(role.title)),
+    roleType: sanitizeResumeFieldValue((0, _textUtils.toText)(role.roleType)),
+    startDate: role.startDate,
+    endDate: role.endDate,
+    isCurrentRole: role.isCurrentRole ?? !role.endDate,
+    orgName: sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgName)),
+    orgType: sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgType)),
+    orgLocation: sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgLocation)),
+    orgHomePage: sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgHomePage)),
+    description: sanitizeResumeFieldValue((0, _textUtils.toText)(role.description)),
+    entryNode: (0, _textUtils.toText)(role.entryNode),
+    status: (0, _textUtils.toText)(role.entryNode) ? 'existing' : 'new'
+  })).filter(role => rowHasContent(role) || Boolean(role.entryNode));
+  return {
+    resumeData: roles.length ? roles : [{
+      title: '',
+      roleType: '',
+      startDate: undefined,
+      endDate: undefined,
+      isCurrentRole: false,
+      orgName: '',
+      orgType: '',
+      orgLocation: '',
+      orgHomePage: '',
+      description: '',
+      entryNode: '',
+      status: 'new'
+    }]
+  };
+}
+function validateResumeBeforeSave(rows) {
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    if (!row || row.status === 'deleted') continue;
+    if (!rowHasContent(row)) continue;
+    const endDateText = (0, _textUtils.toText)(row.endDate).trim();
+    if (!row.isCurrentRole && !endDateText) {
+      return {
+        ok: false,
+        message: `Resume ${i + 1}: End Year is required unless "I am currently working in this role" is selected.`
+      };
+    }
+  }
+  return {
+    ok: true
+  };
+}
+function renderResumeInputRow({
+  resumeData,
+  index,
+  displayIndex,
+  onDelete,
+  onChange
+}) {
+  const resumeRow = resumeData[index];
+  const label = `Resume ${displayIndex + 1}`;
+  const experienceHeadingId = `resume-experience-heading-${index}`;
+  const titleName = `resume-title-${index}`;
+  const organizationName = `resume-organization-${index}`;
+  const organizationTypeName = `resume-organization-type-${index}`;
+  const organizationTypeSelectId = `resume-organization-type-select-${index}`;
+  const companyUrlName = `resume-company-url-${index}`;
+  const orgLocationName = `resume-org-location-${index}`;
+  const descriptionName = `resume-description-${index}`;
+  const descriptionCounterId = `resume-description-counter-${index}`;
+  const descriptionMaxLength = 2000;
+  const descriptionCount = (resumeRow?.description || '').length;
+  const startMonthLabel = `Start Month ${displayIndex + 1}`;
+  const startMonthInputName = `resume-start-month-${index}`;
+  const startMonthSelectId = `resume-start-month-select-${index}`;
+  const startYearLabel = `Start Year ${displayIndex + 1}`;
+  const startYearInputName = `resume-start-year-${index}`;
+  const startYearSelectId = `resume-start-year-select-${index}`;
+  const startDateText = (0, _textUtils.toText)(resumeRow?.startDate);
+  const startDateParts = parseYearMonthFromDateText(startDateText);
+  const startMonthValue = startDateParts.month;
+  const startYearText = startDateParts.year;
+  const endMonthLabel = `End Month ${displayIndex + 1}`;
+  const endMonthInputName = `resume-end-month-${index}`;
+  const endMonthSelectId = `resume-end-month-select-${index}`;
+  const endDateText = (0, _textUtils.toText)(resumeRow?.endDate);
+  const endYearLabel = `End Year ${displayIndex + 1}`;
+  const endYearInputName = `resume-end-year-${index}`;
+  const endYearSelectId = `resume-end-year-select-${index}`;
+  const endDateParts = parseYearMonthFromDateText(endDateText);
+  const endMonthValue = endDateParts.month;
+  const endYearParsedText = endDateParts.year;
+  const isCurrentRoleId = `resume-current-role-${index}`;
+  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, emptyLabel = 'Select Month') => (0, _litHtml.html)`
+    <option value="" ?selected=${!selectedMonth}>${emptyLabel}</option>
+    ${monthOptions.map(month => (0, _litHtml.html)`
+      <option value=${month.value} ?selected=${month.value === selectedMonth}>${month.label}</option>
+    `)}
+  `;
+  const renderYearOptions = (selectedYear, emptyLabel = 'Select Year') => (0, _litHtml.html)`
+    <option value="" ?selected=${!selectedYear}>${emptyLabel}</option>
+    ${yearOptions.map(year => (0, _litHtml.html)`
+      <option value=${year} ?selected=${year === selectedYear}>${year}</option>
+    `)}
+  `;
+  const handleResumeInput = field => e => {
+    const target = e.target;
+    const nextValue = sanitizeResumeFieldValue(target.value);
+    if (resumeRow) {
+      (0, _rowState.applyRowFieldChange)(resumeRow, field, nextValue, rowHasContent);
+      onChange();
+    }
+  };
+  const handleDelete = event => {
+    event.preventDefault();
+    onDelete();
+  };
+  const buildDateLiteral = (month, year) => {
+    if (!month || !year) return undefined;
+    return (0, _rdflib.literal)(`${year}-${month}-01`);
+  };
+
+  /* The following function was generated by AI Model: GPT-5.3-Codex  */
+  /* Prompt: can you make this a month drop down for the start year */
+  const handleStartMonthChange = event => {
+    const target = event.target;
+    const month = target.value;
+    const year = parseYearMonthFromDateText((0, _textUtils.toText)(resumeData[index]?.startDate)).year || String(currentYear);
+    const nextStartDate = buildDateLiteral(month, year);
+    if (resumeData[index]) {
+      (0, _rowState.applyRowFieldChange)(resumeData[index], 'startDate', nextStartDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleStartYearChange = event => {
+    const target = event.target;
+    const year = target.value;
+    const month = parseYearMonthFromDateText((0, _textUtils.toText)(resumeData[index]?.startDate)).month || '01';
+    const nextStartDate = buildDateLiteral(month, year);
+    if (resumeData[index]) {
+      (0, _rowState.applyRowFieldChange)(resumeData[index], 'startDate', nextStartDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleEndMonthChange = event => {
+    const target = event.target;
+    const month = target.value;
+    const year = parseYearMonthFromDateText((0, _textUtils.toText)(resumeData[index]?.endDate)).year || String(currentYear);
+    const nextEndDate = buildDateLiteral(month, year);
+    if (resumeData[index]) {
+      (0, _rowState.applyRowFieldChange)(resumeData[index], 'endDate', nextEndDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleEndYearChange = event => {
+    const target = event.target;
+    const year = target.value;
+    const month = parseYearMonthFromDateText((0, _textUtils.toText)(resumeData[index]?.endDate)).month || '01';
+    const nextEndDate = buildDateLiteral(month, year);
+    if (resumeData[index]) {
+      (0, _rowState.applyRowFieldChange)(resumeData[index], 'endDate', nextEndDate, rowHasContent);
+      onChange();
+    }
+  };
+  const handleDescriptionInput = event => {
+    const target = event.target;
+    const nextValue = sanitizeResumeFieldValue(target.value.slice(0, descriptionMaxLength));
+    if (resumeData[index]) {
+      (0, _rowState.applyRowFieldChange)(resumeData[index], 'description', nextValue, rowHasContent);
+      onChange();
+    }
+  };
+  const handleCurrentRoleToggle = event => {
+    const target = event.target;
+    if (resumeData[index]) {
+      (0, _rowState.applyRowFieldChange)(resumeData[index], 'isCurrentRole', target.checked, rowHasContent);
+      if (target.checked) {
+        (0, _rowState.applyRowFieldChange)(resumeData[index], 'endDate', undefined, rowHasContent);
+      }
+      const formRoot = target.form || target.closest('form');
+      const endMonthSelect = formRoot?.querySelector(`#${endMonthSelectId}`);
+      const endYearSelect = formRoot?.querySelector(`#${endYearSelectId}`);
+      if (endMonthSelect) {
+        endMonthSelect.disabled = target.checked;
+        endMonthSelect.value = '';
+        const emptyOption = endMonthSelect.options[0];
+        if (emptyOption) {
+          emptyOption.text = target.checked ? 'Present' : 'Select Month';
+        }
+      }
+      if (endYearSelect) {
+        endYearSelect.disabled = target.checked;
+        endYearSelect.value = '';
+        const emptyOption = endYearSelect.options[0];
+        if (emptyOption) {
+          emptyOption.text = target.checked ? '' : 'Select Year';
+        }
+      }
+    }
+  };
+  const handleOrganizationTypeInput = e => {
+    const target = e.target;
+    const nextType = target.value;
+    if (resumeRow) {
+      (0, _rowState.applyRowSelectChange)(resumeRow, 'orgType', nextType);
+      onChange();
+    }
+  };
+  return (0, _litHtml.html)`
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--resume-entry-header" role="group" aria-labelledby=${experienceHeadingId}>
+      <h3 id=${experienceHeadingId} class="profile-edit-dialog__entry-heading">${label}</h3>
+      <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
+        <button
+          type="button"
+          class="profile-edit-dialog__delete-button"
+          aria-label=${`Delete resume ${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} Title`} class="label profile-edit-dialog__field">
+      Title
+      <input
+        class="input"
+        type="text"
+        name=${titleName}
+        .value=${resumeRow?.title || ''}
+        data-contact-field="title"
+        data-entry-node=${resumeRow?.entryNode || ''}
+        data-row-status=${resumeRow?.status || 'n/a'}
+        placeholder="Title"
+        autocomplete="title"
+        inputmode="text"
+        @change=${handleResumeInput('title')}
+      />
+    </label>
+    <div class="profile-edit-dialog__row">
+      <label aria-label=${`${label} Organization Name`} class="label profile-edit-dialog__field">
+        Company or Organization 
+        <input
+          class="input"
+          type="text"
+          name=${organizationName}
+          .value=${resumeRow?.orgName || ''}
+          required
+          data-contact-field="organizationName"
+          data-entry-node=${resumeRow?.entryNode || ''}
+          data-row-status=${resumeRow?.status || 'n/a'}
+          placeholder="Company or Organization"
+          autocomplete="organization"
+          inputmode="text"
+          @change=${handleResumeInput('orgName')}
+        />
+      </label>
+      <label aria-label=${`${label} Organization Type`} class="label profile-edit-dialog__field">
+        Organization Type
+        <select name=${organizationTypeName} id=${organizationTypeSelectId} @change=${handleOrganizationTypeInput} .value=${resumeRow?.orgType || ''}>
+          <option value="Corporation">Corporation</option>
+          <option value="EducationalOrganization">Educational Organization</option>
+          <option value="ResearchOrganization">Research Organization</option>
+          <option value="GovernmentOrganization">Government Organization</option>
+          <option value="NGO">NGO</option>
+          <option value="PerformingGroup">Performing Group</option>
+          <option value="Project">Project</option>
+          <option value="SportsOrganization">Sports Organization</option>
+          <option value="Other">Other</option>
+        </select>
+      </label>
+    </div>  
+    <div class="profile-edit-dialog__row">
+      <label aria-label=${`${label} Company URL`} class="label profile-edit-dialog__field">
+        Company URL
+        <input
+          class="input"
+          type="text"
+          name=${companyUrlName}
+          .value=${resumeRow?.orgHomePage || ''}
+          data-contact-field="orgHomePage"
+          data-entry-node=${resumeRow?.entryNode || ''}
+          data-row-status=${resumeRow?.status || 'n/a'}
+          placeholder="Company URL"
+          autocomplete="url"
+          inputmode="text"
+          @change=${handleResumeInput('orgHomePage')}
+        />
+      </label>
+      <label aria-label=${`${label} Location`} class="label profile-edit-dialog__field profile-edit-dialog__field--resume-location">
+        Location
+        <input
+          class="input"
+          type="text"
+          name=${orgLocationName}
+          .value=${resumeRow?.orgLocation || ''}
+          data-contact-field="orgLocation"
+          data-entry-node=${resumeRow?.entryNode || ''}
+          data-row-status=${resumeRow?.status || 'n/a'}
+          placeholder="Location"
+          autocomplete="address-level2"
+          inputmode="text"
+          @change=${handleResumeInput('orgLocation')}
+        />
+      </label>
+    </div>
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--resume-dates">
+      <label aria-label=${`Start Date ${displayIndex + 1}`} class="label profile-edit-dialog__field profile-edit-dialog__field--date-group">
+        <span>Start Date</span>
+        <div class="profile-edit-dialog__date-pair">
+          <select name=${startMonthInputName} id=${startMonthSelectId} aria-label=${startMonthLabel} @change=${handleStartMonthChange}>
+            ${renderMonthOptions(startMonthValue)}
+          </select>
+          <select name=${startYearInputName} id=${startYearSelectId} aria-label=${startYearLabel} @change=${handleStartYearChange}>
+            ${renderYearOptions(startYearText)}
+          </select>
+        </div>
+      </label>
+      <label aria-label=${`End Date ${displayIndex + 1}`} class="label profile-edit-dialog__field profile-edit-dialog__field--date-group">
+        <span>End Date</span>
+        <div class="profile-edit-dialog__date-pair">
+          <select
+            name=${endMonthInputName}
+            id=${endMonthSelectId}
+            aria-label=${endMonthLabel}
+            @change=${handleEndMonthChange}
+            ?disabled=${Boolean(resumeRow?.isCurrentRole)}
+          >
+            ${renderMonthOptions(endMonthValue, resumeRow?.isCurrentRole ? 'Present' : 'Select Month')}
+          </select>
+          <select
+            name=${endYearInputName}
+            id=${endYearSelectId}
+            aria-label=${endYearLabel}
+            @change=${handleEndYearChange}
+            ?disabled=${Boolean(resumeRow?.isCurrentRole)}
+          >
+            ${renderYearOptions(endYearParsedText, resumeRow?.isCurrentRole ? '' : 'Select Year')}
+          </select>
+        </div>
+      </label>
+    </div>
+    <div class="profile-edit-dialog__row profile-edit-dialog__row--inline-end">
+      <label class="label profile-edit-dialog__checkbox-label" for=${isCurrentRoleId}>
+        <input
+          class="profile-edit-dialog__checkbox-input"
+          type="checkbox"
+          id=${isCurrentRoleId}
+          name="isCurrentRole"
+          .checked=${Boolean(resumeRow?.isCurrentRole)}
+          @change=${handleCurrentRoleToggle}
+        />
+        <span>I am currently working in this role</span>
+      </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=${resumeRow?.description || ''}
+        maxlength=${descriptionMaxLength}
+        aria-describedby=${descriptionCounterId}
+        data-contact-field="description"
+        data-entry-node=${resumeRow?.entryNode || ''}
+        data-row-status=${resumeRow?.status || 'n/a'}
+        placeholder="Description"
+        autocomplete="off"
+        inputmode="text"
+        @input=${handleDescriptionInput}
+      ></textarea>
+      <small id=${descriptionCounterId} aria-live="polite">${descriptionCount}/${descriptionMaxLength}</small>
+    </label>
+  `;
+}
+function renderResumeSection(resumeData, onAddRow) {
+  const visibleResumeRows = resumeData.map((resume, index) => ({
+    resume,
+    index
+  })).filter(({
+    resume
+  }) => resume.status !== 'deleted');
+  return (0, _litHtml.html)`
+    <section class="profile-edit-dialog__section profile-edit-dialog__section--resume" aria-label="Resume">
+      <fieldset>
+        <legend class="sr-only">Resume entries</legend>
+        ${visibleResumeRows.map(({
+    index
+  }, displayIndex) => renderResumeInputRow({
+    resumeData,
+    index,
+    displayIndex,
+    onDelete: () => {
+      (0, _rowState.deleteRow)(resumeData, index);
+      onAddRow();
+    },
+    onChange: onAddRow
+  }))}
+      </fieldset>
+    </section>
+  `;
+}
+function renderResumeEditTemplate(form, formState, rerender, viewerMode) {
+  (0, _litHtml.render)((0, _litHtml.html)`
+    ${renderResumeSection(formState.resumeData, rerender)}
+    ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
+  `, form);
+}
+function captureResumeDialogRenderState(form) {
+  const dialog = form.closest('dialog');
+  const description = dialog?.querySelector('#modal-desc');
+  const activeElement = form.ownerDocument.activeElement;
+  return {
+    dialogScrollTop: dialog?.scrollTop || 0,
+    descriptionScrollTop: description?.scrollTop || 0,
+    activeId: activeElement?.id || '',
+    activeName: activeElement?.getAttribute('name') || ''
+  };
+}
+function restoreResumeDialogRenderState(form, state) {
+  const dialog = form.closest('dialog');
+  const description = dialog?.querySelector('#modal-desc');
+  if (dialog) dialog.scrollTop = state.dialogScrollTop;
+  if (description) description.scrollTop = state.descriptionScrollTop;
+  const escapedId = state.activeId && typeof CSS !== 'undefined' && typeof CSS.escape === 'function' ? CSS.escape(state.activeId) : state.activeId;
+  const escapedName = state.activeName && typeof CSS !== 'undefined' && typeof CSS.escape === 'function' ? CSS.escape(state.activeName) : state.activeName;
+  let nextActive = null;
+  if (escapedId) {
+    nextActive = form.querySelector(`#${escapedId}`);
+  }
+  if (!nextActive && escapedName) {
+    nextActive = form.querySelector(`[name="${escapedName}"]`);
+  }
+  if (nextActive && typeof nextActive.focus === 'function') {
+    nextActive.focus({
+      preventScroll: true
+    });
+  }
+}
+function focusResumeField(form, selector) {
+  const nextField = form.querySelector(selector);
+  if (!nextField || typeof nextField.focus !== 'function') return;
+  nextField.focus({
+    preventScroll: true
+  });
+  if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+    nextField.select();
+  }
+}
+function createResumeEditForm(resumeData, viewerMode) {
+  const form = document.createElement('form');
+  form.classList.add('profile__edit-form');
+  form.classList.add('profile__edit-form--resume');
+  const formState = toFormState(resumeData);
+  const rerender = (options = {}) => {
+    const {
+      preserveState = true,
+      focusSelector
+    } = options;
+    const renderState = preserveState ? captureResumeDialogRenderState(form) : null;
+    renderResumeEditTemplate(form, formState, rerender, viewerMode);
+    if (renderState) {
+      restoreResumeDialogRenderState(form, renderState);
+    }
+    if (focusSelector) {
+      focusResumeField(form, focusSelector);
+    }
+  };
+  rerender();
+  const addRow = () => {
+    formState.resumeData.unshift({
+      title: '',
+      roleType: '',
+      startDate: undefined,
+      endDate: undefined,
+      isCurrentRole: false,
+      orgName: '',
+      orgType: '',
+      orgLocation: '',
+      orgHomePage: '',
+      description: '',
+      entryNode: '',
+      status: 'new'
+    });
+    rerender({
+      preserveState: false,
+      focusSelector: '[name="resume-title-0"]'
+    });
+  };
+  return {
+    form,
+    formState,
+    rerender,
+    addRow
+  };
+}
+async function createResumeEditDialog(event, store, subject, resumeData, viewerMode, onSaved) {
+  const dom = event.currentTarget?.ownerDocument || document;
+  const {
+    form,
+    formState,
+    rerender,
+    addRow
+  } = createResumeEditForm(resumeData, viewerMode);
+  const result = await (0, _dialog.openInputDialog)({
+    title: _texts.editResumeDialogTitleText,
+    dom,
+    form,
+    headerAction: {
+      type: 'button',
+      label: '+ Add More',
+      ariaLabel: 'Add another resume entry',
+      onClick: addRow
+    },
+    submitLabel: _texts.dialogSubmitLabelText,
+    cancelLabel: _texts.dialogCancelLabelText,
+    validate: async () => {
+      if (viewerMode !== 'owner') {
+        return _texts.ownerLoginRequiredDialogMessageText;
+      }
+      const plan = (0, _rowState.summarizeRowOps)(formState.resumeData, rowHasContent);
+      const hasChanges = plan.create.length > 0 || plan.update.length > 0 || plan.remove.length > 0;
+      if (!hasChanges) {
+        return 'No resume changes detected.';
+      }
+      const validation = validateResumeBeforeSave(formState.resumeData);
+      if (!validation.ok) {
+        return validation.message || 'Please complete the required resume fields.';
+      }
+      return null;
+    },
+    onSave: async () => {
+      const plan = (0, _rowState.summarizeRowOps)(formState.resumeData, rowHasContent);
+      await (0, _mutations.processResumeMutations)(store, subject, plan);
+      rerender();
+    },
+    formatSaveError: error => {
+      const message = error instanceof Error ? error.message : String(error);
+      return `${_texts.saveResumeUpdatesFailedPrefixText} ${message}`;
+    }
+  });
+  if (!result) return;
+  if (onSaved) {
+    await onSaved();
+    return;
+  }
+  await (0, _dialog.alertDialog)('Resume updates saved. Refresh to see latest values.', 'Saved', dom);
+}

package/lib/sections/resume/ResumeSection.d.ts

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

package/lib/sections/resume/ResumeSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResumeSection.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/ResumeSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA6D7C,eAAO,MAAM,MAAM,GACjB,QAAQ,WAAW,EAAE,EACrB,YAAY,UAAU,yCAevB,CAAA;AA+GD,wBAAgB,eAAe,CAC7B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,WAAW,EAAE,EACpB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAarC"}