@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/DocumentViewer/documentViewerPdfCalculs.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Ce que pdfjs rejette quand une page ou un document se voit remplace en cours de rendu :
+ * un changement rapide de page ou de source annule le rendu precedent, et cette annulation
+ * n'est pas une erreur a montrer. Le rejet n'est pas toujours une instance d'`Error`.
+ */
+export declare const estUneErreurDAnnulationPdf: (erreur: unknown) => boolean;
+export type DimensionsDePage = {
+    pageWidth: number;
+    pageHeight: number;
+    viewerWidth: number;
+    viewerHeight: number;
+    /** Le zoom demande par l'appelant, applique par-dessus l'ajustement au cadre. */
+    zoom?: number;
+};
+/**
+ * L'echelle qui fait tenir une page dans son cadre. Les deux dimensions contraignent
+ * l'echelle independamment ; la plus stricte des deux decide, sans quoi la page deborderait
+ * du cote que l'autre laisse passer.
+ */
+export declare const echelleAjustee: ({ pageWidth, pageHeight, viewerWidth, viewerHeight, zoom }: DimensionsDePage) => number;
+export type PositionDePointeur = {
+    clientX: number;
+    clientY: number;
+    rect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+};
+/**
+ * La position du pointeur dans son cadre, en pourcentage. Bornee au cadre : pendant un
+ * glisser, le pointeur peut en sortir, et l'origine d'un zoom n'a pas de sens hors de la
+ * surface qu'elle decrit.
+ */
+export declare const positionEnPourcentage: ({ clientX, clientY, rect }: PositionDePointeur) => {
+    x: number;
+    y: number;
+};
+/**
+ * Une taille mesuree, ou `null` quand elle n'est pas encore exploitable : au premier rendu,
+ * avant que la mise en page ou le `ResizeObserver` n'ait rapporte quoi que ce soit, les
+ * dimensions sont nulles ou absentes.
+ */
+export declare const tailleValidee: ({ width, height }: {
+    width: number | undefined;
+    height: number | undefined;
+}) => {
+    width: number;
+    height: number;
+} | null;
+//# sourceMappingURL=documentViewerPdfCalculs.d.ts.map

package/dist/ui/DocumentViewer/documentViewerPdfCalculs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentViewerPdfCalculs.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/documentViewerPdfCalculs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,OAAO,KAAG,OAQ5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,4DAAgE,gBAAgB,WAC1C,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACpE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,4BAA4B,kBAAkB;;;CAKnF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,mBAAmB;IAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE;;;QACK,CAAC"}

package/dist/ui/DocumentViewer/documentViewerPdfCalculs.js

@@ -0,0 +1,34 @@
+/**
+ * Ce que pdfjs rejette quand une page ou un document se voit remplace en cours de rendu :
+ * un changement rapide de page ou de source annule le rendu precedent, et cette annulation
+ * n'est pas une erreur a montrer. Le rejet n'est pas toujours une instance d'`Error`.
+ */
+export const estUneErreurDAnnulationPdf = (erreur) => {
+    if (!(erreur instanceof Error))
+        return false;
+    return (['RenderingCancelledException', 'AbortException'].includes(erreur.name) ||
+        erreur.message.includes('Worker was terminated') ||
+        erreur.message.includes("Cannot read properties of null (reading 'sendWithPromise')"));
+};
+/**
+ * L'echelle qui fait tenir une page dans son cadre. Les deux dimensions contraignent
+ * l'echelle independamment ; la plus stricte des deux decide, sans quoi la page deborderait
+ * du cote que l'autre laisse passer.
+ */
+export const echelleAjustee = ({ pageWidth, pageHeight, viewerWidth, viewerHeight, zoom = 1 }) => Math.min(viewerWidth / pageWidth, viewerHeight / pageHeight) * zoom;
+/**
+ * La position du pointeur dans son cadre, en pourcentage. Bornee au cadre : pendant un
+ * glisser, le pointeur peut en sortir, et l'origine d'un zoom n'a pas de sens hors de la
+ * surface qu'elle decrit.
+ */
+export const positionEnPourcentage = ({ clientX, clientY, rect }) => {
+    const x = ((clientX - rect.left) / rect.width) * 100;
+    const y = ((clientY - rect.top) / rect.height) * 100;
+    return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) };
+};
+/**
+ * Une taille mesuree, ou `null` quand elle n'est pas encore exploitable : au premier rendu,
+ * avant que la mise en page ou le `ResizeObserver` n'ait rapporte quoi que ce soit, les
+ * dimensions sont nulles ou absentes.
+ */
+export const tailleValidee = ({ width, height }) => typeof width === 'number' && width > 0 && typeof height === 'number' && height > 0 ? { width, height } : null;

package/dist/ui/DocumentViewer/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DocumentViewer';
+export * from './DocumentViewer.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/DocumentViewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}

package/dist/ui/DocumentViewer/index.js

@@ -1 +1,2 @@
 export * from './DocumentViewer';
+export * from './DocumentViewer.types';

package/dist/ui/DocumentViewer/pointeurWeb.d.ts

@@ -0,0 +1,12 @@
+import type { PointerEvent } from 'react-native';
+/**
+ * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN. Sur le web,
+ * react-native-web transmet l'evenement du DOM : `nativeEvent` porte les coordonnees et
+ * `currentTarget` est l'element survole. Hors du DOM, il n'y a pas de cadre a mesurer.
+ */
+export declare const lirePointeurWeb: (event: PointerEvent) => {
+    clientX: number;
+    clientY: number;
+    rect: DOMRect;
+} | undefined;
+//# sourceMappingURL=pointeurWeb.d.ts.map

package/dist/ui/DocumentViewer/pointeurWeb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointeurWeb.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/pointeurWeb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,YAAY;;;;aAMlD,CAAC"}

package/dist/ui/DocumentViewer/pointeurWeb.js

@@ -0,0 +1,12 @@
+/**
+ * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN. Sur le web,
+ * react-native-web transmet l'evenement du DOM : `nativeEvent` porte les coordonnees et
+ * `currentTarget` est l'element survole. Hors du DOM, il n'y a pas de cadre a mesurer.
+ */
+export const lirePointeurWeb = (event) => {
+    const cible = event.currentTarget;
+    if (typeof Element === 'undefined' || !(cible instanceof Element))
+        return undefined;
+    const { clientX, clientY } = event.nativeEvent;
+    return { clientX, clientY, rect: cible.getBoundingClientRect() };
+};

package/dist/ui/DocumentViewer/useDocumentPdfCharge.d.ts

@@ -0,0 +1,15 @@
+import { PDFDocumentProxyLike } from './chargementDePdfJs';
+/**
+ * Le document PDF charge depuis sa source. La page precedente est detruite des qu'une
+ * nouvelle se substitue a elle avec succes : le document est lourd, et le garder en memoire
+ * une fois remplace fuirait a chaque navigation.
+ *
+ * `hasError` se remet a zero des le changement de source, avant meme que le chargement ne
+ * commence : sans cela, l'erreur de la source precedente resterait affichee un instant sur
+ * la nouvelle.
+ */
+export declare const useDocumentPdfCharge: (source: string, onLoaded?: (document: PDFDocumentProxyLike) => void) => {
+    pdf: PDFDocumentProxyLike | null;
+    hasError: boolean;
+};
+//# sourceMappingURL=useDocumentPdfCharge.d.ts.map

package/dist/ui/DocumentViewer/useDocumentPdfCharge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentPdfCharge.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useDocumentPdfCharge.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAItE;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,oBAAoB,KAAK,IAAI;;;CAgDvG,CAAC"}

package/dist/ui/DocumentViewer/useDocumentPdfCharge.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { loadPdfJs } from './chargementDePdfJs';
+import { estUneErreurDAnnulationPdf } from './documentViewerPdfCalculs';
+import { useEtatReinitialiseParCle } from './useEtatReinitialiseParCle';
+/**
+ * Le document PDF charge depuis sa source. La page precedente est detruite des qu'une
+ * nouvelle se substitue a elle avec succes : le document est lourd, et le garder en memoire
+ * une fois remplace fuirait a chaque navigation.
+ *
+ * `hasError` se remet a zero des le changement de source, avant meme que le chargement ne
+ * commence : sans cela, l'erreur de la source precedente resterait affichee un instant sur
+ * la nouvelle.
+ */
+export const useDocumentPdfCharge = (source, onLoaded) => {
+    const [pdf, setPdf] = React.useState(null);
+    const [hasError, setHasError] = useEtatReinitialiseParCle(source);
+    const onLoadedRef = React.useRef(onLoaded);
+    React.useEffect(() => {
+        onLoadedRef.current = onLoaded;
+    }, [onLoaded]);
+    React.useEffect(() => {
+        let active = true;
+        let tache = null;
+        loadPdfJs()
+            .then(pdfjs => {
+            if (!active)
+                return;
+            tache = pdfjs.getDocument({ url: source });
+            return tache.promise
+                .then(documentPdf => {
+                if (!active)
+                    return void documentPdf.destroy?.();
+                setPdf(precedent => {
+                    void precedent?.destroy?.();
+                    return documentPdf;
+                });
+                onLoadedRef.current?.(documentPdf);
+            })
+                .catch(erreur => {
+                if (!active || estUneErreurDAnnulationPdf(erreur))
+                    return;
+                setPdf(null);
+                setHasError(true);
+            });
+        })
+            .catch(erreur => {
+            if (!active || estUneErreurDAnnulationPdf(erreur))
+                return;
+            setHasError(true);
+        });
+        return () => {
+            active = false;
+            tache?.destroy();
+        };
+    }, [source, setHasError]);
+    React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
+    return { pdf, hasError };
+};

package/dist/ui/DocumentViewer/useEtatReinitialiseParCle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Un booleen qui se remet a `false` des qu'une cle change, avant meme le prochain effet :
+ * l'erreur d'une source ne doit jamais rester affichee un instant sur la suivante. La mise a
+ * jour se fait au rendu plutot que dans un effet, pour eviter cet instant.
+ */
+export declare const useEtatReinitialiseParCle: <Cle>(cle: Cle) => readonly [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+//# sourceMappingURL=useEtatReinitialiseParCle.d.ts.map

package/dist/ui/DocumentViewer/useEtatReinitialiseParCle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEtatReinitialiseParCle.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useEtatReinitialiseParCle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GAAI,GAAG,EAAE,KAAK,GAAG,sEAUtD,CAAC"}

package/dist/ui/DocumentViewer/useEtatReinitialiseParCle.js

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * Un booleen qui se remet a `false` des qu'une cle change, avant meme le prochain effet :
+ * l'erreur d'une source ne doit jamais rester affichee un instant sur la suivante. La mise a
+ * jour se fait au rendu plutot que dans un effet, pour eviter cet instant.
+ */
+export const useEtatReinitialiseParCle = (cle) => {
+    const [actif, setActif] = React.useState(false);
+    const [clePrecedente, setClePrecedente] = React.useState(cle);
+    if (clePrecedente !== cle) {
+        setClePrecedente(cle);
+        setActif(false);
+    }
+    return [actif, setActif];
+};

package/dist/ui/DocumentViewer/usePilotageDeDocument.d.ts

@@ -0,0 +1,21 @@
+import type { DocumentViewerRotation } from './DocumentViewer.types';
+import type { DocumentViewerToolbarState } from './DocumentViewerToolbar';
+export declare const rotationSuivante: (rotation: DocumentViewerRotation, direction: "right" | "left") => DocumentViewerRotation;
+/**
+ * Ce que la barre d'outils pilote : l'orientation et la page courante. C'est le seul etat du
+ * visualiseur, et il vivait dans le composant, ou il se melait au rendu au point de lui faire
+ * passer les soixante lignes.
+ */
+export declare const usePilotageDeDocument: (type: DocumentViewerToolbarState["fileType"]) => {
+    rotation: DocumentViewerRotation;
+    page: number;
+    state: DocumentViewerToolbarState;
+    onRotateRight: () => void;
+    onRotateLeft: () => void;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+    onPdfReady: (proxy: {
+        numPages: number;
+    }) => void;
+};
+//# sourceMappingURL=usePilotageDeDocument.d.ts.map

package/dist/ui/DocumentViewer/usePilotageDeDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePilotageDeDocument.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/usePilotageDeDocument.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAW1E,eAAO,MAAM,gBAAgB,GAC3B,UAAU,sBAAsB,EAChC,WAAW,OAAO,GAAG,MAAM,KAC1B,sBAA4D,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,MAAM,0BAA0B,CAAC,UAAU,CAAC;;;;;;;;wBAuBnC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE;CAMlE,CAAC"}

package/dist/ui/DocumentViewer/usePilotageDeDocument.js

@@ -0,0 +1,36 @@
+import React from 'react';
+/**
+ * Le quart de tour suivant, dans un sens ou dans l'autre. Les quatre orientations sont posees en
+ * table : le compilateur verifie chaque arrivee, la ou un calcul modulo ne rendait qu'un nombre.
+ */
+const QUART_DE_TOUR = {
+    right: { 0: 90, 90: 180, 180: 270, 270: 0 },
+    left: { 0: 270, 90: 0, 180: 90, 270: 180 },
+};
+export const rotationSuivante = (rotation, direction) => QUART_DE_TOUR[direction][rotation];
+/**
+ * Ce que la barre d'outils pilote : l'orientation et la page courante. C'est le seul etat du
+ * visualiseur, et il vivait dans le composant, ou il se melait au rendu au point de lui faire
+ * passer les soixante lignes.
+ */
+export const usePilotageDeDocument = (type) => {
+    const [rotation, setRotation] = React.useState(0);
+    const [page, setPage] = React.useState(1);
+    const [totalPages, setTotalPages] = React.useState(1);
+    const state = React.useMemo(() => ({ fileType: type, rotation, page, totalPages }), [type, rotation, page, totalPages]);
+    const onRotateRight = React.useCallback(() => setRotation(courante => rotationSuivante(courante, 'right')), []);
+    const onRotateLeft = React.useCallback(() => setRotation(courante => rotationSuivante(courante, 'left')), []);
+    const onNextPage = React.useCallback(() => {
+        setPage(courante => Math.min(courante + 1, totalPages));
+    }, [totalPages]);
+    const onPreviousPage = React.useCallback(() => {
+        setPage(courante => Math.max(courante - 1, 1));
+    }, []);
+    // Le PDF n'annonce son nombre de pages qu'une fois charge : la page courante peut deja etre
+    // au-dela si le document precedent en avait davantage.
+    const onPdfReady = React.useCallback((proxy) => {
+        setTotalPages(proxy.numPages);
+        setPage(courante => Math.min(courante, proxy.numPages));
+    }, []);
+    return { rotation, page, state, onRotateRight, onRotateLeft, onNextPage, onPreviousPage, onPdfReady };
+};

package/dist/ui/DocumentViewer/useRenduDePage.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { PDFDocumentProxyLike } from './chargementDePdfJs';
+import { DocumentViewerRotation } from './DocumentViewer.types';
+type TailleDeCadre = {
+    width: number;
+    height: number;
+};
+/**
+ * Le rendu d'une page du document sur un canvas, refait a chaque changement de page, de
+ * rotation, de zoom ou de taille du cadre. Un rendu en cours est annule des que ses parametres
+ * changent : sinon deux rendus concurrents dessineraient sur le meme canvas.
+ */
+export declare const useRenduDePage: (params: {
+    pdf: PDFDocumentProxyLike | null;
+    page: number;
+    rotation: DocumentViewerRotation;
+    scale: number;
+    cadre: TailleDeCadre | null;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    onErreur: () => void;
+}) => {
+    width: number;
+    height: number;
+};
+export {};
+//# sourceMappingURL=useRenduDePage.d.ts.map

package/dist/ui/DocumentViewer/useRenduDePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenduDePage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useRenduDePage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AA4CvD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ;IACrC,GAAG,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;;;CAqCA,CAAC"}

package/dist/ui/DocumentViewer/useRenduDePage.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { echelleAjustee, estUneErreurDAnnulationPdf } from './documentViewerPdfCalculs';
+/** Dessine une page sur le canvas fourni, a l'echelle qui la fait tenir dans le cadre. */
+const dessinerLaPage = ({ pagePdf, canvas, cadre, rotation, scale }) => {
+    const contexte = canvas.getContext('2d');
+    if (contexte == null)
+        return null;
+    const cadrage = pagePdf.getViewport({ scale: 1, rotation });
+    const echelle = echelleAjustee({
+        pageWidth: cadrage.width,
+        pageHeight: cadrage.height,
+        viewerWidth: cadre.width,
+        viewerHeight: cadre.height,
+        zoom: scale,
+    });
+    const viewport = pagePdf.getViewport({ scale: echelle, rotation });
+    const pixelRatio = window.devicePixelRatio || 1;
+    canvas.width = Math.floor(viewport.width * pixelRatio);
+    canvas.height = Math.floor(viewport.height * pixelRatio);
+    canvas.style.width = `${viewport.width}px`;
+    canvas.style.height = `${viewport.height}px`;
+    contexte.setTransform(1, 0, 0, 1, 0, 0);
+    contexte.clearRect(0, 0, canvas.width, canvas.height);
+    return {
+        taille: { width: viewport.width, height: viewport.height },
+        tache: pagePdf.render({
+            canvasContext: contexte,
+            viewport,
+            transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
+        }),
+    };
+};
+/**
+ * Le rendu d'une page du document sur un canvas, refait a chaque changement de page, de
+ * rotation, de zoom ou de taille du cadre. Un rendu en cours est annule des que ses parametres
+ * changent : sinon deux rendus concurrents dessineraient sur le meme canvas.
+ */
+export const useRenduDePage = (params) => {
+    const { pdf, page, rotation, scale, cadre, canvasRef, onErreur } = params;
+    const [tailleRendue, setTailleRendue] = React.useState({ width: 0, height: 0 });
+    React.useEffect(() => {
+        if (!pdf || !canvasRef.current || !cadre)
+            return;
+        let active = true;
+        let tacheEnCours = null;
+        pdf
+            .getPage(page)
+            .then(pagePdf => {
+            if (!active || !canvasRef.current)
+                return;
+            const rendu = dessinerLaPage({ pagePdf, canvas: canvasRef.current, cadre, rotation, scale });
+            if (!rendu)
+                return;
+            setTailleRendue(rendu.taille);
+            tacheEnCours = rendu.tache;
+            return rendu.tache?.promise.then(() => {
+                if (active)
+                    pagePdf.cleanup?.();
+            });
+        })
+            .catch(erreur => {
+            if (!active || estUneErreurDAnnulationPdf(erreur))
+                return;
+            onErreur();
+        });
+        return () => {
+            active = false;
+            tacheEnCours?.cancel?.();
+        };
+    }, [pdf, page, rotation, scale, cadre, canvasRef, onErreur]);
+    return tailleRendue;
+};

package/dist/ui/DocumentViewer/useSurvolAvecZoom.d.ts

@@ -0,0 +1,15 @@
+import type { PointerEvent } from 'react-native';
+/**
+ * Le zoom qui suit le pointeur au survol : la page grossit autour du point survole, comme une
+ * loupe. L'origine de l'agrandissement est la position du pointeur en pourcentage du cadre,
+ * recalculee a chaque deplacement.
+ */
+export declare const useSurvolAvecZoom: () => {
+    survole: boolean;
+    origine: string;
+    echelle: number;
+    onEntree: () => void;
+    onSortie: () => void;
+    onDeplacement: (event: PointerEvent) => void;
+};
+//# sourceMappingURL=useSurvolAvecZoom.d.ts.map

package/dist/ui/DocumentViewer/useSurvolAvecZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSurvolAvecZoom.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useSurvolAvecZoom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;2BAIoB,YAAY;CAgB7D,CAAC"}

package/dist/ui/DocumentViewer/useSurvolAvecZoom.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { positionEnPourcentage } from './documentViewerPdfCalculs';
+import { lirePointeurWeb } from './pointeurWeb';
+/**
+ * Le zoom qui suit le pointeur au survol : la page grossit autour du point survole, comme une
+ * loupe. L'origine de l'agrandissement est la position du pointeur en pourcentage du cadre,
+ * recalculee a chaque deplacement.
+ */
+export const useSurvolAvecZoom = () => {
+    const [survole, setSurvole] = React.useState(false);
+    const [origine, setOrigine] = React.useState('50% 50%');
+    const onDeplacement = React.useCallback((event) => {
+        const pointeur = lirePointeurWeb(event);
+        if (!pointeur)
+            return;
+        const { x, y } = positionEnPourcentage(pointeur);
+        setOrigine(`${x}% ${y}%`);
+    }, []);
+    return {
+        survole,
+        origine,
+        echelle: survole ? 2 : 1,
+        onEntree: () => setSurvole(true),
+        onSortie: () => setSurvole(false),
+        onDeplacement,
+    };
+};

package/dist/ui/DocumentViewer/useTailleParResizeObserver.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * La taille d'un cadre, mesuree par `ResizeObserver` plutot que par `onLayout` : `onLayout`
+ * de React Native for Web ne se declenche pas sur une balise HTML personnalisee comme
+ * `document-viewer-pdf`. Le cadre est mesure des le montage, puis a chaque redimensionnement.
+ */
+export declare const useTailleParResizeObserver: () => {
+    mesureRef: React.RefObject<HTMLDivElement | null>;
+    taille: {
+        width: number;
+        height: number;
+    } | null;
+};
+//# sourceMappingURL=useTailleParResizeObserver.d.ts.map

package/dist/ui/DocumentViewer/useTailleParResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTailleParResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useTailleParResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,eAAO,MAAM,0BAA0B;;;eAEe,MAAM;gBAAU,MAAM;;CAyB3E,CAAC"}

package/dist/ui/DocumentViewer/useTailleParResizeObserver.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { tailleValidee } from './documentViewerPdfCalculs';
+/**
+ * La taille d'un cadre, mesuree par `ResizeObserver` plutot que par `onLayout` : `onLayout`
+ * de React Native for Web ne se declenche pas sur une balise HTML personnalisee comme
+ * `document-viewer-pdf`. Le cadre est mesure des le montage, puis a chaque redimensionnement.
+ */
+export const useTailleParResizeObserver = () => {
+    const mesureRef = React.useRef(null);
+    const [taille, setTaille] = React.useState(null);
+    React.useEffect(() => {
+        const element = mesureRef.current;
+        if (!element)
+            return;
+        const mettreAJour = (width, height) => {
+            const valide = tailleValidee({ width, height });
+            if (valide)
+                setTaille(valide);
+        };
+        const observer = new ResizeObserver(entries => {
+            const entree = entries[0];
+            if (entree)
+                mettreAJour(entree.contentRect.width, entree.contentRect.height);
+        });
+        observer.observe(element);
+        const rect = element.getBoundingClientRect();
+        mettreAJour(rect.width, rect.height);
+        return () => observer.disconnect();
+    }, []);
+    return { mesureRef, taille };
+};

package/dist/ui/DurationInput/DurationInput.d.ts

@@ -1,21 +1,10 @@
-import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
 import React from 'react';
-export type DurationInputProps = FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+import { ChampHHMMProps } from '../FormControl/ChampHHMM';
+export type DurationInputProps = ChampHHMMProps;
+export declare const DurationInput: React.ForwardRefExoticComponent<import("..").FormControlCaptionProps & {
     value?: string;
     onChange?: (value: string) => void;
     onBlur?: () => void;
     disabled?: boolean;
-};
-export declare const DurationInput: React.ForwardRefExoticComponent<{
-    label: string;
-    labelRight?: React.ReactNode;
-    optional?: boolean;
-    optionalText?: string;
-    disabled?: boolean;
-} & FormControlCaptionProps & FormControlHintProps & {
-    value?: string;
-    onChange?: (value: string) => void;
-    onBlur?: () => void;
-    disabled?: boolean;
-} & React.RefAttributes<any>>;
+} & React.RefAttributes<import("react-native").TextInput>>;
 //# sourceMappingURL=DurationInput.d.ts.map

package/dist/ui/DurationInput/DurationInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GACpD,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;YANd,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;6BAkDpB,CAAC"}
+{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAEhD,eAAO,MAAM,aAAa;;;;;0DAExB,CAAC"}

package/dist/ui/DurationInput/DurationInput.js

@@ -1,22 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, TextInput, } from '@alveole/components';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const DurationInput = React.forwardRef(function DurationInput({ label, labelRight, hint, error, success, value, onChange, onBlur, disabled }, ref) {
-    const [localValue, setLocalValue] = React.useState(value ?? '');
-    React.useEffect(() => {
-        setLocalValue(value ?? '');
-    }, [value]);
-    const handleChangeText = (text) => {
-        const digits = text.replace(/\D/g, '').slice(0, 4);
-        const formatted = digits.length <= 2 ? digits : `${digits.slice(0, 2)}:${digits.slice(2)}`;
-        setLocalValue(formatted);
-        if (digits.length === 0 || digits.length === 4) {
-            onChange?.(formatted);
-        }
-    };
-    const handleBlur = () => {
-        onChange?.(localValue);
-        onBlur?.();
-    };
-    return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, inputMode: "numeric", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+import { formaterHHMM } from '../FormControl';
+import { ChampHHMM } from '../FormControl/ChampHHMM';
+export const DurationInput = React.forwardRef(function DurationInput(props, ref) {
+    return _jsx(ChampHHMM, { ref: ref, ...props, formater: formaterHHMM, clavier: { inputMode: 'numeric' } });
 });

package/dist/ui/DurationInput/DurationInput.stories.d.ts

@@ -4,19 +4,13 @@ declare const _default: {
     experimental: false;
     shortDescription: string;
     description: string;
-    component: import("react").ForwardRefExoticComponent<{
-        label: string;
-        labelRight?: React.ReactNode;
-        optional?: boolean;
-        optionalText?: string;
-        disabled?: boolean;
-    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+    component: import("react").ForwardRefExoticComponent<import("..").FormControlCaptionProps & {
         value?: string;
         onChange?: (value: string) => void;
         onBlur?: () => void;
         disabled?: boolean;
-    } & import("react").RefAttributes<any>>;
-    styleFn: () => {};
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => string;
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;

package/dist/ui/DurationInput/DurationInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAOA,wBAoBkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAclB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"DurationInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,wBAsBkB;AAElB,eAAO,MAAM,OAAO,mCAoBnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAoBlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}