@cardinali-studio/adminkit 1.0.0

package/dist/app/routes/GallerySectionsEditor.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Le sezioni di una pagina gallery: i blocchi editoriali E la griglia delle fotografie, in un
+ * elenco solo, nell'ordine in cui si vedono sul sito.
+ *
+ * Quattro tipi soltanto e con layout progettati: Header, Testo, Immagine e «Foto della gallery».
+ * L'utente può comporli e riordinarli; nel blocco delle foto può regolare colonne e distanze
+ * entro domini che template e animazione sanno governare, senza introdurre stili liberi.
+ *
+ * Il blocco delle foto NON si aggiunge dal menu: **se la pagina è una gallery, il blocco c'è**.
+ * È il posto in cui le foto vivono (`section.images`), si scelgono e si riordinano — quindi
+ * eliminarlo elimina le foto, senza nessun codice che vada a svuotare un secondo campo. Quando
+ * il front matter non lo contiene ancora lo si sintetizza per la vista, con l'id COSTANTE
+ * dichiarato nello schema: generarlo come gli altri (`Date.now()` + random) darebbe a dnd-kit
+ * una chiave nuova a ogni render, la card verrebbe rimontata di continuo e trascinarla sarebbe
+ * impossibile.
+ *
+ * Uno per pagina: `gallery.js` è costruito attorno a UNA griglia (la classe della vista sta su
+ * `.rg`, `cells` è una lista piatta), quindi un secondo blocco non avrebbe niente da governare.
+ * Non essendoci la voce nel menu, un secondo non si può nemmeno creare.
+ *
+ * Il riordino NON disegna più una barra di inserimento. Ce n'era una, blu, e serviva a dire
+ * dove sarebbe caduta la sezione trascinata: era un tratto in un colore fuori palette, e
+ * soprattutto ripeteva una cosa che `verticalListSortingStrategy` mostra già da sé allontanando
+ * gli elementi. Toglierla ha portato via anche lo stato che la alimentava (`activeId`/`overId`
+ * e i due handler che li aggiornavano a ogni movimento del puntatore).
+ *
+ * L'aspetto è quello dell'editor dei lavori del portfolio, e non per somiglianza: sono gli
+ * stessi valori, dichiarati una volta in `theme.css` (`--ak-ground`, `--ak-inset`, `--ak-lift-*`).
+ */
+import { useEffect, useRef, useState } from "react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GALLERY_BLOCK_ID, emptySection } from "../../index.js";
+import { normalizeSections, withGalleryBlock } from "../../normalize.js";
+import { ParagraphEditor } from "../ui/ParagraphEditor";
+import { Icon } from "../ui/icons";
+function sectionId() {
+    return `section-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+}
+/* `normalizeSections` e `withGalleryBlock` vivono in `src/normalize.ts`: logica pura, e la
+   verifica sui contenuti veri di ogni sito gira in Node, dove React non c'è. */
+const normalized = normalizeSections;
+function SectionIcon({ type }) {
+    if (type === "gallery")
+        return _jsx(Icon.gallery, {});
+    return type === "image" ? _jsx(Icon.media, {}) : type === "header" ? _jsx(Icon.pages, {}) : _jsx(Icon.doc, {});
+}
+function labelOf(type) {
+    return type === "header" ? "Header"
+        : type === "text" ? "Testo"
+            : type === "gallery" ? "Foto della gallery"
+                : "Immagine";
+}
+function SortableSection({ section, index, onPatch, onDuplicate, onRemove, renderGallery, pickMediaFiles, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: section.id });
+    const isGallery = section.type === "gallery";
+    const chooseImage = async () => {
+        const selected = await pickMediaFiles?.({ multiple: false });
+        const file = selected?.[0];
+        if (file)
+            onPatch({ image: file.url, w: file.w ?? null, h: file.h ?? null });
+    };
+    return (_jsxs("article", { ref: setNodeRef, className: ["gs-card", `is-${section.type}`, isDragging ? "is-dragging" : ""]
+            .filter(Boolean).join(" "), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsxs("header", { className: "gs-card-head", children: [_jsx("button", { type: "button", className: "gs-drag", title: "Trascina per riordinare", "aria-label": `Riordina sezione ${labelOf(section.type)}`, ...attributes, ...listeners, children: _jsx(Icon.grip, {}) }), _jsx("span", { className: "gs-card-icon", children: _jsx(SectionIcon, { type: section.type }) }), _jsx("strong", { children: labelOf(section.type) }), _jsx("span", { className: "gs-position", children: index + 1 }), !isGallery && (_jsx("button", { type: "button", className: "gs-head-action", onClick: onDuplicate, children: "Duplica" })), (!isGallery || section.images.length > 0) && (_jsx("button", { type: "button", className: "gs-head-action is-danger", onClick: onRemove, children: "Elimina" }))] }), isGallery && (_jsx("div", { className: "gs-gallery", children: renderGallery?.(section.images, (images) => onPatch({ images })) })), section.type === "header" && (_jsxs("div", { className: "gs-fields", children: [_jsxs("label", { children: [_jsxs("span", { children: ["Occhiello ", _jsx("small", { children: "facoltativo" })] }), _jsx("input", { value: section.eyebrow, maxLength: 120, placeholder: "Es. Fotografia gastronomica", onChange: (event) => onPatch({ eyebrow: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Titolo" }), _jsx("input", { value: section.heading, maxLength: 200, placeholder: "Titolo della sezione", onChange: (event) => onPatch({ heading: event.target.value }) })] }), _jsxs("label", { children: [_jsxs("span", { children: ["Introduzione ", _jsx("small", { children: "facoltativa" })] }), _jsx("textarea", { rows: 4, value: section.lead, maxLength: 800, placeholder: "Una breve apertura sotto il titolo.", onChange: (event) => onPatch({ lead: event.target.value }) })] })] })), section.type === "text" && (_jsx("div", { className: "gs-fields", children: _jsxs("label", { children: [_jsx("span", { children: "Testo" }), _jsx(ParagraphEditor, { value: section.paragraphs, onChange: (paragraphs) => onPatch({ paragraphs }) }), _jsx("small", { children: "Seleziona una parola per metterla in grassetto, in corsivo o per collegarla." })] }) })), section.type === "image" && (_jsxs("div", { className: "gs-image-editor", children: [_jsx("button", { type: "button", className: "gs-image-preview", onClick: () => void chooseImage(), children: section.image ? _jsx("img", { src: section.image, alt: "" }) : (_jsxs("span", { children: [_jsx(Icon.media, {}), " Scegli un\u2019immagine"] })) }), _jsxs("div", { className: "gs-image-fields", children: [_jsxs("div", { className: "gs-image-actions", children: [_jsx("button", { type: "button", className: "btn-soft", onClick: () => void chooseImage(), children: section.image ? "Cambia immagine" : "Scegli immagine" }), section.image && (_jsx("button", { type: "button", className: "btn-soft is-quiet", onClick: () => onPatch({ image: "", w: null, h: null }), children: "Rimuovi" }))] }), _jsxs("label", { children: [_jsx("span", { children: "Testo alternativo" }), _jsx("input", { value: section.alt, maxLength: 300, placeholder: "Descrive l\u2019immagine a chi non pu\u00F2 vederla", onChange: (event) => onPatch({ alt: event.target.value }) })] }), _jsxs("label", { children: [_jsxs("span", { children: ["Didascalia ", _jsx("small", { children: "facoltativa" })] }), _jsx("input", { value: section.caption, maxLength: 300, onChange: (event) => onPatch({ caption: event.target.value }) })] }), _jsxs("div", { className: "gs-layout", children: [_jsx("span", { children: "Dimensione" }), _jsxs("div", { className: "seg", role: "group", "aria-label": "Dimensione dell\u2019immagine", children: [_jsx("button", { type: "button", className: "seg-btn" + (section.layout === "wide" ? " is-on" : ""), onClick: () => onPatch({ layout: "wide" }), children: "Larga" }), _jsx("button", { type: "button", className: "seg-btn" + (section.layout === "contained" ? " is-on" : ""), onClick: () => onPatch({ layout: "contained" }), children: "Contenuta" })] })] })] })] }))] }));
+}
+export function GallerySectionsEditor({ value, onChange, renderGallery, pickMediaFiles, }) {
+    const sections = withGalleryBlock(normalized(value));
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuRef = useRef(null);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    useEffect(() => {
+        if (!menuOpen)
+            return;
+        const close = (event) => {
+            if (!menuRef.current?.contains(event.target))
+                setMenuOpen(false);
+        };
+        addEventListener("pointerdown", close);
+        return () => removeEventListener("pointerdown", close);
+    }, [menuOpen]);
+    const add = (type) => {
+        onChange([...sections, emptySection(type, sectionId())]);
+        setMenuOpen(false);
+    };
+    /* Eliminare il blocco delle foto elimina le foto: stanno lì dentro. Non è un effetto
+       collaterale da compensare altrove — è il modello — ma va detto prima, con il numero. */
+    const remove = (section) => {
+        if (section.type === "gallery" && section.images.length) {
+            const n = section.images.length;
+            const ok = confirm(`Elimini il blocco con le ${n} foto di questa pagina?\n\n` +
+                `Le foto vengono tolte dalla pagina. Restano nei media e si possono rimettere.`);
+            if (!ok)
+                return;
+        }
+        onChange(sections.filter((item) => item.id !== section.id));
+    };
+    const finishDrag = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        const from = sections.findIndex((section) => section.id === active.id);
+        const to = sections.findIndex((section) => section.id === over.id);
+        if (from >= 0 && to >= 0)
+            onChange(arrayMove(sections, from, to));
+    };
+    return (_jsxs("section", { className: "gs-editor", "aria-label": "Sezioni introduttive", children: [_jsxs("div", { className: "gs-add-wrap", ref: menuRef, children: [_jsxs("button", { type: "button", className: "gs-add", "aria-haspopup": "menu", "aria-expanded": menuOpen, onClick: () => setMenuOpen((open) => !open), children: ["Aggiungi sezione ", _jsx(Icon.plus, {})] }), menuOpen && (_jsxs("div", { className: "gs-add-menu", role: "menu", children: [_jsxs("button", { type: "button", onClick: () => add("header"), children: [_jsx("span", { children: _jsx(Icon.pages, {}) }), _jsxs("span", { children: [_jsx("strong", { children: "Header" }), _jsx("small", { children: "Titolo e breve introduzione" })] })] }), _jsxs("button", { type: "button", onClick: () => add("text"), children: [_jsx("span", { children: _jsx(Icon.doc, {}) }), _jsxs("span", { children: [_jsx("strong", { children: "Testo" }), _jsx("small", { children: "Uno o pi\u00F9 paragrafi" })] })] }), _jsxs("button", { type: "button", onClick: () => add("image"), children: [_jsx("span", { children: _jsx(Icon.media, {}) }), _jsxs("span", { children: [_jsx("strong", { children: "Immagine" }), _jsx("small", { children: "Foto editoriale con didascalia" })] })] })] }))] }), !!sections.length && (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: finishDrag, children: _jsx(SortableContext, { items: sections.map((section) => section.id), strategy: verticalListSortingStrategy, children: _jsx("div", { className: "gs-list", children: sections.map((section, index) => (_jsx(SortableSection, { section: section, index: index, renderGallery: renderGallery, pickMediaFiles: pickMediaFiles, onPatch: (patch) => onChange(sections.map((item) => item.id === section.id ? { ...item, ...patch } : item)), onDuplicate: () => onChange(sections.flatMap((item) => item.id === section.id ? [item, { ...item, id: sectionId() }] : [item])), onRemove: () => remove(section) }, section.id))) }) }) }))] }));
+}

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

@@ -0,0 +1,10 @@
+type Data = Record<string, unknown>;
+export declare function HomeEditor({ data, group, onChange, pickMedia }: {
+    data: Data;
+    group: string;
+    onChange: (next: Data) => void;
+    pickMedia?: (o: {
+        multiple: boolean;
+    }) => Promise<string[] | null>;
+}): import("react").JSX.Element;
+export {};

package/dist/app/routes/HomeEditor.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* La home, una schermata alla volta.
+ *
+ * ── L'idea ─────────────────────────────────────────────────────────────────────────────────
+ * Come per gallery, portfolio, "chi sono" e workshop: l'editor mostra LA PAGINA, non i campi
+ * della pagina. Qui però la pagina è una sola e lunga sei schermate, quindi la seconda colonna
+ * resta l'elenco delle schermate — quello c'era già ed è giusto — e a cambiare è cosa si vede
+ * dentro: prima `SchemaForm` disegnava riquadri annidati con dentro elenchi generici (frecce
+ * ↑↓, «+ Aggiungi», una `legend` per ogni livello), cioè la forma dei DATI invece di quella
+ * della schermata che quei dati compongono.
+ *
+ * Ogni schermata ha ora la sua impaginazione: la foto dov'è grande, i testi in colonna a misura
+ * di lettura, gli elenchi come righe con la maniglia.
+ *
+ * ── LA REGOLA DA NON ROMPERE: si applicano PATCH ───────────────────────────────────────────
+ * Ogni modifica riscrive il blocco con `{ ...blocco, campo: valore }` e MAI ricostruendolo da
+ * zero. Non è pignoleria: il serializzatore della home (`nested()` in schema/src/home.ts) emette
+ * tutto ciò che trova nell'oggetto, quindi un campo che nel file non c'è, se qui viene
+ * "normalizzato" a stringa vuota, comparirebbe nel file al primo salvataggio — e il round-trip
+ * (`test/home-content.test.js`) diventerebbe rosso. Gli editor delle pagine possono permettersi
+ * di normalizzare perché lì l'`encode` toglie di nuovo i campi vuoti; qui no.
+ *
+ * Per lo stesso motivo le letture usano un fallback (`str`, `list`) ma non lo riscrivono: serve
+ * a disegnare il campo vuoto, non a riempire il file.
+ */
+import { useContext, useState } from "react";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy, rectSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ProseField, ProsePages } from "../../form/index.js";
+import { ParagraphEditor } from "../ui/ParagraphEditor";
+import { MediaSlot } from "../ui/MediaSlot";
+import { OpenCard } from "../ui/OpenCard";
+import { useDragSensors } from "../ui/dnd";
+import { movedOpenIndex, removedOpenIndex } from "../lib/reorder";
+import { Icon } from "../ui/icons";
+import { site } from "../site.js";
+const str = (value) => (typeof value === "string" ? value : "");
+const list = (value) => (Array.isArray(value) ? value : []);
+const strings = (value) => list(value).map(str);
+const obj = (value) => (value && typeof value === "object" ? value : {});
+/* ---- Pezzi comuni alle schermate ------------------------------------------------------------ */
+/* Il NOME della schermata non si ripete qui: sta già nella testata del pannello, che lo prende
+   dal gruppo scelto nella seconda colonna. Qui resta la riga che dice cos'è quella schermata
+   sul sito — l'unica cosa che la testata non può sapere. */
+function Screen({ hint, children }) {
+    return (_jsxs("section", { className: "hm", children: [hint && _jsx("p", { className: "hm-hint", children: hint }), children] }));
+}
+function Block({ title, action, children }) {
+    return (_jsxs("section", { className: "hm-block", children: [(title || action) && (_jsxs("header", { className: "pw-block-head", children: [title ? _jsx("h4", { children: title }) : _jsx("span", {}), action] })), children] }));
+}
+function Field({ label, note, children }) {
+    return (_jsxs("label", { className: "pw-label", children: [_jsxs("span", { children: [label, note && _jsxs("small", { children: [" ", note] })] }), children] }));
+}
+function Text({ value, onChange, placeholder, maxLength, big }) {
+    return (_jsx("input", { className: "pw-field" + (big ? " pw-field-title" : ""), value: value, placeholder: placeholder, maxLength: maxLength, onChange: (event) => onChange(event.target.value) }));
+}
+/** Una foto della home: sempre scelta dalla libreria, mai un indirizzo battuto a mano. */
+function Photo({ value, label, note, ratio = "wide", onPick, onClear }) {
+    return (_jsxs("div", { className: "hm-photo", children: [_jsxs("span", { className: "hm-photo-label", children: [label, note && _jsxs("small", { children: [" ", note] })] }), _jsx(MediaSlot, { value: value, ratio: ratio, empty: "Scegli una foto", onPick: onPick, onClear: onClear })] }));
+}
+/* Un elenco di righe di testo con la maniglia: le righe del titolo, i numeri, i paragrafi
+   liberi. Le chiavi sono posizionali, come negli altri elenchi del pannello. */
+function Rows({ items, ids, onChange, addLabel, onAdd, empty, render }) {
+    const sensors = useDragSensors();
+    const finish = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        onChange(arrayMove(items, ids.indexOf(String(active.id)), ids.indexOf(String(over.id))));
+    };
+    return (_jsxs(_Fragment, { children: [items.length === 0 && empty && _jsx("p", { className: "pw-empty-note", children: empty }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: finish, children: _jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "hm-rows", children: items.map((item, index) => (_jsx(Row, { id: ids[index], onRemove: () => onChange(items.filter((_, i) => i !== index)), children: render(item, index, (next) => onChange(items.map((x, i) => (i === index ? next : x)))) }, ids[index]))) }) }) }), _jsxs("button", { type: "button", className: "pw-add-quiet", onClick: onAdd, children: [_jsx(Icon.plus, {}), " ", addLabel] })] }));
+}
+function Row({ id, onRemove, children }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+    return (_jsxs("li", { ref: setNodeRef, className: "hm-row" + (isDragging ? " is-dragging" : ""), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx("button", { type: "button", className: "pw-grip", "aria-label": "Riordina", ...attributes, ...listeners, children: _jsx(Icon.grip, {}) }), children, _jsx("button", { type: "button", className: "pw-icon-btn is-danger", "aria-label": "Elimina", onClick: onRemove, children: _jsx(Icon.trash, {}) })] }));
+}
+/* ---- Apertura ------------------------------------------------------------------------------- */
+/* Le righe del titolo si spezzano a mano — il testo non va MAI a capo da solo — e la riga più
+ * lunga detta il corpo del carattere di TUTTE (css/home/hero.css). Un elenco di caselle non lo
+ * racconta: l'anteprima qui accanto mostra le interruzioni come si vedranno, che è l'unico modo
+ * di accorgersi che una riga è troppo lunga prima di pubblicare. */
+function HeroScreen({ value, onChange, pick }) {
+    const hero = obj(value.hero);
+    const patch = (next) => onChange({ ...value, hero: { ...hero, ...next } });
+    const title = strings(hero.title);
+    const narrow = strings(hero.narrow);
+    return (_jsx(Screen, { hint: "La prima schermata: la foto a tutta pagina e il titolo sopra.", children: _jsxs("div", { className: "hm-split", children: [_jsx(Photo, { value: str(hero.photo), label: "Foto", onPick: () => pick((photo) => patch({ photo })), onClear: () => patch({ photo: "" }) }), _jsxs("div", { className: "hm-side", children: [_jsxs(Block, { title: "Titolo", children: [_jsx("div", { className: "hm-title-preview", "aria-hidden": "true", children: (title.length ? title : ["Il titolo della home"]).map((line, index) => (_jsx("span", { className: title.length ? "" : "is-empty", children: line }, index))) }), _jsx(Rows, { items: title, ids: title.map((_, i) => `riga-${i}`), onChange: (next) => patch({ title: next }), onAdd: () => patch({ title: [...title, ""] }), addLabel: "Aggiungi riga", empty: "Nessuna riga: il titolo non comparirebbe.", render: (line, index, set) => (_jsx("input", { className: "pw-field", value: line, maxLength: 30, placeholder: `Riga ${index + 1}`, "aria-label": `Riga ${index + 1} del titolo`, onChange: (event) => set(event.target.value) })) })] }), _jsxs(Block, { title: "Titolo su schermi stretti", children: [_jsx("p", { className: "pw-empty-note", children: "Su un telefono le righe larghe rimpicciolirebbero tutto il titolo, quindi qui si spezza pi\u00F9 corto. Lasciandolo vuoto si usano comunque le righe qui sopra." }), _jsx(Rows, { items: narrow, ids: narrow.map((_, i) => `stretta-${i}`), onChange: (next) => patch({ narrow: next }), onAdd: () => patch({ narrow: [...narrow, ""] }), addLabel: "Aggiungi riga", render: (line, index, set) => (_jsx("input", { className: "pw-field", value: line, maxLength: 20, placeholder: `Riga ${index + 1}`, "aria-label": `Riga ${index + 1} del titolo su schermi stretti`, onChange: (event) => set(event.target.value) })) })] }), _jsx(Block, { children: _jsx(Field, { label: "Invito allo scroll", note: "in fondo alla schermata", children: _jsx(Text, { value: str(hero.scroll), maxLength: 20, placeholder: "Scroll", onChange: (scroll) => patch({ scroll }) }) }) })] })] }) }));
+}
+/* ---- Statistiche ----------------------------------------------------------------------------- */
+function StatsScreen({ value, onChange, pick }) {
+    const stats = obj(value.stats);
+    const bg = obj(stats.bg);
+    const items = list(stats.items).map(obj);
+    const patch = (next) => onChange({ ...value, stats: { ...stats, ...next } });
+    return (_jsxs(Screen, { hint: "I numeri ruotano uno alla volta, sopra la foto di sfondo.", children: [_jsxs("div", { className: "hm-photos", children: [_jsx(Photo, { value: str(bg.desktop), label: "Sfondo", note: "schermi larghi", onPick: () => pick((desktop) => patch({ bg: { ...bg, desktop } })), onClear: () => patch({ bg: { ...bg, desktop: "" } }) }), _jsx(Photo, { value: str(bg.mobile), label: "Sfondo", note: "telefono", ratio: "portrait", onPick: () => pick((mobile) => patch({ bg: { ...bg, mobile } })), onClear: () => patch({ bg: { ...bg, mobile: "" } }) })] }), _jsx(Block, { title: "Numeri", children: _jsx(Rows, { items: items, ids: items.map((_, i) => `numero-${i}`), onChange: (next) => patch({ items: next }), onAdd: () => patch({ items: [...items, { num: "", label: "" }] }), addLabel: "Aggiungi numero", empty: "Nessun numero: la schermata resterebbe con il solo sfondo.", render: (item, _index, set) => (_jsxs(_Fragment, { children: [_jsx("input", { className: "pw-field hm-num", value: str(item.num), maxLength: 12, placeholder: "15+", "aria-label": "Numero", onChange: (event) => set({ ...item, num: event.target.value }) }), _jsx("input", { className: "pw-field", value: str(item.label), maxLength: 60, placeholder: "Years of Experience", "aria-label": "Etichetta", onChange: (event) => set({ ...item, label: event.target.value }) })] })) }) })] }));
+}
+/* ---- Chi sono ------------------------------------------------------------------------------- */
+function AboutScreen({ value, onChange, pick }) {
+    const about = obj(value.about);
+    const patch = (next) => onChange({ ...value, about: { ...about, ...next } });
+    return (_jsx(Screen, { hint: "Il ritratto e il testo che lo accompagna.", children: _jsxs("div", { className: "hm-split", children: [_jsx(Photo, { value: str(about.portrait), label: "Ritratto", ratio: "portrait", onPick: () => pick((portrait) => patch({ portrait })), onClear: () => patch({ portrait: "" }) }), _jsx("div", { className: "hm-side", children: _jsxs(Block, { children: [_jsx(Field, { label: "Apertura", children: _jsx(ProseField, { className: "pw-field pw-textarea", rows: 3, value: str(about.lead), maxLength: 600, onChange: (lead) => patch({ lead }) }) }), _jsx(Field, { label: "Paragrafi", children: _jsx(ParagraphEditor, { className: "pw-field pw-textarea", rows: 8, value: strings(about.paragraphs), onChange: (paragraphs) => patch({ paragraphs }) }) }), _jsx(Field, { label: "Frase-manifesto", note: "la riga in evidenza in fondo", children: _jsx(ProseField, { className: "pw-field pw-textarea", rows: 2, value: str(about.statement), maxLength: 300, onChange: (statement) => patch({ statement }) }) })] }) })] }) }));
+}
+/* ---- What you got --------------------------------------------------------------------------- */
+function ReachScreen({ value, onChange, pick }) {
+    const reach = obj(value.reach);
+    const patch = (next) => onChange({ ...value, reach: { ...reach, ...next } });
+    return (_jsx(Screen, { hint: "La foto, il titolo e i territori.", children: _jsxs("div", { className: "hm-split", children: [_jsx(Photo, { value: str(reach.image), label: "Foto", onPick: () => pick((image) => patch({ image })), onClear: () => patch({ image: "" }) }), _jsx("div", { className: "hm-side", children: _jsxs(Block, { children: [_jsx(Field, { label: "Titolo", children: _jsx(Text, { big: true, value: str(reach.title), maxLength: 120, onChange: (title) => patch({ title }) }) }), _jsx(Field, { label: "Sottotitolo", children: _jsx(Text, { value: str(reach.subtitle), maxLength: 160, onChange: (subtitle) => patch({ subtitle }) }) }), _jsx(Field, { label: "Paragrafi", children: _jsx(ParagraphEditor, { className: "pw-field pw-textarea", rows: 7, value: strings(reach.paragraphs), onChange: (paragraphs) => patch({ paragraphs }) }) })] }) })] }) }));
+}
+/* ---- Le porte verso le altre pagine --------------------------------------------------------- */
+/** L'indirizzo di una porta: si sceglie fra le pagine del sito, non si batte a mano. */
+function PagePicker({ value, onChange }) {
+    const pages = useContext(ProsePages);
+    const known = pages.some((page) => page.href === value);
+    return (_jsxs("select", { className: "pw-field", value: value, onChange: (event) => onChange(event.target.value), children: [_jsx("option", { value: "", children: "Scegli una pagina\u2026" }), !known && value && _jsx("option", { value: value, children: value }), pages.map((page) => _jsx("option", { value: page.href, children: page.label }, page.href))] }));
+}
+function GenresScreen({ value, onChange, pick }) {
+    const genres = obj(value.genres);
+    const items = list(genres.items).map(obj);
+    const [openAt, setOpenAt] = useState(null);
+    const sensors = useDragSensors();
+    const ids = items.map((_, index) => `porta-${index}`);
+    const replace = (next, nextOpen) => {
+        setOpenAt(nextOpen);
+        onChange({ ...value, genres: { ...genres, items: next } });
+    };
+    const patchAt = (index, next) => onChange({ ...value, genres: { ...genres, items: items.map((item, i) => (i === index ? next : item)) } });
+    const finish = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        const from = ids.indexOf(String(active.id));
+        const to = ids.indexOf(String(over.id));
+        if (from < 0 || to < 0)
+            return;
+        replace(arrayMove(items, from, to), movedOpenIndex(openAt, from, to));
+    };
+    return (_jsxs(Screen, { hint: "In home si vedono le prime tre. In fondo a ogni gallery si vedono le tre diverse da quella che si sta guardando: per cambiare quali compaiono in home, cambia l\u2019ordine.", children: [_jsxs("div", { className: "pw-head hm-head-action", children: [_jsx("span", {}), _jsxs("button", { type: "button", className: "btn-soft is-primary", onClick: () => replace([...items, { image: "", title: "", text: "", href: "" }], items.length), children: [_jsx(Icon.plus, {}), " Aggiungi porta"] })] }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: finish, children: _jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: _jsx("div", { className: "pw-list", children: items.map((item, index) => (_jsx(OpenCard, { id: ids[index], index: index, total: items.length, open: openAt === index, thumb: str(item.image), title: str(item.title), empty: "Porta senza titolo", 
+                            /* Le prime tre sono quelle che si vedono in home: si dice qui, dove si decide
+                               l'ordine, invece che in una nota che nessuno collega alle righe. */
+                            meta: index < 3 ? "In home" : str(item.href), kind: "questa porta", onToggle: () => setOpenAt(openAt === index ? null : index), actions: _jsx("button", { type: "button", className: "btn-soft is-danger", onClick: () => replace(items.filter((_, i) => i !== index), removedOpenIndex(openAt, index)), children: "Elimina" }), children: _jsxs("div", { className: "pw-identity", children: [_jsx(MediaSlot, { value: str(item.image), ratio: "cover", empty: "Scegli la foto", onPick: () => pick((image) => patchAt(index, { ...item, image })), onClear: () => patchAt(index, { ...item, image: "" }) }), _jsxs("div", { className: "pw-identity-fields", children: [_jsx(Field, { label: "Titolo", children: _jsx(Text, { big: true, value: str(item.title), maxLength: 40, onChange: (title) => patchAt(index, { ...item, title }) }) }), _jsx(Field, { label: "Testo", children: _jsx(ProseField, { className: "pw-field pw-textarea", rows: 3, value: str(item.text), maxLength: 400, onChange: (text) => patchAt(index, { ...item, text }) }) }), _jsx(Field, { label: "Pagina di destinazione", children: _jsx(PagePicker, { value: str(item.href), onChange: (href) => patchAt(index, { ...item, href }) }) })] })] }) }, ids[index]))) }) }) })] }));
+}
+/* ---- Who you are ---------------------------------------------------------------------------- */
+function Shot({ id, url, onRemove }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+    return (_jsxs("figure", { ref: setNodeRef, className: "hm-shot" + (isDragging ? " is-dragging" : ""), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx("div", { className: "hm-shot-frame", ...attributes, ...listeners, children: _jsx("img", { src: url, alt: "", draggable: false }) }), _jsx("button", { type: "button", className: "hm-shot-remove", "aria-label": "Togli questa foto", onClick: onRemove, children: _jsx(Icon.trash, {}) })] }));
+}
+function ClosingScreen({ value, onChange, pickMany }) {
+    const closing = obj(value.closing);
+    const images = strings(closing.images);
+    const patch = (next) => onChange({ ...value, closing: { ...closing, ...next } });
+    const sensors = useDragSensors();
+    const ids = images.map((url, index) => `${url}-${index}`);
+    const finish = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        patch({ images: arrayMove(images, ids.indexOf(String(active.id)), ids.indexOf(String(over.id))) });
+    };
+    return (_jsxs(Screen, { hint: "Il testo di chiusura e il riquadro di foto che ciclano.", children: [_jsxs(Block, { children: [_jsx(Field, { label: "Titolo", children: _jsx(Text, { big: true, value: str(closing.title), maxLength: 120, onChange: (title) => patch({ title }) }) }), _jsx(Field, { label: "Testo", children: _jsx(ProseField, { className: "pw-field pw-textarea", rows: 6, value: str(closing.text), maxLength: 1200, onChange: (text) => patch({ text }) }) }), _jsxs("div", { className: "hm-two", children: [_jsx(Field, { label: "Etichetta del link", children: _jsx(Text, { value: str(closing.label), maxLength: 40, onChange: (label) => patch({ label }) }) }), _jsx(Field, { label: "Pagina di destinazione", children: _jsx(PagePicker, { value: str(closing.href), onChange: (href) => patch({ href }) }) })] })] }), _jsx(Block, { title: "Foto che ciclano", action: _jsxs("button", { type: "button", className: "pw-add-quiet", onClick: () => pickMany((urls) => patch({ images: [...images, ...urls.filter((url) => !images.includes(url))] })), children: [_jsx(Icon.plus, {}), " Aggiungi foto"] }), children: images.length === 0 ? (_jsx("p", { className: "pw-empty-note", children: "Nessuna foto: il riquadro resterebbe vuoto." })) : (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: finish, children: _jsx(SortableContext, { items: ids, strategy: rectSortingStrategy, children: _jsx("div", { className: "hm-shots", children: images.map((url, index) => (_jsx(Shot, { id: ids[index], url: url, onRemove: () => patch({ images: images.filter((_, i) => i !== index) }) }, ids[index]))) }) }) })) })] }));
+}
+/* ---- Contatto -------------------------------------------------------------------------------- */
+function ContactScreen({ value, onChange }) {
+    const contact = obj(value.contact);
+    const patch = (next) => onChange({ ...value, contact: { ...contact, ...next } });
+    return (_jsxs(Screen, { hint: "L\u2019ultima schermata: l\u2019invito, i recapiti e il modulo. Le richieste arrivano per email e restano in \u00ABRichieste\u00BB.", children: [_jsxs(Block, { children: [_jsx(Field, { label: "Titolo", children: _jsx(Text, { big: true, value: str(contact.title), maxLength: 160, onChange: (title) => patch({ title }) }) }), _jsx(Field, { label: "Testo", children: _jsx(ProseField, { className: "pw-field pw-textarea", rows: 5, value: str(contact.text), maxLength: 900, onChange: (text) => patch({ text }) }) })] }), _jsxs(Block, { title: "Recapiti", children: [_jsx("p", { className: "pw-empty-note", children: "Sono i recapiti del sito: compaiono qui e nella pagina \u00ABchi sono\u00BB. Quelli lasciati vuoti non vengono mostrati." }), _jsxs("div", { className: "hm-two", children: [_jsx(Field, { label: "Email", children: _jsx(Text, { value: str(contact.email), maxLength: 120, placeholder: "info@esempio.it", onChange: (email) => patch({ email }) }) }), _jsx(Field, { label: "Telefono", children: _jsx(Text, { value: str(contact.phone), maxLength: 40, onChange: (phone) => patch({ phone }) }) }), _jsx(Field, { label: "Dove", children: _jsx(Text, { value: str(contact.city), maxLength: 80, placeholder: "Citt\u00E0, Paese", onChange: (city) => patch({ city }) }) }), _jsx(Field, { label: "Instagram", note: "indirizzo completo", children: _jsx(Text, { value: str(contact.instagram), maxLength: 200, placeholder: "https://instagram.com/\u2026", onChange: (instagram) => patch({ instagram }) }) })] })] }), _jsx(Block, { title: "Il modulo", children: _jsxs("div", { className: "hm-two", children: [_jsx(Field, { label: "Etichetta del bottone", children: _jsx(Text, { value: str(contact.submit), maxLength: 40, placeholder: "Send", onChange: (submit) => patch({ submit }) }) }), _jsx(Field, { label: "Messaggio di conferma", note: "lo legge chi ha appena scritto", children: _jsx(Text, { value: str(contact.done), maxLength: 200, onChange: (done) => patch({ done }) }) })] }) })] }));
+}
+/* ---- SEO ------------------------------------------------------------------------------------- */
+function SeoScreen({ value, onChange }) {
+    const title = str(value.title);
+    const tagline = str(value.tagline);
+    return (_jsx(Screen, { hint: "Come il sito si presenta nella scheda del browser e nei risultati di ricerca.", children: _jsxs(Block, { children: [_jsxs("div", { className: "seo-search-preview", "aria-label": "Anteprima del risultato di ricerca", children: [_jsx("span", { className: "seo-search-site", children: title || "Titolo del sito" }), _jsx("span", { className: "seo-search-url", children: site().publicBase.replace(/^https?:\/\//, "") }), _jsx("strong", { children: title || "Titolo del sito" }), _jsx("p", { children: tagline || "La descrizione che compare sotto al titolo." })] }), _jsx("p", { className: "pw-empty-note", children: "\u00C8 una simulazione: il motore di ricerca pu\u00F2 adattarne il testo." }), _jsx(Field, { label: "Titolo del sito", children: _jsx(Text, { value: title, maxLength: 140, onChange: (next) => onChange({ ...value, title: next }) }) }), _jsx(Field, { label: "Sottotitolo", note: "compare anche nel piede del sito", children: _jsx(Text, { value: tagline, maxLength: 140, onChange: (next) => onChange({ ...value, tagline: next }) }) })] }) }));
+}
+/* ---- La schermata scelta ---------------------------------------------------------------------- */
+export function HomeEditor({ data, group, onChange, pickMedia }) {
+    /* Una foto per volta, dalla libreria. Il selettore restituisce un elenco: qui interessa la
+       prima, e le schermate non devono saperlo. */
+    const pick = (then) => {
+        void pickMedia?.({ multiple: false }).then((picked) => {
+            if (picked?.length)
+                then(picked[0]);
+        });
+    };
+    const pickMany = (then) => {
+        void pickMedia?.({ multiple: true }).then((picked) => {
+            if (picked?.length)
+                then(picked);
+        });
+    };
+    return (_jsxs("div", { className: "ed ed-home", children: [group === "Apertura" && _jsx(HeroScreen, { value: data, onChange: onChange, pick: pick }), group === "Statistiche" && _jsx(StatsScreen, { value: data, onChange: onChange, pick: pick }), group === "Chi sono" && _jsx(AboutScreen, { value: data, onChange: onChange, pick: pick }), group === "What you got" && _jsx(ReachScreen, { value: data, onChange: onChange, pick: pick }), group === "Generi" && _jsx(GenresScreen, { value: data, onChange: onChange, pick: pick }), group === "Who you are" && _jsx(ClosingScreen, { value: data, onChange: onChange, pickMany: pickMany }), group === "Contatto" && _jsx(ContactScreen, { value: data, onChange: onChange }), group === "SEO" && _jsx(SeoScreen, { value: data, onChange: onChange })] }));
+}

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

@@ -0,0 +1,17 @@
+import type { ContactRequestRow } from "../../index.js";
+import type { Booking } from "../lib/bookings";
+import type { DeliverySummary } from "../lib/deliveries";
+import type { SiteFeatures } from "../lib/settings";
+interface Props {
+    deliveries: DeliverySummary[] | null;
+    expiring: number;
+    requests: ContactRequestRow[] | null;
+    pending: number;
+    features: SiteFeatures | null;
+    bookings: Booking[] | null;
+    bookingsPending: number;
+    bookingsError: string | null;
+    go: (to: string) => void;
+}
+export declare function Overview({ deliveries, expiring, requests, pending, features, bookings, bookingsPending, bookingsError, go, }: Props): import("react").JSX.Element;
+export {};