@le-space/ui 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Floating Aleph sponsor relay UI components for Svelte and React.",
   "license": "MIT",
   "type": "module",
@@ -36,8 +36,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@le-space/browser": "0.3.2",
-    "@le-space/core": "0.3.2",
+    "@le-space/browser": "0.3.3",
+    "@le-space/core": "0.3.3",
     "viem": "^2.38.5"
   },
   "peerDependencies": {

package/react/index.js

@@ -2634,9 +2634,7 @@ function defaultState(props = {}) {
     sshPublicKey: props.sshPublicKey ?? "",
     instanceName: props.instanceName ?? DEFAULT_INSTANCE_NAME,
     tierId: DEFAULT_TIER_ID,
-    showAdvanced: Boolean(
-      props.manifestUrl && props.manifestUrl !== DEFAULT_MANIFEST_URL || props.manifestJson?.trim() || props.sshPublicKey?.trim()
-    ),
+    showAdvanced: Boolean(props.manifestJson?.trim() || props.sshPublicKey?.trim()),
     showInstances: props.showInstances ?? true,
     showPasteManifest: Boolean(props.manifestJson?.trim()),
     busy: {
@@ -2674,6 +2672,14 @@ function defaultState(props = {}) {
     deploymentProgress: IDLE_DEPLOYMENT_PROGRESS
   };
 }
+function manifestLoadErrorState(error) {
+  const message = error instanceof Error ? error.message : String(error);
+  return {
+    manifest: null,
+    valid: false,
+    errors: [message]
+  };
+}
 function isDebugEnabled(props) {
   if (props.debug) {
     return true;
@@ -3461,15 +3467,15 @@ var SponsorRelayController = class {
       statusText: "Refreshing relay sponsor data"
     });
     try {
-      const manifestState = await resolveManifest({
-        manifestUrl: this.state.manifestUrl,
-        manifestJson: this.state.manifestJson
-      });
-      const manifest = manifestState.manifest;
       const [pricingSummary, crns] = await Promise.all([
         fetchInstancePricing(this.client.apiHost),
         this.client.fetchCrns()
       ]);
+      const manifestState = await resolveManifest({
+        manifestUrl: this.state.manifestUrl,
+        manifestJson: this.state.manifestJson
+      }).catch((error) => manifestLoadErrorState(error));
+      const manifest = manifestState.manifest;
       let balance = this.state.balance;
       let instances = [];
       if (this.state.wallet.address) {
@@ -3959,11 +3965,11 @@ var basePanelStyle = {
   zIndex: 9999,
   width: "min(28rem, calc(100vw - 2rem))",
   overflow: "auto",
-  border: "1px solid rgba(255,255,255,0.12)",
+  border: "1px solid var(--le-space-sponsor-relay-panel-border, rgba(199, 210, 254, 0.22))",
   borderRadius: "1.4rem",
-  background: "rgba(12,20,31,0.92)",
+  background: "var(--le-space-sponsor-relay-panel-bg, rgba(49, 46, 129, 0.94))",
   color: "#f8fafc",
-  boxShadow: "0 28px 80px rgba(3,8,20,0.45)",
+  boxShadow: "var(--le-space-sponsor-relay-panel-shadow, 0 28px 80px rgba(49, 46, 129, 0.34))",
   padding: "1rem",
   fontFamily: '"DM Sans", "Inter", sans-serif'
 };
@@ -3978,6 +3984,11 @@ var fieldStyle = {
   fontSize: "0.98rem",
   lineHeight: 1.45
 };
+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)";
 function progressToneColor(status) {
   switch (status) {
     case "success":
@@ -4158,11 +4169,11 @@ function SponsorRelayFab(props) {
   const progressActive = state.deploymentProgress.stage !== "idle" && state.deploymentProgress.stage !== "completed" && state.deploymentProgress.stage !== "error";
   const deploymentProgressVisible = isDeploymentProgressVisible(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 ? "0 14px 30px rgba(79, 70, 229, 0.28)" : "0 10px 24px rgba(99, 102, 241, 0.22)" : void 0;
-  const inlineButtonBackground = indicator.tone === "error" ? "linear-gradient(135deg, #b91c1c 0%, #dc2626 100%)" : indicator.tone === "warning" ? "linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%)" : indicator.tone === "success" ? "linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)" : "linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)";
-  const inlineButtonBorder = indicator.tone === "error" ? "1px solid rgba(254, 202, 202, 0.45)" : indicator.tone === "warning" ? "1px solid rgba(196, 181, 253, 0.42)" : "1px solid rgba(199, 210, 254, 0.42)";
-  const inlineBadgeBackground = indicator.tone === "error" ? "rgba(127, 29, 29, 0.88)" : indicator.tone === "warning" ? "rgba(88, 28, 135, 0.88)" : indicator.tone === "success" ? "rgba(49, 46, 129, 0.92)" : "rgba(30, 41, 59, 0.92)";
-  const inlineBadgeBorder = indicator.tone === "error" ? "1px solid rgba(254, 202, 202, 0.34)" : indicator.tone === "warning" ? "1px solid rgba(233, 213, 255, 0.28)" : indicator.tone === "success" ? "1px solid rgba(191, 219, 254, 0.24)" : "1px solid rgba(191, 219, 254, 0.2)";
+  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 inlineButtonBackground = themedLauncherBackground;
+  const inlineButtonBorder = `1px solid ${themedLauncherBorder}`;
+  const inlineBadgeBackground = themedLauncherBadgeBackground;
+  const inlineBadgeBorder = `1px solid ${themedLauncherBadgeBorder}`;
   const panelStyle = launcherMode === "inline" ? inlinePanelStyle ?? {
     ...basePanelStyle,
     top: "4.75rem",
@@ -4194,8 +4205,8 @@ function SponsorRelayFab(props) {
           bottom: launcherMode === "floating" ? "5.8rem" : void 0,
           zIndex: launcherMode === "floating" ? 1e4 : "auto",
           borderRadius: "999px",
-          border: launcherMode === "floating" ? "2px solid rgba(255,255,255,0.9)" : inlineButtonBorder,
-          background: launcherMode === "floating" ? "linear-gradient(135deg, #e91315 0%, #ffc83f 100%)" : inlineButtonBackground,
+          border: launcherMode === "floating" ? `2px solid ${themedLauncherBorder}` : inlineButtonBorder,
+          background: launcherMode === "floating" ? themedLauncherBackground : inlineButtonBackground,
           color: "white",
           minHeight: launcherMode === "floating" ? void 0 : "2.25rem",
           padding: launcherMode === "floating" ? "0.9rem 1.2rem" : "0.42rem 0.56rem 0.42rem 0.76rem",
@@ -4231,8 +4242,8 @@ function SponsorRelayFab(props) {
                       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)" : "#f59e0b",
-                      boxShadow: launcherMode === "floating" ? "0 0 0 3px rgba(255,255,255,0.22)" : "0 0 0 3px rgba(245, 158, 11, 0.18)"
+                      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))"
                     }
                   }
                 ),
@@ -4291,7 +4302,7 @@ function SponsorRelayFab(props) {
             position: "fixed",
             inset: 0,
             zIndex: 9998,
-            background: "radial-gradient(circle at 88% 82%, rgba(233,19,21,0.18), transparent 34%)"
+            background: "radial-gradient(circle at 88% 82%, var(--le-space-sponsor-relay-backdrop-accent, rgba(79, 70, 229, 0.2)), transparent 34%)"
           }
         }
       ),
@@ -4527,7 +4538,7 @@ function SponsorRelayFab(props) {
                   style: fieldStyle,
                   value: state.pricingSummary.tier?.id ?? state.tierId,
                   onChange: (event) => controller.setTierId(event.currentTarget.value),
-                  children: (state.pricingSummary.pricing?.tiers ?? []).map((tier) => {
+                  children: (state.pricingSummary.pricing?.tiers?.length ? state.pricingSummary.pricing.tiers : [{ id: state.tierId, compute_units: 1 }]).map((tier) => {
                     const unit = state.pricingSummary.pricing?.compute_unit;
                     const vcpus = unit ? unit.vcpus * tier.compute_units : null;
                     const memoryMiB = unit ? unit.memory_mib * tier.compute_units : null;

package/shared/index.js

@@ -2633,9 +2633,7 @@ function defaultState(props = {}) {
     sshPublicKey: props.sshPublicKey ?? "",
     instanceName: props.instanceName ?? DEFAULT_INSTANCE_NAME,
     tierId: DEFAULT_TIER_ID,
-    showAdvanced: Boolean(
-      props.manifestUrl && props.manifestUrl !== DEFAULT_MANIFEST_URL || props.manifestJson?.trim() || props.sshPublicKey?.trim()
-    ),
+    showAdvanced: Boolean(props.manifestJson?.trim() || props.sshPublicKey?.trim()),
     showInstances: props.showInstances ?? true,
     showPasteManifest: Boolean(props.manifestJson?.trim()),
     busy: {
@@ -2673,6 +2671,14 @@ function defaultState(props = {}) {
     deploymentProgress: IDLE_DEPLOYMENT_PROGRESS
   };
 }
+function manifestLoadErrorState(error) {
+  const message = error instanceof Error ? error.message : String(error);
+  return {
+    manifest: null,
+    valid: false,
+    errors: [message]
+  };
+}
 function isDebugEnabled(props) {
   if (props.debug) {
     return true;
@@ -3460,15 +3466,15 @@ var SponsorRelayController = class {
       statusText: "Refreshing relay sponsor data"
     });
     try {
-      const manifestState = await resolveManifest({
-        manifestUrl: this.state.manifestUrl,
-        manifestJson: this.state.manifestJson
-      });
-      const manifest = manifestState.manifest;
       const [pricingSummary, crns] = await Promise.all([
         fetchInstancePricing(this.client.apiHost),
         this.client.fetchCrns()
       ]);
+      const manifestState = await resolveManifest({
+        manifestUrl: this.state.manifestUrl,
+        manifestJson: this.state.manifestJson
+      }).catch((error) => manifestLoadErrorState(error));
+      const manifest = manifestState.manifest;
       let balance = this.state.balance;
       let instances = [];
       if (this.state.wallet.address) {

package/styles.css

@@ -5,13 +5,17 @@
     "DM Sans", "Inter", "Segoe UI", sans-serif;
   --relay-font-mono:
     "DM Mono", "SFMono-Regular", "Menlo", monospace;
-  --relay-panel-bg: rgba(12, 20, 31, 0.92);
-  --relay-panel-border: rgba(255, 255, 255, 0.12);
-  --relay-panel-shadow: 0 28px 80px rgba(3, 8, 20, 0.45);
+  --relay-panel-bg: rgba(49, 46, 129, 0.94);
+  --relay-panel-border: rgba(199, 210, 254, 0.22);
+  --relay-panel-shadow: 0 28px 80px rgba(49, 46, 129, 0.34);
   --relay-text: #f8fafc;
   --relay-muted: #9fb2ca;
-  --relay-blue: #0176ce;
-  --relay-red: #e91315;
+  --relay-blue: #4f46e5;
+  --relay-red: #6366f1;
   --relay-yellow: #ffc83f;
   --relay-green: #37d67a;
+  --relay-launcher-border: rgba(199, 210, 254, 0.42);
+  --relay-launcher-badge-bg: rgba(49, 46, 129, 0.92);
+  --relay-launcher-badge-border: rgba(191, 219, 254, 0.24);
+  --relay-backdrop-accent: rgba(79, 70, 229, 0.2);
 }

package/svelte/SponsorRelayFab.svelte

@@ -111,7 +111,7 @@ export let apiHost = undefined
       <label class="field">
         <span>Tier</span>
         <select value={state.pricingSummary.tier?.id ?? state.tierId} on:change={(event) => controller.setTierId(event.currentTarget.value)}>
-          {#each state.pricingSummary.pricing?.tiers ?? [] as tier}
+          {#each (state.pricingSummary.pricing?.tiers?.length ? state.pricingSummary.pricing.tiers : [{ id: state.tierId, compute_units: 1 }]) as tier}
             <option value={tier.id}>
               {tier.id} {formatTierSpecLabel(
                 state.pricingSummary.pricing ? state.pricingSummary.pricing.compute_unit.vcpus * tier.compute_units : null,
@@ -275,7 +275,7 @@ export let apiHost = undefined
     position: fixed;
     inset: 0;
     z-index: 9998;
-    background: radial-gradient(circle at 88% 82%, rgba(233, 19, 21, 0.18), transparent 34%);
+    background: radial-gradient(circle at 88% 82%, var(--relay-backdrop-accent), transparent 34%);
     backdrop-filter: blur(2px);
   }
 

package/svelte/components/LauncherButton.svelte

@@ -10,12 +10,12 @@
 
 <style>
   .launcher {
-    border: 2px solid rgba(255, 255, 255, 0.88);
+    border: 2px solid var(--relay-launcher-border);
     border-radius: 999px;
     padding: 0.9rem 1.2rem;
-    background: linear-gradient(135deg, var(--relay-red) 0%, var(--relay-yellow) 100%);
+    background: linear-gradient(135deg, var(--relay-blue) 0%, var(--relay-red) 100%);
     color: white;
-    box-shadow: 0 18px 40px rgba(233, 19, 21, 0.28);
+    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.28);
     font: 700 0.84rem/1 var(--relay-font-heading);
     letter-spacing: 0.08em;
     text-transform: uppercase;

package/svelte/styles/theme.css

@@ -5,13 +5,17 @@
     "DM Sans", "Inter", "Segoe UI", sans-serif;
   --relay-font-mono:
     "DM Mono", "SFMono-Regular", "Menlo", monospace;
-  --relay-panel-bg: rgba(12, 20, 31, 0.92);
-  --relay-panel-border: rgba(255, 255, 255, 0.12);
-  --relay-panel-shadow: 0 28px 80px rgba(3, 8, 20, 0.45);
+  --relay-panel-bg: rgba(49, 46, 129, 0.94);
+  --relay-panel-border: rgba(199, 210, 254, 0.22);
+  --relay-panel-shadow: 0 28px 80px rgba(49, 46, 129, 0.34);
   --relay-text: #f8fafc;
   --relay-muted: #9fb2ca;
-  --relay-blue: #0176ce;
-  --relay-red: #e91315;
+  --relay-blue: #4f46e5;
+  --relay-red: #6366f1;
   --relay-yellow: #ffc83f;
   --relay-green: #37d67a;
+  --relay-launcher-border: rgba(199, 210, 254, 0.42);
+  --relay-launcher-badge-bg: rgba(49, 46, 129, 0.92);
+  --relay-launcher-badge-border: rgba(191, 219, 254, 0.24);
+  --relay-backdrop-accent: rgba(79, 70, 229, 0.2);
 }