@open-mercato/documents 0.6.8-develop.7016.1.4ed7b1e49d

package/src/modules/documents/backend/documents/[id]/EditorToolbar.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from 'react'
+import type { Editor } from '@tiptap/core'
+import { useEditorState } from '@tiptap/react'
+import {
+  AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code2, Database, Heading1, Heading2,
+  Heading3, ImagePlus, Italic, Link2, List, ListOrdered, ListTodo, Loader2, PanelLeft, Pilcrow,
+  Redo2, Strikethrough, Table2, Underline, Undo2,
+} from 'lucide-react'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { EditorColorTools } from './EditorColorTools'
+
+type ToolbarAction = { key: string; label: string; icon: React.ReactNode; active?: boolean; disabled?: boolean; run: () => void }
+
+const EMPTY_EDITOR_STATE = {
+  canUndo: false,
+  canRedo: false,
+  paragraph: false,
+  heading1: false,
+  heading2: false,
+  heading3: false,
+  alignLeft: false,
+  alignCenter: false,
+  alignRight: false,
+  alignJustify: false,
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false,
+  bulletList: false,
+  orderedList: false,
+  taskList: false,
+  link: false,
+  codeBlock: false,
+}
+
+function ToolbarButtons({ actions }: { actions: ToolbarAction[] }) {
+  return <>{actions.map((action) => <IconButton className="shrink-0" key={action.key} type="button" variant={action.active ? 'outline' : 'ghost'} aria-label={action.label} aria-pressed={action.active ?? false} title={action.label} disabled={action.disabled} onClick={action.run}>{action.icon}</IconButton>)}</>
+}
+
+export function EditorToolbar({ editor, disabled, outlineOpen, uploading, onToggleOutline, onOpenEntityPicker, onOpenLink, onImage }: {
+  editor: Editor | null
+  disabled: boolean
+  outlineOpen: boolean
+  uploading: boolean
+  onToggleOutline: () => void
+  onOpenEntityPicker: () => void
+  onOpenLink: () => void
+  onImage: () => void
+}) {
+  const t = useT()
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: current }) => current ? {
+      canUndo: current.can().undo(),
+      canRedo: current.can().redo(),
+      paragraph: current.isActive('paragraph'),
+      heading1: current.isActive('heading', { level: 1 }),
+      heading2: current.isActive('heading', { level: 2 }),
+      heading3: current.isActive('heading', { level: 3 }),
+      alignLeft: current.isActive({ textAlign: 'left' }),
+      alignCenter: current.isActive({ textAlign: 'center' }),
+      alignRight: current.isActive({ textAlign: 'right' }),
+      alignJustify: current.isActive({ textAlign: 'justify' }),
+      bold: current.isActive('bold'),
+      italic: current.isActive('italic'),
+      underline: current.isActive('underline'),
+      strike: current.isActive('strike'),
+      bulletList: current.isActive('bulletList'),
+      orderedList: current.isActive('orderedList'),
+      taskList: current.isActive('taskList'),
+      link: current.isActive('link'),
+      codeBlock: current.isActive('codeBlock'),
+    } : EMPTY_EDITOR_STATE,
+  }) ?? EMPTY_EDITOR_STATE
+  const command = (run: (editor: Editor) => void) => () => { if (editor && !disabled) run(editor) }
+  const actions: ToolbarAction[] = [
+    { key: 'undo', label: t('documents.editor.toolbar.undo'), icon: <Undo2 />, disabled: disabled || !editorState.canUndo, run: command((current) => { current.chain().focus().undo().run() }) },
+    { key: 'redo', label: t('documents.editor.toolbar.redo'), icon: <Redo2 />, disabled: disabled || !editorState.canRedo, run: command((current) => { current.chain().focus().redo().run() }) },
+    { key: 'outline', label: t('documents.editor.toolbar.outline'), icon: <PanelLeft />, active: outlineOpen, disabled: !editor, run: onToggleOutline },
+    { key: 'paragraph', label: t('documents.editor.toolbar.paragraph'), icon: <Pilcrow />, active: editorState.paragraph, disabled, run: command((current) => { current.chain().focus().setParagraph().run() }) },
+    ...([1, 2, 3] as const).map((level) => ({ key: `h${level}`, label: t(`documents.editor.toolbar.heading${level}`), icon: level === 1 ? <Heading1 /> : level === 2 ? <Heading2 /> : <Heading3 />, active: editorState[`heading${level}`], disabled, run: command((current) => { current.chain().focus().toggleHeading({ level }).run() }) })),
+    { key: 'left', label: t('documents.editor.toolbar.alignLeft'), icon: <AlignLeft />, active: editorState.alignLeft, disabled, run: command((current) => { current.chain().focus().setTextAlign('left').run() }) },
+    { key: 'center', label: t('documents.editor.toolbar.alignCenter'), icon: <AlignCenter />, active: editorState.alignCenter, disabled, run: command((current) => { current.chain().focus().setTextAlign('center').run() }) },
+    { key: 'right', label: t('documents.editor.toolbar.alignRight'), icon: <AlignRight />, active: editorState.alignRight, disabled, run: command((current) => { current.chain().focus().setTextAlign('right').run() }) },
+    { key: 'justify', label: t('documents.editor.toolbar.alignJustify'), icon: <AlignJustify />, active: editorState.alignJustify, disabled, run: command((current) => { current.chain().focus().setTextAlign('justify').run() }) },
+    { key: 'bold', label: t('documents.editor.toolbar.bold'), icon: <Bold />, active: editorState.bold, disabled, run: command((current) => { current.chain().focus().toggleBold().run() }) },
+    { key: 'italic', label: t('documents.editor.toolbar.italic'), icon: <Italic />, active: editorState.italic, disabled, run: command((current) => { current.chain().focus().toggleItalic().run() }) },
+    { key: 'underline', label: t('documents.editor.toolbar.underline'), icon: <Underline />, active: editorState.underline, disabled, run: command((current) => { current.chain().focus().toggleMark('underline').run() }) },
+    { key: 'strike', label: t('documents.editor.toolbar.strike'), icon: <Strikethrough />, active: editorState.strike, disabled, run: command((current) => { current.chain().focus().toggleStrike().run() }) },
+    { key: 'bullet', label: t('documents.editor.toolbar.bulletList'), icon: <List />, active: editorState.bulletList, disabled, run: command((current) => { current.chain().focus().toggleBulletList().run() }) },
+    { key: 'ordered', label: t('documents.editor.toolbar.orderedList'), icon: <ListOrdered />, active: editorState.orderedList, disabled, run: command((current) => { current.chain().focus().toggleOrderedList().run() }) },
+    { key: 'tasks', label: t('documents.editor.toolbar.taskList'), icon: <ListTodo />, active: editorState.taskList, disabled, run: command((current) => { current.chain().focus().toggleTaskList().run() }) },
+    { key: 'table', label: t('documents.editor.toolbar.table'), icon: <Table2 />, disabled, run: command((current) => { current.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }) },
+    { key: 'record', label: t('documents.editor.toolbar.insertRecord'), icon: <Database />, disabled, run: onOpenEntityPicker },
+    { key: 'link', label: t('documents.editor.toolbar.link'), icon: <Link2 />, active: editorState.link, disabled, run: onOpenLink },
+    { key: 'image', label: t('documents.editor.toolbar.image'), icon: uploading ? <Loader2 className="animate-spin" /> : <ImagePlus />, disabled: disabled || uploading, run: onImage },
+    { key: 'code', label: t('documents.editor.toolbar.codeBlock'), icon: <Code2 />, active: editorState.codeBlock, disabled, run: command((current) => { current.chain().focus().toggleCodeBlock().run() }) },
+  ]
+  return (
+    <div className="flex max-w-full flex-nowrap items-center gap-1 overflow-x-auto border-b border-border px-2 py-2 overscroll-x-contain sm:px-3" role="toolbar" aria-label={t('documents.editor.toolbar.label')}>
+      <ToolbarButtons actions={actions} />
+      <EditorColorTools editor={editor} disabled={disabled} />
+    </div>
+  )
+}

package/src/modules/documents/backend/documents/[id]/ExportMenu.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from 'react'
+import { ChevronDown, FileDown, FileText } from 'lucide-react'
+import type { Editor } from '@tiptap/core'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type ExportMenuProps = {
+  documentId: string
+  editor: Editor | null
+}
+
+type ExportFormat = 'docx' | 'pdf'
+
+function filenameFromDisposition(disposition: string | null, format: ExportFormat): string {
+  const encoded = disposition?.match(/filename\*=UTF-8''([^;]+)/i)?.[1]
+  if (encoded) {
+    try { return decodeURIComponent(encoded) } catch { /* use the safe fallback */ }
+  }
+  const quoted = disposition?.match(/filename="([^"]+)"/i)?.[1]
+  return quoted || `document.${format}`
+}
+
+export type DocxPaginationSnapshot = { contentHtml: string; pageBreakMarker: string }
+
+export function buildDocxPaginationSnapshot(editor: Editor | null): DocxPaginationSnapshot | null {
+  if (!editor || editor.isDestroyed) return null
+  const root = editor.view.dom.cloneNode(true) as HTMLElement
+  const pageBreaks = root.querySelectorAll<HTMLElement>('[data-document-page-break]')
+  if (pageBreaks.length === 0) return null
+  const pageBreakMarker = `OM_DOCX_PAGE_BREAK_${crypto.randomUUID()}`
+  pageBreaks.forEach((pageBreak) => {
+    const marker = document.createElement('p')
+    marker.textContent = pageBreakMarker
+    pageBreak.replaceWith(marker)
+  })
+  root.querySelectorAll('.collaboration-carets__caret, .ProseMirror-yjs-selection')
+    .forEach((node) => node.remove())
+  return { contentHtml: root.innerHTML, pageBreakMarker }
+}
+
+export async function downloadDocumentExport(
+  documentId: string,
+  format: ExportFormat,
+  snapshot: DocxPaginationSnapshot | null,
+  errorMessage: string,
+): Promise<void> {
+  const hasSnapshot = format === 'docx' && snapshot !== null
+  // Intentionally outside useGuardedMutation: export is read-shaped (no record is
+  // mutated); the POST variant only carries the client pagination snapshot payload.
+  const call = await apiCallOrThrow<Blob>(
+    `/api/documents/${encodeURIComponent(documentId)}/export?format=${format}`,
+    {
+      method: hasSnapshot ? 'POST' : 'GET',
+      credentials: 'same-origin',
+      headers: {
+        'x-om-forbidden-redirect': '0',
+        'x-om-unauthorized-redirect': '0',
+        ...(hasSnapshot ? { 'content-type': 'application/json' } : {}),
+      },
+      ...(hasSnapshot ? { body: JSON.stringify(snapshot) } : {}),
+    },
+    { parse: (response) => response.blob(), errorMessage },
+  )
+  const response = call.response
+  const expectedContentType = format === 'docx'
+    ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+    : 'application/pdf'
+  const contentType = response.headers.get('content-type')?.split(';', 1)[0]?.trim().toLowerCase()
+  if (contentType !== expectedContentType || !call.result) throw new Error(errorMessage)
+
+  const blob = call.result
+  const objectUrl = URL.createObjectURL(blob)
+  try {
+    const link = document.createElement('a')
+    link.href = objectUrl
+    link.download = filenameFromDisposition(response.headers.get('content-disposition'), format)
+    document.body.append(link)
+    link.click()
+    link.remove()
+  } finally {
+    URL.revokeObjectURL(objectUrl)
+  }
+}
+
+export function ExportMenu({ documentId, editor }: ExportMenuProps) {
+  const t = useT()
+  const label = t('documents.actions.export')
+  const download = React.useCallback((format: ExportFormat) => {
+    const snapshot = format === 'docx' ? buildDocxPaginationSnapshot(editor) : null
+    void downloadDocumentExport(documentId, format, snapshot, t('documents.export.error')).catch((error) => {
+      flash(error instanceof Error ? error.message : t('documents.export.runtimeUnavailable'), 'error')
+    })
+  }, [documentId, editor, t])
+  const items = React.useMemo(() => [
+    {
+      id: 'docx',
+      label: t('documents.export.docx'),
+      icon: FileText,
+      onSelect: () => download('docx'),
+    },
+    {
+      id: 'pdf',
+      label: t('documents.export.pdf'),
+      icon: FileDown,
+      onSelect: () => download('pdf'),
+    },
+  ], [download, t])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" size="sm" aria-label={label} aria-haspopup="menu">
+          {label}
+          <ChevronDown className="size-3.5" aria-hidden="true" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent role="menu" align="end" className="w-52 min-w-52 p-1">
+        {items.map((item) => {
+          const Icon = item.icon
+          return (
+            <PopoverClose key={item.id} asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                role="menuitem"
+                className="h-auto min-h-8 w-full justify-start py-1.5 text-left leading-snug whitespace-normal"
+                onClick={item.onSelect}
+              >
+                <Icon className="size-4" aria-hidden="true" />
+                {item.label}
+              </Button>
+            </PopoverClose>
+          )
+        })}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/modules/documents/backend/documents/[id]/MentionPicker.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from 'react'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useMentionPicker } from './useMentionPicker'
+
+export {
+  buildMentionPrincipalUrl,
+  nextMentionIndex,
+  readMentionUserItems,
+} from './useMentionPicker'
+
+type MentionPickerProps = {
+  documentId: string
+  onPick: (user: { id: string; name: string }) => void
+  disabled?: boolean
+}
+
+export function MentionPicker({ documentId, onPick, disabled = false }: MentionPickerProps) {
+  const t = useT()
+  const reactId = React.useId()
+  const inputId = `documents-mention-input-${documentId}-${reactId}`
+  const listId = `documents-mention-list-${documentId}-${reactId}`
+  const model = useMentionPicker({
+    documentId,
+    onPick,
+    disabled,
+    fallbackLabel: t('documents.users.unknown'),
+  })
+
+  return (
+    <div className="relative space-y-2">
+      <Label htmlFor={inputId}>{t('documents.mentions.placeholder')}</Label>
+      <Input
+        id={inputId}
+        value={model.query}
+        onChange={(event) => model.onQueryChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (model.isDisabled) return
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            event.stopPropagation()
+            model.dismiss()
+            return
+          }
+          if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault()
+            event.stopPropagation()
+            model.moveActive(event.key === 'ArrowDown' ? 1 : -1)
+            return
+          }
+          if (event.key === 'Enter' && model.open && model.resultsAreCurrent && model.activeIndex >= 0) {
+            const user = model.users[model.activeIndex]
+            if (!user) return
+            event.preventDefault()
+            event.stopPropagation()
+            model.pick(user, model.resultQuery)
+          }
+        }}
+        placeholder={t('documents.mentions.placeholder')}
+        disabled={model.isDisabled}
+        role="combobox"
+        aria-expanded={model.open && !model.isDisabled}
+        aria-controls={listId}
+        aria-autocomplete="list"
+        aria-activedescendant={
+          model.resultsAreCurrent && model.activeIndex >= 0
+            ? `${listId}-option-${model.activeIndex}`
+            : undefined
+        }
+      />
+      {model.unavailable ? (
+        <p role="alert" className="text-sm text-muted-foreground">
+          {t('documents.mentions.unavailable')}
+        </p>
+      ) : null}
+      {model.open && !model.isDisabled ? (
+        <div
+          id={listId}
+          role={
+            !model.isLoading
+            && !model.hasError
+            && model.resultsAreCurrent
+            && model.users.length > 0
+              ? 'listbox'
+              : undefined
+          }
+          className="absolute z-popover max-h-64 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 shadow-lg"
+        >
+          {model.isLoading ? (
+            <p role="status" className="px-3 py-2 text-sm text-muted-foreground">
+              {t('documents.mentions.loading')}
+            </p>
+          ) : null}
+          {!model.isLoading && model.hasError ? (
+            <ErrorMessage
+              label={t('documents.mentions.error.search')}
+              action={<Button type="button" size="sm" variant="outline" onClick={model.retry}>{t('documents.actions.retry')}</Button>}
+            />
+          ) : null}
+          {!model.isLoading && !model.hasError && model.hasSearched && model.resultsAreCurrent && model.users.length === 0 ? (
+            <p role="status" className="px-3 py-2 text-sm text-muted-foreground">
+              {t('documents.mentions.noMatches')}
+            </p>
+          ) : null}
+          {!model.isLoading && !model.hasError && model.resultsAreCurrent ? model.users.map((user, index) => (
+            <Button
+              key={user.id}
+              id={`${listId}-option-${index}`}
+              role="option"
+              aria-selected={index === model.activeIndex}
+              type="button"
+              disabled={model.isDisabled}
+              variant={index === model.activeIndex ? 'secondary' : 'ghost'}
+              className="h-auto w-full justify-start px-3 py-2 text-left"
+              onMouseEnter={() => model.activate(index, model.resultQuery)}
+              onClick={() => model.pick(user, model.resultQuery)}
+            >
+              <span className="min-w-0">
+                <span className="block truncate text-sm font-medium">{user.label}</span>
+                {user.secondary ? (
+                  <span className="block truncate text-xs text-muted-foreground">{user.secondary}</span>
+                ) : null}
+              </span>
+            </Button>
+          )) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default MentionPicker

package/src/modules/documents/backend/documents/[id]/OutlinePane.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from 'react'
+import type { Editor } from '@tiptap/core'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+type OutlineHeading = {
+  level: number
+  text: string
+  pos: number
+}
+
+type OutlinePaneProps = {
+  editor: Editor | null
+}
+
+const OUTLINE_REFRESH_DELAY_MS = 300
+
+function collectHeadings(editor: Editor): OutlineHeading[] {
+  const headings: OutlineHeading[] = []
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== 'heading') return
+    const text = node.textContent.trim()
+    if (!text) return
+    const rawLevel = node.attrs.level
+    const level = typeof rawLevel === 'number' && Number.isFinite(rawLevel)
+      ? Math.min(Math.max(rawLevel, 1), 6)
+      : 1
+    headings.push({ level, text, pos })
+  })
+  return headings
+}
+
+function getIndentClass(level: number): string {
+  if (level <= 1) return 'pl-2'
+  if (level === 2) return 'pl-5'
+  return 'pl-8'
+}
+
+export function OutlinePane({ editor }: OutlinePaneProps) {
+  const t = useT()
+  const [headings, setHeadings] = React.useState<OutlineHeading[]>([])
+
+  React.useEffect(() => {
+    if (!editor) {
+      setHeadings([])
+      return
+    }
+
+    let timer: number | null = null
+    const refresh = () => {
+      if (timer !== null) window.clearTimeout(timer)
+      timer = window.setTimeout(() => {
+        timer = null
+        setHeadings(collectHeadings(editor))
+      }, OUTLINE_REFRESH_DELAY_MS)
+    }
+
+    setHeadings(collectHeadings(editor))
+    editor.on('update', refresh)
+    return () => {
+      if (timer !== null) window.clearTimeout(timer)
+      editor.off('update', refresh)
+    }
+  }, [editor])
+
+  const jumpToHeading = React.useCallback((heading: OutlineHeading) => {
+    editor?.chain().focus().setTextSelection(heading.pos + 1).scrollIntoView().run()
+  }, [editor])
+
+  return (
+    <aside className="rounded-lg border border-border bg-card p-3 shadow-sm lg:sticky lg:top-20 lg:w-64 lg:shrink-0">
+      <h2 className="mb-3 text-sm font-semibold text-foreground">{t('documents.editor.outline.title')}</h2>
+      {headings.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{t('documents.editor.outline.empty')}</p>
+      ) : (
+        <nav aria-label={t('documents.editor.outline.title')}>
+          <div className="space-y-1">
+            {headings.map((heading) => (
+              <Button
+                key={`${heading.pos}:${heading.text}`}
+                type="button"
+                size="sm"
+                variant="ghost"
+                className={cn('h-auto w-full justify-start py-1 pr-2 text-left text-sm', getIndentClass(heading.level))}
+                onClick={() => jumpToHeading(heading)}
+              >
+                <span className="truncate">{heading.text}</span>
+              </Button>
+            ))}
+          </div>
+        </nav>
+      )}
+    </aside>
+  )
+}

package/src/modules/documents/backend/documents/[id]/RecordFieldsDialog.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from 'react'
+import { Link2 } from 'lucide-react'
+import type { Editor } from '@tiptap/core'
+import { ErrorMessage, LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { getEntityRegistryEntry } from '../../../lib/entityRegistry'
+import {
+  insertRecordFieldSnapshot,
+  type RecordFieldSnapshot,
+} from '../../../lib/recordFieldInsertion'
+import { readArrayPayload } from '../documentUi'
+import { normalizeRelatedRecord, type RelatedRecord } from './relatedRecordModel'
+
+type LoadState =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'error' }
+  | { status: 'ready'; record: RelatedRecord | null }
+
+type RecordFieldsDialogProps = {
+  documentId: string
+  linkId: string | null
+  editor: Editor | null
+  canInsert: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function RecordFieldsDialog({
+  documentId,
+  linkId,
+  editor,
+  canInsert,
+  onOpenChange,
+}: RecordFieldsDialogProps) {
+  const t = useT()
+  const open = linkId !== null && canInsert
+  const [state, setState] = React.useState<LoadState>({ status: 'idle' })
+  const [selectedFields, setSelectedFields] = React.useState<Set<string>>(() => new Set())
+  const [loadAttempt, setLoadAttempt] = React.useState(0)
+
+  React.useEffect(() => {
+    if (linkId !== null && !canInsert) onOpenChange(false)
+  }, [canInsert, linkId, onOpenChange])
+
+  React.useEffect(() => {
+    if (!open || !linkId) {
+      setState({ status: 'idle' })
+      setSelectedFields(new Set())
+      return
+    }
+    const controller = new AbortController()
+    setState({ status: 'loading' })
+    setSelectedFields(new Set())
+    void apiCall<unknown>(
+      `/api/documents/${encodeURIComponent(documentId)}/links`,
+      { cache: 'no-store', signal: controller.signal },
+    ).then((call) => {
+      if (controller.signal.aborted) return
+      if (!call.ok) {
+        setState({ status: 'error' })
+        return
+      }
+      const record = readArrayPayload(call.result, 'items', 'data')
+        .map((value) => normalizeRelatedRecord(value, t('documents.relatedRecords.restricted')))
+        .find((item): item is RelatedRecord => item?.id === linkId) ?? null
+      setState({ status: 'ready', record })
+    }).catch(() => {
+      if (!controller.signal.aborted) setState({ status: 'error' })
+    })
+    return () => controller.abort()
+  }, [documentId, linkId, loadAttempt, open, t])
+
+  const retry = React.useCallback(() => {
+    setState({ status: 'loading' })
+    setLoadAttempt((current) => current + 1)
+  }, [])
+
+  const fields = React.useMemo<RecordFieldSnapshot[]>(() => {
+    if (state.status !== 'ready' || !state.record?.canOpen) return []
+    const entry = getEntityRegistryEntry(state.record.entityType)
+    if (!entry) return []
+    return entry.tokenFields.flatMap((tokenField) => {
+      const value = state.record?.values[tokenField.field]
+      return value ? [{
+        field: tokenField.field,
+        label: t(tokenField.labelKey),
+        value,
+      }] : []
+    })
+  }, [state, t])
+
+  const selected = React.useMemo(
+    () => fields.filter((field) => selectedFields.has(field.field)),
+    [fields, selectedFields],
+  )
+  const insert = React.useCallback(() => {
+    if (!canInsert || !editor?.isEditable || selected.length === 0) return
+    if (insertRecordFieldSnapshot(editor, selected)) onOpenChange(false)
+  }, [canInsert, editor, onOpenChange, selected])
+  const setOpen = React.useCallback((nextOpen: boolean) => {
+    if (!nextOpen) onOpenChange(false)
+  }, [onOpenChange])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent size="lg" onKeyDown={(event) => {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          onOpenChange(false)
+          return
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+          event.preventDefault()
+          insert()
+        }
+      }}>
+        <DialogHeader>
+          <DialogTitle>{t('documents.relatedRecords.actions.insertData')}</DialogTitle>
+          <DialogDescription>{t('documents.relatedRecords.fields.snapshotDisclosure')}</DialogDescription>
+        </DialogHeader>
+
+        {state.status === 'loading' ? <LoadingMessage label={t('documents.relatedRecords.loading')} /> : null}
+        {state.status === 'error' ? (
+          <ErrorMessage
+            label={t('documents.relatedRecords.error.load')}
+            action={<Button type="button" size="sm" variant="outline" onClick={retry}>{t('documents.actions.retry')}</Button>}
+          />
+        ) : null}
+        {state.status === 'ready' && fields.length === 0 ? (
+          <EmptyState
+            size="sm"
+            variant="subtle"
+            title={t('documents.relatedRecords.fields.empty')}
+            icon={<Link2 className="size-5" />}
+          />
+        ) : null}
+        {state.status === 'ready' && fields.length > 0 ? (
+          <div className="space-y-3">
+            {fields.map((field) => (
+              <CheckboxField
+                key={field.field}
+                label={field.label}
+                description={field.value}
+                checked={selectedFields.has(field.field)}
+                onCheckedChange={(checked) => setSelectedFields((current) => {
+                  const next = new Set(current)
+                  if (checked === true) next.add(field.field)
+                  else next.delete(field.field)
+                  return next
+                })}
+              />
+            ))}
+          </div>
+        ) : null}
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            {t('documents.actions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={insert}
+            disabled={!canInsert || !editor?.isEditable || selected.length === 0}
+          >
+            {t('documents.relatedRecords.fields.insertSelected')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}