@tangle-network/sandbox-ui 0.52.0 → 0.54.0

package/dist/dashboard.d.ts

@@ -13,6 +13,28 @@ interface SidebarUser {
     tier?: string;
     avatarUrl?: string;
 }
+/** Theme modes offered by the account menu's Appearance section. */
+type ThemeMode = "light" | "dark" | "system";
+/**
+ * Host-supplied controller for the account-menu Appearance section. The rail is
+ * theme-engine-agnostic: each app wires this to its own theme hook (gtm-agent
+ * uses the shared `useTheme`; the sandbox app uses its `vault`-aware
+ * `useThemeMode`). Provide it to {@link ProfileAvatar} to render Light/Dark/System.
+ */
+interface AppearanceController {
+    value: ThemeMode;
+    onChange: (mode: ThemeMode) => void;
+    /** Which modes to offer, in order. Defaults to all three. */
+    modes?: ThemeMode[];
+}
+/**
+ * Compact light/dark switch driven by the shared `useTheme` hook.
+ *
+ * @deprecated The redesigned rail no longer renders a standalone theme toggle —
+ * theme lives in the account menu as a Light/Dark/System control via the
+ * `appearance` controller on {@link ProfileAvatar} (and both layouts). Kept for
+ * backward compatibility; not used by `SidebarLayout`/`DashboardLayout`.
+ */
 declare function RailThemeToggle({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -25,6 +47,34 @@ interface RailCollapseToggleProps {
     className?: string;
 }
 declare function RailCollapseToggle({ collapsed, showLabel, onToggle, className }: RailCollapseToggleProps): react_jsx_runtime.JSX.Element;
+interface RailHeaderProps {
+    /** Brand mark shown on the left, e.g. `<Logo iconOnly />`. */
+    brand?: React.ReactNode;
+    /** Destination for the brand link. When set with `LinkComponent`, the brand is a link. */
+    brandHref?: string;
+    /** Optional middle content (e.g. a project/workspace switcher). Hidden when collapsed. */
+    children?: React.ReactNode;
+    /** Whether the rail is collapsed (icon-only). */
+    collapsed: boolean;
+    /** Collapse/expand the rail. */
+    onToggle: () => void;
+    /**
+     * Whether the rail can collapse/expand. When `false`, no panel toggle is
+     * rendered and the collapsed header shows the brand without the hover-morph.
+     * Defaults to `true`.
+     */
+    collapsible?: boolean;
+    LinkComponent?: React.ComponentType<any>;
+    className?: string;
+}
+/**
+ * The redesigned rail header. Expanded: brand (left) · optional middle · panel
+ * toggle (right). Collapsed: only the brand mark, which morphs into the
+ * expand button on hover (brand fades out, panel glyph fades in over the same
+ * box) so the collapse affordance is discoverable without spending rail width.
+ * Renders its own `h-14` bordered bar — drop it in at the top of {@link SidebarRail}.
+ */
+declare function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsible, LinkComponent, className }: RailHeaderProps): react_jsx_runtime.JSX.Element;
 interface SidebarProps {
     children: React.ReactNode;
     className?: string;
@@ -46,12 +96,23 @@ interface SidebarRailHeaderProps {
     children: React.ReactNode;
     className?: string;
 }
+/**
+ * @deprecated Superseded by {@link RailHeader}, the three-slot header
+ * (brand · middle · panel toggle) used by both shells. Kept for backward
+ * compatibility; no longer rendered by `SidebarLayout`/`DashboardLayout`.
+ */
 declare function SidebarRailHeader({ children, className }: SidebarRailHeaderProps): react_jsx_runtime.JSX.Element;
 interface SidebarRailNavProps {
     children: React.ReactNode;
     className?: string;
+    /**
+     * Click handler on the `<nav>` itself. Layouts use it (with a
+     * `target === currentTarget` guard) so clicking the empty body of a collapsed
+     * rail expands it, without intercepting clicks on the nav items.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
 }
-declare function SidebarRailNav({ children, className }: SidebarRailNavProps): react_jsx_runtime.JSX.Element;
+declare function SidebarRailNav({ children, className, onClick }: SidebarRailNavProps): react_jsx_runtime.JSX.Element;
 interface SidebarRailFooterProps {
     children: React.ReactNode;
     className?: string;
@@ -81,8 +142,14 @@ interface RailButtonProps {
      */
     asChild?: boolean;
     children?: React.ReactNode;
+    /**
+     * `"primary"` gives the item a distinct emphasized pill (accent fill + accent
+     * border) so it stands out from the rest of the nav, e.g. a "New" action.
+     * Defaults to `"normal"`.
+     */
+    variant?: "normal" | "primary";
 }
-declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }: RailButtonProps): react_jsx_runtime.JSX.Element;
+declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children, variant }: RailButtonProps): react_jsx_runtime.JSX.Element;
 interface RailFlyoutProps {
     icon: React.ComponentType<{
         className?: string;
@@ -106,6 +173,49 @@ interface RailFlyoutProps {
  * 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;
+/** A sub-destination revealed by a {@link RailExpandable} item. */
+interface RailExpandableSubItem {
+    id: string;
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    href: string;
+    prefetch?: "none" | "intent" | "render" | "viewport";
+}
+interface RailExpandableProps {
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+    /** Destination for the row itself. Clicking the label navigates here. */
+    href?: string;
+    /** Highlight the row (e.g. its own route or a child route is active). */
+    isActive?: boolean;
+    /** Labeled (expanded) rail vs. icon-only (collapsed) rail. */
+    showLabel?: boolean;
+    /** Fixed sub-items. Mutually exclusive with `loadSubItems`. */
+    subItems?: RailExpandableSubItem[];
+    /** Lazy sub-items — called once on first open; the result is cached. */
+    loadSubItems?: () => Promise<RailExpandableSubItem[]>;
+    /** Ids of sub-items whose route is active (drives sub-item highlight). */
+    activeSubIds?: string[];
+    /** Shown when the resolved sub-item list is empty. */
+    emptyLabel?: string;
+    /** Called when the row or a sub-item navigates (e.g. to close a mobile drawer). */
+    onNavigate?: () => void;
+    LinkComponent?: React.ComponentType<any>;
+    className?: string;
+}
+/**
+ * A nav item that reveals sub-items. On the labeled rail it expands inline as an
+ * accordion: the leading icon morphs into a chevron on hover, clicking the
+ * chevron toggles the list, and clicking the label navigates (`href`). On the
+ * icon-only rail it shows the sub-items in a right-anchored flyout on hover.
+ * Sub-items can be fixed (`subItems`) or lazy (`loadSubItems`, with a loading
+ * skeleton). Used for e.g. a "History" entry fronting recent sessions.
+ */
+declare function RailExpandable({ icon: Icon, label, href, isActive, showLabel, subItems, loadSubItems, activeSubIds, emptyLabel, onNavigate, LinkComponent, className, }: RailExpandableProps): react_jsx_runtime.JSX.Element;
 interface RailModeButtonProps {
     mode: string;
     icon: React.ComponentType<{
@@ -150,9 +260,14 @@ interface ProfileAvatarProps {
     className?: string;
     /** Show name/email beside the avatar (for a labeled rail) instead of an icon-only avatar button. */
     showDetails?: boolean;
+    /**
+     * When provided, the menu renders an Appearance section (Light/Dark/System)
+     * driven by this host-supplied controller. Omit to hide it.
+     */
+    appearance?: AppearanceController;
     LinkComponent?: React.ComponentType<any>;
 }
-declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, settingsHref, children, className, showDetails, LinkComponent, }: ProfileAvatarProps): react_jsx_runtime.JSX.Element;
+declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, settingsHref, children, className, showDetails, appearance, LinkComponent, }: ProfileAvatarProps): react_jsx_runtime.JSX.Element;
 
 interface RailTooltipProps {
     /** Tooltip text shown to the right of the trigger. */
@@ -164,15 +279,14 @@ interface RailTooltipProps {
     className?: string;
 }
 /**
- * Quiet, instant-ish styled tooltip for the icon-only rail. CSS-only (no
- * portal, no extra deps): the trigger wraps in a `group` and the label is an
- * absolutely-positioned sibling to the RIGHT, revealed on `group-hover` /
- * `group-focus-within` after a short delay. Matches the `--popover` / border
- * tokens so it reads as Tangle Quiet chrome rather than a native `title`.
- *
- * Replaces reliance on the native `title` attribute for the collapsed rail
- * (no ~1.5s delay, themeable, keyboard-focus reachable). Hidden via
- * `aria-hidden` since the trigger already carries an accessible name.
+ * Quiet styled tooltip for the icon-only rail, rendered in a portal anchored to
+ * the RIGHT of the trigger. The portal is essential: the rail's nav is a
+ * vertical scroll container (`overflow-y-auto`), which the CSS spec forces to
+ * also clip horizontally — an in-flow tooltip would be cut off at the rail's
+ * edge. Positioned via `getBoundingClientRect` on hover/focus, shown after a
+ * short delay, and `pointer-events-none` so it never interferes with the
+ * trigger. Hidden from the a11y tree (`aria-hidden`) since the trigger already
+ * carries an accessible name.
  */
 declare function RailTooltip({ label, children, disabled, className }: RailTooltipProps): react_jsx_runtime.JSX.Element;
 
@@ -699,14 +813,13 @@ interface DashboardLayoutProps {
      */
     logoHref?: string;
     /**
-     * If provided, the rail logo becomes a button calling this instead of
-     * navigating — e.g. to toggle the sidebar. Takes precedence over logoHref.
+     * @deprecated No longer wired. The redesigned {@link RailHeader} renders the
+     * brand mark plus a dedicated panel-toggle button; the logo is no longer the
+     * collapse control. Kept for back-compat; has no effect.
      */
     onLogoClick?: () => void;
     /**
-     * Accessible label for the logo button when onLogoClick is set. Defaults to
-     * "Toggle navigation"; set it to match what onLogoClick actually does (e.g.
-     * "Open command palette") so screen readers don't announce a stale action.
+     * @deprecated No longer wired (see {@link onLogoClick}). Has no effect.
      */
     logoAriaLabel?: string;
     /**
@@ -727,6 +840,12 @@ interface DashboardLayoutProps {
     railFooter?: React.ReactNode;
     /** Extra dropdown items in the profile menu */
     profileMenuItems?: React.ReactNode;
+    /**
+     * When provided, the profile menu shows an Appearance section
+     * (Light/Dark/System) driven by this host-supplied controller. Replaces the
+     * old standalone rail theme toggle.
+     */
+    appearance?: AppearanceController;
     /** Notification data for the bell dropdown */
     notifications?: {
         items: {
@@ -771,6 +890,26 @@ interface SidebarLayoutNavItem {
     flyoutItems?: SidebarLayoutFlyoutItem[];
     /** Ids of `flyoutItems` whose route is currently active (drives the door highlight). */
     flyoutActiveIds?: string[];
+    /**
+     * Give the item an emphasized "primary" pill so it stands out (e.g. a "New"
+     * action). Ignored for `togglesPanel`/`flyoutItems`/`expandable` items.
+     */
+    variant?: "normal" | "primary";
+    /**
+     * Render as an expandable item: an inline accordion on the labeled rail, a
+     * hover flyout on the icon-only rail. `href` (if set) navigates; the
+     * disclosure reveals `subItems` (fixed) or `loadSubItems()` (lazy). Takes
+     * precedence over `href`/`togglesPanel`/`flyoutItems`.
+     */
+    expandable?: boolean;
+    /** Fixed sub-items for an `expandable` item (icon optional). */
+    subItems?: RailExpandableSubItem[];
+    /** Lazy sub-items for an `expandable` item — loaded once on first open. */
+    loadSubItems?: () => Promise<RailExpandableSubItem[]>;
+    /** Ids of an `expandable` item's sub-items whose route is active. */
+    subActiveIds?: string[];
+    /** Empty-state text for an `expandable` item that resolves to no sub-items. */
+    emptyLabel?: string;
     badge?: number;
     /**
      * React Router prefetch behavior for this link, forwarded to the underlying
@@ -805,17 +944,26 @@ interface SidebarLayoutProps {
     settingsHref?: string;
     /** Extra items rendered before settings/logout in the profile menu. */
     profileMenuItems?: React.ReactNode;
-    /** Render a light/dark theme switch in the profile menu (uses the shared `useTheme`). */
+    /**
+     * When provided, the profile menu shows an Appearance section
+     * (Light/Dark/System) driven by this host-supplied controller. The host wires
+     * it to its own theme engine. Replaces the old standalone rail theme toggle.
+     */
+    appearance?: AppearanceController;
+    /**
+     * @deprecated No-op. The standalone rail theme toggle was replaced by the
+     * account-menu `appearance` control. Accepted (and ignored) for backward
+     * compatibility; will be removed in a future major.
+     */
     showThemeToggle?: boolean;
-    /** Extra content in the rail footer, above the profile avatar. */
-    railFooter?: React.ReactNode;
     /**
-     * Where the rail collapse/expand control sits. Defaults to `"footer"` (the
-     * historical placement, above the profile avatar). Set `"header"` to move it
-     * to the top of the rail instead, alongside the logo/`railHeaderContent`.
-     * Only takes effect when `railLabels` is set (the rail is collapsible).
+     * @deprecated No-op. The collapse/expand control now always lives in the
+     * header (`RailHeader`). Accepted (and ignored) for backward compatibility;
+     * will be removed in a future major.
      */
     railCollapseToggle?: "header" | "footer";
+    /** 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
@@ -1094,4 +1242,4 @@ interface InfoPanelProps {
 }
 declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
 
-export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessPicker, type HarnessPickerProps, 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, 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, RailTooltip, type RailTooltipProps, 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, chatCapableHarnesses, parseInsufficientBalance, useSidebar };
+export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type AppearanceController, type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessPicker, type HarnessPickerProps, 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, 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, RailExpandable, type RailExpandableProps, type RailExpandableSubItem, RailFlyout, type RailFlyoutProps, RailHeader, type RailHeaderProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, RailThemeToggle, RailTooltip, type RailTooltipProps, 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, type ThemeMode, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar };

package/dist/dashboard.js

@@ -20,7 +20,9 @@ import {
   PromoBanner,
   RailButton,
   RailCollapseToggle,
+  RailExpandable,
   RailFlyout,
+  RailHeader,
   RailModeButton,
   RailSeparator,
   RailThemeToggle,
@@ -52,7 +54,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-RT4MLYYM.js";
+} from "./chunk-SVNWL3ZR.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -113,7 +115,9 @@ export {
   PromoBanner,
   RailButton,
   RailCollapseToggle,
+  RailExpandable,
   RailFlyout,
+  RailHeader,
   RailModeButton,
   RailSeparator,
   RailThemeToggle,

package/dist/globals.css

@@ -395,9 +395,6 @@
   .bottom-1 {
     bottom: calc(var(--spacing) * 1);
   }
-  .bottom-1\.5 {
-    bottom: calc(var(--spacing) * 1.5);
-  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -455,6 +452,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[70\] {
+    z-index: 70;
+  }
   .z-\[100\] {
     z-index: 100;
   }
@@ -741,6 +741,9 @@
   .h-\[17px\] {
     height: 17px;
   }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -1023,9 +1026,24 @@
   .w-\[17px\] {
     width: 17px;
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
+  .w-\[64\%\] {
+    width: 64%;
+  }
   .w-\[72\%\] {
     width: 72%;
   }
+  .w-\[76\%\] {
+    width: 76%;
+  }
+  .w-\[82\%\] {
+    width: 82%;
+  }
+  .w-\[88\%\] {
+    width: 88%;
+  }
   .w-\[240px\] {
     width: 240px;
   }
@@ -2725,6 +2743,9 @@
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
+  .pr-2\.5 {
+    padding-right: calc(var(--spacing) * 2.5);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -2857,6 +2878,9 @@
   .text-\[13px\] {
     font-size: 13px;
   }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
   .text-\[15px\] {
     font-size: 15px;
   }
@@ -3467,6 +3491,9 @@
   .ring-\[var\(--bg-root\)\] {
     --tw-ring-color: var(--bg-root);
   }
+  .ring-\[var\(--border-accent\)\] {
+    --tw-ring-color: var(--border-accent);
+  }
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
@@ -3558,11 +3585,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[opacity\,transform\] {
-    transition-property: opacity,transform;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[opacity\] {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3650,22 +3672,6 @@
       rotate: 180deg;
     }
   }
-  .group-focus-within\:opacity-100 {
-    &:is(:where(.group):focus-within *) {
-      opacity: 100%;
-    }
-  }
-  .group-focus-within\/tip\:translate-x-0 {
-    &:is(:where(.group\/tip):focus-within *) {
-      --tw-translate-x: calc(var(--spacing) * 0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .group-focus-within\/tip\:opacity-100 {
-    &:is(:where(.group\/tip):focus-within *) {
-      opacity: 100%;
-    }
-  }
   .group-hover\:translate-x-0\.5 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3705,32 +3711,31 @@
       }
     }
   }
-  .group-hover\/logo\:opacity-100 {
-    &:is(:where(.group\/logo):hover *) {
+  .group-hover\/brand\:opacity-0 {
+    &:is(:where(.group\/brand):hover *) {
       @media (hover: hover) {
-        opacity: 100%;
+        opacity: 0%;
       }
     }
   }
-  .group-hover\/tip\:translate-x-0 {
-    &:is(:where(.group\/tip):hover *) {
+  .group-hover\/brand\:opacity-100 {
+    &:is(:where(.group\/brand):hover *) {
       @media (hover: hover) {
-        --tw-translate-x: calc(var(--spacing) * 0);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+        opacity: 100%;
       }
     }
   }
-  .group-hover\/tip\:opacity-100 {
-    &:is(:where(.group\/tip):hover *) {
+  .group-hover\/exp\:opacity-0 {
+    &:is(:where(.group\/exp):hover *) {
       @media (hover: hover) {
-        opacity: 100%;
+        opacity: 0%;
       }
     }
   }
-  .group-hover\/tip\:delay-300 {
-    &:is(:where(.group\/tip):hover *) {
+  .group-hover\/exp\:opacity-100 {
+    &:is(:where(.group\/exp):hover *) {
       @media (hover: hover) {
-        transition-delay: 300ms;
+        opacity: 100%;
       }
     }
   }

package/dist/index.d.ts

@@ -9,7 +9,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, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, 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, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailFlyout, RailFlyoutProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, 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, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.js';
+export { ActivityFeed, ActivityFeedProps, ActivityItem, AppearanceController, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, 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, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailExpandable, RailExpandableProps, RailExpandableSubItem, RailFlyout, RailFlyoutProps, RailHeader, RailHeaderProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, 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, ThemeMode, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.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-NOWFpRY4.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';
 export { E as ExposedPort, P as PortsList, a as PortsListProps } from './ports-list-DfG0VfPt.js';

package/dist/index.js

@@ -148,7 +148,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-MGIOO3RL.js";
+} from "./chunk-DLKDWMFM.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -179,7 +179,9 @@ import {
   PromoBanner,
   RailButton,
   RailCollapseToggle,
+  RailExpandable,
   RailFlyout,
+  RailHeader,
   RailModeButton,
   RailSeparator,
   RailThemeToggle,
@@ -211,7 +213,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-RT4MLYYM.js";
+} from "./chunk-SVNWL3ZR.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -468,7 +470,9 @@ export {
   QuestionPreview,
   RailButton,
   RailCollapseToggle,
+  RailExpandable,
   RailFlyout,
+  RailHeader,
   RailModeButton,
   RailSeparator,
   RailThemeToggle,