[darioaschero]

Playground screens · SEND boards (brief 2026-10-22)

Puts the nuri-expo send flow on the bench so the operator can read it in device frames, both themes, and so the gaps it opens in the DS become visible as evidence. Pure DS composition (decision 57): zero page CSS, zero inline styles, zero GAP: fences — every board is DS elements + attributes the RN twin expresses 1:1. No spec / descriptor / generated / prototype / icon / shell changes.

1 · Pages + index

• packages/playground/pages/send.html — doc Send · send · recipient (S1) · send · amount (S2) · send · review (S3)
• packages/playground/pages/send-bank.html — doc Send to bank · bank · recipient (S1) · bank · amount · card short (S2 b) · bank · review · two legs (S3 b) · bank · recipient · locked (S1 c) · bank · activate (G1)
• packages/playground/pages/index.html — two cards after Move:

  <a class="nuri-pg__card" href="send.html">
    <span class="nuri-pg__card-name">Send</span>
  </a>
  <a class="nuri-pg__card" href="send-bank.html">
    <span class="nuri-pg__card-name">Send to bank</span>
  </a>

Precedents copied, not re-derived: skeleton / header / keypad / footer from receive-bitcoin.html ("set amount"); source chip, list rows, labelled divider from move.html; field / alert / tab bar from the component pages.

2 · Misfit log (verbatim from the pages, grouped)

Format: board · what the sheet asked · what was done · the DS element, axis or value that would remove the workaround.

Composed (pure DS, slightly off)

• send · recipient · RECENT / CONTACTS section labels · the move.html labelled-divider recipe (two growing separators flanking a sm emphasis muted typography) as a bare child inside nuri-list · a list section-header element (list-header / list-label)
• send · recipient · field with no visible label · nuri-text-field with aria-label and no label slot — the descriptor's documented compact placement · none (sanctioned); logged so the label-less field is seen once
• send · amount · unit switch glyph "⇄ €" · icon-button transfer-vertical soft (the set-amount precedent) · none beyond the precedent
• send · review · key/value rows (To / You send / From / Fee / Arrives) · nuri-view row justify="between" align="start" with a muted md key and an end-aligned value column · a key/value (description) row element — every review screen repeats this shape
• send · review · "Known contact · 3 sends" as a badge · nuri-typography size="sm" muted under the name · a badge/tag element (OQ 24)
• bank · recipient · ( Personal │ Company ) segmented toggle · nuri-tab-bar surface="transparent" with two label-only nuri-tab-bar-item (decision 56 makes TabBar the bottom destination switcher, distinct from in-page Tabs) · an in-page Tabs / segmented control
• bank · recipient · "+ Add reference (optional)" text link · nuri-list-action with a plus outline avatar + "Add reference" / "Optional" (Button has no ghost variant; only IconButton does) · Button variant="ghost"
• bank · recipient · field with no visible label · nuri-text-field with aria-label, no label slot · none (sanctioned)
• bank · amount · card short · "⌂ DE89 3704 … 0130 00" glyph + muted line · nuri-view row with nuri-icon name="bank" size="sm" + sm muted typography — the icon paints the primary fg while the text is muted (nuri-icon has no public muted; icon.css already carries the [data-muted] rule the Alert icon uses) · a public muted on the Icon primitive
• bank · amount · card short · amount centred under the IBAN line · typography 3xl align="end" (the set-amount precedent; no unit switch on a Euro send, so no swap row) · none — a layout choice carried from receive-bitcoin.html
• bank · amount · card short · the boxed P5 offer "Card is €20 short · [ Move €20 from Euro ]" · nuri-alert variant="ghost" + AlertButton — the sheet's boxed (soft) Alert truncates the message beside its action at the default device (the row never wraps; the action hugs, the message takes the shrink); ghost frees the box padding and the copy fits, matching the move.html insufficient-balance precedent; the action label itself sits at the truncation edge · an Alert layout where the message wraps (lines > 1) or the action drops to its own row
• bank · amount · card short · source chip "From Card · €180" · select-trigger with the visa-eur logo avatar (the move.html picker's Visa row) rather than the card glyph · none — the operator picks the card identity
• bank · review · two legs · numbered steps "1 … / 2 …" · row gap="sm" with an emphasis md "1"/"2" + a text column; plain text, not a disc or timeline dot · a numbered-step / timeline element (OQ 24)
• bank · review · two legs · key/value rows (To / They get) · between-row + end-aligned value column · a key/value (description) row element
• bank · review · two legs · "Known account · 2 sends" badge · sm muted typography · a badge/tag element
• bank · recipient · locked · boxed two-line notice "Locked · Bank transfers aren't activated yet · about 2 min" with a lock glyph · a soft View box (radius lg · padding md) holding a warning-circle icon + a two-line typography column — the brief's ghost Alert was tried first and its single-line message (typography flow truncate · lines 1) cut "· about 2 min" at the default device (natural 396px in 330px) · a multi-line Alert (the deferred AlertTitle / AlertDescription parts) + a lock icon
• bank · activate · "What you get" / "What you need" bullet lists · nuri-list-action rows (pressable, press colour) as static bullets — list-item, the non-pressable row, is reserved but not in the catalog (decision 84) · the non-pressable list-item row
• bank · activate · "An ID document" and "A selfie" glyphs · closest existing icons — copy for the document, eye for the selfie · id-card (or passport) and camera (or user) icons

Fallback — none. No page-local CSS, no plain-HTML inserts, no GAP: fence on either page.

Dropped

• send · recipient · contact rows with a portrait avatar (◉) · icon-avatar glyph "nuri" variant="soft" stands in (assets/photos has no portrait; the icon set has no person glyph) · a portrait asset in assets/photos (icon-avatar already takes source) and/or a user icon
• send · amount · quick amounts [ 5 000 ] [ 10 000 ] [ Max ] · the brief's tree omits them and the keypad board has no vertical room for a third row group at the default device · composable today as soft sm buttons — a brief decision, not a DS gap
• send · amount · "(◉) Emil" contact line at the top of the step · the brief's tree omits it (the title "Send to Emil" carries the recipient) · composable today

3 · Three gaps the DS should admit first

1. Multi-line / stacked Alert (AlertTitle + AlertDescription, or message lines > 1 with the action on its own row). Two of eight boards could not use Alert the way the sheets ask: the locked notice loses "about 2 min" to the one-line contract, and the boxed P5 offer truncates beside its action at 390. The sheets lean on Alert for every offer, lock and failure state.
2. A key/value (description) row and the non-pressable list-item. Every review screen is key/value rows, every gate screen is static bullets; today both are hand-built from View + Typography or faked with pressable list-action rows. These two rows are the vocabulary of S3 and G1 on every journey.
3. Icon set + Icon muted: user (five contact rows use a wordmark placeholder), lock, id-card, camera, and a public muted on the Icon primitive (the CSS rule already exists; only the attr/prop is missing). Cheap, data-only, and the only reason three boards show a wrong or off-colour glyph.

A fourth candidate, if there is room: an in-page Tabs / segmented control — the Personal | Company toggle is the bottom TabBar wearing a label-only costume.

4 · Sheet content not translated, and why

• S1 (Lightning): the sheet has RECENT + CONTACTS sections (five contacts); the brief's tree collapsed them to three rows under one divider. Drawn the sheet's two sections with the brief's names (Emil · Anna Schmidt as the bank contact to match the Send-to-bank document · Ben · Carla · Dana). The sheet's recency captions ("sent Tue" / "received") are replaced by the brief's "@emil · 3 sends" / "Bank account". Chevrons on every row per the sheet (the tree listed one only on Scan QR).
• S2 (Lightning): the sheet's "(◉) Emil" line, the quick-amount row and the "Review 21 000 sats" footer label are not drawn (the brief's tree: "Review", no quick amounts); "≈ € 19.95" is drawn as the brief's "≈ € 19.80"; "Arrives Instantly" as the brief's "Seconds"; the fee is shown (a stated copy decision; the sheet says "No fee").
• S2 (bank): the sheet centres the amount; the board right-aligns it per the set-amount precedent. The "⌂" glyph is the bank icon in the primary colour beside muted text.
• S2 (bank) offer: the sheet draws a box; the board is a ghost Alert (see the log) so the P5 copy is complete at 390.
• S1 (bank) locked: no lock glyph exists; the notice is a composed soft box, not an Alert, so "about 2 min" survives.
• G1: "An ID document · a selfie" is one line on the sheet, two rows on the board; both glyphs are stand-ins.
• Not in scope by the brief: home, status pill, success, on-chain, allocation, card journeys, the accepted-offer state of S2 (b), the failure/in-review branches.

Verification

• Bench (served repo root · send.html / send-bank.html · iPhone 17e default): nothing clipped in the two keypad boards (Delete key bottom 726 < footer top 744 of 844; scroll overflow 0 on all eight), titles centred (offset 0), both themes toggled on all eight boards, index links resolve, no console errors.
• Local gates: root drift guards 125/125 · prototype 127/127 · npm run build -w @nuri/playground + git diff --exit-code packages/playground/generated/ clean · doc 3/3 + build + git diff --exit-code packages/doc/generated/ clean. rn / expo-demo untouched by this change.
• Not self-merged — hand-off for review.

🤖 Generated with Claude Code