@lystech/sections 0.6.0 → 0.9.0

package/README.md

@@ -59,7 +59,7 @@ une version anglaise oubliée vaut mieux affichée en français qu'absente.
 
 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 — 24 Ko compressés qu'aucun visiteur ne télécharge jamais, parce que le
+d'édition — ~27 Ko compressés 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
@@ -147,6 +147,193 @@ qui se rendent hors de l'arbre :
 `<SignatureLystech mention={null} />` ne garde que le bouton « Connexion » —
 pour un pied de page qui porte déjà sa propre mention de Lystech.
 
+## La boutique dans l'éditeur (0.7)
+
+Une personne qui **administre** la boutique gère, depuis son propre site,
+ses produits, leurs photos et ses collections — au bureau comme au
+téléphone. Maquette : `docs/maquette-editeur.html`.
+
+### Ce que voit la cliente
+
+- un bouton **Boutique** dans la barre d'édition : la liste de ses produits
+  (recherche, filtres En vente / Masqués / Épuisés / Sans collection) et ses
+  collections ;
+- un **crayon** sur chaque carte produit de la page, qui ouvre sa fiche ;
+- une tuile **+ Ajouter** juste après la dernière carte de la grille ;
+- la **fiche** : photos (glisser-déposer, ou « Prendre une photo » qui ouvre
+  la caméra du téléphone), nom, prix, prix avant rabais, stock en trois mots
+  (pièce unique / quantité / sans limite), visible ou masqué, collections,
+  description. Panneau latéral au bureau, feuille glissante au téléphone ;
+- un bouton **Mobile** : la page courante dans un cadre de 390 px, brouillons
+  de textes compris.
+
+**Deux rythmes, dits à l'écran.** Les textes passent par brouillon puis
+« Publier ». Le catalogue, lui, est en ligne dès « Enregistrer » ; un bijou
+pas prêt reste « Masqué ».
+
+**Rien ne disparaît d'un clic.** Masquer est réversible. « Supprimer pour
+toujours » n'existe que sur un produit déjà masqué, après une confirmation
+explicite, et le serveur refuse un produit déjà vendu. Retirer une photo la
+détache : elle reste dans la librairie d'images.
+
+### Ce que le site doit faire : deux lignes
+
+**1. Marquer ses cartes produit** — sans ce marquage, pas de crayon ni de
+tuile (le module reste accessible par la barre) :
+
+```tsx
+import { marqueProduit } from "@lystech/sections";
+
+<div className="carte" {...marqueProduit(produit.UID)}>…</div>
+```
+
+L'attribut posé est `data-lystech-produit="<UID>"`, inerte hors édition.
+Crayons et tuile vivent dans le Shadow DOM de l'éditeur, posés par-dessus :
+rien n'est inséré dans l'arbre React du site. La tuile se place d'après les
+rectangles réels des cartes (grille CSS, flexbox, 2 ou 4 colonnes).
+
+**2. Relire ses produits quand l'éditeur en change un.** Après chaque
+enregistrement, l'éditeur émet `lystech:catalogue-modifie` sur `window`
+(détail : `{ quoi, UID, action }`). Avec React Query :
+
+```tsx
+import { useCatalogueModifie } from "@lystech/sections";
+
+const qc = useQueryClient();
+useCatalogueModifie(() => qc.invalidateQueries());
+```
+
+L'aperçu mobile relaie l'événement dans son cadre : le site s'y met à jour
+de la même façon.
+
+Un site peut aussi ouvrir le module lui-même — `useSectionsContext()
+?.ouvrirBoutique(UID | "nouveau")` rend faux si la personne n'y a pas droit.
+
+### Qui y a droit
+
+Routes `/site-sections/boutique/*` du serveur. Le jeton d'édition reste
+plafonné à l'éditeur partout ailleurs ; ici, le serveur relit à chaque
+requête le **rôle réel** de la personne et exige **administrateur** (un
+éditeur reçoit 403 : il garde l'édition des textes, le bouton Boutique ne
+s'affiche pas). Organisation = celle du jeton, jamais un en-tête. Aucune
+route de commandes, clients ou paiements.
+
+Le module (≈12 Ko compressés) et l'aperçu mobile sont deux fichiers à part,
+chargés au premier clic.
+
+### L'aperçu mobile
+
+Un cadre nommé `lystech-apercu` charge la même page ; le fournisseur qui s'y
+trouve le reconnaît, ne monte pas l'éditeur et reçoit les brouillons par
+`postMessage` (même origine seulement). `useSectionsContext()?.modeApercu`
+permet à un site de couper ce qui n'a pas de sens dans un aperçu.
+
+## La grille, les collections, les brouillons (0.9)
+
+### Une carte « + » dans la grille
+
+En mode édition, pour une personne qui administre la boutique, une carte
+**« + Ajouter un bijou »** apparaît **au bout de la grille de produits**, à la
+taille exacte d'une carte. Rien à poser côté site : l'éditeur trouve la grille
+à partir des cartes marquées par `marqueProduit`. Un visiteur, ou un éditeur
+de textes sans droit sur le catalogue, n'a jamais cette carte dans sa page.
+
+Au clic : **« Ajouter un bijou existant »** (recherche, vignettes, plusieurs à
+la fois, ceux déjà présents marqués) ou **« Créer un nouveau bijou »**, rangé
+d'office dans la collection affichée. Hors d'une collection : la création
+seule.
+
+### Marquer la collection affichée : `marqueCollection`
+
+```tsx
+import { marqueCollection } from "@lystech/sections";
+
+<div className="collection" {...marqueCollection(c.UID, c.UID === choisie?.UID)}>…</div>
+```
+
+Le deuxième argument dit « c'est elle que la grille montre ». L'éditeur y pose
+un **crayon** (nom, description, qui peut commander, ses bijoux) et un **« + »**
+(y ajouter des bijoux), et la carte « + » de la grille la garnit. La barre de
+l'éditeur gagne une entrée **Collections**.
+
+### Des brouillons, publiés quand on veut
+
+Un **nouveau** bijou est rangé **en brouillon** — jamais visible, jamais
+vendable, gardé sur le serveur (il survit au navigateur fermé et suit
+l'artisane d'un appareil à l'autre). « Enregistrer et suivant » vide la fiche
+pour le bijou d'après sans fermer le panneau ; les photos partent en
+arrière-plan. Une nouvelle collection naît aussi en brouillon : on la nomme, on
+la garnit (bijoux existants et nouveaux), sans qu'elle apparaisse.
+
+**Publier (N)**, dans la barre, liste les brouillons (et les textes modifiés) :
+on décoche ce qui n'est pas prêt ; ce qui ne peut pas partir (nom de moins de 3
+lettres, pas de prix, pas de photo) le dit sur sa ligne. Chaque élément est
+publié pour lui-même : un échec n'annule pas les autres, un double clic ne crée
+pas de doublon. Pour une collection, on choisit à ce moment-là comment
+l'ouvrir. Corriger un bijou **déjà en ligne** reste, lui, immédiat.
+
+### Le crayon flottant : `BoutonEdition` et `connexionPropre`
+
+Un site qui a **sa propre connexion** (une boutique @lystech/core) n'a pas
+besoin de la fenêtre « Connexion » du pied de page :
+
+```tsx
+<SectionsProvider site="bijouxunyk" page={page} connexionPropre session={{ cle, entetes }}>
+  …
+  <BoutonEdition connecte={isLoggedIn} />
+</SectionsProvider>
+```
+
+`connexionPropre` retire « Connexion » de `SignatureLystech` (défaut : non,
+rien ne change pour les autres sites). `BoutonEdition` ne rend **rien** tant
+que personne n'est connecté — ni code téléchargé, ni requête. Connecté, une
+question au serveur (« puis-je éditer CE site ? ») ; si oui, un crayon rond de
+56 px en bas de l'écran (`coin="gauche"` par défaut, à l'opposé du panier). Au
+clic, le serveur délivre un jeton d'édition **à la session déjà ouverte**, pour
+l'organisation de ce site seulement, et l'éditeur se monte sur la page, sans
+recharger. En mode édition, le crayon disparaît.
+
+## Sections par audience (0.8)
+
+Une section peut viser une **audience** : tout le monde, clients connectés,
+non-membres, membres (n'importe quel plan actif) ou des plans précis. Le choix
+se fait dans l'éditeur (« Visible pour », en tête du panneau d'un bloc) et
+s'applique tout de suite.
+
+**Le filtrage est fait par le serveur, jamais par la page :**
+
+- la route publique (`/site-sections/public/...`) — donc aussi le HTML
+  prérendu, fabriqué en la lisant — ne contient QUE les sections « tout le
+  monde » ;
+- le fournisseur lit d'abord `/site-sections/membre/...`, où le serveur
+  reconnaît le visiteur (session, adhésion) et ne livre que ce à quoi il a
+  droit. Une section non permise arrive en coquille vide (`hidden`) : le site
+  sait qu'elle existe et n'affiche PAS son repli à la place.
+
+```tsx
+const { contenu, visible } = useSection("offre-membres", { defaut });
+if (!visible) return null;
+```
+
+**Règle :** un contenu réservé ne va jamais dans le `defaut` du code — le code
+d'un site est public. Il s'écrit dans l'éditeur.
+
+Session : par défaut le cookie de l'API est envoyé (`credentials: "include"`).
+Un site branché sur `@lystech/core` passe la sienne :
+
+```tsx
+<SectionsProvider site="unyk" page="accueil" session={useSectionsSession()}>
+```
+
+Pour un bloc codé en dur (un bouton, un mot d'accueil), `<Audience>` décide de
+l'**affichage** d'après le visiteur reconnu par le serveur — jamais pour un
+contenu sensible :
+
+```tsx
+<Audience show="nonMembers"><BoutonDevenirMembre /></Audience>
+<Audience show="plans" plans={[uidPlanOr]} fallback={<Teaser />}>…</Audience>
+```
+
 ## Sites prérendus
 
 Un site généré au build affiche les replis du code dans son HTML, puis bascule

package/dist/Audience.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Visiteur } from './types';
+export type AudienceProps = {
+    show: "everyone" | "loggedIn" | "members" | "nonMembers" | "plans";
+    /** UID des plans, pour `show="plans"`. */
+    plans?: string[] | undefined;
+    /** Ce qu'on rend à la place (défaut : rien). */
+    fallback?: ReactNode;
+    children: ReactNode;
+};
+/** Le visiteur tel que le serveur l'a reconnu, ou `null` tant qu'on ne sait pas. */
+export declare function useVisiteur(): Visiteur | null;
+export declare function visiteurCorrespond(v: Visiteur | null, show: AudienceProps["show"], plans?: string[]): boolean;
+export declare function Audience({ show, plans, fallback, children }: AudienceProps): import("react").JSX.Element;

package/dist/BoutonEdition.d.ts

@@ -0,0 +1,13 @@
+export type BoutonEditionProps = {
+    /** La personne est connectée par la connexion du site (ex. `useAuth().isLoggedIn`). */
+    connecte: boolean;
+    /**
+     * Si le site le sait déjà (rôles chargés), on n'interroge pas le serveur.
+     * Indicatif seulement : c'est le serveur qui délivre (ou non) le jeton.
+     */
+    peutEditer?: boolean | undefined;
+    /** Le coin du bas où se poser — l'opposé du panier ou du bouton d'aide. */
+    coin?: "gauche" | "droite" | undefined;
+    libelle?: string | undefined;
+};
+export declare function BoutonEdition(props: BoutonEditionProps): import("react").JSX.Element | null;

package/dist/BoutonEditionCorps.d.ts

@@ -0,0 +1,12 @@
+export default function BoutonEditionCorps({ connecte, peutEditer, coin, libelle, }: {
+    /** La personne est connectée par la connexion du site (ex. `useAuth().isLoggedIn`). */
+    connecte: boolean;
+    /**
+     * Si le site le sait déjà (rôles chargés), on n'interroge pas le serveur.
+     * Indicatif seulement : c'est le serveur qui délivre (ou non) le jeton.
+     */
+    peutEditer?: boolean | undefined;
+    /** Le coin du bas où se poser — l'opposé du panier ou du bouton d'aide. */
+    coin?: "gauche" | "droite" | undefined;
+    libelle?: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/SectionsProvider.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { SourceTexte } from './sourceTexte';
-import { SectionPubliee } from './types';
+import { SectionPubliee, Visiteur } from './types';
 type Etat = "chargement" | "pret" | "erreur";
 type Contexte = {
     /** Sous-domaine de l'organisation dans Lystech. */
@@ -54,8 +54,57 @@ type Contexte = {
      * Hors mode édition, l'appel échoue sans rien envoyer.
      */
     appelEdition: (chemin: string, init?: RequestInit) => Promise<Response>;
+    /**
+     * OUVRIR LE MODULE BOUTIQUE de l'éditeur, depuis un bouton du site : sur la
+     * fiche d'un produit (son UID), une fiche vierge (« nouveau »), ou la liste
+     * (sans argument). Rend faux hors édition, ou si la personne connectée
+     * n'administre pas la boutique — le site peut alors cacher son bouton.
+     */
+    ouvrirBoutique: (cible?: string | null) => boolean;
+    /**
+     * Vrai dans l'APERÇU MOBILE de l'éditeur (la page affichée dans un cadre de
+     * 390 px). L'éditeur n'y est pas monté ; un site peut s'en servir pour
+     * couper ce qui n'a pas de sens dans un aperçu (une fenêtre surgissante).
+     */
+    modeApercu: boolean;
+    /**
+     * LE VISITEUR, tel que le serveur l'a reconnu (session + adhésion), ou
+     * `null` tant qu'on ne sait pas (premier rendu, serveur ancien, réseau
+     * coupé). Sert à `<Audience>` ; le contenu réservé, lui, est déjà filtré
+     * par le serveur.
+     */
+    visiteur: Visiteur | null;
+    /**
+     * ENTRER EN MODE ÉDITION avec un jeton obtenu par le site (le crayon
+     * flottant, `BoutonEdition`) : le jeton est rangé comme après une
+     * connexion, et l'éditeur se monte sur la page courante, SANS recharger.
+     */
+    entrerEnEdition: (jeton: string) => void;
+    /**
+     * Le site a SA PROPRE connexion (une boutique @lystech/core) : on n'y
+     * propose pas la fenêtre de connexion de l'éditeur (« Connexion » de
+     * `SignatureLystech`) — le crayon flottant prend le relais.
+     */
+    connexionPropre: boolean;
+    /**
+     * APPELER L'API AU NOM DU VISITEUR CONNECTÉ (sa session : cookie, et les
+     * en-têtes de `session`). Seuls les chemins de l'API sont acceptés.
+     */
+    appelSession: (chemin: string, init?: RequestInit) => Promise<Response>;
+};
+/**
+ * LA SESSION DU VISITEUR, pour que le serveur reconnaisse un membre.
+ *
+ * Par défaut, le cookie de session de l'API est envoyé (`credentials:
+ * "include"`). Un site qui s'authentifie autrement (en-tête posé par
+ * @lystech/core) passe ses en-têtes ici. `cle` change quand la personne se
+ * connecte ou se déconnecte : le contenu est alors relu.
+ */
+export type SessionSections = {
+    cle?: string | null | undefined;
+    entetes?: Record<string, string> | undefined;
 };
-export declare function SectionsProvider({ site, page, langue, apiBaseUrl, sectionsInitiales, sourceTexte, pagesPartagees, children, }: {
+export declare function SectionsProvider({ site, page, langue, apiBaseUrl, sectionsInitiales, sourceTexte, pagesPartagees, session, connexionPropre, children, }: {
     /** Sous-domaine de l'organisation (ex. « armoise »). */
     site: string;
     /** La page dont on veut les sections (ex. « accueil »). */
@@ -93,6 +142,17 @@ export declare function SectionsProvider({ site, page, langue, apiBaseUrl, secti
      * sur la page courante, jamais dans le commun par accident.
      */
     pagesPartagees?: string[] | undefined;
+    /**
+     * Qui regarde (voir `SessionSections`). Facultatif : sans elle, le cookie
+     * de session suffit quand le site et l'API le partagent.
+     */
+    session?: SessionSections | undefined;
+    /**
+     * Le site a sa propre connexion (défaut : non). Vrai : la fenêtre de
+     * connexion de l'éditeur n'est plus offerte dans le pied de page ; on entre
+     * en édition par le crayon flottant (`BoutonEdition`) une fois connecté.
+     */
+    connexionPropre?: boolean | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
 /**

package/dist/catalogue.d.ts

@@ -0,0 +1,30 @@
+export type MarqueProduit = {
+    "data-lystech-produit": string;
+};
+/** Les attributs à poser sur la carte d'un produit. */
+export declare function marqueProduit(UID: string): MarqueProduit;
+export type MarqueCollection = {
+    "data-lystech-collection": string;
+    "data-lystech-collection-affichee"?: "";
+};
+/**
+ * Les attributs à poser sur l'élément qui montre une collection (un onglet du
+ * bandeau, l'en-tête de sa page). `affichee` : vrai pour celle dont la grille
+ * de la page montre les bijoux — la carte « + » de la grille y ajoute.
+ *
+ *     <div className="collection" {...marqueCollection(c.UID, c.UID === choisie?.UID)}>
+ */
+export declare function marqueCollection(UID: string, affichee?: boolean): MarqueCollection;
+/** Ce que l'éditeur dit d'un changement — pour relire juste ce qu'il faut, si on veut. */
+export type ChangementCatalogue = {
+    quoi: "produit" | "photo" | "collection";
+    /** L'UID du produit ou de la collection touché. */
+    UID: string | null;
+    action: "cree" | "modifie" | "masque" | "visible" | "supprime" | "ajoute" | "retire";
+};
+/**
+ * Appelle `rappel` à chaque changement du catalogue fait par l'éditeur.
+ * La dernière version du rappel est toujours celle appelée : pas besoin de le
+ * mémoriser avec useCallback.
+ */
+export declare function useCatalogueModifie(rappel: (c: ChangementCatalogue) => void): void;

package/dist/constantes.d.ts

@@ -12,3 +12,41 @@
  * général qu'un nom de classe (`rootClassName`).
  */
 export declare const CLASSE_HORS_EDITION = "lystech-hors-edition";
+/**
+ * LE MARQUAGE D'UNE CARTE PRODUIT : `data-lystech-produit="<UID>"`.
+ *
+ * Posé par le site sur l'élément qui encadre UN produit (sa carte). En mode
+ * édition, l'éditeur y pose un crayon qui ouvre la fiche du produit, et
+ * ajoute une tuile « + Ajouter » au bout de la grille. Hors édition, c'est un
+ * attribut inerte. `marqueProduit(UID)` l'écrit pour vous.
+ */
+export declare const ATTR_PRODUIT = "data-lystech-produit";
+/**
+ * LE MARQUAGE D'UNE COLLECTION : `data-lystech-collection="<UID>"`, posé par
+ * le site sur l'élément qui la montre (l'onglet du bandeau, l'en-tête d'une
+ * page de collection). En mode édition, l'éditeur y pose un crayon (modifier
+ * la collection) et un « + » (y ajouter des bijoux). `marqueCollection(UID,
+ * affichee)` l'écrit pour vous.
+ */
+export declare const ATTR_COLLECTION = "data-lystech-collection";
+/**
+ * « CETTE COLLECTION EST CELLE QUI S'AFFICHE » : `data-lystech-collection-affichee`,
+ * posé avec la marque quand la grille de la page montre ses bijoux. C'est
+ * elle que la carte « + » de la grille garnit ; sans elle (une page qui n'est
+ * pas une collection), la carte ne propose que de créer un bijou.
+ */
+export declare const ATTR_COLLECTION_AFFICHEE = "data-lystech-collection-affichee";
+/**
+ * L'ÉVÉNEMENT QUI DIT « LE CATALOGUE A CHANGÉ » — émis sur `window` par
+ * l'éditeur après chaque enregistrement d'un produit, d'une photo ou d'une
+ * collection. Le site (ou @lystech/core) l'écoute pour relire ses produits :
+ * le catalogue s'écrit en direct, sans brouillon, et la page doit le montrer.
+ */
+export declare const EVENEMENT_CATALOGUE = "lystech:catalogue-modifie";
+/**
+ * LE NOM DE LA FENÊTRE D'APERÇU MOBILE. L'éditeur affiche la page dans un
+ * cadre de 390 px portant ce nom ; le fournisseur qui s'y charge le
+ * reconnaît et NE monte PAS l'éditeur dedans. Le nom d'un cadre survit à ses
+ * navigations — un paramètre d'adresse, non.
+ */
+export declare const FENETRE_APERCU = "lystech-apercu";

package/dist/editeur/ApercuMobile.d.ts

@@ -0,0 +1,7 @@
+export default function ApercuMobile({ brouillons, surFermer, }: {
+    brouillons: Array<{
+        blockType: string;
+        data: Record<string, unknown> | null;
+    }>;
+    surFermer: () => void;
+}): import("react").JSX.Element;

package/dist/editeur/ChoixAudience.d.ts

@@ -0,0 +1,6 @@
+import { Api, SectionEditeur } from './api';
+export declare function ChoixAudience({ api, section, apresChangement, }: {
+    api: Api;
+    section: SectionEditeur | null;
+    apresChangement: () => Promise<void> | void;
+}): import("react").JSX.Element;

package/dist/editeur/MarquesBoutique.d.ts

@@ -0,0 +1,26 @@
+export declare const ATTR_AJOUT = "data-lystech-ajout";
+/**
+ * LA GRILLE d'un ensemble de cartes : on remonte depuis chaque carte jusqu'au
+ * premier parent qui en contient une autre. Ce parent est la grille ; l'enfant
+ * par lequel on y est arrivé est la « case » de la carte (la carte elle-même,
+ * ou l'enveloppe que le site met autour). On garde la grille qui montre le
+ * plus de cartes : celle du catalogue, pas un « vous aimerez aussi ».
+ */
+export declare function trouverGrille(cartes: HTMLElement[]): {
+    grille: HTMLElement;
+    caseModele: HTMLElement;
+} | null;
+export type CibleCollection = {
+    UID: string;
+    nom: string;
+} | null;
+export declare const MarquesBoutique: import('react').NamedExoticComponent<{
+    /** Crayons sur les cartes et la collection (aucun panneau ouvert). */
+    crayons: boolean;
+    /** La carte « + » dans la grille (droit catalogue + mode « modifier »). */
+    carte: boolean;
+    ouvrirProduit: (UID: string) => void;
+    /** Le « + » : ajouter à la collection affichée (ou créer, sans collection). */
+    ouvrirAjout: (collection: CibleCollection) => void;
+    ouvrirCollection: (UID: string) => void;
+}>;

package/dist/editeur/api.d.ts

@@ -1,4 +1,4 @@
-import { BlocDeclare } from '../types';
+import { AudienceSection, BlocDeclare } from '../types';
 /** Une section telle que l'éditeur la voit — brouillon compris. */
 export type SectionEditeur = {
     UID: string;
@@ -9,6 +9,8 @@ export type SectionEditeur = {
     data: Record<string, unknown> | null;
     draft: Record<string, unknown> | null;
     publishedOn: string | null;
+    /** Qui peut la voir (null = tout le monde). */
+    audience?: AudienceSection | null;
 };
 export type Api = ReturnType<typeof creerApi>;
 export declare function creerApi({ jeton, site, apiBaseUrl, surJetonRefuse, }: {
@@ -25,6 +27,7 @@ export declare function creerApi({ jeton, site, apiBaseUrl, surJetonRefuse, }: {
      */
     surJetonRefuse: () => void;
 }): {
+    brut: (chemin: string, init?: RequestInit) => Promise<Response>;
     /** Les blocs que le site a déclaré savoir afficher. Route publique. */
     schemas: () => Promise<BlocDeclare[]>;
     /** Ce qui existe sur une page, brouillons compris. */
@@ -36,4 +39,16 @@ export declare function creerApi({ jeton, site, apiBaseUrl, surJetonRefuse, }: {
     publier: (UID: string) => Promise<any>;
     /** Ramène le brouillon à ce qui est en ligne. */
     annuler: (UID: string) => Promise<any>;
+    /** Qui peut voir la section. S'applique TOUT DE SUITE (pas de brouillon). */
+    audience: (UID: string, audience: AudienceSection) => Promise<{
+        success: boolean;
+        audience: AudienceSection;
+    }>;
+    /** Les plans d'abonnement de la boutique, pour « Visible pour : plans… ». */
+    optionsAudience: () => Promise<{
+        plans: Array<{
+            UID: string;
+            name: string | null;
+        }>;
+    }>;
 };

package/dist/editeur/boutique/Collections.d.ts

@@ -0,0 +1,8 @@
+import { ApiBoutique, Collection, CollectionBrouillon } from './api';
+export declare function Collections({ api, collections, brouillons, surOuvrir, surCree, }: {
+    api: ApiBoutique;
+    collections: Collection[];
+    brouillons: CollectionBrouillon[];
+    surOuvrir: (UID: string) => void;
+    surCree: (c: CollectionBrouillon) => void;
+}): import("react").JSX.Element;

package/dist/editeur/boutique/FicheCollection.d.ts

@@ -0,0 +1,23 @@
+import { ChangementCatalogue } from '../../catalogue';
+import { ApiBoutique, Collection, CollectionBrouillon, NiveauAcces, Produit, ProduitBrouillon } from './api';
+export declare const NIVEAUX: Array<{
+    acces: NiveauAcces;
+    titre: string;
+    aide: string;
+}>;
+export declare function FicheCollection({ api, collection, produits, brouillonsProduits, signaler, surRetour, majCollection, majProduits, majBrouillons, surAjouterExistants, surCreer, surOuvrirProduit, annonce, }: {
+    /** Un message à montrer en ouvrant la fiche (« 3 bijoux ajoutés »). */
+    annonce?: string | null;
+    api: ApiBoutique;
+    collection: Collection | CollectionBrouillon;
+    produits: Produit[] | null;
+    brouillonsProduits: ProduitBrouillon[];
+    signaler: (c: ChangementCatalogue) => void;
+    surRetour: () => void;
+    majCollection: (c: Collection | CollectionBrouillon) => void;
+    majProduits: () => void;
+    majBrouillons: () => void;
+    surAjouterExistants: () => void;
+    surCreer: () => void;
+    surOuvrirProduit: (UID: string) => void;
+}): import("react").JSX.Element;

package/dist/editeur/boutique/FicheProduit.d.ts

@@ -0,0 +1,23 @@
+import { ChangementCatalogue } from '../../catalogue';
+import { ApiBoutique, Produit, ProduitBrouillon } from './api';
+import { CollectionChoix } from './commun';
+export declare function FicheProduit({ api, produit, collections, collectionDefaut, surEnregistre, surSupprime, surRetour, surFermer, envoyerEnArrierePlan, photosEnCours, compteBrouillons, signaler, annonce, }: {
+    api: ApiBoutique;
+    /** null = nouveau bijou (en brouillon, en rafale). */
+    produit: Produit | ProduitBrouillon | null;
+    collections: CollectionChoix[];
+    /** La collection où ranger d'office les nouveaux bijoux (celle de la page). */
+    collectionDefaut?: string | null;
+    surEnregistre: (p: Produit | ProduitBrouillon) => void;
+    surSupprime: (UID: string) => void;
+    surRetour: () => void;
+    surFermer?: () => void;
+    /** Envoyer des photos à un brouillon sans bloquer la fiche (rafale). */
+    envoyerEnArrierePlan?: (UID: string, fichiers: File[]) => void;
+    /** Photos encore en route (toutes fiches confondues). */
+    photosEnCours?: number;
+    compteBrouillons?: number;
+    signaler: (c: ChangementCatalogue) => void;
+    /** Un message à afficher en ouvrant la fiche (« Bijou créé »). */
+    annonce?: string | null;
+}): import("react").JSX.Element;

package/dist/editeur/boutique/ListeVirtuelle.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, RefObject } from 'react';
+export declare function ListeVirtuelle<T>({ items, hauteur, conteneur, cle, rendu, surplus, etiquette, }: {
+    items: T[];
+    /** Hauteur d'une rangée, marge comprise, en px. */
+    hauteur: number;
+    /** L'élément qui défile (le corps du panneau). */
+    conteneur: RefObject<HTMLElement | null>;
+    cle: (item: T) => string;
+    rendu: (item: T, index: number) => ReactNode;
+    surplus?: number;
+    /** Nom de la liste pour les lecteurs d'écran. */
+    etiquette?: string;
+}): import("react").JSX.Element;

package/dist/editeur/boutique/ModuleBoutique.d.ts

@@ -0,0 +1,44 @@
+import { ChangementCatalogue } from '../../catalogue';
+import { ApiBoutique } from './api';
+export type CibleCollection = {
+    UID: string;
+    nom: string;
+} | null;
+/** Ce que l'éditeur demande d'ouvrir. `n` change à chaque demande, même identique. */
+export type DemandeBoutique = {
+    n: number;
+    vue: "liste";
+    onglet?: "bijoux" | "collections";
+} | {
+    n: number;
+    vue: "fiche";
+    UID: string;
+} | {
+    n: number;
+    vue: "nouveau";
+    collection: string | null;
+} | {
+    n: number;
+    vue: "ajout";
+    collection: CibleCollection;
+} | {
+    n: number;
+    vue: "collection";
+    UID: string;
+} | {
+    n: number;
+    vue: "publier";
+};
+declare function ModuleBoutique({ api, demande, surFermer, signaler, textes, publierTextes, surCompteBrouillons, }: {
+    api: ApiBoutique;
+    demande: DemandeBoutique;
+    surFermer: () => void;
+    signaler: (c: ChangementCatalogue) => void;
+    /** Textes du site en attente de publication (pour « Publier »). */
+    textes?: number;
+    publierTextes?: () => Promise<boolean>;
+    /** Le nombre de brouillons, pour la pastille de la barre de l'éditeur. */
+    surCompteBrouillons?: (n: number) => void;
+}): import("react").JSX.Element;
+declare const _default: import('react').MemoExoticComponent<typeof ModuleBoutique>;
+export default _default;

package/dist/editeur/boutique/Publier.d.ts

@@ -0,0 +1,15 @@
+import { ApiBoutique, Brouillons, ResultatPublication } from './api';
+export declare function Publier({ api, brouillons: frais, noms, textes, publierTextes, surPublie, surOuvrir, surRetour, }: {
+    api: ApiBoutique;
+    brouillons: Brouillons;
+    /** Noms des collections (en ligne et en brouillon), par UID. */
+    noms: Map<string, string>;
+    /** Textes du site modifiés, en attente (0 = aucun). */
+    textes: number;
+    publierTextes: () => Promise<boolean>;
+    /** Après publication : relire catalogue et brouillons. */
+    surPublie: (r: ResultatPublication[]) => void;
+    /** Ouvrir la fiche d'un brouillon à compléter. */
+    surOuvrir: (UID: string, type: "produit" | "collection") => void;
+    surRetour: () => void;
+}): import("react").JSX.Element;

package/dist/editeur/boutique/Selecteur.d.ts

@@ -0,0 +1,10 @@
+import { Produit } from './api';
+export declare function Selecteur({ produits, deja, nomCollection, occupe, surValider, surAnnuler, }: {
+    produits: Produit[] | null;
+    /** UIDs déjà dans la collection. */
+    deja: Set<string>;
+    nomCollection: string;
+    occupe: boolean;
+    surValider: (UIDs: string[]) => void;
+    surAnnuler: () => void;
+}): import("react").JSX.Element;