@sweepconsole/js 0.2.4 → 0.2.6

package/README.md

@@ -5,7 +5,7 @@ A **Subscribe with USDC** button for your checkout. It asks your server for a UR
 ~3KB gzipped, no dependencies.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.4/dist/sweep.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.5/dist/sweep.js"></script>
 <button id="pay-usdc">Subscribe with USDC</button>
 
 <script>
@@ -34,7 +34,7 @@ app.post("/api/sweep/session", requireLogin, async (req, res) => {
 //     externalRef: req.user.id,
 //     maxAmount: usdc("35.00"),        // the ceiling, with headroom — not the price
 //     interval: "monthly",
-//     chains: ["base", "arbitrum", "optimism"],
+//     chains: ["base", "arbitrum", "optimism", "monad"],
 //     expiresAt: addYears(new Date(), 1),
 //   });
 //   res.json({ url: mandate.authorizationUrl });
@@ -114,7 +114,7 @@ For a public link — a pricing page, an invoice, a QR code — there is no iden
 to protect, and a plain anchor is enough:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.4/dist/button.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.5/dist/button.css">
 <a class="sweep-pay" href="https://pay.sweepconsole.com/pay/plink_a1b2c3?ref=user_42">
   Subscribe with USDC
 </a>

package/dist/index.d.ts

@@ -93,7 +93,7 @@ export declare const BUTTON_CSS = ".sweep-pay{--_bg:var(--sweep-bg,#201e1d);--_f
  * never a styled div, which cannot be reached by keyboard.
  */
 export declare function mount(target: string | Element, opts: MountOptions): SweepButton;
-export declare const MODAL_CSS = ".sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}\n.sweep-modal[data-open=true]{opacity:1}\n.sweep-modal__panel{position:relative;width:100%;max-width:820px;height:min(940px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}\n.sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}\n.sweep-modal__frame{display:block;width:100%;height:100%;border:0}\n.sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}\n.sweep-modal__close:hover{background:#ECECF3;color:#23233B}\n.sweep-modal__close:focus-visible{outline:2px solid #4447D6;outline-offset:2px}\n@media (max-width:868px){.sweep-modal{padding:0}.sweep-modal__panel{max-width:none;height:100%;border-radius:0;opacity:1;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.sweep-modal__close{top:8px;right:8px}}\n@media (prefers-reduced-motion:reduce){.sweep-modal,.sweep-modal__panel{transition:none}.sweep-modal__panel{transform:none}}";
+export declare const MODAL_CSS = ".sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}\n.sweep-modal[data-open=true]{opacity:1}\n.sweep-modal__panel{position:relative;width:100%;max-width:980px;height:min(1200px,calc(100vh - 24px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}\n.sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}\n.sweep-modal__frame{display:block;width:100%;height:100%;border:0}\n.sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}\n.sweep-modal__close:hover{background:#ECECF3;color:#23233B}\n.sweep-modal__close:focus-visible{outline:2px solid #4447D6;outline-offset:2px}\n@media (max-width:1028px){.sweep-modal{padding:0}.sweep-modal__panel{max-width:none;height:100%;border-radius:0;opacity:1;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.sweep-modal__close{top:8px;right:8px}}\n@media (prefers-reduced-motion:reduce){.sweep-modal,.sweep-modal__panel{transition:none}.sweep-modal__panel{transform:none}}";
 export interface AuthorizeResult {
     /** The mandate the payer signed, as the authorize page reported it. */
     mandate_id?: string;

package/dist/index.js

@@ -291,14 +291,14 @@ const MODAL_STYLE_ID = "sweep-modal-styles";
  * squeezed. Small enough to never be noticed, and it would have grown to 88px
  * wide the moment the panel did.
  */
-const PANEL_MAX_WIDTH = 820;
+const PANEL_MAX_WIDTH = 980;
 const SHEET_MAX_WIDTH = PANEL_MAX_WIDTH + 48;
 // The panel pops in like a dialog: it grows from 92% with a slight spring past
 // full size while the backdrop dims and softens. On a phone it is a sheet that
 // slides up from the bottom instead (see the media query).
-export const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
+export const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
 .sweep-modal[data-open=true]{opacity:1}
-.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(940px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
+.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(1200px,calc(100vh - 24px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
 .sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
 .sweep-modal__frame{display:block;width:100%;height:100%;border:0}
 .sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}
@@ -360,6 +360,7 @@ export function openAuthorize(url, opts = {}) {
             return;
         done = true;
         window.removeEventListener("message", onMessage);
+        window.removeEventListener("resize", fitPanel);
         document.removeEventListener("keydown", onKey);
         document.body.style.overflow = prevOverflow;
         root.remove();
@@ -401,8 +402,40 @@ export function openAuthorize(url, opts = {}) {
         }
         if (msg.type === "cancelled") {
             dismiss();
+            return;
+        }
+        if (msg.type === "resize") {
+            const h = msg.height;
+            if (typeof h === "number" && isFinite(h) && h > 0) {
+                contentHeight = h;
+                fitPanel();
+            }
+        }
+    }
+    /**
+     * The panel as tall as the checkout, up to the screen.
+     *
+     * It was a fixed min(1020px, 100vh - 48px) whatever the page held, so on a
+     * laptop the checkout scrolled inside a frame that stopped short of the
+     * screen's edge. The page now reports its real height and the panel takes
+     * exactly that, capped at the viewport less a 12px margin each side — so
+     * it only scrolls when the checkout genuinely cannot fit.
+     *
+     * Not on a phone, where the panel is a full-height sheet and the media
+     * query owns its size.
+     */
+    let contentHeight = 0;
+    function fitPanel() {
+        if (!contentHeight)
+            return;
+        if (window.matchMedia && window.matchMedia("(max-width:" + SHEET_MAX_WIDTH + "px)").matches) {
+            panel.style.height = "";
+            return;
         }
+        const room = window.innerHeight - 24;
+        panel.style.height = Math.min(Math.ceil(contentHeight), room) + "px";
     }
+    window.addEventListener("resize", fitPanel);
     window.addEventListener("message", onMessage);
     document.addEventListener("keydown", onKey);
     close.addEventListener("click", dismiss);

package/dist/sweep.js

@@ -294,14 +294,14 @@
    * squeezed. Small enough to never be noticed, and it would have grown to 88px
    * wide the moment the panel did.
    */
-  const PANEL_MAX_WIDTH = 820;
+  const PANEL_MAX_WIDTH = 980;
   const SHEET_MAX_WIDTH = PANEL_MAX_WIDTH + 48;
   // The panel pops in like a dialog: it grows from 92% with a slight spring past
   // full size while the backdrop dims and softens. On a phone it is a sheet that
   // slides up from the bottom instead (see the media query).
-  const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
+  const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
   .sweep-modal[data-open=true]{opacity:1}
-  .sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(940px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
+  .sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(1200px,calc(100vh - 24px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
   .sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
   .sweep-modal__frame{display:block;width:100%;height:100%;border:0}
   .sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}
@@ -363,6 +363,7 @@
               return;
           done = true;
           window.removeEventListener("message", onMessage);
+          window.removeEventListener("resize", fitPanel);
           document.removeEventListener("keydown", onKey);
           document.body.style.overflow = prevOverflow;
           root.remove();
@@ -404,8 +405,40 @@
           }
           if (msg.type === "cancelled") {
               dismiss();
+              return;
+          }
+          if (msg.type === "resize") {
+              const h = msg.height;
+              if (typeof h === "number" && isFinite(h) && h > 0) {
+                  contentHeight = h;
+                  fitPanel();
+              }
+          }
+      }
+      /**
+       * The panel as tall as the checkout, up to the screen.
+       *
+       * It was a fixed min(1020px, 100vh - 48px) whatever the page held, so on a
+       * laptop the checkout scrolled inside a frame that stopped short of the
+       * screen's edge. The page now reports its real height and the panel takes
+       * exactly that, capped at the viewport less a 12px margin each side — so
+       * it only scrolls when the checkout genuinely cannot fit.
+       *
+       * Not on a phone, where the panel is a full-height sheet and the media
+       * query owns its size.
+       */
+      let contentHeight = 0;
+      function fitPanel() {
+          if (!contentHeight)
+              return;
+          if (window.matchMedia && window.matchMedia("(max-width:" + SHEET_MAX_WIDTH + "px)").matches) {
+              panel.style.height = "";
+              return;
           }
+          const room = window.innerHeight - 24;
+          panel.style.height = Math.min(Math.ceil(contentHeight), room) + "px";
       }
+      window.addEventListener("resize", fitPanel);
       window.addEventListener("message", onMessage);
       document.addEventListener("keydown", onKey);
       close.addEventListener("click", dismiss);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sweepconsole/js",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Pay-with-USDC button for the browser \u2014 asks your server for a checkout URL and sends the payer there",
   "license": "MIT",
   "type": "module",
@@ -41,9 +41,9 @@
     "url": "git+https://github.com/u4believe/sweep-console.git",
     "directory": "packages/js"
   },
-  "homepage": "https://github.com/u4believe/sweep-console#readme",
+  "homepage": "https://docs.sweepconsole.xyz",
   "bugs": {
-    "url": "https://github.com/u4believe/sweep-console/issues"
+    "url": "mailto:support@sweepconsole.xyz"
   },
   "publishConfig": {
     "access": "public"