fix(ui): prevent focus in closed details panels

Author: Bill Leoutsakos

packages/emcn/src/components/details-panel/details-panel.test.tsx

@@ -27,6 +27,7 @@ it('forwards resize events and retains content and refs while closed', () => {
   try {
     act(() => root.render(render(true)))
     const panel = ref.current!
+    expect(panel.hasAttribute('inert')).toBe(false)
     const input = panel.querySelector('input')!
     const handle = container.querySelector('[role="separator"]')!
     expect(handle.getAttribute('aria-label')).toBe('Resize details')
@@ -36,11 +37,13 @@ it('forwards resize events and retains content and refs while closed', () => {
     expect(resize.mock.calls[0][0].clientX).toBe(240)
 
     act(() => root.render(render(false)))
+    expect(panel.hasAttribute('inert')).toBe(true)
     expect(ref.current).toBe(panel)
     expect(panel.querySelector('input')).toBe(input)
     expect(input.value).toBe('Retained query')
     expect(container.querySelector('[role="separator"]')).toBeNull()
     act(() => root.render(render(true)))
+    expect(panel.hasAttribute('inert')).toBe(false)
     expect(panel.querySelector('input')).toBe(input)
     expect(container.querySelector('[role="separator"]')).not.toBeNull()
   } finally {

packages/emcn/src/components/details-panel/details-panel.tsx

@@ -2,7 +2,7 @@ import { type CSSProperties, forwardRef, type HTMLAttributes, type MouseEventHan
 import { cn } from '../../lib/cn'
 
 export interface DetailsPanelProps extends HTMLAttributes<HTMLDivElement> {
-  /** Slide the panel into view without unmounting its content. */
+  /** Slide the panel into view; closed content stays mounted but inert. */
   open: boolean
   /** Controlled width, including responsive CSS expressions such as clamp(). */
   width: NonNullable<CSSProperties['width']>
@@ -42,6 +42,7 @@ export const DetailsPanel = forwardRef<HTMLDivElement, DetailsPanelProps>(
         <div
           {...props}
           ref={ref}
+          inert={!open || props.inert}
           className={cn(
             'absolute top-0 right-0 bottom-0 z-[var(--z-dropdown)] overflow-hidden border-l bg-[var(--bg)] shadow-md transition-transform duration-200 ease-out',
             open ? 'translate-x-0' : 'translate-x-full',