@tangle-network/sandbox-ui 0.25.0 → 0.26.0

package/dist/globals.css

@@ -30,7 +30,6 @@
     --color-violet-300: oklch(81.1% 0.111 293.571);
     --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-violet-500: oklch(60.6% 0.25 292.717);
-    --color-gray-900: oklch(21% 0.034 264.665);
     --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-neutral-400: oklch(70.8% 0 0);
     --color-neutral-500: oklch(55.6% 0 0);
@@ -2022,9 +2021,6 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
     }
   }
-  .bg-gray-900 {
-    background-color: var(--color-gray-900);
-  }
   .bg-green-400 {
     background-color: var(--color-green-400);
   }
@@ -3428,11 +3424,6 @@
       border-color: var(--border-accent-hover);
     }
   }
-  .focus\:border-transparent {
-    &:focus {
-      border-color: transparent;
-    }
-  }
   .focus\:text-\[var\(--surface-danger-text\)\] {
     &:focus {
       color: var(--surface-danger-text);

package/dist/pages.js

@@ -15,6 +15,11 @@ import {
   DialogHeader,
   DialogTitle,
   Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Switch,
   Textarea
 } from "./chunk-7ZA5SEK3.js";
@@ -478,7 +483,9 @@ import {
   Settings,
   Plus,
   Trash2,
-  Check
+  Check,
+  Eye,
+  EyeOff
 } from "lucide-react";
 
 // src/pages/add-ssh-key-dialog.tsx
@@ -893,6 +900,37 @@ function SshAccessStep({ config }) {
     )
   ] });
 }
+function EnvVarValueInput({
+  value,
+  onChange,
+  placeholder
+}) {
+  const [revealed, setRevealed] = React3.useState(false);
+  return /* @__PURE__ */ jsxs4("div", { className: "relative flex-[2]", children: [
+    /* @__PURE__ */ jsx4(
+      Input,
+      {
+        type: revealed ? "text" : "password",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        autoComplete: "off",
+        className: "h-9 px-3 pr-10 font-mono text-sm",
+        placeholder
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setRevealed((s) => !s),
+        "aria-label": revealed ? "Hide value" : "Show value",
+        "aria-pressed": revealed,
+        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: revealed ? /* @__PURE__ */ jsx4(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx4(Eye, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
 function ProvisioningWizard({
   environments: environmentsProp,
   onLoadEnvironments,
@@ -907,17 +945,11 @@ function ProvisioningWizard({
   pricingRates,
   planTiers
 }) {
-  const cpuMax = Math.max(
-    CPU_MIN,
-    Math.min(resourceLimits?.cpuMax ?? CPU_MAX, CPU_MAX)
-  );
-  const ramMax = Math.max(
-    RAM_MIN,
-    Math.min(resourceLimits?.ramMaxGB ?? RAM_MAX, RAM_MAX)
-  );
+  const cpuMax = Math.max(CPU_MIN, resourceLimits?.cpuMax ?? CPU_MAX);
+  const ramMax = Math.max(RAM_MIN, resourceLimits?.ramMaxGB ?? RAM_MAX);
   const storageMax = Math.max(
     STORAGE_MIN,
-    Math.min(resourceLimits?.storageMaxGB ?? STORAGE_MAX, STORAGE_MAX)
+    resourceLimits?.storageMaxGB ?? STORAGE_MAX
   );
   const cpuStep = alignSliderStep(CPU_MIN, cpuMax, CPU_STEP);
   const ramStep = alignSliderStep(RAM_MIN, ramMax, RAM_STEP);
@@ -958,6 +990,7 @@ function ProvisioningWizard({
     };
   }, [environmentsProp]);
   const environments = envList;
+  const showEnvironmentSection = isLoadingEnvironments || environments.length !== 1;
   const effectiveDefault = dc?.environment ?? defaultEnvironment;
   const [selectedEnv, setSelectedEnv] = React3.useState(
     effectiveDefault ?? environments[0]?.id ?? ""
@@ -991,7 +1024,17 @@ function ProvisioningWizard({
   }, [cpuMax, ramMax, storageMax, cpuStep, ramStep, storageStep]);
   const [name, setName] = React3.useState(dc?.name ?? "");
   const [gitUrl, setGitUrl] = React3.useState(dc?.gitUrl ?? "");
-  const [envVars, setEnvVars] = React3.useState(dc?.envVars ?? [{ key: "", value: "" }]);
+  const envVarUidRef = React3.useRef(0);
+  const makeEnvVarRow = (key = "", value = "") => ({
+    uid: `env-${envVarUidRef.current++}`,
+    key,
+    value
+  });
+  const [envVars, setEnvVars] = React3.useState(
+    () => (dc?.envVars ?? [{ key: "", value: "" }]).map(
+      (e) => makeEnvVarRow(e.key, e.value)
+    )
+  );
   const [driver, setDriver] = React3.useState(dc?.driver ?? "docker");
   const [bare, setBare] = React3.useState(dc?.bare ?? false);
   const [startupScriptIds, setStartupScriptIds] = React3.useState(
@@ -1037,7 +1080,7 @@ function ProvisioningWizard({
         storageGB,
         name,
         gitUrl,
-        envVars: envVars.filter((e) => e.key.trim() !== ""),
+        envVars: envVars.filter((e) => e.key.trim() !== "").map(({ key, value }) => ({ key, value })),
         driver,
         bare,
         startupScriptIds: startupScriptIds.filter(
@@ -1137,11 +1180,12 @@ function ProvisioningWizard({
           /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium text-destructive", children: loadError })
         ] }),
         /* @__PURE__ */ jsxs4("div", { className: "flex-1 overflow-y-auto min-h-0 space-y-4", children: [
-          /* @__PURE__ */ jsxs4("section", { className: SECTION_CARD_CLASS, children: [
+          showEnvironmentSection && /* @__PURE__ */ jsxs4("section", { className: SECTION_CARD_CLASS, children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 mb-4", children: [
               /* @__PURE__ */ jsx4(Layers, { className: "h-4 w-4 text-primary shrink-0" }),
               /* @__PURE__ */ jsx4("h2", { className: "text-sm font-semibold uppercase tracking-[0.06em] text-muted-foreground", children: "Environment Selection" })
             ] }),
+            !isLoadingEnvironments && environments.length === 0 && /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: "No environments are available to select right now. Refresh to try again." }),
             /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: isLoadingEnvironments && environments.length === 0 ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs4(
               "div",
               {
@@ -1333,27 +1377,22 @@ function ProvisioningWizard({
                 /* @__PURE__ */ jsxs4("div", { children: [
                   /* @__PURE__ */ jsx4("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Virtualization Driver" }),
                   /* @__PURE__ */ jsxs4(
-                    "select",
+                    Select,
                     {
                       value: driver,
-                      onChange: (e) => {
-                        if (VALID_DRIVERS.has(e.target.value))
+                      onValueChange: (value) => {
+                        if (VALID_DRIVERS.has(value))
                           setDriver(
-                            e.target.value
+                            value
                           );
                       },
-                      className: "w-full bg-card border border-border rounded-lg h-9 px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent appearance-none",
                       children: [
-                        /* @__PURE__ */ jsx4("option", { value: "docker", className: "bg-gray-900", children: "Docker container (Default)" }),
-                        /* @__PURE__ */ jsx4(
-                          "option",
-                          {
-                            value: "firecracker",
-                            className: "bg-gray-900",
-                            children: "Firecracker microVM (Secure)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx4("option", { value: "tangle", className: "bg-gray-900", children: "Tangle Distributed Node" })
+                        /* @__PURE__ */ jsx4(SelectTrigger, { className: "h-9", children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
+                        /* @__PURE__ */ jsxs4(SelectContent, { children: [
+                          /* @__PURE__ */ jsx4(SelectItem, { value: "docker", children: "Docker container (Default)" }),
+                          /* @__PURE__ */ jsx4(SelectItem, { value: "firecracker", children: "Firecracker microVM (Secure)" }),
+                          /* @__PURE__ */ jsx4(SelectItem, { value: "tangle", children: "Tangle Distributed Node" })
+                        ] })
                       ]
                     }
                   )
@@ -1379,10 +1418,7 @@ function ProvisioningWizard({
                     "button",
                     {
                       type: "button",
-                      onClick: () => setEnvVars([
-                        ...envVars,
-                        { key: "", value: "" }
-                      ]),
+                      onClick: () => setEnvVars([...envVars, makeEnvVarRow()]),
                       className: "flex items-center gap-1 text-xs text-primary hover:text-primary/70 transition-colors font-medium",
                       children: [
                         /* @__PURE__ */ jsx4(Plus, { className: "h-3 w-3" }),
@@ -1392,7 +1428,7 @@ function ProvisioningWizard({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
-                  envVars.map((env, i) => /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
+                  envVars.map((env) => /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
                     /* @__PURE__ */ jsx4(
                       Input,
                       {
@@ -1400,7 +1436,7 @@ function ProvisioningWizard({
                         value: env.key,
                         onChange: (e) => setEnvVars(
                           envVars.map(
-                            (v, idx) => idx === i ? { ...v, key: e.target.value } : v
+                            (v) => v.uid === env.uid ? { ...v, key: e.target.value } : v
                           )
                         ),
                         className: "flex-1 h-9 px-3 font-mono text-sm",
@@ -1408,16 +1444,14 @@ function ProvisioningWizard({
                       }
                     ),
                     /* @__PURE__ */ jsx4(
-                      Input,
+                      EnvVarValueInput,
                       {
-                        type: "password",
                         value: env.value,
-                        onChange: (e) => setEnvVars(
+                        onChange: (value) => setEnvVars(
                           envVars.map(
-                            (v, idx) => idx === i ? { ...v, value: e.target.value } : v
+                            (v) => v.uid === env.uid ? { ...v, value } : v
                           )
                         ),
-                        className: "flex-[2] h-9 px-3 font-mono text-sm",
                         placeholder: "sk-xxxxxxxxxxx"
                       }
                     ),
@@ -1427,14 +1461,15 @@ function ProvisioningWizard({
                         type: "button",
                         variant: "outline",
                         size: "icon",
+                        "aria-label": "Remove variable",
                         onClick: () => setEnvVars(
-                          envVars.filter((_, idx) => idx !== i)
+                          envVars.filter((v) => v.uid !== env.uid)
                         ),
                         className: "h-9 w-9 shrink-0 text-destructive hover:bg-destructive/10 hover:border-destructive/30",
                         children: /* @__PURE__ */ jsx4(Trash2, { className: "h-4 w-4" })
                       }
                     )
-                  ] }, i)),
+                  ] }, env.uid)),
                   envVars.length === 0 && /* @__PURE__ */ jsx4("div", { className: "text-center p-3 border border-dashed border-border rounded-lg text-muted-foreground/60 text-xs italic", children: "No environment variables set" })
                 ] })
               ] }),
@@ -1527,16 +1562,10 @@ function ProvisioningWizard({
                     className: "mt-0.5"
                   }
                 )
-              ] })
+              ] }),
+              sshAccess && /* @__PURE__ */ jsx4("div", { className: "pt-3 border-t border-border", children: /* @__PURE__ */ jsx4(SshAccessStep, { config: sshAccess }) })
             ] })
-          ] }) }),
-          sshAccess && /* @__PURE__ */ jsxs4("section", { className: SECTION_CARD_CLASS, children: [
-            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 mb-4", children: [
-              /* @__PURE__ */ jsx4(Settings, { className: "h-4 w-4 text-primary shrink-0" }),
-              /* @__PURE__ */ jsx4("h2", { className: "text-sm font-semibold uppercase tracking-[0.06em] text-muted-foreground", children: "Access Configuration" })
-            ] }),
-            /* @__PURE__ */ jsx4(SshAccessStep, { config: sshAccess })
-          ] })
+          ] }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "col-span-12 xl:col-span-4 sticky top-4 space-y-4", children: [
@@ -2448,7 +2477,7 @@ function ProfileDetailDialog({
 
 // src/pages/secrets-page.tsx
 import * as React6 from "react";
-import { Lock, Plus as Plus3, Trash2 as Trash23, Eye, EyeOff, AlertCircle as AlertCircle2, Key, Shield, CheckCircle, Users, ArrowRight, Upload } from "lucide-react";
+import { Lock, Plus as Plus3, Trash2 as Trash23, Eye as Eye2, EyeOff as EyeOff2, AlertCircle as AlertCircle2, Key, Shield, CheckCircle, Users, ArrowRight, Upload } from "lucide-react";
 import {
   Dialog as Dialog3,
   DialogContent as DialogContent3,
@@ -2838,7 +2867,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                     onClick: () => setShowValue(!showValue),
                     className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
                     "aria-label": showValue ? "Hide value" : "Show value",
-                    children: showValue ? /* @__PURE__ */ jsx7(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(Eye, { className: "h-4 w-4" })
+                    children: showValue ? /* @__PURE__ */ jsx7(EyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx7(Eye2, { className: "h-4 w-4" })
                   }
                 )
               ] }),
@@ -2977,7 +3006,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                 onClick: () => setShowImportValues((s) => !s),
                 className: "inline-flex items-center gap-1 text-xs font-semibold text-muted-foreground hover:text-foreground",
                 children: [
-                  showImportValues ? /* @__PURE__ */ jsx7(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(Eye, { className: "h-3.5 w-3.5" }),
+                  showImportValues ? /* @__PURE__ */ jsx7(EyeOff2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(Eye2, { className: "h-3.5 w-3.5" }),
                   showImportValues ? "Hide values" : "Show values"
                 ]
               }

package/dist/styles.css

@@ -30,7 +30,6 @@
     --color-violet-300: oklch(81.1% 0.111 293.571);
     --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-violet-500: oklch(60.6% 0.25 292.717);
-    --color-gray-900: oklch(21% 0.034 264.665);
     --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-neutral-400: oklch(70.8% 0 0);
     --color-neutral-500: oklch(55.6% 0 0);
@@ -2022,9 +2021,6 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
     }
   }
-  .bg-gray-900 {
-    background-color: var(--color-gray-900);
-  }
   .bg-green-400 {
     background-color: var(--color-green-400);
   }
@@ -3428,11 +3424,6 @@
       border-color: var(--border-accent-hover);
     }
   }
-  .focus\:border-transparent {
-    &:focus {
-      border-color: transparent;
-    }
-  }
   .focus\:text-\[var\(--surface-danger-text\)\] {
     &:focus {
       color: var(--surface-danger-text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",