apps/web ↔ @pambe/ui

apps/web consomme le design system via le workspace package @pambe/ui, pas via des copies locales :

• apps/web/next.config.mjs liste @pambe/ui dans transpilePackages → Next compile le TS/TSX du package directement depuis les sources.
• apps/web/tsconfig.json mappe @pambe/ui/* → ../../packages/ui/src/* et @/* → ./*.
• Le package.json de @pambe/ui expose des sous-chemins : ./components/*, ./lib/*, ./hooks/*, ./globals.css. On importe @pambe/ui/components/button, @pambe/ui/lib/utils, etc.
• Les styles Tailwind v4 vivent dans packages/ui/src/styles/globals.css, importés une seule fois depuis apps/web/app/layout.tsx.

Ajouter un composant shadcn

Depuis la racine, en ciblant l'app web (les composants atterrissent dans packages/ui/src/components) :

pnpm dlx shadcn@latest add <component> -c apps/web

Puis import { X } from "@pambe/ui/components/<name>" dans n'importe quelle app.

next.config.mjs

Outre transpilePackages (ci-dessus) et output: "standalone" (image Docker minimale), la config porte des réglages perf :

• images.formats: ["image/avif", "image/webp"] — l'optimizer sert de l'AVIF (puis WebP) plutôt que les PNG/WebP sources : payloads plus légers sur mobile.
• experimental.optimizePackageImports: ["lucide-react"] — tree-shake les imports d'icônes (seuls les glyphes utilisés sont embarqués).

Côté app/layout.tsx, les polices passent par next/font (display: "swap") : Plus Jakarta Sans (corps) et Manrope (titres). Le script Microsoft Clarity est chargé en lazyOnload.

Héritage de config

• TS : les workspaces étendent @pambe/typescript-config/base.json ou nextjs.json. apps/api a son propre tsconfig (NodeNext + jsx: react-jsx avec jsxImportSource: hono/jsx). apps/docs étend @docusaurus/tsconfig (cas à part).
• ESLint : flat config. Le .eslintrc.js racine ne fait que poser les ignores ; les eslint.config.js par workspace font autorité. eslint-plugin-only-warn fait remonter la plupart des échecs en warnings.
• Prettier : .prettierrc racine — semi: false, double quotes, printWidth: 80, plugin Tailwind avec cn/cva reconnus.

Détails normatifs : Conventions.