@payload-onpage/react 0.2.1 → 0.3.0

package/src/editor/editTarget.ts

@@ -0,0 +1,41 @@
+/**
+ * What clicking or pressing Enter on a field opens: a pure function of the
+ * document's state, the editor registry and what was clicked.
+ */
+import {
+  fieldAtPath,
+  isEditablePath,
+  isReady,
+  type DocumentState,
+  type RefKey,
+  type TargetKind,
+} from '@payload-onpage/core'
+import { resolveEditor } from '../registry.ts'
+import type { EditingState, EditorRegistry } from '../types.ts'
+
+export type EditTarget =
+  /** The document isn't loaded (yet, or it failed). */
+  | { kind: 'not-ready'; state: DocumentState | undefined }
+  /** Nothing here is edited in place. */
+  | { kind: 'none' }
+  | { kind: 'edit'; editing: EditingState }
+
+export function resolveEditTarget(
+  state: DocumentState | undefined,
+  editors: EditorRegistry,
+  key: RefKey,
+  path: string,
+  opts: {
+    point?: { x: number; y: number } | undefined
+    kind?: TargetKind | undefined
+    el?: Element | undefined
+  },
+): EditTarget {
+  if (!isReady(state)) return { kind: 'not-ready', state }
+  if (!isEditablePath(state.schema, path)) return { kind: 'none' }
+  const hit = fieldAtPath(state.schema.fields, state.doc, path)
+  if (!hit) return { kind: 'none' }
+  const editor = resolveEditor(editors, hit.field, opts.kind === 'field' ? undefined : opts.kind)
+  if (!editor) return { kind: 'none' }
+  return { kind: 'edit', editing: { key, path, editor, point: opts.point, el: opts.el } }
+}

package/src/editor/useClientDocs.ts

@@ -0,0 +1,19 @@
+'use client'
+
+import type { RefKey } from '@payload-onpage/core'
+import { useCallback, useState } from 'react'
+
+/** Documents rendered from editor state on this page (client mode), and how they register. */
+export function useClientDocs(): [ReadonlySet<RefKey>, (key: RefKey) => () => void] {
+  const [docs, setDocs] = useState<ReadonlySet<RefKey>>(() => new Set())
+  const register = useCallback((key: RefKey) => {
+    setDocs((s) => new Set(s).add(key))
+    return () =>
+      setDocs((s) => {
+        const next = new Set(s)
+        next.delete(key)
+        return next
+      })
+  }, [])
+  return [docs, register]
+}

package/src/editor/useEditorSession.ts

@@ -0,0 +1,36 @@
+'use client'
+
+import { EditorSession, type DataSource, type DocRef } from '@payload-onpage/core'
+import { useEffect, useState } from 'react'
+import { useEvent } from '../useEvent.ts'
+
+/**
+ * One editor session per data source and locale, disposed (after flushing its
+ * saves) when they change or on unmount. It lives in state, so StrictMode's
+ * mount/unmount/mount gets a fresh one each time.
+ */
+export function useEditorSession(opts: {
+  dataSource: DataSource
+  locale: string | undefined
+  autosaveDelay: number | undefined
+  onSaved: (ref: DocRef, seq: number) => void
+}): EditorSession | null {
+  const { dataSource, locale, autosaveDelay } = opts
+  const onSaved = useEvent(opts.onSaved)
+  const [session, setSession] = useState<EditorSession | null>(null)
+  useEffect(() => {
+    const s = new EditorSession({
+      dataSource,
+      locale,
+      autosaveDelay,
+      onSaved: (ref, seq) => onSaved(ref, seq),
+    })
+    // The session is an external resource with a lifecycle (see above).
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setSession(s)
+    return () => {
+      void s.flush().finally(() => s.dispose())
+    }
+  }, [dataSource, locale, autosaveDelay, onSaved])
+  return session
+}

package/src/editor/useFlash.ts

@@ -0,0 +1,18 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { Flash } from '../types.ts'
+
+const SHOWN_FOR = 4000
+
+/** The dock's short message, cleared after a few seconds. */
+export function useFlash(): [Flash | null, (text: string, bad?: boolean) => void] {
+  const [flash, setFlash] = useState<Flash | null>(null)
+  useEffect(() => {
+    if (!flash) return
+    const id = setTimeout(() => setFlash(null), SHOWN_FOR)
+    return () => clearTimeout(id)
+  }, [flash])
+  const notify = useCallback((text: string, bad?: boolean) => setFlash({ text, bad }), [])
+  return [flash, notify]
+}

package/src/editor/useGhosts.ts

@@ -6,16 +6,14 @@
  * records the document's save sequence when it was made; the render after a
  * later save retires it. Failed saves and a TTL retire ghosts too.
  */
-import type { SessionSnapshot } from '@payload-onpage/core'
+import type { SessionSnapshot, RefKey } from '@payload-onpage/core'
+import type { GhostInput } from '../types.ts'
 import { useCallback, useEffect, useState } from 'react'
 
-export interface Ghost {
+export interface Ghost extends GhostInput {
   id: string
-  key: string
+  key: RefKey
   path: string
-  html: string
-  className?: string
-  style?: Partial<CSSStyleDeclaration>
   /** Save sequence of the document when the ghost was made. */
   afterSeq: number
   until: number
@@ -35,7 +33,7 @@ export function useGhosts(snap: SessionSnapshot | null) {
   }, [])
 
   /** The page re-rendered after save `seq` of document `key`. */
-  const rendered = useCallback((key: string, seq: number) => {
+  const rendered = useCallback((key: RefKey, seq: number) => {
     setGhosts((gs) =>
       gs.some((g) => g.key === key && g.afterSeq < seq)
         ? gs.filter((g) => !(g.key === key && g.afterSeq < seq))

package/src/editor/usePageEvents.ts

@@ -8,13 +8,14 @@
  *  - a warning before leaving with unsaved changes
  */
 import { useEvent } from '../useEvent.ts'
-import { moveItem, refKey, removeItem, resolveRow, updateArray } from '@payload-onpage/core'
+import { refKey, resolveRow, isReady } from '@payload-onpage/core'
+import { rowOps } from '../rowOps.ts'
 import { useEffect } from 'react'
-import { isOurs, isTyping } from '../dom.ts'
+import { DOM_ATTR, isOurs, isTyping } from '../dom.ts'
 import { isFieldTarget, isRowTarget, targetsAt } from '../targets.ts'
 import type { OnPageContextValue } from '../types.ts'
 
-const FOCUSABLE_FLAG = 'data-onpage-focusable'
+const FOCUSABLE_FLAG = DOM_ATTR.focusable
 
 export function usePageEvents(ctx: OnPageContextValue | null, root: () => ParentNode | null): void {
   const onClick = useEvent((e: MouseEvent) => {
@@ -43,22 +44,20 @@ export function usePageEvents(ctx: OnPageContextValue | null, root: () => Parent
     }
   })
 
+  /** ⌥↑/⌥↓ move the selected row, ⌥⌫ deletes it. True when the key was ours (even if the row can't move). */
   const moveSelected = (dir: -1 | 1 | 'delete') => {
     if (!ctx?.selected) return false
     const { key, path } = ctx.selected
     const state = ctx.snap.docs[key]
-    const info = state?.schema && state.doc ? resolveRow(state.schema, state.doc, path) : null
+    const info = isReady(state) ? resolveRow(state.schema, state.doc, path) : null
     if (!info) return false
+    const ops = rowOps(ctx.session, key, info)
     if (dir === 'delete') {
-      if (info.length <= (info.listField.minRows ?? 0)) return true
-      ctx.session.apply(key, (d) => updateArray(d, info.listPath, (a) => removeItem(a, info.index)))
-      ctx.setSelected(null)
-      return true
+      if (ops.remove()) ctx.setSelected(null)
+    } else {
+      const next = ops.move(dir)
+      if (next) ctx.setSelected(next)
     }
-    const to = info.index + dir
-    if (to < 0 || to >= info.length) return true
-    ctx.session.apply(key, (d) => updateArray(d, info.listPath, (a) => moveItem(a, info.index, to)))
-    ctx.setSelected({ key, path: `${info.listPath}.${to}` })
     return true
   }
 
@@ -120,7 +119,7 @@ export function usePageEvents(ctx: OnPageContextValue | null, root: () => Parent
   })
 
   useEffect(() => {
-    document.documentElement.setAttribute('data-onpage-editing', '')
+    document.documentElement.setAttribute(DOM_ATTR.editing, '')
     const click = (e: MouseEvent) => onClick(e)
     const key = (e: KeyboardEvent) => onKey(e)
     const focus = (e: FocusEvent) => onFocus(e)
@@ -130,7 +129,7 @@ export function usePageEvents(ctx: OnPageContextValue | null, root: () => Parent
     document.addEventListener('focusin', focus)
     window.addEventListener('beforeunload', unload)
     return () => {
-      document.documentElement.removeAttribute('data-onpage-editing')
+      document.documentElement.removeAttribute(DOM_ATTR.editing)
       document.removeEventListener('click', click, true)
       document.removeEventListener('keydown', key)
       document.removeEventListener('focusin', focus)

package/src/editor-kit.ts

@@ -2,14 +2,17 @@
  * @payload-onpage/react/editor-kit — building blocks for custom field editors
  * (the default editors and @payload-onpage/lexical use exactly these).
  *
- *   function JsonEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
- *     return <Dialog variant="popover" anchor={element} title={field.label} onClose={close} t={t}>…</Dialog>
- *   }
+ *   const json = defineEditor({
+ *     mode: 'popover',
+ *     accepts: ['json'],
+ *     component: (props) => <EditorPopover props={props} testId="my-json">…</EditorPopover>,
+ *   })
  */
 export { Dialog, type DialogProps } from './ui/Dialog.tsx'
 export { useOnPage } from './context.tsx'
 export { useDebouncedSearch } from './editors/useDebouncedSearch.ts'
-export { escapeHtml } from './editors/InlineText.tsx'
+export { ApplyBar, EditorPopover, useDraft } from './editors/kit.tsx'
+export { canEdit, defineEditor } from './registry.ts'
 export {
   HIDDEN,
   UI,
@@ -22,6 +25,7 @@ export {
 } from './dom.ts'
 export { useTrackElement, useLayoutTick, notifyLayout } from './layout.ts'
 export { useEvent } from './useEvent.ts'
-export { sanitizeHtml } from './sanitize.ts'
-export type { EditorRegistry, FieldEditorDef, FieldEditorProps } from './types.ts'
+export { escapeHtml, sanitizeHtml } from './sanitize.ts'
+export type { EditorRegistry, FieldEditorDef, FieldEditorProps, GhostInput } from './types.ts'
+export type { FieldOf } from '@payload-onpage/core'
 export type { Translate } from './messages.ts'

package/src/editors/CheckboxEditor.tsx

@@ -1,23 +1,22 @@
 'use client'
 
+import type { ScalarField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { EditorPopover } from './kit.tsx'
 
-export function CheckboxEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
+/** A checkbox value (unset falls back to the field's default). */
+export const checkedOf = (raw: unknown, field: { defaultValue?: unknown }): boolean =>
+  Boolean(raw ?? field.defaultValue)
+
+export function CheckboxEditor(props: FieldEditorProps<ScalarField, boolean>) {
+  const { field, value, commit, close } = props
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      testId="onpage-checkbox"
-    >
+    <EditorPopover props={props} testId="onpage-checkbox">
       <label className="po-check">
         <input
           type="checkbox"
           data-autofocus
-          checked={Boolean(value ?? field.defaultValue)}
+          checked={value}
           onChange={(e) => {
             commit(e.target.checked)
             close()
@@ -26,6 +25,6 @@ export function CheckboxEditor({ field, value, element, commit, close, t }: Fiel
         />
         {field.label}
       </label>
-    </Dialog>
+    </EditorPopover>
   )
 }

package/src/editors/ColorEditor.tsx

@@ -1,41 +1,23 @@
 'use client'
 
-import { useState } from 'react'
+import type { ScalarField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { ApplyBar, EditorPopover, useDraft } from './kit.tsx'
 
 const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
 
+export const toColor = (raw: unknown): string | null =>
+  typeof raw === 'string' && raw ? raw : null
+
 /** Hex color with a native picker. Use it from a text field: `admin.custom.onpage.editor: 'color'`. */
-export function ColorEditor({
-  field,
-  value,
-  element,
-  commit,
-  preview,
-  close,
-  live,
-  t,
-}: FieldEditorProps) {
-  const [draft, setDraft] = useState(typeof value === 'string' ? value : '')
-  const change = (v: string) => {
-    setDraft(v)
-    if (live && HEX.test(v)) preview(v)
-  }
-  const save = () => {
-    if (draft !== (value ?? '') && (draft === '' || HEX.test(draft))) commit(draft || null)
-    close()
-  }
+export function ColorEditor(props: FieldEditorProps<ScalarField, string | null>) {
+  const { field, t } = props
+  const { draft, change, save, onKeyDown } = useDraft(props, {
+    format: (v) => v ?? '',
+    parse: (d) => (d === '' ? null : HEX.test(d) ? d : undefined),
+  })
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      width={260}
-      testId="onpage-color"
-    >
+    <EditorPopover props={props} testId="onpage-color" width={260}>
       <div className="po-row po-inline-row">
         <input
           type="color"
@@ -52,13 +34,11 @@ export function ColorEditor({
           placeholder="#1e40af"
           aria-invalid={draft !== '' && !HEX.test(draft)}
           onChange={(e) => change(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && save()}
+          onKeyDown={onKeyDown}
           data-testid="onpage-color-input"
         />
       </div>
-      <button type="button" className="po-btn po-primary" onClick={save} data-testid="onpage-apply">
-        {t('common.apply')}
-      </button>
-    </Dialog>
+      <ApplyBar onApply={save} t={t} />
+    </EditorPopover>
   )
 }

package/src/editors/DateEditor.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import { useState } from 'react'
+import type { DateField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { ApplyBar, EditorPopover, useDraft } from './kit.tsx'
 
 /** Payload stores dates as ISO strings; the input works in local time. */
-const toLocalInput = (iso: unknown, withTime: boolean): string => {
-  if (typeof iso !== 'string' || !iso) return ''
+const toLocalInput = (iso: string | null, withTime: boolean): string => {
+  if (!iso) return ''
   const d = new Date(iso)
   if (Number.isNaN(d.getTime())) return ''
   const pad = (n: number) => String(n).padStart(2, '0')
@@ -14,24 +14,19 @@ const toLocalInput = (iso: unknown, withTime: boolean): string => {
   return withTime ? `${date}T${pad(d.getHours())}:${pad(d.getMinutes())}` : date
 }
 
-export function DateEditor({ field, value, element, commit, close, t }: FieldEditorProps) {
+export const toIsoDate = (raw: unknown): string | null =>
+  typeof raw === 'string' && raw ? raw : null
+
+export function DateEditor(props: FieldEditorProps<DateField, string | null>) {
+  const { field, t } = props
   const withTime = field.pickerAppearance === 'dayAndTime' || field.pickerAppearance === 'timeOnly'
-  const [draft, setDraft] = useState(toLocalInput(value, withTime))
-  const save = () => {
+  const { draft, change, save, onKeyDown, clear } = useDraft(props, {
+    format: (v) => toLocalInput(v, withTime),
     // Date-only values are stored at local noon, which survives any timezone shift (as Payload's picker does).
-    const next = draft ? new Date(withTime ? draft : `${draft}T12:00:00`).toISOString() : null
-    if (next !== value) commit(next)
-    close()
-  }
+    parse: (d) => (d ? new Date(withTime ? d : `${d}T12:00:00`).toISOString() : null),
+  })
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      testId="onpage-date"
-    >
+    <EditorPopover props={props} testId="onpage-date">
       <div className="po-row">
         <input
           className="po-input"
@@ -39,26 +34,12 @@ export function DateEditor({ field, value, element, commit, close, t }: FieldEdi
           aria-label={field.label}
           data-autofocus
           value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && save()}
+          onChange={(e) => change(e.target.value)}
+          onKeyDown={onKeyDown}
           data-testid="onpage-date-input"
         />
       </div>
-      <div className="po-actions">
-        <button
-          type="button"
-          className="po-btn po-primary"
-          onClick={save}
-          data-testid="onpage-apply"
-        >
-          {t('common.apply')}
-        </button>
-        {!field.required && (
-          <button type="button" className="po-btn" onClick={() => setDraft('')}>
-            {t('common.clear')}
-          </button>
-        )}
-      </div>
-    </Dialog>
+      <ApplyBar onApply={save} onClear={field.required ? undefined : clear} t={t} />
+    </EditorPopover>
   )
 }

package/src/editors/InlineText.tsx

@@ -11,13 +11,12 @@
  * cancels.
  */
 import { useLayoutEffect, useRef } from 'react'
-import { toText } from '@payload-onpage/core'
+import type { ScalarField } from '@payload-onpage/core'
 import { copyTypography, HIDDEN, placeCaret, placeOver, typographyOf } from '../dom.ts'
 import { useTrackElement } from '../layout.ts'
 import type { FieldEditorProps } from '../types.ts'
 
-export const escapeHtml = (s: string): string =>
-  s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]!)
+import { escapeHtml } from '../sanitize.ts'
 
 export function InlineText({
   field,
@@ -30,10 +29,10 @@ export function InlineText({
   live,
   point,
   t,
-}: FieldEditorProps) {
+}: FieldEditorProps<ScalarField, string>) {
   const multiline = field.type === 'textarea'
   const ref = useRef<HTMLDivElement>(null)
-  const initial = useRef(toText(value))
+  const initial = useRef(value)
   const done = useRef(false)
 
   useLayoutEffect(() => {

package/src/editors/NumberEditor.tsx

@@ -1,41 +1,22 @@
 'use client'
 
-import { toText } from '@payload-onpage/core'
-import { useState } from 'react'
+import type { NumberField } from '@payload-onpage/core'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { ApplyBar, EditorPopover, useDraft } from './kit.tsx'
+
+export const toNumber = (raw: unknown): number | null =>
+  typeof raw === 'number' && Number.isFinite(raw) ? raw : null
 
 /** Number input, with a slider when the field has min and max. */
-export function NumberEditor({
-  field,
-  value,
-  element,
-  commit,
-  preview,
-  close,
-  live,
-  t,
-}: FieldEditorProps) {
-  const [draft, setDraft] = useState(toText(value))
+export function NumberEditor(props: FieldEditorProps<NumberField, number | null>) {
+  const { field, t } = props
+  const { draft, change, save, onKeyDown } = useDraft(props, {
+    format: (v) => (v === null ? '' : String(v)),
+    parse: (d) => (d === '' ? null : Number.isNaN(Number(d)) ? undefined : Number(d)),
+  })
   const slider = field.min !== undefined && field.max !== undefined
-  const save = () => {
-    const next = draft === '' ? null : Number(draft)
-    if (next !== value && (next === null || !Number.isNaN(next))) commit(next)
-    close()
-  }
-  const change = (v: string) => {
-    setDraft(v)
-    if (live && v !== '' && !Number.isNaN(Number(v))) preview(Number(v))
-  }
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      testId="onpage-number"
-    >
+    <EditorPopover props={props} testId="onpage-number">
       <div className="po-row">
         {slider && (
           <input
@@ -57,13 +38,11 @@ export function NumberEditor({
           max={field.max}
           value={draft}
           onChange={(e) => change(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && save()}
+          onKeyDown={onKeyDown}
           data-testid="onpage-number-input"
         />
       </div>
-      <button type="button" className="po-btn po-primary" onClick={save} data-testid="onpage-apply">
-        {t('common.apply')}
-      </button>
-    </Dialog>
+      <ApplyBar onApply={save} t={t} />
+    </EditorPopover>
   )
 }

package/src/editors/RelationshipEditor.tsx

@@ -5,43 +5,32 @@
  * (Payload REST, so access control applies) and pick one, or several for
  * hasMany. Polymorphic fields get a collection switch and store `{ relationTo, value }`.
  */
-import { relationId, relationTitle, type SearchHit } from '@payload-onpage/core'
+import {
+  asList,
+  relationId,
+  relationTitle,
+  type RelationField,
+  type SearchHit,
+} from '@payload-onpage/core'
 import { useCallback, useState } from 'react'
 import { useOnPage } from '../context.tsx'
 import type { FieldEditorProps } from '../types.ts'
-import { Dialog } from '../ui/Dialog.tsx'
+import { EditorPopover } from './kit.tsx'
 import { useDebouncedSearch } from './useDebouncedSearch.ts'
 
-export function RelationshipEditor({
-  docKey,
-  field,
-  value,
-  element,
-  commit,
-  close,
-  t,
-}: FieldEditorProps) {
+export function RelationshipEditor(props: FieldEditorProps<RelationField>) {
+  const { docKey, field, value, commit, close, t } = props
   const { session, snap } = useOnPage()
-  const targets = Array.isArray(field.relationTo)
-    ? field.relationTo
-    : field.relationTo
-      ? [field.relationTo]
-      : []
+  const targets = Array.isArray(field.relationTo) ? field.relationTo : [field.relationTo]
   const poly = Array.isArray(field.relationTo)
   const [collection, setCollection] = useState(targets[0] ?? '')
   const relations = snap.docs[docKey]?.schema?.relations ?? {}
   const titleField = relations[collection]?.titleField
   const many = !!field.hasMany
-  const current: unknown[] = many
-    ? Array.isArray(value)
-      ? value
-      : []
-    : value == null
-      ? []
-      : [value]
+  const current = asList(value, many)
   const ds = session.dataSource
   const search = useCallback(
-    async (query: string) =>
+    async (query: string, _page: number, signal: AbortSignal) =>
       ds.search
         ? {
             items: await ds.search(collection, {
@@ -49,13 +38,14 @@ export function RelationshipEditor({
               titleField,
               locale: session.locale,
               limit: 12,
+              signal,
             }),
             hasMore: false,
           }
         : { items: [] as SearchHit[], hasMore: false },
     [ds, collection, titleField, session.locale],
   )
-  const results = useDebouncedSearch<SearchHit>(ds.search ? search : null, [])
+  const results = useDebouncedSearch<SearchHit>(ds.search ? search : null)
 
   const wrap = (hit: SearchHit): unknown =>
     poly ? { relationTo: collection, value: hit.doc } : hit.doc
@@ -75,15 +65,7 @@ export function RelationshipEditor({
   const remove = (i: number) => commit(many ? current.filter((_, j) => j !== i) : null)
 
   return (
-    <Dialog
-      variant="popover"
-      anchor={element}
-      title={field.label}
-      onClose={close}
-      t={t}
-      width={320}
-      testId="onpage-relationship"
-    >
+    <EditorPopover props={props} testId="onpage-relationship" width={320}>
       {current.map((v, i) => (
         <div className="po-rel-item" key={`${String(relationId(v))}-${i}`}>
           {relationTitle(v, titleField)}
@@ -91,7 +73,7 @@ export function RelationshipEditor({
             <button
               type="button"
               onClick={() => remove(i)}
-              aria-label={`${t('common.remove')} ${relationTitle(v, titleField)}`}
+              aria-label={t('common.removeItem', { item: relationTitle(v, titleField) })}
             >
               ✕
             </button>
@@ -148,6 +130,6 @@ export function RelationshipEditor({
           </div>
         </>
       )}
-    </Dialog>
+    </EditorPopover>
   )
 }