Made of little things.

<!doctype html>
<html lang="en">
  <head><meta name="description" content="Publish a random ASCII emoji (kaomoji) as a kind 1 note.">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kaomoji Note</title>
    <script type="module" crossorigin>function d(){const t=window;if(!t.napplet)throw new Error("window.napplet is unavailable -- runtime did not inject the napplet namespace");return t.napplet}function n(t){const a=d()[t];if(!a)throw new Error(`window.napplet.${String(t)} is unavailable -- runtime did not inject this domain`);return a}var h={getEvent(t,e){return n("outbox").getEvent(t,e)},query(t,e){return n("outbox").query(t,e)},subscribe(t,e){return n("outbox").subscribe(t,e)},publish(t,e){return n("outbox").publish(t,e)},resolveRelays(t){return n("outbox").resolveRelays(t)}};const u=["(◕‿◕)","¯\\_(ツ)_/¯","(╯°□°)╯︵ ┻━┻","(☞゚ヮ゚)☞","(ᵔᴥᵔ)","(づ｡◕‿‿◕｡)づ","ಠ_ಠ","(¬‿¬)","(ノ◕ヮ◕)ノ*:・゚✧","(⌐■_■)","ʕ•ᴥ•ʔ","(✿◠‿◠)","(｡♥‿♥｡)","ヽ(´▽`)/","(◉‿◉)"],p=document.querySelector("#app");if(!p)throw new Error("Missing #app container");function c(){var t;return!!((t=window.napplet)!=null&&t.outbox)}p.innerHTML=`
  <main class="shell">
    <p class="eyebrow">napplet</p>
    <h1>Kaomoji Note</h1>
    <p class="lede">One button. One random kaomoji. One kind&nbsp;1 note.</p>
    <div class="stage">
      <div id="preview" class="preview">(◕‿◕)</div>
      <button id="publish" type="button">Publish note</button>
      <p id="status" class="status" role="status"></p>
    </div>
  </main>
`;const r=document.querySelector("#preview"),i=document.querySelector("#publish"),o=document.querySelector("#status");function b(){return u[Math.floor(Math.random()*u.length)]}function s(){r.textContent=b()}function l(t){i.disabled=t,i.textContent=t?"Publishing…":"Publish note"}async function w(){const t=r.textContent??b();if(!c()){o.textContent="outbox unavailable in this shell";return}l(!0),o.textContent="Waiting for the shell to sign…";try{const e=await h.publish({kind:1,content:t,tags:[],created_at:Math.floor(Date.now()/1e3)},{toOutbox:!0});if(!e.ok)throw new Error(e.error??"publish failed");o.textContent=`published ${t}`,s()}catch(e){o.textContent=e instanceof Error?e.message:"publish failed"}finally{l(!1)}}s();r.addEventListener("click",s);i.addEventListener("click",()=>void w());c()||(o.textContent="outbox unavailable — run inside a shell with the outbox NAP");
</script>
    <style>:root{color:#f7f4ef;background:#17181c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,rgb(25 92 124 / 42%),transparent 30rem),linear-gradient(135deg,#17181c,#22262d 52%,#1d2d2c)}.shell{width:min(100%,520px);padding:32px;text-align:center}.eyebrow{color:#9fd4c9;font-size:.78rem;font-weight:700;text-transform:uppercase;margin:0}h1{margin:6px 0;font-size:clamp(2rem,7vw,3.4rem);line-height:.95}.lede{margin:0 0 24px;color:#d6d0c5}.stage{display:grid;gap:16px;justify-items:center}.preview{min-width:220px;padding:28px 20px;border:1px solid rgb(255 255 255 / 14%);border-radius:12px;background:#ffffff0f;font-size:2.2rem;cursor:pointer;-webkit-user-select:none;user-select:none}button{min-height:48px;border:0;border-radius:8px;padding:0 26px;color:#17211f;background:#9fd4c9;font-weight:800;font-size:1.05rem;cursor:pointer}button:disabled{cursor:wait;opacity:.64}.status{margin:0;min-height:1.2em;color:#9fd4c9;font-size:.9rem}
</style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>