@agence-zef/astro 0.10.1 → 0.11.1

package/dist/index.d.ts

@@ -32,6 +32,17 @@ export type ZefOptions = {
         checkout?: string;
         confirmation?: string;
     };
+    /**
+     * Apparitions au défilement (`data-reveal` dans les sections, styles dans `styles.css`) :
+     * actives par défaut. `false` les coupe sur tout le site ; `once: false` les rejoue à chaque
+     * entrée dans l'écran ; `threshold` (part visible, 0 à 1) et `rootMargin` règlent le moment
+     * où elles partent.
+     */
+    animations?: false | {
+        once?: boolean;
+        threshold?: number;
+        rootMargin?: string;
+    };
 };
 /**
  * Intégration Astro du CMS ZEF (cahier des charges § 10) : route attrape-tout des pages

package/dist/index.js

@@ -7,6 +7,15 @@ export * from "./accounts.js";
 export * from "./helpers.js";
 export * from "./seo.js";
 export * from "./shop.js";
+/**
+ * Script en tête de page : active les apparitions (`data-zef-reveal` sur `<html>`, avec leurs
+ * réglages) avant le premier affichage, sauf dans les routes de l'éditeur (`/__zef/…`). Filet de
+ * sécurité : si le script des apparitions n'a pas démarré après 2,5 s, tout redevient visible.
+ */
+function revealHead(animations) {
+    const settings = JSON.stringify(animations || {});
+    return `(function(){var d=document.documentElement;if(location.pathname.indexOf("/__zef/")===0)return;d.setAttribute("data-zef-reveal",${JSON.stringify(settings)});setTimeout(function(){if(!window.__zefReveal)d.removeAttribute("data-zef-reveal")},2500)})();`;
+}
 const MEDIA_URL = "https://medias.agence-zef.fr";
 /** `rendering` de `zef.config.ts` (lu comme la CLI, avec jiti) ; `static` en cas de doute. */
 async function readRendering(file) {
@@ -72,7 +81,7 @@ export default function zef(options = {}) {
     return {
         name: "@agence-zef/astro",
         hooks: {
-            "astro:config:setup": async ({ config, command, injectRoute, updateConfig, addWatchFile, addMiddleware, logger, }) => {
+            "astro:config:setup": async ({ config, command, injectRoute, injectScript, updateConfig, addWatchFile, addMiddleware, logger, }) => {
                 const root = fileURLToPath(config.root);
                 loadZefEnv(root);
                 // Redirections du CMS (C-17 : slugs modifiés, pages déplacées, redirections manuelles).
@@ -104,6 +113,11 @@ export default function zef(options = {}) {
                 if (config.build.inlineStylesheets === "auto") {
                     updateConfig({ build: { inlineStylesheets: "always" } });
                 }
+                // Apparitions au défilement (`data-reveal`) : actives sauf `animations: false`.
+                if (options.animations !== false) {
+                    injectScript("head-inline", revealHead(options.animations));
+                    injectScript("page", 'import "@agence-zef/astro/reveal";');
+                }
                 addWatchFile(join(root, ".env"));
                 const layout = join(root, options.layout ?? "src/layouts/Page.astro");
                 const configFile = join(root, "zef.config.ts");

package/dist/reveal.d.ts

@@ -0,0 +1,2 @@
+/** Observe les nouveaux `data-reveal` de la page (contenu ajouté après le chargement compris). */
+export declare function scanReveals(scope?: ParentNode): void;

package/dist/reveal.js

@@ -0,0 +1,76 @@
+/*
+ * Apparitions au défilement (`data-reveal`), chargé sur chaque page par l'intégration (option
+ * `animations`). Le visuel est dans `styles.css` ; ce script pose seulement `data-zef-visible`
+ * quand un élément entre dans l'écran, puis `data-zef-done` une fois l'effet joué (l'élément
+ * retrouve alors ses propres transitions). Ne fait rien sans `data-zef-reveal` sur `<html>`
+ * (aperçu de l'éditeur, animations coupées).
+ *
+ * Attributs : `data-reveal` (effet), `data-reveal-delay` (ms), `data-reveal-stagger` sur un
+ * parent (ses `data-reveal` arrivent en cascade), `data-reveal-scroll` (100 % CSS, ignoré ici).
+ */
+const root = document.documentElement;
+const observed = new WeakSet();
+let observer = null;
+let options = { once: true, threshold: 0.15, rootMargin: "0px 0px -5% 0px" };
+/** Fin de l'effet : l'élément ne porte plus la transition d'apparition. */
+function done(el) {
+    const style = getComputedStyle(el);
+    const seconds = (v) => Math.max(...v.split(",").map((s) => Number.parseFloat(s) || 0));
+    const ms = (seconds(style.transitionDuration) + seconds(style.transitionDelay)) * 1000;
+    window.setTimeout(() => el.setAttribute("data-zef-done", ""), ms + 50);
+}
+function onIntersect(entries) {
+    // Cascade : rang parmi les éléments d'une même liste qui apparaissent ensemble (un élément
+    // qui arrive seul à l'écran, sur mobile, part tout de suite).
+    const ranks = new Map();
+    for (const { target, isIntersecting } of entries) {
+        const el = target;
+        if (isIntersecting) {
+            const parent = el.closest("[data-reveal-stagger]");
+            if (parent) {
+                const rank = ranks.get(parent) ?? 0;
+                ranks.set(parent, rank + 1);
+                el.style.setProperty("--zef-reveal-index", String(rank));
+            }
+            el.setAttribute("data-zef-visible", "");
+            if (options.once) {
+                observer?.unobserve(el);
+                done(el);
+            }
+        }
+        else if (!options.once) {
+            el.removeAttribute("data-zef-visible");
+        }
+    }
+}
+/** Observe les nouveaux `data-reveal` de la page (contenu ajouté après le chargement compris). */
+export function scanReveals(scope = document) {
+    if (!observer)
+        return;
+    for (const el of scope.querySelectorAll("[data-reveal]:not([data-reveal-scroll])")) {
+        if (observed.has(el))
+            continue;
+        observed.add(el);
+        const delay = Number(el.dataset.revealDelay);
+        if (delay > 0)
+            el.style.setProperty("--zef-reveal-delay", `${delay}ms`);
+        observer.observe(el);
+    }
+}
+function start() {
+    const raw = root.getAttribute("data-zef-reveal");
+    if (raw === null || observer)
+        return;
+    window.__zefReveal = true;
+    try {
+        options = { ...options, ...JSON.parse(raw || "{}") };
+    }
+    catch { }
+    observer = new IntersectionObserver(onIntersect, {
+        threshold: options.threshold,
+        rootMargin: options.rootMargin,
+    });
+    scanReveals();
+}
+start();
+document.addEventListener("astro:page-load", () => scanReveals());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agence-zef/astro",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
   "license": "MIT",
   "type": "module",
@@ -65,6 +65,10 @@
       "types": "./dist/ui.d.ts",
       "import": "./dist/ui.js"
     },
+    "./reveal": {
+      "types": "./dist/reveal.d.ts",
+      "import": "./dist/reveal.js"
+    },
     "./routes/page-cached.astro": "./components/routes/page-cached.astro",
     "./routes/revalidate.ts": "./components/routes/revalidate.ts"
   },
@@ -86,8 +90,8 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "vanilla-cookieconsent": "3.1.0",
-    "@agence-zef/schema": "0.10.0",
-    "@agence-zef/sdk": "0.10.0"
+    "@agence-zef/schema": "0.11.0",
+    "@agence-zef/sdk": "0.11.0"
   },
   "homepage": "https://agence-zef.fr",
   "scripts": {

package/styles.css

@@ -686,3 +686,130 @@
 		flex-basis: 100%;
 	}
 }
+
+/*
+ * Apparitions au défilement (`data-reveal`) : le visuel est ici, en CSS ; le script de
+ * l'intégration (`src/reveal.ts`) pose seulement `data-zef-visible` quand l'élément entre dans
+ * l'écran. L'état masqué ne s'applique que sous `:root[data-zef-reveal]`, posé en tête de page
+ * par l'intégration (option `animations`) : sans JavaScript, dans l'aperçu de l'éditeur ou si le
+ * script ne se charge pas, tout reste visible.
+ *
+ * Réglages par site : les variables `--zef-reveal-*` dans le `:root` du site ; un effet maison
+ * se déclare avec les variables `--zef-reveal-from-*` (voir `CLAUDE.md` du kit).
+ */
+:where(:root) {
+	--zef-reveal-duration: 0.7s;
+	--zef-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
+	--zef-reveal-distance: 1.5rem;
+	--zef-reveal-scale: 0.94;
+	--zef-reveal-blur: 8px;
+	--zef-reveal-stagger: 80ms;
+	--zef-reveal-scroll-range: entry 0% cover 35%;
+}
+
+/* Point de départ de chaque effet (fade-up par défaut) */
+:where([data-reveal]) {
+	--zef-reveal-from-opacity: 0;
+	--zef-reveal-from-translate: 0 var(--zef-reveal-distance);
+	--zef-reveal-from-scale: none;
+	--zef-reveal-from-filter: none;
+}
+:where([data-reveal="fade"]) {
+	--zef-reveal-from-translate: none;
+}
+:where([data-reveal="fade-down"]) {
+	--zef-reveal-from-translate: 0 calc(var(--zef-reveal-distance) * -1);
+}
+:where([data-reveal="slide-left"]) {
+	--zef-reveal-from-translate: var(--zef-reveal-distance) 0;
+}
+:where([data-reveal="slide-right"]) {
+	--zef-reveal-from-translate: calc(var(--zef-reveal-distance) * -1) 0;
+}
+:where([data-reveal="zoom"]) {
+	--zef-reveal-from-translate: none;
+	--zef-reveal-from-scale: var(--zef-reveal-scale);
+}
+:where([data-reveal="blur"]) {
+	--zef-reveal-from-translate: none;
+	--zef-reveal-from-filter: blur(var(--zef-reveal-blur));
+}
+:where([data-reveal="clip"]) {
+	--zef-reveal-from-opacity: 1;
+	--zef-reveal-from-translate: none;
+}
+
+/* Déclenché à l'entrée dans l'écran : transition de l'état de départ à l'état normal */
+:root[data-zef-reveal] [data-reveal]:not([data-reveal-scroll], [data-zef-done]) {
+	transition-property: opacity, translate, scale, filter, clip-path;
+	transition-duration: var(--zef-reveal-duration);
+	transition-timing-function: var(--zef-reveal-easing);
+	transition-delay: calc(
+		var(--zef-reveal-delay, 0ms) +
+		var(--zef-reveal-index, 0) *
+		var(--zef-reveal-stagger)
+	);
+}
+:root[data-zef-reveal] [data-reveal]:not([data-reveal-scroll], [data-zef-visible]) {
+	opacity: var(--zef-reveal-from-opacity);
+	translate: var(--zef-reveal-from-translate);
+	scale: var(--zef-reveal-from-scale);
+	filter: var(--zef-reveal-from-filter);
+}
+/* Dévoilement par masque : seul effet qui touche à clip-path (les autres gardent celui du site) */
+:root[data-zef-reveal] [data-reveal="clip"]:not([data-reveal-scroll], [data-zef-visible]) {
+	clip-path: inset(0 100% 0 0);
+}
+:root[data-zef-reveal] [data-reveal="clip"][data-zef-visible]:not([data-zef-done]) {
+	clip-path: inset(0 0 0 0);
+}
+
+/*
+ * Variante 100 % CSS liée au défilement (`data-reveal-scroll`) : l'effet avance et recule avec
+ * le défilement. Navigateurs sans `animation-timeline` : rien n'est animé, tout est visible.
+ */
+@keyframes zef-reveal {
+	from {
+		opacity: var(--zef-reveal-from-opacity);
+		translate: var(--zef-reveal-from-translate);
+		scale: var(--zef-reveal-from-scale);
+		filter: var(--zef-reveal-from-filter);
+	}
+}
+@keyframes zef-reveal-clip {
+	from {
+		clip-path: inset(0 100% 0 0);
+	}
+	to {
+		clip-path: inset(0 0 0 0);
+	}
+}
+@supports (animation-timeline: view()) {
+	@media (prefers-reduced-motion: no-preference) {
+		:root[data-zef-reveal] [data-reveal][data-reveal-scroll] {
+			animation: zef-reveal linear both;
+			animation-timeline: view();
+			animation-range: var(--zef-reveal-scroll-range);
+		}
+		:root[data-zef-reveal] [data-reveal="clip"][data-reveal-scroll] {
+			animation-name: zef-reveal-clip;
+		}
+	}
+}
+
+/* Mouvement réduit : un fondu court, sans déplacement ni flou */
+@media (prefers-reduced-motion: reduce) {
+	:where([data-reveal]) {
+		--zef-reveal-from-translate: none;
+		--zef-reveal-from-scale: none;
+		--zef-reveal-from-filter: none;
+		--zef-reveal-stagger: 0ms;
+		--zef-reveal-duration: 0.3s;
+	}
+	:where([data-reveal="clip"]) {
+		--zef-reveal-from-opacity: 0;
+	}
+	:root[data-zef-reveal] [data-reveal="clip"]:not([data-reveal-scroll], [data-zef-visible]) {
+		clip-path: none;
+	}
+}