// Shared botanical components — leaves, frames, ornaments
// All exported to window for cross-script use.
const { useEffect, useRef, useState } = React;
/* ---------- Image compression utility (used by Editor.jsx + Fiche.jsx) ----------
Compresse une photo uploadée AVANT l'envoi base64 vers Supabase :
- redimensionne à maxDim px max (préserve le ratio)
- recompresse en WebP qualité 0.82 (fallback JPEG si WebP non supporté)
Conséquence : une photo téléphone 4032×3024 / 4-8 Mo passe à ~1500×1125 /
~150-300 Ko — facteur ~20× sans perte perceptible. Critique pour le poids
global des fiches (stockage Supabase JSONB + temps de chargement).
*/
async function compressImage(file, { maxDim = 1500, quality = 0.82 } = {}) {
if (!file) throw new Error("Aucun fichier fourni");
const bitmap = await createImageBitmap(file);
try {
const scale = Math.min(1, maxDim / Math.max(bitmap.width, bitmap.height));
const w = Math.max(1, Math.round(bitmap.width * scale));
const h = Math.max(1, Math.round(bitmap.height * scale));
const canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
canvas.getContext("2d").drawImage(bitmap, 0, 0, w, h);
// Tentative WebP, fallback JPEG si non supporté (Safari <14, etc.)
const webp = canvas.toDataURL("image/webp", quality);
if (webp.startsWith("data:image/webp")) return webp;
return canvas.toDataURL("image/jpeg", quality);
} finally {
bitmap.close && bitmap.close();
}
}
window.compressImage = compressImage;
/* ---------- Reveal-on-scroll wrapper ---------- */
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {} }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => el.classList.add("in"), delay);
io.unobserve(el);
}
}),
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
io.observe(el);
return () => io.disconnect();
}, [delay]);
return (
{children}
);
}
/* ---------- Simple botanical ornament (allowed: lines + circles only) ---------- */
function Ornament({ size = 60, color = "currentColor" }) {
return (
);
}
/* ---------- Botanical placeholder plate ---------- */
// Si `src` est fourni (URL ou DataURL), on affiche la vraie photo par-dessus la
// trame rayée du design — le cadre, les ticks de coin et le label monospace
// restent visibles autour. Sans src, la planche d'herbier vide reste telle quelle.
// `attribution` = URL externe (ex. page Wikipedia) → affiche un petit lien de
// crédit en bas à droite, pour respecter les licences CC-BY-SA.
function Plate({ label = "Photo / planche botanique", aspect = "3/4", style = {}, frame = true, src, attribution, cover = false, children }) {
return (
{src && (
)}
{children}