@kinetis/vector-ui 0.0.0-stage → 0.9.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to `@kinetis/vector-ui` are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.9.0] - 2026-10-18
+
+### Added
+
+- A Nuxt 4 layer on Vuetify 4 that renders the `kinetis/vector`
+  descriptor: navigation with badges, lists, record pages, generated
+  forms, relation panels, actions, dashboards, jobs, notifications,
+  settings and global search.
+- Standalone mode with a bearer token and refresh, and hosted mode on
+  the application's session cookie with CSRF, with an idle sign-out in
+  both.
+- A rich-text editor on Tiptap and a Markdown editor, rendered through
+  DOMPurify.
+- Overrides for cells, inputs and widget renderers in `app.config`, and
+  runtime extensions through `window.Vector`, custom pages included.
+- English and sixteen machine-translated languages, right to left for
+  Hebrew and Arabic, with per-locale message overrides.

package/LICENSE

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2026 Alon Noy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,73 @@
-# Temporary Holding Version
+<p align="center">
+  <img src="https://kinetis.dev/vector/docs/_static/logo.svg" alt="Kinetis" width="420">
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<p align="center">
+  <strong>@kinetis/vector-ui</strong>
+  <br>
+  <strong>The Kinetis Vector admin UI, as a Nuxt layer on Vuetify</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@kinetis/vector-ui"><img src="https://img.shields.io/npm/v/@kinetis/vector-ui?label=version" alt="npm Version"></a>
+  <a href="https://www.npmjs.com/package/@kinetis/vector-ui"><img src="https://img.shields.io/npm/dm/@kinetis/vector-ui" alt="npm Downloads"></a>
+  <a href="https://www.npmjs.com/package/@kinetis/vector-ui"><img src="https://img.shields.io/npm/l/@kinetis/vector-ui" alt="License"></a>
+  <a href="https://github.com/kinetis-dev/vector-dev/actions/workflows/ci.yml"><img src="https://github.com/kinetis-dev/vector-dev/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
+</p>
+
+---
+
+Part of [Kinetis](https://kinetis.dev/), a non-blocking PHP framework for
+API-first applications. Vector is developed in the
+[kinetis-dev/vector-dev](https://github.com/kinetis-dev/vector-dev)
+monorepo, beside its PHP package and a demo application.
+
+The admin UI for [`kinetis/vector`](https://packagist.org/packages/kinetis/vector):
+a Nuxt 4 layer on Vuetify 4 that renders the descriptor the API
+publishes — navigation, lists, forms, relation panels, actions,
+dashboards, jobs, settings — and contains no application knowledge. An
+application is a Nuxt app that extends the layer, served as a static
+site on its own origin with a bearer token (standalone), or published
+into the PHP application and served at `/vector/ui` behind its session
+(hosted).
+
+## Installation
+
+```sh
+pnpm add @kinetis/vector-ui nuxt vuetify vuetify-nuxt-module
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+    extends: ['@kinetis/vector-ui'],
+    runtimeConfig: { public: { vector: { apiBase: 'https://api.example.com' } } },
+})
+```
+
+`pnpm nuxt dev` for development, `pnpm nuxt generate` for a static site
+any web server hosts. The API allows the UI's origin through
+`CorsMiddleware` and offers the `POST /auth/login` endpoint the sign-in
+page calls; see
+[Deployment](https://kinetis.dev/vector/docs/deployment.html).
+
+## Configuration
+
+| Where | Key | Default | Purpose |
+|---|---|---|---|
+| `runtimeConfig.public.vector` | `apiBase` | `http://localhost:8080` | The API origin in standalone mode (`NUXT_PUBLIC_VECTOR_API_BASE`). |
+| | `extensions` | `[]` | ES-module URLs to import after boot, in standalone mode. |
+| `app.config.vector` | `brand.title` | `Vector` | The title before the Branding settings load. |
+| | `usersResource` | `null` | The resource whose records are users, for **Impersonate**. |
+| | `idleMinutes` | `30` | Minutes without use after which the admin signs the user out; `0` never. |
+| | `locale` | `en` | The language before the descriptor names the user's. |
+
+Every setting, including component overrides, custom pages and
+messages:
+[kinetis.dev/vector/docs/configuration.html](https://kinetis.dev/vector/docs/configuration.html).
+Cells, inputs, widgets and runtime extensions:
+[Customizing the UI](https://kinetis.dev/vector/docs/customizing-the-ui.html).
+
+## License
+
+MIT — see [LICENSE](LICENSE).

package/app/app.config.ts

@@ -0,0 +1,63 @@
+export default defineAppConfig({
+    vector: {
+        brand: {
+            title: 'Vector',
+        },
+        // A path prefix inside the router; the deployment's URL prefix is
+        // Nuxt's app.baseURL ('/' standalone, '/vector/ui/' hosted).
+        basePath: '',
+        // Field components a consuming app adds or replaces, keyed by the
+        // descriptor's field type or explicit component name (Phase 2).
+        fields: {} as Record<string, string>,
+        // Input components, the same way (Phase 3).
+        inputs: {} as Record<string, string>,
+        // The Ctrl/Cmd+K global search palette (Phase 4).
+        commandPalette: true,
+        // Widget renderers by type, the same way (Phase 5).
+        widgets: {} as Record<string, string>,
+        // The resource whose records are users, for the Impersonate button (Phase 5).
+        usersResource: null as string | null,
+        // The UI's language before the descriptor names the user's, when neither the hosted shell nor this browser does.
+        locale: 'en',
+        // Minutes without a pointer, key, touch or scroll after which the admin signs the user out; 0 never does.
+        idleMinutes: 30,
+        // Messages an application adds or overrides, by locale and area: { de: { common: { save: 'Speichern' } } }.
+        messages: {} as Record<string, Record<string, unknown>>,
+        // Custom pages at /p/{name}: { stock: { title: 'Stock', icon: 'mdi-warehouse', component: 'StockPage' } },
+        // the component registered globally by the application.
+        pages: {} as Record<string, { title: string, icon?: string, group?: string, component: string }>,
+    },
+})
+
+declare module 'nuxt/schema' {
+    interface AppConfigInput {
+        vector?: {
+            brand?: { title?: string }
+            basePath?: string
+            fields?: Record<string, string>
+            inputs?: Record<string, string>
+            commandPalette?: boolean
+            widgets?: Record<string, string>
+            usersResource?: string | null
+            locale?: string
+            idleMinutes?: number
+            messages?: Record<string, Record<string, unknown>>
+            pages?: Record<string, { title: string, icon?: string, group?: string, component: string }>
+        }
+    }
+    interface AppConfig {
+        vector: {
+            brand: { title: string }
+            basePath: string
+            fields: Record<string, string>
+            inputs: Record<string, string>
+            commandPalette: boolean
+            widgets: Record<string, string>
+            usersResource: string | null
+            locale: string
+            idleMinutes: number
+            messages: Record<string, Record<string, unknown>>
+            pages: Record<string, { title: string, icon?: string, group?: string, component: string }>
+        }
+    }
+}

package/app/app.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// The document's language follows the admin's locale, for screen readers and hyphenation.
+const { locale } = useVectorT()
+useHead({ htmlAttrs: { lang: () => locale.value } })
+</script>
+
+<template>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>

package/app/components/Vx/Action/Dialog.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { SubmitEventPromise } from 'vuetify'
+import type { VectorAction, VectorResource, VectorSelection } from '#vector/app/types/vector'
+
+// Runs one action: the confirmation, the dialog's fields, the request,
+// and what the response asks the client to do.
+const props = defineProps<{
+    resource: VectorResource
+    action: VectorAction
+    selection: VectorSelection | null
+    count: number
+}>()
+
+const emit = defineEmits<{ done: [affected: number], cancel: [] }>()
+
+const { t, noun } = useVectorT()
+const appConfig = useAppConfig()
+const notifications = useVectorNotifications()
+const client = useVectorResource(() => props.resource.slug)
+
+const values = reactive<Record<string, unknown>>({})
+const serverErrors = reactive<Record<string, string[]>>({})
+const formError = ref<string | null>(null)
+const running = ref(false)
+
+for (const field of props.action.fields) {
+    values[field.name] = initialValue(field)
+}
+
+const subject = computed(() => props.action.standalone
+    ? ''
+    : props.selection?.all
+        ? t('actions.subjectAll', { label: noun(props.resource.labelSingular), count: props.count })
+        : t('actions.subjectCount', { count: props.count, label: noun(props.count === 1 ? props.resource.labelSingular : props.resource.label) }))
+
+async function run(event: SubmitEventPromise) {
+    const { valid } = await event
+    if (!valid) return
+
+    running.value = true
+    formError.value = null
+    for (const key of Object.keys(serverErrors)) delete serverErrors[key]
+
+    try {
+        const response = await client.runAction(props.action.name, props.action.standalone ? null : props.selection, { ...values })
+
+        switch (response.type) {
+            case 'message':
+                notifications.success(response.message ?? t('actions.done', { label: props.action.label }))
+                break
+            case 'danger':
+                formError.value = response.message ?? t('actions.declined')
+                return
+            case 'redirect':
+                if (response.message) notifications.success(response.message)
+                emit('done', response.affected)
+                await navigateTo(`${appConfig.vector.basePath}${response.url ?? ''}`)
+                return
+            case 'url':
+                if (response.message) notifications.success(response.message)
+                if (response.url && import.meta.client) window.open(response.url, '_blank', 'noopener')
+                break
+            case 'download':
+                notifications.success(t('actions.downloadStarted'))
+                break
+            case 'job':
+                notifications.success(response.message ?? t('actions.queued', { label: props.action.label }))
+                emit('done', 0)
+                await navigateTo(`${appConfig.vector.basePath}/jobs/${response.jobId}`)
+                return
+        }
+
+        emit('done', response.affected)
+    } catch (error) {
+        formError.value = applyViolations(error, values, serverErrors)
+    } finally {
+        running.value = false
+    }
+}
+</script>
+
+<template>
+    <v-dialog :model-value="true" max-width="560" persistent @update:model-value="emit('cancel')">
+        <v-form validate-on="blur lazy" @submit.prevent="run">
+            <v-card>
+                <v-card-title class="d-flex align-center ga-2">
+                    <v-icon v-if="action.icon" :icon="action.icon" />
+                    {{ action.label }}
+                </v-card-title>
+                <v-card-text>
+                    <p v-if="action.confirmation" class="mb-4">{{ action.confirmation }}</p>
+                    <i18n-t v-else-if="!action.standalone" keypath="actions.runOn" tag="p" class="mb-4" scope="global">
+                        <template #action><strong>{{ action.label }}</strong></template>
+                        <template #subject>{{ subject }}</template>
+                    </i18n-t>
+                    <v-alert v-if="formError" type="error" variant="tonal" class="mb-4" :text="formError" />
+                    <VxFieldsForm v-if="action.fields.length" :fields="action.fields" :values="values" :server-errors="serverErrors" :resource="resource.slug" @clear="(name: string) => delete serverErrors[name]" />
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn variant="text" :disabled="running" @click="emit('cancel')">{{ t('common.cancel') }}</v-btn>
+                    <v-btn type="submit" :color="action.destructive ? 'error' : 'primary'" :loading="running">{{ action.label }}</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-form>
+    </v-dialog>
+</template>

package/app/components/Vx/Cell/Boolean.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{ value: unknown }>()
+const { t } = useVectorT()
+</script>
+
+<template>
+    <v-icon v-if="value === true" icon="mdi-check-circle" color="success" size="small" />
+    <v-icon v-else-if="value === false" icon="mdi-close-circle-outline" color="grey" size="small" />
+    <span v-else class="text-disabled">{{ t('common.none') }}</span>
+</template>

package/app/components/Vx/Cell/Color.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ value: unknown }>()
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="typeof value === 'string' && value" class="d-inline-flex align-center ga-2">
+        <v-avatar :color="value" size="16" />
+        <code>{{ value }}</code>
+    </span>
+    <span v-else class="text-disabled">{{ t('common.none') }}</span>
+</template>

package/app/components/Vx/Cell/Count.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { VectorCountValue } from '#vector/app/types/vector'
+
+const props = defineProps<{ value: unknown }>()
+const count = computed(() => (props.value && typeof props.value === 'object' && 'count' in props.value ? (props.value as VectorCountValue).count : null))
+const { t } = useVectorT()
+</script>
+
+<template>
+    <v-chip v-if="count !== null" size="small" variant="tonal" :color="count > 0 ? 'primary' : undefined">{{ count }}</v-chip>
+    <span v-else class="text-disabled">{{ t('common.none') }}</span>
+</template>

package/app/components/Vx/Cell/Date.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps<{ value: unknown }>()
+const text = computed(() => typeof props.value === 'string' ? formatDate(props.value) : '')
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <span v-else class="text-no-wrap">{{ text }}</span>
+</template>

package/app/components/Vx/Cell/DateTime.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps<{ value: unknown }>()
+const text = computed(() => typeof props.value === 'string' ? formatDateTime(props.value) : '')
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <span v-else class="text-no-wrap" :title="String(value)">{{ text }}</span>
+</template>

package/app/components/Vx/Cell/Email.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{ value: unknown }>()
+const { t } = useVectorT()
+</script>
+
+<template>
+    <a v-if="typeof value === 'string' && value" :href="`mailto:${value}`" @click.stop>{{ value }}</a>
+    <span v-else class="text-disabled">{{ t('common.none') }}</span>
+</template>

package/app/components/Vx/Cell/Enum.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, value: unknown }>()
+const option = computed(() => props.field.options?.find(o => o.value === props.value))
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="value === null || value === undefined" class="text-disabled">{{ t('common.none') }}</span>
+    <v-chip v-else size="small" :color="option?.color ?? undefined" variant="tonal" label>
+        {{ option?.label ?? String(value) }}
+    </v-chip>
+</template>

package/app/components/Vx/Cell/File.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { VectorField, VectorResource } from '#vector/app/types/vector'
+
+// A stored document as a download button, fetched with the API's credentials.
+const props = defineProps<{ field: VectorField, value: unknown, record: Record<string, unknown>, resource: VectorResource, context: 'index' | 'show' }>()
+
+const client = useVectorResource(() => props.resource.slug)
+const notifications = useVectorNotifications()
+const key = computed(() => (typeof props.value === 'string' && props.value !== '' ? props.value : null))
+const name = computed(() => key.value?.split('/').pop() ?? '')
+const busy = ref(false)
+
+async function download() {
+    if (!key.value) return
+    busy.value = true
+    try {
+        await client.downloadFile(props.record.id as string | number, props.field.name, name.value)
+    } catch (error) {
+        notifications.error(vectorErrorMessage(error))
+    } finally {
+        busy.value = false
+    }
+}
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="!key" class="text-disabled">{{ t('common.none') }}</span>
+    <v-btn v-else size="small" variant="tonal" prepend-icon="mdi-download" :loading="busy" @click.stop="download">{{ context === 'show' ? name : t('common.download') }}</v-btn>
+</template>

package/app/components/Vx/Cell/Image.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { VectorField, VectorResource } from '#vector/app/types/vector'
+
+// A stored image as a thumbnail. The bytes come through the API client,
+// so a bearer-authenticated admin sees them too; a key with no stored
+// file (or no upload support) shows as its name.
+const props = defineProps<{ field: VectorField, value: unknown, record: Record<string, unknown>, resource: VectorResource, context: 'index' | 'show' }>()
+
+const client = useVectorResource(() => props.resource.slug)
+const url = ref<string | null>(null)
+const failed = ref(false)
+const key = computed(() => (typeof props.value === 'string' && props.value !== '' ? props.value : null))
+const size = computed(() => (props.context === 'show' ? 200 : 40))
+
+watch([key, () => props.record.id], async () => {
+    url.value = null
+    failed.value = false
+    if (!key.value || props.record.id === undefined || props.record.id === null) return
+
+    try {
+        url.value = await dataUrl(await client.fileBlob(props.record.id as string | number, props.field.name))
+    } catch {
+        failed.value = true
+    }
+}, { immediate: true })
+
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="!key" class="text-disabled">{{ t('common.none') }}</span>
+    <v-img v-else-if="url" :src="url" :width="size" :height="size" :alt="field.label" cover class="rounded" />
+    <span v-else-if="failed" class="d-inline-flex align-center ga-1 text-medium-emphasis" :title="key">
+        <v-icon icon="mdi-image-off-outline" size="small" />
+        <span class="text-caption">{{ key.split('/').pop() }}</span>
+    </span>
+    <v-progress-circular v-else indeterminate size="16" width="2" :aria-label="t('fields.cell.loading', { label: field.label })" />
+</template>

package/app/components/Vx/Cell/Json.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{ value: unknown, context: 'index' | 'show' }>()
+const pretty = computed(() => {
+    if (typeof props.value !== 'string' || props.value === '') return ''
+    try {
+        return JSON.stringify(JSON.parse(props.value), null, props.context === 'show' ? 2 : 0)
+    } catch {
+        return props.value
+    }
+})
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="pretty === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <pre v-else-if="context === 'show'" class="text-body-2 pa-3 rounded bg-surface-light overflow-auto">{{ pretty }}</pre>
+    <code v-else class="text-truncate d-inline-block" style="max-width: 24rem">{{ pretty }}</code>
+</template>

package/app/components/Vx/Cell/KeyValue.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// A key-value field: its first entries as chips in a list, every entry
+// as a two-column table on a record.
+const props = defineProps<{ value: unknown, context: 'index' | 'show' }>()
+const entries = computed(() => (props.value && typeof props.value === 'object' && !Array.isArray(props.value)
+    ? Object.entries(props.value as Record<string, unknown>).map(([key, value]) => [key, String(value ?? '')] as const)
+    : []))
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="!entries.length" class="text-disabled">{{ t('common.none') }}</span>
+    <v-table v-else-if="context === 'show'" density="compact">
+        <tbody>
+            <tr v-for="[key, text] in entries" :key="key">
+                <th scope="row" class="text-medium-emphasis font-weight-regular">{{ key }}</th>
+                <td>{{ text }}</td>
+            </tr>
+        </tbody>
+    </v-table>
+    <span v-else class="d-inline-flex flex-wrap align-center ga-1">
+        <v-chip v-for="[key, text] in entries.slice(0, 3)" :key="key" size="x-small" label>{{ key }}: {{ text }}</v-chip>
+        <span v-if="entries.length > 3" class="text-caption text-medium-emphasis">{{ t('fields.keyValue.more', { count: entries.length - 3 }) }}</span>
+    </span>
+</template>

package/app/components/Vx/Cell/Markdown.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// Markdown source. On the record page it is rendered: markdown-it with HTML
+// in the source turned off (raw HTML shows as text), then DOMPurify with the
+// same allow-list as rich text — the only other `v-html` in the layer. In a
+// list, the plain text, shortened.
+const props = defineProps<{ value: unknown, context: 'index' | 'show' }>()
+const text = computed(() => typeof props.value === 'string' ? props.value : '')
+const html = computed(() => props.context === 'show' && text.value !== '' ? markdownHtml(text.value) : '')
+const plain = computed(() => props.context === 'index' && text.value !== '' ? markdownPlain(text.value) : '')
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <!-- eslint-disable-next-line vue/no-v-html -- rendered with HTML off, then sanitized (see above) -->
+    <div v-else-if="context === 'show'" class="vx-richtext-view text-body-1" v-html="html" />
+    <span v-else class="text-truncate d-inline-block" style="max-width: 24rem">{{ plain }}</span>
+</template>

package/app/components/Vx/Cell/Money.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, value: unknown, record: Record<string, unknown> }>()
+const text = computed(() => {
+    if (typeof props.value !== 'number') return ''
+    const currency = currencyOf(props.field, props.record)
+    return currency ? formatMoney(props.value, currency) : formatNumber(props.value / 100, 2)
+})
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <span v-else class="text-no-wrap font-weight-medium">{{ text }}</span>
+</template>

package/app/components/Vx/Cell/Number.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { fieldProps, type VectorField } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, value: unknown }>()
+const text = computed(() => {
+    if (typeof props.value !== 'number') return ''
+    const decimals = fieldProps(props.field).decimals
+    return formatNumber(props.value, typeof decimals === 'number' ? decimals : undefined)
+})
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <span v-else class="text-no-wrap">{{ text }}</span>
+</template>

package/app/components/Vx/Cell/Relation.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { VectorField, VectorRelationValue } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, value: unknown }>()
+const appConfig = useAppConfig()
+const related = computed(() => (props.value && typeof props.value === 'object' && 'id' in props.value ? props.value as VectorRelationValue : null))
+const to = computed(() => related.value && props.field.relation
+    ? `${appConfig.vector.basePath}/r/${props.field.relation.resource}/${encodeURIComponent(String(related.value.id))}`
+    : undefined)
+const { t } = useVectorT()
+</script>
+
+<template>
+    <v-chip v-if="related" size="small" variant="outlined" :to="to" link @click.stop>{{ related.label }}</v-chip>
+    <span v-else class="text-disabled">{{ t('common.none') }}</span>
+</template>

package/app/components/Vx/Cell/RichText.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { VectorField, VectorResource } from '#vector/app/types/vector'
+
+// A rich-text value. On the record page it is shown as HTML — and this is
+// the one `v-html` in the layer. It is safe because the HTML is never the
+// stored value: it is generated here from the document through the
+// field's fixed schema (anything outside the schema cannot be expressed),
+// then passed through DOMPurify with an allow-list matching that schema
+// (no style, no event handlers, links only to http(s), mailto or relative
+// places). Images carry their storage key and are fetched with the API's
+// credentials. In a list, the plain text, shortened.
+const props = defineProps<{ field: VectorField, value: unknown, record: Record<string, unknown>, resource: VectorResource, context: 'index' | 'show' }>()
+
+const { t } = useVectorT()
+const client = useVectorResource(() => props.resource.slug)
+const { richText: custom } = useVectorExtensions()
+const extensions = richTextExtensions({ features: props.field.richtext?.features ?? [], custom })
+const text = computed(() => typeof props.value === 'string' ? props.value : '')
+const html = computed(() => props.context === 'show' && text.value !== '' ? richTextHtml(text.value, extensions) : '')
+const plain = computed(() => props.context === 'index' && text.value !== '' ? richTextPlain(text.value, extensions) : '')
+
+const root = ref<HTMLElement | null>(null)
+watch([html, root], async () => {
+    await nextTick()
+    const imageField = props.field.richtext?.imageField
+    const id = props.record.id
+    if (!root.value || !imageField || id === undefined || id === null) return
+
+    for (const img of root.value.querySelectorAll<HTMLImageElement>('img[data-vector-key]')) {
+        const key = img.getAttribute('data-vector-key')!
+        client.fileBlob(id as string | number, imageField, key).then(dataUrl).then((url) => { img.src = url }).catch(() => undefined)
+    }
+}, { immediate: true })
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <!-- eslint-disable-next-line vue/no-v-html -- generated through the schema, then sanitized (see above) -->
+    <div v-else-if="context === 'show'" ref="root" class="vx-richtext-view text-body-1" v-html="html" />
+    <span v-else class="text-truncate d-inline-block" style="max-width: 24rem">{{ plain }}</span>
+</template>

package/app/components/Vx/Cell/Text.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, value: unknown, context: 'index' | 'show' }>()
+const text = computed(() => props.value === null || props.value === undefined ? '' : String(props.value))
+const truncated = computed(() => props.context === 'index' && text.value.length > 80 ? text.value.slice(0, 77) + '…' : text.value)
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <span v-else :title="truncated !== text ? text : undefined">{{ truncated }}</span>
+</template>