feat(ui): rebuild InputOtp on a single input with slot motion

[yyyyaaa]

Rebuilds InputOtp on a single-input model and adds slot-level motion. No new dependency; props are unchanged.

flowchart LR
  subgraph Before
    A1[input] --- A2[input] --- A3[input] --- A4["… ×N"]
  end
  subgraph After
    I["one transparent &lt;input&gt;<br/>value · caret · selection"] -->|selectionchange mirror| S["drawn slots"]
    S --> R["FluidHighlight ring"]
  end

Loading

• One field: a transparent <input> over the row owns value, caret and selection; slots mirror it. One tab stop and one labelled field instead of N "Digit i of N" boxes.
• Text behaviour: ⌘A / Shift+arrows select across slots, so cut/copy/paste work on the whole code or a slice; Backspace deletes like a text field; paste strips separators and a full code replaces the value wherever the caret is.
• Motion: digits rise in (starting: transition), a drawn caret blinks in the empty active slot, the focus ring glides via the existing FluidHighlight, and the row shakes once when isInvalid turns on. Everything stands still under reduced motion.
• onComplete: fires only when an edit produces a full code that differs from the previous one (no double verify; correcting a digit still re-verifies).
• Registry: input-otp now declares motion and fluid-highlight. motion was already a peer dependency of @constructive-io/ui.
• Browser quirks: Chrome autofill style reset, iOS glyph/paste handling, translate="no" against Chrome Translate.

Try it in Storybook (UI/InputOtp → VerifyForm) or the docs site at /blocks/account/account-phone-numbers (Live scenario).

[tenki-reviewer]

Review complete. 🟡 2 medium

💬 Inline comments (2)

• 🟡 Paste places caret at value end, ignoring insertion point — input-otp.tsx:201
• 🟡 Direct input.value write in paste breaks controlled restore — input-otp.tsx:199

🧹 Nitpicks (1) — 🟢 1 low

• 🟢 onChange value shape drops interior separators (input-otp.tsx:64) — The rewrite changes the emitted value contract: the previous implementation preserved interior placeholder spaces when a slot was cleared, while the new toCode (packages/ui/src/components/input-otp.tsx:64) strips every non-digit before truncation, so onChange now always emits a compact digits-only string.

---

The change replaces the six-input OTP grid with one transparent full-row input that renders mirrored slots, adds a selectionchange-driven selection widener, paste/autofill resync handling, and motion-based caret blink, shake, and gliding highlight. The registry manifest and behavioral tests are updated to match the new single-field model.

Files	Change
packages/ui/src/components/input-otp.tsx	Rewrite: single hidden input over aria-hidden slots, selection management, paste handling, and motion effects.
packages/ui/registry.json	Registry entry updated for the new motion dependency and fluid-highlight registry dependency.
packages/ui/test/input-otp.test.tsx	Tests rewritten to exercise the single-field selection, paste, and commit behavior.

_{Reviewed commit: aad32c1}

[tenki-reviewer]

This PR refactors InputOTP from a per-slot multi-input architecture to a single transparent input with drawn slots, adds motion-driven caret/shake/FluidHighlight effects, and rewrites the tests for the new model.

Key findings

• 🟡 Paste places caret at value end, ignoring insertion point — input-otp.tsx:201
• 🟡 Direct input.value write in paste breaks controlled restore — input-otp.tsx:199

[tenki-reviewer]

🟡 bug · medium

Paste places caret at value end, ignoring insertion point

onPaste computes the post-paste caret as Math.min(next.length, length - 1) (packages/ui/src/components/input-otp.tsx:201), which is only correct for a complete-code replacement. For a partial paste inserted mid-code — caret at 0 in 12, paste 9 → 912 — the caret lands at the end of the value instead of after the inserted digit, so the user's next keystroke fills the wrong slot. The same teleport happens when pasting a single digit into a selected slot of a full code.

📋 Prompt for AI Agents

In packages/ui/src/components/input-otp.tsx, in onPaste (lines 194-203), branch the caret computation: when pasted.length >= length keep setSelectionRange(length - 1, next.length); otherwise set the selection to (Math.min(start + pasted.length, next.length), Math.min(start + pasted.length, next.length)) so the caret lands right after the inserted digits, and mirror those values via mirror(...).

[tenki-reviewer]

🟡 bug · medium

Direct input.value write in paste breaks controlled restore

onPaste assigns input.value = next directly (packages/ui/src/components/input-otp.tsx:199) after event.preventDefault(), so no native change event accompanies the write and React's controlled-input restoration never runs for this edit. If the host's onChange ignores, clamps, or asynchronously rejects the paste (leaving the value prop unchanged), the transparent field keeps the pasted ghost value while the slots render the stale controlled code, and the next keystroke composes against the divergent DOM string — the user can submit a code different from what the slots display.

📋 Prompt for AI Agents

In packages/ui/src/components/input-otp.tsx onPaste (lines 187-204), remove the direct input.value = next assignment; keep event.preventDefault() and the computed next, call commit(next), and move the value/selection reconciliation into the existing RESYNC useEffect (lines 158-171) so it resets input.value to the rendered code whenever they differ after the controlled re-render, keeping React's controlled value the single source of truth.