From 0a4f1e2ad5e37173344aef1034a86042f88ed31f Mon Sep 17 00:00:00 2001
From: Dario Aschero <dario.aschero@gmail.com>
Date: Thu, 22 Oct 2026 16:48:53 +0200
Subject: [PATCH 1/4] =?UTF-8?q?feat(playground):=20Send=20+=20Send-to-bank?=
 =?UTF-8?q?=20boards=20=E2=80=94=20the=20nuri-expo=20send=20journey=20as?=
 =?UTF-8?q?=20DS=20evidence?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two new playground documents, eight boards, one per step of the send
journeys in nuri-expo's research wireframes (send-lightning-contact.md ·
send-euro-iban.md):

  pages/send.html       S1 recipient · S2 amount · S3 review
  pages/send-bank.html  S1 recipient (IBAN) · S2 amount, card short ·
                        S3 review, two legs · S1 locked · G1 activate
  pages/index.html      two cards after Move

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. Skeleton/keypad/footer from receive-bitcoin.html, source
chip + list rows + labelled divider from move.html, field/alert/tab-bar
from the component pages. No spec, descriptor, generated, prototype,
icon or shell changes.

Every slightly-off composition is in the MISFIT LOG comment at the end
of each page (the deliverable): section labels as the divider recipe,
key/value rows and numbered steps as view+typography, the trust line as
a muted caption, the Personal|Company toggle as a label-only TabBar
(decision 56), "+ Add reference" as a list-action (Button has no ghost),
static bullets as list-action rows (list-item reserved · decision 84),
glyph stand-ins for portraits / lock / ID / selfie. Two Alert findings
drove composition changes on the bench: the single-line Alert message
(flow truncate · lines 1) cuts the locked notice, so it is a soft View
box; the boxed P5 offer truncates beside its action at 390, so it is
ghost (the move.html insufficient-balance precedent).

Verified on the bench (iPhone 17e default): nothing clipped in the two
keypad boards (Delete key bottom 726 < footer top 744 of 844), titles
centred, both themes on all eight boards, no console errors. Local
gates: root drift guards 125/125, prototype 127/127, playground + doc
re-emit ≡ committed.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 packages/playground/pages/index.html     |   6 +
 packages/playground/pages/send-bank.html | 393 +++++++++++++++++++++++
 packages/playground/pages/send.html      | 279 ++++++++++++++++
 3 files changed, 678 insertions(+)
 create mode 100644 packages/playground/pages/send-bank.html
 create mode 100644 packages/playground/pages/send.html

diff --git a/packages/playground/pages/index.html b/packages/playground/pages/index.html
index 22acbab..f1cf29e 100644
--- a/packages/playground/pages/index.html
+++ b/packages/playground/pages/index.html
@@ -45,6 +45,12 @@
   <a class="nuri-pg__card" href="move.html">
     <span class="nuri-pg__card-name">Move</span>
   </a>
+  <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>
   <a class="nuri-pg__card" href="cards.html">
     <span class="nuri-pg__card-name">Cards</span>
   </a>
diff --git a/packages/playground/pages/send-bank.html b/packages/playground/pages/send-bank.html
new file mode 100644
index 0000000..56a31e8
--- /dev/null
+++ b/packages/playground/pages/send-bank.html
@@ -0,0 +1,393 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Nuri · Playground · Send to bank</title>
+  <link rel="stylesheet" href="../generated/playground.css" />
+  <script src="../generated/boot.js" type="module"></script>
+</head>
+<body>
+
+<!--
+  ═══════════════════════════════════════════════════════════════
+  SEND TO BANK · Euro to an IBAN (brief 2026-10-22)
+  ═══════════════════════════════════════════════════════════════
+
+  Five boards from the nuri-expo send-euro-iban journey
+  (docs/research/wireframes/send-euro-iban.md): S1 recipient (IBAN
+  recognised) · S2 amount, variant (b) card short · S3 review, two legs ·
+  S1 variant (c) locked · G1 activate. Same rule as send.html: pure DS
+  composition (decision 57), no page CSS, no inline styles; every
+  slightly-off composition is in the MISFIT LOG at the end of the page.
+
+  Skeleton / keypad / footer: receive-bitcoin.html ("set amount"). Source
+  chip: move.html. Text field: component/text-field.html (the IBAN
+  example). Alert: component/alert.html. Tab bar: component/tab-bar.html.
+  ═══════════════════════════════════════════════════════════════
+-->
+
+<nuri-playground-shell doc="Send to bank">
+
+  <!-- S1 · RECIPIENT · the one field recognised an IBAN, so the bank fields
+       appear inline (sheet W3-1): parsed line, Personal | Company toggle,
+       Name, optional reference. No "To bank" product, no chooser. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="bank · recipient">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading></nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Send</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll>
+              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
+                <nuri-text-field value="DE89 3704 0044 0532 0130 00" input-mode="text" placeholder="Name, @username, address or invoice" aria-label="Recipient">
+                  <nuri-text-field-button>Paste</nuri-text-field-button>
+                </nuri-text-field>
+                <nuri-typography size="sm" muted>Bank account · Germany</nuri-typography>
+
+                <nuri-tab-bar surface="transparent">
+                  <nuri-tab-bar-item selected aria-label="Personal">
+                    <nuri-tab-bar-item-label>Personal</nuri-tab-bar-item-label>
+                  </nuri-tab-bar-item>
+                  <nuri-tab-bar-item aria-label="Company">
+                    <nuri-tab-bar-item-label>Company</nuri-tab-bar-item-label>
+                  </nuri-tab-bar-item>
+                </nuri-tab-bar>
+
+                <nuri-text-field value="Anna Schmidt" placeholder="Name">
+                  <nuri-text-field-label>Name</nuri-text-field-label>
+                </nuri-text-field>
+
+                <nuri-list>
+                  <nuri-list-action aria-label="Add reference, optional">
+                    <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Add reference</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Optional</nuri-list-action-text-muted>
+                  </nuri-list-action>
+                </nuri-list>
+              </nuri-view>
+            </nuri-scroll>
+
+            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
+              <nuri-button size="lg" variant="solid" accent="lilac">Continue</nuri-button>
+            </nuri-footer>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- S2 (b) · AMOUNT · CARD SHORT · Card €180, amount €200: the shortfall is an
+       inline offer on the amount step in P5's words (Alert + AlertButton · tap =
+       accept), Review disabled until accepted. The source chip shows Card (the
+       default; it may flip to Euro). Cost + arrival on this step. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="bank · amount · card short">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+                </nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Send to Anna Schmidt</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll>
+              <nuri-view direction="column" align="stretch" justify="between" gap="sm" padding-x="lg" padding-bottom="lg" fill>
+                <nuri-view direction="column" align="stretch" justify="center" gap="sm" fill>
+                  <nuri-view direction="row" align="center" gap="xs">
+                    <nuri-icon name="bank" size="sm"></nuri-icon>
+                    <nuri-typography size="sm" muted>DE89 3704 … 0130 00</nuri-typography>
+                  </nuri-view>
+                  <nuri-typography size="3xl" align="end">€ 200</nuri-typography>
+
+                  <nuri-view direction="row" align="center" justify="between">
+                    <nuri-select-trigger aria-label="From" accessibility-value="Card, 180 euros">
+                      <nuri-select-trigger-label>From</nuri-select-trigger-label>
+                      <nuri-select-trigger-avatar source="../assets/logos/visa-eur.svg"></nuri-select-trigger-avatar>
+                      <nuri-select-trigger-value>Card · € 180</nuri-select-trigger-value>
+                      <nuri-select-trigger-chevron name="caret-down"></nuri-select-trigger-chevron>
+                    </nuri-select-trigger>
+                  </nuri-view>
+
+                  <!-- ghost, not the sheet's boxed soft bar: at the default
+                       device the soft Alert truncates "Card is €20 short" beside
+                       its action (the row has no wrap); ghost frees the box
+                       padding and the P5 copy fits — the move.html insufficient-
+                       balance precedent. Logged. -->
+                  <nuri-alert variant="ghost">
+                    <nuri-alert-icon name="warning-circle"></nuri-alert-icon>
+                    Card is €20 short
+                    <nuri-alert-button>Move €20 from Euro</nuri-alert-button>
+                  </nuri-alert>
+
+                  <nuri-typography size="sm" muted>No fee · Arrives today</nuri-typography>
+                </nuri-view>
+
+                <nuri-view direction="column" gap="sm">
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>1</nuri-button>
+                    <nuri-button>2</nuri-button>
+                    <nuri-button>3</nuri-button>
+                  </nuri-view>
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>4</nuri-button>
+                    <nuri-button>5</nuri-button>
+                    <nuri-button>6</nuri-button>
+                  </nuri-view>
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>7</nuri-button>
+                    <nuri-button>8</nuri-button>
+                    <nuri-button>9</nuri-button>
+                  </nuri-view>
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>.</nuri-button>
+                    <nuri-button>0</nuri-button>
+                    <nuri-button aria-label="Delete"><nuri-button-icon name="chevron-left"></nuri-button-icon></nuri-button>
+                  </nuri-view>
+                </nuri-view>
+              </nuri-view>
+            </nuri-scroll>
+
+            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
+              <nuri-button size="lg" variant="solid" accent="lilac" disabled>Review €200</nuri-button>
+            </nuri-footer>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- S3 (b) · REVIEW · TWO LEGS · one review, one passkey: leg 1 (Euro → Card,
+       the passkey signs this) and leg 2 (Card → bank, chained). Numbered steps
+       are composed from an emphasis "1"/"2" + a text column. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="bank · review · two legs">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+                </nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Review</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll>
+              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
+                <nuri-view direction="row" justify="between" align="start" gap="md">
+                  <nuri-typography size="md" muted>To</nuri-typography>
+                  <nuri-view direction="column" align="end">
+                    <nuri-typography size="md" align="end">Anna Schmidt</nuri-typography>
+                    <nuri-typography size="sm" align="end" muted>DE89 3704 0044 0532 …</nuri-typography>
+                    <nuri-typography size="sm" align="end" muted>Known account · 2 sends</nuri-typography>
+                  </nuri-view>
+                </nuri-view>
+                <nuri-view direction="row" justify="between" align="start" gap="md">
+                  <nuri-typography size="md" muted>They get</nuri-typography>
+                  <nuri-typography size="md" align="end">€ 200</nuri-typography>
+                </nuri-view>
+
+                <nuri-separator></nuri-separator>
+
+                <nuri-view direction="row" align="start" gap="sm">
+                  <nuri-typography size="md" emphasis>1</nuri-typography>
+                  <nuri-view direction="column" align="stretch" fill="grow-shrink">
+                    <nuri-typography size="md">Move €20 from Euro to Card</nuri-typography>
+                    <nuri-typography size="sm" muted>No fee · a few minutes</nuri-typography>
+                  </nuri-view>
+                </nuri-view>
+                <nuri-view direction="row" align="start" gap="sm">
+                  <nuri-typography size="md" emphasis>2</nuri-typography>
+                  <nuri-view direction="column" align="stretch" fill="grow-shrink">
+                    <nuri-typography size="md">Send €200 from Card</nuri-typography>
+                    <nuri-typography size="sm" muted>No fee · arrives today</nuri-typography>
+                  </nuri-view>
+                </nuri-view>
+
+                <nuri-typography size="sm" muted>One confirmation covers both.</nuri-typography>
+              </nuri-view>
+            </nuri-scroll>
+
+            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
+              <nuri-button size="lg" variant="solid" accent="lilac">Send €200</nuri-button>
+            </nuri-footer>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- S1 (c) · RECIPIENT · LOCKED · the bank rail is not activated: the IBAN is
+       recognised and KEPT, the locked notice replaces the name fields, the
+       footer leads to the gate. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="bank · recipient · locked">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading></nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Send</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll>
+              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
+                <nuri-text-field value="DE89 3704 0044 0532 0130 00" input-mode="text" placeholder="Name, @username, address or invoice" aria-label="Recipient">
+                  <nuri-text-field-button>Paste</nuri-text-field-button>
+                </nuri-text-field>
+                <nuri-typography size="sm" muted>Bank account · Germany</nuri-typography>
+
+                <!-- Composed, not an Alert: the Alert message is single-line by
+                     contract (typography flow truncate · lines 1) and cuts
+                     "· about 2 min" at the default device. A soft View box with
+                     the glyph and two lines carries the sheet's boxed notice in
+                     full. No lock glyph in the icon set → warning-circle. Logged. -->
+                <nuri-view variant="soft" radius="lg" padding="md" direction="row" align="start" gap="sm">
+                  <nuri-icon name="warning-circle" size="sm"></nuri-icon>
+                  <nuri-view direction="column" align="stretch" fill="grow-shrink">
+                    <nuri-typography size="sm" emphasis>Locked</nuri-typography>
+                    <nuri-typography size="sm" muted>Bank transfers aren't activated yet · about 2 min</nuri-typography>
+                  </nuri-view>
+                </nuri-view>
+              </nuri-view>
+            </nuri-scroll>
+
+            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
+              <nuri-button size="lg" variant="solid" accent="lilac">Activate bank transfers</nuri-button>
+            </nuri-footer>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- G1 · ACTIVATE BANK TRANSFERS · the just-in-time gate: what it unlocks,
+       what you need, how long — then back to S1 with the IBAN kept. The
+       bullet lists are list-action rows (the only list row today). -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="bank · activate">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+                </nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Activate bank transfers</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll>
+              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
+                <nuri-typography size="md" emphasis>What you get</nuri-typography>
+                <nuri-list>
+                  <nuri-list-action aria-label="Transfers to any bank account">
+                    <nuri-list-action-leading-avatar name="arrow-up" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Transfers to any bank account</nuri-list-action-text>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="Your bank details, IBAN">
+                    <nuri-list-action-leading-avatar name="bank" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Your bank details (IBAN)</nuri-list-action-text>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="Your Nuri card">
+                    <nuri-list-action-leading-avatar name="card" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Your Nuri card</nuri-list-action-text>
+                  </nuri-list-action>
+                </nuri-list>
+
+                <nuri-typography size="md" emphasis>What you need</nuri-typography>
+                <nuri-list>
+                  <nuri-list-action aria-label="An ID document">
+                    <nuri-list-action-leading-avatar name="copy" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>An ID document</nuri-list-action-text>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="A selfie">
+                    <nuri-list-action-leading-avatar name="eye" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>A selfie</nuri-list-action-text>
+                  </nuri-list-action>
+                </nuri-list>
+
+                <nuri-typography size="sm" muted>Takes about 2 minutes. The first time is slower; after that it is instant.</nuri-typography>
+              </nuri-view>
+            </nuri-scroll>
+
+            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
+              <nuri-button size="lg" variant="solid" accent="lilac">Start verification</nuri-button>
+            </nuri-footer>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+</nuri-playground-shell>
+
+<!--
+  MISFIT LOG · send-bank.html · board · what the sheet asked · what was done · the DS element, axis or value that would remove the workaround
+  bank · recipient · ( Personal │ Company ) segmented toggle · composed: nuri-tab-bar surface="transparent" with two label-only nuri-tab-bar-item (decision 56 makes TabBar the bottom destination switcher, distinct from the in-page Tabs) · an in-page Tabs / segmented control component
+  bank · recipient · "+ Add reference (optional)" as a text link · composed: nuri-list-action with a plus outline avatar + "Add reference" / "Optional" (Button has no ghost variant; only IconButton does) · Button variant="ghost" (a text-link button)
+  bank · recipient · field with no visible label (the IBAN sits in the one recipient field) · composed: nuri-text-field with aria-label and no label slot · none (sanctioned compact placement)
+  bank · amount · card short · "⌂ DE89 3704 … 0130 00" (glyph + muted line) · composed: 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 exposes no muted attr; icon.css already has the [data-muted] rule the Alert icon uses) · a public `muted` on the Icon primitive (or an inline-icon typography slot)
+  bank · amount · card short · amount centred under the IBAN line · composed: typography 3xl align="end" (the set-amount precedent right-aligns; 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 ]" · composed: 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 is at the truncation edge (natural 141px in 138px) · an Alert layout where the message wraps (lines > 1) or the action drops to its own row, so the boxed offer fits a 390 device
+  bank · amount · card short · source chip "From Card · €180" · composed: select-trigger with the visa-eur logo as the avatar (the move.html picker's Visa row) rather than the `card` glyph · none — both exist; the operator picks the card identity
+  bank · review · two legs · numbered steps "1 … / 2 …" · composed: row gap="sm" with an emphasis md "1"/"2" + a text column; the number is plain text, not a disc or a timeline dot · a numbered-step / timeline element (the sheet's OQ 24 three-dot vertical list)
+  bank · review · two legs · key/value rows (To / They get) · composed: between-row + end-aligned value column (same as send.html) · a key/value (description) row element
+  bank · review · two legs · "Known account · 2 sends" badge · composed: sm muted typography under the IBAN line · a badge/tag element (OQ 24)
+  bank · recipient · locked · a boxed two-line notice "Locked · Bank transfers aren't activated yet · about 2 min" with a lock glyph · composed: 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 · composed: nuri-list-action rows (pressable, with press colour) used 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 · composed: closest existing icons — `copy` for the document, `eye` for the selfie · `id-card` (or `passport`) and `camera` (or `user`) icons
+-->
+
+</body>
+</html>
diff --git a/packages/playground/pages/send.html b/packages/playground/pages/send.html
new file mode 100644
index 0000000..1bd57bd
--- /dev/null
+++ b/packages/playground/pages/send.html
@@ -0,0 +1,279 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Nuri · Playground · Send</title>
+  <link rel="stylesheet" href="../generated/playground.css" />
+  <script src="../generated/boot.js" type="module"></script>
+</head>
+<body>
+
+<!--
+  ═══════════════════════════════════════════════════════════════
+  SEND · Lightning / ark to a saved contact (brief 2026-10-22)
+  ═══════════════════════════════════════════════════════════════
+
+  Three boards, one per step of the nuri-expo send journey
+  (docs/research/wireframes/send-lightning-contact.md · S1 → S2 → S3).
+  Pure DS composition (decision 57 · the playground is the "composes"
+  step made visible): DS elements + their attributes only, no page CSS,
+  no inline styles, nothing the RN twin could not express 1:1. Every
+  slightly-off composition is listed in the MISFIT LOG at the end of the
+  page — that log is the deliverable; the boards are how it is read.
+
+  Flow-page skeleton, header, keypad and footer copied verbatim from
+  receive-bitcoin.html ("set amount"); source chip from move.html; list
+  rows + the labelled divider from move.html ("currency picker").
+  ═══════════════════════════════════════════════════════════════
+-->
+
+<nuri-playground-shell doc="Send">
+
+  <!-- S1 · RECIPIENT · one field for every rail, Scan QR, then the contact
+       sections. No footer: rows advance on tap. The sheet's two sections
+       (RECENT · CONTACTS) are drawn with the brief's names; dividers use the
+       move.html labelled-divider recipe inside the list. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · recipient">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading></nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Send</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll safe-area-bottom>
+              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
+                <nuri-text-field placeholder="Name, @username, address or invoice" input-mode="text" aria-label="Recipient">
+                  <nuri-text-field-button>Paste</nuri-text-field-button>
+                </nuri-text-field>
+
+                <nuri-list>
+                  <nuri-list-action aria-label="Scan QR">
+                    <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Scan QR</nuri-list-action-text>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+
+                  <nuri-view direction="row" align="center" gap="sm" height="md" padding-x="md">
+                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
+                    <nuri-typography size="sm" emphasis muted>Recent</nuri-typography>
+                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
+                  </nuri-view>
+
+                  <nuri-list-action aria-label="Emil, at emil, 3 sends">
+                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Emil</nuri-list-action-text>
+                    <nuri-list-action-text-muted>@emil · 3 sends</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="Anna Schmidt, bank account">
+                    <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Anna Schmidt</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Bank account</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+
+                  <nuri-view direction="row" align="center" gap="sm" height="md" padding-x="md">
+                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
+                    <nuri-typography size="sm" emphasis muted>Contacts</nuri-typography>
+                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
+                  </nuri-view>
+
+                  <nuri-list-action aria-label="Ben">
+                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Ben</nuri-list-action-text>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="Carla">
+                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Carla</nuri-list-action-text>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="Dana, at dana">
+                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Dana</nuri-list-action-text>
+                    <nuri-list-action-text-muted>@dana</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                </nuri-list>
+              </nuri-view>
+            </nuri-scroll>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- S2 · AMOUNT · the set-amount split (receive-bitcoin.html) with the source
+       chip (P3 · preselected, visible, flips in one tap) and the cost line ON
+       THIS STEP ("Fee ≈ 12 sats · Seconds" — the Lightning case; an ark send
+       would read "No fee · Instant"). -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · amount">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+                </nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Send to Emil</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll>
+              <nuri-view direction="column" align="stretch" justify="between" gap="sm" padding-x="lg" padding-bottom="lg" fill>
+                <nuri-view direction="column" align="stretch" justify="center" gap="sm" fill>
+                  <nuri-view direction="row" align="center" justify="between">
+                    <nuri-icon-button icon="transfer-vertical" variant="soft" aria-label="Swap unit"></nuri-icon-button>
+                    <nuri-typography size="3xl" align="end">₿ 21 000</nuri-typography>
+                  </nuri-view>
+                  <nuri-typography size="md" align="end" muted>≈ € 19.80</nuri-typography>
+
+                  <nuri-view direction="row" align="center" justify="between">
+                    <nuri-select-trigger aria-label="From" accessibility-value="Bitcoin, 86 969 sats">
+                      <nuri-select-trigger-label>From</nuri-select-trigger-label>
+                      <nuri-select-trigger-avatar name="bitcoin" variant="solid" accent="orange"></nuri-select-trigger-avatar>
+                      <nuri-select-trigger-value>Bitcoin · ₿ 86 969</nuri-select-trigger-value>
+                      <nuri-select-trigger-chevron name="caret-down"></nuri-select-trigger-chevron>
+                    </nuri-select-trigger>
+                  </nuri-view>
+                  <nuri-typography size="sm" muted>Fee ≈ 12 sats · Seconds</nuri-typography>
+                </nuri-view>
+
+                <nuri-view direction="column" gap="sm">
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>1</nuri-button>
+                    <nuri-button>2</nuri-button>
+                    <nuri-button>3</nuri-button>
+                  </nuri-view>
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>4</nuri-button>
+                    <nuri-button>5</nuri-button>
+                    <nuri-button>6</nuri-button>
+                  </nuri-view>
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>7</nuri-button>
+                    <nuri-button>8</nuri-button>
+                    <nuri-button>9</nuri-button>
+                  </nuri-view>
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button>.</nuri-button>
+                    <nuri-button>0</nuri-button>
+                    <nuri-button aria-label="Delete"><nuri-button-icon name="chevron-left"></nuri-button-icon></nuri-button>
+                  </nuri-view>
+                </nuri-view>
+              </nuri-view>
+            </nuri-scroll>
+
+            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
+              <nuri-button size="lg" variant="solid" accent="lilac">Review</nuri-button>
+            </nuri-footer>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- S3 · REVIEW · the one review before the passkey. Key/value rows composed
+       from a between-row + a trailing column; the targeted trust line ("Known
+       contact · 3 sends") is a muted caption, not a screen. No irreversibility
+       line for Lightning (the sheet reserves it for on-chain). -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · review">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+                </nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Review</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll>
+              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
+                <nuri-view direction="row" justify="between" align="start" gap="md">
+                  <nuri-typography size="md" muted>To</nuri-typography>
+                  <nuri-view direction="column" align="end">
+                    <nuri-typography size="md" align="end">Emil</nuri-typography>
+                    <nuri-typography size="sm" align="end" muted>@emil</nuri-typography>
+                    <nuri-typography size="sm" align="end" muted>Known contact · 3 sends</nuri-typography>
+                  </nuri-view>
+                </nuri-view>
+                <nuri-view direction="row" justify="between" align="start" gap="md">
+                  <nuri-typography size="md" muted>You send</nuri-typography>
+                  <nuri-view direction="column" align="end">
+                    <nuri-typography size="md" align="end">₿ 21 000</nuri-typography>
+                    <nuri-typography size="sm" align="end" muted>≈ € 19.80</nuri-typography>
+                  </nuri-view>
+                </nuri-view>
+                <nuri-view direction="row" justify="between" align="start" gap="md">
+                  <nuri-typography size="md" muted>From</nuri-typography>
+                  <nuri-typography size="md" align="end">Bitcoin</nuri-typography>
+                </nuri-view>
+                <nuri-view direction="row" justify="between" align="start" gap="md">
+                  <nuri-typography size="md" muted>Fee</nuri-typography>
+                  <nuri-typography size="md" align="end">≈ 12 sats</nuri-typography>
+                </nuri-view>
+                <nuri-view direction="row" justify="between" align="start" gap="md">
+                  <nuri-typography size="md" muted>Arrives</nuri-typography>
+                  <nuri-typography size="md" align="end">Seconds</nuri-typography>
+                </nuri-view>
+              </nuri-view>
+            </nuri-scroll>
+
+            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
+              <nuri-button size="lg" variant="solid" accent="lilac">Send ₿ 21 000</nuri-button>
+            </nuri-footer>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+</nuri-playground-shell>
+
+<!--
+  MISFIT LOG · send.html · board · what the sheet asked · what was done · the DS element, axis or value that would remove the workaround
+  send · recipient · RECENT / CONTACTS section labels · composed: the move.html labelled-divider recipe (a row of two growing separators flanking a sm emphasis muted typography) placed as a bare child inside nuri-list · a list section-header element (list-header / list-label) so the label is list vocabulary, not a page recipe
+  send · recipient · contact rows with a portrait avatar (◉) · dropped the portrait: 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 · recipient · field with no visible label ("Name, @username, address or invoice" is the placeholder) · composed: nuri-text-field with aria-label and no nuri-text-field-label — the descriptor's documented compact placement · none (sanctioned); logged so the operator sees the label-less field once
+  send · amount · unit switch glyph "⇄ €" beside the amount · composed: icon-button transfer-vertical soft (the set-amount precedent) · none beyond the precedent; a `transfer-horizontal` glyph would match the sheet's ⇄ but the receive flow already settled on vertical
+  send · amount · quick amounts [ 5 000 ] [ 10 000 ] [ Max ] under the cost line · dropped: the brief's tree omits them and the keypad board has no vertical room for a third row group at the default device · a quick-amount chip row (soft sm buttons) would compose today — the drop is a brief decision, not a DS gap
+  send · amount · "(◉) Emil" contact line at the top of the step · dropped: the brief's tree omits it (the title "Send to Emil" carries the recipient) · none — composable today as a list-action or an avatar + typography row
+  send · review · key/value rows (To / You send / From / Fee / Arrives) · composed: nuri-view row justify="between" align="start" with a muted md key and an end-aligned value column · a key/value (description) row element — review screens repeat this exact shape on every send journey
+  send · review · "Known contact · 3 sends" as a badge/tag · composed: nuri-typography size="sm" muted under the recipient name · a badge/tag element (the sheet's OQ 24)
+-->
+
+</body>
+</html>

From 2581a87381f73428475972c4207fdb5162f49abe Mon Sep 17 00:00:00 2001
From: Dario Aschero <dario.aschero@gmail.com>
Date: Thu, 22 Oct 2026 17:10:10 +0200
Subject: [PATCH 2/4] =?UTF-8?q?fix(playground):=20lists=20out=20of=20the?=
 =?UTF-8?q?=20padded=20column=20=E2=80=94=20the=20profile.html=20gutter=20?=
 =?UTF-8?q?rule?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The S1 recipient list (send.html) and the recipient + activate lists
(send-bank.html) sat inside a padding-x="lg" column, so row content was
inset lg + list sm + row md = 36px against the 18px field edge. The
column now carries no horizontal padding (profile.html precedent):
fields, headings and captions wrap their own lg gutter, the lists sit
bare so their 18px text gutter (list sm + row md) meets the field edge.
Measured: field 18 · avatars 18 · headings 18 on all four boards.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 packages/playground/pages/send-bank.html | 57 +++++++++++++++---------
 packages/playground/pages/send.html      | 14 ++++--
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/packages/playground/pages/send-bank.html b/packages/playground/pages/send-bank.html
index 56a31e8..310abfd 100644
--- a/packages/playground/pages/send-bank.html
+++ b/packages/playground/pages/send-bank.html
@@ -52,24 +52,29 @@
             </nuri-header>
 
             <nuri-scroll>
-              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
-                <nuri-text-field value="DE89 3704 0044 0532 0130 00" input-mode="text" placeholder="Name, @username, address or invoice" aria-label="Recipient">
-                  <nuri-text-field-button>Paste</nuri-text-field-button>
-                </nuri-text-field>
-                <nuri-typography size="sm" muted>Bank account · Germany</nuri-typography>
-
-                <nuri-tab-bar surface="transparent">
-                  <nuri-tab-bar-item selected aria-label="Personal">
-                    <nuri-tab-bar-item-label>Personal</nuri-tab-bar-item-label>
-                  </nuri-tab-bar-item>
-                  <nuri-tab-bar-item aria-label="Company">
-                    <nuri-tab-bar-item-label>Company</nuri-tab-bar-item-label>
-                  </nuri-tab-bar-item>
-                </nuri-tab-bar>
-
-                <nuri-text-field value="Anna Schmidt" placeholder="Name">
-                  <nuri-text-field-label>Name</nuri-text-field-label>
-                </nuri-text-field>
+              <!-- No horizontal padding on the outer column (profile.html): the
+                   fields keep their own lg gutter in an inner column, the list
+                   sits bare so its 18px text gutter (list sm + row md) lines up. -->
+              <nuri-view direction="column" align="stretch" gap="md" padding-bottom="lg">
+                <nuri-view direction="column" align="stretch" gap="md" padding-x="lg">
+                  <nuri-text-field value="DE89 3704 0044 0532 0130 00" input-mode="text" placeholder="Name, @username, address or invoice" aria-label="Recipient">
+                    <nuri-text-field-button>Paste</nuri-text-field-button>
+                  </nuri-text-field>
+                  <nuri-typography size="sm" muted>Bank account · Germany</nuri-typography>
+
+                  <nuri-tab-bar surface="transparent">
+                    <nuri-tab-bar-item selected aria-label="Personal">
+                      <nuri-tab-bar-item-label>Personal</nuri-tab-bar-item-label>
+                    </nuri-tab-bar-item>
+                    <nuri-tab-bar-item aria-label="Company">
+                      <nuri-tab-bar-item-label>Company</nuri-tab-bar-item-label>
+                    </nuri-tab-bar-item>
+                  </nuri-tab-bar>
+
+                  <nuri-text-field value="Anna Schmidt" placeholder="Name">
+                    <nuri-text-field-label>Name</nuri-text-field-label>
+                  </nuri-text-field>
+                </nuri-view>
 
                 <nuri-list>
                   <nuri-list-action aria-label="Add reference, optional">
@@ -328,8 +333,12 @@
             </nuri-header>
 
             <nuri-scroll>
-              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
-                <nuri-typography size="md" emphasis>What you get</nuri-typography>
+              <!-- No horizontal padding on the column (profile.html): headings
+                   and the caption wrap their own lg gutter, the lists sit bare. -->
+              <nuri-view direction="column" align="stretch" gap="md" padding-bottom="lg">
+                <nuri-view padding-x="lg">
+                  <nuri-typography size="md" emphasis>What you get</nuri-typography>
+                </nuri-view>
                 <nuri-list>
                   <nuri-list-action aria-label="Transfers to any bank account">
                     <nuri-list-action-leading-avatar name="arrow-up" variant="outline"></nuri-list-action-leading-avatar>
@@ -345,7 +354,9 @@
                   </nuri-list-action>
                 </nuri-list>
 
-                <nuri-typography size="md" emphasis>What you need</nuri-typography>
+                <nuri-view padding-x="lg">
+                  <nuri-typography size="md" emphasis>What you need</nuri-typography>
+                </nuri-view>
                 <nuri-list>
                   <nuri-list-action aria-label="An ID document">
                     <nuri-list-action-leading-avatar name="copy" variant="outline"></nuri-list-action-leading-avatar>
@@ -357,7 +368,9 @@
                   </nuri-list-action>
                 </nuri-list>
 
-                <nuri-typography size="sm" muted>Takes about 2 minutes. The first time is slower; after that it is instant.</nuri-typography>
+                <nuri-view padding-x="lg">
+                  <nuri-typography size="sm" muted>Takes about 2 minutes. The first time is slower; after that it is instant.</nuri-typography>
+                </nuri-view>
               </nuri-view>
             </nuri-scroll>
 
diff --git a/packages/playground/pages/send.html b/packages/playground/pages/send.html
index 1bd57bd..3d4630b 100644
--- a/packages/playground/pages/send.html
+++ b/packages/playground/pages/send.html
@@ -54,10 +54,16 @@
             </nuri-header>
 
             <nuri-scroll safe-area-bottom>
-              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
-                <nuri-text-field placeholder="Name, @username, address or invoice" input-mode="text" aria-label="Recipient">
-                  <nuri-text-field-button>Paste</nuri-text-field-button>
-                </nuri-text-field>
+              <!-- The column carries NO horizontal padding (the profile.html
+                   precedent): the field wraps its own lg gutter, the list sits
+                   bare so its 18px text gutter = list paddingX(sm) + row
+                   padding(md) lines up with the field edge — not lg + sm + md. -->
+              <nuri-view direction="column" align="stretch" gap="md" padding-bottom="lg">
+                <nuri-view padding-x="lg">
+                  <nuri-text-field placeholder="Name, @username, address or invoice" input-mode="text" aria-label="Recipient">
+                    <nuri-text-field-button>Paste</nuri-text-field-button>
+                  </nuri-text-field>
+                </nuri-view>
 
                 <nuri-list>
                   <nuri-list-action aria-label="Scan QR">

From bb33e6e1bd23120b2c59401c0297fbc16ba2f0e7 Mon Sep 17 00:00:00 2001
From: Dario Aschero <dario.aschero@gmail.com>
Date: Sat, 24 Oct 2026 15:18:23 +0200
Subject: [PATCH 3/4] feat(playground): send S1 boards (P6) + avatar
 exploration outside the DS

send.html: the recipient step rebuilt around flat contacts (P6): Close-only
topbar, Search, "Scan or paste", four recents, All contacts, New recipient;
the docked scanner; search mode; New recipient as sheet, "More" open and
full-screen alternative; amount and review kept. Pure DS composition, misfits
in the page's log.

send-bank.html: the IBAN recognised as a row, the holder-name step and the
locked row.

send-recipient.html: avatar exploration OUTSIDE the DS (page-local CSS, with
disclaimer). Evidence for the icon-avatar admission: X17 target (initials +
rail accessory, Nuri solid neutral, other rails outline), X19 the same
accessory on photos (randomuser.me placeholders), X16 nuri-expo's wordpets as
reference. Delete once the admission lands.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/playground/pages/index.html          |   3 +
 packages/playground/pages/send-bank.html      | 142 +++--
 packages/playground/pages/send-recipient.html | 315 +++++++++
 packages/playground/pages/send.html           | 603 ++++++++++++++++--
 4 files changed, 955 insertions(+), 108 deletions(-)
 create mode 100644 packages/playground/pages/send-recipient.html

diff --git a/packages/playground/pages/index.html b/packages/playground/pages/index.html
index f1cf29e..e8537a5 100644
--- a/packages/playground/pages/index.html
+++ b/packages/playground/pages/index.html
@@ -48,6 +48,9 @@
   <a class="nuri-pg__card" href="send.html">
     <span class="nuri-pg__card-name">Send</span>
   </a>
+  <a class="nuri-pg__card" href="send-recipient.html">
+    <span class="nuri-pg__card-name">Avatar exploration · outside the DS</span>
+  </a>
   <a class="nuri-pg__card" href="send-bank.html">
     <span class="nuri-pg__card-name">Send to bank</span>
   </a>
diff --git a/packages/playground/pages/send-bank.html b/packages/playground/pages/send-bank.html
index 310abfd..56cb13d 100644
--- a/packages/playground/pages/send-bank.html
+++ b/packages/playground/pages/send-bank.html
@@ -14,10 +14,10 @@
   SEND TO BANK · Euro to an IBAN (brief 2026-10-22)
   ═══════════════════════════════════════════════════════════════
 
-  Five boards from the nuri-expo send-euro-iban journey
+  Six boards from the nuri-expo send-euro-iban journey
   (docs/research/wireframes/send-euro-iban.md): S1 recipient (IBAN
-  recognised) · S2 amount, variant (b) card short · S3 review, two legs ·
-  S1 variant (c) locked · G1 activate. Same rule as send.html: pure DS
+  recognised as a row, P6) · N2 holder name · S2 amount, variant (b) card
+  short · S3 review, two legs · S1 variant (c) locked row · G1 activate. Same rule as send.html: pure DS
   composition (decision 57), no page CSS, no inline styles; every
   slightly-off composition is in the MISFIT LOG at the end of the page.
 
@@ -29,10 +29,10 @@
 
 <nuri-playground-shell doc="Send to bank">
 
-  <!-- S1 · RECIPIENT · the one field recognised an IBAN, so the bank fields
-       appear inline (sheet W3-1): parsed line, Personal | Company toggle,
-       Name, optional reference. No "To bank" product, no chooser. -->
-  <nuri-demo layout="board" controls="device,theme,accent" label="bank · recipient">
+  <!-- S1 · IBAN RECOGNISED (P6, revised 2026-10-23) · the pasted IBAN is one row
+       like every other recognised string: type, abbreviated IBAN, country. A new
+       IBAN goes to the holder-name step; a saved bank contact goes to S2. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="bank · recipient · IBAN">
     <template>
       <nuri-screen>
         <nuri-view chrome="canvas" fill></nuri-view>
@@ -41,7 +41,9 @@
           <nuri-modal-panel>
             <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
               <nuri-topbar surface="transparent">
-                <nuri-topbar-leading></nuri-topbar-leading>
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="qr-scan" variant="soft" aria-label="Scan QR"></nuri-icon-button>
+                </nuri-topbar-leading>
                 <nuri-topbar-center>
                   <nuri-typography size="lg" emphasis>Send</nuri-typography>
                 </nuri-topbar-center>
@@ -51,16 +53,58 @@
               </nuri-topbar>
             </nuri-header>
 
-            <nuri-scroll>
-              <!-- No horizontal padding on the outer column (profile.html): the
-                   fields keep their own lg gutter in an inner column, the list
-                   sits bare so its 18px text gutter (list sm + row md) lines up. -->
+            <nuri-scroll safe-area-bottom>
               <nuri-view direction="column" align="stretch" gap="md" padding-bottom="lg">
-                <nuri-view direction="column" align="stretch" gap="md" padding-x="lg">
-                  <nuri-text-field value="DE89 3704 0044 0532 0130 00" input-mode="text" placeholder="Name, @username, address or invoice" aria-label="Recipient">
-                    <nuri-text-field-button>Paste</nuri-text-field-button>
+                <nuri-view padding-x="lg">
+                  <nuri-text-field placeholder="Search or paste" input-mode="text" aria-label="Recipient" value="DE89 3704 0044 0532 0130 00">
+                    <nuri-text-field-icon-button name="cross-circle" aria-label="Clear"></nuri-text-field-icon-button>
                   </nuri-text-field>
-                  <nuri-typography size="sm" muted>Bank account · Germany</nuri-typography>
+                </nuri-view>
+                <nuri-list>
+                  <nuri-list-action aria-label="Bank account, DE89 ending 0130 00, Germany">
+                    <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Bank account</nuri-list-action-text>
+                    <nuri-list-action-text-muted>DE89 3704 … 0130 00 · Germany</nuri-list-action-text-muted>
+                  </nuri-list-action>
+                </nuri-list>
+              </nuri-view>
+            </nuri-scroll>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- N2 · HOLDER NAME · first send to an IBAN only: the one detail an IBAN cannot
+       carry (P3). Personal | Company, Name "as it appears on their bank account",
+       the Verification of Payee result (conditional: shown only if Wirex exposes
+       it, send-principles.md open question 11), optional reference. Continue
+       saves the contact, so later sends skip this step. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="bank · holder name">
+    <template>
+      <nuri-screen>
+        <nuri-view chrome="canvas" fill></nuri-view>
+
+        <nuri-modal open mode="full">
+          <nuri-modal-panel>
+            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+              <nuri-topbar surface="transparent">
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+                </nuri-topbar-leading>
+                <nuri-topbar-center>
+                  <nuri-typography size="lg" emphasis>Bank account</nuri-typography>
+                </nuri-topbar-center>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+
+            <nuri-scroll safe-area-bottom>
+              <nuri-view direction="column" align="stretch" gap="md" padding-bottom="lg">
+                <nuri-view direction="column" align="stretch" gap="md" padding-x="lg">
+                  <nuri-typography size="sm" muted>DE89 3704 0044 0532 0130 00 · Germany</nuri-typography>
 
                   <nuri-tab-bar surface="transparent">
                     <nuri-tab-bar-item selected aria-label="Personal">
@@ -74,8 +118,13 @@
                   <nuri-text-field value="Anna Schmidt" placeholder="Name">
                     <nuri-text-field-label>Name</nuri-text-field-label>
                   </nuri-text-field>
-                </nuri-view>
+                  <nuri-typography size="sm" muted>As it appears on their bank account.</nuri-typography>
 
+                  <nuri-view direction="row" align="center" gap="xs">
+                    <nuri-icon name="check-circle" size="sm"></nuri-icon>
+                    <nuri-typography size="sm">Name matches the account</nuri-typography>
+                  </nuri-view>
+                </nuri-view>
                 <nuri-list>
                   <nuri-list-action aria-label="Add reference, optional">
                     <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
@@ -85,7 +134,6 @@
                 </nuri-list>
               </nuri-view>
             </nuri-scroll>
-
             <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
               <nuri-button size="lg" variant="solid" accent="lilac">Continue</nuri-button>
             </nuri-footer>
@@ -255,9 +303,9 @@
     </template>
   </nuri-demo>
 
-  <!-- S1 (c) · RECIPIENT · LOCKED · the bank rail is not activated: the IBAN is
-       recognised and KEPT, the locked notice replaces the name fields, the
-       footer leads to the gate. -->
+  <!-- S1 (c) · LOCKED ROW · the bank rail is not activated: the IBAN is recognised
+       and KEPT, its row says so and is the action (no footer): tap opens G1, which
+       returns here with the IBAN still in the field. -->
   <nuri-demo layout="board" controls="device,theme,accent" label="bank · recipient · locked">
     <template>
       <nuri-screen>
@@ -267,7 +315,9 @@
           <nuri-modal-panel>
             <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
               <nuri-topbar surface="transparent">
-                <nuri-topbar-leading></nuri-topbar-leading>
+                <nuri-topbar-leading>
+                  <nuri-icon-button icon="qr-scan" variant="soft" aria-label="Scan QR"></nuri-icon-button>
+                </nuri-topbar-leading>
                 <nuri-topbar-center>
                   <nuri-typography size="lg" emphasis>Send</nuri-typography>
                 </nuri-topbar-center>
@@ -277,31 +327,24 @@
               </nuri-topbar>
             </nuri-header>
 
-            <nuri-scroll>
-              <nuri-view direction="column" align="stretch" gap="md" padding-x="lg" padding-bottom="lg">
-                <nuri-text-field value="DE89 3704 0044 0532 0130 00" input-mode="text" placeholder="Name, @username, address or invoice" aria-label="Recipient">
-                  <nuri-text-field-button>Paste</nuri-text-field-button>
-                </nuri-text-field>
-                <nuri-typography size="sm" muted>Bank account · Germany</nuri-typography>
-
-                <!-- Composed, not an Alert: the Alert message is single-line by
-                     contract (typography flow truncate · lines 1) and cuts
-                     "· about 2 min" at the default device. A soft View box with
-                     the glyph and two lines carries the sheet's boxed notice in
-                     full. No lock glyph in the icon set → warning-circle. Logged. -->
-                <nuri-view variant="soft" radius="lg" padding="md" direction="row" align="start" gap="sm">
-                  <nuri-icon name="warning-circle" size="sm"></nuri-icon>
-                  <nuri-view direction="column" align="stretch" fill="grow-shrink">
-                    <nuri-typography size="sm" emphasis>Locked</nuri-typography>
-                    <nuri-typography size="sm" muted>Bank transfers aren't activated yet · about 2 min</nuri-typography>
-                  </nuri-view>
+            <nuri-scroll safe-area-bottom>
+              <nuri-view direction="column" align="stretch" gap="md" padding-bottom="lg">
+                <nuri-view padding-x="lg">
+                  <nuri-text-field placeholder="Search or paste" input-mode="text" aria-label="Recipient" value="DE89 3704 0044 0532 0130 00">
+                    <nuri-text-field-icon-button name="cross-circle" aria-label="Clear"></nuri-text-field-icon-button>
+                  </nuri-text-field>
                 </nuri-view>
+                <nuri-list>
+                  <nuri-list-action aria-label="Bank account, not activated, about 2 minutes, activate">
+                    <nuri-list-action-leading-avatar name="bank" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Bank account</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Not activated · about 2 min</nuri-list-action-text-muted>
+                    <nuri-list-action-trailing-text>Activate</nuri-list-action-trailing-text>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                </nuri-list>
               </nuri-view>
             </nuri-scroll>
-
-            <nuri-footer safe-area-bottom direction="column" align="stretch" padding-bottom="lg" padding-x="lg">
-              <nuri-button size="lg" variant="solid" accent="lilac">Activate bank transfers</nuri-button>
-            </nuri-footer>
           </nuri-modal-panel>
         </nuri-modal>
       </nuri-screen>
@@ -387,9 +430,9 @@
 
 <!--
   MISFIT LOG · send-bank.html · board · what the sheet asked · what was done · the DS element, axis or value that would remove the workaround
-  bank · recipient · ( Personal │ Company ) segmented toggle · composed: nuri-tab-bar surface="transparent" with two label-only nuri-tab-bar-item (decision 56 makes TabBar the bottom destination switcher, distinct from the in-page Tabs) · an in-page Tabs / segmented control component
-  bank · recipient · "+ Add reference (optional)" as a text link · composed: nuri-list-action with a plus outline avatar + "Add reference" / "Optional" (Button has no ghost variant; only IconButton does) · Button variant="ghost" (a text-link button)
-  bank · recipient · field with no visible label (the IBAN sits in the one recipient field) · composed: nuri-text-field with aria-label and no label slot · none (sanctioned compact placement)
+  bank · holder name · ( Personal │ Company ) segmented toggle · composed: nuri-tab-bar surface="transparent" with two label-only nuri-tab-bar-item (decision 56 makes TabBar the bottom destination switcher, distinct from the in-page Tabs) · an in-page Tabs / segmented control component
+  bank · holder name · "+ Add reference (optional)" as a text link · composed: nuri-list-action with a plus outline avatar + "Add reference" / "Optional" (Button has no ghost variant; only IconButton does) · Button variant="ghost" (a text-link button)
+  bank · recipient · IBAN · field with no visible label (the IBAN sits in the one recipient field) · composed: nuri-text-field with aria-label and no label slot · none (sanctioned compact placement)
   bank · amount · card short · "⌂ DE89 3704 … 0130 00" (glyph + muted line) · composed: 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 exposes no muted attr; icon.css already has the [data-muted] rule the Alert icon uses) · a public `muted` on the Icon primitive (or an inline-icon typography slot)
   bank · amount · card short · amount centred under the IBAN line · composed: typography 3xl align="end" (the set-amount precedent right-aligns; 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 ]" · composed: 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 is at the truncation edge (natural 141px in 138px) · an Alert layout where the message wraps (lines > 1) or the action drops to its own row, so the boxed offer fits a 390 device
@@ -397,7 +440,10 @@
   bank · review · two legs · numbered steps "1 … / 2 …" · composed: row gap="sm" with an emphasis md "1"/"2" + a text column; the number is plain text, not a disc or a timeline dot · a numbered-step / timeline element (the sheet's OQ 24 three-dot vertical list)
   bank · review · two legs · key/value rows (To / They get) · composed: between-row + end-aligned value column (same as send.html) · a key/value (description) row element
   bank · review · two legs · "Known account · 2 sends" badge · composed: sm muted typography under the IBAN line · a badge/tag element (OQ 24)
-  bank · recipient · locked · a boxed two-line notice "Locked · Bank transfers aren't activated yet · about 2 min" with a lock glyph · composed: 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 · recipient · locked · the locked state as the recognised row ("Not activated · about 2 min", trailing "Activate") · composed: list-action with trailing text + chevron-right, the bank avatar in outline variant to read as inactive; no lock glyph in the set · a `lock` icon; the multi-line Alert this board needed before is no longer required here
+  bank · holder name · Verification of Payee result "Name matches the account" · composed: check-circle icon sm + sm typography in a row · none; conditional on Wirex exposing the result (send-principles.md open question 11)
+  bank · recipient · IBAN · Scan in the topbar leading slot, Paste replaced by a clear button once the field has text · same composition as send.html S1 · see send.html
+  bank · recipient · IBAN / locked · a full IBAN (27 characters, grouped) does not fit the field at the default device and truncates under the clear button · left as is: the recognised row below carries the abbreviated IBAN, which is what the user checks · none; for product: after a paste the RN field should show the end of the string
   bank · activate · "What you get" / "What you need" bullet lists · composed: nuri-list-action rows (pressable, with press colour) used 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 · composed: closest existing icons — `copy` for the document, `eye` for the selfie · `id-card` (or `passport`) and `camera` (or `user`) icons
 -->
diff --git a/packages/playground/pages/send-recipient.html b/packages/playground/pages/send-recipient.html
new file mode 100644
index 0000000..f0282a2
--- /dev/null
+++ b/packages/playground/pages/send-recipient.html
@@ -0,0 +1,315 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Nuri · Playground · Avatar exploration (outside the DS)</title>
+  <link rel="stylesheet" href="../generated/playground.css" />
+  <script src="../generated/boot.js" type="module"></script>
+  <!-- OUTSIDE THE DS · page-local CSS on purpose. Not a pattern to copy. -->
+  <style data-outside-ds>
+    /* OUTSIDE THE DS · page-local CSS on purpose: the target the avatar admission must make unnecessary. */
+    .xav { position: relative; flex: none; width: 48px; height: 48px; border-radius: 999px;
+           display: inline-flex; align-items: center; justify-content: center;
+           font: 600 15px/1 inherit; letter-spacing: .02em; color: var(--nuri-text-primary); }
+    .xav img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
+    /* initials content = the icon-avatar soft treatment (bg-strong, text-primary) */
+    .xav--soft { background: var(--nuri-bg-strong); color: var(--nuri-text-primary); }
+    /* accessory: bottom-right, 22px, 2px ring in the surface colour, glyph from the icon set */
+    .xbadge { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 999px;
+              display: inline-flex; align-items: center; justify-content: center;
+              box-shadow: 0 0 0 2px var(--nuri-bg-canvas); }
+    .xbadge nuri-icon { transform: scale(.72); }
+    /* solid + accent neutral = Nuri (dark fill, light glyph) */
+    .xbadge--solid { background: var(--nuri-accent-solid); color: var(--nuri-accent-on-solid); }
+    /* outline = every other rail: canvas fill, hairline, text-primary glyph (16.03:1, not muted 5.85:1) */
+    .xbadge--outline-strong { background: var(--nuri-bg-canvas); color: var(--nuri-text-primary);
+                              box-shadow: 0 0 0 2px var(--nuri-bg-canvas), inset 0 0 0 1px var(--nuri-border-subtle); }
+    /* person rows are hand-built (icon-avatar takes no initials): copy the DS trailing chevron (palette subtle) */
+    [data-xchev] { color: var(--nuri-border-strong); }
+  </style>
+</head>
+<body>
+
+<!--
+  ⚠ DISCLAIMER · OUTSIDE THE DESIGN SYSTEM (2026-10-24)
+  This page is NOT the norm and NOT DS composition. It uses page-local CSS to draw the
+  TARGET for the icon-avatar change the send journey needs, as evidence for an admission
+  request (docs/design-system-admission.md). Nothing here is adopted until that request
+  is accepted; when it is, this page is deleted and send.html uses the real avatar.
+
+  Target (X17): people = initials on the soft avatar; a rail accessory bottom-right;
+  Nuri = solid neutral (black), every other rail = outline with a text-primary glyph.
+  X19: the same accessory on an image avatar (Nuri users with a profile photo; sample
+  portraits from randomuser.me, placeholders only). X16: what nuri-expo draws today
+  (vendored wordpet pixel pets), kept as the reference the target replaces in lists.
+  Explored and dropped (2026-10-24): pastel / Radix / hue-wheel person tones, coloured
+  rail badges (orange Bitcoin, lilac bank), Nuri lilac, all-black badges, KYC check.
+-->
+
+<nuri-playground-shell doc="Avatar exploration · outside the DS">
+
+  <!-- X17 · TARGET · S1 recipient step. Actions keep the DS outline glyph avatar; people get
+       soft initials + rail accessory. The one solid accessory is Nuri. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="X17 · target · initials + rail accessory · nuri black">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" gap="md" padding-bottom="xl" fill>
+            <nuri-view padding-x="lg" padding-top="md" padding-bottom="sm">
+              <nuri-typography size="lg" emphasis>Send</nuri-typography>
+            </nuri-view>
+            <nuri-view padding-x="lg">
+              <nuri-text-field placeholder="Search" aria-label="Search contacts and Nuri users"></nuri-text-field>
+            </nuri-view>
+            <nuri-list>
+                  <nuri-list-action aria-label="Scan or paste">
+                    <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Scan or paste</nuri-list-action-text>
+                    <nuri-list-action-text-muted>From a QR code or copied text</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+            </nuri-list>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav xav--soft" aria-hidden="true">EB<span class="xbadge xbadge--solid" data-accent="neutral"><nuri-icon name="nuri" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Emil Berg</nuri-typography>
+                  <nuri-typography size="sm" muted>@emil</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav xav--soft" aria-hidden="true">CM<span class="xbadge xbadge--outline-strong"><nuri-icon name="bank" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Claude M.</nuri-typography>
+                  <nuri-typography size="sm" muted>N26 ···4521</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav xav--soft" aria-hidden="true">SC<span class="xbadge xbadge--solid" data-accent="neutral"><nuri-icon name="nuri" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Sara Conti</nuri-typography>
+                  <nuri-typography size="sm" muted>@sarac</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav xav--soft" aria-hidden="true">AK<span class="xbadge xbadge--outline-strong"><nuri-icon name="bitcoin" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Anna K.</nuri-typography>
+                  <nuri-typography size="sm" muted>bc1q…9m7t</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+            <nuri-list>
+                  <nuri-list-action aria-label="All contacts">
+                    <nuri-list-action-leading-avatar name="list-bullets" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>All contacts</nuri-list-action-text>
+                    <nuri-list-action-text-muted>15 saved</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="New recipient">
+                    <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>New recipient</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- X19 · TARGET ON PHOTOS · Emil and Sara (Nuri users) have a profile photo; the accessory
+       sits on the image exactly as on initials. Contacts without a photo keep initials. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="X19 · target on photos · accessory on an image avatar">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" gap="md" padding-bottom="xl" fill>
+            <nuri-view padding-x="lg" padding-top="md" padding-bottom="sm">
+              <nuri-typography size="lg" emphasis>Send</nuri-typography>
+            </nuri-view>
+            <nuri-view padding-x="lg">
+              <nuri-text-field placeholder="Search" aria-label="Search contacts and Nuri users"></nuri-text-field>
+            </nuri-view>
+            <nuri-list>
+                  <nuri-list-action aria-label="Scan or paste">
+                    <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Scan or paste</nuri-list-action-text>
+                    <nuri-list-action-text-muted>From a QR code or copied text</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+            </nuri-list>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav" aria-hidden="true"><img src="data:image/jpeg;base64,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" alt="" /><span class="xbadge xbadge--solid" data-accent="neutral"><nuri-icon name="nuri" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Emil Berg</nuri-typography>
+                  <nuri-typography size="sm" muted>@emil</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav xav--soft" aria-hidden="true">CM<span class="xbadge xbadge--outline-strong"><nuri-icon name="bank" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Claude M.</nuri-typography>
+                  <nuri-typography size="sm" muted>N26 ···4521</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav" aria-hidden="true"><img src="data:image/jpeg;base64,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" alt="" /><span class="xbadge xbadge--solid" data-accent="neutral"><nuri-icon name="nuri" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Sara Conti</nuri-typography>
+                  <nuri-typography size="sm" muted>@sarac</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav xav--soft" aria-hidden="true">AK<span class="xbadge xbadge--outline-strong"><nuri-icon name="bitcoin" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Anna K.</nuri-typography>
+                  <nuri-typography size="sm" muted>bc1q…9m7t</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+            <nuri-list>
+                  <nuri-list-action aria-label="All contacts">
+                    <nuri-list-action-leading-avatar name="list-bullets" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>All contacts</nuri-list-action-text>
+                    <nuri-list-action-text-muted>15 saved</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="New recipient">
+                    <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>New recipient</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- X16 · REFERENCE · nuri-expo today draws every contact as a wordpet
+       (lib/addressBook/petAvatar.ts, vendored wordpet v5, MIT): seed = Nuri username, else the
+       saved name. Pre-rendered with the vendored code (144 px) and inlined, with the target
+       accessories on top. Not the target: busy at 48pt, colour noise, unstable across renames. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="X16 · reference · nuri-expo today (wordpets) · not the target">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" gap="md" padding-bottom="xl" fill>
+            <nuri-view padding-x="lg" padding-top="md" padding-bottom="sm">
+              <nuri-typography size="lg" emphasis>Send</nuri-typography>
+            </nuri-view>
+            <nuri-view padding-x="lg">
+              <nuri-text-field placeholder="Search" aria-label="Search contacts and Nuri users"></nuri-text-field>
+            </nuri-view>
+            <nuri-list>
+                  <nuri-list-action aria-label="Scan or paste">
+                    <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Scan or paste</nuri-list-action-text>
+                    <nuri-list-action-text-muted>From a QR code or copied text</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+            </nuri-list>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav" aria-hidden="true"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAIAAABoJHXvAAAFZklEQVR42u3dP4sdVRjH8byG9GIgYJFGIphGhYAgGINFCosgrCCk3U7CVgEL7QwEUqRRUuxilTRBQiAhsKZciCyBxSoKvoCwdy1X8JHlSZ77PD7nzJx75893+RXL7Mw5c8/ncnhm7rmzp44OfiIjyimGADACGAEMMAIYAQwwAhgBDDAC2OTy98+fBQEMMNKGqgsbYIBBVR7AACNtqErZAAMMMMAAAwwwwAADDDDACGCAAcatKQJY92xdv/ZG+HgFMMD6o/r6q2/eyJDZZr1EADDAWOYG2GzBbHERg3kBDLB5g3kD/f13t5fGgnl7SsYICRhg/VH99cfvJ4lh6qLb1H0NmQ0wwPqgOlocHi0ONVVfSDGe9Ci9D5MNMMD6mww9qk8+/mJp8nt6+2s2wACbLtju4+3dx9uZQe8C5rUgvQMG2HTB4mF9790Pl8ZeGnt7SuJeAANs6kVHPNwZgNIWJBQdgM3j1tTbb72zlnBrCrCpT4l1U1m/YUoEDDDAAAOs64csNsfmJ3PbyR7ltU/RAdg8PsA8LvyRozRSl3aYEgGbLlh+cM+dPX/u7Hlvoov3jH8AA2zqN38l8aDLlhjD28duGf5iN8AA6wNsf+/J/t4Ty6aH3iYD5h2l+5LeY7B1Le0GDLD+FuFYNm+45Xe9pz3Kw7NU3iIcjSR7atrVEAIG2DomRjut1R3lTYYWKU47NsAA6+XC+Yf7S6MJ7XA/+uXe0lg8zeP15U2A62UDDLA2VBrMRmC8wl3+6h1b16NksThcLA4BA2wqYFJw22TAvGNLwQRJ8mL/+Yv953pLazbAAOvvUQ9SGngDrakyYDGbRN/29agEyQtggLUHix8YFN/CiR+dYuOV8l7yLduhtzzSpt5iJ0bAAFsHlceW+UKfTilYvmXv4iGTdhMjYHMF0wCvvv0xmSV4/y6eKf2CUGYQS9uUM9GDvn339vbd/5mEb928cevmDcAAGx6YXpjmLaK2iW/76niFeLwgXLMJhrDpyPnL76Mp6wGbEVh+QbUH9urXj06ikfR2Dyzfr54Y9et9tnfwbO8gXkAAGGB9F/T/qagh8yZDu5Qzv6D6tfYTyYPZM9EAguRFswEGWNPJ0AGzePESmtWAeeegbwpbnkubDy5tPvDYAANstYVGDGaXtsWQUg7UUUm89u2ZWDChsmnHBticwDJssv3ynSuX71yJwbylLHVsW1dPb109HVNZsHg5TYYKMMBWdeGstwiYt4/3gX0ezLusjqk8MHsmMZh+owAG2KounGOwzEJozRbjeUV/BizuMTMlAgbYqooOgdGJweq+ZODhdQebXZUI2OjBLF4pmC1D8kV/Bixuv44NMMCGUXSUgpXitQazbCO4Ww/YKMFiNguW/7K3PiqP5y2utsm/geyygPgDzBF8oQ+wQYDVdZ8B89gytKWTpFfK217ihTQxW+vHqwA2LbC6Lzfkp8TM26JLeRJ/aBIvRsuf7YAeXQTYaMB09x+8f/EkdWBeC6WPMcoXBaUXD3UDvUoqwKYFFrPVpUvx0mVaW+/jvAADrLzo0AzHGxvHGxv293gK/W3ny6VZMtyff5rMusC812JfEWDzBtPd5IuI/DSYZ5O/vny6+/Lpbuk/4nit3OiAHTO0CGBTBPMGq69CIwPpnYMMpbBlooe+lFlaiN9GQyAEbPxgw5kSdy6c2blwJj+tabAu2MMBswFsKmAeWx4j3jNzcpotk7pyQ6JbAAywdYB1v/lbCpaZnHX+fLh5kjrsIVMBNkWweMhaHFUXTWXZMhk+FWDTBdMAdd20HhQPbCwMgAE27MyBCjDAhkEFGGCAtaQCDDDAWlJR1gMGWHsqwAAbRP4BwMSoLEgR948AAAAASUVORK5CYII=" alt="" /><span class="xbadge xbadge--solid" data-accent="neutral"><nuri-icon name="nuri" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Emil Berg</nuri-typography>
+                  <nuri-typography size="sm" muted>@emil</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav" aria-hidden="true"><img src="data:image/png;base64,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" alt="" /><span class="xbadge xbadge--outline-strong"><nuri-icon name="bank" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Claude M.</nuri-typography>
+                  <nuri-typography size="sm" muted>N26 ···4521</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav" aria-hidden="true"><img src="data:image/png;base64,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" alt="" /><span class="xbadge xbadge--solid" data-accent="neutral"><nuri-icon name="nuri" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Sara Conti</nuri-typography>
+                  <nuri-typography size="sm" muted>@sarac</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+              <nuri-view direction="row" align="center" gap="md" padding-x="lg" height="xl">
+                <span class="xav" aria-hidden="true"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAIAAABoJHXvAAAFlElEQVR42u3dv2sdRxAHcP0PbgIpYkgwxilCGoHBKkwKO40LVf4DUgQCKdwbjDEEAv5RGAwunCZYIqQwJJAqVkJk40oYo8JCjaJCuBaxXb6AxxzDG88we7t3N7v3Fd9CvHd7b9980Ore7d69lV9+/6vL/tHx/tExfwSJlhWAAQwBGLIEBqrI4ToAA1iJbiEAA9jwYLfu/byUOVMBrE6wUlSyuJ7ktJ0DJMDmCpZf4uHS0iEPwOoHawOpPTCtPwADWGw2WYhaBkOAtQvWBlVkMH8fANYiWBsHHVpRAAYwgJU4lI8wGOb3AWDtgo2DN9z0CsAAVg9Y2emVOSw+KHXIA7C5gtV4mqeuwRBgAMNyOYABrCawjz860UV7dpxWcWoCsLmCDUH15vV/XXhBKYt3P/LxUq0ABrAWwXj5jg73jw73qcT0yML84dtQ25xW/diGPuQB2DzAhugWp6LybT9+uP34IWfzF53a2q34nmWrfmwAA1hsMCoc5fjJ2vGTNf4ILzc9y8utte3XiuIHG+cDO8DaAhtz0o9KQ4PS7s7W7s4WlYx+t4c43kq2tQdG+xUBBrBxweRHTvs0T+o/bc7GDwT+3HjQRRadHqcttbZaK96Wt4p2uAGwtsD4y0uAnHjAeCmnSrTBEGAtgslyv/p+cyn9tkml+vXat120Z+22qfv0swEMYOlgNgDPZ5983sXeUuLJV+RFjBDZz2mXIACsfjA5GA4NxgfDaGByYAQYwOoEswt355sLXbRn7bap+5QDY4QFdACrDUzrxPhgvHw8Zz79skvqs/32IDkBBrB2wbTi2khl9wAwgI31wfntby+WIsHkNh6wK+urV9ZXUwG0PH/2T5ec/VCvhljCDbB5g0k2ySDB7C0lFf8Icfn86cvnT+ezcaocNuoJ9QpgAIsBpm1jg/HX4mz9ooH590Bg0agABrCUIVFbgrC4/Whx+1FZqlQ2AqOeDHehH8AApi9by1+Eww83qDRa7OL+sflTl3wwuycR2ADWIpifzd5Sm8Sxy0T//LVwME/svQEMYFEvmc1Z0qyxlaXKYetHNcQBC8AAlgIml9/QIfXL6zecSaXy7JPY+GRm6uJt/z8FgAFsmNtBaFSpYH42/944WCob53m6s9fFPi0HMIANAyap6ANsKljZaBM92uJtm0qC5Sw1ANhcwfyXr2tLbviE4b9/b08ee0JVu5gDYAArAdbvhC9/hPNEo9LY+O/2uwMYwPqC5UysaJMakmragw6KxiYj36kNNuqpKYBVA8Zf8uYXp5Jig0Wj0tgABrDawGIi2Xj2IgOAAazcQcfBxXMHF88t9n78YOhZigamlWb30teTR+sbwABWDxgvTQQkG49+BxjAhgGTt4PIB9tYPbmxejIyFQ/1FmAAqweMD4zx46HygOWwAaxFMO3SIE5ih7bnFyXwUz6yNE/Pnpk8sle8z/y90LujLynwJIcNYK2D2ZMs2p8/B5OnoyLweCJPU3GwoEMiwKoE09hsMO1jsiwNHUBPBaO9uvZROtz0CsCqAfMsF7HB+DYaEhUofjQ8CXb/u6+WAjCADQnGt/SUhhZrTgXjf3VtmRvAAFZ6qbb/sDV1cZz/dl7a13H495DzxT8AA9jwlxuVvQBbnjIudftLeRGGdiPL1GXVOV/FBTCAjRt7UkZOami3cfAsFy8Flv+lkgADWAwqWWLPxU6p+4xw63OAASwGWNl9RqMCGMBKfwD3LIwpCxZ5MAQYwEpQ0dT7IvHHczLMzx/t1ucAA1g5MG1ZmRZ7eHx/68zEH9pzTDaA1QZ29Ye7QcKnN1MXUVNbubd8/jj1oQAMYCXY/IsJ7LL6DzfkZUUAA1iLYBqeltTB1sMfkwpgAIudUvwAAxjA2g3AAIYADAEYwBCAIQADGAIwBGAAQybK/5+TR0V4Nn7uAAAAAElFTkSuQmCC" alt="" /><span class="xbadge xbadge--outline-strong"><nuri-icon name="bitcoin" size="sm"></nuri-icon></span></span>
+                <nuri-view direction="column" align="start" fill="grow-shrink">
+                  <nuri-typography size="md" emphasis>Anna K.</nuri-typography>
+                  <nuri-typography size="sm" muted>bc1q…9m7t</nuri-typography>
+                </nuri-view>
+                  <nuri-icon name="chevron-right" data-xchev></nuri-icon>
+              </nuri-view>
+            <nuri-list>
+                  <nuri-list-action aria-label="All contacts">
+                    <nuri-list-action-leading-avatar name="list-bullets" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>All contacts</nuri-list-action-text>
+                    <nuri-list-action-text-muted>15 saved</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="New recipient">
+                    <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>New recipient</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+</nuri-playground-shell>
+
+<!--
+  GAP LOG · what the icon-avatar admission has to cover
+  content · icon-avatar takes an icon OR an image today; add initials (1–2 letters, derived by the caller) · soft treatment: bg-strong + text-primary, size-scaled type
+  accessory · a slot bottom-right on every content type (initials | image | glyph), ~22px on the 48px avatar, 2px ring in the surface colour, glyph from the icon set
+  accessory variants · solid (accent neutral: dark fill, light glyph) for Nuri · outline (canvas fill, border-subtle hairline, text-primary glyph) for every other rail · no per-rail colour table
+  sizes · decide which avatar sizes carry an accessory (the sm 24px probably none)
+  list · a person row = list-action with the new avatar as leading part; today the rows here are hand-built nuri-view rows
+  a11y · the accessory is decorative when the subtitle names the rail (@user, N26 ···4521, bc1q…); otherwise it needs a label
+  icons · missing: user, phone (mobile money), users or address-book (All contacts), globe, lock, id-card, camera
+  not in scope · person tones / colours per name · KYC or "verified" marks · generated avatars (wordpets stay an app decision, at most for the profile)
+-->
+
+</body>
+</html>
diff --git a/packages/playground/pages/send.html b/packages/playground/pages/send.html
index 3d4630b..dd7f462 100644
--- a/packages/playground/pages/send.html
+++ b/packages/playground/pages/send.html
@@ -11,7 +11,7 @@
 
 <!--
   ═══════════════════════════════════════════════════════════════
-  SEND · Lightning / ark to a saved contact (brief 2026-10-22)
+  SEND · Lightning / ark to a saved contact (brief 2026-10-22 · S1 replaced by the 2026-10-24 explorations: recipient, scanner, search, new recipient · amount and review kept, to be finalised)
   ═══════════════════════════════════════════════════════════════
 
   Three boards, one per step of the nuri-expo send journey
@@ -30,87 +30,507 @@
 
 <nuri-playground-shell doc="Send">
 
-  <!-- S1 · RECIPIENT · one field for every rail, Scan QR, then the contact
-       sections. No footer: rows advance on tap. The sheet's two sections
-       (RECENT · CONTACTS) are drawn with the brief's names; dividers use the
-       move.html labelled-divider recipe inside the list. -->
+  <!-- A1 · PROFILE PATTERN (revised 2026-10-24) · profile.html chrome: transparent
+       docked topbar with Close only, the title "Send" as content. Under it a field
+       "Search" with ONE meaning: contacts and Nuri usernames (a trigger into the A2
+       search mode; a complete pasted identifier is still recognised, undocumented).
+       Then "Scan or paste" first (opens S0, the scanner: camera, Paste, Upload), four
+       recents, All contacts, New recipient (where typing by hand lives).
+       Action rows share one anatomy: outline glyph, title, chevron. -->
   <nuri-demo layout="board" controls="device,theme,accent" label="send · recipient">
     <template>
       <nuri-screen>
-        <nuri-view chrome="canvas" fill></nuri-view>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" gap="md" padding-bottom="xl" fill>
+            <nuri-view padding-x="lg" padding-top="md" padding-bottom="sm">
+              <nuri-typography size="lg" emphasis>Send</nuri-typography>
+            </nuri-view>
+            <nuri-view padding-x="lg">
+              <nuri-text-field placeholder="Search" aria-label="Search contacts and Nuri users"></nuri-text-field>
+            </nuri-view>
+            <nuri-list>
+              <nuri-list-action aria-label="Scan or paste">
+                <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Scan or paste</nuri-list-action-text>
+                <nuri-list-action-text-muted>From a QR code or copied text</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Emil Berg, at emil">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Emil Berg</nuri-list-action-text>
+                <nuri-list-action-text-muted>@emil</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Claude M., N26 account ending 4521">
+                <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Claude M.</nuri-list-action-text>
+                <nuri-list-action-text-muted>N26 ···4521</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Sara Conti, at sarac">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Sara Conti</nuri-list-action-text>
+                <nuri-list-action-text-muted>@sarac</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Anna K., Bitcoin address">
+                <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Anna K.</nuri-list-action-text>
+                <nuri-list-action-text-muted>bc1q…9m7t</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="All contacts">
+                <nuri-list-action-leading-avatar name="list-bullets" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>All contacts</nuri-list-action-text>
+                <nuri-list-action-text-muted>15 saved</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="New recipient">
+                <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>New recipient</nuri-list-action-text>
+                <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
 
-        <nuri-modal open mode="full">
+  <!-- S0 · SCANNER (2026-10-24, the one kept) · reuses the ruled scan.html board
+       (operator ruling 2026-08-17): title lg, panel top corners rounded like a sheet,
+       air between copy and buttons, Footer inside the panel for the safe-area bottom
+       padding. Changes for the send flow: no "Scan" button (a live camera reads a QR,
+       and a printed IBAN as Vivid does); copy names what it reads. Close over the
+       camera, top right. The camera column and the panel are stacked so the viewfinder
+       centres in the visible height; the panel's rounded corners reveal the dark
+       column behind it. Status bar: not driven by the DS (docs/status-bar-declaration-
+       note.md); in RN a <StatusBar style="light"/> inside this screen. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · scanner">
+    <template>
+      <nuri-screen>
+        <nuri-scope mode="dark">
+          <nuri-view chrome="canvas" fill direction="column" align="stretch">
+            <nuri-view direction="column" align="stretch" justify="center" padding-x="xl" fill="grow">
+              <nuri-view padding-x="lg">
+                <nuri-view chrome="strong" radius="lg" aspect-ratio="square"></nuri-view>
+              </nuri-view>
+            </nuri-view>
+            <nuri-scope mode="light">
+              <nuri-view chrome="canvas" radius-top="lg" direction="column" align="stretch" gap="xl" padding-x="lg" padding-top="xl">
+                <nuri-view direction="column" align="stretch" gap="sm" padding-bottom="md">
+                  <nuri-typography size="lg" emphasis>Who is your recipient?</nuri-typography>
+                  <nuri-typography size="md" muted>Point the camera at a QR code or a printed IBAN, or paste or upload one.</nuri-typography>
+                </nuri-view>
+                <nuri-footer safe-area-bottom direction="column" align="stretch" gap="sm" padding-bottom="lg">
+                  <nuri-view direction="row" distribute="even" gap="sm">
+                    <nuri-button size="lg" variant="soft">Paste</nuri-button>
+                    <nuri-button size="lg" variant="soft">Upload</nuri-button>
+                  </nuri-view>
+                </nuri-footer>
+              </nuri-view>
+            </nuri-scope>
+          </nuri-view>
+        </nuri-scope>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- A2 · SEARCH, EMPTY QUERY (revised 2026-10-24) · the country-picker.html pattern:
+       Back + the field pinned in the topbar (size md, the topbar height), focused,
+       keyboard up. One screen, two entries: from Search on A1 it opens with
+       autofocus (keyboard up); from "All contacts" without focus (it reads as the
+       address book). With an empty query the list IS the address book, A–Z, one row per identifier (Claude
+       M. appears twice: @claudem and his N26 account, P6). New recipient stays last.
+       No Paste: the field searches people (P6). -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · search · empty">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent" layout="fluid">
+              <nuri-topbar-leading>
+                <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+              </nuri-topbar-leading>
+              <nuri-topbar-content>
+                <nuri-text-field size="md" placeholder="Search" aria-label="Search contacts and Nuri users"></nuri-text-field>
+              </nuri-topbar-content>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" padding-top="sm" padding-bottom="xl" fill>
+            <nuri-list>
+              <nuri-list-action aria-label="Anna K., bc1q…9m7t">
+                <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Anna K.</nuri-list-action-text>
+                <nuri-list-action-text-muted>bc1q…9m7t</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Ben Ross, @benr">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Ben Ross</nuri-list-action-text>
+                <nuri-list-action-text-muted>@benr</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Claude M., @claudem">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Claude M.</nuri-list-action-text>
+                <nuri-list-action-text-muted>@claudem</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Claude M., N26 ···4521">
+                <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Claude M.</nuri-list-action-text>
+                <nuri-list-action-text-muted>N26 ···4521</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Dana V., Visa ···7712">
+                <nuri-list-action-leading-avatar name="card" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Dana V.</nuri-list-action-text>
+                <nuri-list-action-text-muted>Visa ···7712</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Emil Berg, @emil">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Emil Berg</nuri-list-action-text>
+                <nuri-list-action-text-muted>@emil</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Marta Lenz, @marta">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Marta Lenz</nuri-list-action-text>
+                <nuri-list-action-text-muted>@marta</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Sara Conti, @sarac">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Sara Conti</nuri-list-action-text>
+                <nuri-list-action-text-muted>@sarac</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="New recipient, Bitcoin address, IBAN and more">
+                <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>New recipient</nuri-list-action-text>
+                <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- A3 · SEARCH, "cla" · filters names, @usernames and last digits; Clear replaces
+       nothing (no Paste to replace). A full @username not in contacts would add a
+       "Not in your contacts" row from the directory (exact match only). -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · search · cla">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent" layout="fluid">
+              <nuri-topbar-leading>
+                <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+              </nuri-topbar-leading>
+              <nuri-topbar-content>
+                <nuri-text-field size="md" placeholder="Search" aria-label="Search contacts and Nuri users" value="cla">
+                  <nuri-text-field-icon-button name="cross-circle" aria-label="Clear search"></nuri-text-field-icon-button>
+                </nuri-text-field>
+              </nuri-topbar-content>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" padding-top="sm" padding-bottom="xl" fill>
+            <nuri-list>
+              <nuri-list-action aria-label="Claude M., @claudem">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Claude M.</nuri-list-action-text>
+                <nuri-list-action-text-muted>@claudem</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Claude M., N26 ···4521">
+                <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Claude M.</nuri-list-action-text>
+                <nuri-list-action-text-muted>N26 ···4521</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Clara Neri, bc1q…4f2k">
+                <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Clara Neri</nuri-list-action-text>
+                <nuri-list-action-text-muted>bc1q…4f2k</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="New recipient, Bitcoin address, IBAN and more">
+                <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>New recipient</nuri-list-action-text>
+                <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
+  <!-- N1b · NEW RECIPIENT AS A SHEET (draft 2026-10-24) · the same four rows in a
+       bottom sheet over A1 (the move.html currency-picker recipe: mode="sheet",
+       scrim dim, content height, title in the topbar, Close on the right). Lighter
+       than a pushed screen: the user stays on A1 and picks a kind; the chosen row
+       then pushes its form full screen. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · new recipient · sheet">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" gap="md" padding-bottom="xl" fill>
+            <nuri-view padding-x="lg" padding-top="md" padding-bottom="sm">
+              <nuri-typography size="lg" emphasis>Send</nuri-typography>
+            </nuri-view>
+            <nuri-view padding-x="lg">
+              <nuri-text-field placeholder="Search" aria-label="Search contacts and Nuri users"></nuri-text-field>
+            </nuri-view>
+            <nuri-list>
+              <nuri-list-action aria-label="Scan or paste">
+                <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Scan or paste</nuri-list-action-text>
+                <nuri-list-action-text-muted>From a QR code or copied text</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Emil Berg, at emil">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Emil Berg</nuri-list-action-text>
+                <nuri-list-action-text-muted>@emil</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Claude M., N26 account ending 4521">
+                <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Claude M.</nuri-list-action-text>
+                <nuri-list-action-text-muted>N26 ···4521</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Sara Conti, at sarac">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Sara Conti</nuri-list-action-text>
+                <nuri-list-action-text-muted>@sarac</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Anna K., Bitcoin address">
+                <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Anna K.</nuri-list-action-text>
+                <nuri-list-action-text-muted>bc1q…9m7t</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="All contacts">
+                <nuri-list-action-leading-avatar name="list-bullets" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>All contacts</nuri-list-action-text>
+                <nuri-list-action-text-muted>15 saved</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="New recipient">
+                <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>New recipient</nuri-list-action-text>
+                <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+
+        <nuri-modal open mode="sheet" scrim="dim">
           <nuri-modal-panel>
-            <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
-              <nuri-topbar surface="transparent">
-                <nuri-topbar-leading></nuri-topbar-leading>
-                <nuri-topbar-center>
-                  <nuri-typography size="lg" emphasis>Send</nuri-typography>
-                </nuri-topbar-center>
+            <nuri-header chrome="transparent">
+              <nuri-topbar surface="transparent" layout="fluid">
+                <nuri-topbar-content>
+                  <nuri-topbar-title>New recipient</nuri-topbar-title>
+                </nuri-topbar-content>
                 <nuri-topbar-trailing>
                   <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
                 </nuri-topbar-trailing>
               </nuri-topbar>
             </nuri-header>
-
             <nuri-scroll safe-area-bottom>
-              <!-- The column carries NO horizontal padding (the profile.html
-                   precedent): the field wraps its own lg gutter, the list sits
-                   bare so its 18px text gutter = list paddingX(sm) + row
-                   padding(md) lines up with the field edge — not lg + sm + md. -->
-              <nuri-view direction="column" align="stretch" gap="md" padding-bottom="lg">
-                <nuri-view padding-x="lg">
-                  <nuri-text-field placeholder="Name, @username, address or invoice" input-mode="text" aria-label="Recipient">
-                    <nuri-text-field-button>Paste</nuri-text-field-button>
-                  </nuri-text-field>
-                </nuri-view>
-
+              <nuri-view direction="column" align="stretch" padding-bottom="lg">
                 <nuri-list>
-                  <nuri-list-action aria-label="Scan QR">
-                    <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
-                    <nuri-list-action-text>Scan QR</nuri-list-action-text>
+                  <nuri-list-action aria-label="Bank account, IBAN · arrives today">
+                    <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Bank account</nuri-list-action-text>
+                    <nuri-list-action-text-muted>IBAN · arrives today</nuri-list-action-text-muted>
                     <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
                   </nuri-list-action>
-
-                  <nuri-view direction="row" align="center" gap="sm" height="md" padding-x="md">
-                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
-                    <nuri-typography size="sm" emphasis muted>Recent</nuri-typography>
-                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
-                  </nuri-view>
-
-                  <nuri-list-action aria-label="Emil, at emil, 3 sends">
-                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
-                    <nuri-list-action-text>Emil</nuri-list-action-text>
-                    <nuri-list-action-text-muted>@emil · 3 sends</nuri-list-action-text-muted>
+                  <nuri-list-action aria-label="Bitcoin wallet, Address or Lightning invoice">
+                    <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Bitcoin wallet</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Address or Lightning invoice</nuri-list-action-text-muted>
                     <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
                   </nuri-list-action>
-                  <nuri-list-action aria-label="Anna Schmidt, bank account">
-                    <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
-                    <nuri-list-action-text>Anna Schmidt</nuri-list-action-text>
-                    <nuri-list-action-text-muted>Bank account</nuri-list-action-text-muted>
+                  <nuri-list-action aria-label="Nuri user, Their @username · no fee">
+                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Nuri user</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Their @username · no fee</nuri-list-action-text-muted>
                     <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
                   </nuri-list-action>
+                  <nuri-list-action aria-label="More, Visa Direct and mobile money">
+                    <nuri-list-action-leading-avatar name="chevron-down" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>More</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Visa Direct and mobile money</nuri-list-action-text-muted>
+                  </nuri-list-action>
+                </nuri-list>
+              </nuri-view>
+            </nuri-scroll>
+          </nuri-modal-panel>
+        </nuri-modal>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
 
-                  <nuri-view direction="row" align="center" gap="sm" height="md" padding-x="md">
-                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
-                    <nuri-typography size="sm" emphasis muted>Contacts</nuri-typography>
-                    <nuri-view fill="grow"><nuri-separator y-space="none"></nuri-separator></nuri-view>
-                  </nuri-view>
+  <!-- N1c · MORE OPEN (draft 2026-10-24) · tapping More grows the same sheet in
+       place: the More row is replaced by the hidden kinds, no toggle back, no nested
+       navigation. Card = Visa Direct push-to-card (tolerated, P6). Mobile money =
+       one form: country (last used), phone number, network only for Tanzania and only
+       if the provider needs it, name if needed; a Person / Business switch covers
+       Lipa Namba. TanQR moves to the scanner (it is a QR). Bank abroad (Tanzania) is
+       not drawn: pending the decision to keep it. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · new recipient · more open">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" gap="md" padding-bottom="xl" fill>
+            <nuri-view padding-x="lg" padding-top="md" padding-bottom="sm">
+              <nuri-typography size="lg" emphasis>Send</nuri-typography>
+            </nuri-view>
+            <nuri-view padding-x="lg">
+              <nuri-text-field placeholder="Search" aria-label="Search contacts and Nuri users"></nuri-text-field>
+            </nuri-view>
+            <nuri-list>
+              <nuri-list-action aria-label="Scan or paste">
+                <nuri-list-action-leading-avatar name="qr-scan" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Scan or paste</nuri-list-action-text>
+                <nuri-list-action-text-muted>From a QR code or copied text</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Emil Berg, at emil">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Emil Berg</nuri-list-action-text>
+                <nuri-list-action-text-muted>@emil</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Claude M., N26 account ending 4521">
+                <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Claude M.</nuri-list-action-text>
+                <nuri-list-action-text-muted>N26 ···4521</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Sara Conti, at sarac">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Sara Conti</nuri-list-action-text>
+                <nuri-list-action-text-muted>@sarac</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Anna K., Bitcoin address">
+                <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Anna K.</nuri-list-action-text>
+                <nuri-list-action-text-muted>bc1q…9m7t</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="All contacts">
+                <nuri-list-action-leading-avatar name="list-bullets" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>All contacts</nuri-list-action-text>
+                <nuri-list-action-text-muted>15 saved</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="New recipient">
+                <nuri-list-action-leading-avatar name="plus" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>New recipient</nuri-list-action-text>
+                <nuri-list-action-text-muted>Bitcoin address, IBAN and more</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
 
-                  <nuri-list-action aria-label="Ben">
-                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
-                    <nuri-list-action-text>Ben</nuri-list-action-text>
+        <nuri-modal open mode="sheet" scrim="dim">
+          <nuri-modal-panel>
+            <nuri-header chrome="transparent">
+              <nuri-topbar surface="transparent" layout="fluid">
+                <nuri-topbar-content>
+                  <nuri-topbar-title>New recipient</nuri-topbar-title>
+                </nuri-topbar-content>
+                <nuri-topbar-trailing>
+                  <nuri-icon-button icon="cross" variant="soft" aria-label="Close"></nuri-icon-button>
+                </nuri-topbar-trailing>
+              </nuri-topbar>
+            </nuri-header>
+            <nuri-scroll safe-area-bottom>
+              <nuri-view direction="column" align="stretch" padding-bottom="lg">
+                <nuri-list>
+                  <nuri-list-action aria-label="Bank account, IBAN · arrives today">
+                    <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Bank account</nuri-list-action-text>
+                    <nuri-list-action-text-muted>IBAN · arrives today</nuri-list-action-text-muted>
                     <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
                   </nuri-list-action>
-                  <nuri-list-action aria-label="Carla">
-                    <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
-                    <nuri-list-action-text>Carla</nuri-list-action-text>
+                  <nuri-list-action aria-label="Bitcoin wallet, Address or Lightning invoice">
+                    <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Bitcoin wallet</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Address or Lightning invoice</nuri-list-action-text-muted>
                     <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
                   </nuri-list-action>
-                  <nuri-list-action aria-label="Dana, at dana">
+                  <nuri-list-action aria-label="Nuri user, Their @username · no fee">
                     <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
-                    <nuri-list-action-text>Dana</nuri-list-action-text>
-                    <nuri-list-action-text-muted>@dana</nuri-list-action-text-muted>
+                    <nuri-list-action-text>Nuri user</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Their @username · no fee</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="Card, Visa Direct">
+                    <nuri-list-action-leading-avatar name="card" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Card</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Visa Direct</nuri-list-action-text-muted>
+                    <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+                  </nuri-list-action>
+                  <nuri-list-action aria-label="Mobile money, Tanzania and Kenya">
+                    <nuri-list-action-leading-avatar name="wallet" variant="outline"></nuri-list-action-leading-avatar>
+                    <nuri-list-action-text>Mobile money</nuri-list-action-text>
+                    <nuri-list-action-text-muted>Tanzania and Kenya</nuri-list-action-text-muted>
                     <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
                   </nuri-list-action>
                 </nuri-list>
@@ -122,6 +542,60 @@
     </template>
   </nuri-demo>
 
+  <!-- N1 · NEW RECIPIENT, FIRST STEP (draft 2026-10-24) · same chrome as A1: the one
+       button sits top right where Close is, here as Back (a pushed step). One row
+       per kind of recipient, same anatomy as every row (avatar, title, subtitle,
+       chevron). Ordered by how often people type one by hand: an IBAN from a bill
+       first. Each row opens a form with the right keyboard and validation that ends
+       with saving the contact. Nuri user hands over to A2 with autofocus. -->
+  <nuri-demo layout="board" controls="device,theme,accent" label="send · new recipient · screen (alternative)">
+    <template>
+      <nuri-screen>
+        <nuri-dock edge="top">
+          <nuri-header safe-area-top chrome="transparent" safe-area-chrome="canvas">
+            <nuri-topbar surface="transparent">
+              <nuri-topbar-trailing>
+                <nuri-icon-button icon="chevron-left" variant="soft" aria-label="Back"></nuri-icon-button>
+              </nuri-topbar-trailing>
+            </nuri-topbar>
+          </nuri-header>
+        </nuri-dock>
+        <nuri-scroll safe-area-bottom inset-top="dock">
+          <nuri-view direction="column" align="stretch" justify="start" gap="md" padding-bottom="xl" fill>
+            <nuri-view padding-x="lg" padding-top="md" padding-bottom="sm">
+              <nuri-typography size="lg" emphasis>New recipient</nuri-typography>
+            </nuri-view>
+            <nuri-list>
+              <nuri-list-action aria-label="Bank account, IBAN · arrives today">
+                <nuri-list-action-leading-avatar name="bank" variant="solid" accent="lilac"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Bank account</nuri-list-action-text>
+                <nuri-list-action-text-muted>IBAN · arrives today</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Bitcoin wallet, Address or Lightning invoice">
+                <nuri-list-action-leading-avatar source="../assets/logos/bitcoin.svg"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Bitcoin wallet</nuri-list-action-text>
+                <nuri-list-action-text-muted>Address or Lightning invoice</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="Nuri user, Their @username · no fee">
+                <nuri-list-action-leading-avatar name="nuri" variant="soft"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>Nuri user</nuri-list-action-text>
+                <nuri-list-action-text-muted>Their @username · no fee</nuri-list-action-text-muted>
+                <nuri-list-action-trail-icon name="chevron-right"></nuri-list-action-trail-icon>
+              </nuri-list-action>
+              <nuri-list-action aria-label="More, Visa Direct and mobile money">
+                <nuri-list-action-leading-avatar name="chevron-down" variant="outline"></nuri-list-action-leading-avatar>
+                <nuri-list-action-text>More</nuri-list-action-text>
+                <nuri-list-action-text-muted>Visa Direct and mobile money</nuri-list-action-text-muted>
+              </nuri-list-action>
+            </nuri-list>
+          </nuri-view>
+        </nuri-scroll>
+      </nuri-screen>
+    </template>
+  </nuri-demo>
+
   <!-- S2 · AMOUNT · the set-amount split (receive-bitcoin.html) with the source
        chip (P3 · preselected, visible, flips in one tap) and the cost line ON
        THIS STEP ("Fee ≈ 12 sats · Seconds" — the Lightning case; an ark send
@@ -271,9 +745,18 @@
 
 <!--
   MISFIT LOG · send.html · board · what the sheet asked · what was done · the DS element, axis or value that would remove the workaround
-  send · recipient · RECENT / CONTACTS section labels · composed: the move.html labelled-divider recipe (a row of two growing separators flanking a sm emphasis muted typography) placed as a bare child inside nuri-list · a list section-header element (list-header / list-label) so the label is list vocabulary, not a page recipe
-  send · recipient · contact rows with a portrait avatar (◉) · dropped the portrait: 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 · recipient · field with no visible label ("Name, @username, address or invoice" is the placeholder) · composed: nuri-text-field with aria-label and no nuri-text-field-label — the descriptor's documented compact placement · none (sanctioned); logged so the operator sees the label-less field once
+  send · scanner · camera feed and viewfinder · composed: a dark scope canvas with a subtle square standing in for the frame · a camera / viewfinder element (app-level, not DS)
+  send · scanner · status bar stays dark over the camera · not fixable in the playground (no status-bar surface in the DS) · RN: <StatusBar style="light"/> inside the screen (docs/status-bar-declaration-note.md)
+  send · scanner · Paste is the native iOS paste control in product · drawn as a soft DS button · open question 12
+  send · recipient · field height · the default lg (60px) in content; md (48px) only in a topbar next to round icon-buttons (country picker, B1, B2, A2/A3) · none
+  send · new recipient · Back top right in the trailing slot, where Close sits on A1 (operator, 2026-10-24); the glyph stays chevron-left · none; part of the topbar convention still to settle
+  send · new recipient · "More" row (operator, 2026-10-24): chevron-down avatar, subtitle "Visa Direct and mobile money", no trailing chevron; it expands in place to reveal the rarer kinds (Abroad today) instead of navigating · composed: list-action without trail icon · an expandable-row / disclosure behaviour (not in the DS)
+  send · new recipient · more open · Mobile money glyph · wallet outline, the closest icon · a `phone` (or `mobile`) icon
+  send · recipient · search trigger (a field that opens a search mode) · composed: a nuri-text-field with no value and a qr-scan accessory; in product a pressable · a field-trigger element (read-only text field / search trigger)
+  send · recipient · title "Send" as content under a Close-only topbar · the profile.html recipe verbatim · none; whether this chrome scales to pushed steps is open (they need Back)
+  send · search · Back in search mode vs Close · Back returns to A1 (the country-picker precedent) · none
+  send · · every row has the same anatomy: leading avatar, title (+ muted subtitle), chevron-right; no dates, no counts (operator, 2026-10-24) · none
+  send · · portrait avatars dropped, glyph avatars by identifier type · as send.html · a portrait asset / `user` icon
   send · amount · unit switch glyph "⇄ €" beside the amount · composed: icon-button transfer-vertical soft (the set-amount precedent) · none beyond the precedent; a `transfer-horizontal` glyph would match the sheet's ⇄ but the receive flow already settled on vertical
   send · amount · quick amounts [ 5 000 ] [ 10 000 ] [ Max ] under the cost line · dropped: the brief's tree omits them and the keypad board has no vertical room for a third row group at the default device · a quick-amount chip row (soft sm buttons) would compose today — the drop is a brief decision, not a DS gap
   send · amount · "(◉) Emil" contact line at the top of the step · dropped: the brief's tree omits it (the title "Send to Emil" carries the recipient) · none — composable today as a list-action or an avatar + typography row

From 4ab342d9481c598b931dbc672b6c6071fe218141 Mon Sep 17 00:00:00 2001
From: Dario Aschero <dario.aschero@gmail.com>
Date: Sat, 24 Oct 2026 16:47:09 +0200
Subject: [PATCH 4/4] feat(playground): avatar exploration at the chosen
 geometry (outside the DS)

send-recipient.html, still page-local CSS with its disclaimer: the evidence for
the icon-avatar initials + accessory admission request now draws the geometry
the requester chose on the board.

- initials: md 17px regular with +0.05em caps letter-spacing (the proposed
  tracking.caps token). The old `font: 600 15px/1 inherit` rule was an invalid
  shorthand the browser dropped, so the board had shown 13px regular.
- accessory: a 15px glyph (the proposed size.2xs leaf) with space.xs (3px)
  padding, no width/height set, so a 21px badge; still pushed out by
  space.xs with the 2px canvas ring.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/playground/pages/send-recipient.html | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/playground/pages/send-recipient.html b/packages/playground/pages/send-recipient.html
index f0282a2..e14adb8 100644
--- a/packages/playground/pages/send-recipient.html
+++ b/packages/playground/pages/send-recipient.html
@@ -11,15 +11,20 @@
     /* OUTSIDE THE DS · page-local CSS on purpose: the target the avatar admission must make unnecessary. */
     .xav { position: relative; flex: none; width: 48px; height: 48px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
-           font: 600 15px/1 inherit; letter-spacing: .02em; color: var(--nuri-text-primary); }
+           font-size: var(--nuri-type-md-size); font-weight: var(--nuri-font-weight-regular); line-height: 1;
+           letter-spacing: .05em; /* caps tracking: the proposed tracking.caps token, in place of md's -0.02em */
+           color: var(--nuri-text-primary); }
     .xav img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
     /* initials content = the icon-avatar soft treatment (bg-strong, text-primary) */
     .xav--soft { background: var(--nuri-bg-strong); color: var(--nuri-text-primary); }
-    /* accessory: bottom-right, 22px, 2px ring in the surface colour, glyph from the icon set */
-    .xbadge { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 999px;
+    /* accessory: a 15px glyph (no size token: the 18px sm icon × 15/18) with space.xs (3px) padding, so the
+       disc sizes from its content (no width/height set); pushed out by space.xs (3px); 2px ring in the surface colour */
+    .xbadge { position: absolute; right: calc(-1 * var(--nuri-space-xs)); bottom: calc(-1 * var(--nuri-space-xs));
+              padding: var(--nuri-space-xs); border-radius: 999px;
               display: inline-flex; align-items: center; justify-content: center;
               box-shadow: 0 0 0 2px var(--nuri-bg-canvas); }
-    .xbadge nuri-icon { transform: scale(.72); }
+    .xbadge nuri-icon { width: 15px; height: 15px; }
+    .xbadge nuri-icon svg { width: 100%; height: 100%; }
     /* solid + accent neutral = Nuri (dark fill, light glyph) */
     .xbadge--solid { background: var(--nuri-accent-solid); color: var(--nuri-accent-on-solid); }
     /* outline = every other rail: canvas fill, hairline, text-primary glyph (16.03:1, not muted 5.85:1) */
@@ -45,6 +50,9 @@
   (vendored wordpet pixel pets), kept as the reference the target replaces in lists.
   Explored and dropped (2026-10-24): pastel / Radix / hue-wheel person tones, coloured
   rail badges (orange Bitcoin, lilac bank), Nuri lilac, all-black badges, KYC check.
+  Geometry updated (2026-10-24): 15px glyph + 3px padding (no width/height set), 3px outset,
+  2px ring, initials md 17px / regular with +0.05em letter-spacing. It was 22px / 13px glyph / initials 13px / 400
+  (the old `font` shorthand ended in `inherit`, so the browser dropped it).
 -->
 
 <nuri-playground-shell doc="Avatar exploration · outside the DS">
@@ -301,8 +309,8 @@
 
 <!--
   GAP LOG · what the icon-avatar admission has to cover
-  content · icon-avatar takes an icon OR an image today; add initials (1–2 letters, derived by the caller) · soft treatment: bg-strong + text-primary, size-scaled type
-  accessory · a slot bottom-right on every content type (initials | image | glyph), ~22px on the 48px avatar, 2px ring in the surface colour, glyph from the icon set
+  content · icon-avatar takes an icon OR an image today; add initials (1–2 letters, derived by the caller) · soft treatment: bg-strong + text-primary, md 17px regular, +0.05em caps letter-spacing
+  accessory · a slot bottom-right on every content type (initials | image | glyph), on the 48px avatar: a 15px glyph from the icon set (no size token yet) with 3px padding (space.xs), 3px outset (space.xs), 2px ring in the surface colour
   accessory variants · solid (accent neutral: dark fill, light glyph) for Nuri · outline (canvas fill, border-subtle hairline, text-primary glyph) for every other rail · no per-rail colour table
   sizes · decide which avatar sizes carry an accessory (the sm 24px probably none)
   list · a person row = list-action with the new avatar as leading part; today the rows here are hand-built nuri-view rows