@tangle-network/sandbox-ui 0.23.1 → 0.23.2

package/dist/{chunk-CB3KBKYN.js → chunk-MBYBQWRN.js}

@@ -17,7 +17,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@tangle-network/ui/primitives";
-import { Skeleton } from "@tangle-network/ui/primitives";
+import { Skeleton, useTheme } from "@tangle-network/ui/primitives";
 
 // src/dashboard/sidebar-context.tsx
 import * as React from "react";
@@ -142,6 +142,41 @@ function LogOutIcon({ className }) {
     /* @__PURE__ */ jsx2("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
   ] });
 }
+function SunIcon({ 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: "Light mode icon" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })
+  ] });
+}
+function MoonIcon({ 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: "Dark mode icon" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+  ] });
+}
+function RailThemeToggle({ className }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useEffect(() => setMounted(true), []);
+  const isDark = mounted && (theme === "dark" || theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(isDark ? "light" : "dark"),
+      "aria-label": "Toggle theme",
+      title: isDark ? "Switch to light mode" : "Switch to dark mode",
+      className: cn(
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        className
+      ),
+      children: isDark ? /* @__PURE__ */ jsx2(SunIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(MoonIcon, { className: "h-4 w-4" })
+    }
+  );
+}
 function Sidebar({ children, className, style }) {
   const { panelOpen, hidden, hasPanels, railWidth } = useSidebar();
   return /* @__PURE__ */ jsx2(
@@ -174,20 +209,20 @@ function SidebarRail({ children, className, wide = false }) {
   );
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-border", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 shrink-0 items-center justify-center border-b border-border", className), children });
 }
 function SidebarRailNav({ children, className }) {
-  return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1", className), children });
+  return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1 min-h-0 overflow-y-auto", className), children });
 }
 function SidebarRailFooter({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3 shrink-0", className), children });
 }
 function RailSeparator({ className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--md3-outline-variant)]", className) });
 }
 function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }) {
   const classes = cn(
-    "group relative flex items-center justify-center rounded-xl transition-all duration-200",
+    "group relative flex shrink-0 items-center justify-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",
@@ -289,13 +324,7 @@ function ProfileAvatar({
             user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
             /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-[10px] bg-violet-500/20 text-violet-300", children: getInitials(user?.name, user?.email) })
           ] }),
-          showDetails && /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx2(Skeleton, { className: "mb-1 h-3.5 w-20" }),
-            /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-28" })
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-medium text-foreground", children: user?.name ?? user?.email ?? "Not signed in" }),
-            user?.email && user?.name && /* @__PURE__ */ jsx2("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
-          ] }) })
+          showDetails && /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsx2(Skeleton, { className: "h-3.5 w-24" }) : /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-medium text-foreground", children: user?.name ?? user?.email ?? "Not signed in" }) })
         ]
       }
     ) }),
@@ -1562,6 +1591,7 @@ function SidebarLayoutInner({
   onSettingsClick,
   settingsHref,
   profileMenuItems,
+  showThemeToggle = false,
   railFooter,
   LinkComponent,
   hideBelow,
@@ -1603,19 +1633,29 @@ function SidebarLayoutInner({
         ) }),
         (railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn("border-t border-border pt-2", railLabels && "items-stretch px-2"), children: [
           railFooter,
-          hasProfile && /* @__PURE__ */ jsx14(
-            ProfileAvatar,
-            {
-              user: user ?? void 0,
-              isLoading,
-              onLogout,
-              onSettingsClick,
-              settingsHref,
-              showDetails: railLabels,
-              LinkComponent: Link,
-              children: profileMenuItems
-            }
-          )
+          hasProfile && (() => {
+            const profile = /* @__PURE__ */ jsx14(
+              ProfileAvatar,
+              {
+                user: user ?? void 0,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                showDetails: railLabels,
+                LinkComponent: Link,
+                children: profileMenuItems
+              }
+            );
+            if (!showThemeToggle) return profile;
+            return railLabels ? /* @__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: [
+              /* @__PURE__ */ jsx14(RailThemeToggle, {}),
+              profile
+            ] });
+          })()
         ] })
       ] }),
       panel != null && /* @__PURE__ */ jsx14(SidebarPanel, { children: panel })
@@ -2177,14 +2217,14 @@ function VariantList({
 
 // src/dashboard/system-logs.tsx
 import { Terminal as Terminal3 } from "lucide-react";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function SystemLogsViewer({ apiUrl, token, className }) {
-  const [logs, setLogs] = useState4([]);
-  const [error, setError] = useState4(null);
-  const [isFollowing, setIsFollowing] = useState4(true);
+  const [logs, setLogs] = useState5([]);
+  const [error, setError] = useState5(null);
+  const [isFollowing, setIsFollowing] = useState5(true);
   const scrollRef = useRef2(null);
-  useEffect2(() => {
+  useEffect3(() => {
     let timeoutId;
     let backoff = 2e3;
     const controller = new AbortController();
@@ -2220,7 +2260,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
       clearTimeout(timeoutId);
     };
   }, [apiUrl, token]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isFollowing && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }

package/dist/dashboard.d.ts

@@ -535,6 +535,8 @@ 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`). */
+    showThemeToggle?: boolean;
     /** Extra content in the rail footer, above the profile avatar. */
     railFooter?: React.ReactNode;
     LinkComponent?: React.ComponentType<any>;

package/dist/dashboard.js

@@ -47,7 +47,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-CB3KBKYN.js";
+} from "./chunk-MBYBQWRN.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/index.js

@@ -189,7 +189,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-CB3KBKYN.js";
+} from "./chunk-MBYBQWRN.js";
 import {
   BillingDashboard,
   InfoPanel,

package/package.json

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