refactor(console): merge Sheet into Dialog, adopt Web Animations API for exit, sentinel focus guards

[maxnoller]

Summary

• useAnimationsFinished replaces useExitAnimation: uses el.getAnimations() + Promise.all(a.finished) so multiple concurrent animations are all awaited; cancelled animations (which reject) still trigger unmount. Falls back to immediate call when no animations are running (jsdom, prefers-reduced-motion).
• FocusGuard sentinels replace the focusout / requestAnimationFrame pull-back in useFocusTrap: two invisible <span tabIndex={0}> elements are rendered before and after DialogContent's children; when Tab/Shift+Tab exits the container the sentinel fires onFocus and redirects focus back in. The hook retains initial focus setup and return-focus-on-close.
• Sheet merged into Dialog: Dialog gains isDrawer?: boolean; DialogContent gains side?: 'left' | 'right' | 'top' | 'bottom'. When isDrawer is true, DialogContent renders a <section> with slide-in/out via CSS transform class toggle (matching the old Sheet behaviour). Drawer CSS rules added to dialog/index.module.css. Re-export aliases (Drawer, DrawerContent, etc.) added at the bottom of dialog/index.tsx.
• Sidebar updated to use Dialog + DialogContent with isDrawer/side instead of Sheet/SheetContent.
• sheet/ directory deleted.
• Toast updated to use useAnimationsFinished (it also depended on the deleted useExitAnimation).

Test plan

• npx tsc --noEmit passes (verified — zero errors)
• Dialog open/close animations still play; exit animation waits for all running CSS animations to finish
• Drawer slides in/out correctly from all four sides
• Mobile sidebar opens and closes correctly; backdrop click, Escape, and Ctrl+B all work
• Tab/Shift+Tab focus stays trapped inside open dialogs and drawers
• Focus returns to the trigger element on close
• Toast exit animations still work; toasts unmount after animation completes

[maxnoller]

Code review

Found 2 issues:

1. Sidebar's DialogHeader now renders visibly in the mobile drawer. The old SheetHeader applied styles.srOnly (screen-reader-only) automatically; the migrated DialogHeader applies styles.header (display: grid; gap: 8px), so "Navigation" and "Sidebar navigation panel." will appear as a visible block at the top of the sidebar — a visual regression vs main.

hybridclaw/console/src/components/sidebar/index.tsx

Lines 164 to 171 in d5661cd

	}
	>
	<DialogHeader>
	<DialogTitle>Navigation</DialogTitle>
	<DialogDescription>Sidebar navigation panel.</DialogDescription>
	</DialogHeader>
	{children}
	</DialogContent>

2. The Drawer wrapper and DrawerClose/DrawerContent/DrawerDescription/DrawerHeader/DrawerTitle re-exports have zero callers anywhere in console/src — the only drawer consumer (Sidebar) imports from Dialog/DialogContent directly. AGENTS.md §3.2 YAGNI says "Do not add config keys, interfaces, or feature flags without a concrete caller."

hybridclaw/console/src/components/dialog/index.tsx

Lines 378 to 394 in d5661cd

	// ---------------------------------------------------------------------------
	// Drawer — Dialog with isDrawer=true, same API, different presentation.
	// ---------------------------------------------------------------------------
	export const Drawer = (
	props: Omit<Parameters<typeof Dialog>[0], 'isDrawer'> & {
	children: ReactNode;
	},
	) => <Dialog {...props} isDrawer />;
	export {
	DialogClose as DrawerClose,
	DialogContent as DrawerContent,
	DialogDescription as DrawerDescription,
	DialogHeader as DrawerHeader,
	DialogTitle as DrawerTitle,
	};

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}