profile-pane 3.2.1 → 3.2.2-test.0

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

@@ -1,7 +1,31 @@
+import { LiveStore, NamedNode, st } from 'rdflib';
 export type RowStatus = 'existing' | 'new' | 'modified' | 'deleted';
 export type MutationOps<T> = {
     create: T[];
     update: T[];
     remove: T[];
 };
+export type RdfStatement = ReturnType<typeof st>;
+export type PrefixCapable = {
+    namespaces?: Record<string, string>;
+    setPrefixForURI?: (prefix: string, uri: string) => void;
+};
+export type UpdateCallback = (_uri: string, ok: boolean, message?: string) => void;
+export type DavUpdateCallback = (_uri: string, ok: boolean, body?: string) => void;
+export type RdfUpdater = PrefixCapable & {
+    update?: (deletions: RdfStatement[], insertions: RdfStatement[], callback: UpdateCallback) => void;
+    updateDav?: (doc: NamedNode, deletions: RdfStatement[], insertions: RdfStatement[], callback: DavUpdateCallback) => void;
+    serialize?: (docUri: string, statements: RdfStatement[], contentType: string) => string;
+    store?: PrefixCapable;
+};
+export type WebOperationResponse = {
+    ok?: boolean;
+    status?: number;
+    responseText?: string;
+};
+export type RdfFetcher = {
+    load?: (doc: NamedNode) => Promise<unknown>;
+    webOperation?: (...args: unknown[]) => Promise<WebOperationResponse>;
+};
+export type MutationCapableStore = LiveStore;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/sections/shared/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,CAAA;AAEnE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,CAAC,EAAE,CAAA;IACX,MAAM,EAAE,CAAC,EAAE,CAAA;IACX,MAAM,EAAE,CAAC,EAAE,CAAA;CACZ,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/sections/shared/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAEjD,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,CAAA;AAEnE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,CAAC,EAAE,CAAA;IACX,MAAM,EAAE,CAAC,EAAE,CAAA;IACX,MAAM,EAAE,CAAC,EAAE,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC,CAAA;AAEhD,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;AAElF,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;AAElF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG;IACvC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAA;IAClG,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACxH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CAAA;IACvF,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC3C,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,oBAAoB,CAAC,CAAA;CACrE,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAA"}

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

@@ -1,6 +1,8 @@
+import 'solid-ui/components/actions/button';
+import 'solid-ui/components/forms/combobox';
 import { SkillDetails } from './types';
 import '../../styles/EditDialogs.css';
-import '../../styles/ContactInfoEditDialog.css';
+import '../contactInfo/ContactInfoEditDialog.css';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';
 export declare function createSkillsEditDialog(event: Event, store: LiveStore, subject: NamedNode, skills: SkillDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"SkillsEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AAChD,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAmXxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA2CrC"}
+{"version":3,"file":"SkillsEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AAChD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA8YxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAkDrC"}

package/lib/sections/skills/SkillsEditDialog.js

@@ -6,20 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.createSkillsEditDialog = createSkillsEditDialog;
 var _dialog = require("../../ui/dialog");
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
+require("solid-ui/components/forms/combobox");
 require("../../styles/EditDialogs.css");
-require("../../styles/ContactInfoEditDialog.css");
+require("../contactInfo/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 ESCO_SKILL_SEARCH_URI = 'https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)';
+const ESCO_SKILL_SEARCH_URI = 'https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)&selectedVersion=v1.2.0';
 const ESCO_SEARCH_LANGUAGE = 'en';
 const ESCO_SEARCH_LIMIT = 8;
 const ESCO_SKILL_BASE_URI = 'http://data.europa.eu/esco/skill/';
 function normalizeSkillPublicId(value) {
   const normalized = sanitizeSkillFieldValue(value);
   if (!normalized) return '';
+  if (normalized.startsWith('_:')) return normalized;
   if (normalized.startsWith('skill:')) return normalized;
   if (normalized.startsWith(ESCO_SKILL_BASE_URI)) {
     const suffix = normalized.slice(ESCO_SKILL_BASE_URI.length);
@@ -48,10 +51,10 @@ async function fetchEscoSkillSuggestions(name) {
     const seen = new Set();
     return results.map(result => {
       const label = sanitizeSkillFieldValue(toSkillLabel(result));
-      const uri = typeof result?.uri === 'string' ? result.uri : '';
+      const publicId = normalizeSkillPublicId(typeof result?.uri === 'string' ? result.uri : '');
       return {
         label,
-        uri
+        publicId
       };
     }).filter(suggestion => {
       if (!suggestion.label) return false;
@@ -86,74 +89,130 @@ function toFormState(details) {
     }]
   };
 }
-function matchSkillSuggestion(suggestions, value) {
-  const normalized = sanitizeSkillFieldValue(value).toLowerCase();
-  if (!normalized) return null;
-  return suggestions.find(suggestion => suggestion.label.toLowerCase() === normalized) || null;
+function toSkillComboboxOption(suggestion) {
+  return {
+    label: suggestion.label,
+    value: suggestion.publicId,
+    publicId: suggestion.publicId
+  };
 }
-function validateSkillsBeforeSave(rows) {
-  const ops = (0, _rowState.summarizeRowOps)(rows, rowHasContent);
-  const hasChanges = ops.create.length > 0 || ops.update.length > 0 || ops.remove.length > 0;
-  if (!hasChanges) return 'No skill 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 (row.status !== 'existing' && !(0, _textUtils.hasNonEmptyText)(row.publicId)) {
-      return `Skill ${i + 1}: please select a skill from the ESCO suggestions.`;
-    }
+function readSkillComboboxInputValue(event) {
+  const customEvent = event;
+  if (typeof customEvent.detail?.value === 'string') {
+    return customEvent.detail.value;
+  }
+  const target = event.target;
+  return typeof target?.value === 'string' ? target.value : '';
+}
+function readSkillComboboxChange(event) {
+  const customEvent = event;
+  if (customEvent.detail?.option) {
+    return customEvent.detail.option;
   }
   return null;
 }
-function hasInvalidSkillSelection(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 createSkillSuggestionProvider() {
+  return async query => {
+    const suggestions = await fetchEscoSkillSuggestions(query);
+    return suggestions.map(toSkillComboboxOption);
+  };
+}
+function initializeSkillComboboxes(form, rows) {
+  const comboboxElements = form.querySelectorAll('solid-ui-combobox[data-skill-row-index]');
+  comboboxElements.forEach(comboboxElement => {
+    const rowIndex = Number(comboboxElement.dataset.skillRowIndex);
+    if (Number.isNaN(rowIndex)) return;
+    const row = rows[rowIndex];
+    const nextInputValue = row?.name || '';
+    const options = row?.publicId && row?.name ? [{
+      label: row.name,
+      value: row.publicId,
+      publicId: row.publicId
+    }] : [];
+    comboboxElement.suggestionProvider = createSkillSuggestionProvider();
+    comboboxElement.options = options;
+    comboboxElement.value = row?.publicId || '';
+    comboboxElement.inputValue = nextInputValue;
+    comboboxElement.label = '';
+    comboboxElement.placeholder = 'Skill';
+    const comboboxInput = comboboxElement.shadowRoot?.querySelector('input');
+    if (comboboxInput) {
+      comboboxInput.value = nextInputValue;
+    }
+  });
+}
+function syncSkillRowsFromComboboxes(form, rows) {
+  const comboboxElements = form.querySelectorAll('solid-ui-combobox[data-skill-row-index]');
+  comboboxElements.forEach(comboboxElement => {
+    const rowIndex = Number(comboboxElement.dataset.skillRowIndex);
+    if (Number.isNaN(rowIndex) || !rows[rowIndex]) return;
+    const comboboxInput = comboboxElement.shadowRoot?.querySelector('input');
+    const nextName = sanitizeSkillFieldValue(comboboxInput?.value || comboboxElement.inputValue || '');
+    const nextPublicId = normalizeSkillPublicId(comboboxElement.value || '');
+    (0, _rowState.applyRowFieldChange)(rows[rowIndex], 'name', nextName, rowHasContent);
+    rows[rowIndex].publicId = nextPublicId;
   });
 }
+function validateSkillsBeforeSave(_rows) {
+  return null;
+}
+function hasInvalidSkillSelection(_rows) {
+  return false;
+}
 function updateSkillsSubmitEnabled(rows) {
-  const submitButton = document.querySelector('#profile-modal #modal-buttons button.btn-primary');
+  const submitButton = (0, _dialog.getSharedDialogSaveButton)(document);
   if (!submitButton) return;
   submitButton.disabled = hasInvalidSkillSelection(rows);
 }
 function focusSkillField(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();
+  if (typeof nextField.scrollIntoView === 'function') {
+    nextField.scrollIntoView({
+      block: 'start',
+      behavior: 'auto'
+    });
+  }
+  const comboboxHost = nextField.tagName === 'SOLID-UI-COMBOBOX' ? nextField : null;
+  const comboboxInput = comboboxHost ? comboboxHost.shadowRoot?.querySelector('input') : null;
+  const focusTarget = comboboxInput || nextField;
+  focusTarget.focus();
+  if (focusTarget instanceof HTMLInputElement) {
+    const caretPosition = 0;
+    focusTarget.setSelectionRange(caretPosition, caretPosition);
+    focusTarget.scrollLeft = 0;
+    requestAnimationFrame(() => {
+      focusTarget.scrollLeft = 0;
+    });
+  }
+  if (comboboxHost?._closePopup) {
+    requestAnimationFrame(() => {
+      comboboxHost._closePopup?.();
+    });
   }
 }
 function renderSkillInputRow({
   rows,
   index,
   displayIndex,
-  onDelete,
-  onChange,
-  onSkillSearch,
-  suggestions
+  onDelete
 }) {
-  const row = rows[index];
   const label = `Skill ${displayIndex + 1}`;
-  const skillName = `skill-${index}`;
-  const datalistId = `skill-suggestions-${index}`;
-  const hasSelectionIssue = Boolean(row && row.status !== 'deleted' && (0, _textUtils.hasNonEmptyText)(row.name) && !(0, _textUtils.hasNonEmptyText)(row.publicId));
-  const handleSkillInput = field => e => {
-    const target = e.target;
-    const nextValue = sanitizeSkillFieldValue(target.value);
+  const handleSkillInput = _field => e => {
+    const nextValue = sanitizeSkillFieldValue(readSkillComboboxInputValue(e));
     if (rows[index]) {
-      (0, _rowState.applyRowFieldChange)(rows[index], field, nextValue, rowHasContent);
-      const matchedSuggestion = matchSkillSuggestion(suggestions, nextValue);
-      rows[index].publicId = normalizeSkillPublicId(matchedSuggestion?.uri || '');
-      onSkillSearch(index, nextValue);
-      onChange();
+      (0, _rowState.applyRowFieldChange)(rows[index], 'name', nextValue, rowHasContent);
+      rows[index].publicId = '';
+      updateSkillsSubmitEnabled(rows);
     }
   };
+  const handleSkillChange = e => {
+    const selectedOption = readSkillComboboxChange(e);
+    if (!rows[index] || !selectedOption?.publicId) return;
+    (0, _rowState.applyRowFieldChange)(rows[index], 'name', sanitizeSkillFieldValue(selectedOption.label), rowHasContent);
+    rows[index].publicId = selectedOption.publicId;
+    updateSkillsSubmitEnabled(rows);
+  };
   const handleDelete = event => {
     event.preventDefault();
     onDelete();
@@ -161,45 +220,31 @@ function renderSkillInputRow({
   return (0, _litHtml.html)`
     <div class="profile-edit-dialog__row profile-edit-dialog__row--full profile-edit-dialog__row--skill">
       <label aria-label=${`${label} Name`} class="label profile-edit-dialog__field profile-edit-dialog__field--full">
-        <div class="profile-edit-dialog__input-wrap">
-          <span class="profile-edit-dialog__search-icon" aria-hidden="true">${_profileIcons.searchIcon}</span>
-          <input
-            class="input profile-edit-dialog__input--with-leading-icon"
-            type="text"
-            name=${skillName}
-            .value=${row?.name || ''}
-            required
-            data-contact-field="name"
-            data-entry-node=${row?.entryNode || ''}
-            data-row-status=${row?.status || 'n/a'}
-            placeholder="Skill"
-            autocomplete="off"
-            list=${datalistId}
-            inputmode="text"
-            aria-invalid=${hasSelectionIssue ? 'true' : 'false'}
-            @input=${handleSkillInput('name')}
-          />
-        </div>
-        <datalist id=${datalistId}>
-          ${suggestions.map(suggestion => (0, _litHtml.html)`<option value=${suggestion.label}></option>`)}
-        </datalist>
-        <small class="profile-edit-dialog__input-help-text">Type to search ESCO and select one suggestion.</small>
+        <solid-ui-combobox
+          aria-label=${`${label} Name`}
+          data-skill-row-index=${String(index)}
+          @input=${handleSkillInput('name')}
+          @change=${handleSkillChange}
+        ></solid-ui-combobox>
+        <small class="profile-edit-dialog__input-help-text">Type to search ESCO, or enter your own skill.</small>
       </label>
       <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
-        <button
+        <solid-ui-button
           type="button"
+          variant="icon"
+          size="md"
           class="profile-edit-dialog__delete-button"
           aria-label=${`Delete skill ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
-        </button>
+          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </solid-ui-button>
       </div>
     </div>
   `;
 }
-function renderSkillsSection(rows, onAddRow, suggestionByIndex, handleSearch) {
+function renderSkillsSection(rows, onAddRow) {
   const visibleRows = rows.map((row, index) => ({
     row,
     index
@@ -216,12 +261,8 @@ function renderSkillsSection(rows, onAddRow, suggestionByIndex, handleSearch) {
     rows,
     index,
     displayIndex,
-    onChange: onAddRow,
-    onSkillSearch: handleSearch,
-    suggestions: suggestionByIndex[index] || [],
     onDelete: () => {
       (0, _rowState.deleteRow)(rows, index);
-      delete suggestionByIndex[index];
       onAddRow();
     }
   }))}
@@ -230,39 +271,15 @@ function renderSkillsSection(rows, onAddRow, suggestionByIndex, handleSearch) {
   `;
 }
 function renderSkillsEditTemplate(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 = {}) => renderSkillsEditTemplate(form, formState, viewerMode, nextOptions);
-  const handleSearch = (rowIndex, term) => {
-    if (searchTimerByIndex[rowIndex]) {
-      clearTimeout(searchTimerByIndex[rowIndex]);
-    }
-    const normalized = sanitizeSkillFieldValue(term);
-    if (normalized.length < 2) {
-      suggestionByIndex[rowIndex] = [];
-      rerender();
-      return;
-    }
-    const seq = (searchSeqByIndex[rowIndex] || 0) + 1;
-    searchSeqByIndex[rowIndex] = seq;
-    searchTimerByIndex[rowIndex] = setTimeout(async () => {
-      const suggestions = await fetchEscoSkillSuggestions(normalized);
-      if (searchSeqByIndex[rowIndex] !== seq) return;
-      suggestionByIndex[rowIndex] = suggestions;
-      const row = formState.skills[rowIndex];
-      if (row) {
-        const matchedSuggestion = matchSkillSuggestion(suggestions, row.name);
-        row.publicId = matchedSuggestion ? normalizeSkillPublicId(matchedSuggestion.uri) : row.publicId;
-      }
-      rerender();
-    }, 220);
+  const rerender = (nextOptions = {}) => {
+    syncSkillRowsFromComboboxes(form, formState.skills);
+    renderSkillsEditTemplate(form, formState, viewerMode, nextOptions);
   };
   (0, _litHtml.render)((0, _litHtml.html)`
-    ${renderSkillsSection(formState.skills, rerender, suggestionByIndex, handleSearch)}
+    ${renderSkillsSection(formState.skills, rerender)}
     ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
   `, form);
+  initializeSkillComboboxes(form, formState.skills);
   updateSkillsSubmitEnabled(formState.skills);
   if (options.focusSelector) {
     focusSkillField(form, options.focusSelector);
@@ -274,18 +291,15 @@ function createSkillsEditForm(details, viewerMode) {
   const formState = toFormState(details);
   renderSkillsEditTemplate(form, formState, viewerMode);
   const addRow = () => {
+    syncSkillRowsFromComboboxes(form, formState.skills);
     formState.skills.unshift({
       name: '',
       publicId: '',
       entryNode: '',
       status: 'new'
     });
-    const formStateWithSearch = formState;
-    formStateWithSearch.suggestionByIndex = {};
-    formStateWithSearch.searchSeqByIndex = {};
-    formStateWithSearch.searchTimerByIndex = {};
     renderSkillsEditTemplate(form, formState, viewerMode, {
-      focusSelector: '[name="skill-0"]'
+      focusSelector: '[data-skill-row-index="0"]'
     });
   };
   return {
@@ -305,6 +319,12 @@ async function createSkillsEditDialog(event, store, subject, skills, viewerMode,
     title: _texts.editSkillsDialogTitleText,
     dom,
     form,
+    onOpen: () => focusSkillField(form, '[data-skill-row-index="0"]'),
+    shouldCloseWithoutSave: () => {
+      syncSkillRowsFromComboboxes(form, formState.skills);
+      const ops = (0, _rowState.summarizeRowOps)(formState.skills, rowHasContent);
+      return ops.create.length === 0 && ops.update.length === 0 && ops.remove.length === 0;
+    },
     headerAction: {
       type: 'button',
       label: '+ Add More',
@@ -314,12 +334,14 @@ async function createSkillsEditDialog(event, store, subject, skills, viewerMode,
     submitLabel: _texts.dialogSubmitLabelText,
     cancelLabel: _texts.dialogCancelLabelText,
     validate: () => {
+      syncSkillRowsFromComboboxes(form, formState.skills);
       if (viewerMode !== 'owner') {
         return _texts.ownerLoginRequiredDialogMessageText;
       }
       return validateSkillsBeforeSave(formState.skills);
     },
     onSave: async () => {
+      syncSkillRowsFromComboboxes(form, formState.skills);
       const skillOps = (0, _rowState.summarizeRowOps)(formState.skills, rowHasContent);
       const plan = {
         create: skillOps.create,
@@ -329,8 +351,7 @@ async function createSkillsEditDialog(event, store, subject, skills, viewerMode,
       await (0, _mutations.processSkillsMutations)(store, subject, plan);
     },
     formatSaveError: error => {
-      const message = error instanceof Error ? error.message : String(error);
-      return `${_texts.saveContactUpdatesFailedPrefixText} ${message}`;
+      return error instanceof Error ? error.message : _texts.saveSkillsUpdatesFailedMessageText;
     }
   });
   if (!result) return;

package/lib/sections/skills/SkillsSection.css

@@ -0,0 +1,173 @@
+/* Skills list */
+.skills__list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--spacing-base, 0.5rem);
+}
+
+.skills__item,
+.skills__remove-button svg,
+solid-ui-button.skills__remove-button {
+  --skills-remove-icon-size: var(--icon-xxs, 1rem);
+}
+
+/* Skill chip */
+.skills__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.375rem;
+  padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
+  border-radius: var(--border-radius-base, 0.3125rem);
+  background: var(--color-surface-chip, var(--gray-100, #F3F4F6));
+  width: fit-content;
+  max-width: 100%;
+}
+
+.skills__item[data-pending='true'] {
+  opacity: 0.55;
+}
+
+.skills__item-label {
+  display: inline;
+  color: var(--color-text-strong, var(--slate-900, #0F172B));
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: var(--font-weight-md, 500);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.skills__item-tail {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.skills__item-tail::before {
+  content: '\00a0';
+}
+
+.skills__empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Remove button */
+solid-ui-button.skills__remove-button {
+  width: var(--skills-remove-icon-size);
+  height: var(--skills-remove-icon-size);
+  line-height: 0;
+  vertical-align: text-top;
+  --button-height-sm: var(--skills-remove-icon-size);
+  --button-padding-sm: 0;
+  --button-icon-size-sm: var(--skills-remove-icon-size);
+  --button-background: transparent;
+  --button-border-width: 0;
+  --button-border: transparent;
+  --button-text: currentColor;
+  --button-hover-background: transparent;
+  --button-hover-border: transparent;
+  --button-hover-text: currentColor;
+}
+
+solid-ui-button.skills__remove-button[data-loading='true'] {
+  pointer-events: none;
+}
+
+.skills__remove-button svg {
+  display: block;
+  width: var(--skills-remove-icon-size);
+  height: var(--skills-remove-icon-size);
+}
+
+.profile__section[data-profile-section='skills'] .profile-section-inline-error {
+  margin-top: var(--spacing-sm, 0.938rem);
+  padding: var(--spacing-xs, 0.75rem);
+  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
+  border-radius: var(--border-radius-base, 0.3125rem);
+  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
+  color: var(--dialog-error-text, var(--red-600, #B00020));
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__list {
+  align-items: flex-start;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.375rem;
+  padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
+  width: fit-content;
+  max-width: 100%;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item-label {
+  font-size: var(--font-size-sm, 0.875rem);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item-tail::before {
+  content: none;
+}
+
+@media (max-width: 576px) {
+  .skills__list {
+    align-items: flex-start;
+  }
+
+  .skills__item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.375rem;
+    padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .skills__item-label {
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+
+  .skills__item-tail::before {
+    content: none;
+  }
+}
+
+@container profile-pane (max-width: 576px) {
+  .skills__list {
+    align-items: flex-start;
+  }
+
+  .skills__item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.375rem;
+    padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .skills__item-label {
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+
+  .skills__item-tail::before {
+    content: none;
+  }
+}

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

@@ -1,5 +1,7 @@
+import 'solid-ui/components/actions/button';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';
+import './SkillsSection.css';
 import { SkillDetails } from './types';
 export declare function renderSkillsSection(store: LiveStore, subject: NamedNode, skills: SkillDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
 //# sourceMappingURL=SkillsSection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SkillsSection.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsSection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AAgMhD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAYrC"}
+{"version":3,"file":"SkillsSection.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsSection.ts"],"names":[],"mappings":"AACA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AA6PhD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAYrC"}