@lystech/sections 0.1.0 → 0.2.0

package/dist/editeur.js

@@ -0,0 +1,719 @@
+import { jsxs as p, jsx as o, Fragment as V } from "react/jsx-runtime";
+import { createRoot as H } from "react-dom/client";
+import { useState as g, useEffect as T, useCallback as S, useMemo as Q, useRef as W } from "react";
+function X({
+  jeton: n,
+  site: t,
+  apiBaseUrl: s,
+  surJetonRefuse: r
+}) {
+  const c = {
+    "Content-Type": "application/json",
+    Authorization: "Bearer " + n
+  };
+  function b(e, a) {
+    if (a && (e.status === 401 || e.status === 403) && r(), !e.ok) throw new Error(String(e.status));
+  }
+  async function d(e, a = !0) {
+    const u = await fetch(s + e, {
+      headers: a ? c : void 0
+    });
+    return b(u, a), await u.json();
+  }
+  async function l(e, a, u) {
+    const m = await fetch(s + e, {
+      method: a,
+      headers: c,
+      body: u === void 0 ? void 0 : JSON.stringify(u)
+    });
+    return b(m, !0), await m.json();
+  }
+  return {
+    /** Les blocs que le site a déclaré savoir afficher. Route publique. */
+    schemas: () => d("/site-sections/public/" + encodeURIComponent(t) + "/schemas", !1),
+    /** Ce qui existe sur une page, brouillons compris. */
+    pourPage: (e) => d("/site-sections?page=" + encodeURIComponent(e)),
+    creer: (e, a, u) => l("/site-sections", "POST", { page: e, blockType: a, draft: u }),
+    enregistrerBrouillon: (e, a) => l("/site-sections/" + e + "/draft", "PUT", { draft: a }),
+    publier: (e) => l("/site-sections/" + e + "/publish", "POST"),
+    /** Ramène le brouillon à ce qui est en ligne. */
+    annuler: (e) => l("/site-sections/" + e + "/revert", "POST")
+  };
+}
+function Z(n, t) {
+  const s = n && typeof n == "object" && !Array.isArray(n) ? Object.keys(n).filter((c) => /^[a-z]{2}(-[A-Za-z]{2})?$/.test(c)) : [], r = t.slice(0, 2);
+  return Array.from(/* @__PURE__ */ new Set([r, ...s]));
+}
+function $(n) {
+  switch (n.type) {
+    case "number":
+      return 0;
+    case "boolean":
+      return !1;
+    case "list":
+      return [];
+    default:
+      return "";
+  }
+}
+function j({ champ: n, valeur: t, changer: s }) {
+  switch (n.type) {
+    case "richText":
+      return /* @__PURE__ */ o(
+        "textarea",
+        {
+          value: String(t ?? ""),
+          onChange: (r) => s(r.target.value)
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ o(
+        "input",
+        {
+          type: "number",
+          value: t === "" || t == null ? "" : String(t),
+          onChange: (r) => s(r.target.value === "" ? "" : Number(r.target.value))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ p("label", { className: "bascule", children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "checkbox",
+            checked: t === !0,
+            onChange: (r) => s(r.target.checked)
+          }
+        ),
+        /* @__PURE__ */ o("span", { children: t === !0 ? "Oui" : "Non" })
+      ] });
+    case "date":
+      return /* @__PURE__ */ o(
+        "input",
+        {
+          type: "date",
+          value: String(t ?? "").slice(0, 10),
+          onChange: (r) => s(r.target.value)
+        }
+      );
+    case "choice":
+      return /* @__PURE__ */ p(
+        "select",
+        {
+          value: String(t ?? ""),
+          onChange: (r) => s(r.target.value),
+          children: [
+            /* @__PURE__ */ o("option", { value: "", children: "—" }),
+            (n.options ?? []).map((r) => /* @__PURE__ */ o("option", { value: r, children: r }, r))
+          ]
+        }
+      );
+    case "url":
+      return /* @__PURE__ */ o(
+        "input",
+        {
+          type: "url",
+          value: String(t ?? ""),
+          onChange: (r) => s(r.target.value),
+          placeholder: "https://"
+        }
+      );
+    case "image":
+      return /* @__PURE__ */ p(V, { children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "url",
+            value: String(t ?? ""),
+            onChange: (r) => s(r.target.value),
+            placeholder: "https://…"
+          }
+        ),
+        String(t ?? "").startsWith("http") && /* @__PURE__ */ o("img", { className: "vignette", src: String(t), alt: "" })
+      ] });
+    default:
+      return /* @__PURE__ */ o(
+        "input",
+        {
+          type: "text",
+          value: String(t ?? ""),
+          onChange: (r) => s(r.target.value)
+        }
+      );
+  }
+}
+function P({ champ: n, valeur: t, changer: s, langue: r }) {
+  if (n.type === "list") {
+    const c = Array.isArray(t) ? t : [], b = n.of ?? [], d = (l, e, a) => {
+      const u = c.map((m, _) => _ === l ? { ...m, [e]: a } : m);
+      s(u);
+    };
+    return /* @__PURE__ */ p("div", { className: "champ", children: [
+      /* @__PURE__ */ o("span", { className: "champ__etiquette", children: n.label }),
+      n.help && /* @__PURE__ */ o("p", { className: "champ__aide", children: n.help }),
+      c.map((l, e) => /* @__PURE__ */ p("div", { className: "liste__item", children: [
+        /* @__PURE__ */ p("div", { className: "liste__tete", children: [
+          /* @__PURE__ */ o("span", { className: "liste__rang", children: e + 1 }),
+          /* @__PURE__ */ p("span", { style: { display: "flex", gap: 4 }, children: [
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--icone bouton--discret",
+                title: "Monter",
+                disabled: e === 0,
+                onClick: () => {
+                  const a = [...c];
+                  [a[e - 1], a[e]] = [a[e], a[e - 1]], s(a);
+                },
+                children: "↑"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--icone bouton--discret",
+                title: "Descendre",
+                disabled: e === c.length - 1,
+                onClick: () => {
+                  const a = [...c];
+                  [a[e], a[e + 1]] = [a[e + 1], a[e]], s(a);
+                },
+                children: "↓"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                className: "bouton bouton--icone bouton--discret",
+                title: "Retirer",
+                onClick: () => s(c.filter((a, u) => u !== e)),
+                children: "✕"
+              }
+            )
+          ] })
+        ] }),
+        b.map((a) => /* @__PURE__ */ o(
+          P,
+          {
+            champ: a,
+            langue: r,
+            valeur: l?.[a.key],
+            changer: (u) => d(e, a.key, u)
+          },
+          a.key
+        ))
+      ] }, e)),
+      /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          className: "bouton",
+          onClick: () => s([
+            ...c,
+            Object.fromEntries(b.map((l) => [l.key, $(l)]))
+          ]),
+          children: "+ Ajouter"
+        }
+      )
+    ] });
+  }
+  if (n.localized) {
+    const c = Z(t, r), b = t && typeof t == "object" && !Array.isArray(t) ? t : {};
+    return /* @__PURE__ */ p("div", { className: "champ", children: [
+      /* @__PURE__ */ o("span", { className: "champ__etiquette", children: n.label }),
+      n.help && /* @__PURE__ */ o("p", { className: "champ__aide", children: n.help }),
+      c.map((d) => /* @__PURE__ */ p("div", { style: { marginBottom: 8 }, children: [
+        /* @__PURE__ */ o("span", { className: "champ__langue", children: d }),
+        /* @__PURE__ */ o(
+          j,
+          {
+            champ: n,
+            valeur: b[d],
+            changer: (l) => s({ ...b, [d]: l })
+          }
+        )
+      ] }, d))
+    ] });
+  }
+  return /* @__PURE__ */ p("div", { className: "champ", children: [
+    /* @__PURE__ */ o("label", { className: "champ__etiquette", children: n.label }),
+    /* @__PURE__ */ o(j, { champ: n, valeur: t, changer: s }),
+    n.help && /* @__PURE__ */ o("p", { className: "champ__aide", children: n.help })
+  ] });
+}
+function G(n, t) {
+  const s = n.haut - 12, r = t + 8, c = n.haut + n.hauteur - 34;
+  return Math.min(Math.max(s, r), Math.max(r, c));
+}
+function K() {
+  let n = 0;
+  return document.querySelectorAll("header, nav, [class*='header'], [class*='nav']").forEach((t) => {
+    const s = getComputedStyle(t);
+    if (s.position !== "fixed" && s.position !== "sticky") return;
+    const r = t.getBoundingClientRect();
+    r.top <= 4 && r.height > 0 && r.height < 200 && (n = Math.max(n, r.bottom));
+  }), n;
+}
+function Y() {
+  const [n, t] = g([]), [s, r] = g(0), c = W("");
+  return T(() => {
+    let b = 0;
+    const d = () => {
+      const a = [];
+      document.querySelectorAll("[data-lystech-section]").forEach((_) => {
+        const y = _.getAttribute("data-lystech-section");
+        if (!y) return;
+        const x = _.getBoundingClientRect();
+        x.width < 8 || x.height < 8 || a.push({
+          blockType: y,
+          haut: x.top,
+          gauche: x.left,
+          largeur: x.width,
+          hauteur: x.height
+        });
+      });
+      const u = K(), m = JSON.stringify(a) + "|" + u;
+      m !== c.current && (c.current = m, t(a), r(u));
+    }, l = () => {
+      cancelAnimationFrame(b), b = requestAnimationFrame(d);
+    };
+    d(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l);
+    const e = new MutationObserver(l);
+    return e.observe(document.body, { childList: !0, subtree: !0 }), () => {
+      cancelAnimationFrame(b), window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l), e.disconnect();
+    };
+  }, []), { ancres: n, enTete: s };
+}
+function ee({ api: n, pont: t }) {
+  const [s, r] = g([]), [c, b] = g([]), [d, l] = g(t.page), [e, a] = g(null), [u, m] = g({}), [_, y] = g(!1), [x, w] = g(!1), [z, f] = g(null), { ancres: I, enTete: R } = Y();
+  T(() => (t.surChangementDePage = (i) => {
+    l(i), a(null);
+  }, () => {
+    t.surChangementDePage = void 0;
+  }), [t]);
+  const C = S(async () => {
+    try {
+      const i = await n.pourPage(d);
+      return b(i), i;
+    } catch {
+      return f({ ton: "erreur", texte: "Impossible de lire le contenu du site." }), [];
+    }
+  }, [n, d]);
+  T(() => {
+    n.schemas().then(r).catch(() => r([]));
+  }, [n]), T(() => {
+    C();
+  }, [C]);
+  const A = S(
+    (i) => s.find((h) => h.blockType === i),
+    [s]
+  ), E = Q(
+    () => I.filter((i) => A(i.blockType)),
+    [I, A]
+  ), U = S(
+    (i) => {
+      const h = c.find((N) => N.blockType === i), v = h?.draft ?? h?.data ?? {};
+      m({ ...v }), a(i), y(!1), f(
+        h?.draft && JSON.stringify(h.draft) !== JSON.stringify(h.data ?? {}) ? { ton: "info", texte: "Un brouillon non publié est en cours." } : null
+      );
+    },
+    [c]
+  ), q = S(() => {
+    e && t.poserApercu(e, null), a(null), y(!1), f(null);
+  }, [e, t]), L = S(
+    (i, h) => {
+      m((v) => {
+        const N = { ...v, [i]: h };
+        return e && t.poserApercu(e, N), N;
+      }), y(!0);
+    },
+    [e, t]
+  ), O = S(async () => {
+    if (!e) return null;
+    const i = c.find((v) => v.blockType === e);
+    return i?.UID ? (await n.enregistrerBrouillon(i.UID, u), i.UID) : (await n.creer(d, e, u)).UID;
+  }, [n, e, d, c, u]), M = async () => {
+    w(!0), f(null);
+    try {
+      await O(), await C(), y(!1), f({ ton: "ok", texte: "Brouillon enregistré. Rien n'a encore changé pour vos visiteurs." });
+    } catch {
+      f({ ton: "erreur", texte: "L'enregistrement a échoué. Votre texte est toujours là — réessayez." });
+    } finally {
+      w(!1);
+    }
+  }, B = async () => {
+    w(!0), f(null);
+    try {
+      const i = await O();
+      if (!i) throw new Error("sans identifiant");
+      await n.publier(i), await C(), e && t.poserApercu(e, null), t.recharger(), y(!1), f({ ton: "ok", texte: "Publié. Vos visiteurs le voient maintenant." });
+    } catch {
+      f({ ton: "erreur", texte: "La publication a échoué. Rien n'a été mis en ligne." });
+    } finally {
+      w(!1);
+    }
+  }, F = async () => {
+    if (!e) return;
+    const i = c.find((h) => h.blockType === e);
+    w(!0);
+    try {
+      i?.UID && await n.annuler(i.UID);
+      const v = (await C()).find((N) => N.blockType === e);
+      m({ ...v?.data ?? {} }), t.poserApercu(e, null), y(!1), f({ ton: "info", texte: "Brouillon abandonné. On est revenu à ce qui est en ligne." });
+    } catch {
+      f({ ton: "erreur", texte: "Impossible d'abandonner le brouillon." });
+    } finally {
+      w(!1);
+    }
+  }, J = () => {
+    try {
+      window.sessionStorage.removeItem("lystech-edit");
+    } catch {
+    }
+    window.location.reload();
+  }, k = e ? A(e) : void 0;
+  return /* @__PURE__ */ p("div", { className: "calque", children: [
+    E.map((i) => /* @__PURE__ */ p("div", { children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          className: "cadre" + (e === i.blockType ? " cadre--actif" : ""),
+          style: {
+            top: i.haut - 4,
+            left: i.gauche - 4,
+            width: i.largeur + 8,
+            height: i.hauteur + 8
+          }
+        }
+      ),
+      /* @__PURE__ */ p(
+        "button",
+        {
+          type: "button",
+          className: "pastille",
+          style: { top: G(i, R), left: i.gauche + 6 },
+          onClick: () => U(i.blockType),
+          children: [
+            "✎ ",
+            A(i.blockType)?.label ?? i.blockType
+          ]
+        }
+      )
+    ] }, i.blockType)),
+    !e && /* @__PURE__ */ p("div", { className: "barre", children: [
+      /* @__PURE__ */ o("span", { className: "barre__point" }),
+      /* @__PURE__ */ p("span", { className: "barre__texte", children: [
+        "Mode édition — ",
+        /* @__PURE__ */ o("b", { children: t.site })
+      ] }),
+      /* @__PURE__ */ o("span", { className: "barre__compte", children: E.length === 0 ? "aucune section sur cette page" : E.length === 1 ? "1 section modifiable" : E.length + " sections modifiables" }),
+      /* @__PURE__ */ o("button", { type: "button", className: "bouton bouton--discret", onClick: J, children: "Quitter" })
+    ] }),
+    e && k && /* @__PURE__ */ p("div", { className: "panneau", role: "dialog", "aria-label": "Modifier " + k.label, children: [
+      /* @__PURE__ */ p("div", { className: "panneau__tete", children: [
+        /* @__PURE__ */ p("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ o("h2", { className: "panneau__titre", children: k.label }),
+          k.description && /* @__PURE__ */ o("p", { className: "panneau__sous", children: k.description })
+        ] }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: "bouton bouton--icone bouton--discret",
+            onClick: q,
+            "aria-label": "Fermer",
+            children: "✕"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ p("div", { className: "panneau__corps", children: [
+        z && /* @__PURE__ */ o("p", { className: "message message--" + z.ton, children: z.texte }),
+        k.fields.map((i) => /* @__PURE__ */ o(
+          P,
+          {
+            champ: i,
+            langue: t.langue,
+            valeur: u[i.key],
+            changer: (h) => L(i.key, h)
+          },
+          i.key
+        ))
+      ] }),
+      /* @__PURE__ */ p("div", { className: "panneau__pied", children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: "bouton bouton--discret",
+            onClick: F,
+            disabled: x,
+            children: "Abandonner"
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: "espace" }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: "bouton",
+            onClick: M,
+            disabled: x || !_,
+            children: "Enregistrer"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: "bouton bouton--principal",
+            onClick: B,
+            disabled: x,
+            children: "Publier"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+const te = `
+: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; }
+
+/* ------------------------------------------------------------ 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; }
+}
+`, D = "lystech-editeur-hote";
+function ae({
+  jeton: n,
+  site: t,
+  apiBaseUrl: s,
+  pont: r
+}) {
+  document.getElementById(D)?.remove();
+  const c = document.createElement("div");
+  c.id = D, document.body.appendChild(c);
+  const b = c.attachShadow({ mode: "open" }), d = document.createElement("style");
+  d.textContent = te, b.appendChild(d);
+  const l = document.createElement("div");
+  b.appendChild(l);
+  let e = H(l);
+  const a = () => {
+    try {
+      window.sessionStorage.removeItem("lystech-edit");
+    } catch {
+    }
+    window.location.reload();
+  };
+  return e.render(
+    /* @__PURE__ */ o(
+      ee,
+      {
+        api: X({ jeton: n, site: t, apiBaseUrl: s, surJetonRefuse: a }),
+        pont: r
+      }
+    )
+  ), () => {
+    const u = e;
+    e = null, setTimeout(() => {
+      u?.unmount(), c.remove();
+    }, 0);
+  };
+}
+export {
+  ae as monterEditeur
+};