@lystech/sections 0.1.0 → 0.3.0

package/dist/editeur.js

@@ -0,0 +1,1208 @@
+import { jsx as e, jsxs as b, Fragment as Q } from "react/jsx-runtime";
+import { createRoot as Z } from "react-dom/client";
+import { useState as k, useRef as F, useEffect as B, useCallback as H, useMemo as W } from "react";
+function se({
+  jeton: n,
+  site: t,
+  apiBaseUrl: c,
+  surJetonRefuse: r
+}) {
+  const a = {
+    "Content-Type": "application/json",
+    Authorization: "Bearer " + n
+  };
+  function f(o, i) {
+    if (i && (o.status === 401 || o.status === 403) && r(), !o.ok) throw new Error(String(o.status));
+  }
+  async function u(o, i = !0) {
+    const h = await fetch(c + o, {
+      headers: i ? a : void 0
+    });
+    return f(h, i), await h.json();
+  }
+  async function m(o, i, h) {
+    const g = await fetch(c + o, {
+      method: i,
+      headers: a,
+      body: h === void 0 ? void 0 : JSON.stringify(h)
+    });
+    return f(g, !0), await g.json();
+  }
+  return {
+    /** Les blocs que le site a déclaré savoir afficher. Route publique. */
+    schemas: () => u("/site-sections/public/" + encodeURIComponent(t) + "/schemas", !1),
+    /** Ce qui existe sur une page, brouillons compris. */
+    pourPage: (o) => u("/site-sections?page=" + encodeURIComponent(o)),
+    creer: (o, i, h) => m("/site-sections", "POST", { page: o, blockType: i, draft: h }),
+    enregistrerBrouillon: (o, i) => m("/site-sections/" + o + "/draft", "PUT", { draft: i }),
+    publier: (o) => m("/site-sections/" + o + "/publish", "POST"),
+    /** Ramène le brouillon à ce qui est en ligne. */
+    annuler: (o) => m("/site-sections/" + o + "/revert", "POST")
+  };
+}
+function ce({
+  site: n,
+  apiBaseUrl: t,
+  surJeton: c,
+  surFermer: r
+}) {
+  const [a, f] = k(""), [u, m] = k(""), [o, i] = k({ nom: "repos" }), h = async (v) => {
+    if (!a || !u) {
+      i({ nom: "erreur", texte: "Entrez votre adresse et votre mot de passe." });
+      return;
+    }
+    i({ nom: "envoi" });
+    try {
+      const S = await fetch(t + "/site-sections/edit-login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ site: n, email: a, password: u, demanderAcces: v })
+      });
+      if (S.status === 429) {
+        i({
+          nom: "erreur",
+          texte: "Trop de tentatives. Réessayez dans quelques minutes."
+        });
+        return;
+      }
+      const _ = await S.json().catch(() => null);
+      if (_?.ok && _?.token) {
+        c(_.token);
+        return;
+      }
+      if (_?.raison === "sans_acces") {
+        i({ nom: "sans-acces" });
+        return;
+      }
+      if (_?.raison === "demande_envoyee") {
+        i({ nom: "demande-envoyee" });
+        return;
+      }
+      if (_?.raison === "trop_de_demandes") {
+        i({
+          nom: "erreur",
+          texte: "Trop de demandes aujourd'hui. Réessayez demain."
+        });
+        return;
+      }
+      i({
+        nom: "erreur",
+        texte: "Adresse ou mot de passe incorrect."
+      });
+    } catch {
+      i({
+        nom: "erreur",
+        texte: "Connexion au serveur impossible. Vérifiez votre réseau."
+      });
+    }
+  }, g = o.nom === "envoi";
+  return /* @__PURE__ */ e("div", { className: "voile", role: "dialog", "aria-modal": "true", "aria-label": "Modifier ce site", children: /* @__PURE__ */ b("div", { className: "fenetre", children: [
+    /* @__PURE__ */ b("div", { className: "panneau__tete", children: [
+      /* @__PURE__ */ b("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ e("h2", { className: "panneau__titre", children: "Modifier ce site" }),
+        /* @__PURE__ */ e("p", { className: "panneau__sous", children: "Vous vous connectez à Lystech. Cet accès ne sert qu'à modifier le contenu de ce site." })
+      ] }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "bouton bouton--icone bouton--discret",
+          onClick: r,
+          "aria-label": "Fermer",
+          children: "✕"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ b(
+      "form",
+      {
+        className: "panneau__corps",
+        onSubmit: (v) => {
+          v.preventDefault(), h(!1);
+        },
+        children: [
+          o.nom === "erreur" && /* @__PURE__ */ e("p", { className: "message message--erreur", children: o.texte }),
+          o.nom === "sans-acces" && /* @__PURE__ */ e("p", { className: "message message--info", children: "Vous êtes bien reconnu, mais vous n'avez pas encore le droit de modifier ce site. Vous pouvez le demander : la personne responsable recevra un courriel." }),
+          o.nom === "demande-envoyee" && /* @__PURE__ */ e("p", { className: "message message--ok", children: "Demande envoyée. La personne responsable du site vous répondra." }),
+          o.nom !== "demande-envoyee" && /* @__PURE__ */ b(Q, { children: [
+            /* @__PURE__ */ b("div", { className: "champ", children: [
+              /* @__PURE__ */ e("label", { className: "champ__etiquette", htmlFor: "lys-courriel", children: "Adresse courriel" }),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  id: "lys-courriel",
+                  type: "text",
+                  inputMode: "email",
+                  autoComplete: "email",
+                  value: a,
+                  disabled: g,
+                  onChange: (v) => f(v.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ b("div", { className: "champ", children: [
+              /* @__PURE__ */ e("label", { className: "champ__etiquette", htmlFor: "lys-mdp", children: "Mot de passe" }),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  id: "lys-mdp",
+                  type: "password",
+                  autoComplete: "current-password",
+                  value: u,
+                  disabled: g,
+                  onChange: (v) => m(v.target.value)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: o.nom === "sans-acces" ? /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "bouton bouton--principal",
+              disabled: g,
+              onClick: () => {
+                h(!0);
+              },
+              children: "Demander l'accès"
+            }
+          ) : o.nom === "demande-envoyee" ? /* @__PURE__ */ e("button", { type: "button", className: "bouton", onClick: r, children: "Fermer" }) : /* @__PURE__ */ e(
+            "button",
+            {
+              type: "submit",
+              className: "bouton bouton--principal",
+              disabled: g,
+              children: g ? "Vérification…" : "Se connecter"
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+}
+function le(n, t) {
+  const c = n && typeof n == "object" && !Array.isArray(n) ? Object.keys(n).filter((a) => /^[a-z]{2}(-[A-Za-z]{2})?$/.test(a)) : [], r = t.slice(0, 2);
+  return Array.from(/* @__PURE__ */ new Set([r, ...c]));
+}
+function ue(n) {
+  switch (n.type) {
+    case "number":
+      return 0;
+    case "boolean":
+      return !1;
+    case "list":
+      return [];
+    default:
+      return "";
+  }
+}
+function G({ champ: n, valeur: t, changer: c }) {
+  switch (n.type) {
+    case "richText":
+      return /* @__PURE__ */ e(
+        "textarea",
+        {
+          value: String(t ?? ""),
+          onChange: (r) => c(r.target.value)
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ e(
+        "input",
+        {
+          type: "number",
+          value: t === "" || t == null ? "" : String(t),
+          onChange: (r) => c(r.target.value === "" ? "" : Number(r.target.value))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ b("label", { className: "bascule", children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "checkbox",
+            checked: t === !0,
+            onChange: (r) => c(r.target.checked)
+          }
+        ),
+        /* @__PURE__ */ e("span", { children: t === !0 ? "Oui" : "Non" })
+      ] });
+    case "date":
+      return /* @__PURE__ */ e(
+        "input",
+        {
+          type: "date",
+          value: String(t ?? "").slice(0, 10),
+          onChange: (r) => c(r.target.value)
+        }
+      );
+    case "choice":
+      return /* @__PURE__ */ b(
+        "select",
+        {
+          value: String(t ?? ""),
+          onChange: (r) => c(r.target.value),
+          children: [
+            /* @__PURE__ */ e("option", { value: "", children: "—" }),
+            (n.options ?? []).map((r) => /* @__PURE__ */ e("option", { value: r, children: r }, r))
+          ]
+        }
+      );
+    case "url":
+      return /* @__PURE__ */ e(
+        "input",
+        {
+          type: "url",
+          value: String(t ?? ""),
+          onChange: (r) => c(r.target.value),
+          placeholder: "https://"
+        }
+      );
+    case "image":
+      return /* @__PURE__ */ b(Q, { children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "url",
+            value: String(t ?? ""),
+            onChange: (r) => c(r.target.value),
+            placeholder: "https://…"
+          }
+        ),
+        String(t ?? "").startsWith("http") && /* @__PURE__ */ e("img", { className: "vignette", src: String(t), alt: "" })
+      ] });
+    default:
+      return /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: String(t ?? ""),
+          onChange: (r) => c(r.target.value)
+        }
+      );
+  }
+}
+function ee({ champ: n, valeur: t, changer: c, langue: r }) {
+  if (n.type === "list") {
+    const a = Array.isArray(t) ? t : [], f = n.of ?? [], u = (m, o, i) => {
+      const h = a.map((g, v) => v === m ? { ...g, [o]: i } : g);
+      c(h);
+    };
+    return /* @__PURE__ */ b("div", { className: "champ", children: [
+      /* @__PURE__ */ e("span", { className: "champ__etiquette", children: n.label }),
+      n.help && /* @__PURE__ */ e("p", { className: "champ__aide", children: n.help }),
+      a.map((m, o) => /* @__PURE__ */ b("div", { className: "liste__item", children: [
+        /* @__PURE__ */ b("div", { className: "liste__tete", children: [
+          /* @__PURE__ */ e("span", { className: "liste__rang", children: o + 1 }),
+          /* @__PURE__ */ b("span", { style: { display: "flex", gap: 4 }, children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--icone bouton--discret",
+                title: "Monter",
+                disabled: o === 0,
+                onClick: () => {
+                  const i = [...a];
+                  [i[o - 1], i[o]] = [i[o], i[o - 1]], c(i);
+                },
+                children: "↑"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--icone bouton--discret",
+                title: "Descendre",
+                disabled: o === a.length - 1,
+                onClick: () => {
+                  const i = [...a];
+                  [i[o], i[o + 1]] = [i[o + 1], i[o]], c(i);
+                },
+                children: "↓"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--icone bouton--discret",
+                title: "Retirer",
+                onClick: () => c(a.filter((i, h) => h !== o)),
+                children: "✕"
+              }
+            )
+          ] })
+        ] }),
+        f.map((i) => /* @__PURE__ */ e(
+          ee,
+          {
+            champ: i,
+            langue: r,
+            valeur: m?.[i.key],
+            changer: (h) => u(o, i.key, h)
+          },
+          i.key
+        ))
+      ] }, o)),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "bouton",
+          onClick: () => c([
+            ...a,
+            Object.fromEntries(f.map((m) => [m.key, ue(m)]))
+          ]),
+          children: "+ Ajouter"
+        }
+      )
+    ] });
+  }
+  if (n.localized) {
+    const a = le(t, r), f = t && typeof t == "object" && !Array.isArray(t) ? t : {};
+    return /* @__PURE__ */ b("div", { className: "champ", children: [
+      /* @__PURE__ */ e("span", { className: "champ__etiquette", children: n.label }),
+      n.help && /* @__PURE__ */ e("p", { className: "champ__aide", children: n.help }),
+      a.map((u) => /* @__PURE__ */ b("div", { style: { marginBottom: 8 }, children: [
+        /* @__PURE__ */ e("span", { className: "champ__langue", children: u }),
+        /* @__PURE__ */ e(
+          G,
+          {
+            champ: n,
+            valeur: f[u],
+            changer: (m) => c({ ...f, [u]: m })
+          }
+        )
+      ] }, u))
+    ] });
+  }
+  return /* @__PURE__ */ b("div", { className: "champ", children: [
+    /* @__PURE__ */ e("label", { className: "champ__etiquette", children: n.label }),
+    /* @__PURE__ */ e(G, { champ: n, valeur: t, changer: c }),
+    n.help && /* @__PURE__ */ e("p", { className: "champ__aide", children: n.help })
+  ] });
+}
+const de = ["lystech-editeur-hote", "lystech-connexion-hote"];
+function pe(n) {
+  const t = /* @__PURE__ */ new Map();
+  for (const [c, r] of Object.entries(n))
+    for (const [a, f] of Object.entries(r)) {
+      const u = String(f ?? "").trim();
+      if (u.length < 2 || u.includes("{{")) continue;
+      const m = t.get(u);
+      m ? m.push({ ns: c, chemin: a }) : t.set(u, [{ ns: c, chemin: a }]);
+    }
+  return t;
+}
+function me(n) {
+  const t = /* @__PURE__ */ new Map(), c = document.body.querySelectorAll("*");
+  for (const r of c) {
+    if (de.some((u) => r.id === u || r.closest("#" + u)) || r.children.length > 0) continue;
+    const a = (r.textContent ?? "").trim();
+    if (a.length < 2) continue;
+    const f = n.get(a);
+    f && t.set(r, { valeur: a, candidats: f });
+  }
+  return t;
+}
+function be({
+  source: n,
+  actif: t,
+  surModification: c
+}) {
+  const r = F(/* @__PURE__ */ new Map()), a = F(null), [f, u] = k(null), m = F(n);
+  m.current = n;
+  const o = F(c);
+  return o.current = c, B(() => {
+    if (!t) return;
+    const i = m.current.langueCourante(), h = pe(m.current.dictionnaire(i)), g = () => {
+      r.current = me(h);
+    };
+    g();
+    let v;
+    const S = new MutationObserver(() => {
+      a.current || (clearTimeout(v), v = setTimeout(g, 250));
+    });
+    S.observe(document.body, { childList: !0, subtree: !0 });
+    const _ = "outline:2px dashed rgba(59,165,141,.85);outline-offset:3px;border-radius:3px;cursor:text;", U = (d) => {
+      const s = d.target;
+      !(s instanceof HTMLElement) || a.current || r.current.has(s) && (s.dataset.lysStyleAvant || (s.dataset.lysStyleAvant = s.getAttribute("style") ?? ""), s.setAttribute(
+        "style",
+        (s.dataset.lysStyleAvant ?? "") + _
+      ));
+    }, z = (d) => {
+      const s = d.target;
+      if (!(s instanceof HTMLElement) || a.current?.el === s || s.dataset.lysStyleAvant === void 0) return;
+      const y = s.dataset.lysStyleAvant;
+      delete s.dataset.lysStyleAvant, y ? s.setAttribute("style", y) : s.removeAttribute("style");
+    }, T = (d, s) => {
+      const y = d.getAttribute("style") ?? "";
+      a.current = {
+        el: d,
+        avant: (d.textContent ?? "").trim(),
+        ns: s.ns,
+        chemin: s.chemin,
+        styleAvant: d.dataset.lysStyleAvant ?? y
+      }, d.setAttribute("contenteditable", "plaintext-only"), d.setAttribute(
+        "style",
+        (d.dataset.lysStyleAvant ?? "") + "outline:2px solid #3ba58d;outline-offset:3px;border-radius:3px;"
+      ), d.focus();
+      const P = window.getSelection(), O = document.createRange();
+      O.selectNodeContents(d), P?.removeAllRanges(), P?.addRange(O);
+    }, w = async (d) => {
+      const s = a.current;
+      if (!s) return;
+      a.current = null;
+      const y = (s.el.textContent ?? "").trim();
+      s.el.removeAttribute("contenteditable");
+      const P = s.el.dataset.lysStyleAvant;
+      if (delete s.el.dataset.lysStyleAvant, P ? s.el.setAttribute("style", P) : s.el.removeAttribute("style"), d || y === s.avant) {
+        d && (s.el.textContent = s.avant);
+        return;
+      }
+      const O = m.current.langueCourante();
+      m.current.poser(O, s.ns, s.chemin, y), await o.current(s.ns, s.chemin, O, y);
+    }, N = (d) => {
+      const s = d.target;
+      if (!(s instanceof HTMLElement)) return;
+      if (a.current) {
+        if (a.current.el === s) return;
+        w(!1);
+      }
+      const y = r.current.get(s);
+      if (y) {
+        if (d.preventDefault(), d.stopPropagation(), y.candidats.length === 1) {
+          T(s, y.candidats[0]);
+          return;
+        }
+        u({
+          el: s,
+          candidats: y.candidats,
+          x: d.clientX,
+          y: d.clientY
+        });
+      }
+    }, A = (d) => {
+      a.current && (d.key === "Escape" ? (d.preventDefault(), w(!0)) : d.key === "Enter" && !d.shiftKey && (d.preventDefault(), w(!1)));
+    }, M = () => {
+      a.current && w(!1);
+    };
+    document.addEventListener("mouseover", U, !0), document.addEventListener("mouseout", z, !0), document.addEventListener("click", N, !0);
+    const I = (d) => {
+      if (!a.current) return;
+      const s = d.inputType;
+      (s === "insertParagraph" || s === "insertLineBreak") && (d.preventDefault(), w(!1));
+    };
+    return document.addEventListener("beforeinput", I, !0), document.addEventListener("keydown", A, !0), document.addEventListener("focusout", M, !0), window.__lysChoisir = (d, s) => {
+      u(null), T(s, d);
+    }, () => {
+      clearTimeout(v), S.disconnect(), document.removeEventListener("mouseover", U, !0), document.removeEventListener("mouseout", z, !0), document.removeEventListener("click", N, !0), document.removeEventListener("beforeinput", I, !0), document.removeEventListener("keydown", A, !0), document.removeEventListener("focusout", M, !0), a.current && w(!0), delete window.__lysChoisir;
+    };
+  }, [t]), f ? /* @__PURE__ */ b(
+    "div",
+    {
+      className: "choix",
+      style: {
+        top: Math.min(f.y + 10, window.innerHeight - 200),
+        left: Math.min(f.x, window.innerWidth - 280)
+      },
+      children: [
+        /* @__PURE__ */ e("p", { className: "choix__titre", children: "Ce texte apparaît à plusieurs endroits." }),
+        /* @__PURE__ */ e("p", { className: "choix__aide", children: "Lequel corrigez-vous ?" }),
+        f.candidats.map((i) => /* @__PURE__ */ b(
+          "button",
+          {
+            type: "button",
+            className: "choix__option",
+            onClick: () => window.__lysChoisir?.(i, f.el),
+            children: [
+              /* @__PURE__ */ e("span", { className: "choix__chemin", children: i.chemin }),
+              /* @__PURE__ */ e("span", { className: "choix__ns", children: i.ns })
+            ]
+          },
+          i.ns + ":" + i.chemin
+        )),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "bouton bouton--discret",
+            onClick: () => u(null),
+            children: "Annuler"
+          }
+        )
+      ]
+    }
+  ) : null;
+}
+const Y = /^i18n:([^:]+):(.*)$/, J = "commun";
+function K(n, t) {
+  return JSON.stringify(n ?? {}) === JSON.stringify(t ?? {});
+}
+function fe({ api: n, pont: t }) {
+  const [c, r] = k([]), [a, f] = k([]), [u, m] = k(t.page), [o, i] = k(null), [h, g] = k({}), [v, S] = k(!1), [_, U] = k("modifier"), [z, T] = k(!1), [w, N] = k(
+    null
+  );
+  B(() => (t.surChangementDePage = (l) => {
+    m(l), i(null), S(!1);
+  }, () => {
+    t.surChangementDePage = void 0;
+  }), [t]);
+  const A = H(async () => {
+    try {
+      const [l, p] = await Promise.all([
+        n.pourPage(u),
+        u === J ? Promise.resolve([]) : n.pourPage(J)
+      ]), x = [...l, ...p];
+      return f(x), x;
+    } catch {
+      return N({
+        ton: "erreur",
+        texte: "Impossible de lire le contenu du site."
+      }), [];
+    }
+  }, [n, u]);
+  B(() => {
+    n.schemas().then(r).catch(() => r([]));
+  }, [n]), B(() => {
+    A();
+  }, [A]);
+  const M = H(
+    (l, p) => {
+      let x = null, C = -1;
+      for (const R of c) {
+        const L = Y.exec(R.blockType);
+        if (!L || L[1] !== l) continue;
+        const q = L[2];
+        (q === "" || p === q || p.startsWith(q + ".")) && q.length > C && (x = R, C = q.length);
+      }
+      if (!x) return null;
+      const E = Y.exec(x.blockType)?.[2] ?? "", j = E ? p.slice(E.length + 1) : p;
+      return { bloc: x, champ: j };
+    },
+    [c]
+  ), I = H(
+    (l) => c.find((p) => p.blockType === l),
+    [c]
+  ), d = W(
+    () => c.filter((l) => {
+      const p = l.pages ?? [];
+      return p.includes(u) || p.includes(J);
+    }),
+    [c, u]
+  ), s = W(
+    () => a.filter((l) => l.draft && !K(l.draft, l.data)),
+    [a]
+  ), y = H(
+    async (l, p, x, C) => {
+      const E = M(l, p);
+      if (!E) {
+        N({
+          ton: "erreur",
+          texte: `Ce texte (${l}:${p}) n'appartient à aucun bloc déclaré.`
+        });
+        return;
+      }
+      const j = a.find((X) => X.blockType === E.bloc.blockType), R = j?.draft ?? j?.data ?? {}, L = R[E.champ], q = L && typeof L == "object" && !Array.isArray(L) ? { ...L, [x]: C } : { [x]: C }, $ = { ...R, [E.champ]: q };
+      try {
+        if (j?.UID)
+          await n.enregistrerBrouillon(j.UID, $);
+        else {
+          const X = E.bloc.pages?.[0] ?? u;
+          await n.creer(X, E.bloc.blockType, $);
+        }
+        await A(), N(null);
+      } catch {
+        N({
+          ton: "erreur",
+          texte: "Enregistrement impossible. Votre texte est toujours à l'écran."
+        });
+      }
+    },
+    [n, M, u, A, a]
+  ), P = async () => {
+    if (!s.length) return;
+    T(!0), N(null);
+    const l = s.length;
+    try {
+      for (const p of s) await n.publier(p.UID);
+      await A(), t.recharger(), N({
+        ton: "ok",
+        texte: l === 1 ? "Publié. Vos visiteurs le voient maintenant." : `${l} modifications publiées.`
+      });
+    } catch {
+      N({
+        ton: "erreur",
+        texte: "La publication a échoué. Rien n'a été mis en ligne."
+      });
+    } finally {
+      T(!1);
+    }
+  }, O = async () => {
+    T(!0);
+    try {
+      for (const p of s) await n.annuler(p.UID);
+      const l = await A();
+      if (t.sourceTexte) {
+        const { appliquerAuxTextes: p } = await import("./morceaux/sourceTexte-BMPMpNg9.js");
+        p(
+          l.map((x) => ({ blockType: x.blockType, data: x.data })),
+          t.sourceTexte
+        );
+      }
+      N({
+        ton: "info",
+        texte: "Modifications abandonnées. On est revenu à ce qui est en ligne."
+      });
+    } finally {
+      T(!1);
+    }
+  }, oe = (l) => {
+    const p = a.find((x) => x.blockType === l);
+    g({ ...p?.draft ?? p?.data ?? {} }), i(l), S(!1), N(null);
+  }, re = (l, p) => g((x) => ({ ...x, [l]: p })), ae = async () => {
+    if (o) {
+      T(!0);
+      try {
+        const l = a.find((x) => x.blockType === o);
+        if (l?.UID) await n.enregistrerBrouillon(l.UID, h);
+        else {
+          const x = I(o)?.pages?.[0] ?? u;
+          await n.creer(x, o, h);
+        }
+        const p = await A();
+        if (t.sourceTexte) {
+          const { appliquerAuxTextes: x } = await import("./morceaux/sourceTexte-BMPMpNg9.js");
+          x(
+            p.map((C) => ({ blockType: C.blockType, data: C.draft ?? C.data })),
+            t.sourceTexte
+          );
+        }
+        N({
+          ton: "ok",
+          texte: "Enregistré. Rien n'a encore changé pour vos visiteurs."
+        });
+      } catch {
+        N({ ton: "erreur", texte: "L'enregistrement a échoué." });
+      } finally {
+        T(!1);
+      }
+    }
+  }, ie = () => {
+    try {
+      window.sessionStorage.removeItem("lystech-edit");
+    } catch {
+    }
+    window.location.reload();
+  }, D = o ? I(o) : void 0, V = !o && !v;
+  return /* @__PURE__ */ b("div", { className: "calque", children: [
+    t.sourceTexte && /* @__PURE__ */ e(
+      be,
+      {
+        source: t.sourceTexte,
+        actif: V && !z && _ === "modifier",
+        surModification: y
+      }
+    ),
+    V && /* @__PURE__ */ b("div", { className: "barre", children: [
+      /* @__PURE__ */ e("span", { className: "barre__point" }),
+      /* @__PURE__ */ e("span", { className: "barre__texte", children: _ === "modifier" ? "Cliquez un texte pour le corriger" : "Navigation libre — les clics ouvrent les liens" }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "bouton " + (_ === "circuler" ? "bouton--principal" : ""),
+          onClick: () => U((l) => l === "modifier" ? "circuler" : "modifier"),
+          title: _ === "modifier" ? "Passer en navigation pour changer de page" : "Revenir a la modification des textes",
+          children: _ === "modifier" ? "Circuler" : "Modifier"
+        }
+      ),
+      s.length > 0 ? /* @__PURE__ */ b(Q, { children: [
+        /* @__PURE__ */ e("span", { className: "barre__compte", children: s.length === 1 ? "1 modification non publiée" : `${s.length} modifications non publiées` }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "bouton bouton--principal",
+            onClick: P,
+            disabled: z,
+            children: "Publier"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "bouton bouton--discret",
+            onClick: O,
+            disabled: z,
+            children: "Abandonner"
+          }
+        )
+      ] }) : /* @__PURE__ */ e("span", { className: "barre__compte", children: "tout est publié" }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "bouton bouton--discret",
+          onClick: () => S(!0),
+          children: "Plus…"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "bouton bouton--discret",
+          onClick: ie,
+          children: "Quitter"
+        }
+      )
+    ] }),
+    w && V && /* @__PURE__ */ e("div", { className: "flottant", children: /* @__PURE__ */ e("p", { className: "message message--" + w.ton, children: w.texte }) }),
+    v && /* @__PURE__ */ b("div", { className: "panneau", role: "dialog", "aria-label": "Tous les contenus", children: [
+      /* @__PURE__ */ b("div", { className: "panneau__tete", children: [
+        /* @__PURE__ */ b("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e("h2", { className: "panneau__titre", children: "Tous les contenus" }),
+          /* @__PURE__ */ e("p", { className: "panneau__sous", children: "Y compris ce qui ne s'affiche pas dans la page : titre de l'onglet, description dans les moteurs de recherche, textes contenant une valeur calculée." })
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "bouton bouton--icone bouton--discret",
+            onClick: () => S(!1),
+            "aria-label": "Fermer",
+            children: "✕"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ b("div", { className: "panneau__corps", children: [
+        d.length === 0 && /* @__PURE__ */ e("p", { className: "message message--info", children: "Aucun contenu déclaré pour cette page." }),
+        d.map((l) => {
+          const p = a.find((C) => C.blockType === l.blockType), x = p?.draft && !K(p.draft, p.data);
+          return /* @__PURE__ */ b(
+            "button",
+            {
+              type: "button",
+              className: "rangee",
+              onClick: () => oe(l.blockType),
+              children: [
+                /* @__PURE__ */ e("span", { className: "rangee__nom", children: l.label }),
+                /* @__PURE__ */ e("span", { className: "rangee__info", children: x ? "non publié" : `${l.fields.length} textes` })
+              ]
+            },
+            l.blockType
+          );
+        })
+      ] })
+    ] }),
+    o && D && /* @__PURE__ */ b(
+      "div",
+      {
+        className: "panneau",
+        role: "dialog",
+        "aria-label": "Modifier " + D.label,
+        children: [
+          /* @__PURE__ */ b("div", { className: "panneau__tete", children: [
+            /* @__PURE__ */ b("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ e("h2", { className: "panneau__titre", children: D.label }),
+              D.description && /* @__PURE__ */ e("p", { className: "panneau__sous", children: D.description })
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--icone bouton--discret",
+                onClick: () => i(null),
+                "aria-label": "Fermer",
+                children: "✕"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ b("div", { className: "panneau__corps", children: [
+            w && /* @__PURE__ */ e("p", { className: "message message--" + w.ton, children: w.texte }),
+            D.fields.map((l) => /* @__PURE__ */ e(
+              ee,
+              {
+                champ: l,
+                langue: t.langue,
+                valeur: h[l.key],
+                changer: (p) => re(l.key, p)
+              },
+              l.key
+            ))
+          ] }),
+          /* @__PURE__ */ b("div", { className: "panneau__pied", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--discret",
+                onClick: () => i(null),
+                disabled: z,
+                children: "Fermer"
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "espace" }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--principal",
+                onClick: ae,
+                disabled: z,
+                children: "Enregistrer"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const xe = `
+:host {
+  all: initial;
+  --fond: #16181d;
+  --fond-clair: #21242b;
+  --bord: #333844;
+  --texte: #f2f3f5;
+  --texte-doux: #a3a9b6;
+  --accent: #3ba58d;
+  --accent-sombre: #2d8570;
+  --danger: #d9776a;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--texte);
+}
+
+* { box-sizing: border-box; }
+
+/* LE CALQUE LAISSE PASSER LES CLICS. Un conteneur fixe en plein écran qui
+   intercepte tout rendrait le site inutilisable derrière lui : on ne pourrait
+   plus naviguer, ni même faire défiler correctement. Seuls ses ENFANTS
+   reprennent les clics. */
+.calque {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2147483000;
+}
+.calque > * { pointer-events: auto; }
+
+/* ---------------------------------------------------------- CADRES ------ */
+
+.cadre {
+  position: fixed;
+  border: 2px dashed rgba(59, 165, 141, 0.55);
+  border-radius: 6px;
+  pointer-events: none;
+  transition: border-color 120ms ease;
+}
+.cadre--actif { border-color: var(--accent); border-style: solid; }
+
+.pastille {
+  position: fixed;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #06120e;
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+}
+.pastille:hover { background: #45bda2; }
+.pastille:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+
+/* ------------------------------------------------------------ BARRE ----- */
+
+.barre {
+  position: fixed;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 9px 14px;
+  border: 1px solid var(--bord);
+  border-radius: 999px;
+  background: var(--fond);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
+  max-width: calc(100vw - 24px);
+}
+.barre__point {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--accent);
+  flex: none;
+}
+.barre__texte { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.barre__texte b { font-weight: 650; }
+.barre__compte { color: var(--texte-doux); font-size: 12px; white-space: nowrap; }
+
+/* ----------------------------------------------------------- PANNEAU ---- */
+
+.panneau {
+  position: fixed;
+  top: 0; right: 0; bottom: 0;
+  width: min(420px, 100vw);
+  display: flex;
+  flex-direction: column;
+  background: var(--fond);
+  border-left: 1px solid var(--bord);
+  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
+}
+@media (max-width: 520px) {
+  .panneau { top: auto; height: 78vh; border-left: 0; border-top: 1px solid var(--bord); }
+}
+
+.panneau__tete {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid var(--bord);
+}
+.panneau__titre { font-size: 15px; font-weight: 650; margin: 0; }
+.panneau__sous { margin: 3px 0 0; font-size: 12px; color: var(--texte-doux); }
+.panneau__corps { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }
+.panneau__pied {
+  display: flex; gap: 8px; align-items: center;
+  padding: 12px 16px;
+  border-top: 1px solid var(--bord);
+  background: var(--fond-clair);
+}
+.panneau__pied .espace { flex: 1; }
+
+/* --------------------------------------------------- CONNEXION ---------- */
+
+/* Le voile PREND les clics, lui : une boite de dialogue qui demande un mot de
+   passe ne doit pas laisser cliquer la page derriere elle. C'est l'exception
+   a la regle du calque, et elle est volontaire. */
+.voile {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(8, 10, 14, 0.62);
+  backdrop-filter: blur(2px);
+}
+
+.fenetre {
+  width: min(420px, 100%);
+  max-height: 90vh;
+  overflow-y: auto;
+  border: 1px solid var(--bord);
+  border-radius: 12px;
+  background: var(--fond);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
+}
+
+/* ------------------------------------------------------------ CHAMPS ---- */
+
+.champ { margin-bottom: 16px; }
+.champ__etiquette {
+  display: block; margin-bottom: 5px;
+  font-size: 12px; font-weight: 600; color: var(--texte);
+}
+.champ__aide { margin: 4px 0 0; font-size: 11.5px; color: var(--texte-doux); }
+.champ__langue {
+  display: inline-block; margin: 0 0 4px;
+  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
+  text-transform: uppercase; color: var(--texte-doux);
+}
+
+input[type="text"], input[type="url"], input[type="number"], input[type="date"],
+select, textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--bord);
+  border-radius: 6px;
+  background: var(--fond-clair);
+  color: var(--texte);
+  font: inherit;
+  font-size: 13px;
+}
+textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
+input:focus, select:focus, textarea:focus {
+  outline: none; border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(59, 165, 141, 0.18);
+}
+
+.bascule { display: flex; align-items: center; gap: 8px; }
+.bascule input { width: 16px; height: 16px; accent-color: var(--accent); }
+
+.vignette {
+  margin-top: 8px; max-height: 110px; border-radius: 6px;
+  border: 1px solid var(--bord); display: block;
+}
+
+/* --------------------------------------------------------- LISTES ------- */
+
+.liste__item {
+  border: 1px solid var(--bord); border-radius: 8px;
+  padding: 12px; margin-bottom: 10px; background: var(--fond-clair);
+}
+.liste__tete {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 8px;
+}
+.liste__rang { font-size: 11px; font-weight: 700; color: var(--texte-doux); }
+
+/* --------------------------------------------------------- BOUTONS ------ */
+
+.bouton {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 8px 14px; border-radius: 7px; border: 1px solid transparent;
+  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
+  background: var(--fond-clair); color: var(--texte); border-color: var(--bord);
+}
+.bouton:hover { background: #2a2e37; }
+.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.bouton--principal { background: var(--accent); border-color: var(--accent); color: #06120e; }
+.bouton--principal:hover { background: #45bda2; }
+.bouton--discret { background: transparent; border-color: transparent; color: var(--texte-doux); }
+.bouton--discret:hover { background: var(--fond-clair); color: var(--texte); }
+.bouton[disabled] { opacity: 0.5; cursor: default; }
+.bouton--icone { padding: 6px 9px; }
+
+.message {
+  margin: 0 0 12px; padding: 9px 11px; border-radius: 7px;
+  font-size: 12.5px; border: 1px solid;
+}
+.message--erreur { background: rgba(217, 119, 106, 0.12); border-color: rgba(217, 119, 106, 0.4); color: #f0b3a9; }
+.message--ok { background: rgba(59, 165, 141, 0.12); border-color: rgba(59, 165, 141, 0.4); color: #8fd9c6; }
+.message--info { background: var(--fond-clair); border-color: var(--bord); color: var(--texte-doux); }
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; animation: none !important; }
+}
+`, he = `
+/* --------------------------------------------------------- CHOIX -------- */
+
+/* Quand un meme texte vient de plusieurs cles, on demande laquelle plutot que
+   de deviner — et de modifier la mauvaise sans que personne le voie. */
+.choix {
+  position: fixed;
+  width: 260px;
+  padding: 12px;
+  border: 1px solid var(--bord);
+  border-radius: 10px;
+  background: var(--fond);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
+}
+.choix__titre { margin: 0 0 2px; font-size: 12.5px; font-weight: 650; }
+.choix__aide { margin: 0 0 10px; font-size: 11.5px; color: var(--texte-doux); }
+.choix__option {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+  width: 100%; margin-bottom: 6px; padding: 7px 9px;
+  border: 1px solid var(--bord); border-radius: 7px;
+  background: var(--fond-clair); color: var(--texte);
+  font: inherit; text-align: left; cursor: pointer;
+}
+.choix__option:hover { background: #2a2e37; border-color: var(--accent); }
+.choix__chemin { font-size: 12px; font-weight: 600; }
+.choix__ns { font-size: 10.5px; color: var(--texte-doux); }
+
+/* ------------------------------------------------------- RANGEES -------- */
+
+.rangee {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  width: 100%; margin-bottom: 6px; padding: 10px 12px;
+  border: 1px solid var(--bord); border-radius: 8px;
+  background: var(--fond-clair); color: var(--texte);
+  font: inherit; text-align: left; cursor: pointer;
+}
+.rangee:hover { background: #2a2e37; border-color: var(--accent); }
+.rangee__nom { font-size: 13px; font-weight: 600; }
+.rangee__info { font-size: 11.5px; color: var(--texte-doux); white-space: nowrap; }
+
+/* ------------------------------------------------------ FLOTTANT -------- */
+
+/* Un message au-dessus de la barre, pour confirmer sans ouvrir de panneau. */
+.flottant {
+  position: fixed;
+  left: 50%; bottom: 76px;
+  transform: translateX(-50%);
+  max-width: min(460px, calc(100vw - 24px));
+}
+.flottant .message { margin: 0; box-shadow: 0 8px 26px rgba(0,0,0,.4); }
+`, ge = "lystech-editeur-hote", ve = "lystech-connexion-hote";
+function te(n) {
+  document.getElementById(n)?.remove();
+  const t = document.createElement("div");
+  t.id = n, document.body.appendChild(t);
+  const c = t.attachShadow({ mode: "open" }), r = document.createElement("style");
+  r.textContent = xe + he, c.appendChild(r);
+  const a = document.createElement("div");
+  return c.appendChild(a), { hote: t, point: a };
+}
+function ne(n, t) {
+  let c = n;
+  return () => {
+    const r = c;
+    c = null, setTimeout(() => {
+      r?.unmount(), t.remove();
+    }, 0);
+  };
+}
+function we({
+  site: n,
+  apiBaseUrl: t,
+  surJeton: c
+}) {
+  const { hote: r, point: a } = te(ve), f = Z(a), u = () => m();
+  f.render(
+    /* @__PURE__ */ e(
+      ce,
+      {
+        site: n,
+        apiBaseUrl: t,
+        surJeton: (o) => {
+          m(), c(o);
+        },
+        surFermer: u
+      }
+    )
+  );
+  const m = ne(f, r);
+  return m;
+}
+function ke({
+  jeton: n,
+  site: t,
+  apiBaseUrl: c,
+  pont: r
+}) {
+  const { hote: a, point: f } = te(ge), u = Z(f), m = () => {
+    try {
+      window.sessionStorage.removeItem("lystech-edit");
+    } catch {
+    }
+    window.location.reload();
+  };
+  return u.render(
+    /* @__PURE__ */ e(
+      fe,
+      {
+        api: se({ jeton: n, site: t, apiBaseUrl: c, surJetonRefuse: m }),
+        pont: r
+      }
+    )
+  ), ne(u, a);
+}
+export {
+  we as monterConnexion,
+  ke as monterEditeur
+};