@le-space/ui 0.6.41 → 0.6.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.6.41",
+  "version": "0.6.43",
   "description": "Floating Aleph Relay Button UI components for Svelte and React.",
   "license": "MIT",
   "type": "module",
@@ -44,8 +44,8 @@
     "url": "https://github.com/NiKrause/relay-button/issues"
   },
   "dependencies": {
-    "@le-space/browser": "0.6.41",
-    "@le-space/core": "0.6.41",
+    "@le-space/browser": "0.6.43",
+    "@le-space/core": "0.6.43",
     "viem": "^2.53.1"
   },
   "peerDependencies": {

package/react/index.js

@@ -43,7 +43,7 @@ var RECENT_INSTANCE_RUNTIME_GRACE_MS = 10 * 60 * 1e3;
 var DEPLOYMENT_PENDING_WARNING_MS = 3 * 60 * 1e3;
 
 // src/shared/package-version.ts
-var UI_PACKAGE_VERSION = "0.6.41";
+var UI_PACKAGE_VERSION = "0.6.43";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -6222,6 +6222,57 @@ function useSponsorRelayController(props) {
 
 // src/react/SponsorRelayFab.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var THEME_CSS = `
+:root {
+  --rb-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rb-font-heading: var(--rb-font-body);
+  --rb-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Noto Sans Mono", Menlo, monospace;
+  --rb-border: #232b3d;
+  --rb-text: #edf1f8;
+  --rb-muted: #a8b3c7;
+  --rb-comet: #6b7690;
+  --rb-coral: #ff6b5b;
+  --rb-cyan: #58c7f3;
+  --rb-success: #3edc97;
+  --rb-warning: #ffc24b;
+  --rb-danger: #ff4d6a;
+  --rb-panel-bg: rgba(20, 25, 38, 0.97);
+  --rb-panel-shadow: 0 28px 80px rgba(4, 6, 12, 0.55);
+  --rb-surface: rgba(11, 14, 21, 0.55);
+  --rb-field-bg: rgba(11, 14, 21, 0.85);
+  --rb-accent: var(--rb-coral);
+  --rb-accent-contrast: #0b0e15;
+  --rb-link: var(--rb-cyan);
+  --rb-launcher-start: #10151f;
+  --rb-launcher-end: #0b0e15;
+  --rb-launcher-text: #edf1f8;
+  --rb-launcher-badge-bg: rgba(20, 25, 38, 0.92);
+  --rb-backdrop-accent: rgba(255, 107, 91, 0.14);
+}
+[data-theme="light"],
+[data-relay-theme="light"] {
+  --rb-border: #d9e0ec;
+  --rb-text: #141b2e;
+  --rb-muted: #4d5a74;
+  --rb-comet: #6b7690;
+  --rb-coral: #e8503f;
+  --rb-cyan: #0e86c4;
+  --rb-success: #0f9d6a;
+  --rb-warning: #a8690a;
+  --rb-danger: #d5365a;
+  --rb-panel-bg: rgba(255, 255, 255, 0.98);
+  --rb-panel-shadow: 0 28px 80px rgba(20, 27, 46, 0.18);
+  --rb-surface: rgba(20, 27, 46, 0.04);
+  --rb-field-bg: #ffffff;
+  --rb-accent-contrast: #ffffff;
+  --rb-launcher-start: #ffffff;
+  --rb-launcher-end: #f2f5fa;
+  --rb-launcher-text: #141b2e;
+  --rb-launcher-badge-bg: rgba(20, 27, 46, 0.05);
+  --rb-backdrop-accent: rgba(232, 80, 63, 0.1);
+}
+@keyframes leSpaceRelayPulse { 0%, 100% { transform: scale(1); opacity: 0.74; } 50% { transform: scale(1.22); opacity: 1; } }
+`;
 var basePanelStyle = {
   position: "fixed",
   zIndex: 9999,
@@ -6233,52 +6284,54 @@ var basePanelStyle = {
   overflowY: "auto",
   overflowWrap: "anywhere",
   wordBreak: "break-word",
-  border: "1px solid var(--le-space-sponsor-relay-panel-border, rgba(199, 210, 254, 0.22))",
-  borderRadius: "1.4rem",
-  background: "var(--le-space-sponsor-relay-panel-bg, rgba(49, 46, 129, 0.94))",
-  color: "#f8fafc",
-  boxShadow: "var(--le-space-sponsor-relay-panel-shadow, 0 28px 80px rgba(49, 46, 129, 0.34))",
+  border: "1px solid var(--le-space-sponsor-relay-panel-border, var(--rb-border))",
+  borderRadius: "0.625rem",
+  background: "var(--le-space-sponsor-relay-panel-bg, var(--rb-panel-bg))",
+  color: "var(--rb-text)",
+  boxShadow: "var(--le-space-sponsor-relay-panel-shadow, var(--rb-panel-shadow))",
   padding: "1rem",
-  fontFamily: '"DM Sans", "Inter", sans-serif'
+  fontFamily: "var(--rb-font-body)",
+  fontSize: "0.8125rem",
+  lineHeight: 1.5
 };
 var fieldStyle = {
   width: "100%",
   minWidth: 0,
   boxSizing: "border-box",
-  borderRadius: "0.8rem",
-  border: "1px solid rgba(255,255,255,0.16)",
-  background: "rgba(248,250,252,0.98)",
-  color: "#111827",
-  padding: "0.7rem 0.85rem",
-  fontFamily: '"DM Sans", "Inter", sans-serif',
-  fontSize: "0.98rem",
-  lineHeight: 1.45
+  borderRadius: "0.5rem",
+  border: "1px solid var(--rb-border)",
+  background: "var(--rb-field-bg)",
+  color: "var(--rb-text)",
+  padding: "0.65rem 0.8rem",
+  fontFamily: "var(--rb-font-body)",
+  fontSize: "0.8125rem",
+  lineHeight: 1.4
 };
 var secondaryButtonStyle = {
-  borderRadius: "0.95rem",
-  border: "1px solid rgba(255,255,255,0.22)",
-  background: "rgba(255,255,255,0.10)",
-  color: "#f8fafc",
-  padding: "0.72rem 0.95rem",
-  fontFamily: '"DM Sans", "Inter", sans-serif',
-  fontSize: "0.92rem",
-  fontWeight: 700,
+  borderRadius: "0.5rem",
+  border: "1px solid var(--rb-border)",
+  background: "var(--rb-surface)",
+  color: "var(--rb-text)",
+  padding: "0.65rem 0.9rem",
+  fontFamily: "var(--rb-font-body)",
+  fontSize: "0.8125rem",
+  fontWeight: 600,
   lineHeight: 1.1,
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
-  backdropFilter: "blur(8px)"
+  cursor: "pointer"
 };
 var primaryButtonStyle = {
   boxSizing: "border-box",
-  borderRadius: "0.95rem",
-  border: "1px solid rgba(251, 191, 36, 0.42)",
-  background: "linear-gradient(135deg, #f6c453 0%, #f59e0b 100%)",
-  color: "#281606",
-  padding: "0.82rem 1rem",
-  fontFamily: '"DM Sans", "Inter", sans-serif',
-  fontSize: "0.96rem",
-  fontWeight: 800,
+  borderRadius: "0.5rem",
+  border: "1px solid transparent",
+  background: "var(--rb-accent)",
+  color: "var(--rb-accent-contrast)",
+  padding: "0.78rem 1rem",
+  fontFamily: "var(--rb-font-body)",
+  fontSize: "0.875rem",
+  fontWeight: 700,
   lineHeight: 1.1,
-  boxShadow: "0 10px 24px rgba(245, 158, 11, 0.24)"
+  cursor: "pointer",
+  boxShadow: "0 10px 24px rgba(255, 107, 91, 0.22)"
 };
 var containedContentStyle = {
   minWidth: 0,
@@ -6289,42 +6342,43 @@ var containedContentStyle = {
   whiteSpace: "normal"
 };
 var dangerButtonStyle = {
-  borderRadius: "0.95rem",
-  border: "1px solid rgba(248, 113, 113, 0.45)",
-  background: "rgba(239, 68, 68, 0.18)",
-  color: "#ffe2e2",
-  padding: "0.72rem 0.95rem",
-  fontFamily: '"DM Sans", "Inter", sans-serif',
-  fontSize: "0.9rem",
-  fontWeight: 700,
-  lineHeight: 1.1
+  borderRadius: "0.5rem",
+  border: "1px solid rgba(255, 77, 106, 0.45)",
+  background: "transparent",
+  color: "var(--rb-danger)",
+  padding: "0.65rem 0.9rem",
+  fontFamily: "var(--rb-font-body)",
+  fontSize: "0.8125rem",
+  fontWeight: 600,
+  lineHeight: 1.1,
+  cursor: "pointer"
 };
 var warningButtonStyle = {
-  borderRadius: "0.95rem",
-  border: "1px solid rgba(251, 146, 60, 0.4)",
-  background: "rgba(251, 146, 60, 0.16)",
-  color: "#fed7aa",
-  padding: "0.72rem 0.95rem",
-  fontFamily: '"DM Sans", "Inter", sans-serif',
-  fontSize: "0.9rem",
-  fontWeight: 700,
-  lineHeight: 1.1
+  borderRadius: "0.5rem",
+  border: "1px solid rgba(255, 194, 75, 0.45)",
+  background: "transparent",
+  color: "var(--rb-warning)",
+  padding: "0.65rem 0.9rem",
+  fontFamily: "var(--rb-font-body)",
+  fontSize: "0.8125rem",
+  fontWeight: 600,
+  lineHeight: 1.1,
+  cursor: "pointer"
 };
-var themedLauncherBackground = "linear-gradient(135deg, var(--le-space-sponsor-relay-launcher-start, #4f46e5) 0%, var(--le-space-sponsor-relay-launcher-end, #6366f1) 100%)";
-var themedLauncherBorder = "var(--le-space-sponsor-relay-launcher-border, rgba(199, 210, 254, 0.42))";
-var themedLauncherBadgeBackground = "var(--le-space-sponsor-relay-launcher-badge-bg, rgba(49, 46, 129, 0.92))";
-var themedLauncherBadgeBorder = "var(--le-space-sponsor-relay-launcher-badge-border, rgba(191, 219, 254, 0.24))";
-var themedLauncherDot = "var(--le-space-sponsor-relay-launcher-dot, #f59e0b)";
+var themedLauncherBackground = "linear-gradient(135deg, var(--le-space-sponsor-relay-launcher-start, var(--rb-launcher-start)) 0%, var(--le-space-sponsor-relay-launcher-end, var(--rb-launcher-end)) 100%)";
+var themedLauncherBorder = "var(--le-space-sponsor-relay-launcher-border, var(--rb-border))";
+var themedLauncherBadgeBackground = "var(--le-space-sponsor-relay-launcher-badge-bg, var(--rb-launcher-badge-bg))";
+var themedLauncherBadgeBorder = "var(--le-space-sponsor-relay-launcher-badge-border, var(--rb-border))";
 function progressToneColor(status) {
   switch (status) {
     case "success":
-      return "#37d67a";
+      return "#3edc97";
     case "warning":
-      return "#ffc83f";
+      return "#ffc24b";
     case "error":
-      return "#e91315";
+      return "#ff4d6a";
     default:
-      return "#0176ce";
+      return "#58c7f3";
   }
 }
 function progressBadgeLabel(stage) {
@@ -6548,7 +6602,7 @@ function SponsorRelayFab(props) {
   const deploymentProgressVisible = isDeploymentProgressVisible(state);
   const pollingState = pollingIndicator(state);
   const pulseScale = progressActive ? 1.03 : hovered ? 1.015 : 1;
-  const pulseShadow = progressActive ? `0 0 0 4px ${progressToneColor(indicator.tone)}22, 0 12px 28px rgba(15, 23, 42, 0.22)` : successFlash ? `0 0 0 5px rgba(55, 214, 122, 0.22), 0 14px 32px rgba(55, 214, 122, 0.22)` : launcherMode === "inline" ? hovered ? "var(--le-space-sponsor-relay-launcher-hover-shadow, 0 14px 30px rgba(79, 70, 229, 0.28))" : "var(--le-space-sponsor-relay-launcher-shadow, 0 10px 24px rgba(99, 102, 241, 0.22))" : void 0;
+  const pulseShadow = progressActive ? `0 0 0 4px ${progressToneColor(indicator.tone)}22, 0 12px 28px rgba(15, 23, 42, 0.22)` : successFlash ? `0 0 0 5px rgba(55, 214, 122, 0.22), 0 14px 32px rgba(55, 214, 122, 0.22)` : launcherMode === "inline" ? hovered ? "var(--le-space-sponsor-relay-launcher-hover-shadow, 0 14px 30px rgba(4, 6, 12, 0.5))" : "var(--le-space-sponsor-relay-launcher-shadow, 0 10px 24px rgba(4, 6, 12, 0.4))" : void 0;
   const inlineButtonBackground = themedLauncherBackground;
   const inlineButtonBorder = `1px solid ${themedLauncherBorder}`;
   const inlineBadgeBackground = themedLauncherBadgeBackground;
@@ -6569,7 +6623,7 @@ function SponsorRelayFab(props) {
   const rootfsBlocked = state.rootfsHealth.tone === "error";
   const deployCallToAction = state.wallet.connected ? state.busy.deploying ? "Deploying\u2026" : rootfsBlocked ? "Deployment blocked \u2014 Rootfs unavailable" : deploymentButtonLabel(state) : "Connect MetaMask";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: `@keyframes leSpaceRelayPulse { 0%, 100% { transform: scale(1); opacity: 0.74; } 50% { transform: scale(1.22); opacity: 1; } }` }),
+    /* @__PURE__ */ jsx("style", { children: THEME_CSS }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -6587,14 +6641,14 @@ function SponsorRelayFab(props) {
           bottom: launcherMode === "floating" ? "5.8rem" : void 0,
           zIndex: launcherMode === "floating" ? 1e4 : "auto",
           borderRadius: "999px",
-          border: launcherMode === "floating" ? `2px solid ${themedLauncherBorder}` : inlineButtonBorder,
+          border: launcherMode === "floating" ? `1px solid ${themedLauncherBorder}` : inlineButtonBorder,
           background: launcherMode === "floating" ? themedLauncherBackground : inlineButtonBackground,
-          color: "white",
+          color: "var(--rb-launcher-text)",
           minHeight: launcherMode === "floating" ? void 0 : "2.25rem",
-          padding: launcherMode === "floating" ? "0.9rem 1.2rem" : "0.42rem 0.56rem 0.42rem 0.76rem",
-          fontFamily: '"Epilogue", sans-serif',
+          padding: launcherMode === "floating" ? "0.8rem 1.15rem" : "0.42rem 0.56rem 0.42rem 0.76rem",
+          fontFamily: "var(--rb-font-mono)",
           fontWeight: 700,
-          fontSize: launcherMode === "floating" ? "0.84rem" : "0.73rem",
+          fontSize: launcherMode === "floating" ? "0.78rem" : "0.7rem",
           textTransform: "uppercase",
           letterSpacing: "0.08em",
           cursor: "pointer",
@@ -6616,17 +6670,42 @@ function SponsorRelayFab(props) {
                 gap: "0.36rem"
               },
               children: [
-                /* @__PURE__ */ jsx(
-                  "span",
+                /* @__PURE__ */ jsxs(
+                  "svg",
                   {
                     "aria-hidden": "true",
+                    viewBox: "0 0 32 32",
                     style: {
-                      width: launcherMode === "floating" ? "0.5rem" : "0.42rem",
-                      height: launcherMode === "floating" ? "0.5rem" : "0.42rem",
-                      borderRadius: "999px",
-                      background: launcherMode === "floating" ? "rgba(255,255,255,0.96)" : themedLauncherDot,
-                      boxShadow: launcherMode === "floating" ? "0 0 0 3px rgba(255,255,255,0.22)" : "0 0 0 3px var(--le-space-sponsor-relay-launcher-dot-ring, rgba(245, 158, 11, 0.18))"
-                    }
+                      width: launcherMode === "floating" ? "1.1rem" : "0.95rem",
+                      height: launcherMode === "floating" ? "1.1rem" : "0.95rem",
+                      flex: "none"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "line",
+                        {
+                          x1: "17",
+                          y1: "15.4",
+                          x2: "19.6",
+                          y2: "13",
+                          stroke: "var(--rb-cyan)",
+                          strokeWidth: 2.4,
+                          strokeLinecap: "round"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("circle", { cx: "11.5", cy: "20.5", r: "7", fill: "var(--rb-coral)" }),
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "23.5",
+                          cy: "9.5",
+                          r: "4.2",
+                          fill: "none",
+                          stroke: "var(--rb-cyan)",
+                          strokeWidth: 2.8
+                        }
+                      )
+                    ]
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { children: launcherLabel })
@@ -6643,8 +6722,8 @@ function SponsorRelayFab(props) {
                 padding: launcherMode === "floating" ? "0.2rem 0.42rem" : "0.21rem 0.5rem",
                 minWidth: launcherMode === "floating" ? void 0 : "3.8rem",
                 borderRadius: "999px",
-                background: launcherMode === "floating" ? "rgba(15, 23, 42, 0.18)" : inlineBadgeBackground,
-                border: launcherMode === "floating" ? "1px solid rgba(255,255,255,0.18)" : inlineBadgeBorder,
+                background: launcherMode === "floating" ? "var(--rb-launcher-badge-bg)" : inlineBadgeBackground,
+                border: launcherMode === "floating" ? "1px solid var(--rb-border)" : inlineBadgeBorder,
                 fontSize: launcherMode === "floating" ? "0.62rem" : "0.61rem",
                 fontWeight: launcherMode === "floating" ? 700 : 800,
                 lineHeight: 1,
@@ -6685,7 +6764,7 @@ function SponsorRelayFab(props) {
             position: "fixed",
             inset: 0,
             zIndex: 9998,
-            background: "radial-gradient(circle at 88% 82%, var(--le-space-sponsor-relay-backdrop-accent, rgba(79, 70, 229, 0.2)), transparent 34%)"
+            background: "radial-gradient(circle at 88% 82%, var(--le-space-sponsor-relay-backdrop-accent, var(--rb-backdrop-accent)), transparent 34%)"
           }
         }
       ),
@@ -6708,8 +6787,10 @@ function SponsorRelayFab(props) {
                       display: "flex",
                       alignItems: "center",
                       gap: "0.45rem",
-                      color: "#9fb2ca",
-                      fontSize: "0.72rem",
+                      color: "var(--rb-accent)",
+                      fontFamily: "var(--rb-font-mono)",
+                      fontWeight: 700,
+                      fontSize: "0.6563rem",
                       textTransform: "uppercase",
                       letterSpacing: "0.08em"
                     },
@@ -6719,10 +6800,11 @@ function SponsorRelayFab(props) {
                         "span",
                         {
                           style: {
-                            fontSize: "0.62rem",
+                            fontWeight: 400,
+                            fontSize: "0.625rem",
                             letterSpacing: "0.04em",
                             textTransform: "none",
-                            color: "rgba(191, 219, 254, 0.82)"
+                            color: "var(--rb-comet)"
                           },
                           children: versionLabel
                         }
@@ -6735,7 +6817,9 @@ function SponsorRelayFab(props) {
                   {
                     style: {
                       margin: "0.2rem 0 0",
-                      fontFamily: '"Epilogue", sans-serif'
+                      fontFamily: "var(--rb-font-heading)",
+                      fontSize: "1.125rem",
+                      fontWeight: 700
                     },
                     children: deploymentPanelTitle(state)
                   }
@@ -6753,8 +6837,8 @@ function SponsorRelayFab(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx("p", { style: { color: "#9fb2ca" }, children: state.statusText }),
-        state.errorText ? /* @__PURE__ */ jsx("p", { style: { color: "#ffd9d9" }, children: state.errorText }) : null,
+        /* @__PURE__ */ jsx("p", { style: { color: "var(--rb-muted)" }, children: state.statusText }),
+        state.errorText ? /* @__PURE__ */ jsx("p", { style: { color: "var(--rb-danger)" }, children: state.errorText }) : null,
         pollingState ? /* @__PURE__ */ jsxs(
           "div",
           {
@@ -6764,8 +6848,8 @@ function SponsorRelayFab(props) {
               marginBottom: "0.8rem",
               padding: "0.7rem 0.8rem",
               borderRadius: "1rem",
-              border: "1px solid rgba(125, 211, 252, 0.18)",
-              background: "linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05))",
+              border: "1px solid rgba(88, 199, 243, 0.22)",
+              background: "rgba(88, 199, 243, 0.08)",
               display: "grid",
               gap: "0.28rem"
             },
@@ -6797,7 +6881,7 @@ function SponsorRelayFab(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("small", { style: { color: "#9fb2ca", lineHeight: 1.35 }, children: pollingState.detail })
+              /* @__PURE__ */ jsx("small", { style: { color: "var(--rb-muted)", lineHeight: 1.35 }, children: pollingState.detail })
             ]
           }
         ) : null,
@@ -6808,9 +6892,8 @@ function SponsorRelayFab(props) {
               marginTop: "0.85rem",
               padding: "0.75rem 0.8rem",
               borderRadius: "1rem",
-              border: "1px solid rgba(255,255,255,0.1)",
-              background: "linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03))",
-              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)"
+              border: "1px solid var(--rb-border)",
+              background: "var(--rb-surface)"
             },
             children: [
               /* @__PURE__ */ jsxs(
@@ -6876,8 +6959,8 @@ function SponsorRelayFab(props) {
                       {
                         style: {
                           fontSize: "0.72rem",
-                          color: "#9fb2ca",
-                          fontFamily: '"DM Mono", monospace'
+                          color: "var(--rb-muted)",
+                          fontFamily: "var(--rb-font-mono)"
                         },
                         children: [
                           String(
@@ -6898,7 +6981,7 @@ function SponsorRelayFab(props) {
                     width: "100%",
                     height: "0.34rem",
                     borderRadius: "999px",
-                    background: "rgba(255,255,255,0.08)",
+                    background: "rgba(168, 179, 199, 0.18)",
                     overflow: "hidden"
                   },
                   children: /* @__PURE__ */ jsx(
@@ -6930,9 +7013,9 @@ function SponsorRelayFab(props) {
                       "div",
                       {
                         style: {
-                          color: "#9fb2ca",
+                          color: "var(--rb-muted)",
                           fontSize: "0.7rem",
-                          fontFamily: '"DM Mono", monospace',
+                          fontFamily: "var(--rb-font-mono)",
                           whiteSpace: "nowrap",
                           overflow: "hidden",
                           textOverflow: "ellipsis"
@@ -6947,10 +7030,10 @@ function SponsorRelayFab(props) {
                       "div",
                       {
                         style: {
-                          color: "#9fb2ca",
+                          color: "var(--rb-muted)",
                           fontSize: "0.72rem",
                           lineHeight: 1.3,
-                          fontFamily: state.deploymentProgress.detail.includes("0x") || state.deploymentProgress.detail.includes("Qm") ? '"DM Mono", monospace' : void 0
+                          fontFamily: state.deploymentProgress.detail.includes("0x") || state.deploymentProgress.detail.includes("Qm") ? "var(--rb-font-mono)" : void 0
                         },
                         children: state.deploymentProgress.detail
                       }
@@ -6959,7 +7042,7 @@ function SponsorRelayFab(props) {
                       "div",
                       {
                         style: {
-                          color: "#ffd9d9",
+                          color: "var(--rb-danger)",
                           fontSize: "0.72rem",
                           lineHeight: 1.3
                         },
@@ -7005,7 +7088,7 @@ function SponsorRelayFab(props) {
                 "div",
                 {
                   style: {
-                    color: "#9fb2ca",
+                    color: "var(--rb-muted)",
                     fontSize: "0.74rem",
                     lineHeight: 1.35,
                     marginTop: "-0.15rem"
@@ -7212,7 +7295,7 @@ function SponsorRelayFab(props) {
                                     "div",
                                     {
                                       style: {
-                                        color: "#9fb2ca",
+                                        color: "var(--rb-muted)",
                                         fontSize: "0.74rem",
                                         lineHeight: 1.35,
                                         marginTop: "-0.15rem"
@@ -7263,9 +7346,9 @@ function SponsorRelayFab(props) {
               marginTop: "1rem",
               padding: "0.9rem",
               borderRadius: "1rem",
-              border: "1px solid rgba(248, 113, 113, 0.58)",
-              background: "rgba(127, 29, 29, 0.34)",
-              color: "#fee2e2"
+              border: "1px solid rgba(255, 77, 106, 0.5)",
+              background: "rgba(255, 77, 106, 0.1)",
+              color: "var(--rb-text)"
             },
             children: [
               /* @__PURE__ */ jsx("strong", { children: "Rootfs unavailable \u2014 deployment blocked" }),
@@ -7283,7 +7366,7 @@ function SponsorRelayFab(props) {
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
                 /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void controller.refresh(), disabled: state.busy.refreshing, style: { ...secondaryButtonStyle, padding: "0.55rem 0.7rem" }, children: state.busy.refreshing ? "Checking\u2026" : "Retry validation" }),
                 /* @__PURE__ */ jsx("button", { type: "button", onClick: () => controller.setShowAdvanced(true), style: { ...secondaryButtonStyle, padding: "0.55rem 0.7rem" }, children: "Edit manifest URL" }),
-                /^https?:\/\//.test(state.manifestUrl) ? /* @__PURE__ */ jsx("a", { href: state.manifestUrl, target: "_blank", rel: "noreferrer", style: { color: "#bfdbfe", alignSelf: "center", fontSize: "0.78rem" }, children: "Open manifest" }) : null
+                /^https?:\/\//.test(state.manifestUrl) ? /* @__PURE__ */ jsx("a", { href: state.manifestUrl, target: "_blank", rel: "noreferrer", style: { color: "var(--rb-link)", alignSelf: "center", fontSize: "0.78rem" }, children: "Open manifest" }) : null
               ] })
             ]
           }
@@ -7299,7 +7382,7 @@ function SponsorRelayFab(props) {
               ...primaryButtonStyle,
               width: "100%",
               marginTop: "1rem",
-              ...rootfsBlocked ? { background: "rgba(148, 163, 184, 0.22)", borderColor: "rgba(248, 113, 113, 0.45)", color: "#fee2e2", boxShadow: "none", cursor: "not-allowed" } : {}
+              ...rootfsBlocked ? { background: "var(--rb-surface)", borderColor: "rgba(255, 77, 106, 0.45)", color: "var(--rb-text)", boxShadow: "none", cursor: "not-allowed" } : {}
             },
             children: deployCallToAction
           }
@@ -7348,8 +7431,8 @@ function SponsorRelayFab(props) {
                                   gap: "0.32rem",
                                   padding: "0.16rem 0.45rem",
                                   borderRadius: "999px",
-                                  background: "rgba(34, 197, 94, 0.16)",
-                                  color: "#86efac",
+                                  background: "rgba(62, 220, 151, 0.14)",
+                                  color: "var(--rb-success)",
                                   fontSize: "0.7rem",
                                   fontWeight: 700
                                 },
@@ -7362,8 +7445,8 @@ function SponsorRelayFab(props) {
                                         width: "0.45rem",
                                         height: "0.45rem",
                                         borderRadius: "999px",
-                                        background: "#22c55e",
-                                        boxShadow: "0 0 0 3px rgba(34, 197, 94, 0.18)"
+                                        background: "var(--rb-success)",
+                                        boxShadow: "0 0 0 3px rgba(62, 220, 151, 0.18)"
                                       }
                                     }
                                   ),
@@ -7452,13 +7535,13 @@ function SponsorRelayFab(props) {
                     gap: "0.7rem",
                     padding: "0.85rem",
                     borderRadius: "1rem",
-                    border: "1px solid rgba(248, 113, 113, 0.22)",
-                    background: "linear-gradient(180deg, rgba(127, 29, 29, 0.18), rgba(69, 10, 10, 0.12))"
+                    border: "1px solid rgba(255, 77, 106, 0.3)",
+                    background: "rgba(255, 77, 106, 0.06)"
                   },
                   children: [
                     /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.2rem" }, children: [
                       /* @__PURE__ */ jsx("strong", { children: "Orphan bootstrap registrations" }),
-                      /* @__PURE__ */ jsx("small", { style: { color: "#fecaca", lineHeight: 1.35 }, children: "Current-wallet registrations without a matching instance. Forget them directly from here." })
+                      /* @__PURE__ */ jsx("small", { style: { color: "var(--rb-muted)", lineHeight: 1.35 }, children: "Current-wallet registrations without a matching instance. Forget them directly from here." })
                     ] }),
                     orphanRegistrations.map((entry) => {
                       const registrationHash = entry.messageHash ?? entry.hash ?? null;
@@ -7471,8 +7554,8 @@ function SponsorRelayFab(props) {
                             gap: "0.35rem",
                             padding: "0.75rem",
                             borderRadius: "0.9rem",
-                            background: "rgba(15, 23, 42, 0.22)",
-                            border: "1px solid rgba(255,255,255,0.08)"
+                            background: "var(--rb-surface)",
+                            border: "1px solid var(--rb-border)"
                           },
                           children: [
                             /* @__PURE__ */ jsx(

package/shared/index.d.ts

@@ -341,7 +341,7 @@ declare const STALE_INSTANCE_ALLOCATION_COOLDOWN_MS: number;
 declare const RECENT_INSTANCE_RUNTIME_GRACE_MS: number;
 declare const DEPLOYMENT_PENDING_WARNING_MS: number;
 
-declare const UI_PACKAGE_VERSION = "0.6.41";
+declare const UI_PACKAGE_VERSION = "0.6.43";
 
 interface RootfsRequiredPortForward {
     port: number;

package/shared/index.js

@@ -42,7 +42,7 @@ var RECENT_INSTANCE_RUNTIME_GRACE_MS = 10 * 60 * 1e3;
 var DEPLOYMENT_PENDING_WARNING_MS = 3 * 60 * 1e3;
 
 // src/shared/package-version.ts
-var UI_PACKAGE_VERSION = "0.6.41";
+var UI_PACKAGE_VERSION = "0.6.43";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {