@hfunlabs/hypurr-connect 0.1.20 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hfunlabs/hypurr-connect",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "type": "module",
   "packageManager": "pnpm@10.10.0",
   "main": "./dist/index.js",
@@ -21,7 +21,8 @@
     "src"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./dist/index.js"
   ],
   "scripts": {
     "build": "pnpm build:css && tsup",

package/src/HypurrConnectProvider.tsx

@@ -354,6 +354,23 @@ export function HypurrConnectProvider({
     localStorage.removeItem(LEGACY_TELEGRAM_STORAGE_KEY);
   }, []);
 
+  // Eagerly fetch the modal fonts on mount. They're declared via @import in the
+  // injected stylesheet but browsers only fetch a webfont when visible text
+  // first uses it — that lazy fetch makes scores/labels flash the system
+  // fallback and render inconsistently across views. Loading them up front
+  // keeps the bold mono numbers consistent.
+  useEffect(() => {
+    if (typeof document === "undefined" || !document.fonts) return;
+    for (const face of [
+      "500 1em 'Google Sans Code'",
+      "700 1em 'Google Sans Code'",
+      "600 1em Inter",
+      "700 1em Inter",
+    ]) {
+      void document.fonts.load(face).catch(() => {});
+    }
+  }, []);
+
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const token = params.get("token");

package/src/UserProfileModal.tsx

@@ -353,7 +353,7 @@ export function UserProfileModal({
   }, [displayName, onNotify]);
 
   return (
-    <>
+    <div className="hypurr-connect" style={{ display: "contents" }}>
       <AnimatePresence>
         {isOpen && (
           <>
@@ -841,7 +841,7 @@ export function UserProfileModal({
         onNotify={onNotify}
         accentColor={colors.accent}
       />
-    </>
+    </div>
   );
 }
 
@@ -1069,7 +1069,7 @@ function IconBtn({
           ? (hoverBackgroundColor ?? "transparent")
           : "transparent",
         border: "none",
-        color: hovered ? color : profileColors.disabled,
+        color: hovered ? color : profileColors.muted,
         cursor: "pointer",
         display: "flex",
         alignItems: "center",

package/src/WalletSelectorDropdown.tsx

@@ -348,7 +348,7 @@ export function WalletSelectorDropdown({
   };
 
   return (
-    <>
+    <div className="hypurr-connect" style={{ display: "contents" }}>
       <AnimatePresence>
         {isOpen && (
           <motion.div
@@ -659,7 +659,7 @@ export function WalletSelectorDropdown({
         }
         onNotify={onNotify}
       />
-    </>
+    </div>
   );
 }
 

package/src/styles.css

@@ -1 +1 @@
-.hypurr-connect .btn-raised{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgb(var(--btn-ring));color:rgb(var(--btn-fg));transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised:hover:not(:disabled){background-color:rgb(var(--surface-btn-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgb(var(--surface-bd-hover));color:rgb(var(--content-tertiary))}.hypurr-connect .btn-raised-active{background-color:rgb(var(--surface-btn-active));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.05),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgb(var(--surface-bd-active)),0 1px 2px rgba(0,0,0,.5);color:rgb(var(--content))}.hypurr-connect .btn-raised-accent,.hypurr-connect .btn-raised-active{transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised-accent{background-color:rgb(var(--accent-btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.75);color:rgb(var(--accent-btn-fg))}.hypurr-connect .btn-raised-accent:hover:not(:disabled){background-color:rgb(var(--accent-btn-bg-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.8);color:rgb(var(--accent-btn-fg-hover))}.hypurr-connect .btn-raised-disabled{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.02),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.05),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgb(var(--btn-ring)/.6);color:rgb(var(--content-faint));cursor:not-allowed;transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.light .hypurr-connect .btn-raised{background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn)));box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 1px rgba(15,23,42,.04),inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised:hover:not(:disabled){background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn-hover)));box-shadow:0 2px 6px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.06),inset 0 0 0 1px rgb(var(--surface-bd-hover))}.light .hypurr-connect .btn-raised-active{background-image:none;background-color:rgb(var(--surface-btn-active));box-shadow:inset 0 1px 2px rgba(15,23,42,.12),inset 0 0 0 1px rgb(var(--surface-bd-active))}.light .hypurr-connect .btn-raised-disabled{background-image:none;box-shadow:inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised-accent{box-shadow:0 1px 2px rgba(124,58,237,.18),inset 0 0 0 1px rgba(124,58,237,.22)}.light .hypurr-connect .btn-raised-accent:hover:not(:disabled){box-shadow:0 2px 6px rgba(124,58,237,.24),inset 0 0 0 1px rgba(124,58,237,.28)}.hypurr-connect .input{background-color:rgb(var(--input-bg));box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px rgb(var(--input-ring));color:rgb(var(--content));transition:box-shadow .15s,background-color .15s}.hypurr-connect .input::-moz-placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input::placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input:focus,.hypurr-connect .input:focus-within{background-color:rgb(var(--input-bg-focus));box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgb(var(--btn-bevel)/.06),inset 0 0 0 1px rgb(var(--input-ring-focus))}.hypurr-connect .input-error,.hypurr-connect .input-error:focus,.hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px hsla(0,91%,71%,.7)}.light .hypurr-connect .input{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgb(var(--input-ring))}.light .hypurr-connect .input:focus,.light .hypurr-connect .input:focus-within{box-shadow:inset 0 2px 4px rgba(15,23,42,.1),inset 0 0 0 1px rgb(var(--input-ring-focus))}.light .hypurr-connect .input-error,.light .hypurr-connect .input-error:focus,.light .hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgba(220,38,38,.7)}.hypurr-connect .\!visible{visibility:visible!important}.hypurr-connect .visible{visibility:visible}.hypurr-connect .fixed{position:fixed}.hypurr-connect .absolute{position:absolute}.hypurr-connect .relative{position:relative}.hypurr-connect .inset-0{inset:0}.hypurr-connect .right-2{right:.5rem}.hypurr-connect .right-6{right:1.5rem}.hypurr-connect .top-1\/2{top:50%}.hypurr-connect .z-\[100\]{z-index:100}.hypurr-connect .z-\[101\]{z-index:101}.hypurr-connect .z-\[110\]{z-index:110}.hypurr-connect .z-\[111\]{z-index:111}.hypurr-connect .mb-1\.5{margin-bottom:.375rem}.hypurr-connect .mb-2{margin-bottom:.5rem}.hypurr-connect .mt-0\.5{margin-top:.125rem}.hypurr-connect .mt-1{margin-top:.25rem}.hypurr-connect .mt-1\.5{margin-top:.375rem}.hypurr-connect .block{display:block}.hypurr-connect .inline-block{display:inline-block}.hypurr-connect .inline{display:inline}.hypurr-connect .flex{display:flex}.hypurr-connect .inline-flex{display:inline-flex}.hypurr-connect .grid{display:grid}.hypurr-connect .contents{display:contents}.hypurr-connect .hidden{display:none}.hypurr-connect .h-8{height:2rem}.hypurr-connect .w-8{width:2rem}.hypurr-connect .w-full{width:100%}.hypurr-connect .min-w-0{min-width:0}.hypurr-connect .max-w-md{max-width:28rem}.hypurr-connect .flex-1{flex:1 1 0%}.hypurr-connect .flex-shrink-0{flex-shrink:0}.hypurr-connect .-translate-y-1\/2{--tw-translate-y:-50%}.hypurr-connect .-translate-y-1\/2,.hypurr-connect .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hypurr-connect .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hypurr-connect .items-start{align-items:flex-start}.hypurr-connect .items-center{align-items:center}.hypurr-connect .justify-center{justify-content:center}.hypurr-connect .justify-between{justify-content:space-between}.hypurr-connect .gap-1\.5{gap:.375rem}.hypurr-connect .gap-2{gap:.5rem}.hypurr-connect .gap-3{gap:.75rem}.hypurr-connect :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.hypurr-connect .overflow-hidden{overflow:hidden}.hypurr-connect .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hypurr-connect .break-all{word-break:break-all}.hypurr-connect .rounded{border-radius:.25rem}.hypurr-connect .rounded-lg{border-radius:.5rem}.hypurr-connect .rounded-md{border-radius:.375rem}.hypurr-connect .border{border-width:1px}.hypurr-connect .border-b{border-bottom-width:1px}.hypurr-connect .border-amber-500\/25{border-color:rgb(var(--amber-500)/.25)}.hypurr-connect .border-line{--tw-border-opacity:1;border-color:rgb(var(--line)/var(--tw-border-opacity,1))}.hypurr-connect .border-line-strong{--tw-border-opacity:1;border-color:rgb(var(--line-strong)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd{--tw-border-opacity:1;border-color:rgb(var(--surface-bd)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd-active{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-active)/var(--tw-border-opacity,1))}.hypurr-connect .border-trade-down\/20{border-color:rgb(var(--trade-down)/.2)}.hypurr-connect .bg-amber-500\/\[0\.08\]{background-color:rgb(var(--amber-500)/.08)}.hypurr-connect .bg-overlay\/70{background-color:rgb(var(--overlay)/.7)}.hypurr-connect .bg-surface-btn{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-active{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-active)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-modal{--tw-bg-opacity:1;background-color:rgb(var(--surface-modal)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-trade-down\/\[0\.08\]{background-color:rgb(var(--trade-down)/.08)}.hypurr-connect .p-1\.5{padding:.375rem}.hypurr-connect .p-3{padding:.75rem}.hypurr-connect .p-4{padding:1rem}.hypurr-connect .px-2{padding-left:.5rem;padding-right:.5rem}.hypurr-connect .px-3{padding-left:.75rem;padding-right:.75rem}.hypurr-connect .px-6{padding-left:1.5rem;padding-right:1.5rem}.hypurr-connect .py-1{padding-top:.25rem;padding-bottom:.25rem}.hypurr-connect .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.hypurr-connect .py-2{padding-top:.5rem;padding-bottom:.5rem}.hypurr-connect .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.hypurr-connect .py-5{padding-top:1.25rem}.hypurr-connect .pb-5,.hypurr-connect .py-5{padding-bottom:1.25rem}.hypurr-connect .pb-6{padding-bottom:1.5rem}.hypurr-connect .pr-11{padding-right:2.75rem}.hypurr-connect .pt-5{padding-top:1.25rem}.hypurr-connect .pt-6{padding-top:1.5rem}.hypurr-connect .font-mono{font-family:Google Sans Code,Roboto Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hypurr-connect .font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.hypurr-connect .text-base{font-size:12.5px;line-height:1rem}.hypurr-connect .text-lg{font-size:14px;line-height:1.25rem}.hypurr-connect .font-medium{font-weight:500}.hypurr-connect .uppercase{text-transform:uppercase}.hypurr-connect .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.hypurr-connect .tracking-\[0\.1em\]{letter-spacing:.1em}.hypurr-connect .text-amber-200{--tw-text-opacity:1;color:rgb(var(--amber-200)/var(--tw-text-opacity,1))}.hypurr-connect .text-amber-400{--tw-text-opacity:1;color:rgb(var(--amber-400)/var(--tw-text-opacity,1))}.hypurr-connect .text-content{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-faint{--tw-text-opacity:1;color:rgb(var(--content-faint)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-muted{--tw-text-opacity:1;color:rgb(var(--content-muted)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-subtle{--tw-text-opacity:1;color:rgb(var(--content-subtle)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-down{--tw-text-opacity:1;color:rgb(var(--trade-down)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-up{--tw-text-opacity:1;color:rgb(var(--trade-up)/var(--tw-text-opacity,1))}.hypurr-connect .placeholder-content-faint::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .placeholder-content-faint::placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .shadow-modal{--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hypurr-connect .outline{outline-style:solid}.hypurr-connect .blur{--tw-blur:blur(8px)}.hypurr-connect .blur,.hypurr-connect .drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hypurr-connect .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.hypurr-connect .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hypurr-connect .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.hypurr-connect .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--surface-btn:13 18 25;--surface-btn-hover:21 23 26;--surface-btn-active:30 33 36;--surface-bd:38 42 48;--surface-bd-hover:68 69 72;--surface-bd-active:75 77 80;--surface-modal:14 18 24;--surface-dropdown:17 24 32;--surface-base:11 14 17;--surface-deep:9 11 14;--surface-raised:17 24 39;--surface-elevated:31 41 55;--surface-inset:55 65 81;--surface-inverse:255 255 255;--content:243 244 246;--content-secondary:229 231 235;--content-tertiary:209 213 219;--content-muted:170 177 193;--content-subtle:125 133 151;--content-faint:107 114 128;--content-disabled:55 65 81;--line:31 41 55;--line-strong:55 65 81;--line-subtle:17 24 39;--line-inverse:255 255 255;--overlay:0 0 0;--accent:168 85 247;--trade-up:52 211 153;--trade-down:248 113 113;--purple-400:216 180 254;--purple-500:185 125 241;--blue-500:90 153 255;--green-400:83 203 127;--amber-200:253 230 138;--amber-400:251 191 36;--amber-500:245 158 11;--btn-bg:13 18 25;--btn-fg:170 177 193;--btn-ring:38 42 48;--btn-bevel:255 255 255;--accent-btn-bg:37 28 57;--accent-btn-bg-hover:52 35 80;--accent-btn-fg:216 180 254;--accent-btn-fg-hover:233 213 255;--accent-btn-inset:15 5 35;--input-bg:18 23 31;--input-bg-focus:26 33 44;--input-ring:45 53 64;--input-ring-focus:59 69 82;--shadow-modal:0 25px 50px -12px rgba(0,0,0,.6);--shadow-dropdown:0 8px 40px rgba(0,0,0,.85)}.light{--surface-btn:244 246 249;--surface-btn-hover:236 239 243;--surface-btn-active:226 230 236;--surface-bd:214 220 228;--surface-bd-hover:194 201 211;--surface-bd-active:168 176 191;--surface-modal:255 255 255;--surface-dropdown:255 255 255;--surface-base:245 244 249;--surface-deep:233 236 242;--surface-raised:255 255 255;--surface-elevated:228 231 237;--surface-inset:225 229 235;--surface-inverse:17 24 39;--content:17 24 39;--content-secondary:31 41 55;--content-tertiary:55 65 81;--content-muted:91 101 115;--content-subtle:107 114 128;--content-faint:148 163 184;--content-disabled:179 185 196;--line:222 226 234;--line-strong:205 211 220;--line-subtle:238 240 243;--line-inverse:17 24 39;--overlay:0 0 0;--accent:147 51 234;--trade-up:5 150 105;--trade-down:220 38 38;--purple-400:124 58 237;--purple-500:109 40 217;--blue-500:37 99 235;--green-400:22 163 74;--amber-200:161 98 7;--amber-400:180 83 9;--amber-500:180 83 9;--btn-bg:255 255 255;--btn-fg:71 85 105;--btn-ring:217 221 228;--btn-bevel:15 23 42;--accent-btn-bg:243 232 255;--accent-btn-bg-hover:233 213 255;--accent-btn-fg:109 40 217;--accent-btn-fg-hover:88 28 135;--accent-btn-inset:147 51 234;--input-bg:238 240 246;--input-bg-focus:230 232 240;--input-ring:200 206 218;--input-ring-focus:168 175 192;--shadow-modal:0 16px 40px -12px rgba(15,23,42,.24),0 4px 12px -4px rgba(15,23,42,.12);--shadow-dropdown:0 12px 28px -8px rgba(15,23,42,.2),0 2px 8px -2px rgba(15,23,42,.1)}.hypurr-connect .hover\:border-surface-bd-hover:hover{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-hover)/var(--tw-border-opacity,1))}.hypurr-connect .hover\:bg-surface-btn-hover:hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .hover\:text-content:hover{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .hover\:text-content-tertiary:hover{--tw-text-opacity:1;color:rgb(var(--content-tertiary)/var(--tw-text-opacity,1))}.hypurr-connect .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.hypurr-connect .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.hypurr-connect .disabled\:opacity-40:disabled{opacity:.4}.hypurr-connect .disabled\:opacity-50:disabled{opacity:.5}
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Google+Sans+Code:wght@400;500;600;700&display=swap");.hypurr-connect .btn-raised{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgb(var(--btn-ring));color:rgb(var(--btn-fg));transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised:hover:not(:disabled){background-color:rgb(var(--surface-btn-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgb(var(--surface-bd-hover));color:rgb(var(--content-tertiary))}.hypurr-connect .btn-raised-active{background-color:rgb(var(--surface-btn-active));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.05),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgb(var(--surface-bd-active)),0 1px 2px rgba(0,0,0,.5);color:rgb(var(--content))}.hypurr-connect .btn-raised-accent,.hypurr-connect .btn-raised-active{transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised-accent{background-color:rgb(var(--accent-btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.75);color:rgb(var(--accent-btn-fg))}.hypurr-connect .btn-raised-accent:hover:not(:disabled){background-color:rgb(var(--accent-btn-bg-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.8);color:rgb(var(--accent-btn-fg-hover))}.hypurr-connect .btn-raised-disabled{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.02),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.05),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgb(var(--btn-ring)/.6);color:rgb(var(--content-faint));cursor:not-allowed;transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.light .hypurr-connect .btn-raised{background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn)));box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 1px rgba(15,23,42,.04),inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised:hover:not(:disabled){background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn-hover)));box-shadow:0 2px 6px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.06),inset 0 0 0 1px rgb(var(--surface-bd-hover))}.light .hypurr-connect .btn-raised-active{background-image:none;background-color:rgb(var(--surface-btn-active));box-shadow:inset 0 1px 2px rgba(15,23,42,.12),inset 0 0 0 1px rgb(var(--surface-bd-active))}.light .hypurr-connect .btn-raised-disabled{background-image:none;box-shadow:inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised-accent{box-shadow:0 1px 2px rgba(124,58,237,.18),inset 0 0 0 1px rgba(124,58,237,.22)}.light .hypurr-connect .btn-raised-accent:hover:not(:disabled){box-shadow:0 2px 6px rgba(124,58,237,.24),inset 0 0 0 1px rgba(124,58,237,.28)}.hypurr-connect .input{background-color:rgb(var(--input-bg));box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px rgb(var(--input-ring));color:rgb(var(--content));transition:box-shadow .15s,background-color .15s}.hypurr-connect .input::-moz-placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input::placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input:focus,.hypurr-connect .input:focus-within{background-color:rgb(var(--input-bg-focus));box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgb(var(--btn-bevel)/.06),inset 0 0 0 1px rgb(var(--input-ring-focus))}.hypurr-connect .input-error,.hypurr-connect .input-error:focus,.hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px hsla(0,91%,71%,.7)}.light .hypurr-connect .input{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgb(var(--input-ring))}.light .hypurr-connect .input:focus,.light .hypurr-connect .input:focus-within{box-shadow:inset 0 2px 4px rgba(15,23,42,.1),inset 0 0 0 1px rgb(var(--input-ring-focus))}.light .hypurr-connect .input-error,.light .hypurr-connect .input-error:focus,.light .hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgba(220,38,38,.7)}.hypurr-connect .\!visible{visibility:visible!important}.hypurr-connect .visible{visibility:visible}.hypurr-connect .fixed{position:fixed}.hypurr-connect .absolute{position:absolute}.hypurr-connect .relative{position:relative}.hypurr-connect .inset-0{inset:0}.hypurr-connect .right-2{right:.5rem}.hypurr-connect .right-6{right:1.5rem}.hypurr-connect .top-1\/2{top:50%}.hypurr-connect .z-\[100\]{z-index:100}.hypurr-connect .z-\[101\]{z-index:101}.hypurr-connect .z-\[110\]{z-index:110}.hypurr-connect .z-\[111\]{z-index:111}.hypurr-connect .mb-1\.5{margin-bottom:.375rem}.hypurr-connect .mb-2{margin-bottom:.5rem}.hypurr-connect .mt-0\.5{margin-top:.125rem}.hypurr-connect .mt-1{margin-top:.25rem}.hypurr-connect .mt-1\.5{margin-top:.375rem}.hypurr-connect .block{display:block}.hypurr-connect .inline-block{display:inline-block}.hypurr-connect .inline{display:inline}.hypurr-connect .flex{display:flex}.hypurr-connect .inline-flex{display:inline-flex}.hypurr-connect .grid{display:grid}.hypurr-connect .contents{display:contents}.hypurr-connect .hidden{display:none}.hypurr-connect .h-8{height:2rem}.hypurr-connect .w-8{width:2rem}.hypurr-connect .w-full{width:100%}.hypurr-connect .min-w-0{min-width:0}.hypurr-connect .max-w-md{max-width:28rem}.hypurr-connect .flex-1{flex:1 1 0%}.hypurr-connect .flex-shrink-0{flex-shrink:0}.hypurr-connect .-translate-y-1\/2{--tw-translate-y:-50%}.hypurr-connect .-translate-y-1\/2,.hypurr-connect .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hypurr-connect .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hypurr-connect .items-start{align-items:flex-start}.hypurr-connect .items-center{align-items:center}.hypurr-connect .justify-center{justify-content:center}.hypurr-connect .justify-between{justify-content:space-between}.hypurr-connect .gap-1\.5{gap:.375rem}.hypurr-connect .gap-2{gap:.5rem}.hypurr-connect .gap-3{gap:.75rem}.hypurr-connect :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.hypurr-connect .overflow-hidden{overflow:hidden}.hypurr-connect .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hypurr-connect .break-all{word-break:break-all}.hypurr-connect .rounded{border-radius:.25rem}.hypurr-connect .rounded-lg{border-radius:.5rem}.hypurr-connect .rounded-md{border-radius:.375rem}.hypurr-connect .border{border-width:1px}.hypurr-connect .border-b{border-bottom-width:1px}.hypurr-connect .border-amber-500\/25{border-color:rgb(var(--amber-500)/.25)}.hypurr-connect .border-line{--tw-border-opacity:1;border-color:rgb(var(--line)/var(--tw-border-opacity,1))}.hypurr-connect .border-line-strong{--tw-border-opacity:1;border-color:rgb(var(--line-strong)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd{--tw-border-opacity:1;border-color:rgb(var(--surface-bd)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd-active{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-active)/var(--tw-border-opacity,1))}.hypurr-connect .border-trade-down\/20{border-color:rgb(var(--trade-down)/.2)}.hypurr-connect .bg-amber-500\/\[0\.08\]{background-color:rgb(var(--amber-500)/.08)}.hypurr-connect .bg-overlay\/70{background-color:rgb(var(--overlay)/.7)}.hypurr-connect .bg-surface-btn{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-active{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-active)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-modal{--tw-bg-opacity:1;background-color:rgb(var(--surface-modal)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-trade-down\/\[0\.08\]{background-color:rgb(var(--trade-down)/.08)}.hypurr-connect .p-1\.5{padding:.375rem}.hypurr-connect .p-3{padding:.75rem}.hypurr-connect .p-4{padding:1rem}.hypurr-connect .px-2{padding-left:.5rem;padding-right:.5rem}.hypurr-connect .px-3{padding-left:.75rem;padding-right:.75rem}.hypurr-connect .px-6{padding-left:1.5rem;padding-right:1.5rem}.hypurr-connect .py-1{padding-top:.25rem;padding-bottom:.25rem}.hypurr-connect .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.hypurr-connect .py-2{padding-top:.5rem;padding-bottom:.5rem}.hypurr-connect .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.hypurr-connect .py-5{padding-top:1.25rem}.hypurr-connect .pb-5,.hypurr-connect .py-5{padding-bottom:1.25rem}.hypurr-connect .pb-6{padding-bottom:1.5rem}.hypurr-connect .pr-11{padding-right:2.75rem}.hypurr-connect .pt-5{padding-top:1.25rem}.hypurr-connect .pt-6{padding-top:1.5rem}.hypurr-connect .font-mono{font-family:Google Sans Code,Roboto Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hypurr-connect .font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.hypurr-connect .text-base{font-size:12.5px;line-height:1rem}.hypurr-connect .text-lg{font-size:14px;line-height:1.25rem}.hypurr-connect .font-medium{font-weight:500}.hypurr-connect .uppercase{text-transform:uppercase}.hypurr-connect .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.hypurr-connect .tracking-\[0\.1em\]{letter-spacing:.1em}.hypurr-connect .text-amber-200{--tw-text-opacity:1;color:rgb(var(--amber-200)/var(--tw-text-opacity,1))}.hypurr-connect .text-amber-400{--tw-text-opacity:1;color:rgb(var(--amber-400)/var(--tw-text-opacity,1))}.hypurr-connect .text-content{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-faint{--tw-text-opacity:1;color:rgb(var(--content-faint)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-muted{--tw-text-opacity:1;color:rgb(var(--content-muted)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-subtle{--tw-text-opacity:1;color:rgb(var(--content-subtle)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-down{--tw-text-opacity:1;color:rgb(var(--trade-down)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-up{--tw-text-opacity:1;color:rgb(var(--trade-up)/var(--tw-text-opacity,1))}.hypurr-connect .placeholder-content-faint::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .placeholder-content-faint::placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .shadow-modal{--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hypurr-connect .outline{outline-style:solid}.hypurr-connect .blur{--tw-blur:blur(8px)}.hypurr-connect .blur,.hypurr-connect .drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hypurr-connect .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.hypurr-connect .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hypurr-connect .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.hypurr-connect .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root{--surface-btn:13 18 25;--surface-btn-hover:21 23 26;--surface-btn-active:30 33 36;--surface-bd:38 42 48;--surface-bd-hover:68 69 72;--surface-bd-active:75 77 80;--surface-modal:14 18 24;--surface-dropdown:17 24 32;--surface-base:11 14 17;--surface-deep:9 11 14;--surface-raised:17 24 39;--surface-elevated:31 41 55;--surface-inset:55 65 81;--surface-inverse:255 255 255;--content:243 244 246;--content-secondary:229 231 235;--content-tertiary:209 213 219;--content-muted:170 177 193;--content-subtle:125 133 151;--content-faint:107 114 128;--content-disabled:55 65 81;--line:31 41 55;--line-strong:55 65 81;--line-subtle:17 24 39;--line-inverse:255 255 255;--overlay:0 0 0;--accent:168 85 247;--trade-up:52 211 153;--trade-down:248 113 113;--purple-400:216 180 254;--purple-500:185 125 241;--blue-500:90 153 255;--green-400:83 203 127;--amber-200:253 230 138;--amber-400:251 191 36;--amber-500:245 158 11;--btn-bg:13 18 25;--btn-fg:170 177 193;--btn-ring:38 42 48;--btn-bevel:255 255 255;--accent-btn-bg:37 28 57;--accent-btn-bg-hover:52 35 80;--accent-btn-fg:216 180 254;--accent-btn-fg-hover:233 213 255;--accent-btn-inset:15 5 35;--input-bg:18 23 31;--input-bg-focus:26 33 44;--input-ring:45 53 64;--input-ring-focus:59 69 82;--shadow-modal:0 25px 50px -12px rgba(0,0,0,.6);--shadow-dropdown:0 8px 40px rgba(0,0,0,.85)}.light{--surface-btn:244 246 249;--surface-btn-hover:236 239 243;--surface-btn-active:226 230 236;--surface-bd:214 220 228;--surface-bd-hover:194 201 211;--surface-bd-active:168 176 191;--surface-modal:255 255 255;--surface-dropdown:255 255 255;--surface-base:245 244 249;--surface-deep:233 236 242;--surface-raised:255 255 255;--surface-elevated:228 231 237;--surface-inset:225 229 235;--surface-inverse:17 24 39;--content:17 24 39;--content-secondary:31 41 55;--content-tertiary:55 65 81;--content-muted:91 101 115;--content-subtle:107 114 128;--content-faint:148 163 184;--content-disabled:179 185 196;--line:222 226 234;--line-strong:205 211 220;--line-subtle:238 240 243;--line-inverse:17 24 39;--overlay:0 0 0;--accent:147 51 234;--trade-up:5 150 105;--trade-down:220 38 38;--purple-400:124 58 237;--purple-500:109 40 217;--blue-500:37 99 235;--green-400:22 163 74;--amber-200:161 98 7;--amber-400:180 83 9;--amber-500:180 83 9;--btn-bg:255 255 255;--btn-fg:71 85 105;--btn-ring:217 221 228;--btn-bevel:15 23 42;--accent-btn-bg:243 232 255;--accent-btn-bg-hover:233 213 255;--accent-btn-fg:109 40 217;--accent-btn-fg-hover:88 28 135;--accent-btn-inset:147 51 234;--input-bg:238 240 246;--input-bg-focus:230 232 240;--input-ring:200 206 218;--input-ring-focus:168 175 192;--shadow-modal:0 16px 40px -12px rgba(15,23,42,.24),0 4px 12px -4px rgba(15,23,42,.12);--shadow-dropdown:0 12px 28px -8px rgba(15,23,42,.2),0 2px 8px -2px rgba(15,23,42,.1)}.hypurr-connect .hover\:border-surface-bd-hover:hover{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-hover)/var(--tw-border-opacity,1))}.hypurr-connect .hover\:bg-surface-btn-hover:hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .hover\:text-content:hover{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .hover\:text-content-tertiary:hover{--tw-text-opacity:1;color:rgb(var(--content-tertiary)/var(--tw-text-opacity,1))}.hypurr-connect .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.hypurr-connect .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.hypurr-connect .disabled\:opacity-40:disabled{opacity:.4}.hypurr-connect .disabled\:opacity-50:disabled{opacity:.5}

package/src/tailwind.css

@@ -1,6 +1,19 @@
+/* Fonts the modals reference (sans: Inter, mono: Google Sans Code) so the
+   package is self-contained and doesn't rely on the host loading them. */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Google+Sans+Code:wght@400;500;600;700&display=swap");
+
 @tailwind components;
 @tailwind utilities;
 
+/* Render the modals with the platform-default (subpixel) smoothing instead of
+   inheriting a host's `-webkit-font-smoothing: antialiased`, which renders text
+   thinner on macOS and makes the bold scores/numbers look lighter than intended.
+   Scoped to `.hypurr-connect` (the modal wrapper) and inherited by its subtree. */
+.hypurr-connect {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
 /* ============================================================================
    Theme tokens. Values are space-separated RGB channels so Tailwind opacity
    modifiers (e.g. bg-surface-modal/70) work. `:root` is the default (dark)