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

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

@@ -0,0 +1,176 @@
+'use client'
+
+import { useDroppable } from '@dnd-kit/core'
+
+export const SECTION_DROP_PREFIX = 'section-drop:'
+
+export function sectionDropId(sectionKey: string, columnIndex: number | null = null): string {
+  return `${SECTION_DROP_PREFIX}${sectionKey}${columnIndex === null ? '' : `:${columnIndex}`}`
+}
+
+export function sectionCellDropId(sectionKey: string, rowIndex: number, columnIndex: number): string {
+  return `${SECTION_DROP_PREFIX}${sectionKey}:row:${rowIndex}:col:${columnIndex}`
+}
+
+export function sectionColGapDropId(sectionKey: string, rowIndex: number, columnIndex: number): string {
+  return `${SECTION_DROP_PREFIX}${sectionKey}:row:${rowIndex}:gap:${columnIndex}`
+}
+
+export function sectionRowGapDropId(sectionKey: string, rowIndex: number): string {
+  return `${SECTION_DROP_PREFIX}${sectionKey}:row-gap:${rowIndex}`
+}
+
+export type ParsedSectionDrop =
+  | { kind: 'legacy'; sectionKey: string; columnIndex: number | null }
+  | { kind: 'cell'; sectionKey: string; rowIndex: number; columnIndex: number }
+  | { kind: 'col-gap'; sectionKey: string; rowIndex: number; columnIndex: number }
+  | { kind: 'row-gap'; sectionKey: string; rowIndex: number }
+
+function parseIntStrict(value: string | undefined): number | null {
+  if (value === undefined) return null
+  const parsed = Number.parseInt(value, 10)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+export function parseSectionDropId(id: string): ParsedSectionDrop | null {
+  if (!id.startsWith(SECTION_DROP_PREFIX)) return null
+  const raw = id.slice(SECTION_DROP_PREFIX.length)
+  if (!raw) return null
+  const parts = raw.split(':')
+  const sectionKey = parts[0]
+  if (!sectionKey) return null
+
+  if (parts.length === 1) {
+    return { kind: 'legacy', sectionKey, columnIndex: null }
+  }
+
+  if (parts[1] === 'row-gap') {
+    const rowIndex = parseIntStrict(parts[2])
+    if (rowIndex === null) return null
+    return { kind: 'row-gap', sectionKey, rowIndex }
+  }
+
+  if (parts[1] === 'row' && parts.length === 5) {
+    const rowIndex = parseIntStrict(parts[2])
+    const tag = parts[3]
+    const columnIndex = parseIntStrict(parts[4])
+    if (rowIndex === null || columnIndex === null) return null
+    if (tag === 'col') {
+      return { kind: 'cell', sectionKey, rowIndex, columnIndex }
+    }
+    if (tag === 'gap') {
+      return { kind: 'col-gap', sectionKey, rowIndex, columnIndex }
+    }
+    return null
+  }
+
+  if (parts.length === 2) {
+    const columnIndex = parseIntStrict(parts[1])
+    return { kind: 'legacy', sectionKey, columnIndex: columnIndex === null ? null : columnIndex }
+  }
+
+  return null
+}
+
+export function GridSlot({
+  sectionKey,
+  columnIndex = null,
+  isEmpty = false,
+  copy,
+}: {
+  sectionKey: string
+  columnIndex?: number | null
+  isEmpty?: boolean
+  copy: string
+}) {
+  const { isOver, setNodeRef } = useDroppable({ id: sectionDropId(sectionKey, columnIndex) })
+  return (
+    <div
+      ref={setNodeRef}
+      className={[
+        'rounded-md border border-dashed p-3 text-center text-xs text-muted-foreground transition-colors',
+        isEmpty ? 'min-h-20' : 'min-h-10',
+        isOver ? 'border-primary bg-primary/10 text-foreground ring-1 ring-primary/30' : 'border-border bg-muted/20',
+      ].join(' ')}
+    >
+      {copy}
+    </div>
+  )
+}
+
+export function SectionCellSlot({
+  sectionKey,
+  rowIndex,
+  columnIndex,
+  copy,
+}: {
+  sectionKey: string
+  rowIndex: number
+  columnIndex: number
+  copy: string
+}) {
+  const { isOver, setNodeRef } = useDroppable({
+    id: sectionCellDropId(sectionKey, rowIndex, columnIndex),
+  })
+  return (
+    <div
+      ref={setNodeRef}
+      data-cell-row={rowIndex}
+      data-cell-col={columnIndex}
+      className={[
+        'rounded-md border border-dashed p-3 text-center text-xs text-muted-foreground transition-colors min-h-10',
+        isOver ? 'border-primary bg-primary/10 text-foreground ring-1 ring-primary/30' : 'border-border bg-muted/20',
+      ].join(' ')}
+    >
+      {copy}
+    </div>
+  )
+}
+
+export function SectionColGapDrop({
+  sectionKey,
+  rowIndex,
+  columnIndex,
+  edge,
+}: {
+  sectionKey: string
+  rowIndex: number
+  columnIndex: number
+  edge: 'left' | 'right'
+}) {
+  const { setNodeRef } = useDroppable({
+    id: sectionColGapDropId(sectionKey, rowIndex, columnIndex),
+  })
+  return (
+    <div
+      ref={setNodeRef}
+      aria-hidden="true"
+      data-col-gap-row={rowIndex}
+      data-col-gap-col={columnIndex}
+      className={[
+        'pointer-events-none absolute top-0 bottom-0 w-2',
+        edge === 'left' ? '-left-1' : '-right-1',
+      ].join(' ')}
+    />
+  )
+}
+
+export function SectionRowGapDrop({
+  sectionKey,
+  rowIndex,
+}: {
+  sectionKey: string
+  rowIndex: number
+}) {
+  const { setNodeRef } = useDroppable({
+    id: sectionRowGapDropId(sectionKey, rowIndex),
+  })
+  return (
+    <div
+      ref={setNodeRef}
+      aria-hidden="true"
+      data-row-gap={rowIndex}
+      className="pointer-events-none col-span-full h-0"
+    />
+  )
+}

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

@@ -0,0 +1,473 @@
+'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 { Input } from '@open-mercato/ui/primitives/input'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { ArrowDown, ArrowUp, GripVertical, Trash2 } from '../lucide-icons'
+import {
+  GridSlot,
+  SectionCellSlot,
+  SectionColGapDrop,
+  SectionRowGapDrop,
+} from './GridSlot'
+import { GhostCell, HorizontalDropBar, VerticalDropBar } from './DropIndicator'
+import type { RowLayout } from './row-layout'
+import type { ActiveDropTarget } from '../types'
+import type { ResolvedSectionView } from '../../../../../services/form-version-compiler'
+
+type GridDropTarget = Exclude<ActiveDropTarget, null | { kind: 'sortable' }>
+
+type RowGapTarget = Extract<GridDropTarget, { kind: 'row-gap' }>
+type ColGapTarget = Extract<GridDropTarget, { kind: 'col-gap' }>
+type CellTarget = Extract<GridDropTarget, { kind: 'cell' }>
+
+export const SECTION_DRAGGABLE_PREFIX = 'section:'
+
+export const sectionDraggableId = (sectionKey: string): string =>
+  `${SECTION_DRAGGABLE_PREFIX}${sectionKey}`
+
+const COLUMNS_TO_GRID_CLASS: Record<1 | 2 | 3 | 4, string> = {
+  1: 'grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-2 md:grid-cols-3',
+  4: 'sm:grid-cols-2 md:grid-cols-4',
+}
+
+const GAP_TO_CLASS: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+}
+
+export type SectionContainerProps = {
+  view: ResolvedSectionView
+  isSelected: boolean
+  onSelect: (sectionKey: string) => void
+  onDelete: (sectionKey: string) => void
+  onMove: (sectionKey: string, direction: 'up' | 'down') => void
+  onTitleCommit: (sectionKey: string, title: string) => void
+  /** Currently active locale for inline title edits (Decision 26b). */
+  activeLocale: string
+  pageIndex: number | null
+  pageChipLabel: string | null
+  emptyDropCopy: string
+  titlePlaceholder: string
+  deleteAriaLabel: string
+  dragHandleAriaLabel: string
+  moveUpAriaLabel: string
+  moveDownAriaLabel: string
+  canMoveUp: boolean
+  canMoveDown: boolean
+  dropIndicator?: 'before' | 'after' | null
+  t: TranslateFn
+  children: React.ReactNode
+  isFocusedForTitleEdit?: boolean
+  onTitleEditConsumed?: () => void
+}
+
+/**
+ * Renders one `OmSection` (or `kind: 'page'` boundary) including header,
+ * inline-editable title, drag handle, optional divider, and grid body.
+ *
+ * Phase C wires the section reorder DnD via `useSortable` keyed on
+ * `section:<key>` so the parent `SortableContext` can list all sections.
+ */
+export function SectionContainer(props: SectionContainerProps) {
+  const {
+    view,
+    isSelected,
+    onSelect,
+    onDelete,
+    onMove,
+    onTitleCommit,
+    activeLocale,
+    pageChipLabel,
+    titlePlaceholder,
+    deleteAriaLabel,
+    dragHandleAriaLabel,
+    moveUpAriaLabel,
+    moveDownAriaLabel,
+    canMoveUp,
+    canMoveDown,
+    dropIndicator,
+    children,
+    isFocusedForTitleEdit,
+    onTitleEditConsumed,
+  } = props
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: sectionDraggableId(view.key) })
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  }
+
+  const initialTitle = view.title?.[activeLocale] ?? ''
+  const [editingTitle, setEditingTitle] = React.useState(false)
+  const [titleDraft, setTitleDraft] = React.useState(initialTitle)
+  const inputRef = React.useRef<HTMLInputElement | null>(null)
+
+  React.useEffect(() => {
+    if (!editingTitle) setTitleDraft(initialTitle)
+  }, [initialTitle, editingTitle])
+
+  React.useEffect(() => {
+    if (isFocusedForTitleEdit) {
+      setEditingTitle(true)
+      onTitleEditConsumed?.()
+    }
+  }, [isFocusedForTitleEdit, onTitleEditConsumed])
+
+  React.useEffect(() => {
+    if (editingTitle) {
+      const node = inputRef.current
+      if (node) {
+        node.focus()
+        node.select()
+      }
+    }
+  }, [editingTitle])
+
+  const commit = React.useCallback(() => {
+    setEditingTitle(false)
+    if (titleDraft !== initialTitle) {
+      onTitleCommit(view.key, titleDraft)
+    }
+  }, [titleDraft, initialTitle, onTitleCommit, view.key])
+
+  const cancel = React.useCallback(() => {
+    setEditingTitle(false)
+    setTitleDraft(initialTitle)
+  }, [initialTitle])
+
+  const handleHeaderClick = React.useCallback(() => {
+    if (!editingTitle) onSelect(view.key)
+  }, [editingTitle, onSelect, view.key])
+
+  const showTitleHeader = !view.hideTitle
+  const containerClass =
+    'relative rounded-lg border bg-background p-4 ' +
+    (isSelected ? 'border-primary/30' : 'border-border') +
+    (dropIndicator ? ' ring-1 ring-primary/30' : '')
+
+  const visibleTitle = initialTitle.length > 0 ? initialTitle : titlePlaceholder
+
+  return (
+    <div ref={setNodeRef} style={style} data-section-key={view.key} className={containerClass}>
+      {dropIndicator ? (
+        <span
+          className={[
+            'pointer-events-none absolute left-4 right-4 h-0.5 rounded-full bg-primary',
+            dropIndicator === 'before' ? '-top-2' : '-bottom-2',
+          ].join(' ')}
+          aria-hidden="true"
+        />
+      ) : null}
+      {view.kind === 'ending' ? (
+        <div className="mb-2">
+          <Tag variant="neutral" dot>
+            {props.t('forms.studio.canvas.ending.chip')}
+          </Tag>
+        </div>
+      ) : pageChipLabel ? (
+        <div className="mb-2">
+          <Tag variant="neutral" dot>
+            {pageChipLabel}
+          </Tag>
+        </div>
+      ) : null}
+      <header
+        className="mb-3 flex items-center justify-between gap-2"
+        onClick={handleHeaderClick}
+      >
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <IconButton
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing"
+            aria-label={dragHandleAriaLabel}
+            {...attributes}
+            {...listeners}
+          >
+            <GripVertical className="size-4" aria-hidden="true" />
+          </IconButton>
+          {showTitleHeader ? (
+            editingTitle ? (
+              <Input
+                ref={inputRef}
+                data-no-dnd="true"
+                value={titleDraft}
+                placeholder={titlePlaceholder}
+                aria-label={titlePlaceholder}
+                onChange={(event) => setTitleDraft(event.target.value)}
+                onBlur={commit}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault()
+                    commit()
+                  } else if (event.key === 'Escape') {
+                    event.preventDefault()
+                    cancel()
+                  }
+                }}
+                className="h-8 min-w-0 flex-1 px-2 py-1 text-sm font-semibold"
+              />
+            ) : (
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  onSelect(view.key)
+                  setEditingTitle(true)
+                }}
+                className="h-auto min-w-0 flex-1 justify-start truncate px-0 py-0 text-left text-sm font-semibold text-foreground hover:underline"
+              >
+                {visibleTitle}
+              </Button>
+            )
+          ) : (
+            <span className="flex-1 text-sm italic text-muted-foreground">{titlePlaceholder}</span>
+          )}
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <IconButton
+            type="button"
+            aria-label={moveUpAriaLabel}
+            variant="ghost"
+            size="sm"
+            disabled={!canMoveUp}
+            onClick={(event) => {
+              event.stopPropagation()
+              onMove(view.key, 'up')
+            }}
+          >
+            <ArrowUp className="size-4" aria-hidden="true" />
+          </IconButton>
+          <IconButton
+            type="button"
+            aria-label={moveDownAriaLabel}
+            variant="ghost"
+            size="sm"
+            disabled={!canMoveDown}
+            onClick={(event) => {
+              event.stopPropagation()
+              onMove(view.key, 'down')
+            }}
+          >
+            <ArrowDown className="size-4" aria-hidden="true" />
+          </IconButton>
+          <IconButton
+            type="button"
+            aria-label={deleteAriaLabel}
+            variant="ghost"
+            size="sm"
+            onClick={(event) => {
+              event.stopPropagation()
+              onDelete(view.key)
+            }}
+          >
+            <Trash2 className="size-4" aria-hidden="true" />
+          </IconButton>
+        </div>
+      </header>
+      {view.divider ? <Separator className="mb-3" /> : null}
+      {children}
+    </div>
+  )
+}
+
+export const sectionGridClasses = (
+  columns: 1 | 2 | 3 | 4,
+  gap: 'sm' | 'md' | 'lg',
+): string => `grid grid-cols-1 ${COLUMNS_TO_GRID_CLASS[columns]} ${GAP_TO_CLASS[gap]}`
+
+/**
+ * Body wrapper that lays out child rows in a CSS grid based on the
+ * resolved `columns` value. Empty sections fall back to a single
+ * full-width drop zone (Decision 28).
+ *
+ * Phase 1 grid DnD — when `columns > 1` and a `layoutPlan` is provided,
+ * the body owns layout: it walks the `RowLayout` rows, renders each
+ * field via `renderField(fieldKey, fieldIndex)`, and interleaves
+ * per-cell + per-gap droppables. `columns === 1` keeps legacy children
+ * rendering for regression safety.
+ */
+export function SectionGridBody({
+  view,
+  isEmpty,
+  emptyCopy,
+  children,
+  layoutPlan,
+  renderField,
+  gridDropTarget,
+  resizingFieldKey,
+  resizingPreviewSpan,
+  gridRef,
+}: {
+  view: ResolvedSectionView
+  isEmpty: boolean
+  emptyCopy: string
+  children?: React.ReactNode
+  layoutPlan?: RowLayout
+  renderField?: (fieldKey: string, fieldIndex: number) => React.ReactNode
+  gridDropTarget?: GridDropTarget | null
+  resizingFieldKey?: string | null
+  resizingPreviewSpan?: 1 | 2 | 3 | 4 | null
+  gridRef?: React.Ref<HTMLDivElement>
+}) {
+  if (isEmpty) {
+    // Phase 5 — multi-column sections render a silhouette of ghost cells so
+    // the column structure is visible before any field is dropped. The
+    // single-column case keeps the legacy big-rectangle for regression safety.
+    if (view.columns === 1) {
+      return <GridSlot sectionKey={view.key} columnIndex={null} isEmpty copy={emptyCopy} />
+    }
+    const cellTarget: CellTarget | null =
+      gridDropTarget && gridDropTarget.kind === 'cell' ? gridDropTarget : null
+    return (
+      <div ref={gridRef} className={sectionGridClasses(view.columns, view.gap)}>
+        {Array.from({ length: view.columns }).map((_, c) => {
+          const showCellGhost =
+            !!cellTarget && cellTarget.rowIndex === 0 && cellTarget.columnIndex === c
+          return (
+            <div key={`empty-cell-${c}`} className="relative">
+              <SectionCellSlot
+                sectionKey={view.key}
+                rowIndex={0}
+                columnIndex={c}
+                copy={c === 0 ? emptyCopy : ''}
+              />
+              {showCellGhost ? <GhostCell /> : null}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (view.columns === 1 || !layoutPlan || !renderField) {
+    return (
+      <div ref={gridRef} className={sectionGridClasses(view.columns, view.gap)}>
+        {children}
+        <div className="sm:col-span-full md:col-span-full">
+          <GridSlot sectionKey={view.key} columnIndex={null} copy={emptyCopy} />
+        </div>
+      </div>
+    )
+  }
+
+  const rowGapTarget: RowGapTarget | null =
+    gridDropTarget && gridDropTarget.kind === 'row-gap' ? gridDropTarget : null
+  const colGapTarget: ColGapTarget | null =
+    gridDropTarget && gridDropTarget.kind === 'col-gap' ? gridDropTarget : null
+  const cellTarget: CellTarget | null =
+    gridDropTarget && gridDropTarget.kind === 'cell' ? gridDropTarget : null
+
+  // Decision 6b — per-cell + per-gap droppables; column hint is informational.
+  return (
+    <div ref={gridRef} className={sectionGridClasses(view.columns, view.gap)}>
+      {layoutPlan.rows.map((row, rowIndex) => (
+        <React.Fragment key={`row-${rowIndex}`}>
+          <SectionRowGapDrop sectionKey={view.key} rowIndex={rowIndex} />
+          {rowGapTarget && rowGapTarget.rowIndex === rowIndex ? (
+            <div className="relative col-span-full h-0">
+              <HorizontalDropBar position="top" />
+            </div>
+          ) : null}
+          {row.cells.map((cell, cellIndex) => {
+            const showLeftColGap =
+              !!colGapTarget &&
+              colGapTarget.rowIndex === rowIndex &&
+              colGapTarget.columnIndex === cellIndex
+            const showRightColGap =
+              !!colGapTarget &&
+              colGapTarget.rowIndex === rowIndex &&
+              colGapTarget.columnIndex === view.columns &&
+              cellIndex === row.cells.length - 1
+            if (cell.kind === 'field') {
+              const isResizingThis =
+                !!resizingFieldKey &&
+                resizingFieldKey === cell.fieldKey &&
+                !!resizingPreviewSpan
+              const previewSpan = isResizingThis
+                ? (Math.min(resizingPreviewSpan ?? cell.span, view.columns) as 1 | 2 | 3 | 4)
+                : cell.span
+              const spanClass = SPAN_TO_GRID_CLASS[previewSpan]
+              const isLastCell = cellIndex === row.cells.length - 1
+              return (
+                <div key={`cell-${rowIndex}-${cellIndex}`} className={`relative ${spanClass}`}>
+                  <SectionColGapDrop
+                    sectionKey={view.key}
+                    rowIndex={rowIndex}
+                    columnIndex={cellIndex}
+                    edge="left"
+                  />
+                  {showLeftColGap ? <VerticalDropBar position="left" /> : null}
+                  {renderField(cell.fieldKey, cell.linearIndex)}
+                  {isResizingThis ? <GhostCell /> : null}
+                  {isLastCell ? (
+                    <SectionColGapDrop
+                      sectionKey={view.key}
+                      rowIndex={rowIndex}
+                      columnIndex={view.columns}
+                      edge="right"
+                    />
+                  ) : null}
+                  {showRightColGap ? <VerticalDropBar position="right" /> : null}
+                </div>
+              )
+            }
+            const showCellGhost =
+              !!cellTarget &&
+              cellTarget.rowIndex === rowIndex &&
+              cellTarget.columnIndex === cellIndex
+            return (
+              <div key={`cell-${rowIndex}-${cellIndex}`} className="relative">
+                {showLeftColGap ? <VerticalDropBar position="left" /> : null}
+                <SectionCellSlot
+                  sectionKey={view.key}
+                  rowIndex={rowIndex}
+                  columnIndex={cellIndex}
+                  copy={emptyCopy}
+                />
+                {showCellGhost ? <GhostCell /> : null}
+              </div>
+            )
+          })}
+        </React.Fragment>
+      ))}
+      <SectionRowGapDrop sectionKey={view.key} rowIndex={layoutPlan.rows.length} />
+      {rowGapTarget && rowGapTarget.rowIndex === layoutPlan.rows.length ? (
+        <div className="relative col-span-full h-0">
+          <HorizontalDropBar position="top" />
+        </div>
+      ) : null}
+      <div className="sm:col-span-full md:col-span-full">
+        <GridSlot sectionKey={view.key} columnIndex={null} copy={emptyCopy} />
+      </div>
+    </div>
+  )
+}
+
+const SPAN_TO_GRID_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',
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/grid-collision.ts

@@ -0,0 +1,25 @@
+// Decision 2a — gap droppables win over cells when the pointer is inside one.
+import {
+  closestCenter,
+  closestCorners,
+  pointerWithin,
+  type Collision,
+  type CollisionDetection,
+} from '@dnd-kit/core'
+import { parseSectionDropId } from './GridSlot'
+
+function isGapCollision(collision: Collision): boolean {
+  const parsed = parseSectionDropId(String(collision.id))
+  return parsed?.kind === 'col-gap' || parsed?.kind === 'row-gap'
+}
+
+export const gridAwareCollision: CollisionDetection = (args) => {
+  const pointerHits = pointerWithin(args)
+  if (pointerHits.length > 0) {
+    const gapHits = pointerHits.filter(isGapCollision)
+    if (gapHits.length > 0) return gapHits
+  }
+  const cornerHits = closestCorners(args)
+  if (cornerHits.length > 0) return cornerHits
+  return closestCenter(args)
+}