fix(studio): shell UX — data-loss guards, error surfacing, dialog contracts, toasts (#1964)

packages/studio/src/components/StudioToast.tsx

@@ -1,18 +1,17 @@
 interface StudioToastProps {
   message: string;
   tone?: "error" | "info";
+  /** Plays the exit animation when true (owner removes the node after ~160ms). */
+  leaving?: boolean;
   onDismiss?: () => void;
 }
 
-// fallow-ignore-next-line complexity
-export function StudioToast({ message, tone, onDismiss }: StudioToastProps) {
+export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastProps) {
   const isError = tone === "error";
   return (
     <div
-      className="absolute bottom-6 right-6 z-[91] animate-in fade-in slide-in-from-bottom-2"
-      onClick={onDismiss}
-      role={onDismiss ? "button" : undefined}
-      style={onDismiss ? { cursor: "pointer" } : undefined}
+      role={isError ? "alert" : "status"}
+      className={`motion-reduce:animate-none ${leaving ? "hf-toast-exit" : "hf-toast-enter"}`}
     >
       <div
         className="relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px]"
@@ -38,10 +37,7 @@ export function StudioToast({ message, tone, onDismiss }: StudioToastProps) {
         {onDismiss && (
           <button
             type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onDismiss();
-            }}
+            onClick={onDismiss}
             className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300"
             aria-label="Dismiss"
           >