graph LR
    %% Existing Nodes
    Components["fa:fa-puzzle-piece MUI Components"]
    Layout["fa:fa-th-large Layout"]
    Theme["fa:fa-palette Theming"]
    Styling["fa:fa-paint-brush Styling"]
    Utils["fa:fa-tools Utilities"]

    %% Existing Sub-Sections of Components
    Components --> |"Building blocks"| Basic["fa:fa-cube Basic Components"]
    Components --> |"Form elements"| Forms["fab:fa-wpforms Form Controls"]
    Components --> |"Layout elements"| Navigation["fa:fa-compass Navigation"]
    Components --> |"User feedback"| Feedback["fa:fa-comment Feedback"]
    Components --> |"Data display"| Display["fa:fa-table Data Display"]

    Basic --> |"Core elements"| Basic1["fa:fa-square Button"]
    Basic --> |"Content wrapper"| Basic2["fa:fa-box Paper"]
    Basic --> |"Visual grouping"| Basic3["fa:fa-layer-group Card"]
    Basic --> |"Typography"| Basic4["fa:fa-font Typography"]

    Forms --> |"User input"| Forms1["fa:fa-keyboard TextField"]
    Forms --> |"Options"| Forms2["fa:fa-check-square Checkbox"]
    Forms --> |"Single choice"| Forms3["fa:fa-dot-circle Radio"]
    Forms --> |"Selections"| Forms4["fa:fa-list Select"]

    %% Existing Sub-Sections of Layout
    Layout --> |"Grid system"| Layout1["fa:fa-th Grid"]
    Layout --> |"Containers"| Layout2["fa:fa-box Container"]
    Layout --> |"Breakpoints"| Layout3["fa:fa-mobile-alt Responsive"]
    Layout --> |"Spacing"| Layout4["fa:fa-arrows-alt Spacing"]

    %% Existing Sub-Sections of Theme
    Theme --> |"Color scheme"| Theme1["fa:fa-palette Palette"]
    Theme --> |"Typography"| Theme2["fa:fa-text-height Font"]
    Theme --> |"Dark/Light"| Theme3["fa:fa-adjust Mode"]
    Theme --> |"Customization"| Theme4["fa:fa-sliders-h Custom Theme"]

    %% Existing Sub-Sections of Styling
    Styling --> |"CSS-in-JS"| Styling1["fa:fa-code styled"]
    Styling --> |"Hook based"| Styling2["fa:fa-hook makeStyles"]
    Styling --> |"Direct CSS"| Styling3["fab:fa-css3 sx prop"]
    Styling --> |"Class based"| Styling4["fa:fa-paint-roller className"]

    %% NEW: Lab Components (Experimental)
    Components --> |"Experimental"| Lab["fa:fa-flask Lab Components"]
    Lab --> Lab1["fa:fa-stream Timeline"]
    Lab --> Lab2["fa:fa-tree TreeView"]
    Lab --> Lab3["fa:fa-clock Pickers"]

    %% NEW: Icons
    Components --> |"Visual symbols"| Icons["fa:fa-icons Icons"]
    Icons --> Icons1["fa:fa-icons Material Icons"]
    Icons --> Icons2["fa:fa-image SVG Icons"]

    %% NEW: Utilities Sub-Sections
    Utils --> |"Pre-built hooks"| Utils1["fa:fa-check Hooks"]
    Utils --> |"Accessibility helpers"| Utils2["fa:fa-wheelchair Accessibility"]
    Utils --> |"Localization/i18n"| Utils3["fa:fa-globe Localization"]
    Utils --> |"Testing support"| Utils4["fa:fa-vial Testing Library"]
    Utils --> |"Advanced styling"| Utils5["fa:fa-cogs clsx & Other Helpers"]

                

graph LR
    Components["fa:fa-puzzle-piece Components"] --> |"Contains reusable UI elements"| Common["fa:fa-share-alt Common"]
    Components --> |"Handles page structure"| Layout["fa:fa-columns Layout"]
    Components --> |"Feature specific modules"| Features["fa:fa-star Features"]

    Common --> |"Basic UI element"| Button["fa:fa-square Button Component"]
    Common --> |"Input handling"| TextField["fa:fa-keyboard TextField Component"]
    Common --> |"Content container"| Card["fa:fa-credit-card Card Component"]

    Layout --> |"Top navigation"| Header["fa:fa-heading Header"]
    Layout --> |"Bottom section"| Footer["fa:fa-shoe-prints Footer"]
    Layout --> |"Side navigation"| Sidebar["fa:fa-bars Sidebar"]
    Layout --> |"Menu structure"| Navigation["fa:fa-compass Navigation"]

    Features --> |"Product display"| Products["fa:fa-shopping-bag Products"]
    Features --> |"Shopping cart"| Cart["fa:fa-shopping-cart Cart"]
    Features --> |"Payment process"| Checkout["fa:fa-credit-card Checkout"]

    Products --> |"Individual item"| ProductCard["fa:fa-tag ProductCard"]
    Products --> |"Item collection"| ProductList["fa:fa-list ProductList"]
    Products --> |"Item information"| ProductDetails["fa:fa-info-circle ProductDetails"]

    Services["fa:fa-cogs Services"] --> |"API configuration"| Api["fa:fa-cloud API"]
    Services --> |"User management"| Auth["fa:fa-user-lock Auth"]

    Api --> |"Axios setup"| AxiosConfig["fa:fa-wrench axios.config.js"]
    Api --> |"API routes"| Endpoints["fa:fa-route endpoints.js"]

    Utils["fa:fa-tools Utils"] --> |"Data formatting"| Formatters["fa:fa-font formatters.js"]
    Utils --> |"Data validation"| Validators["fa:fa-check-circle validators.js"]
    Utils --> |"Global values"| Constants["fa:fa-cube constants.js"]

    Theme["fa:fa-palette Theme"] --> |"Color schemes"| Palette["fa:fa-fill palette.js"]
    Theme --> |"Text styles"| Typography["fa:fa-text-height typography.js"]
    Theme --> |"UI overrides"| ComponentStyles["fa:fa-brush components.js"]

    Contexts["fa:fa-project-diagram Contexts"] --> |"Cart state"| CartContext["fa:fa-shopping-basket CartContext"]
    Contexts --> |"User state"| AuthContext["fa:fa-user-shield AuthContext"]

    Pages["fa:fa-file-alt Pages"] --> |"Landing page"| Home["fa:fa-home Home"]
    Pages --> |"Product listing"| ProductsPage["fa:fa-store Products"]
    Pages --> |"Item details"| ProductDetailPage["fa:fa-search ProductDetail"]
    Pages --> |"Cart view"| CartPage["fa:fa-shopping-cart Cart"]
    Pages --> |"Payment"| CheckoutPage["fa:fa-money-check Checkout"]

    Routes["fa:fa-route Routes"] --> |"Protected routes"| PrivateRoute["fa:fa-lock PrivateRoute"]
    Routes --> |"Open routes"| PublicRoute["fa:fa-unlock PublicRoute"]
    Routes --> |"Open routes"| PublicRoute["fa:fa-unlock PublicRoute"]