@tangle-network/sandbox-ui 0.10.2 → 0.10.3

package/dist/{chunk-2XCOGNZP.js → chunk-7LBHRASD.js}

@@ -33,6 +33,7 @@ var SIDEBAR_MODE_KEY = "sandbox-sidebar-mode";
 var SIDEBAR_RAIL_WIDTH = 64;
 var SIDEBAR_PANEL_WIDTH = 260;
 var SIDEBAR_TOTAL_WIDTH = SIDEBAR_RAIL_WIDTH + SIDEBAR_PANEL_WIDTH;
+var SIDEBAR_MOBILE_WIDTH = 256;
 var SidebarContext = React.createContext(null);
 function readStorage(key, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -166,8 +167,18 @@ function Sidebar({ children, className, style }) {
     }
   );
 }
-function SidebarRail({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0 bg-transparent", className), children });
+function SidebarRail({ children, className, wide = false }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full shrink-0 bg-transparent",
+        wide ? "w-full" : "w-16",
+        className
+      ),
+      children
+    }
+  );
 }
 function SidebarRailHeader({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-border", className), children });
@@ -181,7 +192,7 @@ function SidebarRailFooter({ children, className }) {
 function RailSeparator({ className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--md3-outline-variant)]", className) });
 }
-function RailButton({ icon: Icon2, label, isActive, badge, onClick, className }) {
+function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, showLabel }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -189,7 +200,8 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className })
       onClick,
       title: label,
       className: cn(
-        "group relative flex items-center justify-center w-11 h-11 rounded-xl transition-all duration-200",
+        "group relative flex items-center justify-center rounded-xl transition-all duration-200",
+        showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
         "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
         "active:scale-95",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
@@ -198,23 +210,25 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className })
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2(Icon2, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx2(Icon2, { className: "h-5 w-5 shrink-0" }),
+        showLabel && /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium", children: label }),
         badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-[var(--md3-on-primary)] px-1 shadow-sm", children: badge > 99 ? "99+" : badge })
       ]
     }
   );
 }
-function RailModeButton({ mode, icon, label, badge, className }) {
+function RailModeButton({ mode, icon, label, badge, className, showLabel }) {
   const { panelOpen, mode: currentMode, switchMode } = useSidebar();
   return /* @__PURE__ */ jsx2(
     RailButton,
     {
       icon,
       label,
+      isActive: mode === currentMode && panelOpen,
       badge,
-      isActive: panelOpen && currentMode === mode,
       onClick: () => switchMode(mode),
-      className
+      className,
+      showLabel
     }
   );
 }
@@ -243,8 +257,11 @@ function SidebarContent({ children, className }) {
   return /* @__PURE__ */ jsx2(
     "main",
     {
-      className: cn("min-h-screen transition-[margin-left] duration-200 ease-in-out", className),
-      style: { marginLeft: contentMargin },
+      className: cn(
+        "min-h-screen transition-[margin-left] duration-200 ease-in-out lg:ml-[var(--sb-content-margin,0px)]",
+        className
+      ),
+      style: { "--sb-content-margin": `${contentMargin}px` },
       children
     }
   );
@@ -576,58 +593,86 @@ function DashboardLayoutInner({
   }, [notificationsOpen]);
   const { contentMargin, hidden, mode, hasPanels, panelOpen } = useSidebar();
   const modeSet = React3.useMemo(() => new Set(modeItems), [modeItems]);
-  const sidebarUser = user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0;
+  const sidebarUser = React3.useMemo(
+    () => user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0,
+    [user?.email, user?.name, user?.tier, user?.avatarUrl]
+  );
   const activePanel = panels.find((p) => p.mode === mode);
-  const sidebarContent = /* @__PURE__ */ jsxs6(Fragment4, { children: [
-    /* @__PURE__ */ jsxs6(SidebarRail, { children: [
-      /* @__PURE__ */ jsx7(SidebarRailHeader, { children: /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-muted/50", children: /* @__PURE__ */ jsx7(Logo, { variant, size: "sm", iconOnly: true }) }) }),
-      /* @__PURE__ */ jsx7(SidebarRailNav, { children: navItems.map((item, i) => {
-        const isMode = modeSet.has(item.id);
-        const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
-        const showSep = i > 0 && isMode && !prevIsMode;
-        return /* @__PURE__ */ jsxs6(React3.Fragment, { children: [
-          showSep && /* @__PURE__ */ jsx7(RailSeparator, {}),
-          isMode ? /* @__PURE__ */ jsx7(
-            RailModeButton,
-            {
-              mode: item.id,
-              icon: item.icon,
-              label: item.label,
-              badge: item.badge
-            }
-          ) : /* @__PURE__ */ jsx7(Link, { href: item.href, to: item.href, children: /* @__PURE__ */ jsx7(
-            RailButton,
+  const buildSidebarContent = React3.useCallback(
+    (showLabels) => /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsxs6(SidebarRail, { wide: showLabels, children: [
+        /* @__PURE__ */ jsx7(SidebarRailHeader, { children: /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-muted/50", children: /* @__PURE__ */ jsx7(Logo, { variant, size: "sm", iconOnly: true }) }) }),
+        /* @__PURE__ */ jsx7(SidebarRailNav, { children: navItems.map((item, i) => {
+          const isMode = modeSet.has(item.id);
+          const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
+          const showSep = i > 0 && isMode && !prevIsMode;
+          return /* @__PURE__ */ jsxs6(React3.Fragment, { children: [
+            showSep && /* @__PURE__ */ jsx7(RailSeparator, {}),
+            isMode ? /* @__PURE__ */ jsx7(
+              RailModeButton,
+              {
+                mode: item.id,
+                icon: item.icon,
+                label: item.label,
+                badge: item.badge,
+                showLabel: showLabels
+              }
+            ) : /* @__PURE__ */ jsx7(Link, { href: item.href, to: item.href, children: /* @__PURE__ */ jsx7(
+              RailButton,
+              {
+                icon: item.icon,
+                label: item.label,
+                isActive: activeNavId === item.id,
+                showLabel: showLabels
+              }
+            ) })
+          ] }, item.id);
+        }) }),
+        /* @__PURE__ */ jsxs6(SidebarRailFooter, { children: [
+          onSettingsClick ? /* @__PURE__ */ jsx7(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick, showLabel: showLabels }) : /* @__PURE__ */ jsx7(Link, { href: settingsHref, to: settingsHref, children: /* @__PURE__ */ jsx7(RailButton, { icon: SettingsIconSmall, label: "Settings", showLabel: showLabels }) }),
+          railFooter,
+          /* @__PURE__ */ jsx7(RailSeparator, {}),
+          /* @__PURE__ */ jsx7(
+            ProfileAvatar,
             {
-              icon: item.icon,
-              label: item.label,
-              isActive: activeNavId === item.id
+              user: sidebarUser,
+              isLoading,
+              onLogout,
+              onSettingsClick,
+              settingsHref,
+              LinkComponent,
+              children: profileMenuItems
             }
-          ) })
-        ] }, item.id);
-      }) }),
-      /* @__PURE__ */ jsxs6(SidebarRailFooter, { children: [
-        onSettingsClick ? /* @__PURE__ */ jsx7(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick }) : /* @__PURE__ */ jsx7(Link, { href: settingsHref, to: settingsHref, children: /* @__PURE__ */ jsx7(RailButton, { icon: SettingsIconSmall, label: "Settings" }) }),
-        railFooter,
-        /* @__PURE__ */ jsx7(RailSeparator, {}),
-        /* @__PURE__ */ jsx7(
-          ProfileAvatar,
-          {
-            user: sidebarUser,
-            isLoading,
-            onLogout,
-            onSettingsClick,
-            settingsHref,
-            LinkComponent,
-            children: profileMenuItems
-          }
-        )
+          )
+        ] })
+      ] }),
+      panels.length > 0 && /* @__PURE__ */ jsxs6(SidebarPanel, { children: [
+        /* @__PURE__ */ jsx7(SidebarPanelHeader, { title: activePanel?.title ?? mode }),
+        /* @__PURE__ */ jsx7(SidebarPanelContent, { children: activePanel?.content })
       ] })
     ] }),
-    panels.length > 0 && /* @__PURE__ */ jsxs6(SidebarPanel, { children: [
-      /* @__PURE__ */ jsx7(SidebarPanelHeader, { title: activePanel?.title ?? mode }),
-      /* @__PURE__ */ jsx7(SidebarPanelContent, { children: activePanel?.content })
-    ] })
-  ] });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — only the inputs that actually affect the sidebar tree
+    [
+      Link,
+      variant,
+      navItems,
+      modeSet,
+      activeNavId,
+      onSettingsClick,
+      settingsHref,
+      railFooter,
+      sidebarUser,
+      isLoading,
+      onLogout,
+      LinkComponent,
+      profileMenuItems,
+      panels,
+      activePanel,
+      mode
+    ]
+  );
+  const sidebarContent = React3.useMemo(() => buildSidebarContent(false), [buildSidebarContent]);
+  const mobileSidebarContent = React3.useMemo(() => buildSidebarContent(true), [buildSidebarContent]);
   return /* @__PURE__ */ jsxs6("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsxs6(
       "nav",
@@ -638,19 +683,22 @@ function DashboardLayoutInner({
           width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
         },
         children: [
-          /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-8", children: topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx7("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx7(
-            Link,
-            {
-              href: link.href,
-              to: link.href,
-              className: cn(
-                "transition-all duration-300 px-2 py-1 rounded",
-                activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
-              ),
-              children: link.label
-            },
-            link.href
-          )) }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-8", children: [
+            /* @__PURE__ */ jsx7(Link, { href: "/", to: "/", className: "lg:hidden flex items-center p-1 rounded-md hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsx7(Logo, { variant, size: "sm", iconOnly: true }) }),
+            topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx7("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx7(
+              Link,
+              {
+                href: link.href,
+                to: link.href,
+                className: cn(
+                  "transition-all duration-300 px-2 py-1 rounded",
+                  activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+                ),
+                children: link.label
+              },
+              link.href
+            )) })
+          ] }),
           /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-4", children: [
             onNewSandbox && /* @__PURE__ */ jsxs6(
               "button",
@@ -742,13 +790,14 @@ function DashboardLayoutInner({
           "fixed top-14 bottom-0 left-0 z-30 flex bg-background transition-transform duration-200 lg:hidden",
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
         ),
-        style: { width: panelOpen && hasPanels ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH },
-        children: sidebarContent
+        style: {
+          width: panelOpen && hasPanels ? SIDEBAR_MOBILE_WIDTH + SIDEBAR_PANEL_WIDTH : SIDEBAR_MOBILE_WIDTH
+        },
+        children: mobileSidebarContent
       }
     ),
     /* @__PURE__ */ jsx7(Sidebar, { className: cn("hidden lg:flex", sidebarClassName), children: sidebarContent }),
-    /* @__PURE__ */ jsx7(SidebarContent, { className: cn("pt-16 px-8 pb-8 hidden lg:block bg-background", contentClassName), children }),
-    /* @__PURE__ */ jsx7("main", { className: cn("pt-16 px-6 pb-8 min-h-screen lg:hidden bg-background", contentClassName), children }),
+    /* @__PURE__ */ jsx7(SidebarContent, { className: cn("pt-16 px-6 pb-8 lg:px-8 bg-background", contentClassName), children }),
     footer
   ] });
 }
@@ -1547,6 +1596,7 @@ export {
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_PANEL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
+  SIDEBAR_MOBILE_WIDTH,
   SidebarProvider,
   useSidebar,
   Sidebar,

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ag as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ah as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ai as Variant, ad as VariantList, ae as VariantListProps, aj as VariantOutcome, ak as VariantStatus, af as useSidebar } from './variant-list-BNwUOSgz.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ah as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ai as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_MOBILE_WIDTH, G as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, aj as Variant, ae as VariantList, af as VariantListProps, ak as VariantOutcome, al as VariantStatus, ag as useSidebar } from './variant-list-DHP2OXFE.js';
 export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-SSiOgeQI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { a as TemplateCard, T as TemplateCardData, b as TemplateCardProps } from './template-card-BAtvcAkU.js';

package/dist/dashboard.js

@@ -17,6 +17,7 @@ import {
   RailModeButton,
   RailSeparator,
   ResourceMeter,
+  SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
@@ -34,7 +35,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-2XCOGNZP.js";
+} from "./chunk-7LBHRASD.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -944,6 +945,7 @@ export {
   RailModeButton,
   RailSeparator,
   ResourceMeter,
+  SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,

package/dist/globals.css

@@ -705,6 +705,9 @@
   .-top-1 {
     top: calc(var(--spacing) * -1);
   }
+  .-top-1\.5 {
+    top: calc(var(--spacing) * -1.5);
+  }
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
@@ -744,6 +747,9 @@
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
+  .-right-1\.5 {
+    right: calc(var(--spacing) * -1.5);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -1164,9 +1170,6 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
-  .min-h-\[240px\] {
-    min-height: 240px;
-  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1631,6 +1634,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -2122,21 +2128,12 @@
   .bg-\[\#8E59FF\] {
     background-color: #8E59FF;
   }
-  .bg-\[\#27c93f\]\/80 {
-    background-color: color-mix(in oklab, #27c93f 80%, transparent);
-  }
   .bg-\[\#FEBC2E\] {
     background-color: #FEBC2E;
   }
   .bg-\[\#FF5F57\] {
     background-color: #FF5F57;
   }
-  .bg-\[\#ff5f56\]\/80 {
-    background-color: color-mix(in oklab, #ff5f56 80%, transparent);
-  }
-  .bg-\[\#ffbd2e\]\/80 {
-    background-color: color-mix(in oklab, #ffbd2e 80%, transparent);
-  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
     background-color: var(--bg-card);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2406,9 +2403,6 @@
   .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
     background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
   }
-  .bg-\[radial-gradient\(circle_at_top\,rgba\(173\,163\,255\,0\.05\)_0\,transparent_100\%\)\] {
-    background-image: radial-gradient(circle at top,rgba(173,163,255,0.05) 0,transparent 100%);
-  }
   .from-white\/5 {
     --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2648,9 +2642,6 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
-  .pl-3 {
-    padding-left: calc(var(--spacing) * 3);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -4183,9 +4174,9 @@
       grid-column: span 1 / span 1;
     }
   }
-  .lg\:block {
+  .lg\:ml-\[var\(--sb-content-margin\,0px\)\] {
     @media (width >= 64rem) {
-      display: block;
+      margin-left: var(--sb-content-margin,0px);
     }
   }
   .lg\:flex {
@@ -4223,6 +4214,11 @@
       padding: calc(var(--spacing) * 4);
     }
   }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   .xl\:col-span-4 {
     @media (width >= 80rem) {
       grid-column: span 4 / span 4;

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { b as ToolPart } from './parts-CyGkM6Fp.js';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
 export { F as FileNode, a as FileTabData, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
 export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ac as TopNavLink, ad as VariantList, ae as VariantListProps, af as useSidebar } from './variant-list-BNwUOSgz.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_MOBILE_WIDTH, G as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, ad as TopNavLink, ae as VariantList, af as VariantListProps, ag as useSidebar } from './variant-list-DHP2OXFE.js';
 export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-SSiOgeQI.js';
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CodeBlock as CodeBlockDisplay, CopyButton, Markdown, MarkdownProps } from './markdown.js';

package/dist/index.js

@@ -195,6 +195,7 @@ import {
   RailModeButton,
   RailSeparator,
   ResourceMeter,
+  SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
@@ -212,7 +213,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-2XCOGNZP.js";
+} from "./chunk-7LBHRASD.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -449,6 +450,7 @@ export {
   ResourceMeter,
   RunGroup,
   RuntimePane,
+  SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,

package/dist/pages.d.ts

@@ -39,6 +39,32 @@ interface ResourceLimits {
     ramMaxGB?: number;
     storageMaxGB?: number;
 }
+interface ModelOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface PricingRates {
+    cpuPerHr: number;
+    ramPerGbHr: number;
+    diskPerGbHr: number;
+    minChargePerHr?: number;
+}
+/**
+ * Describes one selectable plan tier for the purpose of badging locked
+ * presets with the *correct* upgrade target. Without this, every locked
+ * preset shows "Pro" — wrong for a user who is already on Pro and whose
+ * next step up is Enterprise.
+ */
+interface PlanTierInfo {
+    /** Stable id (e.g. "free" | "pro" | "enterprise") */
+    id: string;
+    /** Short badge label shown on locked presets (e.g. "Pro", "Enterprise") */
+    label: string;
+    cpuMax: number;
+    ramMaxGB: number;
+    storageMaxGB: number;
+}
 interface ProvisioningWizardProps {
     environments?: EnvironmentOption[];
     onLoadEnvironments?: () => Promise<EnvironmentEntry[]>;
@@ -56,6 +82,16 @@ interface ProvisioningWizardProps {
     onLoadStartupScripts?: () => Promise<StartupScriptEntry[]>;
     /** Plan-based resource limits — caps the slider maximums */
     resourceLimits?: ResourceLimits;
+    /** Override the list of model engines shown in step 3 */
+    modelOptions?: ModelOption[];
+    /** Real pricing rates from the API for accurate cost calculation */
+    pricingRates?: PricingRates;
+    /**
+     * Ordered list of plan tiers (smallest to largest). When provided,
+     * locked presets are badged with the label of the smallest tier that
+     * would unlock them. Falls back to a generic "Pro" badge when omitted.
+     */
+    planTiers?: PlanTierInfo[];
 }
 interface StartupScriptEntry {
     id: string;
@@ -82,7 +118,7 @@ interface ProvisioningConfig {
     startupScriptIds?: string[];
 }
 declare function resolveEnvironment(env: EnvironmentEntry): EnvironmentOption;
-declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
+declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, modelOptions, pricingRates, planTiers, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
 
 type ProductVariant = "sandbox";
 interface StandalonePricingPageProps {
@@ -234,4 +270,4 @@ type TemplateCategory = "blockchain" | "ai-ml" | "frontend" | "infrastructure" |
 type TemplatePreset = Omit<ProvisioningConfig, "name" | "gitUrl" | "envVars" | "driver" | "startupScriptIds">;
 declare function getPresetForTemplate(id: string): TemplatePreset;
 
-export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };
+export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, type ModelOption, type PlanTierInfo, type PricingRates, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };

package/dist/pages.js

@@ -301,6 +301,10 @@ import * as React2 from "react";
 import { ArrowLeft, Layers, Cpu, Bot, Info, Loader2, Settings, Plus, Trash2, Check } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var VALID_DRIVERS = /* @__PURE__ */ new Set(["docker", "firecracker", "tangle"]);
+var DEFAULT_MODEL_OPTIONS = [
+  { value: "claude-sonnet", label: "Claude Sonnet 4.6 (Highly Capable)" }
+];
+var DEFAULT_MODEL_TIER = DEFAULT_MODEL_OPTIONS[0]?.value ?? "claude-sonnet";
 var STACK_DISPLAY = {
   universal: { name: "Default", abbr: "D", color: "violet", textClass: "text-[var(--surface-violet-text)]" },
   ethereum: { name: "Ethereum", abbr: "\u039E", color: "blue", textClass: "text-[var(--surface-info-text)]" },
@@ -344,8 +348,22 @@ var RAM_MIN = 2;
 var RAM_MAX = 32;
 var STORAGE_MIN = 20;
 var STORAGE_MAX = 512;
-function calcCost(cpu, ram, storage) {
-  const cost = cpu * 0.045 + ram * 5e-3 + storage * 11e-4;
+var DEFAULT_PRICING_RATES = {
+  cpuPerHr: 0.045,
+  ramPerGbHr: 5e-3,
+  diskPerGbHr: 11e-4,
+  minChargePerHr: void 0
+};
+var RAW_PRESETS = [
+  { name: "Lightweight", cpu: 2, ram: 4, storage: 50 },
+  { name: "Standard", cpu: 4, ram: 16, storage: 128 },
+  { name: "Performance", cpu: 8, ram: 32, storage: 256 }
+];
+function calcCost(cpu, ram, storage, rates) {
+  const cost = Math.max(
+    rates.minChargePerHr ?? 0,
+    cpu * rates.cpuPerHr + ram * rates.ramPerGbHr + storage * rates.diskPerGbHr
+  );
   return cost.toFixed(2);
 }
 function ProvisioningWizard({
@@ -359,7 +377,10 @@ function ProvisioningWizard({
   defaultConfig,
   skipToReview,
   onLoadStartupScripts,
-  resourceLimits
+  resourceLimits,
+  modelOptions,
+  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));
@@ -399,8 +420,19 @@ function ProvisioningWizard({
     setRamGB((prev) => Math.min(prev, ramMax));
     setStorageGB((prev) => Math.min(prev, storageMax));
   }, [cpuMax, ramMax, storageMax]);
-  const [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? "claude-sonnet");
+  const [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? DEFAULT_MODEL_TIER);
   const [systemPrompt, setSystemPrompt] = React2.useState(dc?.systemPrompt ?? "");
+  React2.useEffect(() => {
+    const options = modelOptions ?? DEFAULT_MODEL_OPTIONS;
+    if (options.length === 0) return;
+    const currentOption = options.find((o) => o.value === modelTier);
+    if (!currentOption || currentOption.disabled) {
+      const firstAvailable = options.find((o) => !o.disabled);
+      if (firstAvailable && firstAvailable.value !== modelTier) {
+        setModelTier(firstAvailable.value);
+      }
+    }
+  }, [modelOptions, modelTier]);
   const [name, setName] = React2.useState(dc?.name ?? "");
   const [gitUrl, setGitUrl] = React2.useState(dc?.gitUrl ?? "");
   const [envVars, setEnvVars] = React2.useState(dc?.envVars ?? [{ key: "", value: "" }]);
@@ -449,12 +481,45 @@ function ProvisioningWizard({
     setStorageGB(Math.min(storage, storageMax));
     setActivePreset(name2);
   };
-  const presets = [
-    { name: "Lightweight", cpu: Math.min(2, cpuMax), ram: Math.min(4, ramMax), storage: Math.min(50, storageMax) },
-    { name: "Standard", cpu: Math.min(4, cpuMax), ram: Math.min(16, ramMax), storage: Math.min(128, storageMax) },
-    { name: "Performance", cpu: Math.min(8, cpuMax), ram: Math.min(32, ramMax), storage: Math.min(256, storageMax) }
-  ];
-  const hourCost = calcCost(cpuCores, ramGB, storageGB);
+  const presets = RAW_PRESETS.map((p) => {
+    const locked = p.cpu > cpuMax || p.ram > ramMax || p.storage > storageMax;
+    let unlockLabel;
+    if (locked && planTiers && planTiers.length > 0) {
+      const unlocking = planTiers.find(
+        (t) => p.cpu <= t.cpuMax && p.ram <= t.ramMaxGB && p.storage <= t.storageMaxGB
+      );
+      unlockLabel = unlocking?.label;
+    }
+    return {
+      ...p,
+      fits: !locked,
+      locked,
+      unlockLabel: unlockLabel ?? "Pro"
+    };
+  });
+  const didInitPresetFromDcRef = React2.useRef(false);
+  const lastLimitsRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const limitsUnchanged = lastLimitsRef.current !== null && lastLimitsRef.current.cpu === cpuMax && lastLimitsRef.current.ram === ramMax && lastLimitsRef.current.storage === storageMax;
+    if (limitsUnchanged) return;
+    lastLimitsRef.current = { cpu: cpuMax, ram: ramMax, storage: storageMax };
+    if (dc && !didInitPresetFromDcRef.current) {
+      didInitPresetFromDcRef.current = true;
+      const matching = RAW_PRESETS.find(
+        (p) => p.cpu === dc.cpuCores && p.ram === dc.ramGB && p.storage === dc.storageGB
+      );
+      if (matching) setActivePreset(matching.name);
+      return;
+    }
+    const largestFitting = [...RAW_PRESETS].reverse().find((p) => p.cpu <= cpuMax && p.ram <= ramMax && p.storage <= storageMax);
+    if (largestFitting) {
+      applyPreset(largestFitting.name, largestFitting.cpu, largestFitting.ram, largestFitting.storage);
+    } else {
+      setActivePreset(null);
+    }
+  }, [cpuMax, ramMax, storageMax, dc]);
+  const effectivePricingRates = pricingRates ?? DEFAULT_PRICING_RATES;
+  const hourCost = calcCost(cpuCores, ramGB, storageGB, effectivePricingRates);
   return /* @__PURE__ */ jsxs2("div", { className: cn("max-w-6xl mx-auto flex flex-col", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "mb-6 flex items-center gap-4 shrink-0", children: [
       onBack && /* @__PURE__ */ jsx2("button", { type: "button", onClick: onBack, className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border hover:bg-muted/50 transition-colors text-foreground", children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-5 w-5" }) }),
@@ -492,7 +557,11 @@ function ProvisioningWizard({
                 setCpuCores(Math.min(4, cpuMax));
                 setRamGB(Math.min(16, ramMax));
                 setStorageGB(Math.min(128, storageMax));
-                setModelTier("claude-sonnet");
+                {
+                  const resetOptions = modelOptions ?? DEFAULT_MODEL_OPTIONS;
+                  const firstAvailable = resetOptions.find((o) => !o.disabled);
+                  setModelTier(firstAvailable?.value ?? DEFAULT_MODEL_TIER);
+                }
                 setSystemPrompt("");
                 setName("");
                 setGitUrl("");
@@ -550,59 +619,74 @@ function ProvisioningWizard({
             /* @__PURE__ */ jsxs2("div", { className: "mb-6", children: [
               /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-3", children: "Compute Presets" }),
               /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-3", children: presets.map((p) => {
-                const active = activePreset === p.name;
-                return /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(p.name, p.cpu, p.ram, p.storage), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", active ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", active ? "text-primary" : "text-foreground"), children: p.name }),
-                  /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
-                    p.cpu,
-                    "C / ",
-                    p.ram,
-                    "G / ",
-                    p.storage,
-                    "G"
-                  ] })
-                ] }, p.name);
+                const active = activePreset === p.name && !p.locked;
+                return /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => !p.locked && applyPreset(p.name, p.cpu, p.ram, p.storage),
+                    disabled: p.locked,
+                    className: cn(
+                      "p-3 rounded-[14px] transition-all duration-200 text-center group border relative",
+                      active ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : p.locked ? "bg-muted/30 border-border opacity-60 cursor-not-allowed" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"
+                    ),
+                    children: [
+                      p.locked && /* @__PURE__ */ jsx2("div", { className: "absolute -top-1.5 -right-1.5 bg-primary text-primary-foreground text-[9px] font-bold px-1.5 py-0.5 rounded-full uppercase tracking-wider", children: p.unlockLabel }),
+                      /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", active ? "text-primary" : p.locked ? "text-muted-foreground" : "text-foreground"), children: p.name }),
+                      /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
+                        p.cpu,
+                        " vCPU",
+                        p.cpu === 1 ? "" : "s",
+                        " / ",
+                        p.ram,
+                        "GB / ",
+                        p.storage,
+                        "GB"
+                      ] })
+                    ]
+                  },
+                  p.name
+                );
               }) })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "space-y-6", children: [
-              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: cpuMax, step: 0.5, unit: "vCPUs" },
+              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: cpuMax, step: 0.5, unit: "vCPU" },
               { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: ramMax, step: 1, unit: "GB" },
               { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: storageMax, step: 8, unit: "GB" }
-            ].map(({ label, value, setter, min, max, step: s, unit }) => /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end border-b border-border pb-1.5 mb-2", children: [
-                /* @__PURE__ */ jsx2("label", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: label }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-xl font-bold text-foreground tracking-tight", children: [
-                  value,
-                  " ",
-                  /* @__PURE__ */ jsx2("span", { className: "text-xs text-primary ml-1", children: unit })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx2(
-                "input",
-                {
-                  type: "range",
-                  min,
-                  max,
-                  step: s,
-                  value,
-                  onChange: (e) => {
-                    setter(+e.target.value);
-                    setActivePreset(null);
-                  },
-                  className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
-                }
-              ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  min,
-                  unit
+            ].map(({ label, value, setter, min, max, step: s, unit }) => {
+              const displayUnit = unit === "vCPU" ? `${value} vCPU${value === 1 ? "" : "s"}` : `${value}${unit}`;
+              return /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end border-b border-border pb-1.5 mb-2", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: label }),
+                  /* @__PURE__ */ jsx2("span", { className: "text-xl font-bold text-foreground tracking-tight", children: displayUnit })
                 ] }),
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  max,
-                  unit
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    type: "range",
+                    min,
+                    max,
+                    step: s,
+                    value,
+                    onChange: (e) => {
+                      setter(+e.target.value);
+                      setActivePreset(null);
+                    },
+                    className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
+                  }
+                ),
+                /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
+                  /* @__PURE__ */ jsxs2("span", { children: [
+                    min,
+                    unit === "vCPU" ? min === 1 ? " vCPU" : " vCPUs" : unit
+                  ] }),
+                  /* @__PURE__ */ jsxs2("span", { children: [
+                    max,
+                    unit === "vCPU" ? max === 1 ? " vCPU" : " vCPUs" : unit
+                  ] })
                 ] })
-              ] })
-            ] }, label)) })
+              ] }, label);
+            }) })
           ] }) }),
           (!isMultistep || currentStep === 3) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "bg-card border border-border rounded-[24px] p-6 shadow-2xl relative overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 mb-5", children: [
@@ -612,19 +696,26 @@ function ProvisioningWizard({
             /* @__PURE__ */ jsxs2("div", { className: "space-y-5", children: [
               /* @__PURE__ */ jsxs2("div", { children: [
                 /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Model Engine" }),
-                /* @__PURE__ */ jsxs2(
+                /* @__PURE__ */ jsx2(
                   "select",
                   {
                     value: modelTier,
                     onChange: (e) => setModelTier(e.target.value),
-                    className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none",
-                    children: [
-                      /* @__PURE__ */ jsx2("option", { value: "llama-3-8b", className: "bg-gray-900", children: "Llama-3-8B-Instruct (Lightweight)" }),
-                      /* @__PURE__ */ jsx2("option", { value: "mistral-7b", className: "bg-gray-900", children: "Mistral-7B-v0.2 (Efficient)" }),
-                      /* @__PURE__ */ jsx2("option", { value: "claude-sonnet", className: "bg-gray-900", children: "Claude Sonnet 4.6 (Highly Capable)" })
-                    ]
+                    disabled: modelOptions && modelOptions.filter((o) => !o.disabled).length === 0,
+                    className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none disabled:opacity-50 disabled:cursor-not-allowed",
+                    children: (modelOptions ?? DEFAULT_MODEL_OPTIONS).map((option) => /* @__PURE__ */ jsx2(
+                      "option",
+                      {
+                        value: option.value,
+                        disabled: option.disabled,
+                        className: "bg-gray-900",
+                        children: option.label
+                      },
+                      option.value
+                    ))
                   }
-                )
+                ),
+                modelOptions && modelOptions.length > 0 && modelOptions.every((o) => o.disabled) && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground mt-2", children: "All model options are currently disabled. Please upgrade your plan or contact support." })
               ] }),
               /* @__PURE__ */ jsxs2("div", { children: [
                 /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Core Directives (System Prompt)" }),
@@ -782,57 +873,6 @@ function ProvisioningWizard({
         ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-4 space-y-4", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "bg-card border border-primary/15 rounded-[24px] overflow-hidden shadow-2xl relative", children: [
-          /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(173,163,255,0.05)_0,transparent_100%)] pointer-events-none" }),
-          /* @__PURE__ */ jsxs2("div", { className: "bg-muted/50 border-b border-border px-4 py-3 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#ff5f56]/80" }),
-              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#ffbd2e]/80" }),
-              /* @__PURE__ */ jsx2("div", { className: "h-3 w-3 rounded-full bg-[#27c93f]/80" })
-            ] }),
-            /* @__PURE__ */ jsx2("div", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-widest ml-2 border-l border-border pl-3", children: "deploy_sequence.sh" })
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "p-5 font-mono text-xs space-y-3 min-h-[240px] relative z-10 text-[13px]", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "text-green-400", children: [
-              "root@tangle:~# ",
-              /* @__PURE__ */ jsx2("span", { className: "text-foreground/80", children: "tangle-cli provision --new" })
-            ] }),
-            /* @__PURE__ */ jsx2("div", { className: "text-muted-foreground/70", children: "Initializing deployment handshake..." }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Bound Platform: ",
-              /* @__PURE__ */ jsx2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" }, `env-${selectedEnv}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Allocation CPU: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
-                cpuCores,
-                " Cores"
-              ] }, `cpu-${cpuCores}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Allocation RAM: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
-                ramGB,
-                "GB"
-              ] }, `ram-${ramGB}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-foreground/70", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-primary mr-2", children: "\u2713" }),
-              " Mounted Storage: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground font-bold animate-in fade-in duration-300", children: [
-                storageGB,
-                "GB NVMe"
-              ] }, `disk-${storageGB}`)
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "pt-3 flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-primary animate-pulse" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Awaiting user confirmation..." })
-            ] })
-          ] })
-        ] }),
         /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-[24px] bg-card border border-primary/15 relative overflow-hidden", children: [
           /* @__PURE__ */ jsx2("div", { className: "hidden" }),
           /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4 relative z-10", children: [
@@ -846,32 +886,48 @@ function ProvisioningWizard({
             ] }, hourCost),
             /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: "/ hour" })
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "space-y-2 relative z-10 bg-card border border-border rounded-xl p-3", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
-              /* @__PURE__ */ jsx2("span", { children: "COMPUTE" }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground", children: [
-                "$",
-                (cpuCores * 0.045).toFixed(2),
-                "/h"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
-              /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
-                "$",
-                (ramGB * 5e-3).toFixed(2),
-                "/h"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
-              /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
-                "$",
-                (storageGB * 11e-4).toFixed(2),
-                "/h"
+          (() => {
+            const computeCost = cpuCores * effectivePricingRates.cpuPerHr;
+            const memoryCost = ramGB * effectivePricingRates.ramPerGbHr;
+            const storageCost = storageGB * effectivePricingRates.diskPerGbHr;
+            const lineSum = computeCost + memoryCost + storageCost;
+            const floor = effectivePricingRates.minChargePerHr ?? 0;
+            const floorApplies = floor > lineSum;
+            return /* @__PURE__ */ jsxs2("div", { className: "space-y-2 relative z-10 bg-card border border-border rounded-xl p-3", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+                /* @__PURE__ */ jsx2("span", { children: "COMPUTE" }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-foreground", children: [
+                  "$",
+                  computeCost.toFixed(2),
+                  "/h"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+                /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
+                  "$",
+                  memoryCost.toFixed(2),
+                  "/h"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+                /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
+                  "$",
+                  storageCost.toFixed(2),
+                  "/h"
+                ] })
+              ] }),
+              floorApplies && /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-primary border-t border-border pt-2", children: [
+                /* @__PURE__ */ jsx2("span", { children: "MIN CHARGE" }),
+                /* @__PURE__ */ jsxs2("span", { children: [
+                  "$",
+                  (floor - lineSum).toFixed(2),
+                  "/h"
+                ] })
               ] })
-            ] })
-          ] })
+            ] });
+          })()
         ] }),
         deployError && /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-destructive/30 bg-destructive/10 p-3 flex items-center gap-2", children: [
           /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-destructive shrink-0" }),
@@ -1839,46 +1895,64 @@ function SecretsPage({ apiClient, className }) {
         /* @__PURE__ */ jsx5(DialogTitle, { children: "Create Secret" }),
         /* @__PURE__ */ jsx5(DialogDescription, { children: "Secrets are automatically exposed as environment variables across all your new sandboxes." })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5("label", { className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Name" }),
-          /* @__PURE__ */ jsx5(
-            "input",
-            {
-              type: "text",
-              value: newName,
-              onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
-              placeholder: "MY_SECRET_KEY",
-              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"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5("label", { className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Value" }),
-          /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx5(
-              "input",
-              {
-                type: showValue ? "text" : "password",
-                value: newValue,
-                onChange: (e) => setNewValue(e.target.value),
-                placeholder: "Enter secret value...",
-                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"
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowValue(!showValue),
-                className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
-                children: showValue ? /* @__PURE__ */ jsx5(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(Eye, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx5("p", { className: "mt-1.5 text-xs text-muted-foreground", children: "This value cannot be retrieved after creation." })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxs5(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            if (newName.trim() && newValue.trim() && !isCreating) handleCreate();
+          },
+          className: "space-y-4",
+          children: [
+            /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx5("label", { htmlFor: "secret-name", className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Name" }),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  id: "secret-name",
+                  name: "secret-name",
+                  type: "text",
+                  value: newName,
+                  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"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx5("label", { htmlFor: "secret-value", className: "block text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Value" }),
+              /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx5(
+                  "input",
+                  {
+                    id: "secret-value",
+                    name: "secret-value",
+                    type: showValue ? "text" : "password",
+                    value: newValue,
+                    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"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    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__ */ jsx5(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx5(Eye, { className: "h-4 w-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx5("p", { className: "mt-1.5 text-xs text-muted-foreground", children: "This value cannot be retrieved after creation." })
+            ] }),
+            /* @__PURE__ */ jsx5("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": "true", children: "Submit" })
+          ]
+        }
+      ),
       createError && /* @__PURE__ */ jsx5("p", { className: "mt-3 text-sm text-destructive", children: createError }),
       /* @__PURE__ */ jsxs5(DialogFooter, { children: [
         /* @__PURE__ */ jsx5(
@@ -1958,10 +2032,11 @@ function SecretsPage({ apiClient, className }) {
           {
             type: "button",
             onClick: () => setIsCreateOpen(true),
+            "aria-label": "Create your first secret",
             className: "mt-6 inline-flex items-center gap-2 rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors active:scale-[0.97]",
             children: [
               /* @__PURE__ */ jsx5(Plus3, { className: "h-4 w-4" }),
-              "Create Secret"
+              "New Secret"
             ]
           }
         )
@@ -2858,10 +2933,11 @@ function StartupScriptsPage({ apiClient, className }) {
           {
             type: "button",
             onClick: openCreate,
+            "aria-label": "Create your first startup script",
             className: "mt-4 inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2.5 text-sm font-bold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)]",
             children: [
               /* @__PURE__ */ jsx7(Plus4, { className: "h-4 w-4" }),
-              "Create Script"
+              "New Script"
             ]
           }
         )

package/dist/styles.css

@@ -705,6 +705,9 @@
   .-top-1 {
     top: calc(var(--spacing) * -1);
   }
+  .-top-1\.5 {
+    top: calc(var(--spacing) * -1.5);
+  }
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
@@ -744,6 +747,9 @@
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
+  .-right-1\.5 {
+    right: calc(var(--spacing) * -1.5);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -1164,9 +1170,6 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
-  .min-h-\[240px\] {
-    min-height: 240px;
-  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1631,6 +1634,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -2122,21 +2128,12 @@
   .bg-\[\#8E59FF\] {
     background-color: #8E59FF;
   }
-  .bg-\[\#27c93f\]\/80 {
-    background-color: color-mix(in oklab, #27c93f 80%, transparent);
-  }
   .bg-\[\#FEBC2E\] {
     background-color: #FEBC2E;
   }
   .bg-\[\#FF5F57\] {
     background-color: #FF5F57;
   }
-  .bg-\[\#ff5f56\]\/80 {
-    background-color: color-mix(in oklab, #ff5f56 80%, transparent);
-  }
-  .bg-\[\#ffbd2e\]\/80 {
-    background-color: color-mix(in oklab, #ffbd2e 80%, transparent);
-  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
     background-color: var(--bg-card);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2406,9 +2403,6 @@
   .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
     background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
   }
-  .bg-\[radial-gradient\(circle_at_top\,rgba\(173\,163\,255\,0\.05\)_0\,transparent_100\%\)\] {
-    background-image: radial-gradient(circle at top,rgba(173,163,255,0.05) 0,transparent 100%);
-  }
   .from-white\/5 {
     --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2648,9 +2642,6 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
-  .pl-3 {
-    padding-left: calc(var(--spacing) * 3);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -4183,9 +4174,9 @@
       grid-column: span 1 / span 1;
     }
   }
-  .lg\:block {
+  .lg\:ml-\[var\(--sb-content-margin\,0px\)\] {
     @media (width >= 64rem) {
-      display: block;
+      margin-left: var(--sb-content-margin,0px);
     }
   }
   .lg\:flex {
@@ -4223,6 +4214,11 @@
       padding: calc(var(--spacing) * 4);
     }
   }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   .xl\:col-span-4 {
     @media (width >= 80rem) {
       grid-column: span 4 / span 4;

package/dist/{variant-list-BNwUOSgz.d.ts → variant-list-DHP2OXFE.d.ts}

@@ -16,8 +16,14 @@ declare function Sidebar({ children, className, style }: SidebarProps): react_js
 interface SidebarRailProps {
     children: React.ReactNode;
     className?: string;
-}
-declare function SidebarRail({ children, className }: SidebarRailProps): react_jsx_runtime.JSX.Element;
+    /**
+     * Render the rail at the wider mobile-drawer width so labels fit
+     * beside the icons. Defaults to the 64px icon-only rail used on
+     * desktop.
+     */
+    wide?: boolean;
+}
+declare function SidebarRail({ children, className, wide }: SidebarRailProps): react_jsx_runtime.JSX.Element;
 interface SidebarRailHeaderProps {
     children: React.ReactNode;
     className?: string;
@@ -46,8 +52,10 @@ interface RailButtonProps {
     badge?: number;
     onClick?: () => void;
     className?: string;
+    /** Show label text next to icon (for mobile drawer) */
+    showLabel?: boolean;
 }
-declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className }: RailButtonProps): react_jsx_runtime.JSX.Element;
+declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel }: RailButtonProps): react_jsx_runtime.JSX.Element;
 interface RailModeButtonProps {
     mode: string;
     icon: React.ComponentType<{
@@ -56,8 +64,10 @@ interface RailModeButtonProps {
     label: string;
     badge?: number;
     className?: string;
+    /** Show label text next to icon (for mobile drawer) */
+    showLabel?: boolean;
 }
-declare function RailModeButton({ mode, icon, label, badge, className }: RailModeButtonProps): react_jsx_runtime.JSX.Element;
+declare function RailModeButton({ mode, icon, label, badge, className, showLabel }: RailModeButtonProps): react_jsx_runtime.JSX.Element;
 interface SidebarPanelProps {
     children: React.ReactNode;
     className?: string;
@@ -96,6 +106,12 @@ declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, set
 declare const SIDEBAR_RAIL_WIDTH = 64;
 declare const SIDEBAR_PANEL_WIDTH = 260;
 declare const SIDEBAR_TOTAL_WIDTH: number;
+/**
+ * Width of the mobile drawer when the rail is rendered with labels
+ * (`showLabel` on {@link RailButton}). The standard 64px rail is only
+ * wide enough for icons; labels need a wider container to avoid truncation.
+ */
+declare const SIDEBAR_MOBILE_WIDTH = 256;
 interface SidebarContextValue {
     /** Whether the content panel beside the rail is open */
     panelOpen: boolean;
@@ -389,4 +405,4 @@ interface VariantListProps {
 }
 declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
 
-export { type SidebarPanelProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_RAIL_WIDTH as G, SIDEBAR_TOTAL_WIDTH as H, type Invoice as I, SandboxCard as J, type SandboxCardData as K, type SandboxCardProps as L, type SandboxStatus as M, type NavItem as N, SandboxTable as O, type PanelConfig as P, type SandboxTableProps as Q, RailButton as R, SIDEBAR_PANEL_WIDTH as S, Sidebar as T, SidebarContent as U, type SidebarContentProps as V, SidebarPanel as W, SidebarPanelContent as X, type SidebarPanelContentProps as Y, SidebarPanelHeader as Z, type SidebarPanelHeaderProps as _, BackendSelector as a, type SidebarProps as a0, SidebarProvider as a1, type SidebarProviderProps as a2, SidebarRail as a3, SidebarRailFooter as a4, type SidebarRailFooterProps as a5, SidebarRailHeader as a6, type SidebarRailHeaderProps as a7, SidebarRailNav as a8, type SidebarRailNavProps as a9, type SidebarRailProps as aa, type SidebarUser as ab, type TopNavLink as ac, VariantList as ad, type VariantListProps as ae, useSidebar as af, type Profile as ag, type PlanFeature as ah, type Variant as ai, type VariantOutcome as aj, type VariantStatus as ak, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };
+export { type SidebarPanelHeaderProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_PANEL_WIDTH as G, SIDEBAR_RAIL_WIDTH as H, type Invoice as I, SIDEBAR_TOTAL_WIDTH as J, SandboxCard as K, type SandboxCardData as L, type SandboxCardProps as M, type NavItem as N, type SandboxStatus as O, type PanelConfig as P, SandboxTable as Q, RailButton as R, SIDEBAR_MOBILE_WIDTH as S, type SandboxTableProps as T, Sidebar as U, SidebarContent as V, type SidebarContentProps as W, SidebarPanel as X, SidebarPanelContent as Y, type SidebarPanelContentProps as Z, SidebarPanelHeader as _, BackendSelector as a, type SidebarPanelProps as a0, type SidebarProps as a1, SidebarProvider as a2, type SidebarProviderProps as a3, SidebarRail as a4, SidebarRailFooter as a5, type SidebarRailFooterProps as a6, SidebarRailHeader as a7, type SidebarRailHeaderProps as a8, SidebarRailNav as a9, type SidebarRailNavProps as aa, type SidebarRailProps as ab, type SidebarUser as ac, type TopNavLink as ad, VariantList as ae, type VariantListProps as af, useSidebar as ag, type Profile as ah, type PlanFeature as ai, type Variant as aj, type VariantOutcome as ak, type VariantStatus as al, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };

package/package.json

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