@cardinali-studio/adminkit 2.2.11 → 2.2.12

package/dist/form/media/image-conversion.d.ts

@@ -0,0 +1,14 @@
+export declare const MEDIA_WEBP_EDGE = 2500;
+export declare const MEDIA_WEBP_QUALITY = 0.8;
+export declare function isConvertibleImage(file: File): boolean;
+export declare function webpName(name: string): string;
+export declare function fitLongEdge(width: number, height: number, edge?: number): {
+    width: number;
+    height: number;
+};
+/** La conversione canvas rimuove i metadati. Conserviamo almeno DateTimeOriginal, già usato
+ * dalla libreria per l'ordinamento per scatto, leggendo solo l'inizio del JPEG. */
+export declare function jpegCapturedAt(file: File): Promise<string | null>;
+/** I video e gli altri file non-immagine restano intatti. Retry e fallback all'originale sono
+ * responsabilità della coda: questa funzione fa un singolo tentativo e fallisce in modo netto. */
+export declare function convertMediaImage(file: File): Promise<File>;

package/dist/form/media/image-conversion.js

@@ -0,0 +1,163 @@
+/* Conversione prima dell'upload della libreria Media.
+ *
+ * Sta nel browser: il file originale non attraversa la rete e ogni worker della coda può
+ * convertire e caricare in parallelo. HEIC/HEIF è l'unica eccezione ai codec del browser e
+ * viene decodificato, solo quando serve, dal modulo dedicato caricato dinamicamente.
+ */
+export const MEDIA_WEBP_EDGE = 2500;
+export const MEDIA_WEBP_QUALITY = .8;
+const IMAGE_EXT = /\.(?:avif|bmp|gif|heic|heif|jfif|jpe?g|png|tiff?|webp)$/i;
+const HEIC_EXT = /\.(?:heic|heif)$/i;
+export function isConvertibleImage(file) {
+    return file.type.startsWith("image/") || IMAGE_EXT.test(file.name);
+}
+export function webpName(name) {
+    const base = name.replace(/\.[^./\\]+$/, "") || "immagine";
+    return `${base}.webp`;
+}
+export function fitLongEdge(width, height, edge = MEDIA_WEBP_EDGE) {
+    const scale = Math.min(1, edge / Math.max(width, height));
+    return {
+        width: Math.max(1, Math.round(width * scale)),
+        height: Math.max(1, Math.round(height * scale)),
+    };
+}
+/** La conversione canvas rimuove i metadati. Conserviamo almeno DateTimeOriginal, già usato
+ * dalla libreria per l'ordinamento per scatto, leggendo solo l'inizio del JPEG. */
+export async function jpegCapturedAt(file) {
+    if (!(file.type === "image/jpeg" || /\.(?:jpe?g|jfif)$/i.test(file.name)))
+        return null;
+    try {
+        const buffer = await file.slice(0, 512 * 1024).arrayBuffer();
+        const view = new DataView(buffer);
+        if (view.byteLength < 4 || view.getUint16(0) !== 0xffd8)
+            return null;
+        let offset = 2;
+        while (offset + 12 < view.byteLength) {
+            if (view.getUint8(offset) !== 0xff)
+                return null;
+            const marker = view.getUint8(offset + 1);
+            const length = view.getUint16(offset + 2);
+            if (marker === 0xe1) {
+                const app1 = offset + 4;
+                if (app1 + 14 >= view.byteLength || view.getUint32(app1) !== 0x45786966)
+                    return null;
+                const tiff = app1 + 6;
+                const little = view.getUint16(tiff) === 0x4949;
+                const u16 = (at) => view.getUint16(at, little);
+                const u32 = (at) => view.getUint32(at, little);
+                const ifd0 = tiff + u32(tiff + 4);
+                let exif = 0;
+                for (let i = 0, count = u16(ifd0); i < count; i++) {
+                    const entry = ifd0 + 2 + i * 12;
+                    if (u16(entry) === 0x8769) {
+                        exif = tiff + u32(entry + 8);
+                        break;
+                    }
+                }
+                if (!exif)
+                    return null;
+                for (let i = 0, count = u16(exif); i < count; i++) {
+                    const entry = exif + 2 + i * 12;
+                    if (u16(entry) !== 0x9003)
+                        continue;
+                    const start = tiff + u32(entry + 8);
+                    let raw = "";
+                    for (let j = 0; j < 19 && start + j < view.byteLength; j++)
+                        raw += String.fromCharCode(view.getUint8(start + j));
+                    const match = raw.match(/^(\d{4}):(\d{2}):(\d{2}) (\d{2}):(\d{2}):(\d{2})/);
+                    return match ? `${match[1]}-${match[2]}-${match[3]}T${match[4]}:${match[5]}:${match[6]}` : null;
+                }
+                return null;
+            }
+            if (marker === 0xda || length < 2)
+                return null;
+            offset += 2 + length;
+        }
+    }
+    catch { /* metadati assenti o corrotti: non impediscono una conversione valida */ }
+    return null;
+}
+async function bitmapOf(file) {
+    const heic = HEIC_EXT.test(file.name) || /image\/(?:hei[cf]|heif-sequence)/i.test(file.type);
+    const options = {
+        imageOrientation: "from-image",
+        /* `none` lascerebbe i numeri del profilo sorgente senza trasformazione: disegnarli poi su
+           un canvas sRGB è il percorso classico verso colori slavati o troppo saturi. */
+        colorSpaceConversion: "default",
+        premultiplyAlpha: "default",
+    };
+    if (heic) {
+        /* Prima il codec di sistema: quando Safari/il browser sa leggere HEIC, è la strada che ha
+           accesso completo al suo profilo ICC/NCLX. Il decoder WASM è il ripiego interoperabile. */
+        try {
+            return await createImageBitmap(file, options);
+        }
+        catch { /* HEIC non supportato nativamente */ }
+        /* La variante CSP non usa `unsafe-eval`, vietato normalmente dall'admin. Il chunk grande
+           del decoder non entra nel caricamento iniziale: viene scaricato soltanto al primo HEIC. */
+        const { heicTo } = await import("heic-to/csp");
+        return heicTo({ blob: file, type: "bitmap", options });
+    }
+    return createImageBitmap(file, options);
+}
+async function drawWebp(bitmap, width, height) {
+    if (typeof OffscreenCanvas !== "undefined") {
+        const canvas = new OffscreenCanvas(width, height);
+        /* Il WebP generato dal canvas normalmente non porta con sé il profilo sorgente. Rendendo
+           esplicitamente in sRGB, i pixel sono già corretti; la specifica WebP prescrive sRGB
+           quando ICCP manca. Non copiamo l'ICC originale su pixel ormai convertiti. */
+        const context = canvas.getContext("2d", { alpha: true, colorSpace: "srgb" });
+        if (!context)
+            throw new Error("Canvas 2D non disponibile");
+        context.imageSmoothingEnabled = true;
+        context.imageSmoothingQuality = "high";
+        try {
+            context.drawImage(bitmap, 0, 0, width, height);
+            const blob = await canvas.convertToBlob({ type: "image/webp", quality: MEDIA_WEBP_QUALITY });
+            if (blob.type !== "image/webp")
+                throw new Error("Questo browser non supporta la codifica WebP");
+            return blob;
+        }
+        finally {
+            canvas.width = 1;
+            canvas.height = 1;
+        }
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d", { alpha: true, colorSpace: "srgb" });
+    if (!context)
+        throw new Error("Canvas 2D non disponibile");
+    context.imageSmoothingEnabled = true;
+    context.imageSmoothingQuality = "high";
+    try {
+        context.drawImage(bitmap, 0, 0, width, height);
+        return await new Promise((resolve, reject) => canvas.toBlob((blob) => blob?.type === "image/webp"
+            ? resolve(blob)
+            : reject(new Error("Questo browser non supporta la codifica WebP")), "image/webp", MEDIA_WEBP_QUALITY));
+    }
+    finally {
+        canvas.width = 1;
+        canvas.height = 1;
+    }
+}
+/** I video e gli altri file non-immagine restano intatti. Retry e fallback all'originale sono
+ * responsabilità della coda: questa funzione fa un singolo tentativo e fallisce in modo netto. */
+export async function convertMediaImage(file) {
+    if (!isConvertibleImage(file))
+        return file;
+    const bitmap = await bitmapOf(file);
+    try {
+        const size = fitLongEdge(bitmap.width, bitmap.height);
+        const blob = await drawWebp(bitmap, size.width, size.height);
+        return new File([blob], webpName(file.name), {
+            type: "image/webp",
+            lastModified: file.lastModified,
+        });
+    }
+    finally {
+        bitmap.close();
+    }
+}

package/dist/form/media/media-upload-queue.d.ts

@@ -0,0 +1,31 @@
+export type MediaUploadState = "running" | "done" | "failed";
+export interface MediaUploadJob {
+    id: string;
+    title: string;
+    prefix: string;
+    state: MediaUploadState;
+    total: number;
+    conversionDone: number;
+    uploadDone: number;
+    converted: number;
+    originals: number;
+    failed: number;
+    autoWebp: boolean;
+    errors: string[];
+}
+interface StartInput {
+    prefix: string;
+    title: string;
+    files: File[];
+    autoWebp: boolean;
+}
+export declare function useMediaUploads(): MediaUploadJob[];
+export declare function useMediaUploadCompletions(): number;
+/** Snapshot non mutabile per diagnostica e test della coda fuori da React. */
+export declare function mediaUploadsSnapshot(): MediaUploadJob[];
+export declare function dismissMediaUpload(id: string): void;
+/** Accoda e torna subito: la finestra di scelta può chiudersi, il lavoro resta nel dock. */
+export declare function startMediaUpload(input: StartInput): string;
+export declare function adaptiveConversionConcurrency(files: File[], enabled?: boolean): number;
+export declare function adaptiveUploadConcurrency(): number;
+export {};

package/dist/form/media/media-upload-queue.js

@@ -0,0 +1,230 @@
+/* Upload persistenti della libreria Media.
+ *
+ * Come per i transfer, lo stato vive fuori da React: cambiare rotta nell'admin non smonta la
+ * conversione, non perde l'avanzamento e non nasconde gli errori. Le due fasi hanno pool
+ * distinti e una coda limitata fra loro: conversione e rete si sovrappongono, ma non si
+ * accumulano in RAM decine di WebP già pronti.
+ */
+import { useSyncExternalStore } from "react";
+import { api, ApiError } from "../../api.js";
+import { convertMediaImage, isConvertibleImage, jpegCapturedAt } from "./image-conversion.js";
+let jobs = [];
+let completions = 0;
+const listeners = new Set();
+function emit() {
+    jobs = [...jobs];
+    for (const listener of listeners)
+        listener();
+}
+function patch(id, change) {
+    jobs = jobs.map((job) => job.id === id ? { ...job, ...change } : job);
+    emit();
+}
+function current(id) {
+    return jobs.find((job) => job.id === id);
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+}
+export function useMediaUploads() {
+    return useSyncExternalStore(subscribe, () => jobs, () => jobs);
+}
+export function useMediaUploadCompletions() {
+    return useSyncExternalStore(subscribe, () => completions, () => completions);
+}
+/** Snapshot non mutabile per diagnostica e test della coda fuori da React. */
+export function mediaUploadsSnapshot() { return jobs; }
+export function dismissMediaUpload(id) {
+    jobs = jobs.filter((job) => job.id !== id || job.state === "running");
+    emit();
+}
+/** Accoda e torna subito: la finestra di scelta può chiudersi, il lavoro resta nel dock. */
+export function startMediaUpload(input) {
+    const id = crypto.randomUUID();
+    jobs = [...jobs, {
+            id, title: input.title, prefix: input.prefix, state: "running", total: input.files.length,
+            conversionDone: 0, uploadDone: 0, converted: 0, originals: 0, failed: 0,
+            autoWebp: input.autoWebp, errors: [],
+        }];
+    emit();
+    void run(id, input);
+    return id;
+}
+async function run(id, input) {
+    const conversionWorkers = adaptiveConversionConcurrency(input.files, input.autoWebp);
+    const uploadWorkers = adaptiveUploadConcurrency();
+    /* Due soli elementi pronti: abbastanza per non lasciare la rete in attesa, pochi abbastanza
+     * da non tenere in memoria un intero servizio fotografico già convertito. */
+    const ready = new BoundedQueue(2);
+    let next = 0;
+    const convert = async () => {
+        while (next < input.files.length) {
+            const file = input.files[next++];
+            const prepared = await prepare(file, input.autoWebp);
+            const job = current(id);
+            patch(id, {
+                conversionDone: job.conversionDone + 1,
+                converted: job.converted + (prepared.converted ? 1 : 0),
+                originals: job.originals + (prepared.originalFallback ? 1 : 0),
+                errors: prepared.conversionError
+                    ? appendError(job.errors, `${file.name}: conversione non riuscita, carico l’originale (${prepared.conversionError})`)
+                    : job.errors,
+            });
+            await ready.push(prepared);
+        }
+    };
+    const upload = async () => {
+        for (;;) {
+            const prepared = await ready.shift();
+            if (!prepared)
+                return;
+            try {
+                await uploadWithRetry(input.prefix, prepared.upload, prepared.capturedAt);
+                const job = current(id);
+                patch(id, { uploadDone: job.uploadDone + 1 });
+            }
+            catch (error) {
+                const job = current(id);
+                patch(id, {
+                    uploadDone: job.uploadDone + 1,
+                    failed: job.failed + 1,
+                    errors: appendError(job.errors, `${prepared.source.name}: ${readable(error)}`),
+                });
+            }
+        }
+    };
+    try {
+        const consumers = Array.from({ length: Math.min(uploadWorkers, input.files.length) }, upload);
+        await Promise.all(Array.from({ length: Math.min(conversionWorkers, input.files.length) }, convert));
+        ready.close();
+        await Promise.all(consumers);
+        patch(id, { state: current(id).failed ? "failed" : "done" });
+    }
+    catch (error) {
+        /* Un errore della coda è un guasto nostro, non di una foto. Chiude comunque i consumer e
+           resta visibile: un job "in corso" per sempre sarebbe impossibile da diagnosticare. */
+        ready.close();
+        const job = current(id);
+        patch(id, { state: "failed", failed: Math.max(1, job.failed), errors: appendError(job.errors, readable(error)) });
+    }
+    finally {
+        completions += 1;
+        emit();
+    }
+}
+async function prepare(file, autoWebp) {
+    const capturedAt = await jpegCapturedAt(file);
+    if (!autoWebp || !isConvertibleImage(file)) {
+        return { source: file, upload: file, converted: false, originalFallback: false, capturedAt };
+    }
+    let last;
+    /* Tre tentativi reali. Fra uno e l'altro restituiamo il controllo al browser: dopo una
+     * pressione di memoria può liberare bitmap/canvas chiusi prima di riprovare. */
+    for (let attempt = 1; attempt <= 3; attempt++) {
+        try {
+            const converted = await convertMediaImage(file);
+            return { source: file, upload: converted, converted: true, originalFallback: false, capturedAt };
+        }
+        catch (error) {
+            last = error;
+            if (attempt < 3)
+                await delay(attempt * 180);
+        }
+    }
+    return {
+        source: file, upload: file, converted: false, originalFallback: true,
+        conversionError: readable(last), capturedAt,
+    };
+}
+async function uploadWithRetry(prefix, file, capturedAt) {
+    let last;
+    for (let attempt = 1; attempt <= 3; attempt++) {
+        try {
+            return await api.upload(prefix, file, { capturedAt });
+        }
+        catch (error) {
+            last = error;
+            if (attempt === 3 || !retryable(error))
+                throw error;
+            await delay(attempt * 300);
+        }
+    }
+    throw last;
+}
+function retryable(error) {
+    return !(error instanceof ApiError) || error.status === 408 || error.status === 429 || error.status >= 500;
+}
+export function adaptiveConversionConcurrency(files, enabled = true) {
+    if (!enabled || !files.some(isConvertibleImage))
+        return Math.min(4, Math.max(1, files.length));
+    const cores = typeof navigator === "undefined" ? 4 : navigator.hardwareConcurrency || 4;
+    const memory = typeof navigator === "undefined"
+        ? 4
+        : navigator.deviceMemory || 4;
+    let count = cores >= 12 && memory >= 8 ? 3 : cores >= 6 && memory >= 4 ? 2 : 1;
+    /* Il decoder HEIC ha un buffer compresso, un RGBA completo e il canvas di uscita. Due in
+     * parallelo sono già una quantità importante di memoria anche su una workstation. */
+    if (files.some((file) => /\.(?:heic|heif)$/i.test(file.name)))
+        count = Math.min(count, 2);
+    if (files.some((file) => file.size >= 30 * 1024 * 1024))
+        count = 1;
+    return Math.min(count, Math.max(1, files.length));
+}
+export function adaptiveUploadConcurrency() {
+    if (typeof navigator === "undefined")
+        return 3;
+    const connection = navigator.connection;
+    if (connection?.saveData || connection?.effectiveType === "slow-2g" || connection?.effectiveType === "2g")
+        return 2;
+    const memory = navigator.deviceMemory || 4;
+    return (navigator.hardwareConcurrency || 4) >= 8 && memory >= 8 ? 4 : 3;
+}
+function appendError(errors, next) {
+    /* Nel dock servono esempi utili, non duecento righe. Il conteggio completo resta in `failed`
+       e `originals`; le prime otto dicono quali file guardare. */
+    return errors.length >= 8 ? errors : [...errors, next];
+}
+function readable(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); }
+class BoundedQueue {
+    capacity;
+    values = [];
+    readers = [];
+    writers = [];
+    closed = false;
+    constructor(capacity) {
+        this.capacity = capacity;
+    }
+    async push(value) {
+        while (!this.closed && this.values.length >= this.capacity && this.readers.length === 0) {
+            await new Promise((resolve) => this.writers.push(resolve));
+        }
+        if (this.closed)
+            throw new Error("coda Media chiusa");
+        const reader = this.readers.shift();
+        if (reader)
+            reader(value);
+        else
+            this.values.push(value);
+    }
+    async shift() {
+        const value = this.values.shift();
+        if (value) {
+            this.writers.shift()?.();
+            return value;
+        }
+        if (this.closed)
+            return null;
+        return new Promise((resolve) => this.readers.push(resolve));
+    }
+    close() {
+        this.closed = true;
+        for (const reader of this.readers.splice(0))
+            reader(null);
+        for (const writer of this.writers.splice(0))
+            writer();
+    }
+}

package/dist/form/media/useMediaLibrary.d.ts

@@ -25,6 +25,8 @@ export interface MediaLibrary {
     sortDir: "asc" | "desc";
     uploadOpen: boolean;
     viewing: number | null;
+    autoWebp: boolean;
+    settingsBusy: boolean;
     go(prefix: string): void;
     reload(): void;
     toggle(key: string): void;
@@ -34,6 +36,7 @@ export interface MediaLibrary {
     /** Vero se sono passati tutti: chi ha aperto un dialogo lo chiude solo in quel caso. */
     upload(files: File[] | FileList): Promise<boolean>;
     setUploadOpen(open: boolean): void;
+    setAutoWebp(on: boolean): Promise<void>;
     view(i: number | null): void;
     step(delta: number): void;
     /** File e cartelle insieme: una cartella si riconosce dalla chiave, che finisce con "/". */

package/dist/form/media/useMediaLibrary.js

@@ -9,9 +9,10 @@
  * una sola implementazione, due impaginazioni.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { api, uploadQueue, ApiError } from "../../api.js";
+import { api, ApiError } from "../../api.js";
 import { storageKey } from "../../config.js";
 import { contentPersistenceMode } from "../../app/site.js";
+import { startMediaUpload, useMediaUploadCompletions } from "./media-upload-queue.js";
 /* Quanti file per richiesta nelle operazioni lunghe (cestina, sposta). Ogni file costa al
  * server tre operazioni su R2 — legge, riscrive altrove, cancella — su oggetti da qualche MB.
  * Dieci tiene una richiesta sotto i pochi secondi, che è la soglia oltre la quale chi guarda
@@ -39,6 +40,11 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
     const [progress, setProgress] = useState(null);
     const [uploadOpen, setUploadOpen] = useState(false);
     const [viewing, setViewing] = useState(null);
+    const [autoWebp, setAutoWebpState] = useState(true);
+    const [settingsBusy, setSettingsBusy] = useState(false);
+    const [settingsLoaded, setSettingsLoaded] = useState(false);
+    const mediaUploadCompletions = useMediaUploadCompletions();
+    const seenMediaUploadCompletions = useRef(mediaUploadCompletions);
     // Le preferenze di ordinamento restano dov'erano — il prefisso che il sito dichiara al
     // bootstrap ricostruisce le chiavi di prima: la memoria muscolare di chi usa il pannello
     // tutti i giorni non ha motivo di azzerarsi per una riorganizzazione dei sorgenti.
@@ -125,6 +131,29 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
         void load(start, true);
     }, [active, loaded, busy, error, load, remember]);
     useEffect(() => { localStorage.setItem(storageKey("sortKey"), sortKey); localStorage.setItem(storageKey("sortDir"), sortDir); }, [sortKey, sortDir]);
+    /* Questa preferenza è del SITO, non del browser: il backend la conserva nel bucket Media.
+     * Finché non arriva la risposta vale il default ON, così anche i siti già esistenti hanno il
+     * nuovo comportamento senza migrazioni. Si carica solo nella vista di gestione: il picker non
+     * offre upload e non deve fare una richiesta che non userà. */
+    useEffect(() => {
+        if (mode !== "manage" || !active || settingsLoaded)
+            return;
+        setSettingsBusy(true);
+        void api.mediaSettings()
+            .then((result) => { setAutoWebpState(result.settings.autoWebp); setSettingsLoaded(true); })
+            .catch((e) => setError(e instanceof ApiError ? e.message : String(e)))
+            .finally(() => setSettingsBusy(false));
+    }, [mode, active, settingsLoaded]);
+    /* Un upload può finire mentre si guarda un'altra sezione. Al ritorno ricarichiamo la
+     * cartella corrente una volta sola, senza riportare l'utente nella cartella in cui il job era
+     * partito. Lo stato della coda è esterno a React, quindi sopravvive alla navigazione. */
+    useEffect(() => {
+        if (!active || seenMediaUploadCompletions.current === mediaUploadCompletions)
+            return;
+        seenMediaUploadCompletions.current = mediaUploadCompletions;
+        if (loaded)
+            void load(prefix);
+    }, [active, mediaUploadCompletions, loaded, load, prefix]);
     /* Chiudere o ricaricare mentre un'operazione è in corso la interrompe: il gruppo in volo non
      * arriva mai. Ora ogni gruppo è definitivo, quindi si perde poco — ma vale comunque la pena
      * chiedere, perché è esattamente il gesto che uno fa quando "non sta succedendo niente". */
@@ -173,26 +202,50 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
         const arr = Array.from(list);
         if (!arr.length)
             return true;
-        setProgress({ done: 0, total: arr.length, verb: "Carico" });
-        const errs = [];
+        let convert = autoWebp;
+        /* Evita la piccola finestra fra apertura dei Media e arrivo dell'impostazione: se sul sito
+           la conversione è OFF, un upload immediato non deve partire col default ON. */
+        if (!settingsLoaded) {
+            try {
+                const result = await api.mediaSettings();
+                convert = result.settings.autoWebp;
+                setAutoWebpState(convert);
+                setSettingsLoaded(true);
+            }
+            catch (e) {
+                setError(e instanceof ApiError ? e.message : String(e));
+                return false;
+            }
+        }
+        const destination = prefix
+            ? seenLabels.current[prefix] || prefix.replace(/\/$/, "").split("/").pop() || prefix
+            : "Senza cartella";
+        startMediaUpload({
+            prefix,
+            title: `${arr.length} file · ${destination}`,
+            files: arr,
+            autoWebp: convert,
+        });
+        return true;
+    }, [prefix, autoWebp, settingsLoaded]);
+    const setAutoWebp = useCallback(async (on) => {
+        const previous = autoWebp;
+        setAutoWebpState(on);
+        setSettingsBusy(true);
+        setError(null);
         try {
-            await uploadQueue(prefix, arr, (done, total, _r, err) => {
-                setProgress({ done, total, verb: "Carico" });
-                if (err)
-                    errs.push(err);
-            });
+            const result = await api.saveMediaSettings(on);
+            setAutoWebpState(result.settings.autoWebp);
+            setSettingsLoaded(true);
+        }
+        catch (e) {
+            setAutoWebpState(previous);
+            setError(e instanceof ApiError ? e.message : String(e));
         }
         finally {
-            setProgress(null);
-            // SEMPRE, anche se qualcosa è fallito: dopo un'operazione a metà l'elenco che si vede è
-            // una bugia, ed è peggio dell'errore.
-            await load(prefix);
+            setSettingsBusy(false);
         }
-        // Dopo `load`, che azzera il messaggio: prima veniva scritto e subito cancellato.
-        if (errs.length)
-            setError(`Non caricati: ${errs.join("; ")}`);
-        return errs.length === 0;
-    }, [prefix, load]);
+    }, [autoWebp]);
     const labelOf = useCallback((p) => {
         const f = folders.find((x) => x.prefix === p) ?? subfolders.find((x) => x.prefix === p);
         return f?.label || seenLabels.current[p] || p.replace(/\/$/, "").split("/").pop() || "";
@@ -526,7 +579,7 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
     }, [shown.length]);
     return {
         mode, multiple, prefix, folders, subfolders, shown, selected, busy, error, mediaOperations, progress,
-        sortKey, sortDir, uploadOpen, viewing,
+        sortKey, sortDir, uploadOpen, viewing, autoWebp, settingsBusy,
         go: (p) => void load(p),
         reload: () => void load(prefix),
         toggle, setAll,
@@ -534,6 +587,7 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
         flipDir: () => setSortDir((d) => (d === "asc" ? "desc" : "asc")),
         upload,
         setUploadOpen,
+        setAutoWebp,
         view: setViewing,
         step,
         move, remove, newFolder, renameFolder, removeFolder, resumeMedia, cancelMedia, labelOf,

package/dist/functions/_shared/assets.js

@@ -32,8 +32,9 @@ export function sanitizeName(name) {
 export function guessMime(key) {
   const e = (key.split(".").pop() || "").toLowerCase();
   return {
-    jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", webp: "image/webp",
-    gif: "image/gif", avif: "image/avif", svg: "image/svg+xml",
+    jpg: "image/jpeg", jpeg: "image/jpeg", jfif: "image/jpeg", png: "image/png", webp: "image/webp",
+    gif: "image/gif", avif: "image/avif", heic: "image/heic", heif: "image/heif",
+    tif: "image/tiff", tiff: "image/tiff", bmp: "image/bmp", svg: "image/svg+xml",
     mp4: "video/mp4", webm: "video/webm", mov: "video/quicktime", pdf: "application/pdf",
   }[e] || "application/octet-stream";
 }

package/dist/functions/api/assets/folders.js

@@ -13,7 +13,8 @@ export async function onRequestGet({ env }) {
   const pending = contentPersistenceMode() === "d1" ? await d1PendingSourceKeys(env.CONTENT_DB) : await pendingSourceKeys(env.MEDIA);
   const counts = {};
   for (const k of keys) {
-    if (k.startsWith(TRASH) || k.startsWith("_pending-media/") || pending.has(k)) continue;
+    if (k.startsWith(TRASH) || k.startsWith("_pending-media/") ||
+        k.startsWith("_adminkit/") || pending.has(k)) continue;
     const slash = k.indexOf("/");
     if (slash < 0) continue; // file in root: non appartiene a una cartella
     const top = k.slice(0, slash);

package/dist/functions/api/assets/settings.js

@@ -0,0 +1,40 @@
+/* GET/POST /admin/api/assets/settings — preferenze condivise della libreria Media.
+ *
+ * Vivono nello stesso bucket delle immagini: sono per sito, visibili da qualunque browser e
+ * non richiedono un commit/build per cambiare un comportamento del solo pannello.
+ */
+import { json } from "../../_shared/assets.js";
+
+const KEY = "_adminkit/settings.json";
+const defaults = { autoWebp: true };
+
+async function read(env) {
+  const object = await env.MEDIA.get(KEY);
+  if (!object) return defaults;
+  try {
+    const stored = await object.json();
+    return { autoWebp: stored?.autoWebp !== false };
+  } catch {
+    return defaults;
+  }
+}
+
+export async function onRequestGet({ env }) {
+  if (!env.MEDIA) return json({ ok: false, error: "Binding MEDIA non configurato" }, 500);
+  return json({ ok: true, settings: await read(env) });
+}
+
+export async function onRequestPost({ request, env }) {
+  if (!env.MEDIA) return json({ ok: false, error: "Binding MEDIA non configurato" }, 500);
+  let body;
+  try { body = await request.json(); }
+  catch { return json({ ok: false, error: "JSON non valido" }, 400); }
+  if (typeof body?.autoWebp !== "boolean") {
+    return json({ ok: false, error: "autoWebp deve essere booleano" }, 400);
+  }
+  const settings = { autoWebp: body.autoWebp };
+  await env.MEDIA.put(KEY, JSON.stringify(settings), {
+    httpMetadata: { contentType: "application/json" },
+  });
+  return json({ ok: true, settings });
+}

package/dist/functions/api/assets/upload.js

@@ -22,7 +22,10 @@ export async function onRequestPost({ request, env }) {
 
   // data di scatto (EXIF) per l'ordinamento "Data scatto"
   const custom = {};
-  if (ctype === "image/jpeg") {
+  const suppliedCapturedAt = request.headers.get("X-Captured-At") || "";
+  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(suppliedCapturedAt)) {
+    custom.capturedAt = suppliedCapturedAt;
+  } else if (ctype === "image/jpeg") {
     const cap = extractCapturedAt(body);
     if (cap) custom.capturedAt = cap;
   }