You are a highly skilled AI assistant specializing in full-stack development, UI/UX design, and startup ideation. Your task is to generate a detailed, production-ready codebase for a single-page application (SPA) based on the provided concept and requirements. The application will be a macOS utility focused on unifying window corner rounding and edge styles across different applications to create a consistent visual experience.
**1. PROJECT OVERVIEW:**
* **Application Name:** EdgeAlign (or a similar concise, descriptive name).
* **Purpose:** To address the visual inconsistency of window corner rounding and edge styles across various applications on macOS. The user's frustration stems from the "ugly" and inconsistent roundness, particularly in newer macOS versions, and the hassle of disabling System Integrity Protection (SIP) to attempt manual fixes.
* **Problem Solved:** Eliminates visual clutter and jarring inconsistencies caused by differing UI elements in macOS applications, providing a clean, uniform, and aesthetically pleasing user interface without compromising system security.
* **Value Proposition:** Offers a secure, user-friendly, and effective solution for achieving visual harmony on macOS desktops, enhancing user experience and productivity for design-conscious individuals.
* **Target Audience:** macOS users, especially designers, developers, and users who prioritize aesthetic consistency and are bothered by visual discrepancies between applications. They are likely technically aware but prefer not to tamper with system security features like SIP.
**2. TECH STACK:**
* **Frontend Framework:** React (using Vite for a fast development environment).
* **Styling:** Tailwind CSS for rapid and utility-first styling.
* **State Management:** Zustand (lightweight and efficient for this scope).
* **UI Components:** Radix UI (for accessible and unstyled components) and custom Tailwind components.
* **Icons:** lucide-react for a comprehensive and clean icon set.
* **Deployment:** Vite build for static site generation.
* **Note:** While this is conceptualized as a SPA, the actual implementation would likely be a macOS native application using frameworks like Electron or Tauri to interact with system-level settings. For the purpose of this prompt, we will simulate the UI/UX and logic as if it were a web app for demonstration.
**3. CORE FEATURES (User Flows & Functionality):**
* **A. Profile Selection & Management:**
* **User Flow:** User lands on the main dashboard. They see a list of predefined visual profiles (e.g., 'Apple Default', 'Sharp Corners', 'Subtle Round', 'Minimalist'). User clicks on a profile. The application previews the effect or applies it immediately. User can also create, edit, or delete custom profiles.
* **Functionality:** Load predefined profile data. Allow selection and application of a profile. Provide an interface for creating/editing profiles with sliders and input fields for corner radius, edge thickness, and potentially border color.
* **B. Application-Specific Tuning:**
* **User Flow:** User navigates to an 'Applications' tab. They can see a list of detected or manually added applications. For each application, the user can override the global profile with specific settings or disable customization.
* **Functionality:** Maintain a list of applications and their associated customization settings. Allow users to add/remove applications from the list. Store per-application overrides.
* **C. Real-time Preview & System Integration (Simulated):**
* **User Flow:** As the user adjusts settings in a profile or for a specific application, a preview area dynamically updates to show how the windows/corners would look. In a real native app, this would trigger system-level changes; here, we simulate the visual effect.
* **Functionality:** A dedicated preview component demonstrating visual styles based on current settings. Simulate applying changes to example window mockups.
* **D. Security & System Integrity:**
* **User Flow:** A prominent section or tooltip explains that the app works by leveraging macOS's accessibility APIs or other non-intrusive methods, ensuring that SIP does not need to be disabled. A 'Learn More' link directs to documentation.
* **Functionality:** Display educational content about security and system integrity. Reassure users about the safety and non-invasive nature of the tool.
**4. UI/UX DESIGN:**
* **Layout:** Single-page application layout. A main navigation sidebar (or top bar) for switching between 'Profiles', 'Applications', 'Settings', and 'About'. The main content area dynamically changes based on the selected navigation item.
* **Color Palette:** Primarily a dark mode aesthetic (fitting for developer tools and macOS) with accent colors for interactive elements. Examples: Dark grays (`#1a1a1a`, `#2c2c2e`), subtle blues/purples (`#646cff`, `#535bf2`) for active states and buttons, light grays for text (`#e0e0e0`). Use Tailwind's default dark mode configuration.
* **Typography:** System fonts (`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`). Clear hierarchy using different font weights and sizes.
* **Responsive Design:** While targeting macOS, the UI should be clean and usable on various screen sizes. Focus on desktop layout first. Use Tailwind's responsive modifiers (e.g., `md:`, `lg:`) as needed for potential future adaptation or simulator use.
* **Key Components:** Navigation Sidebar, Profile Card, Application List Item, Slider Input, Color Picker (optional), Preview Window Mockup.
**5. DATA MODEL (State Structure & Mock Data):**
* **State Management (Zustand Store):**
```javascript
// Example Zustand store structure
import { create } from 'zustand';
interface Profile {
id: string;
name: string;
cornerRadius: number; // 0-50px range
edgeThickness: number; // 0-5px range
borderColor?: string; // hex color
isSystemDefault?: boolean; // For Apple Default
}
interface AppSetting {
appIdentifier: string; // e.g., 'com.apple.Safari'
appName: string;
overrideEnabled: boolean;
profileId: string | null; // null means use global default
customSettings?: Partial<Omit<Profile, 'id' | 'name' | 'isSystemDefault'>>; // Specific overrides
}
interface AppState {
profiles: Profile[];
selectedProfileId: string;
appSettings: AppSetting[];
// Actions to modify state
addProfile: (profile: Profile) => void;
updateProfile: (id: string, updates: Partial<Profile>) => void;
deleteProfile: (id: string) => void;
selectProfile: (id: string) => void;
addAppSetting: (setting: AppSetting) => void;
updateAppSetting: (appId: string, updates: Partial<AppSetting>) => void;
removeAppSetting: (appId: string) => void;
loadInitialData: () => void;
}
export const useAppStore = create<AppState>((set) => ({
profiles: [],
selectedProfileId: 'default',
appSettings: [],
// Initial data loading function - call this on app mount
loadInitialData: () => set({
profiles: [
{ id: 'default', name: 'Apple Default', cornerRadius: 12, edgeThickness: 0.5, isSystemDefault: true },
{ id: 'sharp', name: 'Sharp Corners', cornerRadius: 0, edgeThickness: 1, borderColor: '#333' },
{ id: 'subtle', name: 'Subtle Round', cornerRadius: 8, edgeThickness: 0.5, borderColor: '#555' },
],
selectedProfileId: 'default',
appSettings: [
{ appIdentifier: 'com.apple.Safari', appName: 'Safari', overrideEnabled: false, profileId: null },
{ appIdentifier: 'com.google.Chrome', appName: 'Google Chrome', overrideEnabled: true, profileId: 'sharp', customSettings: { cornerRadius: 4 } },
]
}),
// ... implement other actions using 'set' ...
addProfile: (profile) => set((state) => ({ profiles: [...state.profiles, profile] })),
updateProfile: (id, updates) => set((state) => ({ profiles: state.profiles.map(p => p.id === id ? { ...p, ...updates } : p) })),
deleteProfile: (id) => set((state) => ({ profiles: state.profiles.filter(p => p.id !== id) })),
selectProfile: (id) => set({ selectedProfileId: id }),
addAppSetting: (setting) => set((state) => ({ appSettings: [...state.appSettings, setting] })),
updateAppSetting: (appId, updates) => set((state) => ({ appSettings: state.appSettings.map(s => s.appIdentifier === appId ? { ...s, ...updates } : s) })),
removeAppSetting: (appId) => set((state) => ({ appSettings: state.appSettings.filter(s => s.appIdentifier !== appId) })),
}));
```
* **Mock Data Examples:**
* **Profile 1:** `{ id: 'default', name: 'Apple Default', cornerRadius: 12, edgeThickness: 0.5, isSystemDefault: true }`
* **Profile 2:** `{ id: 'sharp', name: 'Sharp Corners', cornerRadius: 0, edgeThickness: 1, borderColor: '#333333' }`
* **Profile 3:** `{ id: 'modern', name: 'Modern Minimal', cornerRadius: 8, edgeThickness: 0.5, borderColor: '#555555' }`
* **App Setting 1:** `{ appIdentifier: 'com.apple.TextEdit', appName: 'TextEdit', overrideEnabled: false, profileId: null }`
* **App Setting 2:** `{ appIdentifier: 'com.microsoft.VSCode', appName: 'Visual Studio Code', overrideEnabled: true, profileId: 'modern', customSettings: { cornerRadius: 6, edgeThickness: 0.7 } }`
* **App Setting 3:** `{ appIdentifier: 'com.google.Chrome', appName: 'Google Chrome', overrideEnabled: true, profileId: 'sharp' }`
**6. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component. Sets up routing (if needed, though likely not for SPA) and global layout. Initializes Zustand store with `loadInitialData`.
* **`Layout.jsx`:** Contains the overall page structure, including the sidebar/header and the main content area.
* **`Sidebar.jsx` / `Header.jsx`:** Navigation component. Renders links for 'Profiles', 'Applications', 'Settings', 'About'. Highlights the active section.
* **`ProfilesPage.jsx`:** Displays the list of available profiles and allows creation/management.
* **`ProfileList.jsx`:** Renders `ProfileCard` components.
* **`ProfileCard.jsx`:** Displays a single profile's summary. Handles selection and deletion.
* **`ProfileEditor.jsx`:** Form component for creating/editing profiles. Includes inputs for name, sliders for `cornerRadius` and `edgeThickness`, and potentially a color picker.
* **`ApplicationsPage.jsx`:** Manages application-specific settings.
* **`AppList.jsx`:** Renders `AppListItem` components.
* **`AppListItem.jsx`:** Displays an application's name and its current setting (e.g., 'Using Default', 'Custom: Sharp Corners'). Contains controls to enable/disable overrides or change the profile.
* **`AppOverrideForm.jsx`:** (Conditionally rendered) Allows setting custom `cornerRadius`, `edgeThickness`, etc., for a specific app.
* **`PreviewPane.jsx`:** Visual demonstration area. Renders mock windows that update based on the selected profile or app overrides.
* **`MockWindow.jsx`:** A component that simulates a window with adjustable corner radius and border styles.
* **`SettingsPage.jsx`:** General application settings (e.g., theme - light/dark, update frequency).
* **`AboutPage.jsx`:** Information about the application, version, links to documentation, and the security explanation.
* **`Button.jsx`:** Reusable custom button component using Tailwind.
* **`Slider.jsx`:** Custom slider component, potentially using a library or built with Tailwind/JS.
* **`Input.jsx`:** Reusable text input component.
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Subtle fade-in/fade-out transitions between different sections (e.g., Profiles to Applications page) using Framer Motion or simple CSS transitions.
* **Button Hovers:** Slight scale or background color change on button hover states.
* **Profile Selection:** Smooth visual feedback when a profile is selected, perhaps a subtle border highlight or background animation on the selected `ProfileCard`.
* **Slider Interaction:** Animated thumb movement and value display.
* **Loading States:** If fetching data (in a more complex version), display subtle loading spinners or skeletons. For this SPA, initial data load might have a brief loading indicator.
* **Toggle Switches:** Smooth animation for enabling/disabling overrides.
**8. EDGE CASES:**
* **No Profiles Created:** Display a helpful message encouraging the user to create their first profile.
* **No Applications Detected/Added:** Show guidance on how to add applications for tuning.
* **Error Handling:** Gracefully handle potential errors during data loading or saving (e.g., using try-catch blocks and displaying user-friendly error messages).
* **Validation:** Ensure numeric inputs for corner radius and edge thickness are within reasonable bounds (e.g., 0-50px for radius, 0-5px for thickness). Validate profile names for uniqueness.
* **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes for interactive elements (buttons, sliders, inputs). Keyboard navigation should be fully supported. Color contrast ratios should meet WCAG standards.
* **System Default Profile:** Ensure the 'Apple Default' profile cannot be deleted and clearly indicates it's the system's native setting.
**9. SAMPLE DATA:**
* **Profiles:**
* `{ id: 'default', name: 'Apple Default', cornerRadius: 12, edgeThickness: 0.5, isSystemDefault: true }`
* `{ id: 'sharp', name: 'Sharp Corners', cornerRadius: 0, edgeThickness: 1, borderColor: '#333333' }`
* `{ id: 'neo', name: 'Neo-Brutal', cornerRadius: 2, edgeThickness: 1.5, borderColor: '#000000' }`
* `{ id: 'rounded-lg', name: 'Large Round', cornerRadius: 20, edgeThickness: 0.5, borderColor: '#666666' }`
* **AppSettings:**
* `{ appIdentifier: 'com.apple.finder', appName: 'Finder', overrideEnabled: false, profileId: null }`
* `{ appIdentifier: 'com.apple.Maps', appName: 'Maps', overrideEnabled: true, profileId: 'rounded-lg' }`
* `{ appIdentifier: 'com.microsoft.Word', appName: 'Microsoft Word', overrideEnabled: true, profileId: 'neo', customSettings: { cornerRadius: 3, edgeThickness: 1.2, borderColor: '#d0d0d0' } }`
* `{ appIdentifier: 'org.videolan.vlc', appName: 'VLC Media Player', overrideEnabled: false, profileId: null }`
* `{ appIdentifier: 'com.getsharex.Sharex', appName: 'ShareX', overrideEnabled: true, profileId: 'sharp' }`
**10. DEPLOYMENT NOTES:**
* **Build Command:** `npm run build` (or `yarn build` if using Yarn).
* **Environment Variables:** Primarily for API keys if integrations were needed (not required for this concept). Use `.env` file for development.
* **Performance Optimizations:** Vite provides excellent defaults. Code splitting (if the app grows), lazy loading components, and optimizing image assets (if any) are good practices. Ensure efficient state updates with Zustand to prevent unnecessary re-renders.
* **Native Packaging:** For a real macOS app, use Electron or Tauri build tools to package the web application into a distributable `.app` bundle. This involves configuring build targets and potentially writing native bridge code for system interactions.