@mostajs/qrpanel 0.5.0 → 0.6.0

package/dist/qr-svg.js

@@ -0,0 +1,165 @@
+// @mostajs/qrpanel/qr-svg — ARTEFACT GÉNÉRÉ depuis src/qr-svg.js (pur JS, copie 1:1) — ne pas éditer ici. Author: Dr Hamid MADANI <drmdh@msn.com>
+// Complète qrpanel (qr-image = navigateur via `qrcode` ; server.js = @resvg natif) par un encodeur PUR JS server-side, idéal apps zéro-dép.
+// Modes numérique & octet (byte/UTF-8), niveau de correction M, versions 1→10 (auto). Reed-Solomon GF(256), 8 masques + pénalité.
+// Vérifié contre le vecteur de référence publié (« 01234567 », v1-M → 10 mots de code EC connus). Sortie : matrice booléenne + SVG.
+
+// ── GF(256) — corps de Galois, primitif 0x11d (x^8+x^4+x^3+x^2+1). ──
+const EXP = new Array(512), LOG = new Array(256);
+(() => { let x = 1; for (let i = 0; i < 255; i++) { EXP[i] = x; LOG[x] = i; x <<= 1; if (x & 0x100) x ^= 0x11d; } for (let i = 255; i < 512; i++) EXP[i] = EXP[i - 255]; })();
+const gmul = (a, b) => (a === 0 || b === 0) ? 0 : EXP[LOG[a] + LOG[b]];
+
+// Polynôme générateur Reed-Solomon de degré `n`.
+function rsGenPoly(n) {
+  let g = [1];
+  for (let i = 0; i < n; i++) { const ng = new Array(g.length + 1).fill(0); for (let j = 0; j < g.length; j++) { ng[j] ^= gmul(g[j], 1); ng[j + 1] ^= gmul(g[j], EXP[i]); } g = ng; }
+  return g;
+}
+// Mots de code de correction d'erreur pour `data` (octets) avec `ecLen` symboles.
+function rsEncode(data, ecLen) {
+  const gen = rsGenPoly(ecLen); const res = new Array(ecLen).fill(0);   // gen a ecLen+1 coeffs (gen[0]=1, ignoré dans la division)
+  for (const d of data) { const factor = d ^ res[0]; res.shift(); res.push(0); if (factor !== 0) for (let i = 0; i < ecLen; i++) res[i] ^= gmul(gen[i + 1], factor); }
+  return res;
+}
+
+// ── Tables niveau M, versions 1→10 : [totalDataCodewords, ecPerBlock, [ [nbBlocks, dataPerBlock], ... ] ]. ──
+const VERSIONS_M = {
+  1: [16, 10, [[1, 16]]], 2: [28, 16, [[1, 28]]], 3: [44, 26, [[1, 44]]], 4: [64, 18, [[2, 32]]],
+  5: [86, 24, [[2, 43]]], 6: [108, 16, [[4, 27]]], 7: [124, 18, [[4, 31]]], 8: [154, 22, [[2, 38], [2, 39]]],
+  9: [182, 22, [[3, 36], [2, 37]]], 10: [216, 26, [[4, 43], [1, 44]]],
+};
+// Positions des motifs d'alignement (centres) par version.
+const ALIGN = { 1: [], 2: [6, 18], 3: [6, 22], 4: [6, 26], 5: [6, 30], 6: [6, 34], 7: [6, 22, 38], 8: [6, 24, 42], 9: [6, 26, 46], 10: [6, 28, 50] };
+const sizeOf = (v) => 17 + 4 * v;
+
+const isNumeric = (s) => /^[0-9]+$/.test(s);
+
+// ── Encodage des données (bitstream) selon le mode. ──
+function encodeData(text, version, totalDataCw) {
+  const bits = [];
+  const push = (val, len) => { for (let i = len - 1; i >= 0; i--) bits.push((val >> i) & 1); };
+  if (isNumeric(text)) {
+    push(0b0001, 4);                                   // mode numérique
+    push(text.length, version < 10 ? 10 : 12);
+    for (let i = 0; i < text.length; i += 3) { const chunk = text.substr(i, 3); push(parseInt(chunk, 10), chunk.length === 3 ? 10 : chunk.length === 2 ? 7 : 4); }
+  } else {
+    const bytes = Buffer.from(text, 'utf8');
+    push(0b0100, 4);                                   // mode octet
+    push(bytes.length, version < 10 ? 8 : 16);
+    for (const b of bytes) push(b, 8);
+  }
+  const cap = totalDataCw * 8;
+  for (let i = 0; i < 4 && bits.length < cap; i++) bits.push(0);   // terminateur
+  while (bits.length % 8 !== 0) bits.push(0);                       // alignement octet
+  const pads = [0xec, 0x11]; let p = 0;
+  while (bits.length < cap) { push(pads[p % 2], 8); p++; }
+  const cw = []; for (let i = 0; i < bits.length; i += 8) { let b = 0; for (let j = 0; j < 8; j++) b = (b << 1) | bits[i + j]; cw.push(b); }
+  return cw;
+}
+
+// Choisit la plus petite version (≤10) qui contient `text`.
+function pickVersion(text) {
+  const len = isNumeric(text) ? null : Buffer.from(text, 'utf8').length;
+  for (let v = 1; v <= 10; v++) {
+    const totalData = VERSIONS_M[v][0];
+    // estimation grossière de capacité : entête (~4 + count bits) puis données
+    const headerBits = 4 + (v < 10 ? (isNumeric(text) ? 10 : 8) : (isNumeric(text) ? 12 : 16));
+    const dataBits = isNumeric(text) ? Math.ceil(text.length / 3) * 10 : (len * 8);
+    if (headerBits + dataBits <= totalData * 8) return v;
+  }
+  throw new Error('contenu trop long pour QR v≤10 (raccourcir l\'URL/jeton)');
+}
+
+// Entrelace données + EC par blocs (spec QR).
+function interleave(dataCw, version) {
+  const [, ecLen, groups] = VERSIONS_M[version];
+  const blocks = []; let idx = 0;
+  for (const [nb, dpb] of groups) for (let i = 0; i < nb; i++) { const d = dataCw.slice(idx, idx + dpb); idx += dpb; blocks.push({ d, e: rsEncode(d, ecLen) }); }
+  const maxD = Math.max(...blocks.map((b) => b.d.length));
+  const out = [];
+  for (let i = 0; i < maxD; i++) for (const b of blocks) if (i < b.d.length) out.push(b.d[i]);
+  for (let i = 0; i < ecLen; i++) for (const b of blocks) out.push(b.e[i]);
+  return out;
+}
+
+// ── Matrice : motifs de repérage, séparateurs, timing, alignement, module sombre, réservé format. ──
+function buildMatrix(version) {
+  const n = sizeOf(version);
+  const m = Array.from({ length: n }, () => new Array(n).fill(null));   // null = libre
+  const fn = Array.from({ length: n }, () => new Array(n).fill(false)); // true = fonction (non masquable)
+  const set = (r, c, v) => { m[r][c] = v ? 1 : 0; fn[r][c] = true; };
+  const finder = (r, c) => { for (let i = -1; i <= 7; i++) for (let j = -1; j <= 7; j++) { const rr = r + i, cc = c + j; if (rr < 0 || rr >= n || cc < 0 || cc >= n) continue; const inb = i >= 0 && i <= 6 && j >= 0 && j <= 6; const ring = i === 0 || i === 6 || j === 0 || j === 6; const core = i >= 2 && i <= 4 && j >= 2 && j <= 4; set(rr, cc, inb && (ring || core)); } };
+  finder(0, 0); finder(0, n - 7); finder(n - 7, 0);
+  for (let i = 0; i < n; i++) { if (m[6][i] === null) set(6, i, i % 2 === 0); if (m[i][6] === null) set(i, 6, i % 2 === 0); }   // timing
+  const ac = ALIGN[version];
+  for (const r of ac) for (const c of ac) { if ((r <= 7 && c <= 7) || (r <= 7 && c >= n - 8) || (r >= n - 8 && c <= 7)) continue; for (let i = -2; i <= 2; i++) for (let j = -2; j <= 2; j++) set(r + i, c + j, Math.max(Math.abs(i), Math.abs(j)) !== 1); }
+  set(n - 8, 8, 1);   // module sombre
+  // Réserve les zones d'info de format (sans valeur définitive) → marquées fonction.
+  for (let i = 0; i < 9; i++) { if (m[8][i] === null) { m[8][i] = 0; fn[8][i] = true; } if (m[i][8] === null) { m[i][8] = 0; fn[i][8] = true; } }
+  for (let i = 0; i < 8; i++) { if (m[8][n - 1 - i] === null) { m[8][n - 1 - i] = 0; fn[8][n - 1 - i] = true; } if (m[n - 1 - i][8] === null) { m[n - 1 - i][8] = 0; fn[n - 1 - i][8] = true; } }
+  return { m, fn, n };
+}
+
+// Place le bitstream en zigzag (colonnes de 2, de droite à gauche, en sautant la colonne 6).
+function placeData(m, fn, n, bytes) {
+  let bitIdx = 0; const bitsArr = []; for (const b of bytes) for (let i = 7; i >= 0; i--) bitsArr.push((b >> i) & 1);
+  let up = true;
+  for (let col = n - 1; col > 0; col -= 2) {
+    if (col === 6) col--;
+    for (let k = 0; k < n; k++) { const row = up ? n - 1 - k : k; for (const c of [col, col - 1]) { if (!fn[row][c]) { m[row][c] = bitIdx < bitsArr.length ? bitsArr[bitIdx] : 0; bitIdx++; } } }
+    up = !up;
+  }
+}
+
+const MASKS = [
+  (r, c) => (r + c) % 2 === 0, (r) => r % 2 === 0, (r, c) => c % 3 === 0, (r, c) => (r + c) % 3 === 0,
+  (r, c) => (Math.floor(r / 2) + Math.floor(c / 3)) % 2 === 0, (r, c) => ((r * c) % 2) + ((r * c) % 3) === 0,
+  (r, c) => (((r * c) % 2) + ((r * c) % 3)) % 2 === 0, (r, c) => (((r + c) % 2) + ((r * c) % 3)) % 2 === 0,
+];
+function applyMask(m, fn, n, maskFn) { const o = m.map((row) => row.slice()); for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (!fn[r][c] && maskFn(r, c)) o[r][c] ^= 1; return o; }
+
+// Info de format (niveau M = bits 00) + masque → 15 bits BCH, placée aux deux emplacements.
+function placeFormat(m, n, maskId) {
+  const data = (0b00 << 3) | maskId; let bch = data << 10;
+  for (let i = 14; i >= 10; i--) if ((bch >> i) & 1) bch ^= 0b10100110111 << (i - 10);
+  const bits = (((data << 10) | bch) ^ 0b101010000010010);
+  const get = (i) => (bits >> i) & 1;
+  for (let i = 0; i <= 5; i++) m[8][i] = get(i);
+  m[8][7] = get(6); m[8][8] = get(7); m[7][8] = get(8);
+  for (let i = 9; i <= 14; i++) m[14 - i][8] = get(i);
+  for (let i = 0; i <= 7; i++) m[n - 1 - i][8] = get(i);
+  for (let i = 8; i <= 14; i++) m[8][n - 15 + i] = get(i);
+}
+
+function penalty(m, n) {
+  let p = 0;
+  for (let r = 0; r < n; r++) for (const line of [m[r], m.map((x) => x[r])]) { let run = 1; for (let c = 1; c < n; c++) { if (line[c] === line[c - 1]) { run++; if (run === 5) p += 3; else if (run > 5) p++; } else run = 1; } }
+  for (let r = 0; r < n - 1; r++) for (let c = 0; c < n - 1; c++) if (m[r][c] === m[r][c + 1] && m[r][c] === m[r + 1][c] && m[r][c] === m[r + 1][c + 1]) p += 3;
+  let dark = 0; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) dark += m[r][c]; const ratio = (dark * 100) / (n * n); p += Math.floor(Math.abs(ratio - 50) / 5) * 10;
+  return p;
+}
+
+/** Encode `text` en matrice QR (booléens true=module sombre). Niveau M, version auto ≤10. */
+export function qrMatrix(text) {
+  const version = pickVersion(text);
+  const totalData = VERSIONS_M[version][0];
+  const dataCw = encodeData(text, version, totalData);
+  const finalCw = interleave(dataCw, version);
+  const { m, fn, n } = buildMatrix(version);
+  placeData(m, fn, n, finalCw);
+  let best = null, bestScore = Infinity, bestMask = 0;
+  for (let mask = 0; mask < 8; mask++) { const cand = applyMask(m, fn, n, MASKS[mask]); placeFormat(cand, n, mask); const s = penalty(cand, n); if (s < bestScore) { bestScore = s; best = cand; bestMask = mask; } }
+  return { matrix: best.map((row) => row.map((v) => v === 1)), size: n, version, mask: bestMask };
+}
+
+/** Rend `text` en SVG QR (scannable). `scale` px/module, `margin` modules de zone calme. */
+export function qrSvg(text, { scale = 4, margin = 4, dark = '#000', light = '#fff' } = {}) {
+  const { matrix, size } = qrMatrix(text);
+  const dim = (size + margin * 2) * scale;
+  let rects = '';
+  for (let r = 0; r < size; r++) for (let c = 0; c < size; c++) if (matrix[r][c]) rects += `<rect x="${(c + margin) * scale}" y="${(r + margin) * scale}" width="${scale}" height="${scale}"/>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${dim}" height="${dim}" viewBox="0 0 ${dim} ${dim}" shape-rendering="crispEdges" role="img" aria-label="QR code"><rect width="${dim}" height="${dim}" fill="${light}"/><g fill="${dark}">${rects}</g></svg>`;
+}
+
+// Exposés pour les tests (vérification contre le vecteur de référence publié).
+export const _internal = { rsEncode, encodeData, interleave, VERSIONS_M };
+export default { qrMatrix, qrSvg };

package/llms.txt

@@ -1,103 +1,20 @@
-# @mostajs/qrpanel — fiche LLM
-> Panneau QR code : générateur serveur PNG/SVG à 12 thèmes (image-as-frame, ECC=H), piloté par config (.qrconfig.json), sans chromium, + composant React <QrPanel> avec copier/partager/mailto.
-
-- Version: 0.5.0 · Licence: AGPL-3.0-or-later · Auteur: Dr Hamid MADANI <drmdh@msn.com>
-- Chemin: mostajs/mosta-qrpanel · Statut audit: complet (dist/)
-
-## RÔLE
-Génère des QR codes pour apps Node/React. Trois briques complémentaires : (1) serveur —
-PNG/SVG/DataURL thématiques rendus côté Node via @resvg/resvg-js (pas de chromium) ;
-(2) client `<QrPanel>` — panneau d'invitation interactif (QR + lien + copier/partager) ;
-(3) `<QrImage>` — génération locale navigateur, COEP-safe. Inclut un CLI `qrpanel`.
-
-## INSTALLATION
-npm i @mostajs/qrpanel
-Dépendance directe : qrcode. Peers optionnelles : react (>=18 <20) pour ./client et
-./qr-image ; @mostajs/auth + @resvg/resvg-js requis uniquement par ./server.
-
-## EXPORTS
-- ./server : generateQrPng, generateQrSvg, generateQrDataUrl, buildInviteUrls + (ré-export) themes & config
-- ./client : QrPanel
-- ./qr-image : QrImage (default), useQrDataUrl
-- ./themes : THEMES, THEME_KEYS, listThemes, getTheme, pickRandomTheme, buildThemeFrameSvg
-- ./config : DEFAULT_CONFIG, loadQrConfig, ensureQrConfig, clearConfigCache
-- "." (barrel) : ré-exporte server + client + themes + config
-- bin `qrpanel` → CLI
-
-## EXPORTS PAR SOUS-CHEMIN
-- "." → barrel complet (server + client + themes + config) — ⚠ tire le code natif serveur
-- "./server" → generateQr*, buildInviteUrls, themes, config (Node uniquement)
-- "./client" → QrPanel (React, qrSrc fourni par l'app)
-- "./qr-image" → QrImage, useQrDataUrl (React, génération locale)
-- "./themes" → registry des 12 thèmes natifs
-- "./config" → chargement/écriture de .qrconfig.json
-
-## API — SIGNATURES
-- function generateQrPng(text: string, opts?: QrOptions): Promise<Buffer>
-- function generateQrSvg(text: string, opts?: QrOptions): Promise<string>
-- function generateQrDataUrl(text: string, opts?: QrOptions): Promise<string>   // data:image/png;base64
-- function buildInviteUrls(opts: BuildInviteUrlsOptions): InviteUrls
-- function QrPanel(props: QrPanelProps): JSX.Element | null
-- function QrImage(props: QrImageProps): JSX.Element
-- function useQrDataUrl(data: string, opts?: QrDataUrlOptions): { src: string; loading: boolean; error: string|null }
-- function listThemes(): ThemeKey[]
-- function getTheme(key: ThemeKey): ThemeAsset
-- function pickRandomTheme(pool?: ThemeKey[]): ThemeKey
-- function buildThemeFrameSvg(theme: ThemeAsset, opts: BuildFrameOpts): string
-- function loadQrConfig(cwd?: string): QrConfig
-- function ensureQrConfig(cwd?: string, overrides?: Partial<QrConfigDefaults>): string
-- function clearConfigCache(): void
-
-## TYPES CLÉS
-- QrOptions { width?=600; margin?=2; errorCorrectionLevel?='L'|'M'|'Q'|'H'; darkColor?='#0f172a';
-    lightColor?='#ffffff'; genimage?: boolean; theme?: ThemeKey|'random'|'none'|{ svg; label? };
-    themePool?: ThemeKey[]; framePadding?=0.13; centerWhiteRatio?=0.62; themeOpacity?=1; themeColor?='#1e293b' }
-- BuildInviteUrlsOptions { baseUrl: string; directPath: string; inviteSecret: string|Buffer;
-    inviteId: string; ttlMs?; invitePath?='/invite'; inviteMeta? }
-- InviteUrls { directUrl: string; inviteUrl: string; inviteToken: string }
-- QrPanelMode { key; label; url; qrSrc: string; description? }
-- QrPanelProps { modes: QrPanelMode[]; initialModeIndex?=0; title?; mailSubject?; mailBodyTemplate?;
-    mailTo?: string[]|string; mailBcc?: string[]|string; qrSize?=260; className? }
-- QrImageProps extends QrDataUrlOptions { data: string; alt?; style?; className? }
-- QrDataUrlOptions { size?=200; margin?=2; errorCorrectionLevel?='M'; darkColor?='#0f172a'; lightColor?='#ffffff' }
-- ThemeKey = 'baby'|'animals'|'science'|'physics'|'chemistry'|'math'|'nature'|'tech'|'space'|'music'|'book'|'health'
-- ThemeAsset { key: ThemeKey; label: string; motif: string }
-- QrConfig { default: QrConfigDefaults; customThemes?: Record<string,{svg;label?}> }
-- QrFormat = 'svg'|'png'|'dataUrl' ; QrEcc = 'L'|'M'|'Q'|'H'
-
-## PATTERN
-```ts
-// Serveur — QR thématique en route API (Node uniquement)
-import { generateQrPng } from '@mostajs/qrpanel/server';
-const png = await generateQrPng('https://app.example.com/x', { theme: 'tech', errorCorrectionLevel: 'H' });
-
-// Client — panneau d'invitation
-import { QrPanel } from '@mostajs/qrpanel/client';
-<QrPanel modes={[{ key: 'direct', label: 'Lien', url, qrSrc: '/api/qr?u=' + url }]} />
-
-// Génération locale navigateur (COEP-safe)
-import QrImage from '@mostajs/qrpanel/qr-image';
-<QrImage data="https://example.com" size={240} />
-```
-
-## DÉPEND DE
-- @mostajs/auth (peer optionnel, >=3.2.0) — requis par buildInviteUrls (signature HMAC du token)
-- @resvg/resvg-js (peer optionnel, >=2.6.2) — requis par generateQr* (rasterisation SVG → PNG)
-- react (peer optionnel, >=18 <20) — pour ./client et ./qr-image
-
-## PIÈGES
-- Ne PAS importer le barrel "." ni "./server" dans un bundle navigateur : @resvg/resvg-js
-  est un binaire natif Node. Côté client, utiliser exclusivement ./client ou ./qr-image.
-- `<QrPanel>` NE génère PAS le QR : l'app fournit `qrSrc` (endpoint API ou data URL).
-- `<QrPanel>` requiert Tailwind (style compilé par l'app) ; `<QrImage>` est style-neutre.
-- `genimage: false` court-circuite tout le pipeline thématique (QR pur, comportement legacy).
-- `theme: 'H'` (ECC=30%) recommandé pour les thèmes image-as-frame ; un ECC plus bas peut
-  rendre le QR illisible avec un cadre.
-- `loadQrConfig` peut auto-créer `.qrconfig.json` à `process.cwd()` ; désactiver via
-  `QRPANEL_AUTO_ENSURE=false`. Échec d'écriture → fallback transparent sur DEFAULT_CONFIG.
-- `mailBcc` recommandé pour les cohortes (les destinataires ne se voient pas) vs `mailTo`.
-
-## RÉFÉRENCES
-- README.md
-- CHANGELOG.md
-- src/, dist/cli.js (CLI `npx qrpanel`)
+# @mostajs/qrpanel
+Encodeur QR pur JS (zéro-dép) + figures + payloads typés. Versions 1→10, niveau M, v≥7 avec INFO DE VERSION (sinon QR rejeté). Reed-Solomon GF(256), 8 masques.
+## exports (. = src/index.js)
+qrMatrix(text) → {matrix,size}. qrSvg(text,{scale=4,margin=4,dark,light}) → <svg>. qrLive(text,caption?,{scale=6,margin=3,maxWidth=240,dark,light}) → <figure> scannable + légende.
+## ./payloads (chaînes scan-and-act)
+qrWifi({ssid,password,security=WPA,hidden}) · qrTel(num) · qrSms(num,body) · qrEmail(to,{subject,body}) · qrGeo(lat,lng) · qrUrl(u) · qrMeCard({name,tel,email,url,note}) · qrVCard({name,org,title,tel,email,url,adr,note}) · qrEvent({title,start,end,location,description}) [VEVENT]
+## ./figures
+qrLogo(text,{logo,logoScale=.2,scale,margin,dark,light}) → SVG + logo central (⚠ payload court). qrCard(text,{title,subtitle,logo}) · qrBadge(text,{name,role,event}) · qrSheet([{data,caption}],{cols=3})
+## ./png (Node, node:zlib)
+qrPng(text,{scale=6,margin=4}) → data:image/png;base64 (emails/billets où le SVG est bloqué)
+## ./decode (Node, dépend de jsqr) — DÉCODAGE (qrpanel encode ET décode, v0.6)
+decodeQr(imageData|{data,width,height}[, w, h]) → string|null  (texte du QR depuis une image RGBA)
+## ./browser-scan (asset navigateur) — scanner caméra prêt à servir (v0.6)
+Fichier JS autonome à servir tel quel (<script src>), moteur jsQR. Expose window.jsQR ET
+window.QRPanel.scan(videoEl, {onResult, onStatus, onError, continuous?, debounceMs?}) → {stop()}.
+L'hôte fournit SON élément <video> (getUserMedia explicite — démarrage fiable sur geste
+utilisateur) ; décodage jsQR à CHAQUE frame (BarcodeDetector en fast-path optionnel non bloquant).
+⚠ Servir avec Cache-Control: no-cache (sinon un asset périmé désynchronise avec le HTML hôte).
+Décodage Node séparé : `./decode` (decodeQr, jsqr).
+## limite : versions ≤10 (~ M v10). Garder payloads raisonnables.

package/package.json

@@ -1,53 +1,32 @@
 {
   "name": "@mostajs/qrpanel",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "QR code panel — server-side PNG/SVG generator with 12 built-in themes (image-as-frame composite, ECC=H), config-driven (.qrconfig.json), cross-OS no chromium, + React <QrPanel> client with copy/share/mailto.",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",
   "license": "AGPL-3.0-or-later",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "src/index.js",
   "types": "dist/index.d.ts",
   "bin": {
     "qrpanel": "dist/cli.js"
   },
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./server": {
-      "types": "./dist/server.d.ts",
-      "import": "./dist/server.js",
-      "default": "./dist/server.js"
-    },
-    "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./dist/client.js",
-      "default": "./dist/client.js"
-    },
-    "./qr-image": {
-      "types": "./dist/qr-image.d.ts",
-      "import": "./dist/qr-image.js",
-      "default": "./dist/qr-image.js"
-    },
-    "./themes": {
-      "types": "./dist/themes.d.ts",
-      "import": "./dist/themes.js",
-      "default": "./dist/themes.js"
-    },
-    "./config": {
-      "types": "./dist/config.d.ts",
-      "import": "./dist/config.js",
-      "default": "./dist/config.js"
-    }
+    ".": "./src/index.js",
+    "./qr-svg": "./src/qr-svg.js",
+    "./payloads": "./src/qr-payloads.js",
+    "./figures": "./src/qr-figures.js",
+    "./png": "./src/qr-png.js",
+    "./decode": "./src/qr-decode.js",
+    "./browser-scan": "./browser/qr-scan.js"
   },
   "files": [
     "dist",
+    "browser",
     "LICENSE",
     "README.md",
     "CHANGELOG.md",
-    "llms.txt"
+    "llms.txt",
+    "src"
   ],
   "keywords": [
     "qrcode",
@@ -59,13 +38,9 @@
     "magic-link",
     "config-driven"
   ],
-  "scripts": {
-    "build": "tsc && chmod +x dist/cli.js 2>/dev/null || true",
-    "dev": "tsc --watch",
-    "prepublishOnly": "npm run build"
-  },
   "dependencies": {
-    "qrcode": "^1.5.4"
+    "qrcode": "^1.5.4",
+    "jsqr": "^1.4.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
@@ -73,9 +48,15 @@
     "@resvg/resvg-js": ">=2.6.2"
   },
   "peerDependenciesMeta": {
-    "react": { "optional": true },
-    "@mostajs/auth": { "optional": true },
-    "@resvg/resvg-js": { "optional": true }
+    "react": {
+      "optional": true
+    },
+    "@mostajs/auth": {
+      "optional": true
+    },
+    "@resvg/resvg-js": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -85,5 +66,9 @@
     "@resvg/resvg-js": "^2.6.2",
     "react": "^19.0.0",
     "typescript": "^5.6.0"
+  },
+  "scripts": {
+    "build": "tsc && chmod +x dist/cli.js 2>/dev/null || true",
+    "dev": "tsc --watch"
   }
-}
+}

package/src/cli.ts

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+// @mostajs/qrpanel — CLI
+// Author: Dr Hamid MADANI <drmdh@msn.com>
+//
+// Commandes disponibles :
+//   qrpanel init        → écrit .qrconfig.json à cwd avec les defaults
+//   qrpanel themes      → liste les 12 thèmes natifs
+//   qrpanel --version   → version du package
+
+import { ensureQrConfig, DEFAULT_CONFIG } from './config.js'
+import { listThemes, THEMES } from './themes.js'
+
+const args = process.argv.slice(2)
+const cmd = args[0] ?? 'help'
+
+function help() {
+  console.log(`@mostajs/qrpanel — CLI
+
+Usage:
+  qrpanel init [path]      Generate .qrconfig.json at cwd (or [path]).
+                           Idempotent — does not overwrite existing config.
+  qrpanel themes           List built-in theme keys.
+  qrpanel --version | -v   Print version.
+  qrpanel help | -h        This help.
+
+Config file (.qrconfig.json) drives all generators. Master toggle:
+  "genimage": false  → bypass theme pipeline, QR-only output.
+  "theme": "random"  → randomize from themePool at each generation.
+`)
+}
+
+async function main() {
+  switch (cmd) {
+    case 'init': {
+      const cwd = args[1] ?? process.cwd()
+      const path = ensureQrConfig(cwd)
+      console.log(`✓ qrpanel config ready at: ${path}`)
+      console.log(`  Edit it to customize defaults — master toggle "genimage" toggles the whole pipeline.`)
+      break
+    }
+    case 'themes': {
+      console.log(`Built-in themes (${listThemes().length}):`)
+      for (const key of listThemes()) {
+        console.log(`  - ${key.padEnd(10)} (${THEMES[key].label})`)
+      }
+      console.log(`\nDefaults config :`)
+      console.log(`  themePool : ${DEFAULT_CONFIG.default.themePool.join(', ')}`)
+      break
+    }
+    case '--version':
+    case '-v': {
+      // Lecture programmatique du package.json sans import JSON (cross-runtime safe)
+      const { readFileSync } = await import('node:fs')
+      const { fileURLToPath } = await import('node:url')
+      const { dirname, join } = await import('node:path')
+      const here = dirname(fileURLToPath(import.meta.url))
+      const pkgPath = join(here, '..', 'package.json')
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8')) as { version: string }
+      console.log(pkg.version)
+      break
+    }
+    case 'help':
+    case '--help':
+    case '-h':
+    default:
+      help()
+      break
+  }
+}
+
+main().catch((e) => {
+  console.error('[qrpanel] error:', (e as Error).message)
+  process.exit(1)
+})

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>
+  )
+}