@tangle-network/sandbox-ui 0.63.0 → 0.64.0

package/dist/{chunk-6OJUOEF4.js → chunk-G4YJYSFA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-DZA4UBXU.js";
+} from "./chunk-QSCCNGXZ.js";
 import {
   TerminalView
 } from "./chunk-VIREDUBF.js";

package/dist/{chunk-DZA4UBXU.js → chunk-QSCCNGXZ.js}

@@ -22,7 +22,7 @@ import {
   DropdownMenuTrigger
 } from "@tangle-network/ui/primitives";
 import { Skeleton, useTheme } from "@tangle-network/ui/primitives";
-import { Check, Monitor, PanelLeft } from "lucide-react";
+import { Check, Monitor, MoreHorizontal, PanelLeft } from "lucide-react";
 
 // src/dashboard/sidebar-context.tsx
 import * as React from "react";
@@ -585,7 +585,7 @@ function RailExpandable({
   const subLink = (item) => {
     const FIcon = item.icon;
     const active = activeSet.has(item.id);
-    return /* @__PURE__ */ jsxs2(
+    const link = /* @__PURE__ */ jsxs2(
       Link,
       {
         href: item.href,
@@ -593,8 +593,8 @@ function RailExpandable({
         onClick: onNavigate,
         ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {},
         className: cn(
-          "flex h-7 min-w-0 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)]" : item.emphasis ? "font-semibold text-[var(--accent-text)] hover:bg-[var(--accent-surface-soft)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground"
+          "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
+          active ? "h-7 bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : item.emphasis ? "py-2 font-medium text-[var(--accent-text)] hover:underline" : "h-7 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,
@@ -605,16 +605,41 @@ function RailExpandable({
               ...item.isLoading ? { role: "status", "aria-label": "Agent responding" } : {},
               children: item.label
             }
-          ),
-          item.isLoading ? /* @__PURE__ */ jsxs2("span", { className: "responding-ellipsis", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx3("span", {}),
-            /* @__PURE__ */ jsx3("span", {}),
-            /* @__PURE__ */ jsx3("span", {})
-          ] }) : null
+          )
         ]
       },
       item.id
     );
+    if (!showLabel || !item.actions?.length) return link;
+    return /* @__PURE__ */ jsxs2("div", { className: "group/sub relative flex items-center", children: [
+      link,
+      /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Chat actions",
+            className: "absolute right-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--accent-surface-soft)] text-muted-foreground opacity-0 transition hover:text-foreground focus-visible:opacity-100 group-hover/sub:opacity-100 data-[state=open]:bg-[var(--accent-surface-strong)] data-[state=open]:opacity-100",
+            children: /* @__PURE__ */ jsx3(MoreHorizontal, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(DropdownMenuContent, { align: "end", className: "w-40", children: item.actions.map((action) => /* @__PURE__ */ jsxs2(
+          DropdownMenuItem,
+          {
+            onSelect: action.onSelect,
+            className: cn(
+              "gap-2",
+              action.destructive && "text-destructive focus:text-destructive"
+            ),
+            children: [
+              action.icon ? /* @__PURE__ */ jsx3(action.icon, { className: "h-3.5 w-3.5" }) : null,
+              action.label
+            ]
+          },
+          action.id
+        )) })
+      ] })
+    ] }, 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) {

package/dist/dashboard.d.ts

@@ -174,6 +174,17 @@ interface RailFlyoutProps {
  * related destinations without permanently spending rail height on them.
  */
 declare function RailFlyout({ icon: Icon, label, isActive, showLabel, title, children, className, }: RailFlyoutProps): react_jsx_runtime.JSX.Element;
+/** A single entry in a sub-item's hover actions menu (kebab). */
+interface RailSubItemAction {
+    id: string;
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Style the item as a destructive action (e.g. delete). */
+    destructive?: boolean;
+    onSelect: () => void;
+}
 /** A sub-destination revealed by a {@link RailExpandable} item. */
 interface RailExpandableSubItem {
     id: string;
@@ -188,6 +199,9 @@ interface RailExpandableSubItem {
     /** Render the row emphasized (bold + accent) so it stands out — e.g. a
      *  trailing "view all" action below a capped list. */
     emphasis?: boolean;
+    /** Hover-revealed kebab actions (e.g. rename/delete). Rendered on the
+     *  labeled rail only; ignored in the collapsed-rail flyout. */
+    actions?: RailSubItemAction[];
 }
 interface RailExpandableProps {
     icon: React.ComponentType<{

package/dist/dashboard.js

@@ -54,7 +54,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-DZA4UBXU.js";
+} from "./chunk-QSCCNGXZ.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -3782,6 +3782,13 @@
       }
     }
   }
+  .group-hover\/sub\:opacity-100 {
+    &:is(:where(.group\/sub):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -4984,6 +4991,11 @@
       border-color: var(--md3-outline-variant);
     }
   }
+  .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\] {
+    &[data-state="open"] {
+      background-color: var(--accent-surface-strong);
+    }
+  }
   .data-\[state\=open\]\:bg-accent {
     &[data-state="open"] {
       background-color: var(--color-accent);
@@ -5007,6 +5019,11 @@
       color: var(--color-muted-foreground);
     }
   }
+  .data-\[state\=open\]\:opacity-100 {
+    &[data-state="open"] {
+      opacity: 100%;
+    }
+  }
   .data-\[state\=selected\]\:bg-muted\/50 {
     &[data-state="selected"] {
       background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
@@ -6014,53 +6031,23 @@
   .shimmer-text {
     background-image: linear-gradient(
       90deg,
-      hsl(var(--muted-foreground)) 0%,
-      hsl(var(--muted-foreground)) 28%,
-      var(--accent-text) 50%,
-      hsl(var(--muted-foreground)) 72%,
-      hsl(var(--muted-foreground)) 100%
+      hsl(var(--muted-foreground) / 0.5) 0%,
+      hsl(var(--muted-foreground) / 0.5) 40%,
+      hsl(var(--primary)) 50%,
+      hsl(var(--muted-foreground) / 0.5) 60%,
+      hsl(var(--muted-foreground) / 0.5) 100%
     );
     background-size: 200% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    animation: shimmer 1.3s linear infinite;
+    animation: shimmer 1.1s linear infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     .shimmer-text {
       animation: none;
     }
   }
-  .responding-ellipsis {
-    display: inline-flex;
-    width: 1.25rem;
-    margin-left: auto;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    gap: 0.1875rem;
-    color: hsl(var(--primary));
-  }
-  .responding-ellipsis > span {
-    width: 0.25rem;
-    height: 0.25rem;
-    border-radius: 9999px;
-    background: currentColor;
-    opacity: 0.6;
-    animation: responding-ellipsis 0.8s ease-in-out infinite;
-  }
-  .responding-ellipsis > span:nth-child(2) {
-    animation-delay: 0.15s;
-  }
-  .responding-ellipsis > span:nth-child(3) {
-    animation-delay: 0.3s;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .responding-ellipsis > span {
-      animation: none;
-      opacity: 0.8;
-    }
-  }
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
@@ -6095,16 +6082,6 @@
       background-position: 200% 0;
     }
   }
-  @keyframes responding-ellipsis {
-    0%, 80%, 100% {
-      opacity: 0.6;
-      transform: translateY(0);
-    }
-    40% {
-      opacity: 1;
-      transform: translateY(-1.5px);
-    }
-  }
   @keyframes fade-in {
     from {
       opacity: 0;

package/dist/index.js

@@ -146,7 +146,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-6OJUOEF4.js";
+} from "./chunk-G4YJYSFA.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -211,7 +211,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-DZA4UBXU.js";
+} from "./chunk-QSCCNGXZ.js";
 import "./chunk-VIREDUBF.js";
 import {
   usePtySession

package/dist/styles.css

@@ -3782,6 +3782,13 @@
       }
     }
   }
+  .group-hover\/sub\:opacity-100 {
+    &:is(:where(.group\/sub):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -4984,6 +4991,11 @@
       border-color: var(--md3-outline-variant);
     }
   }
+  .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\] {
+    &[data-state="open"] {
+      background-color: var(--accent-surface-strong);
+    }
+  }
   .data-\[state\=open\]\:bg-accent {
     &[data-state="open"] {
       background-color: var(--color-accent);
@@ -5007,6 +5019,11 @@
       color: var(--color-muted-foreground);
     }
   }
+  .data-\[state\=open\]\:opacity-100 {
+    &[data-state="open"] {
+      opacity: 100%;
+    }
+  }
   .data-\[state\=selected\]\:bg-muted\/50 {
     &[data-state="selected"] {
       background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
@@ -6014,53 +6031,23 @@
   .shimmer-text {
     background-image: linear-gradient(
       90deg,
-      hsl(var(--muted-foreground)) 0%,
-      hsl(var(--muted-foreground)) 28%,
-      var(--accent-text) 50%,
-      hsl(var(--muted-foreground)) 72%,
-      hsl(var(--muted-foreground)) 100%
+      hsl(var(--muted-foreground) / 0.5) 0%,
+      hsl(var(--muted-foreground) / 0.5) 40%,
+      hsl(var(--primary)) 50%,
+      hsl(var(--muted-foreground) / 0.5) 60%,
+      hsl(var(--muted-foreground) / 0.5) 100%
     );
     background-size: 200% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    animation: shimmer 1.3s linear infinite;
+    animation: shimmer 1.1s linear infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     .shimmer-text {
       animation: none;
     }
   }
-  .responding-ellipsis {
-    display: inline-flex;
-    width: 1.25rem;
-    margin-left: auto;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    gap: 0.1875rem;
-    color: hsl(var(--primary));
-  }
-  .responding-ellipsis > span {
-    width: 0.25rem;
-    height: 0.25rem;
-    border-radius: 9999px;
-    background: currentColor;
-    opacity: 0.6;
-    animation: responding-ellipsis 0.8s ease-in-out infinite;
-  }
-  .responding-ellipsis > span:nth-child(2) {
-    animation-delay: 0.15s;
-  }
-  .responding-ellipsis > span:nth-child(3) {
-    animation-delay: 0.3s;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .responding-ellipsis > span {
-      animation: none;
-      opacity: 0.8;
-    }
-  }
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
@@ -6095,16 +6082,6 @@
       background-position: 200% 0;
     }
   }
-  @keyframes responding-ellipsis {
-    0%, 80%, 100% {
-      opacity: 0.6;
-      transform: translateY(0);
-    }
-    40% {
-      opacity: 1;
-      transform: translateY(-1.5px);
-    }
-  }
   @keyframes fade-in {
     from {
       opacity: 0;

package/dist/workbench.js

@@ -12,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-6OJUOEF4.js";
+} from "./chunk-G4YJYSFA.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-DZA4UBXU.js";
+import "./chunk-QSCCNGXZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";
 import "./chunk-OMUIPJQZ.js";

package/package.json

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