@lystech/sections 0.2.0 → 0.3.0

package/dist/SectionsProvider.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SourceTexte } from './sourceTexte';
 import { SectionPubliee } from './types';
 type Etat = "chargement" | "pret" | "erreur";
 type Contexte = {
@@ -25,7 +26,7 @@ type Contexte = {
     /** Vrai quand un jeton d'édition est actif. Faux pour tout visiteur. */
     modeEdition: boolean;
 };
-export declare function SectionsProvider({ site, page, langue, apiBaseUrl, sectionsInitiales, children, }: {
+export declare function SectionsProvider({ site, page, langue, apiBaseUrl, sectionsInitiales, sourceTexte, pagesPartagees, children, }: {
     /** Sous-domaine de l'organisation (ex. « armoise »). */
     site: string;
     /** La page dont on veut les sections (ex. « accueil »). */
@@ -42,6 +43,27 @@ export declare function SectionsProvider({ site, page, langue, apiBaseUrl, secti
      * passe le résultat ici supprime les deux problèmes.
      */
     sectionsInitiales?: SectionPubliee[] | undefined;
+    /**
+     * D'OU VIENNENT LES MOTS DU SITE.
+     *
+     * Fournie, le contenu publie est verse dedans : chaque texte du site —
+     * y compris le titre de l'onglet et la description des resultats de
+     * recherche — devient modifiable, sans marquer une seule section a la
+     * main. `adaptateurI18next(i18n)` la construit en une ligne.
+     */
+    sourceTexte?: SourceTexte | undefined;
+    /**
+     * Des pages LUES EN PLUS de la page courante.
+     *
+     * Tout site a des textes partages — pied de page, navigation,
+     * coordonnees. Les ranger dans une page « commun » lue partout evite de
+     * les recopier sur chaque page, ou de forcer quelqu'un a revenir a
+     * l'accueil pour corriger une adresse affichee en bas de toutes.
+     *
+     * Elles ne changent PAS `page` : une nouvelle section se cree toujours
+     * sur la page courante, jamais dans le commun par accident.
+     */
+    pagesPartagees?: string[] | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
 /**

package/dist/editeur/Connexion.d.ts

@@ -0,0 +1,6 @@
+export declare function Connexion({ site, apiBaseUrl, surJeton, surFermer, }: {
+    site: string;
+    apiBaseUrl: string;
+    surJeton: (jeton: string) => void;
+    surFermer: () => void;
+}): import("react").JSX.Element;

package/dist/editeur/TexteEnPlace.d.ts

@@ -0,0 +1,7 @@
+import { SourceTexte } from '../sourceTexte';
+export declare function TexteEnPlace({ source, actif, surModification, }: {
+    source: SourceTexte;
+    /** Faux pendant qu'un panneau est ouvert : on ne veut pas deux modes. */
+    actif: boolean;
+    surModification: (ns: string, chemin: string, langue: string, valeur: string) => void | Promise<void>;
+}): import("react").JSX.Element | null;

package/dist/editeur/index.d.ts

@@ -1,5 +1,17 @@
 import { PontEdition } from './pont';
 export type { PontEdition } from './pont';
+/**
+ * LE PANNEAU DE CONNEXION, sur le site lui-meme.
+ *
+ * Charge au clic, jamais avant : le lien du pied de page est un simple bouton
+ * tant que personne ne le presse. Un visiteur ne telecharge donc rien de tout
+ * ceci.
+ */
+export declare function monterConnexion({ site, apiBaseUrl, surJeton, }: {
+    site: string;
+    apiBaseUrl: string;
+    surJeton: (jeton: string) => void;
+}): () => void;
 export declare function monterEditeur({ jeton, site, apiBaseUrl, pont, }: {
     jeton: string;
     site: string;

package/dist/editeur/pont.d.ts

@@ -1,4 +1,13 @@
+import { SourceTexte } from '../sourceTexte';
 export type PontEdition = {
+    /**
+     * D'où viennent les mots du site — et comment les remplacer.
+     *
+     * C'est elle qui permet a l'editeur de reconnaitre un texte affiche dans
+     * la page et de remonter a son identite. Sans elle, il ne reste que les
+     * blocs marques a la main.
+     */
+    sourceTexte?: SourceTexte | undefined;
     /** Sous-domaine de l'organisation — affiché, jamais envoyé. */
     site: string;
     /** La page courante. Mise à jour par le fournisseur. */

package/dist/editeur/styles.d.ts

@@ -1 +1,2 @@
-export declare const CSS = "\n:host {\n  all: initial;\n  --fond: #16181d;\n  --fond-clair: #21242b;\n  --bord: #333844;\n  --texte: #f2f3f5;\n  --texte-doux: #a3a9b6;\n  --accent: #3ba58d;\n  --accent-sombre: #2d8570;\n  --danger: #d9776a;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--texte);\n}\n\n* { box-sizing: border-box; }\n\n/* LE CALQUE LAISSE PASSER LES CLICS. Un conteneur fixe en plein \u00E9cran qui\n   intercepte tout rendrait le site inutilisable derri\u00E8re lui : on ne pourrait\n   plus naviguer, ni m\u00EAme faire d\u00E9filer correctement. Seuls ses ENFANTS\n   reprennent les clics. */\n.calque {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2147483000;\n}\n.calque > * { pointer-events: auto; }\n\n/* ---------------------------------------------------------- CADRES ------ */\n\n.cadre {\n  position: fixed;\n  border: 2px dashed rgba(59, 165, 141, 0.55);\n  border-radius: 6px;\n  pointer-events: none;\n  transition: border-color 120ms ease;\n}\n.cadre--actif { border-color: var(--accent); border-style: solid; }\n\n.pastille {\n  position: fixed;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--accent);\n  color: #06120e;\n  font-size: 12px;\n  font-weight: 650;\n  letter-spacing: 0.01em;\n  cursor: pointer;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);\n}\n.pastille:hover { background: #45bda2; }\n.pastille:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n/* ------------------------------------------------------------ BARRE ----- */\n\n.barre {\n  position: fixed;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 9px 14px;\n  border: 1px solid var(--bord);\n  border-radius: 999px;\n  background: var(--fond);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);\n  max-width: calc(100vw - 24px);\n}\n.barre__point {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--accent);\n  flex: none;\n}\n.barre__texte { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.barre__texte b { font-weight: 650; }\n.barre__compte { color: var(--texte-doux); font-size: 12px; white-space: nowrap; }\n\n/* ----------------------------------------------------------- PANNEAU ---- */\n\n.panneau {\n  position: fixed;\n  top: 0; right: 0; bottom: 0;\n  width: min(420px, 100vw);\n  display: flex;\n  flex-direction: column;\n  background: var(--fond);\n  border-left: 1px solid var(--bord);\n  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);\n}\n@media (max-width: 520px) {\n  .panneau { top: auto; height: 78vh; border-left: 0; border-top: 1px solid var(--bord); }\n}\n\n.panneau__tete {\n  display: flex; align-items: flex-start; gap: 10px;\n  padding: 16px 16px 12px;\n  border-bottom: 1px solid var(--bord);\n}\n.panneau__titre { font-size: 15px; font-weight: 650; margin: 0; }\n.panneau__sous { margin: 3px 0 0; font-size: 12px; color: var(--texte-doux); }\n.panneau__corps { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }\n.panneau__pied {\n  display: flex; gap: 8px; align-items: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--bord);\n  background: var(--fond-clair);\n}\n.panneau__pied .espace { flex: 1; }\n\n/* ------------------------------------------------------------ CHAMPS ---- */\n\n.champ { margin-bottom: 16px; }\n.champ__etiquette {\n  display: block; margin-bottom: 5px;\n  font-size: 12px; font-weight: 600; color: var(--texte);\n}\n.champ__aide { margin: 4px 0 0; font-size: 11.5px; color: var(--texte-doux); }\n.champ__langue {\n  display: inline-block; margin: 0 0 4px;\n  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--texte-doux);\n}\n\ninput[type=\"text\"], input[type=\"url\"], input[type=\"number\"], input[type=\"date\"],\nselect, textarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--bord);\n  border-radius: 6px;\n  background: var(--fond-clair);\n  color: var(--texte);\n  font: inherit;\n  font-size: 13px;\n}\ntextarea { min-height: 92px; resize: vertical; line-height: 1.5; }\ninput:focus, select:focus, textarea:focus {\n  outline: none; border-color: var(--accent);\n  box-shadow: 0 0 0 3px rgba(59, 165, 141, 0.18);\n}\n\n.bascule { display: flex; align-items: center; gap: 8px; }\n.bascule input { width: 16px; height: 16px; accent-color: var(--accent); }\n\n.vignette {\n  margin-top: 8px; max-height: 110px; border-radius: 6px;\n  border: 1px solid var(--bord); display: block;\n}\n\n/* --------------------------------------------------------- LISTES ------- */\n\n.liste__item {\n  border: 1px solid var(--bord); border-radius: 8px;\n  padding: 12px; margin-bottom: 10px; background: var(--fond-clair);\n}\n.liste__tete {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.liste__rang { font-size: 11px; font-weight: 700; color: var(--texte-doux); }\n\n/* --------------------------------------------------------- BOUTONS ------ */\n\n.bouton {\n  display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n  padding: 8px 14px; border-radius: 7px; border: 1px solid transparent;\n  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;\n  background: var(--fond-clair); color: var(--texte); border-color: var(--bord);\n}\n.bouton:hover { background: #2a2e37; }\n.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.bouton--principal { background: var(--accent); border-color: var(--accent); color: #06120e; }\n.bouton--principal:hover { background: #45bda2; }\n.bouton--discret { background: transparent; border-color: transparent; color: var(--texte-doux); }\n.bouton--discret:hover { background: var(--fond-clair); color: var(--texte); }\n.bouton[disabled] { opacity: 0.5; cursor: default; }\n.bouton--icone { padding: 6px 9px; }\n\n.message {\n  margin: 0 0 12px; padding: 9px 11px; border-radius: 7px;\n  font-size: 12.5px; border: 1px solid;\n}\n.message--erreur { background: rgba(217, 119, 106, 0.12); border-color: rgba(217, 119, 106, 0.4); color: #f0b3a9; }\n.message--ok { background: rgba(59, 165, 141, 0.12); border-color: rgba(59, 165, 141, 0.4); color: #8fd9c6; }\n.message--info { background: var(--fond-clair); border-color: var(--bord); color: var(--texte-doux); }\n\n@media (prefers-reduced-motion: reduce) {\n  * { transition: none !important; animation: none !important; }\n}\n";
+export declare const CSS = "\n:host {\n  all: initial;\n  --fond: #16181d;\n  --fond-clair: #21242b;\n  --bord: #333844;\n  --texte: #f2f3f5;\n  --texte-doux: #a3a9b6;\n  --accent: #3ba58d;\n  --accent-sombre: #2d8570;\n  --danger: #d9776a;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--texte);\n}\n\n* { box-sizing: border-box; }\n\n/* LE CALQUE LAISSE PASSER LES CLICS. Un conteneur fixe en plein \u00E9cran qui\n   intercepte tout rendrait le site inutilisable derri\u00E8re lui : on ne pourrait\n   plus naviguer, ni m\u00EAme faire d\u00E9filer correctement. Seuls ses ENFANTS\n   reprennent les clics. */\n.calque {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2147483000;\n}\n.calque > * { pointer-events: auto; }\n\n/* ---------------------------------------------------------- CADRES ------ */\n\n.cadre {\n  position: fixed;\n  border: 2px dashed rgba(59, 165, 141, 0.55);\n  border-radius: 6px;\n  pointer-events: none;\n  transition: border-color 120ms ease;\n}\n.cadre--actif { border-color: var(--accent); border-style: solid; }\n\n.pastille {\n  position: fixed;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--accent);\n  color: #06120e;\n  font-size: 12px;\n  font-weight: 650;\n  letter-spacing: 0.01em;\n  cursor: pointer;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);\n}\n.pastille:hover { background: #45bda2; }\n.pastille:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n/* ------------------------------------------------------------ BARRE ----- */\n\n.barre {\n  position: fixed;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 9px 14px;\n  border: 1px solid var(--bord);\n  border-radius: 999px;\n  background: var(--fond);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);\n  max-width: calc(100vw - 24px);\n}\n.barre__point {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--accent);\n  flex: none;\n}\n.barre__texte { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.barre__texte b { font-weight: 650; }\n.barre__compte { color: var(--texte-doux); font-size: 12px; white-space: nowrap; }\n\n/* ----------------------------------------------------------- PANNEAU ---- */\n\n.panneau {\n  position: fixed;\n  top: 0; right: 0; bottom: 0;\n  width: min(420px, 100vw);\n  display: flex;\n  flex-direction: column;\n  background: var(--fond);\n  border-left: 1px solid var(--bord);\n  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);\n}\n@media (max-width: 520px) {\n  .panneau { top: auto; height: 78vh; border-left: 0; border-top: 1px solid var(--bord); }\n}\n\n.panneau__tete {\n  display: flex; align-items: flex-start; gap: 10px;\n  padding: 16px 16px 12px;\n  border-bottom: 1px solid var(--bord);\n}\n.panneau__titre { font-size: 15px; font-weight: 650; margin: 0; }\n.panneau__sous { margin: 3px 0 0; font-size: 12px; color: var(--texte-doux); }\n.panneau__corps { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }\n.panneau__pied {\n  display: flex; gap: 8px; align-items: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--bord);\n  background: var(--fond-clair);\n}\n.panneau__pied .espace { flex: 1; }\n\n/* --------------------------------------------------- CONNEXION ---------- */\n\n/* Le voile PREND les clics, lui : une boite de dialogue qui demande un mot de\n   passe ne doit pas laisser cliquer la page derriere elle. C'est l'exception\n   a la regle du calque, et elle est volontaire. */\n.voile {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  background: rgba(8, 10, 14, 0.62);\n  backdrop-filter: blur(2px);\n}\n\n.fenetre {\n  width: min(420px, 100%);\n  max-height: 90vh;\n  overflow-y: auto;\n  border: 1px solid var(--bord);\n  border-radius: 12px;\n  background: var(--fond);\n  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);\n}\n\n/* ------------------------------------------------------------ CHAMPS ---- */\n\n.champ { margin-bottom: 16px; }\n.champ__etiquette {\n  display: block; margin-bottom: 5px;\n  font-size: 12px; font-weight: 600; color: var(--texte);\n}\n.champ__aide { margin: 4px 0 0; font-size: 11.5px; color: var(--texte-doux); }\n.champ__langue {\n  display: inline-block; margin: 0 0 4px;\n  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--texte-doux);\n}\n\ninput[type=\"text\"], input[type=\"url\"], input[type=\"number\"], input[type=\"date\"],\nselect, textarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--bord);\n  border-radius: 6px;\n  background: var(--fond-clair);\n  color: var(--texte);\n  font: inherit;\n  font-size: 13px;\n}\ntextarea { min-height: 92px; resize: vertical; line-height: 1.5; }\ninput:focus, select:focus, textarea:focus {\n  outline: none; border-color: var(--accent);\n  box-shadow: 0 0 0 3px rgba(59, 165, 141, 0.18);\n}\n\n.bascule { display: flex; align-items: center; gap: 8px; }\n.bascule input { width: 16px; height: 16px; accent-color: var(--accent); }\n\n.vignette {\n  margin-top: 8px; max-height: 110px; border-radius: 6px;\n  border: 1px solid var(--bord); display: block;\n}\n\n/* --------------------------------------------------------- LISTES ------- */\n\n.liste__item {\n  border: 1px solid var(--bord); border-radius: 8px;\n  padding: 12px; margin-bottom: 10px; background: var(--fond-clair);\n}\n.liste__tete {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.liste__rang { font-size: 11px; font-weight: 700; color: var(--texte-doux); }\n\n/* --------------------------------------------------------- BOUTONS ------ */\n\n.bouton {\n  display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n  padding: 8px 14px; border-radius: 7px; border: 1px solid transparent;\n  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;\n  background: var(--fond-clair); color: var(--texte); border-color: var(--bord);\n}\n.bouton:hover { background: #2a2e37; }\n.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.bouton--principal { background: var(--accent); border-color: var(--accent); color: #06120e; }\n.bouton--principal:hover { background: #45bda2; }\n.bouton--discret { background: transparent; border-color: transparent; color: var(--texte-doux); }\n.bouton--discret:hover { background: var(--fond-clair); color: var(--texte); }\n.bouton[disabled] { opacity: 0.5; cursor: default; }\n.bouton--icone { padding: 6px 9px; }\n\n.message {\n  margin: 0 0 12px; padding: 9px 11px; border-radius: 7px;\n  font-size: 12.5px; border: 1px solid;\n}\n.message--erreur { background: rgba(217, 119, 106, 0.12); border-color: rgba(217, 119, 106, 0.4); color: #f0b3a9; }\n.message--ok { background: rgba(59, 165, 141, 0.12); border-color: rgba(59, 165, 141, 0.4); color: #8fd9c6; }\n.message--info { background: var(--fond-clair); border-color: var(--bord); color: var(--texte-doux); }\n\n@media (prefers-reduced-motion: reduce) {\n  * { transition: none !important; animation: none !important; }\n}\n";
+export declare const CSS_EN_PLACE = "\n/* --------------------------------------------------------- CHOIX -------- */\n\n/* Quand un meme texte vient de plusieurs cles, on demande laquelle plutot que\n   de deviner \u2014 et de modifier la mauvaise sans que personne le voie. */\n.choix {\n  position: fixed;\n  width: 260px;\n  padding: 12px;\n  border: 1px solid var(--bord);\n  border-radius: 10px;\n  background: var(--fond);\n  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);\n}\n.choix__titre { margin: 0 0 2px; font-size: 12.5px; font-weight: 650; }\n.choix__aide { margin: 0 0 10px; font-size: 11.5px; color: var(--texte-doux); }\n.choix__option {\n  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;\n  width: 100%; margin-bottom: 6px; padding: 7px 9px;\n  border: 1px solid var(--bord); border-radius: 7px;\n  background: var(--fond-clair); color: var(--texte);\n  font: inherit; text-align: left; cursor: pointer;\n}\n.choix__option:hover { background: #2a2e37; border-color: var(--accent); }\n.choix__chemin { font-size: 12px; font-weight: 600; }\n.choix__ns { font-size: 10.5px; color: var(--texte-doux); }\n\n/* ------------------------------------------------------- RANGEES -------- */\n\n.rangee {\n  display: flex; align-items: center; justify-content: space-between; gap: 10px;\n  width: 100%; margin-bottom: 6px; padding: 10px 12px;\n  border: 1px solid var(--bord); border-radius: 8px;\n  background: var(--fond-clair); color: var(--texte);\n  font: inherit; text-align: left; cursor: pointer;\n}\n.rangee:hover { background: #2a2e37; border-color: var(--accent); }\n.rangee__nom { font-size: 13px; font-weight: 600; }\n.rangee__info { font-size: 11.5px; color: var(--texte-doux); white-space: nowrap; }\n\n/* ------------------------------------------------------ FLOTTANT -------- */\n\n/* Un message au-dessus de la barre, pour confirmer sans ouvrir de panneau. */\n.flottant {\n  position: fixed;\n  left: 50%; bottom: 76px;\n  transform: translateX(-50%);\n  max-width: min(460px, calc(100vw - 24px));\n}\n.flottant .message { margin: 0; box-shadow: 0 8px 26px rgba(0,0,0,.4); }\n";