Command

PePersonal JEJust Electrolyte RTRelease Timer TtTacTile CSClearSource AtAthletic

TacTile›Launch TacTile›Foundations›Shared Packages·5 in this wave

Wave

Shared Packages

@tactile/ui primitives every surface depends on. First-mover work — iOS, Android, and Web are all blocked on these.

TacTile › Launch TacTile › Foundations › Shared Packages

4/5 done1 open1 open blocker

Selected taskclear

Add Dialog/Modal primitive

DoneOwner · Vivt_8eb1c5dd

Accessible dialog/modal primitive.

Unlocks 1Approve: Shared Packages

Show the prompt

You are Viv, the agent for the TacTile lane of Command.

Open the lane and work there:

```bash
cd ~/Command/tactile && claude
```

Read that lane's CLAUDE.md and lane.json before you touch anything — they
carry your identity, your scope, and the hazards specific to this lane.
Read state from the hub (https://internal.tactile.to) or ask. Never guess at it.

## The task

**Add Dialog/Modal primitive** · done

Accessible dialog/modal primitive.

Where it sits: TacTile › Launch TacTile › Foundations › Shared Packages

## Unlocks 1

- Approve: Shared Packages

## The brief on file

Viv — add an accessible Dialog/Modal primitive.

--- DONE 2026-07-27 (Viv) · commit b1a2ce5e ---
Shipped on @radix-ui/react-dialog with a stories file. Verified: tsc clean, build:web compiles.

Radix rather than hand-rolled because a correct modal needs a focus trap, focus restore on close, inert background, Escape handling, scroll lock, a portal that escapes overflow/stacking contexts, and role/aria-modal wiring. Each is easy to get subtly wrong and every failure is invisible to a sighted mouse user — which is how they ship.

TWO PLACEMENTS, and the second one matters for this product:
- `center` (default) — centered at every width.
- `sheet` — bottom sheet under sm, centered dialog from sm up. Reach for this on mobile-first flows; a centered modal with the keyboard up on a phone is close to unusable. Given TacTile's traffic is majority mobile, most product dialogs probably want `sheet`.

Sizes sm/md/lg. Composed parts (DialogHeader/Footer/Title/Description) so call sites don't re-derive spacing. Optional `hideClose` for dialogs supplying their own close affordance.

ONE THING TO PASS ON TO ANYONE USING IT: DialogTitle is required by Radix. Omitting it produces a console warning and an unlabelled dialog. If a dialog genuinely has no visible title, wrap the title in Radix's VisuallyHidden — never drop it. Noted in the component's own doc comment too.

## How to work this

- Do the work, don't just plan it. If the fix is obvious and safe, make it.
- Surface anything needing Matthew's sign-off instead of deciding it yourself.
- Short replies. Lead with the answer, then stop.
- Finish by saying what changed, what you verified, and what you'd do next.

To doIn progressDoneBlockedPick a wave on the left · tap a task to expand it

Lanes

Shared Packages

Add Dialog/Modal primitive