@tangle-network/sandbox-ui 0.52.0 → 0.53.0

package/dist/{chunk-RT4MLYYM.js → chunk-KN2ZRAW6.js}

@@ -7,7 +7,8 @@ import {
 } from "./chunk-EI44GEQ5.js";
 
 // src/dashboard/app-sidebar.tsx
-import * as React2 from "react";
+import * as React3 from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { Avatar, AvatarFallback, AvatarImage } from "@tangle-network/ui/primitives";
 import {
   DropdownMenu,
@@ -15,9 +16,13 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from "@tangle-network/ui/primitives";
 import { Skeleton, useTheme } from "@tangle-network/ui/primitives";
+import { Check, Monitor, PanelLeft } from "lucide-react";
 
 // src/dashboard/sidebar-context.tsx
 import * as React from "react";
@@ -135,27 +140,61 @@ function useSidebar() {
 }
 
 // src/dashboard/rail-tooltip.tsx
+import * as React2 from "react";
+import { createPortal } from "react-dom";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var RAIL_FLOATING_SURFACE = "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]";
 function RailTooltip({ label, children, disabled, className }) {
+  const ref = React2.useRef(null);
+  const timer = React2.useRef(null);
+  const [coords, setCoords] = React2.useState(null);
+  React2.useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
   if (disabled) return /* @__PURE__ */ jsx2(Fragment, { children });
-  return /* @__PURE__ */ jsxs("span", { className: cn("group/tip relative flex", className), children: [
-    children,
-    /* @__PURE__ */ jsx2(
-      "span",
-      {
-        role: "tooltip",
-        "aria-hidden": "true",
-        className: cn(
-          "pointer-events-none absolute left-full top-1/2 z-50 ml-2 -translate-y-1/2 translate-x-1 whitespace-nowrap",
-          "rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-highest px-2 py-1 text-xs font-medium text-popover-foreground",
-          "opacity-0 shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14] transition-[opacity,transform] duration-150 ease-out",
-          "group-hover/tip:translate-x-0 group-hover/tip:opacity-100 group-hover/tip:delay-300",
-          "group-focus-within/tip:translate-x-0 group-focus-within/tip:opacity-100"
-        ),
-        children: label
-      }
-    )
-  ] });
+  const open = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      const el = ref.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setCoords({ top: r.top + r.height / 2, left: r.right + 8 });
+    }, 250);
+  };
+  const close = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setCoords(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("relative flex", className),
+      onMouseEnter: open,
+      onMouseLeave: close,
+      onFocusCapture: open,
+      onBlurCapture: close,
+      children: [
+        children,
+        coords !== null && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              role: "tooltip",
+              "aria-hidden": "true",
+              style: { position: "fixed", top: coords.top, left: coords.left, transform: "translateY(-50%)" },
+              className: cn(
+                "pointer-events-none z-[70] whitespace-nowrap px-2 py-1 text-xs font-medium text-popover-foreground",
+                RAIL_FLOATING_SURFACE
+              ),
+              children: label
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
 }
 
 // src/dashboard/app-sidebar.tsx
@@ -204,8 +243,8 @@ function MoonIcon({ className }) {
 }
 function RailThemeToggle({ className }) {
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = React2.useState(false);
-  React2.useEffect(() => setMounted(true), []);
+  const [mounted, setMounted] = React3.useState(false);
+  React3.useEffect(() => setMounted(true), []);
   const isDark = mounted && (theme === "dark" || theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
   return /* @__PURE__ */ jsx3(
     "button",
@@ -260,6 +299,67 @@ function RailCollapseToggle({ collapsed, showLabel, onToggle, className }) {
     }
   ) });
 }
+function PanelToggleButton({ collapsed, onToggle, className }) {
+  const label = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-label": label,
+      "aria-pressed": collapsed,
+      title: label,
+      className: cn(
+        "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        className
+      ),
+      children: /* @__PURE__ */ jsx3(PanelLeft, { className: "h-[18px] w-[18px] shrink-0" })
+    }
+  );
+}
+function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsible = true, LinkComponent, className }) {
+  const Link = LinkComponent ?? DefaultLink;
+  const brandNode = brandHref !== void 0 ? /* @__PURE__ */ jsx3(
+    Link,
+    {
+      href: brandHref,
+      to: brandHref,
+      "aria-label": "Home",
+      className: "flex items-center justify-center rounded-md p-1 transition-colors hover:bg-[var(--accent-surface-soft)]",
+      children: brand
+    }
+  ) : /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center p-1", children: brand });
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "flex h-14 shrink-0 items-center border-b border-[var(--md3-outline-variant)]",
+        collapsed ? "justify-center px-2" : "gap-2 px-3",
+        className
+      ),
+      children: collapsed ? collapsible ? /* @__PURE__ */ jsx3(RailTooltip, { label: "Expand sidebar", children: /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: onToggle,
+          "aria-label": "Expand sidebar",
+          "aria-pressed": true,
+          className: "group/brand relative flex h-9 w-9 items-center justify-center rounded-md transition-colors hover:bg-[var(--accent-surface-soft)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center transition-opacity duration-150 group-hover/brand:opacity-0", children: brand }),
+            /* @__PURE__ */ jsx3("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center text-foreground opacity-0 transition-opacity duration-150 group-hover/brand:opacity-100", children: /* @__PURE__ */ jsx3(PanelLeft, { className: "h-[18px] w-[18px]" }) })
+          ]
+        }
+      ) }) : brandNode : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        brand !== void 0 && brandNode,
+        /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children }),
+        collapsible && /* @__PURE__ */ jsx3(PanelToggleButton, { collapsed, onToggle })
+      ] })
+    }
+  );
+}
 function Sidebar({ children, className, style }) {
   const { panelOpen, hidden, hasPanels, railWidth } = useSidebar();
   return /* @__PURE__ */ jsx3(
@@ -294,8 +394,8 @@ function SidebarRail({ children, className, wide = false }) {
 function SidebarRailHeader({ children, className }) {
   return /* @__PURE__ */ jsx3("div", { className: cn("flex h-14 shrink-0 items-center justify-center border-b border-[var(--md3-outline-variant)]", className), children });
 }
-function SidebarRailNav({ children, className }) {
-  return /* @__PURE__ */ jsx3("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1 min-h-0 overflow-y-auto", className), children });
+function SidebarRailNav({ children, className, onClick }) {
+  return /* @__PURE__ */ jsx3("nav", { onClick, 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__ */ jsx3("div", { className: cn("flex flex-col items-center gap-1 pb-3 shrink-0", className), children });
@@ -303,13 +403,16 @@ function SidebarRailFooter({ children, className }) {
 function RailSeparator({ className }) {
   return /* @__PURE__ */ jsx3("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 }) {
+function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children, variant = "normal" }) {
   const classes = cn(
     "relative flex shrink-0 items-center justify-center rounded-md transition-colors duration-150",
     showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
     // Quiet press feedback via color only — no scale on the full-width row.
     "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-    isActive ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+    // The active item (route matches) and any explicit primary share one
+    // emphasized look — a filled accent pill with an accent ring — so the
+    // current destination clearly stands out from the default rows.
+    variant === "primary" || isActive ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] font-medium ring-1 ring-inset ring-[var(--border-accent)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     className
   );
   const iconWithBadge = /* @__PURE__ */ jsxs2("span", { className: "relative flex shrink-0 items-center justify-center", children: [
@@ -320,9 +423,9 @@ function RailButton({ icon: Icon, label, isActive, badge, onClick, className, sh
     iconWithBadge,
     showLabel && /* @__PURE__ */ jsx3("span", { className: "text-[13.5px] font-medium", children: label })
   ] });
-  if (asChild && React2.isValidElement(children)) {
+  if (asChild && React3.isValidElement(children)) {
     const child = children;
-    const merged = React2.cloneElement(
+    const merged = React3.cloneElement(
       child,
       { className: cn(classes, child.props.className), "aria-label": child.props["aria-label"] ?? label },
       content
@@ -340,9 +443,9 @@ function RailFlyout({
   children,
   className
 }) {
-  const [open, setOpen] = React2.useState(false);
-  const ref = React2.useRef(null);
-  React2.useEffect(() => {
+  const [open, setOpen] = React3.useState(false);
+  const ref = React3.useRef(null);
+  React3.useEffect(() => {
     if (!open) return;
     const onPointer = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -402,8 +505,8 @@ function RailFlyout({
           if (el.closest("a,button")) setOpen(false);
         },
         className: cn(
-          "absolute top-0 z-50 min-w-[12rem] rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1.5 shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
-          showLabel ? "left-full ml-2" : "left-full ml-2"
+          "absolute left-full top-0 z-50 ml-2 min-w-[12rem] p-1.5",
+          RAIL_FLOATING_SURFACE
         ),
         children: [
           /* @__PURE__ */ jsx3("p", { className: "px-2 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 select-none", children: title ?? label }),
@@ -419,6 +522,233 @@ function ChevronRightIcon({ className }) {
     /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" })
   ] });
 }
+function useExpandableItems(subItems, loadSubItems) {
+  const [items, setItems] = React3.useState(subItems ?? null);
+  const [loading, setLoading] = React3.useState(false);
+  const loadedRef = React3.useRef(subItems !== void 0);
+  React3.useEffect(() => {
+    if (subItems !== void 0) {
+      setItems(subItems);
+      loadedRef.current = true;
+    }
+  }, [subItems]);
+  const ensureLoaded = React3.useCallback(() => {
+    if (loadedRef.current || !loadSubItems) return;
+    loadedRef.current = true;
+    setLoading(true);
+    Promise.resolve(loadSubItems()).then(
+      (resolved) => {
+        setItems(resolved);
+        setLoading(false);
+      },
+      () => {
+        setItems([]);
+        setLoading(false);
+        loadedRef.current = false;
+      }
+    );
+  }, [loadSubItems]);
+  return { items, loading, ensureLoaded };
+}
+function SubItemsSkeleton() {
+  const widths = ["w-[88%]", "w-[76%]", "w-[82%]", "w-[64%]"];
+  return /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1.5 px-2 py-1.5", children: widths.map((w, i) => /* @__PURE__ */ jsx3(Skeleton, { className: cn("h-4", w) }, i)) });
+}
+function RailExpandable({
+  icon: Icon,
+  label,
+  href,
+  isActive,
+  showLabel,
+  subItems,
+  loadSubItems,
+  activeSubIds,
+  emptyLabel = "Nothing here yet",
+  onNavigate,
+  LinkComponent,
+  className
+}) {
+  const Link = LinkComponent ?? DefaultLink;
+  const [open, setOpen] = React3.useState(false);
+  const { items, loading, ensureLoaded } = useExpandableItems(subItems, loadSubItems);
+  const activeSet = React3.useMemo(() => new Set(activeSubIds ?? []), [activeSubIds]);
+  const triggerRef = React3.useRef(null);
+  const closeTimer = React3.useRef(null);
+  const [coords, setCoords] = React3.useState(null);
+  React3.useEffect(() => () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  const subLink = (item) => {
+    const FIcon = item.icon;
+    const active = activeSet.has(item.id);
+    return /* @__PURE__ */ jsxs2(
+      Link,
+      {
+        href: item.href,
+        to: item.href,
+        onClick: onNavigate,
+        ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {},
+        className: cn(
+          "flex h-8 items-center gap-2 rounded-md px-2.5 text-[12px] 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-foreground"
+        ),
+        children: [
+          FIcon ? /* @__PURE__ */ jsx3(FIcon, { className: "h-4 w-4 shrink-0" }) : null,
+          /* @__PURE__ */ jsx3("span", { className: "truncate", children: item.label })
+        ]
+      },
+      item.id
+    );
+  };
+  const list = loading ? /* @__PURE__ */ jsx3(SubItemsSkeleton, {}) : items && items.length > 0 ? items.map(subLink) : /* @__PURE__ */ jsx3("p", { className: "px-2.5 py-1.5 text-xs text-muted-foreground", children: emptyLabel });
+  if (!showLabel) {
+    const triggerClasses = cn(
+      "relative flex h-9 w-9 items-center justify-center rounded-md transition-colors duration-150",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      isActive || open ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] font-medium ring-1 ring-inset ring-[var(--border-accent)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground"
+    );
+    const openFlyout = () => {
+      if (closeTimer.current) {
+        clearTimeout(closeTimer.current);
+        closeTimer.current = null;
+      }
+      ensureLoaded();
+      const el = triggerRef.current;
+      if (el) {
+        const r = el.getBoundingClientRect();
+        const m = 8;
+        const left = r.right + m;
+        const spaceBelow = window.innerHeight - r.top - m;
+        const spaceAbove = r.bottom - m;
+        setCoords(
+          spaceBelow >= spaceAbove ? { left, top: r.top, maxHeight: spaceBelow } : { left, bottom: window.innerHeight - r.bottom, maxHeight: spaceAbove }
+        );
+      }
+      setOpen(true);
+    };
+    const scheduleClose = () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+      closeTimer.current = setTimeout(() => setOpen(false), 140);
+    };
+    const cancelClose = () => {
+      if (closeTimer.current) {
+        clearTimeout(closeTimer.current);
+        closeTimer.current = null;
+      }
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: triggerRef,
+        className: cn("relative", className),
+        onMouseEnter: openFlyout,
+        onMouseLeave: scheduleClose,
+        onFocusCapture: openFlyout,
+        onBlurCapture: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) scheduleClose();
+        },
+        children: [
+          href ? /* @__PURE__ */ jsx3(Link, { href, to: href, onClick: onNavigate, "aria-label": label, className: triggerClasses, children: /* @__PURE__ */ jsx3(Icon, { className: "h-[17px] w-[17px] shrink-0" }) }) : /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, className: triggerClasses, children: /* @__PURE__ */ jsx3(Icon, { className: "h-[17px] w-[17px] shrink-0" }) }),
+          open && coords !== null && typeof document !== "undefined" && createPortal2(
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                role: "menu",
+                style: {
+                  position: "fixed",
+                  left: coords.left,
+                  top: coords.top,
+                  bottom: coords.bottom,
+                  maxHeight: coords.maxHeight
+                },
+                onMouseEnter: cancelClose,
+                onMouseLeave: scheduleClose,
+                onClickCapture: (e) => {
+                  if (e.target.closest("a")) setOpen(false);
+                },
+                className: cn("z-[70] flex w-60 flex-col overflow-hidden p-1.5", RAIL_FLOATING_SURFACE),
+                children: [
+                  /* @__PURE__ */ jsx3("p", { className: "shrink-0 px-2 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 select-none", children: label }),
+                  /* @__PURE__ */ jsx3("div", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto", children: list })
+                ]
+              }
+            ),
+            document.body
+          )
+        ]
+      }
+    );
+  }
+  const toggle = () => {
+    setOpen((v) => {
+      const next = !v;
+      if (next) ensureLoaded();
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "group/exp relative flex h-9 w-full items-center rounded-md transition-colors duration-150",
+          isActive ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] font-medium ring-1 ring-inset ring-[var(--border-accent)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: toggle,
+              "aria-expanded": open,
+              "aria-label": open ? `Collapse ${label}` : `Expand ${label}`,
+              className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsx3(
+                  Icon,
+                  {
+                    className: cn(
+                      "h-[17px] w-[17px] shrink-0 transition-opacity duration-150",
+                      open ? "opacity-0" : "opacity-100 group-hover/exp:opacity-0"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  ChevronRightIcon,
+                  {
+                    className: cn(
+                      "absolute h-4 w-4 transition-all duration-150",
+                      open ? "rotate-90 opacity-100" : "opacity-0 group-hover/exp:opacity-100"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          href ? /* @__PURE__ */ jsx3(
+            Link,
+            {
+              href,
+              to: href,
+              onClick: onNavigate,
+              className: "flex h-9 min-w-0 flex-1 items-center pr-2.5 text-[13.5px] font-medium",
+              children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: label })
+            }
+          ) : /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: toggle,
+              className: "flex h-9 min-w-0 flex-1 items-center pr-2.5 text-left text-[13.5px] font-medium",
+              children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: label })
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx3("div", { className: "mt-0.5 flex flex-col gap-0.5 pl-3", children: list })
+  ] });
+}
 function RailModeButton({ mode, icon, label, badge, className, showLabel }) {
   const { panelOpen, mode: currentMode, switchMode } = useSidebar();
   return /* @__PURE__ */ jsx3(
@@ -468,6 +798,58 @@ function SidebarContent({ children, className }) {
     }
   );
 }
+var APPEARANCE_META = {
+  light: { label: "Light", Icon: SunIcon },
+  dark: { label: "Dark", Icon: MoonIcon },
+  system: { label: "System", Icon: Monitor }
+};
+function AppearanceMenuSection({ appearance, divider = true }) {
+  const modes = appearance.modes ?? ["light", "dark", "system"];
+  const [systemDark, setSystemDark] = React3.useState(false);
+  React3.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemDark(mq.matches);
+    const onChange = () => setSystemDark(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  const resolved = appearance.value === "system" ? systemDark ? "dark" : "light" : appearance.value;
+  const TriggerIcon = resolved === "dark" ? MoonIcon : SunIcon;
+  const caption = appearance.value === "system" ? `System (${resolved === "dark" ? "Dark" : "Light"})` : APPEARANCE_META[appearance.value].label;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    divider && /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+    /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs2(DropdownMenuSubTrigger, { children: [
+        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "mr-2 inline-flex shrink-0", children: /* @__PURE__ */ jsx3(TriggerIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col leading-tight", children: [
+          /* @__PURE__ */ jsx3("span", { children: "Appearance" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-xs text-muted-foreground", children: caption })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3(DropdownMenuSubContent, { sideOffset: 6, className: "min-w-[12rem]", children: modes.map((m) => {
+        const { label, Icon } = APPEARANCE_META[m];
+        const active = appearance.value === m;
+        return /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onSelect: (e) => {
+              e.preventDefault();
+              appearance.onChange(m);
+            },
+            className: "gap-3 py-2 text-[14px]",
+            children: [
+              /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "inline-flex shrink-0", children: /* @__PURE__ */ jsx3(Icon, { className: "h-[18px] w-[18px]" }) }),
+              /* @__PURE__ */ jsx3("span", { className: "flex-1", children: label }),
+              active && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "inline-flex shrink-0 text-[var(--accent-text)]", children: /* @__PURE__ */ jsx3(Check, { className: "h-[18px] w-[18px]" }) })
+            ]
+          },
+          m
+        );
+      }) })
+    ] })
+  ] });
+}
 function ProfileAvatar({
   user,
   isLoading = false,
@@ -477,6 +859,7 @@ function ProfileAvatar({
   children,
   className,
   showDetails = false,
+  appearance,
   LinkComponent
 }) {
   const Link = LinkComponent ?? DefaultLink;
@@ -501,7 +884,7 @@ function ProfileAvatar({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs2(DropdownMenuContent, { side: "right", align: "end", sideOffset: 8, className: "w-72", children: [
+    /* @__PURE__ */ jsxs2(DropdownMenuContent, { side: "top", align: "start", sideOffset: 8, className: "w-72", children: [
       /* @__PURE__ */ jsx3(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 px-2 py-3", children: [
         /* @__PURE__ */ jsxs2(Avatar, { className: "h-12 w-12 shrink-0", children: [
           user?.avatarUrl && /* @__PURE__ */ jsx3(AvatarImage, { src: user.avatarUrl, alt: "" }),
@@ -521,6 +904,7 @@ function ProfileAvatar({
       ] }) }),
       /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
       children,
+      appearance && /* @__PURE__ */ jsx3(AppearanceMenuSection, { appearance, divider: Boolean(children) }),
       onSettingsClick ? /* @__PURE__ */ jsxs2(DropdownMenuItem, { onClick: onSettingsClick, children: [
         /* @__PURE__ */ jsx3(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
         "Settings"
@@ -540,7 +924,7 @@ function ProfileAvatar({
 }
 
 // src/dashboard/credit-balance.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function CreditBalance({
   amount,
@@ -549,7 +933,7 @@ function CreditBalance({
   quickAmounts = [10, 25, 100],
   className
 }) {
-  const [topUpValue, setTopUpValue] = React3.useState("50.00");
+  const [topUpValue, setTopUpValue] = React4.useState("50.00");
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -679,12 +1063,12 @@ function OutOfCreditsModal({
 }
 
 // src/dashboard/cluster-status-bar.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ClusterStatusBar({ items, latency, className }) {
   if (!items?.length) return null;
   return /* @__PURE__ */ jsx6("div", { className: cn("fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-max max-w-[90vw] animate-in slide-in-from-bottom flex justify-center", className), children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-4 overflow-x-auto rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-5 py-2.5 shadow-sm", children: [
-    items.map((item, i) => /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
+    items.map((item, i) => /* @__PURE__ */ jsxs5(React5.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "h-5 w-px shrink-0 bg-border" }),
       /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2", children: [
         item.icon ? /* @__PURE__ */ jsx6("span", { className: "flex shrink-0 items-center text-[var(--md3-primary)] [&_svg]:h-[18px] [&_svg]:w-[18px]", children: item.icon }) : null,
@@ -776,7 +1160,7 @@ function ResourceSnapshot({
 }
 
 // src/dashboard/activity-feed.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { Skeleton as Skeleton3 } from "@tangle-network/ui/primitives";
 import { timeAgo } from "@tangle-network/ui/utils";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -789,7 +1173,7 @@ function ActivityFeed({
   emptyLabel = "No recent activity",
   className
 }) {
-  const sorted = React5.useMemo(
+  const sorted = React6.useMemo(
     () => [...items].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0)).slice(0, maxItems),
     [items, maxItems]
   );
@@ -1103,7 +1487,7 @@ function NewSandboxCard({ onClick, className }) {
 }
 
 // src/dashboard/sandbox-table.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import {
   Activity as Activity2,
   BarChart2 as BarChart22,
@@ -1378,7 +1762,7 @@ function SandboxTable({
                           children: /* @__PURE__ */ jsx11(MoreVertical2, { className: "h-4 w-4" })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx11(DropdownMenuContent3, { align: "end", className: "min-w-[180px]", children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs10(React6.Fragment, { children: [
+                      /* @__PURE__ */ jsx11(DropdownMenuContent3, { align: "end", className: "min-w-[180px]", children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs10(React7.Fragment, { children: [
                         sectionIdx > 0 && /* @__PURE__ */ jsx11(DropdownMenuSeparator3, {}),
                         section
                       ] }, sectionIdx)) })
@@ -1466,7 +1850,7 @@ function InvoiceTable({ invoices, onExportAll, onLoadMore, onViewInvoice, hasMor
 }
 
 // src/dashboard/plan-cards.tsx
-import { Check } from "lucide-react";
+import { Check as Check2 } from "lucide-react";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function PlanCards({ plans, className }) {
   return /* @__PURE__ */ jsxs12("section", { className, children: [
@@ -1492,7 +1876,7 @@ function PlanCards({ plans, className }) {
             ] })
           ] }),
           /* @__PURE__ */ jsx13("ul", { className: "space-y-2 mb-5 text-sm text-muted-foreground", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs12("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx13(Check, { className: "h-3.5 w-3.5 text-primary shrink-0" }),
+            /* @__PURE__ */ jsx13(Check2, { className: "h-3.5 w-3.5 text-primary shrink-0" }),
             f.text
           ] }, i)) }),
           /* @__PURE__ */ jsx13(
@@ -1515,16 +1899,9 @@ function PlanCards({ plans, className }) {
 }
 
 // src/dashboard/dashboard-layout.tsx
-import * as React7 from "react";
-import { Plus as Plus2, Bell, ChevronsLeft, ChevronsRight } from "lucide-react";
+import * as React8 from "react";
+import { Plus as Plus2, Bell } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-function SettingsIconSmall({ className }) {
-  return /* @__PURE__ */ jsxs13("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__ */ jsx14("title", { children: "Settings" }),
-    /* @__PURE__ */ jsx14("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
-    /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "3" })
-  ] });
-}
 function MenuIcon({ className }) {
   return /* @__PURE__ */ jsxs13("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__ */ jsx14("title", { children: "Menu icon" }),
@@ -1574,19 +1951,18 @@ function DashboardLayoutInner({
   topBarLeading,
   LinkComponent = DefaultLink2,
   logoHref = "/",
-  onLogoClick,
-  logoAriaLabel = "Toggle navigation",
   labeledRail = false,
   footer,
   railFooter,
   profileMenuItems,
+  appearance,
   notifications: notifData
 }) {
   const Link = LinkComponent;
-  const [mobileMenuOpen, setMobileMenuOpen] = React7.useState(false);
-  const [notificationsOpen, setNotificationsOpen] = React7.useState(false);
-  const notifRef = React7.useRef(null);
-  React7.useEffect(() => {
+  const [mobileMenuOpen, setMobileMenuOpen] = React8.useState(false);
+  const [notificationsOpen, setNotificationsOpen] = React8.useState(false);
+  const notifRef = React8.useRef(null);
+  React8.useEffect(() => {
     if (!notificationsOpen) return;
     const handler = (e) => {
       if (notifRef.current && !notifRef.current.contains(e.target)) {
@@ -1604,123 +1980,87 @@ function DashboardLayoutInner({
     };
   }, [notificationsOpen]);
   const { contentMargin, hidden, mode, hasPanels, panelOpen, toggleRail, railCollapsed } = useSidebar();
-  const modeSet = React7.useMemo(() => new Set(modeItems), [modeItems]);
-  const sidebarUser = React7.useMemo(
+  const modeSet = React8.useMemo(() => new Set(modeItems), [modeItems]);
+  const sidebarUser = React8.useMemo(
     () => user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0,
     [user?.email, user?.name, user?.tier, user?.avatarUrl]
   );
   const activePanel = panels.find((p) => p.mode === mode);
-  const buildSidebarContent = React7.useCallback(
+  const buildSidebarContent = React8.useCallback(
     (showLabels, allowCollapse) => /* @__PURE__ */ jsxs13(Fragment9, { children: [
       /* @__PURE__ */ jsxs13(SidebarRail, { wide: showLabels, children: [
-        /* @__PURE__ */ jsx14(SidebarRailHeader, { className: cn(showLabels && "justify-start px-3"), children: onLogoClick ? /* @__PURE__ */ jsx14(
-          "button",
+        /* @__PURE__ */ jsx14(
+          RailHeader,
           {
-            type: "button",
-            onClick: onLogoClick,
-            "aria-label": logoAriaLabel,
-            className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
-            children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
+            brand: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }),
+            brandHref: logoHref,
+            collapsed: !showLabels,
+            onToggle: toggleRail,
+            collapsible: allowCollapse,
+            LinkComponent: Link
           }
-        ) : allowCollapse ? (
-          // The logo IS the collapse/expand control on the desktop rail
-          // (allowCollapse). The mobile drawer never collapses, so it falls
-          // through to the plain logo link. Expanded: full logotype with a
-          // collapse chevron that fades in on hover. Collapsed: the mark,
-          // with an expand chevron overlay on hover.
-          /* @__PURE__ */ jsxs13(
-            "button",
-            {
-              type: "button",
-              onClick: toggleRail,
-              "aria-label": railCollapsed ? "Expand navigation" : "Collapse navigation",
-              "aria-expanded": !railCollapsed,
-              className: cn(
-                "group/logo relative flex items-center gap-2 rounded-md p-1 transition-colors hover:bg-surface-container-high",
-                showLabels && "w-full"
-              ),
-              children: [
-                /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: !showLabels }),
-                showLabels ? /* @__PURE__ */ jsx14(ChevronsLeft, { className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/logo:opacity-100" }) : /* @__PURE__ */ jsx14("span", { className: "absolute inset-0 flex items-center justify-center rounded-md bg-surface-container-high opacity-0 transition-opacity group-hover/logo:opacity-100", children: /* @__PURE__ */ jsx14(ChevronsRight, { className: "h-4 w-4 text-foreground" }) })
-              ]
-            }
-          )
-        ) : /* @__PURE__ */ jsx14(
-          Link,
+        ),
+        /* @__PURE__ */ jsx14(
+          SidebarRailNav,
           {
-            href: logoHref,
-            to: logoHref,
-            className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
-            children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
+            className: cn(showLabels ? "px-2" : void 0, !showLabels && allowCollapse && "cursor-pointer"),
+            onClick: !showLabels && allowCollapse ? (e) => {
+              if (e.target === e.currentTarget) toggleRail();
+            } : 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(React8.Fragment, { children: [
+                showSep && /* @__PURE__ */ jsx14(
+                  RailSeparator,
+                  {
+                    className: showLabels ? "w-full" : void 0
+                  }
+                ),
+                isMode ? /* @__PURE__ */ jsx14(
+                  RailModeButton,
+                  {
+                    mode: item.id,
+                    icon: item.icon,
+                    label: item.label,
+                    badge: item.badge,
+                    showLabel: showLabels
+                  }
+                ) : /* @__PURE__ */ jsx14(
+                  RailButton,
+                  {
+                    icon: item.icon,
+                    label: item.label,
+                    isActive: activeNavId === item.id,
+                    showLabel: showLabels,
+                    asChild: true,
+                    children: /* @__PURE__ */ jsx14(Link, { href: item.href, to: item.href })
+                  }
+                )
+              ] }, item.id);
+            })
           }
-        ) }),
-        /* @__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(React7.Fragment, { children: [
-            showSep && /* @__PURE__ */ jsx14(
-              RailSeparator,
-              {
-                className: showLabels ? "w-full" : void 0
-              }
-            ),
-            isMode ? /* @__PURE__ */ jsx14(
-              RailModeButton,
-              {
-                mode: item.id,
-                icon: item.icon,
-                label: item.label,
-                badge: item.badge,
-                showLabel: showLabels
-              }
-            ) : /* @__PURE__ */ jsx14(
-              RailButton,
-              {
-                icon: item.icon,
-                label: item.label,
-                isActive: activeNavId === item.id,
-                showLabel: showLabels,
-                asChild: true,
-                children: /* @__PURE__ */ jsx14(Link, { href: item.href, to: item.href })
-              }
-            )
-          ] }, item.id);
-        }) }),
-        /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn(showLabels && "items-stretch px-2"), children: [
-          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 }) }),
-          /* @__PURE__ */ jsx14(RailSeparator, { className: showLabels ? "w-full" : void 0 }),
-          railFooter !== void 0 ? showLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
-            /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx14(
-              ProfileAvatar,
-              {
-                user: sidebarUser,
-                isLoading,
-                onLogout,
-                onSettingsClick,
-                settingsHref,
-                showDetails: showLabels,
-                LinkComponent,
-                children: profileMenuItems
-              }
-            ) }),
-            /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: railFooter })
-          ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-1", children: [
-            railFooter,
-            /* @__PURE__ */ jsx14(
-              ProfileAvatar,
-              {
-                user: sidebarUser,
-                isLoading,
-                onLogout,
-                onSettingsClick,
-                settingsHref,
-                showDetails: showLabels,
-                LinkComponent,
-                children: profileMenuItems
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx14(
+        ),
+        /* @__PURE__ */ jsx14(SidebarRailFooter, { className: cn("border-t border-[var(--md3-outline-variant)] pt-2", showLabels && "items-stretch px-2"), children: railFooter !== void 0 ? showLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
+          /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx14(
+            ProfileAvatar,
+            {
+              user: sidebarUser,
+              isLoading,
+              onLogout,
+              onSettingsClick,
+              settingsHref,
+              showDetails: showLabels,
+              appearance,
+              LinkComponent,
+              children: profileMenuItems
+            }
+          ) }),
+          /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: railFooter })
+        ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-1", children: [
+          railFooter,
+          /* @__PURE__ */ jsx14(
             ProfileAvatar,
             {
               user: sidebarUser,
@@ -1729,11 +2069,25 @@ function DashboardLayoutInner({
               onSettingsClick,
               settingsHref,
               showDetails: showLabels,
+              appearance,
               LinkComponent,
               children: profileMenuItems
             }
           )
-        ] })
+        ] }) : /* @__PURE__ */ jsx14(
+          ProfileAvatar,
+          {
+            user: sidebarUser,
+            isLoading,
+            onLogout,
+            onSettingsClick,
+            settingsHref,
+            showDetails: showLabels,
+            appearance,
+            LinkComponent,
+            children: profileMenuItems
+          }
+        ) })
       ] }),
       panels.length > 0 && /* @__PURE__ */ jsxs13(SidebarPanel, { children: [
         /* @__PURE__ */ jsx14(SidebarPanelHeader, { title: activePanel?.title ?? mode }),
@@ -1744,8 +2098,6 @@ function DashboardLayoutInner({
     [
       Link,
       variant,
-      onLogoClick,
-      logoAriaLabel,
       logoHref,
       labeledRail,
       toggleRail,
@@ -1761,16 +2113,17 @@ function DashboardLayoutInner({
       onLogout,
       LinkComponent,
       profileMenuItems,
+      appearance,
       panels,
       activePanel,
       mode
     ]
   );
-  const sidebarContent = React7.useMemo(
+  const sidebarContent = React8.useMemo(
     () => buildSidebarContent(labeledRail && !railCollapsed, labeledRail),
     [buildSidebarContent, labeledRail, railCollapsed]
   );
-  const mobileSidebarContent = React7.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
+  const mobileSidebarContent = React8.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
   return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-surface text-foreground", className), children: [
     /* @__PURE__ */ jsxs13(
       "nav",
@@ -1933,9 +2286,8 @@ function SidebarLayoutInner({
   onSettingsClick,
   settingsHref,
   profileMenuItems,
-  showThemeToggle = false,
+  appearance,
   railFooter,
-  railCollapseToggle = "footer",
   LinkComponent,
   hideBelow,
   railLabels = false,
@@ -1947,26 +2299,46 @@ function SidebarLayoutInner({
   const Link = LinkComponent ?? DefaultLink3;
   const { panelOpen, togglePanel, setPanelOpen, railCollapsed, toggleRail } = useSidebar();
   const handleNavClick = closePanelOnNavigate && panelOpen ? () => setPanelOpen(false) : void 0;
+  const expandOnEmptyClick = railLabels && railCollapsed ? (e) => {
+    if (e.target === e.currentTarget) toggleRail();
+  } : void 0;
   const hasProfile = user !== void 0 || onLogout !== void 0 || onSettingsClick !== void 0;
   const showLabels = railLabels && !railCollapsed;
   return /* @__PURE__ */ jsxs14("div", { className: cn("min-h-screen bg-surface text-foreground", className), children: [
     /* @__PURE__ */ jsx15("div", { className: cn(hideBelow && HIDE_BELOW_CLASS[hideBelow]), children: /* @__PURE__ */ jsxs14(Sidebar, { className: sidebarClassName, children: [
       /* @__PURE__ */ jsxs14(SidebarRail, { children: [
-        (railHeaderContent !== void 0 || logo !== void 0 || railLabels && railCollapseToggle === "header") && /* @__PURE__ */ jsxs14(SidebarRailHeader, { className: cn(showLabels && (railHeaderContent !== void 0 ? "px-2" : "justify-start px-4")), children: [
-          railHeaderContent !== void 0 ? railHeaderContent : logo !== void 0 ? /* @__PURE__ */ jsx15(
-            Link,
-            {
-              href: logoHref,
-              to: logoHref,
-              className: "flex items-center justify-center rounded-lg p-1 transition-colors hover:bg-surface-container-high",
-              children: logo
-            }
-          ) : null,
-          railLabels && railCollapseToggle === "header" && // Icon-only in the header row (the labeled, full-width variant is
-          // for the vertical footer stack); sits beside the logo/content.
-          /* @__PURE__ */ jsx15(RailCollapseToggle, { collapsed: railCollapsed, showLabel: false, onToggle: toggleRail, className: "shrink-0" })
-        ] }),
-        /* @__PURE__ */ jsx15(SidebarRailNav, { className: showLabels ? "px-2" : void 0, children: navItems.map((item) => {
+        (logo !== void 0 || railHeaderContent !== void 0 || railLabels) && /* @__PURE__ */ jsx15(
+          RailHeader,
+          {
+            brand: logo,
+            brandHref: logoHref,
+            collapsed: !showLabels,
+            onToggle: toggleRail,
+            collapsible: railLabels,
+            LinkComponent,
+            children: railHeaderContent
+          }
+        ),
+        /* @__PURE__ */ jsx15(SidebarRailNav, { className: cn(showLabels ? "px-2" : void 0, expandOnEmptyClick && "cursor-pointer"), onClick: expandOnEmptyClick, children: navItems.map((item) => {
+          if (item.expandable) {
+            return /* @__PURE__ */ jsx15(
+              RailExpandable,
+              {
+                icon: item.icon,
+                label: item.label,
+                href: item.href,
+                isActive: activeId === item.id,
+                showLabel: showLabels,
+                subItems: item.subItems,
+                loadSubItems: item.loadSubItems,
+                activeSubIds: item.subActiveIds,
+                emptyLabel: item.emptyLabel,
+                onNavigate: handleNavClick,
+                LinkComponent
+              },
+              item.id
+            );
+          }
           if (item.flyoutItems && item.flyoutItems.length > 0) {
             const activeSet = new Set(item.flyoutActiveIds ?? []);
             return /* @__PURE__ */ jsx15(
@@ -2014,7 +2386,7 @@ function SidebarLayoutInner({
               showLabel: showLabels
             },
             item.id
-          ) : /* @__PURE__ */ jsx15(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: showLabels, asChild: true, children: /* @__PURE__ */ jsx15(
+          ) : /* @__PURE__ */ jsx15(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: showLabels, variant: item.variant, asChild: true, children: /* @__PURE__ */ jsx15(
             Link,
             {
               href: item.href,
@@ -2024,32 +2396,22 @@ function SidebarLayoutInner({
             }
           ) }, item.id);
         }) }),
-        (railLabels || railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs14(SidebarRailFooter, { className: cn("border-t border-[var(--md3-outline-variant)] pt-2", showLabels && "items-stretch px-2"), children: [
-          railLabels && railCollapseToggle === "footer" && /* @__PURE__ */ jsx15(RailCollapseToggle, { collapsed: railCollapsed, showLabel: showLabels, onToggle: toggleRail }),
+        (railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs14(SidebarRailFooter, { className: cn("border-t border-[var(--md3-outline-variant)] pt-2", showLabels && "items-stretch px-2"), children: [
           railFooter,
-          hasProfile && (() => {
-            const profile = /* @__PURE__ */ jsx15(
-              ProfileAvatar,
-              {
-                user: user ?? void 0,
-                isLoading,
-                onLogout,
-                onSettingsClick,
-                settingsHref,
-                showDetails: showLabels,
-                LinkComponent: Link,
-                children: profileMenuItems
-              }
-            );
-            if (!showThemeToggle) return profile;
-            return showLabels ? /* @__PURE__ */ jsxs14("div", { className: "flex w-full items-center gap-1", children: [
-              /* @__PURE__ */ jsx15("div", { className: "min-w-0 flex-1", children: profile }),
-              /* @__PURE__ */ jsx15(RailThemeToggle, {})
-            ] }) : /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx15(RailThemeToggle, {}),
-              profile
-            ] });
-          })()
+          hasProfile && /* @__PURE__ */ jsx15(
+            ProfileAvatar,
+            {
+              user: user ?? void 0,
+              isLoading,
+              onLogout,
+              onSettingsClick,
+              settingsHref,
+              showDetails: showLabels,
+              appearance,
+              LinkComponent: Link,
+              children: profileMenuItems
+            }
+          )
         ] })
       ] }),
       panel != null && /* @__PURE__ */ jsx15(SidebarPanel, { children: panel })
@@ -2083,7 +2445,7 @@ function SidebarLayout({
 }
 
 // src/dashboard/profile-selector.tsx
-import { Check as Check2, ChevronDown, Plus as Plus3, Settings } from "lucide-react";
+import { Check as Check3, ChevronDown, Plus as Plus3, Settings } from "lucide-react";
 import { Button as Button2 } from "@tangle-network/ui/primitives";
 import { Badge } from "@tangle-network/ui/primitives";
 import {
@@ -2124,7 +2486,7 @@ function ProfileSelector({
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsx16("span", { children: placeholder }),
-              !selectedId && /* @__PURE__ */ jsx16(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+              !selectedId && /* @__PURE__ */ jsx16(Check3, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
             ]
           }
         ),
@@ -2145,7 +2507,7 @@ function ProfileSelector({
                       profile.extends
                     ] })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx16(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx16(Check3, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
                 ] }),
                 profile.description && /* @__PURE__ */ jsx16("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
               ]
@@ -2167,7 +2529,7 @@ function ProfileSelector({
                     /* @__PURE__ */ jsx16("span", { className: "font-medium", children: profile.name }),
                     profile.model && /* @__PURE__ */ jsx16(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx16(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx16(Check3, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
                 ] }),
                 profile.description && /* @__PURE__ */ jsx16("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
                 showMetrics && profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs15("div", { className: "flex gap-3 text-muted-foreground text-xs", children: [
@@ -2285,7 +2647,7 @@ function ProfileComparison({
 }
 
 // src/dashboard/metric-area-chart.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var TONE_VARS = {
   primary: "var(--brand-primary, hsl(var(--primary)))",
@@ -2332,7 +2694,7 @@ function MetricAreaChart({
   emptyState,
   className
 }) {
-  const gradientId = React8.useId();
+  const gradientId = React9.useId();
   const width = 400;
   const values = points.map((p) => p.value).filter((v) => v !== null);
   const latest = values.length > 0 ? values[values.length - 1] : null;
@@ -2392,7 +2754,7 @@ function MetricAreaChart({
                 /* @__PURE__ */ jsx17("stop", { offset: "0%", stopColor: color, stopOpacity: 0.28 }),
                 /* @__PURE__ */ jsx17("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })
               ] }) }),
-              segments.map((segment) => /* @__PURE__ */ jsxs16(React8.Fragment, { children: [
+              segments.map((segment) => /* @__PURE__ */ jsxs16(React9.Fragment, { children: [
                 /* @__PURE__ */ jsx17("path", { d: segment.area, fill: `url(#${gradientId})` }),
                 /* @__PURE__ */ jsx17(
                   "path",
@@ -2421,7 +2783,7 @@ function MetricAreaChart({
 
 // src/dashboard/variant-list.tsx
 import {
-  Check as Check3,
+  Check as Check4,
   CheckCircle2,
   Clock as Clock3,
   ExternalLink as ExternalLink2,
@@ -2568,7 +2930,7 @@ function VariantList({
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx18(Check3, { className: "mr-1 h-3 w-3" }),
+                      /* @__PURE__ */ jsx18(Check4, { className: "mr-1 h-3 w-3" }),
                       "Accept"
                     ]
                   }
@@ -2617,14 +2979,14 @@ function VariantList({
 
 // src/dashboard/system-logs.tsx
 import { Terminal as Terminal2 } from "lucide-react";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx19, jsxs as jsxs18 } 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 = useRef3(null);
-  useEffect3(() => {
+  const [logs, setLogs] = useState6([]);
+  const [error, setError] = useState6(null);
+  const [isFollowing, setIsFollowing] = useState6(true);
+  const scrollRef = useRef4(null);
+  useEffect4(() => {
     let timeoutId;
     let backoff = 2e3;
     const controller = new AbortController();
@@ -2660,7 +3022,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
       clearTimeout(timeoutId);
     };
   }, [apiUrl, token]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isFollowing && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -2867,14 +3229,14 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
 }
 
 // src/dashboard/ports-list.tsx
-import * as React10 from "react";
-import { Copy as Copy3, Check as Check4, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
+import * as React11 from "react";
+import { Copy as Copy3, Check as Check5, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
-  const [newPort, setNewPort] = React10.useState("");
-  const [copiedPort, setCopiedPort] = React10.useState(null);
-  const copyTimerRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const [newPort, setNewPort] = React11.useState("");
+  const [copiedPort, setCopiedPort] = React11.useState(null);
+  const copyTimerRef = React11.useRef(null);
+  React11.useEffect(() => {
     return () => {
       if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
     };
@@ -2914,7 +3276,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
             className: "flex items-center gap-2 font-mono text-xs text-primary hover:underline cursor-pointer group",
             children: [
               /* @__PURE__ */ jsx22("span", { className: "truncate max-w-[300px]", children: p.url }),
-              copiedPort === p.port ? /* @__PURE__ */ jsx22(Check4, { className: "h-3 w-3 text-[var(--surface-success-text)] shrink-0" }) : /* @__PURE__ */ jsx22(Copy3, { className: "h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" })
+              copiedPort === p.port ? /* @__PURE__ */ jsx22(Check5, { className: "h-3 w-3 text-[var(--surface-success-text)] shrink-0" }) : /* @__PURE__ */ jsx22(Copy3, { className: "h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" })
             ]
           }
         ) }),
@@ -2968,7 +3330,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
 }
 
 // src/dashboard/process-list.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal3 } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function formatUptime(startedAt) {
@@ -2980,7 +3342,7 @@ function formatUptime(startedAt) {
   return `${Math.floor(ms / 36e5)}h ${Math.floor(ms % 36e5 / 6e4)}m`;
 }
 function ProcessList({ processes, onSpawn, onKill, loading = false, className }) {
-  const [newCommand, setNewCommand] = React11.useState("");
+  const [newCommand, setNewCommand] = React12.useState("");
   const handleSpawn = () => {
     const cmd = newCommand.trim();
     if (cmd) {
@@ -3053,11 +3415,11 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
 }
 
 // src/dashboard/network-config.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function NetworkConfig({ config, onUpdate, loading = false, className }) {
-  const [newCidr, setNewCidr] = React12.useState("");
+  const [newCidr, setNewCidr] = React13.useState("");
   const isValidCidr = (value) => {
     const match = value.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\/(\d{1,2})$/);
     if (!match) return false;
@@ -3161,7 +3523,7 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
 }
 
 // src/dashboard/backend-config.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { Bot, Plus as Plus7, RefreshCw as RefreshCw2, Trash2 as Trash25, Server, Wrench } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function BackendConfig({
@@ -3173,10 +3535,10 @@ function BackendConfig({
   loading = false,
   className
 }) {
-  const [showAddMcp, setShowAddMcp] = React13.useState(false);
-  const [mcpName, setMcpName] = React13.useState("");
-  const [mcpCommand, setMcpCommand] = React13.useState("");
-  const [mcpArgs, setMcpArgs] = React13.useState("");
+  const [showAddMcp, setShowAddMcp] = React14.useState(false);
+  const [mcpName, setMcpName] = React14.useState("");
+  const [mcpCommand, setMcpCommand] = React14.useState("");
+  const [mcpArgs, setMcpArgs] = React14.useState("");
   const handleAddMcp = () => {
     const name = mcpName.trim();
     const command = mcpCommand.trim();
@@ -3334,7 +3696,7 @@ function BackendConfig({
 }
 
 // src/dashboard/snapshot-list.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { Camera, Clock as Clock5, HardDrive as HardDrive2, Plus as Plus8, RotateCcw } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatBytes(bytes) {
@@ -3351,8 +3713,8 @@ function formatDate(dateStr) {
   return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
 function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading = false, className }) {
-  const [showCreate, setShowCreate] = React14.useState(false);
-  const [tags, setTags] = React14.useState("");
+  const [showCreate, setShowCreate] = React15.useState(false);
+  const [tags, setTags] = React15.useState("");
   const handleCreate = () => {
     const tagList = tags.trim() ? tags.trim().split(",").map((t) => t.trim()).filter(Boolean) : void 0;
     onCreate(tagList);
@@ -3513,6 +3875,7 @@ export {
   RailTooltip,
   RailThemeToggle,
   RailCollapseToggle,
+  RailHeader,
   Sidebar,
   SidebarRail,
   SidebarRailHeader,
@@ -3521,6 +3884,7 @@ export {
   RailSeparator,
   RailButton,
   RailFlyout,
+  RailExpandable,
   RailModeButton,
   SidebarPanel,
   SidebarPanelHeader,