@cardinali-studio/adminkit 2.2.16 → 2.2.17

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/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

@@ -115,7 +115,7 @@ function FolderCell({ lib, folder, manage, onExternalDrop }) {
         }, 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;
@@ -153,7 +153,7 @@ export function MediaGrid({ lib, onPick, onCancel }) {
                             ? _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" })] })) }), 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) => {
+                                                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) {

package/dist/theme.css

@@ -375,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardinali-studio/adminkit",
-  "version": "2.2.16",
+  "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",