shadcn.io is not affiliated with official shadcn/ui
Redaction Tools Comments Block for Svelte
Four case notes whose emails, phone numbers, card numbers and IDs are found by pattern and masked with bars, revealed one by one or all at once by Auditors and Admins, each reveal written to an access log.
Installation
Overview
Keep sensitive details out of sight until someone with a permitted role needs them, with this redaction comment thread for Svelte with Ark UI. A compact header names the matter and holds a "Your role" Segment Group: Agent, Auditor or Admin. Four case notes hold an email address, a phone number, a card number and an ID. A regular expression finds each token when the note is drawn, and a bar stands in its place; while it is masked the real text is not in the page, and screen readers hear "email redacted". Agents see a disabled Reveal button with its reason. Auditors and Admins can press "Reveal email" for one token or "Reveal all (4)", can hide a token again, and every reveal is written to an access log beside the notes with a typed time. An Input named "Hide a word" masks any word you type in every note. It is built from Segment Group, Input, Button, Label, Avatar, Badge and Guides, with a CSS entrance only. For legal and clinical notes, support logs and any thread that holds personal data.
FAQ
How do I change what gets masked?
The shapes live in the BASE pattern near the top: an email address, a 555 phone number, a card-like number of four groups and an ID of the form ID- and six digits. Add an alternative to the pattern and a case to kindOf to catch another shape. The data is fictional: an example.test address, a 555 number and a test card. The custom word is escaped and matched on whole words, ignoring case.
Is this real redaction?
Not yet. The masking runs in the page, so the original text is still in the data the page holds, and anyone who can open the developer tools could read it. Real redaction happens on the server: store the tokens separately, send readers the masked text, and send a token only when a role that may see it asks, after writing a log entry. The access log here is a list in memory, with times counted from a fixed starting time.
What does the access log record?
Who (their role), what kind of token and which note, and the time. A real log should also record the person, the reason they gave, the address they came from and when the reveal ended, and should be append-only. Hiding a token again is not logged in this demo.
Is it accessible?
A masked token is a bar for the eye and the words "email redacted" for screen readers, and nothing is hidden by colour alone. Reveal buttons name the kind of token, the disabled state is explained by a line that the buttons point to, the role control is a labelled group, the log is a scroll region you can reach with Tab, and the status line is present from load and is read out politely.