[Web][W2.1] Build form composition, validation, and action patterns

Objective

Compose the primitive controls into schema-neutral form patterns suitable for generated admin, questionnaires and ordinary applications.

Scope

Field/Fieldset/Form layout, help and validation summaries, synchronous/asynchronous validation, dirty/submitting/success/error states, confirmable/destructive actions, and responsive multi-column layout. Do not define tenant business fields or schemas.

Acceptance criteria

• Keyboard and screen-reader users can discover errors and return to invalid fields.
• Submission is single-flight or idempotency-aware and cannot be double-triggered accidentally.
• Server errors preserve safe user input and focus context.
• Loading, offline, retry, destructive confirmation and long/localized content are demonstrated.
• Gallery, interaction, accessibility and screenshot evidence passes human review.

Parent: #8

Required visual evidence

The draft PR must provide a runnable component-gallery route plus before/after screenshots at 390×844, 768×1024, and 1440×900. Cover light, dark, high-contrast, default, hover, focus-visible, disabled, loading, empty, error, and overflow states applicable to the component. Playwright must exercise keyboard interaction and capture deterministic screenshots. A reviewer other than the implementing agent must approve intentional baseline changes; screenshot generation or a passing pixel threshold is not visual approval.

Tembo execution contract

automation:
  eligible: true
  executor_profile: tembo
  readiness: blocked
  primary_repository: TinyChain-Inc/client
  base_branch: main
  writable_scope:
    - web/src/ui/forms/**
    - web/src/ui/gallery/**
    - web/tests/**
  prerequisites:
    - "#77"
    - "#78"
  concurrency_group: ui-composites-forms
  required_commands:
    - "cd web && npm ci"
    - "cd web && npm run test:all"
  external_actions: none
  draft_pr_only: true
  completion_authority: human
  visual_validation:
    required: true
    browsers: [chromium]
    viewports: [mobile, tablet, desktop]
    evidence: [component-gallery-url, screenshot-bundle, playwright-report]
    baseline_update_requires: human-visual-approval
    failure_policy: never-auto-accept-diff
  budget:
    size: large
    max_revisions: 3
    max_wall_minutes: 120

First resolve prerequisites #77 and #78, then inspect web/src/ui/forms/, web/src/ui/gallery/, and web/tests/**. Run cd web && npm ci and npm run test:all before implementing the form patterns. Done means a runnable gallery route, required responsive and state coverage, keyboard-focused Playwright evidence, screenshots at all three viewports, and human visual approval.