@pilotiq/pilotiq 0.23.1 → 0.24.2

package/src/react/schemaRenderer/action/renderAction.tsx

@@ -1,245 +0,0 @@
-import React from 'react'
-import type { ElementMeta } from '../../../schema/Element.js'
-import { withTooltip } from '../helpers.js'
-import {
-  actionButtonClass,
-  renderActionBadge,
-  renderActionIcon,
-  type RenderActionOptions,
-} from './buttons.js'
-import { ActionGroupTrigger } from './ActionGroupTrigger.js'
-import { ActionModalDialog } from './ActionModalDialog.js'
-import { ConfirmActionDialog } from './ConfirmActionDialog.js'
-import { HandlerActionButton } from './HandlerActionButton.js'
-import { MethodActionButton } from './MethodActionButton.js'
-
-/**
- * Function-prop deps for action rendering — injected from
- * `SchemaRenderer.tsx`'s top-level dispatch. `renderElement` is needed
- * for slot-component pass-through and modal-content-footer; `renderFormChild`
- * is needed by `ActionModalDialog` for its form-body fields.
- */
-export interface ActionRendererDeps {
-  renderElement:  (el: ElementMeta, index: number) => React.ReactNode
-  renderFormChild: (child: ElementMeta, index: number, values: Record<string, unknown>, errors: Record<string, string[]>) => React.ReactNode
-}
-
-/** Render either a single Action or an ActionGroup based on `el.type`.
- * Used by callsites that accept both (table header / bulk toolbars,
- * heading actions, container schemas). */
-export function renderActionLike(
-  el:    ElementMeta,
-  index: number,
-  opts:  RenderActionOptions,
-  deps:  ActionRendererDeps,
-): React.ReactNode {
-  if (el.type === 'slotComponent') {
-    // Plugin-contributed React mount — render through the main element
-    // dispatcher, which looks up the registered component and forwards
-    // its serialised props bag. Keeps every action-row slot (heading
-    // children, alert footer, empty-state footer, table-toolbar bulk
-    // strip) usable as a plugin extension point.
-    return deps.renderElement(el, index)
-  }
-  if (el.type === 'actionGroup') {
-    return (
-      <ActionGroupTrigger
-        key={index}
-        el={el}
-        ids={opts.ids ?? []}
-        renderFormChild={deps.renderFormChild}
-        renderElement={deps.renderElement}
-      />
-    )
-  }
-  return renderAction(el, index, opts, deps)
-}
-
-/** Render a single `Action` element. Dispatches on the Action's mode
- *  (submit / href / method / handler) and chrome (confirm, modal). */
-export function renderAction(
-  el:    ElementMeta,
-  index: number,
-  opts:  RenderActionOptions,
-  deps:  ActionRendererDeps,
-): React.ReactNode {
-  const name        = String(el['name'] ?? '')
-  const label       = String(el['label'] ?? name)
-  const destructive = Boolean(el['destructive'])
-  const href        = el['href']        as string | undefined
-  const method      = el['method']      as 'post' | 'put' | 'patch' | 'delete' | undefined
-  const actionUrl   = el['action']      as string | undefined
-  const dispatchUrl = el['dispatchUrl'] as string | undefined
-  const submit      = Boolean(el['submit'])
-  const confirm     = el['confirm']     as { title?: string; message: string } | undefined
-  const tooltip     = el['tooltip'] as string | undefined
-  const iconOnly    = Boolean(el['iconOnly'])
-  const isDisabled  = Boolean(el['disabled'])
-
-  const className = actionButtonClass(el, opts) + (isDisabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '')
-  const icon  = renderActionIcon(el)
-  const badge = renderActionBadge(el)
-  // Icon-only buttons hide the label visually but expose it via aria-label.
-  const ariaLabel = iconOnly ? label : undefined
-  const inner = iconOnly ? <>{icon}{badge}</> : <>{icon}<span>{label}</span>{badge}</>
-
-  // Submit-style action — renders as <button type="submit">. Optionally
-  // targets a specific form via the HTML `form="<id>"` attribute so the
-  // button can submit a form it lives outside of (e.g. a page-header
-  // Save button driving a form below). When `formField` is set, the
-  // button posts a sentinel name/value pair (e.g. `_continueCreate=1`)
-  // so the server can branch on which submit was clicked.
-  if (submit) {
-    const formTarget = el['form'] as string | undefined
-    const formField  = el['formField'] as { name: string; value: string } | undefined
-    if (confirm) {
-      // Confirm-gated submit: render as type="button" so click opens the
-      // dialog instead of submitting; on confirm, programmatically submit
-      // the targeted form (or the closest enclosing form if no formTarget).
-      // `formField` is intentionally not threaded here — programmatic
-      // `requestSubmit()` has no submitter, so the name/value pair would
-      // be lost anyway. Pair `.confirm()` with a hidden input on the form
-      // if you need a sentinel under a confirm flow.
-      return (
-        <ConfirmActionDialog
-          key={index}
-          title={confirm.title}
-          message={confirm.message}
-          destructive={destructive}
-          onConfirm={() => {
-            if (typeof document === 'undefined') return
-            const form = formTarget
-              ? document.getElementById(formTarget) as HTMLFormElement | null
-              : document.querySelector<HTMLFormElement>('form')
-            form?.requestSubmit()
-          }}
-          trigger={(open) => withTooltip(
-            <button
-              type="button"
-              onClick={open}
-              className={className}
-              data-action-name={name}
-              aria-label={ariaLabel}
-            >
-              {inner}
-            </button>,
-            tooltip,
-          )}
-        />
-      )
-    }
-    return withTooltip(
-      <button
-        key={index}
-        type="submit"
-        form={formTarget}
-        className={className}
-        data-action-name={name}
-        aria-label={ariaLabel}
-        {...(formField ? { name: formField.name, value: formField.value } : {})}
-      >
-        {inner}
-      </button>,
-      tooltip,
-    )
-  }
-
-  // Substitute the `:id` placeholder with the current row id when this
-  // action is rendered in a row context. Lets row-level link/form actions
-  // ship a single template URL like `/admin/articles/:id/edit`.
-  const rowId = opts.ids?.length === 1 ? opts.ids[0]! : undefined
-  const resolveTemplate = (s: string | undefined): string | undefined =>
-    s && rowId ? s.replace(':id', rowId) : s
-
-  // Link-style action.
-  if (href) {
-    return withTooltip(
-      <a
-        key={index}
-        href={resolveTemplate(href)}
-        className={className}
-        data-action-name={name}
-        aria-label={ariaLabel}
-      >
-        {inner}
-      </a>,
-      tooltip,
-    )
-  }
-
-  // Form-style action (POST/PUT/PATCH/DELETE) — fetch + JSON, no full reload.
-  if (method) {
-    const resolvedUrl = resolveTemplate(actionUrl)
-    return (
-      <MethodActionButton
-        key={index}
-        url={resolvedUrl}
-        method={method}
-        confirm={confirm}
-        destructive={destructive}
-        className={className}
-        name={name}
-        ariaLabel={ariaLabel}
-        tooltip={tooltip}
-        inner={inner}
-      />
-    )
-  }
-
-  // Handler-style action — fetch + JSON dispatch with `ids[]` body.
-  if (dispatchUrl) {
-    const ids = opts.ids ?? []
-    const modal = el['modal']
-    if (confirm || modal) {
-      return (
-        <ActionModalDialog
-          key={index}
-          meta={el}
-          ids={ids}
-          trigger={(open) => withTooltip(
-            <button
-              type="button"
-              onClick={open}
-              className={className}
-              data-action-name={name}
-              aria-label={ariaLabel}
-            >
-              {inner}
-            </button>,
-            tooltip,
-          )}
-          renderFormChild={deps.renderFormChild}
-          renderElement={deps.renderElement}
-        />
-      )
-    }
-    return (
-      <HandlerActionButton
-        key={index}
-        url={dispatchUrl}
-        ids={ids}
-        className={className}
-        name={name}
-        ariaLabel={ariaLabel}
-        tooltip={tooltip}
-        inner={inner}
-      />
-    )
-  }
-
-  // No dispatch wired (no href / method / dispatchUrl). Render a disabled
-  // placeholder so the user sees the button, but it does nothing.
-  return withTooltip(
-    <button
-      key={index}
-      type="button"
-      disabled
-      className={className + ' opacity-50 cursor-not-allowed'}
-      data-action-name={name}
-      aria-label={ariaLabel}
-    >
-      {inner}
-    </button>,
-    tooltip,
-  )
-}

package/src/react/schemaRenderer/columnFormat.ts

@@ -1,65 +0,0 @@
-/** Apply a built-in `ColumnFormat` to a raw value; returns a string.
- *
- *  Used by both `formatCell` (table layer) and `renderEntry` (infolist
- *  Phase #16). Hoisted out of the table block so EntryRenderer doesn't
- *  need to import across phases. */
-export function applyColumnFormat(value: unknown, format: { kind: string; [k: string]: unknown }): string {
-  if (value === null || value === undefined || value === '') return ''
-  switch (format['kind']) {
-    case 'dateTime': {
-      const d = value instanceof Date ? value : new Date(String(value))
-      if (isNaN(d.getTime())) return String(value)
-      // Default — locale-aware short date+time. Custom patterns aren't
-      // supported (no date-fns dep); pattern is kept on meta for future use.
-      return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
-    }
-    case 'since': {
-      const d = value instanceof Date ? value : new Date(String(value))
-      if (isNaN(d.getTime())) return String(value)
-      const seconds = Math.round((Date.now() - d.getTime()) / 1000)
-      const abs = Math.abs(seconds)
-      const past = seconds >= 0
-      const fmt = (n: number, unit: string): string =>
-        past ? `${n} ${unit}${n === 1 ? '' : 's'} ago` : `in ${n} ${unit}${n === 1 ? '' : 's'}`
-      if (abs < 60)        return past ? 'just now' : 'in a moment'
-      if (abs < 3600)      return fmt(Math.floor(abs / 60),    'minute')
-      if (abs < 86400)     return fmt(Math.floor(abs / 3600),  'hour')
-      if (abs < 2592000)   return fmt(Math.floor(abs / 86400), 'day')
-      if (abs < 31536000)  return fmt(Math.floor(abs / 2592000), 'month')
-      return fmt(Math.floor(abs / 31536000), 'year')
-    }
-    case 'money': {
-      const n = typeof value === 'number' ? value : Number(value)
-      if (isNaN(n)) return String(value)
-      const currency = String(format['currency'] ?? 'USD')
-      const locale   = format['locale'] as string | undefined
-      return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(n)
-    }
-    case 'numeric': {
-      const n = typeof value === 'number' ? value : Number(value)
-      if (isNaN(n)) return String(value)
-      const decimals = format['decimals'] as number | undefined
-      const locale   = format['locale']   as string | undefined
-      const opts: Intl.NumberFormatOptions = {}
-      if (decimals !== undefined) {
-        opts.minimumFractionDigits = decimals
-        opts.maximumFractionDigits = decimals
-      }
-      return new Intl.NumberFormat(locale, opts).format(n)
-    }
-    case 'limit': {
-      const s = String(value)
-      const n = format['chars'] as number
-      return s.length > n ? s.slice(0, n) + '…' : s
-    }
-    case 'words': {
-      const s = String(value).trim()
-      if (s.length === 0) return s
-      const tokens = s.split(/\s+/)
-      const n = format['words'] as number
-      return tokens.length > n ? tokens.slice(0, n).join(' ') + '…' : s
-    }
-    default:
-      return String(value)
-  }
-}

package/src/react/schemaRenderer/constants.ts

@@ -1,50 +0,0 @@
-// Tailwind-class lookup tables shared across SchemaRenderer's element
-// dispatchers. Pure data — no React, no DOM.
-
-export const TEXT_COLOR_CLASSES: Record<string, string> = {
-  default:     '',
-  muted:       'text-muted-foreground',
-  primary:     'text-primary',
-  destructive: 'text-destructive',
-  success:     'text-emerald-600 dark:text-emerald-400',
-  warning:     'text-amber-600 dark:text-amber-400',
-  info:        'text-blue-600 dark:text-blue-400',
-}
-
-export const TEXT_SIZE_CLASSES: Record<string, string> = {
-  xs:   'text-xs',
-  sm:   'text-sm',
-  base: 'text-base',
-  lg:   'text-lg',
-  xl:   'text-xl',
-}
-
-export const TEXT_WEIGHT_CLASSES: Record<string, string> = {
-  normal:   'font-normal',
-  medium:   'font-medium',
-  semibold: 'font-semibold',
-  bold:     'font-bold',
-}
-
-// `ColumnColor` / `ColumnWeight` mirror the text-side scales 1:1. Kept as
-// named aliases so column-cell call sites still read distinctly, but a
-// single source-of-truth means adding a new color / weight only touches
-// the text map.
-export const COLUMN_COLOR_CLASSES  = TEXT_COLOR_CLASSES
-export const COLUMN_WEIGHT_CLASSES = TEXT_WEIGHT_CLASSES
-
-export const BADGE_COLOR_CLASSES: Record<string, string> = {
-  gray:        'bg-muted text-muted-foreground',
-  primary:     'bg-primary/10 text-primary',
-  success:     'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
-  warning:     'bg-amber-100  text-amber-800  dark:bg-amber-900/40  dark:text-amber-200',
-  destructive: 'bg-destructive/10 text-destructive',
-  info:        'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
-}
-
-export const alertStyles: Record<string, string> = {
-  info:    'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200',
-  warning: 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200',
-  success: 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200',
-  danger:  'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200',
-}

package/src/react/schemaRenderer/form/FormRenderer.tsx

@@ -1,274 +0,0 @@
-import React, { useRef, useState } from 'react'
-import type { ElementMeta } from '../../../schema/Element.js'
-import type { NotificationMeta } from '../../../notifications/Notification.js'
-import { FormIdContext, FormStateProvider, useFormState } from '../../FormStateContext.js'
-import { useCollabRoom } from '../../CollabRoomContext.js'
-import { getFormCollabBinding } from '../../FormCollabBindingRegistry.js'
-import { useNavigate } from '../../navigate.js'
-import { useToast } from '../../Toaster.js'
-import { markSubmitForReconcile } from '../../fields/repeaterReconcile.js'
-import {
-  applyRelationshipRenames,
-  type RelationshipRenameEntry,
-} from '../../fields/relationshipRenameDispatch.js'
-import { renderField } from './renderField.js'
-
-// ─── Form ───────────────────────────────────────────────────
-
-type RenderElement = (el: ElementMeta, index: number) => React.ReactNode
-
-/**
- * Top-level `<form>` element. Owns:
- *   - HTML form chrome (action, method, _method spoof, hidden formId)
- *   - Fetch + JSON submission with `Accept: application/json` (so the
- *     server can return 422 with field errors instead of re-rendering)
- *   - Inline error stamping (`_form` banner + per-field error strings)
- *   - `FormStateProvider` mount when the form has any reactive field
- *     (`live()` or `afterStateUpdatedJs`) and a `stateUrl` was stamped.
- *
- * `renderElement` is injected for non-field children inside the form
- * body (cards / dividers / fieldsets / etc).
- */
-export function FormRenderer({
-  el,
-  renderElement,
-}: {
-  el: ElementMeta
-  renderElement: RenderElement
-}) {
-  const formId = String(el['formId'] ?? '')
-  const method = String(el['method'] ?? 'post').toLowerCase()
-  const action = el['action'] ? String(el['action']) : undefined
-  const stateUrl = el['stateUrl'] ? String(el['stateUrl']) : undefined
-  const serverValues = (el['values'] as Record<string, unknown> | undefined) ?? {}
-  const serverErrors = (el['errors'] as Record<string, string[]> | undefined) ?? {}
-
-  // Phase F2 — the controlled-form path also activates when we're
-  // inside a `<RecordCollabRoom>` AND a plugin (e.g.
-  // `@pilotiq-pro/collab`) registered a `FormCollabBinding` factory.
-  // Without this, forms with no `live()` fields stayed uncontrolled
-  // and the collab binding never wired up.
-  const collabRoom    = useCollabRoom()
-  const collabFactory = getFormCollabBinding()
-  const collabActive  = !!(collabRoom && collabFactory && formId)
-  const useControlled = !!stateUrl || collabActive
-
-  // Methods other than GET/POST are spoofed via _method, mirroring Laravel.
-  const httpMethod = method === 'get' ? 'get' : 'post'
-  const spoofedMethod = method !== 'get' && method !== 'post' ? method : undefined
-
-  const navigate = useNavigate()
-  const { notify } = useToast()
-
-  // Client-side errors override server-rendered ones after a fetch-mode
-  // 422 response. Field values stay uncontrolled — the inputs in the DOM
-  // still hold whatever the user typed, so we don't need to mirror them.
-  const [clientErrors, setClientErrors] = useState<Record<string, string[]> | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-  const errors = clientErrors ?? serverErrors
-
-  // Plan #14 — formRef is threaded into FormStateProvider so live triggers
-  // can snapshot the form's full DOM state via FormData (captures
-  // uncontrolled inner-Repeater inputs that don't participate in the
-  // controlled values map).
-  const formRef = useRef<HTMLFormElement | null>(null)
-
-  const formErrors = errors['_form'] ?? []
-  const hasFieldErrors = Object.keys(errors).some(k => k !== '_form')
-
-  const onSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    if (!action) return                       // no action URL → fall through to native submit
-    e.preventDefault()
-    if (submitting) return
-    setSubmitting(true)
-    setClientErrors(null)
-
-    try {
-      // Thread `event.submitter` so the clicked submit button's
-      // name/value pair lands in the FormData. Without this, secondary
-      // submits like "Create & create another" can't signal which
-      // button fired through the body. Supported in all evergreen
-      // browsers since 2022; cast through `as any` because TS lib.dom
-      // hasn't picked up the optional submitter argument on every
-      // version.
-      const submitter = (e.nativeEvent as SubmitEvent).submitter as HTMLElement | null
-      const fd = new (FormData as any)(e.currentTarget, submitter ?? undefined) as FormData
-      const res = await fetch(action, {
-        method:  'POST',
-        headers: { 'Accept': 'application/json' },
-        body:    fd,
-      })
-      const data = await res.json().catch(() => ({}))
-
-      if (res.status === 422) {
-        const next = (data as { errors?: Record<string, string[]> }).errors ?? {}
-        setClientErrors(next)
-        // Surface a banner-level message if no field errors were returned
-        // — the form-level _form key lights up the existing banner.
-        setSubmitting(false)
-        return
-      }
-      if (!res.ok) {
-        const message = String((data as { error?: string }).error ?? `Request failed (${res.status})`)
-        notify({ type: 'error', title: 'Save failed', body: message })
-        setSubmitting(false)
-        return
-      }
-
-      // Success — drain notifications and SPA-navigate to the redirect.
-      //
-      // Apply PK-switch Phase B renames against the active form's collab
-      // binding FIRST (synchronous Yjs transact under the hood). The
-      // server emits `relationshipRenames: { field, old, new }[]` for
-      // every relationship-backed row that persisted under a new PK; we
-      // forward each through the formId-keyed dispatch so the binding's
-      // `renameRow` runs before the navigate destroys the provider that
-      // owns it. No-op when no binding is registered (no collab plugin)
-      // OR when the array is empty (no relationship-backed creates this
-      // submit). The submitter-only Phase A reconciler still fires below
-      // — Phase B closes the multi-peer gap WITHOUT obviating the
-      // single-peer cleanup path.
-      const renames = (data as { relationshipRenames?: RelationshipRenameEntry[] })
-        .relationshipRenames
-      applyRelationshipRenames(formId, renames)
-
-      // Before navigating, mark this tab for the relationship-backed
-      // Repeater/Builder PK-switch reconciler. The next mount of any
-      // child Repeater/Builder under this formId will run a one-shot
-      // CRDT reconcile to drop orphan UUIDs whose rows just persisted
-      // under a fresh DB PK. See
-      // `pilotiq-pro/docs/plans/repeater-relationship-pk-switch.md`
-      // (Phase A).
-      markSubmitForReconcile(formId)
-      const notifs = (data as { notifications?: NotificationMeta[] }).notifications
-      if (notifs && notifs.length > 0) for (const n of notifs) notify(n)
-      const redirect = String((data as { redirect?: string }).redirect ?? '')
-      // The server may force a navigate even when the redirect equals
-      // the current URL — used by "Create & create another" so the
-      // form remounts with empty defaults instead of preserving the
-      // just-submitted values. Otherwise: skip navigate when the
-      // redirect matches the current URL, since re-fetching the same
-      // page would force a form remount and reset scroll.
-      const force = Boolean((data as { force?: boolean }).force)
-      const currentUrl = typeof window !== 'undefined'
-        ? window.location.pathname + window.location.search
-        : ''
-      if (redirect && (force || redirect !== currentUrl)) {
-        navigate(redirect)
-        // Don't reset submitting on success — the navigation will unmount us.
-      } else {
-        setSubmitting(false)
-      }
-    } catch (err) {
-      notify({ type: 'error', title: 'Save failed', body: err instanceof Error ? err.message : String(err) })
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <form
-      ref={formRef}
-      id={formId || undefined}
-      data-form-id={formId || undefined}
-      method={httpMethod}
-      action={action}
-      onSubmit={onSubmit}
-      className="flex flex-col gap-6"
-    >
-      {formId && <input type="hidden" name="_formId" value={formId} />}
-      {spoofedMethod && <input type="hidden" name="_method" value={spoofedMethod} />}
-      {(formErrors.length > 0 || hasFieldErrors) && (
-        <div className="rounded-lg border border-destructive/40 bg-destructive/5 text-destructive p-3 text-sm">
-          {formErrors.length > 0 ? (
-            <ul className="list-disc pl-4">
-              {formErrors.map((msg, i) => <li key={i}>{msg}</li>)}
-            </ul>
-          ) : (
-            'Please correct the errors below.'
-          )}
-        </div>
-      )}
-      <FormIdContext.Provider value={formId}>
-        {useControlled ? (
-          <FormStateProvider initialMeta={el} initialErrors={errors} formRef={formRef}>
-            <FormBody
-              fallbackChildren={el.children ?? []}
-              fallbackValues={serverValues}
-              fallbackErrors={errors}
-              renderElement={renderElement}
-            />
-          </FormStateProvider>
-        ) : (
-          (el.children ?? []).map((child, i) => renderFormChild(child, i, serverValues, errors, renderElement))
-        )}
-      </FormIdContext.Provider>
-    </form>
-  )
-}
-
-/**
- * Renders the controlled-form's children, sourcing them from the
- * `FormStateProvider`'s current `formMeta` (which gets replaced after
- * each live POST). Falls back to the props if (somehow) used outside a
- * provider — the shell only mounts this when `stateUrl` is set so the
- * fallback path is dead code in practice, but keeping it defensive.
- */
-function FormBody({
-  fallbackChildren, fallbackValues, fallbackErrors, renderElement,
-}: {
-  fallbackChildren: ElementMeta[]
-  fallbackValues:   Record<string, unknown>
-  fallbackErrors:   Record<string, string[]>
-  renderElement:    RenderElement
-}): React.ReactElement {
-  const ctx = useFormState()
-  if (!ctx) {
-    return <>{fallbackChildren.map((child, i) => renderFormChild(child, i, fallbackValues, fallbackErrors, renderElement))}</>
-  }
-  const children = (ctx.formMeta.children ?? []) as ElementMeta[]
-  return <>{children.map((child, i) => renderFormChild(child, i, ctx.values, ctx.errors, renderElement))}</>
-}
-
-/**
- * Render one child of a form's resolved schema with per-field values + errors.
- *
- * Field elements wrap in error-stamp chrome; non-field children fall
- * through to `renderElement` so the form body can host cards / dividers /
- * fieldsets / etc.
- */
-export function renderFormChild(
-  child:         ElementMeta,
-  index:         number,
-  values:        Record<string, unknown>,
-  errors:        Record<string, string[]>,
-  renderElement: RenderElement,
-): React.ReactNode {
-  if (child.type === 'field') {
-    const name      = String(child['name'] ?? '')
-    const fieldErrors = errors[name] ?? []
-    const value     = values[name]
-    return (
-      <div key={index} className="flex flex-col gap-1">
-        {renderFieldWithValue(child, index, value, renderElement)}
-        {fieldErrors.map((msg, i) => (
-          <p key={i} className="text-xs text-destructive">{msg}</p>
-        ))}
-      </div>
-    )
-  }
-  return renderElement(child, index)
-}
-
-function renderFieldWithValue(
-  el: ElementMeta,
-  index: number,
-  value: unknown,
-  renderElement: RenderElement,
-): React.ReactNode {
-  // The form-state value (from `withValues` / record-fill) wins when present;
-  // otherwise the meta's own `defaultValue` (Plan #6 `Field.default()`) survives.
-  const enriched: ElementMeta = value !== undefined
-    ? { ...el, defaultValue: value }
-    : el
-  return renderField(enriched, index, renderElement)
-}