@skyhook-io/k8s-ui 1.14.6 → 1.14.8

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>

package/src/components/ui/drawer-components.tsx

@@ -1,10 +1,11 @@
 import { createContext, useContext, useState } from 'react'
-import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
+import { Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { formatAge, formatDuration, formatResources } from '../resources/resource-utils'
 import { getEffectiveResources } from '../../utils/extended-resources'
 import { Tooltip } from './Tooltip'
 import { getKindColorClass } from '../ui/Badge'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 
 // ============================================================================
 // UI COMPONENTS
@@ -86,26 +87,22 @@ interface SectionProps {
 
 export function Section({ title, icon: Icon, children, defaultExpanded = true, contentClassName }: SectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   return (
     <div className="border-b-subtle pb-4 last:border-0">
       <button
+        {...buttonProps}
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
       >
-        <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
+        <CollapseChevron open={expanded} className="w-4 h-4" />
         {Icon && <Icon className="w-4 h-4 text-theme-text-secondary" />}
         <span className="text-sm font-medium text-theme-text-secondary">{title}</span>
       </button>
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
-      >
-        {/* `relative` is load-bearing — see the note in ui/Collapse.tsx. */}
-        <div className="relative overflow-hidden">
-          <div className={contentClassName ?? 'pl-6'}>{children}</div>
-        </div>
-      </div>
+      <Collapse open={expanded} id={panelId}>
+        <div className={contentClassName ?? 'pl-6'}>{children}</div>
+      </Collapse>
     </div>
   )
 }
@@ -118,25 +115,21 @@ interface ExpandableSectionProps {
 
 export function ExpandableSection({ title, children, defaultExpanded = true }: ExpandableSectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   return (
     <div>
       <button
+        {...buttonProps}
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 text-sm text-theme-text-secondary hover:text-theme-text-primary transition-colors mb-1"
       >
-        <ChevronRight className={clsx('w-3.5 h-3.5 transition-transform duration-200', expanded && 'rotate-90')} />
+        <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
         {title}
       </button>
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
-      >
-        {/* `relative` is load-bearing — see the note in ui/Collapse.tsx. */}
-        <div className="relative overflow-hidden">
-          <div className="ml-5">{children}</div>
-        </div>
-      </div>
+      <Collapse open={expanded} id={panelId}>
+        <div className="ml-5">{children}</div>
+      </Collapse>
     </div>
   )
 }

package/src/components/ui/index.ts

@@ -26,7 +26,8 @@ export { ConfirmDialog } from './ConfirmDialog'
 export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'
 export * from './drawer-components'
-export { Collapse, CollapseChevron } from './Collapse'
+export { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from './Collapse'
+export { Disclosure } from './Disclosure'
 export { ResourceBar } from './ResourceBar'
 export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { InClusterConsentDialog } from './InClusterConsentDialog'
@@ -37,31 +38,39 @@ export { YamlEditor, YamlDiffEditor } from './YamlEditor'
 // pulling monaco-editor into the main bundle. Anything that mounts a bare
 // `Editor` must await this first, or @monaco-editor/react reaches for its CDN.
 export const ensureMonacoRuntime = () =>
-  import('./monacoRuntime').then(({ ensureMonaco }) => ensureMonaco())
+  import("./monacoRuntime").then(({ ensureMonaco }) => ensureMonaco());
 export type {
   YamlDiagnostic,
   YamlDocumentIdentity,
   YamlEditorProps,
   YamlSchemaLoader,
   YamlSchemaLoadResult,
-} from './YamlEditor'
-export { YamlReview } from './YamlReview'
-export type { YamlPreviewResult, YamlReviewProps } from './YamlReview'
-export { RowActionMenu } from './RowActionMenu'
-export type { RowActionItem } from './RowActionMenu'
+} from "./YamlEditor";
+export { YamlReview } from "./YamlReview";
+export type { YamlPreviewResult, YamlReviewProps } from "./YamlReview";
+export { RowActionMenu } from "./RowActionMenu";
+export type { RowActionItem } from "./RowActionMenu";
 
-export { PageHeader } from './PageHeader'
-export { SummaryTile } from './SummaryTile'
-export type { SummaryTone } from './SummaryTile'
-export { Facet, FacetSection, FacetButton } from './Facet'
-export type { FacetTone } from './Facet'
-export { SortableTh, TH_CLASS } from './SortableTh'
-export type { SortDir } from './SortableTh'
-export { DistributionBar, DistributionLegendChip } from './DistributionBar'
-export type { DistributionSegment } from './DistributionBar'
-export { SearchPillInput } from './SearchPillInput'
-export type { SearchModifier, SearchPillInputProps } from './SearchPillInput'
-export { CardSection, CardBody, TerminalBlock, renderProse, NEUTRAL_CHIP_CLASS, KIND_CHIP_CLASS } from './CardSection'
-export type { CardSectionTone } from './CardSection'
-export { MultiSelectPicker } from './MultiSelectPicker'
-export type { MultiSelectPickerProps } from './MultiSelectPicker'
+export { PageHeader } from "./PageHeader";
+export { SummaryTile } from "./SummaryTile";
+export type { SummaryTone } from "./SummaryTile";
+export { Facet, FacetSection, FacetButton } from "./Facet";
+export type { FacetTone } from "./Facet";
+export { SortableTh, TH_CLASS } from "./SortableTh";
+export type { SortDir } from "./SortableTh";
+export { DistributionBar, DistributionLegendChip } from "./DistributionBar";
+export type { DistributionSegment } from "./DistributionBar";
+export { SearchPillInput } from "./SearchPillInput";
+export type { SearchModifier, SearchPillInputProps } from "./SearchPillInput";
+export {
+  CardSection,
+  CardBody,
+  TerminalBlock,
+  TerminalBlockLabel,
+  renderProse,
+  NEUTRAL_CHIP_CLASS,
+  KIND_CHIP_CLASS,
+} from "./CardSection";
+export type { CardSectionTone } from "./CardSection";
+export { MultiSelectPicker } from "./MultiSelectPicker";
+export type { MultiSelectPickerProps } from "./MultiSelectPicker";

package/src/components/workload/WorkloadView.tsx

@@ -7,6 +7,7 @@ import { FetchResult } from '../ui/FetchResult'
 import { PaneLoader } from '../ui/PaneLoader'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
+import { Collapse } from '../ui/Collapse'
 import {
   ArrowLeft,
   ArrowRight,
@@ -2949,20 +2950,15 @@ function PodListFrame({
         {children}
       </div>
       {hasOverflow && (
-        <div
-          className={clsx(
-            'grid transition-[grid-template-rows,opacity] duration-200',
-            expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
-          )}
-          style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}
-          aria-hidden={!expanded || undefined}
-        >
-          <div className={clsx('min-h-0 overflow-hidden', expanded && 'max-h-[26rem] overflow-y-auto pr-1')} inert={!expanded || undefined}>
+        <Collapse open={expanded}>
+          {/* Long overflow lists scroll inside a capped box once open; the
+              cap comes off while closed so the collapse measures to zero. */}
+          <div className={clsx(expanded && 'max-h-[26rem] overflow-y-auto pr-1')}>
             <div className="space-y-2">
               {overflow}
             </div>
           </div>
-        </div>
+        </Collapse>
       )}
       {toggle}
     </div>

package/src/hooks/useAnimatedUnmount.ts

@@ -1,10 +1,15 @@
 import { useState, useEffect, useRef } from 'react'
-import { DURATION_NORMAL } from '../utils/animation'
+import { DURATION_NORMAL, prefersReducedMotion } from '../utils/animation'
 
 /**
  * Delays React unmount until exit animation completes.
  * - `shouldRender`: whether the component should be in the DOM
  * - `isOpen`: drives CSS transition classes (false → closed state, true → open state)
+ *
+ * Pass the EXIT duration (overlayExitMs('dialog') etc.) — that is how long the
+ * closed state stays mounted. Under reduced motion the app stylesheet zeroes the
+ * transition, so the hook disposes at logical close instead of holding an
+ * invisible overlay (and its focus / scroll lock) for the exit window.
  */
 export function useAnimatedUnmount(isVisible: boolean, duration = DURATION_NORMAL) {
   const [shouldRender, setShouldRender] = useState(isVisible)
@@ -21,8 +26,21 @@ export function useAnimatedUnmount(isVisible: boolean, duration = DURATION_NORMA
       return () => cancelAnimationFrame(rafRef.current)
     } else if (shouldRender) {
       setIsOpen(false)
-      const t = setTimeout(() => setShouldRender(false), duration)
-      return () => clearTimeout(t)
+      if (prefersReducedMotion()) {
+        setShouldRender(false)
+        return
+      }
+      // Start the disposal clock only once the closed state has painted (same
+      // double rAF as the open path). A heavy overlay can take a slow frame to
+      // commit its closed classes; a timer started at logical close would then
+      // unmount it before the exit transition has had its full duration.
+      let t = 0
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = requestAnimationFrame(() => {
+          t = window.setTimeout(() => setShouldRender(false), duration)
+        })
+      })
+      return () => { cancelAnimationFrame(rafRef.current); clearTimeout(t) }
     }
   }, [isVisible, duration]) // eslint-disable-line react-hooks/exhaustive-deps — shouldRender intentionally omitted to avoid re-triggering cleanup
 

package/src/theme/components.css

@@ -142,25 +142,6 @@
     padding: 0.75rem;
   }
 
-  /* ── ISSUE ROW DETAILS ── */
-
-  .issue-details-motion {
-    display: grid;
-    grid-template-rows: 0fr;
-    overflow: hidden;
-    transition: grid-template-rows 200ms ease-out;
-  }
-
-  .issue-details-motion-open {
-    grid-template-rows: 1fr;
-  }
-
-  @starting-style {
-    .issue-details-motion-open {
-      grid-template-rows: 0fr;
-    }
-  }
-
   /* ── SUBTLE BORDERS ── */
 
   .table-divide-subtle > * + * {

package/src/utils/animation.ts

@@ -1,27 +1,57 @@
 /**
  * Central animation presets for consistent motion across the UI.
  *
- * All animations use GPU-composited properties only (translate, scale, opacity)
- * to guarantee 60fps. The iOS-like spring easing gives a fast-in, gentle-out feel.
+ * One curve, a handful of durations, and class fragments that apply them.
+ * Every surface that opens, closes, expands or collapses takes its timing
+ * from here — the hub (radar-hub-web) re-exports this module so Radar Cloud
+ * chrome and the embedded Radar views move alike.
+ *
+ * Property choice: geometry that has to move (grid-template-rows on a
+ * disclosure, width on a drawer) is animated directly; everything else is
+ * transform + opacity so it stays GPU-composited.
  */
 
 // -- Easing ------------------------------------------------------------------
 
+/** The one UI curve. iOS-style decelerate: fast out of the gate, gentle
+ *  settle. Used for disclosures, menus, dialogs, sheets and drawers alike so
+ *  a click reads as the cause of the motion and the content is legible early.
+ *  Chosen over Material's standard curve in a side-by-side on real content. */
+export const CSS_EASE = 'cubic-bezier(0.32, 0.72, 0, 1)'
+/** Alias with the intent in the name; prefer it in new code. */
+export const EASE_UI = CSS_EASE
+
 // Tailwind-safe easing (no spaces — Tailwind splits class strings on whitespace)
 const TW_EASE = 'ease-[cubic-bezier(0.32,0.72,0,1)]'
-
-/** Raw CSS easing for inline transition strings */
-export const CSS_EASE = 'cubic-bezier(0.32, 0.72, 0, 1)'
+/** The same curve as a Tailwind class fragment, for class-string composition. */
+export const TW_EASE_UI = TW_EASE
 
 // -- Durations (ms) ----------------------------------------------------------
 
-/** Standard UI transitions: overlays, panels, toasts */
+/** Standard UI transitions: drawers, toasts. */
 export const DURATION_NORMAL = 300
-/** Dock height, subtle layout shifts */
+/** Dock height, subtle layout shifts. Deliberately fast: the dock is direct
+ *  manipulation the user performs dozens of times a day. */
 export const DURATION_DOCK = 150
 /** Toast exit animation */
 export const DURATION_TOAST_EXIT = 200
 
+/** In-flow disclosure (Collapse / drawer sections / row expanders): panel
+ *  and caret share this, open and close alike. Symmetric on purpose — an
+ *  interrupted toggle reverses cleanly when both directions run one clock. */
+export const DURATION_DISCLOSURE = 300
+
+/** Menus, popovers, listboxes. Exits are shorter than entrances: a dismissal
+ *  should feel immediate. */
+export const DURATION_MENU_IN = 140
+export const DURATION_MENU_OUT = 100
+/** Modal dialogs and command palettes. */
+export const DURATION_DIALOG_IN = 220
+export const DURATION_DIALOG_OUT = 160
+/** Bottom sheets: more travel, a little more time. */
+export const DURATION_SHEET_IN = 280
+export const DURATION_SHEET_OUT = 220
+
 /** Drawer ↔ fullscreen expand/collapse morph. Longer than DURATION_NORMAL so a
  *  large width change advances in small per-frame steps (reads as fluid, not
  *  abrupt). Drives the frame width, the content crossfade, and the JS window
@@ -32,19 +62,69 @@ export const DURATION_DRAWER_MORPH = 260
  *  crossfade fixed the reflow that originally needed the gentle start. */
 export const EASE_DRAWER_MORPH = 'cubic-bezier(0.2, 0.8, 0.2, 1)'
 
+// -- Reduced motion -----------------------------------------------------------
+
+/** True when the OS asks for reduced motion. Presence hooks use it to dispose
+ *  overlays at logical close instead of after an exit transition that the app
+ *  stylesheet has already zeroed. SSR- and test-safe. */
+export function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
 // -- Tailwind class presets ---------------------------------------------------
 // Reusable class fragments — import and spread into clsx() calls.
 
+/** Disclosure panel: grid-template-rows 0fr ↔ 1fr on the wrapper. Pair with
+ *  TRANSITION_CHEVRON on the caret so both run one clock. */
+export const TRANSITION_DISCLOSURE =
+  `transition-[grid-template-rows] duration-300 ${TW_EASE} motion-reduce:transition-none`
+
+/** Disclosure caret (rotate). Same duration and curve as the panel it opens. */
+export const TRANSITION_CHEVRON =
+  `transition-transform duration-300 ${TW_EASE} motion-reduce:transition-none`
+
 /** Drawer slide from right — use with translate-x-0/translate-x-full + opacity.
  *  Also handles expand/collapse (width) so a single transition covers both. */
 export const TRANSITION_DRAWER =
-  `transition-[translate,opacity,width] duration-300 ${TW_EASE} will-change-[transform,width]`
+  `transition-[translate,opacity,width] duration-300 ${TW_EASE} will-change-[transform,width] motion-reduce:transition-none`
 
-
-/** Overlay backdrop fade */
+/** Overlay backdrop fade. Duration comes from the presence state (see
+ *  overlayTransitionStyle) so the exit can be shorter than the entrance. */
 export const TRANSITION_BACKDROP =
-  'transition-opacity duration-200'
+  `transition-opacity ${TW_EASE} motion-reduce:transition-none`
 
-/** Overlay panel scale + fade — use with scale-100/scale-[0.97] + opacity */
+/** Overlay panel scale + fade — use with scale-100/scale-[0.97] + opacity.
+ *  Duration comes from overlayTransitionStyle, not from this fragment. */
 export const TRANSITION_PANEL =
-  `transition-[translate,scale,opacity] duration-300 ${TW_EASE}`
+  `transition-[translate,scale,opacity] ${TW_EASE} motion-reduce:transition-none`
+
+/** Menu / popover: translate + scale + opacity from its anchor corner. Pair
+ *  with a transform-origin utility so it grows from the trigger. */
+export const TRANSITION_MENU =
+  `transition-[translate,scale,opacity] ${TW_EASE} motion-reduce:transition-none`
+
+export type OverlayKind = 'menu' | 'dialog' | 'sheet' | 'drawer'
+
+const OVERLAY_DURATIONS: Record<OverlayKind, { in: number; out: number }> = {
+  menu: { in: DURATION_MENU_IN, out: DURATION_MENU_OUT },
+  dialog: { in: DURATION_DIALOG_IN, out: DURATION_DIALOG_OUT },
+  sheet: { in: DURATION_SHEET_IN, out: DURATION_SHEET_OUT },
+  // Side drawers keep their symmetric slide (TRANSITION_DRAWER); this entry
+  // gives their backdrop the same clock.
+  drawer: { in: DURATION_NORMAL, out: DURATION_NORMAL },
+}
+
+/** Exit duration for an overlay kind — what useAnimatedUnmount should wait. */
+export function overlayExitMs(kind: OverlayKind): number {
+  return OVERLAY_DURATIONS[kind].out
+}
+
+/** Inline style that gives an overlay its entrance or exit duration. Apply to
+ *  the element that carries TRANSITION_PANEL / TRANSITION_MENU / TRANSITION_BACKDROP;
+ *  the class fragments deliberately carry no duration so the two directions
+ *  can differ. */
+export function overlayTransitionStyle(isOpen: boolean, kind: OverlayKind): { transitionDuration: string } {
+  const d = OVERLAY_DURATIONS[kind]
+  return { transitionDuration: `${isOpen ? d.in : d.out}ms` }
+}