fix: SW-2044 consistent focus state in PlateMapEditor custom-render story

[boramyi-ts]

Summary

Fixes SW-2044 — inconsistent focus states in the Plate Map Editor → "Form: custom render + integer parsing" story (a finding from the SW-2041 visual-design audit).

The story rendered the Custom field as a hand-rolled <input> with ad-hoc classes (rounded border px-1 py-0.5 text-xs), so it fell back to the browser's default focus outline — while the sibling Count and Weight fields use the ui-kit <Input>, which shows the design-system focus treatment (border-ring + shadow-focus). Within a single form the three fields focused differently (and were different heights/radii at rest).

Change

Use the ui-kit <Input> inside the custom render prop so all three fields share the same focus ring, height, and radius. The render prop still demonstrates a genuine custom composition (Input + "N sel" badge in a flex row), and the aria-label="custom-render-input" is preserved so the play-function test is unchanged.

-              <input
+              <Input
                 aria-label="custom-render-input"
                 value={(v as string | undefined) ?? ""}
                 onChange={(e) => onChange(e.target.value)}
-                className="rounded border px-1 py-0.5 text-xs"
               />
-              <span className="text-[0.65rem] text-muted-foreground">{selectionSize} sel</span>
+              <span className="text-xs whitespace-nowrap text-muted-foreground">{selectionSize} sel</span>

Before / After

Story: Design Patterns → Plate Map Editor → "Form: custom render + integer parsing"

	Custom field (focused)	Count / Weight field (focused)
Before	browser default outline, text-xs, thin square-ish border	ui-kit ring: border-ring + shadow-focus

| After | ui-kit ring: border-ring + shadow-focus | ui-kit ring: border-ring + shadow-focus |

Before screenshots are attached to the Jira ticket. After (all three fields now share the same focus ring and resting size) is shown in the PR discussion.

Verification

• yarn typecheck — clean
• yarn lint — clean for the changed file (pre-existing warnings are only in the untracked _prototypes/ sample)
• yarn test:storybook (PlateMapEditor suite) — 44/44 pass, including this story's play function
• Verified live in Storybook: focusing Custom, Count, and Weight now shows an identical border-ring + shadow-focus ring

Notes

Scope is the Storybook demo only — no library/runtime code changed. render remains an arbitrary-JSX escape hatch; this just makes the shipped example model best practice (compose from the ui-kit).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
ts-lib-ui-kit-storybook	Ignored		Jul 16, 2026 4:47pm

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🟢	Lines	96.57% (🎯 83%) ⬇️ -0.01%	22220 / 23007
🟢	Statements	96.57% (🎯 83%) ⬇️ -0.01%	22220 / 23007
🟢	Functions	95.74% (🎯 74%) 🟰 ±0%	968 / 1011
🟢	Branches	90.25% (🎯 81%) ⬇️ -0.04%	4240 / 4698

File Coverage

No changed files found.

Generated in workflow #1015 for commit b67907a by the Vitest Coverage Report Action