用途：规范在 latch-core 项目 Electron 渲染进程中新增 React 组件的写法。渲染进程使用 React 18 与 Zustand，组件位于 src/renderer/components/，不使用 barrel 文件，需按文件路径直接导入。
组件类型：Panel 位于 components/panels/，根类 .rail-panel，用于侧栏面板；Modal 位于 components/modals/，根类 .modal-backdrop 与 .modal，用于覆盖层对话框；View 位于 components/，根类 .view-container，用于全宽主视图。
新增面板流程：创建组件文件，用 useAppStore 读取状态，通过 window.latch?.method?.() 调用 IPC；在 Rail.tsx 的 TABS 数组注册 id 与 label，并添加条件渲染；在 src/types/index.ts 的 RailPanel 类型中加入该 id。
新增模态框流程：遵循 <X>Open、<X>Data、open<X>()、close<X>() 的状态命名模式，在 useAppStore.ts 中添加状态与动作；支持 Escape 关闭、Cmd/Ctrl+Enter 保存、点击遮罩关闭；保存时调用 window.latch?.widgetSave?.()。读取多个状态值可解构，单一值建议用粒度选择器避免多余重渲染。
CSS 约定：样式集中在 src/renderer/styles.css，使用 CSS 自定义属性，如 --bg-card、--bg-card-hover、--border-subtle、--border-active、--text-primary、--text-secondary、--success、--warning、--error；状态修饰使用 .is-active、.is-primary、.is-danger 等 .is-* 类。
限制与坑点：项目移除了 StrictMode 以防 PTY 监听器重复注册，不应加回；xterm.js 终端面板保持挂载，用 display 切换而非卸载；始终用可选链保护 IPC 调用；无 barrel 文件。
待办清单：创建组件文件、按需在 useAppStore.ts 添加状态与动作、在父组件注册、为新侧栏面板补充 RailPanel 类型、在 styles.css 添加样式、直接导入。以上为项目内规范，未提供其他版本兼容、收费或平台信息。