feat(catalogue): rebuild the form/composer pattern on Form + Field

[interacsean]

Summary

form/composer (added in #479) is the only form/* pattern that uses neither Form nor Field — a bare Card of controls with an onClick submit. Its requiredImports were [Card, Textarea, Button, Checkbox] while all four siblings build on Form + Field + onFormSubmit.

That inconsistency matters for the shipped skill: an agent asked to build a form reads form/*, gets five patterns, and four say one thing while the fifth quietly does the opposite. It also left three real gaps.

What changed

A server rejection had nowhere to go. The body had no field identity, so a moderation block, rate limit, or closed thread could only surface as a toast — away from the text the user still has in the box. It now routes through Form's errors prop into Field.Error.

The Textarea was named by aria-label. Now a sr-only Field.Label. A real label, and it keeps the description/error wiring available rather than closing that door.

Send was an onClick handler. Now type="submit", so Form gates it on validation. Discard is explicitly type="button" — inside a <Form> an untyped button defaults to submit, which would have made Discard submit the composer.

Fixes a data-loss path. The reference implementation cleared the body unconditionally, discarding the user's text when a submit failed. It now clears only on success.

What deliberately did not change

The body stays controlled. It's read during render to gate Send and to swap the placeholder:

disabled={body.trim().length === 0 || submitting}
placeholder={internal ? "Internal context for teammates…" : "Reply to customer…"}

onFormSubmit hands you values at submit time and can't drive render, so useState here is load-bearing — not the mirroring anti-pattern the other form/* docs warn about. The pattern doc now states that explicitly, so the difference reads as intentional rather than as drift.

The visual design, action-row rules, and every do/dont in the pattern are untouched.

Verification

Behaviour was checked against the real components before writing, not assumed:

• controlled Textarea in Field.Root keeps its submit gating
• onFormSubmit receives { body: "…" }
• required blocks submission and renders Field.Error
• the sr-only Field.Label resolves as the control's accessible name (getByRole("textbox", { name: "Reply" }))
• Discard clears

pnpm type-check, pnpm lint, catalogue type-check and check-generated-skills all pass.

Related

Branched from main, independent of #469 — it uses only Form, Field, and Textarea as they exist today. #469 separately corrects the form guidance in components.md and the four CRUD patterns; this removes the last inconsistency between that guidance and form/*.

Raised out of review discussion on #469, where the composer's divergence surfaced as an apparent contradiction in the shipped skill.

🤖 Generated with Claude Code

[github-actions]

Code Metrics Report

	main (35fcca2)	#487 (e913373)	+/-
Coverage	87.4%	87.4%	0.0%
Test Execution Time	2m2s	2m4s	+2s

Details

  |                     | main (35fcca2) | #487 (e913373) | +/-  |
  |---------------------|----------------|----------------|------|
  | Coverage            |          87.4% |          87.4% | 0.0% |
  |   Files             |            204 |            204 |    0 |
  |   Lines             |           6014 |           6014 |    0 |
  |   Covered           |           5257 |           5257 |    0 |
- | Test Execution Time |           2m2s |           2m4s |  +2s |

---

Reported by octocov

[interacsean]

/review

[github-actions]

❌ Code Review failed. Please review the logs for details.

Warning

Threat Detection Engine Failure — The analysis engine could not complete. This is a tooling failure, not a security finding.

What happened

The threat detection engine failed to produce results.

Review the workflow run logs for details.

Generated by Code Review for #487

[interacsean]

/review

[github-actions]

✅ Code Review completed successfully!

Completed package review for PR #487. The diff only changes catalogue reference content and a changeset; there are no in-scope changes under packages/** or changed package entrypoints/exports to flag, so no GitHub review comment was needed.

Generated by Code Review for #487