# UI Package Reference

**Check JSDoc in your IDE** - Hover over any component import to see props, types, and examples.

**Import from:** `@donotdev/ui` (layout/composition components)

---

## Layout Components

- **PageContainer** - Page wrapper with width constraints, spacing, and density system.
- **GameContainer** - Game preset container with fixed header/footer layout.
- **GameFlow** - Game flow component for step-by-step game interfaces.

---

## Layout Sub-Components

- **AppBranding** - App branding display with logo and name.
- **AppIcon** - App icon component.
- **AppTitle** - App title display component.
- **GameTitle** - Game title component for game preset.
- **Breadcrumbs** - Breadcrumb navigation component.
- **HeaderNavigation** - Header navigation menu component.
- **DropdownNavigation** - Dropdown navigation menu.
- **HeaderMenu** - Header menu component.
- **SettingsMenu** - Settings menu component.
- **ThemeToggle** - Theme toggle button component.
- **CacheSettings** - Cache settings component.
- **Notifications** - Notifications component.
- **FloatingLanguageSwitcher** - Floating language selector component.

---

## Auth Components

- **AuthHeader** - Header component with authentication UI (sign in/out, user menu).
- **AuthMenu** - Authentication menu component.

---

## Helpers

- **tList(t, key, count, icon?, size?)** - Translated array as List. Default: CheckCircle icon. Pass `null` for no icon (use with emoji labels).

---

## Common Components

- **AppLoading** - App-level loading component.
- **FeatureDisabled** - Component shown when features are disabled.
- **Icon** - Icon component wrapper.
- **Loader** - Loading spinner component.
- **LoadingMessage** - Loading message with variants (processing, saving, uploading, etc.).
- **LoadingOverlay** - Overlay component for loading states.
- **LoadingScreen** - Full-screen loading component.
- **ProgressBar** - Progress bar component.
- **Skeleton** - Skeleton loading component.
- **FeatureCard** - Feature showcase card component.
- **TechBento** - Tech stack showcase component.

---

## Routing Components

- **Link** - Platform-agnostic link component (works in Vite + Next.js).
- **AuthGuard** - Route guard component for protected routes.
- **AuthGuardFallback** - Fallback component for auth-guarded routes.
- **GoTo** - Programmatic navigation component.
- **GoToWrapper** - Wrapper for GoTo navigation.
- **GoToInput** - Input component for GoTo navigation.
- **GoToDialog** - Dialog for GoTo navigation.
- **DnDevNavigationMenu** - Framework navigation menu component.
- **NotFoundPage** - 404 page component.

---

## Routing Hooks

- **useNavigate** - Navigate to routes programmatically.
- **useBack** - Navigate back in history.
- **useRefresh** - Refresh current route.
- **usePrefetch** - Prefetch route data.
- **useLocation** - Get current location.
- **useParams** - Get route parameters.
- **useSearchParams** - Get URL search parameters.
- **useMatch** - Match current route pattern.
- **useQueryParams** - Get and set query parameters.
- **useRedirectGuard** - Guard against redirects.
- **useNavigation** - Navigation state and methods.
- **useGoTo** - GoTo navigation hook.
- **useRouteDiscovery** - Route discovery hook.

---

## Cookie Consent

- **CookieConsent** - Cookie consent management component.
- **ConsentBanner** - Cookie consent banner component.

---

## Platform-Specific Providers

- **ViteAppProviders** - App providers for Vite (import from `@donotdev/ui/vite`).
- **NextJsAppProviders** - App providers for Next.js (import from `@donotdev/ui/next`).

---

## CRUD Display Components (from @donotdev/ui)

- **DisplayFieldRenderer** - Renders read-only field displays.
- **EntityDisplayRenderer** - Renders complete entity displays.
- **TextFieldDisplay** - Text field display component.
- **BadgeFieldDisplay** - Badge field display component.
- **AvatarFieldDisplay** - Avatar field display component.
- **LinkFieldDisplay** - Link field display component.
- **DateFieldDisplay** - Date field display component.
- **NumberFieldDisplay** - Number field display component.
- **PhoneNumberDisplay** - Phone number display component.
- **TextAreaDisplay** - Textarea display component.
- **CheckboxFieldDisplay** - Checkbox display component.
- **DropdownDisplay** - Dropdown display component.
- **MultiDropdownDisplay** - Multi-select dropdown display component.
- **MultiInputTextFieldDisplay** - Multi-input text field display component.
- **RadioFieldDisplay** - Radio field display component.
- **RangeFieldDisplay** - Range field display component.
- **FileFieldDisplay** - File field display component.
- **ImageFieldDisplay** - Image field display component.
- **GeoPointFieldDisplay** - GeoPoint field display component.
- **MapFieldDisplay** - Map field display component.
- **ReferenceFieldDisplay** - Reference field display component.
- **TimestampFieldDisplay** - Timestamp field display component.
- **HiddenFieldDisplay** - Hidden field display component.
- **ButtonFieldDisplay** - Button field display component.

---

**For MVP:** Only `PageContainer` is needed. All other components are optional.

**All props documented in JSDoc** - Hover in IDE for complete reference.
