UI Primitives

The UI Primitives in this project represent the foundational building blocks used to construct the application's user interface. These components are designed to be reusable, consistent, and highly integrated with the project's styling system, primarily utilizing UnoCSS for atomic styling and CSS variables for theme-aware properties.

These primitives handle essential interactions such as button clicks, view switching via sliders, and layout headers, ensuring a unified design language across the Workbench and Chat modules.

Theme and Styling System

The project employs a robust styling system based on UnoCSS and CSS variables. Themes are managed via a data-theme attribute on the HTML root element, which toggles between 'light' and 'dark' modes.

The diagram above illustrates the flow of theme application from the root configuration to the individual UI primitives.
Sources: app/root.tsx:37-50, uno.config.ts:145-250

Color Primitives

The styling system defines a comprehensive palette of colors including gray, accent (blue), green, orange, and red, each with generated alpha variants for transparency effects.
Sources: uno.config.ts:24-106

Core Components

IconButton

The IconButton is a specialized button used for trigger actions that are primarily represented by an icon. It supports dynamic sizing and integration with the project's icon collection (e.g., i-ph:caret-down).

Sources: app/components/ui/IconButton.tsx:10-25, uno.config.ts:275-280

Slider

The Slider component is used for toggling between two distinct views, such as "Code" and "Preview" in the Workbench. It utilizes framer-motion for smooth transitions of the selection indicator.

The slider logic ensures that only one view is active at a time, providing visual feedback through an animated background.
Sources: app/components/ui/Slider.tsx:25-50, app/components/workbench/Workbench.client.tsx:27-36

Layout Primitives: PanelHeader and PanelHeaderButton

These components provide the structural framework for UI panels, specifically within the Workbench's editor and file tree areas.

• PanelHeader: A container that enforces consistent padding, background depth, and border styling.
• PanelHeaderButton: A textual button styled specifically for headers, often used for actions like "Save", "Reset", or "Toggle Terminal".

Sources: app/components/ui/PanelHeader.tsx:5-15, app/components/ui/PanelHeaderButton.tsx:7-20

Atomic Design & Shortcuts

UnoCSS is configured with custom shortcuts to simplify the application of complex utility chains for common UI patterns.

Sources: uno.config.ts:128-132

The UI primitives facilitate a cohesive user experience by abstracting complex styling and interaction logic into simple, reusable React components that respond dynamically to the application's theme and state.