@mostajs/qrpanel 0.4.0 → 0.6.0

package/src/client.tsx

@@ -0,0 +1,184 @@
+// @mostajs/qrpanel/client — React component
+// Author: Dr Hamid MADANI <drmdh@msn.com>
+//
+// Composant `<QrPanel>` agnostique de l'app. Affiche un QR + l'URL
+// textuelle copiable + 3 actions (copier, ouvrir, mailto).
+// Le composant ne génère pas le QR lui-même : l'app fournit le `qrSrc`
+// (URL d'un endpoint API ou data URL inline).
+//
+// Style : Tailwind classes — l'app les compile dans son build (le
+// component reste portable car les classes sont des chaînes).
+//
+// Note: marqué 'use client' pour Next.js App Router. Pour SPA (Vite,
+// CRA, etc.), la directive est ignorée — le component fonctionne tel
+// quel.
+
+'use client'
+import { useState, useId } from 'react'
+
+export interface QrPanelMode {
+  /** Identifiant interne du mode (libre — sera passé en argument à `qrSrc`). */
+  key: string
+  /** Libellé bouton. */
+  label: string
+  /** URL absolue à afficher / copier dans ce mode. */
+  url: string
+  /** URL de l'image QR pour ce mode (endpoint API ou data URL). */
+  qrSrc: string
+  /** Description courte affichée sous l'en-tête. */
+  description?: string
+}
+
+export interface QrPanelProps {
+  /** Liste des modes proposés (1 ou plusieurs). */
+  modes: QrPanelMode[]
+  /** Mode initial — index dans `modes`. Default 0. */
+  initialModeIndex?: number
+  /** Titre du panel. Default 'QR code & lien d\'invitation'. */
+  title?: string
+  /** Pré-remplissage `mailto`. Default 'Invitation'. */
+  mailSubject?: string
+  /** Pré-remplissage `mailto` body — `{url}` est remplacé par l'URL courante. */
+  mailBodyTemplate?: string
+  /**
+   * Destinataires placés dans `To:` du `mailto:` *(visibles entre eux)*.
+   * Liste d'emails (array ou string CSV). Combinable avec `mailBcc`.
+   */
+  mailTo?: string[] | string
+  /**
+   * Destinataires placés dans `Bcc:` *(invisibles entre eux — recommandé
+   * pour les listes de cohort où les participants ne doivent pas voir
+   * les adresses des autres)*. Liste d'emails (array ou string CSV).
+   */
+  mailBcc?: string[] | string
+  /** Taille de l'image QR. Default 260. */
+  qrSize?: number
+  /** Classe CSS racine optionnelle. */
+  className?: string
+}
+
+const DEFAULT_BODY = 'Bonjour,\n\nVoici ton lien personnel :\n\n{url}\n\n'
+
+/** Accepte une string CSV ou un array, normalise en array d'emails non-vides. */
+function normaliseRecipients(input: string[] | string | undefined): string[] {
+  if (!input) return []
+  const arr = Array.isArray(input) ? input : input.split(',')
+  return arr.map(s => s.trim()).filter(s => s.length > 0)
+}
+
+export function QrPanel({
+  modes, initialModeIndex = 0, title = 'QR code & lien d\'invitation',
+  mailSubject = 'Invitation', mailBodyTemplate = DEFAULT_BODY,
+  mailTo, mailBcc,
+  qrSize = 260, className = '',
+}: QrPanelProps) {
+  const [idx, setIdx] = useState(Math.min(Math.max(0, initialModeIndex), modes.length - 1))
+  const [copied, setCopied] = useState(false)
+  const textareaId = useId()
+  const current = modes[idx] ?? modes[0]
+  if (!current) return null
+
+  const toList = normaliseRecipients(mailTo)
+  const bccList = normaliseRecipients(mailBcc)
+  const parts: string[] = []
+  parts.push(`subject=${encodeURIComponent(mailSubject)}`)
+  parts.push(`body=${encodeURIComponent(mailBodyTemplate.replace('{url}', current.url))}`)
+  if (bccList.length > 0) parts.push(`bcc=${encodeURIComponent(bccList.join(','))}`)
+  // `To:` est positionné juste après `mailto:` quand fourni (les
+  // destinataires To: sont rendus visibles entre eux par tous les clients).
+  // Les Bcc: passent par query param `&bcc=`.
+  const toPart = toList.length > 0 ? encodeURIComponent(toList.join(',')) : ''
+  const mailto = `mailto:${toPart}?${parts.join('&')}`
+  const recipientCount = toList.length + bccList.length
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(current.url)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      const el = document.getElementById(textareaId) as HTMLTextAreaElement | null
+      el?.select()
+    }
+  }
+
+  return (
+    <div className={'bg-white border border-slate-200 rounded-xl p-4 space-y-3 ' + className}>
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="font-semibold text-slate-900">{title}</h2>
+        {modes.length > 1 && (
+          <div className="flex items-center gap-1 text-xs">
+            {modes.map((m, i) => (
+              <button
+                key={m.key} type="button" onClick={() => setIdx(i)}
+                className={'px-2 py-1 rounded ' + (i === idx ? 'bg-blue-600 text-white' : 'bg-slate-100 hover:bg-slate-200')}
+              >
+                {m.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {current.description && (
+        <p className="text-xs text-slate-500">{current.description}</p>
+      )}
+
+      <div className="grid md:grid-cols-2 gap-4 items-start">
+        <div className="flex flex-col items-center gap-2">
+          <img
+            src={current.qrSrc}
+            alt={`QR ${current.label}`}
+            width={qrSize} height={qrSize}
+            className="border border-slate-200 rounded-lg"
+          />
+          <a
+            href={current.qrSrc}
+            download={`qr-${current.key}.png`}
+            className="px-3 py-1.5 rounded text-xs bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200"
+          >
+            ⬇ Télécharger le PNG
+          </a>
+        </div>
+
+        <div className="space-y-2">
+          <label className="block">
+            <span className="block text-xs font-medium text-slate-700 mb-1">
+              Lien direct *(à coller dans un email)*
+            </span>
+            <textarea
+              id={textareaId}
+              readOnly
+              value={current.url}
+              rows={current.url.length > 60 ? 4 : 2}
+              onClick={(e) => (e.currentTarget as HTMLTextAreaElement).select()}
+              className="w-full px-2 py-1.5 border border-slate-300 rounded text-xs font-mono bg-slate-50 break-all"
+            />
+          </label>
+          <div className="flex items-center gap-2 flex-wrap">
+            <button
+              type="button" onClick={copy}
+              className="px-3 py-1.5 rounded text-xs bg-blue-600 text-white hover:bg-blue-700"
+            >
+              {copied ? '✓ Copié' : '📋 Copier le lien'}
+            </button>
+            <a
+              href={current.url}
+              target="_blank" rel="noreferrer"
+              className="px-3 py-1.5 rounded text-xs bg-slate-100 hover:bg-slate-200 text-slate-700"
+            >
+              ↗ Ouvrir
+            </a>
+            <a
+              href={mailto}
+              className="px-3 py-1.5 rounded text-xs bg-amber-50 hover:bg-amber-100 text-amber-700 border border-amber-200"
+              title={recipientCount > 0 ? `Ouvre le client mail avec ${recipientCount} destinataire(s) pré-remplis` : 'Ouvre le client mail avec sujet + corps pré-remplis'}
+            >
+              ✉ Pré-remplir un mail{recipientCount > 0 ? ` (${recipientCount})` : ''}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/composer.ts

@@ -0,0 +1,164 @@
+// @mostajs/qrpanel/composer — themed composite generator
+// Author: Dr Hamid MADANI <drmdh@msn.com>
+//
+// Compose un SVG global :
+//   1. background blanc full canvas
+//   2. cadre thématique (4 motifs aux coins) via themes.buildThemeFrameSvg
+//   3. cartouche blanc central (rect)
+//   4. QR centré dans le cartouche, ECC élevé recommandé
+//
+// Le PNG composite est obtenu en rasterisant le SVG via @resvg/resvg-js
+// (rust prebuilt-binaries cross-OS, no chromium, no node-gyp).
+
+import QRCode from 'qrcode'
+import { Resvg } from '@resvg/resvg-js'
+import {
+  type ThemeKey, type ThemeAsset, getTheme, pickRandomTheme,
+  buildThemeFrameSvg,
+} from './themes.js'
+import type { QrConfigDefaults } from './config.js'
+
+export interface ComposeOptions {
+  width: number
+  errorCorrectionLevel: 'L' | 'M' | 'Q' | 'H'
+  darkColor: string
+  lightColor: string
+  theme: ThemeKey | 'random' | 'none' | { svg: string; label?: string }
+  themePool: ThemeKey[]
+  framePadding: number
+  centerWhiteRatio: number
+  themeOpacity: number
+  themeColor: string
+}
+
+/**
+ * Résout la prop `theme` en thème concret.
+ * - 'random' → tire dans themePool
+ * - 'none'   → null (caller doit fallback sur QR pur)
+ * - { svg }  → thème inline custom
+ * - clé      → thème natif via registry
+ */
+export function resolveTheme(
+  theme: ComposeOptions['theme'],
+  pool: ThemeKey[],
+): ThemeAsset | null {
+  if (theme === 'none') return null
+  if (typeof theme === 'object' && theme && 'svg' in theme) {
+    return { key: 'custom' as ThemeKey, label: theme.label ?? 'Custom', motif: theme.svg }
+  }
+  const key: ThemeKey = theme === 'random' ? pickRandomTheme(pool) : theme
+  return getTheme(key)
+}
+
+/**
+ * Génère le SVG composite (theme frame + center white card + QR).
+ * Si theme='none', retourne null — le caller doit fallback sur le QR pur.
+ */
+export async function composeThemedSvg(
+  text: string,
+  opts: ComposeOptions,
+): Promise<string | null> {
+  const themeAsset = resolveTheme(opts.theme, opts.themePool)
+  if (!themeAsset) return null
+
+  const w = opts.width
+
+  // 1. QR SVG inline — margin=0, on lui donne sa propre marge via le cartouche
+  const qrRawSvg = await QRCode.toString(text, {
+    type: 'svg',
+    margin: 0,
+    errorCorrectionLevel: opts.errorCorrectionLevel,
+    color: { dark: opts.darkColor, light: opts.lightColor },
+  })
+
+  // 2. Extrait le viewBox et le contenu interne du QR SVG
+  const vbMatch = qrRawSvg.match(/viewBox="([^"]+)"/)
+  const qrViewBox = vbMatch?.[1] ?? '0 0 21 21'
+  const qrInner = qrRawSvg
+    .replace(/<\?xml[^>]*\?>\s*/, '')
+    .replace(/<svg[^>]*>/, '')
+    .replace(/<\/svg>\s*$/, '')
+
+  // 3. Géométrie : cartouche blanc central + QR à l'intérieur (avec
+  //    une marge de respiration entre le QR et le bord du cartouche)
+  const centerSize = w * opts.centerWhiteRatio
+  const centerX = (w - centerSize) / 2
+  const qrInsideMargin = centerSize * 0.06   // 6% de la taille cartouche
+  const qrSize = centerSize - 2 * qrInsideMargin
+  const qrX = centerX + qrInsideMargin
+  const qrY = centerX + qrInsideMargin
+
+  // 4. Cadre thématique (4 coins) — scale et positions auto-calculés
+  //    depuis centerWhiteRatio (zone marge entre cartouche et bord).
+  const frame = buildThemeFrameSvg(themeAsset, {
+    width: w,
+    color: opts.themeColor,
+    opacity: opts.themeOpacity,
+    framePadding: opts.framePadding,
+    centerWhiteRatio: opts.centerWhiteRatio,
+  })
+
+  // 5. SVG composite final
+  const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${w}" width="${w}" height="${w}">
+  <rect width="${w}" height="${w}" fill="${opts.lightColor}"/>
+  ${frame}
+  <rect x="${centerX}" y="${centerX}" width="${centerSize}" height="${centerSize}" fill="${opts.lightColor}"/>
+  <svg x="${qrX}" y="${qrY}" width="${qrSize}" height="${qrSize}" viewBox="${qrViewBox}" shape-rendering="crispEdges">
+    ${qrInner}
+  </svg>
+</svg>`
+
+  return svg
+}
+
+/**
+ * Génère le PNG composite via @resvg/resvg-js.
+ * Si theme='none', retourne null — le caller doit fallback.
+ */
+export async function composeThemedPng(
+  text: string,
+  opts: ComposeOptions,
+): Promise<Buffer | null> {
+  const svg = await composeThemedSvg(text, opts)
+  if (!svg) return null
+
+  const resvg = new Resvg(svg, {
+    fitTo: { mode: 'width', value: opts.width },
+    background: opts.lightColor,
+  })
+  const rendered = resvg.render()
+  return Buffer.from(rendered.asPng())
+}
+
+/**
+ * Génère un Data URL PNG du composite.
+ * Si theme='none', retourne null — le caller doit fallback.
+ */
+export async function composeThemedDataUrl(
+  text: string,
+  opts: ComposeOptions,
+): Promise<string | null> {
+  const png = await composeThemedPng(text, opts)
+  if (!png) return null
+  return `data:image/png;base64,${png.toString('base64')}`
+}
+
+/** Helper de merge config + opts pour les fonctions de génération. */
+export function mergeComposeOpts(
+  cfg: QrConfigDefaults,
+  opts: Partial<ComposeOptions> = {},
+): ComposeOptions {
+  return {
+    width: opts.width ?? cfg.width,
+    errorCorrectionLevel: opts.errorCorrectionLevel ?? cfg.errorCorrectionLevel,
+    darkColor: opts.darkColor ?? cfg.darkColor,
+    lightColor: opts.lightColor ?? cfg.lightColor,
+    theme: opts.theme ?? cfg.theme,
+    themePool: opts.themePool ?? cfg.themePool,
+    framePadding: opts.framePadding ?? cfg.framePadding,
+    centerWhiteRatio: opts.centerWhiteRatio ?? cfg.centerWhiteRatio,
+    themeOpacity: opts.themeOpacity ?? cfg.themeOpacity,
+    themeColor: opts.themeColor ?? cfg.themeColor,
+  }
+}

package/src/config.ts

@@ -0,0 +1,213 @@
+// @mostajs/qrpanel/config — runtime config layer
+// Author: Dr Hamid MADANI <drmdh@msn.com>
+//
+// Cascade :
+//   1. defaults compilés (ce fichier)
+//   2. .qrconfig.json (ou .qrconfig.js / .qrconfig) à process.cwd()
+//   3. options passées explicitement à l'appel generateQr* (highest)
+//
+// Cache : la lecture du fichier est cachée en mémoire avec invalidation
+// par mtime — édite le fichier, le prochain appel le relit. Pas de
+// watcher (overkill pour ce cas d'usage).
+
+import { readFileSync, existsSync, statSync, writeFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import type { ThemeKey } from './themes.js'
+
+// ─── Types ─────────────────────────────────────────────────────────
+
+export type QrFormat = 'svg' | 'png' | 'dataUrl'
+export type QrEcc = 'L' | 'M' | 'Q' | 'H'
+
+/** Valeurs par défaut éditables dans .qrconfig.json. */
+export interface QrConfigDefaults {
+  /** Master toggle — false = QR pur (legacy), bypass tout le pipeline thématique. */
+  genimage: boolean
+  /** Format préféré quand l'app n'en spécifie pas un. */
+  format: QrFormat
+  /** Largeur/hauteur du canvas SVG/PNG en pixels. */
+  width: number
+  /** Marge blanche autour du QR (en modules). */
+  margin: number
+  /** Niveau de correction d'erreur. 'H' recommandé pour composite (ECC=30%). */
+  errorCorrectionLevel: QrEcc
+  /** Couleur des modules sombres du QR. */
+  darkColor: string
+  /** Couleur du fond (cartouche central). */
+  lightColor: string
+  /** 'random' = tirage dans themePool, ou clé thème, ou 'none' (= image off ponctuel). */
+  theme: ThemeKey | 'random' | 'none'
+  /** Sous-set des thèmes utilisés quand theme='random'. */
+  themePool: ThemeKey[]
+  /**
+   * Position du motif dans la zone-marge (0..1) :
+   *   0   = collé au bord
+   *   0.5 = centre de la marge (optimal — default)
+   *   1   = collé contre le cartouche
+   */
+  framePadding: number
+  /** Taille du cartouche blanc central (proportion du canvas, 0..1). */
+  centerWhiteRatio: number
+  /** Opacité du cadre image (0..1). */
+  themeOpacity: number
+  /** Couleur monochrome du cadre image (CSS color). */
+  themeColor: string
+}
+
+export interface QrConfig {
+  default: QrConfigDefaults
+  /** Thèmes custom — clé arbitraire, override ou ajout. */
+  customThemes?: Record<string, { svg: string; label?: string }>
+}
+
+// ─── Defaults ──────────────────────────────────────────────────────
+
+export const DEFAULT_CONFIG: QrConfig = {
+  default: {
+    genimage: true,
+    format: 'svg',
+    width: 600,
+    margin: 2,
+    errorCorrectionLevel: 'H',
+    darkColor: '#0f172a',
+    lightColor: '#ffffff',
+    theme: 'random',
+    themePool: [
+      'baby', 'animals', 'science', 'physics', 'chemistry', 'math',
+      'nature', 'tech', 'space', 'music', 'book', 'health',
+    ],
+    framePadding: 0.5,
+    centerWhiteRatio: 0.62,
+    themeOpacity: 1.0,
+    themeColor: '#1e293b',
+  },
+}
+
+// ─── Lookup file paths ─────────────────────────────────────────────
+
+const CONFIG_FILES = ['.qrconfig.json', '.qrconfig.js', '.qrconfig'] as const
+
+/** Cherche le fichier config existant à `cwd`, retourne le path absolu ou null. */
+function findConfigFile(cwd: string): string | null {
+  for (const name of CONFIG_FILES) {
+    const p = join(cwd, name)
+    if (existsSync(p)) return p
+  }
+  return null
+}
+
+// ─── Cache ─────────────────────────────────────────────────────────
+
+interface CacheEntry {
+  mtimeMs: number
+  config: QrConfig
+}
+const _cache = new Map<string, CacheEntry>()
+
+// ─── Readers ───────────────────────────────────────────────────────
+
+/**
+ * Décide si l'auto-création silencieuse est activée.
+ * Désactivable via `process.env.QRPANEL_AUTO_ENSURE=false` ou `=0` ou `=off`.
+ * Activée par défaut (depuis 0.3.2).
+ */
+function isAutoEnsureEnabled(): boolean {
+  const v = process.env.QRPANEL_AUTO_ENSURE
+  if (v == null) return true
+  const lower = String(v).toLowerCase().trim()
+  return !(lower === 'false' || lower === '0' || lower === 'off' || lower === 'no')
+}
+
+// Mémoire pour ne pas re-tenter writeFileSync à chaque appel sur un FS readonly
+const _autoEnsureFailedFor = new Set<string>()
+
+/**
+ * Lit la config depuis `cwd` (default `process.cwd()`).
+ *
+ * Comportement (depuis 0.3.2) :
+ *   - Si `.qrconfig.json/.js/.qrconfig` trouvé → lecture + cache mtime.
+ *   - Si absent ET auto-ensure activé → tente writeFileSync silencieux.
+ *   - Si writeFileSync échoue (readonly fs, perm denied) → fallback transparent
+ *     sur DEFAULT_CONFIG, l'échec est mémorisé pour ne pas retenter.
+ *
+ * Désactiver l'auto-ensure : `QRPANEL_AUTO_ENSURE=false`.
+ */
+export function loadQrConfig(cwd: string = process.cwd()): QrConfig {
+  let path = findConfigFile(cwd)
+
+  // Auto-création (0.3.2+) : si pas de fichier et pas déjà échoué une fois ici
+  if (!path && isAutoEnsureEnabled() && !_autoEnsureFailedFor.has(cwd)) {
+    try {
+      path = ensureQrConfig(cwd)
+    } catch {
+      _autoEnsureFailedFor.add(cwd)  // FS readonly / perm denied → on retombe sur defaults sans bruit
+    }
+  }
+
+  if (!path) return DEFAULT_CONFIG
+
+  const stat = statSync(path)
+  const cached = _cache.get(path)
+  if (cached && cached.mtimeMs === stat.mtimeMs) {
+    return cached.config
+  }
+
+  let parsed: Partial<QrConfig>
+  try {
+    if (path.endsWith('.js')) {
+      // require() interop pour .js — sync, pas d'import dynamique
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const mod = (require)(path)
+      parsed = (mod.default ?? mod) as Partial<QrConfig>
+    } else {
+      const raw = readFileSync(path, 'utf-8')
+      parsed = JSON.parse(raw) as Partial<QrConfig>
+    }
+  } catch (e) {
+    throw new Error(`[qrpanel] failed to parse ${path}: ${(e as Error).message}`)
+  }
+
+  const merged: QrConfig = {
+    default: { ...DEFAULT_CONFIG.default, ...(parsed.default ?? {}) },
+    customThemes: parsed.customThemes,
+  }
+
+  _cache.set(path, { mtimeMs: stat.mtimeMs, config: merged })
+  return merged
+}
+
+/**
+ * Crée `.qrconfig.json` à `cwd` s'il n'existe pas. Idempotent.
+ * Retourne le path écrit (ou path existant si déjà là).
+ *
+ * @param overrides — valeurs par défaut à patcher dans le fichier généré.
+ */
+export function ensureQrConfig(
+  cwd: string = process.cwd(),
+  overrides: Partial<QrConfigDefaults> = {},
+): string {
+  const existing = findConfigFile(cwd)
+  if (existing) return existing
+
+  const path = join(resolve(cwd), '.qrconfig.json')
+  const config: QrConfig = {
+    default: { ...DEFAULT_CONFIG.default, ...overrides },
+  }
+
+  const header = '// @mostajs/qrpanel — édite ce fichier pour piloter la génération QR.\n'
+    + '// Le master toggle "genimage": false bypass tout le pipeline thématique.\n'
+    + '// "theme": "random" tire dans themePool ; figer un thème = "theme": "science" par exemple.\n'
+  const body = JSON.stringify(config, null, 2) + '\n'
+
+  // JSON pur (pas de commentaire dans .qrconfig.json) — header en commentaire
+  // de fichier .json est invalide, on l'ignore. On garde juste le JSON.
+  void header
+
+  writeFileSync(path, body, { mode: 0o644 })
+  return path
+}
+
+/** Vide le cache mémoire (utile pour les tests). */
+export function clearConfigCache(): void {
+  _cache.clear()
+}

package/src/index.js

@@ -0,0 +1,6 @@
+// @mostajs/qrpanel — point d'entrée. Author: Dr Hamid MADANI <drmdh@msn.com>
+// Encodeur QR pur JS (versions 1→10, niveau M, v≥7 avec info de version) + figures + payloads typés.
+// NB : qrPng (sortie PNG) est sous le sous-chemin ./png (dépend de node:zlib) → import séparé pour rester browser-safe ici.
+export * from './qr-svg.js';      // qrMatrix, qrSvg, qrLive
+export * from './qr-payloads.js'; // qrWifi, qrTel, qrSms, qrEmail, qrGeo, qrUrl, qrMeCard, qrVCard, qrEvent
+export * from './qr-figures.js';  // qrLogo, qrCard, qrBadge, qrSheet

package/src/index.ts

@@ -0,0 +1,16 @@
+// @mostajs/qrpanel — barrel
+// Author: Dr Hamid MADANI <drmdh@msn.com>
+//
+// Re-export complet pour les consumers qui ne séparent pas client/server.
+// Préfère `@mostajs/qrpanel/server` ou `@mostajs/qrpanel/client` pour
+// éviter d'inclure React côté serveur ou qrcode côté client.
+
+export * from './server.js'
+export * from './client.js'
+export {
+  type ThemeKey, type ThemeAsset, THEME_KEYS, listThemes, getTheme,
+} from './themes.js'
+export {
+  type QrConfig, type QrConfigDefaults, type QrFormat, type QrEcc,
+  DEFAULT_CONFIG, loadQrConfig, ensureQrConfig, clearConfigCache,
+} from './config.js'

package/src/qr-decode.js

@@ -0,0 +1,23 @@
+// @mostajs/qrpanel — DÉCODEUR QR Node (moteur jsQR). Author: Dr Hamid MADANI <drmdh@msn.com>
+// Décodage côté Node/serveur (tests, traitement d'images). Pour la CAMÉRA navigateur,
+// utiliser l'asset `@mostajs/qrpanel/browser-scan` (window.QRPanel.scan, moteur html5-qrcode).
+// Sous-chemin dédié `@mostajs/qrpanel/decode` (dépend de `jsqr`) pour garder le point
+// d'entrée principal browser-safe et sans dépendance (comme ./png pour node:zlib).
+import jsQR from 'jsqr';
+
+/**
+ * Décode une image RGBA en texte de QR.
+ * @param {{data:Uint8ClampedArray,width:number,height:number}|Uint8ClampedArray} image
+ *        ImageData (ou tableau RGBA brut, alors fournir width/height).
+ * @param {number} [width]  largeur si `image` est un tableau brut.
+ * @param {number} [height] hauteur si `image` est un tableau brut.
+ * @returns {string|null}   texte encodé, ou null si aucun QR lisible.
+ */
+export function decodeQr(image, width, height) {
+  const data = image && image.data ? image.data : image;
+  const w = image && image.width != null ? image.width : width;
+  const h = image && image.height != null ? image.height : height;
+  if (!data || !w || !h) return null;
+  const res = jsQR(data, w, h);
+  return res ? res.data : null;
+}

package/src/qr-figures.js

@@ -0,0 +1,46 @@
+// @mostajs/qrpanel — figures composées : logo central, carte/badge imprimable, planche. Author: Dr Hamid MADANI <drmdh@msn.com>
+import { qrSvg, qrLive } from './qr-svg.js';
+
+const _esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+/**
+ * QR avec LOGO au centre (branding). ⚠️ occulte le centre → garder un payload COURT (basse version) et un logo PETIT.
+ *   qrLogo(text, { logo (URL/dataURL), logoScale=0.2, scale=6, margin=4, dark, light })
+ */
+export function qrLogo(text, { logo = '', logoScale = 0.2, scale = 6, margin = 4, dark, light } = {}) {
+  const svg = qrSvg(text, { scale, margin, ...(dark ? { dark } : {}), ...(light ? { light } : {}) });
+  const dim = Number((svg.match(/width="(\d+)"/) || [])[1]) || 0;
+  const ls = Math.round(dim * logoScale), pad = Math.max(2, Math.round(ls * 0.12));
+  const x = Math.round((dim - ls) / 2);
+  const overlay = `<rect x="${x - pad}" y="${x - pad}" width="${ls + 2 * pad}" height="${ls + 2 * pad}" rx="${pad}" fill="${light || '#fff'}"/>` +
+    (logo ? `<image href="${_esc(logo)}" x="${x}" y="${x}" width="${ls}" height="${ls}" preserveAspectRatio="xMidYMid meet"/>` : '');
+  return svg.replace('</svg>', overlay + '</svg>');
+}
+
+/** Carte imprimable : QR + titre + sous-titre (billet, lien public). */
+export function qrCard(text, { title = '', subtitle = '', logo = '', scale = 6, margin = 3, maxWidth = 240 } = {}) {
+  const qr = logo ? qrLogo(text, { logo, scale, margin }) : qrSvg(text, { scale, margin });
+  return `<div style="display:inline-block;border:1px solid #dfe3ea;border-radius:12px;padding:14px;text-align:center;font-family:system-ui,sans-serif;background:#fff">
+    ${title ? `<div style="font-weight:700;font-size:15px;color:#13294b;margin-bottom:6px">${_esc(title)}</div>` : ''}
+    <div style="max-width:${maxWidth}px;margin:auto">${qr}</div>
+    ${subtitle ? `<div style="font-size:12px;color:#667085;margin-top:6px">${_esc(subtitle)}</div>` : ''}
+  </div>`;
+}
+
+/** Badge événement : bandeau événement + nom/rôle + QR (contrôle d'accès). */
+export function qrBadge(text, { name = '', role = '', event = '', scale = 5, margin = 3 } = {}) {
+  return `<div style="display:inline-block;width:260px;border:1px solid #cfd5df;border-radius:14px;overflow:hidden;font-family:system-ui,sans-serif;background:#fff;text-align:center">
+    ${event ? `<div style="background:#13294b;color:#fff;padding:8px;font-weight:700;font-size:13px">${_esc(event)}</div>` : ''}
+    <div style="padding:12px">
+      <div style="font-size:18px;font-weight:800;color:#13294b">${_esc(name)}</div>
+      ${role ? `<div style="font-size:12px;color:#667085;margin-bottom:8px">${_esc(role)}</div>` : ''}
+      <div style="width:208px;margin:0 auto;line-height:0">${qrSvg(text, { scale, margin }).replace('<svg ', '<svg style="display:block;width:100%;height:auto" ')}</div>
+    </div>
+  </div>`;
+}
+
+/** Planche de QR (impression en lot) : items = [{ data, caption? }]. */
+export function qrSheet(items = [], { cols = 3, scale = 4, margin = 2, maxWidth = 200 } = {}) {
+  const cells = (items || []).map((it) => `<div style="break-inside:avoid;padding:8px">${qrLive(it.data, it.caption || '', { scale, margin, maxWidth })}</div>`).join('');
+  return `<div style="display:grid;grid-template-columns:repeat(${cols},1fr);gap:10px;font-family:system-ui,sans-serif">${cells}</div>`;
+}