@cardinali-studio/adminkit 1.0.0

package/dist/app/routes/Overview.js

@@ -0,0 +1,318 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* La Panoramica: la schermata da cui si entra nel pannello.
+ *
+ * Non è una sezione in più fra le altre — è la risposta a «com'è andata?» data prima che
+ * qualcuno la chieda. Da qui non si modifica niente: ogni riquadro è un numero e la porta per
+ * andare dov'è nato. Se ti trovi ad aggiungerci un campo modificabile, il posto giusto è la
+ * sezione a cui quel campo appartiene.
+ *
+ * ── Da dove vengono i numeri ───────────────────────────────────────────────────────────────
+ *   transfer e richieste   dalle liste GIÀ caricate da App.tsx per i badge della prima colonna.
+ *                          Arrivano come props apposta: una seconda query per gli stessi numeri
+ *                          vorrebbe dire due verità, e una delle due sempre vecchia.
+ *   spazio                 /admin/api/storage — R2 contato, B2 letto da D1.
+ *   visite                 /admin/api/analytics — Umami o Google Analytics, dietro la Function
+ *                          perché la chiave non deve passare dal browser. QUALE dei due lo dice
+ *                          la risposta (`providerLabel`): qui non si nomina nessun servizio, o
+ *                          il riquadro mente non appena si cambia.
+ *
+ * ── Il bento ───────────────────────────────────────────────────────────────────────────────
+ * Dodici colonne e riquadri che ne occupano 3, 4 o 8. La regola che tiene insieme la cosa: la
+ * RIGA DI SOPRA sono numeri singoli (una cifra, un colpo d'occhio), sotto ci sono le cose che
+ * si leggono (grafico, elenchi). Mescolando i due tipi si ottiene una parete di riquadri in cui
+ * non si sa più dove guardare per primo.
+ *
+ * Gli span NON sono fissi: dipendono da quali funzioni aggiuntive sono attive, e sono scelti
+ * perché le righe tornino esatte in tutte e QUATTRO le combinazioni. Con le statistiche spente
+ * i tre riquadri in cima passano da 3 a 4 colonne (il quarto, «Visitatori», non c'è) e il
+ * grafico diventa una card bloccata da 4, che si affianca ad «Archivi» e «Appuntamenti».
+ * Cambiando uno span, ricontrollarle tutte e quattro: `grid-auto-flow: dense` ripara i buchi
+ * piccoli, non una riga sbagliata.
+ */
+import { useEffect, useRef, useState } from "react";
+import { EXTRAS } from "./SiteSettingsEditor";
+import { useAnalytics, useStorage, } from "../lib/overview";
+import { Icon } from "../ui/icons";
+import { site } from "../site.js";
+const RANGE_LABEL = {
+    "24h": "24 ore", "7d": "7 giorni", "30d": "30 giorni",
+};
+export function Overview({ deliveries, expiring, requests, pending, features, bookings, bookingsPending, bookingsError, go, }) {
+    const storage = useStorage(true);
+    /* Le visite non si chiedono nemmeno quando la funzione non è attiva: sarebbe una chiamata a
+       un servizio esterno per un riquadro che mostrerà comunque «Attiva». */
+    const analytics = useAnalytics(features?.analytics === true);
+    const active = deliveries?.filter((d) => d.status === "active") ?? [];
+    const uploading = deliveries?.filter((d) => d.status === "uploading") ?? [];
+    /* Gli ultimi transfer, non i più grossi né i più scaricati: la domanda vera è «quello che ho
+       mandato giovedì, l'hanno preso?», e si risponde guardando in cima a un elenco in ordine di
+       tempo. Gli archiviati restano — il link vive ancora, e i download continuano a contare. */
+    const recent = [...(deliveries ?? [])]
+        .filter((d) => d.status === "active" || d.status === "archived")
+        .sort((a, b) => (b.activatedAt || b.updatedAt).localeCompare(a.activatedAt || a.updatedAt))
+        .slice(0, 5);
+    const downloads = (deliveries ?? []).reduce((n, d) => n + d.downloadCount, 0);
+    /* Il cestino è dentro il totale: quei file sono ancora nel bucket e si pagano. Escluderlo
+       darebbe un numero più bello e sbagliato, e soprattutto farebbe sembrare inutile svuotarlo. */
+    const bytes = (storage.data?.r2.bytes ?? 0) + (storage.data?.r2.trashBytes ?? 0)
+        + (storage.data?.b2.bytes ?? 0);
+    const totals = analytics.data?.totals;
+    /* Una funzione è "spenta" solo quando lo sappiamo davvero: finché `features` è `null` le
+       impostazioni non sono ancora arrivate, e mostrare la card bloccata in quel momento
+       farebbe lampeggiare «Attiva» a chi la funzione ce l'ha. */
+    const known = features !== null;
+    const hasAnalytics = features?.analytics === true;
+    const hasBookings = features?.appointments === true;
+    // Senza «Visitatori» la riga in cima ha tre riquadri, che devono coprire le dodici colonne.
+    const statSpan = hasAnalytics ? 3 : 4;
+    return (_jsxs("div", { className: "ov", children: [_jsxs("div", { className: "ov-bar", children: [_jsx("p", { className: "ov-bar-hi", children: "Tutto quello che \u00E8 successo mentre non guardavi." }), _jsx("button", { className: "ak-btn ak-btn-quiet", disabled: storage.busy || analytics.busy, onClick: () => { void storage.load(true); analytics.reload(); }, children: storage.busy || analytics.busy ? "Aggiorno…" : "Aggiorna" })] }), _jsxs("div", { className: "ov-grid", children: [hasAnalytics && (_jsx(Stat, { span: 3, label: "Visitatori", icon: Icon.eye, tone: "blue", hint: RANGE_LABEL[analytics.range], value: totals ? int(totals.visitors.value) : null, quiet: analytics.data && !analytics.data.configured ? "Statistiche non collegate" : undefined, delta: totals?.visitors })), _jsx(Stat, { span: statSpan, label: "Transfer attivi", icon: Icon.delivery, tone: "accent", hint: uploading.length ? `+${uploading.length} in caricamento` : `${downloads} download`, value: deliveries ? String(active.length) : null, onClick: () => go("/deliveries") }), _jsx(Stat, { span: statSpan, label: "Spazio in uso", icon: Icon.archive, tone: "quiet", hint: storage.data ? `${int(storage.data.r2.objects)} foto · ${int(storage.data.b2.files)} file consegnati` : "R2 + B2", value: storage.data ? size(bytes) : null, quiet: storage.error ?? undefined }), _jsxs("button", { className: "ov-tile ov-cta", "data-span": statSpan, onClick: () => go("/deliveries"), children: [_jsxs("span", { className: "ov-cta-copy", children: [_jsx("strong", { children: "Consegne" }), _jsx("span", { children: "Manda le foto a un cliente" })] }), _jsx("span", { className: "ov-cta-go", "aria-hidden": "true", children: _jsx(Icon.delivery, {}) }), _jsx("span", { className: "ov-cta-bars", "aria-hidden": "true", children: BARS.map((h, i) => _jsx("i", { style: { height: `${h}%` } }, i)) }), expiring > 0 && _jsxs("span", { className: "ov-cta-badge", children: [expiring, " in scadenza"] })] }), !hasAnalytics ? (known && _jsx(LockedCard, { feature: "analytics", go: go })) : (_jsxs("section", { className: "ov-tile ov-chart", "data-span": "8", children: [_jsxs("header", { className: "ov-tile-head", children: [_jsxs("div", { children: [_jsx("h2", { children: "Visite al sito" }), _jsxs("p", { children: ["Pagine viste e sessioni", analytics.data?.providerLabel ? `, da ${analytics.data.providerLabel}` : ""] })] }), _jsx("div", { className: "ov-range", role: "group", "aria-label": "Periodo", children: Object.keys(RANGE_LABEL).map((r) => (_jsx("button", { className: "ov-range-btn" + (analytics.range === r ? " is-on" : ""), onClick: () => analytics.setRange(r), children: RANGE_LABEL[r] }, r))) })] }), !analytics.data ? (_jsx("p", { className: "ak-hint ov-pad", children: "Carico\u2026" })) : !analytics.data.configured ? (_jsx(NotConnected, { providers: analytics.data.providers ?? [] })) : (_jsxs(_Fragment, { children: [analytics.error && _jsx("p", { className: "ak-error ov-pad", children: analytics.error }), _jsxs("div", { className: "ov-chart-figures", children: [_jsx(Figure, { label: "Pagine viste", metric: analytics.data.totals?.pageviews }), _jsx(Figure, { label: "Sessioni", metric: analytics.data.totals?.visits }), _jsx(Figure, { label: "Visitatori", metric: analytics.data.totals?.visitors }), _jsx(Figure, { label: "Tempo medio", metric: averageTime(analytics.data.totals), format: seconds })] }), _jsx(Chart, { points: analytics.data.series ?? [], unit: analytics.data.unit ?? "day" })] }))] })), _jsxs("section", { className: "ov-tile", "data-span": "4", children: [_jsx("header", { className: "ov-tile-head", children: _jsxs("div", { children: [_jsx("h2", { children: "Archivi" }), _jsx("p", { children: "Quanto occupano le due librerie" })] }) }), storage.error ? _jsx("p", { className: "ak-error ov-pad", children: storage.error })
+                                : !storage.data ? _jsx("p", { className: "ak-hint ov-pad", children: "Conto gli oggetti\u2026" })
+                                    : (_jsxs("div", { className: "ov-store", children: [_jsxs("div", { className: "ov-store-rows", children: [_jsx(StoreRow, { name: "Media del sito", where: "R2", bytes: storage.data.r2.bytes, total: bytes, detail: `${int(storage.data.r2.objects)} file`, onClick: () => go("/media") }), _jsx(StoreRow, { name: "Consegne", where: "B2", bytes: storage.data.b2.bytes, total: bytes, detail: `${int(storage.data.b2.packages)} pacchetti · ${int(storage.data.b2.files)} file`, onClick: () => go("/deliveries") }), _jsx(StoreRow, { name: "Cestino", where: "R2", bytes: storage.data.r2.trashBytes, total: bytes, detail: storage.data.r2.trashObjects
+                                                            ? `${int(storage.data.r2.trashObjects)} file recuperabili — svuotalo per liberare spazio`
+                                                            : "vuoto", onClick: () => go("/trash") })] }), _jsxs("dl", { className: "ov-store-notes", children: [storage.data.b2.pendingBytes > 0 && (_jsxs(_Fragment, { children: [_jsx("dt", { children: "In cancellazione" }), _jsxs("dd", { children: [size(storage.data.b2.pendingBytes), ", spariscono da soli entro sette giorni"] })] })), storage.data.r2.partial && (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Attenzione" }), _jsx("dd", { children: "Il conteggio dei media si \u00E8 fermato ai primi 20.000 oggetti: il totale \u00E8 per difetto." })] }))] })] }))] }), !hasBookings
+                        ? known && _jsx(LockedCard, { feature: "appointments", go: go })
+                        : _jsx(BookingsCard, { rows: bookings, pending: bookingsPending, error: bookingsError, go: go }), _jsxs("section", { className: "ov-tile", "data-span": "8", children: [_jsxs("header", { className: "ov-tile-head", children: [_jsxs("div", { children: [_jsx("h2", { children: "Ultimi transfer" }), _jsx("p", { children: "Quante volte \u00E8 stato scaricato ognuno" })] }), _jsx("button", { className: "ov-more", onClick: () => go("/deliveries"), children: "Tutti" })] }), !deliveries ? _jsx("p", { className: "ak-hint ov-pad", children: "Carico\u2026" })
+                                : recent.length === 0 ? _jsx("p", { className: "ak-hint ov-pad", children: "Nessun transfer spedito, per ora." })
+                                    : (_jsxs("table", { className: "ov-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Transfer" }), _jsx("th", { children: "Spedito" }), _jsx("th", { children: "Peso" }), _jsx("th", { className: "ov-num", children: "Download" }), _jsx("th", {})] }) }), _jsx("tbody", { children: recent.map((d) => (_jsxs("tr", { onClick: () => go(`/deliveries/${d.id}`), children: [_jsxs("td", { children: [_jsx("span", { className: "ov-row-main", children: d.title || "Senza nome" }), _jsx("span", { className: "ov-row-sub", children: d.clientName || "—" })] }), _jsx("td", { className: "ov-when", children: day(d.activatedAt || d.updatedAt) }), _jsx("td", { className: "ov-when", children: size(d.storedBytes) }), _jsx("td", { className: "ov-num" + (d.downloadCount ? "" : " is-zero"), children: d.downloadCount || "—" }), _jsx("td", { className: "ov-state", children: _jsx(StatusPill, { delivery: d }) })] }, d.id))) })] }))] }), _jsxs("section", { className: "ov-tile", "data-span": "4", children: [_jsxs("header", { className: "ov-tile-head", children: [_jsxs("div", { children: [_jsx("h2", { children: "Ultima richiesta" }), _jsx("p", { children: pending > 0 ? `${pending} da gestire` : "Dal form del sito" })] }), _jsx("button", { className: "ov-more", onClick: () => go("/requests"), children: "Tutte" })] }), !requests ? _jsx("p", { className: "ak-hint ov-pad", children: "Carico\u2026" })
+                                : requests.length === 0 ? _jsx("p", { className: "ak-hint ov-pad", children: "Nessuna richiesta, per ora." })
+                                    : _jsx(LastRequest, { row: requests[0], go: go })] }), hasAnalytics && _jsx(Top, { span: 4, title: "Pagine pi\u00F9 viste", note: RANGE_LABEL[analytics.range], rows: analytics.data?.pages ?? [], ready: !!analytics.data?.configured, label: (name) => name === "/" ? "/ (home)" : name }), hasAnalytics && _jsx(Top, { span: 4, title: "Da dove arrivano", note: "Siti che portano al tuo", rows: analytics.data?.referrers ?? [], ready: !!analytics.data?.configured, label: (name) => name.replace(/^https?:\/\//, "") })] })] }));
+}
+/* ---- I pezzi ------------------------------------------------------------------------- */
+/* La card di una funzione non attiva su questo sito.
+ *
+ * Mostra il minimo: come si chiama, che non c'è, e come si accende. NON descrive la funzione —
+ * quello lo fa la sezione «Funzioni aggiuntive» delle impostazioni, che è dove porta il
+ * pulsante: una card che spiega e insieme vende diventa un volantino in mezzo agli strumenti
+ * di lavoro, e questa schermata la si apre venti volte al giorno.
+ *
+ * Il titolo e il testo arrivano da `EXTRAS`, lo stesso elenco che disegna le voci nelle
+ * impostazioni: il nome della funzione è scritto in UN posto, quindi le due schermate non
+ * possono chiamarla in due modi diversi.
+ *
+ * `#/settings/funzioni` invece di `#/settings`: il secondo pezzo della rotta fa scorrere la
+ * sezione sotto gli occhi. Senza, si atterra in cima a una pagina lunga e la cosa promessa dal
+ * pulsante è fuori schermo — cioè il pulsante ha mentito. */
+function LockedCard({ feature, go }) {
+    const extra = EXTRAS.find((e) => e.key === feature);
+    return (_jsxs("section", { className: "ov-tile ov-locked", "data-span": "4", children: [_jsx("header", { className: "ov-tile-head", children: _jsx("div", { children: _jsx("h2", { children: extra?.card ?? "" }) }) }), _jsxs("div", { className: "ov-locked-body", children: [_jsx("p", { children: "Non \u00E8 attiva su questo sito." }), _jsx("button", { className: "ak-btn ak-btn-primary", onClick: () => go("/settings/funzioni"), children: "Attiva" })] })] }));
+}
+/* Gli appuntamenti, quando la funzione c'è: quanti aspettano una risposta e i prossimi in
+   arrivo. Le date PASSATE non si mostrano — un appuntamento di ieri non è una cosa da fare — e
+   quelli annullati o rifiutati nemmeno. */
+function BookingsCard({ rows, pending, error, go }) {
+    const now = new Date().toISOString();
+    const next = [...(rows ?? [])]
+        .filter((b) => b.startAt > now && ["pending", "confirming", "confirmed"].includes(b.status))
+        .sort((a, b) => a.startAt.localeCompare(b.startAt))
+        .slice(0, 4);
+    return (_jsxs("section", { className: "ov-tile", "data-span": "4", children: [_jsxs("header", { className: "ov-tile-head", children: [_jsxs("div", { children: [_jsx("h2", { children: "Appuntamenti" }), _jsx("p", { children: pending > 0 ? `${pending} da confermare` : "I prossimi in calendario" })] }), _jsx("button", { className: "ov-more", onClick: () => go("/bookings"), children: "Tutti" })] }), error ? _jsx("p", { className: "ak-error ov-pad", children: error })
+                : !rows ? _jsx("p", { className: "ak-hint ov-pad", children: "Carico\u2026" })
+                    : next.length === 0 ? _jsx("p", { className: "ak-hint ov-pad", children: "Nessun appuntamento in arrivo." })
+                        : (_jsx("ul", { className: "ov-bookings", children: next.map((b) => (_jsx("li", { children: _jsxs("button", { onClick: () => go(`/bookings/${b.id}`), children: [_jsx("span", { className: "ov-book-when", children: slot(b.startAt) }), _jsx("span", { className: "ov-book-who", children: b.visitorName || "Senza nome" }), _jsx("span", { className: "ov-book-what", children: b.typeName }), b.status !== "confirmed" && _jsx("span", { className: "dl-pill is-expiring", children: "da confermare" })] }) }, b.id))) }))] }));
+}
+/* Il riquadro con UNA cifra. `onClick` è opzionale apposta: se una cifra non porta da nessuna
+   parte non deve nemmeno sembrare che lo faccia, quindi diventa un `div` invece di un bottone
+   spento. `tone` colora lo squircle dell'icona con la stessa palette già usata per gli stati
+   delle consegne (`.dl-pill`): niente colori nuovi, solo un posto in più dove si vedono. */
+function Stat({ span: cols, label, value, hint, delta, quiet, onClick, icon: IconC, tone = "accent" }) {
+    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { className: "ov-stat-icon is-" + tone, children: _jsx(IconC, {}) }), _jsx("span", { className: "ov-stat-label", children: label }), _jsx("strong", { className: "ov-stat-value", children: value ?? "—" }), _jsx("span", { className: "ov-stat-foot", children: quiet ? _jsx("em", { className: "ov-stat-quiet", children: quiet }) : _jsxs(_Fragment, { children: [delta && _jsx(Delta, { metric: delta }), hint && _jsx("span", { children: hint })] }) })] }));
+    return onClick
+        ? _jsx("button", { className: "ov-tile ov-stat is-link", "data-span": cols, onClick: onClick, children: inner })
+        : _jsx("div", { className: "ov-tile ov-stat", "data-span": cols, children: inner });
+}
+/* La variazione rispetto al periodo precedente. Senza `prev` non si disegna niente: una
+   pillola «0%» direbbe "stabile" quando invece vuol dire "non lo sappiamo". */
+function Delta({ metric }) {
+    if (metric.prev === null || metric.prev === 0)
+        return null;
+    const change = ((metric.value - metric.prev) / metric.prev) * 100;
+    if (!Number.isFinite(change))
+        return null;
+    const up = change >= 0;
+    return (_jsxs("em", { className: "ov-delta" + (up ? " is-up" : " is-down"), children: [up ? "▲" : "▼", " ", Math.abs(change).toFixed(Math.abs(change) < 10 ? 1 : 0), "%"] }));
+}
+function Figure({ label, metric, format }) {
+    return (_jsxs("div", { className: "ov-figure", children: [_jsx("span", { children: label }), _jsx("strong", { children: metric ? (format ? format(metric.value) : int(metric.value)) : "—" }), metric && _jsx(Delta, { metric: metric })] }));
+}
+/* Il grafico. Disegnato a mano come le icone: una libreria di chart porta con sé un albero di
+   componenti, un tema e un altro modo di dire "colore" che non passa dalle custom property —
+   per due curve e una griglia.
+
+   Il contenitore si MISURA (un ResizeObserver), invece di lasciare che un `viewBox` fisso scali
+   l'SVG con la larghezza. Il primo tentativo era quello, ed è sbagliato per una ragione che si
+   vede solo dopo: la griglia collassa a una colonna sotto i 1240px, il riquadro passa da 780 a
+   1400 pixel, e un disegno che mantiene le proporzioni diventa alto quattrocento pixel — metà
+   schermata per sette numeri. Misurando, un'unità dell'SVG è un pixel: l'altezza resta quella
+   che si è deciso, il testo non si allarga e i tratti sono nitidi senza `vector-effect`. */
+const H = 200, PAD_T = 14, PAD_B = 26, PAD_L = 32;
+function Chart({ points, unit }) {
+    const [at, setAt] = useState(null);
+    const [width, setWidth] = useState(640);
+    const box = useRef(null);
+    /* Gli hook stanno PRIMA dell'uscita anticipata per la serie vuota: React li vuole sempre
+       nello stesso ordine, e una `return` in mezzo li salterebbe al primo caricamento. */
+    useEffect(() => {
+        const el = box.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            setWidth(Math.max(260, Math.round(entry.contentRect.width)));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    if (points.length < 2) {
+        return _jsx("p", { className: "ak-hint ov-pad", children: "Non ci sono ancora abbastanza dati per un grafico." });
+    }
+    const top = Math.max(1, ...points.map((p) => p.pageviews), ...points.map((p) => p.sessions));
+    const x = (i) => PAD_L + (i / (points.length - 1)) * (width - PAD_L);
+    const y = (v) => PAD_T + (1 - v / top) * (H - PAD_T - PAD_B);
+    const line = (get) => points.map((p, i) => `${i ? "L" : "M"}${x(i).toFixed(1)} ${y(get(p)).toFixed(1)}`).join(" ");
+    const area = `${line((p) => p.pageviews)} L${width} ${H - PAD_B} L${PAD_L} ${H - PAD_B} Z`;
+    const hovered = at === null ? null : points[at];
+    return (_jsxs("div", { className: "ov-plot", ref: box, children: [_jsxs("svg", { className: "ov-plot-svg", width: width, height: H, viewBox: `0 0 ${width} ${H}`, role: "img", "aria-label": "Andamento delle visite", onMouseLeave: () => setAt(null), onMouseMove: (e) => {
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const ratio = (e.clientX - rect.left - PAD_L) / (rect.width - PAD_L);
+                    setAt(Math.max(0, Math.min(points.length - 1, Math.round(ratio * (points.length - 1)))));
+                }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "ov-fill", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--ak-accent)", stopOpacity: ".22" }), _jsx("stop", { offset: "100%", stopColor: "var(--ak-accent)", stopOpacity: "0" })] }) }), [0, 0.5, 1].map((f) => (_jsxs("g", { children: [_jsx("line", { className: "ov-plot-grid", x1: PAD_L, x2: width, y1: y(top * f), y2: y(top * f) }), _jsx("text", { className: "ov-plot-tick", x: PAD_L - 6, y: y(top * f) + 3, textAnchor: "end", children: int(Math.round(top * f)) })] }, f))), _jsx("path", { d: area, fill: "url(#ov-fill)" }), _jsx("path", { className: "ov-plot-line", d: line((p) => p.pageviews) }), _jsx("path", { className: "ov-plot-line is-second", d: line((p) => p.sessions) }), at !== null && (_jsxs("g", { children: [_jsx("line", { className: "ov-plot-cursor", x1: x(at), x2: x(at), y1: PAD_T, y2: H - PAD_B }), _jsx("circle", { className: "ov-plot-dot", cx: x(at), cy: y(points[at].pageviews), r: "3.5" })] })), points.map((p, i) => (tickEvery(points.length, i) && (_jsx("text", { className: "ov-plot-tick", x: x(i), y: H - 7, textAnchor: i === 0 ? "start" : i === points.length - 1 ? "end" : "middle", children: axisLabel(p.date, unit) }, p.date))))] }), hovered && (_jsxs("div", { className: "ov-plot-tip", style: {
+                    left: `${x(at)}px`,
+                    transform: `translateX(-${tipAt(at, points.length)}%)`,
+                }, children: [_jsx("strong", { children: fullLabel(hovered.date, unit) }), _jsxs("span", { children: [int(hovered.pageviews), " viste \u00B7 ", int(hovered.sessions), " sessioni"] })] })), _jsxs("p", { className: "ov-plot-legend", children: [_jsx("span", { className: "ov-key", children: "Pagine viste" }), _jsx("span", { className: "ov-key is-second", children: "Sessioni" })] })] }));
+}
+/* Quanto spostare il riquadretto del tooltip: la stessa percentuale della sua posizione nel
+   grafico, così ai due estremi si allinea al bordo invece di sporgere. */
+function tipAt(index, total) { return (index / (total - 1)) * 100; }
+function StoreRow({ name, where, bytes, total, detail, onClick }) {
+    const share = total > 0 ? (bytes / total) * 100 : 0;
+    return (_jsxs("button", { className: "ov-store-row", onClick: onClick, children: [_jsxs("span", { className: "ov-store-top", children: [_jsxs("span", { className: "ov-store-name", children: [name, _jsx("em", { children: where })] }), _jsx("strong", { children: size(bytes) })] }), _jsx("span", { className: "ov-store-track", children: _jsx("i", { style: { width: `${share}%`, minWidth: share > 0 ? undefined : 0 } }) }), _jsxs("span", { className: "ov-store-detail", children: [_jsx("span", { children: detail }), _jsx("em", { children: percent(share) })] })] }));
+}
+function LastRequest({ row, go }) {
+    return (_jsxs("div", { className: "ov-req" + (row.handled_at ? " is-handled" : ""), children: [_jsxs("div", { className: "ov-req-head", children: [_jsx("span", { className: "rq-avatar", children: initials(row.name) }), _jsxs("span", { className: "ov-req-who", children: [_jsx("strong", { children: row.name }), _jsx("a", { href: `mailto:${row.email}`, onClick: (e) => e.stopPropagation(), children: row.email })] }), _jsx("span", { className: "ov-req-when", children: when(row.created_at) })] }), _jsx("p", { className: "ov-req-msg", children: row.message }), _jsxs("div", { className: "ov-req-actions", children: [_jsx("button", { className: "ak-btn", onClick: () => go(`/requests/${row.id}`), children: "Apri" }), _jsx("a", { className: "ak-btn ak-btn-primary", href: `mailto:${row.email}`, children: "Rispondi" }), row.handled_at && _jsx("span", { className: "ak-hint", children: "Gi\u00E0 gestita" })] })] }));
+}
+function Top({ span: cols, title, note, rows, ready, label }) {
+    const top = Math.max(1, ...rows.map((r) => r.count));
+    return (_jsxs("section", { className: "ov-tile", "data-span": cols, children: [_jsx("header", { className: "ov-tile-head", children: _jsxs("div", { children: [_jsx("h2", { children: title }), _jsx("p", { children: note })] }) }), !ready ? _jsx("p", { className: "ak-hint ov-pad", children: "Servono le statistiche collegate." })
+                : rows.length === 0 ? _jsx("p", { className: "ak-hint ov-pad", children: "Nessun dato in questo periodo." })
+                    : (_jsx("ol", { className: "ov-top", children: rows.map((r) => (_jsxs("li", { children: [_jsx("span", { className: "ov-top-name", title: r.name, children: label(r.name) }), _jsx("span", { className: "ov-top-track", children: _jsx("i", { style: { width: `${(r.count / top) * 100}%` } }) }), _jsx("span", { className: "ov-top-count", children: int(r.count) })] }, r.name))) }))] }));
+}
+/* Non collegato non è un errore: è una funzione che non è stata ancora accesa. Il riquadro
+   elenca i servizi possibili e, per ognuno, cosa manca — perché la domanda vera di chi guarda
+   non è «cos'è rotto» ma «quale scelgo e cosa devo fare». Le voci arrivano dalla Function:
+   aggiungendo un terzo servizio ai driver, compare qui da solo. */
+function NotConnected({ providers }) {
+    return (_jsxs("div", { className: "ov-setup", children: [_jsx("p", { children: _jsx("strong", { children: "Le visite non sono ancora collegate." }) }), _jsxs("p", { children: ["Il pannello legge le statistiche da uno di questi servizi. Il codice di tracciamento sul sito \u00E8 un\u2019altra cosa e si incolla in ", _jsx("em", { children: "Impostazioni \u2192 Sito \u2192 Tag Analytics" }), "."] }), _jsx("div", { className: "ov-setup-list", children: providers.map((p) => (_jsxs("div", { className: "ov-setup-item", children: [_jsx("strong", { children: p.label }), p.missing.length === 0
+                            ? _jsx("span", { className: "ov-setup-ok", children: "pronto \u2014 scegli questo con ANALYTICS_PROVIDER" })
+                            : _jsx("pre", { children: p.missing.map(recipe).join("\n") })] }, p.id))) })] }));
+}
+/* Una variabile si scrive in `wrangler.toml`; un secret si mette con un comando e non deve
+   MAI finire in un file committato. Sono due gesti diversi e il riquadro mostra quello giusto,
+   invece di un elenco di nomi da cercare altrove. */
+function recipe({ name, secret }) {
+    return secret
+        ? `npx wrangler pages secret put ${name} \\\n  --project-name ${site().pagesProject}`
+        : `# in wrangler.toml, fra le [vars]\n${name} = "…"`;
+}
+function StatusPill({ delivery }) {
+    const now = new Date().toISOString();
+    const expired = !!delivery.filesExpiresAt && delivery.filesExpiresAt <= now;
+    if (delivery.status === "archived")
+        return _jsx("span", { className: "dl-pill", children: "Archiviato" });
+    if (expired)
+        return _jsx("span", { className: "dl-pill", children: "Scaduto" });
+    if (delivery.downloadCount > 0)
+        return _jsx("span", { className: "dl-pill is-downloaded", children: "Scaricato" });
+    return _jsx("span", { className: "dl-pill is-ready", children: "Attivo" });
+}
+/* ---- Formati ------------------------------------------------------------------------- */
+const BARS = [30, 52, 38, 66, 44, 82, 58, 96, 70, 46, 62, 34];
+const NUM = new Intl.NumberFormat("it-IT");
+function int(n) { return NUM.format(Math.round(n)); }
+function size(bytes) {
+    if (!bytes)
+        return "0 B";
+    const units = ["B", "kB", "MB", "GB", "TB"];
+    const i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+    const v = bytes / 1024 ** i;
+    return `${v.toLocaleString("it-IT", { maximumFractionDigits: v < 10 && i > 0 ? 1 : 0 })} ${units[i]}`;
+}
+/* Umami manda il tempo TOTALE in secondi, non la media: da solo non dice niente, perché
+   cresce col traffico. Diviso per le sessioni diventa «quanto si è fermato uno», che è la
+   domanda — e la stessa divisione va fatta sul periodo precedente, altrimenti la variazione
+   confronta due cose diverse. Senza il dato di prima, `prev` resta null e la pillola non
+   compare: meglio niente che una percentuale che parla d'altro. */
+function averageTime(totals) {
+    if (!totals || !totals.visits.value)
+        return undefined;
+    const prev = totals.totaltime.prev !== null && totals.visits.prev
+        ? totals.totaltime.prev / totals.visits.prev
+        : null;
+    return { value: totals.totaltime.value / totals.visits.value, prev };
+}
+function seconds(value) {
+    const s = Math.round(value);
+    return s >= 60 ? `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, "0")}s` : `${s}s`;
+}
+/* Gli estremi si scrivono con un segno, non arrotondati. Uno «0%» accanto a 7 MB di fotografie
+   vere direbbe che non c'è niente, e la differenza fra "poco" e "niente" è tutta la ragione
+   della riga; un «100%» sulla riga accanto direbbe che le altre due non esistono — e le tre
+   percentuali arrotondate farebbero 101. */
+function percent(share) {
+    if (share > 0 && share < 1)
+        return "<1%";
+    if (share > 99 && share < 100)
+        return ">99%";
+    return `${share.toLocaleString("it-IT", { maximumFractionDigits: share < 10 ? 1 : 0 })}%`;
+}
+function day(iso) {
+    return new Date(iso).toLocaleDateString("it-IT", { day: "numeric", month: "short" });
+}
+/* Giorno e ora di un appuntamento. «oggi»/«domani» invece della data quando capita: è come se
+   lo direbbe una persona, ed è anche l'unica distinzione che conta guardando un elenco di
+   cose in arrivo. */
+function slot(iso) {
+    const d = new Date(iso);
+    const hhmm = d.toLocaleTimeString("it-IT", { hour: "2-digit", minute: "2-digit" });
+    const today = new Date();
+    const sameDay = (a, b) => a.toDateString() === b.toDateString();
+    const tomorrow = new Date(today.getTime() + 86_400_000);
+    if (sameDay(d, today))
+        return `oggi · ${hhmm}`;
+    if (sameDay(d, tomorrow))
+        return `domani · ${hhmm}`;
+    return `${d.toLocaleDateString("it-IT", { day: "numeric", month: "short" })} · ${hhmm}`;
+}
+function when(iso) {
+    const d = new Date(iso);
+    const hours = (Date.now() - d.getTime()) / 3_600_000;
+    if (hours < 1)
+        return "poco fa";
+    if (hours < 24)
+        return `${Math.floor(hours)} ore fa`;
+    if (hours < 48)
+        return "ieri";
+    return d.toLocaleDateString("it-IT", { day: "numeric", month: "long" });
+}
+/* Umami dà "2026-07-28 00:00:00": non è ISO (manca la T) e Safari lo rifiuta, quindi la
+   sostituzione non è cosmetica. */
+function parse(x) { return new Date(x.replace(" ", "T")); }
+function axisLabel(x, unit) {
+    const d = parse(x);
+    return unit === "hour"
+        ? d.toLocaleTimeString("it-IT", { hour: "2-digit" })
+        : d.toLocaleDateString("it-IT", { weekday: "short" });
+}
+function fullLabel(x, unit) {
+    const d = parse(x);
+    return unit === "hour"
+        ? d.toLocaleString("it-IT", { hour: "2-digit", minute: "2-digit" })
+        : d.toLocaleDateString("it-IT", { weekday: "long", day: "numeric", month: "long" });
+}
+/* Con trenta giorni le etichette si sovrappongono: se ne stampa una ogni tot, tenendo sempre
+   la prima e l'ultima — sono le due che dicono qual è il periodo. */
+function tickEvery(total, i) {
+    const step = Math.ceil(total / 8);
+    return i === 0 || i === total - 1 || i % step === 0;
+}
+function initials(name) {
+    return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
+}

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

@@ -0,0 +1,12 @@
+import type { PageModel } from "../lib/pages";
+export declare function NewPageButton({ pages, onCreate }: {
+    pages: PageModel[];
+    onCreate: (p: PageModel) => void;
+}): import("react").JSX.Element;
+export declare function RowMenu({ page, pages, onChange, onRemove, onDuplicate, }: {
+    page: PageModel;
+    pages: PageModel[];
+    onChange: (next: PageModel) => void;
+    onRemove: () => void;
+    onDuplicate: () => void;
+}): import("react").JSX.Element;

package/dist/app/routes/PageActions.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Creazione, rinomina, duplicazione, eliminazione.
+ *
+ * Tutte e quattro sono operazioni sull'ELENCO, non chiamate al server: diventano vere al
+ * salvataggio, in un solo commit, come tutto il resto. È il contratto che pages.js ha sempre
+ * avuto — riceve l'elenco desiderato e riconcilia — e conviene non romperlo: un'eliminazione
+ * immediata sarebbe un commit a sé, non annullabile, e scollegata dal resto delle modifiche.
+ *
+ * `_orig` è il meccanismo dei rename: dice al server da quale cartella partire per conservare
+ * corpo e campi non gestiti. Vale null per le pagine nuove — non c'è niente da conservare.
+ *
+ * Il menu e la rinomina sono due POPOVER ancorati alla riga, non sostituzioni del suo contenuto:
+ * in una colonna larga 270px la riga non ha spazio per diventare un modulo, e vedere la riga
+ * scomparire mentre la si rinomina fa perdere il segno di dove si era.
+ */
+import { useMemo, useState } from "react";
+import { ui } from "../../index.js";
+import { site } from "../site.js";
+import { slugify, uniqueSlug } from "../lib/slug";
+import { Icon } from "../ui/icons";
+/* I tipi che si possono creare vengono DALLO SCHEMA — sono le stesse opzioni che il form della
+ * pagina mostra alla voce "Tipo" (`Page.type`, registro `ui`). Qui c'era un elenco scritto a
+ * mano, ed era già indietro di due tipi: mancavano `portfolio` e `workshop`, quindi dall'admin
+ * si potevano modificare ma non creare — con l'unico rimedio di crearne una di un altro tipo e
+ * cambiarlo dopo dal form. È esattamente la divergenza che i due registri esistono per togliere
+ * (vedi l'intestazione di src/registries.ts): un tipo nuovo si dichiara una volta nello schema
+ * del sito e compare da solo anche qui.
+ *
+ * ⚠️ DENTRO il componente, non come costante di modulo. Lo schema ora arriva dal sito che monta
+ * il kit (`site()`), e un `const` di modulo verrebbe calcolato all'IMPORT — cioè prima che
+ * `mountAdmin` abbia impostato la configurazione, con un'eccezione al caricamento del pannello.
+ * Quando era un import diretto dallo schema il valore era disponibile subito e la costante di
+ * modulo andava bene: è il genere di cosa che cambia quando una dipendenza smette di essere
+ * statica e diventa iniettata. */
+function tipiDisponibili() {
+    const tipi = ui.get(site().page.type)?.options ?? [];
+    /* La preselezione: "Pagina" se c'è (è la scelta di gran lunga più frequente), altrimenti la
+     * prima opzione — così questo elenco non può restare senza un valore valido. */
+    const iniziale = tipi.some((t) => t.value === "page") ? "page" : (tipi[0]?.value ?? "page");
+    return { tipi, iniziale };
+}
+export function NewPageButton({ pages, onCreate }) {
+    const { tipi: TIPI, iniziale: TIPO_INIZIALE } = useMemo(tipiDisponibili, []);
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const [type, setType] = useState(TIPO_INIZIALE);
+    const create = () => {
+        const t = title.trim();
+        if (!t)
+            return;
+        onCreate({
+            slug: uniqueSlug(t, pages.map((p) => p.slug)),
+            title: t,
+            type,
+            weight: 0, // lo ricalcola positionWeight dalla posizione
+            published: true,
+            isHome: false,
+            inMenu: false,
+            r2Prefix: "",
+            _orig: null, // pagina nuova: nessuna sorgente da cui conservare
+        });
+        setTitle("");
+        setType(TIPO_INIZIALE);
+        setOpen(false);
+    };
+    if (!open) {
+        return (_jsxs("button", { className: "ak-btn ak-btn-primary ak-btn-block", onClick: () => setOpen(true), children: [_jsx(Icon.plus, {}), " Nuova pagina"] }));
+    }
+    return (_jsxs("div", { className: "pa-new", children: [_jsx("input", { className: "ak-input", autoFocus: true, placeholder: "Titolo della pagina", value: title, onChange: (e) => setTitle(e.target.value), onKeyDown: (e) => { if (e.key === "Enter")
+                    create(); if (e.key === "Escape")
+                    setOpen(false); } }), _jsx("select", { className: "ak-input", value: type, onChange: (e) => setType(e.target.value), children: TIPI.map((t) => _jsx("option", { value: t.value, children: t.label }, t.value)) }), title.trim() && (_jsxs("span", { className: "ak-hint", children: ["indirizzo: /", uniqueSlug(title, pages.map((p) => p.slug)), "/"] })), _jsxs("div", { className: "pa-row", children: [_jsx("button", { className: "ak-btn ak-btn-primary", onClick: create, disabled: !title.trim(), children: "Crea" }), _jsx("button", { className: "ak-btn ak-btn-quiet", onClick: () => setOpen(false), children: "Annulla" })] })] }));
+}
+export function RowMenu({ page, pages, onChange, onRemove, onDuplicate, }) {
+    const [open, setOpen] = useState(false);
+    const [renaming, setRenaming] = useState(false);
+    const [title, setTitle] = useState(String(page.title ?? ""));
+    const taken = pages.filter((p) => p.slug !== page.slug).map((p) => p.slug);
+    const nuovo = slugify(title);
+    const cambia = nuovo !== page.slug;
+    return (_jsxs("span", { className: "pa", children: [_jsx("button", { className: "pa-more", onClick: () => { setOpen(!open); setRenaming(false); }, title: "Altro", children: _jsx(Icon.more, {}) }), open && !renaming && (_jsxs("div", { className: "pa-menu", onMouseLeave: () => setOpen(false), children: [_jsx("button", { onClick: () => { setTitle(String(page.title ?? "")); setRenaming(true); }, children: "Rinomina\u2026" }), _jsx("button", { onClick: () => { onChange({ ...page, inMenu: !page.inMenu }); setOpen(false); }, children: page.inMenu ? "Togli dal menu" : "Aggiungi al menu" }), _jsx("button", { onClick: () => { onChange({ ...page, published: page.published === false }); setOpen(false); }, children: page.published === false ? "Pubblica" : "Nascondi" }), _jsx("button", { onClick: () => { onDuplicate(); setOpen(false); }, children: "Duplica" }), _jsx("button", { className: "pa-danger", onClick: () => {
+                            if (confirm(`Eliminare "${page.title}"?\n\nLa pagina e il suo testo spariscono dal sito al prossimo salvataggio. ` +
+                                `Le foto restano nel bucket.`))
+                                onRemove();
+                            setOpen(false);
+                        }, children: "Elimina\u2026" })] })), open && renaming && (_jsxs("div", { className: "pa-menu pa-menu-form", children: [_jsx("input", { className: "ak-input", autoFocus: true, value: title, onChange: (e) => setTitle(e.target.value), onKeyDown: (e) => { if (e.key === "Escape") {
+                            setRenaming(false);
+                            setOpen(false);
+                        } } }), cambia && (_jsxs("span", { className: "ak-hint", children: ["l'indirizzo diventa /", uniqueSlug(title, taken), "/ \u2014 i vecchi link non funzioneranno pi\u00F9"] })), _jsxs("div", { className: "pa-row", children: [_jsx("button", { className: "ak-btn ak-btn-primary", onClick: () => {
+                                    onChange({ ...page, title: title.trim(), slug: cambia ? uniqueSlug(title, taken) : page.slug });
+                                    setRenaming(false);
+                                    setOpen(false);
+                                }, children: "Rinomina" }), _jsx("button", { className: "ak-btn ak-btn-quiet", onClick: () => { setRenaming(false); setOpen(false); }, children: "Annulla" })] })] }))] }));
+}

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

@@ -0,0 +1,23 @@
+import type { AssetFile } from "../../index.js";
+import type { PageModel } from "../lib/pages";
+export declare function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, }: {
+    page: PageModel;
+    pages: PageModel[];
+    onChange: (next: PageModel) => void;
+    seoActive: boolean;
+    onSeoToggle: () => void;
+}): import("react").JSX.Element;
+export declare function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, }: {
+    page: PageModel;
+    onChange: (next: PageModel) => void;
+    /** Sostituisce la pagina con quella letta dal repo, senza contare come modifica dell'utente. */
+    onRefresh: (next: PageModel) => void;
+    /** Falso se in questa sessione la pagina è già stata modificata: allora non si rilegge. */
+    pristine: boolean;
+    pickMedia?: (o: {
+        multiple: boolean;
+    }) => Promise<string[] | null>;
+    pickMediaFiles?: (o: {
+        multiple: boolean;
+    }) => Promise<AssetFile[] | null>;
+}): import("react").JSX.Element;