@tangle-network/sandbox-ui 0.113.4 → 0.113.5

package/dist/{chunk-LDAKIKTV.js → chunk-SX344CDB.js}

@@ -1,7 +1,7 @@
 import {
   Button,
   Logo
-} from "./chunk-2XPJ2XF7.js";
+} from "./chunk-ANSC5AFC.js";
 import {
   moonshot_default
 } from "./chunk-RQZRXKMR.js";
@@ -227,7 +227,8 @@ function RailTooltip({ label, children, disabled, className }) {
 }
 
 // src/dashboard/app-sidebar.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { focusRing } from "@tangle-network/ui/utils";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function DefaultLink({
   href,
   to,
@@ -286,7 +287,7 @@ function RailThemeToggle({ className }) {
         "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
         MOTION_CONTROL,
         "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing,
         className
       ),
       children: isDark ? /* @__PURE__ */ jsx3(SunIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(MoonIcon, { className: "h-4 w-4" })
@@ -320,7 +321,7 @@ function RailCollapseToggle({ collapsed, showLabel, onToggle, className }) {
         MOTION_CONTROL,
         showLabel ? "h-9 w-full justify-start gap-2.5 px-2.5" : "h-9 w-9 justify-center",
         "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing,
         className
       ),
       children: [
@@ -344,15 +345,22 @@ function PanelToggleButton({ collapsed, onToggle, className }) {
         "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
         MOTION_CONTROL,
         "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing,
         className
       ),
       children: /* @__PURE__ */ jsx3(PanelLeft, { className: "h-[18px] w-[18px] shrink-0" })
     }
   );
 }
+function isRenderable(node) {
+  return React3.Children.toArray(node).some(
+    (child) => React3.isValidElement(child) && child.type === React3.Fragment ? isRenderable(child.props.children) : true
+  );
+}
 function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsible = true, LinkComponent, className }) {
   const Link = LinkComponent ?? DefaultLink;
+  const hasBrand = isRenderable(brand);
+  const hasChildren = isRenderable(children);
   const brandNode = brandHref !== void 0 ? /* @__PURE__ */ jsx3(
     Link,
     {
@@ -371,21 +379,50 @@ function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsib
         collapsed ? "justify-center px-2" : "gap-2 px-3",
         className
       ),
-      children: collapsed ? collapsible ? /* @__PURE__ */ jsx3(RailTooltip, { label: "Expand sidebar", children: /* @__PURE__ */ jsxs2(
+      children: collapsed ? !hasBrand && hasChildren ? (
+        // No brand mark: `children` (SidebarLayout's `railHeaderContent`) is
+        // the only rail-top content the consumer gave us, so render it here
+        // too. Dropping it left an EMPTY header — the collapsed rail showed
+        // nothing at all where the product's mark belongs. With neither a
+        // brand nor children, the plain expand button below still owns the
+        // rail top so the rail stays expandable.
+        //
+        // Rendered outside the expand button on purpose: content that owns
+        // the rail top is routinely interactive itself (a mark that expands
+        // the rail on click), and a <button> inside a <button> is invalid
+        // HTML that React refuses to hydrate.
+        //
+        // The explicit "Expand sidebar" control stays in the tree for
+        // keyboard and assistive-tech users (the content may be a passive
+        // switcher, and the empty-rail click fallback is mouse-only). It sits
+        // over the content, invisible and non-interactive until it receives
+        // keyboard focus, so it costs no rail width.
+        /* @__PURE__ */ jsxs2("div", { className: "relative flex min-w-0 items-center justify-center", children: [
+          children,
+          collapsible && /* @__PURE__ */ jsx3(
+            PanelToggleButton,
+            {
+              collapsed,
+              onToggle,
+              className: "pointer-events-none absolute inset-0 m-auto bg-background opacity-0 focus-visible:pointer-events-auto focus-visible:opacity-100"
+            }
+          )
+        ] })
+      ) : collapsible ? /* @__PURE__ */ jsx3(RailTooltip, { label: "Expand sidebar", children: /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
           onClick: onToggle,
           "aria-label": "Expand sidebar",
           "aria-pressed": true,
-          className: cn("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", MOTION_CONTROL),
+          className: cn("group/brand relative flex h-9 w-9 items-center justify-center rounded-md transition-colors hover:bg-[var(--accent-surface-soft)]", focusRing, MOTION_CONTROL),
           children: [
             /* @__PURE__ */ jsx3("span", { className: cn("flex items-center justify-center transition-opacity group-hover/brand:opacity-0", MOTION_CONTROL), children: brand }),
             /* @__PURE__ */ jsx3("span", { className: cn("pointer-events-none absolute inset-0 flex items-center justify-center text-foreground opacity-0 transition-opacity group-hover/brand:opacity-100", MOTION_CONTROL), children: /* @__PURE__ */ jsx3(PanelLeft, { className: "h-[18px] w-[18px]" }) })
           ]
         }
-      ) }) : brandNode : /* @__PURE__ */ jsxs2(Fragment, { children: [
-        brand !== void 0 && brandNode,
+      ) }) : brandNode : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        hasBrand && brandNode,
         /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children }),
         collapsible && /* @__PURE__ */ jsx3(PanelToggleButton, { collapsed, onToggle })
       ] })
@@ -445,7 +482,7 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, s
     MOTION_CONTROL,
     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",
+    focusRing,
     // 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.
@@ -456,7 +493,7 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, s
     /* @__PURE__ */ jsx3(Icon2, { className: "h-[17px] w-[17px] shrink-0" }),
     badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx3("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-[var(--md3-on-primary)] px-1", children: badge > 99 ? "99+" : badge })
   ] });
-  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs2(Fragment2, { children: [
     iconWithBadge,
     showLabel && /* @__PURE__ */ jsx3("span", { className: "text-[13.5px] font-medium", children: label })
   ] });
@@ -512,7 +549,7 @@ function RailFlyout({
     "relative flex shrink-0 items-center rounded-md transition-colors",
     MOTION_CONTROL,
     showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    focusRing,
     active ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     className
   );
@@ -724,7 +761,7 @@ function RailExpandable({
     const triggerClasses = cn(
       "relative flex h-9 w-9 items-center justify-center rounded-md transition-colors",
       MOTION_CONTROL,
-      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      focusRing,
       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 = () => {
@@ -828,7 +865,7 @@ function RailExpandable({
               "aria-expanded": open,
               "aria-controls": discloseId,
               "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",
+              className: `relative flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${focusRing}`,
               children: [
                 /* @__PURE__ */ jsx3(
                   Icon2,
@@ -945,7 +982,7 @@ function AppearanceMenuSection({ appearance, divider = true }) {
   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(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     divider && /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
     /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
       /* @__PURE__ */ jsxs2(DropdownMenuSubTrigger, { children: [
@@ -999,7 +1036,7 @@ function ProfileAvatar({
         className: cn(
           "flex items-center rounded-lg transition-colors hover:bg-[var(--accent-surface-soft)]",
           MOTION_CONTROL,
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          focusRing,
           showDetails ? "w-full gap-2.5 px-3 py-2 text-left" : "justify-center w-12 h-12",
           className
         ),
@@ -1019,10 +1056,10 @@ function ProfileAvatar({
           user?.avatarUrl && /* @__PURE__ */ jsx3(AvatarImage, { src: user.avatarUrl, alt: "" }),
           /* @__PURE__ */ jsx3(AvatarFallback, { className: "text-sm bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]", children: getInitials(user?.name, user?.email) })
         ] }),
-        /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
           /* @__PURE__ */ jsx3(Skeleton, { className: "h-4 w-24 mb-1" }),
           /* @__PURE__ */ jsx3(Skeleton, { className: "h-3 w-32" })
-        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
           /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold truncate", children: user?.name ?? user?.email ?? "Not logged in" }),
           user?.email && user?.name && /* @__PURE__ */ jsx3("p", { className: "text-xs text-muted-foreground truncate", children: user.email }),
           user?.tier && /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground capitalize", children: [
@@ -1041,7 +1078,7 @@ function ProfileAvatar({
         /* @__PURE__ */ jsx3(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
         "Settings"
       ] }) }),
-      onLogout && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      onLogout && /* @__PURE__ */ jsxs2(Fragment2, { children: [
         /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsxs2(DropdownMenuItem, { className: "text-[var(--surface-danger-text)]", onClick: onLogout, children: [
           /* @__PURE__ */ jsx3(LogOutIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
@@ -1054,6 +1091,7 @@ function ProfileAvatar({
 
 // src/dashboard/credit-balance.tsx
 import * as React4 from "react";
+import { focusFieldWithin } from "@tangle-network/ui/utils";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function CreditBalance({
   amount,
@@ -1080,7 +1118,7 @@ function CreditBalance({
           /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description })
         ] }),
         onTopUp && /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 mt-5", children: [
-          /* @__PURE__ */ jsxs3("div", { className: "bg-surface-container-low border border-[var(--md3-outline-variant)] p-1 rounded-lg flex items-center", children: [
+          /* @__PURE__ */ jsxs3("div", { className: `bg-surface-container-low border p-1 rounded-lg flex items-center ${focusFieldWithin}`, children: [
             /* @__PURE__ */ jsx4(
               "input",
               {
@@ -1193,7 +1231,7 @@ function OutOfCreditsModal({
 
 // src/dashboard/cluster-status-bar.tsx
 import * as React5 from "react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+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: [
@@ -1207,7 +1245,7 @@ function ClusterStatusBar({ items, latency, className }) {
         ] })
       ] })
     ] }, i)),
-    latency && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    latency && /* @__PURE__ */ jsxs5(Fragment4, { children: [
       /* @__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: [
         /* @__PURE__ */ jsxs5("span", { className: "relative flex h-2.5 w-2.5 items-center justify-center", children: [
@@ -1357,7 +1395,8 @@ import {
   HardDrive,
   Box
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { focusRing as focusRing2 } from "@tangle-network/ui/utils";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function canAdminSandbox(sandbox) {
   if (!sandbox.team) return true;
   return sandbox.team.role === "owner" || sandbox.team.role === "admin";
@@ -1451,13 +1490,13 @@ function SandboxCard({
           "button",
           {
             type: "button",
-            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground outline-none",
+            className: `rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground ${focusRing2}`,
             "aria-label": "Sandbox options",
             children: /* @__PURE__ */ jsx10(MoreVertical, { className: "h-4 w-4" })
           }
         ) }),
         /* @__PURE__ */ jsxs9(DropdownMenuContent2, { align: "end", className: "min-w-[180px]", children: [
-          isRunning && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          isRunning && /* @__PURE__ */ jsxs9(Fragment5, { children: [
             onStop && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onStop(sandbox.id), children: [
               /* @__PURE__ */ jsx10(PowerOff, { className: "mr-2 h-4 w-4" }),
               " Stop Sandbox"
@@ -1476,7 +1515,7 @@ function SandboxCard({
               " Health Check"
             ] }),
             (onUsage || onHealth) && /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {}),
-            onFork && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            onFork && /* @__PURE__ */ jsxs9(Fragment5, { children: [
               /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onFork(sandbox.id), children: [
                 /* @__PURE__ */ jsx10(Copy, { className: "mr-2 h-4 w-4" }),
                 " Fork Sandbox"
@@ -1484,7 +1523,7 @@ function SandboxCard({
               /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {})
             ] })
           ] }),
-          isStopped && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          isStopped && /* @__PURE__ */ jsxs9(Fragment5, { children: [
             resumeHandler && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => resumeHandler(sandbox.id), children: [
               /* @__PURE__ */ jsx10(Power, { className: "mr-2 h-4 w-4" }),
               " ",
@@ -1647,7 +1686,8 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator3,
   DropdownMenuTrigger as DropdownMenuTrigger3
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { focusRing as focusRing3 } from "@tangle-network/ui/utils";
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var statusColors = {
   running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
   hibernating: { dot: "bg-muted-foreground", text: "text-muted-foreground", bar: "bg-muted-foreground" },
@@ -1803,7 +1843,7 @@ function SandboxTable({
                   /* @__PURE__ */ jsx11(MiniMeter, { label: "RAM", percent: 0 })
                 ] }) : null }),
                 /* @__PURE__ */ jsx11("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-1", children: [
-                  isActive && /* @__PURE__ */ jsxs10(Fragment6, { children: [
+                  isActive && /* @__PURE__ */ jsxs10(Fragment7, { children: [
                     /* @__PURE__ */ jsx11("button", { type: "button", onClick: (e) => {
                       stopRowClick(e);
                       onOpenIDE?.(sb.id);
@@ -1895,7 +1935,7 @@ function SandboxTable({
                         {
                           type: "button",
                           onClick: stopRowClick,
-                          className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 outline-none",
+                          className: `p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 ${focusRing3}`,
                           "aria-label": "More actions",
                           title: "More actions",
                           children: /* @__PURE__ */ jsx11(MoreVertical2, { className: "h-4 w-4" })
@@ -2040,6 +2080,7 @@ function PlanCards({ plans, className }) {
 // src/dashboard/backend-selector.tsx
 import { ChevronDown } from "lucide-react";
 import * as Select from "@radix-ui/react-select";
+import { focusRing as focusRing4 } from "@tangle-network/ui/utils";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function BackendSelector({
   backends,
@@ -2063,7 +2104,7 @@ function BackendSelector({
         "px-2.5 text-xs font-medium text-foreground shadow-sm",
         "transition-colors duration-[var(--transition-fast)]",
         "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
-        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing4,
         "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         triggerClassName
@@ -2084,7 +2125,7 @@ function BackendSelector({
         "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left",
         "transition-colors duration-[var(--transition-fast)]",
         "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
-        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        focusRing4,
         "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         triggerClassName
@@ -2338,7 +2379,7 @@ function useBrandThemeSync() {
 }
 
 // src/dashboard/dashboard-layout.tsx
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function MenuIcon({ className }) {
   return /* @__PURE__ */ jsxs14("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__ */ jsx17("title", { children: "Menu icon" }),
@@ -2425,7 +2466,7 @@ function DashboardLayoutInner({
   );
   const activePanel = panels.find((p) => p.mode === mode);
   const buildSidebarContent = React9.useCallback(
-    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs14(Fragment9, { children: [
       /* @__PURE__ */ jsxs14(SidebarRail, { wide: showLabels, children: [
         /* @__PURE__ */ jsx17(
           RailHeader,
@@ -2706,7 +2747,7 @@ function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRa
 
 // src/dashboard/sidebar-layout.tsx
 import * as React10 from "react";
-import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var HIDE_BELOW_CLASS = {
   md: "max-md:hidden",
   lg: "max-lg:hidden"
@@ -2939,7 +2980,7 @@ function SidebarLayoutInner({
         breakpoint: hideBelow,
         onClose: closeMobileNav,
         header: railHeaderContent ?? logo,
-        footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs15(Fragment10, { children: [
           railFooter,
           hasProfile && /* @__PURE__ */ jsx18(
             ProfileAvatar,
@@ -3096,7 +3137,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator4,
   DropdownMenuTrigger as DropdownMenuTrigger4
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -3130,7 +3171,7 @@ function ProfileSelector({
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment11, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx19(DropdownMenuLabel2, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs16(
@@ -3155,7 +3196,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment11, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx19(DropdownMenuLabel2, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs16(
@@ -3192,7 +3233,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs16(Fragment11, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           onCreateClick && /* @__PURE__ */ jsxs16(
             DropdownMenuItem4,
@@ -3434,7 +3475,7 @@ import {
 } from "lucide-react";
 import { Button as Button3 } from "@tangle-network/ui/primitives";
 import { Badge as Badge2 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment12, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
     icon: Clock3,
@@ -3558,7 +3599,7 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs18(Fragment12, { children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs18(Fragment13, { children: [
                 /* @__PURE__ */ jsxs18(
                   Button3,
                   {
@@ -3872,6 +3913,7 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
 // src/dashboard/ports-list.tsx
 import * as React13 from "react";
 import { Copy as Copy3, Check as Check5, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
+import { focusField, focusRing as focusRing5 } from "@tangle-network/ui/utils";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
   const [newPort, setNewPort] = React13.useState("");
@@ -3950,7 +3992,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
           value: newPort,
           onChange: (e) => setNewPort(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleExpose(),
-          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-ring"
+          className: `flex-1 rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField}`
         }
       ),
       /* @__PURE__ */ jsxs22(
@@ -3959,7 +4001,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
           type: "button",
           onClick: handleExpose,
           disabled: !newPort || isExposing,
-          className: "inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-primary/55 disabled:text-primary-foreground/90 disabled:shadow-none",
+          className: `inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-primary/55 disabled:text-primary-foreground/90 disabled:shadow-none ${focusRing5}`,
           children: [
             /* @__PURE__ */ jsx25(Plus4, { className: "h-4 w-4" }),
             "Expose"
@@ -3973,6 +4015,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
 // src/dashboard/process-list.tsx
 import * as React14 from "react";
 import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal4 } from "lucide-react";
+import { focusField as focusField2 } from "@tangle-network/ui/utils";
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function formatUptime(startedAt) {
   if (!startedAt) return "-";
@@ -4035,7 +4078,7 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
           value: newCommand,
           onChange: (e) => setNewCommand(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleSpawn(),
-          className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: `flex-1 rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField2}`
         }
       ),
       /* @__PURE__ */ jsxs23(
@@ -4058,6 +4101,7 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
 // src/dashboard/network-config.tsx
 import * as React15 from "react";
 import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
+import { focusField as focusField3 } from "@tangle-network/ui/utils";
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 function NetworkConfig({ config, onUpdate, loading = false, className }) {
   const [newCidr, setNewCidr] = React15.useState("");
@@ -4142,7 +4186,7 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
             value: newCidr,
             onChange: (e) => setNewCidr(e.target.value),
             onKeyDown: (e) => e.key === "Enter" && handleAddCidr(),
-            className: "flex-1 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: `flex-1 rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField3}`
           }
         ),
         /* @__PURE__ */ jsxs24(
@@ -4166,7 +4210,8 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
 // src/dashboard/backend-config.tsx
 import * as React16 from "react";
 import { Bot as Bot2, Plus as Plus7, Trash2 as Trash25, Server, Wrench } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { focusField as focusField4 } from "@tangle-network/ui/utils";
+import { Fragment as Fragment14, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function BackendConfig({
   status,
   mcpServers,
@@ -4223,7 +4268,7 @@ function BackendConfig({
         ), children: status.running ? "Running" : "Stopped" }) }),
         /* @__PURE__ */ jsx28("dt", { className: "text-muted-foreground", children: "Model" }),
         /* @__PURE__ */ jsx28("dd", { className: "font-mono text-xs", children: status.model ?? "Default" }),
-        status.provider && /* @__PURE__ */ jsxs25(Fragment13, { children: [
+        status.provider && /* @__PURE__ */ jsxs25(Fragment14, { children: [
           /* @__PURE__ */ jsx28("dt", { className: "text-muted-foreground", children: "Provider" }),
           /* @__PURE__ */ jsx28("dd", { className: "font-mono text-xs", children: status.provider })
         ] })
@@ -4284,7 +4329,7 @@ function BackendConfig({
             placeholder: "Server name",
             value: mcpName,
             onChange: (e) => setMcpName(e.target.value),
-            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField4}`
           }
         ),
         /* @__PURE__ */ jsx28(
@@ -4294,7 +4339,7 @@ function BackendConfig({
             placeholder: "Command (e.g. npx @server/mcp)",
             value: mcpCommand,
             onChange: (e) => setMcpCommand(e.target.value),
-            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField4}`
           }
         ),
         /* @__PURE__ */ jsx28(
@@ -4304,7 +4349,7 @@ function BackendConfig({
             placeholder: "Arguments (space-separated, optional)",
             value: mcpArgs,
             onChange: (e) => setMcpArgs(e.target.value),
-            className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField4}`
           }
         ),
         /* @__PURE__ */ jsxs25("div", { className: "flex justify-end gap-2 pt-1", children: [
@@ -4336,6 +4381,7 @@ function BackendConfig({
 // src/dashboard/snapshot-list.tsx
 import * as React17 from "react";
 import { Camera, Clock as Clock5, HardDrive as HardDrive2, Plus as Plus8, RotateCcw } from "lucide-react";
+import { focusField as focusField5 } from "@tangle-network/ui/utils";
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (bytes == null || bytes < 0) return "-";
@@ -4385,7 +4431,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
           value: tags,
           onChange: (e) => setTags(e.target.value),
           onKeyDown: (e) => e.key === "Enter" && handleCreate(),
-          className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: `w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField5}`
         }
       ),
       /* @__PURE__ */ jsxs26("div", { className: "flex justify-end gap-2", children: [
@@ -4469,7 +4515,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
 }
 
 // src/dashboard/promo-banner.tsx
-import { Fragment as Fragment14, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function PromoBanner({
   title,
   description,
@@ -4484,7 +4530,7 @@ function PromoBanner({
     "mt-6 inline-flex items-center gap-2 rounded-md border border-white/20 bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-medium text-[var(--btn-primary-text)] transition-colors",
     disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--btn-primary-hover)]"
   );
-  const buttonContent = /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  const buttonContent = /* @__PURE__ */ jsxs27(Fragment15, { children: [
     buttonLabel,
     /* @__PURE__ */ jsxs27("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [
       /* @__PURE__ */ jsx30("path", { d: "M5 12h14" }),