@reformlabs/modular

@reformlabs/modular is a production-grade, high-performance canvas rendering engine specifically built for Discord card generation. Unlike generic canvas wrappers, it implements a professional Design-to-Code pipeline that separates data logic from visual presentation.

---

✨ Key Features

• 🚀 Extreme Performance — Built on @napi-rs/canvas (Rust-backed). Profile cards render in ~44 ms.
• 🎨 21 Built-In Themes — neon-tech, glass-modern, esport, cyberpunk, and more. Switch with a single string.
• 🧠 Fluent Builder API — Chainable, type-safe methods for every card type.
• 💎 Pixel-Perfect Scaling — DPI up to 4× for retina displays.
• 🧩 Extensible Architecture — Plugins, hooks, custom components, custom themes.
• 🛡️ Type Safe — Full TypeScript support with exhaustive type definitions.
• 📬 Discord.js Integration — .reply(), .followUp(), .send() built in.
• 🎛️ Parametric Backgrounds — Integer-controlled color, blur, pattern, and gradient angle on Profile cards. (v2.1)

---

🚀 The 2-Minute Quick Start

npm install @reformlabs/modular

import { RankCard } from '@reformlabs/modular';

// Render to Buffer:
const buffer = await new RankCard()
  .setUsername('Senior Developer')
  .setAvatar('https://github.com/manymq.png')
  .setStats({ level: 15, xp: 7300, maxXp: 10000, rank: 3 })
  .setTheme('neon-tech')
  .render();

// Or reply directly to a Discord slash command:
await new RankCard()
  .setUser(interaction.user)
  .setStats(await db.getStats(interaction.user.id))
  .setTheme('cyberpunk')
  .reply(interaction);

---

🃏 Card Types

Class	Factory	Description
RankCard	engine.createRankCard()	XP bar, level badge, rank position
ProfileCard	engine.createProfileCard()	Full profile with badges, status, parametric background
MusicCard	engine.createMusicCard()	Now Playing with album art and progress
Leaderboard	engine.createLeaderboardCard()	Server leaderboard with ranked entries
InviteCard	engine.createInviteCard()	Invite stats with milestone progress
WelcomeCard	engine.createWelcomeCard()	Server welcome card

---

🖼️ Examples Gallery

Rank Card	Music Card	Profile Card
cyberpunk	neon-tech	glass-modern

Explore the Full Examples Overview for more.

---

🗺️ Documentation Map

🏁 Level 1: Getting Started

1. Installation Guide — Setting up the native environment.
2. Quick Start — Generate your first card in 2 minutes.
3. First Card In-Depth — Understanding the builder anatomy.

🧠 Level 2: Core Concepts

4. The Theme System — All 21 themes, custom themes, token overrides.
5. Render Pipeline — The 9-phase pipeline from data to pixels.
6. Card Builders — All 6 builders with full method reference.
7. System Architecture — Layers, source map, data flow.

📑 Level 3: API Reference

8. Engine API — Factory methods, plugins, hooks, cache, events.
9. ProfileCard API — Full ProfileCard option reference (v2.1).
10. CardBuilder API — Base builder method reference.
11. Theme Engine API — Registering and managing themes.
12. Render Engine API — Low-level canvas controls.

🛠️ Level 4: Advanced Guides

13. Custom Theme Creation — Building your own brand theme.
14. Performance & Scaling — Benchmarks, cache tuning, concurrency.
15. Migration: v1 → v2 — Breaking changes and migration steps.
16. Design System Mapping — Bridging Figma and Canvas.

---

📦 What's New in v2.1

• ProfileCard Parametric Background — Control background color, blur, pattern density, and gradient angle with integer-typed setters.
• Status & Tooltip Badge — .setStatus() and .setTooltipBadgeId() on ProfileCard.
• Rank Data Overlay — Embed an XP bar directly on the ProfileCard via .setRankData().
• esport Theme — 21st built-in theme added.
• ThemeManager.getToken() — Dot-path token retrieval from any theme.
• Memory Safety — renderContext.release() is now guaranteed in a finally block.

See the full CHANGELOG for details.

---

🏗️ Project Structure

src/
├── index.ts               — Public API (all exports)
├── core/                  — Engine, builders, pipeline, domain modules
│   └── internal/cards/    — rank / profile / music / leaderboard / invite / welcome
└── canvas/                — Renderers, components, themes, styling

docs/                      — Full documentation
tests/                     — Unit + visual regression tests
scripts/                   — validate / smoke / perf tools

Full directory reference: docs/structure.md

---

❤️ Contributing

We welcome contributions! Please read the System Architecture guide before submitting a PR to understand how the layers interact.

📜 License

MIT — see LICENSE