@tangle-network/sandbox-ui 0.22.1 → 0.23.0

package/dist/dashboard.d.ts

@@ -57,8 +57,17 @@ interface RailButtonProps {
     className?: string;
     /** Show label text next to icon (for mobile drawer) */
     showLabel?: boolean;
+    /**
+     * Render the rail-button styling onto a single child element (e.g. a router
+     * `<Link>`) instead of an inner `<button>`. The child receives the button
+     * classes, `title`, and the icon/label/badge as its content — so navigation
+     * items stay real anchors (keyboard, cmd-click, prefetch) without copying the
+     * class recipe or nesting `<a><button>`.
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
 }
-declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel }: RailButtonProps): react_jsx_runtime.JSX.Element;
+declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }: RailButtonProps): react_jsx_runtime.JSX.Element;
 interface RailModeButtonProps {
     mode: string;
     icon: React.ComponentType<{
@@ -101,9 +110,11 @@ interface ProfileAvatarProps {
     /** Extra dropdown items rendered before settings/logout */
     children?: React.ReactNode;
     className?: string;
+    /** Show name/email beside the avatar (for a labeled rail) instead of an icon-only avatar button. */
+    showDetails?: boolean;
     LinkComponent?: React.ComponentType<any>;
 }
-declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, settingsHref, children, className, LinkComponent, }: ProfileAvatarProps): react_jsx_runtime.JSX.Element;
+declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, settingsHref, children, className, showDetails, LinkComponent, }: ProfileAvatarProps): react_jsx_runtime.JSX.Element;
 
 /** Width constants (px) matching blueprint-agent layout */
 declare const SIDEBAR_RAIL_WIDTH = 64;
@@ -132,14 +143,28 @@ 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 */
+    railWidth: number;
 }
 interface SidebarProviderProps {
     defaultPanelOpen?: boolean;
     defaultMode?: string;
     hasPanels?: boolean;
+    /** Rail width in px. Defaults to the 64px icon-only rail. */
+    railWidth?: number;
+    /**
+     * Controlled panel-open state. When provided, the provider treats panel
+     * visibility as controlled: it never reads or writes localStorage and
+     * reports changes through {@link onPanelOpenChange} instead. Use this in
+     * server-rendered apps — seed it from a value the server also has (e.g. a
+     * cookie) so the SSR markup matches the first client render. The localStorage
+     * read in the uncontrolled path is what diverges from SSR and breaks hydration.
+     */
+    panelOpen?: boolean;
+    onPanelOpenChange?: (open: boolean) => void;
     children: React.ReactNode;
 }
-declare function SidebarProvider({ defaultPanelOpen, defaultMode, hasPanels, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
+declare function SidebarProvider({ defaultPanelOpen, defaultMode, hasPanels, railWidth, panelOpen: controlledPanelOpen, onPanelOpenChange, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSidebar(): SidebarContextValue;
 
 interface CreditBalanceProps {
@@ -479,6 +504,72 @@ interface DashboardLayoutProps {
 }
 declare function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
+interface SidebarLayoutNavItem {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Destination for link items. Omit when `togglesPanel` is set. */
+    href?: string;
+    /** Render this item as the panel toggle instead of a link. */
+    togglesPanel?: boolean;
+    badge?: number;
+}
+interface SidebarLayoutProps {
+    children: React.ReactNode;
+    /** Rail navigation, in display order. Each item is a link or the panel toggle. */
+    navItems: SidebarLayoutNavItem[];
+    /** Id of the active link item (drives the highlighted state). */
+    activeId?: string;
+    /** Content rendered inside the slide-out panel (e.g. a SessionSidebar). */
+    panel?: React.ReactNode;
+    /** Logo element rendered in the rail header. */
+    logo?: React.ReactNode;
+    /** Destination for the logo link. */
+    logoHref?: string;
+    user?: SidebarUser | null;
+    isLoading?: boolean;
+    onLogout?: () => void;
+    onSettingsClick?: () => void;
+    settingsHref?: string;
+    /** Extra items rendered before settings/logout in the profile menu. */
+    profileMenuItems?: React.ReactNode;
+    /** Extra content in the rail footer, above the profile avatar. */
+    railFooter?: React.ReactNode;
+    LinkComponent?: React.ComponentType<any>;
+    /**
+     * Controlled panel-open state. Provide it (seeded from a server-readable
+     * source such as a cookie) in SSR apps so the panel survives reload without a
+     * hydration mismatch. Omit to let the panel persist to localStorage.
+     */
+    panelOpen?: boolean;
+    onPanelOpenChange?: (open: boolean) => void;
+    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). */
+    railLabels?: 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
+     * dock. Selecting items inside the panel itself does not trigger this.
+     */
+    closePanelOnNavigate?: boolean;
+    className?: string;
+    sidebarClassName?: string;
+    /** Class for the `<main>` content region (e.g. `flex h-screen ... overflow-hidden`). */
+    contentClassName?: string;
+}
+/**
+ * App shell built on the sidebar rail + slide-out panel, without a top nav bar.
+ * Apps supply nav items, an optional panel, and profile/branding props; the
+ * standard look, panel docking, content-margin coordination, and responsive
+ * 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;
+
 interface Profile {
     id: string;
     name: string;
@@ -722,4 +813,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, 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, 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, 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, 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, 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 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

@@ -31,6 +31,7 @@ import {
   SandboxTable,
   Sidebar,
   SidebarContent,
+  SidebarLayout,
   SidebarPanel,
   SidebarPanelContent,
   SidebarPanelHeader,
@@ -46,7 +47,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-7X2DHDQ6.js";
+} from "./chunk-CB3KBKYN.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -108,6 +109,7 @@ export {
   SandboxTable,
   Sidebar,
   SidebarContent,
+  SidebarLayout,
   SidebarPanel,
   SidebarPanelContent,
   SidebarPanelHeader,

package/dist/globals.css

@@ -3577,6 +3577,16 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .max-lg\:hidden {
+    @media (width < 64rem) {
+      display: none;
+    }
+  }
+  .max-md\:hidden {
+    @media (width < 48rem) {
+      display: none;
+    }
+  }
   .sm\:mx-3 {
     @media (width >= 40rem) {
       margin-inline: calc(var(--spacing) * 3);

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, 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, 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, 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, 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, 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, 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 } from './harness-picker-C1W3rTeb.js';
 export { M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, f as formatContext, e as formatPricing } from './model-picker-DUfMTQo5.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

@@ -173,6 +173,7 @@ import {
   SandboxTable,
   Sidebar,
   SidebarContent,
+  SidebarLayout,
   SidebarPanel,
   SidebarPanelContent,
   SidebarPanelHeader,
@@ -188,7 +189,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-7X2DHDQ6.js";
+} from "./chunk-CB3KBKYN.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -453,6 +454,7 @@ export {
   Sidebar,
   SidebarContent,
   SidebarDropZone,
+  SidebarLayout,
   SidebarPanel,
   SidebarPanelContent,
   SidebarPanelHeader,

package/dist/styles.css

@@ -3577,6 +3577,16 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .max-lg\:hidden {
+    @media (width < 64rem) {
+      display: none;
+    }
+  }
+  .max-md\:hidden {
+    @media (width < 48rem) {
+      display: none;
+    }
+  }
   .sm\:mx-3 {
     @media (width >= 40rem) {
       margin-inline: calc(var(--spacing) * 3);

package/package.json

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