---
description: Standard design and layout for apps/web module pages
globs: apps/web/src/apps/**/*.{ts,tsx}
alwaysApply: false
---

# Web Design & Layout Standards

Working directory: `apps/web/`.
Primitives: `@repo/ui/components`. Foundations: `@repo/ui/foundations`. Icons: `lucide-react`.
Reference usage: `apps/showcase` (ui-components, forms, action-tools, shell-demo).

## App chrome (do not rebuild)

- Authenticated routes render inside `ModuleLayout` → `CoreAppShell`.
- Do not nest another `CoreAppShell` inside a feature module.
- Sidebar / header / history / bookmarks live only under `apps/main/layouts/`.

## Page composition

| Page type | Standard wrapper |
|---|---|
| List / index (FULL_PAGE) | `EnterpriseIndexPageProvider` + `EnterpriseDataTable` |
| Detail (FULL_PAGE) | `EnterpriseDetailPageProvider` |
| Form | `EnterpriseFormPageProvider` |
| Simple / system page | Match existing `modules/system/*` patterns |

Detail **content** layout (section stack, key-value grids, status blocks, tabs for many categories): follow `.agents/skills/detail-layout/SKILL.md` — layout/position only.
Form **content** layout: follow `.agents/skills/form-layout/SKILL.md`.
Index / list layout (toolbar, action column, audit columns): follow `.agents/skills/index-layout/SKILL.md`.
Entities with `latitude` / `longitude`: follow `web-location-maps.mdc` — form must pick coords on `LocationMap`; detail must render `LocationMap`.

Every page header (`pageHeaderProps`) should include i18n `title`, `description`, `breadcrumbs`, and Lucide `icon` when useful.

```tsx
// ✅ GOOD
<EnterpriseIndexPageProvider
  pageHeaderProps={{
    title: t('title'),
    description: t('description'),
    icon: LayoutDashboard,
    breadcrumbs: [
      { label: t('nav:example-module'), type: 'text' },
      { label: t('nav:example-full-page'), type: 'text' },
    ],
  }}
>
  <EnterpriseDataTable columnDefs={columnDefs} filterConfig={filterConfig} />
</EnterpriseIndexPageProvider>
```

```tsx
// ❌ BAD — custom chrome that duplicates foundations
<Box p="md">
  <Title order={2}>{t('title')}</Title>
</Box>
```

## Visual language

- Theme via Mantine tokens / CSS vars — no hard-coded theme hex.
- Surfaces: `Paper` / `Card` with `withBorder`, `radius="md"`, restrained `shadow="sm"`.
- Status: `StatusBadge` / semantic `Badge` — see showcase `ui-components`.
- Actions: `PageActions` / row actions from action-tools patterns.
- Forms: `Field*` components + Zod validators — see showcase `forms` and `example/full-page` form.
- Do not invent a parallel design system.