@le-space/ui 0.3.0 → 0.3.3

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

@@ -1,7 +1,7 @@
 <script>
   import { onDestroy, onMount } from 'svelte'
 
-  import { createSponsorRelayController, formatDateTime, formatNumber, joinMappedPorts, joinRequiredPortForwards, shortHash } from '../shared/index'
+  import { createSponsorRelayController, formatDateTime, formatNumber, formatTierSpecLabel, joinMappedPorts, joinRequiredPortForwards, shortHash } from '../shared/index'
   import AccordionSection from './components/AccordionSection.svelte'
   import CopyButton from './components/CopyButton.svelte'
   import LauncherButton from './components/LauncherButton.svelte'
@@ -104,10 +104,6 @@ export let apiHost = undefined
     <p class="status-text">{state.statusText}</p>
 
     <div class="grid">
-      <label class="field">
-        <span>Manifest URL</span>
-        <input value={state.manifestUrl} on:input={(event) => controller.setManifestUrl(event.currentTarget.value)} />
-      </label>
       <label class="field">
         <span>Instance Name</span>
         <input value={state.instanceName} on:input={(event) => controller.setInstanceName(event.currentTarget.value)} />
@@ -115,23 +111,40 @@ 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}
-            <option value={tier.id}>{tier.id}</option>
+          {#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,
+                state.pricingSummary.pricing ? state.pricingSummary.pricing.compute_unit.memory_mib * tier.compute_units : null,
+                state.pricingSummary.pricing ? state.pricingSummary.pricing.compute_unit.disk_mib * tier.compute_units : null
+              )}
+            </option>
           {/each}
         </select>
-      </label>
-      <label class="field wide">
-        <span>SSH Public Key</span>
-        <textarea rows="3" on:input={(event) => controller.setSshPublicKey(event.currentTarget.value)}>{state.sshPublicKey}</textarea>
+        <small>{formatTierSpecLabel(state.pricingSummary.vcpus, state.pricingSummary.memoryMiB, state.pricingSummary.diskMiB)}</small>
       </label>
     </div>
 
-    <AccordionSection title="Paste Manifest" open={state.showPasteManifest}>
-      <label class="field wide">
-        <span>Pasted rootfs manifest JSON</span>
-        <textarea rows="7" on:input={(event) => controller.setManifestJson(event.currentTarget.value)}>{state.manifestJson}</textarea>
-      </label>
-    </AccordionSection>
+    <details class="accordion" open={state.showAdvanced} on:toggle={(event) => controller.setShowAdvanced(event.currentTarget.open)}>
+      <summary>Advanced</summary>
+      <div class="accordion-body advanced-grid">
+        <label class="field wide">
+          <span>Manifest URL</span>
+          <input value={state.manifestUrl} on:input={(event) => controller.setManifestUrl(event.currentTarget.value)} />
+        </label>
+        <label class="field wide">
+          <span>SSH Public Key</span>
+          <textarea rows="3" on:input={(event) => controller.setSshPublicKey(event.currentTarget.value)}>{state.sshPublicKey}</textarea>
+        </label>
+
+        <AccordionSection title="Paste Manifest" open={state.showPasteManifest}>
+          <label class="field wide">
+            <span>Pasted rootfs manifest JSON</span>
+            <textarea rows="7" on:input={(event) => controller.setManifestJson(event.currentTarget.value)}>{state.manifestJson}</textarea>
+          </label>
+        </AccordionSection>
+      </div>
+    </details>
 
     <div class="metrics">
       <div class="metric-card">
@@ -262,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);
   }
 
@@ -404,10 +417,46 @@ export let apiHost = undefined
     gap: 0.4rem;
   }
 
+  .field small {
+    color: var(--relay-muted);
+    font-size: 0.72rem;
+    line-height: 1.35;
+  }
+
   .field.wide {
     grid-column: 1 / -1;
   }
 
+  .accordion {
+    margin-top: 0.9rem;
+    border: 1px solid var(--relay-panel-border);
+    border-radius: 1rem;
+    background: rgba(255, 255, 255, 0.035);
+  }
+
+  .accordion summary {
+    cursor: pointer;
+    list-style: none;
+    padding: 0.8rem 0.95rem;
+    color: var(--relay-text);
+    font: 700 0.8rem/1.1 var(--relay-font-heading);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .accordion summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .accordion-body {
+    padding: 0 0.95rem 0.95rem;
+  }
+
+  .advanced-grid {
+    display: grid;
+    gap: 0.75rem;
+  }
+
   input,
   select,
   textarea {

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);
 }