# Complete Component Catalog (v3.46+)

> Extracted from `SKILL.md` for clarity. Loaded only when generating a page or component that needs to discover what's available.

> Source : `D:/01 - projets/SmartStack.app/features/IA-Workflow/web/smartstack-web/src/components/ui/`

32 shared components are exported by `@atlashub/smartstack`. Always import from `@/components/ui/{Component}` (or `@/components/docs/...` for doc panel pieces). **Never re-implement when one exists.**

## Layout & Page chrome (always import)

| Component | Import | Use case |
|---|---|---|
| `PageTemplate` | `@/components/ui/PageTemplate` | Wraps every authenticated page — provides `space-y-6` rhythm and width container |
| `PageHeader` | `@/components/ui/PageHeader` | Title + subtitle + actions slot — used at top of every list/detail/form page |
| `Breadcrumb` | `@/components/ui/Breadcrumb` | Hierarchical nav (auto-derived from menu) |
| `PageLoader` | `@/components/ui/PageLoader` | Suspense fallback ; centered spinner |
| `UnderDevelopment` | `@/components/ui/UnderDevelopment` | Placeholder for routes that exist in seed but have no real page yet |

## Data display

| Component | Import | Use case |
|---|---|---|
| `DataTable` | `@/components/ui/DataTable` | Sortable, searchable, paginated table — see [../patterns/data-table.md](../patterns/data-table.md) |
| `DataView` | `@/components/ui/DataView` | Envelope multi-mode (`table` / `cards` / `kanban`). Re-exports `ViewToggle`, `Pagination`, `StatusBadge`, `Avatar`, `KanbanColumn`, `KanbanCard` |
| `EntityCard` | `@/components/ui/EntityCard` | Entity card with avatar / badges / actions — see [../patterns/entity-card.md](../patterns/entity-card.md) |
| `KanbanBoard` | `@/components/ui/KanbanBoard` | Kanban board — see [../patterns/kanban.md](../patterns/kanban.md) |
| `ViewModeToggle` | `@/components/ui/ViewModeToggle` | Standalone view-mode toggle (`table`/`cards`/`kanban`) |
| `SortableList` | `@/components/ui/SortableList` | dnd-kit reorderable list (drag & drop) |

## Forms & dialogs

| Component | Import | Use case |
|---|---|---|
| `EntityLookup` | `@/components/ui/EntityLookup` | **Mandatory** for FK Guid fields (debounced search, paginated results, display name resolution). See `apex/references/smartstack-frontend.md` §6 |
| `SelectWithOther` | `@/components/ui/SelectWithOther` | Select with "Autre…" free-text fallback |
| `ConfirmModal` | `@/components/ui/ConfirmModal` | Destructive action confirmation (Delete, Archive, …). 3 variants : `danger`, `warning`, `info` |
| `Drawer` | `@/components/ui/Drawer` | Side drawer (read-only details, filter panels). **Forbidden for create/edit forms** (use full-route pages instead, cf. C4) |
| `UnlockAccountModal` | `@/components/ui/UnlockAccountModal` | Account unlock flow (admin) |

## Permissions & tenant

| Component | Import | Use case |
|---|---|---|
| `ProtectedButton` | `@/components/ui/ProtectedButton` | Button hidden / disabled when user lacks `permission` prop |
| `PermissionMatrix` | `@/components/ui/PermissionMatrix` | Roles × permissions grid (used on roles pages) |
| `ScopeBanner` | `@/components/ui/ScopeBanner` | Top banner showing the current tenant / global scope |
| `RestrictedModuleBanner` | `@/components/ui/RestrictedModuleBanner` | Shown when a module requires a license feature the user doesn't have |
| `TenantSelector` | `@/components/ui/TenantSelector` | Dropdown for switching tenant (header) |
| `TenantScopeSelector` | `@/components/ui/TenantScopeSelector` | Choose `tenant`/`shared`/`platform` scope when creating cross-tenant entities |
| `TenantScopeFilter` | `@/components/ui/TenantScopeFilter` | Filter list by scope (admin lists with cross-tenant data) |

## Theme & branding

| Component | Import | Use case |
|---|---|---|
| `ThemeSwitcher` | `@/components/ui/ThemeSwitcher` | Light/Dark toggle (header) |
| `ThemeCustomizer` | `@/components/ui/ThemeCustomizer` | Per-user theme customization (preferences page) |
| `ThemeScopeSelector` | `@/components/ui/ThemeScopeSelector` | Choose theme apply scope (Global/Tenant/User) |
| `LanguageSwitcher` | `@/components/ui/LanguageSwitcher` | i18n language picker (header) |
| `Tooltip` | `@/components/ui/Tooltip` | Tooltip with variants (`error`, `warning`, `success`, `info`) |

## App shell

| Component | Import | Use case |
|---|---|---|
| `AvatarMenu` | `@/components/ui/AvatarMenu` | User avatar + dropdown (logout, profile) — header right |
| `AppSwitcher` | `@/components/ui/AppSwitcher` | Module/app switcher in the sidebar (auto-built from menu) |

## Documentation panel (auto-installed)

| Component | Import | Use case |
|---|---|---|
| `DocPanel` | `@/components/ui/DocPanel` | Side panel showing contextual `doc-data.ts` content (consumed via `DocPanelContext`) |
| `DocToggleButton` | `@/components/docs/DocToggleButton` | **Mandatory** in every list/detail page header — opens DocPanel |
| `DocEdgeButton` | `@/components/ui/DocEdgeButton` | Edge-attached button variant (rare — use `DocToggleButton` first) |

## Component-availability rules

- If a component above exists, **always import it** — never re-implement (`<div role="button">`, `<input>` for FK, etc.).
- For new project-specific UI (e.g., `OrderTimeline`), generate locally under `src/components/{module}/`.
- For dashboard-only widgets (`StatCard`, `ChartCard`, `PeriodFilter`), generate inline — see [../patterns/dashboard-chart.md](../patterns/dashboard-chart.md).
- The 32 catalog components above are part of the SmartStack package contract — clients consume them via `@atlashub/smartstack`.
