@tangle-network/sandbox-ui 0.41.0 → 0.42.0

package/dist/{chunk-6UDHPI2R.js → chunk-KCWIC3SJ.js}

@@ -1543,9 +1543,9 @@ function DashboardLayoutInner({
   );
   const activePanel = panels.find((p) => p.mode === mode);
   const buildSidebarContent = React6.useCallback(
-    (showLabels) => /* @__PURE__ */ jsxs13(Fragment8, { children: [
+    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs13(Fragment8, { children: [
       /* @__PURE__ */ jsxs13(SidebarRail, { wide: showLabels, children: [
-        /* @__PURE__ */ jsx14(SidebarRailHeader, { children: onLogoClick ? /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx14(SidebarRailHeader, { className: cn(showLabels && "justify-start px-3"), children: onLogoClick ? /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -1573,12 +1573,17 @@ function DashboardLayoutInner({
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
         ) }),
-        /* @__PURE__ */ jsx14(SidebarRailNav, { children: navItems.map((item, i) => {
+        /* @__PURE__ */ jsx14(SidebarRailNav, { className: showLabels ? "px-2" : void 0, children: navItems.map((item, i) => {
           const isMode = modeSet.has(item.id);
           const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
           const showSep = i > 0 && isMode && !prevIsMode;
           return /* @__PURE__ */ jsxs13(React6.Fragment, { children: [
-            showSep && /* @__PURE__ */ jsx14(RailSeparator, {}),
+            showSep && /* @__PURE__ */ jsx14(
+              RailSeparator,
+              {
+                className: showLabels ? "w-full" : void 0
+              }
+            ),
             isMode ? /* @__PURE__ */ jsx14(
               RailModeButton,
               {
@@ -1601,10 +1606,18 @@ function DashboardLayoutInner({
             )
           ] }, item.id);
         }) }),
-        /* @__PURE__ */ jsxs13(SidebarRailFooter, { children: [
+        /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn(showLabels && "items-stretch px-2"), children: [
+          allowCollapse && /* @__PURE__ */ jsx14(
+            RailCollapseToggle,
+            {
+              collapsed: railCollapsed,
+              showLabel: showLabels,
+              onToggle: toggleRail
+            }
+          ),
           onSettingsClick ? /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick, showLabel: showLabels }) : /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", showLabel: showLabels, asChild: true, children: /* @__PURE__ */ jsx14(Link, { href: settingsHref, to: settingsHref }) }),
           railFooter,
-          /* @__PURE__ */ jsx14(RailSeparator, {}),
+          /* @__PURE__ */ jsx14(RailSeparator, { className: showLabels ? "w-full" : void 0 }),
           /* @__PURE__ */ jsx14(
             ProfileAvatar,
             {
@@ -1613,6 +1626,7 @@ function DashboardLayoutInner({
               onLogout,
               onSettingsClick,
               settingsHref,
+              showDetails: showLabels,
               LinkComponent,
               children: profileMenuItems
             }
@@ -1651,10 +1665,10 @@ function DashboardLayoutInner({
     ]
   );
   const sidebarContent = React6.useMemo(
-    () => buildSidebarContent(labeledRail && !railCollapsed),
+    () => buildSidebarContent(labeledRail && !railCollapsed, labeledRail),
     [buildSidebarContent, labeledRail, railCollapsed]
   );
-  const mobileSidebarContent = React6.useMemo(() => buildSidebarContent(true), [buildSidebarContent]);
+  const mobileSidebarContent = React6.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
   return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsxs13(
       "nav",
@@ -1783,8 +1797,8 @@ function DashboardLayoutInner({
     footer
   ] });
 }
-function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, ...props }) {
-  return /* @__PURE__ */ jsx14(SidebarProvider, { defaultPanelOpen, defaultMode, labeledRail, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx14(DashboardLayoutInner, { defaultPanelOpen, defaultMode, labeledRail, ...props }) });
+function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRailCollapsed, ...props }) {
+  return /* @__PURE__ */ jsx14(SidebarProvider, { defaultPanelOpen, defaultMode, labeledRail, defaultRailCollapsed, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx14(DashboardLayoutInner, { defaultPanelOpen, defaultMode, labeledRail, ...props }) });
 }
 
 // src/dashboard/sidebar-layout.tsx

package/dist/dashboard.d.ts

@@ -681,6 +681,12 @@ interface DashboardLayoutProps {
      * toggles between icon-only and labeled instead of navigating.
      */
     labeledRail?: boolean;
+    /**
+     * Initial rail-collapsed state when `labeledRail` is set and the rail is
+     * uncontrolled. Defaults to expanded (`false`). Pass `true` to start on the
+     * compact icon rail — the user's choice then persists to localStorage.
+     */
+    defaultRailCollapsed?: boolean;
     footer?: React.ReactNode;
     defaultPanelOpen?: boolean;
     defaultMode?: string;
@@ -702,7 +708,7 @@ interface DashboardLayoutProps {
         onMarkAllRead?: () => void;
     };
 }
-declare function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+declare function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRailCollapsed, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
 /** A sub-destination revealed inside a nav item's right-flyout. */
 interface SidebarLayoutFlyoutItem {

package/dist/dashboard.js

@@ -52,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-6UDHPI2R.js";
+} from "./chunk-KCWIC3SJ.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/index.js

@@ -138,7 +138,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-6UDHPI2R.js";
+} from "./chunk-KCWIC3SJ.js";
 import {
   usePtySession
 } from "./chunk-77WVVJA4.js";

package/package.json

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