ui-dev

# UI Development Guide This project uses **vanilla TypeScript DOM manipulation** — no framework. All UI lives in `src/renderer/`. Follow the patterns and reuse the components documented below. ## Custom Dropdown / Select **Never use native `<select>`.** Always use the custom select component: ```typescript import { createCustomSelect } from './components/custom-select'; const select = createCustomSelect('my-select', [ { value: 'a', label: 'Option A' }, { value: 'b', label: 'Option B' }, { value: 'c', label: 'Disabled', disabled: true }, ], 'a'); // default value // select.getValue() — get current value // select.destroy() — cleanup ``` - **File**: `src/renderer/components/custom-select.ts` - **CSS classes**: `.custom-select`, `.custom-select-trigger`, `.custom-select-dropdown`, `.custom-select-item` - Supports keyboard navigation (Arrow keys, Enter, Escape, Tab) ## Modals Use `showModal()` for generic modals with form fields: ```typescript import { showModal, closeModal, setModalError } from './components/modal'; showModal('My Title', [ { id: 'name', label: 'Name', type: 'text', placeholder: 'Enter name' }, { id: 'option', label: 'Option', type: 'select', options: [...] }, { id: 'enabled', label: 'Enable feature', type: 'checkbox' }, ], (values) => { // values is Record<string, string> if (!values.name) { setModalError('name', 'Name is required'); return; } // ... handle confirm closeModal(); }); ``` - **File**: `src/renderer/componen...