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

package/src/modules/forms/runner/MatrixField.tsx

@@ -0,0 +1,210 @@
+'use client'
+
+import * as React from 'react'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+
+/**
+ * Phase F — Matrix / Likert renderer shared by `PreviewSurface` and
+ * `FormRunner` (mirrors the Phase E `RankingField` factoring).
+ *
+ * Decision 5 — per-row `multiple: true` produces a checkbox row (string[]
+ * value). Single-select rows render a radio group so respondents can only
+ * pick one column per row. The sticky header keeps column captions visible
+ * when the grid scrolls horizontally on narrow viewports.
+ */
+
+export type MatrixFieldRow = {
+  key: string
+  label: { [locale: string]: string }
+  multiple?: boolean
+  required?: boolean
+}
+
+export type MatrixFieldColumn = {
+  value: string
+  label: { [locale: string]: string }
+}
+
+export type MatrixFieldProps = {
+  /** Stable DOM id prefix (`preview-<key>` or `runner-<key>`). */
+  idPrefix: string
+  rows: ReadonlyArray<MatrixFieldRow>
+  columns: ReadonlyArray<MatrixFieldColumn>
+  value: unknown
+  onChange: (next: Record<string, string | string[]>) => void
+  locale: string
+  /** When false, the inputs are disabled (preview read-only). */
+  readOnly?: boolean
+  t: TranslateFn
+}
+
+function resolveLocalizedLabel(map: { [locale: string]: string } | undefined, locale: string, fallback: string): string {
+  if (!map) return fallback
+  const exact = map[locale]
+  if (typeof exact === 'string' && exact.length > 0) return exact
+  const en = map.en
+  if (typeof en === 'string' && en.length > 0) return en
+  for (const value of Object.values(map)) {
+    if (typeof value === 'string' && value.length > 0) return value
+  }
+  return fallback
+}
+
+function readRowValue(value: unknown, rowKey: string): string | string[] | undefined {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined
+  const entry = (value as Record<string, unknown>)[rowKey]
+  if (typeof entry === 'string') return entry
+  if (Array.isArray(entry)) return entry.filter((inner): inner is string => typeof inner === 'string')
+  return undefined
+}
+
+function buildNextValue(
+  current: unknown,
+  rowKey: string,
+  next: string | string[] | undefined,
+): Record<string, string | string[]> {
+  const base: Record<string, string | string[]> = {}
+  if (current && typeof current === 'object' && !Array.isArray(current)) {
+    for (const [key, entry] of Object.entries(current as Record<string, unknown>)) {
+      if (typeof entry === 'string') base[key] = entry
+      else if (Array.isArray(entry)) {
+        base[key] = entry.filter((inner): inner is string => typeof inner === 'string')
+      }
+    }
+  }
+  if (next === undefined) {
+    delete base[rowKey]
+  } else {
+    base[rowKey] = next
+  }
+  return base
+}
+
+export function MatrixField({
+  idPrefix,
+  rows,
+  columns,
+  value,
+  onChange,
+  locale,
+  readOnly = false,
+  t,
+}: MatrixFieldProps) {
+  if (rows.length === 0 || columns.length === 0) {
+    return (
+      <p className="text-xs text-muted-foreground">
+        {t('forms.studio.field.matrix.empty')}
+      </p>
+    )
+  }
+  return (
+    <div className="overflow-x-auto rounded-md border border-border bg-card">
+      <table className="w-full border-collapse text-sm">
+        <thead>
+          <tr>
+            <th
+              scope="col"
+              className="sticky top-0 z-10 bg-muted/60 px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+            />
+            {columns.map((column) => {
+              const label = resolveLocalizedLabel(column.label, locale, column.value)
+              return (
+                <th
+                  key={column.value}
+                  scope="col"
+                  className="sticky top-0 z-10 bg-muted/60 px-3 py-2 text-center text-xs font-medium text-foreground"
+                >
+                  {label}
+                </th>
+              )
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const rowLabel = resolveLocalizedLabel(row.label, locale, row.key)
+            const rowValue = readRowValue(value, row.key)
+            const cells = (
+              <>
+                <th
+                  scope="row"
+                  className="px-3 py-2 text-left text-xs font-medium text-foreground align-middle"
+                >
+                  {rowLabel}
+                  {row.required ? (
+                    <span className="ml-1 text-status-error-text" aria-hidden="true">*</span>
+                  ) : null}
+                </th>
+                {columns.map((column) => {
+                  const colLabel = resolveLocalizedLabel(column.label, locale, column.value)
+                  const cellLabel = `${rowLabel} — ${colLabel}`
+                  if (row.multiple === true) {
+                    const checked =
+                      Array.isArray(rowValue) && rowValue.includes(column.value)
+                    return (
+                      <td key={column.value} className="px-3 py-2 text-center align-middle">
+                        <Checkbox
+                          id={`${idPrefix}-${row.key}-${column.value}`}
+                          aria-label={cellLabel}
+                          disabled={readOnly}
+                          checked={checked}
+                          onCheckedChange={(nextChecked) => {
+                            const current = Array.isArray(rowValue) ? [...rowValue] : []
+                            if (nextChecked) {
+                              if (!current.includes(column.value)) current.push(column.value)
+                            } else {
+                              const index = current.indexOf(column.value)
+                              if (index >= 0) current.splice(index, 1)
+                            }
+                            const nextRow: string[] | undefined =
+                              current.length === 0 ? undefined : current
+                            onChange(buildNextValue(value, row.key, nextRow))
+                          }}
+                        />
+                      </td>
+                    )
+                  }
+                  return (
+                    <td key={column.value} className="px-3 py-2 text-center align-middle">
+                      <Radio
+                        id={`${idPrefix}-${row.key}-${column.value}`}
+                        value={column.value}
+                        aria-label={cellLabel}
+                        disabled={readOnly}
+                        className="mx-auto"
+                      />
+                    </td>
+                  )
+                })}
+              </>
+            )
+            if (row.multiple === true) {
+              return (
+                <tr key={row.key} className="border-t border-border">
+                  {cells}
+                </tr>
+              )
+            }
+            return (
+              <RadioGroup
+                key={row.key}
+                asChild
+                value={typeof rowValue === 'string' ? rowValue : ''}
+                disabled={readOnly}
+                onValueChange={(nextValue) => {
+                  onChange(buildNextValue(value, row.key, nextValue))
+                }}
+              >
+                <tr className="border-t border-border">
+                  {cells}
+                </tr>
+              </RadioGroup>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/modules/forms/runner/RankingField.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import * as React from 'react'
+import { GripVertical } from 'lucide-react'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+
+/**
+ * Phase E — Ranking renderer shared by `PreviewSurface` and `FormRunner`.
+ *
+ * Behavior (Decision 4 — partial allowed by default):
+ * - Authors define options via `x-om-options` (same as select_one / select_many).
+ * - Respondents drag entries up/down to assemble a rank order. Items the
+ *   respondent has not yet placed sit at the bottom of the list with a muted
+ *   rank chip (`—`). Dragging an unranked item up implicitly enters it into
+ *   the rank order; dragging a ranked item past the boundary unranks it.
+ * - Keyboard accessibility comes from `@dnd-kit/sortable`'s
+ *   `sortableKeyboardCoordinates` coordinate getter (arrow keys reorder).
+ * - Touch targets honor the 44px minimum (`h-11`).
+ *
+ * The persisted value is the rank-ordered prefix of option values; unranked
+ * items never appear in the value. The dnd-kit list combines ranked + unranked
+ * into one sortable so reordering across the boundary is intuitive.
+ */
+
+export type RankingFieldOption = {
+  value: string
+  label: string
+}
+
+export type RankingFieldProps = {
+  /** Stable DOM id prefix (`preview-<key>` or `runner-<key>`). */
+  idPrefix: string
+  options: ReadonlyArray<RankingFieldOption>
+  /** Current rank-ordered value (array of option values). */
+  value: ReadonlyArray<string>
+  /** Receives the next rank-ordered value. */
+  onChange: (next: string[]) => void
+  /** When false, drag/keyboard interactions are disabled (preview read-only). */
+  canEdit: boolean
+  t: TranslateFn
+}
+
+type RankingRow = {
+  id: string
+  value: string
+  label: string
+  rank: number | null
+}
+
+/**
+ * Builds a single sortable row list: every ranked option (in user order)
+ * followed by every unranked option (in author-declared order). The id of
+ * each row is the option value (option values are unique in `x-om-options`).
+ */
+function buildRows(
+  options: ReadonlyArray<RankingFieldOption>,
+  value: ReadonlyArray<string>,
+): RankingRow[] {
+  const optionByValue = new Map<string, RankingFieldOption>()
+  for (const option of options) optionByValue.set(option.value, option)
+  const ranked: RankingRow[] = []
+  const seen = new Set<string>()
+  let rank = 1
+  for (const entry of value) {
+    if (seen.has(entry)) continue
+    const option = optionByValue.get(entry)
+    if (!option) continue
+    seen.add(entry)
+    ranked.push({ id: option.value, value: option.value, label: option.label, rank })
+    rank += 1
+  }
+  const unranked: RankingRow[] = []
+  for (const option of options) {
+    if (seen.has(option.value)) continue
+    unranked.push({ id: option.value, value: option.value, label: option.label, rank: null })
+  }
+  return [...ranked, ...unranked]
+}
+
+export function RankingField({
+  idPrefix,
+  options,
+  value,
+  onChange,
+  canEdit,
+  t,
+}: RankingFieldProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+  const rows = React.useMemo(() => buildRows(options, value), [options, value])
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      if (!canEdit) return
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+      const oldIndex = rows.findIndex((row) => row.id === active.id)
+      const newIndex = rows.findIndex((row) => row.id === over.id)
+      if (oldIndex < 0 || newIndex < 0) return
+      const reordered = arrayMove(rows, oldIndex, newIndex)
+      // The new ranked prefix is every entry whose target index is strictly
+      // less than the count of items currently in `value` after adding the
+      // moved item. For simplicity, after a manual reorder we treat every
+      // entry the user has *touched* (i.e. that appeared in `value` OR was
+      // moved into a position above an already-ranked entry) as ranked.
+      // The simplest invariant: respect the user's manual order — every row
+      // up to and including the moved one becomes ranked. This matches the
+      // typical Typeform-style ranking UX.
+      const nextValue: string[] = []
+      const movedIndex = newIndex
+      for (let i = 0; i <= movedIndex; i += 1) {
+        nextValue.push(reordered[i].value)
+      }
+      // Preserve any other previously-ranked items that ended up below the
+      // moved row — that way dragging an already-ranked entry within the
+      // ranked prefix doesn't accidentally unrank later entries.
+      const previouslyRanked = new Set(value)
+      for (let i = movedIndex + 1; i < reordered.length; i += 1) {
+        const row = reordered[i]
+        if (previouslyRanked.has(row.value)) nextValue.push(row.value)
+      }
+      onChange(nextValue)
+    },
+    [canEdit, onChange, rows, value],
+  )
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={rows.map((row) => row.id)} strategy={verticalListSortingStrategy}>
+        <ul className="space-y-1" aria-label={t('forms.runner.field.ranking.dragHandle')}>
+          {rows.map((row) => (
+            <RankingRowItem
+              key={row.id}
+              row={row}
+              idPrefix={idPrefix}
+              canEdit={canEdit}
+              t={t}
+            />
+          ))}
+        </ul>
+      </SortableContext>
+    </DndContext>
+  )
+}
+
+type RankingRowItemProps = {
+  row: RankingRow
+  idPrefix: string
+  canEdit: boolean
+  t: TranslateFn
+}
+
+function RankingRowItem({ row, idPrefix, canEdit, t }: RankingRowItemProps) {
+  const sortable = useSortable({ id: row.id, disabled: !canEdit })
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(sortable.transform),
+    transition: sortable.transition,
+  }
+  const isRanked = row.rank !== null
+  const chipText = isRanked ? String(row.rank) : '—'
+  const itemId = `${idPrefix}-rank-${row.value}`
+  return (
+    <li
+      ref={sortable.setNodeRef}
+      style={style}
+      id={itemId}
+      className={
+        'flex h-11 items-center gap-2 rounded-md border border-border bg-card px-2 '
+        + (isRanked ? 'text-foreground' : 'text-muted-foreground')
+      }
+    >
+      <Tag variant="neutral">{chipText}</Tag>
+      <span className="flex-1 text-sm">{row.label}</span>
+      <IconButton
+        type="button"
+        variant="ghost"
+        size="lg"
+        aria-label={t('forms.runner.field.ranking.dragHandle')}
+        disabled={!canEdit}
+        className="text-muted-foreground hover:text-foreground"
+        {...sortable.listeners}
+        {...sortable.attributes}
+      >
+        <GripVertical aria-hidden="true" className="size-4" />
+      </IconButton>
+    </li>
+  )
+}

package/src/modules/forms/runner/ScaleField.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Slider } from '@open-mercato/ui/primitives/slider'
+
+export type ScaleFieldProps = {
+  min: number
+  max: number
+  value: number | null
+  onChange: (value: number) => void
+  disabled?: boolean
+  readOnly?: boolean
+  ariaLabel?: string
+  id?: string
+}
+
+// Above this many discrete steps a button row stops being practical, so we
+// fall back to a slider with a value bubble that tracks the thumb.
+const BUTTON_THRESHOLD = 11
+
+export function ScaleField({
+  min,
+  max,
+  value,
+  onChange,
+  disabled = false,
+  readOnly = false,
+  ariaLabel,
+  id,
+}: ScaleFieldProps) {
+  const safeMax = max < min ? min : max
+  const interactive = !disabled && !readOnly
+
+  const steps = React.useMemo(() => {
+    const result: number[] = []
+    for (let entry = min; entry <= safeMax; entry += 1) result.push(entry)
+    return result
+  }, [min, safeMax])
+
+  if (steps.length <= BUTTON_THRESHOLD) {
+    return (
+      <div className="flex flex-wrap gap-2" role="group" aria-label={ariaLabel}>
+        {steps.map((entry) => {
+          const selected = value === entry
+          return (
+            <Button
+              key={entry}
+              type="button"
+              variant="outline"
+              disabled={!interactive}
+              aria-pressed={selected}
+              onClick={() => onChange(entry)}
+              className={
+                'h-10 min-w-10 px-2 text-sm font-medium tabular-nums '
+                + (selected
+                  ? 'border-accent-indigo bg-accent-indigo text-accent-indigo-foreground'
+                  : 'border-border bg-background text-foreground hover:border-accent-indigo hover:text-accent-indigo')
+              }
+            >
+              {entry}
+            </Button>
+          )
+        })}
+      </div>
+    )
+  }
+
+  const sliderValue = value ?? min
+  const pct = safeMax > min ? ((sliderValue - min) / (safeMax - min)) * 100 : 0
+  return (
+    <div className="space-y-2">
+      <div className="relative h-7">
+        <div
+          className="pointer-events-none absolute top-0"
+          style={{ left: `${pct}%`, transform: `translateX(-${pct}%)` }}
+        >
+          <span className="inline-flex min-w-7 justify-center rounded-md bg-foreground px-1.5 py-0.5 text-xs font-medium tabular-nums text-background">
+            {value ?? '–'}
+          </span>
+        </div>
+      </div>
+      <Slider
+        id={id}
+        min={min}
+        max={safeMax}
+        step={1}
+        value={[sliderValue]}
+        disabled={!interactive}
+        aria-label={ariaLabel}
+        onValueChange={(next) => {
+          const nextValue = next[0]
+          if (typeof nextValue === 'number') onChange(nextValue)
+        }}
+      />
+      <div className="flex justify-between text-xs tabular-nums text-muted-foreground">
+        <span>{min}</span>
+        <span>{safeMax}</span>
+      </div>
+    </div>
+  )
+}

package/src/modules/forms/runner/SignatureField.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+export type SignatureCaptureMode = 'drawn' | 'typed'
+
+export type SignatureCanvasProps = {
+  value: string | null
+  onChange: (dataUrl: string | null) => void
+  disabled?: boolean
+  ariaLabel?: string
+  clearLabel: string
+}
+
+/**
+ * Mobile / tablet-first signature canvas. Strokes are captured via pointer
+ * events with `touch-action: none` so a finger or stylus drag draws instead of
+ * scrolling the page. On pointer-up the canvas is exported to a PNG data URL.
+ */
+export function SignatureCanvas({
+  value,
+  onChange,
+  disabled = false,
+  ariaLabel,
+  clearLabel,
+}: SignatureCanvasProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement | null>(null)
+  const drawingRef = React.useRef(false)
+  const lastPointRef = React.useRef<{ x: number; y: number } | null>(null)
+  const hasStrokesRef = React.useRef(false)
+
+  const getContext = React.useCallback((): CanvasRenderingContext2D | null => {
+    const canvas = canvasRef.current
+    if (!canvas) return null
+    const context = canvas.getContext('2d')
+    if (!context) return null
+    context.lineCap = 'round'
+    context.lineJoin = 'round'
+    context.lineWidth = 2
+    context.strokeStyle = getComputedStyle(canvas).color
+    return context
+  }, [])
+
+  const pointFromEvent = React.useCallback((event: React.PointerEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current
+    if (!canvas) return { x: 0, y: 0 }
+    const rect = canvas.getBoundingClientRect()
+    const scaleX = canvas.width / rect.width
+    const scaleY = canvas.height / rect.height
+    return {
+      x: (event.clientX - rect.left) * scaleX,
+      y: (event.clientY - rect.top) * scaleY,
+    }
+  }, [])
+
+  const handlePointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLCanvasElement>) => {
+      if (disabled) return
+      event.preventDefault()
+      const context = getContext()
+      if (!context) return
+      canvasRef.current?.setPointerCapture(event.pointerId)
+      drawingRef.current = true
+      lastPointRef.current = pointFromEvent(event)
+    },
+    [disabled, getContext, pointFromEvent],
+  )
+
+  const handlePointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLCanvasElement>) => {
+      if (!drawingRef.current || disabled) return
+      event.preventDefault()
+      const context = getContext()
+      const last = lastPointRef.current
+      if (!context || !last) return
+      const point = pointFromEvent(event)
+      context.beginPath()
+      context.moveTo(last.x, last.y)
+      context.lineTo(point.x, point.y)
+      context.stroke()
+      lastPointRef.current = point
+      hasStrokesRef.current = true
+    },
+    [disabled, getContext, pointFromEvent],
+  )
+
+  const commit = React.useCallback(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    if (!hasStrokesRef.current) return
+    onChange(canvas.toDataURL('image/png'))
+  }, [onChange])
+
+  const handlePointerUp = React.useCallback(
+    (event: React.PointerEvent<HTMLCanvasElement>) => {
+      if (!drawingRef.current) return
+      drawingRef.current = false
+      lastPointRef.current = null
+      canvasRef.current?.releasePointerCapture(event.pointerId)
+      commit()
+    },
+    [commit],
+  )
+
+  const clear = React.useCallback(() => {
+    const canvas = canvasRef.current
+    const context = canvas?.getContext('2d')
+    if (canvas && context) context.clearRect(0, 0, canvas.width, canvas.height)
+    hasStrokesRef.current = false
+    onChange(null)
+  }, [onChange])
+
+  return (
+    <div className="flex flex-col gap-2">
+      <canvas
+        ref={canvasRef}
+        width={600}
+        height={200}
+        role="img"
+        aria-label={ariaLabel}
+        className="w-full rounded-md border border-input bg-background"
+        style={{ touchAction: 'none', cursor: disabled ? 'not-allowed' : 'crosshair', aspectRatio: '3 / 1' }}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerLeave={handlePointerUp}
+      />
+      <div>
+        <Button
+          type="button"
+          variant="link"
+          size="2xs"
+          disabled={disabled || !value}
+          onClick={clear}
+          className="h-auto px-0 py-0 text-xs text-muted-foreground"
+        >
+          {clearLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * SHA-256 hex digest of the resolved consent clause text via Web Crypto.
+ * Returns `null` when the crypto subtle API is unavailable (older runtime /
+ * insecure context) so the caller can decline to set a partial value.
+ */
+export async function computeClauseSha256(clauseText: string): Promise<string | null> {
+  const subtle = globalThis.crypto?.subtle
+  if (!subtle) return null
+  const bytes = new TextEncoder().encode(clauseText)
+  const digest = await subtle.digest('SHA-256', bytes)
+  return Array.from(new Uint8Array(digest))
+    .map((byte) => byte.toString(16).padStart(2, '0'))
+    .join('')
+}