▶ Docs : https://aphrody-code.github.io/material-web — le showcase interactif (85+ composants, 9 familles, dark mode, sélecteur Material You, badge adaptive) se lance en local : bun install && bun run example.
Monorepo bun + Turborepo d'un système Material Design 3 complet pour le web : la librairie de web components Lit (@material/web, fork aphrody), sa couche React (@aphrody-code/m3-react), et la génération de tokens M3 (@aphrody-code/m3-tokens). Pensé pour couvrir la surface MUI + MUI X (Community) comme cible de migration.
| Package | Dossier | Rôle |
|---|---|---|
@material/web |
packages/material-web |
Web components Lit <md-*>, self-contained sur les tokens --md-sys-*. Catalogue M3 complet (fork aphrody). |
@aphrody-code/m3-react |
packages/react |
Wrappers React (@lit/react) — 115 composants Md*, un par élément. + 5 transitions (Fade/Grow/Zoom/Slide/Collapse). |
@aphrody-code/m3-tokens |
packages/m3-tokens |
Package TypeScript. theme-to-tokens : thème MUI → CSS --md-sys-*. dynamic-color : Material You runtime — dérive les ~47 rôles (light + dark) depuis n'importe quelle couleur seed. |
@aphrody-code/m3-motion |
packages/m3-motion |
Transitions / motion M3 pour React, basées sur Motion (ex-Framer Motion). |
@aphrody-code/m3-theme |
packages/m3-theme |
Feuille de tokens « fusion » M3 + shadcn/ui + Tailwind v4 (tokens.css, light + dark), générée self-contained depuis la palette M3 baseline. Privé. |
@aphrody-code/m3-design |
packages/m3-design |
« Design compiler » : brief en langage naturel → scaffold React M3 (parser + moteur HCT + auto-critique), émettant du JSX @aphrody-code/m3-react. Privé. |
@aphrody-code/eslint-plugin-m3 |
packages/eslint-plugin-m3 |
Plugin lint (oxlint jsPlugins + ESLint) pour les sites consommant la lib — 8 règles M3 (icônes, rôles couleur, sx, props MUI, a11y), 2 auto-fixables. JS-only. |
@aphrody-code/doc-ai |
packages/doc-ai |
CLI doc-as-code : traduction Markdown + génération de guides d'API Lit, backend Google Gemini (fallback statique offline). |
bun uniquement, stack moderne mesurée (détails : docs/STACK.md) :
Bun (runtime/bundle/scripts/test/dev) · sass-embedded (dart-sass natif, ~15×) ·
tsgo (TypeScript 7 natif, typecheck ~4×) + tsc (canonique + .d.ts) ·
oxlint/oxfmt (Rust) · happy-dom + bxc (tests headless + Chromium réel) · Turborepo + catalog.
bun install
bun run build # turbo : sass-embedded → css → tsc (+ Bun.build bundle)
bun run typecheck # tsc (canonique, émet les .d.ts shippés)
bun run typecheck:fast # tsgo (TS7 natif) — ~4× plus rapide
bun run lint # oxlint
bun run test # bun test — composants headless (happy-dom) + units
bun run test:browser # bxc — gate Chromium réelLa lib se compile aussi en bundle self-contained via Bun.build : cd packages/material-web && bun run build:aphrody.
examples/showcase (@aphrody-code/m3-showcase) est l'exemple unique, léger et 100 % bun-natif (servi/bundlé par Bun.serve + bun build ./src/index.html — ni Next, ni Vite) : galerie interactive des composants md-* via leurs wrappers React, sélecteur Material You live (@aphrody-code/m3-tokens/dynamic-color), badge window size class live (couche adaptive M3, cf. ci-dessous), et un backdrop 3D léger (@react-three/fiber + drei).
bun run example # dev server bun-natif (HMR)
cd examples/showcase && bun run build # bundle statiqueLe système est nativement responsive sur les window size classes M3 (600 / 840 / 1200 / 1600 dp) :
-
@aphrody-code/m3-tokens/breakpoints— couche agnostique de plateforme (TS pur, zéro DOM) :BREAKPOINTS,classifyWidth,mediaQuery,marginFor,navigationFor,panesFor. C'est la source unique des breakpoints. -
@aphrody-code/m3-react/adaptive— hooks React (useWindowSizeClass,useMediaQuery,useAtLeast) qui réexportent ces primitives dem3-tokenset ajoutent seulement la réactivité web (matchMedia/resize). SSR-safe.
Le système est optimisé pour les environnements hybrides et natifs :
-
React Native : Le layer tokens de
m3-tokensest directement consommable (partage des tokens — pas des composants Lit DOM) : les mêmes--md-sys-*et primitives de breakpoints alimentent web et natif. -
Tauri 2.0 & WebAssembly (WASM) : Notre module bun-rs intègre des liaisons FFI natives (C-ABI) et WASM pour le navigateur. L'extension @aphrody-code/m3-theme/tauri fournit la synchronisation automatique du thème React vers le shell natif (
useM3TauriThemeSync) et une barre de titre Material Design 3 personnalisée (M3TauriTitlebar) avec gestion native du glisser-déplacer (data-tauri-drag-region) et des contrôles de fenêtre (minimiser, maximiser, restaurer, fermer).
import { MdFilledButton } from "@aphrody-code/m3-react"; // barrel (DX)
import { MdFilledButton } from "@aphrody-code/m3-react/button"; // deep import (~280 B gzip vs ~4 KB)Les wrappers sont side-effectful (chaque import déclenche le customElements.define de son élément), donc le barrel n'est pas tree-shakeable. Pour un poids minimal, deep-importez par famille (/button, /charts, /table…) : ~15× plus léger. Le code des éléments Material 3 vit dans @material/web et se charge à la demande.
import { applyDynamicColor, cssFromSeed } from "@aphrody-code/m3-tokens/dynamic-color";
applyDynamicColor("#00658f"); // re-thème tout <md-*> live (mode courant)
applyDynamicColor("#00658f", { dark: true }); // variante sombre
const css = cssFromSeed("#00658f"); // CSS :root / [data-theme=dark] pour SSR-
@mui/material: couverture complète des composants M3. Parité MUI :md-avatar/md-avatar-group,md-alert,md-skeleton,md-breadcrumbs,md-link,md-surface,md-backdrop,md-popover,md-rating,md-mobile-stepper+ transitions React. (Box/Stack/Grid/Container→ utilitaires Tailwind ;Modal/Popper→md-dialog/md-backdrop/md-popover.) -
MUI X Community : Data Grid (
md-table: tri multi-colonnes, filtres, pagination, export CSV, édition inline, resize/reorder), 8 charts (md-line/bar/pie/area/scatter/radar-chart,md-sparkline,md-gauge), pickers (md-date-picker,md-time-picker,md-date-time-picker,md-date-range-picker— éditables, i18nIntl),md-tree(multi-select/checkbox/data-driven/édition de label),md-scheduler(vues day/week/month). - MUI X Premium (row grouping, pivot, Excel, récurrence/DnD Scheduler) : hors-scope (offre commerciale MUI).
-
Tailwind : tokens M3 runtime via
@aphrody-code/m3-tokens→m3-tokens.css(color 47 rôles, typescale, shape, motion-easings, elevation-statique, state).
- Kit de migration MUI → material-web :
./migration/ - État de Material Design 3 sur le web :
./docs/ - Best practices Lit appliquées :
./docs/lit-best-practices.md - Stack & conventions (Bun, package management) :
./docs/STACK.md - Stratégie d'intégration Rust-React :
./docs/strategy/rust-react-integration-crates.md - Guide d'intégration Tauri 2.0 :
./docs/tauri-2.0.md - Dossier de déploiement Tauri Cross-Platform :
./docs/tauri/ - Stratégie vis-à-vis de MUI (fork vs emprunt) :
./docs/strategy/mui-fork-analysis.md
Les packages sont publiés sous le scope @aphrody-code sur GitHub Packages.
Pour les consommer, pointer le scope vers le registre dans un .npmrc :
@aphrody-code:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}bun add @aphrody-code/m3-react # tire @aphrody-code/material-web@3.0.0 + m3-tokens@3.0.0GitHub Packages exige un token (même en lecture, limite GitHub). Pour une installation sans token, un miroir npmjs.org est déjà câblé dans
release.yml(job optionnel, déclenché quand le secretNPM_TOKENest présent et le scope@aphrody-coderevendiqué sur npmjs).
Le dépôt embarque aussi un plugin Claude Code material-design (plugins/,
marketplace aphrody-material) : 15 skills M3, 5 agents, un hook color-guard et un
serveur MCP mui-docs. Voir plugins/material-design/README.md.
- Toolchain bun uniquement (jamais
npm/pnpm). Gate local :bun run lint && bun run typecheck && bun run test. - Commits conventionnels une ligne, sans emoji. Branche de travail :
feat/m3-monorepo. - Licence : Apache-2.0 (
./LICENSE). Le code tiers vendorisé (skills/llms.txt MUI, serveur MCP) conserve sa licence MIT d'origine et son attribution.