# Requirements: Ready2Blob **Defined:** 2026-03-31 **Core Value:** An IT pro can go from zero to a deployable rclone setup in minutes — without needing to know rclone's config syntax or PowerShell deployment conventions. ## v1.2 Requirements ### Theme - [x] **THEME-01**: App uses a consistent MD3 color token system (CSS custom properties) that all components reference instead of hardcoded Tailwind color classes - [x] **THEME-02**: User can toggle between System, Light, and Dark themes, with choice persisted across sessions and no flash of unstyled content on load ### Components - [x] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content - [x] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary - [x] **COMP-03**: Backend selection cards and output blocks use MD3 elevation with tonal surface tint, consistent padding, and shape tokens - [x] **COMP-04**: Step indicator displays as numbered circles connected by lines, with completed steps showing a checkmark, current step highlighted, and future steps muted ### Content & Clarity - [x] **UX-01**: First-time visitor sees an intro section explaining what Ready2Blob does, with a clear call-to-action to start the wizard - [x] **UX-02**: Remote name field includes a placeholder example, help text explaining what it is, and a visual preview showing how it appears in the generated `[remote-name]` config - [x] **UX-03**: Each wizard step has a 1-2 sentence description below the heading explaining what the user is doing and why - [x] **UX-04**: All backend credential fields have contextual help text explaining what to enter and where to find it ### Polish - [x] **POLISH-01**: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch - [x] **POLISH-02**: All interactive elements have visible MD3 focus indicators (3px outline) using `focus-visible` for keyboard navigation - [x] **POLISH-03**: Step transitions use subtle fade/slide animation that respects `prefers-reduced-motion` - [x] **POLISH-04**: On validation failure, the view auto-scrolls to the first errored field ### Tech Debt - [x] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt) ### Dark Mode Visibility - [x] **DARK-01**: All wizard step h2 headings are visible (readable text with proper contrast) in dark mode - [x] **DARK-02**: DeploymentStep native form controls (labels, legends, checkboxes, radios) are visible and styled with semantic tokens in dark mode - [x] **DARK-03**: FieldRenderer select element has proper background and text color in dark mode ## v1.3 Requirements ### Remote Backend Expansion - [x] **REMOTE-01**: BACKEND_REGISTRY contains all 18 backends (7 existing + 11 new) with correct rclone field definitions, displayName, description, and category - [x] **REMOTE-02**: BackendType is derived from registry keys (`keyof typeof BACKEND_REGISTRY`) instead of an explicit union literal, eliminating a touch-point when adding backends - [x] **REMOTE-03**: BackendSelectionStep displays backends grouped by category (Cloud Object Storage, Cloud Drives, Protocol-based) with instant search filtering and inline SVG icons - [x] **REMOTE-04**: OAuth-token backends (Google Drive, Dropbox, Box, pCloud, OneDrive) display a collapsible OAuthInstructions component with backend-specific `rclone authorize` command - [ ] **REMOTE-05**: RemoteConfigStep renders the correct form fields for every backend, including GdriveAuthToggle for Google Drive's dual-auth (OAuth token vs service account) - [x] **REMOTE-06**: buildRcloneConf produces valid rclone.conf output with correct type strings for all 18 backends ## Future Requirements - Accent color presets (5-8 curated themes) — deferred from v1.2 scoping - Code block syntax highlighting in ReviewStep output blocks - Upgraded tooltip popovers with Floating UI positioning - Custom styled select/dropdown replacing native `