@mostajs/qrpanel 0.5.0 → 0.6.0

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>`;
+}

package/src/qr-image.tsx

@@ -0,0 +1,105 @@
+// @mostajs/qrpanel/qr-image — composant QR généré côté navigateur
+// Author: Dr Hamid MADANI <drmdh@msn.com>
+//
+// QR code généré 100% dans le navigateur (data URL via `qrcode`), sans
+// appel réseau ni round-trip serveur. Complète les deux briques
+// existantes de qrpanel :
+//   - `<QrPanel>` (./client) attend un `qrSrc` déjà fourni par l'app.
+//   - `generateQr*` (./server) génère côté Node uniquement (@resvg natif).
+// `<QrImage>` couvre le cas manquant : génération locale, côté client.
+//
+// Cas d'usage clé — COEP `require-corp` : sous cross-origin isolation
+// (requise par ex. par ffmpeg.wasm / SharedArrayBuffer), une image QR
+// servie par un service externe est bloquée par la politique. La
+// génération locale est alors la seule option côté client.
+//
+// Sub-export dédié (`@mostajs/qrpanel/qr-image`) : `qrcode` n'est
+// embarqué dans le bundle client que pour les consumers qui l'importent.
+
+'use client'
+
+import { useEffect, useState } from 'react'
+import QRCode from 'qrcode'
+
+export interface QrDataUrlOptions {
+  /** Côté de l'image en pixels. Défaut 200. */
+  size?: number
+  /** Marge blanche autour du QR (en modules). Défaut 2. */
+  margin?: number
+  /** Correction d'erreur : L 7 % | M 15 % | Q 25 % | H 30 %. Défaut 'M'. */
+  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'
+  /** Couleur des modules sombres. Défaut '#0f172a'. */
+  darkColor?: string
+  /** Couleur du fond. Défaut '#ffffff'. */
+  lightColor?: string
+}
+
+export interface UseQrDataUrlResult {
+  /** Data URL `data:image/png;base64,…` du QR, ou '' tant que non prêt. */
+  src: string
+  /** True pendant la génération. */
+  loading: boolean
+  /** Message d'erreur si la génération a échoué, sinon null. */
+  error: string | null
+}
+
+/** Hook : génère le data URL d'un QR localement (navigateur). */
+export function useQrDataUrl(data: string, opts: QrDataUrlOptions = {}): UseQrDataUrlResult {
+  const {
+    size = 200, margin = 2, errorCorrectionLevel = 'M',
+    darkColor = '#0f172a', lightColor = '#ffffff',
+  } = opts
+  const [src, setSrc] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let alive = true
+    setLoading(true); setError(null); setSrc('')
+    QRCode.toDataURL(data, {
+      width: size, margin, errorCorrectionLevel,
+      color: { dark: darkColor, light: lightColor },
+    })
+      .then((url) => { if (alive) { setSrc(url); setLoading(false) } })
+      .catch((e) => {
+        if (alive) { setError(e?.message || 'QR generation failed'); setLoading(false) }
+      })
+    return () => { alive = false }
+  }, [data, size, margin, errorCorrectionLevel, darkColor, lightColor])
+
+  return { src, loading, error }
+}
+
+export interface QrImageProps extends QrDataUrlOptions {
+  /** Donnée encodée dans le QR (URL, texte…). */
+  data: string
+  alt?: string
+  style?: React.CSSProperties
+  className?: string
+}
+
+/** QR code généré localement et rendu en `<img>` data-URL (COEP-safe). */
+export default function QrImage({
+  data, alt = 'QR code', style, className, ...opts
+}: QrImageProps) {
+  const size = opts.size ?? 200
+  const { src, loading, error } = useQrDataUrl(data, opts)
+
+  const box: React.CSSProperties = {
+    width: size, height: size, display: 'flex',
+    alignItems: 'center', justifyContent: 'center',
+    background: '#fff', borderRadius: 6, border: '1px solid #e2e8f0',
+    fontSize: 11, color: '#94a3b8', textAlign: 'center',
+    ...style,
+  }
+
+  if (error) return <div style={box} className={className}>QR indisponible</div>
+  if (loading || !src) return <div style={box} className={className} aria-busy="true">…</div>
+  return (
+    <img
+      src={src} alt={alt} width={size} height={size}
+      style={{ background: '#fff', borderRadius: 6, display: 'block', ...style }}
+      className={className}
+    />
+  )
+}

package/src/qr-payloads.js

@@ -0,0 +1,59 @@
+// @mostajs/qrpanel — formats de charge utile QR « scan-and-act ». Author: Dr Hamid MADANI <drmdh@msn.com>
+// Chaque helper renvoie la CHAÎNE normalisée à encoder (via qrSvg / qrLive / qrPng). Pur, zéro dépendance.
+
+const escSep = (s) => String(s ?? '').replace(/([\\;,:"])/g, '\\$1'); // échappe les séparateurs des formats compacts
+
+/** WiFi : scan = rejoindre le réseau. security ∈ WPA|WEP|nopass. */
+export function qrWifi({ ssid, password = '', security = 'WPA', hidden = false } = {}) {
+  return `WIFI:T:${security};S:${escSep(ssid)};P:${escSep(password)};${hidden ? 'H:true;' : ''};`;
+}
+/** Téléphone : tel:+213… */
+export const qrTel = (num) => `tel:${String(num ?? '').replace(/\s+/g, '')}`;
+/** SMS pré-rempli : SMSTO:num:message */
+export const qrSms = (num, body = '') => `SMSTO:${String(num ?? '').replace(/\s+/g, '')}:${body}`;
+/** Email pré-rempli : mailto:adresse?subject=&body= */
+export function qrEmail(to, { subject = '', body = '' } = {}) {
+  const q = []; if (subject) q.push('subject=' + encodeURIComponent(subject)); if (body) q.push('body=' + encodeURIComponent(body));
+  return `mailto:${to ?? ''}${q.length ? '?' + q.join('&') : ''}`;
+}
+/** Géolocalisation : geo:lat,lng (lieu d'un salon/atelier). */
+export const qrGeo = (lat, lng) => `geo:${lat},${lng}`;
+/** URL (normalise : ajoute https:// si absent). */
+export const qrUrl = (u) => (/^[a-z]+:\/\//i.test(u) ? u : `https://${u}`);
+
+/** MeCard (compact, très lisible par les scanners) : carte de contact. */
+export function qrMeCard({ name, tel, email, url, note } = {}) {
+  let o = 'MECARD:';
+  if (name) o += `N:${escSep(name)};`;
+  if (tel) o += `TEL:${escSep(tel)};`;
+  if (email) o += `EMAIL:${escSep(email)};`;
+  if (url) o += `URL:${escSep(url)};`;
+  if (note) o += `NOTE:${escSep(note)};`;
+  return o + ';';
+}
+/** vCard 3.0 (riche) : carte de contact d'un sponsor/annonceur. */
+export function qrVCard({ name, org, title, tel, email, url, adr, note } = {}) {
+  const L = ['BEGIN:VCARD', 'VERSION:3.0'];
+  if (name) L.push(`FN:${name}`, `N:${name};;;;`);
+  if (org) L.push(`ORG:${org}`);
+  if (title) L.push(`TITLE:${title}`);
+  if (tel) L.push(`TEL:${tel}`);
+  if (email) L.push(`EMAIL:${email}`);
+  if (url) L.push(`URL:${url}`);
+  if (adr) L.push(`ADR:;;${adr};;;;`);
+  if (note) L.push(`NOTE:${note}`);
+  L.push('END:VCARD');
+  return L.join('\n');
+}
+/** Événement calendrier (VEVENT) : « ajouter ce live/atelier à mon agenda ». start/end = Date | ISO. */
+export function qrEvent({ title, start, end, location = '', description = '' } = {}) {
+  const fmt = (d) => (d instanceof Date ? d : new Date(d)).toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+  const L = ['BEGIN:VEVENT'];
+  if (title) L.push(`SUMMARY:${title}`);
+  if (start) L.push(`DTSTART:${fmt(start)}`);
+  if (end) L.push(`DTEND:${fmt(end)}`);
+  if (location) L.push(`LOCATION:${location}`);
+  if (description) L.push(`DESCRIPTION:${description}`);
+  L.push('END:VEVENT');
+  return L.join('\n');
+}