@1sat/permission-module-ui 0.0.38 → 0.0.40

package/dist/OneSatPermissionPrompt.d.ts

@@ -15,7 +15,7 @@ export interface OneSatPermissionPromptProps {
  *
  * The host wallet feeds in the `request` it received from its promptHandler
  * callback and wires `onApprove`/`onReject` to resolve the same Promise.
- * Layout mirrors the design in `1sat-permissions-popups.pen` — 1Sat coin
+ * Layout mirrors `docs/plans/mockups/p1sat-permissions.pen` — 1Sat coin
  * badge, intent title, asset detail card, network/fee, approve/reject.
  */
 export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, }: OneSatPermissionPromptProps): import("react").JSX.Element;

package/dist/OneSatPermissionPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OneSatPermissionPrompt.d.ts","sourceRoot":"","sources":["../src/OneSatPermissionPrompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAU5D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,2BAA2B;IAC3C,mEAAmE;IACnE,OAAO,EAAE,aAAa,CAAA;IACtB,yFAAyF;IACzF,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,yFAAyF;IACzF,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAA;CACb;AAqCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,GACd,EAAE,2BAA2B,+BAuH7B"}
+{"version":3,"file":"OneSatPermissionPrompt.d.ts","sourceRoot":"","sources":["../src/OneSatPermissionPrompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAU5D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,2BAA2B;IAC3C,mEAAmE;IACnE,OAAO,EAAE,aAAa,CAAA;IACtB,yFAAyF;IACzF,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,yFAAyF;IACzF,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAA;CACb;AA8DD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,GACd,EAAE,2BAA2B,+BAyL7B"}

package/dist/index.js

@@ -5,6 +5,31 @@ var ORDINALS_BASKET = "p 1sat ordinals";
 var BSV21_BASKET = "p 1sat bsv21";
 var OPNS_BASKET = "p 1sat opns";
 var LOCK_BASKET = "p 1sat lock";
+var P1SAT_INTENTS = {
+  OPNS_REGISTER: "opns.register",
+  OPNS_DEREGISTER: "opns.deregister",
+  OPNS_LIST: "opns.list",
+  OPNS_TRANSFER: "opns.transfer",
+  OPNS_CANCEL_LISTING: "opns.cancel-listing",
+  OPNS_PURCHASE: "opns.purchase",
+  ORDINAL_TRANSFER: "ordinal.transfer",
+  ORDINAL_LIST: "ordinal.list",
+  ORDINAL_CANCEL_LISTING: "ordinal.cancel-listing",
+  ORDINAL_PURCHASE: "ordinal.purchase",
+  ORDINAL_BURN: "ordinal.burn",
+  ORDINAL_INSCRIBE: "ordinal.inscribe",
+  ORDINAL_INSCRIBE_SIGMA: "ordinal.inscribe-sigma",
+  ORDINAL_MINT_COLLECTION: "ordinal.mint-collection",
+  ORDINAL_MINT_ITEM: "ordinal.mint-item",
+  LOCK_LOCK: "lock.lock",
+  LOCK_UNLOCK: "lock.unlock",
+  BSV21_TRANSFER: "bsv21.transfer",
+  BSV21_PURCHASE: "bsv21.purchase",
+  BSV21_MINT: "bsv21.mint",
+  BSV21_DEPLOY: "bsv21.deploy"
+};
+var P1SAT_INTENT_IDS = new Set(Object.values(P1SAT_INTENTS));
+var OPNS_REGISTER_LOCK_PLACEHOLDER_HEX = "00".repeat(142);
 var MAX_INSCRIPTION_BYTES = 50 * 1024 * 1024;
 var EXCHANGE_RATE_CACHE_TTL = 5 * 60 * 1000;
 var DEFAULT_STREAM_CHUNK_SIZE = 1024 * 1024;
@@ -53,6 +78,12 @@ var promptStyles = `
   --opp-reject-border: #d1d5db;
   --opp-status-bg: #FFFBE6;
   --opp-status-fg: #E5A920;
+  --opp-trust-ok-bg: #ECFDF5;
+  --opp-trust-ok-fg: #059669;
+  --opp-trust-warn-bg: #FFFBEB;
+  --opp-trust-warn-fg: #D97706;
+  --opp-trust-bad-bg: #FEF2F2;
+  --opp-trust-bad-fg: #DC2626;
 
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: var(--opp-bg);
@@ -84,6 +115,12 @@ var promptStyles = `
   --opp-reject-border: #2D3142;
   --opp-status-bg: #2A2408;
   --opp-status-fg: #E5A920;
+  --opp-trust-ok-bg: #0A2E1F;
+  --opp-trust-ok-fg: #34D399;
+  --opp-trust-warn-bg: #2A2008;
+  --opp-trust-warn-fg: #FBBF24;
+  --opp-trust-bad-bg: #2A1215;
+  --opp-trust-bad-fg: #F87171;
 }
 
 .opp-body {
@@ -145,7 +182,7 @@ var promptStyles = `
   background: var(--opp-card-bg);
   border: 1px solid var(--opp-card-border);
   border-radius: 10px;
-  margin: 0 20px;
+  margin: 0 20px 8px;
   padding: 16px;
 }
 
@@ -154,15 +191,30 @@ var promptStyles = `
   height: 80px;
   border-radius: 8px;
   object-fit: cover;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.08);
   flex-shrink: 0;
 }
 
+.opp-featured-image-token {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+}
+
+.opp-featured-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--opp-muted);
+  font-size: 18px;
+}
+
 .opp-featured-meta {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
+  flex: 1;
 }
 
 .opp-featured-title {
@@ -176,9 +228,71 @@ var promptStyles = `
 .opp-featured-subtitle {
   font-size: 12px;
   color: var(--opp-muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.opp-featured-subtitle-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-width: 0;
+  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
+}
+
+.opp-trust-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0 20px 8px;
+}
+
+.opp-trust {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.opp-trust-verified {
+  background: var(--opp-trust-ok-bg);
+  color: var(--opp-trust-ok-fg);
+}
+
+.opp-trust-unverified {
+  background: var(--opp-trust-warn-bg);
+  color: var(--opp-trust-warn-fg);
+}
+
+.opp-trust-mismatch {
+  background: var(--opp-trust-bad-bg);
+  color: var(--opp-trust-bad-fg);
+}
+
+.opp-trust-note {
+  padding: 10px;
+  border-radius: 8px;
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.opp-trust-note-verified {
+  background: var(--opp-trust-ok-bg);
+  color: var(--opp-trust-ok-fg);
+}
+
+.opp-trust-note-unverified {
+  background: var(--opp-trust-warn-bg);
+  color: var(--opp-trust-warn-fg);
+}
+
+.opp-trust-note-mismatch {
+  background: var(--opp-trust-bad-bg);
+  color: var(--opp-trust-bad-fg);
 }
 
 .opp-row {
@@ -190,31 +304,54 @@ var promptStyles = `
 
 .opp-row-key {
   color: var(--opp-muted);
+  flex-shrink: 0;
+}
+
+.opp-row-value-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 70%;
+  justify-content: flex-end;
 }
 
 .opp-row-value {
   font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   text-align: right;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
-  max-width: 60%;
 }
 
-.opp-meta {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 20px;
-  font-size: 12px;
-  color: var(--opp-muted);
+.opp-copy {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  border: 1px solid var(--opp-reject-border);
+  background: var(--opp-bg);
+  color: var(--opp-fg);
+  cursor: pointer;
 }
 
-.opp-meta-value {
-  color: var(--opp-fg);
-  font-weight: 500;
+.opp-copy:hover {
+  border-color: var(--opp-accent);
+  color: var(--opp-accent);
+}
+
+.opp-fee-note {
+  font-size: 11px;
+  color: var(--opp-muted);
+  line-height: 1.3;
+  margin-top: -4px;
 }
 
 .opp-actions {
@@ -264,7 +401,7 @@ var promptStyles = `
 `;
 
 // src/OneSatPermissionPrompt.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 function OneSatPermissionPrompt({
   request,
   onApprove,
@@ -272,8 +409,25 @@ function OneSatPermissionPrompt({
   theme = "auto"
 }) {
   const resolvedTheme = useResolvedTheme(theme);
-  const summary = summarizeRequest(request);
+  const base = summarizeRequest(request);
   const [busy, setBusy] = useState(false);
+  const [verified, setVerified] = useState(undefined);
+  const verification = request.intent?.verification;
+  useEffect(() => {
+    if (!verification)
+      return;
+    let live = true;
+    verification.then((res) => {
+      if (live && res)
+        setVerified(res);
+    }).catch(() => {
+      return;
+    });
+    return () => {
+      live = false;
+    };
+  }, [verification]);
+  const summary = verified ? applyVerification(base, verified) : base;
   const handle = (action) => () => {
     if (busy)
       return;
@@ -289,6 +443,8 @@ function OneSatPermissionPrompt({
   };
   useEffect(() => {
     const onKey = (e) => {
+      if (busy)
+        return;
       if (e.key === "Escape")
         onReject();
       else if (e.key === "Enter")
@@ -296,8 +452,9 @@ function OneSatPermissionPrompt({
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [onApprove, onReject]);
+  }, [onApprove, onReject, busy]);
   const className = `opp-root${resolvedTheme === "dark" ? " opp-dark" : ""}`;
+  const featuredVariant = summary.featured?.variant ?? "ordinal";
   return /* @__PURE__ */ jsxs("div", {
     className,
     children: [
@@ -355,12 +512,16 @@ function OneSatPermissionPrompt({
         ]
       }),
       summary.featured && /* @__PURE__ */ jsxs("div", {
-        className: "opp-featured",
+        className: `opp-featured${featuredVariant === "token" ? " opp-featured-token" : ""}`,
         children: [
-          /* @__PURE__ */ jsx("img", {
-            className: "opp-featured-image",
+          summary.featured.imageUrl ? /* @__PURE__ */ jsx("img", {
+            className: featuredVariant === "token" ? "opp-featured-image opp-featured-image-token" : "opp-featured-image",
             src: summary.featured.imageUrl,
             alt: summary.featured.title
+          }) : /* @__PURE__ */ jsx("div", {
+            className: featuredVariant === "token" ? "opp-featured-image opp-featured-image-token opp-featured-placeholder" : "opp-featured-image opp-featured-placeholder",
+            "aria-hidden": true,
+            children: featuredVariant === "token" ? "◎" : "▭"
           }),
           /* @__PURE__ */ jsxs("div", {
             className: "opp-featured-meta",
@@ -369,61 +530,89 @@ function OneSatPermissionPrompt({
                 className: "opp-featured-title",
                 children: summary.featured.title
               }),
-              summary.featured.subtitle && /* @__PURE__ */ jsx("div", {
+              summary.featured.subtitle && /* @__PURE__ */ jsxs("div", {
                 className: "opp-featured-subtitle",
-                children: summary.featured.subtitle
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "opp-featured-subtitle-text",
+                    children: summary.featured.subtitle
+                  }),
+                  summary.featured.subtitleCopy && /* @__PURE__ */ jsx(CopyButton, {
+                    text: summary.featured.subtitleCopy
+                  })
+                ]
               })
             ]
           })
         ]
       }),
-      summary.rows.length > 0 && /* @__PURE__ */ jsx("div", {
-        className: "opp-card",
-        children: summary.rows.map((row) => /* @__PURE__ */ jsxs("div", {
-          className: "opp-row",
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              className: "opp-row-key",
-              children: row.key
-            }),
-            /* @__PURE__ */ jsx("span", {
-              className: "opp-row-value",
-              children: row.value
-            })
-          ]
-        }, `${row.key}:${row.value}`))
+      summary.trust && /* @__PURE__ */ jsxs("div", {
+        className: "opp-trust-wrap",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: `opp-trust opp-trust-${summary.trust.state}`,
+            children: trustLabel(summary.trust.state)
+          }),
+          summary.trust.note && /* @__PURE__ */ jsx("div", {
+            className: `opp-trust-note opp-trust-note-${summary.trust.state}`,
+            children: summary.trust.note
+          })
+        ]
       }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "opp-bottom",
+      (summary.rows.length > 0 || summary.indexerFee) && /* @__PURE__ */ jsxs("div", {
+        className: "opp-card",
         children: [
-          (summary.network || summary.feeSats !== undefined) && /* @__PURE__ */ jsxs("div", {
-            className: "opp-meta",
+          summary.rows.map((row) => /* @__PURE__ */ jsxs("div", {
+            className: "opp-row",
             children: [
-              summary.network && /* @__PURE__ */ jsxs("span", {
+              /* @__PURE__ */ jsx("span", {
+                className: "opp-row-key",
+                children: row.key
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: "opp-row-value-wrap",
                 children: [
-                  "Network",
-                  " ",
                   /* @__PURE__ */ jsx("span", {
-                    className: "opp-meta-value",
-                    children: summary.network
+                    className: "opp-row-value",
+                    title: row.copyValue ?? row.value,
+                    children: row.value
+                  }),
+                  row.copyValue && /* @__PURE__ */ jsx(CopyButton, {
+                    text: row.copyValue
                   })
                 ]
-              }),
-              summary.feeSats !== undefined && /* @__PURE__ */ jsxs("span", {
+              })
+            ]
+          }, `${row.key}:${row.value}`)),
+          summary.indexerFee && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "opp-row",
                 children: [
-                  "Estimated Fee",
-                  " ",
+                  /* @__PURE__ */ jsx("span", {
+                    className: "opp-row-key",
+                    children: "Indexer fee"
+                  }),
                   /* @__PURE__ */ jsxs("span", {
-                    className: "opp-meta-value",
+                    className: "opp-row-value",
                     children: [
-                      summary.feeSats,
+                      formatSats(summary.indexerFee.sats),
                       " sats"
                     ]
                   })
                 ]
+              }),
+              summary.indexerFee.note && /* @__PURE__ */ jsx("div", {
+                className: "opp-fee-note",
+                children: summary.indexerFee.note
               })
             ]
-          }),
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "opp-bottom",
+        children: [
           /* @__PURE__ */ jsxs("div", {
             className: "opp-actions",
             children: [
@@ -454,6 +643,72 @@ function OneSatPermissionPrompt({
     ]
   });
 }
+function trustLabel(state) {
+  if (state === "verified")
+    return "Verified";
+  if (state === "mismatch")
+    return "Mismatch";
+  return "Unverified";
+}
+function formatSats(n) {
+  return n.toLocaleString("en-US");
+}
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState(false);
+  const onCopy = () => {
+    navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    });
+  };
+  return /* @__PURE__ */ jsx("button", {
+    type: "button",
+    className: "opp-copy",
+    onClick: onCopy,
+    "aria-label": copied ? "Copied" : "Copy full value",
+    title: copied ? "Copied" : "Copy",
+    children: copied ? /* @__PURE__ */ jsx("svg", {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", {
+        d: "M5 13l4 4L19 7",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    }) : /* @__PURE__ */ jsxs("svg", {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("rect", {
+          x: "9",
+          y: "9",
+          width: "11",
+          height: "11",
+          rx: "2",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          d: "M5 15V5a2 2 0 012-2h10",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        })
+      ]
+    })
+  });
+}
+function copyable(key, full) {
+  return { key, value: shortenValue(full), copyValue: full };
+}
 function useResolvedTheme(theme) {
   const [resolved, setResolved] = useState(() => theme === "auto" ? readSystemTheme() : theme);
   useEffect(() => {
@@ -474,9 +729,38 @@ function readSystemTheme() {
     return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
+function applyVerification(base, res) {
+  const rows = base.rows.map((row) => {
+    if (row.key === "Origin" && res.origin)
+      return copyable("Origin", res.origin);
+    if (row.key === "Type" && res.contentType) {
+      return { key: "Type", value: res.contentType };
+    }
+    return row;
+  });
+  if (res.contentLength !== undefined && !rows.some((r) => r.key === "Size")) {
+    rows.push({
+      key: "Size",
+      value: `${res.contentLength.toLocaleString("en-US")} bytes`
+    });
+  }
+  return {
+    ...base,
+    rows,
+    trust: { state: res.state, note: res.note },
+    featured: base.featured ? {
+      ...base.featured,
+      title: res.name ?? base.featured.title,
+      imageUrl: res.contentUrl ?? base.featured.imageUrl
+    } : undefined
+  };
+}
 function summarizeRequest(req) {
   if (req.kind === "transaction") {
     const intent = req.intent;
+    const byIntent = summarizeByP1SatIntent(req, intent);
+    if (byIntent)
+      return byIntent;
     switch (intent.kind) {
       case "ordinal-transfer":
         return summarizeOrdinalTransfer(req, intent);
@@ -522,6 +806,128 @@ function summarizeBasketAccess(req) {
     }))
   };
 }
+var INTENT_TITLES = {
+  "opns.register": "Publish name",
+  "opns.deregister": "Unpublish name",
+  "opns.list": "List name for sale",
+  "opns.transfer": "Transfer name",
+  "opns.cancel-listing": "Cancel listing",
+  "opns.purchase": "Buy name",
+  "ordinal.transfer": "Send ordinal",
+  "ordinal.list": "List for sale",
+  "ordinal.cancel-listing": "Cancel listing",
+  "ordinal.purchase": "Buy ordinal",
+  "ordinal.burn": "Burn ordinal",
+  "ordinal.inscribe": "Create inscription",
+  "ordinal.inscribe-sigma": "Create inscription",
+  "ordinal.mint-collection": "Mint collection",
+  "ordinal.mint-item": "Mint collection item",
+  "lock.lock": "Lock BSV",
+  "lock.unlock": "Unlock BSV",
+  "bsv21.transfer": "Send tokens",
+  "bsv21.purchase": "Buy tokens",
+  "bsv21.mint": "Mint tokens",
+  "bsv21.deploy": "Deploy token"
+};
+function summarizeByP1SatIntent(req, intent) {
+  const id = intent.p1satIntent;
+  if (!id || !INTENT_TITLES[id])
+    return;
+  let base;
+  switch (intent.kind) {
+    case "ordinal-transfer":
+      base = summarizeOrdinalTransfer(req, intent);
+      break;
+    case "token-transfer":
+      base = summarizeTokenTransfer(req, intent);
+      break;
+    case "lock":
+      base = summarizeLock(req, intent);
+      break;
+    case "unlock":
+      base = summarizeUnlock(req, intent);
+      break;
+    case "inscription":
+      base = summarizeInscription(req, intent);
+      break;
+    case "listing":
+      base = summarizeListing(req, intent);
+      break;
+    case "cancel-listing":
+      base = summarizeCancelListing(req, intent);
+      break;
+    case "purchase":
+      base = summarizePurchase(req, intent);
+      break;
+    case "opns":
+      base = summarizeOpns(req, intent);
+      break;
+    default:
+      base = summarizeUnknownTx(req, intent);
+  }
+  return {
+    ...base,
+    title: INTENT_TITLES[id],
+    subtitle: intentSubtitle(req, id, intent),
+    feeSats: undefined,
+    network: undefined,
+    trust: intent.trust ?? base.trust,
+    indexerFee: intent.indexerFeeSats != null && intent.indexerFeeSats > 0 ? {
+      sats: intent.indexerFeeSats,
+      note: intent.indexerFeeNote
+    } : base.indexerFee
+  };
+}
+function intentSubtitle(req, id, intent) {
+  const o = shortenOriginator(req.originator);
+  const name = tagValue(intent.inputs[0]?.tags, "name") ?? tagValue(intent.outputs.find((out) => out.tags.some((t) => t.startsWith("name:")))?.tags, "name");
+  const quoted = name ? `“${name}”` : undefined;
+  switch (id) {
+    case "opns.register":
+      return `${o} wants to publish ${quoted ?? "an OpNS name"}`;
+    case "opns.deregister":
+      return `${o} wants to unpublish ${quoted ?? "an OpNS name"}`;
+    case "opns.list":
+      return `${o} wants to list ${quoted ?? "an OpNS name"} for sale`;
+    case "opns.transfer":
+      return `${o} wants to transfer ${quoted ?? "an OpNS name"}`;
+    case "opns.cancel-listing":
+      return `${o} wants to cancel ${quoted ? `the listing of ${quoted}` : "an OpNS listing"}`;
+    case "opns.purchase":
+      return `${o} wants to buy ${quoted ?? "an OpNS name"}`;
+    case "ordinal.transfer":
+      return `${o} wants to transfer an ordinal`;
+    case "ordinal.list":
+      return `${o} wants to list ${quoted ?? "an ordinal"} for sale`;
+    case "ordinal.cancel-listing":
+      return `${o} wants to cancel ${quoted ? `the listing of ${quoted}` : "an ordinal listing"}`;
+    case "ordinal.purchase":
+      return `${o} wants to purchase an ordinal into your wallet`;
+    case "ordinal.burn":
+      return `${o} wants to burn an ordinal`;
+    case "ordinal.inscribe":
+    case "ordinal.inscribe-sigma":
+      return `${o} wants to inscribe content into your wallet`;
+    case "ordinal.mint-collection":
+      return `${o} wants to mint a collection`;
+    case "ordinal.mint-item":
+      return `${o} wants to mint a collection item`;
+    case "lock.lock":
+      return `${o} wants to time-lock funds`;
+    case "lock.unlock":
+      return `${o} wants to unlock matured locks`;
+    case "bsv21.transfer":
+      return `${o} wants to send tokens`;
+    case "bsv21.purchase":
+      return `${o} wants to purchase tokens into your wallet`;
+    case "bsv21.mint":
+      return `${o} wants to mint tokens`;
+    case "bsv21.deploy":
+      return `${o} wants to deploy a BSV21 token`;
+    default:
+      return `${o} wants to ${req.summary.toLowerCase()}`;
+  }
+}
 function tagValue(tags, key) {
   if (!tags)
     return;
@@ -542,21 +948,20 @@ function summarizeOrdinalTransfer(req, intent) {
   const imageUrl = origin ? intent.contentUrls?.[origin] : undefined;
   const rows = [];
   if (recipient)
-    rows.push({ key: "Recipient", value: shortenValue(recipient) });
+    rows.push(copyable("Recipient", recipient));
   if (origin)
-    rows.push({ key: "Origin", value: shortenValue(origin) });
+    rows.push(copyable("Origin", origin));
   if (contentType)
     rows.push({ key: "Type", value: contentType });
   return {
-    title: "NFT Transfer",
+    title: "Send ordinal",
     subtitle: `${shortenOriginator(req.originator)} wants to transfer an ordinal`,
     rows,
     featured: imageUrl ? {
       imageUrl,
       title: name ?? "Untitled ordinal",
       subtitle: collectionId ?? contentType
-    } : undefined,
-    network: networkLabel(intent.chain)
+    } : undefined
   };
 }
 function summarizeTokenTransfer(req, intent) {
@@ -565,12 +970,12 @@ function summarizeTokenTransfer(req, intent) {
     const tokenId = tagValue(input.tags, "bsv21");
     if (!tokenId)
       continue;
-    const sym = tagValue(input.tags, "sym");
+    const sym2 = tagValue(input.tags, "sym");
     const amt = BigInt(tagValue(input.tags, "amt") ?? "0");
-    const cur = totals.get(tokenId) ?? { sym, inAmt: 0n, changeAmt: 0n };
+    const cur = totals.get(tokenId) ?? { sym: sym2, inAmt: 0n, changeAmt: 0n };
     cur.inAmt += amt;
-    if (!cur.sym && sym)
-      cur.sym = sym;
+    if (!cur.sym && sym2)
+      cur.sym = sym2;
     totals.set(tokenId, cur);
   }
   for (const output of intent.outputs) {
@@ -585,36 +990,75 @@ function summarizeTokenTransfer(req, intent) {
       cur.changeAmt += amt;
   }
   const rows = [];
+  let featured;
+  let primaryTokenId;
   for (const [tokenId, info] of totals) {
-    rows.push({
-      key: "Token",
-      value: info.sym ? `${info.sym} — ${shortenId(tokenId)}` : shortenId(tokenId)
-    });
+    if (!primaryTokenId)
+      primaryTokenId = tokenId;
     const sent = info.inAmt - info.changeAmt;
-    rows.push({ key: "Amount", value: sent.toString() });
+    rows.push({ key: "Amount", value: sent.toLocaleString("en-US") });
   }
-  const recipient = intent.outputs.find((o) => o.recipient && o.basket !== BSV21_BASKET)?.recipient;
-  if (recipient)
-    rows.push({ key: "Recipient", value: shortenValue(recipient) });
+  const to = intent.outputs.find((o) => o.recipient && o.satoshis === 1)?.recipient;
+  if (to)
+    rows.push(copyable("Recipient", to));
+  const firstIn = intent.inputs.find((i) => tagValue(i.tags, "bsv21"));
+  const sym = (primaryTokenId ? totals.get(primaryTokenId)?.sym : undefined) ?? tagValue(firstIn?.tags, "sym");
+  const iconRef = tagValue(firstIn?.tags, "icon");
+  const iconUrl = iconRef && intent.contentUrls?.[iconRef] || primaryTokenId && intent.contentUrls?.[primaryTokenId] || undefined;
+  if (primaryTokenId) {
+    featured = {
+      variant: "token",
+      imageUrl: iconUrl,
+      title: sym ?? "Token",
+      subtitle: shortenId(primaryTokenId),
+      subtitleCopy: primaryTokenId
+    };
+  }
+  const indexerFee = resolveIndexerFee(intent);
   return {
-    title: "Token Transfer",
+    title: "Send tokens",
     subtitle: `${shortenOriginator(req.originator)} wants to send tokens`,
     rows,
-    network: networkLabel(intent.chain)
+    featured,
+    indexerFee
   };
 }
+function resolveIndexerFee(intent) {
+  if (intent.indexerFeeSats != null && intent.indexerFeeSats > 0) {
+    return {
+      sats: intent.indexerFeeSats,
+      note: intent.indexerFeeNote
+    };
+  }
+  const tokenOutCount = intent.outputs.filter((o) => o.basket === BSV21_BASKET || tagValue(o.tags, "bsv21")).length;
+  const feeLike = intent.outputs.filter((o) => !o.basket && o.recipient && o.satoshis > 1);
+  const isPurchase = intent.p1satIntent?.endsWith(".purchase") || intent.kind === "purchase";
+  if (isPurchase || feeLike.length !== 1)
+    return;
+  const fee = feeLike[0];
+  if (!fee || fee.satoshis <= 0)
+    return;
+  const note = tokenOutCount > 0 ? `Overlay processing · ${formatSats(Math.round(fee.satoshis / tokenOutCount))} sats × ${tokenOutCount} token outs` : "Overlay processing fee";
+  return { sats: fee.satoshis, note };
+}
 function summarizeLock(req, intent) {
-  const lockOutputs = intent.outputs.filter((o) => o.basket === LOCK_BASKET);
+  const decoded = intent.outputs.filter((o) => o.lockUntilHeight !== undefined);
+  const lockOutputs = decoded.length > 0 ? decoded : intent.outputs.filter((o) => o.basket === LOCK_BASKET);
   const sats = (lockOutputs.length > 0 ? lockOutputs : intent.outputs).reduce((s, o) => s + o.satoshis, 0);
-  const until = (lockOutputs.length > 0 ? lockOutputs : intent.outputs).flatMap((o) => o.tags).find((t) => t.startsWith("until:"))?.slice("until:".length);
-  const rows = [{ key: "Amount", value: `${sats} sats` }];
-  if (until)
-    rows.push({ key: "Lock until block", value: until });
+  const until = decoded[0]?.lockUntilHeight;
+  const rows = [
+    { key: "Amount", value: `${sats.toLocaleString("en-US")} sats` }
+  ];
+  if (until !== undefined) {
+    rows.push({
+      key: "Lock until block",
+      value: until.toLocaleString("en-US")
+    });
+  }
   return {
     title: "Lock BSV",
     subtitle: `${shortenOriginator(req.originator)} wants to time-lock funds`,
-    rows,
-    network: networkLabel(intent.chain)
+    rows
   };
 }
 function summarizeUnlock(req, intent) {
@@ -622,8 +1066,7 @@ function summarizeUnlock(req, intent) {
   return {
     title: "Unlock Matured",
     subtitle: `${shortenOriginator(req.originator)} wants to unlock matured locks`,
-    rows: [{ key: "Amount", value: `${sats} sats` }],
-    network: networkLabel(intent.chain)
+    rows: [{ key: "Amount", value: `${sats} sats` }]
   };
 }
 function summarizeInscription(req, intent) {
@@ -637,30 +1080,30 @@ function summarizeInscription(req, intent) {
   if (name)
     rows.push({ key: "Name", value: name });
   if (recipient)
-    rows.push({ key: "Recipient", value: shortenValue(recipient) });
+    rows.push(copyable("Recipient", recipient));
   return {
     title: "Create Inscription",
     subtitle: `${shortenOriginator(req.originator)} wants to inscribe content into your wallet`,
-    rows,
-    network: networkLabel(intent.chain)
+    rows
   };
 }
 function summarizeListing(req, intent) {
-  const listingOutput = intent.outputs.find((o) => o.tags.some((t) => t.startsWith("price:")));
+  const listingOutput = intent.outputs.find((o) => o.listingPriceSats !== undefined) ?? intent.outputs.find((o) => o.tags.some((t) => t.startsWith("price:")));
   const ordinal = intent.inputs[0];
   const origin = tagValue(ordinal?.tags, "origin") ?? tagValue(listingOutput?.tags, "origin");
   const name = tagValue(ordinal?.tags, "name") ?? tagValue(listingOutput?.tags, "name");
   const contentType = tagValue(ordinal?.tags, "type") ?? tagValue(listingOutput?.tags, "type");
   const collectionId = tagValue(ordinal?.tags, "collectionId");
   const imageUrl = origin ? intent.contentUrls?.[origin] : undefined;
-  const price = tagValue(listingOutput?.tags, "price");
+  const price = listingOutput?.listingPriceSats;
   const rows = [];
   if (name)
     rows.push({ key: "Name", value: name });
-  if (price)
-    rows.push({ key: "Price", value: `${price} sats` });
+  if (price !== undefined) {
+    rows.push({ key: "Price", value: `${price.toLocaleString("en-US")} sats` });
+  }
   if (origin)
-    rows.push({ key: "Origin", value: shortenValue(origin) });
+    rows.push(copyable("Origin", origin));
   if (contentType)
     rows.push({ key: "Type", value: contentType });
   return {
@@ -671,8 +1114,7 @@ function summarizeListing(req, intent) {
       imageUrl,
       title: name ?? "Untitled ordinal",
       subtitle: collectionId ?? contentType
-    } : undefined,
-    network: networkLabel(intent.chain)
+    } : undefined
   };
 }
 function summarizeCancelListing(req, intent) {
@@ -690,7 +1132,7 @@ function summarizeCancelListing(req, intent) {
   if (price)
     rows.push({ key: "Original price", value: `${price} sats` });
   if (origin)
-    rows.push({ key: "Origin", value: shortenValue(origin) });
+    rows.push(copyable("Origin", origin));
   if (contentType)
     rows.push({ key: "Type", value: contentType });
   return {
@@ -701,8 +1143,7 @@ function summarizeCancelListing(req, intent) {
       imageUrl,
       title: name ?? "Untitled ordinal",
       subtitle: collectionId ?? contentType
-    } : undefined,
-    network: networkLabel(intent.chain)
+    } : undefined
   };
 }
 function summarizePurchase(req, intent) {
@@ -719,41 +1160,49 @@ function summarizePurchase(req, intent) {
   const price = sellerOutput?.satoshis;
   const rows = [];
   if (price !== undefined)
-    rows.push({ key: "Price", value: `${price} sats` });
+    rows.push({ key: "Price", value: `${price.toLocaleString("en-US")} sats` });
   if (isToken) {
     if (amt)
       rows.push({ key: "Amount", value: amt });
-    if (sym || tokenId) {
-      rows.push({
-        key: "Token",
-        value: sym && tokenId ? `${sym} — ${shortenId(tokenId)}` : sym ?? shortenId(tokenId ?? "")
-      });
-    }
   } else {
     if (origin)
-      rows.push({ key: "Origin", value: shortenValue(origin) });
+      rows.push(copyable("Origin", origin));
     if (contentType)
       rows.push({ key: "Type", value: contentType });
   }
   const featuredImage = !isToken && origin ? intent.contentUrls?.[origin] : undefined;
-  return {
-    title: isToken ? "Purchase Tokens" : "Purchase Ordinal",
-    subtitle: isToken ? `${shortenOriginator(req.originator)} wants to purchase tokens into your wallet` : `${shortenOriginator(req.originator)} wants to purchase an ordinal into your wallet`,
-    rows,
-    featured: !isToken && featuredImage ? {
+  const iconRef = tagValue(incoming?.tags, "icon");
+  const iconUrl = iconRef && intent.contentUrls?.[iconRef] || tokenId && intent.contentUrls?.[tokenId] || undefined;
+  let featured;
+  if (isToken && (sym || tokenId)) {
+    featured = {
+      variant: "token",
+      imageUrl: iconUrl,
+      title: sym ?? "Token",
+      subtitle: tokenId ? shortenId(tokenId) : undefined,
+      subtitleCopy: tokenId
+    };
+  } else if (featuredImage) {
+    featured = {
       imageUrl: featuredImage,
       title: name ?? "Untitled ordinal",
       subtitle: collectionId ?? contentType
-    } : undefined,
-    network: networkLabel(intent.chain)
+    };
+  }
+  return {
+    title: isToken ? "Buy tokens" : "Buy ordinal",
+    subtitle: isToken ? `${shortenOriginator(req.originator)} wants to purchase tokens into your wallet` : `${shortenOriginator(req.originator)} wants to purchase an ordinal into your wallet`,
+    rows,
+    featured,
+    trust: intent.trust,
+    indexerFee: resolveIndexerFee(intent)
   };
 }
 function summarizeSocialPost(req, intent) {
   return {
     title: "Social Post",
     subtitle: `${shortenOriginator(req.originator)} wants to publish a post`,
-    rows: [],
-    network: networkLabel(intent.chain)
+    rows: []
   };
 }
 function summarizeOpns(req, intent) {
@@ -762,34 +1211,52 @@ function summarizeOpns(req, intent) {
   const recipient = intent.outputs.find((o) => !o.basket && o.recipient)?.recipient;
   const name = tagValue(input?.tags, "name") ?? tagValue(opnsOutput?.tags, "name");
   const origin = tagValue(input?.tags, "origin") ?? tagValue(opnsOutput?.tags, "origin");
+  const priceTag = intent.outputs.flatMap((o) => o.tags).find((t) => t.startsWith("price:"));
+  const price = priceTag?.slice("price:".length);
   const rows = [];
   if (name)
     rows.push({ key: "Name", value: name });
   if (recipient)
-    rows.push({ key: "Recipient", value: shortenValue(recipient) });
+    rows.push(copyable("Recipient", recipient));
+  if (price)
+    rows.push({ key: "Price", value: `${price} sats` });
   if (origin)
-    rows.push({ key: "Origin", value: shortenValue(origin) });
-  const isTransfer = Boolean(recipient);
+    rows.push(copyable("Origin", origin));
+  const copy = opnsCopy(intent.p1satIntent, Boolean(recipient));
+  const nameBit = name ? `“${name}”` : "an OpNS name";
   return {
-    title: isTransfer ? "Transfer OpNS Name" : "Update OpNS Name",
-    subtitle: `${shortenOriginator(req.originator)} wants to ${isTransfer ? "transfer" : "update"} ${name ? `“${name}”` : "an OpNS name"}`,
-    rows,
-    network: networkLabel(intent.chain)
+    title: copy.title,
+    subtitle: `${shortenOriginator(req.originator)} wants to ${copy.verb} ${nameBit}`,
+    rows
   };
 }
+function opnsCopy(p1satIntent, isTransferHeuristic) {
+  switch (p1satIntent) {
+    case "opns.register":
+      return { title: "Publish name", verb: "publish" };
+    case "opns.deregister":
+      return { title: "Unpublish name", verb: "unpublish" };
+    case "opns.list":
+      return { title: "List name for sale", verb: "list" };
+    case "opns.transfer":
+      return { title: "Transfer name", verb: "transfer" };
+    case "opns.cancel-listing":
+      return { title: "Cancel listing", verb: "cancel the listing of" };
+    case "opns.purchase":
+      return { title: "Buy name", verb: "buy" };
+    default:
+      return isTransferHeuristic ? { title: "Transfer OpNS Name", verb: "transfer" } : { title: "Update OpNS Name", verb: "update" };
+  }
+}
 function summarizeUnknownTx(req, intent) {
   const ins = intent.inputs.length;
   const outs = intent.outputs.length;
   return {
     title: "Transaction Request",
     subtitle: `${shortenOriginator(req.originator)} wants to ${req.summary.toLowerCase()}`,
-    rows: [{ key: "Inputs / Outputs", value: `${ins} / ${outs}` }],
-    network: networkLabel(intent.chain)
+    rows: [{ key: "Inputs / Outputs", value: `${ins} / ${outs}` }]
   };
 }
-function networkLabel(chain) {
-  return chain === "testnet" ? "BSV Testnet" : "BSV Mainnet";
-}
 function shortenId(id, max = 24) {
   if (id.length <= max)
     return id;

package/dist/styles.d.ts

@@ -2,7 +2,7 @@
  * CSS string for the OneSatPermissionPrompt component. Inlined as a style
  * tag so the host wallet doesn't have to wire up CSS imports.
  *
- * Colors match the design in `1sat-permissions-popups.pen`.
+ * Colors match `docs/plans/mockups/p1sat-permissions.pen`.
  */
-export declare const promptStyles = "\n.opp-root {\n  --opp-bg: #ffffff;\n  --opp-fg: #111827;\n  --opp-muted: #6b7280;\n  --opp-card-bg: #f7f8fa;\n  --opp-card-border: #eceef2;\n  --opp-accent: #E5A920;\n  --opp-approve-bg: #E5A920;\n  --opp-approve-fg: #ffffff;\n  --opp-reject-bg: #ffffff;\n  --opp-reject-fg: #111827;\n  --opp-reject-border: #d1d5db;\n  --opp-status-bg: #FFFBE6;\n  --opp-status-fg: #E5A920;\n\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--opp-bg);\n  color: var(--opp-fg);\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 480px;\n  min-height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.opp-bottom {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.opp-root.opp-dark {\n  --opp-bg: #0F1117;\n  --opp-fg: #F9FAFB;\n  --opp-muted: #9ca3af;\n  --opp-card-bg: #1A1D27;\n  --opp-card-border: #232636;\n  --opp-reject-bg: #0F1117;\n  --opp-reject-fg: #F9FAFB;\n  --opp-reject-border: #2D3142;\n  --opp-status-bg: #2A2408;\n  --opp-status-fg: #E5A920;\n}\n\n.opp-body {\n  padding: 24px 20px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n}\n\n.opp-coin {\n  width: 48px;\n  height: 48px;\n  flex-shrink: 0;\n}\n\n.opp-title {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n  text-align: center;\n}\n\n.opp-subtitle {\n  font-size: 12px;\n  color: var(--opp-muted);\n  margin: 0;\n  text-align: center;\n  line-height: 1.4;\n}\n\n.opp-status {\n  background: var(--opp-status-bg);\n  color: var(--opp-status-fg);\n  padding: 4px 12px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  margin-top: 4px;\n  border: 1px solid var(--opp-card-border);\n}\n\n.opp-card {\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px;\n  padding: 16px;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.opp-featured {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px;\n  padding: 16px;\n}\n\n.opp-featured-image {\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  object-fit: cover;\n  background: rgba(0, 0, 0, 0.1);\n  flex-shrink: 0;\n}\n\n.opp-featured-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.opp-featured-title {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opp-featured-subtitle {\n  font-size: 12px;\n  color: var(--opp-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opp-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.opp-row-key {\n  color: var(--opp-muted);\n}\n\n.opp-row-value {\n  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: right;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  max-width: 60%;\n}\n\n.opp-meta {\n  display: flex;\n  justify-content: space-between;\n  padding: 12px 20px;\n  font-size: 12px;\n  color: var(--opp-muted);\n}\n\n.opp-meta-value {\n  color: var(--opp-fg);\n  font-weight: 500;\n}\n\n.opp-actions {\n  display: flex;\n  gap: 12px;\n  padding: 20px 20px 12px;\n}\n\n.opp-button {\n  flex: 1;\n  padding: 0 16px;\n  height: 48px;\n  border-radius: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  border: 1px solid transparent;\n  transition: opacity 120ms ease;\n}\n\n.opp-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.opp-button-reject {\n  background: var(--opp-reject-bg);\n  color: var(--opp-reject-fg);\n  border-color: var(--opp-reject-border);\n}\n\n.opp-button-approve {\n  background: var(--opp-approve-bg);\n  color: var(--opp-approve-fg);\n}\n\n.opp-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 20px 16px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--opp-muted);\n}\n";
+export declare const promptStyles = "\n.opp-root {\n  --opp-bg: #ffffff;\n  --opp-fg: #111827;\n  --opp-muted: #6b7280;\n  --opp-card-bg: #f7f8fa;\n  --opp-card-border: #eceef2;\n  --opp-accent: #E5A920;\n  --opp-approve-bg: #E5A920;\n  --opp-approve-fg: #ffffff;\n  --opp-reject-bg: #ffffff;\n  --opp-reject-fg: #111827;\n  --opp-reject-border: #d1d5db;\n  --opp-status-bg: #FFFBE6;\n  --opp-status-fg: #E5A920;\n  --opp-trust-ok-bg: #ECFDF5;\n  --opp-trust-ok-fg: #059669;\n  --opp-trust-warn-bg: #FFFBEB;\n  --opp-trust-warn-fg: #D97706;\n  --opp-trust-bad-bg: #FEF2F2;\n  --opp-trust-bad-fg: #DC2626;\n\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--opp-bg);\n  color: var(--opp-fg);\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 480px;\n  min-height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.opp-bottom {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.opp-root.opp-dark {\n  --opp-bg: #0F1117;\n  --opp-fg: #F9FAFB;\n  --opp-muted: #9ca3af;\n  --opp-card-bg: #1A1D27;\n  --opp-card-border: #232636;\n  --opp-reject-bg: #0F1117;\n  --opp-reject-fg: #F9FAFB;\n  --opp-reject-border: #2D3142;\n  --opp-status-bg: #2A2408;\n  --opp-status-fg: #E5A920;\n  --opp-trust-ok-bg: #0A2E1F;\n  --opp-trust-ok-fg: #34D399;\n  --opp-trust-warn-bg: #2A2008;\n  --opp-trust-warn-fg: #FBBF24;\n  --opp-trust-bad-bg: #2A1215;\n  --opp-trust-bad-fg: #F87171;\n}\n\n.opp-body {\n  padding: 24px 20px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n}\n\n.opp-coin {\n  width: 48px;\n  height: 48px;\n  flex-shrink: 0;\n}\n\n.opp-title {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n  text-align: center;\n}\n\n.opp-subtitle {\n  font-size: 12px;\n  color: var(--opp-muted);\n  margin: 0;\n  text-align: center;\n  line-height: 1.4;\n}\n\n.opp-status {\n  background: var(--opp-status-bg);\n  color: var(--opp-status-fg);\n  padding: 4px 12px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  margin-top: 4px;\n  border: 1px solid var(--opp-card-border);\n}\n\n.opp-card {\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px;\n  padding: 16px;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.opp-featured {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px 8px;\n  padding: 16px;\n}\n\n.opp-featured-image {\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  object-fit: cover;\n  background: rgba(0, 0, 0, 0.08);\n  flex-shrink: 0;\n}\n\n.opp-featured-image-token {\n  width: 48px;\n  height: 48px;\n  border-radius: 999px;\n}\n\n.opp-featured-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--opp-muted);\n  font-size: 18px;\n}\n\n.opp-featured-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n  flex: 1;\n}\n\n.opp-featured-title {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opp-featured-subtitle {\n  font-size: 12px;\n  color: var(--opp-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n.opp-featured-subtitle-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;\n}\n\n.opp-trust-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin: 0 20px 8px;\n}\n\n.opp-trust {\n  display: inline-flex;\n  align-self: flex-start;\n  padding: 3px 8px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.opp-trust-verified {\n  background: var(--opp-trust-ok-bg);\n  color: var(--opp-trust-ok-fg);\n}\n\n.opp-trust-unverified {\n  background: var(--opp-trust-warn-bg);\n  color: var(--opp-trust-warn-fg);\n}\n\n.opp-trust-mismatch {\n  background: var(--opp-trust-bad-bg);\n  color: var(--opp-trust-bad-fg);\n}\n\n.opp-trust-note {\n  padding: 10px;\n  border-radius: 8px;\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.opp-trust-note-verified {\n  background: var(--opp-trust-ok-bg);\n  color: var(--opp-trust-ok-fg);\n}\n\n.opp-trust-note-unverified {\n  background: var(--opp-trust-warn-bg);\n  color: var(--opp-trust-warn-fg);\n}\n\n.opp-trust-note-mismatch {\n  background: var(--opp-trust-bad-bg);\n  color: var(--opp-trust-bad-fg);\n}\n\n.opp-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.opp-row-key {\n  color: var(--opp-muted);\n  flex-shrink: 0;\n}\n\n.opp-row-value-wrap {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  max-width: 70%;\n  justify-content: flex-end;\n}\n\n.opp-row-value {\n  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: right;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.opp-copy {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  border: 1px solid var(--opp-reject-border);\n  background: var(--opp-bg);\n  color: var(--opp-fg);\n  cursor: pointer;\n}\n\n.opp-copy:hover {\n  border-color: var(--opp-accent);\n  color: var(--opp-accent);\n}\n\n.opp-fee-note {\n  font-size: 11px;\n  color: var(--opp-muted);\n  line-height: 1.3;\n  margin-top: -4px;\n}\n\n.opp-actions {\n  display: flex;\n  gap: 12px;\n  padding: 20px 20px 12px;\n}\n\n.opp-button {\n  flex: 1;\n  padding: 0 16px;\n  height: 48px;\n  border-radius: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  border: 1px solid transparent;\n  transition: opacity 120ms ease;\n}\n\n.opp-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.opp-button-reject {\n  background: var(--opp-reject-bg);\n  color: var(--opp-reject-fg);\n  border-color: var(--opp-reject-border);\n}\n\n.opp-button-approve {\n  background: var(--opp-approve-bg);\n  color: var(--opp-approve-fg);\n}\n\n.opp-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 20px 16px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--opp-muted);\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,0nIA+NxB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,g3MA+UxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1sat/permission-module-ui",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "description": "React component for the 1Sat permission module's prompt UX",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,8 +28,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@1sat/permission-module": "0.0.42",
-    "@1sat/types": "0.0.37"
+    "@1sat/permission-module": "0.0.44",
+    "@1sat/types": "0.0.38"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"