@skyhook-io/k8s-ui 1.14.6 → 1.14.7

package/src/components/ui/Collapse.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { Collapse, CollapseChevron, disclosurePanelId } from './Collapse'
+import {
+  CSS_EASE,
+  DURATION_DISCLOSURE,
+  TRANSITION_CHEVRON,
+  TRANSITION_DISCLOSURE,
+} from '../../utils/animation'
+
+// The primitive is the app-wide standard for expand/collapse; these pin the
+// contract other components rely on rather than the visuals.
+describe('Collapse', () => {
+  it('animates grid-template-rows with the shared disclosure timing', () => {
+    const html = renderToString(<Collapse open={false}>x</Collapse>)
+    expect(html).toContain('grid-template-rows:0fr')
+    expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
+    expect(TRANSITION_DISCLOSURE).toContain(`duration-${DURATION_DISCLOSURE}`)
+    expect(TRANSITION_DISCLOSURE).toContain('motion-reduce:transition-none')
+  })
+
+  it('keeps closed content mounted but inert, and clipped', () => {
+    const html = renderToString(<Collapse open={false}>hidden-content</Collapse>)
+    expect(html).toContain('hidden-content')
+    expect(html).toMatch(/inert=""|inert>/)
+    expect(html).toContain('overflow-hidden')
+    const opened = renderToString(<Collapse open>shown</Collapse>)
+    expect(opened).toContain('grid-template-rows:1fr')
+    expect(opened).not.toMatch(/inert=""|inert>/)
+  })
+
+  it('mountLazily renders nothing until first open', () => {
+    expect(renderToString(<Collapse open={false} mountLazily>lazy</Collapse>)).not.toContain('lazy')
+    expect(renderToString(<Collapse open mountLazily>lazy</Collapse>)).toContain('lazy')
+  })
+
+  it('unmountOnExit renders nothing when initially closed', () => {
+    // Initial-closed mount never had a transition to wait for.
+    expect(renderToString(<Collapse open={false} unmountOnExit>gone</Collapse>)).not.toContain('gone')
+    expect(renderToString(<Collapse open unmountOnExit>here</Collapse>)).toContain('here')
+  })
+
+  it('exposes the panel id for aria-controls', () => {
+    expect(renderToString(<Collapse open id="panel-1">x</Collapse>)).toContain('id="panel-1"')
+  })
+
+  it('disclosurePanelId never yields whitespace (aria-controls is a space-separated list)', () => {
+    expect(disclosurePanelId(':r1:', 'Access Control')).toBe(':r1:-Access%20Control')
+    expect(disclosurePanelId(':r1:', 7)).toBe(':r1:-7')
+    // Injective: keys that only differ by the separator stay distinct.
+    expect(disclosurePanelId('p', 'a b')).not.toBe(disclosurePanelId('p', 'a_b'))
+  })
+})
+
+describe('CollapseChevron', () => {
+  it('runs the same clock as the panel', () => {
+    expect(TRANSITION_CHEVRON).toContain(`duration-${DURATION_DISCLOSURE}`)
+    const html = renderToString(<CollapseChevron open />)
+    expect(html).toContain('rotate-90')
+    expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
+  })
+})
+
+describe('motion tokens stay in step with the stylesheet', () => {
+  it('.issue-details-motion mirrors DURATION_DISCLOSURE and CSS_EASE', () => {
+    const css = readFileSync(join(__dirname, '../../theme/components.css'), 'utf8')
+    const m = css.match(/\.issue-details-motion \{[^}]*transition: grid-template-rows (\d+)ms ([^;]+);/)
+    expect(m, 'legacy class present').not.toBeNull()
+    expect(Number(m![1])).toBe(DURATION_DISCLOSURE)
+    expect(m![2].replace(/\s+/g, '')).toBe(CSS_EASE.replace(/\s+/g, ''))
+  })
+})

package/src/components/ui/Collapse.tsx

@@ -1,47 +1,93 @@
-import { useState, type ReactNode } from 'react'
+import { useEffect, useId, useState, type ReactNode, type TransitionEvent } from 'react'
 import { ChevronRight } from 'lucide-react'
 import { clsx } from 'clsx'
+import { DURATION_DISCLOSURE, TRANSITION_CHEVRON, TRANSITION_DISCLOSURE, prefersReducedMotion } from '../../utils/animation'
 
 // Animated show/hide using the grid-template-rows 0fr→1fr technique — the
-// app-wide standard for expand/collapse (drawers, checks, audit, resources
-// sidebar, port-forward). The inner overflow-hidden wrapper is load-bearing:
-// it clips the content while the grid row animates between 0 and its natural
-// height, so nothing spills before the row is fully open.
+// app-wide standard for expand/collapse (drawer sections, checks, audit,
+// resources sidebar, issue rows, and every disclosure in Radar Cloud). The
+// inner overflow-hidden wrapper is load-bearing: it clips the content while
+// the grid row animates between 0 and its natural height, so nothing spills
+// before the row is fully open.
 //
-// Content stays mounted while closed (clipped to zero height) — that's what
-// lets it animate. `inert` when closed keeps that clipped content out of the
-// tab order and the accessibility tree, so keyboard/screen-reader users don't
-// land on invisible rows (matching ChecksView's collapse).
+// Timing lives in utils/animation (DURATION_DISCLOSURE, one curve). The caret
+// (CollapseChevron) runs the same clock, so an interrupted toggle reverses
+// panel and caret together.
 //
-// `mountLazily` defers rendering the children until the first open, then keeps
-// them mounted so both the open and close animations still run. Use it when the
-// collapsed content is heavy and there are many instances (e.g. hundreds of
-// resource rows, each with a drift panel) — otherwise every collapsed instance
-// pays its render cost up front. Off by default so the common single-instance
-// case keeps the simplest behavior.
+// Mount policy — pick per site, it is not cosmetic:
+//   default        content stays mounted while closed, clipped to zero height
+//                  and `inert` so keyboard/screen-reader users can't land on
+//                  invisible rows. Right for static or cheap content.
+//   mountLazily    defers the first render until the first open, then keeps
+//                  it. For many instances with heavy collapsed content
+//                  (hundreds of rows each with a drift panel).
+//   unmountOnExit  unmounts the children once the close transition has
+//                  finished (transitionend on this wrapper, with a timer
+//                  fallback so disposal is guaranteed under reduced motion,
+//                  for empty content, or if the event never fires). For
+//                  subtrees that poll, subscribe, or should reset on close.
+//                  Note: work stops when the subtree unmounts, i.e. after the
+//                  exit; a query that must stop at logical close should also
+//                  take `enabled: open`.
 export function Collapse({
   open,
   children,
   className,
   mountLazily = false,
+  unmountOnExit = false,
+  id,
 }: {
   open: boolean
   children: ReactNode
   className?: string
   mountLazily?: boolean
+  unmountOnExit?: boolean
+  /** Panel id for the header's aria-controls (see useDisclosure). */
+  id?: string
 }) {
   // Latch: once opened, stay mounted. Conditional setState-in-render is the
   // supported pattern for deriving state from props without an extra commit.
   const [hasOpened, setHasOpened] = useState(open)
   if (mountLazily && open && !hasOpened) setHasOpened(true)
-  const render = !mountLazily || hasOpened
+
+  // unmountOnExit: keep rendering through the close transition, then stop.
+  // `exiting` must flip in the SAME render that sees `open` go false — doing
+  // it in an effect would commit one frame with the children already gone
+  // (render = open || exiting, both false) before the effect put them back.
+  // Same setState-in-render pattern as the latch above.
+  const [exiting, setExiting] = useState(false)
+  const [prevOpen, setPrevOpen] = useState(open)
+  if (open !== prevOpen) {
+    setPrevOpen(open)
+    // Reopen before disposal cancels the pending unmount; under reduced motion
+    // the stylesheet has zeroed the transition, so dispose at logical close.
+    setExiting(!open && unmountOnExit && !prefersReducedMotion())
+  }
+  // Guarantee disposal even if transitionend never arrives (empty content
+  // transitions instantly; a cancelled transition fires no end). Any change to
+  // `exiting` (reopen, transitionend) clears the pending timer via cleanup.
+  useEffect(() => {
+    if (!exiting) return
+    const t = window.setTimeout(() => setExiting(false), DURATION_DISCLOSURE + 50)
+    return () => window.clearTimeout(t)
+  }, [exiting])
+
+  const onTransitionEnd = (event: TransitionEvent<HTMLDivElement>) => {
+    if (!exiting) return
+    // Only this wrapper's own row transition — descendants' transitions
+    // bubble here too.
+    if (event.target !== event.currentTarget) return
+    if (event.propertyName !== 'grid-template-rows') return
+    setExiting(false)
+  }
+
+  const render = unmountOnExit ? open || exiting : !mountLazily || hasOpened
   return (
     <div
-      className={clsx(
-        'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
-        className,
-      )}
+      id={id}
+      className={clsx('grid', TRANSITION_DISCLOSURE, className)}
       style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+      onTransitionEnd={onTransitionEnd}
     >
       {/* `relative` is load-bearing. Collapsed content is still laid out at full
           height and only clipped by `overflow-hidden` — but an absolutely-positioned
@@ -51,24 +97,64 @@ export function Collapse({
           and extends the enclosing scroll container's scrollable overflow: the drawer
           scrolls past its own content into blank space. Anchoring here puts those
           boxes back inside the clip, so a collapsed section contributes nothing. */}
-      <div className="relative overflow-hidden" inert={!open || undefined}>{render ? children : null}</div>
+      <div className="relative overflow-hidden" inert={!open || undefined}>
+        {render ? children : null}
+      </div>
     </div>
   )
 }
 
 // CollapseChevron is the disclosure caret that pairs with <Collapse>: a single
 // ChevronRight that rotates 90° when open, rather than swapping between two
-// icons. Matches the drawer Section / ExpandableSection affordance so every
-// collapsible surface animates the same way.
-export function CollapseChevron({ open, className }: { open: boolean; className?: string }) {
+// icons. Same duration and curve as the panel, so every collapsible surface
+// animates the same way and an interrupted toggle keeps caret and panel in
+// step. Menu triggers are a different thing — they keep ChevronDown/Up
+// flipping toward the menu.
+//
+// The caret is tertiary grey by default. Inside a tinted header (an amber
+// warning, a red error banner, a button whose hover recolors its text) pass
+// `inheritColor` so it takes currentColor from the header instead — a color
+// utility in `className` would race the default in the cascade.
+export function CollapseChevron({
+  open,
+  className,
+  inheritColor = false,
+}: {
+  open: boolean
+  className?: string
+  inheritColor?: boolean
+}) {
   return (
     <ChevronRight
       aria-hidden="true"
-      className={clsx(
-        'shrink-0 text-theme-text-tertiary transition-transform duration-200 motion-reduce:transition-none',
-        open && 'rotate-90',
-        className,
-      )}
+      className={clsx('shrink-0', !inheritColor && 'text-theme-text-tertiary', TRANSITION_CHEVRON, open && 'rotate-90', className)}
     />
   )
 }
+
+// useDisclosure wires the header ↔ panel relationship: the header gets
+// aria-expanded + aria-controls, the panel gets a stable id. Works with any
+// header markup (a plain button, or a compound row with its own actions), so
+// it does not force a <button> wrapper around things that already contain
+// buttons.
+//
+//   const d = useDisclosure(open)
+//   <button {...d.buttonProps} onClick={toggle}>…<CollapseChevron open={open} /></button>
+//   <Collapse open={open} id={d.panelId}>…</Collapse>
+// Rows mapped inline can't each call useDisclosure; they build ids from one
+// useId() prefix plus a row key. The key is display data (a category name, a
+// cluster id) and may contain whitespace, which would split `aria-controls`
+// into two references — so it is percent-encoded here (injective, so two
+// distinct keys can't land on one id).
+export function disclosurePanelId(base: string, key: string | number): string {
+  return `${base}-${encodeURIComponent(String(key))}`
+}
+
+export function useDisclosure(open: boolean, explicitId?: string) {
+  const generated = useId()
+  const panelId = explicitId ?? `disclosure-${generated}`
+  return {
+    panelId,
+    buttonProps: { 'aria-expanded': open, 'aria-controls': panelId } as const,
+  }
+}

package/src/components/ui/DialogPortal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, type KeyboardEvent as ReactKeyboardEvent, type React
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 interface DialogPortalProps {
   open: boolean
@@ -27,7 +27,10 @@ interface DialogPortalProps {
  */
 export function DialogPortal({ open, onClose, children, className, closable = true }: DialogPortalProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
-  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  // The unmount window is the exit duration: shorter than the entrance, and
+  // exactly what the panel transition below runs — a mismatch here cut the
+  // close at two-thirds (200ms window under a 300ms panel).
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('dialog'))
 
   // Bubble phase lets nested editors and menus consume Escape before the dialog closes.
   const handleDialogKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
@@ -81,6 +84,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0',
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={closable ? onClose : undefined}
       />
       <div
@@ -95,6 +99,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
           className,
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
       >
         {children}
       </div>

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react'
-import { AlertTriangle, ChevronDown, ChevronRight, Loader2 } from 'lucide-react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 import { ConfirmDialog } from './ConfirmDialog'
 import { pluralize } from '../../utils/pluralize'
 
@@ -97,6 +98,7 @@ const MAX_NAMES_PER_KIND = 8
 
 function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[] }) {
   const [expanded, setExpanded] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   const grouped = useMemo(() => {
     const map = new Map<string, string[]>()
@@ -111,17 +113,18 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
   return (
     <div className="rounded border border-amber-500/30 bg-amber-500/5">
       <button
+        {...buttonProps}
         type="button"
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full px-3 py-2 text-left text-xs font-medium text-amber-400 hover:bg-amber-500/10 transition-colors"
       >
-        {expanded ? <ChevronDown className="w-3.5 h-3.5 shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 shrink-0" />}
+        <CollapseChevron open={expanded} inheritColor className="w-3.5 h-3.5" />
         <span>
           Will also delete {pluralize(dependents.length, 'dependent resource')}
         </span>
       </button>
 
-      {expanded && (
+      <Collapse open={expanded} id={panelId}>
         <div className="px-3 pb-2.5 space-y-1.5">
           {grouped.map(([kind, names]) => (
             <div key={kind} className="text-xs">
@@ -136,7 +139,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
             </div>
           ))}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

package/src/components/ui/RestrictedState.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { clsx } from 'clsx'
-import { Shield, ChevronDown, Copy, Check } from 'lucide-react'
+import { Shield, Copy, Check } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 
 // RestrictedState is the shared "you can't see this because of Kubernetes RBAC"
 // surface — distinct from EmptyState (which covers healthy / filtered / no-data).
@@ -61,6 +62,7 @@ function buildRbacRequest(group: string, resource: string): string {
 
 export function RestrictedState({ kindLabel, group = '', resource, reason, compact, className }: Props) {
   const [expanded, setExpanded] = useState(false)
+  const accessDisclosure = useDisclosure(expanded)
   const [copied, setCopied] = useState(false)
   const isUnavailable = reason === 'unavailable'
 
@@ -112,14 +114,15 @@ export function RestrictedState({ kindLabel, group = '', resource, reason, compa
 
           <div className="mt-3 w-full max-w-md">
             <button
+              {...accessDisclosure.buttonProps}
               onClick={() => setExpanded((v) => !v)}
               className="flex items-center gap-1.5 mx-auto text-sm text-theme-text-secondary hover:text-theme-text-primary transition-colors"
             >
-              <ChevronDown className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-180')} />
+              <CollapseChevron open={expanded} className="w-4 h-4" />
               How to get access
             </button>
 
-            {expanded && (
+            <Collapse open={expanded} id={accessDisclosure.panelId}>
               <div className="mt-2 text-left">
                 <p className="text-xs text-theme-text-tertiary mb-2">
                   Apply this, or send it to whoever administers your cluster, to grant your identity
@@ -143,7 +146,7 @@ export function RestrictedState({ kindLabel, group = '', resource, reason, compa
                   </pre>
                 </div>
               </div>
-            )}
+            </Collapse>
           </div>
         </>
       )}

package/src/components/ui/RowActionMenu.tsx

@@ -2,6 +2,8 @@ import { Fragment, useEffect, useLayoutEffect, useRef, useState, type ComponentT
 import { Loader2, MoreVertical } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Tooltip } from './Tooltip'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 export interface RowActionItem {
   key: string
@@ -25,20 +27,21 @@ interface RowActionMenuProps {
 
 export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true }: RowActionMenuProps) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   // Flip the menu above the trigger when it would otherwise spill past the
   // viewport bottom. The GitOps table's bottom rows sit at the end of a scroll
   // container with the app's fixed overlay buttons below them, so a
   // downward-opening menu there clips its lowest items with no way to scroll
-  // them into view. Measured after open (useLayoutEffect, pre-paint, no flicker).
+  // them into view. Measured once the menu is mounted (useLayoutEffect,
+  // pre-paint, no flicker). The last placement is kept through the exit
+  // transition — resetting at logical close would snap the menu to the other
+  // side mid-fade — and re-measured on the next open.
   const [openUp, setOpenUp] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
 
   useLayoutEffect(() => {
-    if (!open) {
-      setOpenUp(false)
-      return
-    }
+    if (!open || !shouldRender) return
     const trigger = ref.current?.getBoundingClientRect()
     const menuH = menuRef.current?.offsetHeight ?? 0
     if (!trigger) return
@@ -46,7 +49,7 @@ export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true
     // Flip up only when there's not enough room below AND enough room above,
     // so a tall menu near the top doesn't get clipped at the other end.
     setOpenUp(menuH + 8 > spaceBelow && trigger.top > menuH + 8)
-  }, [open])
+  }, [open, shouldRender])
 
   useEffect(() => {
     if (!open) return
@@ -89,14 +92,23 @@ export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true
       >
         <MoreVertical className={iconSize} />
       </button>
-      {open && (
+      {shouldRender && (
         <div
           ref={menuRef}
           role="menu"
+          inert={!open}
           className={clsx(
             'absolute right-0 z-50 min-w-[180px] rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
-            openUp ? 'bottom-full mb-1' : 'top-full mt-1',
+            openUp ? 'bottom-full mb-1 origin-bottom-right' : 'top-full mt-1 origin-top-right',
+            TRANSITION_MENU,
+            isOpen
+              ? 'opacity-100 translate-y-0 scale-100'
+              : openUp
+                ? 'opacity-0 translate-y-1 scale-[0.97]'
+                : 'opacity-0 -translate-y-1 scale-[0.97]',
+            !open && 'pointer-events-none',
           )}
+          style={overlayTransitionStyle(isOpen, 'menu')}
           onClick={(e) => e.stopPropagation()}
         >
           {items.map((item) => {

package/src/components/ui/SelectMenu.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 import { Check, ChevronDown, Search } from 'lucide-react'
 import { clsx } from 'clsx'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 export interface SelectMenuOption {
   value: string
@@ -29,6 +31,7 @@ export function SelectMenu({
   id?: string
 }) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const [query, setQuery] = useState('')
   const [highlightedIndex, setHighlightedIndex] = useState(0)
   const listboxId = useId()
@@ -62,17 +65,21 @@ export function SelectMenu({
     }
   }, [open])
 
+  // Reset once the list has actually left the DOM — clearing at logical close
+  // would re-filter the options mid-fade.
   useEffect(() => {
-    if (!open) setQuery('')
-  }, [open])
+    if (!shouldRender) setQuery('')
+  }, [shouldRender])
 
   useEffect(() => {
     if (!open || !query) return
     if (listRef.current) listRef.current.scrollTop = 0
   }, [open, query])
 
+  // The list mounts a commit after `open` (presence hook), so this waits for
+  // `shouldRender` too — on `open` alone listRef is still null.
   useEffect(() => {
-    if (!open) return
+    if (!open || !shouldRender) return
     if (!searchPlaceholder) {
       triggerRef.current?.focus()
       return
@@ -80,7 +87,7 @@ export function SelectMenu({
     listRef.current
       ?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]')
       ?.scrollIntoView({ block: 'nearest' })
-  }, [open, searchPlaceholder])
+  }, [open, shouldRender, searchPlaceholder])
 
   return (
     <div
@@ -139,12 +146,17 @@ export function SelectMenu({
         <span className="truncate">{selected?.label}</span>
         <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />
       </button>
-      {open && (
+      {shouldRender && (
         <div
+          inert={!open}
           className={clsx(
             'absolute top-full z-50 mt-1 min-w-full overflow-hidden rounded-md border border-theme-border bg-theme-surface shadow-theme-lg',
-            searchPlaceholder ? 'left-0 right-0' : 'right-0'
+            searchPlaceholder ? 'left-0 right-0 origin-top-left' : 'right-0 origin-top-right',
+            TRANSITION_MENU,
+            isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+            !open && 'pointer-events-none',
           )}
+          style={overlayTransitionStyle(isOpen, 'menu')}
         >
           {searchPlaceholder && (
             <div

package/src/components/ui/YamlEditor.tsx

@@ -7,7 +7,8 @@ import Editor, {
   type OnMount,
 } from '@monaco-editor/react'
 import type { editor } from 'monaco-editor'
-import { AlertCircle, AlertTriangle, ChevronDown, ChevronRight, Info } from 'lucide-react'
+import { AlertCircle, AlertTriangle, Info } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 import { parseAllDocuments, parseDocument } from 'yaml'
 import { isMac } from '../../utils/platform'
 import { splitYamlDocuments } from '../../utils/yaml'
@@ -228,6 +229,7 @@ export function YamlEditor({
   const [runtimeAttempt, setRuntimeAttempt] = useState(0)
   const [diagnostics, setDiagnostics] = useState<YamlDiagnostic[]>([])
   const [problemsOpen, setProblemsOpen] = useState(false)
+  const problemsDisclosure = useDisclosure(problemsOpen)
   const [schemaStatus, setSchemaStatus] = useState<SchemaStatus>(schemaLoader ? 'loading' : 'idle')
   const [schemaMessage, setSchemaMessage] = useState('')
   const [schemaUnavailable, setSchemaUnavailable] = useState<
@@ -613,16 +615,12 @@ export function YamlEditor({
       {showProblems && (
         <div className="shrink-0 border-t border-theme-border bg-theme-elevated/60">
           <button
+            {...problemsDisclosure.buttonProps}
             type="button"
             onClick={() => setProblemsOpen((open) => !open)}
             className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-theme-text-secondary hover:bg-theme-hover"
-            aria-expanded={problemsOpen}
           >
-            {problemsOpen ? (
-              <ChevronDown className="h-3.5 w-3.5" />
-            ) : (
-              <ChevronRight className="h-3.5 w-3.5" />
-            )}
+            <CollapseChevron open={problemsOpen} className="h-3.5 w-3.5" />
             <span className="font-medium text-theme-text-primary">Problems</span>
             <span>{problemSummary}</span>
             <span className="ml-auto flex min-w-0 items-center gap-3 text-theme-text-tertiary">
@@ -646,7 +644,7 @@ export function YamlEditor({
               )}
             </span>
           </button>
-          {problemsOpen && (
+          <Collapse open={problemsOpen} id={problemsDisclosure.panelId}>
             <div className="max-h-36 overflow-auto border-t border-theme-border py-1">
               {diagnostics.length === 0 && schemaUnavailable.length === 0 ? (
                 <div className="px-3 py-2 text-xs text-theme-text-tertiary">
@@ -699,7 +697,7 @@ export function YamlEditor({
                 )
               })}
             </div>
-          )}
+          </Collapse>
         </div>
       )}
     </div>