# 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