139 lines
4.3 KiB
Markdown
139 lines
4.3 KiB
Markdown
# 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
|