@le-space/ui 0.6.45 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.6.45",
+  "version": "0.7.0",
   "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.45",
-    "@le-space/core": "0.6.45",
+    "@le-space/browser": "0.7.0",
+    "@le-space/core": "0.7.0",
     "viem": "^2.53.1"
   },
   "peerDependencies": {

package/react/index.d.ts

@@ -315,6 +315,12 @@ interface SponsorRelayState {
     balance: BalanceResponse | null;
     crns: Crn[];
     selectedCrn: Crn | null;
+    crnOptions: Array<{
+        hash: string;
+        name: string | null;
+        score: number | null;
+    }>;
+    crnPinnedByUser: boolean;
     instances: CompactInstanceRecord[];
     bootstrapRegistrations: CompactBootstrapRegistrationRecord[];
     orphanBootstrapRegistrations: CompactBootstrapRegistrationRecord[];
@@ -366,6 +372,8 @@ declare class SponsorRelayController {
     setUcanStoreBootstrapField(field: keyof SponsorRelayUcanStoreBootstrapInput, value: string): void;
     setTierId(tierId: string): void;
     private recomputePricingSummary;
+    /** Pin a specific CRN as the first deploy attempt (null = automatic). */
+    selectCrn(hash: string | null): void;
     private queueManifestRefresh;
     connectWallet(): Promise<void>;
     private refreshWalletDerivedState;

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.45";
+var UI_PACKAGE_VERSION = "0.7.0";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -3826,6 +3826,8 @@ function defaultState(props = {}) {
     balance: null,
     crns: [],
     selectedCrn: null,
+    crnOptions: [],
+    crnPinnedByUser: false,
     instances: [],
     bootstrapRegistrations: [],
     orphanBootstrapRegistrations: [],
@@ -5257,15 +5259,26 @@ var SponsorRelayController = class {
     const balance = this.state.balance;
     const quote = pricing && tier && balance ? buildPaymentQuote(tier, pricing, balance) : null;
     const spec = pricing && tier ? tierSpec(pricing, tier) : null;
-    const selectedCrn = compatibleCrnsForTier(this.state.crns, {
+    const compatibleList = compatibleCrnsForTier(this.state.crns, {
       ...this.state,
       pricingSummary: {
         ...this.state.pricingSummary,
         pricing,
         tier
       }
-    })[0] ?? null;
+    });
+    const pinned = this.state.crnPinnedByUser ? compatibleList.find(
+      (crn) => crn.hash === this.state.selectedCrn?.hash
+    ) ?? null : null;
+    const selectedCrn = pinned ?? compatibleList[0] ?? null;
+    const crnOptions = compatibleList.slice(0, 15).map((crn) => ({
+      hash: crn.hash,
+      name: crn.name ?? null,
+      score: typeof crn.score === "number" ? crn.score : null
+    }));
     this.patch({
+      crnOptions,
+      crnPinnedByUser: this.state.crnPinnedByUser && pinned != null,
       pricingSummary: {
         pricing,
         tier,
@@ -5278,6 +5291,17 @@ var SponsorRelayController = class {
       selectedCrn
     });
   }
+  /** Pin a specific CRN as the first deploy attempt (null = automatic). */
+  selectCrn(hash) {
+    if (!hash) {
+      this.patch({ crnPinnedByUser: false });
+      this.recomputePricingSummary();
+      return;
+    }
+    const match = this.state.crns.find((crn) => crn.hash === hash) ?? null;
+    if (!match) return;
+    this.patch({ selectedCrn: match, crnPinnedByUser: true });
+  }
   queueManifestRefresh() {
     if (!this.state.ready) {
       return;
@@ -7394,7 +7418,22 @@ function SponsorRelayFab(props) {
             " credits required"
           ] }),
           /* @__PURE__ */ jsx("div", { children: state.rootfsHealth.label }),
-          /* @__PURE__ */ jsx("div", { children: state.selectedCrn?.name ?? shortHash(state.selectedCrn?.hash) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": "Select CRN",
+              value: state.crnPinnedByUser ? state.selectedCrn?.hash ?? "" : "",
+              onChange: (event) => controller.selectCrn(event.currentTarget.value || null),
+              children: [
+                /* @__PURE__ */ jsxs("option", { value: "", children: [
+                  "Auto (",
+                  state.crnOptions[0]?.name ?? "best score",
+                  ")"
+                ] }),
+                state.crnOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.hash, children: (option.name ?? option.hash.slice(0, 8)) + (option.score != null ? ` \xB7 ${option.score.toFixed(2)}` : "") }, option.hash))
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxs("div", { children: [
             "Ports",
             " ",

package/shared/index.d.ts

@@ -313,6 +313,12 @@ interface SponsorRelayState {
     balance: BalanceResponse | null;
     crns: Crn[];
     selectedCrn: Crn | null;
+    crnOptions: Array<{
+        hash: string;
+        name: string | null;
+        score: number | null;
+    }>;
+    crnPinnedByUser: boolean;
     instances: CompactInstanceRecord[];
     bootstrapRegistrations: CompactBootstrapRegistrationRecord[];
     orphanBootstrapRegistrations: CompactBootstrapRegistrationRecord[];
@@ -341,7 +347,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.45";
+declare const UI_PACKAGE_VERSION = "0.7.0";
 
 interface RootfsRequiredPortForward {
     port: number;
@@ -425,6 +431,8 @@ declare class SponsorRelayController {
     setUcanStoreBootstrapField(field: keyof SponsorRelayUcanStoreBootstrapInput, value: string): void;
     setTierId(tierId: string): void;
     private recomputePricingSummary;
+    /** Pin a specific CRN as the first deploy attempt (null = automatic). */
+    selectCrn(hash: string | null): void;
     private queueManifestRefresh;
     connectWallet(): Promise<void>;
     private refreshWalletDerivedState;

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.45";
+var UI_PACKAGE_VERSION = "0.7.0";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -3825,6 +3825,8 @@ function defaultState(props = {}) {
     balance: null,
     crns: [],
     selectedCrn: null,
+    crnOptions: [],
+    crnPinnedByUser: false,
     instances: [],
     bootstrapRegistrations: [],
     orphanBootstrapRegistrations: [],
@@ -5256,15 +5258,26 @@ var SponsorRelayController = class {
     const balance = this.state.balance;
     const quote = pricing && tier && balance ? buildPaymentQuote(tier, pricing, balance) : null;
     const spec = pricing && tier ? tierSpec(pricing, tier) : null;
-    const selectedCrn = compatibleCrnsForTier(this.state.crns, {
+    const compatibleList = compatibleCrnsForTier(this.state.crns, {
       ...this.state,
       pricingSummary: {
         ...this.state.pricingSummary,
         pricing,
         tier
       }
-    })[0] ?? null;
+    });
+    const pinned = this.state.crnPinnedByUser ? compatibleList.find(
+      (crn) => crn.hash === this.state.selectedCrn?.hash
+    ) ?? null : null;
+    const selectedCrn = pinned ?? compatibleList[0] ?? null;
+    const crnOptions = compatibleList.slice(0, 15).map((crn) => ({
+      hash: crn.hash,
+      name: crn.name ?? null,
+      score: typeof crn.score === "number" ? crn.score : null
+    }));
     this.patch({
+      crnOptions,
+      crnPinnedByUser: this.state.crnPinnedByUser && pinned != null,
       pricingSummary: {
         pricing,
         tier,
@@ -5277,6 +5290,17 @@ var SponsorRelayController = class {
       selectedCrn
     });
   }
+  /** Pin a specific CRN as the first deploy attempt (null = automatic). */
+  selectCrn(hash) {
+    if (!hash) {
+      this.patch({ crnPinnedByUser: false });
+      this.recomputePricingSummary();
+      return;
+    }
+    const match = this.state.crns.find((crn) => crn.hash === hash) ?? null;
+    if (!match) return;
+    this.patch({ selectedCrn: match, crnPinnedByUser: true });
+  }
   queueManifestRefresh() {
     if (!this.state.ready) {
       return;

package/svelte/SponsorRelayFab.svelte

@@ -260,7 +260,19 @@ export let apiHosts = undefined
       </div>
       <div class="metric-card">
         <span>CRN</span>
-        <strong>{state.selectedCrn?.name ?? shortHash(state.selectedCrn?.hash)}</strong>
+        <select
+          class="crn-select"
+          aria-label="Select CRN"
+          value={state.crnPinnedByUser ? (state.selectedCrn?.hash ?? '') : ''}
+          on:change={(event) => controller.selectCrn(event.currentTarget.value || null)}
+        >
+          <option value="">Auto ({state.crnOptions[0]?.name ?? 'best score'})</option>
+          {#each state.crnOptions as option (option.hash)}
+            <option value={option.hash}>
+              {option.name ?? option.hash.slice(0, 8)}{option.score != null ? ` · ${option.score.toFixed(2)}` : ''}
+            </option>
+          {/each}
+        </select>
         <small>{state.selectedCrn?.address ?? 'Auto-picked best compatible CRN'}</small>
       </div>
       <div class="metric-card">