@salifbiaye/create-boutique 0.4.1 → 0.6.0

package/templates/storefront/src/lib/boutique/config.ts

@@ -3,12 +3,14 @@ import "server-only"
 import fs from "node:fs"
 import path from "node:path"
 import { z } from "zod"
-import { projectSchema, themeSchema, type Theme } from "./schema"
+import { projectSchema, themeSchema, type Project, type Theme } from "./schema"
 
 /**
- * Configuration de l'instance. La boutique est fixée par la variable
- * d'environnement BOUTIQUE et par rien d'autre : aucun paramètre d'URL,
- * cookie ou en-tête ne peut en changer.
+ * Configuration de l'instance. La boutique est fixée par la variable d'environnement BOUTIQUE :
+ * - mode multi : BOUTIQUE=<slug>, une instance par boutique ;
+ * - mode single : BOUTIQUE=auto, la boutique affichée est celle mise en ligne dans l'admin
+ *   (fichier KEYS_DIR/_active écrit par le backend).
+ * Aucun paramètre d'URL, cookie ou en-tête ne peut changer la boutique affichée.
  */
 export type Boutique = {
   project: string
@@ -22,7 +24,7 @@ export type Boutique = {
   language: string
   /** ex. "en-US" : pour Intl et <html lang> */
   locale: string
-  port: number
+  port?: number
   publishableKey: string
   merchantEmail?: string
   /** URL publique des autres boutiques du projet (lien « campagne suivante ») */
@@ -78,19 +80,14 @@ function loadTheme(id: string): Theme {
   return parseOrThrow(themeSchema, readJson(file), file)
 }
 
-function load(): Boutique {
-  const slug = process.env.BOUTIQUE
-  if (!slug) {
-    throw new BoutiqueConfigError("variable d'environnement BOUTIQUE absente (ex. BOUTIQUE=yout-black-friday)")
-  }
+const projectFile = () => path.join(/*turbopackIgnore: true*/ CONFIG_DIR, "project.json")
 
-  const projectFile = path.join(/*turbopackIgnore: true*/ CONFIG_DIR, "project.json")
-  const project = parseOrThrow(projectSchema, readJson(projectFile), projectFile)
+function load(slug: string, project: Project): Boutique {
 
   const entry = project.boutiques.find((b) => b.slug === slug)
   if (!entry) {
     throw new BoutiqueConfigError(
-      `boutique « ${slug} » absente de ${projectFile}. Boutiques déclarées : ${project.boutiques.map((b) => b.slug).join(", ")}`
+      `boutique « ${slug} » absente de ${projectFile()}. Boutiques déclarées : ${project.boutiques.map((b) => b.slug).join(", ")}`
     )
   }
 
@@ -131,23 +128,74 @@ function load(): Boutique {
     port: entry.port,
     publishableKey,
     merchantEmail: defaults.merchantEmail,
+    // Mode single : toutes les boutiques partagent l'adresse du site unique
     siblings: Object.fromEntries(
-      project.boutiques.map((b) => [b.slug, b.url ?? `http://localhost:${b.port}`])
+      project.boutiques.map((b) => [
+        b.slug,
+        project.mode === "single"
+          ? (project.site?.url ?? `http://localhost:${project.site?.port ?? 8000}`)
+          : (b.url ?? `http://localhost:${b.port}`),
+      ])
     ),
   }
 }
 
-let cached: Boutique | undefined
+// Cache relu si project.json change (mode single : une boutique ajoutée par `apply` sans redémarrage)
+let project: { mtime: number; data: Project } | undefined
+const boutiques = new Map<string, Boutique>()
+
+function readProject(): Project {
+  const file = projectFile()
+  const mtime = fs.statSync(file, { throwIfNoEntry: false })?.mtimeMs ?? 0
+  if (!project || project.mtime !== mtime) {
+    project = { mtime, data: parseOrThrow(projectSchema, readJson(file), file) }
+    boutiques.clear()
+  }
+  return project.data
+}
+
+// Mode single : boutique active, relue au plus toutes les 2 s (le changement dans l'admin est quasi immédiat)
+let active: { at: number; slug: string } | undefined
+function activeSlug(p: Project): string {
+  if (active && Date.now() - active.at < 2000) return active.slug
+  let slug = ""
+  try {
+    slug = fs.readFileSync(path.join(/*turbopackIgnore: true*/ KEYS_DIR, "_active"), "utf8").trim()
+  } catch {
+    // pas encore écrit par le backend : première boutique
+  }
+  if (!p.boutiques.some((b) => b.slug === slug)) slug = p.boutiques[0].slug
+  active = { at: Date.now(), slug }
+  return slug
+}
+
+/** Mode du projet : multi (une instance par boutique) ou single (un site, la boutique active). */
+export function isSingleSite(): boolean {
+  return process.env.BOUTIQUE === "auto"
+}
 
 /**
- * Boutique de cette instance. Lue une fois (au démarrage via instrumentation.ts),
- * puis gardée en mémoire : modifier project.json demande un redémarrage (`apply`).
+ * Boutique affichée par cette instance (mode single : la boutique en ligne en ce moment),
+ * ou une boutique précise du projet (slug) : utilisé pour finir un panier commencé dans une autre boutique.
  */
-export function getBoutique(): Boutique {
-  if (!cached) {
-    cached = load()
-    // Lu par lib/util/money.ts, partagé avec les composants client (qui lisent <html lang>).
-    process.env.BOUTIQUE_LOCALE = cached.locale
+export function getBoutique(slug?: string): Boutique {
+  const env = process.env.BOUTIQUE
+  if (!env) {
+    throw new BoutiqueConfigError("variable d'environnement BOUTIQUE absente (ex. BOUTIQUE=yout-black-friday, ou auto en mode single)")
+  }
+  const p = readProject()
+  const wanted = slug ?? (env === "auto" ? activeSlug(p) : env)
+  if (!p.boutiques.some((b) => b.slug === wanted)) {
+    throw new BoutiqueConfigError(
+      `boutique « ${wanted} » absente de ${projectFile()}. Boutiques déclarées : ${p.boutiques.map((b) => b.slug).join(", ")}`
+    )
+  }
+  let b = boutiques.get(wanted)
+  if (!b) {
+    b = load(wanted, p)
+    boutiques.set(wanted, b)
+    // Lu par lib/util/money.ts, partagé avec les composants client (qui lisent <html lang>) ; même langue pour tout le projet.
+    process.env.BOUTIQUE_LOCALE = b.locale
   }
-  return cached
+  return b
 }

package/templates/storefront/src/lib/boutique/schema.ts

@@ -33,6 +33,9 @@ const overridable = {
 export const projectSchema = z.object({
   project: z.string().regex(SLUG),
   templateVersion: z.string().optional(),
+  /** single : un seul site (site.port, site.url) qui affiche la boutique active (choisie dans l'admin) */
+  mode: z.enum(["multi", "single"]).default("multi"),
+  site: z.object({ port: z.number().int().min(1).max(65535), url: z.url().optional() }).optional(),
   defaults: z
     .object({
       ...overridable,
@@ -48,7 +51,7 @@ export const projectSchema = z.object({
         .object({
           slug: z.string().regex(SLUG, "slug : minuscules, chiffres et tirets"),
           theme: z.string().regex(SLUG),
-          port: z.number().int().min(1).max(65535),
+          port: z.number().int().min(1).max(65535).optional(),
           url: z.url().optional(),
           storeName: overridable.storeName.optional(),
           currency: overridable.currency.optional(),
@@ -71,7 +74,7 @@ export const themeSchema = z.object({
   /** Variante : reprend la mise en page (règles CSS) de ce thème, avec la palette de styles/ub/variants.css. */
   layout: z.string().regex(SLUG).optional(),
   /** Page d'accueil : « default » (sections standard) ou « harvest » (accueil éditorial des thèmes Thanksgiving) */
-  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech"]).optional(),
+  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech", "grimoire"]).optional(),
   fonts: z.object({
     head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
     body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),

package/templates/storefront/src/lib/config.ts

@@ -2,21 +2,45 @@ import "server-only"
 
 import { getBoutique } from "@lib/boutique/config"
 import Medusa, { FetchArgs, FetchInput } from "@medusajs/js-sdk"
+import { cookies } from "next/headers"
 
 // URL interne du backend (réseau Docker) : jamais exposée au navigateur.
 const MEDUSA_BACKEND_URL = process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
 
-let client: Medusa | undefined
+/** Cookie : boutique où le panier a été créé (mode single, cf. setCartId). */
+export const CART_BOUTIQUE_COOKIE = "_ub_cart_boutique"
+
+// Requêtes liées au panier : elles utilisent la clé de la boutique du panier, pas celle affichée.
+const CART_PATHS = /^\/?store\/(carts|payment-collections|shipping-options)\b/
 
 /**
- * Client Medusa de la boutique : la publishable key vient de KEYS_DIR/<slug>,
+ * Mode single : un client qui a commencé son panier avant un changement de boutique le termine
+ * dans sa boutique d'origine (même canal de vente, mêmes prix et même livraison). Mode multi : sans effet.
+ */
+async function cartKey(input: FetchInput): Promise<string | undefined> {
+  if (process.env.BOUTIQUE !== "auto" || !CART_PATHS.test(String(input))) return undefined
+  try {
+    const slug = (await cookies()).get(CART_BOUTIQUE_COOKIE)?.value
+    if (!slug || slug === getBoutique().slug) return undefined
+    return getBoutique(slug).publishableKey
+  } catch {
+    // Boutique retirée du projet, ou appel hors requête : clé de la boutique affichée
+    return undefined
+  }
+}
+
+const clients = new Map<string, Medusa>()
+
+/**
+ * Client Medusa de la boutique affichée : la publishable key vient de KEYS_DIR/<slug>,
  * lue à l'exécution (pas de variable NEXT_PUBLIC_* figée au build).
- * Créé au premier usage pour que `next build` n'ait besoin d'aucune boutique.
+ * Un client par boutique (mode single : la boutique active change sans redémarrage).
  */
 function getClient(): Medusa {
-  if (client) return client
-
   const boutique = getBoutique()
+  const existing = clients.get(boutique.slug)
+  if (existing) return existing
+
   const medusa = new Medusa({
     baseUrl: MEDUSA_BACKEND_URL,
     debug: process.env.NODE_ENV === "development",
@@ -26,12 +50,17 @@ function getClient(): Medusa {
   // Langue fixée par l'instance : les traductions Medusa suivent la langue du projet.
   const originalFetch = medusa.client.fetch.bind(medusa.client)
   medusa.client.fetch = async <T>(input: FetchInput, init?: FetchArgs): Promise<T> => {
-    const headers = { "x-medusa-locale": boutique.locale, ...(init?.headers ?? {}) }
+    const key = await cartKey(input)
+    const headers = {
+      "x-medusa-locale": boutique.locale,
+      ...(key ? { "x-publishable-api-key": key } : {}),
+      ...(init?.headers ?? {}),
+    }
     return originalFetch(input, { ...init, headers })
   }
 
-  client = medusa
-  return client
+  clients.set(boutique.slug, medusa)
+  return medusa
 }
 
 export const sdk = new Proxy({} as Medusa, {

package/templates/storefront/src/lib/data/cart.ts

@@ -9,6 +9,7 @@ import {
   getAuthHeaders,
   getCacheOptions,
   getCacheTag,
+  cartFromOtherBoutique,
   getCartId,
   removeCartId,
   setCartId,
@@ -54,7 +55,9 @@ export async function retrieveCart(cartId?: string, fields?: string) {
 export async function getOrSetCart() {
   const region = await getRegion()
 
-  let cart = await retrieveCart(undefined, "id,region_id")
+  // Mode single : un nouvel article ajouté après un changement de boutique démarre un panier dans la boutique en ligne
+  // (l'ancien panier appartient à l'autre canal de vente et ne peut pas recevoir ses produits).
+  let cart = (await cartFromOtherBoutique()) ? null : await retrieveCart(undefined, "id,region_id")
 
   const headers = {
     ...(await getAuthHeaders()),

package/templates/storefront/src/lib/data/cookies.ts

@@ -1,5 +1,6 @@
 import "server-only"
-import { getBoutique } from "@lib/boutique/config"
+import { getBoutique, isSingleSite } from "@lib/boutique/config"
+import { CART_BOUTIQUE_COOKIE } from "@lib/config"
 import { cookies as nextCookies } from "next/headers"
 
 /**
@@ -7,9 +8,10 @@ import { cookies as nextCookies } from "next/headers"
  * toutes les boutiques du projet les partagent. Chaque nom est donc suffixé
  * par le slug, pour qu'un panier ou une session d'une boutique n'apparaisse
  * jamais dans une autre.
+ * Mode single : un seul site, noms fixes : le client reste connecté et garde son panier quand la boutique change.
  */
 export const cookieName = (base: "jwt" | "cart_id" | "cache_id" | "onboarding") =>
-  `_medusa_${base}_${getBoutique().slug}`
+  `_medusa_${base}_${isSingleSite() ? "site" : getBoutique().slug}`
 
 export const getAuthHeaders = async (): Promise<
   { authorization: string } | {}
@@ -93,6 +95,15 @@ export const setCartId = async (cartId: string) => {
     ...secureCookie,
     maxAge: 60 * 60 * 24 * 7,
   })
+  // Boutique du panier (mode single) : le client finit son panier dans cette boutique même si le site change
+  cookies.set(CART_BOUTIQUE_COOKIE, getBoutique().slug, { ...secureCookie, maxAge: 60 * 60 * 24 * 7 })
+}
+
+/** Mode single : le panier en cours a été commencé dans une autre boutique que celle en ligne maintenant. */
+export const cartFromOtherBoutique = async () => {
+  if (!isSingleSite()) return false
+  const slug = (await nextCookies()).get(CART_BOUTIQUE_COOKIE)?.value
+  return !!slug && slug !== getBoutique().slug
 }
 
 export const removeCartId = async () => {
@@ -100,4 +111,5 @@ export const removeCartId = async () => {
   cookies.set(cookieName("cart_id"), "", {
     maxAge: -1,
   })
+  cookies.set(CART_BOUTIQUE_COOKIE, "", { maxAge: -1 })
 }

package/templates/storefront/src/modules/checkout/components/shipping-address/index.tsx

@@ -1,3 +1,4 @@
+import { useLocale } from "@lib/boutique/i18n-client"
 import { HttpTypes } from "@medusajs/types"
 import { Container } from "@medusajs/ui"
 import Checkbox from "@modules/common/components/checkbox"
@@ -19,6 +20,10 @@ const ShippingAddress = ({
   checked: boolean
   onChange: () => void
 }) => {
+  // Pays de la boutique (fin de la locale, ex. fr-FR → fr) proposé par défaut s'il est livré
+  const locale = useLocale()
+  const homeCountry = locale.split("-")[1]?.toLowerCase() ?? ""
+  const defaultCountry = cart?.region?.countries?.some((c) => c.iso_2 === homeCountry) ? homeCountry : ""
   const [formData, setFormData] = useState<Record<string, any>>({
     "shipping_address.first_name": cart?.shipping_address?.first_name || "",
     "shipping_address.last_name": cart?.shipping_address?.last_name || "",
@@ -26,7 +31,7 @@ const ShippingAddress = ({
     "shipping_address.company": cart?.shipping_address?.company || "",
     "shipping_address.postal_code": cart?.shipping_address?.postal_code || "",
     "shipping_address.city": cart?.shipping_address?.city || "",
-    "shipping_address.country_code": cart?.shipping_address?.country_code || "",
+    "shipping_address.country_code": cart?.shipping_address?.country_code || defaultCountry,
     "shipping_address.province": cart?.shipping_address?.province || "",
     "shipping_address.phone": cart?.shipping_address?.phone || "",
     email: cart?.email || "",

package/templates/storefront/src/modules/ub/album.tsx

@@ -5,6 +5,7 @@ import { t } from "@lib/boutique/i18n"
 import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
+import SurpriseButton from "./surprise-button"
 import FadeImg from "./fade-img"
 
 /**
@@ -27,9 +28,12 @@ export function AlbumHero({ campaign }: { campaign: Campaign }) {
         {hero.eyebrow && <p className="ub-al-eyebrow">{hero.eyebrow}</p>}
         <h1 className="ub-al-title">{hero.title}</h1>
         {hero.sub && <p className="ub-al-sub">{hero.sub}</p>}
-        <Link href="/store" className="ub-al-btn">
-          {hero.cta}
-        </Link>
+        <div className="ub-al-actions">
+          <Link href="/store" className="ub-al-btn">
+            {hero.cta}
+          </Link>
+          <SurpriseButton event="noel" label={t("fx.surprise.noel")} />
+        </div>
       </div>
     </section>
   )

package/templates/storefront/src/modules/ub/cinema.tsx

@@ -7,6 +7,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import FadeImg from "./fade-img"
 import { Icon } from "./icons"
+import SurpriseButton from "./surprise-button"
 
 /**
  * Accueil « Cinéma » (thèmes Halloween, theme.json → "home": "cinema") : la boutique comme une affiche de film.
@@ -63,6 +64,7 @@ export function CinemaHero({ campaign, next }: { campaign: Campaign; next: P[] }
             <Link href="/store" className="ub-cn-btn ub-cn-btn--ghost">
               {t("cinema.catalog")}
             </Link>
+            <SurpriseButton event="halloween" label={t("fx.surprise.halloween")} />
           </div>
           {upNext.length > 0 && (
             <div className="ub-cn-next">

package/templates/storefront/src/modules/ub/fx-runtime.ts

@@ -0,0 +1,272 @@
+/**
+ * Animations desktop (chargé à la demande par motion.tsx, jamais sur mobile ni si « réduire les animations ») :
+ *  - apparition au scroll des sections et des cartes (décalage léger entre les cartes) ;
+ *  - défilement automatique des rangées horizontales (pause au survol, au focus, hors écran, après un geste) ;
+ *  - ambiance de l'événement : chauves-souris occasionnelles (Halloween), neige (Noël), paillettes (Nouvel An) ;
+ *  - burst() : confettis / particules du bouton « surprise » du hero.
+ * Aucun état React : tout passe par des classes CSS, transform et opacity (pas de re-render de la page).
+ */
+
+export type FxEvent = "halloween" | "noel" | "nouvel-an" | string
+
+const SCOPE = ".ub-page"
+let started = false
+
+export function start(event: FxEvent) {
+  if (started) return
+  started = true
+  document.documentElement.classList.add("ub-motion")
+  const scan = setupReveal()
+  const slide = setupAutoSlide()
+  const refresh = () => {
+    scan()
+    slide()
+    ambient(event)
+  }
+  refresh()
+  // Nouvelle page (navigation côté client) : on reprend les nouveaux éléments
+  let queued = false
+  new MutationObserver(() => {
+    if (queued) return
+    queued = true
+    requestAnimationFrame(() => {
+      queued = false
+      refresh()
+    })
+  }).observe(document.body, { childList: true, subtree: true })
+}
+
+/* ---------------- Apparition au scroll ---------------- */
+function setupReveal() {
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) {
+        if (!e.isIntersecting) continue
+        const el = e.target as HTMLElement
+        io.unobserve(el)
+        el.classList.add("is-in")
+        // Fin de l'animation : on retire les classes pour rendre la main aux styles (hover, transitions) du thème
+        const i = Number(el.style.getPropertyValue("--rv-i") || 0)
+        setTimeout(() => el.classList.remove("ub-rv", "is-in"), 700 + i * 60)
+      }
+    },
+    { rootMargin: "0px 0px -8% 0px" }
+  )
+  return () => {
+    const page = document.querySelector(SCOPE)
+    if (!page) return
+    const vh = window.innerHeight
+    const mark = (el: HTMLElement, i = 0) => {
+      if (el.dataset.rv) return
+      el.dataset.rv = "1"
+      // Déjà à l'écran (hero, haut de page) : rien à animer, pas de clignotement
+      if (el.getBoundingClientRect().top < vh * 0.92) return
+      if (i) el.style.setProperty("--rv-i", String(i))
+      el.classList.add("ub-rv")
+      io.observe(el)
+    }
+    page.querySelectorAll<HTMLElement>(":scope section").forEach((s, n) => n > 0 && mark(s))
+    page.querySelectorAll<HTMLElement>(":scope section :is(ul, ol)").forEach((list) => {
+      const items = Array.from(list.children) as HTMLElement[]
+      if (items.length < 2 || items.length > 24) return
+      items.forEach((li, i) => mark(li, i % 8))
+    })
+  }
+}
+
+/* ---------------- Rangées horizontales : défilement automatique ---------------- */
+function setupAutoSlide() {
+  const rows = new WeakSet<HTMLElement>()
+  return () => {
+    const page = document.querySelector(SCOPE)
+    if (!page) return
+    page.querySelectorAll<HTMLElement>(":scope :is(ul, ol)").forEach((row) => {
+      if (rows.has(row)) return
+      const ox = getComputedStyle(row).overflowX
+      if ((ox !== "auto" && ox !== "scroll") || row.scrollWidth <= row.clientWidth + 10) return
+      rows.add(row)
+      let visible = false
+      let pausedUntil = 0
+      let hover = false
+      const pause = (ms: number) => (pausedUntil = Date.now() + ms)
+      row.addEventListener("mouseenter", () => (hover = true))
+      row.addEventListener("mouseleave", () => (hover = false))
+      row.addEventListener("focusin", () => pause(10000))
+      row.addEventListener("wheel", () => pause(8000), { passive: true })
+      row.addEventListener("pointerdown", () => pause(8000), { passive: true })
+      new IntersectionObserver(([e]) => (visible = e.isIntersecting), { threshold: 0.4 }).observe(row)
+      setInterval(() => {
+        if (!visible || hover || document.hidden || Date.now() < pausedUntil || !row.isConnected) return
+        const first = row.children[0] as HTMLElement | undefined
+        if (!first) return
+        const step = first.getBoundingClientRect().width + (parseFloat(getComputedStyle(row).columnGap) || 16)
+        const end = row.scrollLeft + row.clientWidth >= row.scrollWidth - 4
+        if (end) row.scrollTo({ left: 0, behavior: "smooth" })
+        else row.scrollBy({ left: step, behavior: "smooth" })
+      }, 4500)
+    })
+  }
+}
+
+/* ---------------- Ambiance de l'événement ---------------- */
+let ambientHero: Element | null = null
+let batTimer: number | undefined
+
+function ambient(event: FxEvent) {
+  const hero = document.querySelector(`${SCOPE} section`)
+  if (event === "halloween") {
+    if (batTimer === undefined) scheduleBats(4000)
+    return
+  }
+  if (!hero || hero === ambientHero) return
+  ambientHero = hero
+  if (event === "noel") particlesIn(hero as HTMLElement, "snow")
+  if (event === "nouvel-an") particlesIn(hero as HTMLElement, "sparkle")
+}
+
+/* Halloween : 1 à 3 chauves-souris traversent l'écran de temps en temps (toutes les 12 à 28 s). */
+function scheduleBats(delay: number) {
+  batTimer = window.setTimeout(() => {
+    if (!document.hidden) flock(1 + Math.floor(Math.random() * 3))
+    scheduleBats(12000 + Math.random() * 16000)
+  }, delay)
+}
+
+const BAT =
+  '<svg viewBox="0 0 64 32" width="100%" height="100%"><path fill="currentColor" d="M32 10c-2 0-3 2-3 2l-2-4-1 5C20 8 12 6 2 10c6 1 10 5 11 10 3-3 7-3 9 0 2-3 5-3 7-1 1-2 2-3 3-3s2 1 3 3c2-2 5-2 7 1 2-3 6-3 9 0 1-5 5-9 11-10-10-4-18-2-24 3l-1-5-2 4s-1-2-3-2z"/></svg>'
+
+function flock(n: number, fromY?: number) {
+  for (let i = 0; i < n; i++) {
+    const bat = document.createElement("span")
+    bat.className = Math.random() < 0.5 ? "ub-bat ub-bat--rtl" : "ub-bat"
+    bat.setAttribute("aria-hidden", "true")
+    bat.innerHTML = `<span>${BAT}</span>`
+    const size = 22 + Math.random() * 22
+    bat.style.cssText = `--y:${fromY ?? 8 + Math.random() * 45}vh;--dy:${-10 + Math.random() * 20}vh;--s:${size}px;--d:${6 + Math.random() * 3}s;--delay:${i * 0.35}s`
+    bat.addEventListener("animationend", () => bat.remove())
+    document.body.appendChild(bat)
+  }
+}
+
+/* Noël (neige) / Nouvel An (paillettes dorées qui montent) : canvas dans le hero, actif seulement quand il est visible. */
+function particlesIn(host: HTMLElement, kind: "snow" | "sparkle") {
+  const canvas = document.createElement("canvas")
+  canvas.className = "ub-fx-canvas"
+  canvas.setAttribute("aria-hidden", "true")
+  if (getComputedStyle(host).position === "static") host.style.position = "relative"
+  host.appendChild(canvas)
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return
+  const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+  let w = 0
+  let h = 0
+  const resize = () => {
+    w = host.clientWidth
+    h = host.clientHeight
+    canvas.width = w * dpr
+    canvas.height = h * dpr
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  }
+  resize()
+  new ResizeObserver(resize).observe(host)
+  const count = kind === "snow" ? 46 : 34
+  const ps = Array.from({ length: count }, () => ({
+    x: Math.random() * w,
+    y: Math.random() * h,
+    r: kind === "snow" ? 1 + Math.random() * 2.4 : 0.8 + Math.random() * 1.8,
+    v: kind === "snow" ? 0.25 + Math.random() * 0.6 : 0.15 + Math.random() * 0.4,
+    a: Math.random() * Math.PI * 2,
+  }))
+  let visible = true
+  new IntersectionObserver(([e]) => (visible = e.isIntersecting)).observe(host)
+  let last = 0
+  const frame = (t: number) => {
+    requestAnimationFrame(frame)
+    if (!visible || document.hidden || t - last < 33) return // ~30 i/s, rien hors écran
+    last = t
+    ctx.clearRect(0, 0, w, h)
+    for (const p of ps) {
+      p.a += 0.02
+      if (kind === "snow") {
+        p.y += p.v
+        p.x += Math.sin(p.a) * 0.3
+        if (p.y > h + 4) (p.y = -4), (p.x = Math.random() * w)
+        ctx.fillStyle = "rgba(255,255,255,0.75)"
+      } else {
+        p.y -= p.v
+        p.x += Math.sin(p.a) * 0.2
+        if (p.y < -4) (p.y = h + 4), (p.x = Math.random() * w)
+        ctx.fillStyle = `rgba(240,210,130,${0.35 + 0.45 * Math.abs(Math.sin(p.a * 1.5))})`
+      }
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+  requestAnimationFrame(frame)
+}
+
+/* ---------------- Surprise : confettis / particules pendant ~3 s ---------------- */
+const PALETTES: Record<string, string[]> = {
+  halloween: ["#ff7a1a", "#f2e14c", "#8b5cf6", "#1a1a1a", "#ffb15c"],
+  noel: ["#ffffff", "#d4af37", "#c0392b", "#1f5c3a", "#f7e7b4"],
+  "nouvel-an": ["#e8c766", "#d9dbe1", "#ffffff", "#f5b5c8", "#b08a2e"],
+}
+
+export function burst(event: FxEvent, origin: { x: number; y: number }) {
+  if (event === "halloween") flock(6, (origin.y / window.innerHeight) * 100 - 10)
+  const colors = PALETTES[event] ?? PALETTES["nouvel-an"]
+  const canvas = document.createElement("canvas")
+  canvas.className = "ub-fx-burst"
+  canvas.setAttribute("aria-hidden", "true")
+  document.body.appendChild(canvas)
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return canvas.remove()
+  const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+  const w = window.innerWidth
+  const h = window.innerHeight
+  canvas.width = w * dpr
+  canvas.height = h * dpr
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  const ps = Array.from({ length: 140 }, () => {
+    const angle = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 1.1
+    const speed = 6 + Math.random() * 9
+    return {
+      x: origin.x,
+      y: origin.y,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      rot: Math.random() * 6,
+      vr: (Math.random() - 0.5) * 0.3,
+      size: 5 + Math.random() * 6,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      round: event === "noel" ? Math.random() < 0.6 : Math.random() < 0.25,
+    }
+  })
+  const t0 = performance.now()
+  const frame = (t: number) => {
+    const k = (t - t0) / 3000
+    if (k >= 1) return canvas.remove()
+    ctx.clearRect(0, 0, w, h)
+    ctx.globalAlpha = k > 0.7 ? (1 - k) / 0.3 : 1
+    for (const p of ps) {
+      p.vy += 0.22
+      p.vx *= 0.99
+      p.x += p.vx
+      p.y += p.vy
+      p.rot += p.vr
+      ctx.fillStyle = p.color
+      ctx.save()
+      ctx.translate(p.x, p.y)
+      ctx.rotate(p.rot)
+      if (p.round) {
+        ctx.beginPath()
+        ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2)
+        ctx.fill()
+      } else ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2)
+      ctx.restore()
+    }
+    requestAnimationFrame(frame)
+  }
+  requestAnimationFrame(frame)
+}

package/templates/storefront/src/modules/ub/gala.tsx

@@ -7,6 +7,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import FadeImg from "./fade-img"
 import { Icon } from "./icons"
+import SurpriseButton from "./surprise-button"
 
 /**
  * Accueil « Gala » (thèmes Nouvel An, theme.json → "home": "gala") : noir, or et argent.
@@ -54,6 +55,7 @@ export function GalaHero({ campaign }: { campaign: Campaign }) {
                 {hero.cta2}
               </Link>
             )}
+            <SurpriseButton event="nouvel-an" label={t("fx.surprise.nouvelAn")} />
           </div>
         </div>
       </div>