@cardinali-studio/adminkit 1.0.0

package/dist/form/fields/objectList.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* L'UNICO widget strutturale: rende un oggetto o una lista annidata passando i figli per lo
+ * STESSO registro, in modo ricorsivo.
+ *
+ * È il punto in cui un po' di genericità entra per forza — le sezioni della home sono oggetti
+ * con dentro liste di oggetti — e va tenuta confinata. Regola: se ci si trova ad aggiungerne un
+ * secondo, fermarsi. È il segnale che sta ricrescendo il motore di form generico che si era
+ * deciso di non costruire, e la prossima domanda diventa "cosa dovrebbe dedurre il motore".
+ */
+import * as z from "zod";
+import { ui } from "../../registries.js";
+import { registerField, fieldFor } from "../registry.js";
+/** Sotto-schema di un campo Zod, se è un oggetto: serve a scendere di un livello. */
+function shapeOf(schema) {
+    const def = schema?._zod?.def ?? schema?._def;
+    if (def?.type === "object" || def?.typeName === "ZodObject") {
+        const s = typeof def.shape === "function" ? def.shape() : def.shape;
+        return s ?? null;
+    }
+    return null;
+}
+/** Schema degli elementi, se è un array. */
+function elementOf(schema) {
+    const def = schema?._zod?.def ?? schema?._def;
+    if (def?.type === "array" || def?.typeName === "ZodArray")
+        return def.element ?? def.type ?? null;
+    return null;
+}
+/* Voce vuota per un NUOVO elemento della lista, che rispetti la FORMA di ogni sotto-campo
+ * invece di azzerarli tutti a stringa. Finché ogni lista-di-oggetti di questo schema aveva
+ * solo campi piatti (stringhe/numeri), "tutto a stringa vuota" era sempre corretto per
+ * costruzione — non c'era nessun array o oggetto annidato da rispettare. Con un sotto-campo
+ * che è a sua volta un array (es. le card di un lavoro del portfolio, o le sue info), una
+ * stringa vuota lì è un valore di forma SBAGLIATA: `PageObject.safeParse` lo scarterebbe come
+ * non valido in CI, ma il salvataggio delle pagine (functions/admin/api/pages.js) non valida
+ * affatto e scrive dritto su `main` — quindi qui l'errore andrebbe in produzione prima che
+ * qualcuno se ne accorga. */
+function blankFor(schema) {
+    const s = shapeOf(schema);
+    if (s)
+        return Object.fromEntries(Object.keys(s).map((k) => [k, blankFor(s[k])]));
+    if (elementOf(schema))
+        return [];
+    // Un `select` non ha una stringa vuota fra le sue opzioni: il tag <select> del browser
+    // mostra comunque la PRIMA opzione (nessun value la combacia, ma qualcosa va disegnato),
+    // quindi sembra già scelta finché non si tocca il menu — ma il valore resta "" finché non
+    // scatta un onChange. Prima card salvata così: `type: ""`, un valore che non corrisponde a
+    // nessun ramo del template (vedi PORTFOLIO.md). Il vuoto CORRETTO per un select è la sua
+    // prima opzione, non una stringa che nessuna opzione userà mai.
+    const meta = ui.get(schema);
+    if (meta?.widget === "select" && meta.options?.length)
+        return meta.options[0].value;
+    return "";
+}
+/** Widget che rendono da soli un campo-array: qui la ricorsione non deve scendere. */
+const SELF_RENDERING_LISTS = new Set(["r2Gallery", "r2Curated", "paragraphs"]);
+function Node({ schema, value, onChange, pickMedia, pickMediaFiles, label, }) {
+    const meta = ui.get(schema);
+    const shape = shapeOf(schema);
+    const element = elementOf(schema);
+    // Oggetto: un riquadro con dentro i suoi campi.
+    if (shape) {
+        const obj = (value ?? {});
+        return (_jsx("div", { className: "ol-obj", children: Object.entries(shape).map(([k, sub]) => (_jsx(Node, { schema: sub, label: ui.get(sub)?.label ?? k, value: obj[k], pickMedia: pickMedia, pickMediaFiles: pickMediaFiles, onChange: (v) => onChange({ ...obj, [k]: v }) }, k))) }));
+    }
+    /* Lista: elementi riordinabili e rimovibili — A MENO che il campo dichiari un widget che sa
+     * già rendere una lista per conto suo. La ricorsione si ferma lì e disegna il widget.
+     *
+     * Prima l'eccezione era una sola, scritta a mano (`!== "r2Gallery"`), e ha fatto sparire in
+     * silenzio il widget successivo che ne aveva bisogno: `paragraphs` è un array di stringhe, e
+     * dentro un objectList veniva reso come elenco di caselline invece che come textarea — la
+     * dichiarazione nello schema non aveva alcun effetto, senza un errore da nessuna parte.
+     * `r2Curated` è nella lista per lo stesso motivo: oggi sta solo al primo livello, dove questo
+     * ramo non passa, ma il giorno che finisce dentro un oggetto si romperebbe uguale. */
+    if (element && !SELF_RENDERING_LISTS.has(meta?.widget ?? "")) {
+        const list = Array.isArray(value) ? value : [];
+        const move = (from, to) => {
+            if (to < 0 || to >= list.length)
+                return;
+            const next = list.slice();
+            const [x] = next.splice(from, 1);
+            next.splice(to, 0, x);
+            onChange(next);
+        };
+        return (_jsxs("fieldset", { className: "ol-list", children: [_jsx("legend", { className: "ak-legend", children: label ?? meta?.label }), list.map((item, i) => (_jsxs("div", { className: "ol-item", children: [_jsxs("div", { className: "ol-item-bar", children: [_jsx("span", { className: "ak-hint", children: i + 1 }), _jsx("span", { className: "ak-spacer" }), _jsx("button", { type: "button", className: "ak-icon", title: "Su", onClick: () => move(i, i - 1), children: "\u2191" }), _jsx("button", { type: "button", className: "ak-icon", title: "Gi\u00F9", onClick: () => move(i, i + 1), children: "\u2193" }), _jsx("button", { type: "button", className: "ak-icon", title: "Rimuovi", onClick: () => onChange(list.filter((_, j) => j !== i)), children: "\u2715" })] }), _jsx(Node, { schema: element, value: item, pickMedia: pickMedia, pickMediaFiles: pickMediaFiles, onChange: (v) => onChange(list.map((x, j) => (j === i ? v : x))) })] }, i))), _jsx("button", { type: "button", className: "ak-btn", onClick: () => onChange([...list, blankFor(element)]), children: "+ Aggiungi" })] }));
+    }
+    // Foglia: la disegna il widget dichiarato, come qualsiasi altro campo.
+    const w = meta?.widget ?? "text";
+    const Field = fieldFor(w);
+    return (_jsx(Field, { name: label ?? "", meta: { ...(meta ?? { label: label ?? "", widget: w }), label: label ?? meta?.label ?? "" }, value: value, onChange: onChange, pickMedia: pickMedia, pickMediaFiles: pickMediaFiles }));
+}
+/* Il widget registrato riceve lo SCHEMA del campo attraverso `meta.schema`, che SchemaForm gli
+ * passa: senza, non potrebbe sapere che forma abbiano i figli. */
+registerField("objectList", ({ meta, value, onChange, pickMedia, pickMediaFiles }) => {
+    const schema = meta.schema;
+    if (!schema)
+        return _jsx("p", { className: "ak-error", children: "objectList senza schema: va passato da SchemaForm." });
+    return (_jsxs("fieldset", { className: "ak-group ol", children: [_jsx("legend", { className: "ak-legend", children: meta.label }), meta.hint && _jsx("p", { className: "ak-hint", children: meta.hint }), _jsx(Node, { schema: schema, value: value, onChange: onChange, pickMedia: pickMedia, pickMediaFiles: pickMediaFiles })] }));
+});

package/dist/form/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./SchemaForm.js";
+export * from "./registry.js";
+export * from "./MediaBrowser.js";
+export * from "./MediaPicker.js";
+export * from "./Trash.js";
+export * from "./prose/ProseField.js";
+export * from "./prose/ProseBar.js";
+export * from "./prose/pages.js";

package/dist/form/index.js

@@ -0,0 +1,8 @@
+export * from "./SchemaForm.js";
+export * from "./registry.js";
+export * from "./MediaBrowser.js";
+export * from "./MediaPicker.js";
+export * from "./Trash.js";
+export * from "./prose/ProseField.js";
+export * from "./prose/ProseBar.js";
+export * from "./prose/pages.js";

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

@@ -0,0 +1,4 @@
+import type { MediaLibrary } from "./useMediaLibrary.js";
+export declare function Lightbox({ lib }: {
+    lib: MediaLibrary;
+}): import("react").JSX.Element | null;

package/dist/form/media/Lightbox.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* La foto a schermo intero.
+ *
+ * Serve a guardare, non a modificare: fondo nero, l'immagine intera senza tagli, e in alto le
+ * tre sole cose che si vogliono fare mentre la si guarda — scaricarla, sapere cos'è, buttarla.
+ *
+ * «Info» chiede al server DOVE è usata quella foto, e lo fa solo quando lo si apre: è la domanda
+ * che ci si pone un istante prima di cestinare, ed è l'unica risposta che il pannello non può
+ * dedurre da solo. (La stessa domanda la fa `remove` prima di cancellare — qui è per guardare,
+ * là per avvertire.)
+ */
+import { useEffect, useState } from "react";
+import { api } from "../../api.js";
+/* Tre icone, disegnate qui: una libreria di icone per tre tratti porterebbe un tema e un altro
+ * modo di dire "colore" che non passa dalle custom property. */
+const S = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
+const IcoDown = () => _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: _jsx("path", { ...S, d: "M8 2.5v8m-3.5-3.5L8 10.5 11.5 7M3 13.5h10" }) });
+const IcoInfo = () => _jsxs("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: [_jsx("circle", { ...S, cx: "8", cy: "8", r: "6" }), _jsx("path", { ...S, d: "M8 7.2v4M8 4.8v.6" })] });
+const IcoTrash = () => _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: _jsx("path", { ...S, d: "M3 4.5h10M6 4.5V3h4v1.5M4.5 4.5 5 13.5h6l.5-9" }) });
+const fmtSize = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${Math.round(n / 1024)} KB` : `${(n / 1048576).toFixed(1)} MB`);
+const fmtDate = (s) => s ? new Date(s).toLocaleString("it-IT", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" }) : "—";
+export function Lightbox({ lib }) {
+    const i = lib.viewing;
+    const file = i === null ? undefined : lib.shown[i];
+    const [info, setInfo] = useState(false);
+    const [usage, setUsage] = useState(null);
+    const [usageError, setUsageError] = useState(false);
+    // Tastiera: Esc chiude, le frecce scorrono. Su un visore a schermo intero è il modo in cui
+    // ci si aspetta di muoversi, e senza si è costretti a mirare due bottoni piccoli.
+    useEffect(() => {
+        if (i === null)
+            return;
+        const on = (e) => {
+            if (e.key === "Escape")
+                lib.view(null);
+            else if (e.key === "ArrowRight")
+                lib.step(1);
+            else if (e.key === "ArrowLeft")
+                lib.step(-1);
+        };
+        addEventListener("keydown", on);
+        return () => removeEventListener("keydown", on);
+    }, [i, lib]);
+    // L'uso si richiede per la foto che si sta guardando, non una volta per tutte.
+    useEffect(() => {
+        setUsage(null);
+        setUsageError(false);
+        if (!info || !file)
+            return;
+        let alive = true;
+        api.usage({ keys: [file.key] })
+            .then((u) => { if (alive)
+            setUsage(u.pages ?? []); })
+            .catch(() => {
+            if (alive) {
+                setUsage([]);
+                setUsageError(true);
+            }
+        });
+        return () => { alive = false; };
+    }, [info, file?.key]);
+    if (i === null || !file)
+        return null;
+    const folder = lib.prefix.replace(/\/$/, "") || "tutte le foto";
+    return (_jsxs("div", { className: "lb", onClick: (e) => { if (e.target === e.currentTarget)
+            lib.view(null); }, children: [_jsxs("header", { className: "lb-top", children: [_jsxs("button", { className: "lb-btn", onClick: () => lib.view(null), children: ["\u2039 Torna a ", folder] }), _jsxs("div", { className: "lb-id", children: [_jsx("span", { className: "lb-name", children: file.name }), _jsxs("span", { className: "lb-count", children: [i + 1, " / ", lib.shown.length] })] }), _jsxs("div", { className: "lb-tools", children: [_jsx("a", { className: "lb-btn", href: file.url, download: file.name, title: "Scarica", children: _jsx(IcoDown, {}) }), _jsx("button", { className: "lb-btn" + (info ? " is-on" : ""), onClick: () => setInfo((v) => !v), title: "Informazioni", children: _jsx(IcoInfo, {}) }), lib.mode === "manage" && (_jsx("button", { className: "lb-btn", onClick: () => void lib.remove([file.key]), title: "Cestina", children: _jsx(IcoTrash, {}) }))] })] }), _jsxs("div", { className: "lb-stage", onClick: (e) => { if (e.target === e.currentTarget)
+                    lib.view(null); }, children: [_jsx("button", { className: "lb-nav lb-prev", disabled: i === 0, onClick: () => lib.step(-1), "aria-label": "Precedente", children: "\u2039" }), _jsx("img", { className: "lb-img", src: file.url, alt: file.name }), _jsx("button", { className: "lb-nav lb-next", disabled: i === lib.shown.length - 1, onClick: () => lib.step(1), "aria-label": "Successiva", children: "\u203A" })] }), info && (_jsx("aside", { className: "lb-info", children: _jsxs("dl", { children: [_jsx("dt", { children: "File" }), _jsx("dd", { children: file.name }), _jsx("dt", { children: "Cartella" }), _jsx("dd", { children: lib.prefix || "(radice)" }), _jsx("dt", { children: "Dimensioni" }), _jsx("dd", { children: file.w && file.h ? `${file.w} × ${file.h} px` : "—" }), _jsx("dt", { children: "Peso" }), _jsx("dd", { children: fmtSize(file.size) }), _jsx("dt", { children: "Scatto" }), _jsx("dd", { children: fmtDate(file.capturedAt) }), _jsx("dt", { children: "Caricata" }), _jsx("dd", { children: fmtDate(file.uploaded) }), _jsx("dt", { children: "Usata in" }), _jsx("dd", { children: usageError
+                                ? "controllo non disponibile"
+                                : usage === null ? "…" : usage.length ? usage.join(", ") : "nessuna sorgente" })] }) }))] }));
+}

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

@@ -0,0 +1,20 @@
+import type { MediaLibrary } from "./useMediaLibrary.js";
+export declare const DRAG_TYPE = "application/x-adminkit-keys";
+export declare const DRAG_FOLDERS = "application/x-adminkit-prefixes";
+/** Legge i due tipi e li rimette insieme: chi riceve tratta file e cartelle nello stesso modo. */
+export declare function readDragged(dt: DataTransfer): string[];
+export declare function FolderMenu({ lib, prefix, label, openTo }: {
+    lib: MediaLibrary;
+    prefix: string;
+    label: string;
+    openTo?: "left" | "auto";
+}): import("react").JSX.Element;
+export declare function MediaFolders({ lib, trash }: {
+    lib: MediaLibrary;
+    /** `leave` riporta ai media: dal cestino, cliccare una cartella deve anche USCIRE dal cestino. */
+    trash?: {
+        active: boolean;
+        open: () => void;
+        leave: () => void;
+    };
+}): import("react").JSX.Element;

package/dist/form/media/MediaFolders.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Le cartelle del bucket: nome e quante foto contengono.
+ *
+ * IL NOME CHE SI VEDE È QUELLO SCELTO. In R2 la cartella è un pezzo di chiave, e quella chiave
+ * finisce dentro gli URL pubblici delle immagini: dev'essere uno slug. Ma lo slug è un dettaglio
+ * del bucket, e chi ha scritto «Hospitality & Interiors» non deve ritrovarsi
+ * «hospitality-interiors» sullo schermo. L'etichetta vive nei metadati del `.keep` della
+ * cartella; chi non ce l'ha — le cartelle nate prima — mostra il suo slug, come sempre.
+ *
+ * Sono anche i BERSAGLI dello spostamento — si trascina una foto (o una selezione) sopra una
+ * cartella e il file si sposta davvero dentro R2, con i riferimenti nelle pagine riscritti nello
+ * stesso giro. Il bersaglio si illumina mentre ci passi sopra: senza, non si capisce se il drop
+ * sta per funzionare, e uno spostamento andato a vuoto sembra un bug.
+ *
+ * «Tutte» accetta solo CARTELLE: è così che una sottocartella torna al primo livello. Una foto
+ * no — la Function rifiuta una destinazione vuota per un file, e chi ce la lascia cadere se lo
+ * sente dire invece di veder sparire il gesto nel nulla.
+ */
+import { useEffect, useState } from "react";
+export const DRAG_TYPE = "application/x-adminkit-keys";
+/* Le CARTELLE viaggiano con un tipo loro. Durante un trascinamento i VALORI non si possono
+ * leggere — il browser li protegge fino al rilascio — ma i TIPI sì: è l'unico modo di sapere
+ * *mentre* si trascina che quel che si ha in mano è una cartella, e quindi di mostrare il
+ * bersaglio «porta al primo livello» solo quando ha senso. */
+export const DRAG_FOLDERS = "application/x-adminkit-prefixes";
+/** Legge i due tipi e li rimette insieme: chi riceve tratta file e cartelle nello stesso modo. */
+export function readDragged(dt) {
+    const out = [];
+    for (const t of [DRAG_TYPE, DRAG_FOLDERS]) {
+        try {
+            out.push(...JSON.parse(dt.getData(t) || "[]"));
+        }
+        catch { /* niente */ }
+    }
+    return out;
+}
+/* `openTo` decide da che parte si apre il menu, e non è un vezzo: i contenitori che lo ospitano
+ * hanno `overflow: auto`, quindi un menu che esce dal loro bordo viene TAGLIATO. Nella colonna
+ * delle cartelle c'è posto solo verso sinistra ("left"); su una cella della griglia dipende da
+ * dove sta la cella, e si guarda al momento di aprirlo ("auto"). */
+export function FolderMenu({ lib, prefix, label, openTo = "left" }) {
+    const [open, setOpen] = useState(false);
+    const [renaming, setRenaming] = useState(false);
+    const [name, setName] = useState(label);
+    const [side, setSide] = useState("left");
+    const close = () => { setOpen(false); setRenaming(false); };
+    return (_jsxs("span", { className: "mf-actions", children: [_jsx("button", { className: "mf-more", title: "Altro", onClick: (e) => {
+                    e.stopPropagation();
+                    if (openTo === "auto") {
+                        const r = e.currentTarget.getBoundingClientRect();
+                        setSide(r.left < window.innerWidth / 2 ? "right" : "left");
+                    }
+                    setName(label);
+                    setOpen((v) => !v);
+                    setRenaming(false);
+                }, children: "\u2022\u2022\u2022" }), open && !renaming && (_jsxs("div", { className: `mf-menu is-${side}`, onMouseLeave: close, children: [_jsx("button", { onClick: () => setRenaming(true), children: "Rinomina\u2026" }), _jsx("button", { className: "mf-danger", onClick: () => { close(); void lib.removeFolder(prefix); }, children: "Elimina la cartella\u2026" })] })), open && renaming && (_jsxs("div", { className: `mf-menu mf-menu-form is-${side}`, children: [_jsx("input", { className: "ak-input", autoFocus: true, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Escape")
+                                close();
+                            if (e.key === "Enter" && name.trim()) {
+                                close();
+                                void lib.renameFolder(prefix, name);
+                            }
+                        } }), _jsx("span", { className: "ak-hint", children: "Cambia anche l'indirizzo delle foto dentro. Le pagine del sito vengono aggiornate; i link scritti a mano altrove no." }), _jsxs("div", { className: "mf-menu-row", children: [_jsx("button", { className: "ak-btn ak-btn-primary", disabled: !name.trim(), onClick: () => { close(); void lib.renameFolder(prefix, name); }, children: "Rinomina" }), _jsx("button", { className: "ak-btn ak-btn-quiet", onClick: close, children: "Annulla" })] })] }))] }));
+}
+const IcoTrash = () => (_jsx("svg", { className: "mf-ico", viewBox: "0 0 16 16", width: "15", height: "15", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4.5h10M6 4.5V3h4v1.5M4.5 4.5 5 13.5h6l.5-9" }) }));
+/* `trash` è facoltativo perché il cestino è una ROTTA, e le rotte le conosce l'applicazione, non
+ * questo componente. Sta qui in fondo, sotto «+ Cartella», perché è l'ultimo posto dove finiscono
+ * le foto: nella colonna che elenca dove stanno, non in una barra da un'altra parte. */
+export function MediaFolders({ lib, trash }) {
+    const [over, setOver] = useState(null);
+    const [draggingFolder, setDraggingFolder] = useState(false);
+    const canDrop = lib.mode === "manage";
+    /* Nel cestino non si è in nessuna cartella: senza questo, «Tutte» resterebbe accesa insieme a
+       «Cestino» e la colonna indicherebbe due posti nello stesso momento. */
+    const here = (p) => !trash?.active && (p === "" ? lib.prefix === "" : lib.prefix.startsWith(p));
+    /* Dal cestino, aprire una cartella deve anche riportare ai media: cambiare la cartella e
+       restare a guardare il cestino è un click che sembra non fare niente. */
+    const goTo = (p) => { if (trash?.active)
+        trash.leave(); lib.go(p); };
+    const drop = (dest) => (e) => {
+        setOver(null);
+        if (!canDrop)
+            return;
+        e.preventDefault();
+        const ids = readDragged(e.dataTransfer);
+        if (ids.length)
+            void lib.move(ids, dest);
+    };
+    /* Vero mentre si trascina una cartella, ovunque nella pagina. Serve a far comparire il
+       bersaglio del primo livello solo in quel momento: una riga fissa «porta qui» sarebbe rumore
+       per il 99% del tempo, e prima quel bersaglio non esisteva proprio — la sola via era «Tutte»,
+       che nessuno poteva indovinare. */
+    useEffect(() => {
+        if (!canDrop)
+            return;
+        const start = (e) => setDraggingFolder(!!e.dataTransfer?.types.includes(DRAG_FOLDERS));
+        const end = () => setDraggingFolder(false);
+        addEventListener("dragstart", start);
+        addEventListener("dragend", end);
+        addEventListener("drop", end);
+        return () => {
+            removeEventListener("dragstart", start);
+            removeEventListener("dragend", end);
+            removeEventListener("drop", end);
+        };
+    }, [canDrop]);
+    return (_jsxs("div", { className: "mf", children: [_jsx("ul", { className: "mf-list", children: _jsx("li", { className: "mf-item mf-loose" + (here("") ? " is-on" : ""), children: _jsx("button", { className: "mf-open", onClick: () => goTo(""), children: _jsx("span", { className: "mf-name", children: "Senza cartella" }) }) }) }), _jsx("ul", { className: "mf-list", children: lib.folders.map((f) => (_jsxs("li", { 
+                    /* Accesa anche quando si è DENTRO una sua sottocartella: la colonna risponde a
+                       «dove sono», e stando in food/piatti-2024/ la risposta è ancora food. */
+                    className: "mf-item"
+                        + (here(f.prefix) ? " is-on" : "")
+                        + (over === f.prefix ? " is-over" : ""), onDragOver: (e) => { if (canDrop) {
+                        e.preventDefault();
+                        setOver(f.prefix);
+                    } }, onDragLeave: () => setOver((p) => (p === f.prefix ? null : p)), onDrop: drop(f.prefix), children: [_jsxs("button", { className: "mf-open", onClick: () => goTo(f.prefix), children: [_jsx("span", { className: "mf-name", children: f.label || f.name }), f.count != null && _jsx("span", { className: "mf-count", children: f.count })] }), canDrop && _jsx(FolderMenu, { lib: lib, prefix: f.prefix, label: f.label || f.name })] }, f.prefix))) }), draggingFolder && (_jsx("div", { className: "mf-root-drop" + (over === "__root" ? " is-over" : ""), onDragOver: (e) => { e.preventDefault(); setOver("__root"); }, onDragLeave: () => setOver((p) => (p === "__root" ? null : p)), onDrop: drop(""), children: "Porta al primo livello" })), canDrop && (_jsx("button", { className: "ak-btn ak-btn-quiet mf-new", onClick: () => void lib.newFolder(""), children: "+ Cartella" })), trash && (_jsx("ul", { className: "mf-list mf-tail", children: _jsx("li", { className: "mf-item" + (trash.active ? " is-on" : ""), children: _jsxs("button", { className: "mf-open", onClick: trash.open, children: [_jsx(IcoTrash, {}), _jsx("span", { className: "mf-name", children: "Cestino" })] }) }) }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { AssetFile } from "../../api.js";
+import { type MediaLibrary } from "./useMediaLibrary.js";
+export declare function MediaGrid({ lib, onPick, onCancel }: {
+    lib: MediaLibrary;
+    /** Solo in modalità "pick": chi ha aperto il modale riceve i file scelti. */
+    onPick?: (files: AssetFile[]) => void;
+    onCancel?: () => void;
+}): import("react").JSX.Element;

package/dist/form/media/MediaGrid.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* La griglia delle foto.
+ *
+ * Tre scelte che vale la pena spiegare, perché sono il motivo per cui questa griglia esiste:
+ *
+ * 1. **Le foto non si tagliano.** Prima ogni miniatura era un quadrato con `object-fit: cover`:
+ *    un verticale veniva mostrato come un quadrato, e per riconoscere una foto in mezzo a cento
+ *    bisognava aprirla. Ogni cella ha un'altezza fissa e dentro ci sta l'immagine intera, con il
+ *    suo rapporto — che è anche il modo in cui la si riconosce da lontano.
+ * 2. **Il click apre, la casella seleziona.** Sono due gesti diversi con due bersagli diversi.
+ *    Nel modale di scelta invece il click seleziona: là aprire non serve a niente.
+ * 3. **La barra in alto cambia forma quando c'è una selezione.** Le azioni che valgono solo su
+ *    una selezione non stanno sullo schermo quando non c'è niente di selezionato.
+ *
+ * VISORE E DIALOGO STANNO FUORI DA `.mg-wrap`, e non è pignoleria: `.mg-wrap` è una zona di
+ * rilascio che carica i file lasciati cadere sopra, e gli eventi React risalgono l'albero dei
+ * COMPONENTI, non quello visivo. Con il dialogo dentro, un drop sulla sua area finiva anche a
+ * `.mg-wrap`: stessi file caricati due volte, e `uniqueKey` li salvava come `foto.jpg` e
+ * `foto-2.jpg`. Una sovrapposizione non deve mai essere figlia di una zona di rilascio.
+ */
+import { useState } from "react";
+import { SORT_LABELS } from "./useMediaLibrary.js";
+import { DRAG_TYPE, DRAG_FOLDERS, readDragged, FolderMenu } from "./MediaFolders.js";
+import { Lightbox } from "./Lightbox.js";
+import { UploadDialog } from "./UploadDialog.js";
+/* Scaricare più file significa più download: il browser ne consente una raffica breve dallo
+ * stesso gesto dell'utente, e non c'è modo di fare uno zip senza un endpoint che lo costruisca. */
+function download(urls) {
+    urls.forEach(({ url, name }, i) => {
+        setTimeout(() => {
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = name;
+            a.style.display = "none";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+        }, i * 250);
+    });
+}
+function MoveMenu({ lib, keys }) {
+    const [open, setOpen] = useState(false);
+    const dest = lib.folders.filter((f) => f.prefix !== lib.prefix);
+    return (_jsxs("span", { className: "mg-menu-wrap", children: [_jsx("button", { className: "mg-act", onClick: () => setOpen((v) => !v), disabled: !dest.length, children: "Sposta in\u2026" }), open && (_jsx("div", { className: "mg-menu", onMouseLeave: () => setOpen(false), children: dest.map((f) => (_jsxs("button", { onClick: () => { setOpen(false); void lib.move(keys, f.prefix); }, children: [f.label || f.name, " ", _jsx("span", { className: "mf-count", children: f.count })] }, f.prefix))) }))] }));
+}
+/* Una cartella dentro la griglia. Fa tre cose che un chip non poteva fare: si apre, si
+ * seleziona insieme alle foto, e si trascina — dentro un'altra cartella qui, o sulla colonna di
+ * sinistra per riportarla al primo livello. Ed è anche un BERSAGLIO: ci si lasciano cadere foto
+ * o altre cartelle. */
+function FolderCell({ lib, folder, manage }) {
+    const [over, setOver] = useState(false);
+    const on = lib.selected.has(folder.prefix);
+    const name = folder.label || folder.name;
+    return (_jsxs("figure", { className: "mg-item mg-folder" + (on ? " is-on" : "") + (over ? " is-over" : ""), draggable: manage, onDragStart: (e) => {
+            const ids = on && lib.selected.size ? [...lib.selected] : [folder.prefix];
+            // Due tipi, non uno: durante il trascinamento i valori non si leggono, i tipi sì —
+            // ed è così che la colonna sa di avere in mano una cartella e offre il primo livello.
+            const files = ids.filter((i) => !i.endsWith("/"));
+            const dirs = ids.filter((i) => i.endsWith("/"));
+            if (files.length)
+                e.dataTransfer.setData(DRAG_TYPE, JSON.stringify(files));
+            if (dirs.length)
+                e.dataTransfer.setData(DRAG_FOLDERS, JSON.stringify(dirs));
+            e.dataTransfer.effectAllowed = "move";
+        }, 
+        /* Si accende per tutto TRANNE i file trascinati dal Finder: quelli devono continuare a
+           salire fino alla griglia, che li carica. Il controllo è "non sono file di sistema" e non
+           "è roba nostra": il tipo dei nostri dati non è leggibile in ogni passaggio del trascinamento,
+           e un bersaglio che non si accende sembra un bersaglio che non funziona. */
+        onDragOver: (e) => {
+            if (!manage || e.dataTransfer.types.includes("Files"))
+                return;
+            /* Si accende anche quando la cartella trascinata è questa stessa: durante il
+               trascinamento i valori non sono leggibili, quindi non si può sapere. Il rifiuto
+               arriva al rilascio, con un messaggio che dice perché. */
+            e.preventDefault();
+            setOver(true);
+        }, onDragLeave: () => setOver(false), onDrop: (e) => {
+            setOver(false);
+            if (!manage)
+                return;
+            const ids = readDragged(e.dataTransfer);
+            if (!ids.length)
+                return; // non è roba nostra: lascia fare a chi sta sopra
+            e.preventDefault();
+            void lib.move(ids, folder.prefix);
+        }, children: [_jsxs("div", { className: "mg-frame", onClick: () => lib.go(folder.prefix), children: [_jsx("svg", { className: "mg-folder-ico", viewBox: "0 0 48 40", "aria-hidden": "true", children: _jsx("path", { d: "M2 8a4 4 0 0 1 4-4h12l4 5h20a4 4 0 0 1 4 4v21a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8Z" }) }), manage && (_jsx("button", { className: "mg-check", "aria-label": on ? "Deseleziona" : "Seleziona", onClick: (e) => { e.stopPropagation(); lib.toggle(folder.prefix); }, children: on ? "✓" : "" }))] }), _jsx("figcaption", { className: "mg-cap", title: name, children: name }), manage && (_jsx("span", { className: "mg-folder-menu", children: _jsx(FolderMenu, { lib: lib, prefix: folder.prefix, label: name, openTo: "auto" }) }))] }));
+}
+export function MediaGrid({ lib, onPick, onCancel }) {
+    const manage = lib.mode === "manage";
+    const sel = lib.selected;
+    const allOn = lib.shown.length > 0 && lib.shown.every((f) => sel.has(f.key));
+    /* `dragDepth` e non un booleano: `dragenter`/`dragleave` scattano anche passando da un figlio
+       all'altro, quindi con un booleano la zona si spegne mentre ci si muove sopra. Si conta. */
+    const [dragDepth, setDragDepth] = useState(0);
+    /* Nostro o del Finder? Se il trascinamento porta il nostro tipo è uno spostamento interno e la
+       zona di caricamento non c'entra. Il controllo è "NON è roba nostra" invece di "è un file":
+       `types` non contiene "Files" allo stesso modo in ogni browser, e con quel controllo il
+       caricamento non partiva affatto dove il nome era diverso. */
+    const external = (e) => manage && !e.dataTransfer.types.includes(DRAG_TYPE) && !e.dataTransfer.types.includes(DRAG_FOLDERS);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mg-wrap" + (dragDepth > 0 ? " is-dropping" : ""), 
+                /* Trascinare file dal Finder sulla griglia carica, senza passare dal dialogo: è il gesto
+                   più corto e va lasciato funzionare. Il dialogo serve a chi cerca un bottone.
+                   La zona è ALTA QUANTO IL PANNELLO (`.mg-wrap { min-height: 100% }`): prima era alta
+                   quanto il suo contenuto, quindi in una cartella vuota — cioè proprio quando si carica —
+                   erano quaranta pixel in cima allo schermo e il resto della pagina non riceveva niente. */
+                onDragEnter: (e) => { if (external(e)) {
+                    e.preventDefault();
+                    setDragDepth((n) => n + 1);
+                } }, onDragOver: (e) => { if (external(e))
+                    e.preventDefault(); }, onDragLeave: (e) => { if (external(e))
+                    setDragDepth((n) => Math.max(0, n - 1)); }, onDrop: (e) => {
+                    setDragDepth(0);
+                    if (!manage || !e.dataTransfer.files.length)
+                        return;
+                    e.preventDefault();
+                    void lib.upload(e.dataTransfer.files);
+                }, children: [dragDepth > 0 && (_jsx("div", { className: "mg-dropzone", children: _jsxs("span", { children: ["Rilascia per caricare in ", _jsx("strong", { children: lib.prefix ? lib.labelOf(lib.prefix) : "Senza cartella" })] }) })), _jsx("header", { className: "mg-bar", children: sel.size === 0 ? (_jsxs(_Fragment, { children: [(manage || lib.multiple) && (_jsxs("label", { className: "mg-all", children: [_jsx("input", { type: "checkbox", checked: false, ref: (el) => { if (el)
+                                                el.indeterminate = false; }, onChange: () => lib.setAll(true) }), _jsx("span", { children: "Seleziona tutto" })] })), _jsx("span", { className: "ak-spacer" }), _jsxs("label", { className: "ak-hint", children: ["ordina per", " ", _jsx("select", { className: "mg-sort", value: lib.sortKey, onChange: (e) => lib.setSort(e.target.value), children: Object.entries(SORT_LABELS).map(([k, l]) => _jsx("option", { value: k, children: l }, k)) }), _jsx("button", { className: "ak-icon", onClick: lib.flipDir, title: "Inverti l'ordine", children: lib.sortDir === "asc" ? "↑" : "↓" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("label", { className: "mg-all", children: [_jsx("input", { type: "checkbox", checked: allOn, ref: (el) => { if (el)
+                                                el.indeterminate = !allOn; }, onChange: () => lib.setAll(!allOn) }), _jsxs("span", { children: [sel.size, " selezionate"] })] }), !allOn && lib.shown.length > sel.size && (_jsxs("button", { className: "mg-act is-link", onClick: () => lib.setAll(true), children: ["Seleziona tutte le ", lib.shown.length] })), manage && (_jsxs(_Fragment, { children: [lib.shown.some((f) => sel.has(f.key)) && (_jsx("button", { className: "mg-act", onClick: () => download(lib.shown.filter((f) => sel.has(f.key)).map((f) => ({ url: f.url, name: f.name }))), children: "Scarica" })), _jsx(MoveMenu, { lib: lib, keys: [...sel] }), _jsx("button", { className: "mg-act is-danger", onClick: () => void lib.remove([...sel]), children: "Elimina" })] })), _jsx("span", { className: "ak-spacer" }), _jsx("button", { className: "mg-act", onClick: () => lib.setAll(false), children: "Deseleziona" })] })) }), lib.error && _jsx("p", { className: "ak-error", onClick: lib.clearError, children: lib.error }), lib.progress && (_jsxs("p", { className: "mg-progress", children: [lib.progress.verb, " ", lib.progress.done, "/", lib.progress.total, "\u2026 \u2014 non chiudere la pagina"] })), lib.prefix !== "" && (manage || lib.subfolders.length > 0) && (_jsxs("section", { className: "mg-section", children: [_jsxs("div", { className: "mg-section-head", children: [_jsx("h2", { className: "mg-section-title", children: "Cartelle" }), manage && (_jsx("button", { className: "mg-act", onClick: () => void lib.newFolder(lib.prefix), children: "+ Cartella" }))] }), lib.subfolders.length > 0 && (_jsx("div", { className: "mg", children: lib.subfolders.map((f) => (_jsx(FolderCell, { lib: lib, folder: f, manage: manage }, f.prefix))) }))] })), lib.prefix !== "" && (manage || lib.subfolders.length > 0) && lib.shown.length > 0 && (_jsx("h2", { className: "mg-section-title", children: "Foto" })), _jsx("div", { className: "mg", children: lib.shown.map((f, i) => {
+                            const on = sel.has(f.key);
+                            return (_jsxs("figure", { className: "mg-item" + (on ? " is-on" : ""), draggable: manage, onDragStart: (e) => {
+                                    // Si trascina la SELEZIONE se la foto ne fa parte, altrimenti solo quella.
+                                    const ids = on && sel.size ? [...sel] : [f.key];
+                                    const files = ids.filter((i) => !i.endsWith("/"));
+                                    const dirs = ids.filter((i) => i.endsWith("/"));
+                                    if (files.length)
+                                        e.dataTransfer.setData(DRAG_TYPE, JSON.stringify(files));
+                                    if (dirs.length)
+                                        e.dataTransfer.setData(DRAG_FOLDERS, JSON.stringify(dirs));
+                                    e.dataTransfer.effectAllowed = "move";
+                                }, children: [_jsxs("div", { className: "mg-frame", onClick: () => (manage ? lib.view(i) : lib.toggle(f.key)), children: [_jsx("img", { className: "mg-img", src: f.url, alt: "", loading: "lazy", 
+                                                /* Il rapporto è noto prima che l'immagine arrivi (lo dà l'elenco): la cella
+                                                   riserva subito l'ingombro giusto e la griglia non salta mentre si carica. */
+                                                style: { aspectRatio: f.w && f.h ? `${f.w} / ${f.h}` : "3 / 2" } }), _jsx("button", { className: "mg-check", "aria-label": on ? "Deseleziona" : "Seleziona", onClick: (e) => { e.stopPropagation(); lib.toggle(f.key); }, children: on ? "✓" : "" })] }), _jsx("figcaption", { className: "mg-cap", title: f.name, children: f.name })] }, f.key));
+                        }) }), !lib.busy && lib.shown.length === 0 && (_jsx("p", { className: "ak-hint", children: lib.prefix === "" && lib.folders.length
+                            ? "Nessuna foto fuori dalle cartelle. Scegline una qui a fianco."
+                            : "Nessun file qui." })), lib.mode === "pick" && (_jsxs("footer", { className: "mg-foot", children: [_jsxs("span", { className: "ak-hint", children: [sel.size, " selezionate"] }), _jsx("span", { className: "ak-spacer" }), _jsx("button", { className: "ak-btn ak-btn-quiet", onClick: () => onCancel?.(), children: "Annulla" }), _jsxs("button", { className: "ak-btn ak-btn-primary", disabled: !sel.size, onClick: () => onPick?.(lib.shown.filter((f) => sel.has(f.key))), children: ["Usa ", sel.size > 0 ? `(${sel.size})` : ""] })] }))] }), _jsx(Lightbox, { lib: lib }), manage && _jsx(UploadDialog, { lib: lib })] }));
+}

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

@@ -0,0 +1,4 @@
+import type { MediaLibrary } from "./useMediaLibrary.js";
+export declare function UploadDialog({ lib }: {
+    lib: MediaLibrary;
+}): import("react").JSX.Element | null;

package/dist/form/media/UploadDialog.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Il dialogo di caricamento.
+ *
+ * Dice sempre DOVE finiranno le foto. Il caricamento va nella cartella che si sta guardando, e
+ * senza scriverlo è una scommessa: si carica dalla vista «Tutte» e le foto atterrano nella
+ * radice, dove nessuno le cerca più.
+ *
+ * Si chiude da solo quando ha finito, ma solo se è andato tutto bene: se qualcosa non è passato
+ * il messaggio resta sullo schermo invece di sparire con la finestra.
+ */
+import { useRef, useState } from "react";
+export function UploadDialog({ lib }) {
+    const input = useRef(null);
+    const [over, setOver] = useState(false);
+    if (!lib.uploadOpen)
+        return null;
+    const send = async (list) => {
+        if (!list || !list.length)
+            return;
+        // `upload` dice se sono passati tutti. Guardare `lib.error` da qui non funzionerebbe: è il
+        // valore catturato prima del render, quindi sarebbe sempre uguale a sé stesso.
+        if (await lib.upload(list))
+            lib.setUploadOpen(false);
+    };
+    return (_jsx("div", { className: "up", onClick: (e) => { if (e.target === e.currentTarget)
+            lib.setUploadOpen(false); }, children: _jsxs("div", { className: "up-panel", children: [_jsx("button", { className: "up-close", onClick: () => lib.setUploadOpen(false), "aria-label": "Chiudi", children: "\u00D7" }), _jsxs("div", { className: "up-drop" + (over ? " is-over" : ""), 
+                    /* `stopPropagation` oltre a `preventDefault`: il dialogo è una sovrapposizione, ma
+                       per React resta un nodo dell'albero e l'evento continuerebbe a salire. Oggi sopra
+                       non c'è più nessuna zona di rilascio (il dialogo è fuori da `.mg-wrap`), e questa
+                       riga serve a che non torni a essercene una senza che nessuno se ne accorga. */
+                    onDragOver: (e) => { e.preventDefault(); e.stopPropagation(); setOver(true); }, onDragLeave: () => setOver(false), onDrop: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setOver(false);
+                        void send(e.dataTransfer.files);
+                    }, children: [_jsxs("svg", { className: "up-cloud", viewBox: "0 0 48 32", width: "56", height: "38", "aria-hidden": "true", children: [_jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round", d: "M38 30a9 9 0 0 0 .6-18A13 13 0 0 0 13 13.6 8 8 0 0 0 10 30" }), _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M24 30V12m-6 6 6-6 6 6" })] }), _jsx("p", { className: "up-hint", children: "Trascina qui le foto da caricare" }), _jsx("input", { ref: input, type: "file", multiple: true, accept: "image/*,video/*", hidden: true, onChange: (e) => void send(e.target.files) }), _jsx("button", { className: "ak-btn ak-btn-primary", onClick: () => input.current?.click(), children: "Scegli i file" })] }), _jsxs("p", { className: "up-dest", children: ["Finiranno in ", _jsx("strong", { children: lib.prefix ? lib.labelOf(lib.prefix) : "Senza cartella (la radice del bucket)" })] }), lib.progress && (_jsxs("p", { className: "ak-hint", children: [lib.progress.verb, " ", lib.progress.done, "/", lib.progress.total, "\u2026"] })), lib.error && _jsx("p", { className: "ak-error", children: lib.error })] }) }));
+}

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

@@ -0,0 +1,55 @@
+import { type AssetFile, type AssetFolder } from "../../api.js";
+export type SortKey = "uploaded" | "capturedAt" | "name" | "size";
+export declare const SORT_LABELS: Record<SortKey, string>;
+export interface MediaLibrary {
+    mode: "manage" | "pick";
+    multiple: boolean;
+    prefix: string;
+    folders: AssetFolder[];
+    subfolders: AssetFolder[];
+    shown: AssetFile[];
+    selected: Set<string>;
+    busy: boolean;
+    error: string | null;
+    /** Avanzamento di un'operazione lunga. `verb` è quello che si sta facendo ("Carico",
+     *  "Cestino", "Sposto"): senza, un'attesa di trenta secondi non dice cosa sta succedendo e
+     *  chi guarda ricarica la pagina — interrompendo l'operazione a metà. */
+    progress: {
+        done: number;
+        total: number;
+        verb: string;
+    } | null;
+    sortKey: SortKey;
+    sortDir: "asc" | "desc";
+    uploadOpen: boolean;
+    viewing: number | null;
+    go(prefix: string): void;
+    reload(): void;
+    toggle(key: string): void;
+    setAll(on: boolean): void;
+    setSort(k: SortKey): void;
+    flipDir(): void;
+    /** 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;
+    view(i: number | null): void;
+    step(delta: number): void;
+    /** File e cartelle insieme: una cartella si riconosce dalla chiave, che finisce con "/". */
+    move(ids: string[], dest: string): Promise<void>;
+    remove(ids: string[]): Promise<void>;
+    /** `parent` esplicito: chi preme il pulsante sa dove sta creando, il pulsante non lo indovina. */
+    newFolder(parent: string): Promise<void>;
+    /** Cambia il nome per esteso di una cartella — e con lui lo slug, se il nuovo è diverso. */
+    renameFolder(prefix: string, label: string): Promise<void>;
+    /** Cestina la cartella e tutto ciò che contiene. */
+    removeFolder(prefix: string): Promise<void>;
+    /** Il nome da mostrare per un prefisso: l'etichetta se c'è, altrimenti lo slug. */
+    labelOf(prefix: string): string;
+    clearError(): void;
+}
+export declare function useMediaLibrary({ mode, multiple, active, remember }: {
+    mode: "manage" | "pick";
+    multiple?: boolean;
+    active?: boolean;
+    remember?: boolean;
+}): MediaLibrary;