@tangle-network/sandbox-ui 0.30.0 → 0.31.0

package/dist/{chunk-YPBFIETY.js → chunk-SXAMR3TV.js}

@@ -23,6 +23,7 @@ import { Skeleton, useTheme } from "@tangle-network/ui/primitives";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 var PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";
+var RAIL_COLLAPSED_KEY = "sandbox-sidebar-rail-collapsed";
 var SIDEBAR_MODE_KEY = "sandbox-sidebar-mode";
 var SIDEBAR_RAIL_WIDTH = 56;
 var SIDEBAR_PANEL_WIDTH = 268;
@@ -49,9 +50,12 @@ function SidebarProvider({
   defaultPanelOpen = true,
   defaultMode = "projects",
   hasPanels = true,
-  railWidth = SIDEBAR_RAIL_WIDTH,
+  labeledRail = false,
   panelOpen: controlledPanelOpen,
   onPanelOpenChange,
+  railCollapsed: controlledRailCollapsed,
+  onRailCollapsedChange,
+  defaultRailCollapsed = false,
   children
 }) {
   const isControlled = controlledPanelOpen !== void 0;
@@ -59,6 +63,11 @@ function SidebarProvider({
     () => isControlled ? controlledPanelOpen : readStorage(PANEL_OPEN_KEY, String(defaultPanelOpen)) === "true"
   );
   const panelOpen = isControlled ? controlledPanelOpen : uncontrolledPanelOpen;
+  const isRailControlled = controlledRailCollapsed !== void 0;
+  const [uncontrolledRailCollapsed, setUncontrolledRailCollapsed] = React.useState(
+    () => isRailControlled ? controlledRailCollapsed : readStorage(RAIL_COLLAPSED_KEY, String(defaultRailCollapsed)) === "true"
+  );
+  const railCollapsed = isRailControlled ? controlledRailCollapsed : uncontrolledRailCollapsed;
   const [mode, setModeState] = React.useState(
     () => isControlled ? defaultMode : readStorage(SIDEBAR_MODE_KEY, defaultMode)
   );
@@ -73,6 +82,16 @@ function SidebarProvider({
   const togglePanel = React.useCallback(() => {
     setPanelOpen(!panelOpen);
   }, [setPanelOpen, panelOpen]);
+  const setRailCollapsed = React.useCallback((collapsed) => {
+    if (!isRailControlled) {
+      setUncontrolledRailCollapsed(collapsed);
+      writeStorage(RAIL_COLLAPSED_KEY, String(collapsed));
+    }
+    onRailCollapsedChange?.(collapsed);
+  }, [isRailControlled, onRailCollapsedChange]);
+  const toggleRail = React.useCallback(() => {
+    setRailCollapsed(!railCollapsed);
+  }, [setRailCollapsed, railCollapsed]);
   const setMode = React.useCallback((m) => {
     setModeState(m);
     if (!isControlled) writeStorage(SIDEBAR_MODE_KEY, m);
@@ -86,6 +105,7 @@ function SidebarProvider({
     if (!isControlled) writeStorage(SIDEBAR_MODE_KEY, m);
     setPanelOpen(true);
   }, [mode, panelOpen, isControlled, setPanelOpen]);
+  const railWidth = labeledRail && !railCollapsed ? SIDEBAR_RAIL_LABELED_WIDTH : SIDEBAR_RAIL_WIDTH;
   const contentMargin = hidden ? 0 : panelOpen && hasPanels ? railWidth + SIDEBAR_PANEL_WIDTH : railWidth;
   const value = React.useMemo(
     () => ({
@@ -99,9 +119,12 @@ function SidebarProvider({
       setHidden,
       contentMargin,
       hasPanels,
+      railCollapsed,
+      setRailCollapsed,
+      toggleRail,
       railWidth
     }),
-    [panelOpen, setPanelOpen, togglePanel, mode, setMode, switchMode, hidden, setHidden, contentMargin, hasPanels, railWidth]
+    [panelOpen, setPanelOpen, togglePanel, mode, setMode, switchMode, hidden, setHidden, contentMargin, hasPanels, railCollapsed, setRailCollapsed, toggleRail, railWidth]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
 }
@@ -177,6 +200,43 @@ function RailThemeToggle({ className }) {
     }
   );
 }
+function ChevronsLeftIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx2("title", { children: "Collapse sidebar" }),
+    /* @__PURE__ */ jsx2("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" })
+  ] });
+}
+function ChevronsRightIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx2("title", { children: "Expand sidebar" }),
+    /* @__PURE__ */ jsx2("path", { d: "m6 17 5-5-5-5M13 17l5-5-5-5" })
+  ] });
+}
+function RailCollapseToggle({ collapsed, showLabel, onToggle, className }) {
+  const label = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  const Icon = collapsed ? ChevronsRightIcon : ChevronsLeftIcon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-label": label,
+      "aria-pressed": collapsed,
+      title: label,
+      className: cn(
+        "group flex shrink-0 items-center rounded-md text-muted-foreground transition-colors",
+        showLabel ? "h-9 w-full justify-start gap-2.5 px-2.5" : "h-9 w-9 justify-center",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(Icon, { className: "h-[17px] w-[17px] shrink-0" }),
+        showLabel && /* @__PURE__ */ jsx2("span", { className: "text-[13.5px] font-medium", children: label })
+      ]
+    }
+  );
+}
 function Sidebar({ children, className, style }) {
   const { panelOpen, hidden, hasPanels, railWidth } = useSidebar();
   return /* @__PURE__ */ jsx2(
@@ -1691,13 +1751,14 @@ function SidebarLayoutInner({
   contentClassName
 }) {
   const Link = LinkComponent ?? DefaultLink3;
-  const { panelOpen, togglePanel, setPanelOpen } = useSidebar();
+  const { panelOpen, togglePanel, setPanelOpen, railCollapsed, toggleRail } = useSidebar();
   const handleNavClick = closePanelOnNavigate && panelOpen ? () => setPanelOpen(false) : void 0;
   const hasProfile = user !== void 0 || onLogout !== void 0 || onSettingsClick !== void 0;
+  const showLabels = railLabels && !railCollapsed;
   return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsx14("div", { className: cn(hideBelow && HIDE_BELOW_CLASS[hideBelow]), children: /* @__PURE__ */ jsxs13(Sidebar, { className: sidebarClassName, children: [
       /* @__PURE__ */ jsxs13(SidebarRail, { children: [
-        (railHeaderContent !== void 0 || logo !== void 0) && /* @__PURE__ */ jsx14(SidebarRailHeader, { className: cn(railLabels && (railHeaderContent !== void 0 ? "px-2" : "justify-start px-4")), children: railHeaderContent !== void 0 ? railHeaderContent : /* @__PURE__ */ jsx14(
+        (railHeaderContent !== void 0 || logo !== void 0) && /* @__PURE__ */ jsx14(SidebarRailHeader, { className: cn(showLabels && (railHeaderContent !== void 0 ? "px-2" : "justify-start px-4")), children: railHeaderContent !== void 0 ? railHeaderContent : /* @__PURE__ */ jsx14(
           Link,
           {
             href: logoHref,
@@ -1706,7 +1767,7 @@ function SidebarLayoutInner({
             children: logo
           }
         ) }),
-        /* @__PURE__ */ jsx14(SidebarRailNav, { className: railLabels ? "px-2" : void 0, children: navItems.map((item) => {
+        /* @__PURE__ */ jsx14(SidebarRailNav, { className: showLabels ? "px-2" : void 0, children: navItems.map((item) => {
           if (item.flyoutItems && item.flyoutItems.length > 0) {
             const activeSet = new Set(item.flyoutActiveIds ?? []);
             return /* @__PURE__ */ jsx14(
@@ -1715,7 +1776,7 @@ function SidebarLayoutInner({
                 icon: item.icon,
                 label: item.label,
                 title: item.label,
-                showLabel: railLabels,
+                showLabel: showLabels,
                 isActive: activeId === item.id || item.flyoutItems.some((f) => activeSet.has(f.id)),
                 children: item.flyoutItems.map((f) => {
                   const FIcon = f.icon;
@@ -1751,10 +1812,10 @@ function SidebarLayoutInner({
               badge: item.badge,
               isActive: panelOpen,
               onClick: togglePanel,
-              showLabel: railLabels
+              showLabel: showLabels
             },
             item.id
-          ) : /* @__PURE__ */ jsx14(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: railLabels, asChild: true, children: /* @__PURE__ */ jsx14(
+          ) : /* @__PURE__ */ jsx14(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: showLabels, asChild: true, children: /* @__PURE__ */ jsx14(
             Link,
             {
               href: item.href,
@@ -1764,7 +1825,8 @@ function SidebarLayoutInner({
             }
           ) }, item.id);
         }) }),
-        (railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn("border-t border-border pt-2", railLabels && "items-stretch px-2"), children: [
+        (railLabels || railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn("border-t border-border pt-2", showLabels && "items-stretch px-2"), children: [
+          railLabels && /* @__PURE__ */ jsx14(RailCollapseToggle, { collapsed: railCollapsed, showLabel: showLabels, onToggle: toggleRail }),
           railFooter,
           hasProfile && (() => {
             const profile = /* @__PURE__ */ jsx14(
@@ -1775,13 +1837,13 @@ function SidebarLayoutInner({
                 onLogout,
                 onSettingsClick,
                 settingsHref,
-                showDetails: railLabels,
+                showDetails: showLabels,
                 LinkComponent: Link,
                 children: profileMenuItems
               }
             );
             if (!showThemeToggle) return profile;
-            return railLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
+            return showLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
               /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: profile }),
               /* @__PURE__ */ jsx14(RailThemeToggle, {})
             ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-1", children: [
@@ -1800,6 +1862,9 @@ function SidebarLayout({
   panelOpen,
   onPanelOpenChange,
   defaultPanelOpen,
+  railCollapsed,
+  onRailCollapsedChange,
+  defaultRailCollapsed,
   ...props
 }) {
   return /* @__PURE__ */ jsx14(
@@ -1808,8 +1873,11 @@ function SidebarLayout({
       panelOpen,
       onPanelOpenChange,
       defaultPanelOpen,
+      railCollapsed,
+      onRailCollapsedChange,
+      defaultRailCollapsed,
       hasPanels: props.panel != null,
-      railWidth: props.railLabels ? SIDEBAR_RAIL_LABELED_WIDTH : void 0,
+      labeledRail: props.railLabels ?? false,
       children: /* @__PURE__ */ jsx14(SidebarLayoutInner, { ...props })
     }
   );
@@ -3223,8 +3291,11 @@ export {
   SIDEBAR_PANEL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SIDEBAR_MOBILE_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SidebarProvider,
   useSidebar,
+  RailThemeToggle,
+  RailCollapseToggle,
   Sidebar,
   SidebarRail,
   SidebarRailHeader,

package/dist/dashboard.d.ts

@@ -11,6 +11,18 @@ interface SidebarUser {
     tier?: string;
     avatarUrl?: string;
 }
+declare function RailThemeToggle({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface RailCollapseToggleProps {
+    /** Whether the rail is currently collapsed (icon-only). */
+    collapsed: boolean;
+    /** Render with a label beside the chevron (expanded/labeled rail) vs. icon-only. */
+    showLabel?: boolean;
+    onToggle: () => void;
+    className?: string;
+}
+declare function RailCollapseToggle({ collapsed, showLabel, onToggle, className }: RailCollapseToggleProps): react_jsx_runtime.JSX.Element;
 interface SidebarProps {
     children: React.ReactNode;
     className?: string;
@@ -150,6 +162,12 @@ declare const SIDEBAR_TOTAL_WIDTH: number;
  * wide enough for icons; labels need a wider container to avoid truncation.
  */
 declare const SIDEBAR_MOBILE_WIDTH = 256;
+/**
+ * Rail width when labels are shown beside icons on desktop. The default rail is
+ * icon-only at {@link SIDEBAR_RAIL_WIDTH}; a labeled rail needs room for the
+ * longest nav label plus its badge.
+ */
+declare const SIDEBAR_RAIL_LABELED_WIDTH = 248;
 interface SidebarContextValue {
     /** Whether the content panel beside the rail is open */
     panelOpen: boolean;
@@ -167,15 +185,34 @@ interface SidebarContextValue {
     contentMargin: number;
     /** Whether there are panels at all */
     hasPanels: boolean;
-    /** Rail width in px — 64 for the icon-only rail, wider when labels show */
+    /**
+     * Whether the labeled nav rail is collapsed to the icon-only width. Independent
+     * of {@link panelOpen} (the slide-out content panel) — two separate collapses.
+     * Only meaningful when the rail is label-capable; an icon-only rail stays
+     * icon-only regardless.
+     */
+    railCollapsed: boolean;
+    setRailCollapsed: (collapsed: boolean) => void;
+    toggleRail: () => void;
+    /**
+     * Rail width in px — derived from {@link railCollapsed}: the icon-only width
+     * when collapsed (or when the rail is not label-capable), the labeled width
+     * when expanded.
+     */
     railWidth: number;
 }
 interface SidebarProviderProps {
     defaultPanelOpen?: boolean;
     defaultMode?: string;
     hasPanels?: boolean;
-    /** Rail width in px. Defaults to the 64px icon-only rail. */
-    railWidth?: number;
+    /**
+     * Whether the rail can show labels beside icons. When `true`, the expanded
+     * rail renders at {@link SIDEBAR_RAIL_LABELED_WIDTH} and the user can collapse
+     * it to the icon-only {@link SIDEBAR_RAIL_WIDTH} via {@link toggleRail}. When
+     * `false` (default) the rail is permanently icon-only and `railCollapsed` has
+     * no width effect.
+     */
+    labeledRail?: boolean;
     /**
      * Controlled panel-open state. When provided, the provider treats panel
      * visibility as controlled: it never reads or writes localStorage and
@@ -186,9 +223,19 @@ interface SidebarProviderProps {
      */
     panelOpen?: boolean;
     onPanelOpenChange?: (open: boolean) => void;
+    /**
+     * Controlled rail-collapsed state. Parallels {@link panelOpen}: when provided
+     * the provider never touches localStorage for the rail and reports changes
+     * through {@link onRailCollapsedChange}. Seed it from a cookie in SSR apps so
+     * the rail width survives reload without a hydration mismatch.
+     */
+    railCollapsed?: boolean;
+    onRailCollapsedChange?: (collapsed: boolean) => void;
+    /** Initial rail-collapsed state for the uncontrolled path. Default: expanded. */
+    defaultRailCollapsed?: boolean;
     children: React.ReactNode;
 }
-declare function SidebarProvider({ defaultPanelOpen, defaultMode, hasPanels, railWidth, panelOpen: controlledPanelOpen, onPanelOpenChange, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
+declare function SidebarProvider({ defaultPanelOpen, defaultMode, hasPanels, labeledRail, panelOpen: controlledPanelOpen, onPanelOpenChange, railCollapsed: controlledRailCollapsed, onRailCollapsedChange, defaultRailCollapsed, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSidebar(): SidebarContextValue;
 
 interface CreditBalanceProps {
@@ -633,8 +680,24 @@ interface SidebarLayoutProps {
     defaultPanelOpen?: boolean;
     /** Hide the whole sidebar below this breakpoint (content spans full width). */
     hideBelow?: "md" | "lg";
-    /** Show text labels beside the rail icons on a wider rail (vs. icon-only with hover tooltips). */
+    /**
+     * Make the rail label-capable: it renders labels beside the icons on a wider
+     * rail and gains a collapse/expand control that toggles between the labeled
+     * width and the icon-only rail (icons + hover tooltips). When omitted the rail
+     * is permanently icon-only with no collapse control.
+     */
     railLabels?: boolean;
+    /**
+     * Controlled rail-collapsed state. Provide it (seeded from a server-readable
+     * source such as a cookie) in SSR apps so the collapsed/expanded rail survives
+     * reload without a hydration mismatch. Omit to let the rail persist to
+     * localStorage. Independent of `panelOpen` — the nav rail and the slide-out
+     * panel collapse separately. Only meaningful with `railLabels`.
+     */
+    railCollapsed?: boolean;
+    onRailCollapsedChange?: (collapsed: boolean) => void;
+    /** Initial rail-collapsed state when uncontrolled (default: expanded). */
+    defaultRailCollapsed?: boolean;
     /**
      * Close the panel when a link nav item is clicked. Useful when the panel is
      * contextual to one section (e.g. a chat thread list) rather than a global
@@ -653,7 +716,7 @@ interface SidebarLayoutProps {
  * hide all live here. Pair `panelOpen`/`onPanelOpenChange` with a cookie for
  * SSR-safe persistence.
  */
-declare function SidebarLayout({ panelOpen, onPanelOpenChange, defaultPanelOpen, ...props }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
+declare function SidebarLayout({ panelOpen, onPanelOpenChange, defaultPanelOpen, railCollapsed, onRailCollapsedChange, defaultRailCollapsed, ...props }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface Profile {
     id: string;
@@ -898,4 +961,4 @@ interface InfoPanelProps {
 }
 declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
 
-export { ActivityFeed, type ActivityFeedProps, type ActivityItem, BackendConfig, type BackendConfigProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessType, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailFlyout, type RailFlyoutProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarLayout, type SidebarLayoutFlyoutItem, type SidebarLayoutNavItem, type SidebarLayoutProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar };
+export { ActivityFeed, type ActivityFeedProps, type ActivityItem, BackendConfig, type BackendConfigProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessType, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailCollapseToggle, type RailCollapseToggleProps, RailFlyout, type RailFlyoutProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, RailThemeToggle, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarLayout, type SidebarLayoutFlyoutItem, type SidebarLayoutNavItem, type SidebarLayoutProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar };

package/dist/dashboard.js

@@ -19,13 +19,16 @@ import {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,
@@ -48,7 +51,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-YPBFIETY.js";
+} from "./chunk-SXAMR3TV.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -107,13 +110,16 @@ export {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessCon
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';
-export { ActivityFeed, ActivityFeedProps, ActivityItem, BackendConfig, BackendConfigProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HarnessBrand, HarnessLogo, HarnessLogoProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailFlyout, RailFlyoutProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar } from './dashboard.js';
+export { ActivityFeed, ActivityFeedProps, ActivityItem, BackendConfig, BackendConfigProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HarnessBrand, HarnessLogo, HarnessLogoProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailFlyout, RailFlyoutProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar } from './dashboard.js';
 export { B as Backend, a as BackendSelector, b as BackendSelectorProps, H as HARNESS_OPTIONS, c as HarnessPicker, d as HarnessPickerProps, e as HarnessType, f as chatCapableHarnesses } from './harness-picker-lyeEncN4.js';
 export { D as DEFAULT_FEATURED_MODEL_IDS, M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, e as dedupeModels, f as formatContext, g as formatPricing, m as modelDedupKey } from './model-picker-Cmisf9Y8.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';

package/dist/index.js

@@ -166,13 +166,16 @@ import {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,
@@ -195,7 +198,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-YPBFIETY.js";
+} from "./chunk-SXAMR3TV.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -437,9 +440,11 @@ export {
   PromoBanner,
   QuestionPreview,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
   RealtimeSessionRegistry,
   ReasoningLevelPicker,
   ResourceMeter,
@@ -450,6 +455,7 @@ export {
   SESSION_CREATED_EVENT,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,

package/package.json

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