# Type-to-confirm delete dialog > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The last gate before deleting a project in a data console. A 480px modal over the project's settings page names the project in mono, then lists exactly what goes with it as an inventory with counts (14 dashboards, 212 saved queries, 3 scheduled exports, 2.4 GB of cache, 9 members). The Delete button stays disabled until the project name is typed exactly. The input shows the name as ghost text that the user types over, a 2px meter fills with each correct character, and the field shakes once the moment a character goes wrong. The danger colour is a calm clay (`#d9785f`) with dark ink on it, not a siren red: the dialog should feel serious, not panicked. The detail worth copying is the ghost-text input: the user can see where they are in the name and which character broke. ## Reference behaviour 1. Initial state: the dialog is already open over a dimmed settings page (scrim `rgba(8,9,10,.66)`). The input holds `tidewater-led`, the ghost shows the remaining `ger`, the meter is at 13/16 and Delete is disabled. 2. Each keystroke compares the value with `tidewater-ledger` character by character. The correct prefix length drives the meter width (`prefix / 16 × 100%`) and the counter `13/16` in the label row. 3. Ghost text: an overlay with the same font, padding and border box as the input shows the typed characters transparent and the rest of the name in `--ink-3`. Typed characters show through from the input in `--ink`. 4. First wrong character: the field border and a 3px ring turn clay, the ghost hides, the hint reads "Character 14 does not match. Names are lowercase with hyphens." and the field shakes once (360ms). Typing more wrong characters at the same position does not shake again; a new first-wrong position does. 5. Exact match: border turns sage `#9cc59a`, meter turns sage at 100%, hint reads "Name matches. Deleting is now possible.", Delete becomes enabled. 6. Enter or clicking Delete with a mismatch shakes the field and keeps focus in the input. Nothing else happens. 7. Delete with a match: a 14px spinner appears in the button, the label changes to "Deleting", and after 900ms the dialog closes. A toast rises at the bottom: "`tidewater-ledger` is in the trash until 4 Nov." with a Restore button, which receives focus. 8. "Keep project", the close button, Escape and a click on the scrim all close without deleting; focus returns to the page's "Delete project" button. 9. Reopen: the outlined "Delete project" button in the danger-zone card opens the dialog again with an empty input. ## Structure ``` 1280 × 800 ┌──────────┬──────────────────────────────────────────────────────────────┐ │ side 224 │ crumb (mono) harbour-ops / tidewater-ledger / settings│ │ ws chip │ h1 Project settings 30px │ │ Overview │ ┌────────── card ──────┌──────── dialog 480 ────────┐──────┐ │ │ Queries │ │ Warehouse connection │ (o) Delete tidewater-ledger? [x] │ │ │ Dashbds │ └──────────────────────│ It goes to the trash... │──┘ │ │ Exports │ ┌──────────────────────│ ┌ loss list ───────────────┐ │──┐ │ │ PROJECT │ │ Transfer ownership │ │ Dashboards 14 │ │ │ │ │ Members │ └──────────────────────│ │ Saved queries 212 │ │──┘ │ │▌Settings │ ┌── danger card ───────│ │ Scheduled exports 3 │ │──┐ │ │ │ │ Delete this project │ │ Cached results 2.4 GB │ │ │ │ │ │ └──────────────────────│ │ Members (o)(o)(o) 9 │ │──┘ │ │ │ │ └──────────────────────────┘ │ │ │ │ │ Type [tidewater-ledger] 13/16│ │ │ │ │ [tidewater-led|ger ] │ │ │ │ │ ━━━━━━━━━━━━━━━━━━━━━━━────── │ │ │ │ │ hint │ │ │ │ │ [Keep project] [Delete] │ │ │ │ └────────────────────────────────┘ │ └──────────┴──────────────────────────────────────────────────────────────┘ ``` - App shell: `