@decentnetwork/beagle 0.1.20 → 0.1.22

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.19";
+window.__DK_UI_VERSION="0.1.21";
 const ICON_PATHS = {
   // ---- tab bar (the four must feel like one set) ----
   users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
@@ -2800,7 +2800,97 @@ function DkEditModal({ T, me, onClose, onSave }) {
   };
   return /* @__PURE__ */ React.createElement("div", { onClick: onClose, style: { position: "fixed", inset: 0, zIndex: 90, background: "color-mix(in oklab, #000, transparent 38%)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 } }, /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation(), style: { width: 440, maxWidth: "92vw", background: "var(--panel)", border: "1px solid var(--line)", borderRadius: 16, padding: 22, display: "flex", flexDirection: "column", gap: 14 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 13, fontWeight: 700, color: "var(--text)" } }, T.editProfile), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Btn, { icon: "x", size: "sm", onClick: onClose })), /* @__PURE__ */ React.createElement("label", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: lbl }, "display name"), /* @__PURE__ */ React.createElement("input", { value: name, onChange: (e) => setName(e.target.value), onKeyDown: onKey, autoFocus: true, maxLength: 48, style: field })), /* @__PURE__ */ React.createElement("label", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: lbl }, "status message"), /* @__PURE__ */ React.createElement("input", { value: desc, onChange: (e) => setDesc(e.target.value), onKeyDown: onKey, maxLength: 120, placeholder: "optional \u2014 a short bio friends will see", style: field })), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--faint)" } }, "Your userid (the unique identity) can't change \u2014 only the display name + status."), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 2 } }, /* @__PURE__ */ React.createElement(Btn, { size: "sm", onClick: onClose }, T.cancel || "cancel"), /* @__PURE__ */ React.createElement(Btn, { tone: "accent", size: "sm", onClick: save }, T.save || "save"))));
 }
-function DkEnsCard({ T, me }) {
+const dkPunkCache = /* @__PURE__ */ new Map();
+function DkPunkAvatar({ id, size, radius, fallbackSeed }) {
+  const [img, setImg] = React.useState(() => (dkPunkCache.get(id) || {}).image || null);
+  React.useEffect(() => {
+    let dead = false;
+    const hit = dkPunkCache.get(id);
+    if (hit) {
+      setImg(hit.image || null);
+      return;
+    }
+    setImg(null);
+    fetch(`/api/punk/${id}`).then((r) => r.json()).then((d) => {
+      if (d.ok && d.punk && d.punk.image) {
+        dkPunkCache.set(id, d.punk);
+        if (!dead)
+          setImg(d.punk.image);
+      }
+    }).catch(() => {
+    });
+    return () => {
+      dead = true;
+    };
+  }, [id]);
+  if (!img)
+    return /* @__PURE__ */ React.createElement(DkIdenticon, { seed: fallbackSeed || String(id), size, radius });
+  return /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: img,
+      alt: "",
+      width: size,
+      height: size,
+      style: { width: size, height: size, borderRadius: radius, background: "#638596", imageRendering: "pixelated", flexShrink: 0 }
+    }
+  );
+}
+function DkPunkPicker({ T, onPick, onClose }) {
+  const TYPES = ["any", "female", "male", "zombie", "ape", "alien"];
+  const tLabel = (t) => T && T["pt_" + t] || t;
+  const [type, setType] = React.useState("any");
+  const [batch, setBatch] = React.useState(null);
+  const [err, setErr] = React.useState(null);
+  const [gen, setGen] = React.useState(0);
+  React.useEffect(() => {
+    let dead = false;
+    setBatch(null);
+    setErr(null);
+    fetch(`/api/punk-list?type=${type}&limit=24`).then((r) => r.json()).then((d) => {
+      if (dead)
+        return;
+      if (d.ok)
+        setBatch(d.list || []);
+      else
+        setErr(d.error || "load failed");
+    }).catch((e) => {
+      if (!dead)
+        setErr(String(e && e.message || e));
+    });
+    return () => {
+      dead = true;
+    };
+  }, [type, gen]);
+  return /* @__PURE__ */ React.createElement("div", { onClick: onClose, style: { position: "fixed", inset: 0, zIndex: 90, background: "color-mix(in oklab, #000, transparent 38%)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 } }, /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation(), style: { width: 480, maxWidth: "94vw", background: "var(--panel)", border: "1px solid var(--line)", borderRadius: 16, padding: 20, display: "flex", flexDirection: "column", gap: 14 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 13, fontWeight: 700, color: "var(--text)" } }, T.ensPickPunk || "choose a punk"), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Btn, { size: "sm", onClick: () => setGen(gen + 1) }, T.ensShuffle || "shuffle"), /* @__PURE__ */ React.createElement(Btn, { icon: "x", size: "sm", onClick: onClose })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" } }, TYPES.map((t) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: t,
+      onClick: () => setType(t),
+      style: {
+        padding: "4px 10px",
+        borderRadius: 999,
+        border: "1px solid var(--line)",
+        cursor: "pointer",
+        background: type === t ? "var(--accent)" : "transparent",
+        color: type === t ? "#fff" : "var(--dim)",
+        fontFamily: "var(--ui)",
+        fontSize: 12
+      }
+    },
+    tLabel(t)
+  ))), /* @__PURE__ */ React.createElement("div", { style: { minHeight: 232 } }, err ? /* @__PURE__ */ React.createElement("div", { style: { padding: 16, fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, err) : !batch ? /* @__PURE__ */ React.createElement("div", { style: { padding: 16, fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, T.dirLoading || "loading\u2026") : /* @__PURE__ */ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 } }, batch.map((p) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: p.id,
+      title: `#${p.id} \xB7 ${p.type}`,
+      onClick: () => onPick(Number(p.id)),
+      style: { padding: 0, border: "1px solid var(--line)", borderRadius: 10, cursor: "pointer", background: "#638596", overflow: "hidden", aspectRatio: "1" }
+    },
+    /* @__PURE__ */ React.createElement("img", { src: p.image, alt: `punk #${p.id}`, style: { width: "100%", height: "100%", imageRendering: "pixelated", display: "block" } })
+  ))))));
+}
+function DkEnsCard({ T, me, onRecord }) {
   const [st, setSt] = React.useState({ loading: true });
   const [label, setLabel] = React.useState("");
   const [busy, setBusy] = React.useState(false);
@@ -2810,6 +2900,8 @@ function DkEnsCard({ T, me }) {
       setSt({ loading: false, registered: !!d.registered, record: d.record || null, mineOwned: !!d.mineOwned });
       if (d.registered && d.record && d.record.name)
         setLabel(d.record.name.replace(/\.beagles\.eth$/i, ""));
+      if (onRecord)
+        onRecord(d.record || null);
     }).catch((e) => setSt({ loading: false, error: String(e && e.message || e) }));
   };
   React.useEffect(() => {
@@ -2864,9 +2956,67 @@ function DkEnsCard({ T, me }) {
   };
   const field = { flex: 1, minWidth: 0, height: 34, borderRadius: 8, border: "1px solid var(--line)", background: "var(--panel-2)", color: "var(--text)", fontFamily: "var(--mono)", fontSize: 13, padding: "0 10px", outline: "none" };
   const row = { display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: "1px solid var(--line)" };
+  const [picking, setPicking] = React.useState(false);
+  const fileRef = React.useRef(null);
   const rec = st.record;
   const boundEth = rec && rec.addresses && rec.addresses["60"];
   const boundSol = rec && rec.addresses && rec.addresses["501"];
+  const punkId = rec && rec.nft === "CryptoPunks" && rec.nftid > 0 ? rec.nftid : null;
+  const upAvatar = rec && rec.texts && rec.texts.avatar || null;
+  const pickPunk = (id) => {
+    setPicking(false);
+    post("/api/ens-avatar", { nftid: id });
+  };
+  const onUploadFile = (e) => {
+    const f = e.target.files && e.target.files[0];
+    e.target.value = "";
+    if (!f)
+      return;
+    setBusy(true);
+    setMsg(null);
+    const img = new Image();
+    const url = URL.createObjectURL(f);
+    const fail = (text) => {
+      setBusy(false);
+      setMsg({ tone: "err", text });
+    };
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      try {
+        const S = 256;
+        const c = document.createElement("canvas");
+        c.width = S;
+        c.height = S;
+        const ctx = c.getContext("2d");
+        const side = Math.min(img.width, img.height);
+        ctx.drawImage(img, (img.width - side) / 2, (img.height - side) / 2, side, side, 0, 0, S, S);
+        const enc = (q) => {
+          let d = c.toDataURL("image/webp", q);
+          if (!d.startsWith("data:image/webp"))
+            d = c.toDataURL("image/jpeg", q);
+          return d;
+        };
+        let dataUrl = null;
+        for (const q of [0.9, 0.75, 0.55, 0.4]) {
+          dataUrl = enc(q);
+          if (dataUrl.length < 13e4)
+            break;
+        }
+        if (!dataUrl || dataUrl.length >= 13e4) {
+          fail(T.ensTooBig || "image too large even after scaling");
+          return;
+        }
+        post("/api/ens-avatar-upload", { dataUrl });
+      } catch (err) {
+        fail(String(err && err.message || err));
+      }
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      fail(T.ensBadImage || "cannot read that image");
+    };
+    img.src = url;
+  };
   const walletRow = (lbl, chain, bound, onBind, last) => /* @__PURE__ */ React.createElement("div", { style: { ...row, borderBottom: last ? "none" : row.borderBottom } }, /* @__PURE__ */ React.createElement("span", { style: { width: 130, flexShrink: 0, fontFamily: "var(--mono)", fontSize: 11.5, fontWeight: 600, color: "var(--faint)", textTransform: "uppercase", letterSpacing: 0.5 } }, lbl), bound ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, bound), /* @__PURE__ */ React.createElement(CopyBtn, { value: bound, copiedText: T.copied, copyFailedText: T.copyFailed, copyTitle: T.copy }), /* @__PURE__ */ React.createElement(Btn, { size: "sm", tone: "danger", disabled: busy || !st.mineOwned, onClick: () => bind(chain, "") }, T.ensUnbind || "unbind")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { flex: 1, fontFamily: "var(--ui)", fontSize: 12, color: "var(--faint)" } }, T.ensNotBound || "not bound"), /* @__PURE__ */ React.createElement(Btn, { size: "sm", disabled: busy || !st.mineOwned, onClick: onBind }, T.ensBind || "bind")));
   return /* @__PURE__ */ React.createElement(Card, { label: T.ensCard || "Name \xB7 beagles.eth" }, st.loading ? /* @__PURE__ */ React.createElement("div", { style: { padding: "14px 16px", fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)" } }, T.dirLoading || "loading\u2026") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: row }, /* @__PURE__ */ React.createElement("span", { style: { width: 130, flexShrink: 0, fontFamily: "var(--mono)", fontSize: 11.5, fontWeight: 600, color: "var(--faint)", textTransform: "uppercase", letterSpacing: 0.5 } }, T.ensName || "name"), /* @__PURE__ */ React.createElement(
     "input",
@@ -2881,12 +3031,15 @@ function DkEnsCard({ T, me }) {
       },
       style: field
     }
-  ), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--dim)", flexShrink: 0 } }, ".beagles.eth"), /* @__PURE__ */ React.createElement(Btn, { tone: "accent", size: "sm", disabled: busy || !label.trim(), onClick: register }, busy ? "\u2026" : st.registered && st.mineOwned ? T.ensUpdate || "update" : T.ensRegister || "register")), st.registered && !st.mineOwned && /* @__PURE__ */ React.createElement("div", { style: { padding: "10px 16px", borderBottom: "1px solid var(--line)", fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--faint)" } }, (T.ensWalletOwned || "registered via your mobile wallet as") + " ", /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)" } }, rec && rec.name)), walletRow(T.ensEth || "ethereum", "eth", boundEth, bindEth, false), walletRow(T.ensSol || "solana", "sol", boundSol, bindSol, !msg), msg && /* @__PURE__ */ React.createElement("div", { style: { padding: "10px 16px", fontFamily: "var(--ui)", fontSize: 12, color: msg.tone === "ok" ? "var(--online)" : "var(--danger)" } }, msg.text)));
+  ), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--dim)", flexShrink: 0 } }, ".beagles.eth"), /* @__PURE__ */ React.createElement(Btn, { tone: "accent", size: "sm", disabled: busy || !label.trim(), onClick: register }, busy ? "\u2026" : st.registered && st.mineOwned ? T.ensUpdate || "update" : T.ensRegister || "register")), st.registered && !st.mineOwned && /* @__PURE__ */ React.createElement("div", { style: { padding: "10px 16px", borderBottom: "1px solid var(--line)", fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--faint)" } }, (T.ensWalletOwned || "registered via your mobile wallet as") + " ", /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)" } }, rec && rec.name)), st.registered && /* @__PURE__ */ React.createElement("div", { style: row }, /* @__PURE__ */ React.createElement("span", { style: { width: 130, flexShrink: 0, fontFamily: "var(--mono)", fontSize: 11.5, fontWeight: 600, color: "var(--faint)", textTransform: "uppercase", letterSpacing: 0.5 } }, T.ensAvatar || "avatar"), upAvatar ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("img", { src: upAvatar, alt: "", width: 34, height: 34, style: { width: 34, height: 34, borderRadius: 9, objectFit: "cover", flexShrink: 0, background: "var(--panel-2)" } }), /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--text)" } }, T.ensCustom || "custom image"), /* @__PURE__ */ React.createElement(Btn, { size: "sm", tone: "danger", disabled: busy || !st.mineOwned, onClick: () => post("/api/ens-avatar", { nftid: null }) }, T.ensClear || "clear")) : punkId != null ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DkPunkAvatar, { id: punkId, size: 34, radius: 9, fallbackSeed: me.userId }), /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--text)" } }, `CryptoPunk #${punkId}`), /* @__PURE__ */ React.createElement(Btn, { size: "sm", tone: "danger", disabled: busy || !st.mineOwned, onClick: () => post("/api/ens-avatar", { nftid: null }) }, T.ensClear || "clear")) : /* @__PURE__ */ React.createElement("span", { style: { flex: 1, fontFamily: "var(--ui)", fontSize: 12, color: "var(--faint)" } }, T.ensNotSet || "not set"), /* @__PURE__ */ React.createElement(Btn, { size: "sm", disabled: busy || !st.mineOwned, onClick: () => fileRef.current && fileRef.current.click() }, T.ensUpload || "upload"), /* @__PURE__ */ React.createElement(Btn, { size: "sm", disabled: busy || !st.mineOwned, onClick: () => setPicking(true) }, T.ensChoose || "choose"), /* @__PURE__ */ React.createElement("input", { ref: fileRef, type: "file", accept: "image/*", onChange: onUploadFile, style: { display: "none" } })), walletRow(T.ensEth || "ethereum", "eth", boundEth, bindEth, false), walletRow(T.ensSol || "solana", "sol", boundSol, bindSol, !msg), msg && /* @__PURE__ */ React.createElement("div", { style: { padding: "10px 16px", fontFamily: "var(--ui)", fontSize: 12, color: msg.tone === "ok" ? "var(--online)" : "var(--danger)" } }, msg.text)), picking && /* @__PURE__ */ React.createElement(DkPunkPicker, { T, onPick: pickPunk, onClose: () => setPicking(false) }));
 }
 function ProfileTab({ T, me, onEdit }) {
   const [qr, setQr] = React.useState(null);
   const [editing, setEditing] = React.useState(false);
-  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto", padding: "24px 28px 60px", display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 18, padding: "20px 22px", borderRadius: 14, background: "var(--panel)", border: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed: me.userId, size: 68, radius: 16 }), /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", right: -3, bottom: -3, width: 18, height: 18, borderRadius: 999, background: "var(--online)", border: "3px solid var(--panel)" } })), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 22, fontWeight: 700, letterSpacing: -0.5, color: "var(--text)" } }, me.name), /* @__PURE__ */ React.createElement(Tag, { tone: "ok" }, "online"), me.isExit && /* @__PURE__ */ React.createElement(Tag, { tone: "warn" }, "exit", me.exitRegion ? ` \xB7 ${me.exitRegion.toUpperCase()}` : "")), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 13, color: "var(--dim)", marginTop: 4 } }, me.handle), me.description ? /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)", marginTop: 3 } }, me.description) : null), /* @__PURE__ */ React.createElement(Btn, { icon: "edit", onClick: () => setEditing(true) }, T.editProfile)), /* @__PURE__ */ React.createElement(Card, { label: T.identity }, /* @__PURE__ */ React.createElement(FieldRow, { T, label: T.userId, value: me.userId, copy: true, qr: true, onQr: (v, l) => setQr({ value: v, label: l }) }), /* @__PURE__ */ React.createElement(FieldRow, { T, label: T.carrierAddr, value: me.carrier, copy: true, qr: true, onQr: (v, l) => setQr({ value: v, label: l }) }), /* @__PURE__ */ React.createElement(FieldRow, { T, label: T.netKey, value: me.netKey, copy: true, last: true })), /* @__PURE__ */ React.createElement(DkEnsCard, { T, me }), typeof me.autoAccept === "boolean" && /* @__PURE__ */ React.createElement(Card, { label: T && T.friendsSettings || "Friends" }, /* @__PURE__ */ React.createElement("label", { style: { display: "flex", alignItems: "center", gap: 13, padding: "14px 16px", cursor: "pointer" } }, /* @__PURE__ */ React.createElement(
+  const [ensRec, setEnsRec] = React.useState(null);
+  const punkId = ensRec && ensRec.nft === "CryptoPunks" && ensRec.nftid > 0 ? ensRec.nftid : null;
+  const upAvatar = ensRec && ensRec.texts && ensRec.texts.avatar || null;
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto", padding: "24px 28px 60px", display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 18, padding: "20px 22px", borderRadius: 14, background: "var(--panel)", border: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, upAvatar ? /* @__PURE__ */ React.createElement("img", { src: upAvatar, alt: "", width: 68, height: 68, style: { width: 68, height: 68, borderRadius: 16, objectFit: "cover", background: "var(--panel-2)" } }) : punkId != null ? /* @__PURE__ */ React.createElement(DkPunkAvatar, { id: punkId, size: 68, radius: 16, fallbackSeed: me.userId }) : /* @__PURE__ */ React.createElement(DkIdenticon, { seed: me.userId, size: 68, radius: 16 }), /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", right: -3, bottom: -3, width: 18, height: 18, borderRadius: 999, background: "var(--online)", border: "3px solid var(--panel)" } })), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 22, fontWeight: 700, letterSpacing: -0.5, color: "var(--text)" } }, me.name), /* @__PURE__ */ React.createElement(Tag, { tone: "ok" }, "online"), me.isExit && /* @__PURE__ */ React.createElement(Tag, { tone: "warn" }, "exit", me.exitRegion ? ` \xB7 ${me.exitRegion.toUpperCase()}` : "")), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 13, color: "var(--dim)", marginTop: 4 } }, me.handle), me.description ? /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--faint)", marginTop: 3 } }, me.description) : null), /* @__PURE__ */ React.createElement(Btn, { icon: "edit", onClick: () => setEditing(true) }, T.editProfile)), /* @__PURE__ */ React.createElement(Card, { label: T.identity }, /* @__PURE__ */ React.createElement(FieldRow, { T, label: T.userId, value: me.userId, copy: true, qr: true, onQr: (v, l) => setQr({ value: v, label: l }) }), /* @__PURE__ */ React.createElement(FieldRow, { T, label: T.carrierAddr, value: me.carrier, copy: true, qr: true, onQr: (v, l) => setQr({ value: v, label: l }) }), /* @__PURE__ */ React.createElement(FieldRow, { T, label: T.netKey, value: me.netKey, copy: true, last: true })), /* @__PURE__ */ React.createElement(DkEnsCard, { T, me, onRecord: setEnsRec }), typeof me.autoAccept === "boolean" && /* @__PURE__ */ React.createElement(Card, { label: T && T.friendsSettings || "Friends" }, /* @__PURE__ */ React.createElement("label", { style: { display: "flex", alignItems: "center", gap: 13, padding: "14px 16px", cursor: "pointer" } }, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "checkbox",
@@ -2904,9 +3057,12 @@ function ProfileTab({ T, me, onEdit }) {
     setEditing(false);
   } }));
 }
-Object.assign(window, { ProfileTab });
+Object.assign(window, { ProfileTab, DkPunkAvatar });
 function DkDirAvatar({ p, size }) {
   const [broken, setBroken] = React.useState(false);
+  if (p.punkId != null && !(p.avatar && !broken)) {
+    return /* @__PURE__ */ React.createElement(DkPunkAvatar, { id: p.punkId, size, radius: Math.round(size / 4), fallbackSeed: p.userid || p.name });
+  }
   if (p.avatar && !broken) {
     return /* @__PURE__ */ React.createElement(
       "img",
@@ -3926,6 +4082,22 @@ const STR = {
     ensBind: "bind",
     ensUnbind: "unbind",
     ensNotBound: "not bound",
+    ensAvatar: "avatar",
+    ensChoose: "choose",
+    ensClear: "clear",
+    ensNotSet: "not set",
+    ensUpload: "upload",
+    ensCustom: "custom image",
+    ensTooBig: "image too large even after scaling",
+    ensBadImage: "cannot read that image",
+    ensPickPunk: "choose a punk",
+    ensShuffle: "shuffle",
+    pt_any: "any",
+    pt_female: "female",
+    pt_male: "male",
+    pt_zombie: "zombie",
+    pt_ape: "ape",
+    pt_alien: "alien",
     ensNoEthWallet: "no Ethereum wallet extension found (MetaMask\u2026)",
     ensNoSolWallet: "no Solana wallet extension found (Phantom\u2026)",
     ensWalletOwned: "registered via your mobile wallet as",
@@ -4051,6 +4223,22 @@ const STR = {
     ensBind: "\u7ED1\u5B9A",
     ensUnbind: "\u89E3\u7ED1",
     ensNotBound: "\u672A\u7ED1\u5B9A",
+    ensAvatar: "\u5934\u50CF",
+    ensChoose: "\u9009\u62E9",
+    ensClear: "\u6E05\u9664",
+    ensNotSet: "\u672A\u8BBE\u7F6E",
+    ensUpload: "\u4E0A\u4F20",
+    ensCustom: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+    ensTooBig: "\u56FE\u7247\u538B\u7F29\u540E\u4ECD\u8D85\u8FC7 100KB",
+    ensBadImage: "\u65E0\u6CD5\u8BFB\u53D6\u8BE5\u56FE\u7247",
+    ensPickPunk: "\u9009\u4E00\u4E2A punk",
+    ensShuffle: "\u6362\u4E00\u6279",
+    pt_any: "\u5168\u90E8",
+    pt_female: "\u5973",
+    pt_male: "\u7537",
+    pt_zombie: "\u50F5\u5C38",
+    pt_ape: "\u733F",
+    pt_alien: "\u5916\u661F\u4EBA",
     ensNoEthWallet: "\u672A\u68C0\u6D4B\u5230\u4EE5\u592A\u574A\u94B1\u5305\u63D2\u4EF6(MetaMask \u7B49)",
     ensNoSolWallet: "\u672A\u68C0\u6D4B\u5230 Solana \u94B1\u5305\u63D2\u4EF6(Phantom \u7B49)",
     ensWalletOwned: "\u5DF2\u901A\u8FC7\u624B\u673A\u94B1\u5305\u6CE8\u518C\u4E3A",

package/dist/server.js

@@ -102,6 +102,9 @@ async function ensSignAndSet(call, record) {
         if (!r.ok || !d?.success) {
             return { ok: false, error: typeof d?.error === "string" ? d.error : `gateway HTTP ${r.status}` };
         }
+        // The record changed — drop the cached /names listing so the Names tab
+        // reflects it immediately instead of after the 5-min TTL.
+        discoverCache.delete(`${ENS_GATEWAY}/names`);
         return { ok: true };
     }
     catch (e) {
@@ -111,6 +114,46 @@ async function ensSignAndSet(call, record) {
         clearTimeout(timer);
     }
 }
+// ── CryptoPunks avatar directory ────────────────────────────────────────────
+// Self-hosted punks API serving all 10k punks as inline SVG data URIs. The
+// record convention (shared with the mobile apps) is nft="CryptoPunks" +
+// nftid=<punk id> on the beagles.eth name. Proxied server-side (browser can't
+// reach the origin's port cross-origin reliably); NOTE the upstream's TLS cert
+// must be valid — renew it when these routes start failing.
+const PUNKS_API_URL = process.env.PUNKS_API_URL || "https://app.beagle.chat:1337";
+const punkCache = new Map(); // punk id → JSON; immutable set
+async function punksFetch(path) {
+    const ctl = new AbortController();
+    const timer = setTimeout(() => ctl.abort(), 10_000);
+    try {
+        const r = await fetch(`${PUNKS_API_URL}${path}`, { signal: ctl.signal });
+        if (!r.ok)
+            throw new Error(`punks upstream ${r.status}`);
+        return await r.json();
+    }
+    finally {
+        clearTimeout(timer);
+    }
+}
+/** Best-effort removal of the R2 avatar object when the record stops
+ *  referencing it (punk picked / avatar cleared). Failure is harmless —
+ *  an orphaned object just sits unused. */
+async function ensAvatarDelete(call, fullName) {
+    try {
+        const name = fullName.toLowerCase();
+        const ts = Math.floor(Date.now() / 1000);
+        const signed = await call({ op: "sign", text: `beagle-avatar\ndelete\n${name}\n${ts}` });
+        if (!signed.ok || !signed.data?.sig)
+            return;
+        await fetch(`${ENS_GATEWAY}/avatar/${encodeURIComponent(name)}`, {
+            method: "DELETE",
+            headers: { "x-avatar-ts": String(ts), "x-avatar-sig": String(signed.data.sig) },
+        });
+    }
+    catch {
+        // best-effort only
+    }
+}
 /** True only when the request came from the local machine. Used to gate the
  *  "Sign in with Decent" routes so binding the UI to a LAN IP can't expose
  *  identity signing to other hosts. The popup always runs in the local user's
@@ -428,12 +471,146 @@ export function startBeagleServer(opts) {
             // Register/update this node's *.beagles.eth name and bind wallet
             // addresses into the record. The write routes trigger identity
             // signatures, so they're LOCALHOST-ONLY like /connect.
-            if (url === "/api/ens-register" || url === "/api/ens-bind-wallet") {
+            if (url === "/api/ens-register" || url === "/api/ens-bind-wallet" || url === "/api/ens-avatar" || url === "/api/ens-avatar-upload") {
                 if (!isLocalRequest(req)) {
                     sendJson(res, 403, { ok: false, error: "identity signing is available only on this machine (localhost)" });
                     return;
                 }
             }
+            // Punk directory (proxied): a random batch by type, and one punk by id.
+            if (req.method === "GET" && url.startsWith("/api/punk-list")) {
+                try {
+                    const q = new URL(url, "http://localhost");
+                    const type = (q.searchParams.get("type") || "any").toLowerCase().replace(/[^a-z]/g, "") || "any";
+                    const limit = Math.min(60, Math.max(1, Number(q.searchParams.get("limit")) || 24));
+                    const list = await punksFetch(`/api/punks/filter/${type}/any?limit=${limit}`);
+                    sendJson(res, 200, { ok: true, list });
+                }
+                catch (err) {
+                    sendJson(res, 502, { ok: false, error: String(err?.message ?? err) });
+                }
+                return;
+            }
+            if (req.method === "GET" && /^\/api\/punk\/\d{1,5}$/.test(url)) {
+                const id = url.slice("/api/punk/".length);
+                try {
+                    let punk = punkCache.get(id);
+                    if (!punk) {
+                        punk = await punksFetch(`/api/punks/${id}`);
+                        punkCache.set(id, punk);
+                    }
+                    sendJson(res, 200, { ok: true, punk });
+                }
+                catch (err) {
+                    sendJson(res, 502, { ok: false, error: String(err?.message ?? err) });
+                }
+                return;
+            }
+            // Set (or clear) my punk avatar on the beagles.eth record.
+            if (req.method === "POST" && url === "/api/ens-avatar") {
+                const body = await readBody(req);
+                const clear = body.nftid === null || body.nftid === undefined;
+                const nftid = Number(body.nftid);
+                if (!clear && (!Number.isInteger(nftid) || nftid < 0 || nftid > 9999)) {
+                    sendJson(res, 400, { ok: false, error: "invalid punk id" });
+                    return;
+                }
+                const diag = await opts.call({ op: "diag" });
+                const identity = (diag.ok ? diag.data?.identity : null) ?? {};
+                if (!identity.userid) {
+                    sendJson(res, 502, { ok: false, error: "identity unavailable" });
+                    return;
+                }
+                const mine = await ensFetchJson(`/getAddress/${encodeURIComponent(identity.userid)}`);
+                if (!mine) {
+                    sendJson(res, 404, { ok: false, error: "register a name first" });
+                    return;
+                }
+                if (mine.owner !== identity.userid) {
+                    sendJson(res, 403, { ok: false, error: "this name was registered by your mobile wallet — pick the avatar there" });
+                    return;
+                }
+                // One avatar at a time: picking a punk (or clearing) also drops any
+                // uploaded custom avatar from the record.
+                const texts = { ...(mine.texts ?? {}) };
+                const hadUpload = !!texts.avatar;
+                delete texts.avatar;
+                const r = await ensSignAndSet(opts.call, {
+                    name: mine.name,
+                    owner: identity.userid,
+                    addresses: mine.addresses ?? {},
+                    texts,
+                    referee: mine.referee ?? "",
+                    nft: clear ? "" : "CryptoPunks",
+                    nftid: clear ? 0 : nftid,
+                });
+                if (r.ok && hadUpload)
+                    void ensAvatarDelete(opts.call, mine.name); // best-effort R2 cleanup
+                sendJson(res, r.ok ? 200 : 502, r.ok ? { ok: true, nftid: clear ? null : nftid } : { ok: false, error: r.error });
+                return;
+            }
+            // Upload a custom avatar image: the browser sends a pre-scaled data URL,
+            // we push the bytes to the gateway's R2 (auth = identity signature) and
+            // point texts.avatar at it.
+            if (req.method === "POST" && url === "/api/ens-avatar-upload") {
+                const body = await readBody(req);
+                const m = /^data:(image\/(?:webp|png|jpeg));base64,([A-Za-z0-9+/=]+)$/.exec(String(body.dataUrl ?? ""));
+                if (!m) {
+                    sendJson(res, 400, { ok: false, error: "expected a webp/png/jpeg data URL" });
+                    return;
+                }
+                const bytes = Buffer.from(m[2], "base64");
+                if (bytes.length === 0 || bytes.length > 100 * 1024) {
+                    sendJson(res, 413, { ok: false, error: "image must be ≤100 KB after scaling" });
+                    return;
+                }
+                const diag = await opts.call({ op: "diag" });
+                const identity = (diag.ok ? diag.data?.identity : null) ?? {};
+                if (!identity.userid) {
+                    sendJson(res, 502, { ok: false, error: "identity unavailable" });
+                    return;
+                }
+                const mine = await ensFetchJson(`/getAddress/${encodeURIComponent(identity.userid)}`);
+                if (!mine) {
+                    sendJson(res, 404, { ok: false, error: "register a name first" });
+                    return;
+                }
+                if (mine.owner !== identity.userid) {
+                    sendJson(res, 403, { ok: false, error: "this name was registered by your mobile wallet — set the avatar there" });
+                    return;
+                }
+                const name = mine.name.toLowerCase();
+                const ts = Math.floor(Date.now() / 1000);
+                const signed = await opts.call({ op: "sign", text: `beagle-avatar\nupload\n${name}\n${ts}` });
+                if (!signed.ok || !signed.data?.sig) {
+                    sendJson(res, 502, { ok: false, error: "identity sign failed" });
+                    return;
+                }
+                const up = await fetch(`${ENS_GATEWAY}/avatar/${encodeURIComponent(name)}`, {
+                    method: "POST",
+                    headers: { "content-type": m[1], "x-avatar-ts": String(ts), "x-avatar-sig": String(signed.data.sig) },
+                    body: bytes,
+                });
+                const upBody = (await up.json().catch(() => null));
+                if (!up.ok || !upBody?.success) {
+                    sendJson(res, 502, { ok: false, error: upBody?.error || `avatar upload HTTP ${up.status}` });
+                    return;
+                }
+                // Point the record at it (?v= busts caches on re-upload) and drop any
+                // punk pick — one avatar at a time.
+                const avatarUrl = `${ENS_GATEWAY}/avatar/${encodeURIComponent(name)}?v=${ts}`;
+                const r = await ensSignAndSet(opts.call, {
+                    name: mine.name,
+                    owner: identity.userid,
+                    addresses: mine.addresses ?? {},
+                    texts: { ...(mine.texts ?? {}), avatar: avatarUrl },
+                    referee: mine.referee ?? "",
+                    nft: "",
+                    nftid: 0,
+                });
+                sendJson(res, r.ok ? 200 : 502, r.ok ? { ok: true, avatar: avatarUrl } : { ok: false, error: r.error });
+                return;
+            }
             if (req.method === "GET" && url === "/api/ens-name") {
                 const diag = await opts.call({ op: "diag" });
                 const identity = (diag.ok ? diag.data?.identity : null) ?? {};
@@ -835,7 +1012,7 @@ export function startBeagleServer(opts) {
             }
             if (req.method === "GET" && url === "/api/discover-registered") {
                 try {
-                    const raw = (await fetchDiscoverJson("https://ens-gateway.beaglechat.workers.dev/names"));
+                    const raw = (await fetchDiscoverJson(`${ENS_GATEWAY}/names`));
                     const list = Object.entries(raw && typeof raw === "object" ? raw : {})
                         .map(([ens, v]) => {
                         const t = v?.texts ?? {};
@@ -845,6 +1022,10 @@ export function startBeagleServer(opts) {
                             name: t.displayName || ens,
                             ens,
                             description: t.description || null,
+                            // custom uploaded avatar (R2 URL in texts) beats the punk pick
+                            avatar: typeof t.avatar === "string" && /^https:\/\//.test(t.avatar) ? t.avatar : null,
+                            // punk avatar convention: nft="CryptoPunks" + nftid>0 (0 = unset)
+                            punkId: v?.nft === "CryptoPunks" && typeof v?.nftid === "number" && v.nftid > 0 ? v.nftid : null,
                         };
                     })
                         .filter((e) => e.userid && e.address);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Beagle — P2P chat, file transfer and calls for regular users, on the Decent Network. No admin privilege required.",
   "type": "module",
   "main": "./dist/index.js",