[athul-rs]

What

• Frontend v1 text inputs (P1-T03), in frontend/src/v1/components/ui/form/, all drawn by one FieldFrame (border, radius, padding, focus ring and the hover, invalid, disabled and read-only states):
  • Input: height 32, with leading and trailing icons and prefix and suffix text.
  • Textarea, and PromptTextarea: at least 104 tall, grows with its text to a maximum, then scrolls. Enter submits, Shift+Enter breaks the line, and an IME composition never submits.
  • SearchField: Escape clears it when it has a value; on an empty field Escape reaches the dialog or popover around it. A Clear button does the same for the mouse.
  • SecretField: masked by default; Reveal (aria-pressed) and Copy, which copies the real value and reports the result through onCopyResult.
  • Field, Label, HelperText, ErrorText: Field wires the label, aria-describedby and aria-invalid for whichever control it holds; ErrorText is announced (role="alert").
• lib/compose-refs.ts, which merges a component's own ref with the caller's, including React 19 ref cleanups.

Why

• P1-T03 (UN-4287): the shared text controls every v1 form uses (P1-T06 form system, settings, prompt cards).

How

• Built on the design tokens PR UN-4299 [FEAT] v1 design tokens, themes and style isolation (P0-T04) #2399: ui: classes only, no raw colours or lengths. Styling follows the kit's Input Group frames (216:8125) and the search and prompt spec frames (676:9483, 676:9513, 676:9543).
• SearchField inside a Radix dialog: Radix calls preventDefault on Escape in the capture phase when the dialog chooses not to close. The field ignores that, so a dialog that skips dismissal for targets carrying data-escape-clears gets "Escape clears the field, then closes the dialog", which a test with a real Radix Dialog checks. Only a preventDefault from the caller's own onKeyDown cancels the clear.
• SecretField sets autoComplete="new-password", data-1p-ignore, data-lpignore and turns off spellcheck, autocapitalise and autocorrect, so password managers and browser spellcheck services leave the value alone; callers cannot override these. Copy on an empty field writes nothing and reports {status: "empty"}.
• onCopyResult is required: no toast component exists yet (P1-T13 builds it), so the caller raises the toast. This is the seam to swap when it lands.
• Where field-sizing: content is unsupported (Firefox), PromptTextarea sizes itself from scrollHeight through the --prompt-height custom property, and re-fits after a form reset.

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No. Everything is new under frontend/src/v1/, which no v0 route renders. No v0 file, dependency or build file changes.

Database Migrations

• None.

Env Config

• None.

Relevant Docs

• Task spec: P1-T03 on the Frontend v1 Confluence space. Designs repo pinned at 83e4fff.

Related Issues or PRs

• UN-4287 (P1-T03), epic UN-4257.
• Base: UN-4299 [FEAT] v1 design tokens, themes and style isolation (P0-T04) #2399 (UN-4299, P0-T04 tokens), which sits on UN-4270 [FEAT] v1 scaffold, strict TypeScript and import boundary #2380 (UN-4270 scaffold). Draft until both merge; do not merge before UN-4299 [FEAT] v1 design tokens, themes and style isolation (P0-T04) #2399. Then retarget to main and rebase onto it from UN-4299 [FEAT] v1 design tokens, themes and style isolation (P0-T04) #2399's last tip.
• The unit harness (P0-T08, UN-4329) is not needed to run these tests: vitest is already on the scaffold (test:v1).
• Not done here: the gallery entries and its accessibility scan (no gallery exists yet), and real-browser height checks (happy-dom has no layout). Both follow when the gallery and the unit harness (P0-T08, UN-4329) land.

Dependencies Versions

• None.

Notes on Testing

• lint:v1, typecheck:v1 and biome check src/v1 clean. test:v1: 118 vitest tests (83 on the base) and 59 boundary fixtures. The same checks pass on a merge with the newest scaffold commits (65 fixtures).
• Every behavioural guard was mutation-checked (Shift+Enter, IME composition including Safari's keyCode 229, Escape clear and bubbling, the Radix dialog case, read-only and disabled locks from props and from Field, copy result handling, empty copy, privacy attributes, ref cleanups, the fallback re-fit): removing each one fails a test.
• Reviewed locally with the team's 19-lens review (no Critical or High; the Mediums are fixed in this branch).

Design questions (no frame answers them)

1. Input value text and radius: the dev-spec board says 13/18 and radius 8, the kit and search frame 14/20 and radius 10, the prompt frame 13/20 and radius 8. This PR uses 14/20, radius 8.
2. Dark-mode field fill: the kit names dark:input/30, which no token carries. This PR uses --background in every theme.
3. Invalid focus ring: --destructive at 50% (one focus treatment) or the kit's raw red at 20%? Disabled fill #e5e5e540 has no token.
4. Hover and read-only states for inputs, the helper and error text under a control, a required marker, SecretField's Reveal and Copy, and SearchField's Clear have no frame.
5. PromptTextarea's maximum height has no frame; 240 is a placeholder.

Screenshots

• None yet; no v1 route renders these components.

Checklist

I have read and understood the Contribution Guidelines.

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud