@lystech/sections 0.1.0 → 0.2.0

package/README.md

@@ -1,55 +1,109 @@
-# @lystech/sections
-
-Le contenu d'un site, modifiable par son propriétaire — sans reconstruction ni
-déploiement.
-
-## Pourquoi un paquet à part de `@lystech/core`
-
-`core` exige React 18 et embarque antd, Mantine et React Query : 2,4 Mo de
-JavaScript et 1,2 Mo de CSS. Une clinique qui veut changer trois textes n'a
-aucune raison de charger un magasin, un panier et PayPal — et beaucoup de sites
-clients sont en React 19.
-
-Ce paquet pèse **2,9 Ko** et ne dépend que de React. `core` le réexporte, pour
-qu'une boutique qui l'a déjà n'ait rien de plus à installer.
-
-## La plateforme fixe l'alphabet, pas les mots
-
-Le serveur ne connaît aucun type de bloc. « plat-du-jour », « praticien »,
-« tarifs » appartiennent au site, qui les déclare. Ce que la plateforme
-connaît, ce sont les types de champs — `text`, `richText`, `image`, `number`,
-`boolean`, `url`, `date`, `choice`, `list` — vrais dans tous les métiers, et
-suffisants pour fabriquer un formulaire pour un bloc jamais vu.
-
-## Usage
-
-```tsx
-import { SectionsProvider, useSection } from "@lystech/sections";
-
-<SectionsProvider site="armoise" page="massage" langue={i18n.language}>
-  <MaPage />
-</SectionsProvider>;
-
-// Dans un composant déjà écrit :
-const { contenu: tarifs } = useSection("tarifs-massotherapie", {
-  defaut: SITE.tarifs.massotherapie, // ce que le site affichait déjà
-});
-```
-
-### Le repli n'est pas une option
-
-`defaut` porte les valeurs actuelles du site. Tant que rien n'est publié — ou
-si l'API ne répond pas — ce sont elles qui s'affichent. Brancher un site
-existant ne peut donc rien casser : au pire il continue d'afficher ce qu'il
-affichait hier.
-
-### Publié ≠ brouillon
-
-Le site public ne lit QUE le contenu publié. Un brouillon enregistré ne change
-rien pour les visiteurs tant que personne n'a cliqué « Publier ».
-
-## Champs traduits
-
-Un champ déclaré `localized: true` stocke `{ fr: …, en: … }` ; le paquet rend
-la langue courante, avec repli sur une autre langue plutôt que sur du vide —
-une version anglaise oubliée vaut mieux affichée en français qu'absente.
+# @lystech/sections
+
+Le contenu d'un site, modifiable par son propriétaire — sans reconstruction ni
+déploiement.
+
+## Pourquoi un paquet à part de `@lystech/core`
+
+`core` exige React 18 et embarque antd, Mantine et React Query : 2,4 Mo de
+JavaScript et 1,2 Mo de CSS. Une clinique qui veut changer trois textes n'a
+aucune raison de charger un magasin, un panier et PayPal — et beaucoup de sites
+clients sont en React 19.
+
+Ce paquet pèse **4,7 Ko** en lecture (1,9 Ko compressé) et ne dépend que de
+React. `core` le réexporte, pour qu'une boutique qui l'a déjà n'ait rien de
+plus à installer.
+
+## La plateforme fixe l'alphabet, pas les mots
+
+Le serveur ne connaît aucun type de bloc. « plat-du-jour », « praticien »,
+« tarifs » appartiennent au site, qui les déclare. Ce que la plateforme
+connaît, ce sont les types de champs — `text`, `richText`, `image`, `number`,
+`boolean`, `url`, `date`, `choice`, `list` — vrais dans tous les métiers, et
+suffisants pour fabriquer un formulaire pour un bloc jamais vu.
+
+## Usage
+
+```tsx
+import { SectionsProvider, useSection } from "@lystech/sections";
+
+<SectionsProvider site="armoise" page="massage" langue={i18n.language}>
+  <MaPage />
+</SectionsProvider>;
+
+// Dans un composant déjà écrit :
+const { contenu: tarifs } = useSection("tarifs-massotherapie", {
+  defaut: SITE.tarifs.massotherapie, // ce que le site affichait déjà
+});
+```
+
+### Le repli n'est pas une option
+
+`defaut` porte les valeurs actuelles du site. Tant que rien n'est publié — ou
+si l'API ne répond pas — ce sont elles qui s'affichent. Brancher un site
+existant ne peut donc rien casser : au pire il continue d'afficher ce qu'il
+affichait hier.
+
+### Publié ≠ brouillon
+
+Le site public ne lit QUE le contenu publié. Un brouillon enregistré ne change
+rien pour les visiteurs tant que personne n'a cliqué « Publier ».
+
+## Champs traduits
+
+Un champ déclaré `localized: true` stocke `{ fr: …, en: … }` ; le paquet rend
+la langue courante, avec repli sur une autre langue plutôt que sur du vide —
+une version anglaise oubliée vaut mieux affichée en français qu'absente.
+
+## L'éditeur en place
+
+La personne qui édite ouvre SON site avec un jeton dans l'adresse. Le paquet le
+détecte, le retire aussitôt de la barre d'adresse, et charge l'interface
+d'édition — 22 Ko qu'aucun visiteur ne télécharge jamais, parce que le
+`import()` qui y mène n'est atteint que s'il y a un jeton.
+
+Elle voit alors son site, ses polices, sa mise en page, avec chaque bloc
+modifiable encadré. Ce qu'elle tape apparaît dedans à mesure qu'elle le tape.
+
+### Marquer les blocs dans la page
+
+L'éditeur doit savoir quel rectangle de la page correspond à quel bloc. Aucun
+moyen fiable de le deviner : le site le dit.
+
+```tsx
+const { contenu, ancrage } = useSection("tarifs", { defaut });
+return <section {...ancrage}>…</section>;
+```
+
+Hors édition, c'est un attribut `data-` inerte : aucun poids, aucun effet.
+
+### Trois états, jamais confondus
+
+| | Qui le voit |
+|---|---|
+| **Aperçu** | la personne qui édite, dans son navigateur |
+| **Brouillon** | elle seule, enregistré sur le serveur |
+| **Publié** | les visiteurs |
+
+### Le jeton
+
+Délivré par `POST /site-sections/edit-token` depuis la console Lystech. Il vaut
+quelques heures, pour UNE organisation, et il est **plafonné à l'éditeur** même
+si la personne est administratrice : un lien qui fuite ne peut pas ouvrir la
+console. Le droit est relu dans les rôles à chaque requête, donc retirer un
+accès ferme les jetons déjà émis sur-le-champ.
+
+## Sites prérendus
+
+Un site généré au build affiche les replis du code dans son HTML, puis bascule
+sur le contenu publié une fois le JavaScript chargé — l'ancien prix clignote
+vers le nouveau, et les moteurs de recherche n'indexent que l'ancien.
+
+Passez le contenu au premier rendu pour supprimer les deux problèmes :
+
+```tsx
+<SectionsProvider site="armoise" page="massage" sectionsInitiales={dejaLu}>
+```
+
+où `dejaLu` vient d'un appel, dans le script de prérendu, à
+`GET /site-sections/public/<site>/<page>`.

package/dist/SectionsProvider.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { SectionPubliee } from './types';
+type Etat = "chargement" | "pret" | "erreur";
+type Contexte = {
+    /** Sous-domaine de l'organisation dans Lystech. */
+    site: string;
+    /** La page courante — l'éditeur en a besoin pour créer une section. */
+    page: string;
+    /** Langue courante — décide quelle version d'un champ traduit est rendue. */
+    langue: string;
+    apiBaseUrl: string;
+    sections: SectionPubliee[];
+    etat: Etat;
+    recharger: () => void;
+    /**
+     * L'APERÇU : ce que l'éditeur est en train d'écrire, avant publication.
+     *
+     * Il prime sur le contenu publié, par type de bloc. C'est ce qui rend
+     * l'édition « en place » : la cliente voit ses mots dans SA mise en page,
+     * avec SES polices et SES couleurs, au lieu d'un formulaire posé à côté
+     * d'un aperçu qui ne lui ressemble jamais tout à fait.
+     */
+    apercu: Record<string, Record<string, unknown> | null>;
+    poserApercu: (blockType: string, data: Record<string, unknown> | null) => void;
+    /** Vrai quand un jeton d'édition est actif. Faux pour tout visiteur. */
+    modeEdition: boolean;
+};
+export declare function SectionsProvider({ site, page, langue, apiBaseUrl, sectionsInitiales, children, }: {
+    /** Sous-domaine de l'organisation (ex. « armoise »). */
+    site: string;
+    /** La page dont on veut les sections (ex. « accueil »). */
+    page: string;
+    langue?: string | undefined;
+    apiBaseUrl?: string | undefined;
+    /**
+     * LE CONTENU DÉJÀ CONNU AU PREMIER RENDU — pour un site prérendu.
+     *
+     * Sans lui, une page générée au build affiche les REPLIS du code, puis
+     * bascule sur le contenu publié une fois le JavaScript chargé. Le visiteur
+     * voit l'ancien prix clignoter vers le nouveau, et les moteurs de recherche
+     * n'indexent jamais que l'ancien. Un script de prérendu qui lit l'API et
+     * passe le résultat ici supprime les deux problèmes.
+     */
+    sectionsInitiales?: SectionPubliee[] | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Le contexte, ou `null` HORS d'un fournisseur.
+ *
+ * On ne lève pas : un composant branché sur les sections doit rester
+ * utilisable dans une page qui n'en a pas (une maquette, un test, une page
+ * d'erreur). Il affichera son repli, ce qui est exactement le bon
+ * comportement.
+ */
+export declare function useSectionsContext(): Contexte | null;
+export {};

package/dist/SignatureLystech.d.ts

@@ -0,0 +1,9 @@
+export declare function SignatureLystech({ site, apiBaseUrl, className, mention, connexion, }: {
+    /** Sous-domaine de l'organisation. Pris du fournisseur si omis. */
+    site?: string | undefined;
+    apiBaseUrl?: string | undefined;
+    className?: string | undefined;
+    /** Les mots de la mention, si le site en préfère d'autres. */
+    mention?: string | undefined;
+    connexion?: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/editeur/Editeur.d.ts

@@ -0,0 +1,6 @@
+import { Api } from './api';
+import { PontEdition } from './pont';
+export declare function Editeur({ api, pont }: {
+    api: Api;
+    pont: PontEdition;
+}): import("react").JSX.Element;

package/dist/editeur/api.d.ts

@@ -0,0 +1,39 @@
+import { BlocDeclare } from '../types';
+/** Une section telle que l'éditeur la voit — brouillon compris. */
+export type SectionEditeur = {
+    UID: string;
+    page: string;
+    blockType: string;
+    position: number;
+    enabled: boolean;
+    data: Record<string, unknown> | null;
+    draft: Record<string, unknown> | null;
+    publishedOn: string | null;
+};
+export type Api = ReturnType<typeof creerApi>;
+export declare function creerApi({ jeton, site, apiBaseUrl, surJetonRefuse, }: {
+    jeton: string;
+    site: string;
+    apiBaseUrl: string;
+    /**
+     * Appele quand le serveur refuse le jeton.
+     *
+     * UN JETON EXPIRE NE DOIT PAS LAISSER UNE BARRE D'EDITION A L'ECRAN. Sans
+     * ce rappel, la personne verrait « Mode edition », ouvrirait un panneau, y
+     * ecrirait, cliquerait « Publier » — et n'obtiendrait qu'une erreur, sans
+     * comprendre qu'il suffisait de se reconnecter.
+     */
+    surJetonRefuse: () => void;
+}): {
+    /** Les blocs que le site a déclaré savoir afficher. Route publique. */
+    schemas: () => Promise<BlocDeclare[]>;
+    /** Ce qui existe sur une page, brouillons compris. */
+    pourPage: (page: string) => Promise<SectionEditeur[]>;
+    creer: (page: string, blockType: string, draft: Record<string, unknown>) => Promise<{
+        UID: string;
+    }>;
+    enregistrerBrouillon: (UID: string, draft: Record<string, unknown>) => Promise<any>;
+    publier: (UID: string) => Promise<any>;
+    /** Ramène le brouillon à ce qui est en ligne. */
+    annuler: (UID: string) => Promise<any>;
+};

package/dist/editeur/champs.d.ts

@@ -0,0 +1,9 @@
+import { ChampDeclare } from '../types';
+type Props = {
+    champ: ChampDeclare;
+    valeur: unknown;
+    changer: (v: unknown) => void;
+    langue: string;
+};
+export declare function Champ({ champ, valeur, changer, langue }: Props): import("react").JSX.Element;
+export {};

package/dist/editeur/index.d.ts

@@ -0,0 +1,8 @@
+import { PontEdition } from './pont';
+export type { PontEdition } from './pont';
+export declare function monterEditeur({ jeton, site, apiBaseUrl, pont, }: {
+    jeton: string;
+    site: string;
+    apiBaseUrl: string;
+    pont: PontEdition;
+}): () => void;

package/dist/editeur/pont.d.ts

@@ -0,0 +1,19 @@
+export type PontEdition = {
+    /** Sous-domaine de l'organisation — affiché, jamais envoyé. */
+    site: string;
+    /** La page courante. Mise à jour par le fournisseur. */
+    page: string;
+    /** La langue affichée par le site en ce moment. */
+    langue: string;
+    /** Afficher un contenu non publié dans la page, ou `null` pour l'enlever. */
+    poserApercu: (blockType: string, data: Record<string, unknown> | null) => void;
+    /** Relire le contenu publié depuis le serveur. */
+    recharger: () => void;
+    /**
+     * Posé par l'ÉDITEUR, appelé par le FOURNISSEUR quand la page change.
+     *
+     * Sans cet avis, un site à page unique qui change d'adresse sans rien
+     * recharger laisserait l'éditeur sur les sections de la page précédente.
+     */
+    surChangementDePage?: (page: string) => void;
+};

package/dist/editeur/styles.d.ts

@@ -0,0 +1 @@
+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";