feat(studio): menus and popovers paint instantly

packages/studio/src/components/ui/Menu.test.tsx

@@ -360,10 +360,9 @@ describe("open motion", () => {
 
   // AE4.
   it("names a motion token that zeroes itself under reduced motion", async () => {
-    // The zero-duration case lives in the `duration-open` utility itself
-    // (theme.css), not in a `motion-reduce:` class beside it, so a caller
-    // cannot use the token and forget the reduced-motion half. The menu's job
-    // is to name the token; the stylesheet's job is the media query.
+    // Reduced motion lives in the `duration-open` utility itself (theme.css),
+    // not in a `motion-reduce:` class beside it, so a caller cannot use the
+    // token and forget that half. The menu's job is to name the token.
     await openActionMenu();
 
     expect([...popup()!.classList]).toContain("duration-open");

packages/studio/src/components/ui/Menu.tsx

@@ -27,15 +27,28 @@ const SIDE_OFFSET = 6;
 const VIEWPORT_MARGIN = 8;
 
 /**
- * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
+ * Enter and exit shared by menus, popovers, dropdowns, and tooltips.
+ * The open duration class differs; the shape does not.
  * `data-starting-style`/`data-ending-style` are Base UI's transition attributes.
  */
+export function floatingMotion(openDuration: "duration-open" | "duration-tooltip") {
+  return cn(
+    "origin-[var(--transform-origin)] outline-hidden",
+    "transition-[opacity,transform] ease-out-quint",
+    openDuration,
+    "data-[ending-style]:duration-close data-[ending-style]:ease-in",
+    "data-[starting-style]:[opacity:var(--popup-enter-opacity)]",
+    "data-[starting-style]:[scale:var(--popup-enter-scale)]",
+    "data-[ending-style]:opacity-0",
+  );
+}
+
+/**
+ * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
+ */
 export const popupSurface = cn(
   "rounded-lg border border-border-input bg-surface",
-  "origin-[var(--transform-origin)] outline-hidden",
-  "transition-[opacity,transform] ease-out-quint duration-open",
-  "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
-  "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
+  floatingMotion("duration-open"),
   "data-[preview-state=open]:opacity-100 data-[preview-state=open]:scale-100",
 );
 

packages/studio/src/components/ui/Select.tsx

@@ -6,6 +6,7 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { cn } from "./cn";
 import { fieldBase } from "./Input";
+import { floatingMotion } from "./Menu";
 import type { PreviewState } from "./Button";
 
 export interface SelectOption {
@@ -77,7 +78,12 @@ export function Select({
 
       <BaseSelect.Portal>
         <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false}>
-          <BaseSelect.Popup className="min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu outline-hidden">
+          <BaseSelect.Popup
+            className={cn(
+              "min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu",
+              floatingMotion("duration-open"),
+            )}
+          >
             <BaseSelect.List>
               {options.map((option) => (
                 <BaseSelect.Item

packages/studio/src/components/ui/Tooltip.tsx

@@ -5,6 +5,8 @@
 
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cloneElement, useId, useRef, useState, type ReactElement } from "react";
+import { cn } from "./cn";
+import { floatingMotion } from "./Menu";
 
 interface TooltipProps {
   label: string;
@@ -42,7 +44,10 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
           <BaseTooltip.Popup
             id={tooltipId}
             role="tooltip"
-            className="pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu"
+            className={cn(
+              "pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu",
+              floatingMotion("duration-tooltip"),
+            )}
           >
             {label}
           </BaseTooltip.Popup>

packages/studio/src/styles/theme.css

@@ -208,7 +208,14 @@
   --duration-press: 120ms;
   --duration-hover: 150ms;
   --duration-expand: 160ms;
-  --duration-open: 180ms;
+  /* Menus, popovers, and dropdowns. Open is ease-out; close is shorter and ease-in. */
+  --duration-open: 120ms;
+  --duration-close: 90ms;
+  /* Tooltips use the same enter shape on a shorter open. */
+  --duration-tooltip: 100ms;
+  /* Visible on the first frame. Never enter from scale 0 or opacity 0. */
+  --popup-enter-opacity: 0.8;
+  --popup-enter-scale: 0.97;
 
   /* ------------------------------------------------------------------ icon */
 

packages/studio/src/styles/theme.test.ts

@@ -109,6 +109,15 @@ describe("studio theme", () => {
     expect(vars.get("--text-lg")).toBe("1.125rem");
   });
 
+  it("opens menus from a visible shape and closes them faster", () => {
+    expect(declaredValue("--duration-open")).toBe("120ms");
+    expect(declaredValue("--duration-close")).toBe("90ms");
+    expect(declaredValue("--duration-tooltip")).toBe("100ms");
+    expect(declaredValue("--popup-enter-opacity")).toBe("0.8");
+    expect(declaredValue("--popup-enter-scale")).toBe("0.97");
+    expect(declaredValue("--duration-hover")).toBe("150ms");
+  });
+
   it("compiles a motion-duration utility with a reduced-motion variant", async () => {
     const css = await build("studio.css", ["duration-press", "duration-open"]);