@agence-zef/astro 0.0.0-stage → 0.2.0

package/dist/overlay.js

@@ -0,0 +1,561 @@
+import { hasStega, parseStegaLocation, stegaRead } from "@agence-zef/schema";
+const ATTR = "data-zef-field";
+export function startOverlay() {
+    const config = document.getElementById("zef-preview")?.dataset ?? {};
+    const cms = config.cms ?? "";
+    const token = config.token ?? "";
+    const locale = config.locale ?? "";
+    if (!cms || window.parent === window)
+        return;
+    const post = (message) => window.parent.postMessage(message, cms);
+    let labels = { zef: "labels", sections: {}, fields: {} };
+    let selected = { section: null, path: null };
+    let hovered = null;
+    let editing = null;
+    let compare = null;
+    let pins = [];
+    let commentMode = false;
+    let locked = new Set();
+    /** Image survolée pendant qu'on glisse un fichier. */
+    let dropTarget = null;
+    /* ---------- Repérage des champs ---------- */
+    function scan(root = document.body) {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        const nodes = [];
+        while (walker.nextNode()) {
+            const node = walker.currentNode;
+            if (node.nodeValue && hasStega(node.nodeValue))
+                nodes.push(node);
+        }
+        for (const node of nodes) {
+            const { clean, locations } = stegaRead(node.nodeValue ?? "");
+            node.nodeValue = clean;
+            let element = node.parentElement;
+            // Texte riche : la marque est dans un élément caché au début du bloc.
+            if (element?.hidden && element.parentElement) {
+                const container = element.parentElement;
+                element.remove();
+                element = container;
+            }
+            if (element && locations[0] && !element.hasAttribute(ATTR))
+                element.setAttribute(ATTR, locations[0]);
+        }
+        // Marques restées dans des attributs (alt, title, aria-label) et le titre de l'onglet.
+        const elements = root instanceof Element
+            ? [root, ...root.querySelectorAll("*")]
+            : [...document.querySelectorAll("*")];
+        for (const element of elements) {
+            for (const attr of [...element.attributes]) {
+                if (!hasStega(attr.value))
+                    continue;
+                const { clean, locations } = stegaRead(attr.value);
+                element.setAttribute(attr.name, clean);
+                // Texte alternatif d'une image : l'image elle-même porte l'emplacement de son champ.
+                if (attr.name === "alt" && locations[0] && !element.hasAttribute(ATTR))
+                    element.setAttribute(ATTR, locations[0]);
+            }
+        }
+        if (hasStega(document.title))
+            document.title = stegaRead(document.title).clean;
+    }
+    const locationOf = (element) => {
+        const value = element.getAttribute(ATTR);
+        return value ? parseStegaLocation(value) : null;
+    };
+    const sectionWrapper = (id) => document.querySelector(`[data-zef-section="${CSS.escape(id)}"]`);
+    /**
+     * Zone d'une section fixe (header, footer) : tout le `<header>` / `<footer>` du gabarit qui
+     * l'entoure, pas seulement le conteneur où elle est rendue.
+     */
+    const fixedArea = (id) => labels.fixed?.includes(id) ? (sectionWrapper(id)?.closest("header, footer") ?? null) : null;
+    /** Élément encadré pour une section. */
+    const sectionBox = (id) => fixedArea(id) ?? sectionWrapper(id);
+    const sectionOf = (element) => {
+        const own = element.closest("[data-zef-section]")?.getAttribute("data-zef-section");
+        if (own)
+            return own;
+        const area = element.closest("header, footer");
+        return labels.fixed?.find((id) => area && fixedArea(id) === area) ?? null;
+    };
+    const fieldElement = (section, path) => document.querySelector(`[${ATTR}="${CSS.escape(`${section}:${path}`)}"]`);
+    const pattern = (path) => path.replace(/\.\d+(?=\.|$)/g, ".*");
+    const info = (element) => {
+        const location = locationOf(element);
+        if (!location)
+            return null;
+        const type = location.scope === "@"
+            ? "@"
+            : (sectionWrapper(location.scope)?.getAttribute("data-zef-type") ?? "");
+        return labels.fields[type]?.[pattern(location.path)] ?? null;
+    };
+    /** Rectangle d'un élément ; une section (`display: contents`) prend celui de ses enfants. */
+    function rect(element) {
+        if (getComputedStyle(element).display !== "contents")
+            return element.getBoundingClientRect();
+        const rects = [...element.children].map((c) => rect(c)).filter((r) => r.width || r.height);
+        if (!rects.length)
+            return new DOMRect();
+        const left = Math.min(...rects.map((r) => r.left));
+        const top = Math.min(...rects.map((r) => r.top));
+        return new DOMRect(left, top, Math.max(...rects.map((r) => r.right)) - left, Math.max(...rects.map((r) => r.bottom)) - top);
+    }
+    /**
+     * Fait défiler l'aperçu jusqu'à l'élément s'il n'est pas entièrement visible. Calculé sur sa
+     * boîte (`rect`) : une section en `display: contents` peut commencer par un `<style>` sans boîte.
+     */
+    function reveal(element) {
+        if (!element)
+            return;
+        const r = rect(element);
+        if (!r.width && !r.height)
+            return;
+        const margin = 24;
+        const view = window.innerHeight;
+        if (r.top >= margin && r.bottom <= view - margin)
+            return;
+        const delta = r.top < margin || r.height > view - 2 * margin ? r.top - margin : r.bottom - view + margin;
+        window.scrollBy({ top: delta, behavior: "smooth" });
+    }
+    /* ---------- Cadres ---------- */
+    // Couleurs de l'éditeur ZEF (violet d'action) : l'overlay vit dans le site, hors des tokens du CMS.
+    const style = document.createElement("style");
+    style.textContent = `
+		*, *::before, *::after { animation: none !important; transition: none !important; }
+		[${ATTR}] { cursor: pointer; }
+		[${ATTR}][contenteditable] { cursor: text; outline: none; }
+		#zef-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; font: 500 11px/1.4 system-ui, sans-serif; }
+		#zef-overlay .zef-frame { position: fixed; border: 1.5px solid #8c40f7; border-radius: 2px; }
+		#zef-overlay .zef-frame.zef-section { border-style: dashed; border-color: #8c40f7aa; }
+		#zef-overlay .zef-frame.zef-selected { border-width: 2px; }
+		#zef-overlay .zef-tag { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 2px; padding: 2px 6px; border-radius: 4px; background: #8c40f7; color: #fff; white-space: nowrap; }
+		#zef-overlay .zef-compare { border: 2px solid #ea580c; }
+		#zef-overlay .zef-compare .zef-tag { left: 8px; top: 8px; bottom: auto; margin: 0; background: #fff7ed; color: #c2410c; }
+		#zef-overlay .zef-compare.zef-added { border-style: dashed; border-color: #16a34a; }
+		#zef-overlay .zef-compare.zef-added .zef-tag { background: #f0fdf4; color: #15803d; }
+		#zef-overlay .zef-pin { position: fixed; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 999px; background: #f97316; color: #fff; font: 600 10px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); cursor: pointer; pointer-events: auto; }
+		html.zef-commenting, html.zef-commenting * { cursor: crosshair !important; }
+		#zef-overlay .zef-toolbar { position: fixed; display: flex; gap: 2px; padding: 3px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); pointer-events: auto; }
+		#zef-overlay .zef-toolbar button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #3f3f46; cursor: pointer; }
+		#zef-overlay .zef-toolbar button:hover { background: #f4f4f5; }
+		#zef-overlay .zef-toolbar button:disabled { opacity: 0.35; cursor: default; background: transparent; }
+		#zef-overlay .zef-toolbar button.zef-danger { color: #e11d48; }
+		#zef-overlay .zef-insert { position: fixed; height: 2px; margin-top: -1px; background: #8c40f7; }
+		#zef-overlay .zef-insert button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 10px; border: 0; border-radius: 999px; background: #8c40f7; color: #fff; font: 500 12px/1.4 system-ui, sans-serif; white-space: nowrap; cursor: pointer; pointer-events: auto; }
+	`;
+    document.head.append(style);
+    const layer = document.createElement("div");
+    layer.id = "zef-overlay";
+    document.body.append(layer);
+    function frame(r, className, tag) {
+        const div = document.createElement("div");
+        div.className = `zef-frame ${className}`;
+        Object.assign(div.style, {
+            left: `${r.left}px`,
+            top: `${r.top}px`,
+            width: `${r.width}px`,
+            height: `${r.height}px`,
+        });
+        if (tag) {
+            const span = document.createElement("span");
+            span.className = "zef-tag";
+            span.textContent = tag;
+            // Cadre collé en haut de l'aperçu (header) : l'étiquette passe à l'intérieur.
+            if (r.top < 20)
+                Object.assign(span.style, { bottom: "auto", top: "2px", left: "2px" });
+            div.append(span);
+        }
+        layer.append(div);
+    }
+    /* Icônes Lucide (16 px, trait 1,5) de la barre d'outils de section. */
+    const svg = (paths) => `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+    const ICONS = {
+        up: svg('<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>'),
+        down: svg('<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>'),
+        duplicate: svg('<rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>'),
+        variants: svg('<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>'),
+        delete: svg('<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>'),
+        plus: svg('<path d="M5 12h14"/><path d="M12 5v14"/>'),
+    };
+    const TITLES = {
+        up: "Monter",
+        down: "Descendre",
+        duplicate: "Dupliquer",
+        variants: "Variantes",
+        delete: "Supprimer",
+    };
+    const sectionIds = () => [...document.querySelectorAll("[data-zef-section]")].map((s) => s.getAttribute("data-zef-section") ?? "");
+    /** Barre d'outils en haut à droite de la section sélectionnée. */
+    function toolbar(section, r) {
+        const ids = sectionIds();
+        const bar = document.createElement("div");
+        bar.className = "zef-toolbar";
+        for (const action of ["up", "down", "duplicate", "variants", "delete"]) {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.title = TITLES[action];
+            button.setAttribute("aria-label", TITLES[action]);
+            button.innerHTML = ICONS[action];
+            if (action === "delete")
+                button.className = "zef-danger";
+            button.disabled =
+                (action === "up" && ids[0] === section) || (action === "down" && ids.at(-1) === section);
+            button.addEventListener("click", () => post({ zef: "action", section, action }));
+            bar.append(button);
+        }
+        layer.append(bar);
+        const top = Math.max(r.top + 8, 8);
+        Object.assign(bar.style, { top: `${top}px`, left: `${r.right - bar.offsetWidth - 8}px` });
+    }
+    /** Ligne « + Ajouter une section » sous la section survolée. */
+    function insertLine(section, r) {
+        const line = document.createElement("div");
+        line.className = "zef-insert";
+        Object.assign(line.style, { left: `${r.left}px`, top: `${r.bottom}px`, width: `${r.width}px` });
+        const button = document.createElement("button");
+        button.type = "button";
+        button.innerHTML = `${ICONS.plus}Ajouter une section`;
+        button.addEventListener("click", () => post({ zef: "insert", after: section }));
+        line.append(button);
+        layer.append(line);
+    }
+    /** Élément d'une épingle : le champ visé, sinon le haut de la section. */
+    const pinElement = (pin) => (pin.path ? fieldElement(pin.section, pin.path) : null) ??
+        sectionWrapper(pin.section)?.firstElementChild ??
+        null;
+    const boxOf = (r) => ({
+        top: r.top,
+        left: r.left,
+        width: r.width,
+        height: r.height,
+    });
+    function drawPins() {
+        for (const pin of pins) {
+            const element = pinElement(pin);
+            if (!element)
+                continue;
+            const r = rect(element);
+            const dot = document.createElement("button");
+            dot.type = "button";
+            dot.className = "zef-pin";
+            dot.textContent = String(pin.number);
+            dot.setAttribute("aria-label", `Commentaire ${pin.number}`);
+            Object.assign(dot.style, { left: `${r.left - 10}px`, top: `${r.top - 10}px` });
+            dot.addEventListener("click", () => post({ zef: "pin", id: pin.id, box: boxOf(r) }));
+            layer.append(dot);
+        }
+    }
+    function draw() {
+        layer.replaceChildren();
+        if (dropTarget) {
+            const field = info(dropTarget);
+            frame(rect(dropTarget), "zef-selected", `Déposer pour remplacer · ${field?.label ?? "Image"}`);
+            return;
+        }
+        drawPins();
+        // Comparaison avec une version : chaque section concernée encadrée, avec son badge.
+        if (compare) {
+            for (const [id, change] of Object.entries(compare)) {
+                const wrapper = sectionWrapper(id);
+                if (wrapper)
+                    frame(rect(wrapper), `zef-compare ${change.state === "added" ? "zef-added" : ""}`, change.label);
+            }
+            return;
+        }
+        // On sélectionne une section entière : ses champs se modifient dans le panneau de droite.
+        const target = hovered;
+        const section = target ? sectionOf(target) : null;
+        const tagOf = (id) => labels.sections[sectionWrapper(id)?.getAttribute("data-zef-type") ?? ""];
+        if (section && section !== selected.section) {
+            const box = sectionBox(section);
+            if (box)
+                frame(rect(box), "zef-section", tagOf(section));
+        }
+        if (selected.section && selected.section !== "@") {
+            const box = sectionBox(selected.section);
+            if (box)
+                frame(rect(box), "zef-selected zef-section", tagOf(selected.section));
+            const wrapper = sectionWrapper(selected.section);
+            if (wrapper && !editing && !labels.readOnly && !labels.fixed?.includes(selected.section))
+                toolbar(selected.section, rect(wrapper));
+        }
+        if (section && !editing && !labels.readOnly && !labels.fixed?.includes(section)) {
+            const wrapper = sectionWrapper(section);
+            if (wrapper)
+                insertLine(section, rect(wrapper));
+        }
+    }
+    let frameRequest = 0;
+    const redraw = () => {
+        cancelAnimationFrame(frameRequest);
+        frameRequest = requestAnimationFrame(draw);
+    };
+    window.addEventListener("scroll", redraw, { passive: true });
+    window.addEventListener("resize", redraw);
+    function setCommentMode(on) {
+        commentMode = on;
+        document.documentElement.classList.toggle("zef-commenting", on);
+    }
+    /* ---------- Souris et clavier ---------- */
+    document.addEventListener("mouseover", (e) => {
+        if (layer.contains(e.target))
+            return;
+        const target = e.target;
+        const next = sectionOf(target) ? target : null;
+        if (next !== hovered) {
+            hovered = next;
+            redraw();
+        }
+    });
+    document.addEventListener("mouseleave", () => {
+        hovered = null;
+        redraw();
+    });
+    document.addEventListener("click", (e) => {
+        const target = e.target;
+        if (editing?.contains(target) || layer.contains(target))
+            return;
+        // Dans l'aperçu, un clic sélectionne : liens et boutons ne partent pas.
+        e.preventDefault();
+        e.stopPropagation();
+        const field = target.closest(`[${ATTR}]`);
+        const location = field ? locationOf(field) : null;
+        const section = location?.scope && location.scope !== "@" ? location.scope : sectionOf(target);
+        // Mode commentaire : le clic désigne l'élément commenté.
+        if (commentMode) {
+            const scope = location?.scope === "@" ? "@" : section;
+            if (!scope)
+                return;
+            const element = field ?? sectionWrapper(scope)?.firstElementChild ?? target;
+            setCommentMode(false);
+            post({
+                zef: "commentTarget",
+                section: scope,
+                path: location?.path ?? null,
+                box: boxOf(rect(element)),
+            });
+            return;
+        }
+        // Un clic choisit toute la section (ou l'élément de collection pour ses propres champs).
+        selected = { section: location?.scope === "@" ? "@" : section, path: null };
+        post({ zef: "select", ...selected });
+        redraw();
+    }, true);
+    document.addEventListener("submit", (e) => e.preventDefault(), true);
+    /* Glisser un fichier sur une image de l'aperçu la remplace (E-01). */
+    const hasFiles = (e) => Boolean(e.dataTransfer?.types.includes("Files"));
+    const mediaUnder = (target) => {
+        const element = target?.closest?.(`[${ATTR}]`);
+        return element && info(element)?.kind === "media" ? element : null;
+    };
+    document.addEventListener("dragover", (e) => {
+        if (!hasFiles(e))
+            return;
+        // Jamais ouvrir le fichier dans l'aperçu.
+        e.preventDefault();
+        const next = labels.readOnly ? null : mediaUnder(e.target);
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = next ? "copy" : "none";
+        if (next !== dropTarget) {
+            dropTarget = next;
+            redraw();
+        }
+    });
+    document.addEventListener("dragleave", (e) => {
+        if (e.relatedTarget)
+            return;
+        dropTarget = null;
+        redraw();
+    });
+    document.addEventListener("drop", (e) => {
+        if (!hasFiles(e))
+            return;
+        e.preventDefault();
+        const target = dropTarget;
+        dropTarget = null;
+        redraw();
+        const file = e.dataTransfer?.files[0];
+        const location = target ? locationOf(target) : null;
+        if (!file || !location)
+            return;
+        post({ zef: "drop", section: location.scope, path: location.path, file });
+    });
+    document.addEventListener("dblclick", (e) => {
+        const field = e.target.closest(`[${ATTR}]`);
+        const kind = field && info(field)?.kind;
+        if (labels.readOnly || !field || !kind || !["text", "textarea", "label"].includes(kind))
+            return;
+        if (locked.has(field.getAttribute(ATTR) ?? ""))
+            return;
+        startEditing(field);
+    });
+    function startEditing(element) {
+        stopEditing();
+        editing = element;
+        element.setAttribute("contenteditable", "plaintext-only");
+        element.focus();
+        const range = document.createRange();
+        range.selectNodeContents(element);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+        redraw();
+    }
+    function stopEditing() {
+        if (!editing)
+            return;
+        editing.removeAttribute("contenteditable");
+        editing = null;
+        redraw();
+    }
+    document.addEventListener("input", (e) => {
+        if (!editing || e.target !== editing)
+            return;
+        const location = locationOf(editing);
+        if (!location)
+            return;
+        post({ zef: "edit", section: location.scope, path: location.path, value: editing.textContent });
+    });
+    document.addEventListener("keydown", (e) => {
+        if (!editing && e.key === "Escape") {
+            selected = { section: null, path: null };
+            post({ zef: "select", section: null, path: null });
+            redraw();
+            return;
+        }
+        if (!editing)
+            return;
+        const multiline = info(editing)?.kind === "textarea";
+        if (e.key === "Escape" || (e.key === "Enter" && !multiline)) {
+            e.preventDefault();
+            stopEditing();
+        }
+    });
+    document.addEventListener("focusout", (e) => {
+        if (e.target === editing)
+            stopEditing();
+    });
+    /* ---------- Messages de l'éditeur ---------- */
+    /** Textes reçus pendant un re-rendu : la réponse, partie avant eux, ne doit pas les effacer. */
+    const typed = new Map();
+    const renders = new Map();
+    function setText(section, path, value) {
+        const element = fieldElement(section, path);
+        if (!element || element === editing)
+            return;
+        if (info(element)?.kind === "richtext")
+            element.innerHTML = value;
+        else
+            element.textContent = value;
+    }
+    async function render(section, after) {
+        const request = (renders.get(section.id) ?? 0) + 1;
+        renders.set(section.id, request);
+        typed.set(section.id, new Map());
+        const response = await fetch("/__zef/preview/section", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ token, locale, doc: config.doc, section }),
+        });
+        const html = response.ok ? await response.text() : "";
+        // Un re-rendu plus récent de la même section est parti entre-temps : il fait foi.
+        if (renders.get(section.id) !== request)
+            return;
+        const pending = typed.get(section.id);
+        typed.delete(section.id);
+        const template = document.createElement("template");
+        template.innerHTML = html;
+        const next = template.content.querySelector("[data-zef-section]");
+        if (!next)
+            return;
+        const current = sectionWrapper(section.id);
+        if (current)
+            current.replaceWith(next);
+        else {
+            // Conteneur des sections du document : le header et le footer partagés sont hors de lui.
+            const previous = after ? sectionWrapper(after) : null;
+            const container = document.querySelector("[data-zef-sections]");
+            const first = document.querySelector("[data-zef-section]");
+            if (previous)
+                previous.after(next);
+            else if (container)
+                container.prepend(next);
+            else if (first)
+                first.before(next);
+            else
+                document.querySelector("main")?.append(next);
+        }
+        scan(next);
+        for (const [path, value] of pending ?? [])
+            setText(section.id, path, value);
+        // Section ajoutée et déjà sélectionnée (insertion depuis la bibliothèque) : on la montre.
+        if (!current && selected.section === section.id && !selected.path) {
+            reveal(next);
+        }
+        redraw();
+    }
+    window.addEventListener("message", (event) => {
+        if (event.origin !== cms || typeof event.data !== "object" || !event.data?.zef)
+            return;
+        const message = event.data;
+        switch (message.zef) {
+            case "labels":
+                labels = message;
+                break;
+            case "select":
+                selected = { section: message.section, path: message.path };
+                reveal(selected.path && selected.section
+                    ? fieldElement(selected.section, selected.path)
+                    : selected.section
+                        ? sectionBox(selected.section)
+                        : null);
+                break;
+            case "text":
+                typed.get(message.section)?.set(message.path, message.value);
+                setText(message.section, message.path, message.value);
+                break;
+            case "render":
+                void render(message.section, message.after);
+                return;
+            case "order": {
+                const wrappers = message.ids.map(sectionWrapper).filter((w) => w !== null);
+                const anchor = wrappers[0]?.parentElement;
+                if (anchor) {
+                    const marker = document.createComment("zef");
+                    wrappers[0].before(marker);
+                    for (const w of wrappers)
+                        marker.before(w);
+                    marker.remove();
+                }
+                break;
+            }
+            case "remove":
+                sectionWrapper(message.id)?.remove();
+                break;
+            case "compare":
+                compare = message.sections;
+                break;
+            case "pins":
+                pins = message.pins;
+                break;
+            case "locked":
+                locked = new Set(message.fields);
+                break;
+            case "commentMode":
+                setCommentMode(message.on);
+                break;
+            case "showPin": {
+                const pin = pins.find((p) => p.id === message.id);
+                const element = pin ? pinElement(pin) : null;
+                if (pin && element) {
+                    element.scrollIntoView({ block: "center" });
+                    post({ zef: "pin", id: pin.id, box: boxOf(rect(element)) });
+                }
+                break;
+            }
+        }
+        redraw();
+    });
+    scan();
+    post({ zef: "ready" });
+    redraw();
+}

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@agence-zef/astro",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ZefSections.astro": "./components/ZefSections.astro",
+    "./routes/page.astro": "./components/routes/page.astro",
+    "./routes/robots.ts": "./components/routes/robots.ts",
+    "./Button.astro": "./components/Button.astro",
+    "./Image.astro": "./components/Image.astro",
+    "./Video.astro": "./components/Video.astro",
+    "./RichText.astro": "./components/RichText.astro",
+    "./overlay": {
+      "types": "./dist/overlay.d.ts",
+      "import": "./dist/overlay.js"
+    },
+    "./routes/preview.astro": "./components/routes/preview.astro",
+    "./routes/preview-section.astro": "./components/routes/preview-section.astro",
+    "./routes/preview-thumbnail.astro": "./components/routes/preview-thumbnail.astro",
+    "./Form.astro": "./components/Form.astro",
+    "./Popups.astro": "./components/Popups.astro",
+    "./CookieBanner.astro": "./components/CookieBanner.astro"
+  },
+  "files": [
+    "dist",
+    "components"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "astro": "^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "astro": "^7.4.4",
+    "@types/node": "^24.0.0"
+  },
+  "dependencies": {
+    "@agence-zef/sdk": "0.2.0",
+    "@agence-zef/schema": "0.2.0"
+  },
+  "homepage": "https://agence-zef.fr",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit"
+  }
 }