@tangle-network/sandbox-ui 0.99.2 → 0.100.1

package/dist/{chunk-Y4OTBMZS.js → chunk-3W343PY5.js}

@@ -5,6 +5,11 @@ import {
 import {
   moonshot_default
 } from "./chunk-RQZRXKMR.js";
+import {
+  MOTION_CONTROL,
+  MOTION_SURFACE,
+  MOTION_TRAVEL
+} from "./chunk-BGVEHENC.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -145,7 +150,7 @@ 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";
+import { 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);
@@ -154,8 +159,16 @@ function RailTooltip({ label, children, disabled, className }) {
   React2.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  if (disabled) return /* @__PURE__ */ jsx2(Fragment, { children });
+  React2.useEffect(() => {
+    if (!disabled) return;
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setCoords(null);
+  }, [disabled]);
   const open = () => {
+    if (disabled) return;
     if (timer.current) clearTimeout(timer.current);
     timer.current = setTimeout(() => {
       const el = ref.current;
@@ -172,25 +185,38 @@ function RailTooltip({ label, children, disabled, className }) {
     "span",
     {
       ref,
-      className: cn("relative flex", className),
+      className: cn("relative flex shrink-0", className),
       onMouseEnter: open,
       onMouseLeave: close,
       onFocusCapture: open,
       onBlurCapture: close,
       children: [
         children,
-        coords !== null && typeof document !== "undefined" && createPortal(
+        !disabled && coords !== null && typeof document !== "undefined" && createPortal(
+          // Two elements, because the centering transform and the entrance
+          // transform cannot share one: `.agent-pop-in` fills forwards to
+          // `transform: none`, which would eat the `translateY(-50%)` and leave
+          // every tooltip half a line low. The outer span owns the position, the
+          // inner one owns the motion.
           /* @__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
+              className: "pointer-events-none z-[70]",
+              children: /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  role: "tooltip",
+                  "aria-hidden": "true",
+                  className: cn(
+                    // Appears in place beside the trigger after the open delay, so
+                    // it scales up rather than travelling — @see .agent-pop-in.
+                    "agent-pop-in block whitespace-nowrap px-2 py-1 text-xs font-medium text-popover-foreground",
+                    RAIL_FLOATING_SURFACE
+                  ),
+                  children: label
+                }
+              )
             }
           ),
           document.body
@@ -201,7 +227,7 @@ function RailTooltip({ label, children, disabled, className }) {
 }
 
 // src/dashboard/app-sidebar.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function DefaultLink({
   href,
   to,
@@ -258,6 +284,7 @@ function RailThemeToggle({ className }) {
       title: isDark ? "Switch to light mode" : "Switch to dark mode",
       className: cn(
         "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",
         className
@@ -290,6 +317,7 @@ function RailCollapseToggle({ collapsed, showLabel, onToggle, className }) {
       "aria-pressed": collapsed,
       className: cn(
         "flex shrink-0 items-center rounded-md text-muted-foreground transition-colors",
+        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",
@@ -314,6 +342,7 @@ function PanelToggleButton({ collapsed, onToggle, className }) {
       title: label,
       className: cn(
         "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",
         className
@@ -330,7 +359,7 @@ function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsib
       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)]",
+      className: cn("flex items-center justify-center rounded-md p-1 transition-colors hover:bg-[var(--accent-surface-soft)]", MOTION_CONTROL),
       children: brand
     }
   ) : /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center p-1", children: brand });
@@ -349,13 +378,13 @@ function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsib
           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",
+          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),
           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]" }) })
+            /* @__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(Fragment2, { children: [
+      ) }) : brandNode : /* @__PURE__ */ jsxs2(Fragment, { children: [
         brand !== void 0 && brandNode,
         /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children }),
         collapsible && /* @__PURE__ */ jsx3(PanelToggleButton, { collapsed, onToggle })
@@ -370,7 +399,11 @@ function Sidebar({ children, className, style }) {
     {
       "data-sidebar": "true",
       className: cn(
-        "fixed inset-y-0 left-0 z-40 flex bg-surface-container-low border-r border-[var(--md3-outline-variant)] transition-[transform,width] duration-200 ease-in-out",
+        "fixed inset-y-0 left-0 z-40 flex bg-surface-container-low border-r border-[var(--md3-outline-variant)] transition-[transform,width]",
+        // The rail is a full-height surface travelling — the slow tier. It and
+        // SidebarContent's margin MUST read the same token or the page content
+        // visibly lags the edge it is supposed to be attached to.
+        MOTION_TRAVEL,
         hidden && "-translate-x-full",
         className
       ),
@@ -406,9 +439,10 @@ 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: Icon2, label, isActive, badge, onClick, className, showLabel, asChild, children, variant = "normal" }) {
+function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, showLabel, asChild, children, variant = "normal", style }) {
   const classes = cn(
-    "relative flex shrink-0 items-center justify-center rounded-md transition-colors duration-150",
+    "relative flex shrink-0 items-center justify-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",
     // 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",
@@ -422,7 +456,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(Fragment2, { children: [
+  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
     iconWithBadge,
     showLabel && /* @__PURE__ */ jsx3("span", { className: "text-[13.5px] font-medium", children: label })
   ] });
@@ -430,12 +464,21 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, s
     const child = children;
     const merged = React3.cloneElement(
       child,
-      { className: cn(classes, child.props.className), "aria-label": child.props["aria-label"] ?? label },
+      {
+        className: cn(classes, child.props.className),
+        "aria-label": child.props["aria-label"] ?? label,
+        // The layout's `style` wins the merge, not the child's. It is where
+        // `--stagger-index` arrives, and a child that happened to carry a
+        // `style` of its own would otherwise drop the variable silently and
+        // collapse the whole rail's entrance to one flash — a defect with no
+        // error and no visible cause.
+        style: { ...child.props.style, ...style }
+      },
       content
     );
     return /* @__PURE__ */ jsx3(RailTooltip, { label, disabled: showLabel, className: showLabel ? "w-full" : void 0, children: merged });
   }
-  return /* @__PURE__ */ jsx3(RailTooltip, { label, disabled: showLabel, className: showLabel ? "w-full" : void 0, children: /* @__PURE__ */ jsx3("button", { type: "button", onClick, "aria-label": label, className: classes, children: content }) });
+  return /* @__PURE__ */ jsx3(RailTooltip, { label, disabled: showLabel, className: showLabel ? "w-full" : void 0, children: /* @__PURE__ */ jsx3("button", { type: "button", onClick, "aria-label": label, className: classes, style, children: content }) });
 }
 function RailFlyout({
   icon: Icon2,
@@ -444,7 +487,8 @@ function RailFlyout({
   showLabel,
   title,
   children,
-  className
+  className,
+  style
 }) {
   const [open, setOpen] = React3.useState(false);
   const ref = React3.useRef(null);
@@ -465,13 +509,14 @@ function RailFlyout({
   }, [open]);
   const active = isActive || open;
   const triggerClasses = cn(
-    "relative flex shrink-0 items-center rounded-md transition-colors duration-150",
+    "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",
     active ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     className
   );
-  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("relative", showLabel && "w-full"), children: [
+  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("relative", showLabel && "w-full"), style, children: [
     /* @__PURE__ */ jsx3(RailTooltip, { label, disabled: showLabel || open, className: showLabel ? "w-full" : void 0, children: /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -488,7 +533,8 @@ function RailFlyout({
             ChevronRightIcon,
             {
               className: cn(
-                "ml-auto h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform duration-200",
+                "ml-auto h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform",
+                MOTION_CONTROL,
                 open && "rotate-180"
               )
             }
@@ -509,6 +555,9 @@ function RailFlyout({
         },
         className: cn(
           "absolute left-full top-0 z-50 ml-2 min-w-[12rem] p-1.5",
+          // A flyout appears in place beside its trigger; it did not travel
+          // from anywhere, so it scales up rather than sliding.
+          "agent-pop-in",
           RAIL_FLOATING_SURFACE
         ),
         children: [
@@ -570,7 +619,8 @@ function RailExpandable({
   defaultOpen,
   onNavigate,
   LinkComponent,
-  className
+  className,
+  style
 }) {
   const Link = LinkComponent ?? DefaultLink;
   const [open, setOpen] = React3.useState(defaultOpen ?? false);
@@ -578,6 +628,15 @@ function RailExpandable({
   React3.useEffect(() => {
     if (defaultOpen) ensureLoaded();
   }, [defaultOpen, ensureLoaded]);
+  const [everOpened, setEverOpened] = React3.useState(defaultOpen ?? false);
+  const discloseRef = React3.useRef(null);
+  const discloseId = React3.useId();
+  React3.useEffect(() => {
+    const el = discloseRef.current;
+    if (!el) return;
+    if (open) el.removeAttribute("inert");
+    else el.setAttribute("inert", "");
+  }, [open]);
   const activeSet = React3.useMemo(() => new Set(activeSubIds ?? []), [activeSubIds]);
   const triggerRef = React3.useRef(null);
   const closeTimer = React3.useRef(null);
@@ -597,6 +656,7 @@ function RailExpandable({
         ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {},
         className: cn(
           "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
+          MOTION_CONTROL,
           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: [
@@ -607,10 +667,17 @@ function RailExpandable({
             {
               className: cn(
                 "min-w-0 flex-1 truncate",
-                item.isLoading && "shimmer-text",
+                item.isLoading && "agent-shimmer",
                 item.unread && !active && "font-medium text-foreground"
               ),
-              ...item.isLoading ? { role: "status", "aria-label": "Agent responding" } : {},
+              ...item.isLoading ? {
+                role: "status",
+                "aria-label": "Agent responding",
+                // The sweep through the glyphs is the ONLY thing separating "this
+                // agent is still working" from "this row is stale", so it opts out
+                // of the reduced-motion floor. Decorative motion must not.
+                "data-motion": "essential"
+              } : {},
               children: item.label
             }
           )
@@ -627,7 +694,10 @@ function RailExpandable({
           {
             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",
+            className: cn(
+              "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",
+              MOTION_CONTROL
+            ),
             children: /* @__PURE__ */ jsx3(MoreHorizontal, { className: "h-3.5 w-3.5" })
           }
         ) }),
@@ -652,7 +722,8 @@ function RailExpandable({
   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",
+      "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",
       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"
     );
@@ -690,6 +761,7 @@ function RailExpandable({
       {
         ref: triggerRef,
         className: cn("relative", className),
+        style,
         onMouseEnter: openFlyout,
         onMouseLeave: scheduleClose,
         onFocusCapture: openFlyout,
@@ -715,7 +787,7 @@ function RailExpandable({
                 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),
+                className: cn("agent-pop-in 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 })
@@ -731,16 +803,20 @@ function RailExpandable({
   const toggle = () => {
     setOpen((v) => {
       const next = !v;
-      if (next) ensureLoaded();
+      if (next) {
+        ensureLoaded();
+        setEverOpened(true);
+      }
       return next;
     });
   };
-  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full", className), children: [
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full", className), style, children: [
     /* @__PURE__ */ jsxs2(
       "div",
       {
         className: cn(
-          "group/exp relative flex h-9 w-full items-center rounded-md transition-colors duration-150",
+          "group/exp relative flex h-9 w-full items-center rounded-md transition-colors",
+          MOTION_CONTROL,
           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: [
@@ -750,20 +826,22 @@ function RailExpandable({
               type: "button",
               onClick: toggle,
               "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",
               children: [
                 /* @__PURE__ */ jsx3(
                   Icon2,
                   {
-                    className: "h-[17px] w-[17px] shrink-0 opacity-100 transition-opacity duration-150 group-hover/exp:opacity-0"
+                    className: cn("h-[17px] w-[17px] shrink-0 opacity-100 transition-opacity group-hover/exp:opacity-0", MOTION_CONTROL)
                   }
                 ),
                 /* @__PURE__ */ jsx3(
                   ChevronRightIcon,
                   {
                     className: cn(
-                      "absolute h-4 w-4 opacity-0 transition-all duration-150 group-hover/exp:opacity-100",
+                      "absolute h-4 w-4 opacity-0 transition-all group-hover/exp:opacity-100",
+                      MOTION_CONTROL,
                       open && "rotate-90"
                     )
                   }
@@ -792,10 +870,10 @@ function RailExpandable({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx3("div", { className: "mt-0.5 flex flex-col gap-0.5 pl-3", children: list })
+    /* @__PURE__ */ jsx3("div", { ref: discloseRef, id: discloseId, className: "agent-disclose", "data-open": open ? "true" : "false", children: /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-0.5 pl-3 pt-0.5", children: everOpened ? list : null }) }) })
   ] });
 }
-function RailModeButton({ mode, icon, label, badge, className, showLabel }) {
+function RailModeButton({ mode, icon, label, badge, className, showLabel, style }) {
   const { panelOpen, mode: currentMode, switchMode } = useSidebar();
   return /* @__PURE__ */ jsx3(
     RailButton,
@@ -806,7 +884,8 @@ function RailModeButton({ mode, icon, label, badge, className, showLabel }) {
       badge,
       onClick: () => switchMode(mode),
       className,
-      showLabel
+      showLabel,
+      style
     }
   );
 }
@@ -816,7 +895,8 @@ function SidebarPanel({ children, className }) {
     "div",
     {
       className: cn(
-        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-[var(--md3-outline-variant)] bg-surface-container-low",
+        "transition-[opacity] h-full overflow-hidden border-l border-[var(--md3-outline-variant)] bg-surface-container-low",
+        MOTION_SURFACE,
         panelOpen ? "w-[268px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
@@ -836,7 +916,9 @@ function SidebarContent({ children, className }) {
     "main",
     {
       className: cn(
-        "min-h-screen transition-[margin-left] duration-200 ease-in-out lg:ml-[var(--sb-content-margin,0px)]",
+        "min-h-screen transition-[margin-left] lg:ml-[var(--sb-content-margin,0px)]",
+        // Same tier as the rail it is keeping pace with — @see Sidebar.
+        MOTION_TRAVEL,
         className
       ),
       style: { "--sb-content-margin": `${contentMargin}px` },
@@ -863,7 +945,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(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     divider && /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
     /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
       /* @__PURE__ */ jsxs2(DropdownMenuSubTrigger, { children: [
@@ -916,6 +998,7 @@ function ProfileAvatar({
         type: "button",
         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",
           showDetails ? "w-full gap-2.5 px-3 py-2 text-left" : "justify-center w-12 h-12",
           className
@@ -936,10 +1019,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(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsx3(Skeleton, { className: "h-4 w-24 mb-1" }),
           /* @__PURE__ */ jsx3(Skeleton, { className: "h-3 w-32" })
-        ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        ] }) : /* @__PURE__ */ jsxs2(Fragment, { 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: [
@@ -958,7 +1041,7 @@ function ProfileAvatar({
         /* @__PURE__ */ jsx3(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
         "Settings"
       ] }) }),
-      onLogout && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      onLogout && /* @__PURE__ */ jsxs2(Fragment, { 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" }),
@@ -1110,7 +1193,7 @@ function OutOfCreditsModal({
 
 // src/dashboard/cluster-status-bar.tsx
 import * as React5 from "react";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, 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: [
@@ -1124,11 +1207,11 @@ function ClusterStatusBar({ items, latency, className }) {
         ] })
       ] })
     ] }, i)),
-    latency && /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    latency && /* @__PURE__ */ jsxs5(Fragment3, { 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: [
-          /* @__PURE__ */ jsx6("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" }),
+          /* @__PURE__ */ jsx6("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75", "data-motion": "essential" }),
           /* @__PURE__ */ jsx6("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" })
         ] }),
         /* @__PURE__ */ jsx6("span", { className: "font-mono text-xs font-bold text-green-400", children: latency })
@@ -1274,7 +1357,7 @@ import {
   HardDrive,
   Box
 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, 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";
@@ -1374,7 +1457,7 @@ function SandboxCard({
           }
         ) }),
         /* @__PURE__ */ jsxs9(DropdownMenuContent2, { align: "end", className: "min-w-[180px]", children: [
-          isRunning && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+          isRunning && /* @__PURE__ */ jsxs9(Fragment4, { children: [
             onStop && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onStop(sandbox.id), children: [
               /* @__PURE__ */ jsx10(PowerOff, { className: "mr-2 h-4 w-4" }),
               " Stop Sandbox"
@@ -1393,7 +1476,7 @@ function SandboxCard({
               " Health Check"
             ] }),
             (onUsage || onHealth) && /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {}),
-            onFork && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+            onFork && /* @__PURE__ */ jsxs9(Fragment4, { children: [
               /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => onFork(sandbox.id), children: [
                 /* @__PURE__ */ jsx10(Copy, { className: "mr-2 h-4 w-4" }),
                 " Fork Sandbox"
@@ -1401,7 +1484,7 @@ function SandboxCard({
               /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {})
             ] })
           ] }),
-          isStopped && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+          isStopped && /* @__PURE__ */ jsxs9(Fragment4, { children: [
             resumeHandler && /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onClick: () => resumeHandler(sandbox.id), children: [
               /* @__PURE__ */ jsx10(Power, { className: "mr-2 h-4 w-4" }),
               " ",
@@ -1424,11 +1507,15 @@ function SandboxCard({
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1.5 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container-high px-2 py-0.5 text-[11px] font-medium text-foreground", children: [
           /* @__PURE__ */ jsxs9("span", { className: "relative flex h-1.5 w-1.5", children: [
-            isRunning && /* @__PURE__ */ jsx10(
+            isRunning && // The ping renders only while the sandbox IS running, so it is
+            // live state, not decoration — the same call SandboxTable makes
+            // for its running/provisioning dot.
+            /* @__PURE__ */ jsx10(
               "span",
               {
                 className: "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
-                style: { backgroundColor: status.color }
+                style: { backgroundColor: status.color },
+                "data-motion": "essential"
               }
             ),
             /* @__PURE__ */ jsx10("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full", style: { backgroundColor: status.color } })
@@ -1560,7 +1647,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator3,
   DropdownMenuTrigger as DropdownMenuTrigger3
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, 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" },
@@ -1663,7 +1750,13 @@ function SandboxTable({
               onClick: onRowClick,
               children: [
                 /* @__PURE__ */ jsx11("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx11("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
+                  /* @__PURE__ */ jsx11(
+                    "span",
+                    {
+                      className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot),
+                      ...sc.dot.includes("animate-") ? { "data-motion": "essential" } : {}
+                    }
+                  ),
                   /* @__PURE__ */ jsx11("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
                 ] }) }),
                 /* @__PURE__ */ jsx11("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col", children: [
@@ -1703,14 +1796,14 @@ function SandboxTable({
                   /* @__PURE__ */ jsx11(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
                   /* @__PURE__ */ jsx11(MiniMeter, { label: "RAM", percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0 })
                 ] }) : isProvisioning ? /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-primary italic text-[10px] font-bold", children: [
-                  /* @__PURE__ */ jsx11(RefreshCw, { className: "h-3.5 w-3.5 animate-spin" }),
+                  /* @__PURE__ */ jsx11(RefreshCw, { className: "h-3.5 w-3.5 animate-spin", "data-motion": "essential" }),
                   sb.provisioningMessage ?? "Allocating nodes..."
                 ] }) : isHibernating ? /* @__PURE__ */ jsxs10("div", { className: "space-y-3 w-48 opacity-30", children: [
                   /* @__PURE__ */ jsx11(MiniMeter, { label: "CPU", percent: 0 }),
                   /* @__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(Fragment7, { children: [
+                  isActive && /* @__PURE__ */ jsxs10(Fragment6, { children: [
                     /* @__PURE__ */ jsx11("button", { type: "button", onClick: (e) => {
                       stopRowClick(e);
                       onOpenIDE?.(sb.id);
@@ -2245,7 +2338,7 @@ function useBrandThemeSync() {
 }
 
 // src/dashboard/dashboard-layout.tsx
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, 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" }),
@@ -2332,7 +2425,7 @@ function DashboardLayoutInner({
   );
   const activePanel = panels.find((p) => p.mode === mode);
   const buildSidebarContent = React9.useCallback(
-    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs14(Fragment9, { children: [
+    (showLabels, allowCollapse) => /* @__PURE__ */ jsxs14(Fragment8, { children: [
       /* @__PURE__ */ jsxs14(SidebarRail, { wide: showLabels, children: [
         /* @__PURE__ */ jsx17(
           RailHeader,
@@ -2356,6 +2449,7 @@ function DashboardLayoutInner({
               const isMode = modeSet.has(item.id);
               const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
               const showSep = i > 0 && isMode && !prevIsMode;
+              const arrival = { className: "agent-arrive", style: { "--stagger-index": i } };
               return /* @__PURE__ */ jsxs14(React9.Fragment, { children: [
                 showSep && /* @__PURE__ */ jsx17(
                   RailSeparator,
@@ -2370,7 +2464,8 @@ function DashboardLayoutInner({
                     icon: item.icon,
                     label: item.label,
                     badge: item.badge,
-                    showLabel: showLabels
+                    showLabel: showLabels,
+                    ...arrival
                   }
                 ) : /* @__PURE__ */ jsx17(
                   RailButton,
@@ -2380,6 +2475,7 @@ function DashboardLayoutInner({
                     isActive: activeNavId === item.id,
                     showLabel: showLabels,
                     asChild: true,
+                    ...arrival,
                     children: /* @__PURE__ */ jsx17(Link, { href: item.href, to: item.href })
                   }
                 )
@@ -2473,14 +2569,17 @@ function DashboardLayoutInner({
     /* @__PURE__ */ jsxs14(
       "nav",
       {
-        className: "fixed top-0 z-50 bg-surface-container-low border-b border-[var(--md3-outline-variant)] flex justify-between items-center px-8 h-14 font-sans text-[13px] tracking-tight transition-[left,width] duration-200 ease-in-out",
+        className: cn(
+          "fixed top-0 z-50 bg-surface-container-low border-b border-[var(--md3-outline-variant)] flex justify-between items-center px-8 h-14 font-sans text-[13px] tracking-tight transition-[left,width]",
+          MOTION_TRAVEL
+        ),
         style: {
           left: hidden ? 0 : contentMargin,
           width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
         },
         children: [
           /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-8", children: [
-            /* @__PURE__ */ jsx17(Link, { href: logoHref, to: logoHref, className: "lg:hidden flex items-center p-1 rounded-md hover:bg-surface-container-high transition-colors", children: /* @__PURE__ */ jsx17(Logo, { variant, size: "sm", iconOnly: true }) }),
+            /* @__PURE__ */ jsx17(Link, { href: logoHref, to: logoHref, className: cn("lg:hidden flex items-center p-1 rounded-md hover:bg-surface-container-high transition-colors", MOTION_CONTROL), children: /* @__PURE__ */ jsx17(Logo, { variant, size: "sm", iconOnly: true }) }),
             topBarLeading,
             topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx17("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx17(
               Link,
@@ -2488,7 +2587,8 @@ function DashboardLayoutInner({
                 href: link.href,
                 to: link.href,
                 className: cn(
-                  "transition-all duration-300 px-2 py-1 rounded",
+                  "transition-all px-2 py-1 rounded",
+                  MOTION_CONTROL,
                   activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-surface-container-high"
                 ),
                 children: link.label
@@ -2502,7 +2602,7 @@ function DashboardLayoutInner({
               {
                 type: "button",
                 onClick: onNewSandbox,
-                className: "hidden md:flex items-center gap-2 bg-[var(--btn-primary-bg)] border border-[var(--border-accent)] text-[var(--btn-primary-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--btn-primary-hover)] transition-all active:scale-95 text-xs",
+                className: cn("hidden md:flex items-center gap-2 bg-[var(--btn-primary-bg)] border border-[var(--border-accent)] text-[var(--btn-primary-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--btn-primary-hover)] transition-all active:scale-95 text-xs", MOTION_CONTROL),
                 children: [
                   /* @__PURE__ */ jsx17(Plus2, { className: "h-3.5 w-3.5" }),
                   "New Sandbox"
@@ -2514,7 +2614,7 @@ function DashboardLayoutInner({
                 "button",
                 {
                   type: "button",
-                  className: "relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-surface-container-high",
+                  className: cn("relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-surface-container-high", MOTION_CONTROL),
                   onClick: () => setNotificationsOpen(!notificationsOpen),
                   "aria-label": "Notifications",
                   "aria-expanded": notificationsOpen,
@@ -2549,6 +2649,7 @@ function DashboardLayoutInner({
                     type: "button",
                     className: cn(
                       "w-full text-left px-4 py-3 border-b border-[var(--md3-outline-variant)] last:border-0 transition-colors",
+                      MOTION_CONTROL,
                       n.read ? "cursor-default" : "bg-primary/5 hover:bg-white/5"
                     ),
                     onClick: () => {
@@ -2584,7 +2685,8 @@ function DashboardLayoutInner({
       "aside",
       {
         className: cn(
-          "fixed top-14 bottom-0 left-0 z-30 flex bg-surface-container-low transition-transform duration-200 lg:hidden",
+          "fixed top-14 bottom-0 left-0 z-30 flex bg-surface-container-low transition-transform lg:hidden",
+          MOTION_TRAVEL,
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
         ),
         style: {
@@ -2604,7 +2706,7 @@ function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, defaultRa
 
 // src/dashboard/sidebar-layout.tsx
 import * as React10 from "react";
-import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var HIDE_BELOW_CLASS = {
   md: "max-md:hidden",
   lg: "max-lg:hidden"
@@ -2667,7 +2769,8 @@ function SidebarLayoutInner({
     showLabels: showLabels2,
     onNavigate
   }) {
-    return navItems.map((item) => {
+    return navItems.map((item, index) => {
+      const arrival = { className: "agent-arrive", style: { "--stagger-index": index } };
       if (item.expandable) {
         return /* @__PURE__ */ jsx18(
           RailExpandable,
@@ -2683,7 +2786,8 @@ function SidebarLayoutInner({
             emptyLabel: item.emptyLabel,
             defaultOpen: item.defaultOpen,
             onNavigate,
-            LinkComponent
+            LinkComponent,
+            ...arrival
           },
           item.id
         );
@@ -2698,6 +2802,7 @@ function SidebarLayoutInner({
             title: item.label,
             showLabel: showLabels2,
             isActive: activeId === item.id || item.flyoutItems.some((f) => activeSet.has(f.id)),
+            ...arrival,
             children: item.flyoutItems.map((f) => {
               const FIcon = f.icon;
               const active = activeSet.has(f.id);
@@ -2710,6 +2815,7 @@ function SidebarLayoutInner({
                   ...f.prefetch !== void 0 ? { prefetch: f.prefetch } : {},
                   className: cn(
                     "flex h-9 items-center gap-2.5 rounded-lg px-2.5 text-sm transition-colors",
+                    MOTION_CONTROL,
                     active ? "bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]"
                   ),
                   children: [
@@ -2735,10 +2841,11 @@ function SidebarLayoutInner({
             togglePanel();
             onNavigate?.();
           },
-          showLabel: showLabels2
+          showLabel: showLabels2,
+          ...arrival
         },
         item.id
-      ) : /* @__PURE__ */ jsx18(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: showLabels2, variant: item.variant, asChild: true, children: /* @__PURE__ */ jsx18(
+      ) : /* @__PURE__ */ jsx18(RailButton, { icon: item.icon, label: item.label, badge: item.badge, isActive: activeId === item.id, showLabel: showLabels2, variant: item.variant, asChild: true, ...arrival, children: /* @__PURE__ */ jsx18(
         Link,
         {
           href: item.href,
@@ -2803,7 +2910,7 @@ function SidebarLayoutInner({
                 "aria-controls": "sidebar-mobile-nav",
                 "aria-haspopup": "dialog",
                 onClick: () => setMobileNavOpen(true),
-                className: "flex size-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+                className: cn("flex size-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", MOTION_CONTROL),
                 children: /* @__PURE__ */ jsx18(MenuIcon2, { className: "size-5" })
               }
             ),
@@ -2832,7 +2939,7 @@ function SidebarLayoutInner({
         breakpoint: hideBelow,
         onClose: closeMobileNav,
         header: railHeaderContent ?? logo,
-        footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs15(Fragment10, { children: [
+        footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
           railFooter,
           hasProfile && /* @__PURE__ */ jsx18(
             ProfileAvatar,
@@ -2927,7 +3034,7 @@ function MobileNavDrawer({
         "aria-modal": "true",
         "aria-label": "Navigation",
         style: { width: SIDEBAR_MOBILE_WIDTH },
-        className: "absolute inset-y-0 left-0 flex max-w-[85vw] flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low shadow-xl",
+        className: "agent-arrive absolute inset-y-0 left-0 flex max-w-[85vw] flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low shadow-xl",
         children: [
           /* @__PURE__ */ jsxs15("div", { className: "flex h-14 shrink-0 items-center gap-1 border-b border-[var(--md3-outline-variant)] px-2", children: [
             /* @__PURE__ */ jsx18("div", { className: "flex min-w-0 flex-1 items-center", children: header }),
@@ -2937,7 +3044,7 @@ function MobileNavDrawer({
                 type: "button",
                 "aria-label": "Close navigation",
                 onClick: onClose,
-                className: "flex size-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+                className: cn("flex size-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", MOTION_CONTROL),
                 children: /* @__PURE__ */ jsx18(CloseIcon, { className: "size-5" })
               }
             )
@@ -2989,7 +3096,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator4,
   DropdownMenuTrigger as DropdownMenuTrigger4
 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment11, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -3023,7 +3130,7 @@ function ProfileSelector({
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment11, { children: [
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment10, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx19(DropdownMenuLabel2, { children: "Built-in Profiles" }),
           builtinProfiles.map((profile) => /* @__PURE__ */ jsxs16(
@@ -3048,7 +3155,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment11, { children: [
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs16(Fragment10, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           /* @__PURE__ */ jsx19(DropdownMenuLabel2, { children: "Custom Profiles" }),
           customProfiles.map((profile) => /* @__PURE__ */ jsxs16(
@@ -3085,7 +3192,7 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs16(Fragment11, { children: [
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs16(Fragment10, { children: [
           /* @__PURE__ */ jsx19(DropdownMenuSeparator4, {}),
           onCreateClick && /* @__PURE__ */ jsxs16(
             DropdownMenuItem4,
@@ -3327,7 +3434,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 Fragment13, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
     icon: Clock3,
@@ -3426,7 +3533,8 @@ function VariantList({
               /* @__PURE__ */ jsx21(
                 StatusIcon,
                 {
-                  className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`
+                  className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`,
+                  ...status.animate ? { "data-motion": "essential" } : {}
                 }
               ),
               status.label
@@ -3450,7 +3558,7 @@ function VariantList({
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs18(Fragment13, { children: [
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs18(Fragment12, { children: [
                 /* @__PURE__ */ jsxs18(
                   Button3,
                   {
@@ -3885,7 +3993,7 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
   };
   return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-4", className), children: [
     loading ? /* @__PURE__ */ jsxs23("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
-      /* @__PURE__ */ jsx26(Activity3, { className: "mx-auto h-6 w-6 text-muted-foreground animate-spin mb-2" }),
+      /* @__PURE__ */ jsx26(Activity3, { className: "mx-auto h-6 w-6 text-muted-foreground animate-spin mb-2", "data-motion": "essential" }),
       /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "Loading processes..." })
     ] }) : processes.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsxs23("table", { className: "w-full text-sm", children: [
       /* @__PURE__ */ jsx26("thead", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs23("tr", { children: [
@@ -3974,7 +4082,7 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
   };
   if (loading || !config) {
     return /* @__PURE__ */ jsxs24("div", { className: cn("rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", className), children: [
-      /* @__PURE__ */ jsx27(Network2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
+      /* @__PURE__ */ jsx27(Network2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2", "data-motion": "essential" }),
       /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground", children: "Loading network configuration..." })
     ] });
   }
@@ -4058,7 +4166,7 @@ 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 Fragment14, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function BackendConfig({
   status,
   mcpServers,
@@ -4089,7 +4197,7 @@ function BackendConfig({
   };
   if (loading || !status) {
     return /* @__PURE__ */ jsxs25("div", { className: cn("rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", className), children: [
-      /* @__PURE__ */ jsx28(Bot2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
+      /* @__PURE__ */ jsx28(Bot2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2", "data-motion": "essential" }),
       /* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground", children: "Loading backend status..." })
     ] });
   }
@@ -4115,7 +4223,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(Fragment14, { children: [
+        status.provider && /* @__PURE__ */ jsxs25(Fragment13, { children: [
           /* @__PURE__ */ jsx28("dt", { className: "text-muted-foreground", children: "Provider" }),
           /* @__PURE__ */ jsx28("dd", { className: "font-mono text-xs", children: status.provider })
         ] })
@@ -4305,7 +4413,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
       ] })
     ] }),
     loading ? /* @__PURE__ */ jsxs26("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-6 text-center", children: [
-      /* @__PURE__ */ jsx29(Camera, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
+      /* @__PURE__ */ jsx29(Camera, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2", "data-motion": "essential" }),
       /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground", children: "Loading snapshots..." })
     ] }) : snapshots.length > 0 ? /* @__PURE__ */ jsx29("div", { className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container overflow-hidden", children: /* @__PURE__ */ jsxs26("table", { className: "w-full text-sm", children: [
       /* @__PURE__ */ jsx29("thead", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: /* @__PURE__ */ jsxs26("tr", { children: [
@@ -4361,7 +4469,7 @@ function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loadin
 }
 
 // src/dashboard/promo-banner.tsx
-import { Fragment as Fragment15, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function PromoBanner({
   title,
   description,
@@ -4376,7 +4484,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(Fragment15, { children: [
+  const buttonContent = /* @__PURE__ */ jsxs27(Fragment14, { 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" }),