@tangle-network/sandbox-ui 0.10.1 → 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/{chunk-A5ALUT2B.js → chunk-HEXQVHXJ.js}

@@ -1658,7 +1658,7 @@ function CheckRow({ check }) {
 
 // src/workspace/task-board.tsx
 import { useMemo as useMemo5 } from "react";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function TaskBoard({
   items,
   columns,
@@ -1669,7 +1669,9 @@ function TaskBoard({
   renderColumnAction,
   renderBadge,
   columnEmptyState,
-  header
+  header,
+  renderColumnBody,
+  renderItemWrapper
 }) {
   const grouped = useMemo5(() => {
     const map = /* @__PURE__ */ new Map();
@@ -1685,6 +1687,40 @@ function TaskBoard({
     header,
     /* @__PURE__ */ jsx11("div", { className: "flex flex-1 gap-3 overflow-x-auto p-4", children: columns.map((col) => {
       const colItems = grouped.get(col.id) ?? [];
+      const itemCards = /* @__PURE__ */ jsxs11(Fragment2, { children: [
+        colItems.length === 0 && columnEmptyState,
+        colItems.map((item, index) => {
+          const card = /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "button",
+              onClick: () => onClickItem?.(item),
+              className: "group w-full rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-accent/50",
+              children: [
+                /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-foreground", children: item.title }),
+                item.description && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.description }),
+                (item.priority || item.tags?.length) && /* @__PURE__ */ jsxs11("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+                  item.priority && (renderBadge ? renderBadge(item.priority, "priority") : /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: item.priority })),
+                  item.tags?.map(
+                    (tag) => renderBadge ? /* @__PURE__ */ jsx11("span", { children: renderBadge(tag, "tag") }, tag) : /* @__PURE__ */ jsx11(
+                      "span",
+                      {
+                        className: "rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground",
+                        children: tag
+                      },
+                      tag
+                    )
+                  )
+                ] }),
+                renderItemMeta?.(item)
+              ]
+            },
+            item.id
+          );
+          return renderItemWrapper ? /* @__PURE__ */ jsx11("span", { children: renderItemWrapper(item, index, card) }, item.id) : card;
+        })
+      ] });
+      const columnBody = /* @__PURE__ */ jsx11("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2 min-h-[80px]", children: renderColumnBody ? renderColumnBody(col.id, itemCards, colItems) : itemCards });
       return /* @__PURE__ */ jsxs11(
         "div",
         {
@@ -1700,36 +1736,7 @@ function TaskBoard({
               ] }),
               renderColumnAction?.(col)
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2 min-h-[80px]", children: [
-              colItems.length === 0 && columnEmptyState,
-              colItems.map((item) => /* @__PURE__ */ jsxs11(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onClickItem?.(item),
-                  className: "group w-full rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-accent/50",
-                  children: [
-                    /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-foreground", children: item.title }),
-                    item.description && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.description }),
-                    (item.priority || item.tags?.length) && /* @__PURE__ */ jsxs11("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
-                      item.priority && (renderBadge ? renderBadge(item.priority, "priority") : /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: item.priority })),
-                      item.tags?.map(
-                        (tag) => renderBadge ? /* @__PURE__ */ jsx11("span", { children: renderBadge(tag, "tag") }, tag) : /* @__PURE__ */ jsx11(
-                          "span",
-                          {
-                            className: "rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground",
-                            children: tag
-                          },
-                          tag
-                        )
-                      )
-                    ] }),
-                    renderItemMeta?.(item)
-                  ]
-                },
-                item.id
-              ))
-            ] })
+            columnBody
           ]
         },
         col.id
@@ -1740,7 +1747,7 @@ function TaskBoard({
 
 // src/workspace/calendar-view.tsx
 import { useState as useState6, useMemo as useMemo6 } from "react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function toDateKey(d) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
@@ -1929,7 +1936,7 @@ function CalendarView({
         );
       }) })
     ] }),
-    showDayPanel && /* @__PURE__ */ jsx12("div", { className: "w-80 shrink-0 flex flex-col overflow-hidden", children: renderDayDetail ? renderDayDetail(selectedDay ?? todayKey, selectedDayEvents) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+    showDayPanel && /* @__PURE__ */ jsx12("div", { className: "w-80 shrink-0 flex flex-col overflow-hidden", children: renderDayDetail ? renderDayDetail(selectedDay ?? todayKey, selectedDayEvents) : /* @__PURE__ */ jsxs12(Fragment3, { children: [
       /* @__PURE__ */ jsxs12("div", { className: "px-4 py-3 border-b border-border shrink-0", children: [
         /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-foreground", children: selectedDay === todayKey ? "Today" : selectedDay ? (/* @__PURE__ */ new Date(selectedDay + "T00:00:00")).toLocaleDateString(
           "en-US",

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);
   }
@@ -2116,30 +2122,18 @@
       border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
     }
   }
-  .border-t-blue-500 {
-    border-top-color: var(--color-blue-500);
-  }
   .border-t-transparent {
     border-top-color: transparent;
   }
   .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)) {
@@ -2409,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)) {
@@ -2651,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);
   }
@@ -4186,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 {
@@ -4226,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

@@ -104,7 +104,7 @@ import {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-A5ALUT2B.js";
+} from "./chunk-HEXQVHXJ.js";
 import "./chunk-OEX7NZE3.js";
 import {
   EmptyState,
@@ -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,