用途：在 shadcn ui 中实现同一模态表面在桌面端显示为居中 Dialog、在移动端显示为底部抽屉 Drawer 的响应式组合模式，源自官方 drawer-dialog 示例。
主要能力：给出五条不变量（单一 open 状态、单一 useMediaQuery 选面、单一共享内容组件、不同时挂载 Dialog 与 Drawer、两端都提供标题与描述以满足无障碍）；提供 SSR 安全的 useMediaQuery（useSyncExternalStore 版本，签名 function useMediaQuery(query: string): boolean）；提供共享内容组件约定（接受 className 与回调）；提供 ResponsiveModal 编排器，转发 open、onOpenChange、title、description、children 与 breakpoint。
使用方式：先安装 shadcn add dialog 与 shadcn add drawer，将 useMediaQuery 写入 src/hooks/use-media-query.ts；用 if (isDesktop) 提前返回，桌面分支用 Dialog，移动分支用 Drawer，二者共享同一内容组件；多次使用后可抽取 ResponsiveModal。默认断点 (min-width: 768px)，可通过 breakpoint 属性覆盖。
适用场景：编辑资料、删除确认、筛选等始终为模态且与设备形态无关的表单；桌面专用管理界面宜仅用 Dialog，移动优先操作表宜仅用 Drawer。
限制：shadcn ui 不自带 useMediaQuery，需自行编写；该模式必须位于 "use client" 边界；不要用 CSS 同时渲染两者，否则会产生重复 ARIA 树与焦点陷阱冲突；Drawer 页脚按钮需放入 children。具体安装与代码细节以官方文档为准。