lucos_search_component 4.0.1 → 4.0.3

package/.github/workflows/code-reviewer-auto-merge.yml

@@ -13,7 +13,7 @@ permissions:
 
 jobs:
   reusable:
-    uses: lucas42/.github/.github/workflows/reusable-code-reviewer-auto-merge.yml@v1.19.0
+    uses: lucas42/.github/.github/workflows/reusable-code-reviewer-auto-merge.yml@v1.21.0
     secrets:
       LUCOS_CI_APP_ID: ${{ secrets.LUCOS_CI_APP_ID }}
       LUCOS_CI_PRIVATE_KEY: ${{ secrets.LUCOS_CI_PRIVATE_KEY }}

package/.github/workflows/codeql-analysis.yml

@@ -46,7 +46,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v6
+      uses: actions/checkout@v7
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

package/.github/workflows/convention-check.yml

@@ -9,4 +9,4 @@ permissions:
 
 jobs:
   convention-check:
-    uses: lucas42/.github/.github/workflows/reusable-convention-check.yml@v1.19.0
+    uses: lucas42/.github/.github/workflows/reusable-convention-check.yml@v1.21.0

package/.github/workflows/dependabot-auto-merge.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   dependabot:
-    uses: lucas42/.github/.github/workflows/reusable-dependabot-auto-merge.yml@v1.19.0
+    uses: lucas42/.github/.github/workflows/reusable-dependabot-auto-merge.yml@v1.21.0
     secrets:
       LUCOS_CI_APP_ID: ${{ secrets.LUCOS_CI_APP_ID }}
       LUCOS_CI_PRIVATE_KEY: ${{ secrets.LUCOS_CI_PRIVATE_KEY }}

package/CLAUDE.md

@@ -0,0 +1,7 @@
+# lucos_search_component
+
+## Public interface changes
+
+Any change to the public interface of this component (new attributes, modified attribute behaviour, removed attributes) must be accompanied by a new or updated example in `example/index.html`.
+
+For **breaking changes** (removing or renaming an attribute, changing the expected format of an existing attribute), also review all existing examples in `example/index.html` to check whether any need updating or removing entirely.

package/README.md

@@ -32,7 +32,7 @@ The following attributes can be added to the lucos-search span:
 * **data-api-key** \[required\] — a valid API key for the production instance of [lucos_arachne](https://github.com/lucas42/lucos_arachne), as generated by [lucos_creds](https://github.com/lucas42/lucos_creds).
 * **data-types** — A comma separated list of item types to search for (defaults to all types).
 * **data-exclude_types** — A comma separated list of item types to exclude from the search (ignored if `data-types` is set).
-* **data-is-contact** — Filter results to contacts only (`"true"`) or non-contacts only (`"false"`). Omitting the attribute applies no filter. Composes with `data-types` when both are set.
+* **data-is-contact** — Filter results to contacts only (`"true"`) or non-contacts only (`"false"`). Omitting the attribute applies no filter. Composes with `data-types` when both are set. When `"true"`, selected options use the entity's **`lucos_contacts` URI** (`contact_uri`) as their value, and the selected-item lozenge links through to that same `lucos_contacts` URI instead of the eolas knowledge page — form value and lozenge link stay consistent with each other.
 * **data-label-override-zxx** — Override the displayed label for the `https://eolas.l42.eu/metadata/language/zxx/` entry in both the dropdown and selected lozenge. Has no effect on whether `zxx` appears in the list — that depends on whether `zxx` is present in the search index. Only meaningful when `data-types="Language"`.
 * **data-common** — A comma separated list of item URIs to pin in a "Common" group at the top of the list, above the normal results. Only meaningful when `data-types="Language"`.
 * **data-preload** — If present, all options are loaded upfront rather than fetched on search. Suitable for small, finite datasets such as languages.

package/dist/index.js

@@ -5696,12 +5696,13 @@ var categoryColoursCSS = "/* Generated by scripts/generate-colours.js — do not
 /**
  * Builds a Typesense filter_by expression from the search component's filter attributes.
  *
- * @param {string|null} types       - Value of data-types attribute (e.g. "Person,Place")
- * @param {string|null} excludeTypes - Value of data-exclude-types attribute (e.g. "Language")
- * @param {string|null} isContact   - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} types          - Value of data-types attribute (e.g. "Person,Place")
+ * @param {string|null} excludeTypes   - Value of data-exclude-types attribute (e.g. "Language")
+ * @param {string|null} isContact      - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} allowedOrigins - Value of data-allowed-origins attribute (e.g. "https://eolas.l42.eu")
  * @returns {string|null} filter expression, or null if no filters apply
  */
-function buildFilterBy(types, excludeTypes, isContact) {
+function buildFilterBy(types, excludeTypes, isContact, allowedOrigins) {
 	const parts = [];
 	if (types) {
 		parts.push(`types:=[${types}]`);
@@ -5713,6 +5714,9 @@ function buildFilterBy(types, excludeTypes, isContact) {
 	} else if (isContact === 'false') {
 		parts.push('is_contact:=false');
 	}
+	if (allowedOrigins) {
+		parts.push(`origin:=[${allowedOrigins}]`);
+	}
 	return parts.length > 0 ? parts.join(' && ') : null;
 }
 
@@ -5748,7 +5752,7 @@ function buildFormDataEntries(name, values, optionMap) {
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload','data-create'];
+		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload','data-create','data-allowed-origins'];
 	}
 	constructor() {
 		super();
@@ -5886,10 +5890,19 @@ class LucosSearchComponent extends HTMLSpanElement {
 			...(component.isLanguageMode || component.getAttribute("data-common") ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
 			...(component.hasAttribute("data-create") ? {
 				create: function(input) {
-					return { id: input, pref_label: input, created: true };
+					// Key must match valueField below (contact_uri in contact mode) — a
+					// hardcoded `id` key here would leave the created option unaddressable
+					// by TomSelect when data-is-contact="true".
+					const created = { pref_label: input, created: true };
+					created[component.valueFieldName] = input;
+					return created;
 				},
 			} : {}),
-			valueField: 'id',
+			// In contact mode, the form value, TomSelect's option key, and the lozenge
+			// click-through/link target (render.item below, onItemSelect further down) all
+			// use the lucos_contacts URI instead of the eolas knowledge URI — see
+			// lucos_arachne#712 and the #190 review discussion.
+			valueField: component.valueFieldName,
 			labelField: 'pref_label',
 			searchField: [],
 			closeAfterSelect: true,
@@ -5903,7 +5916,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 				component._searchAbortController = abortController;
 
 				errorMessage.setAttribute('hidden', '');
-				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
+				const commonSet = new Set((component._commonOptions || []).map(o => o[component.valueFieldName]));
 				// When preloaded, filter locally instead of hitting Typesense
 				if (component._preloadedOptions) {
 					const q = query.toLowerCase();
@@ -5913,7 +5926,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 							(r.labels && r.labels.some(l => l.toLowerCase().includes(q)))
 						  )
 						: [...component._preloadedOptions];
-					results = results.filter(r => !commonSet.has(r.id));
+					results = results.filter(r => !commonSet.has(r[component.valueFieldName]));
 					this.clearOptions();
 					if (component._commonOptions) {
 						const filteredCommon = q
@@ -5934,6 +5947,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					component.getAttribute("data-types"),
 					component.getAttribute("data-exclude_types"),
 					component.getAttribute("data-is-contact"),
+					component.getAttribute("data-allowed-origins"),
 				);
 				if (filterBy) queryParams.set("filter_by", filterBy);
 				try {
@@ -5942,7 +5956,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					this.clearOptions();
 					// Remove common items from results to avoid duplication; filter by query when non-empty
 					if (component._commonOptions) {
-						results = results.filter(r => !commonSet.has(r.id));
+						results = results.filter(r => !commonSet.has(r[component.valueFieldName]));
 						const q = query.toLowerCase();
 						const filteredCommon = q
 							? component._commonOptions.filter(o =>
@@ -5972,14 +5986,14 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
-				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
+				const commonSet = new Set((component._commonOptions || []).map(o => o[component.valueFieldName]));
 				if (component._commonOptions) {
 					component._commonOptions.forEach(opt => this.addOption(opt));
 				}
 				// Re-add preloaded options (excluding common items which are shown separately)
 				if (component._preloadedOptions) {
 					component._preloadedOptions
-						.filter(opt => !commonSet.has(opt.id))
+						.filter(opt => !commonSet.has(opt[component.valueFieldName]))
 						.forEach(opt => this.addOption(opt));
 				}
 			},
@@ -5992,7 +6006,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					this.addOptionGroup('x-common', { label: 'Common' });
 					const commonParams = new URLSearchParams({
 						q: '*',
-						filter_by: `id:[${commonIds.join(",")}]`,
+						filter_by: `${component.valueFieldName}:[${commonIds.join(",")}]`,
 						per_page: commonIds.length,
 					});
 					const commonResults = await component.searchRequest(commonParams);
@@ -6012,41 +6026,49 @@ class LucosSearchComponent extends HTMLSpanElement {
 						component.getAttribute("data-types"),
 						component.getAttribute("data-exclude_types"),
 						component.getAttribute("data-is-contact"),
+						component.getAttribute("data-allowed-origins"),
 					);
 					// per_page: 250 acts as an upper bound — data-preload is intended for finite datasets
 					const preloadParams = new URLSearchParams({ q: '*', per_page: 250 });
 					if (filterValue) preloadParams.set("filter_by", filterValue);
 					const preloaded = await component.searchRequest(preloadParams);
 					component._preloadedOptions = preloaded;
-					const commonSet = new Set((component._commonOptions || []).map(o => o.id));
-					preloaded.filter(r => !commonSet.has(r.id)).forEach(r => this.addOption(r));
+					const commonSet = new Set((component._commonOptions || []).map(o => o[component.valueFieldName]));
+					preloaded.filter(r => !commonSet.has(r[component.valueFieldName])).forEach(r => this.addOption(r));
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding common/preloaded items
-				const preloadedIds = component._preloadedOptions ? new Set(component._preloadedOptions.map(r => r.id)) : new Set();
+				// Fetch real options from Typesense, excluding common/preloaded items.
+				// `ids` are keyed by whatever valueField is configured (contact_uri in
+				// contact mode, id otherwise), so every set/filter/updateOption below must
+				// use the same key — a stray `.id` here is a silent no-op, not an error
+				// (see lucos_search_component#190 review: updateOption(result.id, ...)
+				// looks up tom-select's options map by valueField, not literally `id`).
+				const preloadedIds = component._preloadedOptions ? new Set(component._preloadedOptions.map(r => r[component.valueFieldName])) : new Set();
 				const excludeIds = new Set([...commonIds, ...preloadedIds]);
 				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
 						q: '*',
-						filter_by: `id:[${idsToFetch.join(",")}]`,
+						filter_by: `${component.valueFieldName}:[${idsToFetch.join(",")}]`,
 						per_page: idsToFetch.length,
 					});
 					const results = await component.searchRequest(searchParams);
 					results.forEach(result => {
-						this.updateOption(result.id, result);
+						this.updateOption(result[component.valueFieldName], result);
 					});
 				}
 				// Update any pre-selected common items with fresh data
 				if (component._commonOptions) {
 					component._commonOptions.forEach(opt => {
-						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+						const key = opt[component.valueFieldName];
+						if (ids.includes(key)) this.updateOption(key, opt);
 					});
 				}
 				// Update any pre-selected preloaded items with fresh data
 				if (component._preloadedOptions) {
 					component._preloadedOptions.forEach(opt => {
-						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+						const key = opt[component.valueFieldName];
+						if (ids.includes(key)) this.updateOption(key, opt);
 					});
 				}
 			},
@@ -6091,7 +6113,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 					if (data.created) {
 						return `<div class="lozenge lozenge-pending" data-type="" data-category="">${escape(displayLabel)}</div>`;
 					}
-					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(displayLabel)}</a></div>`;
+					// Link target matches the form value (valueFieldName) — in contact mode
+					// that's contact_uri, not the eolas id, per lucas42's review on #190:
+					// everything should link to the same URI for consistency.
+					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data[component.valueFieldName]}" target="_blank">${escape(displayLabel)}</a></div>`;
 				},
 				option_create: function(data, escape) {
 					const noun = getCreateNoun();
@@ -6194,6 +6219,17 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!types) return false;
 		return types.split(",").map(t => t.trim()).includes("Language");
 	}
+	// The document field TomSelect uses as its option key/form value: contact_uri when
+	// data-is-contact="true", id otherwise. Every place that reads/writes TomSelect's
+	// internal options map (keyed by valueField) or filters Typesense by that key must
+	// go through this — hardcoding `.id` breaks in contact mode (lucos_search_component#190
+	// review: `updateOption(result.id, ...)` silently no-op'd because tom-select hashes
+	// on valueField, not literally `id`). Checks the attribute directly rather than via a
+	// separate isContactMode getter — data-is-contact is also read directly elsewhere
+	// (e.g. buildFilterBy's callers), so a getter here would look more reusable than it is.
+	get valueFieldName() {
+		return this.getAttribute("data-is-contact") === "true" ? 'contact_uri' : 'id';
+	}
 	get commonIds() {
 		const common = this.getAttribute("data-common");
 		if (!common) return [];
@@ -6239,7 +6275,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 		searchParams.set('query_by_weights', "10,8,3,1");
 		searchParams.set('sort_by', "_text_match:desc,pref_label:asc");
 		searchParams.set('prioritize_num_matching_fields', false);
-		searchParams.set('include_fields', "id,pref_label,type,category,labels,lang_family");
+		searchParams.set('include_fields', "id,pref_label,type,category,labels,lang_family,contact_uri");
 		searchParams.set('enable_highlight_v1', false);
 		searchParams.set('highlight_start_tag', '<span class="highlight">');
 		searchParams.set('highlight_end_tag', '</span>');

package/example/index.html

@@ -19,6 +19,7 @@
 		<label for="search6">Languages with label override for zxx:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="No Language"><select id="search6"></select></span>
 		<label for="search7">Languages with zxx pre-selected:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="No Language"><select id="search7" multiple><option selected>https://eolas.l42.eu/metadata/language/zxx/</option></select></span>
 		<label for="search11">Languages with label override, common and preload:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="Instrumental / No Language" data-common="https://eolas.l42.eu/metadata/language/en/,https://eolas.l42.eu/metadata/language/ga/,https://eolas.l42.eu/metadata/language/zxx/" data-preload><select id="search11" multiple ></select></span>
+		<label for="search_origins">Eolas only (data-allowed-origins):</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-allowed-origins="https://eolas.l42.eu"><select id="search_origins"></select></span>
 		<label for="search5">More than 10:</label>
 		<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search5" multiple>
 			<option selected>https://eolas.l42.eu/metadata/place/125/</option>
@@ -68,6 +69,16 @@
 			<button type="submit">Submit</button>
 		</form>
 		<pre id="create-output"></pre>
+		<h1>Contact mode (data-is-contact)</h1>
+		<p>Person field restricted to <code>lucos_contacts</code> records (<code>data-is-contact="true"</code>). The selected-item lozenge links through to the <code>lucos_contacts</code> URI (<code>contact_uri</code>), and the value serialised on submit is that same URI — not the eolas URI — see lucos_search_component#189.</p>
+		<form id="contact-form" onsubmit="handleContactSubmit(event)">
+			<label for="linked-contact">Linked contact:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-is-contact="true"><select id="linked-contact" name="linked_contact" multiple></select></span>
+			<button type="submit">Submit</button>
+		</form>
+		<pre id="contact-output"></pre>
+		<label for="linked-contact-preselected">Linked contact (pre-selected on page load):</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-is-contact="true"><select id="linked-contact-preselected" multiple>
+			<option selected>https://contacts.l42.eu/people/2</option>
+		</select></span>
 		<script>
 			function handleSubmit(event) {
 				event.preventDefault();
@@ -89,6 +100,16 @@
 				}
 				document.getElementById('create-output').textContent = JSON.stringify(output, null, 2);
 			}
+			function handleContactSubmit(event) {
+				event.preventDefault();
+				const data = new FormData(event.target);
+				const output = {};
+				for (const [key, value] of data.entries()) {
+					if (!output[key]) output[key] = [];
+					output[key].push(value);
+				}
+				document.getElementById('contact-output').textContent = JSON.stringify(output, null, 2);
+			}
 		</script>
 		<script src="./built.js"></script>
 	</body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucos_search_component",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",

package/test/filter.test.mjs

@@ -31,3 +31,23 @@ test('data-exclude-types produces types:!= filter', () => {
 	const result = buildFilterBy(null, 'Track', null);
 	assert.equal(result, 'types:!=[Track]');
 });
+
+test('data-allowed-origins produces origin:= filter', () => {
+	const result = buildFilterBy(null, null, null, 'https://eolas.l42.eu');
+	assert.equal(result, 'origin:=[https://eolas.l42.eu]');
+});
+
+test('data-allowed-origins with multiple comma-separated origins', () => {
+	const result = buildFilterBy(null, null, null, 'https://eolas.l42.eu,https://contacts.l42.eu');
+	assert.equal(result, 'origin:=[https://eolas.l42.eu,https://contacts.l42.eu]');
+});
+
+test('data-allowed-origins combines with data-types', () => {
+	const result = buildFilterBy('Person', null, null, 'https://eolas.l42.eu');
+	assert.equal(result, 'types:=[Person] && origin:=[https://eolas.l42.eu]');
+});
+
+test('absent data-allowed-origins produces no origin filter', () => {
+	const result = buildFilterBy('Person', null, null, null);
+	assert.equal(result, 'types:=[Person]');
+});

package/web-components/filter.js

@@ -1,12 +1,13 @@
 /**
  * Builds a Typesense filter_by expression from the search component's filter attributes.
  *
- * @param {string|null} types       - Value of data-types attribute (e.g. "Person,Place")
- * @param {string|null} excludeTypes - Value of data-exclude-types attribute (e.g. "Language")
- * @param {string|null} isContact   - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} types          - Value of data-types attribute (e.g. "Person,Place")
+ * @param {string|null} excludeTypes   - Value of data-exclude-types attribute (e.g. "Language")
+ * @param {string|null} isContact      - Value of data-is-contact attribute ("true" or "false")
+ * @param {string|null} allowedOrigins - Value of data-allowed-origins attribute (e.g. "https://eolas.l42.eu")
  * @returns {string|null} filter expression, or null if no filters apply
  */
-export function buildFilterBy(types, excludeTypes, isContact) {
+export function buildFilterBy(types, excludeTypes, isContact, allowedOrigins) {
 	const parts = [];
 	if (types) {
 		parts.push(`types:=[${types}]`);
@@ -18,5 +19,8 @@ export function buildFilterBy(types, excludeTypes, isContact) {
 	} else if (isContact === 'false') {
 		parts.push('is_contact:=false');
 	}
+	if (allowedOrigins) {
+		parts.push(`origin:=[${allowedOrigins}]`);
+	}
 	return parts.length > 0 ? parts.join(' && ') : null;
 }

package/web-components/lucos-search.js

@@ -6,7 +6,7 @@ import { buildFormDataEntries } from './form-serialise.js';
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload','data-create'];
+		return ['data-api-key','data-types','data-exclude_types','data-is-contact','data-label-override-zxx','data-common','data-preload','data-create','data-allowed-origins'];
 	}
 	constructor() {
 		super();
@@ -144,10 +144,19 @@ class LucosSearchComponent extends HTMLSpanElement {
 			...(component.isLanguageMode || component.getAttribute("data-common") ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
 			...(component.hasAttribute("data-create") ? {
 				create: function(input) {
-					return { id: input, pref_label: input, created: true };
+					// Key must match valueField below (contact_uri in contact mode) — a
+					// hardcoded `id` key here would leave the created option unaddressable
+					// by TomSelect when data-is-contact="true".
+					const created = { pref_label: input, created: true };
+					created[component.valueFieldName] = input;
+					return created;
 				},
 			} : {}),
-			valueField: 'id',
+			// In contact mode, the form value, TomSelect's option key, and the lozenge
+			// click-through/link target (render.item below, onItemSelect further down) all
+			// use the lucos_contacts URI instead of the eolas knowledge URI — see
+			// lucos_arachne#712 and the #190 review discussion.
+			valueField: component.valueFieldName,
 			labelField: 'pref_label',
 			searchField: [],
 			closeAfterSelect: true,
@@ -161,7 +170,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 				component._searchAbortController = abortController;
 
 				errorMessage.setAttribute('hidden', '');
-				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
+				const commonSet = new Set((component._commonOptions || []).map(o => o[component.valueFieldName]));
 				// When preloaded, filter locally instead of hitting Typesense
 				if (component._preloadedOptions) {
 					const q = query.toLowerCase();
@@ -171,7 +180,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 							(r.labels && r.labels.some(l => l.toLowerCase().includes(q)))
 						  )
 						: [...component._preloadedOptions];
-					results = results.filter(r => !commonSet.has(r.id));
+					results = results.filter(r => !commonSet.has(r[component.valueFieldName]));
 					this.clearOptions();
 					if (component._commonOptions) {
 						const filteredCommon = q
@@ -192,6 +201,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					component.getAttribute("data-types"),
 					component.getAttribute("data-exclude_types"),
 					component.getAttribute("data-is-contact"),
+					component.getAttribute("data-allowed-origins"),
 				);
 				if (filterBy) queryParams.set("filter_by", filterBy);
 				try {
@@ -200,7 +210,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					this.clearOptions();
 					// Remove common items from results to avoid duplication; filter by query when non-empty
 					if (component._commonOptions) {
-						results = results.filter(r => !commonSet.has(r.id));
+						results = results.filter(r => !commonSet.has(r[component.valueFieldName]));
 						const q = query.toLowerCase();
 						const filteredCommon = q
 							? component._commonOptions.filter(o =>
@@ -230,14 +240,14 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
-				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
+				const commonSet = new Set((component._commonOptions || []).map(o => o[component.valueFieldName]));
 				if (component._commonOptions) {
 					component._commonOptions.forEach(opt => this.addOption(opt));
 				}
 				// Re-add preloaded options (excluding common items which are shown separately)
 				if (component._preloadedOptions) {
 					component._preloadedOptions
-						.filter(opt => !commonSet.has(opt.id))
+						.filter(opt => !commonSet.has(opt[component.valueFieldName]))
 						.forEach(opt => this.addOption(opt));
 				}
 			},
@@ -250,7 +260,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 					this.addOptionGroup('x-common', { label: 'Common' });
 					const commonParams = new URLSearchParams({
 						q: '*',
-						filter_by: `id:[${commonIds.join(",")}]`,
+						filter_by: `${component.valueFieldName}:[${commonIds.join(",")}]`,
 						per_page: commonIds.length,
 					});
 					const commonResults = await component.searchRequest(commonParams);
@@ -270,41 +280,49 @@ class LucosSearchComponent extends HTMLSpanElement {
 						component.getAttribute("data-types"),
 						component.getAttribute("data-exclude_types"),
 						component.getAttribute("data-is-contact"),
+						component.getAttribute("data-allowed-origins"),
 					);
 					// per_page: 250 acts as an upper bound — data-preload is intended for finite datasets
 					const preloadParams = new URLSearchParams({ q: '*', per_page: 250 });
 					if (filterValue) preloadParams.set("filter_by", filterValue);
 					const preloaded = await component.searchRequest(preloadParams);
 					component._preloadedOptions = preloaded;
-					const commonSet = new Set((component._commonOptions || []).map(o => o.id));
-					preloaded.filter(r => !commonSet.has(r.id)).forEach(r => this.addOption(r));
+					const commonSet = new Set((component._commonOptions || []).map(o => o[component.valueFieldName]));
+					preloaded.filter(r => !commonSet.has(r[component.valueFieldName])).forEach(r => this.addOption(r));
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding common/preloaded items
-				const preloadedIds = component._preloadedOptions ? new Set(component._preloadedOptions.map(r => r.id)) : new Set();
+				// Fetch real options from Typesense, excluding common/preloaded items.
+				// `ids` are keyed by whatever valueField is configured (contact_uri in
+				// contact mode, id otherwise), so every set/filter/updateOption below must
+				// use the same key — a stray `.id` here is a silent no-op, not an error
+				// (see lucos_search_component#190 review: updateOption(result.id, ...)
+				// looks up tom-select's options map by valueField, not literally `id`).
+				const preloadedIds = component._preloadedOptions ? new Set(component._preloadedOptions.map(r => r[component.valueFieldName])) : new Set();
 				const excludeIds = new Set([...commonIds, ...preloadedIds]);
 				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
 						q: '*',
-						filter_by: `id:[${idsToFetch.join(",")}]`,
+						filter_by: `${component.valueFieldName}:[${idsToFetch.join(",")}]`,
 						per_page: idsToFetch.length,
 					});
 					const results = await component.searchRequest(searchParams);
 					results.forEach(result => {
-						this.updateOption(result.id, result);
+						this.updateOption(result[component.valueFieldName], result);
 					});
 				}
 				// Update any pre-selected common items with fresh data
 				if (component._commonOptions) {
 					component._commonOptions.forEach(opt => {
-						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+						const key = opt[component.valueFieldName];
+						if (ids.includes(key)) this.updateOption(key, opt);
 					});
 				}
 				// Update any pre-selected preloaded items with fresh data
 				if (component._preloadedOptions) {
 					component._preloadedOptions.forEach(opt => {
-						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+						const key = opt[component.valueFieldName];
+						if (ids.includes(key)) this.updateOption(key, opt);
 					});
 				}
 			},
@@ -349,7 +367,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 					if (data.created) {
 						return `<div class="lozenge lozenge-pending" data-type="" data-category="">${escape(displayLabel)}</div>`;
 					}
-					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(displayLabel)}</a></div>`;
+					// Link target matches the form value (valueFieldName) — in contact mode
+					// that's contact_uri, not the eolas id, per lucas42's review on #190:
+					// everything should link to the same URI for consistency.
+					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data[component.valueFieldName]}" target="_blank">${escape(displayLabel)}</a></div>`;
 				},
 				option_create: function(data, escape) {
 					const noun = getCreateNoun();
@@ -452,6 +473,17 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!types) return false;
 		return types.split(",").map(t => t.trim()).includes("Language");
 	}
+	// The document field TomSelect uses as its option key/form value: contact_uri when
+	// data-is-contact="true", id otherwise. Every place that reads/writes TomSelect's
+	// internal options map (keyed by valueField) or filters Typesense by that key must
+	// go through this — hardcoding `.id` breaks in contact mode (lucos_search_component#190
+	// review: `updateOption(result.id, ...)` silently no-op'd because tom-select hashes
+	// on valueField, not literally `id`). Checks the attribute directly rather than via a
+	// separate isContactMode getter — data-is-contact is also read directly elsewhere
+	// (e.g. buildFilterBy's callers), so a getter here would look more reusable than it is.
+	get valueFieldName() {
+		return this.getAttribute("data-is-contact") === "true" ? 'contact_uri' : 'id';
+	}
 	get commonIds() {
 		const common = this.getAttribute("data-common");
 		if (!common) return [];
@@ -497,7 +529,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 		searchParams.set('query_by_weights', "10,8,3,1");
 		searchParams.set('sort_by', "_text_match:desc,pref_label:asc");
 		searchParams.set('prioritize_num_matching_fields', false);
-		searchParams.set('include_fields', "id,pref_label,type,category,labels,lang_family");
+		searchParams.set('include_fields', "id,pref_label,type,category,labels,lang_family,contact_uri");
 		searchParams.set('enable_highlight_v1', false);
 		searchParams.set('highlight_start_tag', '<span class="highlight">')
 		searchParams.set('highlight_end_tag', '</span>');