@tangle-network/sandbox-ui 0.30.0 → 0.32.0

package/dist/index.js

@@ -104,7 +104,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-BJFWPP5T.js";
+} from "./chunk-E267TDZP.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -133,7 +133,7 @@ import {
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-AUFV7766.js";
+} from "./chunk-6NDOA4SB.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-AZ3AWMTM.js";
@@ -166,13 +166,17 @@ import {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
+  RailTooltip,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,
@@ -195,7 +199,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-YPBFIETY.js";
+} from "./chunk-CI6RWXWY.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -203,7 +207,7 @@ import {
   TemplateCard,
   UsageChart,
   formatPrice
-} from "./chunk-DNZ4DTNA.js";
+} from "./chunk-2XNT74ZX.js";
 import {
   Avatar,
   AvatarFallback,
@@ -298,7 +302,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-ELGN7DPS.js";
+} from "./chunk-JC7GMQK7.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -307,7 +311,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import "./chunk-EI44GEQ5.js";
 
 // src/index.ts
@@ -437,9 +441,12 @@ export {
   PromoBanner,
   QuestionPreview,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
+  RailTooltip,
   RealtimeSessionRegistry,
   ReasoningLevelPicker,
   ResourceMeter,
@@ -450,6 +457,7 @@ export {
   SESSION_CREATED_EVENT,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,

package/dist/pages.js

@@ -4,7 +4,7 @@ import {
   PricingPage,
   TemplateCard,
   UsageChart
-} from "./chunk-DNZ4DTNA.js";
+} from "./chunk-2XNT74ZX.js";
 import {
   Badge,
   Button,
@@ -23,7 +23,7 @@ import {
   Switch,
   Textarea
 } from "./chunk-7ZA5SEK3.js";
-import "./chunk-6NQBODYV.js";
+import "./chunk-NMR2CTGP.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -583,7 +583,7 @@ function AddSshKeyDialog({
             placeholder: "My laptop",
             autoComplete: "off",
             "aria-invalid": errors.name ? true : void 0,
-            className: "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            className: "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         errors.name && /* @__PURE__ */ jsx3("p", { className: "text-xs text-destructive", children: errors.name })
@@ -608,7 +608,7 @@ function AddSshKeyDialog({
             autoComplete: "off",
             spellCheck: false,
             "aria-invalid": errors.publicKey ? true : void 0,
-            className: "min-h-24 w-full resize-y rounded-md border border-border bg-card px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            className: "min-h-24 w-full resize-y rounded-md border border-border bg-card px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         ),
         errors.publicKey && /* @__PURE__ */ jsx3("p", { className: "text-xs text-destructive", children: errors.publicKey })
@@ -2840,7 +2840,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                   onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
                   placeholder: "MY_SECRET_KEY",
                   autoComplete: "off",
-                  className: "w-full rounded-md border border-border bg-card px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                  className: "w-full rounded-md border border-border bg-card px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 }
               )
             ] }),
@@ -2857,7 +2857,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                     onChange: (e) => setNewValue(e.target.value),
                     placeholder: "Enter secret value...",
                     autoComplete: "new-password",
-                    className: "w-full rounded-md border border-border bg-card px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                    className: "w-full rounded-md border border-border bg-card px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   }
                 ),
                 /* @__PURE__ */ jsx7(
@@ -2965,7 +2965,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
               onChange: (e) => setImportText(e.target.value),
               rows: 6,
               spellCheck: false,
-              className: "w-full rounded-md border border-border bg-card px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              className: "w-full rounded-md border border-border bg-card px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             }
           ),
           /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
@@ -3699,7 +3699,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, name: e.target.value })),
                     placeholder: "Install Claude Code",
                     maxLength: 64,
-                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   }
                 )
               ] }),
@@ -3713,7 +3713,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, description: e.target.value })),
                     placeholder: "Sets up Claude Code with authentication",
                     maxLength: 256,
-                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                    className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   }
                 )
               ] }),
@@ -3750,7 +3750,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, content: e.target.value })),
                     rows: 12,
                     spellCheck: false,
-                    className: "mt-1.5 w-full rounded-lg border border-border bg-[var(--depth-1,hsl(var(--muted)))] px-4 py-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 resize-y"
+                    className: "mt-1.5 w-full rounded-lg border border-border bg-[var(--depth-1,hsl(var(--muted)))] px-4 py-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y"
                   }
                 ),
                 /* @__PURE__ */ jsxs9("p", { className: "mt-1 text-xs text-muted-foreground", children: [
@@ -3838,7 +3838,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           placeholder: "Any",
                           min: 0.5,
                           step: 0.5,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       )
                     ] }),
@@ -3859,7 +3859,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           placeholder: "Any",
                           min: 1,
                           step: 1,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       )
                     ] })
@@ -3878,7 +3878,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           onChange: (e) => setFormData((p) => ({ ...p, runOrder: e.target.value ? Math.max(0, Number(e.target.value)) : 0 })),
                           min: 0,
                           max: 9999,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       ),
                       /* @__PURE__ */ jsx9("p", { className: "mt-1 text-xs text-muted-foreground", children: "Lower runs first" })
@@ -3896,7 +3896,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           onChange: (e) => setFormData((p) => ({ ...p, timeoutSeconds: e.target.value ? Math.max(5, Number(e.target.value)) : 300 })),
                           min: 5,
                           max: 3600,
-                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+                          className: "mt-1.5 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         }
                       )
                     ] })

package/dist/styles.css

@@ -301,9 +301,6 @@
   .end {
     inset-inline-end: var(--spacing);
   }
-  .-top-1 {
-    top: calc(var(--spacing) * -1);
-  }
   .-top-1\.5 {
     top: calc(var(--spacing) * -1.5);
   }
@@ -346,9 +343,6 @@
   .top-full {
     top: 100%;
   }
-  .-right-1 {
-    right: calc(var(--spacing) * -1);
-  }
   .-right-1\.5 {
     right: calc(var(--spacing) * -1.5);
   }
@@ -2268,6 +2262,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2904,10 +2901,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2977,6 +2970,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,transform\] {
+    transition-property: opacity,transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\] {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3064,6 +3062,17 @@
       rotate: 180deg;
     }
   }
+  .group-focus-within\/tip\:translate-x-0 {
+    &:is(:where(.group\/tip):focus-within *) {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-focus-within\/tip\:opacity-100 {
+    &:is(:where(.group\/tip):focus-within *) {
+      opacity: 100%;
+    }
+  }
   .group-hover\:translate-x-0\.5 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3079,6 +3088,28 @@
       }
     }
   }
+  .group-hover\/tip\:translate-x-0 {
+    &:is(:where(.group\/tip):hover *) {
+      @media (hover: hover) {
+        --tw-translate-x: calc(var(--spacing) * 0);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .group-hover\/tip\:opacity-100 {
+    &:is(:where(.group\/tip):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .group-hover\/tip\:delay-300 {
+    &:is(:where(.group\/tip):hover *) {
+      @media (hover: hover) {
+        transition-delay: 300ms;
+      }
+    }
+  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -3402,14 +3433,6 @@
       }
     }
   }
-  .hover\:shadow-md {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .hover\:shadow-sm {
     &:hover {
       @media (hover: hover) {
@@ -3433,6 +3456,11 @@
       }
     }
   }
+  .focus\:border-\[var\(--border-accent\)\] {
+    &:focus {
+      border-color: var(--border-accent);
+    }
+  }
   .focus\:border-\[var\(--border-accent-hover\)\] {
     &:focus {
       border-color: var(--border-accent-hover);
@@ -3494,6 +3522,16 @@
       outline-style: none;
     }
   }
+  .focus-visible\:border-\[var\(--border-accent\)\] {
+    &:focus-visible {
+      border-color: var(--border-accent);
+    }
+  }
+  .focus-visible\:bg-transparent {
+    &:focus-visible {
+      background-color: transparent;
+    }
+  }
   .focus-visible\:opacity-100 {
     &:focus-visible {
       opacity: 100%;
@@ -4455,7 +4493,7 @@
       "ss01" 1;
   }
   ::selection {
-    background: rgba(56, 178, 172, 0.22);
+    background: var(--bg-selection);
     color: hsl(var(--hsl-foreground));
   }
   ::-webkit-scrollbar {
@@ -4466,12 +4504,16 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: hsl(var(--border) / 0.7);
-    border-radius: 3px;
+    background: hsl(var(--border) / 0.6);
+    border-radius: 9999px;
   }
   ::-webkit-scrollbar-thumb:hover {
     background: hsl(var(--muted-foreground) / 0.4);
   }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border) / 0.6) transparent;
+  }
 }
 @layer utilities {
   .text-gradient-sandbox {
@@ -4481,7 +4523,7 @@
     color: transparent;
   }
   .glow-sandbox {
-    box-shadow: 0 0 48px -10px hsl(var(--sandbox) / 0.45);
+    box-shadow: none;
   }
   .glass-card {
     background: hsl(var(--card));
@@ -4496,31 +4538,26 @@
     border: 1px solid hsl(var(--border));
   }
   .glass-panel {
-    background: hsl(var(--card) / 0.4);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid hsl(var(--primary) / 0.1);
-    box-shadow: 0 4px 30px hsl(var(--background) / 0.3);
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    box-shadow: var(--shadow-card);
   }
   .glass-panel-heavy {
-    background: hsl(var(--card) / 0.7);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
-    border: 1px solid hsl(var(--primary) / 0.12);
-    box-shadow: 0 8px 32px hsl(var(--background) / 0.5);
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    box-shadow: var(--shadow-card);
   }
   .glass-panel:hover {
-    border-color: hsl(var(--primary) / 0.25);
+    border-color: hsl(var(--border));
   }
   .glow-primary {
-    box-shadow: 0 0 40px hsl(var(--primary) / 0.25);
-    transition: box-shadow 0.4s ease-in-out;
+    box-shadow: none;
   }
   .glow-primary:hover {
-    box-shadow: 0 0 60px hsl(var(--primary) / 0.4);
+    box-shadow: none;
   }
   .text-glow {
-    text-shadow: 0 0 16px hsl(var(--primary) / 0.6);
+    text-shadow: none;
   }
   .gradient-text {
     background: linear-gradient(135deg, hsl(var(--primary) / 0.7) 0%, hsl(var(--primary)) 100%);
@@ -4532,12 +4569,7 @@
     background: linear-gradient(135deg, hsl(var(--primary) / 0.1) 0%, hsl(var(--primary) / 0.05) 100%);
   }
   .neural-mesh {
-    background-image: radial-gradient(
-      circle at 2px 2px,
-      hsl(var(--primary) / 0.07) 1px,
-      transparent 0
-    );
-    background-size: 32px 32px;
+    background-image: none;
   }
   .nav-active-indicator {
     position: relative;
@@ -4552,7 +4584,6 @@
     width: 3px;
     background-color: hsl(var(--primary));
     border-radius: 0 4px 4px 0;
-    box-shadow: 0 0 10px hsl(var(--primary));
   }
   .glass {
     background-color: var(--depth-2);
@@ -4562,17 +4593,10 @@
     position: relative;
   }
   .bg-mesh::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(ellipse 80% 50% at 20% 40%, var(--mesh-teal), transparent),
-      radial-gradient(ellipse 60% 40% at 80% 20%, var(--mesh-violet), transparent),
-      radial-gradient(ellipse 50% 60% at 50% 80%, var(--mesh-blue), transparent);
-    pointer-events: none;
-    z-index: 0;
+    content: none;
   }
   .noise {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
+    background-image: none;
     pointer-events: none;
   }
   .status-dot {
@@ -4584,7 +4608,6 @@
   }
   .status-dot-running {
     background: var(--status-running);
-    box-shadow: var(--shadow-status-running);
   }
   .status-dot-creating {
     background: var(--status-creating);
@@ -4601,7 +4624,6 @@
   }
   .status-dot-error {
     background: var(--status-error);
-    box-shadow: var(--shadow-status-error);
   }
   .status-dot-deleted {
     background: var(--status-deleted);
@@ -4627,6 +4649,19 @@
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
+  .animate-row-in {
+    animation: row-in 0.18s ease-out;
+  }
+  @keyframes row-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
   .pulse-ring {
     position: relative;
   }

package/dist/workspace.js

@@ -19,7 +19,7 @@ import {
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-AUFV7766.js";
+} from "./chunk-6NDOA4SB.js";
 import "./chunk-EI44GEQ5.js";
 export {
   AgentWorkbench,

package/package.json

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