@tangle-network/sandbox-ui 0.27.1 → 0.28.0

package/dist/{chunk-LGCOOUIX.js → chunk-F2M5MN7K.js}

@@ -246,6 +246,94 @@ function RailButton({ icon: Icon, label, isActive, badge, onClick, className, sh
   }
   return /* @__PURE__ */ jsx2("button", { type: "button", onClick, title: label, className: classes, children: content });
 }
+function RailFlyout({
+  icon: Icon,
+  label,
+  isActive,
+  showLabel,
+  title,
+  children,
+  className
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    if (!open) return;
+    const onPointer = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointer);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const triggerClasses = cn(
+    "group relative flex shrink-0 items-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",
+    isActive || open ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]" : "text-muted-foreground",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", showLabel && "w-full"), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        title: label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: triggerClasses,
+        children: [
+          /* @__PURE__ */ jsx2(Icon, { className: "h-5 w-5 shrink-0" }),
+          showLabel && /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium", children: label }),
+          showLabel && /* @__PURE__ */ jsx2(
+            ChevronRightIcon,
+            {
+              className: cn(
+                "ml-auto h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform duration-200",
+                open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && // Anchored to the right edge of the rail item; full-height-independent
+    // floating card. `onClickCapture` closes after a child link/button fires
+    // so selecting a sub-surface dismisses the flyout.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "menu",
+        onClickCapture: (e) => {
+          const el = e.target;
+          if (el.closest("a,button")) setOpen(false);
+        },
+        className: cn(
+          "absolute top-0 z-50 min-w-[12rem] rounded-xl border border-border bg-card p-1.5 shadow-lg",
+          showLabel ? "left-full ml-2" : "left-full ml-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx2("p", { className: "px-2 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 select-none", children: title ?? label }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function ChevronRightIcon({ 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" }),
+    /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" })
+  ] });
+}
 function RailModeButton({ mode, icon, label, badge, className, showLabel }) {
   const { panelOpen, mode: currentMode, switchMode } = useSidebar();
   return /* @__PURE__ */ jsx2(
@@ -1585,6 +1673,7 @@ function SidebarLayoutInner({
   panel,
   logo,
   logoHref,
+  railHeaderContent,
   user,
   isLoading = false,
   onLogout,
@@ -1608,7 +1697,7 @@ function SidebarLayoutInner({
   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: [
-        logo !== void 0 && /* @__PURE__ */ jsx14(SidebarRailHeader, { className: railLabels ? "justify-start px-4" : void 0, children: /* @__PURE__ */ jsx14(
+        (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(
           Link,
           {
             href: logoHref,
@@ -1617,8 +1706,44 @@ function SidebarLayoutInner({
             children: logo
           }
         ) }),
-        /* @__PURE__ */ jsx14(SidebarRailNav, { className: railLabels ? "px-2" : void 0, children: navItems.map(
-          (item) => item.togglesPanel ? /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx14(SidebarRailNav, { className: railLabels ? "px-2" : void 0, children: navItems.map((item) => {
+          if (item.flyoutItems && item.flyoutItems.length > 0) {
+            const activeSet = new Set(item.flyoutActiveIds ?? []);
+            return /* @__PURE__ */ jsx14(
+              RailFlyout,
+              {
+                icon: item.icon,
+                label: item.label,
+                title: item.label,
+                showLabel: railLabels,
+                isActive: activeId === item.id || item.flyoutItems.some((f) => activeSet.has(f.id)),
+                children: item.flyoutItems.map((f) => {
+                  const FIcon = f.icon;
+                  const active = activeSet.has(f.id);
+                  return /* @__PURE__ */ jsxs13(
+                    Link,
+                    {
+                      href: f.href,
+                      to: f.href,
+                      onClick: handleNavClick,
+                      ...f.prefetch !== void 0 ? { prefetch: f.prefetch } : {},
+                      className: cn(
+                        "flex h-9 items-center gap-2.5 rounded-lg px-2.5 text-sm transition-colors",
+                        active ? "bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx14(FIcon, { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ jsx14("span", { className: "truncate", children: f.label })
+                      ]
+                    },
+                    f.id
+                  );
+                })
+              },
+              item.id
+            );
+          }
+          return item.togglesPanel ? /* @__PURE__ */ jsx14(
             RailButton,
             {
               icon: item.icon,
@@ -1637,8 +1762,8 @@ function SidebarLayoutInner({
               onClick: handleNavClick,
               ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {}
             }
-          ) }, item.id)
-        ) }),
+          ) }, item.id);
+        }) }),
         (railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn("border-t border-border pt-2", railLabels && "items-stretch px-2"), children: [
           railFooter,
           hasProfile && (() => {
@@ -2225,13 +2350,13 @@ function VariantList({
 
 // src/dashboard/system-logs.tsx
 import { Terminal as Terminal3 } from "lucide-react";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function SystemLogsViewer({ apiUrl, token, className }) {
   const [logs, setLogs] = useState5([]);
   const [error, setError] = useState5(null);
   const [isFollowing, setIsFollowing] = useState5(true);
-  const scrollRef = useRef2(null);
+  const scrollRef = useRef3(null);
   useEffect3(() => {
     let timeoutId;
     let backoff = 2e3;
@@ -3107,6 +3232,7 @@ export {
   SidebarRailFooter,
   RailSeparator,
   RailButton,
+  RailFlyout,
   RailModeButton,
   SidebarPanel,
   SidebarPanelHeader,

package/dist/dashboard.d.ts

@@ -69,6 +69,29 @@ interface RailButtonProps {
     children?: React.ReactNode;
 }
 declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }: RailButtonProps): react_jsx_runtime.JSX.Element;
+interface RailFlyoutProps {
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+    /** Highlight the trigger (e.g. when a child route is active). */
+    isActive?: boolean;
+    /** Show the label text beside the icon (labeled rail) vs. icon-only. */
+    showLabel?: boolean;
+    /** Heading rendered at the top of the open flyout. Defaults to `label`. */
+    title?: string;
+    /** Flyout body — the sub-surfaces revealed when the item is opened. */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * A rail entry that reveals its sub-surfaces in a small panel anchored to the
+ * RIGHT of the rail item, rather than pushing the rail open with an inline
+ * accordion. Opens on click, closes on outside-click, Escape, or selecting an
+ * item inside it. Use for a single "door" (e.g. Studio) that fronts several
+ * related destinations without permanently spending rail height on them.
+ */
+declare function RailFlyout({ icon: Icon, label, isActive, showLabel, title, children, className, }: RailFlyoutProps): react_jsx_runtime.JSX.Element;
 interface RailModeButtonProps {
     mode: string;
     icon: React.ComponentType<{
@@ -533,16 +556,34 @@ interface DashboardLayoutProps {
 }
 declare function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
+/** A sub-destination revealed inside a nav item's right-flyout. */
+interface SidebarLayoutFlyoutItem {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    href: string;
+    prefetch?: "none" | "intent" | "render" | "viewport";
+}
 interface SidebarLayoutNavItem {
     id: string;
     label: string;
     icon: React.ComponentType<{
         className?: string;
     }>;
-    /** Destination for link items. Omit when `togglesPanel` is set. */
+    /** Destination for link items. Omit when `togglesPanel` or `flyoutItems` is set. */
     href?: string;
     /** Render this item as the panel toggle instead of a link. */
     togglesPanel?: boolean;
+    /**
+     * Render this item as a right-flyout "door" fronting these sub-destinations
+     * instead of a link. The flyout opens to the right of the rail item. Takes
+     * precedence over `href`/`togglesPanel`.
+     */
+    flyoutItems?: SidebarLayoutFlyoutItem[];
+    /** Ids of `flyoutItems` whose route is currently active (drives the door highlight). */
+    flyoutActiveIds?: string[];
     badge?: number;
     /**
      * React Router prefetch behavior for this link, forwarded to the underlying
@@ -563,6 +604,13 @@ interface SidebarLayoutProps {
     logo?: React.ReactNode;
     /** Destination for the logo link. */
     logoHref?: string;
+    /**
+     * Content rendered in the rail header in place of the logo link — e.g. a
+     * project/workspace switcher. Spans the header so the app's primary
+     * orientation control sits at the top of the rail. When set, `logo`/`logoHref`
+     * are ignored. The header keeps its `h-14` height for cross-view alignment.
+     */
+    railHeaderContent?: React.ReactNode;
     user?: SidebarUser | null;
     isLoading?: boolean;
     onLogout?: () => void;
@@ -850,4 +898,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, 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 };
+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 };

package/dist/dashboard.js

@@ -19,6 +19,7 @@ import {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailFlyout,
   RailModeButton,
   RailSeparator,
   ResourceMeter,
@@ -47,7 +48,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-LGCOOUIX.js";
+} from "./chunk-F2M5MN7K.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -106,6 +107,7 @@ export {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailFlyout,
   RailModeButton,
   RailSeparator,
   ResourceMeter,

package/dist/globals.css

@@ -406,6 +406,9 @@
   .left-\[50\%\] {
     left: 50%;
   }
+  .left-full {
+    left: 100%;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -1102,6 +1105,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[12rem\] {
+    min-width: 12rem;
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }

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, 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 { 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 { 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

@@ -161,6 +161,7 @@ import {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailFlyout,
   RailModeButton,
   RailSeparator,
   ResourceMeter,
@@ -189,7 +190,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-LGCOOUIX.js";
+} from "./chunk-F2M5MN7K.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -431,6 +432,7 @@ export {
   PromoBanner,
   QuestionPreview,
   RailButton,
+  RailFlyout,
   RailModeButton,
   RailSeparator,
   RealtimeSessionRegistry,

package/dist/styles.css

@@ -406,6 +406,9 @@
   .left-\[50\%\] {
     left: 50%;
   }
+  .left-full {
+    left: 100%;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -1102,6 +1105,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[12rem\] {
+    min-width: 12rem;
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }

package/package.json

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