superdesign

.superdesign/README.md

@@ -0,0 +1,138 @@
+# SuperDesign Context Files for Fuel Price Application
+
+This directory contains comprehensive design system documentation for the Fuel Price (Laravel Starter Kit) application.
+
+## Generated Files
+
+### 1. `init/components.md` (274 lines)
+**Shared UI Primitives & Components**
+
+Lists all reusable Blade components (7 total) with full source code:
+- x-action-message: Temporary status messages
+- x-app-logo: Branding component
+- x-app-logo-icon: SVG logo icon
+- x-auth-header: Centered auth page header
+- x-auth-session-status: Session status display
+- x-desktop-user-menu: User profile dropdown
+- x-placeholder-pattern: Loading state pattern
+
+Also documents Flux v2 components used throughout the application.
+
+### 2. `init/layouts.md` (347 lines)
+**Complete Layout Hierarchy**
+
+Full content of 7 layout files:
+- layouts/app.blade.php: Main app wrapper
+- layouts/app/sidebar.blade.php: Authenticated layout with header/sidebar
+- layouts/auth.blade.php: Auth wrapper
+- layouts/auth/simple.blade.php: Centered auth layout
+- layouts/auth/card.blade.php: Card-based auth layout
+- layouts/auth/split.blade.php: Split-screen auth layout
+- partials/head.blade.php: Shared head section
+
+Includes usage patterns and color scheme documentation.
+
+### 3. `init/routes.md` (120 lines)
+**Route Configuration & Summary**
+
+Complete files:
+- routes/web.php: Public and authenticated routes
+- routes/settings.php: Settings page routes
+
+Plus detailed route summary table covering:
+- 19 total routes (web + Fortify)
+- Route grouping by protection level
+- Livewire component routes mapping
+
+### 4. `init/theme.md` (298 lines)
+**Design Tokens & Configuration**
+
+Complete content:
+- resources/css/app.css: Tailwind imports and custom theme
+- Color palette: Zinc neutral scale + semantic colors
+- Typography: Instrument Sans font configuration
+- Spacing system: 4px base unit scale
+- Dark mode implementation
+- Vite build configuration
+- Flux theme setup
+
+### 5. `init/pages.md` (291 lines)
+**Page Dependency Trees**
+
+Full-page component documentation with dependency trees:
+1. StationSearch Livewire component (public)
+2. Dashboard
+3. Welcome/Home page
+4. Settings pages (Profile, Security, Appearance)
+5. Authentication pages (Login, Register, Password Reset, Email Verification, 2FA)
+
+Includes data flow documentation and page transition patterns.
+
+### 6. `init/extractable-components.md` (386 lines)
+**Reusable Component Analysis**
+
+16 components identified by category:
+- 3 Form components (Search, Select, Loading Button)
+- 6 Data Display components (Card, Stats, Legend)
+- 2 Navigation components (Sidebar Nav, User Menu)
+- 3 Layout components (Auth layouts)
+- 2 Feedback components (Messages)
+- 1 Map/Visualization component
+- 2 Typography components
+
+Includes reusability scoring table and extraction recommendations.
+
+### 7. `init/design-system.md` (494 lines)
+**Complete Design System**
+
+Comprehensive design documentation:
+- Brand identity & philosophy
+- Color system: Zinc palette + semantic colors
+- Typography: Typeface, hierarchy, weights
+- Spacing & layout: Grid system, breakpoints
+- Borders & radius: Border weight, color, radius scales
+- Component patterns: Forms, Buttons, Cards, Navigation
+- Data visualization: Map colors, marker styles
+- Animations & transitions: Page transitions, component effects
+- Accessibility: Contrast, interactive elements, typography
+- Dark mode: Colors, images, implementation
+- Responsive behavior: Breakpoints, layout adjustments
+
+## Project Stack
+
+- **Framework:** Laravel 11
+- **UI Library:** Livewire 3 (classic components)
+- **Styling:** Tailwind CSS v4
+- **UI Components:** Flux UI v2
+- **JavaScript:** Alpine.js
+- **Font:** Instrument Sans (400, 500, 600 weights)
+- **Map Library:** Leaflet
+- **Map Tiles:** OpenStreetMap
+
+## Key Features
+
+- Dark-mode-first design with light mode support
+- Responsive mobile-first architecture
+- Comprehensive authentication UI (Fortify-based)
+- Interactive fuel station search with Leaflet maps
+- Settings/profile management
+- Accessibility-focused component design
+
+## Color Palette
+
+### Primary
+- Zinc neutral scale (50-950)
+
+### Semantic
+- Success: Green-500 (#22c55e)
+- Warning: Amber-500 (#f59e0b)
+- Error: Red-500 (#ef4444)
+- Info: Slate-500 (#64748b)
+
+## File Organization
+
+All context files are in `init/` subdirectory for SuperDesign import.
+
+Total: ~2,210 lines of comprehensive design documentation
+
+Generated: April 6, 2026