@komekoo/astro-cms 0.1.0 → 0.2.0

package/README.md

@@ -72,7 +72,7 @@ export default defineConfig({
       site: 'Salon de coiffure à Vichy', // présentation du site dans ai/manifest.json (obligatoire)
       contact: 'contact@exemple.fr', // contact proposé pour les demandes hors périmètre (obligatoire)
       url: 'https://exemple.fr', // adresse publique du site, https sans « / » final (obligatoire)
-      admin: { accent: '#5DEFB7', logo: '/uploads/logo-2400.webp', origine: 'https://admin.exemple.fr' }, // facultatif
+      admin: { accent: '#5DEFB7', logo: '/uploads/logo-2400.webp', origine: 'https://admin.exemple.fr', apercu: 'https://apercu.exemple.pages.dev' }, // facultatif
       horsPerimetre: ['Modifier le menu de navigation'], // ajouts à la liste socle (facultatif)
     }),
   ],
@@ -100,6 +100,22 @@ guillemets), `MOTIF_LIEN` et `MOTIF_SRC_IMAGE`.
 Options récentes : `url` (obligatoire) et `admin` de `cms()`, `onglet` sur les champs, `adresse` sur les
 singletons, et le bloc `x-cms-site` de `cms.schema.json`.
 
+## Aperçu des pages : `cms()`
+
+```astro
+---
+import { cms } from '@komekoo/astro-cms';
+---
+<h1 {...cms('accueil.titre')}>{page.titre}</h1>
+```
+
+`cms('<page>.<champ>')` marque l'élément comme éditable : l'admin le met à jour pendant la saisie et le relie au champ. Chemin : `<page>.<champ>(.<sous-champ>|.<indice>)*`, pages (singletons) uniquement. Au build, chaque marqueur est vérifié contre `cms.schema.json` ; erreur `page HTML — chemin — motif` si le chemin est inconnu, si un champ image n'est pas sur un `<img>` ou si un champ lien n'est pas sur un `<a>`.
+
+- `defineSingleton(id, { …, apercu: '/contact' })` : page à montrer pour un singleton sans `adresse` (par ex. les Réglages).
+- `cms({ …, admin: { apercu: 'https://apercu.<projet>.pages.dev' } })` : adresse fixe de la branche d'aperçu ; active « Prévisualiser ».
+- Le build ajoute au site `/_cms/chargeur.js` (balise `<script>` dans chaque page), `/_cms/apercu/` et `/_cms/motifs.js`, et un `_headers` avec `Content-Security-Policy: frame-ancestors 'self' <origine admin>` ; `X-Robots-Tag: noindex` si `CF_PAGES_BRANCH` n'est pas `main`. Un `X-Frame-Options` `DENY` ou `SAMEORIGIN` déjà présent déclenche un avertissement : le retirer. Une CSP propre au site doit autoriser `script-src 'self'`.
+- Sous-chemins sans dépendance à Node : `@komekoo/astro-cms/apercu` (protocole d'échange, sans analyseur Markdown), `@komekoo/astro-cms/apercu/arbre` (`versArbre`, Markdown → arbre d'aperçu, à charger à la demande) et `@komekoo/astro-cms/navigateur`.
+
 ## Composant `<CmsImage>`
 
 ```astro
@@ -110,7 +126,8 @@ import CmsImage from '@komekoo/astro-cms/CmsImage.astro';
 ```
 
 Produit un `<img>` avec `srcset` sur les variantes 800 / 1600 / 2400, `width`, `height` et `alt`.
-Props : `image` (obligatoire), `sizes` (`100vw` par défaut), `loading` (`lazy` par défaut), `class`.
+Props : `image` (obligatoire), `sizes` (`100vw` par défaut), `loading` (`lazy` par défaut), `class`, `cms`
+(chemin du marqueur d'aperçu, par ex. `cms="accueil.image"`).
 
 ## Limites connues
 

package/dist/ajv.js

@@ -7,6 +7,7 @@ export const MOTS_CLES_CMS = [
     'x-cms-libelle',
     'x-cms-fichier',
     'x-cms-adresse',
+    'x-cms-apercu',
     'x-cms-dossier',
     'x-cms-format',
     'x-cms-titre',

package/dist/apercu/arbre.d.ts

@@ -0,0 +1,3 @@
+import type { NoeudRiche } from './protocole.js';
+/** Convertit du Markdown en arbre restreint ; tout élément hors du sous-ensemble autorisé devient du texte brut. */
+export declare function versArbre(markdown: string): NoeudRiche[];

package/dist/apercu/arbre.js

@@ -0,0 +1,64 @@
+import { analyseur } from '../noyau/markdown.js';
+import { MOTIF_LIEN, MOTIF_SRC_IMAGE } from '../motifs.js';
+/** Texte brut d'un nœud : sa valeur littérale, ou celle de ses descendants. */
+function toString(noeud) {
+    if ('value' in noeud)
+        return noeud.value;
+    return enfants(noeud).map(toString).join('');
+}
+const enfants = (noeud) => ('children' in noeud ? noeud.children : []);
+function convertirTous(liste) {
+    return liste.flatMap(convertir);
+}
+function balise(t, liste) {
+    return [{ t, c: convertirTous(liste) }];
+}
+function convertir(noeud) {
+    switch (noeud.type) {
+        case 'paragraph':
+            return balise('p', noeud.children);
+        case 'heading':
+            return noeud.depth === 2 || noeud.depth === 3
+                ? balise(noeud.depth === 2 ? 'h2' : 'h3', noeud.children)
+                : [{ t: 'texte', v: toString(noeud) }];
+        case 'strong':
+            return balise('strong', noeud.children);
+        case 'emphasis':
+            return balise('em', noeud.children);
+        case 'list':
+            return balise(noeud.ordered ? 'ol' : 'ul', noeud.children);
+        case 'listItem':
+            return balise('li', noeud.children);
+        case 'blockquote':
+            return balise('blockquote', noeud.children);
+        case 'table': {
+            const [entete, ...corps] = noeud.children;
+            const ligne = (l, cellule) => ({
+                t: 'tr',
+                c: l.children.map((c) => ({ t: cellule, c: convertirTous(c.children) })),
+            });
+            const c = [];
+            if (entete)
+                c.push({ t: 'thead', c: [ligne(entete, 'th')] });
+            c.push({ t: 'tbody', c: corps.map((l) => ligne(l, 'td')) });
+            return [{ t: 'table', c }];
+        }
+        case 'break':
+            return [{ t: 'br' }];
+        case 'text':
+            return [{ t: 'texte', v: noeud.value }];
+        case 'link':
+            return MOTIF_LIEN.test(noeud.url)
+                ? [{ t: 'a', href: noeud.url, c: convertirTous(noeud.children) }]
+                : convertirTous(noeud.children);
+        case 'image':
+            return MOTIF_SRC_IMAGE.test(noeud.url) ? [{ t: 'img', src: noeud.url, alt: noeud.alt ?? '' }] : [];
+        default:
+            return [{ t: 'texte', v: toString(noeud) }];
+    }
+}
+/** Convertit du Markdown en arbre restreint ; tout élément hors du sous-ensemble autorisé devient du texte brut. */
+export function versArbre(markdown) {
+    const racine = analyseur.parse(markdown.replace(/\r\n/g, '\n'));
+    return convertirTous(enfants(racine));
+}

package/dist/apercu/demarrage.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/apercu/demarrage.js

@@ -0,0 +1,5 @@
+// Point d'entrée de l'aperçu dans le site construit. L'intégration remplace la chaîne ci-dessous, guillemets compris,
+// par l'origine de l'admin (chaîne JSON) en copiant ce fichier.
+import { demarrerApercu } from './script.js';
+const ORIGINE_ADMIN = '__KOMEKOO_ORIGINE_ADMIN__';
+demarrerApercu(window, ORIGINE_ADMIN);

package/dist/apercu/index.d.ts

@@ -0,0 +1,2 @@
+export { BALISES_RICHES, lireMessage } from './protocole.js';
+export type { Message, NoeudRiche, ValeurApercu } from './protocole.js';

package/dist/apercu/index.js

@@ -0,0 +1,2 @@
+// Protocole seul : `versArbre` (analyseur Markdown) est servi à part par `@komekoo/astro-cms/apercu/arbre`.
+export { BALISES_RICHES, lireMessage } from './protocole.js';

package/dist/apercu/protocole.d.ts

@@ -0,0 +1,67 @@
+import { MOTIF_CHEMIN_CMS, MOTIF_LIEN, MOTIF_SRC_IMAGE } from '../motifs.js';
+export { MOTIF_CHEMIN_CMS, MOTIF_LIEN, MOTIF_SRC_IMAGE };
+export type NoeudRiche = {
+    t: 'texte';
+    v: string;
+} | {
+    t: 'p' | 'h2' | 'h3' | 'strong' | 'em' | 'ul' | 'ol' | 'li' | 'blockquote' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td' | 'br';
+    c?: NoeudRiche[];
+} | {
+    t: 'a';
+    href: string;
+    c: NoeudRiche[];
+} | {
+    t: 'img';
+    src: string;
+    alt: string;
+};
+export type ValeurApercu = {
+    type: 'texte';
+    texte: string;
+} | {
+    type: 'image';
+    src: string;
+    srcset: string;
+    alt: string;
+} | {
+    type: 'lien';
+    href: string;
+    texte?: string;
+} | {
+    type: 'riche';
+    arbre: NoeudRiche[];
+} | {
+    type: 'indisponible';
+};
+export type Message = {
+    cms: 1;
+    type: 'bonjour';
+} | {
+    cms: 1;
+    type: 'pret';
+    chemins: string[];
+} | {
+    cms: 1;
+    type: 'valeurs';
+    valeurs: Record<string, ValeurApercu>;
+} | {
+    cms: 1;
+    type: 'actif';
+    chemin: string | null;
+    libelle?: string;
+} | {
+    cms: 1;
+    type: 'clic';
+    chemin: string;
+} | {
+    cms: 1;
+    type: 'lien';
+    adresse: string;
+};
+/** Balises de `NoeudRiche` qui contiennent des enfants, hors `texte`, `a` et `img`. */
+export declare const BALISES_RICHES: ReadonlySet<string>;
+export declare const MAX_CHEMINS = 500;
+/** URL absolue http(s), sans espace ni caractère de contrôle. */
+export declare function estUrlAbsolue(x: unknown): x is string;
+/** Valide strictement un message reçu ; renvoie une copie neuve, ou `null` si quoi que ce soit est refusé. */
+export declare function lireMessage(donnee: unknown): Message | null;

package/dist/apercu/protocole.js

@@ -0,0 +1,176 @@
+// Protocole d'échange entre l'admin et le site (aperçu). Ne dépend que de `../motifs.js` : ce fichier est aussi
+// copié tel quel dans le site construit, où il est chargé comme module du navigateur.
+import { MOTIF_CHEMIN_CMS, MOTIF_LIEN, MOTIF_SRC_IMAGE } from '../motifs.js';
+// Réexportés pour `script.ts`, qui ne doit importer que ce fichier une fois copié dans le site.
+export { MOTIF_CHEMIN_CMS, MOTIF_LIEN, MOTIF_SRC_IMAGE };
+/** Balises de `NoeudRiche` qui contiennent des enfants, hors `texte`, `a` et `img`. */
+export const BALISES_RICHES = new Set([
+    'p', 'h2', 'h3', 'strong', 'em', 'ul', 'ol', 'li', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'br',
+]);
+export const MAX_CHEMINS = 500;
+const PROFONDEUR_MAX = 20;
+/** Chemin interne : ni « // » ni « /\ » au début, aucun antislash, espace ni caractère de contrôle. */
+const MOTIF_ADRESSE = /^\/(?![\/\\])[^\s\x00-\x1f\\]*$/;
+const estObjet = (x) => typeof x === 'object' && x !== null && !Array.isArray(x);
+const cles = (o, attendues, facultatives = []) => Object.keys(o).every((k) => attendues.includes(k) || facultatives.includes(k)) && attendues.every((k) => k in o);
+const estChemin = (x) => typeof x === 'string' && MOTIF_CHEMIN_CMS.test(x);
+const estLien = (x) => typeof x === 'string' && MOTIF_LIEN.test(x);
+/** URL absolue http(s), sans espace ni caractère de contrôle. */
+export function estUrlAbsolue(x) {
+    if (typeof x !== 'string' || /[\s\x00-\x1f]/.test(x))
+        return false;
+    try {
+        const protocole = new URL(x).protocol;
+        return protocole === 'https:' || protocole === 'http:';
+    }
+    catch {
+        return false;
+    }
+}
+function srcsetValide(x) {
+    if (typeof x !== 'string')
+        return false;
+    if (x === '')
+        return true;
+    return x.split(',').every((entree) => {
+        const [url, ...reste] = entree.trim().split(/\s+/);
+        return estUrlAbsolue(url) && reste.length <= 1;
+    });
+}
+function lireNoeud(x, profondeur) {
+    if (profondeur > PROFONDEUR_MAX || !estObjet(x))
+        return null;
+    const t = x.t;
+    if (t === 'texte') {
+        return cles(x, ['t', 'v']) && typeof x.v === 'string' ? { t, v: x.v } : null;
+    }
+    if (t === 'img') {
+        if (!cles(x, ['t', 'src', 'alt']) || typeof x.alt !== 'string')
+            return null;
+        // Les arbres de `versArbre` portent des chemins relatifs /uploads/ ; l'admin peut aussi envoyer des URL absolues.
+        const ok = estUrlAbsolue(x.src) || (typeof x.src === 'string' && MOTIF_SRC_IMAGE.test(x.src));
+        return ok ? { t, src: x.src, alt: x.alt } : null;
+    }
+    if (t === 'a') {
+        if (!cles(x, ['t', 'href', 'c']) || !estLien(x.href))
+            return null;
+        const c = lireNoeuds(x.c, profondeur + 1);
+        return c ? { t, href: x.href, c } : null;
+    }
+    if (typeof t === 'string' && BALISES_RICHES.has(t)) {
+        if (!cles(x, ['t'], ['c']))
+            return null;
+        const balise = t;
+        if (x.c === undefined)
+            return { t: balise };
+        const c = lireNoeuds(x.c, profondeur + 1);
+        return c ? { t: balise, c } : null;
+    }
+    return null;
+}
+function lireNoeuds(x, profondeur) {
+    if (!Array.isArray(x))
+        return null;
+    const sortie = [];
+    for (const element of x) {
+        const noeud = lireNoeud(element, profondeur);
+        if (!noeud)
+            return null;
+        sortie.push(noeud);
+    }
+    return sortie;
+}
+function lireValeur(x) {
+    if (!estObjet(x))
+        return null;
+    switch (x.type) {
+        case 'texte':
+            return cles(x, ['type', 'texte']) && typeof x.texte === 'string' ? { type: 'texte', texte: x.texte } : null;
+        case 'image':
+            return cles(x, ['type', 'src', 'srcset', 'alt']) &&
+                estUrlAbsolue(x.src) &&
+                srcsetValide(x.srcset) &&
+                typeof x.alt === 'string'
+                ? { type: 'image', src: x.src, srcset: x.srcset, alt: x.alt }
+                : null;
+        case 'lien': {
+            if (!cles(x, ['type', 'href'], ['texte']) || !estLien(x.href))
+                return null;
+            if (x.texte === undefined)
+                return { type: 'lien', href: x.href };
+            return typeof x.texte === 'string' ? { type: 'lien', href: x.href, texte: x.texte } : null;
+        }
+        case 'riche': {
+            if (!cles(x, ['type', 'arbre']))
+                return null;
+            const arbre = lireNoeuds(x.arbre, 1);
+            return arbre ? { type: 'riche', arbre } : null;
+        }
+        case 'indisponible':
+            return cles(x, ['type']) ? { type: 'indisponible' } : null;
+        default:
+            return null;
+    }
+}
+/** Valide strictement un message reçu ; renvoie une copie neuve, ou `null` si quoi que ce soit est refusé. */
+export function lireMessage(donnee) {
+    if (!estObjet(donnee) || donnee.cms !== 1)
+        return null;
+    switch (donnee.type) {
+        case 'bonjour':
+            return cles(donnee, ['cms', 'type']) ? { cms: 1, type: 'bonjour' } : null;
+        case 'pret': {
+            if (!cles(donnee, ['cms', 'type', 'chemins']))
+                return null;
+            const chemins = donnee.chemins;
+            if (!Array.isArray(chemins) || chemins.length > MAX_CHEMINS)
+                return null;
+            const copie = [];
+            for (const chemin of chemins) {
+                // for…of visite aussi les trous d'un tableau creux (valeur undefined), qui sont donc refusés.
+                if (!estChemin(chemin))
+                    return null;
+                copie.push(chemin);
+            }
+            return { cms: 1, type: 'pret', chemins: copie };
+        }
+        case 'valeurs': {
+            if (!cles(donnee, ['cms', 'type', 'valeurs']) || !estObjet(donnee.valeurs))
+                return null;
+            const valeurs = {};
+            for (const [chemin, brut] of Object.entries(donnee.valeurs)) {
+                const valeur = lireValeur(brut);
+                if (!estChemin(chemin) || !valeur)
+                    return null;
+                valeurs[chemin] = valeur;
+            }
+            return { cms: 1, type: 'valeurs', valeurs };
+        }
+        case 'actif': {
+            if (!cles(donnee, ['cms', 'type', 'chemin'], ['libelle']))
+                return null;
+            const chemin = donnee.chemin;
+            if (chemin !== null && !estChemin(chemin))
+                return null;
+            if (donnee.libelle === undefined)
+                return { cms: 1, type: 'actif', chemin };
+            return typeof donnee.libelle === 'string'
+                ? { cms: 1, type: 'actif', chemin, libelle: donnee.libelle }
+                : null;
+        }
+        case 'clic':
+            return cles(donnee, ['cms', 'type', 'chemin']) && estChemin(donnee.chemin)
+                ? { cms: 1, type: 'clic', chemin: donnee.chemin }
+                : null;
+        case 'lien': {
+            if (!cles(donnee, ['cms', 'type', 'adresse']))
+                return null;
+            const adresse = donnee.adresse;
+            return typeof adresse === 'string' && MOTIF_ADRESSE.test(adresse)
+                ? { cms: 1, type: 'lien', adresse }
+                : null;
+        }
+        default:
+            return null;
+    }
+}

package/dist/apercu/script.d.ts

@@ -0,0 +1,8 @@
+import { type NoeudRiche } from './protocole.js';
+/** Remplace les enfants de `element` par l'arbre, en ne créant que les nœuds et attributs autorisés. */
+export declare function appliquerArbre(element: Element, arbre: NoeudRiche[]): void;
+/**
+ * Démarre l'aperçu dans `fenetre` : écoute les messages de l'admin (`origineAdmin`, fenêtre parente).
+ * Renvoie une fonction d'arrêt.
+ */
+export declare function demarrerApercu(fenetre: Window, origineAdmin: string): () => void;

package/dist/apercu/script.js

@@ -0,0 +1,321 @@
+// Script d'aperçu exécuté dans le site du client, affiché dans l'admin. Frontière de sécurité :
+// - seuls les messages de l'origine de l'admin, venant de la fenêtre parente et validés par `lireMessage`, sont lus ;
+// - avant le premier `bonjour` valide, rien n'est modifié et aucun événement n'est capté ;
+// - le contenu n'est construit qu'avec `createElement`, `createTextNode`, `setAttribute` et `textContent`.
+// N'importe que `./protocole.js` : ce fichier est copié tel quel dans le site construit (module du navigateur).
+import { BALISES_RICHES, MAX_CHEMINS, MOTIF_CHEMIN_CMS, MOTIF_LIEN, MOTIF_SRC_IMAGE, estUrlAbsolue, lireMessage, } from './protocole.js';
+const CLASSE_ZONE = 'komekoo-zone';
+const CLASSE_ACTIVE = 'komekoo-zone--active';
+const CLASSE_ETIQUETTE = 'komekoo-zone__etiquette';
+const CLASSE_INFO = 'komekoo-info';
+const TEXTE_LIEN_DESACTIVE = "Les liens sont désactivés dans l'aperçu";
+const TEXTE_INDISPONIBLE = 'Visible dans la prévisualisation';
+const DUREE_INFO = 2000;
+const PROFONDEUR_MAX = 20;
+// Valeurs de la maquette 04 (`.zone-editable`, `--active`, `__etiquette`) recopiées en dur, préfixe `komekoo-`.
+const STYLES = `
+.${CLASSE_ZONE}{outline:1px dashed transparent!important;outline-offset:2px!important;cursor:pointer!important;transition:outline-color 120ms ease}
+.${CLASSE_ZONE}:hover{outline-color:#52525B!important}
+.${CLASSE_ACTIVE}{box-shadow:0 0 0 2px #5DEFB7!important}
+.${CLASSE_ETIQUETTE},.${CLASSE_INFO}{position:fixed;z-index:2147483647;margin:0;pointer-events:none;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:0.8125rem;font-weight:500;line-height:1.5;letter-spacing:normal;text-transform:none;white-space:nowrap}
+.${CLASSE_ETIQUETTE}{padding:0 0.5rem;border-radius:0.375rem;background:#5DEFB7;color:#0E2A1E}
+.${CLASSE_INFO}{padding:0.25rem 0.75rem;border-radius:0.625rem;background:#18181B;color:#FFFFFF;box-shadow:0 12px 32px rgba(31,28,25,0.14),0 1px 2px rgba(31,28,25,0.06)}
+@media (prefers-reduced-motion:reduce){.${CLASSE_ZONE}{transition:none}}
+`;
+const estObjet = (x) => typeof x === 'object' && x !== null && !Array.isArray(x);
+const srcImageAutorisee = (x) => estUrlAbsolue(x) || (typeof x === 'string' && MOTIF_SRC_IMAGE.test(x));
+function construire(document, noeuds, profondeur, parent) {
+    if (!Array.isArray(noeuds) || profondeur > PROFONDEUR_MAX)
+        return;
+    for (const noeud of noeuds) {
+        if (!estObjet(noeud))
+            continue;
+        const t = noeud.t;
+        if (t === 'texte') {
+            if (typeof noeud.v === 'string')
+                parent.appendChild(document.createTextNode(noeud.v));
+        }
+        else if (t === 'a') {
+            if (typeof noeud.href === 'string' && MOTIF_LIEN.test(noeud.href)) {
+                const a = document.createElement('a');
+                a.setAttribute('href', noeud.href);
+                construire(document, noeud.c, profondeur + 1, a);
+                parent.appendChild(a);
+            }
+            else {
+                // Adresse refusée : le texte du lien est gardé, sans lien.
+                construire(document, noeud.c, profondeur + 1, parent);
+            }
+        }
+        else if (t === 'img') {
+            if (srcImageAutorisee(noeud.src)) {
+                const img = document.createElement('img');
+                img.setAttribute('src', noeud.src);
+                img.setAttribute('alt', typeof noeud.alt === 'string' ? noeud.alt : '');
+                parent.appendChild(img);
+            }
+        }
+        else if (typeof t === 'string' && BALISES_RICHES.has(t)) {
+            const element = document.createElement(t);
+            if (t !== 'br')
+                construire(document, noeud.c, profondeur + 1, element);
+            parent.appendChild(element);
+        }
+        // Tout autre type est ignoré, avec ses enfants.
+    }
+}
+/** Remplace les enfants de `element` par l'arbre, en ne créant que les nœuds et attributs autorisés. */
+export function appliquerArbre(element, arbre) {
+    const document = element.ownerDocument;
+    const fragment = document.createDocumentFragment();
+    construire(document, arbre, 1, fragment);
+    element.replaceChildren(fragment);
+}
+function appliquerValeur(element, valeur) {
+    switch (valeur.type) {
+        case 'texte':
+            element.textContent = valeur.texte;
+            return;
+        case 'image':
+            if (element.localName !== 'img' || !estUrlAbsolue(valeur.src))
+                return;
+            element.setAttribute('src', valeur.src);
+            if (valeur.srcset === '')
+                element.removeAttribute('srcset');
+            else
+                element.setAttribute('srcset', valeur.srcset);
+            element.setAttribute('alt', valeur.alt);
+            return;
+        case 'lien':
+            if (element.localName !== 'a' || !MOTIF_LIEN.test(valeur.href))
+                return;
+            element.setAttribute('href', valeur.href);
+            if (valeur.texte !== undefined && Array.from(element.childNodes).every((n) => n.nodeType === 3)) {
+                element.textContent = valeur.texte;
+            }
+            return;
+        case 'riche':
+            appliquerArbre(element, valeur.arbre);
+            return;
+        case 'indisponible':
+            return;
+    }
+}
+function elementDe(cible) {
+    const noeud = cible;
+    if (!noeud || typeof noeud.nodeType !== 'number')
+        return null;
+    return noeud.nodeType === 1 ? noeud : noeud.parentElement;
+}
+/**
+ * Démarre l'aperçu dans `fenetre` : écoute les messages de l'admin (`origineAdmin`, fenêtre parente).
+ * Renvoie une fonction d'arrêt.
+ */
+export function demarrerApercu(fenetre, origineAdmin) {
+    const document = fenetre.document;
+    if (fenetre.parent === fenetre)
+        return () => { };
+    let actif = false;
+    let feuille = null;
+    let etiquette = null;
+    let info = null;
+    let minuterieInfo;
+    let zoneActive = null;
+    const indisponibles = new Set();
+    const marques = () => Array.from(document.querySelectorAll('[data-cms]'));
+    const marquesDe = (chemin) => marques().filter((e) => e.getAttribute('data-cms') === chemin);
+    function envoyer(message) {
+        fenetre.parent.postMessage(message, origineAdmin);
+    }
+    function installerStyles() {
+        try {
+            const Feuille = fenetre.CSSStyleSheet;
+            if (typeof Feuille !== 'function' || !Array.isArray(document.adoptedStyleSheets))
+                return;
+            const nouvelle = new Feuille();
+            nouvelle.replaceSync(STYLES);
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, nouvelle];
+            feuille = nouvelle;
+        }
+        catch {
+            feuille = null;
+        }
+    }
+    function marquerZones() {
+        for (const element of marques())
+            element.classList.add(CLASSE_ZONE);
+    }
+    function placer(boite, gauche, haut) {
+        const largeur = fenetre.innerWidth || 0;
+        boite.style.setProperty('left', `${Math.max(0, Math.min(gauche, largeur - boite.offsetWidth - 4))}px`);
+        boite.style.setProperty('top', `${Math.max(0, haut)}px`);
+    }
+    function placerEtiquette() {
+        if (!etiquette || !zoneActive)
+            return;
+        const cible = marquesDe(zoneActive.chemin)[0];
+        if (!cible)
+            return;
+        const rect = cible.getBoundingClientRect();
+        const haut = rect.top - etiquette.offsetHeight - 4;
+        placer(etiquette, rect.left, haut < 0 ? rect.bottom + 4 : haut);
+    }
+    function retirerActif() {
+        for (const element of document.querySelectorAll(`.${CLASSE_ACTIVE}`))
+            element.classList.remove(CLASSE_ACTIVE);
+        etiquette?.remove();
+    }
+    function afficherActif(defiler) {
+        retirerActif();
+        if (!zoneActive)
+            return;
+        const elements = marquesDe(zoneActive.chemin);
+        if (elements.length === 0)
+            return;
+        for (const element of elements)
+            element.classList.add(CLASSE_ACTIVE);
+        const morceaux = [zoneActive.libelle, indisponibles.has(zoneActive.chemin) ? TEXTE_INDISPONIBLE : ''].filter(Boolean);
+        if (morceaux.length > 0) {
+            etiquette ??= document.createElement('span');
+            etiquette.className = CLASSE_ETIQUETTE;
+            etiquette.setAttribute('aria-hidden', 'true');
+            etiquette.textContent = morceaux.join(' — ');
+            (document.body ?? document.documentElement).appendChild(etiquette);
+            placerEtiquette();
+        }
+        if (defiler) {
+            const premier = elements[0];
+            const reduit = typeof fenetre.matchMedia === 'function' && fenetre.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            if (typeof premier.scrollIntoView === 'function') {
+                premier.scrollIntoView({ behavior: reduit ? 'auto' : 'smooth', block: 'nearest', inline: 'nearest' });
+            }
+        }
+    }
+    function retirerInfo() {
+        if (minuterieInfo !== undefined)
+            fenetre.clearTimeout(minuterieInfo);
+        minuterieInfo = undefined;
+        info?.remove();
+        info = null;
+    }
+    function afficherInfo(gauche, haut) {
+        retirerInfo();
+        const bulle = document.createElement('div');
+        bulle.className = CLASSE_INFO;
+        bulle.setAttribute('role', 'status');
+        bulle.style.setProperty('position', 'fixed');
+        bulle.style.setProperty('z-index', '2147483647');
+        bulle.style.setProperty('pointer-events', 'none');
+        bulle.textContent = TEXTE_LIEN_DESACTIVE;
+        (document.body ?? document.documentElement).appendChild(bulle);
+        placer(bulle, gauche + 12, haut + 12);
+        info = bulle;
+        minuterieInfo = fenetre.setTimeout(retirerInfo, DUREE_INFO);
+    }
+    function surClic(evenement) {
+        const element = elementDe(evenement.target);
+        if (!element)
+            return;
+        const zone = element.closest('[data-cms]');
+        const chemin = zone?.getAttribute('data-cms');
+        if (chemin && MOTIF_CHEMIN_CMS.test(chemin)) {
+            evenement.preventDefault();
+            envoyer({ cms: 1, type: 'clic', chemin });
+            return;
+        }
+        const lien = element.closest('a[href], area[href]');
+        if (!lien)
+            return;
+        evenement.preventDefault();
+        let adresse = null;
+        try {
+            adresse = new URL(lien.getAttribute('href') ?? '', document.baseURI);
+        }
+        catch {
+            adresse = null;
+        }
+        if (adresse && adresse.origin === fenetre.location.origin) {
+            const message = lireMessage({ cms: 1, type: 'lien', adresse: adresse.pathname });
+            if (message) {
+                envoyer(message);
+                return;
+            }
+        }
+        afficherInfo(evenement.clientX, evenement.clientY);
+    }
+    function surAuxClic(evenement) {
+        // Clic du milieu sur un lien : ouvrirait la page hors de l'aperçu.
+        if (elementDe(evenement.target)?.closest('a[href], area[href]'))
+            evenement.preventDefault();
+    }
+    function surEnvoi(evenement) {
+        evenement.preventDefault();
+        const formulaire = elementDe(evenement.target);
+        const rect = formulaire?.getBoundingClientRect();
+        afficherInfo(rect ? rect.left : 0, rect ? rect.top : 0);
+    }
+    function surDefilement() {
+        placerEtiquette();
+    }
+    function activer() {
+        actif = true;
+        installerStyles();
+        fenetre.addEventListener('click', surClic, true);
+        fenetre.addEventListener('auxclick', surAuxClic, true);
+        fenetre.addEventListener('submit', surEnvoi, true);
+        fenetre.addEventListener('scroll', surDefilement, { capture: true, passive: true });
+        fenetre.addEventListener('resize', surDefilement, { passive: true });
+    }
+    function surMessage(evenement) {
+        if (evenement.origin !== origineAdmin || evenement.source !== fenetre.parent)
+            return;
+        const message = lireMessage(evenement.data);
+        if (!message)
+            return;
+        if (message.type === 'bonjour') {
+            if (!actif)
+                activer();
+            marquerZones();
+            const chemins = [...new Set(marques().map((e) => e.getAttribute('data-cms') ?? ''))]
+                .filter((chemin) => MOTIF_CHEMIN_CMS.test(chemin))
+                .slice(0, MAX_CHEMINS);
+            envoyer({ cms: 1, type: 'pret', chemins });
+            return;
+        }
+        if (!actif)
+            return;
+        if (message.type === 'valeurs') {
+            marquerZones();
+            for (const [chemin, valeur] of Object.entries(message.valeurs)) {
+                if (valeur.type === 'indisponible')
+                    indisponibles.add(chemin);
+                else
+                    indisponibles.delete(chemin);
+                for (const element of marquesDe(chemin))
+                    appliquerValeur(element, valeur);
+            }
+            afficherActif(false);
+        }
+        else if (message.type === 'actif') {
+            marquerZones();
+            zoneActive = message.chemin === null ? null : { chemin: message.chemin, libelle: message.libelle ?? '' };
+            afficherActif(true);
+        }
+    }
+    fenetre.addEventListener('message', surMessage);
+    return () => {
+        fenetre.removeEventListener('message', surMessage);
+        fenetre.removeEventListener('click', surClic, true);
+        fenetre.removeEventListener('auxclick', surAuxClic, true);
+        fenetre.removeEventListener('submit', surEnvoi, true);
+        fenetre.removeEventListener('scroll', surDefilement, true);
+        fenetre.removeEventListener('resize', surDefilement);
+        retirerInfo();
+        retirerActif();
+        if (feuille) {
+            const retiree = feuille;
+            document.adoptedStyleSheets = document.adoptedStyleSheets.filter((f) => f !== retiree);
+        }
+        actif = false;
+    };
+}

package/dist/collections.d.ts

@@ -15,6 +15,7 @@ declare const TYPE_ASTRO = "content_layer";
 export declare function defineSingleton<S extends Forme>(id: string, o: {
     libelle: string;
     adresse?: string;
+    apercu?: string;
     schema: S;
 }): {
     type: typeof TYPE_ASTRO;

package/dist/collections.js

@@ -17,9 +17,14 @@ export function defineSingleton(id, o) {
     if (o.adresse !== undefined && !RE_ADRESSE.test(o.adresse)) {
         throw new Error(`adresse « ${o.adresse} » invalide : attendu ${RE_ADRESSE.source}`);
     }
+    if (o.apercu !== undefined && !RE_ADRESSE.test(o.apercu)) {
+        throw new Error(`apercu « ${o.apercu} » invalide : attendu ${RE_ADRESSE.source}`);
+    }
     const decl = { type: 'singleton', id, libelle: o.libelle };
     if (o.adresse !== undefined)
         decl.adresse = o.adresse;
+    if (o.apercu !== undefined)
+        decl.apercu = o.apercu;
     return {
         type: TYPE_ASTRO,
         loader: glob({ pattern: `${id}.json`, base: './src/content/pages' }),

package/dist/images.js

@@ -1,4 +1,4 @@
-import { MOTIF_SRC_IMAGE } from './champs.js';
+import { MOTIF_SRC_IMAGE } from './motifs.js';
 export const LARGEURS = [800, 1600, 2400];
 export function variantes(src) {
     if (!MOTIF_SRC_IMAGE.test(src)) {

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { lireMeta } from './types.js';
 export type { Editeur, MetaCms, OptionsBase, DeclSingleton, DeclCollection } from './types.js';
 export { ErreurCms } from './noyau/erreurs.js';
 export { defineSingleton, defineCollection, lireDecl, CMS } from './collections.js';
+export { cms } from './marqueur.js';
 export { creerAjv, MOTS_CLES_CMS } from './ajv.js';
 export { versManifest } from './noyau/manifest.js';
 export type { OptionsCms } from './noyau/manifest.js';

package/dist/index.js

@@ -3,6 +3,7 @@ export { champ } from './champs.js';
 export { lireMeta } from './types.js';
 export { ErreurCms } from './noyau/erreurs.js';
 export { defineSingleton, defineCollection, lireDecl, CMS } from './collections.js';
+export { cms } from './marqueur.js';
 export { creerAjv, MOTS_CLES_CMS } from './ajv.js';
 export { versManifest } from './noyau/manifest.js';
 export { HORS_PERIMETRE_SOCLE } from './socle/hors-perimetre.js';

package/dist/integration.js

@@ -1,3 +1,4 @@
+import { promises as fsp } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { chargerConfigAstro } from './noyau/charger.js';
@@ -5,6 +6,8 @@ import { formaterViolations } from './noyau/contenus.js';
 import { MOTIF_SRC_IMAGE, MOTIF_URL_SITE } from './motifs.js';
 import { ErreurCms } from './noyau/erreurs.js';
 import { synchroniser, verifier } from './noyau/operations.js';
+import { ecrireApercu } from './noyau/apercu-build.js';
+import { verifierMarqueurs } from './noyau/marqueurs.js';
 import { ecrireVersion } from './noyau/version.js';
 const NOM = '@komekoo/astro-cms';
 /** `Symbol.for` : la même clé que l'intégration soit chargée par Node ou par Vite (`chargerOptions`). */
@@ -31,9 +34,9 @@ function verifierOptions(options) {
     if (admin === undefined)
         return;
     if (typeof admin !== 'object' || admin === null || Array.isArray(admin)) {
-        return refuser('admin', 'doit être un objet { accent?, logo?, origine? }');
+        return refuser('admin', 'doit être un objet { accent?, logo?, origine?, apercu? }');
     }
-    const { accent, logo, origine } = admin;
+    const { accent, logo, origine, apercu } = admin;
     if (accent !== undefined && !(typeof accent === 'string' && /^#[0-9A-Fa-f]{6}$/.test(accent))) {
         refuser('admin.accent', 'doit être une couleur au format #RRGGBB');
     }
@@ -43,15 +46,20 @@ function verifierOptions(options) {
     if (origine !== undefined && !(typeof origine === 'string' && /^https:\/\/[^\s/]+$/.test(origine))) {
         refuser('admin.origine', 'doit être une origine https sans chemin (ex. https://admin.exemple.fr)');
     }
+    if (apercu !== undefined && !(typeof apercu === 'string' && MOTIF_URL_SITE.test(apercu) && !apercu.endsWith('/'))) {
+        refuser('admin.apercu', 'doit être une adresse https sans « / » final (ex. https://apercu.exemple.pages.dev)');
+    }
 }
 export default function cms(options) {
     verifierOptions(options);
+    let racineProjet = '';
     return {
         name: NOM,
         [OPTIONS]: options,
         hooks: {
             'astro:config:setup': async ({ config, command, addWatchFile, logger }) => {
                 const racine = fileURLToPath(config.root);
+                racineProjet = racine;
                 if (command === 'dev' || command === 'sync')
                     await synchroniser(racine, options);
                 if (command === 'dev')
@@ -65,8 +73,22 @@ export default function cms(options) {
                     throw new ErreurCms(`${violations.length} problème(s) de contenu`);
                 }
             },
-            'astro:build:done': async ({ dir }) => {
-                await ecrireVersion(fileURLToPath(dir), process.env.CF_PAGES_COMMIT_SHA ?? 'inconnu', options.admin?.origine ?? 'https://cms.komekoo.link');
+            'astro:build:done': async ({ dir, logger }) => {
+                const dist = fileURLToPath(dir);
+                const schema = JSON.parse(await fsp.readFile(path.join(racineProjet, 'cms.schema.json'), 'utf8'));
+                const erreurs = await verifierMarqueurs(dist, schema.singletons ?? {});
+                if (erreurs.length > 0) {
+                    for (const e of erreurs)
+                        logger.error(`${e.page} — ${e.chemin} — ${e.motif}`);
+                    throw new ErreurCms(`${erreurs.length} marqueur(s) d'aperçu invalide(s)`);
+                }
+                const origineAdmin = options.admin?.origine ?? 'https://cms.komekoo.link';
+                await ecrireVersion(dist, process.env.CF_PAGES_COMMIT_SHA ?? 'inconnu', origineAdmin);
+                await ecrireApercu(dist, {
+                    origineAdmin,
+                    branche: process.env.CF_PAGES_BRANCH,
+                    avertir: (m) => logger.warn(m),
+                });
             },
         },
     };

package/dist/marqueur.d.ts

@@ -0,0 +1,4 @@
+/** Marqueur d'aperçu : `<h1 {...cms('accueil.titre')}>` pose `data-cms` pour que l'admin retrouve le champ. */
+export declare function cms(chemin: string): {
+    'data-cms': string;
+};

package/dist/marqueur.js

@@ -0,0 +1,8 @@
+import { MOTIF_CHEMIN_CMS } from './motifs.js';
+/** Marqueur d'aperçu : `<h1 {...cms('accueil.titre')}>` pose `data-cms` pour que l'admin retrouve le champ. */
+export function cms(chemin) {
+    if (!MOTIF_CHEMIN_CMS.test(chemin)) {
+        throw new Error(`chemin d'aperçu « ${chemin} » invalide : attendu ${MOTIF_CHEMIN_CMS.source}`);
+    }
+    return { 'data-cms': chemin };
+}

package/dist/motifs.d.ts

@@ -6,3 +6,5 @@ export declare const MOTIF_SRC_IMAGE: RegExp;
 export declare const MOTIF_LIEN: RegExp;
 /** Adresse publique du site : https, sans espace, sans « ? » ni « # » (le « / » final est refusé à part). */
 export declare const MOTIF_URL_SITE: RegExp;
+/** Chemin d'un champ dans une page : id du singleton, puis noms de champ ou indices (`reglages.horaires.2.ouverture`). */
+export declare const MOTIF_CHEMIN_CMS: RegExp;

package/dist/motifs.js

@@ -7,3 +7,5 @@ export const MOTIF_SRC_IMAGE = /^\/uploads\/(?:[a-z0-9-]+\/)*[a-z0-9-]+-2400\.we
 export const MOTIF_LIEN = /^(https:\/\/[^\s\x00-\x1f]|\/(?![\/\\\s])|mailto:|tel:)[^\s\x00-\x1f]*$/;
 /** Adresse publique du site : https, sans espace, sans « ? » ni « # » (le « / » final est refusé à part). */
 export const MOTIF_URL_SITE = /^https:\/\/[^\s/?#]+(\/[^\s?#]*)?$/;
+/** Chemin d'un champ dans une page : id du singleton, puis noms de champ ou indices (`reglages.horaires.2.ouverture`). */
+export const MOTIF_CHEMIN_CMS = /^[a-z][a-z0-9-]*(\.([A-Za-z][A-Za-z0-9]*|\d+))+$/;

package/dist/navigateur.d.ts

@@ -2,4 +2,5 @@ export { creerAjv, MOTS_CLES_CMS } from './ajv.js';
 export { validerMarkdown } from './noyau/markdown.js';
 export type { Violation } from './noyau/markdown.js';
 export { lireFrontmatter, ecrireFrontmatter } from './noyau/frontmatter.js';
-export { MOTIF_LIEN, MOTIF_SRC_IMAGE, MOTIF_URL_SITE } from './motifs.js';
+export { MOTIF_CHEMIN_CMS, MOTIF_LIEN, MOTIF_SRC_IMAGE, MOTIF_URL_SITE } from './motifs.js';
+export { srcsetDe, variantes } from './images.js';

package/dist/navigateur.js

@@ -2,4 +2,5 @@
 export { creerAjv, MOTS_CLES_CMS } from './ajv.js';
 export { validerMarkdown } from './noyau/markdown.js';
 export { lireFrontmatter, ecrireFrontmatter } from './noyau/frontmatter.js';
-export { MOTIF_LIEN, MOTIF_SRC_IMAGE, MOTIF_URL_SITE } from './motifs.js';
+export { MOTIF_CHEMIN_CMS, MOTIF_LIEN, MOTIF_SRC_IMAGE, MOTIF_URL_SITE } from './motifs.js';
+export { srcsetDe, variantes } from './images.js';

package/dist/noyau/apercu-build.d.ts

@@ -0,0 +1,12 @@
+/** Contenu de `_cms/chargeur.js` : fichier externe (compatible avec une CSP sans `unsafe-inline`). */
+export declare const CHARGEUR = "(function () {\n  if (window.parent === window) return;\n  if (!new URLSearchParams(location.search).has('cms-apercu')) return;\n  var script = document.createElement('script');\n  script.type = 'module';\n  script.src = '/_cms/apercu/demarrage.js';\n  document.head.appendChild(script);\n})();\n";
+/**
+ * Ajoute au site construit le chargeur et le script d'aperçu (modules ES), la balise du chargeur dans
+ * chaque page HTML, et les en-têtes `_headers` qui autorisent l'affichage dans l'admin.
+ */
+export declare function ecrireApercu(dossierDist: string, o: {
+    origineAdmin: string;
+    branche?: string;
+    sources?: string;
+    avertir?: (message: string) => void;
+}): Promise<void>;

package/dist/noyau/apercu-build.js

@@ -0,0 +1,74 @@
+import { promises as fsp } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const PLACEHOLDER = "'__KOMEKOO_ORIGINE_ADMIN__'";
+const BALISE = '<script src="/_cms/chargeur.js" async></script>';
+const MARQUE_CSP = '  Content-Security-Policy: frame-ancestors';
+const AVERTISSEMENT = "L'aperçu de l'admin ne pourra pas afficher ce site tant que X-Frame-Options est présent.";
+/** Fichiers du script d'aperçu : chemin source (relatif à `dist/` du paquet) → chemin dans `<dist>/_cms/`. */
+const MODULES = ['apercu/demarrage.js', 'apercu/script.js', 'apercu/protocole.js', 'motifs.js'];
+/** Contenu de `_cms/chargeur.js` : fichier externe (compatible avec une CSP sans `unsafe-inline`). */
+export const CHARGEUR = `(function () {
+  if (window.parent === window) return;
+  if (!new URLSearchParams(location.search).has('cms-apercu')) return;
+  var script = document.createElement('script');
+  script.type = 'module';
+  script.src = '/_cms/apercu/demarrage.js';
+  document.head.appendChild(script);
+})();
+`;
+async function listerHtml(dossier) {
+    const entrees = await fsp.readdir(dossier, { withFileTypes: true });
+    const fichiers = await Promise.all(entrees.map(async (e) => {
+        const chemin = path.join(dossier, e.name);
+        if (e.isDirectory())
+            return listerHtml(chemin);
+        return e.name.endsWith('.html') ? [chemin] : [];
+    }));
+    return fichiers.flat();
+}
+async function injecterBalise(fichier) {
+    const html = await fsp.readFile(fichier, 'utf8');
+    if (html.includes(BALISE))
+        return;
+    const i = html.indexOf('</head>');
+    if (i === -1)
+        return;
+    await fsp.writeFile(fichier, html.slice(0, i) + BALISE + html.slice(i));
+}
+/**
+ * Ajoute au site construit le chargeur et le script d'aperçu (modules ES), la balise du chargeur dans
+ * chaque page HTML, et les en-têtes `_headers` qui autorisent l'affichage dans l'admin.
+ */
+export async function ecrireApercu(dossierDist, o) {
+    const sources = o.sources ?? fileURLToPath(new URL('../../dist/', import.meta.url));
+    await fsp.mkdir(path.join(dossierDist, '_cms/apercu'), { recursive: true });
+    await fsp.writeFile(path.join(dossierDist, '_cms/chargeur.js'), CHARGEUR);
+    for (const module of MODULES) {
+        let contenu = await fsp.readFile(path.join(sources, module), 'utf8');
+        if (module === 'apercu/demarrage.js')
+            contenu = contenu.replaceAll(PLACEHOLDER, JSON.stringify(o.origineAdmin));
+        await fsp.writeFile(path.join(dossierDist, '_cms', module), contenu);
+    }
+    for (const fichier of await listerHtml(dossierDist))
+        await injecterBalise(fichier);
+    const fichier = path.join(dossierDist, '_headers');
+    let existant = '';
+    try {
+        existant = await fsp.readFile(fichier, 'utf8');
+    }
+    catch (e) {
+        if (e.code !== 'ENOENT')
+            throw e;
+    }
+    if (o.avertir && existant.split('\n').some((l) => /x-frame-options:.*\b(deny|sameorigin)\b/i.test(l))) {
+        o.avertir(AVERTISSEMENT);
+    }
+    if (existant.split('\n').some((l) => l.startsWith(MARQUE_CSP)))
+        return;
+    let regle = `/*\n${MARQUE_CSP} 'self' ${o.origineAdmin}\n`;
+    if (o.branche !== undefined && o.branche !== 'main')
+        regle += '  X-Robots-Tag: noindex\n';
+    const separateur = existant === '' || existant.endsWith('\n') ? '' : '\n';
+    await fsp.writeFile(fichier, existant + separateur + regle);
+}

package/dist/noyau/collecter.d.ts

@@ -6,6 +6,7 @@ export interface ModeleSingleton {
     /** `src/content/pages/<id>.json` */
     fichier: string;
     adresse?: string;
+    apercu?: string;
     schema: z.ZodObject;
 }
 export interface ModeleCollection {

package/dist/noyau/collecter.js

@@ -70,6 +70,7 @@ export function collecter(collections) {
                 libelle: decl.libelle,
                 fichier: `src/content/pages/${decl.id}.json`,
                 ...(decl.adresse !== undefined && { adresse: decl.adresse }),
+                ...(decl.apercu !== undefined && { apercu: decl.apercu }),
                 schema,
             });
         }

package/dist/noyau/json-schema.js

@@ -27,6 +27,7 @@ export function versJsonSchema(modele, options) {
             'x-cms-libelle': s.libelle,
             'x-cms-fichier': s.fichier,
             ...(s.adresse !== undefined && { 'x-cms-adresse': s.adresse }),
+            ...(s.apercu !== undefined && { 'x-cms-apercu': s.apercu }),
             ...convertir(s.schema),
         };
     }
@@ -47,6 +48,8 @@ export function versJsonSchema(modele, options) {
     const site = { nom: options.site, url: options.url, accent: options.admin?.accent ?? ACCENT_DEFAUT };
     if (options.admin?.logo !== undefined)
         site.logo = options.admin.logo;
+    if (options.admin?.apercu !== undefined)
+        site.apercu = options.admin.apercu;
     site.contact = options.contact;
     return {
         $schema: 'https://json-schema.org/draft/2020-12/schema',

package/dist/noyau/manifest.d.ts

@@ -9,6 +9,7 @@ export interface OptionsCms {
         accent?: string;
         logo?: string;
         origine?: string;
+        apercu?: string;
     };
 }
 /** Vue du modèle pour l'IA : langage naturel, aucun chemin de fichier. */

package/dist/noyau/markdown.d.ts

@@ -3,6 +3,7 @@ export interface Violation {
     ligne?: number;
     motif: string;
 }
+export declare const analyseur: import("unified").Processor<import("mdast").Root, undefined, undefined, undefined, undefined>;
 export declare function validerMarkdown(source: string, decalageLigne?: number): Violation[];
 /** Images (`![](url)`) du source, avec leur ligne (1-based) et leur URL brute. */
 export declare function extraireImages(source: string): {

package/dist/noyau/markdown.js

@@ -2,7 +2,7 @@ import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
 import { MOTIF_LIEN, MOTIF_SRC_IMAGE } from '../motifs.js';
-const analyseur = unified().use(remarkParse).use(remarkGfm);
+export const analyseur = unified().use(remarkParse).use(remarkGfm);
 const AUTORISES = new Set([
     'root', 'paragraph', 'text', 'heading', 'strong', 'emphasis', 'link', 'list',
     'listItem', 'blockquote', 'image', 'table', 'tableRow', 'tableCell', 'break',

package/dist/noyau/marqueurs.d.ts

@@ -0,0 +1,11 @@
+/** `singletons` de `cms.schema.json`. */
+export type SchemaSingletons = Record<string, object>;
+export interface ErreurMarqueur {
+    page: string;
+    chemin: string;
+    motif: string;
+}
+/** Contrôle les marqueurs `data-cms` d'une page HTML produite. */
+export declare function verifierMarqueursHtml(html: string, page: string, schema: SchemaSingletons): ErreurMarqueur[];
+/** Contrôle toutes les pages HTML de `dossierDist` ; `page` est relative à ce dossier (séparateur `/`). */
+export declare function verifierMarqueurs(dossierDist: string, schema: SchemaSingletons): Promise<ErreurMarqueur[]>;

package/dist/noyau/marqueurs.js

@@ -0,0 +1,57 @@
+import { promises as fsp } from 'node:fs';
+import path from 'node:path';
+const MARQUEUR = /<(\w+)\b[^>]*\sdata-cms="([^"]*)"/g;
+const NUMERIQUE = /^\d+$/;
+function resoudre(chemin, schema) {
+    const [id = '', ...suite] = chemin.split('.');
+    if (!Object.hasOwn(schema, id))
+        return 'page inconnue';
+    let noeud = schema[id];
+    for (const segment of suite) {
+        const enfant = NUMERIQUE.test(segment) && noeud.items !== undefined
+            ? noeud.items
+            : noeud.properties !== undefined && Object.hasOwn(noeud.properties, segment)
+                ? noeud.properties[segment]
+                : undefined;
+        if (enfant === undefined)
+            return 'champ inconnu';
+        noeud = enfant;
+    }
+    return noeud;
+}
+/** Contrôle les marqueurs `data-cms` d'une page HTML produite. */
+export function verifierMarqueursHtml(html, page, schema) {
+    const erreurs = [];
+    for (const [, balise, chemin] of html.matchAll(MARQUEUR)) {
+        const noeud = resoudre(chemin, schema);
+        const motif = typeof noeud === 'string'
+            ? noeud
+            : noeud['x-cms']?.editeur === 'image' && balise.toLowerCase() !== 'img'
+                ? "image hors d'une balise <img>"
+                : noeud['x-cms']?.editeur === 'lien' && balise.toLowerCase() !== 'a'
+                    ? "lien hors d'une balise <a>"
+                    : undefined;
+        if (motif !== undefined)
+            erreurs.push({ page, chemin: chemin, motif });
+    }
+    return erreurs;
+}
+async function listerHtml(dossier, prefixe = '') {
+    const entrees = await fsp.readdir(path.join(dossier, prefixe), { withFileTypes: true });
+    const fichiers = await Promise.all(entrees.map(async (e) => {
+        const relatif = prefixe === '' ? e.name : `${prefixe}/${e.name}`;
+        if (e.isDirectory())
+            return listerHtml(dossier, relatif);
+        return e.name.endsWith('.html') ? [relatif] : [];
+    }));
+    return fichiers.flat().sort();
+}
+/** Contrôle toutes les pages HTML de `dossierDist` ; `page` est relative à ce dossier (séparateur `/`). */
+export async function verifierMarqueurs(dossierDist, schema) {
+    const erreurs = [];
+    for (const page of await listerHtml(dossierDist)) {
+        const html = await fsp.readFile(path.join(dossierDist, page), 'utf8');
+        erreurs.push(...verifierMarqueursHtml(html, page, schema));
+    }
+    return erreurs;
+}

package/dist/types.d.ts

@@ -20,6 +20,7 @@ export interface DeclSingleton {
     id: string;
     libelle: string;
     adresse?: string;
+    apercu?: string;
 }
 export interface DeclCollection {
     type: 'collection';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@komekoo/astro-cms",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -19,6 +19,14 @@
       "types": "./dist/navigateur.d.ts",
       "default": "./dist/navigateur.js"
     },
+    "./apercu": {
+      "types": "./dist/apercu/index.d.ts",
+      "default": "./dist/apercu/index.js"
+    },
+    "./apercu/arbre": {
+      "types": "./dist/apercu/arbre.d.ts",
+      "default": "./dist/apercu/arbre.js"
+    },
     "./CmsImage.astro": "./src/composants/CmsImage.astro"
   },
   "bin": {
@@ -36,6 +44,7 @@
     "@types/mdast": "4.0.4",
     "@types/node": "26.6.5",
     "astro": "7.4.2",
+    "happy-dom": "21.0.2",
     "typescript": "7.0.2",
     "vite": "8.3.5",
     "vitest": "5.0.5"

package/src/composants/CmsImage.astro

@@ -6,9 +6,10 @@ interface Props {
   sizes?: string;
   class?: string;
   loading?: 'lazy' | 'eager';
+  cms?: string;
 }
 
-const { image, sizes = '100vw', class: classe, loading = 'lazy' } = Astro.props;
+const { image, sizes = '100vw', class: classe, loading = 'lazy', cms } = Astro.props;
 ---
 
 <img
@@ -21,4 +22,5 @@ const { image, sizes = '100vw', class: classe, loading = 'lazy' } = Astro.props;
   loading={loading}
   decoding="async"
   class={classe}
+  data-cms={cms}
 />