@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/keyboard-coordinates.ts

@@ -0,0 +1,128 @@
+// Phase 7 — grid-aware keyboard coordinate getter.
+//
+// `@dnd-kit/sortable`'s `sortableKeyboardCoordinates` only steps along the
+// linear sortable list; in a multi-column section grid, arrow keys cannot
+// traverse columns. This module wraps the default getter with a pure
+// "compute next coordinates" helper for the grid case and a DOM-aware
+// `KeyboardCoordinateGetter` that detects the active draggable's parent
+// section (via `data-section-key`) and decides whether to apply grid math
+// or fall back to the default sortable behaviour.
+//
+// The pure `nextGridCoordinates` helper is exported separately so unit
+// tests can pin direction → delta mapping without DOM scaffolding.
+
+import { KeyboardCode, type KeyboardCoordinateGetter } from '@dnd-kit/core'
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+import { FIELD_DRAGGABLE_PREFIX } from './FieldRow'
+
+export type GridDirection = 'up' | 'down' | 'left' | 'right'
+
+const ARROW_TO_DIRECTION: Record<string, GridDirection> = {
+  [KeyboardCode.Up]: 'up',
+  [KeyboardCode.Down]: 'down',
+  [KeyboardCode.Left]: 'left',
+  [KeyboardCode.Right]: 'right',
+}
+
+export function nextGridCoordinates(input: {
+  current: { x: number; y: number }
+  direction: GridDirection
+  rowHeight: number
+  colWidth: number
+  gapPx: number
+}): { x: number; y: number } {
+  const { current, direction, rowHeight, colWidth, gapPx } = input
+  const safeRow = Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : 0
+  const safeCol = Number.isFinite(colWidth) && colWidth > 0 ? colWidth : 0
+  const safeGap = Number.isFinite(gapPx) && gapPx >= 0 ? gapPx : 0
+  const xStep = safeCol + safeGap
+  const yStep = safeRow + safeGap
+  switch (direction) {
+    case 'up':
+      return { x: current.x, y: current.y - yStep }
+    case 'down':
+      return { x: current.x, y: current.y + yStep }
+    case 'left':
+      return { x: current.x - xStep, y: current.y }
+    case 'right':
+      return { x: current.x + xStep, y: current.y }
+    default:
+      return current
+  }
+}
+
+function findSectionElement(activeId: string): HTMLElement | null {
+  if (typeof document === 'undefined') return null
+  if (!activeId.startsWith(FIELD_DRAGGABLE_PREFIX)) return null
+  const fieldKey = activeId.slice(FIELD_DRAGGABLE_PREFIX.length)
+  if (!fieldKey) return null
+  const fieldNode = document.querySelector<HTMLElement>(`[data-field-key="${CSS.escape(fieldKey)}"]`)
+  if (!fieldNode) return null
+  return fieldNode.closest<HTMLElement>('[data-section-key]')
+}
+
+function readSectionColumns(section: HTMLElement): number {
+  // The grid wrapper is the section's first descendant with `display: grid`.
+  // We rely on `gridTemplateColumns` because Tailwind's responsive classes
+  // resolve to a concrete CSS value at runtime.
+  const grids = section.querySelectorAll<HTMLElement>(':scope div')
+  for (const node of Array.from(grids)) {
+    const style = typeof window !== 'undefined' ? window.getComputedStyle(node) : null
+    if (!style) continue
+    if (style.display !== 'grid') continue
+    const template = style.gridTemplateColumns
+    if (!template || template === 'none') continue
+    return template.split(' ').filter(Boolean).length
+  }
+  return 1
+}
+
+function readGridGap(section: HTMLElement): number {
+  const grids = section.querySelectorAll<HTMLElement>(':scope div')
+  for (const node of Array.from(grids)) {
+    const style = typeof window !== 'undefined' ? window.getComputedStyle(node) : null
+    if (!style) continue
+    if (style.display !== 'grid') continue
+    const raw = style.columnGap || style.gap || '0'
+    const parsed = Number.parseFloat(raw)
+    return Number.isFinite(parsed) ? parsed : 0
+  }
+  return 0
+}
+
+/**
+ * KeyboardCoordinateGetter that adds left/right column traversal for
+ * field draggables sitting inside multi-column section grids. Falls back
+ * to the standard sortable coordinate getter for sections, ungrouped
+ * fields, and single-column sections so existing keyboard behaviour
+ * stays identical.
+ */
+export const gridKeyboardCoordinates: KeyboardCoordinateGetter = (event, args) => {
+  const direction = ARROW_TO_DIRECTION[event.code]
+  if (!direction) return sortableKeyboardCoordinates(event, args)
+
+  const activeId = String(args.active)
+  const section = findSectionElement(activeId)
+  if (!section) return sortableKeyboardCoordinates(event, args)
+
+  const columns = readSectionColumns(section)
+  if (columns <= 1) return sortableKeyboardCoordinates(event, args)
+
+  const sectionRect = section.getBoundingClientRect()
+  if (!sectionRect || sectionRect.width <= 0) return sortableKeyboardCoordinates(event, args)
+
+  const gapPx = readGridGap(section)
+  const colWidth = (sectionRect.width - gapPx * (columns - 1)) / columns
+  const collisionRect = args.context.collisionRect
+  const rowHeight = collisionRect?.height ?? sectionRect.height / Math.max(1, columns)
+
+  const current = args.currentCoordinates
+  event.preventDefault()
+  return nextGridCoordinates({
+    current,
+    direction,
+    rowHeight,
+    colWidth,
+    gapPx,
+  })
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/overlay-size.ts

@@ -0,0 +1,15 @@
+// Phase 4 — pure helper that returns the pixel width the DragOverlay should
+// render at so what's being dragged matches the target cell's footprint.
+import { GAP_PX } from './resize-math'
+
+export function computeOverlayWidthPx(input: {
+  sectionWidthPx: number
+  columns: 1 | 2 | 3 | 4
+  span: 1 | 2 | 3 | 4
+  gap: 'sm' | 'md' | 'lg'
+}): number {
+  const gapPx = GAP_PX[input.gap]
+  const colWidth = (input.sectionWidthPx - (input.columns - 1) * gapPx) / input.columns
+  const clampedSpan = Math.max(1, Math.min(input.span, input.columns))
+  return clampedSpan * colWidth + (clampedSpan - 1) * gapPx
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/resize-math.ts

@@ -0,0 +1,36 @@
+import type { RowLayoutSpan } from './row-layout'
+
+export const GAP_PX: Record<'sm' | 'md' | 'lg', number> = {
+  sm: 8,
+  md: 16,
+  lg: 24,
+}
+
+export type ResizedSpanInput = {
+  sectionLeft: number
+  sectionWidth: number
+  fieldLeft: number
+  pointerClientX: number
+  columns: 1 | 2 | 3 | 4
+  startSpan: 1 | 2 | 3 | 4
+  gapPx: number
+}
+
+function clampSpan(value: number, lo: number, hi: number): RowLayoutSpan {
+  const bounded = Math.max(lo, Math.min(hi, value))
+  return (bounded < 1 ? 1 : bounded > 4 ? 4 : bounded) as RowLayoutSpan
+}
+
+export function computeResizedSpan(input: ResizedSpanInput): RowLayoutSpan {
+  const { sectionLeft, sectionWidth, fieldLeft, pointerClientX, columns, startSpan, gapPx } = input
+  if (columns <= 1) return 1
+  const safeWidth = sectionWidth > 0 ? sectionWidth : 0
+  const colWidth = (safeWidth - (columns - 1) * gapPx) / columns
+  if (!Number.isFinite(colWidth) || colWidth <= 0) return startSpan
+  const startColIndexRaw = Math.round((fieldLeft - sectionLeft) / (colWidth + gapPx))
+  const startColIndex = Math.max(0, Math.min(columns - 1, startColIndexRaw))
+  const maxSpan = Math.max(1, columns - startColIndex)
+  const pointerDelta = pointerClientX - fieldLeft
+  const rawSpan = Math.ceil(pointerDelta / (colWidth + gapPx))
+  return clampSpan(rawSpan, 1, maxSpan)
+}

package/src/modules/forms/backend/forms/[id]/studio/canvas/row-layout.ts

@@ -0,0 +1,110 @@
+// Decision 6b — column hint maps to nearest linear index; layout is pure.
+
+export type RowLayoutSpan = 1 | 2 | 3 | 4
+
+export type RowLayoutCell =
+  | { kind: 'field'; fieldKey: string; span: RowLayoutSpan; linearIndex: number }
+  | { kind: 'empty'; span: 1 }
+
+export type RowLayoutRow = { cells: RowLayoutCell[] }
+
+export type RowLayout = {
+  rows: RowLayoutRow[]
+  columns: 1 | 2 | 3 | 4
+  totalFields: number
+}
+
+export function readSpan(value: unknown): RowLayoutSpan | undefined {
+  if (value === 1 || value === 2 || value === 3 || value === 4) return value
+  return undefined
+}
+
+function clampSpan(raw: number | undefined, columns: 1 | 2 | 3 | 4): RowLayoutSpan {
+  if (raw === undefined) return 1
+  const normalized = raw === 1 || raw === 2 || raw === 3 || raw === 4 ? raw : 1
+  const limit = Math.min(normalized, columns)
+  return (limit < 1 ? 1 : limit) as RowLayoutSpan
+}
+
+export function computeRowLayout(input: {
+  fieldKeys: string[]
+  spans: Record<string, number | undefined>
+  columns: 1 | 2 | 3 | 4
+}): RowLayout {
+  const { fieldKeys, spans, columns } = input
+  const rows: RowLayoutRow[] = []
+  let currentCells: RowLayoutCell[] = []
+  let currentUsed = 0
+
+  for (let i = 0; i < fieldKeys.length; i += 1) {
+    const key = fieldKeys[i]
+    const span = clampSpan(spans[key], columns)
+    if (currentUsed + span > columns) {
+      while (currentCells.length > 0 && currentUsed < columns) {
+        currentCells.push({ kind: 'empty', span: 1 })
+        currentUsed += 1
+      }
+      if (currentCells.length > 0) {
+        rows.push({ cells: currentCells })
+      }
+      currentCells = []
+      currentUsed = 0
+    }
+    currentCells.push({ kind: 'field', fieldKey: key, span, linearIndex: i })
+    currentUsed += span
+    if (currentUsed >= columns) {
+      rows.push({ cells: currentCells })
+      currentCells = []
+      currentUsed = 0
+    }
+  }
+
+  if (currentCells.length > 0) {
+    while (currentUsed < columns) {
+      currentCells.push({ kind: 'empty', span: 1 })
+      currentUsed += 1
+    }
+    rows.push({ cells: currentCells })
+  }
+
+  return { rows, columns, totalFields: fieldKeys.length }
+}
+
+type RowLayoutFieldCell = Extract<RowLayoutCell, { kind: 'field' }>
+
+function fieldsInRow(row: RowLayoutRow): RowLayoutFieldCell[] {
+  return row.cells.filter((cell): cell is RowLayoutFieldCell => cell.kind === 'field')
+}
+
+export function dropHintToLinearIndex(input: {
+  layout: RowLayout
+  rowIndex: number
+  columnIndex: number
+}): number {
+  const { layout, rowIndex, columnIndex } = input
+  if (layout.rows.length === 0) return 0
+  if (rowIndex >= layout.rows.length) return layout.totalFields
+
+  const safeRowIndex = rowIndex < 0 ? 0 : rowIndex
+  const row = layout.rows[safeRowIndex]
+  const fields = fieldsInRow(row)
+
+  if (fields.length === 0) {
+    let prior = 0
+    for (let r = 0; r < safeRowIndex; r += 1) {
+      prior += fieldsInRow(layout.rows[r]).length
+    }
+    return prior
+  }
+
+  let consumed = 0
+  for (let i = 0; i < row.cells.length; i += 1) {
+    const cell = row.cells[i]
+    if (consumed >= columnIndex) {
+      if (cell.kind === 'field') return cell.linearIndex
+      return fields[fields.length - 1].linearIndex + 1
+    }
+    consumed += cell.span
+  }
+  return fields[fields.length - 1].linearIndex + 1
+}

package/src/modules/forms/backend/forms/[id]/studio/logic/ConditionBuilder.tsx

@@ -0,0 +1,264 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { Trash2 } from '../lucide-icons'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  type ConditionBuilderModel,
+  type ConditionOperator,
+  type ConditionRow,
+  compilePredicate,
+  emptyModel,
+  newRow,
+  parsePredicate,
+} from './condition-model'
+import { resolveTypeLabel } from '../type-label'
+import type { FormSchema } from '../schema-helpers'
+
+export type ConditionSourceOption = {
+  value: string
+  label: string
+  fieldType?: string | null
+  namespace: 'field' | 'hidden' | 'variable'
+}
+
+export type ConditionBuilderProps = {
+  predicate: unknown | null
+  sources: ConditionSourceOption[]
+  onChange: (next: unknown | null) => void
+}
+
+const OPERATORS_BY_TYPE: Record<string, ConditionOperator[]> = {
+  text: ['eq', 'neq', 'contains', 'is_empty', 'is_not_empty'],
+  textarea: ['eq', 'neq', 'contains', 'is_empty', 'is_not_empty'],
+  date: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'is_empty', 'is_not_empty'],
+  datetime: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'is_empty', 'is_not_empty'],
+  number: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
+  integer: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
+  scale: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
+  boolean: ['is_true', 'is_false'],
+  yes_no: ['is_true', 'is_false'],
+  yes_no_buttons: ['is_true', 'is_false'],
+  select_one: ['eq', 'neq'],
+  select_many: ['contains'],
+}
+
+const FALLBACK_OPERATORS: ConditionOperator[] = ['eq', 'neq']
+
+function operatorOptions(source: ConditionSourceOption | undefined): ConditionOperator[] {
+  if (!source) return FALLBACK_OPERATORS
+  const fieldType = source.fieldType ?? undefined
+  if (fieldType && OPERATORS_BY_TYPE[fieldType]) return OPERATORS_BY_TYPE[fieldType]
+  if (source.namespace === 'variable') return ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'is_true', 'is_false']
+  if (source.namespace === 'hidden') return ['eq', 'neq', 'contains', 'is_empty', 'is_not_empty']
+  return FALLBACK_OPERATORS
+}
+
+export function ConditionBuilder({ predicate, sources, onChange }: ConditionBuilderProps) {
+  const t = useT()
+  const [model, setModel] = React.useState<ConditionBuilderModel>(() => parsePredicate(predicate))
+
+  React.useEffect(() => {
+    setModel(parsePredicate(predicate))
+  }, [predicate])
+
+  const commit = React.useCallback(
+    (nextModel: ConditionBuilderModel) => {
+      setModel(nextModel)
+      const compiled = compilePredicate(nextModel)
+      onChange(compiled)
+    },
+    [onChange],
+  )
+
+  const sourceByValue = React.useMemo(() => {
+    const map = new Map<string, ConditionSourceOption>()
+    for (const entry of sources) map.set(entry.value, entry)
+    return map
+  }, [sources])
+
+  if (model.raw !== null && model.rows.length === 0) {
+    return (
+      <div className="space-y-2">
+        <Tag variant="warning">{t('forms.studio.logic.visibility.rawShape')}</Tag>
+        <pre className="max-h-40 overflow-auto rounded-md border border-border bg-muted/30 p-2 text-xs">
+          {JSON.stringify(model.raw, null, 2)}
+        </pre>
+        <Button
+          variant="outline"
+          size="sm"
+          type="button"
+          onClick={() => commit(emptyModel())}
+        >
+          {t('forms.studio.logic.visibility.clear')}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3" data-testid="condition-builder">
+      <div className="flex items-center justify-between">
+        <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          {t('forms.studio.logic.visibility.heading')}
+        </h4>
+        <Button
+          variant="outline"
+          size="sm"
+          type="button"
+          onClick={() => commit({ ...model, rows: [...model.rows, newRow(sources[0]?.value ?? '')] })}
+        >
+          {t('forms.studio.logic.visibility.addRule')}
+        </Button>
+      </div>
+      {model.rows.length === 0 ? (
+        <p className="text-xs text-muted-foreground">{t('forms.studio.logic.visibility.always')}</p>
+      ) : null}
+      <div className="space-y-2">
+        {model.rows.map((row, index) => {
+          const sourceOption = sourceByValue.get(row.source)
+          const operators = operatorOptions(sourceOption)
+          const operator = operators.includes(row.operator) ? row.operator : operators[0] ?? 'eq'
+          const valueDisabled =
+            operator === 'is_empty' || operator === 'is_not_empty' || operator === 'is_true' || operator === 'is_false'
+          const updateRow = (partial: Partial<ConditionRow>) => {
+            const nextRows = model.rows.map((entry) => (entry.id === row.id ? { ...entry, ...partial } : entry))
+            commit({ ...model, rows: nextRows })
+          }
+          const removeRow = () => {
+            commit({ ...model, rows: model.rows.filter((entry) => entry.id !== row.id) })
+          }
+          return (
+            <div key={row.id} className="flex items-center gap-2" data-testid="condition-row">
+              {index > 0 ? (
+                <Tag variant="neutral" className="shrink-0 uppercase">
+                  {model.combine === 'and'
+                    ? t('forms.studio.logic.visibility.combine.and')
+                    : t('forms.studio.logic.visibility.combine.or')}
+                </Tag>
+              ) : null}
+              <Select value={row.source} onValueChange={(value) => updateRow({ source: value })}>
+                <SelectTrigger className="h-8 flex-1">
+                  <SelectValue placeholder={t('forms.studio.logic.visibility.sourcePlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {sources.map((source) => (
+                    <SelectItem key={source.value} value={source.value}>
+                      {source.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select
+                value={operator}
+                onValueChange={(value) => updateRow({ operator: value as ConditionOperator })}
+              >
+                <SelectTrigger className="h-8 w-32">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {operators.map((op) => (
+                    <SelectItem key={op} value={op}>
+                      {t(`forms.studio.logic.visibility.op.${op}`)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Input
+                className="h-8 w-32"
+                value={valueDisabled ? '' : String(row.value ?? '')}
+                disabled={valueDisabled}
+                onChange={(event) => updateRow({ value: event.target.value })}
+              />
+              <IconButton
+                aria-label={t('forms.studio.logic.visibility.remove')}
+                variant="ghost"
+                size="sm"
+                type="button"
+                onClick={removeRow}
+              >
+                <Trash2 className="size-4" />
+              </IconButton>
+            </div>
+          )
+        })}
+      </div>
+      {model.rows.length > 1 ? (
+        <div className="flex items-center gap-3">
+          <span className="text-xs text-muted-foreground">{t('forms.studio.logic.visibility.combineLabel')}</span>
+          <RadioGroup
+            value={model.combine}
+            onValueChange={(next) => commit({ ...model, combine: next as 'and' | 'or' })}
+            className="flex-row gap-3"
+          >
+            <RadioField value="and" label={t('forms.studio.logic.visibility.combine.and')} />
+            <RadioField value="or" label={t('forms.studio.logic.visibility.combine.or')} />
+          </RadioGroup>
+        </div>
+      ) : null}
+      {model.rows.length > 0 ? (
+        <details className="mt-2">
+          <summary className="cursor-pointer text-xs font-medium uppercase text-muted-foreground">
+            {t('forms.studio.logic.visibility.compiledJson')}
+          </summary>
+          <pre className="mt-1 max-h-40 overflow-auto rounded-md border border-border bg-muted/30 p-2 text-xs">
+            {JSON.stringify(compilePredicate(model), null, 2)}
+          </pre>
+        </details>
+      ) : null}
+    </div>
+  )
+}
+
+/** Convenience builder of source options from a `FormSchema`. */
+export function buildFieldSourceOptions(schema: FormSchema, currentLocale: string, t: ReturnType<typeof useT>): ConditionSourceOption[] {
+  const result: ConditionSourceOption[] = []
+  for (const [key, node] of Object.entries(schema.properties)) {
+    const omType = String((node as Record<string, unknown>)['x-om-type'] ?? '')
+    if (omType === 'info_block') continue
+    const labelMap = (node as Record<string, unknown>)['x-om-label']
+    const label =
+      labelMap && typeof labelMap === 'object' && !Array.isArray(labelMap)
+        ? String((labelMap as Record<string, unknown>)[currentLocale] ?? (labelMap as Record<string, unknown>).en ?? key)
+        : key
+    const typeLabel = resolveTypeLabel(omType, t)
+    result.push({ value: key, label: `${label} — ${typeLabel}`, fieldType: omType, namespace: 'field' })
+  }
+  const hiddenFields = (schema as Record<string, unknown>)['x-om-hidden-fields']
+  if (Array.isArray(hiddenFields)) {
+    for (const entry of hiddenFields) {
+      if (!entry || typeof entry !== 'object') continue
+      const name = (entry as Record<string, unknown>).name
+      if (typeof name !== 'string') continue
+      result.push({
+        value: `hidden.${name}`,
+        label: `${name} — ${t('forms.studio.logic.source.hidden')}`,
+        fieldType: null,
+        namespace: 'hidden',
+      })
+    }
+  }
+  const variables = (schema as Record<string, unknown>)['x-om-variables']
+  if (Array.isArray(variables)) {
+    for (const entry of variables) {
+      if (!entry || typeof entry !== 'object') continue
+      const name = (entry as Record<string, unknown>).name
+      if (typeof name !== 'string') continue
+      const variableType = String((entry as Record<string, unknown>).type ?? '')
+      result.push({
+        value: `var.${name}`,
+        label: `${name} — ${t('forms.studio.logic.source.variable')}`,
+        fieldType: variableType,
+        namespace: 'variable',
+      })
+    }
+  }
+  return result
+}

package/src/modules/forms/backend/forms/[id]/studio/logic/HiddenFieldsPanel.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Alert } from '@open-mercato/ui/primitives/alert'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Trash2 } from '../lucide-icons'
+import type { HiddenFieldEntry } from '../schema-helpers'
+
+const NAME_PATTERN = /^[a-z][a-z0-9_]*$/
+
+export type HiddenFieldsPanelProps = {
+  formId: string
+  entries: HiddenFieldEntry[]
+  onChange: (next: HiddenFieldEntry[]) => void
+}
+
+export function HiddenFieldsPanel({ formId, entries, onChange }: HiddenFieldsPanelProps) {
+  const t = useT()
+  const [draftName, setDraftName] = React.useState('')
+  const [draftDefault, setDraftDefault] = React.useState('')
+  const [error, setError] = React.useState<string | null>(null)
+  const urlSnippet = React.useMemo(() => {
+    if (entries.length === 0) return null
+    const query = entries.map((entry) => `${encodeURIComponent(entry.name)}=<value>`).join('&')
+    return `/forms/${encodeURIComponent(formId)}/run?${query}`
+  }, [entries, formId])
+
+  const handleAdd = () => {
+    const name = draftName.trim()
+    if (!NAME_PATTERN.test(name)) {
+      setError(t('forms.studio.parameters.hidden.error.name'))
+      return
+    }
+    if (entries.some((entry) => entry.name === name)) {
+      setError(t('forms.studio.parameters.hidden.error.duplicate'))
+      return
+    }
+    setError(null)
+    const trimmedDefault = draftDefault.trim()
+    const next: HiddenFieldEntry = trimmedDefault.length > 0
+      ? { name, defaultValue: trimmedDefault }
+      : { name }
+    onChange([...entries, next])
+    setDraftName('')
+    setDraftDefault('')
+  }
+
+  const handleRemove = (name: string) => {
+    onChange(entries.filter((entry) => entry.name !== name))
+  }
+
+  return (
+    <div className="space-y-3" data-testid="hidden-fields-panel">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-foreground">
+          {t('forms.studio.parameters.hidden.heading')}
+        </h3>
+      </div>
+      {entries.length === 0 ? (
+        <p className="text-xs text-muted-foreground">{t('forms.studio.parameters.hidden.empty')}</p>
+      ) : (
+        <ul className="space-y-1">
+          {entries.map((entry) => (
+            <li key={entry.name} className="flex items-center justify-between gap-2 rounded-md border border-border bg-background px-2 py-1">
+              <div className="flex flex-col">
+                <span className="font-mono text-xs text-foreground">{entry.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  {entry.defaultValue
+                    ? t('forms.studio.parameters.hidden.defaultLabel', { value: entry.defaultValue })
+                    : t('forms.studio.parameters.hidden.noDefault')}
+                </span>
+              </div>
+              <IconButton
+                aria-label={t('forms.studio.parameters.hidden.remove')}
+                variant="ghost"
+                size="sm"
+                type="button"
+                onClick={() => handleRemove(entry.name)}
+              >
+                <Trash2 className="size-4" />
+              </IconButton>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="space-y-2 rounded-md border border-dashed border-border p-2">
+        <div className="grid grid-cols-2 gap-2">
+          <Input
+            placeholder={t('forms.studio.parameters.hidden.namePlaceholder')}
+            value={draftName}
+            onChange={(event) => setDraftName(event.target.value)}
+          />
+          <Input
+            placeholder={t('forms.studio.parameters.hidden.defaultPlaceholder')}
+            value={draftDefault}
+            onChange={(event) => setDraftDefault(event.target.value)}
+          />
+        </div>
+        {error ? (
+          <Alert status="error" style="light">{error}</Alert>
+        ) : null}
+        <Button variant="outline" size="sm" type="button" onClick={handleAdd}>
+          {t('forms.studio.parameters.hidden.add')}
+        </Button>
+      </div>
+      {urlSnippet ? (
+        <div className="space-y-1">
+          <label className="block text-xs font-medium text-muted-foreground">
+            {t('forms.studio.parameters.hidden.urlSnippet.label')}
+          </label>
+          <div className="rounded-md border border-border bg-muted/30 px-2 py-1 font-mono text-xs text-muted-foreground break-all">
+            {urlSnippet}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}