@tangle-network/sandbox-ui 0.10.2 → 0.10.4

package/dist/{chunk-2XCOGNZP.js → chunk-XQF6LQDV.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
     }
   );
@@ -351,54 +368,63 @@ function CreditBalance({
   className
 }) {
   const [topUpValue, setTopUpValue] = React2.useState("50.00");
-  return /* @__PURE__ */ jsxs3("div", { className: cn("bg-card p-5 rounded-xl flex flex-col justify-between border border-border", className), children: [
-    /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: "Available Credits" }),
-      /* @__PURE__ */ jsxs3("div", { className: "text-4xl font-extrabold text-primary tracking-tighter mb-2", children: [
-        "$",
-        amount.toFixed(2)
-      ] }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description })
-    ] }),
-    onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 mt-5", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "bg-card border border-border p-1 rounded-lg flex items-center", children: [
-        /* @__PURE__ */ jsx4(
-          "input",
-          {
-            type: "text",
-            value: `$${topUpValue}`,
-            onChange: (e) => setTopUpValue(e.target.value.replace(/[^0-9.]/g, "")),
-            className: "bg-transparent border-none text-foreground font-mono text-lg w-full focus:ring-0 px-4 outline-none"
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => onTopUp(Number.parseFloat(topUpValue)),
-            className: "bg-[var(--accent-surface-soft)] border border-border text-[var(--accent-text)] px-6 py-3 rounded-md font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform hover:bg-[var(--accent-surface-strong)]",
-            children: "Top Up"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx4("div", { className: "flex justify-between gap-2", children: quickAmounts.map((qa) => /* @__PURE__ */ jsxs3(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setTopUpValue(String(qa));
-            onTopUp(qa);
-          },
-          className: "flex-1 py-2 text-[10px] font-mono text-muted-foreground border border-border rounded-md hover:bg-muted/50 hover:text-foreground transition-colors uppercase",
-          children: [
-            "+$",
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "bg-card p-5 rounded-xl flex flex-col justify-between border border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: "Available Credits" }),
+          /* @__PURE__ */ jsxs3("div", { className: "text-4xl font-extrabold text-primary tracking-tighter mb-2", children: [
+            "$",
+            amount.toFixed(2)
+          ] }),
+          /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description })
+        ] }),
+        onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 mt-5", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "bg-card border border-border p-1 rounded-lg flex items-center", children: [
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                type: "text",
+                value: `$${topUpValue}`,
+                onChange: (e) => setTopUpValue(e.target.value.replace(/[^0-9.]/g, "")),
+                className: "bg-transparent border-none text-foreground font-mono text-lg w-full focus:ring-0 px-4 outline-none"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: () => onTopUp(Number.parseFloat(topUpValue)),
+                className: "bg-[var(--accent-surface-soft)] border border-border text-[var(--accent-text)] px-6 py-3 rounded-md font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform hover:bg-[var(--accent-surface-strong)]",
+                children: "Top Up"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "flex justify-between gap-2", children: quickAmounts.map((qa) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setTopUpValue(String(qa));
+                onTopUp(qa);
+              },
+              className: "flex-1 py-2 text-[10px] font-mono text-muted-foreground border border-border rounded-md hover:bg-muted/50 hover:text-foreground transition-colors uppercase",
+              children: [
+                "+$",
+                qa
+              ]
+            },
             qa
-          ]
-        },
-        qa
-      )) })
-    ] })
-  ] });
+          )) })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/dashboard/invoice-table.tsx
@@ -576,58 +602,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 +692,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 +799,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 +1605,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-XQF6LQDV.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-XQF6LQDV.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 };