@cardinali-studio/adminkit 2.2.15 → 2.2.17

package/dist/app/App.js

@@ -244,7 +244,7 @@ export function App() {
                                             : deliveries.rows.length === 0 ? _jsx("p", { className: "ak-hint", children: "Nessun transfer, per ora." })
                                                 : _jsx(DeliveriesList, { rows: deliveries.rows, current: activeDeliveryId || quickSelectedId, onOpen: (id) => { setQuickSelectedId(undefined); go(`/deliveries/${id}`); } }) }), _jsxs("div", { className: "dl-col-foot", children: [deliveries.rows && _jsx(DeliveriesTotal, { rows: deliveries.rows }), _jsxs("button", { className: "col-item" + (deliverySettingsOpen ? " is-on" : ""), onClick: () => { setQuickSelectedId(undefined); go("/deliveries/settings"); }, children: [_jsx(Icon.settings, {}), _jsx("span", { children: "Impostazioni" })] })] })] })), section === "bookings" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: bookings.rows ? `${bookings.rows.length} appuntamenti` : "Prenotazioni" }) }), _jsx("div", { className: "col-body", children: bookings.error ? _jsx("p", { className: "ak-error", children: bookings.error })
                                         : !bookings.rows ? _jsx("p", { className: "ak-hint", children: "Carico\u2026" })
-                                            : _jsx(BookingsList, { rows: bookings.rows, current: bookingSettingsOpen ? "settings" : openBooking?.id, onOpen: (id) => go(`/bookings/${id}`), onAgenda: () => go("/bookings"), onSettings: () => go("/bookings/settings") }) })] })), section === "home" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Sezioni" }) }), _jsx("div", { className: "col-body", children: _jsx("ul", { className: "col-list", children: homeGroups.map((g) => (_jsx("li", { children: _jsx("button", { className: "col-item" + (g === homeGroup ? " is-on" : ""), onClick: () => go(`/home/${groupSlug(g)}`), children: g || "Generale" }) }, g))) }) })] })), section === "settings" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Impostazioni" }) }), _jsx("div", { className: "col-body", children: _jsxs("ul", { className: "col-list settings-list", children: [_jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "site" ? " is-on" : ""), onClick: () => go("/settings/site"), children: [_jsx("strong", { children: "Sito" }), _jsx("span", { children: "Favicon, identit\u00E0 e accesso generale." })] }) }), _jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "seo" ? " is-on" : ""), onClick: () => go("/settings/seo"), children: [_jsx("strong", { children: "SEO" }), _jsx("span", { children: "Motori di ricerca e crawler AI." })] }) })] }) })] }))] })), _jsxs("main", { className: "pane", children: [_jsxs("header", { className: "pane-head", children: [editing ? (_jsx(PageHeader, { page: editing, pages: list ?? [], onChange: replace, seoActive: seoEditing, onSeoToggle: () => go(`/pages/${editing.slug}${seoEditing ? "" : "/seo"}`), languages: languages, activeLanguage: pageLanguage, onLanguageChange: setPageLanguage })) : view === "media" && !mediaSettingsOpen ? (_jsxs("nav", { className: "pane-crumbs", "aria-label": "Percorso", children: [_jsx("button", { className: "pane-crumb" + (mediaCrumbs.length ? "" : " is-current"), disabled: media.mutating, onClick: () => media.go(""), children: "Senza cartella" }), mediaCrumbs.map((c, i) => (_jsxs("span", { className: "pane-crumb-part", children: [_jsx("span", { className: "pane-crumb-sep", "aria-hidden": "true", children: "\u203A" }), _jsx("button", { className: "pane-crumb" + (i === mediaCrumbs.length - 1 ? " is-current" : ""), disabled: media.mutating, onClick: () => media.go(c.prefix), children: c.label })] }, c.prefix)))] })) : (_jsx("h1", { className: "pane-title", children: heading })), view === "media" && !mediaSettingsOpen && _jsx("span", { className: "pane-count", children: media.shown.length }), _jsx("span", { className: "pane-spacer" }), view === "media" && !mediaSettingsOpen && (_jsx("button", { className: "ak-btn ak-btn-primary", disabled: media.busy || media.mutating, onClick: () => media.setUploadOpen(true), children: "Carica immagini" })), saver?.notice && (_jsx("button", { className: "pane-notice", onClick: () => saver.setNotice(null), children: saver.notice })), section === "bookings" && bookings.notice && (_jsx("button", { className: "pane-notice", onClick: bookings.clearNotice, children: bookings.notice })), publish.notice && (_jsx("button", { className: "pane-notice", onClick: publish.clearNotice, children: publish.notice })), !publish.configured && publish.error && (_jsx("span", { className: "pane-notice", title: publish.error, children: publish.error })), saver && (_jsxs(_Fragment, { children: [saver.dirty && _jsx("span", { className: "pane-dot", title: "modifiche non salvate" }), _jsx("button", { className: "ak-btn", disabled: !saver.dirty || saver.saving, 
+                                            : _jsx(BookingsList, { rows: bookings.rows, current: bookingSettingsOpen ? "settings" : openBooking?.id, onOpen: (id) => go(`/bookings/${id}`), onAgenda: () => go("/bookings"), onSettings: () => go("/bookings/settings") }) })] })), section === "home" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Sezioni" }) }), _jsx("div", { className: "col-body", children: _jsx("ul", { className: "col-list", children: homeGroups.map((g) => (_jsx("li", { children: _jsx("button", { className: "col-item" + (g === homeGroup ? " is-on" : ""), onClick: () => go(`/home/${groupSlug(g)}`), children: g || "Generale" }) }, g))) }) })] })), section === "settings" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Impostazioni" }) }), _jsx("div", { className: "col-body", children: _jsxs("ul", { className: "col-list settings-list", children: [_jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "site" ? " is-on" : ""), onClick: () => go("/settings/site"), children: [_jsx("strong", { children: "Sito" }), _jsx("span", { children: "Favicon, identit\u00E0 e accesso generale." })] }) }), _jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "seo" ? " is-on" : ""), onClick: () => go("/settings/seo"), children: [_jsx("strong", { children: "SEO" }), _jsx("span", { children: "Motori di ricerca e crawler AI." })] }) })] }) })] }))] })), _jsxs("main", { className: "pane", children: [_jsxs("header", { className: "pane-head", children: [editing ? (_jsx(PageHeader, { page: editing, pages: list ?? [], onChange: replace, seoActive: seoEditing, onSeoToggle: () => go(`/pages/${editing.slug}${seoEditing ? "" : "/seo"}`), languages: languages, activeLanguage: pageLanguage, onLanguageChange: setPageLanguage })) : view === "media" && !mediaSettingsOpen ? (_jsxs("nav", { className: "pane-crumbs", "aria-label": "Percorso", children: [_jsx("button", { className: "pane-crumb" + (mediaCrumbs.length ? "" : " is-current"), disabled: media.mutating, onClick: () => media.go(""), children: "Senza cartella" }), mediaCrumbs.map((c, i) => (_jsxs("span", { className: "pane-crumb-part", children: [_jsx("span", { className: "pane-crumb-sep", "aria-hidden": "true", children: "\u203A" }), _jsx("button", { className: "pane-crumb" + (i === mediaCrumbs.length - 1 ? " is-current" : ""), disabled: media.mutating, onClick: () => media.go(c.prefix), children: c.label })] }, c.prefix)))] })) : (_jsx("h1", { className: "pane-title", children: heading })), view === "media" && !mediaSettingsOpen && _jsx("span", { className: "pane-count", children: media.shown.length }), _jsx("span", { className: "pane-spacer" }), view === "media" && !mediaSettingsOpen && (_jsx("button", { className: "ak-btn ak-btn-primary", disabled: media.busy || media.mutating, onClick: () => media.openUpload(), children: "Carica immagini" })), saver?.notice && (_jsx("button", { className: "pane-notice", onClick: () => saver.setNotice(null), children: saver.notice })), section === "bookings" && bookings.notice && (_jsx("button", { className: "pane-notice", onClick: bookings.clearNotice, children: bookings.notice })), publish.notice && (_jsx("button", { className: "pane-notice", onClick: publish.clearNotice, children: publish.notice })), !publish.configured && publish.error && (_jsx("span", { className: "pane-notice", title: publish.error, children: publish.error })), saver && (_jsxs(_Fragment, { children: [saver.dirty && _jsx("span", { className: "pane-dot", title: "modifiche non salvate" }), _jsx("button", { className: "ak-btn", disabled: !saver.dirty || saver.saving, 
                                             /* Dopo un salvataggio il conteggio delle modifiche in attesa è cambiato: senza
                                                rileggerlo, «Pubblica» comparirebbe solo al ricaricamento della pagina — cioè
                                                il pannello direbbe che non c'è niente da pubblicare subito dopo aver salvato

package/dist/app/app.css

@@ -641,9 +641,10 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
   display: flex; align-items: center; justify-content: space-between; gap: 18px;
   min-height: 48px; padding: 0 2px 18px; border-bottom: 1px solid var(--ak-line);
 }
-.pe-gallery-bar > div { display: flex; flex-direction: column; gap: 4px; }
+.pe-gallery-summary { display: flex; flex-direction: column; gap: 4px; }
 .pe-gallery-bar strong { font: 600 13px/1.2 var(--ak-font); }
 .pe-gallery-bar span { color: var(--ak-ink-quiet); font: 400 11px/1.3 var(--ak-font); }
+.pe-gallery-bar .pe-gallery-layout-note { color: var(--ak-ink); font-weight: 500; }
 /* Stessa forma di `.gs-add`: sono due azioni primarie sulla STESSA schermata (aggiungi una
    sezione, aggiungi delle foto) e vederle una contornata e una piena le fa sembrare di peso
    diverso, che non è. La griglia delle foto per il resto non è stata ridisegnata. */
@@ -656,6 +657,24 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
 }
 .pe-add:hover { background: var(--ak-accent-hover); }
 .pe-add:focus-visible { outline: 0; box-shadow: var(--ak-ring); }
+.pe-add-group { position: relative; display: inline-flex; flex: none; }
+.pe-add-group .pe-add { border-radius: 10px 0 0 10px; }
+.pe-add-position {
+  width: 34px; border: 0; border-left: 1px solid rgba(255,255,255,.28); border-radius: 0 10px 10px 0;
+  background: var(--ak-accent); color: #fff; cursor: pointer; font: 700 16px/1 var(--ak-font);
+  transition: background-color .15s;
+}
+.pe-add-position:hover, .pe-add-position[aria-expanded="true"] { background: var(--ak-accent-hover); }
+.pe-add-position:focus-visible { outline: 0; box-shadow: var(--ak-ring); position: relative; z-index: 1; }
+.pe-add-menu {
+  position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; min-width: 172px; padding: 5px;
+  border: 1px solid var(--ak-line); border-radius: 8px; background: var(--ak-panel); box-shadow: var(--ak-lift-3);
+}
+.pe-add-menu button {
+  width: 100%; border: 0; border-radius: 5px; background: transparent; color: var(--ak-ink); cursor: pointer;
+  padding: 8px 9px; text-align: left; font: 500 12px/1.2 var(--ak-font);
+}
+.pe-add-menu button:hover, .pe-add-menu button:focus-visible { background: var(--ak-hover); outline: 0; }
 .pe-gallery-empty {
   min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 8px;
   border: 1px dashed var(--ak-line); border-radius: 8px; background: var(--ak-panel);
@@ -725,6 +744,63 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
   cursor: grabbing;
 }
 .pe-photo-overlay img { max-width: 100%; max-height: 100%; display: block; }
+
+/* La modalità masonry replica il flusso del sito: le foto riempiono ogni colonna dall'alto
+   verso il basso e conservano il proprio rapporto d'aspetto. Le regole base qui sopra restano
+   quindi intatte per tutte le gallery con layout ordinario. */
+.pe-gallery.is-masonry > .pe-photo-grid {
+  display: block; column-count: 3; column-gap: 1.5vw;
+  padding: 4px 2px 40px;
+}
+.pe-gallery.is-masonry > .pe-photo-grid > .pe-photo {
+  width: 100%; margin: 0 0 1.5vw; padding: 0;
+  display: inline-block; break-inside: avoid; -webkit-column-break-inside: avoid;
+  vertical-align: top;
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo-frame {
+  width: 100%; height: auto; display: block; overflow: hidden;
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo-frame img {
+  width: 100%; height: auto; max-width: none; max-height: none;
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo-actions {
+  top: 8px; transform: translate(-50%, 0);
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo:hover .pe-photo-actions,
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo:focus-within .pe-photo-actions {
+  transform: translate(-50%, -2px);
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo figcaption {
+  position: absolute; z-index: 2; right: 8px; bottom: 8px; left: 8px;
+  padding: 6px 8px; border-radius: 4px; background: rgba(20,20,22,.72);
+  color: #fff; text-align: left; opacity: 0; pointer-events: none;
+  transition: opacity .12s;
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo:hover figcaption,
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo:focus-within figcaption { opacity: 1; }
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo.is-insert-before::before,
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo.is-insert-after::after {
+  right: 0; left: 0; width: auto; height: 3px;
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo.is-insert-before::before {
+  top: -7px; bottom: auto;
+}
+.pe-gallery.is-masonry > .pe-photo-grid .pe-photo.is-insert-after::after {
+  top: auto; bottom: -7px;
+}
+.pe-hidden-gallery {
+  display: flex; flex-direction: column; gap: 18px; padding: 24px 2px 8px;
+  border-top: 1px solid var(--ak-line);
+}
+.pe-hidden-gallery-head { display: flex; flex-direction: column; gap: 4px; }
+.pe-hidden-gallery-head strong { font: 600 13px/1.2 var(--ak-font); }
+.pe-hidden-gallery-head span { color: var(--ak-ink-quiet); font: 400 11px/1.3 var(--ak-font); }
+.pe-hidden-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: 28px 20px; align-items: start;
+}
+.pe-photo.is-static .pe-photo-frame { cursor: default; touch-action: auto; }
+.pe-photo.is-static .pe-photo-frame:active { cursor: default; }
 .pe-load-error {
   margin: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb,var(--ak-danger) 30%,var(--ak-line));
   border-radius: 5px; color: var(--ak-danger); background: var(--ak-panel);
@@ -2054,6 +2130,8 @@ body:has(.uk) .pane-body { padding-bottom: 190px; }
 }
 
 @media (max-width: 900px) {
+  .pe-gallery.is-masonry > .pe-photo-grid { column-count: 2; column-gap: 3vw; }
+  .pe-gallery.is-masonry > .pe-photo-grid > .pe-photo { margin-bottom: 3vw; }
   .settings-editor { padding-inline: 6px; gap: 34px; }
   .st-row { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 22px 0; }
   .seo-editor { padding-inline: 6px; }

package/dist/app/routes/PageEditor.d.ts

@@ -1,3 +1,4 @@
+import type { PickerOptions } from "../../form/MediaPicker.js";
 import type { AssetFile } from "../../index.js";
 import type { PageModel } from "../lib/pages";
 export declare function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, languages, activeLanguage, onLanguageChange, }: {
@@ -24,9 +25,7 @@ export declare function PageEditor({ page, onChange, onRefresh, pristine, pickMe
     pickMedia?: (o: {
         multiple: boolean;
     }) => Promise<string[] | null>;
-    pickMediaFiles?: (o: {
-        multiple: boolean;
-    }) => Promise<AssetFile[] | null>;
+    pickMediaFiles?: (o: PickerOptions) => Promise<AssetFile[] | null>;
     /** La lingua è scelta nella testata della pagina, non è un'impostazione globale del pannello. */
     activeLanguage?: string;
     defaultLanguage?: string;

package/dist/app/routes/PageEditor.js

@@ -100,30 +100,65 @@ function imageName(src) {
         return raw;
     }
 }
-function GalleryCard({ item, activeId, overId, activeIndex, overIndex, onReplace, onToggle, onRemove, }) {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.src });
-    const isTarget = overId === item.src && activeId !== item.src;
+function GalleryCard({ item, masonry = false, sortable = true, activeId, overId, activeIndex, overIndex, onReplace, onToggle, onRemove, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: item.src,
+        disabled: !sortable,
+    });
+    const isTarget = sortable && overId === item.src && activeId !== item.src;
     const insertAfter = isTarget && activeIndex < overIndex;
     const insertBefore = isTarget && activeIndex > overIndex;
+    const frameStyle = masonry && item.w && item.h
+        ? { aspectRatio: `${item.w} / ${item.h}` }
+        : undefined;
     return (_jsxs("figure", { ref: setNodeRef, className: [
             "pe-photo",
+            sortable ? "" : "is-static",
             item.hidden ? "is-hidden" : "",
             isDragging ? "is-dragging" : "",
             insertBefore ? "is-insert-before" : "",
             insertAfter ? "is-insert-after" : "",
-        ].filter(Boolean).join(" "), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsxs("div", { className: "pe-photo-frame", ...attributes, ...listeners, children: [_jsx("img", { src: item.src, alt: imageName(item.src), draggable: false }), item.hidden && _jsx("span", { className: "pe-hidden-label", children: "Nascosta" })] }), _jsxs("div", { className: "pe-photo-actions", children: [_jsx("button", { type: "button", onClick: onReplace, title: "Cambia immagine", "aria-label": "Cambia immagine", children: _jsx(Icon.replace, {}) }), _jsx("button", { type: "button", onClick: onToggle, title: item.hidden ? "Rimetti online" : "Nascondi dalla gallery", "aria-label": item.hidden ? "Rimetti online" : "Nascondi dalla gallery", children: item.hidden ? _jsx(Icon.eye, {}) : _jsx(Icon.eyeOff, {}) }), _jsx("button", { type: "button", className: "is-danger", onClick: onRemove, title: "Rimuovi dalla gallery", "aria-label": "Rimuovi dalla gallery", children: _jsx(Icon.trash, {}) })] }), _jsx("figcaption", { title: imageName(item.src), children: imageName(item.src) })] }));
+        ].filter(Boolean).join(" "), style: sortable ? { transform: CSS.Transform.toString(transform), transition } : undefined, children: [_jsxs("div", { className: "pe-photo-frame", style: frameStyle, ...(sortable ? attributes : {}), ...(sortable ? listeners : {}), children: [_jsx("img", { src: item.src, alt: imageName(item.src), draggable: false }), item.hidden && _jsx("span", { className: "pe-hidden-label", children: "Nascosta" })] }), _jsxs("div", { className: "pe-photo-actions", children: [_jsx("button", { type: "button", onClick: onReplace, title: "Cambia immagine", "aria-label": "Cambia immagine", children: _jsx(Icon.replace, {}) }), _jsx("button", { type: "button", onClick: onToggle, title: item.hidden ? "Rimetti online" : "Nascondi dalla gallery", "aria-label": item.hidden ? "Rimetti online" : "Nascondi dalla gallery", children: item.hidden ? _jsx(Icon.eye, {}) : _jsx(Icon.eyeOff, {}) }), _jsx("button", { type: "button", className: "is-danger", onClick: onRemove, title: "Rimuovi dalla gallery", "aria-label": "Rimuovi dalla gallery", children: _jsx(Icon.trash, {}) })] }), _jsx("figcaption", { title: imageName(item.src), children: imageName(item.src) })] }));
 }
-function GalleryEditor({ value, onChange, pickMediaFiles, }) {
+function GalleryEditor({ value, onChange, pickMediaFiles, masonry = false, }) {
     const list = Array.isArray(value) ? value : [];
+    const shownItems = masonry ? list.filter((item) => !item.hidden) : list;
+    const hiddenItems = masonry ? list.filter((item) => item.hidden) : [];
     const [activeId, setActiveId] = useState(null);
     const [overId, setOverId] = useState(null);
+    const [addPositionOpen, setAddPositionOpen] = useState(false);
+    const addPositionRef = useRef(null);
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    const activeIndex = activeId ? list.findIndex((item) => item.src === activeId) : -1;
-    const overIndex = overId ? list.findIndex((item) => item.src === overId) : -1;
-    const activeItem = activeIndex >= 0 ? list[activeIndex] : null;
+    const activeIndex = activeId ? shownItems.findIndex((item) => item.src === activeId) : -1;
+    const overIndex = overId ? shownItems.findIndex((item) => item.src === overId) : -1;
+    const activeItem = activeIndex >= 0 ? shownItems[activeIndex] : null;
     const visible = list.filter((item) => !item.hidden).length;
-    const add = async () => {
-        const picked = await pickMediaFiles?.({ multiple: true });
+    useEffect(() => {
+        if (!addPositionOpen)
+            return;
+        const close = (event) => {
+            if (!addPositionRef.current?.contains(event.target))
+                setAddPositionOpen(false);
+        };
+        const closeOnEscape = (event) => {
+            if (event.key === "Escape")
+                setAddPositionOpen(false);
+        };
+        addEventListener("pointerdown", close);
+        addEventListener("keydown", closeOnEscape);
+        return () => {
+            removeEventListener("pointerdown", close);
+            removeEventListener("keydown", closeOnEscape);
+        };
+    }, [addPositionOpen]);
+    const add = async (position) => {
+        setAddPositionOpen(false);
+        const picked = await pickMediaFiles?.({
+            multiple: true,
+            notice: position === "start"
+                ? "Le foto selezionate verranno aggiunte in cima alla gallery."
+                : "Le foto selezionate verranno aggiunte in fondo alla gallery.",
+        });
         if (!picked?.length)
             return;
         const have = new Set(list.map((item) => item.src));
@@ -131,7 +166,7 @@ function GalleryEditor({ value, onChange, pickMediaFiles, }) {
             .filter((file) => !have.has(file.url))
             .map((file) => ({ src: file.url, w: file.w ?? null, h: file.h ?? null }));
         if (additions.length)
-            onChange([...list, ...additions]);
+            onChange(position === "start" ? [...additions, ...list] : [...list, ...additions]);
     };
     const replace = async (index) => {
         const picked = await pickMediaFiles?.({ multiple: false });
@@ -151,16 +186,26 @@ function GalleryEditor({ value, onChange, pickMediaFiles, }) {
         setOverId(null);
         if (!over || active.id === over.id)
             return;
-        const from = list.findIndex((item) => item.src === active.id);
-        const to = list.findIndex((item) => item.src === over.id);
-        if (from >= 0 && to >= 0)
+        const from = shownItems.findIndex((item) => item.src === active.id);
+        const to = shownItems.findIndex((item) => item.src === over.id);
+        if (from < 0 || to < 0)
+            return;
+        if (!masonry) {
             onChange(arrayMove(list, from, to));
+            return;
+        }
+        const reordered = arrayMove(shownItems, from, to);
+        let shownIndex = 0;
+        onChange(list.map((item) => item.hidden ? item : reordered[shownIndex++]));
     };
-    return (_jsxs("section", { className: "pe-gallery", "aria-label": "Foto della gallery", children: [_jsxs("div", { className: "pe-gallery-bar", children: [_jsxs("div", { children: [_jsxs("strong", { children: [list.length, " ", list.length === 1 ? "foto" : "foto"] }), _jsx("span", { children: list.length === 0
+    const itemIndex = (src) => list.findIndex((item) => item.src === src);
+    const toggle = (src) => onChange(list.map((item) => item.src === src
+        ? { ...item, hidden: item.hidden ? undefined : true }
+        : item));
+    const remove = (src) => onChange(list.filter((item) => item.src !== src));
+    return (_jsxs("section", { className: `pe-gallery${masonry ? " is-masonry" : ""}`, "aria-label": "Foto della gallery", children: [_jsxs("div", { className: "pe-gallery-bar", children: [_jsxs("div", { className: "pe-gallery-summary", children: [_jsxs("strong", { children: [list.length, " ", list.length === 1 ? "foto" : "foto"] }), _jsx("span", { children: list.length === 0
                                     ? "Scegli le immagini da mostrare nella pagina."
-                                    : `${visible} online${visible < list.length ? ` · ${list.length - visible} nascoste` : ""}` })] }), _jsxs("button", { type: "button", className: "pe-add", onClick: () => void add(), children: ["Aggiungi foto ", _jsx(Icon.plus, {})] })] }), list.length === 0 ? (_jsxs("button", { type: "button", className: "pe-gallery-empty", onClick: () => void add(), children: [_jsx(Icon.gallery, {}), _jsx("strong", { children: "La gallery \u00E8 vuota" }), _jsx("span", { children: "Aggiungi le prime fotografie" })] })) : (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: ({ active }) => setActiveId(String(active.id)), onDragOver: ({ over }) => setOverId(over ? String(over.id) : null), onDragCancel: () => { setActiveId(null); setOverId(null); }, onDragEnd: finishDrag, children: [_jsx(SortableContext, { items: list.map((item) => item.src), strategy: rectSortingStrategy, children: _jsx("div", { className: "pe-photo-grid", children: list.map((item, index) => (_jsx(GalleryCard, { item: item, activeId: activeId, overId: overId, activeIndex: activeIndex, overIndex: overIndex, onReplace: () => void replace(index), onToggle: () => onChange(list.map((candidate, itemIndex) => itemIndex === index
-                                    ? { ...candidate, hidden: candidate.hidden ? undefined : true }
-                                    : candidate)), onRemove: () => onChange(list.filter((_, itemIndex) => itemIndex !== index)) }, item.src))) }) }), _jsx(DragOverlay, { children: activeItem && (_jsx("div", { className: "pe-photo-overlay", children: _jsx("img", { src: activeItem.src, alt: "" }) })) })] }))] }));
+                                    : `${visible} online${visible < list.length ? ` · ${list.length - visible} nascoste` : ""}` }), masonry && list.length > 0 && (_jsx("span", { className: "pe-gallery-layout-note", children: "Masonry \u00B7 3 colonne \u00B7 ordine dall\u2019alto verso il basso" }))] }), list.length === 0 ? (_jsxs("button", { type: "button", className: "pe-add", onClick: () => void add("start"), children: ["Aggiungi foto ", _jsx(Icon.plus, {})] })) : (_jsxs("div", { className: "pe-add-group", ref: addPositionRef, children: [_jsxs("button", { type: "button", className: "pe-add", onClick: () => void add("start"), children: ["Aggiungi in cima ", _jsx(Icon.plus, {})] }), _jsx("button", { type: "button", className: "pe-add-position", "aria-label": "Scegli dove aggiungere le foto", "aria-expanded": addPositionOpen, "aria-controls": "gallery-add-position", onClick: () => setAddPositionOpen((open) => !open), children: "\u2304" }), addPositionOpen && (_jsx("div", { className: "pe-add-menu", id: "gallery-add-position", children: _jsx("button", { type: "button", onClick: () => void add("end"), children: "Aggiungi in fondo" }) }))] }))] }), list.length === 0 ? (_jsxs("button", { type: "button", className: "pe-gallery-empty", onClick: () => void add("start"), children: [_jsx(Icon.gallery, {}), _jsx("strong", { children: "La gallery \u00E8 vuota" }), _jsx("span", { children: "Aggiungi le prime fotografie" })] })) : (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: ({ active }) => setActiveId(String(active.id)), onDragOver: ({ over }) => setOverId(over ? String(over.id) : null), onDragCancel: () => { setActiveId(null); setOverId(null); }, onDragEnd: finishDrag, children: [_jsx(SortableContext, { items: shownItems.map((item) => item.src), strategy: rectSortingStrategy, children: _jsx("div", { className: "pe-photo-grid", children: shownItems.map((item) => (_jsx(GalleryCard, { item: item, masonry: masonry, activeId: activeId, overId: overId, activeIndex: activeIndex, overIndex: overIndex, onReplace: () => void replace(itemIndex(item.src)), onToggle: () => toggle(item.src), onRemove: () => remove(item.src) }, item.src))) }) }), _jsx(DragOverlay, { children: activeItem && (_jsx("div", { className: "pe-photo-overlay", children: _jsx("img", { src: activeItem.src, alt: "" }) })) }), masonry && hiddenItems.length > 0 && (_jsxs("section", { className: "pe-hidden-gallery", "aria-label": "Foto nascoste", children: [_jsxs("div", { className: "pe-hidden-gallery-head", children: [_jsx("strong", { children: "Nascoste" }), _jsx("span", { children: "Non occupano spazio nella gallery pubblica." })] }), _jsx("div", { className: "pe-hidden-grid", children: hiddenItems.map((item) => (_jsx(GalleryCard, { item: item, sortable: false, activeId: activeId, overId: overId, activeIndex: activeIndex, overIndex: overIndex, onReplace: () => void replace(itemIndex(item.src)), onToggle: () => toggle(item.src), onRemove: () => remove(item.src) }, item.src))) })] }))] }))] }));
 }
 export function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, activeLanguage, defaultLanguage, }) {
     const [bodyState, setBodyState] = useState("idle");
@@ -297,7 +342,7 @@ export function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pic
            (`sections[].images`) e dove la griglia esce sul sito. Non c'è più un pannello staccato in
            fondo — c'era finché le foto stavano in un campo della pagina, e insieme a lui è sparito
            il caso in cui la stessa griglia si vedeva due volte. */
-        return (_jsxs("div", { className: "ed ed-gallery", children: [bodyState === "error" && (_jsx("p", { className: "pe-load-error", children: "Non sono riuscito ad aggiornare i dati della pagina dal sito." })), _jsx(GallerySectionsEditor, { value: page.sections, onChange: (sections) => onChange({ ...page, sections }), renderGallery: (images, onImages) => (_jsx(GalleryEditor, { value: images, onChange: onImages, pickMediaFiles: pickMediaFiles })), pickMediaFiles: pickMediaFiles })] }));
+        return (_jsxs("div", { className: "ed ed-gallery", children: [bodyState === "error" && (_jsx("p", { className: "pe-load-error", children: "Non sono riuscito ad aggiornare i dati della pagina dal sito." })), _jsx(GallerySectionsEditor, { value: page.sections, onChange: (sections) => onChange({ ...page, sections }), renderGallery: (images, onImages) => (_jsx(GalleryEditor, { value: images, onChange: onImages, pickMediaFiles: pickMediaFiles, masonry: page.galleryLayout === "masonry" })), pickMediaFiles: pickMediaFiles })] }));
     }
     return (_jsxs("div", { className: "ed", children: [translationActive && (_jsx("p", { className: "pe-translation-note", children: page.translations?.[activeLanguage]?.exists || page._translations?.[activeLanguage]
                     ? `Stai modificando ${activeLanguage.toUpperCase()}. I campi non traducibili restano visibili e vengono copiati dalla lingua predefinita al salvataggio.`

package/dist/form/MediaBrowser.d.ts

@@ -3,10 +3,12 @@ export interface MediaBrowserProps {
     /** "manage" = tutto (upload, sposta, cancella). "pick" = solo scelta. */
     mode: "manage" | "pick";
     multiple?: boolean;
+    /** Spiega l'effetto della scelta senza attribuirlo alla libreria media. */
+    notice?: string;
     onPick?: (files: AssetFile[]) => void;
     onCancel?: () => void;
 }
-export declare function MediaBrowser({ mode, multiple, onPick, onCancel }: MediaBrowserProps): import("react").JSX.Element;
+export declare function MediaBrowser({ mode, multiple, notice, 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";

package/dist/form/MediaBrowser.js

@@ -14,10 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 }) {
+export function MediaBrowser({ mode, multiple = true, notice, 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 }) })] }));
+    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, notice: notice, onPick: onPick, onCancel: onCancel }) })] }));
 }
 export { useMediaLibrary } from "./media/useMediaLibrary.js";
 export { MediaFolders } from "./media/MediaFolders.js";

package/dist/form/MediaPicker.d.ts

@@ -1,10 +1,11 @@
 import type { AssetFile } from "../api.js";
+export interface PickerOptions {
+    multiple: boolean;
+    /** Contesto dell'azione che ha aperto il picker, visibile durante la scelta. */
+    notice?: string;
+}
 export declare function usePicker(): {
-    pickMedia: (opts: {
-        multiple: boolean;
-    }) => Promise<string[] | null>;
-    pickMediaFiles: (opts: {
-        multiple: boolean;
-    }) => Promise<AssetFile[] | null>;
+    pickMedia: (opts: PickerOptions) => Promise<string[] | null>;
+    pickMediaFiles: (opts: PickerOptions) => Promise<AssetFile[] | null>;
     pickerElement: import("react").JSX.Element | null;
 };

package/dist/form/MediaPicker.js

@@ -10,11 +10,11 @@ export function usePicker() {
      * 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 pickMediaFiles = useCallback((opts) => new Promise((resolve) => setReq({ ...opts, 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;
+        } }, children: _jsx("div", { className: "mb-modal-panel", children: _jsx(MediaBrowser, { mode: "pick", multiple: req.multiple, notice: req.notice, onPick: (files) => { req.resolve(files); setReq(null); }, onCancel: () => { req.resolve(null); setReq(null); } }) }) })) : null;
     return { pickMedia, pickMediaFiles, pickerElement: element };
 }

package/dist/form/media/MediaFolders.js

@@ -12,9 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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.
+ * «Senza cartella» accetta un file esterno come destinazione ESPLICITA di upload; per gli
+ * spostamenti interni continua ad accettare solo CARTELLE, perché la Function rifiuta una
+ * destinazione vuota per un file esistente.
  */
 import { useEffect, useState } from "react";
 export const DRAG_TYPE = "application/x-adminkit-keys";
@@ -70,7 +70,8 @@ const IcoSettings = () => (_jsxs("svg", { className: "mf-ico", viewBox: "0 0 16
 export function MediaFolders({ lib, trash, settings }) {
     const [over, setOver] = useState(null);
     const [draggingFolder, setDraggingFolder] = useState(false);
-    const canDrop = lib.mode === "manage" && !lib.busy && !lib.mutating;
+    const canMove = lib.mode === "manage" && !lib.busy && !lib.mutating;
+    const canUpload = !lib.busy && !lib.mutating;
     /* 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));
@@ -80,19 +81,34 @@ export function MediaFolders({ lib, trash, settings }) {
         trash.leave(); lib.go(p); };
     const drop = (dest) => (e) => {
         setOver(null);
-        if (!canDrop)
+        if (canUpload && e.dataTransfer.files.length) {
+            e.preventDefault();
+            if (lib.mode === "pick")
+                lib.openUpload(e.dataTransfer.files, dest);
+            else
+                void lib.upload(e.dataTransfer.files, dest);
+            return;
+        }
+        if (!canMove)
             return;
         e.preventDefault();
         const ids = readDragged(e.dataTransfer);
         if (ids.length)
             void lib.move(ids, dest);
     };
+    const dragOver = (dest) => (e) => {
+        const files = e.dataTransfer.types.includes("Files");
+        if ((files && canUpload) || (!files && canMove)) {
+            e.preventDefault();
+            setOver(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)
+        if (!canMove)
             return;
         const start = (e) => setDraggingFolder(!!e.dataTransfer?.types.includes(DRAG_FOLDERS));
         const end = () => setDraggingFolder(false);
@@ -104,14 +120,11 @@ export function MediaFolders({ lib, trash, settings }) {
             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", disabled: lib.mutating, onClick: () => goTo(""), children: _jsx("span", { className: "mf-name", children: "Senza cartella" }) }) }) }), _jsx("ul", { className: "mf-list", children: lib.folders.map((f) => (_jsxs("li", { 
+    }, [canMove]);
+    return (_jsxs("div", { className: "mf", children: [_jsx("ul", { className: "mf-list", children: _jsx("li", { className: "mf-item mf-loose" + (here("") ? " is-on" : "") + (over === "" ? " is-over" : ""), onDragOver: dragOver(""), onDragLeave: () => setOver((p) => (p === "" ? null : p)), onDrop: drop(""), children: _jsx("button", { className: "mf-open", disabled: lib.mutating, 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", disabled: lib.mutating, 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", disabled: lib.busy || lib.mutating, 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", disabled: lib.mutating, onClick: trash.open, children: [_jsx(IcoTrash, {}), _jsx("span", { className: "mf-name", children: "Cestino" })] }) }) })), settings && (_jsx("ul", { className: "mf-list mf-settings-tail", children: _jsx("li", { className: "mf-item" + (settings.active ? " is-on" : ""), children: _jsxs("button", { className: "mf-open", disabled: lib.mutating, onClick: settings.open, children: [_jsx(IcoSettings, {}), _jsx("span", { className: "mf-name", children: "Impostazioni" })] }) }) }))] }));
+                        + (over === f.prefix ? " is-over" : ""), onDragOver: dragOver(f.prefix), onDragLeave: () => setOver((p) => (p === f.prefix ? null : p)), onDrop: drop(f.prefix), children: [_jsxs("button", { className: "mf-open", disabled: lib.mutating, 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 })] }), canMove && _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" })), canMove && (_jsx("button", { className: "ak-btn ak-btn-quiet mf-new", disabled: lib.busy || lib.mutating, 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", disabled: lib.mutating, onClick: trash.open, children: [_jsx(IcoTrash, {}), _jsx("span", { className: "mf-name", children: "Cestino" })] }) }) })), settings && (_jsx("ul", { className: "mf-list mf-settings-tail", children: _jsx("li", { className: "mf-item" + (settings.active ? " is-on" : ""), children: _jsxs("button", { className: "mf-open", disabled: lib.mutating, onClick: settings.open, children: [_jsx(IcoSettings, {}), _jsx("span", { className: "mf-name", children: "Impostazioni" })] }) }) }))] }));
 }

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

@@ -1,7 +1,9 @@
 import type { AssetFile } from "../../api.js";
 import { type MediaLibrary } from "./useMediaLibrary.js";
-export declare function MediaGrid({ lib, onPick, onCancel }: {
+export declare function MediaGrid({ lib, notice, onPick, onCancel }: {
     lib: MediaLibrary;
+    /** Solo nel picker: ricorda l'effetto della conferma fuori dalla libreria media. */
+    notice?: string;
     /** Solo in modalità "pick": chi ha aperto il modale riceve i file scelti. */
     onPick?: (files: AssetFile[]) => void;
     onCancel?: () => void;

package/dist/form/media/MediaGrid.js

@@ -58,7 +58,7 @@ function MoveMenu({ lib, keys }) {
  * 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 }) {
+function FolderCell({ lib, folder, manage, onExternalDrop }) {
     const [over, setOver] = useState(false);
     const on = lib.selected.has(folder.prefix);
     const name = folder.label || folder.name;
@@ -84,6 +84,11 @@ function FolderCell({ lib, folder, manage }) {
            "è 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 && !locked && e.dataTransfer.types.includes("Files")) {
+                e.preventDefault();
+                setOver(true);
+                return;
+            }
             if (!manage || locked || e.dataTransfer.types.includes("Files"))
                 return;
             /* Si accende anche quando la cartella trascinata è questa stessa: durante il
@@ -93,6 +98,13 @@ function FolderCell({ lib, folder, manage }) {
             setOver(true);
         }, onDragLeave: () => setOver(false), onDrop: (e) => {
             setOver(false);
+            if (!manage && !locked && e.dataTransfer.files.length) {
+                e.preventDefault();
+                e.stopPropagation();
+                onExternalDrop();
+                lib.openUpload(e.dataTransfer.files, folder.prefix);
+                return;
+            }
             if (!manage || locked)
                 return;
             const ids = readDragged(e.dataTransfer);
@@ -103,7 +115,7 @@ function FolderCell({ lib, folder, manage }) {
         }, children: [_jsxs("div", { className: "mg-frame", onClick: () => { if (!locked)
                     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", disabled: locked, 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 }) {
+export function MediaGrid({ lib, notice, onPick, onCancel }) {
     const manage = lib.mode === "manage";
     const sel = lib.selected;
     const allOn = lib.allSelected;
@@ -116,7 +128,7 @@ export function MediaGrid({ lib, onPick, onCancel }) {
        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 && !locked && !e.dataTransfer.types.includes(DRAG_TYPE) && !e.dataTransfer.types.includes(DRAG_FOLDERS);
+    const external = (e) => !locked && !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" : ""), "aria-busy": lib.mutating ? "true" : "false", 
                 /* 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.
@@ -130,13 +142,18 @@ export function MediaGrid({ lib, onPick, onCancel }) {
                     e.preventDefault(); }, onDragLeave: (e) => { if (external(e))
                     setDragDepth((n) => Math.max(0, n - 1)); }, onDrop: (e) => {
                     setDragDepth(0);
-                    if (!manage || locked || !e.dataTransfer.files.length)
+                    if (locked || !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, disabled: locked || !lib.selectableIds.length, 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, disabled: locked, 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", disabled: locked, 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, disabled: locked, ref: (el) => { if (el)
-                                                el.indeterminate = lib.someSelected; }, onChange: () => lib.setAll(!allOn) }), _jsx("span", { children: selection.label })] }), !allOn && lib.selectableIds.length > 0 && (_jsxs("button", { className: "mg-act is-link", disabled: locked, onClick: () => lib.setAll(true), children: ["Seleziona tutti gli elementi (", lib.selectableIds.length, ")"] })), manage && (_jsxs(_Fragment, { children: [lib.selectedFiles.length > 0 && (_jsxs("button", { className: "mg-act", disabled: locked, onClick: () => download(lib.shown.filter((f) => sel.has(f.key)).map((f) => ({ url: f.url, name: f.name }))), children: ["Scarica ", lib.selectedFiles.length, " file"] })), _jsx(MoveMenu, { lib: lib, keys: [...sel] }), _jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.remove([...sel]), children: "Elimina" })] })), _jsx("span", { className: "ak-spacer" }), _jsx("button", { className: "mg-act", disabled: locked, onClick: () => lib.setAll(false), children: "Deseleziona" })] })) }), lib.error && _jsx("p", { className: "ak-error", onClick: lib.clearError, children: lib.error }), manage && lib.mediaOperations.length > 0 && (_jsx("section", { className: "mg-journal", "aria-live": "polite", "aria-label": "Stato operazioni Media", children: lib.mediaOperations.map((operation) => (_jsxs("div", { className: `mg-journal-row is-${operation.state}`, children: [_jsx("span", { className: "mg-journal-badge", children: operation.type === "move" ? "Spostamento" : "Eliminazione" }), _jsx("span", { children: JOURNAL_LABELS[operation.state] ?? "Operazione Media in attesa." }), operation.failedEntries > 0 && _jsxs("span", { className: "ak-hint", children: [operation.failedEntries, " file da riprovare"] }), _jsx("span", { className: "ak-spacer" }), operation.state === "completed_with_warning" && operation.releaseId && (_jsx("button", { className: "mg-act", disabled: locked, onClick: () => void lib.resumeMedia(operation), children: "Riprendi" })), ["preparing", "ready", "blocked_in_use", "failed"].includes(operation.state) && !operation.releaseId && (_jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.cancelMedia(operation), children: "Annulla" }))] }, operation.operationId))) })), 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", disabled: locked, 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) => {
+                    if (manage)
+                        void lib.upload(e.dataTransfer.files);
+                    else
+                        lib.openUpload(e.dataTransfer.files);
+                }, children: [dragDepth > 0 && (_jsx("div", { className: "mg-dropzone", children: manage
+                            ? _jsxs("span", { children: ["Rilascia per caricare in ", _jsx("strong", { children: lib.prefix ? lib.labelOf(lib.prefix) : "Senza cartella" })] })
+                            : _jsx("span", { children: "Rilascia le immagini \u2014 sceglierai la cartella prima del caricamento" }) })), _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, disabled: locked || !lib.selectableIds.length, ref: (el) => { if (el)
+                                                el.indeterminate = false; }, onChange: () => lib.setAll(true) }), _jsx("span", { children: "Seleziona tutto" })] })), !manage && (_jsx("button", { className: "ak-btn ak-btn-quiet mg-upload", disabled: locked, onClick: () => lib.openUpload(), children: "Carica nuove foto" })), _jsx("span", { className: "ak-spacer" }), _jsxs("label", { className: "ak-hint", children: ["ordina per", " ", _jsx("select", { className: "mg-sort", value: lib.sortKey, disabled: locked, 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", disabled: locked, 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, disabled: locked, ref: (el) => { if (el)
+                                                el.indeterminate = lib.someSelected; }, onChange: () => lib.setAll(!allOn) }), _jsx("span", { children: selection.label })] }), !allOn && lib.selectableIds.length > 0 && (_jsxs("button", { className: "mg-act is-link", disabled: locked, onClick: () => lib.setAll(true), children: ["Seleziona tutti gli elementi (", lib.selectableIds.length, ")"] })), manage && (_jsxs(_Fragment, { children: [lib.selectedFiles.length > 0 && (_jsxs("button", { className: "mg-act", disabled: locked, onClick: () => download(lib.shown.filter((f) => sel.has(f.key)).map((f) => ({ url: f.url, name: f.name }))), children: ["Scarica ", lib.selectedFiles.length, " file"] })), _jsx(MoveMenu, { lib: lib, keys: [...sel] }), _jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.remove([...sel]), children: "Elimina" })] })), _jsx("span", { className: "ak-spacer" }), _jsx("button", { className: "mg-act", disabled: locked, onClick: () => lib.setAll(false), children: "Deseleziona" })] })) }), notice && _jsx("p", { className: "mg-picker-notice", children: notice }), lib.error && _jsx("p", { className: "ak-error", onClick: lib.clearError, children: lib.error }), manage && lib.mediaOperations.length > 0 && (_jsx("section", { className: "mg-journal", "aria-live": "polite", "aria-label": "Stato operazioni Media", children: lib.mediaOperations.map((operation) => (_jsxs("div", { className: `mg-journal-row is-${operation.state}`, children: [_jsx("span", { className: "mg-journal-badge", children: operation.type === "move" ? "Spostamento" : "Eliminazione" }), _jsx("span", { children: JOURNAL_LABELS[operation.state] ?? "Operazione Media in attesa." }), operation.failedEntries > 0 && _jsxs("span", { className: "ak-hint", children: [operation.failedEntries, " file da riprovare"] }), _jsx("span", { className: "ak-spacer" }), operation.state === "completed_with_warning" && operation.releaseId && (_jsx("button", { className: "mg-act", disabled: locked, onClick: () => void lib.resumeMedia(operation), children: "Riprendi" })), ["preparing", "ready", "blocked_in_use", "failed"].includes(operation.state) && !operation.releaseId && (_jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.cancelMedia(operation), children: "Annulla" }))] }, operation.operationId))) })), lib.progress && (_jsxs("p", { className: "mg-progress", children: [lib.progress.verb, " ", lib.progress.done, "/", lib.progress.total, "\u2026 \u2014 non chiudere la pagina"] })), lib.pickUploadJob?.state === "running" && (_jsxs("p", { className: "mg-progress", children: ["Nuove immagini: preparo ", lib.pickUploadJob.conversionDone, "/", lib.pickUploadJob.total, ", carico ", lib.pickUploadJob.uploadDone, "/", lib.pickUploadJob.total, "\u2026"] })), 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", disabled: locked, 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, onExternalDrop: () => setDragDepth(0) }, 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 && !locked, onDragStart: (e) => {
                                     if (locked) {
@@ -159,5 +176,5 @@ export function MediaGrid({ lib, onPick, onCancel }) {
                                                 style: { aspectRatio: f.w && f.h ? `${f.w} / ${f.h}` : "3 / 2" } }), _jsx("button", { className: "mg-check", "aria-label": on ? "Deseleziona" : "Seleziona", disabled: locked, 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", disabled: locked, onClick: () => onCancel?.(), children: "Annulla" }), _jsxs("button", { className: "ak-btn ak-btn-primary", disabled: locked || !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 })] }));
+                            : "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", disabled: locked, onClick: () => onCancel?.(), children: "Annulla" }), _jsxs("button", { className: "ak-btn ak-btn-primary", disabled: locked || !sel.size, onClick: () => onPick?.(lib.shown.filter((f) => sel.has(f.key))), children: ["Usa ", sel.size > 0 ? `(${sel.size})` : ""] })] }))] }), _jsx(Lightbox, { lib: lib }), _jsx(UploadDialog, { lib: lib })] }));
 }

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

@@ -1,4 +1,11 @@
 import type { MediaLibrary } from "./useMediaLibrary.js";
+/** Le destinazioni che il picker può dichiarare senza inventarsi un secondo browser di
+ * cartelle: primo livello, cartella aperta e sue figlie. I duplicati spariscono mantenendo
+ * l'ordine più comprensibile. */
+export declare function uploadDestinations(lib: MediaLibrary): {
+    prefix: string;
+    label: string;
+}[];
 export declare function UploadDialog({ lib }: {
     lib: MediaLibrary;
 }): import("react").JSX.Element | null;

package/dist/form/media/UploadDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* Il dialogo di caricamento.
+/* Il dialogo di caricamento, condiviso da Media e picker.
  *
  * 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
@@ -9,21 +9,54 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * il messaggio resta sullo schermo invece di sparire con la finestra.
  */
 import { useRef, useState } from "react";
+const UNSET = "__adminkit_unset_destination__";
+/** Le destinazioni che il picker può dichiarare senza inventarsi un secondo browser di
+ * cartelle: primo livello, cartella aperta e sue figlie. I duplicati spariscono mantenendo
+ * l'ordine più comprensibile. */
+export function uploadDestinations(lib) {
+    const out = [{ prefix: "", label: "Senza cartella" }];
+    const seen = new Set([""]);
+    const add = (prefix, label) => {
+        if (seen.has(prefix))
+            return;
+        seen.add(prefix);
+        out.push({ prefix, label });
+    };
+    for (const folder of lib.folders)
+        add(folder.prefix, folder.label || folder.name);
+    if (lib.prefix)
+        add(lib.prefix, lib.labelOf(lib.prefix));
+    for (const folder of lib.subfolders) {
+        const parent = lib.prefix ? `${lib.labelOf(lib.prefix)} › ` : "";
+        add(folder.prefix, parent + (folder.label || folder.name));
+    }
+    return out;
+}
 export function UploadDialog({ lib }) {
     const input = useRef(null);
     const [over, setOver] = useState(false);
-    if (!lib.uploadOpen)
+    const draft = lib.uploadDraft;
+    if (!draft)
         return null;
+    const picker = lib.mode === "pick";
     const send = async (list) => {
         if (lib.mutating || !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);
+        if (picker)
+            return lib.setUploadFiles(list);
+        /* Media conserva il gesto storico: scegliere o lasciare i file li accoda subito nella
+           cartella aperta. Nel picker restano invece in attesa finché la destinazione è esplicita. */
+        if (await lib.upload(list, draft.destination ?? lib.prefix))
+            lib.closeUpload();
+    };
+    const start = async () => {
+        if (!picker || draft.destination === null || !draft.files.length)
+            return;
+        if (await lib.upload(draft.files, draft.destination))
+            lib.closeUpload();
     };
     return (_jsx("div", { className: "up", onClick: (e) => { if (!lib.mutating && e.target === e.currentTarget)
-            lib.setUploadOpen(false); }, children: _jsxs("div", { className: "up-panel", children: [_jsx("button", { className: "up-close", disabled: lib.mutating, onClick: () => lib.setUploadOpen(false), "aria-label": "Chiudi", children: "\u00D7" }), _jsxs("div", { className: "up-drop" + (over ? " is-over" : ""), 
+            lib.closeUpload(); }, children: _jsxs("div", { className: "up-panel", children: [_jsx("button", { className: "up-close", disabled: lib.mutating, onClick: lib.closeUpload, "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
@@ -39,5 +72,11 @@ export function UploadDialog({ lib }) {
                         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, disabled: lib.mutating, onChange: (e) => void send(e.target.files) }), _jsx("button", { className: "ak-btn ak-btn-primary", disabled: lib.mutating, 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 })] }) }));
+                    }, 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: picker && draft.files.length
+                                ? `${draft.files.length} ${draft.files.length === 1 ? "immagine pronta" : "immagini pronte"}`
+                                : "Trascina qui le foto da caricare" }), picker && draft.files.length > 0 && (_jsxs("p", { className: "up-files", title: draft.files.map((file) => file.name).join("\n"), children: [draft.files.slice(0, 3).map((file) => file.name).join(", "), draft.files.length > 3 ? ` e altre ${draft.files.length - 3}` : ""] })), _jsx("input", { ref: input, type: "file", multiple: true, accept: picker ? "image/*" : "image/*,video/*", hidden: true, disabled: lib.mutating, onChange: (e) => {
+                                const files = Array.from(e.target.files ?? []);
+                                e.target.value = ""; // lo stesso file può essere scelto di nuovo dopo un errore
+                                void send(files);
+                            } }), _jsx("button", { className: "ak-btn ak-btn-primary", disabled: lib.mutating, onClick: () => input.current?.click(), children: picker && draft.files.length ? "Cambia i file" : "Scegli i file" })] }), picker ? (_jsxs("label", { className: "up-dest-field", children: [_jsx("span", { children: "Destinazione" }), _jsxs("select", { className: "ak-input", value: draft.destination === null ? UNSET : draft.destination, onChange: (event) => lib.setUploadDestination(event.target.value === UNSET ? null : event.target.value), children: [_jsx("option", { value: UNSET, children: "Scegli una cartella\u2026" }), uploadDestinations(lib).map((destination) => (_jsx("option", { value: destination.prefix, children: destination.label }, destination.prefix || "__root")))] }), _jsx("small", { children: "La cartella aperta o ricordata non viene usata automaticamente." })] })) : (_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 }), picker && (_jsxs("div", { className: "up-actions", children: [_jsx("button", { className: "ak-btn ak-btn-quiet", disabled: lib.mutating, onClick: lib.closeUpload, children: "Annulla" }), _jsxs("button", { className: "ak-btn ak-btn-primary", disabled: lib.mutating || !draft.files.length || draft.destination === null, onClick: () => void start(), children: ["Carica ", draft.files.length > 0 ? `(${draft.files.length})` : ""] })] }))] }) }));
 }

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

@@ -1,3 +1,4 @@
+import { type AssetFile } from "../../api.js";
 export type MediaUploadState = "running" | "done" | "failed";
 export interface MediaUploadJob {
     id: string;
@@ -12,6 +13,10 @@ export interface MediaUploadJob {
     failed: number;
     autoWebp: boolean;
     errors: string[];
+    /** I file come esistono DAVVERO nel bucket dopo conversione, naming e upload. Il picker li
+     * usa per selezionare i nuovi arrivi: non può ricostruirne l'URL dal nome originale, perché
+     * una conversione può cambiare estensione e `uniqueKey` può aggiungere un suffisso. */
+    uploaded: AssetFile[];
 }
 interface StartInput {
     prefix: string;

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

@@ -45,7 +45,7 @@ export function startMediaUpload(input) {
     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: [],
+            autoWebp: input.autoWebp, errors: [], uploaded: [],
         }];
     emit();
     void run(id, input);
@@ -80,9 +80,9 @@ async function run(id, input) {
             if (!prepared)
                 return;
             try {
-                await uploadWithRetry(input.prefix, prepared.upload, prepared.capturedAt);
+                const uploaded = await uploadWithRetry(input.prefix, prepared.upload, prepared.capturedAt);
                 const job = current(id);
-                patch(id, { uploadDone: job.uploadDone + 1 });
+                patch(id, { uploadDone: job.uploadDone + 1, uploaded: [...job.uploaded, uploaded] });
             }
             catch (error) {
                 const job = current(id);

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

@@ -1,5 +1,6 @@
 import { type AssetFile, type AssetFolder } from "../../api.js";
 import type { MediaOperationStatus } from "../../media.js";
+import { type MediaUploadJob } from "./media-upload-queue.js";
 export type MediaOperationState = "idle" | "planning" | "awaiting_confirmation" | "moving" | "deleting" | "renaming" | "creating_folder" | "journal";
 export type SortKey = "uploaded" | "capturedAt" | "name" | "size";
 export declare const SORT_LABELS: Record<SortKey, string>;
@@ -31,7 +32,13 @@ export interface MediaLibrary {
     } | null;
     sortKey: SortKey;
     sortDir: "asc" | "desc";
-    uploadOpen: boolean;
+    uploadDraft: {
+        files: File[];
+        destination: string | null;
+    } | null;
+    /** Il job nato da QUESTO picker. Gli upload sono globali, ma solo questo va riportato qui
+     * per mostrare il progresso e selezionare i file appena arrivati. */
+    pickUploadJob: MediaUploadJob | null;
     viewing: number | null;
     autoWebp: boolean;
     settingsBusy: boolean;
@@ -41,9 +48,13 @@ export interface MediaLibrary {
     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;
+    /** Accoda lo STESSO lavoro usato da Media. `destination` è esplicita nel picker; in gestione
+     * il ripiego resta la cartella aperta, che è il comportamento storico. */
+    upload(files: File[] | FileList, destination?: string): Promise<string | null>;
+    openUpload(files?: File[] | FileList, destination?: string): void;
+    closeUpload(): void;
+    setUploadFiles(files: File[] | FileList): void;
+    setUploadDestination(destination: string | null): void;
     setAutoWebp(on: boolean): Promise<void>;
     view(i: number | null): void;
     step(delta: number): void;

package/dist/form/media/useMediaLibrary.js

@@ -12,7 +12,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 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";
+import { startMediaUpload, useMediaUploadCompletions, useMediaUploads, } from "./media-upload-queue.js";
 import { invalidMediaMoveReason, isValidMediaMoveDestination, mediaFolderSlug, mediaSelectableItems, mediaSelectionState, normalizeMediaSelection, summarizeMediaSelection, tryBeginMediaMutation, } from "./media-model.js";
 import { executeMediaMovePlan, mediaMoveConfirmation, mediaMoveNeedsConfirmation, } from "./media-move.js";
 /* Quanti file per richiesta nelle operazioni lunghe (cestina, sposta). Ogni file costa al
@@ -42,12 +42,14 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
     const [error, setError] = useState(null);
     const [mediaOperations, setMediaOperations] = useState([]);
     const [progress, setProgress] = useState(null);
-    const [uploadOpen, setUploadOpen] = useState(false);
+    const [uploadDraft, setUploadDraft] = useState(null);
+    const [pickUploadJobId, setPickUploadJobId] = useState(null);
     const [viewing, setViewing] = useState(null);
     const [autoWebp, setAutoWebpState] = useState(true);
     const [settingsBusy, setSettingsBusy] = useState(false);
     const [settingsLoaded, setSettingsLoaded] = useState(false);
     const mediaUploadCompletions = useMediaUploadCompletions();
+    const mediaUploads = useMediaUploads();
     const seenMediaUploadCompletions = useRef(mediaUploadCompletions);
     /* Lo stato React disabilita la UI; la ref chiude anche la finestra nello stesso batch React,
      * prima che il render successivo possa applicare i disabled. */
@@ -151,8 +153,8 @@ export function useMediaLibrary({ mode, multiple = true, active = true, 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à. */
+     * nuovo comportamento senza migrazioni. In gestione si anticipa la richiesta; il picker la
+     * farà pigramente solo quando parte davvero un upload. */
     useEffect(() => {
         if (mode !== "manage" || !active || settingsLoaded)
             return;
@@ -169,11 +171,32 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
         if (!active || seenMediaUploadCompletions.current === mediaUploadCompletions)
             return;
         seenMediaUploadCompletions.current = mediaUploadCompletions;
+        /* Il job nato da questo picker ha un effetto dedicato qui sotto: deve andare nella propria
+           destinazione e selezionare i nuovi file. Un reload generico della cartella che si stava
+           guardando correrebbe in parallelo e potrebbe vincere per ultimo. */
+        if (mode === "pick" && pickUploadJobId)
+            return;
         // Se nel frattempo c'è una mutazione, il suo reload finale comprende anche l'upload appena
         // concluso. Un secondo load qui potrebbe invece cambiare busy e selezione a metà progresso.
         if (loaded && !mutationRef.current)
             void load(prefix);
-    }, [active, mediaUploadCompletions, loaded, load, prefix]);
+    }, [active, mediaUploadCompletions, loaded, load, prefix, mode, pickUploadJobId]);
+    const pickUploadJob = pickUploadJobId
+        ? mediaUploads.find((job) => job.id === pickUploadJobId) ?? null
+        : null;
+    /* Quando il lavoro del picker finisce, apre la destinazione e seleziona gli oggetti restituiti
+     * dall'API. Sono quelli reali: magari `.webp`, magari `foto-2.webp`. In scelta singola se ne
+     * evidenzia uno solo, pur avendo correttamente caricato tutto il gruppo. */
+    useEffect(() => {
+        if (mode !== "pick" || !pickUploadJobId || !pickUploadJob || pickUploadJob.state === "running")
+            return;
+        const uploaded = pickUploadJob.uploaded.map((file) => file.key);
+        const chosen = multiple ? uploaded : uploaded.slice(0, 1);
+        setPickUploadJobId(null);
+        if (!uploaded.length)
+            return;
+        void load(pickUploadJob.prefix).then(() => setSelected(new Set(chosen)));
+    }, [mode, multiple, pickUploadJobId, pickUploadJob, load]);
     /* 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". */
@@ -226,12 +249,12 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
             return setSelected(new Set());
         setSelected(new Set(selectableIds));
     }, [selectableIds]);
-    const upload = useCallback(async (list) => {
+    const upload = useCallback(async (list, requestedDestination) => {
         if (mutationRef.current)
-            return false;
+            return null;
         const arr = Array.from(list);
         if (!arr.length)
-            return true;
+            return null;
         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. */
@@ -244,20 +267,23 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
             }
             catch (e) {
                 setError(e instanceof ApiError ? e.message : String(e));
-                return false;
+                return null;
             }
         }
-        const destination = prefix
-            ? seenLabels.current[prefix] || prefix.replace(/\/$/, "").split("/").pop() || prefix
+        const target = requestedDestination ?? prefix;
+        const destination = target
+            ? seenLabels.current[target] || target.replace(/\/$/, "").split("/").pop() || target
             : "Senza cartella";
-        startMediaUpload({
-            prefix,
+        const id = startMediaUpload({
+            prefix: target,
             title: `${arr.length} file · ${destination}`,
             files: arr,
             autoWebp: convert,
         });
-        return true;
-    }, [prefix, autoWebp, settingsLoaded]);
+        if (mode === "pick")
+            setPickUploadJobId(id);
+        return id;
+    }, [prefix, autoWebp, settingsLoaded, mode]);
     const setAutoWebp = useCallback(async (on) => {
         if (mutationRef.current)
             return;
@@ -657,7 +683,7 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
         mode, multiple, prefix, folders, subfolders, shown, selected, selectableIds,
         selectedFiles: selectionSummary.files, selectedFolders: selectionSummary.folders,
         allSelected, someSelected, busy, mutating, operationState, error, mediaOperations, progress,
-        sortKey, sortDir, uploadOpen, viewing, autoWebp, settingsBusy,
+        sortKey, sortDir, uploadDraft, pickUploadJob, viewing, autoWebp, settingsBusy,
         go: (p) => { if (!mutationRef.current)
             void load(p); },
         reload: () => { if (!mutationRef.current)
@@ -666,8 +692,18 @@ export function useMediaLibrary({ mode, multiple = true, active = true, remember
         setSort: setSortKey,
         flipDir: () => setSortDir((d) => (d === "asc" ? "desc" : "asc")),
         upload,
-        setUploadOpen: (open) => { if (!open || !mutationRef.current)
-            setUploadOpen(open); },
+        openUpload: (files = [], destination) => {
+            if (mutationRef.current)
+                return;
+            setUploadDraft({
+                files: Array.from(files),
+                destination: mode === "manage" ? (destination ?? prefix) : (destination === undefined ? null : destination),
+            });
+        },
+        closeUpload: () => { if (!mutationRef.current)
+            setUploadDraft(null); },
+        setUploadFiles: (files) => setUploadDraft((draft) => (draft ? { ...draft, files: Array.from(files) } : draft)),
+        setUploadDestination: (destination) => setUploadDraft((draft) => (draft ? { ...draft, destination } : draft)),
         setAutoWebp,
         view: setViewing,
         step,

package/dist/theme.css

@@ -345,6 +345,7 @@ a.ak-btn { text-decoration: none; display: inline-flex; align-items: center; }
 .mg-act:hover:not(:disabled) { text-decoration: underline; }
 .mg-act:disabled { color: var(--ak-ink-quiet); cursor: default; }
 .mg-act.is-danger { color: var(--ak-danger); }
+.mg-upload { white-space: nowrap; }
 .mg-menu-wrap { position: relative; display: inline-flex; }
 .mg-menu {
   position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
@@ -374,6 +375,11 @@ a.ak-btn { text-decoration: none; display: inline-flex; align-items: center; }
   background: var(--ak-panel); border: 1px solid var(--ak-accent);
   font: 500 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-ink);
 }
+.mg-picker-notice {
+  margin: 0; padding: 8px 12px; border-radius: var(--ak-radius);
+  background: var(--ak-panel); border: 1px solid var(--ak-line);
+  color: var(--ak-ink); font: 500 var(--ak-fs-small)/1.4 var(--ak-font);
+}
 .mg-journal { display: flex; flex-direction: column; gap: 6px; }
 .mg-journal-row {
   display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
@@ -507,7 +513,16 @@ a.ak-btn { text-decoration: none; display: inline-flex; align-items: center; }
 .up-drop.is-over { border-color: var(--ak-accent); background: #fdf4f2; }
 .up-cloud { color: var(--ak-ink-quiet); }
 .up-hint { margin: 0; font: 400 13px/1.4 var(--ak-font); color: var(--ak-ink-quiet); }
+.up-files {
+  max-width: 100%; margin: -7px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--ak-ink); font: 500 var(--ak-fs-small)/1.4 var(--ak-font);
+}
 .up-dest { margin: 0; font: 400 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-ink-quiet); }
+.up-dest-field { display: flex; flex-direction: column; gap: 6px; }
+.up-dest-field > span { font: 600 var(--ak-fs-small)/1.3 var(--ak-font); color: var(--ak-ink); }
+.up-dest-field select { width: 100%; }
+.up-dest-field small { color: var(--ak-ink-quiet); font: 400 11px/1.4 var(--ak-font); }
+.up-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 2px; }
 
 /* ---- Cestino ------------------------------------------------------------------------ */
 .tr { display: flex; flex-direction: column; gap: 10px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardinali-studio/adminkit",
-  "version": "2.2.15",
+  "version": "2.2.17",
   "type": "module",
   "description": "Motore riusabile di un pannello di amministrazione per siti Hugo su Cloudflare Pages: codec del front matter guidato dallo schema, form React, libreria media su R2. NIENTE di specifico di un sito qui dentro.",
   "license": "UNLICENSED",