---
description: Use apps/showcase as the reference for UI components and @repo package APIs
globs: apps/{web,showcase}/**/*.{ts,tsx}
alwaysApply: false
---

# Showcase = Component & Function Reference

`apps/showcase` is the living cookbook. Prefer copying its import paths and composition patterns into `apps/web`. Do not add product business logic to showcase.

## Demo → capability map

| Showcase route / folder | What to learn | Prefer importing from |
|---|---|---|
| `pages/ui-components` | Theme, Badge, Button, inputs, Table, StatusBadge | `@repo/ui/components`, `@repo/ui/provider` |
| `pages/forms` (+ `form-demo`) | RHF fields, Zod, async selects, rich text | `@repo/ui/form`, `@repo/ui/validators` |
| `pages/shell-demo` | CoreAppShell layouts | `@repo/ui/components` (`CoreAppShell`) |
| `pages/action-tools` | PageActions / RowActions | `@repo/ui/components` |
| `pages/ag-grid` | Enterprise grid + theme | `@repo/ui/components` / `@repo/ui/ag-grid` |
| `pages/storage` | Local + PouchDB patterns | `@repo/core-storage` (+ app `core/storage`) |
| `pages/events` | Event bus, listeners, transformers | `@repo/core-events`, `@repo/core-api` |
| `pages/auth`, `pages/rbac`, `pages/hardware` | Auth/RBAC/printer IPC samples | Match showcase; wire real flows in `apps/web` |

Run: `pnpm dev:showcase` → typically `http://localhost:517x`.

## Usage rules

- **Primitives**: `@repo/ui/components` (Mantine re-exports + StatusBadge, AppShell, etc.).
- **Form fields**: `Field*` from `@repo/ui/form` (also re-exported from `@repo/ui/components`). Pair with `react-hook-form` + `zod` + `@repo/ui/validators` (`compose`, `required`, `rangeLength`, …).
- **Module pages in web**: foundations (`Enterprise*Provider`, `EnterpriseDataTable`) — see `apps/web` example module; showcase shows building blocks, web shows full module wiring.
- **Theme**: wrap with `ThemeProvider` from `@repo/ui/provider`; drive scheme/density like showcase `theme.store`.
- If showcase and docs disagree, prefer **showcase code** for API shape and **docs-dev** for concepts.

```tsx
// ✅ GOOD — same surface as showcase form-demo
import { FieldTextInput, FieldSelect } from '@repo/ui/form';
import { Button, Stack } from '@repo/ui/components';

// ❌ BAD — raw Mantine bypassing the design system
import { TextInput } from '@mantine/core';
```