@cardinali-studio/adminkit 1.0.0

package/dist/app/ui/OpenCard.d.ts

@@ -0,0 +1,18 @@
+export declare function OpenCard({ id, index, total, open, thumb, title, empty, meta, kind, onToggle, actions, children, }: {
+    id: string;
+    index: number;
+    total: number;
+    open: boolean;
+    /** L'immagine della miniatura. Vuota: al suo posto l'icona del segnaposto. */
+    thumb: string;
+    title: string;
+    /** Cosa scrivere quando il titolo non c'è ancora. */
+    empty: string;
+    /** La riga sotto il titolo: quanto contenuto c'è, o dove e quando. */
+    meta?: string;
+    /** Come si chiama questa cosa, per chi naviga a tastiera o con un lettore di schermo. */
+    kind: string;
+    onToggle: () => void;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/app/ui/OpenCard.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Una card di elenco che si apre: maniglia, miniatura, titolo, e il contenuto dentro.
+ *
+ * È il guscio dei lavori del portfolio e delle edizioni dei workshop. Sono la stessa cosa a
+ * guardarle — una COSA con una sua immagine e un suo nome, che si riconosce dall'elenco e si
+ * apre per modificarla — e finché il guscio stava dentro l'editor dei lavori la seconda pagina
+ * l'avrebbe ricopiato. Qui dentro non c'è niente che sappia cosa siano un lavoro o un'edizione:
+ * riceve cosa mostrare e cosa fare, il resto lo mette chi la usa.
+ *
+ * Una alla volta la decide chi possiede l'elenco (`openAt`): con più card aperte insieme
+ * l'elenco perde la sua funzione, che è far vedere l'ordine — e l'ordine è il contenuto della
+ * pagina, non un dettaglio.
+ */
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Icon } from "./icons";
+export function OpenCard({ id, index, total, open, thumb, title, empty, meta, kind, onToggle, actions, children, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+    return (_jsxs("article", { ref: setNodeRef, className: ["pw-work", open ? "is-open" : "", isDragging ? "is-dragging" : ""].filter(Boolean).join(" "), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsxs("div", { className: "pw-work-head", children: [_jsx("button", { type: "button", className: "pw-grip", "aria-label": `Riordina ${title || empty.toLowerCase()}, posizione ${index + 1} di ${total}`, ...attributes, ...listeners, children: _jsx(Icon.grip, {}) }), _jsxs("button", { type: "button", className: "pw-work-open", "aria-expanded": open, onClick: onToggle, children: [_jsx("span", { className: "pw-thumb", children: thumb ? _jsx("img", { src: thumb, alt: "" }) : _jsx("span", { className: "pw-thumb-empty", children: _jsx(Icon.media, {}) }) }), _jsxs("span", { className: "pw-work-title", children: [_jsx("strong", { className: title ? "" : "is-empty", children: title || empty }), !!meta && _jsx("small", { children: meta })] }), _jsx("span", { className: "pw-chevron", "aria-hidden": "true", children: _jsx(Icon.chevron, {}) })] }), _jsx("div", { className: "pw-work-actions", "aria-label": `Azioni su ${kind}`, children: actions })] }), open && _jsx("div", { className: "pw-work-body", children: children })] }));
+}

package/dist/app/ui/ParagraphEditor.d.ts

@@ -0,0 +1,8 @@
+export declare const toParagraphs: (value: string) => string[];
+export declare function ParagraphEditor({ value, onChange, rows, placeholder, className, }: {
+    value: string[];
+    onChange: (next: string[]) => void;
+    rows?: number;
+    placeholder?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/app/ui/ParagraphEditor.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* Un testo su più capoversi, scritto come si scrive un testo.
+ *
+ * Il modello sotto è un ARRAY di paragrafi — nel front matter una stringa non può contenere un
+ * a capo (`yamlStr` si ferma apposta, vedi ADMIN.md §6), quindi una descrizione su più
+ * capoversi non sarebbe salvabile come stringa unica. Chi scrive però non deve saperlo: qui
+ * batte una riga vuota, come ovunque.
+ *
+ * Lo stato locale è la ragione d'essere del componente. Il valore di fuori è già spezzato e
+ * ripulito, quindi rileggerlo a ogni tasto cancellerebbe la riga vuota appena battuta —
+ * `toParagraphs` la scarta — e sarebbe impossibile andare a capo due volte. Il testo locale si
+ * risincronizza solo quando quello di fuori è DAVVERO un altro (confronto fra forme
+ * normalizzate), cioè quando a cambiarlo è stato qualcun altro: un annulla, o l'apertura di un
+ * altro elemento.
+ *
+ * Vive in `ui/` e non dentro un editor perché lo usano sia le sezioni delle gallery sia la
+ * descrizione dei lavori del portfolio. Era in `GallerySectionsEditor.tsx`: la seconda copia
+ * sarebbe stata la prima occasione per farle divergere.
+ */
+import { useEffect, useState } from "react";
+/* La textarea è `ProseField`: sopra la selezione compare la barra con grassetto, corsivo e
+   collegamento. Il valore che entra e che esce è la stessa stringa di prima — la barra scrive
+   markdown nel testo, non introduce una seconda rappresentazione. */
+import { ProseField } from "../../form/index.js";
+export const toParagraphs = (value) => value.split(/\n\s*\n/).map((paragraph) => paragraph.trim()).filter(Boolean);
+export function ParagraphEditor({ value, onChange, rows = 8, placeholder, className, }) {
+    const [text, setText] = useState(() => value.join("\n\n"));
+    useEffect(() => {
+        const outside = value.join("\n\n");
+        if (toParagraphs(text).join("\n\n") !== outside)
+            setText(outside);
+    }, [value]);
+    return (_jsx(ProseField, { className: className, rows: rows, value: text, placeholder: placeholder ?? "Scrivi il testo della sezione.\nVai a capo per iniziare un paragrafo nuovo.", onChange: (next) => {
+            setText(next);
+            onChange(toParagraphs(next));
+        } }));
+}

package/dist/app/ui/dnd.d.ts

@@ -0,0 +1 @@
+export declare function useDragSensors(): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];

package/dist/app/ui/dnd.js

@@ -0,0 +1,11 @@
+/* I sensori del trascinamento, uguali in ogni elenco del pannello.
+ *
+ * I sei pixel di soglia non sono una preferenza: senza, il click su una maniglia per aprire una
+ * card verrebbe interpretato come l'inizio di un trascinamento. Il sensore da tastiera è quello
+ * che tiene gli elenchi riordinabili anche senza mouse.
+ */
+import { KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+export function useDragSensors() {
+    return useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+}

package/dist/app/ui/icons.d.ts

@@ -0,0 +1,26 @@
+export declare const Icon: {
+    grid: () => import("react").JSX.Element;
+    home: () => import("react").JSX.Element;
+    pages: () => import("react").JSX.Element;
+    media: () => import("react").JSX.Element;
+    delivery: () => import("react").JSX.Element;
+    calendar: () => import("react").JSX.Element;
+    settings: () => import("react").JSX.Element;
+    mail: () => import("react").JSX.Element;
+    play: () => import("react").JSX.Element;
+    out: () => import("react").JSX.Element;
+    trash: () => import("react").JSX.Element;
+    gallery: () => import("react").JSX.Element;
+    doc: () => import("react").JSX.Element;
+    grip: () => import("react").JSX.Element;
+    more: () => import("react").JSX.Element;
+    plus: () => import("react").JSX.Element;
+    chevron: () => import("react").JSX.Element;
+    replace: () => import("react").JSX.Element;
+    search: () => import("react").JSX.Element;
+    eye: () => import("react").JSX.Element;
+    eyeOff: () => import("react").JSX.Element;
+    archive: () => import("react").JSX.Element;
+    sun: () => import("react").JSX.Element;
+    moon: () => import("react").JSX.Element;
+};

package/dist/app/ui/icons.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Icone della navigazione. Disegnate qui e non prese da una libreria: sono otto tratti, e una
+ * dipendenza di icone porta con sé un albero di componenti, un tema e un altro modo di dire
+ * "colore" che non passa dalle custom property.
+ *
+ * Tutte 16×16, tratto 1.5, `currentColor`: ereditano il colore della voce che le contiene, così
+ * lo stato attivo si scrive una volta sola nel CSS. */
+const P = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
+function Svg({ children }) {
+    return _jsx("svg", { className: "ico", viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: children });
+}
+export const Icon = {
+    /* La Panoramica: quattro riquadri di dimensioni diverse, cioè il bento che si trova
+       entrando. Un grafico o un cruscotto direbbero "statistiche", che è solo un pezzo. */
+    grid: () => _jsxs(Svg, { children: [_jsx("rect", { ...P, x: "2.5", y: "2.5", width: "5", height: "6.5", rx: "1" }), _jsx("rect", { ...P, x: "9", y: "2.5", width: "4.5", height: "4", rx: "1" }), _jsx("rect", { ...P, x: "2.5", y: "10.5", width: "5", height: "3", rx: "1" }), _jsx("rect", { ...P, x: "9", y: "8", width: "4.5", height: "5.5", rx: "1" })] }),
+    home: () => _jsx(Svg, { children: _jsx("path", { ...P, d: "M2.5 6.8 8 2.5l5.5 4.3V13a.5.5 0 0 1-.5.5h-3v-4h-4v4H3a.5.5 0 0 1-.5-.5V6.8Z" }) }),
+    pages: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M3.5 2.5h6l3 3v8h-9v-11Z" }), _jsx("path", { ...P, d: "M9.5 2.5v3h3" })] }),
+    media: () => _jsxs(Svg, { children: [_jsx("rect", { ...P, x: "2.5", y: "3.5", width: "11", height: "9", rx: "1" }), _jsx("path", { ...P, d: "m2.5 10 3-2.5 3 2.5 2-1.5 3 2.5" }), _jsx("circle", { ...P, cx: "6", cy: "6", r: "1" })] }),
+    delivery: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M8 2.5v7" }), _jsx("path", { ...P, d: "m5.5 7 2.5 2.5L10.5 7" }), _jsx("path", { ...P, d: "M3 11v2.5h10V11" })] }),
+    calendar: () => _jsxs(Svg, { children: [_jsx("rect", { ...P, x: "2.5", y: "3.5", width: "11", height: "10", rx: "1" }), _jsx("path", { ...P, d: "M5 2.5v2M11 2.5v2M2.5 6.5h11" }), _jsx("path", { ...P, d: "M5.2 9h.1M8 9h.1M10.8 9h.1M5.2 11.3h.1M8 11.3h.1" })] }),
+    settings: () => _jsxs(Svg, { children: [_jsx("circle", { ...P, cx: "8", cy: "8", r: "2.2" }), _jsx("path", { ...P, d: "M8 2.5v1.2M8 12.3v1.2M2.5 8h1.2M12.3 8h1.2M4.1 4.1l.9.9M11 11l.9.9M11.9 4.1l-.9.9M5 11l-.9.9" })] }),
+    mail: () => _jsxs(Svg, { children: [_jsx("rect", { ...P, x: "2.5", y: "3.5", width: "11", height: "9", rx: "1" }), _jsx("path", { ...P, d: "m2.5 5 5.5 3.5L13.5 5" })] }),
+    play: () => _jsxs(Svg, { children: [_jsx("rect", { ...P, x: "2", y: "3", width: "12", height: "8.5", rx: "1" }), _jsx("path", { ...P, d: "M5.5 14h5" }), _jsx("path", { ...P, d: "M7 6.2 9.6 7.7 7 9.2v-3Z" })] }),
+    out: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M7 3.5H3.5v9h9V9" }), _jsx("path", { ...P, d: "M9.5 2.5h4v4" }), _jsx("path", { ...P, d: "m13 3-5 5" })] }),
+    trash: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M3.5 4.5h9" }), _jsx("path", { ...P, d: "M5.5 4.5V3h5v1.5" }), _jsx("path", { ...P, d: "M4.5 4.5 5 13h6l.5-8.5" })] }),
+    gallery: () => _jsxs(Svg, { children: [_jsx("rect", { ...P, x: "2.5", y: "3.5", width: "11", height: "9", rx: "1" }), _jsx("path", { ...P, d: "M6 3.5v9M10 3.5v9" })] }),
+    doc: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M3.5 2.5h9v11h-9v-11Z" }), _jsx("path", { ...P, d: "M5.5 5.5h5M5.5 8h5M5.5 10.5h3" })] }),
+    grip: () => _jsxs(Svg, { children: [_jsx("circle", { cx: "6", cy: "4", r: "1", fill: "currentColor" }), _jsx("circle", { cx: "10", cy: "4", r: "1", fill: "currentColor" }), _jsx("circle", { cx: "6", cy: "8", r: "1", fill: "currentColor" }), _jsx("circle", { cx: "10", cy: "8", r: "1", fill: "currentColor" }), _jsx("circle", { cx: "6", cy: "12", r: "1", fill: "currentColor" }), _jsx("circle", { cx: "10", cy: "12", r: "1", fill: "currentColor" })] }),
+    more: () => _jsxs(Svg, { children: [_jsx("circle", { cx: "4", cy: "8", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "1.1", fill: "currentColor" }), _jsx("circle", { cx: "12", cy: "8", r: "1.1", fill: "currentColor" })] }),
+    plus: () => _jsx(Svg, { children: _jsx("path", { ...P, d: "M8 3.5v9M3.5 8h9" }) }),
+    /* La freccia dell'apri/chiudi. Una sola, che RUOTA con una transizione: due glifi diversi
+       scattano da uno stato all'altro e non raccontano che la card si sta aprendo. */
+    chevron: () => _jsx(Svg, { children: _jsx("path", { ...P, d: "m4.5 6.5 3.5 3.5 3.5-3.5" }) }),
+    replace: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M2.5 5h10" }), _jsx("path", { ...P, d: "m10 2.5 2.5 2.5L10 7.5" }), _jsx("path", { ...P, d: "M13.5 11h-10" }), _jsx("path", { ...P, d: "M6 8.5 3.5 11 6 13.5" })] }),
+    search: () => _jsxs(Svg, { children: [_jsx("circle", { ...P, cx: "7", cy: "7", r: "4" }), _jsx("path", { ...P, d: "m10 10 3.5 3.5" })] }),
+    eye: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M2.5 8s2.2-3.5 5.5-3.5S13.5 8 13.5 8s-2.2 3.5-5.5 3.5S2.5 8 2.5 8Z" }), _jsx("circle", { ...P, cx: "8", cy: "8", r: "1.7" })] }),
+    eyeOff: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M2.5 8s2.2-3.5 5.5-3.5S13.5 8 13.5 8s-2.2 3.5-5.5 3.5S2.5 8 2.5 8Z" }), _jsx("path", { ...P, d: "m3 3 10 10" })] }),
+    /* Il pozzetto "Spazio in uso" della Panoramica: non è uno stato buono/cattivo come le altre
+       card, quindi non ha un colore — solo la sua icona. */
+    archive: () => _jsxs(Svg, { children: [_jsx("path", { ...P, d: "M2.5 4.5 4 2.5h8l1.5 2" }), _jsx("rect", { ...P, x: "2.5", y: "4.5", width: "11", height: "8.5", rx: "1" }), _jsx("path", { ...P, d: "M6.3 8h3.4" })] }),
+    /* Il toggle del tema: mostra la destinazione del click, non lo stato corrente — si preme il
+       sole per ANDARE al chiaro. */
+    sun: () => _jsxs(Svg, { children: [_jsx("circle", { ...P, cx: "8", cy: "8", r: "3" }), _jsx("path", { ...P, d: "M8 1.8v1.6M8 12.6v1.6M14.2 8h-1.6M3.4 8H1.8M12.2 3.8l-1.1 1.1M4.9 11.1l-1.1 1.1M12.2 12.2l-1.1-1.1M4.9 4.9 3.8 3.8" })] }),
+    moon: () => _jsx(Svg, { children: _jsx("path", { ...P, d: "M10.6 2.7A6 6 0 1 0 13.3 10.4 5 5 0 0 1 10.6 2.7Z" }) }),
+};

package/dist/config.d.ts

@@ -0,0 +1,5 @@
+/** Da chiamare al bootstrap. Un sito già in produzione passa il prefisso che usava, altrimenti
+ *  le preferenze salvate nei browser di chi lo usa tutti i giorni si azzerano in silenzio. */
+export declare function setStoragePrefix(value: string): void;
+/** La chiave completa di `localStorage` per un nome logico: `storageKey("sortKey")`. */
+export declare function storageKey(name: string): string;

package/dist/config.js

@@ -0,0 +1,26 @@
+/* La poca configurazione che il motore riceve dal sito che lo monta.
+ *
+ * Esiste per una ragione sola, e vale la pena scriverla: `packages/adminkit` è il motore
+ * condiviso, e non deve contenere niente di un cliente specifico — è la voce §10.1 della
+ * checklist in `ADMIN.md`, e c'è un test che la difende (`no-site-specifics.test.js`). Le
+ * chiavi di `localStorage` erano l'ultima cosa rimasta: erano scritte con le iniziali del
+ * cliente incorporate nel nome, cioè portavano un sito dentro il motore di tutti.
+ *
+ * Perché una configurazione a livello di MODULO e non una prop: `useMediaLibrary` viene
+ * chiamato anche da `MediaBrowser`, che sta dentro il kit. Passare il prefisso come prop
+ * avrebbe voluto dire farlo attraversare un componente che non ha nessun motivo di conoscerlo,
+ * e ricordarsi di passarlo in ogni punto futuro — cioè un modo per dimenticarselo.
+ *
+ * Si imposta UNA volta al bootstrap, prima del render (vedi `admin/src/main.tsx`).
+ */
+/** Il default è neutro apposta: un sito che non configura niente non eredita il nome di un altro. */
+let prefix = "adminkit";
+/** Da chiamare al bootstrap. Un sito già in produzione passa il prefisso che usava, altrimenti
+ *  le preferenze salvate nei browser di chi lo usa tutti i giorni si azzerano in silenzio. */
+export function setStoragePrefix(value) {
+    prefix = value;
+}
+/** La chiave completa di `localStorage` per un nome logico: `storageKey("sortKey")`. */
+export function storageKey(name) {
+    return `${prefix}_${name}`;
+}

package/dist/form/MediaBrowser.d.ts

@@ -0,0 +1,13 @@
+import type { AssetFile } from "../api.js";
+export interface MediaBrowserProps {
+    /** "manage" = tutto (upload, sposta, cancella). "pick" = solo scelta. */
+    mode: "manage" | "pick";
+    multiple?: boolean;
+    onPick?: (files: AssetFile[]) => void;
+    onCancel?: () => void;
+}
+export declare function MediaBrowser({ mode, multiple, onPick, onCancel }: MediaBrowserProps): import("react").JSX.Element;
+export { useMediaLibrary } from "./media/useMediaLibrary.js";
+export type { MediaLibrary, SortKey } from "./media/useMediaLibrary.js";
+export { MediaFolders } from "./media/MediaFolders.js";
+export { MediaGrid } from "./media/MediaGrid.js";

package/dist/form/MediaBrowser.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Il browser dei media in UN pezzo solo: cartelle a sinistra, griglia a destra.
+ *
+ * È la forma che serve dentro il modale di scelta e ai widget r2Image/r2Gallery, dove non c'è un
+ * guscio a tre colonne in cui incastrarsi. La vista «Media» dell'admin invece usa gli stessi
+ * pezzi separati — `useMediaLibrary` + `MediaFolders` + `MediaGrid` — perché le sue due metà
+ * stanno in due colonne diverse dello schermo.
+ *
+ * Il vecchio admin aveva DUE browser indipendenti (`loadAssets` per la vista, `openMediaPicker`
+ * per il modale) con ~250 righe duplicate che divergevano lentamente: il picker filtrava solo le
+ * immagini, la vista no; l'ordinamento c'era di là e non di qua. Qui la differenza è una prop,
+ * `mode`, e tutto il resto è condiviso per costruzione.
+ */
+import { useMediaLibrary } from "./media/useMediaLibrary.js";
+import { MediaFolders } from "./media/MediaFolders.js";
+import { MediaGrid } from "./media/MediaGrid.js";
+export function MediaBrowser({ mode, multiple = true, onPick, onCancel }) {
+    // `remember`: il modale riapre nella cartella dell'ultima volta (vedi useMediaLibrary).
+    const lib = useMediaLibrary({ mode, multiple, remember: mode === "pick" });
+    return (_jsxs("div", { className: "mb mb-" + mode, children: [_jsx("aside", { className: "mb-side", children: _jsx(MediaFolders, { lib: lib }) }), _jsx("section", { className: "mb-main", children: _jsx(MediaGrid, { lib: lib, onPick: onPick, onCancel: onCancel }) })] }));
+}
+export { useMediaLibrary } from "./media/useMediaLibrary.js";
+export { MediaFolders } from "./media/MediaFolders.js";
+export { MediaGrid } from "./media/MediaGrid.js";

package/dist/form/MediaPicker.d.ts

@@ -0,0 +1,10 @@
+import type { AssetFile } from "../api.js";
+export declare function usePicker(): {
+    pickMedia: (opts: {
+        multiple: boolean;
+    }) => Promise<string[] | null>;
+    pickMediaFiles: (opts: {
+        multiple: boolean;
+    }) => Promise<AssetFile[] | null>;
+    pickerElement: import("react").JSX.Element | null;
+};

package/dist/form/MediaPicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* Il modale di scelta: lo STESSO MediaBrowser in modalità "pick".
+ * `usePicker` restituisce una promessa, così i widget lo usano come una funzione: la vecchia
+ * versione passava una callback e ogni chiamante gestiva la chiusura a modo suo. */
+import { useCallback, useState } from "react";
+import { MediaBrowser } from "./MediaBrowser.js";
+export function usePicker() {
+    const [req, setReq] = useState(null);
+    /* Due funzioni sulla stessa scelta. `pickMediaFiles` dà i file interi — dimensioni comprese —
+     * e serve a chi costruisce una gallery; `pickMedia` dà i soli percorsi, che è tutto ciò che
+     * vogliono sapere r2Image e r2Gallery. Tenere il caso semplice semplice evita che ogni widget
+     * debba conoscere la forma di un AssetFile per salvare una stringa. */
+    const pickMediaFiles = useCallback((opts) => new Promise((resolve) => setReq({ multiple: opts.multiple, resolve })), []);
+    const pickMedia = useCallback((opts) => pickMediaFiles(opts).then((fs) => (fs ? fs.map((f) => f.url) : null)), [pickMediaFiles]);
+    const element = req ? (_jsx("div", { className: "mb-modal", onClick: (e) => { if (e.target === e.currentTarget) {
+            req.resolve(null);
+            setReq(null);
+        } }, children: _jsx("div", { className: "mb-modal-panel", children: _jsx(MediaBrowser, { mode: "pick", multiple: req.multiple, onPick: (files) => { req.resolve(files); setReq(null); }, onCancel: () => { req.resolve(null); setReq(null); } }) }) })) : null;
+    return { pickMedia, pickMediaFiles, pickerElement: element };
+}

package/dist/form/SchemaForm.d.ts

@@ -0,0 +1,21 @@
+import { type Resolver } from "react-hook-form";
+import * as z from "zod";
+import type { AssetFile } from "../api.js";
+import "./fields/index.js";
+export type Shape = Record<string, z.ZodType>;
+export declare function zodResolver(schema: z.ZodType): Resolver<any>;
+export interface SchemaFormProps {
+    shape: Shape;
+    value: Record<string, unknown>;
+    onChange: (next: Record<string, unknown>) => void;
+    pickMedia?: (opts: {
+        multiple: boolean;
+    }) => Promise<string[] | null>;
+    /** Come sopra ma con i file interi (dimensioni comprese): lo vuole `r2Curated`. */
+    pickMediaFiles?: (opts: {
+        multiple: boolean;
+    }) => Promise<AssetFile[] | null>;
+    /** Campi da non mostrare, anche se dichiarati (es. quelli già gestiti dall'elenco). */
+    omit?: readonly string[];
+}
+export declare function SchemaForm({ shape, value, onChange, pickMedia, pickMediaFiles, omit }: SchemaFormProps): import("react").JSX.Element;

package/dist/form/SchemaForm.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Il form generato dallo schema.
+ *
+ * Non c'è un layout scritto a mano da nessuna parte: i campi escono nell'ordine di
+ * dichiarazione, raggruppati per `ui.group`. Aggiungere un campo allo schema lo fa comparire
+ * qui senza toccare questo file — che è tutto il punto dell'operazione.
+ */
+import { useMemo } from "react";
+import { useForm, Controller } from "react-hook-form";
+import * as z from "zod";
+import { ui } from "../registries.js";
+import { fieldFor } from "./registry.js";
+import "./fields/index.js"; // registra gli otto widget
+/* Resolver per React Hook Form scritto a mano invece di usare @hookform/resolvers: quel
+ * pacchetto trascina un conflitto di peer dependency (valibot) che si risolverebbe solo con
+ * --legacy-peer-deps, cioè nascondendolo finché non esplode nella build di Cloudflare.
+ * L'interfaccia è questa, e sono dieci righe. */
+export function zodResolver(schema) {
+    return async (values) => {
+        const r = schema.safeParse(values);
+        if (r.success)
+            return { values: r.data, errors: {} };
+        const errors = {};
+        for (const issue of r.error.issues) {
+            const key = issue.path.join(".") || "_root";
+            if (!errors[key])
+                errors[key] = { type: "validation", message: issue.message };
+        }
+        return { values: {}, errors: errors };
+    };
+}
+export function SchemaForm({ shape, value, onChange, pickMedia, pickMediaFiles, omit = [] }) {
+    const object = useMemo(() => z.object(shape), [shape]);
+    const { control, formState } = useForm({
+        values: value,
+        resolver: zodResolver(object),
+        mode: "onChange",
+    });
+    // Gruppi nell'ordine in cui compaiono le loro prime dichiarazioni: l'ordine dello schema è
+    // anche l'ordine del file su disco, quindi il form si legge come si legge il contenuto.
+    const groups = [];
+    for (const [name, field] of Object.entries(shape)) {
+        if (omit.includes(name))
+            continue;
+        const meta = ui.get(field);
+        if (!meta || meta.widget === "hidden")
+            continue;
+        const g = meta.group ?? "";
+        let bucket = groups.find((x) => x.name === g);
+        if (!bucket) {
+            bucket = { name: g, fields: [] };
+            groups.push(bucket);
+        }
+        bucket.fields.push(name);
+    }
+    return (_jsx("div", { className: "ak-form", children: groups.map((g) => (_jsxs("fieldset", { className: "ak-group", children: [g.name && _jsx("legend", { className: "ak-legend", children: g.name }), g.fields.map((name) => {
+                    const meta = ui.get(shape[name]);
+                    const Field = fieldFor(meta.widget);
+                    return (_jsx(Controller, { name: name, control: control, render: ({ field }) => (_jsx(Field, { name: name, 
+                            /* `schema` serve a `objectList`, l'unico widget che deve scendere nei figli.
+                               Passarlo a tutti costa nulla e evita un canale a parte per un caso solo. */
+                            meta: { ...meta, schema: shape[name] }, value: field.value, error: formState.errors?.[name]?.message, pickMedia: pickMedia, pickMediaFiles: pickMediaFiles, onChange: (v) => {
+                                field.onChange(v);
+                                onChange({ ...value, [name]: v });
+                            } })) }, name));
+                })] }, g.name || "_"))) }));
+}

package/dist/form/Trash.d.ts

@@ -0,0 +1 @@
+export declare function Trash(): import("react").JSX.Element;

package/dist/form/Trash.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Cestino. Vale la pena ricordare perché esiste ed è l'unica rete: R2 NON ha versioning, e
+ * `_trash/` è il solo posto da cui si può tornare indietro dopo una cancellazione. */
+import { useCallback, useEffect, useState } from "react";
+import { api, ApiError } from "../api.js";
+const fmtSize = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${Math.round(n / 1024)} KB` : `${(n / 1048576).toFixed(1)} MB`);
+/* Nessun pulsante «indietro»: il cestino è una voce della colonna delle cartelle, e da lì si
+ * torna dove si vuole con un click. Un secondo modo di uscire, dentro il pannello, era solo un
+ * bottone in più che diceva la stessa cosa. */
+export function Trash() {
+    const [items, setItems] = useState(null);
+    const [error, setError] = useState(null);
+    const load = useCallback(async () => {
+        try {
+            setItems((await api.trash()).items ?? []);
+            setError(null);
+        }
+        catch (e) {
+            setError(e instanceof ApiError ? e.message : String(e));
+        }
+    }, []);
+    useEffect(() => { void load(); }, [load]);
+    return (_jsxs("div", { className: "tr", children: [_jsxs("header", { className: "mb-top", children: [_jsx("span", { className: "ak-spacer" }), !!items?.length && (_jsx("button", { className: "ak-btn", onClick: async () => {
+                            if (!confirm(`Svuotare il cestino? ${items.length} file cancellati per sempre.`))
+                                return;
+                            await api.trashEmpty();
+                            await load();
+                        }, children: "Svuota il cestino" }))] }), error && _jsx("p", { className: "ak-error", children: error }), !items && _jsx("p", { className: "ak-hint", children: "Carico\u2026" }), items?.length === 0 && _jsx("p", { className: "ak-hint", children: "Il cestino \u00E8 vuoto." }), _jsx("ul", { className: "tr-list", children: items?.map((it) => (_jsxs("li", { className: "tr-row", children: [_jsx("img", { src: it.previewUrl, alt: "", className: "tr-thumb", loading: "lazy" }), _jsx("span", { className: "tr-name", children: it.name }), _jsx("code", { className: "tr-orig", children: it.originalKey }), _jsx("span", { className: "ak-hint", children: fmtSize(it.size) }), _jsx("button", { className: "ak-btn ak-btn-quiet", onClick: async () => {
+                                const r = await api.trashRestore([it.trashKey]);
+                                if (r.conflicts?.length) {
+                                    alert(`Esisteva già un file con quel nome: ripristinato come ${r.conflicts[0].restoredAs}.`);
+                                }
+                                // NB: il ripristino NON rimette i riferimenti nelle pagine — li aveva tolti la
+                                // cancellazione. Va rifatto a mano, ed è documentato nell'endpoint.
+                                await load();
+                            }, children: "Ripristina" }), _jsx("button", { className: "ak-btn", onClick: async () => {
+                                if (!confirm(`Cancellare ${it.name} per sempre? Non è più recuperabile.`))
+                                    return;
+                                await api.trashDelete([it.trashKey]);
+                                await load();
+                            }, children: "Elimina" })] }, it.trashKey))) })] }));
+}

package/dist/form/fields/index.d.ts

@@ -0,0 +1 @@
+import "./objectList.js";

package/dist/form/fields/index.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* I widget.  Piccoli di proposito: il valore del sistema sta nello schema, non qui.
+ * Nessuno di questi conosce il sito — etichette, opzioni e aiuti arrivano da `ui`. */
+import { useEffect, useState } from "react";
+import { registerField } from "../registry.js";
+import { ProseField } from "../prose/ProseField.js";
+function Wrap({ meta, error, children }) {
+    return (_jsxs("label", { className: "ak-field", children: [_jsx("span", { className: "ak-label", children: meta.label }), children, meta.hint && _jsx("span", { className: "ak-hint", children: meta.hint }), error && _jsx("span", { className: "ak-error", children: error })] }));
+}
+registerField("text", ({ meta, value, onChange, error }) => (_jsx(Wrap, { meta: meta, error: error, children: _jsx("input", { className: "ak-input", type: "text", value: String(value ?? ""), placeholder: meta.placeholder, maxLength: meta.maxLength, onChange: (e) => onChange(e.target.value) }) })));
+/* `ProseField` e non una `textarea` nuda: è prosa, quindi ha la barra di formattazione sopra la
+   selezione — grassetto, corsivo e collegamento. Il valore resta la stessa stringa di prima. */
+registerField("textarea", ({ meta, value, onChange, error }) => (_jsx(Wrap, { meta: meta, error: error, children: _jsx(ProseField, { className: "ak-input ak-textarea", rows: 8, value: String(value ?? ""), placeholder: meta.placeholder, maxLength: meta.maxLength, onChange: onChange }) })));
+/* Prosa: si scrive in una textarea, si salva come ELENCO di paragrafi.
+ *
+ * I due mondi non combaciano e questo widget è la cerniera. Da una parte chi scrive vuole
+ * digitare, andare a capo due volte e avere un paragrafo nuovo. Dall'altra il front matter non
+ * può contenere un a capo dentro una stringa: `yamlStr` si ferma apposta invece di indovinare
+ * (vedi ADMIN.md §6), quindi un testo su più righe non era proprio salvabile — il salvataggio
+ * falliva, ed è il difetto che questo widget chiude.
+ *
+ * La forma su disco è quella che il sito già usa per la prosa: un array di stringhe, un
+ * paragrafo per elemento, come `about.paragraphs` nella home. La differenza è solo che lì si
+ * aggiunge una riga per volta con «+ Aggiungi», e per scrivere due paragrafi di descrizione è
+ * un attrezzo sbagliato.
+ *
+ * Riga vuota = paragrafo nuovo. Un a capo singolo resta dentro il paragrafo e si perde nel
+ * rendering: è la convenzione di Markdown, che è quella che conosce chiunque scriva su un
+ * computer. */
+const toText = (v) => (Array.isArray(v) ? v.join("\n\n") : String(v ?? ""));
+const toParagraphs = (text) => text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
+/* IL TESTO GREZZO STA NELLO STATO LOCALE, e non è un dettaglio: la textarea mostra quello che
+ * hai scritto, non il risultato della conversione. Rileggendo il valore dall'elenco a ogni
+ * battuta, la riga vuota appena premuta verrebbe cancellata dal render successivo — «Invio,
+ * Invio» non aprirebbe mai un paragrafo nuovo, cioè proprio il gesto per cui il widget esiste.
+ * Il valore di fuori vince solo quando dice qualcosa di DIVERSO da ciò che si sta scrivendo:
+ * è il caso del caricamento della pagina, non quello della digitazione. */
+function ParagraphsField({ meta, value, onChange, error }) {
+    const [text, setText] = useState(() => toText(value));
+    useEffect(() => {
+        const fuori = Array.isArray(value) ? value : toParagraphs(String(value ?? ""));
+        if (fuori.join("\n\n") !== toParagraphs(text).join("\n\n"))
+            setText(fuori.join("\n\n"));
+    }, [value]);
+    return (_jsx(Wrap, { meta: meta, error: error, children: _jsx(ProseField, { className: "ak-input ak-textarea", rows: 10, value: text, placeholder: meta.placeholder, onChange: (next) => { setText(next); onChange(toParagraphs(next)); } }) }));
+}
+registerField("paragraphs", ParagraphsField);
+registerField("number", ({ meta, value, onChange, error }) => (_jsx(Wrap, { meta: meta, error: error, children: _jsx("input", { className: "ak-input", type: "number", value: Number(value ?? 0), onChange: (e) => onChange(e.target.value === "" ? 0 : Number(e.target.value)) }) })));
+registerField("boolean", ({ meta, value, onChange, error }) => (_jsxs("label", { className: "ak-field ak-field-inline", children: [_jsx("input", { type: "checkbox", checked: !!value, onChange: (e) => onChange(e.target.checked) }), _jsx("span", { className: "ak-label", children: meta.label }), meta.hint && _jsx("span", { className: "ak-hint", children: meta.hint }), error && _jsx("span", { className: "ak-error", children: error })] })));
+registerField("select", ({ meta, value, onChange, error }) => (_jsx(Wrap, { meta: meta, error: error, children: _jsx("select", { className: "ak-input", value: String(value ?? ""), onChange: (e) => onChange(e.target.value), children: (meta.options ?? []).map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }) })));
+/* `menu` esiste come widget a sé (invece di riusare `boolean`) perché l'appartenenza al menu
+ * non è una proprietà qualsiasi: cambia dove la pagina compare nell'elenco. Per ora si comporta
+ * come una casella; averlo separato permette di arricchirlo senza toccare gli altri. */
+registerField("menu", ({ meta, value, onChange, error }) => (_jsxs("label", { className: "ak-field ak-field-inline", children: [_jsx("input", { type: "checkbox", checked: !!value, onChange: (e) => onChange(e.target.checked) }), _jsx("span", { className: "ak-label", children: meta.label }), error && _jsx("span", { className: "ak-error", children: error })] })));
+/** Nascosto: il campo esiste nel modello ma non si mostra (es. il peso, che è derivato). */
+registerField("hidden", () => null);
+registerField("r2Image", ({ meta, value, onChange, error, pickMedia }) => {
+    const url = String(value ?? "");
+    return (_jsx(Wrap, { meta: meta, error: error, children: _jsxs("div", { className: "ak-media-one", children: [url ? _jsx("img", { src: url, alt: "", className: "ak-thumb" }) : _jsx("div", { className: "ak-thumb ak-thumb-empty" }), _jsxs("div", { className: "ak-media-actions", children: [_jsx("button", { type: "button", className: "ak-btn", onClick: async () => {
+                                const picked = await pickMedia?.({ multiple: false });
+                                if (picked?.length)
+                                    onChange(picked[0]);
+                            }, children: "Scegli\u2026" }), url && _jsx("button", { type: "button", className: "ak-btn ak-btn-quiet", onClick: () => onChange(""), children: "Rimuovi" })] })] }) }));
+});
+registerField("r2Gallery", ({ meta, value, onChange, error, pickMedia }) => {
+    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(Wrap, { meta: meta, error: error, children: [_jsx("div", { className: "ak-media-grid", children: list.map((u, i) => (_jsxs("figure", { className: "ak-media-item", children: [_jsx("img", { src: u, alt: "", className: "ak-thumb" }), _jsxs("figcaption", { className: "ak-media-item-bar", children: [_jsx("button", { type: "button", className: "ak-icon", title: "Sposta indietro", onClick: () => move(i, i - 1), children: "\u2039" }), _jsx("button", { type: "button", className: "ak-icon", title: "Rimuovi", onClick: () => onChange(list.filter((_, j) => j !== i)), children: "\u2715" }), _jsx("button", { type: "button", className: "ak-icon", title: "Sposta avanti", onClick: () => move(i, i + 1), children: "\u203A" })] })] }, `${u}-${i}`))) }), _jsx("button", { type: "button", className: "ak-btn", onClick: async () => {
+                    const picked = await pickMedia?.({ multiple: true });
+                    if (picked?.length)
+                        onChange([...list, ...picked]);
+                }, children: "+ Aggiungi immagini" })] }));
+});
+registerField("r2Curated", ({ meta, value, onChange, error, pickMediaFiles }) => {
+    const list = Array.isArray(value) ? value : [];
+    const patch = (i, up) => onChange(list.map((it, j) => (j === i ? { ...it, ...up } : it)));
+    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);
+    };
+    const visible = list.filter((it) => !it.hidden).length;
+    return (_jsxs(Wrap, { meta: meta, error: error, children: [_jsx("p", { className: "ak-hint", children: list.length === 0 ? "Nessuna foto." : `${visible} online${list.length > visible ? `, ${list.length - visible} nascoste` : ""}` }), _jsx("div", { className: "ak-media-grid", children: list.map((it, i) => (_jsxs("figure", { className: "ak-media-item" + (it.hidden ? " is-hidden" : ""), children: [_jsx("img", { src: it.src, alt: "", className: "ak-thumb" }), _jsxs("figcaption", { className: "ak-media-item-bar", children: [_jsx("button", { type: "button", className: "ak-icon", title: "Sposta indietro", onClick: () => move(i, i - 1), children: "\u2039" }), _jsx("button", { type: "button", className: "ak-icon", title: it.hidden ? "Rimetti online" : "Nascondi (resta nell'elenco)", onClick: () => patch(i, { hidden: it.hidden ? undefined : true }), children: it.hidden ? "◎" : "◉" }), _jsx("button", { type: "button", className: "ak-icon", title: "Togli dall'elenco", onClick: () => onChange(list.filter((_, j) => j !== i)), children: "\u2715" }), _jsx("button", { type: "button", className: "ak-icon", title: "Sposta avanti", onClick: () => move(i, i + 1), children: "\u203A" })] })] }, `${it.src}-${i}`))) }), _jsx("button", { type: "button", className: "ak-btn", onClick: async () => {
+                    const picked = await pickMediaFiles?.({ multiple: true });
+                    if (!picked?.length)
+                        return;
+                    // Niente doppioni: una foto già in elenco che viene riscelta resta dov'è invece di
+                    // comparire due volte in fondo — succede di continuo usando "seleziona tutte" dopo
+                    // aver già aggiunto qualcosa.
+                    const have = new Set(list.map((it) => it.src));
+                    const add = picked
+                        .filter((f) => !have.has(f.url))
+                        .map((f) => ({ src: f.url, w: f.w ?? null, h: f.h ?? null }));
+                    if (add.length)
+                        onChange([...list, ...add]);
+                }, children: "+ Aggiungi foto" })] }));
+});
+/* `objectList` sta in un file suo: è l'unico widget ricorsivo, e tenerlo separato rende
+   evidente quando qualcuno prova ad aggiungerne un secondo. */
+import "./objectList.js";

package/dist/form/fields/objectList.d.ts

@@ -0,0 +1 @@
+export {};