@tangle-network/sandbox-ui 0.99.2 → 0.100.0

package/dist/chunk-BGVEHENC.js

@@ -0,0 +1,10 @@
+// src/lib/motion.ts
+var MOTION_CONTROL = "duration-[var(--duration-fast)] ease-[var(--ease-standard)]";
+var MOTION_SURFACE = "duration-[var(--duration-base)] ease-[var(--ease-entrance)]";
+var MOTION_TRAVEL = "duration-[var(--duration-slow)] ease-[var(--ease-standard)]";
+
+export {
+  MOTION_CONTROL,
+  MOTION_SURFACE,
+  MOTION_TRAVEL
+};

package/dist/{chunk-G7CFCZQ7.js → chunk-IWTLWBPZ.js}

@@ -229,7 +229,7 @@ function imageExtension(file) {
   const fromName = /\.([a-z0-9]+)$/i.exec(file.name)?.[1];
   return fromName?.toLowerCase() ?? "png";
 }
-var MentionEditor = React.lazy(() => import("./mention-editor-3Q6MYOIU.js"));
+var MentionEditor = React.lazy(() => import("./mention-editor-Q3TKSZDL.js"));
 function AgentComposer({
   value,
   onChange,
@@ -415,7 +415,7 @@ function AgentComposer({
                     file.fileCount,
                     ")"
                   ] }),
-                  file.status === "uploading" && /* @__PURE__ */ jsx2(Loader2, { className: "size-3 animate-spin" }),
+                  file.status === "uploading" && /* @__PURE__ */ jsx2(Loader2, { className: "size-3 animate-spin", "data-motion": "essential" }),
                   isError && file.errorMessage && /* @__PURE__ */ jsx2("span", { className: "max-w-[150px] truncate text-[var(--status-error,#ff4d6d)]/80", children: file.errorMessage }),
                   isError && onRetryFile && /* @__PURE__ */ jsx2(
                     "button",
@@ -588,7 +588,7 @@ function AgentComposer({
                   "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
                   "transition-opacity hover:opacity-90 disabled:opacity-40"
                 ),
-                children: busy ? /* @__PURE__ */ jsx2(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx2(ArrowUp, { className: "size-4" })
+                children: busy ? /* @__PURE__ */ jsx2(Loader2, { className: "size-4 animate-spin", "data-motion": "essential" }) : /* @__PURE__ */ jsx2(ArrowUp, { className: "size-4" })
               }
             )
           ] })

package/dist/{chunk-XKKV3B24.js → chunk-OI7HEWLZ.js}

@@ -1,3 +1,6 @@
+import {
+  MOTION_CONTROL
+} from "./chunk-BGVEHENC.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -639,7 +642,13 @@ function StatusBanner({ type, message, detail, onDismiss, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx4(Icon, { className: cn("h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin") }),
+        /* @__PURE__ */ jsx4(
+          Icon,
+          {
+            className: cn("h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin"),
+            ...isAnimated ? { "data-motion": "essential" } : {}
+          }
+        ),
         /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground", children: message }),
         detail && /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: detail }),
         onDismiss && /* @__PURE__ */ jsx4(
@@ -1092,7 +1101,7 @@ function SessionSidebar({
                 type: "button",
                 onClick: onCreate,
                 title: createLabel,
-                className: "flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+                className: cn("flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", MOTION_CONTROL),
                 children: /* @__PURE__ */ jsx8(Plus, { className: "h-3.5 w-3.5" })
               }
             )
@@ -1108,7 +1117,7 @@ function SessionSidebar({
                 onChange: (event) => setQuery(event.target.value),
                 placeholder: searchPlaceholder,
                 "aria-label": searchPlaceholder,
-                className: "h-8 w-full rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
+                className: cn("h-8 w-full rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]", MOTION_CONTROL)
               }
             )
           ] }),
@@ -1121,6 +1130,7 @@ function SessionSidebar({
                 onClick: () => setActiveFilterId(filter.id),
                 className: cn(
                   "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
+                  MOTION_CONTROL,
                   isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-[var(--md3-outline-variant)] text-muted-foreground hover:text-foreground"
                 ),
                 children: [
@@ -1135,72 +1145,90 @@ function SessionSidebar({
         /* @__PURE__ */ jsx8("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-1.5 py-1.5", children: visibleItems.length === 0 ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center justify-center gap-2 px-4 py-10 text-center text-sm text-muted-foreground", children: [
           /* @__PURE__ */ jsx8(MessageSquareText, { className: "h-5 w-5 opacity-50", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx8("p", { children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage })
-        ] }) : /* @__PURE__ */ jsx8("ul", { className: "space-y-px", children: visibleItems.map((item) => {
+        ] }) : /* @__PURE__ */ jsx8("ul", { className: "space-y-px", children: visibleItems.map((item, index) => {
           const session = sessionsById.get(item.id) ?? null;
           const isActive = currentItemId === item.id;
           const status = session?.status ?? item.status;
+          const isWorking = status === "running";
           const visibleBadges = [
             ...item.isPinned ? [{ id: `${item.id}-pinned`, label: "Pinned", tone: "neutral" }] : [],
             ...item.badges ?? []
           ];
-          return /* @__PURE__ */ jsx8("li", { className: "animate-row-in", children: /* @__PURE__ */ jsxs7(
-            "div",
+          return /* @__PURE__ */ jsx8(
+            "li",
             {
-              className: cn(
-                "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 transition-colors",
-                isActive ? "bg-accent font-medium text-foreground" : "text-muted-foreground hover:bg-accent/30"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs7(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      if (onSelectItem) {
-                        onSelectItem(item);
-                        return;
+              className: "agent-arrive",
+              style: { "--stagger-index": index },
+              children: /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  className: cn(
+                    "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 transition-colors",
+                    MOTION_CONTROL,
+                    isActive ? "bg-accent font-medium text-foreground" : "text-muted-foreground hover:bg-accent/30"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs7(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          if (onSelectItem) {
+                            onSelectItem(item);
+                            return;
+                          }
+                          navigateToHref(item.href);
+                        },
+                        "aria-current": isActive ? "page" : void 0,
+                        className: "min-w-0 flex flex-1 items-center gap-2 text-left",
+                        children: [
+                          /* @__PURE__ */ jsx8("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", statusDot(status)) }),
+                          /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsx8(
+                              "div",
+                              {
+                                className: cn(
+                                  "truncate text-sm font-medium",
+                                  isActive && "text-foreground",
+                                  isWorking && "agent-shimmer"
+                                ),
+                                ...isWorking ? { "data-motion": "essential" } : {},
+                                children: item.title
+                              }
+                            ),
+                            item.subtitle && /* @__PURE__ */ jsx8("div", { className: "truncate text-xs leading-tight text-muted-foreground", children: item.subtitle })
+                          ] })
+                        ]
                       }
-                      navigateToHref(item.href);
-                    },
-                    "aria-current": isActive ? "page" : void 0,
-                    className: "min-w-0 flex flex-1 items-center gap-2 text-left",
-                    children: [
-                      /* @__PURE__ */ jsx8("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", statusDot(status)) }),
-                      /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsx8("div", { className: cn(
-                          "truncate text-sm font-medium",
-                          isActive && "text-foreground"
-                        ), children: item.title }),
-                        item.subtitle && /* @__PURE__ */ jsx8("div", { className: "truncate text-xs leading-tight text-muted-foreground", children: item.subtitle })
-                      ] })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-1", children: [
-                  visibleBadges.length > 0 && visibleBadges.slice(0, 1).map((badge) => /* @__PURE__ */ jsx8(
-                    "span",
-                    {
-                      className: cn(
-                        "rounded-full border px-1.5 py-px text-[8px] font-semibold uppercase",
-                        badgeTone(badge.tone)
-                      ),
-                      children: badge.label
-                    },
-                    badge.id
-                  )),
-                  session?.isForeground && /* @__PURE__ */ jsx8("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--status-running)]", title: "Live" }),
-                  renderItemActions ? /* @__PURE__ */ jsx8(
-                    "div",
-                    {
-                      className: "opacity-0 transition-opacity group-hover:opacity-100",
-                      onClick: (event) => event.stopPropagation(),
-                      children: renderItemActions(item, { session, isActive })
-                    }
-                  ) : null
-                ] })
-              ]
-            }
-          ) }, item.id);
+                    ),
+                    /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      visibleBadges.length > 0 && visibleBadges.slice(0, 1).map((badge) => /* @__PURE__ */ jsx8(
+                        "span",
+                        {
+                          className: cn(
+                            "rounded-full border px-1.5 py-px text-[8px] font-semibold uppercase",
+                            badgeTone(badge.tone)
+                          ),
+                          children: badge.label
+                        },
+                        badge.id
+                      )),
+                      session?.isForeground && /* @__PURE__ */ jsx8("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--status-running)]", title: "Live" }),
+                      renderItemActions ? /* @__PURE__ */ jsx8(
+                        "div",
+                        {
+                          className: cn("opacity-0 transition-opacity group-hover:opacity-100", MOTION_CONTROL),
+                          onClick: (event) => event.stopPropagation(),
+                          children: renderItemActions(item, { session, isActive })
+                        }
+                      ) : null
+                    ] })
+                  ]
+                }
+              )
+            },
+            item.id
+          );
         }) }) }),
         activityMonitor && /* @__PURE__ */ jsx8("div", { className: "border-t border-[var(--md3-outline-variant)] px-2 py-1.5", children: activityMonitor }),
         links.length > 0 && /* @__PURE__ */ jsx8("nav", { "aria-label": "Workspace sections", className: "border-t border-[var(--md3-outline-variant)] px-1.5 py-1.5", children: /* @__PURE__ */ jsx8("div", { className: "space-y-px", children: links.map((link) => {
@@ -1216,7 +1244,7 @@ function SessionSidebar({
                 }
                 navigateToHref(link.href);
               },
-              className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent/30 hover:text-foreground",
+              className: cn("flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent/30 hover:text-foreground", MOTION_CONTROL),
               children: [
                 /* @__PURE__ */ jsx8(Icon, { className: "h-4 w-4 shrink-0" }),
                 /* @__PURE__ */ jsx8("span", { className: "truncate", children: link.label })
@@ -1228,7 +1256,7 @@ function SessionSidebar({
         resizable && /* @__PURE__ */ jsx8(
           "div",
           {
-            className: "absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-[var(--accent-surface-soft)] active:bg-[var(--border-accent)] transition-colors",
+            className: cn("absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-[var(--accent-surface-soft)] active:bg-[var(--border-accent)] transition-colors", MOTION_CONTROL),
             onPointerDown: resize.onPointerDown,
             onPointerMove: resize.onPointerMove,
             onPointerUp: resize.onPointerUp,
@@ -1267,7 +1295,7 @@ function SessionStatusDot({ session }) {
     return /* @__PURE__ */ jsx9(AlertCircle2, { className: "h-3 w-3 text-[var(--surface-danger-text)]" });
   }
   if (session.status === "running") {
-    return /* @__PURE__ */ jsx9(LoaderCircle, { className: "h-3 w-3 animate-spin text-primary" });
+    return /* @__PURE__ */ jsx9(LoaderCircle, { className: "h-3 w-3 animate-spin text-primary", "data-motion": "essential" });
   }
   if (session.status === "attention-needed") {
     return /* @__PURE__ */ jsx9(Activity, { className: "h-3 w-3 text-[var(--surface-warning-text)]" });

package/dist/{chunk-JIZCCGD2.js → chunk-WCUIUBG5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-Y4OTBMZS.js";
+} from "./chunk-3W343PY5.js";
 import {
   TerminalView
 } from "./chunk-WYMAC3T3.js";

package/dist/connectors.js

@@ -594,7 +594,7 @@ function ConnectorCatalogList({
             {
               type: "button",
               onClick: () => onRequestIntegration(search.trim()),
-              className: "text-primary text-sm transition-colors hover:underline",
+              className: "text-[var(--accent-text)] text-sm transition-colors hover:underline",
               children: "Request an integration"
             }
           )

package/dist/dashboard.d.ts

@@ -147,8 +147,14 @@ interface RailButtonProps {
      * Defaults to `"normal"`.
      */
     variant?: "normal" | "primary";
+    /**
+     * Inline style for the rendered row. Layouts use it to set `--stagger-index`
+     * so a rail of nav items arrives as a sequence rather than a flash; the
+     * variable has to land on the animated element itself, which is this one.
+     */
+    style?: React.CSSProperties;
 }
-declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children, variant }: RailButtonProps): React.JSX.Element;
+declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children, variant, style }: RailButtonProps): React.JSX.Element;
 interface RailFlyoutProps {
     icon: React.ComponentType<{
         className?: string;
@@ -163,6 +169,8 @@ interface RailFlyoutProps {
     /** Flyout body — the sub-surfaces revealed when the item is opened. */
     children: React.ReactNode;
     className?: string;
+    /** @see {@link RailButtonProps.style} — carries `--stagger-index` in a rail. */
+    style?: React.CSSProperties;
 }
 /**
  * A rail entry that reveals its sub-surfaces in a small panel anchored to the
@@ -171,7 +179,7 @@ interface RailFlyoutProps {
  * item inside it. Use for a single "door" (e.g. Studio) that fronts several
  * related destinations without permanently spending rail height on them.
  */
-declare function RailFlyout({ icon: Icon, label, isActive, showLabel, title, children, className, }: RailFlyoutProps): React.JSX.Element;
+declare function RailFlyout({ icon: Icon, label, isActive, showLabel, title, children, className, style, }: RailFlyoutProps): React.JSX.Element;
 /** A single entry in a sub-item's hover actions menu (kebab). */
 interface RailSubItemAction {
     id: string;
@@ -229,6 +237,8 @@ interface RailExpandableProps {
     onNavigate?: () => void;
     LinkComponent?: React.ComponentType<any>;
     className?: string;
+    /** @see {@link RailButtonProps.style} — carries `--stagger-index` in a rail. */
+    style?: React.CSSProperties;
 }
 /**
  * A nav item that reveals sub-items. On the labeled rail it expands inline as an
@@ -238,7 +248,7 @@ interface RailExpandableProps {
  * Sub-items can be fixed (`subItems`) or lazy (`loadSubItems`, with a loading
  * skeleton). Used for e.g. a "History" entry fronting recent sessions.
  */
-declare function RailExpandable({ icon: Icon, label, href, isActive, showLabel, subItems, loadSubItems, activeSubIds, emptyLabel, defaultOpen, onNavigate, LinkComponent, className, }: RailExpandableProps): React.JSX.Element;
+declare function RailExpandable({ icon: Icon, label, href, isActive, showLabel, subItems, loadSubItems, activeSubIds, emptyLabel, defaultOpen, onNavigate, LinkComponent, className, style, }: RailExpandableProps): React.JSX.Element;
 interface RailModeButtonProps {
     mode: string;
     icon: React.ComponentType<{
@@ -249,8 +259,10 @@ interface RailModeButtonProps {
     className?: string;
     /** Show label text next to icon (for mobile drawer) */
     showLabel?: boolean;
+    /** @see {@link RailButtonProps.style} — carries `--stagger-index` in a rail. */
+    style?: React.CSSProperties;
 }
-declare function RailModeButton({ mode, icon, label, badge, className, showLabel }: RailModeButtonProps): React.JSX.Element;
+declare function RailModeButton({ mode, icon, label, badge, className, showLabel, style }: RailModeButtonProps): React.JSX.Element;
 interface SidebarPanelProps {
     children: React.ReactNode;
     className?: string;
@@ -310,6 +322,13 @@ interface RailTooltipProps {
  * short delay, and `pointer-events-none` so it never interferes with the
  * trigger. Hidden from the a11y tree (`aria-hidden`) since the trigger already
  * carries an accessible name.
+ *
+ * `disabled` suppresses the tooltip but NOT the wrapper. Returning a fragment
+ * instead changes the rendered element type, and React reconciles by type: the
+ * trigger inside would be torn down and rebuilt every time the rail toggles
+ * between icon-only and labeled. A rebuilt element replays its CSS entrance, so
+ * the whole nav would re-stagger on a collapse that moved nothing off screen.
+ * One element type, both states.
  */
 declare function RailTooltip({ label, children, disabled, className }: RailTooltipProps): React.JSX.Element;
 

package/dist/dashboard.js

@@ -60,7 +60,7 @@ import {
   chatCapableHarnesses,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-Y4OTBMZS.js";
+} from "./chunk-3W343PY5.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -75,6 +75,7 @@ import {
   canonicalModelId,
   modelBrandFor
 } from "./chunk-RQZRXKMR.js";
+import "./chunk-BGVEHENC.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {