🧩 Frontend Components

ModalBase: ALL modals extend ModalBase.svelte with configurable z-index
Svelte 5 Runes: Use $state , $derived , $effect , $props
Event handling: Use onclick instead of on:click (Svelte 5 syntax)
Styling: Tailwind CSS utilities + dark mode with dark: prefix
Accessibility: Keyboard navigation, ARIA labels, focus management
i18n: All user-facing text via $t('key') translation function

This section documents the reusable UI components in LibreFolio, organized by functional area.

📚 Component Categories

The library is split into two architectural layers: Core UI (generic atoms and molecules) and Features (domain-specific components).

Component	Details
Atoms & Modals	`ModalBase`, `ConfirmModal`, `Tooltip`, `ToastContainer`, `DateRangePicker`, `DataEditor`, `Button`, etc. Generic building blocks.
DataTable	Advanced data grid with sorting, filtering, and column management.
File Upload & Media	`FileUploader`, `ImageCropper`, `ImageEditModal`, `AssetPickerModal`, `LazyImage`.
Select & Dropdowns	`BaseDropdown`, `SimpleSelect`, `SearchSelect` with keyboard navigation.

Component	Details
Transaction Form	Complex modal for creating/editing transactions with reactive auto-calculation and live WAC preview.
Brokers	`BrokerCard`, `BrokerForm`, `BrokerModal`, `CashBalanceCard`, and Broker Sharing.
Settings	`SettingsLayout`, `PreferencesTab`, `GlobalSettingsTab`.
Authentication	`LoginCard`, `RegisterCard`, `ForgotPasswordCard`.
Live Ticker	Real-time asset price badges with polling and dynamic colors.