@skyhook-io/k8s-ui 1.14.5 → 1.14.7

package/src/components/timeline/TimelineList.tsx

@@ -7,13 +7,13 @@ import {
   CheckCircle,
   Clock,
   RefreshCw,
-  ChevronRight,
   Plus,
   Trash2,
   Shield,
   X,
 } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Collapse, CollapseChevron } from '../ui/Collapse'
 import { DiffViewer, DiffBadge } from './DiffViewer'
 import { TimelineToolbar } from './TimelineToolbar'
 import {
@@ -696,17 +696,20 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
               aria-label={expanded ? 'Collapse changes' : 'Expand changes'}
               className="shrink-0 rounded p-0.5 text-theme-text-disabled hover:bg-theme-elevated hover:text-theme-text-secondary"
             >
-              <ChevronRight className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-90')} />
+              <CollapseChevron open={expanded} inheritColor className="w-4 h-4" />
             </button>
           )}
         </div>
 
-        {/* Expanded details - only for items with diffs */}
-        {expanded && hasExpandableContent && item.diff && (
-          <div className="mt-3 pt-3 border-t-subtle">
-            <div className="text-xs text-theme-text-tertiary mb-2">Changes:</div>
-            <DiffViewer diff={item.diff} />
-          </div>
+        {/* Expanded details - only for items with diffs. A list holds many
+            cards, each diff is real work to render: mount on first open. */}
+        {hasExpandableContent && item.diff && (
+          <Collapse open={expanded} mountLazily>
+            <div className="mt-3 pt-3 border-t-subtle">
+              <div className="text-xs text-theme-text-tertiary mb-2">Changes:</div>
+              <DiffViewer diff={item.diff} />
+            </div>
+          </Collapse>
         )}
       </div>
     </div>
@@ -826,12 +829,12 @@ function AggregatedActivityCard({ first, last, count, reason, expanded, onToggle
             aria-label={expanded ? 'Collapse occurrences' : 'Expand occurrences'}
             className="shrink-0 rounded p-0.5 text-theme-text-disabled hover:bg-theme-elevated hover:text-theme-text-secondary"
           >
-            <ChevronRight className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-90')} />
+            <CollapseChevron open={expanded} inheritColor className="w-4 h-4" />
           </button>
         </div>
 
         {/* Expanded details */}
-        {expanded && (
+        <Collapse open={expanded}>
           <div className="mt-3 pt-3 border-t-subtle space-y-3">
             {/* First occurrence */}
             <div className="flex items-start gap-2">
@@ -865,7 +868,7 @@ function AggregatedActivityCard({ first, last, count, reason, expanded, onToggle
               </div>
             </div>
           </div>
-        )}
+        </Collapse>
       </div>
     </div>
   )

package/src/components/timeline/TimelineStrip.tsx

@@ -26,6 +26,8 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { clsx } from 'clsx'
 import { Calendar, ChevronDown, ChevronLeft, ChevronRight, Minus, Plus } from 'lucide-react'
 import { Tooltip } from '../ui/Tooltip'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import {
   barHeight,
   clampLensToSelection,
@@ -100,6 +102,7 @@ function DateTimeField({ label, valueMs, onChange, nowMs }: {
   nowMs: number
 }) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const rootRef = useRef<HTMLDivElement>(null)
   const value = new Date(valueMs)
   const [viewY, setViewY] = useState(() => value.getFullYear())
@@ -145,9 +148,16 @@ function DateTimeField({ label, valueMs, onChange, nowMs }: {
         {fieldStamp(valueMs)}
         <Calendar className="h-3 w-3 shrink-0 text-theme-text-tertiary" />
       </button>
-      {open && (
+      {shouldRender && (
         <div
-          className="absolute left-0 top-full z-[60] mt-1 w-[232px] rounded-lg border border-theme-border bg-theme-surface p-2.5 shadow-theme-lg"
+          inert={!open}
+          className={clsx(
+            'absolute left-0 top-full z-[60] mt-1 w-[232px] origin-top-left rounded-lg border border-theme-border bg-theme-surface p-2.5 shadow-theme-lg',
+            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')}
           role="dialog"
           aria-label={`Pick ${label.toLowerCase()} date and time`}
         >
@@ -294,6 +304,7 @@ export function TimelineStrip({
   const trackRef = useRef<HTMLDivElement>(null)
   const [width, setWidth] = useState(800)
   const [pickerOpen, setPickerOpen] = useState(false)
+  const { shouldRender: pickerRender, isOpen: pickerShown } = useAnimatedUnmount(pickerOpen, overlayExitMs('menu'))
   const [customFromMs, setCustomFromMs] = useState(0)
   const [customToMs, setCustomToMs] = useState(0)
 
@@ -528,11 +539,22 @@ export function TimelineStrip({
               <ChevronDown className="h-3 w-3 text-theme-text-tertiary" />
             </button>
           </Tooltip>
-          {pickerOpen && (
+          {pickerRender && (
             // NO overflow-hidden: the DateTimeField calendars pop past the
             // dialog's bottom edge and were getting clipped to a header sliver.
             // The footer rounds its own bottom corners instead.
-            <div className="absolute left-0 top-full z-50 mt-2 w-[460px] max-w-[92vw] rounded-xl border border-theme-border bg-theme-surface shadow-theme-lg" role="dialog" aria-label="Time range picker">
+            <div
+              inert={!pickerOpen}
+              className={clsx(
+                'absolute left-0 top-full z-50 mt-2 w-[460px] max-w-[92vw] origin-top-left rounded-xl border border-theme-border bg-theme-surface shadow-theme-lg',
+                TRANSITION_MENU,
+                pickerShown ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+                !pickerOpen && 'pointer-events-none',
+              )}
+              style={overlayTransitionStyle(pickerShown, 'menu')}
+              role="dialog"
+              aria-label="Time range picker"
+            >
               <p className="border-b border-theme-border/60 px-4 py-2.5 text-[11px] leading-relaxed text-theme-text-secondary">
                 How much history to load. The blue band zooms into a slice of it.
               </p>

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -43,6 +43,7 @@ import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../.
 import { DiffViewer } from './DiffViewer'
 import { getHealthBadgeColor, getEventTypeColor } from '../../utils/badge-colors'
 import { MiddleEllipsis } from '../ui/MiddleEllipsis'
+import { CollapseChevron } from '../ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { ResourceRefBadge } from '../ui/drawer-components'
 import { buildResourceHierarchy, extractPinnedLanes, removePinnedLanes, isProblematicEvent, laneTrackEvents, isChildVisibleInWindow, collidingLaneKeys, laneCollisionKey, type ResourceLane as BaseResourceLane, type TimelineGrouping, type PinnedLaneRef } from '../../utils/resource-hierarchy'
@@ -1644,10 +1645,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                     aria-label={isExpanded ? 'Collapse' : 'Expand'}
                     className="p-1 -m-0.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
                   >
-                    <ChevronRight className={clsx(
-                      'w-4 h-4 transition-transform',
-                      isExpanded && 'rotate-90'
-                    )} />
+                    <CollapseChevron open={isExpanded} inheritColor className="w-4 h-4" />
                   </button>
                 ) : compact ? null : (
                   <div className="w-4" />
@@ -2285,7 +2283,7 @@ function ChildLaneLabel({ kind, group, showGroupChip, kindTitle, name, labelWidt
           style={{ left: selfRailPx }}
           aria-label={expanded ? 'Collapse' : 'Expand'}
         >
-          <ChevronRight className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-90')} />
+          <CollapseChevron open={!!expanded} inheritColor className="w-4 h-4" />
         </button>
       )}
       {/* Single-line child row: kind chip · name (middle-ellipsis). Colored chips

package/src/components/timeline/TimelineToolbar.tsx

@@ -18,6 +18,8 @@ import {
 import { SearchBox } from '../ui/SearchBox'
 import { type ShortcutScope } from '../../hooks/useKeyboardShortcuts'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { pluralize } from '../../utils/pluralize'
 import type { TimelineEvent, TimeRange } from '../../types'
 import type { TimelineGrouping } from '../../utils/resource-hierarchy'
@@ -475,6 +477,7 @@ function SegmentedRadioGroup<T extends string>({
  */
 export function ViewMenu({ viewOptions }: { viewOptions: TimelineViewOptions }) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const rootRef = useRef<HTMLDivElement | null>(null)
   usePopoverDismiss(open, setOpen, rootRef)
 
@@ -497,11 +500,18 @@ export function ViewMenu({ viewOptions }: { viewOptions: TimelineViewOptions })
         <ChevronDown className="w-3.5 h-3.5 text-theme-text-tertiary" />
       </button>
 
-      {open && (
+      {shouldRender && (
         <div
           role="menu"
           aria-label="View options"
-          className="absolute right-0 top-full z-50 mt-1 min-w-[14rem] rounded-lg border border-theme-border bg-theme-elevated p-2 shadow-theme-lg"
+          inert={!open}
+          className={clsx(
+            'absolute right-0 top-full z-50 mt-1 min-w-[14rem] origin-top-right rounded-lg border border-theme-border bg-theme-elevated p-2 shadow-theme-lg',
+            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')}
         >
           <span className="block px-2 pb-1 text-[10px] font-bold uppercase tracking-[0.08em] text-theme-text-tertiary">Sort</span>
           <SegmentedRadioGroup
@@ -634,10 +644,11 @@ function usePopoverDismiss(
  */
 function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuProps) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const [search, setSearch] = useState('')
   const rootRef = useRef<HTMLDivElement | null>(null)
   const panelRef = useRef<HTMLDivElement | null>(null)
-  const [anchor, setAnchor] = useState<{ left: number; top: number; maxHeight: number } | null>(null)
+  const [anchor, setAnchor] = useState<{ left: number; top: number; maxHeight: number; flipUp: boolean } | null>(null)
   const activeCount = kindFilter.length
   const selected = useMemo(() => new Set(kindFilter), [kindFilter])
 
@@ -645,9 +656,11 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
   // clips absolutely-positioned children. Portal the popover to the body and pin
   // it to the button with fixed coords so it escapes the clip. Dismiss must treat
   // BOTH the chip and the portaled panel as "inside".
+  // The anchor is kept through the exit transition (clearing it at logical
+  // close would unmount the panel mid-fade) and re-placed on the next open.
   const PANEL_WIDTH = 256
   useLayoutEffect(() => {
-    if (!open) { setAnchor(null); return }
+    if (!open) return
     const place = () => {
       const r = rootRef.current?.getBoundingClientRect()
       if (!r) return
@@ -666,11 +679,13 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
       const top = flipUp
         ? Math.max(4, r.top - 4 - Math.min(panelH, maxHeight))
         : r.bottom + 4
-      setAnchor({ left, top, maxHeight })
+      setAnchor({ left, top, maxHeight, flipUp })
     }
     place()
     // Re-place after the panel mounts so the first open can measure its height and
-    // flip; the initial pass runs with panelH=0 (panel not yet in the DOM).
+    // flip; the initial pass runs with panelH=0 (panel not yet in the DOM). The
+    // presence hook mounts the panel a tick after `open`, hence `shouldRender` in
+    // the deps: the pass that runs once it is in the DOM does the real measurement.
     const raf = requestAnimationFrame(place)
     window.addEventListener('scroll', place, true)
     window.addEventListener('resize', place)
@@ -679,7 +694,7 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
       window.removeEventListener('scroll', place, true)
       window.removeEventListener('resize', place)
     }
-  }, [open])
+  }, [open, shouldRender])
 
   useEffect(() => {
     if (!open) return
@@ -731,11 +746,29 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
         <ChevronDown className="w-3.5 h-3.5 text-theme-text-tertiary" />
       </button>
 
-      {open && anchor && createPortal(
+      {shouldRender && anchor && createPortal(
         <div
           ref={panelRef}
-          style={{ position: 'fixed', left: anchor.left, top: anchor.top, width: PANEL_WIDTH, maxHeight: anchor.maxHeight }}
-          className="z-50 overflow-y-auto rounded-md border border-theme-border bg-theme-surface shadow-theme-lg"
+          inert={!open}
+          style={{
+            position: 'fixed',
+            left: anchor.left,
+            top: anchor.top,
+            width: PANEL_WIDTH,
+            maxHeight: anchor.maxHeight,
+            ...overlayTransitionStyle(isOpen, 'menu'),
+          }}
+          className={clsx(
+            'z-50 overflow-y-auto rounded-md border border-theme-border bg-theme-surface shadow-theme-lg',
+            anchor.flipUp ? 'origin-bottom-left' : 'origin-top-left',
+            TRANSITION_MENU,
+            isOpen
+              ? 'opacity-100 translate-y-0 scale-100'
+              : anchor.flipUp
+                ? 'opacity-0 translate-y-1 scale-[0.97]'
+                : 'opacity-0 -translate-y-1 scale-[0.97]',
+            !open && 'pointer-events-none',
+          )}
         >
           <MultiSelectPicker
             items={kindOptions}

package/src/components/topology/TopologyControls.tsx

@@ -3,6 +3,8 @@ import { FolderTree, ShieldCheck, ChevronDown, Check } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { TopologyMode, GroupingMode } from '../../types/core'
 import { Tooltip } from '../ui/Tooltip'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 interface TopologyControlsProps {
   viewMode: TopologyMode
@@ -37,6 +39,7 @@ export function TopologyControls({
   leadingSlot,
 }: TopologyControlsProps) {
   const [groupOpen, setGroupOpen] = useState(false)
+  const { shouldRender: groupRender, isOpen: groupShown } = useAnimatedUnmount(groupOpen, overlayExitMs('menu'))
   const groupRef = useRef<HTMLDivElement>(null)
   const groupTriggerRef = useRef<HTMLButtonElement>(null)
   const groupItemRefs = useRef<(HTMLButtonElement | null)[]>([])
@@ -53,20 +56,25 @@ export function TopologyControls({
     if (restoreFocus) groupTriggerRef.current?.focus()
   }, [])
 
-  // On open, move focus onto the active option so the menu is keyboard-navigable
-  // (parity with the native <select> this replaced). Click-outside closes it.
+  // On open, move focus onto the active option so the menu is keyboard-navigable.
+  // The items exist only once the presence hook has mounted the menu, so this
+  // waits for `groupRender`.
   useEffect(() => {
-    if (!groupOpen) return
+    if (!groupOpen || !groupRender) return
     const active = Math.max(0, groupOptions.findIndex((o) => o.value === groupingMode))
     groupItemRefs.current[active]?.focus()
+    // groupOptions/groupingMode are read once at open; re-running on their
+    // identity change would steal focus mid-interaction.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupOpen, groupRender])
+
+  useEffect(() => {
+    if (!groupOpen) return
     const onDown = (e: MouseEvent) => {
       if (groupRef.current && !groupRef.current.contains(e.target as Node)) setGroupOpen(false)
     }
     document.addEventListener('mousedown', onDown)
     return () => document.removeEventListener('mousedown', onDown)
-    // groupOptions/groupingMode are read once at open; re-running on their
-    // identity change would steal focus mid-interaction.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [groupOpen])
 
   const onGroupMenuKey = (e: KeyboardEvent<HTMLDivElement>) => {
@@ -123,8 +131,19 @@ export function TopologyControls({
           {currentGroupLabel}
           <ChevronDown className="w-3 h-3 text-theme-text-tertiary" />
         </button>
-        {groupOpen && (
-          <div role="menu" onKeyDown={onGroupMenuKey} className="absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl">
+        {groupRender && (
+          <div
+            role="menu"
+            onKeyDown={onGroupMenuKey}
+            inert={!groupOpen}
+            className={clsx(
+              'absolute right-0 top-full mt-1 z-50 min-w-[160px] origin-top-right rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
+              TRANSITION_MENU,
+              groupShown ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+              !groupOpen && 'pointer-events-none',
+            )}
+            style={overlayTransitionStyle(groupShown, 'menu')}
+          >
             {groupOptions.map((o, idx) => (
               <button
                 key={o.value}

package/src/components/topology/TopologyGraph.tsx

@@ -23,6 +23,7 @@ import { toCanvas } from 'html-to-image'
 
 import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Info, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { TopologyOverlayBar } from './TopologyOverlayBar'
 import { Input } from '../ui/Input'
 import { Tooltip } from '../ui/Tooltip'
@@ -315,6 +316,8 @@ export function TopologyGraph({
   const [fitViewCounter, setFitViewCounter] = useState(0)
   const [isExporting, setIsExporting] = useState(false)
   const [showLegend, setShowLegend] = useState(false)
+  const [warningsOpen, setWarningsOpen] = useState(false)
+  const warningsDisclosure = useDisclosure(warningsOpen)
   const prevStructureRef = useRef<string>('')
   const layoutVersionRef = useRef(0) // Used to invalidate stale layout results
   // Saved node positions for preservation across topology updates.
@@ -1064,10 +1067,16 @@ export function TopologyGraph({
                         ? 'Large retained run history is summarized to keep the graph readable.'
                         : 'Some resources failed to load. Data may be incomplete.'}
                   </span>
-                  <details className="mt-1">
-                    <summary className="text-xs text-amber-400/80 hover:text-amber-400">
-                      Show details ({topology.warnings.length})
-                    </summary>
+                  <button
+                    {...warningsDisclosure.buttonProps}
+                    type="button"
+                    onClick={() => setWarningsOpen((v) => !v)}
+                    className="mt-1 flex items-center gap-1 text-xs text-amber-400/80 hover:text-amber-400"
+                  >
+                    <CollapseChevron open={warningsOpen} inheritColor className="h-3 w-3" />
+                    Show details ({topology.warnings.length})
+                  </button>
+                  <Collapse open={warningsOpen} id={warningsDisclosure.panelId}>
                     <ul className="mt-1 text-xs text-theme-text-tertiary space-y-0.5">
                       {rbacWarnings.length > 0 && otherWarnings.length > 0 && (
                         <li className="text-amber-400/60 font-medium mt-1">RBAC restrictions:</li>
@@ -1088,7 +1097,7 @@ export function TopologyGraph({
                         <li key={`other-${i}`} className="font-mono">{w}</li>
                       ))}
                     </ul>
-                  </details>
+                  </Collapse>
                 </div>
               </div>
             </div>

package/src/components/trace/ReachabilityView.tsx

@@ -4,7 +4,8 @@ import { ReachActions, JustTestedNote, CopyableCommand, completedRequestMode, ty
 import { AlertBanner } from '../ui/drawer-components'
 import { PaneLoader } from '../ui/PaneLoader'
 import { ReachabilityGraph, MarkGlyph } from './ReachabilityGraph'
-import { Activity, ChevronRight } from 'lucide-react'
+import { Activity } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { buildGraph, noteHeadline } from './reachGraphModel'
 import { buildOrigins, defaultOrigin, probeCheckStats, type Origin, type OriginId } from './reachOrigins'
@@ -778,10 +779,10 @@ function untestableSummary(out: Origin[]): string {
 // ---------------------------------------------------------------- inspector
 
 /**
- * The panel's one disclosure, matching drawer-components' Section: a rotating
- * ChevronRight and a grid-template-rows transition. Hand-rolled "›"/"⌄" toggles
- * neither looked like the rest of Radar nor animated, so a section appearing was
- * an abrupt jump with no affordance saying it could be opened at all.
+ * The panel's one disclosure, on the shared Collapse primitive like
+ * drawer-components' Section. Hand-rolled "›"/"⌄" toggles neither looked like
+ * the rest of Radar nor animated, so a section appearing was an abrupt jump
+ * with no affordance saying it could be opened at all.
  */
 function Disclosure({
   open,
@@ -796,21 +797,22 @@ function Disclosure({
   count?: number
   children: React.ReactNode
 }) {
+  const { panelId, buttonProps } = useDisclosure(open)
   return (
     <div>
       <button
+        {...buttonProps}
         type="button"
         onClick={onToggle}
-        aria-expanded={open}
         className="flex w-full items-center gap-1.5 text-[9.5px] font-bold tracking-[0.07em] text-theme-text-tertiary transition-colors hover:text-theme-text-secondary"
       >
-        <ChevronRight className={`h-3 w-3 flex-none transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <CollapseChevron open={open} className="h-3 w-3 flex-none" />
         <span>{label}</span>
         {count !== undefined && <span className="flex-1 text-right font-normal tracking-normal">{count}</span>}
       </button>
-      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
-        <div className="overflow-hidden">{children}</div>
-      </div>
+      <Collapse open={open} id={panelId}>
+        {children}
+      </Collapse>
     </div>
   )
 }
@@ -981,6 +983,7 @@ function HopSection({
 }) {
   const [openOverride, setOpenOverride] = useState<boolean | null>(null)
   const open = openOverride ?? hop.expanded
+  const { panelId, buttonProps } = useDisclosure(open)
   const ref = useRef<HTMLDivElement>(null)
   // A click on the graph scrolls its hop into view instead of replacing the
   // panel - the gesture still means "I care about this one", it just no longer
@@ -1012,15 +1015,15 @@ function HopSection({
       className={`mt-2 rounded-md px-2 py-1 transition-colors duration-200 ${selected ? 'selection selection-ring' : ''}`}
     >
       <button
+        {...buttonProps}
         type="button"
         onClick={() => {
           setOpenOverride(!open)
           onSelect(hop.id)
         }}
-        aria-expanded={open}
         className="flex w-full items-center gap-1.5 text-left"
       >
-        <ChevronRight className={`h-3 w-3 flex-none text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <CollapseChevron open={open} className="h-3 w-3 flex-none" />
         <span className="text-[9px] font-bold tracking-[0.04em] text-theme-text-tertiary">{hop.kind}</span>
         <span className="min-w-0 flex-1 truncate font-mono text-[11.5px] font-semibold text-theme-text-primary">{hop.name}</span>
         <span className={`badge-sm whitespace-nowrap ${SEV_BADGE[hop.chipTone]}`}>{hop.chipText || HOP_STATE_NOTE[hop.state]}</span>
@@ -1032,8 +1035,7 @@ function HopSection({
             .join(' — ')}
         </div>
       )}
-      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
-        <div className="overflow-hidden">
+      <Collapse open={open} id={panelId}>
         <div className="pb-1 pl-[18px]">
           {hop.openRef?.name && (
             <button type="button" onClick={() => onOpen(hop.openRef!)} className="text-[11px] text-accent-text hover:underline">
@@ -1084,8 +1086,7 @@ function HopSection({
             <Caveats items={hop.notProve} />
           </div>
         </div>
-        </div>
-      </div>
+      </Collapse>
     </div>
   )
 }