@asteby/metacore-runtime-react 34.1.0 → 35.1.0

package/src/color-picker-field.tsx

@@ -0,0 +1,296 @@
+// ColorPickerField — modern popover color control (SV plane + hue + hex).
+// Used by PermissionsManager role dialog and DynamicForm `type: "color"`.
+// Value is always a #rrggbb string (empty → falls back to DEFAULT_HEX visually).
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Pipette } from 'lucide-react'
+import { cn } from '@asteby/metacore-ui/lib'
+import {
+    Button,
+    Input,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@asteby/metacore-ui/primitives'
+
+export const DEFAULT_ROLE_COLOR = '#3b82f6'
+
+export interface ColorPickerFieldProps {
+    value?: string
+    onChange: (hex: string) => void
+    /** Optional label for a11y on the trigger. */
+    'aria-label'?: string
+    className?: string
+    disabled?: boolean
+}
+
+type HSV = { h: number; s: number; v: number }
+
+function clamp(n: number, min: number, max: number) {
+    return Math.min(max, Math.max(min, n))
+}
+
+/** Normalize to #rrggbb or '' if invalid. */
+export function normalizeHex(raw: unknown): string {
+    if (typeof raw !== 'string') return ''
+    let s = raw.trim()
+    if (!s) return ''
+    if (s[0] !== '#') s = `#${s}`
+    if (/^#[0-9a-fA-F]{3}$/.test(s)) {
+        const r = s[1],
+            g = s[2],
+            b = s[3]
+        s = `#${r}${r}${g}${g}${b}${b}`
+    }
+    if (!/^#[0-9a-fA-F]{6}$/.test(s)) return ''
+    return s.toLowerCase()
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    const n = normalizeHex(hex)
+    if (!n) return null
+    return {
+        r: parseInt(n.slice(1, 3), 16),
+        g: parseInt(n.slice(3, 5), 16),
+        b: parseInt(n.slice(5, 7), 16),
+    }
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+    const h = (n: number) =>
+        clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0')
+    return `#${h(r)}${h(g)}${h(b)}`
+}
+
+function rgbToHsv(r: number, g: number, b: number): HSV {
+    r /= 255
+    g /= 255
+    b /= 255
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    const d = max - min
+    let h = 0
+    if (d !== 0) {
+        if (max === r) h = ((g - b) / d) % 6
+        else if (max === g) h = (b - r) / d + 2
+        else h = (r - g) / d + 4
+        h *= 60
+        if (h < 0) h += 360
+    }
+    const s = max === 0 ? 0 : d / max
+    return { h, s, v: max }
+}
+
+function hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {
+    const c = v * s
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+    const m = v - c
+    let rp = 0,
+        gp = 0,
+        bp = 0
+    if (h < 60) [rp, gp, bp] = [c, x, 0]
+    else if (h < 120) [rp, gp, bp] = [x, c, 0]
+    else if (h < 180) [rp, gp, bp] = [0, c, x]
+    else if (h < 240) [rp, gp, bp] = [0, x, c]
+    else if (h < 300) [rp, gp, bp] = [x, 0, c]
+    else [rp, gp, bp] = [c, 0, x]
+    return {
+        r: (rp + m) * 255,
+        g: (gp + m) * 255,
+        b: (bp + m) * 255,
+    }
+}
+
+function hexToHsv(hex: string): HSV {
+    const rgb = hexToRgb(hex) || hexToRgb(DEFAULT_ROLE_COLOR)!
+    return rgbToHsv(rgb.r, rgb.g, rgb.b)
+}
+
+function hsvToHex(hsv: HSV): string {
+    const { r, g, b } = hsvToRgb(hsv.h, hsv.s, hsv.v)
+    return rgbToHex(r, g, b)
+}
+
+function hueCss(h: number): string {
+    const { r, g, b } = hsvToRgb(h, 1, 1)
+    return rgbToHex(r, g, b)
+}
+
+export function ColorPickerField({
+    value,
+    onChange,
+    'aria-label': ariaLabel = 'Color',
+    className,
+    disabled,
+}: ColorPickerFieldProps) {
+    const hex = normalizeHex(value) || DEFAULT_ROLE_COLOR
+    const [open, setOpen] = useState(false)
+    const [hsv, setHsv] = useState<HSV>(() => hexToHsv(hex))
+    const [hexDraft, setHexDraft] = useState(hex)
+    const svRef = useRef<HTMLDivElement>(null)
+    const dragging = useRef(false)
+
+    // Sync from external value when popover closed (or first open).
+    useEffect(() => {
+        if (dragging.current) return
+        const next = normalizeHex(value) || DEFAULT_ROLE_COLOR
+        setHsv(hexToHsv(next))
+        setHexDraft(next)
+    }, [value, open])
+
+    const commit = useCallback(
+        (next: HSV) => {
+            setHsv(next)
+            const out = hsvToHex(next)
+            setHexDraft(out)
+            onChange(out)
+        },
+        [onChange],
+    )
+
+    const setFromPointer = useCallback(
+        (clientX: number, clientY: number) => {
+            const el = svRef.current
+            if (!el) return
+            const rect = el.getBoundingClientRect()
+            const s = clamp((clientX - rect.left) / rect.width, 0, 1)
+            const v = clamp(1 - (clientY - rect.top) / rect.height, 0, 1)
+            commit({ ...hsv, s, v })
+        },
+        [commit, hsv],
+    )
+
+    useEffect(() => {
+        if (!open) return
+        const onMove = (e: PointerEvent) => {
+            if (!dragging.current) return
+            setFromPointer(e.clientX, e.clientY)
+        }
+        const onUp = () => {
+            dragging.current = false
+        }
+        window.addEventListener('pointermove', onMove)
+        window.addEventListener('pointerup', onUp)
+        return () => {
+            window.removeEventListener('pointermove', onMove)
+            window.removeEventListener('pointerup', onUp)
+        }
+    }, [open, setFromPointer])
+
+    const svStyle = useMemo(
+        () => ({
+            background: `
+        linear-gradient(to top, #000, transparent),
+        linear-gradient(to right, #fff, ${hueCss(hsv.h)})
+      `,
+        }),
+        [hsv.h],
+    )
+
+    const applyHexDraft = () => {
+        const n = normalizeHex(hexDraft)
+        if (!n) {
+            setHexDraft(hsvToHex(hsv))
+            return
+        }
+        setHsv(hexToHsv(n))
+        setHexDraft(n)
+        onChange(n)
+    }
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    disabled={disabled}
+                    aria-label={ariaLabel}
+                    className={cn(
+                        'h-10 w-full justify-start gap-3 px-2.5 font-normal',
+                        className,
+                    )}
+                >
+                    <span
+                        className="h-6 w-6 shrink-0 rounded-md border border-black/10 shadow-sm ring-1 ring-black/5 dark:border-white/10"
+                        style={{ background: hex }}
+                        aria-hidden
+                    />
+                    <span className="font-mono text-sm uppercase tracking-wide text-foreground">
+                        {hex}
+                    </span>
+                    <Pipette className="ml-auto h-3.5 w-3.5 text-muted-foreground" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[260px] p-3" align="start">
+                <div className="flex flex-col gap-3">
+                    <div
+                        ref={svRef}
+                        role="slider"
+                        aria-label="Saturación y brillo"
+                        tabIndex={0}
+                        className="relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-lg border border-border/60"
+                        style={svStyle}
+                        onPointerDown={(e) => {
+                            dragging.current = true
+                            ;(e.target as HTMLElement).setPointerCapture?.(e.pointerId)
+                            setFromPointer(e.clientX, e.clientY)
+                        }}
+                    >
+                        <span
+                            className="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md ring-1 ring-black/30"
+                            style={{
+                                left: `${hsv.s * 100}%`,
+                                top: `${(1 - hsv.v) * 100}%`,
+                                background: hsvToHex(hsv),
+                            }}
+                        />
+                    </div>
+
+                    <div className="flex flex-col gap-1.5">
+                        <label className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                            Tono
+                        </label>
+                        <input
+                            type="range"
+                            min={0}
+                            max={360}
+                            step={1}
+                            value={Math.round(hsv.h)}
+                            aria-label="Tono"
+                            onChange={(e) =>
+                                commit({ ...hsv, h: Number(e.target.value) })
+                            }
+                            className="h-3 w-full cursor-pointer appearance-none rounded-full"
+                            style={{
+                                background:
+                                    'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',
+                            }}
+                        />
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <span
+                            className="h-9 w-9 shrink-0 rounded-md border border-black/10 shadow-inner ring-1 ring-black/5"
+                            style={{ background: hsvToHex(hsv) }}
+                            aria-hidden
+                        />
+                        <Input
+                            value={hexDraft}
+                            spellCheck={false}
+                            aria-label="Hexadecimal"
+                            className="h-9 font-mono uppercase"
+                            onChange={(e) => setHexDraft(e.target.value)}
+                            onBlur={applyHexDraft}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault()
+                                    applyHexDraft()
+                                }
+                            }}
+                        />
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}

package/src/dialogs/dynamic-record.tsx

@@ -9,7 +9,7 @@
 // flows through <ApiProvider> from runtime-react. Host-specific runtime values —
 // the image-url resolver and the org IANA timezone — are passed as props so the
 // SDK stays transport- and host-agnostic.
-import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { ModelSchema } from './types'
 
@@ -53,9 +53,7 @@ import { es } from 'date-fns/locale'
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon, ScanLine } from 'lucide-react'
 import { BarcodeScanner } from '../barcode-scanner'
 import { useApi } from '../api-context'
-import { toastServerError, extractFieldErrors, localizeFieldErrorMap, type Translate } from '../server-error'
-import { validateValues, bagHasErrors } from '../validator'
-import { validationCatalog } from '../validation-catalog'
+import { toastServerError, extractFieldErrors, localizeFieldIssue } from '../server-error'
 import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field'
 import { DynamicRelations } from '../dynamic-relations'
 import { useOptionsResolver, type ResolvedOption } from '../use-options-resolver'
@@ -421,6 +419,24 @@ function isRelationField(field: FieldDef): boolean {
     )
 }
 
+// looksLikeForeignKey — true only for real FKs. A bare `*_id` suffix is NOT
+// enough: columns like `external_id`, `trace_id`, or `invoice_uid` are plain
+// text identifiers from a PAC/provider, not belongs_to relations. Treating them
+// as relations rendered an InitialsAvatar ("6" chip next to "6a8c…") and made
+// fiscal detail modals look broken.
+function looksLikeForeignKey(field: FieldDef): boolean {
+    if (isRelationField(field)) return true
+    if (typeof field.key !== 'string' || !field.key.endsWith('_id')) return false
+    const t = String(field.type || '').toLowerCase()
+    return (
+        t === 'uuid' ||
+        t === 'search' ||
+        t === 'relation' ||
+        t === 'dynamic_select' ||
+        t === 'belongs_to'
+    )
+}
+
 function formatDisplayValue(rawValue: any, field: FieldDef): string {
     // Unset nullable FK serialized as the nil UUID renders as empty, not zeros.
     const value = normalizeNilUuid(rawValue)
@@ -544,12 +560,6 @@ export function stripHiddenFieldValues(
     return out
 }
 
-function toastValidationFailed(t: Translate, lang: string, localized: Record<string, string>) {
-    toast.error(t('validation.failed', { defaultValue: validationCatalog(lang).failed }), {
-        description: Object.values(localized).filter(Boolean).join('\n'),
-    })
-}
-
 export function DynamicRecordDialog({
     open,
     onOpenChange,
@@ -573,12 +583,7 @@ export function DynamicRecordDialog({
     onChange,
 }: DynamicRecordDialogProps) {
     const api = useApi()
-    const { t, i18n } = useTranslation()
-    // Unique per dialog instance. The footer submit lives OUTSIDE <form>, so
-    // it binds via `form={id}`. A hardcoded id made nested create (product +
-    // "Crear categoría") submit the PARENT form — toast "Revisa los campos
-    // marcados" with no marks on the inner modal.
-    const formId = useId()
+    const { t } = useTranslation()
     const [modalMeta, setModalMeta] = useState<ModalMetadata | null>(
         schema ? (schema as ModalMetadata) : null,
     )
@@ -779,26 +784,25 @@ export function DynamicRecordDialog({
     // with no matching form field).
     const labelForKey = (key: string): string => {
         const f = (modalMeta?.fields ?? []).find(x => x.key === key)
-        if (f?.label) return t(f.label, { defaultValue: f.label })
+        if (f?.label) return f.label
         return key.replace(/[._-]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
     }
 
-    const lang = i18n.language
-
     // Turn a failed submit (422 `errors` map, or a bare `{errors}` body) into
     // inline field errors + a summary toast. When there is no field map, fall
     // back to the existing single cause-carrying toast.
     const handleSubmitError = (err: unknown) => {
         const map = extractFieldErrors(err)
         if (map) {
-            const labels: Record<string, string> = {}
-            for (const f of modalMeta?.fields ?? []) labels[f.key] = labelForKey(f.key)
-            const localized = localizeFieldErrorMap(map, t, { labels, language: lang })
-            setFieldErrors(localized)
-            toastValidationFailed(t, lang, localized)
+            const next: Record<string, string> = {}
+            for (const [key, issues] of Object.entries(map)) {
+                next[key] = localizeFieldIssue(issues[0], labelForKey(key), t)
+            }
+            setFieldErrors(next)
+            toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }))
             return
         }
-        toastServerError(err, { t, language: lang, fallback: t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }) })
+        toastServerError(err, { t, fallback: t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }) })
     }
 
     const handleSubmit = async (e?: React.FormEvent) => {
@@ -811,14 +815,15 @@ export function DynamicRecordDialog({
             // fields are gated: a field hidden by its `visible_when` predicate
             // must not block submit even when it is declared required (matching
             // the render, which drops it via the same filter).
-            const visible = filterVisibleFields(modalMeta.fields, mode, formValues)
-            const bag = validateValues(visible as ActionFieldDef[], formValues)
-            if (bagHasErrors(bag)) {
-                const labels: Record<string, string> = {}
-                for (const f of visible) labels[f.key] = t(f.label, { defaultValue: f.label })
-                const localized = localizeFieldErrorMap(bag, t, { labels, language: lang })
-                setFieldErrors(localized)
-                toastValidationFailed(t, lang, localized)
+            const missing: Record<string, string> = {}
+            for (const field of filterVisibleFields(modalMeta.fields, mode, formValues)) {
+                if (field.required && !formValues[field.key] && formValues[field.key] !== 0 && formValues[field.key] !== false) {
+                    missing[field.key] = localizeFieldIssue({ code: 'required' }, field.label, t)
+                }
+            }
+            if (Object.keys(missing).length) {
+                setFieldErrors(missing)
+                toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }))
                 return
             }
         }
@@ -960,13 +965,15 @@ export function DynamicRecordDialog({
     // then advance. Mirrors handleSubmit's required check but scoped to the step.
     const goNextStep = () => {
         const step = groups[clampedStep]
-        const bag = validateValues((step?.fields ?? []) as ActionFieldDef[], formValues)
-        if (bagHasErrors(bag)) {
-            const labels: Record<string, string> = {}
-            for (const f of step?.fields ?? []) labels[f.key] = t(f.label, { defaultValue: f.label })
-            const localized = localizeFieldErrorMap(bag, t, { labels, language: lang })
-            setFieldErrors(localized)
-            toastValidationFailed(t, lang, localized)
+        const missing: Record<string, string> = {}
+        for (const field of step?.fields ?? []) {
+            if (field.required && !formValues[field.key] && formValues[field.key] !== 0 && formValues[field.key] !== false) {
+                missing[field.key] = localizeFieldIssue({ code: 'required' }, field.label, t)
+            }
+        }
+        if (Object.keys(missing).length) {
+            setFieldErrors(missing)
+            toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }))
             return
         }
         setFieldErrors({})
@@ -999,7 +1006,7 @@ export function DynamicRecordDialog({
                                 cell `min-w-0` so a long select/input value can't
                                 blow the two columns past the dialog width. */}
                             <form
-                                id={formId}
+                                id="dynamic-record-form"
                                 onSubmit={handleSubmit}
                                 className="grid gap-y-4"
                             >
@@ -1109,7 +1116,7 @@ export function DynamicRecordDialog({
                         {isEditable && (!isSteps || isLastStep) && (
                             <Button
                                 type="submit"
-                                form={formId}
+                                form="dynamic-record-form"
                                 disabled={saving || loading}
                             >
                                 {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
@@ -1213,9 +1220,7 @@ export function ReadonlyEditField({ field, value }: { field: FieldDef; value: an
 // ReadonlyRelationField — a locked/readonly FK field (customer_id, category_id…)
 // resolves the record's label instead of showing the raw id, mirroring
 // RelationViewValue's lookup but rendered as a disabled input to match the rest
-// of ReadonlyEditField. Without this, a locked relation field (e.g. `lockedFields`
-// seeding a POS-selected customer into a vehicle create modal) would show a bare
-// UUID — the exact readability bug this dialog otherwise avoids elsewhere.
+// of ReadonlyEditField.
 function ReadonlyRelationField({
     field,
     value,
@@ -1244,7 +1249,19 @@ function ReadonlyRelationField({
 // RelationViewValue — read-only FK lead. Resolves the relation's label + image
 // from (1) the sibling object the table served, then (2) the canonical options
 // endpoint, and renders an OptionLead (thumbnail / icon / color dot) + label.
-function RelationViewValue({ field, value, record, stack = false }: { field: FieldDef; value: any; record: any; stack?: boolean }) {
+// When `stack` is true (`display: "image_stack"`), the landscape mark sits ON
+// TOP of the label — wide logos (brand marks) fit without cropping.
+function RelationViewValue({
+    field,
+    value,
+    record,
+    stack = false,
+}: {
+    field: FieldDef
+    value: any
+    record: any
+    stack?: boolean
+}) {
     const getImageUrl = useContext(ImageUrlContext)
     const sib = relationSiblingValue(field, record)
     const sibLabel = typeof sib === 'string' ? sib : objectLabel(sib)
@@ -1382,18 +1399,16 @@ export function ViewValue({
 
     const value = normalizeNilUuid(rawValue)
 
-    // Landscape stack on a relation FK (brand marks, product cards).
-    if (
-        renderAs === 'image_stack' &&
-        (isRelationField(field) || (typeof field.key === 'string' && field.key.endsWith('_id')))
-    ) {
+    // Landscape stack on a relation FK (brand marks, product cards): image ON
+    // TOP, label UNDERNEATH. Checked before the default relation lead so a
+    // `display: "image_stack"` FK does not fall through to the side-by-side chip.
+    if (renderAs === 'image_stack' && looksLikeForeignKey(field)) {
         return <RelationViewValue field={field} value={value} record={record} stack />
     }
 
-    // Relation (search / dynamic_select / ref / any *_id) → resolved thumbnail +
-    // label. The *_id catch-all covers plain-typed FK columns not tagged as a
-    // relation field.
-    if (isRelationField(field) || (typeof field.key === 'string' && field.key.endsWith('_id'))) {
+    // Relation (search / dynamic_select / ref / uuid *_id FK) → resolved
+    // thumbnail + label. Plain text `*_id` columns (external_id, …) stay text.
+    if (looksLikeForeignKey(field)) {
         return <RelationViewValue field={field} value={value} record={record} />
     }
 
@@ -1426,27 +1441,36 @@ export function ViewValue({
         )
     }
 
-    // Landscape stack for image/logo URL columns.
+    // Landscape stack for image/logo URL columns (and `type: image` with
+    // `cellStyle: image_stack`). Wide marks sit above an optional caption.
     if (renderAs === 'image_stack') {
-        const caption =
-            (typeof field.styleConfig?.label_field === 'string' &&
-                record?.[field.styleConfig.label_field]) ||
-            (typeof field.styleConfig?.labelField === 'string' &&
-                record?.[field.styleConfig.labelField]) ||
-            undefined
-        return (
+        if (value && isLucideIconName(value)) {
+            return <IconNameViewValue name={value} />
+        }
+        const labelField =
+            (field.styleConfig &&
+                (field.styleConfig.label_field as string | undefined)) ||
+            (field.styleConfig && (field.styleConfig.labelField as string | undefined))
+        let caption: string | undefined
+        if (labelField && record && typeof record === 'object') {
+            const raw = (record as Record<string, unknown>)[labelField]
+            if (raw != null && String(raw) !== '') caption = String(raw)
+        }
+        return value || caption ? (
             <div className="py-1">
                 <ImageStack
                     src={value ? String(value) : undefined}
-                    label={caption ? String(caption) : field.label}
+                    label={caption}
                     getImageUrl={getImageUrl}
                     size="lg"
                 />
             </div>
+        ) : (
+            <p className="text-sm py-1 text-muted-foreground">Sin imagen</p>
         )
     }
 
-    if (field.type === 'image') {
+    if (field.type === 'image' || renderAs === 'image') {
         if (isLucideIconName(value)) {
             return <IconNameViewValue name={value} />
         }
@@ -1740,6 +1764,19 @@ function StructuredViewValue({
     if (isEmpty) {
         return <p className="text-sm py-1 text-muted-foreground">—</p>
     }
+    // Line-items arrays with a declared itemFields schema → mini-table.
+    // Plain objects (PAC provider_data, fiscal_data bags) → readable key/value
+    // list; nested objects/arrays render as pretty JSON instead of `key: {…}`
+    // stubs that looked broken in fiscal detail modals.
+    const hasItemFields = !!(field?.itemFields ?? field?.item_fields)
+    if (
+        !hasItemFields &&
+        value !== null &&
+        typeof value === 'object' &&
+        !Array.isArray(value)
+    ) {
+        return <JsonObjectViewValue value={value as Record<string, unknown>} />
+    }
     return (
         <div className="text-sm py-1">
             <CollectionCell
@@ -1754,6 +1791,43 @@ function StructuredViewValue({
     )
 }
 
+/** Flatten a jsonb/object bag into labeled rows; nest as pretty JSON. */
+function JsonObjectViewValue({ value }: { value: Record<string, unknown> }) {
+    const entries = Object.entries(value).filter(([, v]) => v !== undefined)
+    if (entries.length === 0) {
+        return <p className="text-sm py-1 text-muted-foreground">—</p>
+    }
+    return (
+        <dl className="grid gap-2 py-1 text-sm">
+            {entries.map(([key, raw]) => {
+                const label = humanizeToken(key)
+                const isNest =
+                    raw !== null &&
+                    typeof raw === 'object' &&
+                    !(raw instanceof Date)
+                return (
+                    <div key={key} className="min-w-0">
+                        <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                            {label}
+                        </dt>
+                        <dd className="mt-0.5 break-words text-foreground">
+                            {isNest ? (
+                                <pre className="max-h-48 overflow-auto rounded-md bg-muted/40 p-2 text-[11px] leading-relaxed whitespace-pre-wrap">
+                                    {JSON.stringify(raw, null, 2)}
+                                </pre>
+                            ) : raw === null || raw === '' ? (
+                                <span className="text-muted-foreground">—</span>
+                            ) : (
+                                String(raw)
+                            )}
+                        </dd>
+                    </div>
+                )
+            })}
+        </dl>
+    )
+}
+
 export function EditField({ field, value, onChange, record }: {
     field: FieldDef
     value: any