Paste Review Patterns

List Preview

A static pasted list preview shows Invite list field, 3 lines, mina@example.test first line, and Needs review status.

Program

Multi-line paste previews should show line count and first line before any invite parsing or sending.

pasted_list_preview.html
Visuals: captured from real browser rendering
<section class="list-preview" aria-labelledby="list-preview-title"><h2 id="list-preview-title">Pasted list preview</h2><dl>
  <div><dt>Field</dt><dd>Invite list</dd></div>
  <div><dt>Lines</dt><dd>3</dd></div><div><dt>First line</dt><dd>mina@example.test</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Needs review</span></dd></div></dl>
  <p class="check">Learner check: the pasted list is visible before any invites are parsed.</p>
  <p class="note">Static pasted list preview only; no Clipboard API, paste event, parser, validator, invite service, code verification, storage, cookie, route, API, network, script, event listener, form submit, input, textarea, contenteditable, analytics, timer, object URL, download, service worker, account/session behavior, or live submission runs.</p></section>
<style>
  .list-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .list-preview dl { display: grid; gap: 8px; margin: 0; }
  .list-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .list-preview dt { color: #475569; }
  .list-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fde68a; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the list preview.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show field row.

    The field is exact pinned data.
    The field is exact pinned data.

  3. Show lines and first-line rows.

    The line count and first line are exact pinned data.
    The line count and first line are exact pinned data.

  4. Render needs-review status.

    The status badge says this needs review.
    The status badge says this needs review.

  5. Check list readback.

    The check says the pasted list is visible before any invites are parsed.
    The check says the pasted list is visible before any invites are parsed.

  6. Check list honesty.

    Field, lines, first line, status, and no live submission.
    Field, lines, first line, status, and no live submission.
step flow step(1) labels the source, step(2) shows the field, step(3) shows lines and first-line rows, step(4) shows needs-review status, step(5) checks the list readback, and step(6) checks the honesty note.
list readback The section heading names the pasted list preview surface.
list rows Field, Lines, First line, and Status values are exact pinned data.
no live invite parsing The lesson should not imply Clipboard API access, paste events, parsers, validators, invite services, code verification, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, analytics, timers, object URLs, downloads, service workers, account/session behavior, or live submissions.