@mostajs/qrpanel 0.5.0 → 0.6.0

package/src/themes.ts

@@ -0,0 +1,266 @@
+// @mostajs/qrpanel/themes — built-in theme registry
+// Author: Dr Hamid MADANI <drmdh@msn.com>
+//
+// Chaque thème = un petit motif SVG répliqué aux 4 coins du composite,
+// laissant le centre libre pour le cartouche blanc + QR. Style ligne
+// minimaliste mono-color via `currentColor` (le composer pilote la
+// couleur via CSS sur le <g> wrapper).
+//
+// Création maison — design original, libre de droits.
+// viewBox local du motif : centré sur l'origine, ~14 unités d'envergure.
+
+export type ThemeKey =
+  | 'baby'
+  | 'animals'
+  | 'science'
+  | 'physics'
+  | 'chemistry'
+  | 'math'
+  | 'nature'
+  | 'tech'
+  | 'space'
+  | 'music'
+  | 'book'
+  | 'health'
+
+export interface ThemeAsset {
+  key: ThemeKey
+  label: string
+  /** Fragment SVG (sans <svg> wrapper) — un motif centré sur (0,0). */
+  motif: string
+}
+
+/** Communs à tous les motifs (style ligne fine et propre). */
+const STROKE = 'stroke="currentColor" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"'
+const FILL = 'fill="currentColor"'
+
+export const THEMES: Record<ThemeKey, ThemeAsset> = {
+  // ─── 1. baby — sucette + cœur ─────────────────────────────────
+  baby: {
+    key: 'baby', label: 'Bébé',
+    motif: `
+      <circle cx="-2" cy="-3" r="4.5" ${STROKE}/>
+      <line x1="-2" y1="1.5" x2="-2" y2="6" ${STROKE}/>
+      <path d="M 5 -2 c 0.8 -1.2 2.5 -1.2 2.5 0.4 c 0 1.4 -2.5 2.8 -2.5 2.8 c 0 0 -2.5 -1.4 -2.5 -2.8 c 0 -1.6 1.7 -1.6 2.5 -0.4 z" ${FILL} opacity="0.9"/>
+    `,
+  },
+
+  // ─── 2. animals — empreinte de patte (4 doigts + pad) ─────────
+  animals: {
+    key: 'animals', label: 'Animaux',
+    motif: `
+      <ellipse cx="-3.5" cy="-3" rx="1.3" ry="1.8" ${FILL}/>
+      <ellipse cx="-1" cy="-5" rx="1.2" ry="1.7" ${FILL}/>
+      <ellipse cx="1.8" cy="-5" rx="1.2" ry="1.7" ${FILL}/>
+      <ellipse cx="4.3" cy="-3" rx="1.3" ry="1.8" ${FILL}/>
+      <ellipse cx="0.5" cy="2" rx="3.5" ry="3.2" ${FILL}/>
+    `,
+  },
+
+  // ─── 3. science — éprouvette + bulles ─────────────────────────
+  science: {
+    key: 'science', label: 'Science',
+    motif: `
+      <path d="M -2 -6 L -2 4 a 2.5 2.5 0 0 0 5 0 L 3 -6" ${STROKE}/>
+      <line x1="-3" y1="-6" x2="4" y2="-6" ${STROKE}/>
+      <circle cx="-0.5" cy="2" r="0.7" ${FILL}/>
+      <circle cx="1.4" cy="0" r="0.5" ${FILL}/>
+      <circle cx="0.4" cy="-2" r="0.4" ${FILL}/>
+    `,
+  },
+
+  // ─── 4. physics — atome (noyau + 2 orbites croisées) ──────────
+  physics: {
+    key: 'physics', label: 'Physique',
+    motif: `
+      <ellipse cx="0" cy="0" rx="6" ry="2.4" ${STROKE}/>
+      <ellipse cx="0" cy="0" rx="6" ry="2.4" transform="rotate(60)" ${STROKE}/>
+      <ellipse cx="0" cy="0" rx="6" ry="2.4" transform="rotate(-60)" ${STROKE}/>
+      <circle cx="0" cy="0" r="1.4" ${FILL}/>
+    `,
+  },
+
+  // ─── 5. chemistry — bécher avec graduation et liquide ─────────
+  chemistry: {
+    key: 'chemistry', label: 'Chimie',
+    motif: `
+      <path d="M -3.5 -5 L -3.5 4 a 1.5 1.5 0 0 0 1.5 1.5 L 2 5.5 a 1.5 1.5 0 0 0 1.5 -1.5 L 3.5 -5" ${STROKE}/>
+      <line x1="-4" y1="-5" x2="4" y2="-5" ${STROKE}/>
+      <line x1="-2.7" y1="-2.5" x2="-1.4" y2="-2.5" ${STROKE}/>
+      <line x1="-2.7" y1="0" x2="-1.4" y2="0" ${STROKE}/>
+      <path d="M -3.5 1.5 L 3.5 1.5 L 3.5 4 a 1.5 1.5 0 0 1 -1.5 1.5 L -2 5.5 a 1.5 1.5 0 0 1 -1.5 -1.5 z" ${FILL} opacity="0.35"/>
+    `,
+  },
+
+  // ─── 6. math — symbole π et signe = ───────────────────────────
+  math: {
+    key: 'math', label: 'Mathématique',
+    motif: `
+      <line x1="-5" y1="-3.5" x2="5" y2="-3.5" ${STROKE}/>
+      <line x1="-2.5" y1="-3.5" x2="-2.5" y2="3.5" ${STROKE}/>
+      <line x1="2.5" y1="-3.5" x2="2.5" y2="3.5" ${STROKE}/>
+      <line x1="-5" y1="5.5" x2="5" y2="5.5" ${STROKE}/>
+      <line x1="-5" y1="7.2" x2="5" y2="7.2" ${STROKE}/>
+    `,
+  },
+
+  // ─── 7. nature — feuille + tige ───────────────────────────────
+  nature: {
+    key: 'nature', label: 'Nature',
+    motif: `
+      <path d="M 0 6 C -6 4 -6 -4 0 -6 C 6 -4 6 4 0 6 Z" ${STROKE}/>
+      <line x1="0" y1="-6" x2="0" y2="6" ${STROKE}/>
+      <line x1="0" y1="-3" x2="-3" y2="-1" ${STROKE}/>
+      <line x1="0" y1="0" x2="-3.5" y2="2" ${STROKE}/>
+      <line x1="0" y1="-3" x2="3" y2="-1" ${STROKE}/>
+      <line x1="0" y1="0" x2="3.5" y2="2" ${STROKE}/>
+    `,
+  },
+
+  // ─── 8. tech — engrenage 8 dents ──────────────────────────────
+  tech: {
+    key: 'tech', label: 'Tech',
+    motif: `
+      <path d="
+        M -1 -5.6 L 1 -5.6 L 1.4 -4 L 3 -3.4 L 4.2 -4.5 L 5.5 -3.2 L 4.4 -2 L 5 -0.4 L 6.6 0 L 6.6 2
+        L 5 2.4 L 4.4 4 L 5.5 5.2 L 4.2 6.5 L 3 5.4 L 1.4 6 L 1 7.6 L -1 7.6 L -1.4 6 L -3 5.4
+        L -4.2 6.5 L -5.5 5.2 L -4.4 4 L -5 2.4 L -6.6 2 L -6.6 0 L -5 -0.4 L -4.4 -2 L -5.5 -3.2
+        L -4.2 -4.5 L -3 -3.4 L -1.4 -4 Z" transform="translate(0 -1) scale(0.7)" ${STROKE}/>
+      <circle cx="0" cy="-1" r="1.5" transform="scale(0.7)" ${STROKE}/>
+    `,
+  },
+
+  // ─── 9. space — planète saturne + étoile ──────────────────────
+  space: {
+    key: 'space', label: 'Espace',
+    motif: `
+      <circle cx="-1" cy="0" r="3.2" ${STROKE}/>
+      <ellipse cx="-1" cy="0" rx="6" ry="1.4" transform="rotate(-20 -1 0)" ${STROKE}/>
+      <path d="M 5 -5 L 5.6 -3.5 L 7.2 -3.5 L 6 -2.6 L 6.5 -1.1 L 5 -2 L 3.5 -1.1 L 4 -2.6 L 2.8 -3.5 L 4.4 -3.5 Z" ${FILL}/>
+    `,
+  },
+
+  // ─── 10. music — note + portée ────────────────────────────────
+  music: {
+    key: 'music', label: 'Musique',
+    motif: `
+      <ellipse cx="-2" cy="4" rx="2.2" ry="1.7" transform="rotate(-22 -2 4)" ${FILL}/>
+      <line x1="0" y1="3" x2="0" y2="-6" ${STROKE}/>
+      <path d="M 0 -6 C 3 -5 4 -2 1.5 -1" ${STROKE}/>
+      <ellipse cx="3.5" cy="2.5" rx="1.7" ry="1.3" transform="rotate(-22 3.5 2.5)" ${FILL} opacity="0.6"/>
+      <line x1="5" y1="1.5" x2="5" y2="-4" ${STROKE} opacity="0.6"/>
+    `,
+  },
+
+  // ─── 11. book — livre ouvert ──────────────────────────────────
+  book: {
+    key: 'book', label: 'Livre',
+    motif: `
+      <path d="M -6 -4 L 0 -3 L 6 -4 L 6 4 L 0 5 L -6 4 Z" ${STROKE}/>
+      <line x1="0" y1="-3" x2="0" y2="5" ${STROKE}/>
+      <line x1="-4.5" y1="-2" x2="-1.5" y2="-1.5" ${STROKE} opacity="0.6"/>
+      <line x1="-4.5" y1="0" x2="-1.5" y2="0.5" ${STROKE} opacity="0.6"/>
+      <line x1="1.5" y1="-1.5" x2="4.5" y2="-2" ${STROKE} opacity="0.6"/>
+      <line x1="1.5" y1="0.5" x2="4.5" y2="0" ${STROKE} opacity="0.6"/>
+    `,
+  },
+
+  // ─── 12. health — croix médicale + battement ──────────────────
+  health: {
+    key: 'health', label: 'Santé',
+    motif: `
+      <rect x="-1.8" y="-6" width="3.6" height="12" rx="0.8" ${FILL}/>
+      <rect x="-6" y="-1.8" width="12" height="3.6" rx="0.8" ${FILL}/>
+      <path d="M -8 7 L -5 7 L -3.5 4 L -1.5 9 L 0 6 L 2 8 L 4 7 L 8 7" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 2)"/>
+    `,
+  },
+}
+
+/** Liste des clés thèmes natifs (ordre fixe pour itération déterministe). */
+export const THEME_KEYS: ThemeKey[] = [
+  'baby', 'animals', 'science', 'physics', 'chemistry', 'math',
+  'nature', 'tech', 'space', 'music', 'book', 'health',
+]
+
+/** Renvoie la liste des clés thèmes natifs. */
+export function listThemes(): ThemeKey[] {
+  return [...THEME_KEYS]
+}
+
+/** Récupère un thème par clé. Lance si inconnu. */
+export function getTheme(key: ThemeKey): ThemeAsset {
+  const theme = THEMES[key]
+  if (!theme) throw new Error(`[qrpanel] unknown theme: "${key}". Available: ${THEME_KEYS.join(', ')}`)
+  return theme
+}
+
+/**
+ * Tire un thème au hasard dans le pool fourni (ou tous les thèmes si pool absent).
+ * Utilise Math.random() — pas de seed (déterminisme = à la charge du caller s'il
+ * en a besoin).
+ */
+export function pickRandomTheme(pool?: ThemeKey[]): ThemeKey {
+  const candidates = pool && pool.length > 0 ? pool : THEME_KEYS
+  return candidates[Math.floor(Math.random() * candidates.length)]!
+}
+
+/**
+ * Construit le fragment SVG du cadre thématique :
+ *   4 instances du motif aux 4 coins, monochrome via CSS color, opacité.
+ *
+ * Le fragment est destiné à être inséré dans un SVG composite global
+ * (viewBox 0 0 width width). Coordonnées dans l'espace [0..width].
+ */
+export interface BuildFrameOpts {
+  /** Largeur du canvas SVG englobant en unités utilisateur. */
+  width: number
+  /** Couleur monochrome appliquée via CSS. Default '#1e293b'. */
+  color?: string
+  /** Opacité 0..1. Default 1. */
+  opacity?: number
+  /**
+   * Proportion du cartouche blanc central / canvas (0..1). Détermine la
+   * largeur de la zone-marge où sont placés les motifs.
+   * Default 0.62.
+   */
+  centerWhiteRatio?: number
+  /**
+   * Position du motif dans la zone-marge (0..1) :
+   *   0   = motif collé au bord du canvas
+   *   0.5 = motif centré dans la zone-marge (default, optimal)
+   *   1   = motif collé contre le cartouche blanc
+   */
+  framePadding?: number
+  /**
+   * Échelle du motif (override de l'auto-calc).
+   * Auto = (marginZone × 0.65 / 14) où 14 ≈ envergure locale du motif.
+   */
+  motifScale?: number
+}
+
+/** Envergure approximative d'un motif local (en unités SVG). */
+const MOTIF_BASE_SIZE = 14
+
+export function buildThemeFrameSvg(theme: ThemeAsset, opts: BuildFrameOpts): string {
+  const w = opts.width
+  const ratio = opts.centerWhiteRatio ?? 0.62
+  const marginZone = (w - w * ratio) / 2  // largeur libre entre cartouche et bord
+  const padFactor = opts.framePadding ?? 0.5
+  const offset = marginZone * padFactor    // distance du bord au centre du motif
+  const scale = opts.motifScale ?? (marginZone * 0.65 / MOTIF_BASE_SIZE)
+  const color = opts.color ?? '#1e293b'
+  const opacity = opts.opacity ?? 1
+
+  const corners: [number, number][] = [
+    [offset, offset],            // top-left
+    [w - offset, offset],        // top-right
+    [offset, w - offset],        // bottom-left
+    [w - offset, w - offset],    // bottom-right
+  ]
+
+  const groups = corners.map(([cx, cy]) =>
+    `<g transform="translate(${cx} ${cy}) scale(${scale})" style="color:${color};opacity:${opacity}">${theme.motif}</g>`
+  ).join('')
+
+  return groups
+}