@conduction/nextcloud-vue 2.119.0 → 2.121.0

package/src/components/CnObjectSidebar/CnObjectSidebar.vue

@@ -231,16 +231,20 @@ import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js'
 import { pickDeclaredProps } from '../../utils/declaredProps.js'
 import { labelLang } from '../../utils/manifestTranslate.js'
+import { CnAiFeaturesWidget } from '../CnAiFeaturesWidget/index.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnLeafMountHost } from '../CnLeafMountHost/index.js'
 import { CnObjectDataWidget } from '../CnObjectDataWidget/index.js'
 import { CnObjectMetadataWidget } from '../CnObjectMetadataWidget/index.js'
+import { CnObjectPermissionsTab } from '../CnObjectPermissionsTab/index.js'
 
 /**
  * Built-in widget registry used by the open-enum `tabs` prop.
  * - `data`         → CnObjectDataWidget (schema-driven editable grid)
  * - `metadata`     → CnObjectMetadataWidget (read-only system metadata)
  * - `audit`        → CnAuditTrailTab (the object's change log / audit trail)
+ * - `object-permissions` → CnObjectPermissionsTab (read-only: who holds which
+ *   right on the object, where each grant came from, and on a past date)
  * - `object-table` → CnWidgetObjectTable (a declarative list scoped to the
  *   parent object — the full source / endpointSource / columns / actions
  *   contract). Resolves `@objectId` / `@object.<field>` filter tokens against
@@ -252,6 +256,8 @@ import { CnObjectMetadataWidget } from '../CnObjectMetadataWidget/index.js'
  * customComponents registry (prop, then injected `cnCustomComponents`).
  */
 const BUILTIN_WIDGETS = {
+	// The hermiq AI features a record's type switches on (CnAiFeaturesWidget).
+	'ai-features': CnAiFeaturesWidget,
 	data: CnObjectDataWidget,
 	metadata: CnObjectMetadataWidget,
 	audit: CnAuditTrailTab,
@@ -264,6 +270,7 @@ const BUILTIN_WIDGETS = {
 	// a sidebar tab can render a related-object list scoped to the parent
 	// object via `@objectId` / `@object.<field>` tokens in its `source.filter`.
 	'object-table': CnWidgetObjectTable,
+	'object-permissions': CnObjectPermissionsTab,
 }
 
 /**
@@ -1009,7 +1016,7 @@ export default {
 				return reg[type]
 			}
 			// eslint-disable-next-line no-console
-			console.warn(`[CnObjectSidebar] Unknown widget type "${type}" — not in built-ins (data, metadata, audit, audit-trail, object-table), the registry or customComponents.`)
+			console.warn(`[CnObjectSidebar] Unknown widget type "${type}" — not in built-ins (data, metadata, audit, audit-trail, object-table, object-permissions), the registry or customComponents.`)
 			return null
 		},
 

package/src/components/CnObjectTranslationsWidget/CnObjectTranslationsWidget.vue

@@ -0,0 +1,424 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+
+  CnObjectTranslationsWidget — an object's translatable properties in every
+  language its register serves: one completeness chip per language (a stale
+  value counts as missing), a language tab strip, the source language read-only,
+  a stale mark per field, and one save that writes each edited property as a
+  whole language map. It translates nothing itself.
+-->
+<template>
+	<div class="cn-object-translations" data-testid="cn-object-translations">
+		<NcLoadingIcon v-if="loading" :size="24" />
+
+		<p v-else-if="error" class="cn-object-translations__empty" role="alert">
+			{{ t('nextcloud-vue', 'The translations could not be read. Reload the page to try again.') }}
+		</p>
+
+		<p v-else-if="propertiesShown.length === 0"
+			class="cn-object-translations__empty"
+			data-testid="cn-object-translations-none">
+			{{ emptyText || t('nextcloud-vue', 'This item has no labels that can be translated.') }}
+		</p>
+
+		<template v-else>
+			<ul class="cn-object-translations__chips" data-testid="cn-object-translations-chips">
+				<li v-for="chip in chips"
+					:key="chip.language"
+					class="cn-object-translations__chip cn-status-badge cn-status-badge--default"
+					:class="{ 'cn-object-translations__chip--complete': chip.complete }"
+					:data-language="chip.language">
+					<span class="cn-object-translations__chip-name">{{ chip.name }}</span>
+					<span class="cn-object-translations__chip-count">{{ chip.count }}</span>
+				</li>
+			</ul>
+
+			<p class="cn-object-translations__source">
+				{{ sourceNote }}
+			</p>
+
+			<div class="cn-object-translations__tabs"
+				role="tablist"
+				:aria-label="t('nextcloud-vue', 'Languages')"
+				@keydown="onTabKeydown">
+				<NcButton v-for="language in languages"
+					:id="tabId(language)"
+					:key="language"
+					:variant="language === activeLanguage ? 'primary' : 'tertiary'"
+					role="tab"
+					:aria-selected="String(language === activeLanguage)"
+					:aria-controls="panelId"
+					:tabindex="language === activeLanguage ? 0 : -1"
+					:data-language="language"
+					@click="activeLanguage = language">
+					{{ nameOf(language) }}
+				</NcButton>
+			</div>
+
+			<div :id="panelId"
+				role="tabpanel"
+				class="cn-object-translations__panel"
+				:aria-labelledby="tabId(activeLanguage)">
+				<div v-for="property in propertiesShown"
+					:key="property"
+					class="cn-object-translations__field"
+					:data-property="property">
+					<NcTextField :label="labelOf(property)"
+						:modelValue="draftOf(property)"
+						:disabled="activeLanguage === sourceLanguage"
+						@update:modelValue="setDraft(property, $event)" />
+
+					<span v-if="isStale(property)"
+						class="cn-object-translations__stale"
+						:data-property="property">
+						{{ t('nextcloud-vue', 'Out of date') }}
+					</span>
+				</div>
+
+				<NcButton variant="primary"
+					:disabled="saving || !hasEdits"
+					data-testid="cn-object-translations-save"
+					@click="save">
+					{{ t('nextcloud-vue', 'Save') }}
+				</NcButton>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script>
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { getLanguage, translate as t } from '@nextcloud/l10n'
+import { NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import {
+	completenessOf,
+	DEFAULT_API_BASE,
+	objectWithTranslations,
+	registerLanguages,
+	saveTranslatedProperty,
+	schemaProperties,
+	STATUS_OUTDATED,
+	translationRows,
+} from '../../utils/objectTranslations.js'
+
+const PAGE_REFRESH = 'cn:page:refresh'
+
+let instanceCount = 0
+
+export default {
+	name: 'CnObjectTranslationsWidget',
+
+	components: { NcButton, NcLoadingIcon, NcTextField },
+
+	props: {
+		/** Register slug or id (detail-context merge). */
+		register: { type: String, default: '' },
+		/** Schema slug, or the schema object the detail-context merge supplies. */
+		schema: { type: [String, Object], default: '' },
+		/** The object id (detail-context merge). Falls back to the route's `id`. */
+		objectId: { type: String, default: '' },
+		/** OpenRegister API root. */
+		apiBase: { type: String, default: DEFAULT_API_BASE },
+		/** Optional whitelist of properties to offer; empty offers every translatable one. */
+		properties: { type: Array, default: () => [] },
+		/** Text when nothing is translatable; empty uses the translated default. */
+		emptyText: { type: String, default: '' },
+		/** Stored widget content blob; its keys are read as the props above. */
+		content: { type: Object, default: () => ({}) },
+	},
+
+	data() {
+		instanceCount += 1
+		return {
+			uid: `cn-object-translations-${instanceCount}`,
+			loading: true,
+			error: false,
+			saving: false,
+			languages: [],
+			sourceLanguage: '',
+			translatable: [],
+			titles: {},
+			values: {},
+			statuses: {},
+			drafts: {},
+			activeLanguage: '',
+		}
+	},
+
+	computed: {
+		target() {
+			return {
+				register: this.register || this.content.register || '',
+				schema: this.schema || this.content.schema || '',
+				apiBase: this.content.apiBase || this.apiBase,
+			}
+		},
+
+		resolvedId() {
+			return String(this.objectId || this.content.objectId || this.$route?.params?.id || '')
+		},
+
+		whitelist() {
+			const list = this.properties.length > 0 ? this.properties : (this.content.properties || [])
+			return Array.isArray(list) ? list.map(String) : []
+		},
+
+		/** The translatable properties OpenRegister reported, narrowed by the whitelist. */
+		propertiesShown() {
+			return this.whitelist.length === 0
+				? this.translatable
+				: this.translatable.filter((property) => this.whitelist.includes(property))
+		},
+
+		panelId() {
+			return `${this.uid}-panel`
+		},
+
+		/**
+		 * One chip per language the REGISTER declares (so a language nobody has
+		 * started reads "0 of 5"), counting a stale value as missing.
+		 *
+		 * @return {Array<object>} The chips, source first.
+		 */
+		chips() {
+			return this.languages.map((language) => {
+				const { translated, total } = completenessOf({
+					properties: this.propertiesShown,
+					values: this.values,
+					statuses: this.statuses,
+					language,
+					sourceLanguage: this.sourceLanguage,
+				})
+				return {
+					language,
+					name: this.nameOf(language),
+					// TRANSLATORS: how many of a record's labels exist in one language
+					count: t('nextcloud-vue', '{translated} of {total}', { translated, total }),
+					complete: translated === total,
+				}
+			})
+		},
+
+		sourceNote() {
+			return t('nextcloud-vue', '{language} is the source. Change a {language} label and its translations are marked out of date.', { language: this.nameOf(this.sourceLanguage) })
+		},
+
+		hasEdits() {
+			return this.propertiesShown.some((property) => this.draftOf(property) !== this.storedOf(property))
+		},
+	},
+
+	mounted() {
+		subscribe(PAGE_REFRESH, this.load)
+		this.load()
+	},
+
+	beforeUnmount() {
+		unsubscribe(PAGE_REFRESH, this.load)
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * A language's name in the reader's own language, from the browser
+		 * (keeps 38 language names out of the catalogue).
+		 *
+		 * @param {string} code The BCP 47 tag.
+		 * @return {string} The name, or the tag.
+		 */
+		nameOf(code) {
+			try {
+				return new Intl.DisplayNames([getLanguage()], { type: 'language' }).of(code) ?? code
+			} catch {
+				return code
+			}
+		},
+
+		tabId(language) {
+			return `${this.uid}-tab-${language}`
+		},
+
+		/**
+		 * Arrow keys, Home and End move between the language tabs.
+		 *
+		 * @param {KeyboardEvent} event The key event.
+		 */
+		onTabKeydown(event) {
+			const index = this.languages.indexOf(this.activeLanguage)
+			const last = this.languages.length - 1
+			const next = {
+				ArrowRight: index >= last ? 0 : index + 1,
+				ArrowLeft: index <= 0 ? last : index - 1,
+				Home: 0,
+				End: last,
+			}[event.key]
+			if (next === undefined || last < 0) {
+				return
+			}
+			event.preventDefault()
+			this.activeLanguage = this.languages[next]
+			this.$nextTick(() => {
+				const el = document.getElementById(this.tabId(this.activeLanguage))
+				if (el && typeof el.focus === 'function') {
+					el.focus()
+				}
+			})
+		},
+
+		labelOf(property) {
+			return this.titles[property] ?? property
+		},
+
+		storedOf(property) {
+			return this.values?.[property]?.[this.activeLanguage] ?? ''
+		},
+
+		draftOf(property) {
+			const typed = this.drafts?.[this.activeLanguage]?.[property]
+			return typed === undefined ? this.storedOf(property) : typed
+		},
+
+		setDraft(property, value) {
+			const language = this.activeLanguage
+			this.drafts = { ...this.drafts, [language]: { ...(this.drafts[language] ?? {}), [property]: value } }
+		},
+
+		isStale(property) {
+			return (this.statuses?.[property]?.[this.activeLanguage] ?? '') === STATUS_OUTDATED
+		},
+
+		/**
+		 * Read the register languages, the object with every language, the
+		 * property titles and the sidecar statuses.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async load() {
+			if (!this.resolvedId) {
+				this.loading = false
+				this.error = true
+				return
+			}
+
+			this.loading = true
+			try {
+				const [languages, read, definitions] = await Promise.all([
+					registerLanguages(this.target),
+					objectWithTranslations(this.target, this.resolvedId),
+					schemaProperties(this.target),
+				])
+
+				const meta = read.languageMeta ?? {}
+				this.translatable = Object.keys(meta)
+				const first = this.propertiesShown[0] ?? this.translatable[0]
+				this.sourceLanguage = meta[first]?.sourceLanguage ?? languages[0] ?? 'nl'
+				this.languages = languages.length > 0 ? languages : [this.sourceLanguage]
+				this.activeLanguage = this.languages.find((code) => code !== this.sourceLanguage) ?? this.sourceLanguage
+
+				this.values = Object.fromEntries(this.translatable.map((property) => {
+					const stored = read.object?.[property]
+					return [property, { ...(stored !== null && typeof stored === 'object' ? stored : {}) }]
+				}))
+				this.titles = Object.fromEntries(this.translatable.map((property) => [property, definitions[property]?.title ?? property]))
+
+				const uuid = String(read.object?.['@self']?.uuid ?? read.object?.id ?? this.resolvedId)
+				const statuses = {}
+				for (const row of await translationRows(this.target, uuid)) {
+					const property = String(row.property ?? '')
+					const language = String(row.language ?? '')
+					if (property === '' || language === '') {
+						continue
+					}
+					statuses[property] = { ...(statuses[property] ?? {}), [language]: row.status }
+				}
+				this.statuses = statuses
+
+				this.drafts = {}
+				this.error = false
+			} catch {
+				this.error = true
+			} finally {
+				this.loading = false
+			}
+		},
+
+		/**
+		 * Write every edited property back, each as a whole language map.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async save() {
+			this.saving = true
+			try {
+				for (const property of this.propertiesShown) {
+					const draft = this.draftOf(property)
+					if (draft === this.storedOf(property)) {
+						continue
+					}
+					const map = { ...(this.values[property] ?? {}), [this.activeLanguage]: draft }
+					await saveTranslatedProperty(this.target, this.resolvedId, property, map)
+					this.values = { ...this.values, [property]: map }
+				}
+				this.drafts = { ...this.drafts, [this.activeLanguage]: {} }
+				showSuccess(t('nextcloud-vue', 'The labels are saved.'))
+			} catch {
+				showError(t('nextcloud-vue', 'The labels could not be saved.'))
+			} finally {
+				this.saving = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-object-translations__chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	list-style: none;
+	margin: 0 0 8px;
+	padding: 0;
+}
+
+.cn-object-translations__chip {
+	align-items: center;
+	background: var(--color-background-dark);
+	display: flex;
+	gap: 6px;
+}
+
+.cn-object-translations__chip--complete {
+	background: var(--color-success, var(--color-background-dark));
+	--cn-status-badge-ink: var(--color-primary-text);
+	color: var(--cn-status-badge-ink);
+}
+
+.cn-object-translations__source,
+.cn-object-translations__empty {
+	color: var(--color-text-maxcontrast);
+	margin: 0 0 8px;
+}
+
+.cn-object-translations__tabs {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin-bottom: 8px;
+}
+
+.cn-object-translations__field {
+	align-items: center;
+	display: flex;
+	gap: 8px;
+	margin-bottom: 8px;
+}
+
+.cn-object-translations__stale {
+	color: var(--color-warning-text, var(--color-main-text));
+	white-space: nowrap;
+}
+</style>

package/src/components/CnObjectTranslationsWidget/__tests__/CnObjectTranslationsWidget.spec.js

@@ -0,0 +1,189 @@
+/**
+ * SPDX-License-Identifier: EUPL-1.2
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ *
+ * CnObjectTranslationsWidget edits a property in a second language and says
+ * what is still missing. Axios is mocked, not the helpers, so the helpers'
+ * own reading is under test with the widget.
+ *
+ * Pinned: the chips come from the register's languages; a stale translation
+ * counts as missing (OpenRegister's own completeness counts it as done); the
+ * PATCH carries the WHOLE language map; only properties OpenRegister holds as
+ * translatable are offered; a failed read says so; the language strip is a
+ * keyboard-operable tablist with a tabpanel.
+ */
+
+import axios from '@nextcloud/axios'
+import { mount } from '@vue/test-utils'
+import CnObjectTranslationsWidget from '../CnObjectTranslationsWidget.vue'
+import { completenessOf } from '../../../utils/objectTranslations.js'
+
+jest.mock('@nextcloud/axios', () => ({ __esModule: true, default: { get: jest.fn(), patch: jest.fn() } }))
+jest.mock('@nextcloud/router', () => ({ __esModule: true, generateUrl: jest.fn((p) => `/index.php${p}`) }))
+jest.mock('@nextcloud/dialogs', () => ({ __esModule: true, showError: jest.fn(), showSuccess: jest.fn() }))
+jest.mock('@nextcloud/event-bus', () => ({ __esModule: true, subscribe: jest.fn(), unsubscribe: jest.fn(), emit: jest.fn() }))
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+const stubs = {
+	NcButton: { name: 'NcButton', props: ['disabled', 'variant'], emits: ['click'], template: '<button v-bind="$attrs" :disabled="disabled" @click="$emit(\'click\')"><slot /></button>' },
+	NcLoadingIcon: true,
+	NcTextField: { name: 'NcTextField', props: ['label', 'modelValue', 'disabled'], emits: ['update:modelValue'], template: '<input :aria-label="label" :value="modelValue" :disabled="disabled" @input="$emit(\'update:modelValue\', $event.target.value)">' },
+}
+
+let object = {}
+let rows = []
+
+async function mountWidget(props = {}) {
+	const wrapper = mount(CnObjectTranslationsWidget, {
+		props: { register: 'reg', schema: 'kind', objectId: 'o-1', ...props },
+		global: { stubs },
+	})
+	for (let i = 0; i < 5; i++) {
+		await flush()
+	}
+	await wrapper.vm.$nextTick()
+	return wrapper
+}
+
+beforeEach(() => {
+	jest.clearAllMocks()
+	rows = []
+	object = {
+		'@self': { uuid: 'o-1' },
+		title: { nl: 'Omgevingsvergunning' },
+		description: { nl: 'Een vergunning voor bouwen' },
+		_meta: {
+			languageMeta: {
+				title: { sourceLanguage: 'nl', served: 'nl', isSource: true, status: 'source' },
+				description: { sourceLanguage: 'nl', served: 'nl', isSource: true, status: 'source' },
+			},
+		},
+	}
+	axios.get.mockImplementation((url) => {
+		if (url.endsWith('/registers/reg')) {
+			return Promise.resolve({ data: { languages: ['nl', 'en'] } })
+		}
+		if (url.endsWith('/registers/reg/schemas')) {
+			return Promise.resolve({ data: { results: [{ slug: 'kind', properties: { title: { title: 'Title' }, description: { title: 'Description' } } }] } })
+		}
+		if (url.includes('/translations/object/')) {
+			return Promise.resolve({ data: { translations: rows } })
+		}
+		return Promise.resolve({ data: { object } })
+	})
+	axios.patch.mockResolvedValue({ data: { object } })
+})
+
+describe('an object says what is still missing', () => {
+	it('draws one chip per declared language, not per language present', async () => {
+		const wrapper = await mountWidget()
+		const chips = wrapper.findAll('.cn-object-translations__chip')
+		expect(chips).toHaveLength(2)
+		expect(chips[1].attributes('data-language')).toBe('en')
+		expect(chips[1].text()).toContain('0 of 2')
+	})
+
+	it('counts a stale translation as missing', () => {
+		const values = { title: { nl: 'A', en: 'A!' }, description: { nl: 'B', en: 'B!' } }
+		expect(completenessOf({ properties: ['title', 'description'], values, statuses: { title: { en: 'human_reviewed' }, description: { en: 'human_reviewed' } }, language: 'en', sourceLanguage: 'nl' })).toEqual({ translated: 2, total: 2 })
+		expect(completenessOf({ properties: ['title', 'description'], values, statuses: { title: { en: 'outdated' }, description: { en: 'human_reviewed' } }, language: 'en', sourceLanguage: 'nl' })).toEqual({ translated: 1, total: 2 })
+	})
+
+	it('reports one of two when one of two is translated', async () => {
+		object.title.en = 'Environmental permit'
+		rows = [{ property: 'title', language: 'en', status: 'human_reviewed' }]
+		const wrapper = await mountWidget()
+		expect(wrapper.find('.cn-object-translations__chip[data-language="en"]').text()).toContain('1 of 2')
+	})
+
+	it('drops a translation back out of the count when the source moves', async () => {
+		object.title.en = 'Environmental permit'
+		rows = [{ property: 'title', language: 'en', status: 'outdated' }]
+		const wrapper = await mountWidget()
+		expect(wrapper.find('.cn-object-translations__chip[data-language="en"]').text()).toContain('0 of 2')
+		expect(wrapper.find('.cn-object-translations__stale').exists()).toBe(true)
+	})
+
+	it('reads the object under the register and schema it was given', async () => {
+		await mountWidget()
+		expect(axios.get.mock.calls.some(([url, opts]) => url === '/index.php/apps/openregister/api/objects/reg/kind/o-1' && opts.params._translations === 'all')).toBe(true)
+		expect(axios.get.mock.calls.some(([url, opts]) => url.endsWith('/translations/object/o-1') && opts.params.schema === 'kind')).toBe(true)
+	})
+
+	it('takes the slug of a schema object from the detail context', async () => {
+		await mountWidget({ schema: { slug: 'kind', id: 7 } })
+		expect(axios.get.mock.calls.some(([url]) => url.endsWith('/objects/reg/kind/o-1'))).toBe(true)
+	})
+})
+
+describe('an admin adds an English title', () => {
+	it('writes the whole language map through a typed edit, so the Dutch title survives', async () => {
+		const wrapper = await mountWidget()
+		expect(wrapper.vm.activeLanguage).toBe('en')
+
+		const field = wrapper.find('.cn-object-translations__field[data-property="title"] input')
+		await field.setValue('Environmental permit')
+		await wrapper.find('[data-testid="cn-object-translations-save"]').trigger('click')
+		await flush()
+
+		expect(axios.patch).toHaveBeenCalledTimes(1)
+		const [url, body] = axios.patch.mock.calls[0]
+		expect(url).toBe('/index.php/apps/openregister/api/objects/reg/kind/o-1')
+		expect(body).toEqual({ title: { nl: 'Omgevingsvergunning', en: 'Environmental permit' } })
+		expect(axios.patch.mock.calls[0][2]).toBeUndefined()
+	})
+
+	it('keeps the source language read-only', async () => {
+		const wrapper = await mountWidget()
+		wrapper.vm.activeLanguage = 'nl'
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.cn-object-translations__field input').attributes('disabled')).toBeDefined()
+	})
+
+	it('offers only the properties OpenRegister holds as translatable', async () => {
+		delete object._meta.languageMeta.description
+		const wrapper = await mountWidget()
+		expect(wrapper.findAll('.cn-object-translations__field')).toHaveLength(1)
+	})
+
+	it('narrows to a whitelist when one is configured', async () => {
+		const wrapper = await mountWidget({ content: { properties: ['description'] } })
+		const fields = wrapper.findAll('.cn-object-translations__field')
+		expect(fields).toHaveLength(1)
+		expect(fields[0].attributes('data-property')).toBe('description')
+	})
+
+	it('says so rather than drawing an empty page when the read fails', async () => {
+		axios.get.mockRejectedValue(new Error('503'))
+		const wrapper = await mountWidget()
+		expect(wrapper.text()).toContain('could not be read')
+		expect(wrapper.findAll('.cn-object-translations__chip')).toHaveLength(0)
+	})
+})
+
+describe('the language strip is a tablist', () => {
+	it('links each tab to the panel and moves with the arrow keys', async () => {
+		const wrapper = await mountWidget()
+		const panel = wrapper.find('[role="tabpanel"]')
+		expect(panel.exists()).toBe(true)
+		const tabs = wrapper.findAll('[role="tab"]')
+		expect(tabs).toHaveLength(2)
+		expect(tabs[0].attributes('aria-controls')).toBe(panel.attributes('id'))
+		expect(panel.attributes('aria-labelledby')).toBe(tabs[1].attributes('id'))
+		expect(tabs[1].attributes('aria-selected')).toBe('true')
+		expect(tabs[0].attributes('tabindex')).toBe('-1')
+
+		await wrapper.find('[role="tablist"]').trigger('keydown', { key: 'ArrowRight' })
+		expect(wrapper.vm.activeLanguage).toBe('nl')
+		await wrapper.find('[role="tablist"]').trigger('keydown', { key: 'End' })
+		expect(wrapper.vm.activeLanguage).toBe('en')
+	})
+})
+
+describe('registration', () => {
+	it('is the detail-page widget type object-translations', () => {
+		const { BUILT_IN_WIDGETS } = require('../../CnWidgetGrid/builtInWidgets.js')
+		expect(BUILT_IN_WIDGETS['object-translations']).toBe(CnObjectTranslationsWidget)
+	})
+})

package/src/components/CnObjectTranslationsWidget/index.js

@@ -0,0 +1,13 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnObjectTranslationsWidget — an object's translatable properties per
+ * language, with completeness chips and one save. The detail-page widget
+ * type `object-translations`.
+ */
+
+import CnObjectTranslationsWidget from './CnObjectTranslationsWidget.vue'
+
+export { CnObjectTranslationsWidget }
+export default CnObjectTranslationsWidget