@open-mercato/core 0.8.1-develop.7296.1.2111d779db → 0.9.0

package/src/modules/forms/backend/forms/[id]/studio/autosave-guard.ts

@@ -0,0 +1,25 @@
+import { validateSchemaExtensions, type FormSchema } from './schema-helpers'
+
+export type AutosaveGuard = {
+  run: (schema: FormSchema) => Promise<void>
+}
+
+export function createAutosaveGuard({
+  patch,
+  onInvalid,
+}: {
+  patch: (schema: FormSchema) => Promise<void> | void
+  onInvalid: () => void
+}): AutosaveGuard {
+  return {
+    async run(schema) {
+      try {
+        validateSchemaExtensions(schema)
+      } catch {
+        onInvalid()
+        return
+      }
+      await patch(schema)
+    },
+  }
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/DragOverlayCard.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import type { LucideIcon } from 'lucide-react'
+
+export function DragOverlayCard({
+  Icon,
+  label,
+  widthPx,
+}: {
+  Icon: LucideIcon
+  label: string
+  widthPx?: number
+}) {
+  const hasWidth = typeof widthPx === 'number' && Number.isFinite(widthPx) && widthPx > 0
+  const baseClass = hasWidth
+    ? 'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-foreground shadow-lg'
+    : 'flex min-w-40 items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-foreground shadow-lg'
+  return (
+    <div className={baseClass} style={hasWidth ? { width: widthPx } : undefined}>
+      <Icon className="size-4 text-muted-foreground" aria-hidden="true" />
+      <span className="truncate">{label}</span>
+    </div>
+  )
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/DropIndicator.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import * as React from 'react'
+
+export function HorizontalDropBar({ position }: { position: 'top' | 'bottom' }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={[
+        'pointer-events-none absolute left-0 right-0 h-0.5 rounded-full bg-primary transition-opacity duration-150',
+        position === 'top' ? '-top-1' : '-bottom-1',
+      ].join(' ')}
+    />
+  )
+}
+
+export function VerticalDropBar({ position }: { position: 'left' | 'right' }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={[
+        'pointer-events-none absolute top-1 bottom-1 w-0.5 rounded-full bg-primary transition-opacity duration-150',
+        position === 'left' ? '-left-1' : '-right-1',
+      ].join(' ')}
+    />
+  )
+}
+
+export function GhostCell() {
+  return (
+    <span
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 rounded-md border border-dashed border-primary bg-primary/10 ring-1 ring-primary/30 transition-opacity duration-150"
+    />
+  )
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/FieldRow.tsx

@@ -0,0 +1,308 @@
+'use client'
+
+import * as React from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { ArrowDown, ArrowUp, GripVertical, Trash2 } from '../lucide-icons'
+import { resolveLucideIcon } from '../lucide-icons'
+import { buildPaletteEntries } from '../palette/entries'
+import { resolveTypeLabel } from '../type-label'
+import type { FieldNode } from '../schema-helpers'
+import { readSpan as readSpanShared } from './row-layout'
+import { computeResizedSpan, GAP_PX } from './resize-math'
+
+export const FIELD_DRAGGABLE_PREFIX = 'field:'
+
+export const fieldDraggableId = (fieldKey: string): string =>
+  `${FIELD_DRAGGABLE_PREFIX}${fieldKey}`
+
+const SPAN_TO_CLASS: Record<1 | 2 | 3 | 4, string> = {
+  1: 'sm:col-span-1',
+  2: 'sm:col-span-2',
+  3: 'md:col-span-3',
+  4: 'md:col-span-4',
+}
+
+function readSpan(value: unknown): 1 | 2 | 3 | 4 {
+  return readSpanShared(value) ?? 1
+}
+
+export function FieldRow({
+  fieldKey,
+  node,
+  isSelected,
+  onSelect,
+  onDelete,
+  onMove,
+  canMoveUp,
+  canMoveDown,
+  dropIndicator,
+  dropIndicatorGap,
+  columns,
+  gap,
+  getSectionRect,
+  onResizeStart,
+  onResizePreview,
+  onResizeCommit,
+  activeLocale,
+  t,
+}: {
+  fieldKey: string
+  node: FieldNode
+  isSelected: boolean
+  onSelect: (fieldKey: string) => void
+  onDelete: (fieldKey: string) => void
+  onMove: (fieldKey: string, direction: 'up' | 'down') => void
+  canMoveUp: boolean
+  canMoveDown: boolean
+  dropIndicator?: 'before' | 'after' | null
+  dropIndicatorGap?: 'sm' | 'md' | 'lg'
+  columns?: 1 | 2 | 3 | 4
+  gap?: 'sm' | 'md' | 'lg'
+  getSectionRect?: () => DOMRect | null
+  onResizeStart?: (fieldKey: string, startSpan: 1 | 2 | 3 | 4) => void
+  onResizePreview?: (fieldKey: string, previewSpan: 1 | 2 | 3 | 4) => void
+  onResizeCommit?: (fieldKey: string, finalSpan: 1 | 2 | 3 | 4) => void
+  activeLocale: string
+  t: TranslateFn
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: fieldDraggableId(fieldKey) })
+  const palette = React.useMemo(() => buildPaletteEntries(), [])
+  const omType = String(node['x-om-type'] ?? 'text')
+  const paletteEntry = [...palette.input, ...palette.survey, ...palette.layout].find(
+    (entry) => entry.fieldTypeKey === omType || entry.id === omType || entry.id === `layout:field:${omType}`,
+  )
+  const Icon = resolveLucideIcon(paletteEntry?.iconName)
+  const label = node['x-om-label']?.[activeLocale] || node['x-om-label']?.en || fieldKey
+  const help = node['x-om-help']?.[activeLocale] ?? node['x-om-help']?.en
+  const span = readSpan(node['x-om-grid-span'])
+  const indicatorOffset =
+    dropIndicatorGap === 'sm'
+      ? dropIndicator === 'before' ? '-top-1' : '-bottom-1'
+      : dropIndicatorGap === 'lg'
+        ? dropIndicator === 'before' ? '-top-3' : '-bottom-3'
+        : dropIndicator === 'before' ? '-top-2' : '-bottom-2'
+
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+  const setRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      setNodeRef(node)
+      containerRef.current = node
+    },
+    [setNodeRef],
+  )
+
+  const resizeStateRef = React.useRef<{
+    pointerId: number
+    fieldLeft: number
+    sectionLeft: number
+    sectionWidth: number
+    columns: 1 | 2 | 3 | 4
+    gapPx: number
+    startSpan: 1 | 2 | 3 | 4
+    lastPreview: 1 | 2 | 3 | 4
+  } | null>(null)
+
+  const canResize = !!columns && columns > 1 && !!getSectionRect && !!onResizeCommit
+
+  const handleResizePointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!canResize) return
+      if (event.button !== 0) return
+      const fieldNode = containerRef.current
+      const sectionRect = getSectionRect?.()
+      if (!fieldNode || !sectionRect) return
+      const fieldRect = fieldNode.getBoundingClientRect()
+      const gapPx = GAP_PX[gap ?? 'md']
+      const startSpan = span
+      const targetCols = (columns ?? 1) as 1 | 2 | 3 | 4
+      resizeStateRef.current = {
+        pointerId: event.pointerId,
+        fieldLeft: fieldRect.left,
+        sectionLeft: sectionRect.left,
+        sectionWidth: sectionRect.width,
+        columns: targetCols,
+        gapPx,
+        startSpan,
+        lastPreview: startSpan,
+      }
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId)
+      } catch {
+        // Some browsers throw if capture is unavailable — safe to ignore.
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      onResizeStart?.(fieldKey, startSpan)
+    },
+    [canResize, columns, fieldKey, gap, getSectionRect, onResizeStart, span],
+  )
+
+  const handleResizePointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const state = resizeStateRef.current
+      if (!state || state.pointerId !== event.pointerId) return
+      const next = computeResizedSpan({
+        sectionLeft: state.sectionLeft,
+        sectionWidth: state.sectionWidth,
+        fieldLeft: state.fieldLeft,
+        pointerClientX: event.clientX,
+        columns: state.columns,
+        startSpan: state.startSpan,
+        gapPx: state.gapPx,
+      })
+      if (next !== state.lastPreview) {
+        state.lastPreview = next
+        onResizePreview?.(fieldKey, next)
+      }
+      event.preventDefault()
+    },
+    [fieldKey, onResizePreview],
+  )
+
+  const finishResize = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const state = resizeStateRef.current
+      if (!state || state.pointerId !== event.pointerId) return
+      try {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+          event.currentTarget.releasePointerCapture(event.pointerId)
+        }
+      } catch {
+        // Ignore release errors — pointer capture may already be gone.
+      }
+      const final = state.lastPreview
+      resizeStateRef.current = null
+      onResizeCommit?.(fieldKey, final)
+    },
+    [fieldKey, onResizeCommit],
+  )
+
+  return (
+    <div
+      ref={setRefs}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        // Phase 7 polish — hoist the cell to its own compositor layer during
+        // an active drag so adjacent cells don't jank when transforms cascade.
+        // Scoped to the drag duration so long forms keep their layer budget.
+        willChange: isDragging ? 'transform' : undefined,
+      }}
+      className={[
+        'group relative min-w-0 rounded-md border bg-background p-3',
+        // Phase 7 polish — smooth ring / border colour transitions so the
+        // drop indicator fades in instead of snapping in instantly.
+        'transition-[border-color,box-shadow] duration-150',
+        SPAN_TO_CLASS[span],
+        isSelected ? 'border-primary/40' : 'border-border',
+        dropIndicator ? 'ring-1 ring-primary/30' : '',
+      ].join(' ')}
+      data-field-key={fieldKey}
+    >
+      {dropIndicator ? (
+        <span
+          className={[
+            'pointer-events-none absolute left-3 right-3 h-0.5 rounded-full bg-primary',
+            indicatorOffset,
+          ].join(' ')}
+          aria-hidden="true"
+        />
+      ) : null}
+      <div className="flex items-start gap-2">
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="mt-0.5 shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing"
+          aria-label={t('forms.studio.canvas.field.dragHandle')}
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="size-4" aria-hidden="true" />
+        </IconButton>
+        <Button
+          type="button"
+          variant="ghost"
+          className="h-auto min-w-0 flex-1 justify-start px-0 py-0 text-left"
+          onClick={() => onSelect(fieldKey)}
+        >
+          <span className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+            <span className="truncate">{label}</span>
+          </span>
+          <span className="mt-1 block text-xs text-muted-foreground">
+            {resolveTypeLabel(omType, t)}
+          </span>
+          {help ? <span className="mt-1 block text-xs text-muted-foreground">{help}</span> : null}
+        </Button>
+        <div className="flex shrink-0 items-center gap-1">
+          <IconButton
+            aria-label={t('forms.studio.canvas.field.moveUp')}
+            variant="ghost"
+            size="sm"
+            type="button"
+            disabled={!canMoveUp}
+            onClick={(event) => {
+              event.stopPropagation()
+              onMove(fieldKey, 'up')
+            }}
+          >
+            <ArrowUp className="size-4" aria-hidden="true" />
+          </IconButton>
+          <IconButton
+            aria-label={t('forms.studio.canvas.field.moveDown')}
+            variant="ghost"
+            size="sm"
+            type="button"
+            disabled={!canMoveDown}
+            onClick={(event) => {
+              event.stopPropagation()
+              onMove(fieldKey, 'down')
+            }}
+          >
+            <ArrowDown className="size-4" aria-hidden="true" />
+          </IconButton>
+        </div>
+        <IconButton
+          aria-label={t('forms.studio.fields.deleteButton')}
+          variant="ghost"
+          size="sm"
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation()
+            onDelete(fieldKey)
+          }}
+        >
+          <Trash2 className="size-4" aria-hidden="true" />
+        </IconButton>
+      </div>
+      {canResize ? (
+        <div
+          className="absolute inset-y-0 -right-1 hidden sm:flex w-2 cursor-col-resize items-center justify-center touch-none select-none"
+          onPointerDown={handleResizePointerDown}
+          onPointerMove={handleResizePointerMove}
+          onPointerUp={finishResize}
+          onPointerCancel={finishResize}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={t('forms.studio.canvas.field.resizeHandle')}
+          data-no-dnd="true"
+        >
+          <span className="h-6 w-0.5 rounded-full bg-border opacity-0 transition-opacity group-hover:opacity-100" />
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/FormCanvas.tsx

@@ -0,0 +1,265 @@
+'use client'
+
+import * as React from 'react'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { Alert } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import {
+  linearizeFields,
+  UNGROUPED_SECTION_KEY,
+  type FormSchema,
+} from '../schema-helpers'
+import type { ActiveDropTarget, StudioSelection } from '../types'
+import { fieldDraggableId, FieldRow } from './FieldRow'
+import {
+  SectionContainer,
+  SectionGridBody,
+  sectionDraggableId,
+} from './SectionContainer'
+import {
+  partitionPages,
+  resolveSectionViews,
+} from '../../../../../services/form-version-compiler'
+import { computeRowLayout, readSpan } from './row-layout'
+
+export type FieldResizeState = {
+  fieldKey: string
+  sectionKey: string
+  startSpan: 1 | 2 | 3 | 4
+  previewSpan: 1 | 2 | 3 | 4
+} | null
+
+export function FormCanvas({
+  schema,
+  selectedKey,
+  onSelectField,
+  onSelectSection,
+  onDeleteField,
+  onDeleteSection,
+  onMoveField,
+  onMoveSection,
+  onAdoptUngrouped,
+  onSectionTitleCommit,
+  focusSectionTitleKey,
+  onSectionTitleFocusConsumed,
+  activeLocale,
+  activeDropTarget,
+  resizeState,
+  onFieldResizeStart,
+  onFieldResizePreview,
+  onFieldResizeCommit,
+  gridRefs,
+  t,
+}: {
+  schema: FormSchema
+  selectedKey: StudioSelection
+  onSelectField: (fieldKey: string) => void
+  onSelectSection: (sectionKey: string) => void
+  onDeleteField: (fieldKey: string) => void
+  onDeleteSection: (sectionKey: string) => void
+  onMoveField: (fieldKey: string, direction: 'up' | 'down') => void
+  onMoveSection: (sectionKey: string, direction: 'up' | 'down') => void
+  onAdoptUngrouped: () => void
+  onSectionTitleCommit: (sectionKey: string, title: string) => void
+  focusSectionTitleKey: string | null
+  onSectionTitleFocusConsumed: () => void
+  activeLocale: string
+  t: TranslateFn
+  activeDropTarget?: ActiveDropTarget
+  resizeState?: FieldResizeState
+  onFieldResizeStart?: (input: { fieldKey: string; sectionKey: string; startSpan: 1 | 2 | 3 | 4 }) => void
+  onFieldResizePreview?: (input: { fieldKey: string; previewSpan: 1 | 2 | 3 | 4 }) => void
+  onFieldResizeCommit?: (input: { fieldKey: string; finalSpan: 1 | 2 | 3 | 4 }) => void
+  // Phase 4 — optional ref-prop ownership: when supplied, FormCanvas writes
+  // each section's grid node into this Map so parent components can measure
+  // section width (e.g., to size the drag overlay). Falls back to a private
+  // ref when not provided so resize-from-FieldRow keeps working in isolation.
+  gridRefs?: React.MutableRefObject<Map<string, HTMLDivElement | null>>
+}) {
+  const sections = React.useMemo(
+    () => resolveSectionViews(schema as Record<string, unknown>),
+    [schema],
+  )
+  const pages = React.useMemo(() => partitionPages(sections), [sections])
+  const fields = React.useMemo(() => linearizeFields(schema), [schema])
+  const claimedFields = new Set(sections.flatMap((section) => section.fieldKeys))
+  const ungroupedFields = fields.filter((entry) => !entry.sectionKey || !claimedFields.has(entry.key))
+  const sectionIds = sections.map((section) => sectionDraggableId(section.key))
+  const localGridRefs = React.useRef<Map<string, HTMLDivElement | null>>(new Map())
+  const effectiveGridRefs = gridRefs ?? localGridRefs
+  const registerGridRef = React.useCallback(
+    (sectionKey: string) => (node: HTMLDivElement | null) => {
+      const map = effectiveGridRefs.current
+      if (node) {
+        map.set(sectionKey, node)
+      } else {
+        map.delete(sectionKey)
+      }
+    },
+    [effectiveGridRefs],
+  )
+
+  if (sections.length === 0 && Object.keys(schema.properties).length === 0) {
+    return (
+      <Alert>
+        <h3 className="font-medium">{t('forms.studio.canvas.firstRun.title')}</h3>
+        <p className="mt-1 text-sm">{t('forms.studio.canvas.firstRun.body')}</p>
+      </Alert>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <SortableContext items={sectionIds} strategy={verticalListSortingStrategy}>
+        {sections.map((section, sectionIndex) => {
+          const pageIndex = pages.findIndex((page) => page.sectionKeys.includes(section.key))
+          const isFirstOfPage =
+            pageIndex >= 0 && pages[pageIndex]?.sectionKeys[0] === section.key
+          const fieldKeys = section.fieldKeys.filter((fieldKey) => schema.properties[fieldKey])
+          const getSectionRect = () => {
+            const node = effectiveGridRefs.current.get(section.key)
+            return node ? node.getBoundingClientRect() : null
+          }
+          return (
+            <SectionContainer
+              key={section.key}
+              view={section}
+              isSelected={selectedKey?.kind === 'section' && selectedKey.key === section.key}
+              onSelect={onSelectSection}
+              onDelete={onDeleteSection}
+              onMove={onMoveSection}
+              onTitleCommit={onSectionTitleCommit}
+              activeLocale={activeLocale}
+              pageIndex={isFirstOfPage ? pageIndex : null}
+              pageChipLabel={isFirstOfPage && pages.length > 1
+                ? t('forms.studio.canvas.page.chipLabel', { n: String(pageIndex + 1) })
+                : null}
+              emptyDropCopy={t('forms.studio.canvas.dropHere.field')}
+              titlePlaceholder={t('forms.studio.canvas.section.title.placeholder')}
+              deleteAriaLabel={t('forms.studio.canvas.section.delete.ariaLabel')}
+              dragHandleAriaLabel={t('forms.studio.canvas.section.dragHandle')}
+              moveUpAriaLabel={t('forms.studio.canvas.section.moveUp')}
+              moveDownAriaLabel={t('forms.studio.canvas.section.moveDown')}
+              canMoveUp={sectionIndex > 0}
+              canMoveDown={sectionIndex < sections.length - 1}
+              dropIndicator={
+                activeDropTarget?.kind === 'sortable' &&
+                activeDropTarget.id === sectionDraggableId(section.key)
+                  ? activeDropTarget.position
+                  : null
+              }
+              t={t}
+              isFocusedForTitleEdit={focusSectionTitleKey === section.key}
+              onTitleEditConsumed={onSectionTitleFocusConsumed}
+            >
+              <SortableContext
+                items={fieldKeys.map((fieldKey) => fieldDraggableId(fieldKey))}
+                strategy={verticalListSortingStrategy}
+              >
+                {(() => {
+                  const spans: Record<string, number | undefined> = {}
+                  for (const fieldKey of fieldKeys) {
+                    spans[fieldKey] = readSpan(schema.properties[fieldKey]?.['x-om-grid-span'])
+                  }
+                  const layoutPlan = computeRowLayout({
+                    fieldKeys,
+                    spans,
+                    columns: section.columns,
+                  })
+                  const renderField = (fieldKey: string, fieldIndex: number) => (
+                    <FieldRow
+                      key={fieldKey}
+                      fieldKey={fieldKey}
+                      node={schema.properties[fieldKey]}
+                      isSelected={selectedKey?.kind === 'field' && selectedKey.key === fieldKey}
+                      onSelect={onSelectField}
+                      onDelete={onDeleteField}
+                      onMove={onMoveField}
+                      canMoveUp={fieldIndex > 0}
+                      canMoveDown={fieldIndex < fieldKeys.length - 1}
+                      dropIndicator={
+                        activeDropTarget?.kind === 'sortable' &&
+                        activeDropTarget.id === fieldDraggableId(fieldKey)
+                          ? activeDropTarget.position
+                          : null
+                      }
+                      dropIndicatorGap={section.gap}
+                      columns={section.columns}
+                      gap={section.gap}
+                      getSectionRect={getSectionRect}
+                      onResizeStart={(key, startSpan) =>
+                        onFieldResizeStart?.({ fieldKey: key, sectionKey: section.key, startSpan })
+                      }
+                      onResizePreview={(key, previewSpan) =>
+                        onFieldResizePreview?.({ fieldKey: key, previewSpan })
+                      }
+                      onResizeCommit={(key, finalSpan) =>
+                        onFieldResizeCommit?.({ fieldKey: key, finalSpan })
+                      }
+                      activeLocale={activeLocale}
+                      t={t}
+                    />
+                  )
+                  const sectionDropTarget =
+                    activeDropTarget &&
+                    activeDropTarget.kind !== 'sortable' &&
+                    activeDropTarget.sectionKey === section.key
+                      ? activeDropTarget
+                      : null
+                  const sectionResize =
+                    resizeState && resizeState.sectionKey === section.key ? resizeState : null
+                  return (
+                    <SectionGridBody
+                      view={section}
+                      isEmpty={fieldKeys.length === 0}
+                      emptyCopy={t('forms.studio.canvas.dropHere.field')}
+                      layoutPlan={layoutPlan}
+                      renderField={renderField}
+                      gridDropTarget={sectionDropTarget}
+                      resizingFieldKey={sectionResize?.fieldKey ?? null}
+                      resizingPreviewSpan={sectionResize?.previewSpan ?? null}
+                      gridRef={registerGridRef(section.key)}
+                    >
+                      {fieldKeys.map((fieldKey, fieldIndex) => renderField(fieldKey, fieldIndex))}
+                    </SectionGridBody>
+                  )
+                })()}
+              </SortableContext>
+            </SectionContainer>
+          )
+        })}
+      </SortableContext>
+      {ungroupedFields.length > 0 ? (
+        <section className="rounded-lg border border-dashed border-border bg-muted/20 p-4">
+          <div className="mb-3 flex items-center justify-between gap-2">
+            <h3 className="text-sm font-semibold text-foreground">
+              {t('forms.studio.canvas.ungrouped.heading.label')}
+            </h3>
+            <Button type="button" variant="outline" size="sm" onClick={onAdoptUngrouped}>
+              {t('forms.studio.canvas.ungrouped.adopt.button')}
+            </Button>
+          </div>
+          <div data-section-key={UNGROUPED_SECTION_KEY} className="space-y-2">
+            {ungroupedFields.map((entry, index) => (
+              <FieldRow
+                key={entry.key}
+                fieldKey={entry.key}
+                node={schema.properties[entry.key]}
+                isSelected={selectedKey?.kind === 'field' && selectedKey.key === entry.key}
+                onSelect={onSelectField}
+                onDelete={onDeleteField}
+                onMove={onMoveField}
+                canMoveUp={index > 0}
+                canMoveDown={index < ungroupedFields.length - 1}
+                dropIndicator={null}
+                activeLocale={activeLocale}
+                t={t}
+              />
+            ))}
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}