@cardinali-studio/adminkit 2.2.24 → 2.2.33

package/dist/functions/delivery-public/assets/delivery.css

@@ -0,0 +1,297 @@
+/* Pagina di consegna — /c/<token>
+ *
+ * Il layout viene dalla delivery di un consumer precedente (due colonne, le fotografie che
+ * ruotano a destra, i testi a sinistra, la gallery sotto); l'ASPETTO no. Qui vale il
+ * linguaggio del sito. È autonomo: la pagina è servita da una Function e non dipende dal
+ * bundle CSS della home.
+ *   pulsanti  -> come .contact-send: squadrati, maiuscoli, spaziati
+ *   campi     -> come .contact-field: nessun riquadro, solo la riga sotto
+ *   etichette -> maiuscolo .7rem, spaziatura .14em, colore muto
+ *   movimento -> cubic-bezier(.16,1,.3,1), la stessa curva di .reach-roll
+ *
+ * NB: `[hidden]` va forzato in cima. Diversi blocchi qui sotto hanno un `display`
+ * esplicito, e una classe con display batte l'attributo hidden: è la trappola che sul
+ * progetto di riferimento aveva lasciato in pagina il form della password già sbloccato.
+ */
+[hidden] { display: none !important; }
+
+:root {
+  --bg: #0a0a0a;
+  --fg: #f1f1ee;
+  --muted: #9c9c98;
+  --accent: #ff315f;
+  --line: #292927;
+  --dc-mono: 2rem;
+  --dc-pad-x: clamp(1.25rem, 2.4vw, 3rem);
+  --dc-edge: 4vw;
+}
+
+* { box-sizing: border-box; }
+html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
+body.is-delivery {
+  margin: 0; overflow-x: hidden; color: var(--fg); background: var(--bg);
+  font: 400 1rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+a { color: inherit; text-decoration: none; }
+button, input { font: inherit; }
+.dc-brand {
+  position: fixed; z-index: 20; left: var(--dc-edge); bottom: 1.25rem;
+  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
+}
+.dc-brand:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
+
+/* ===== Le due colonne ================================================================ */
+.dc {
+  display: grid;
+  grid-template-columns: 34% 1fr;
+  align-items: start;
+}
+/* Il fondo della colonna è del MONOGRAMMA: `--dc-mono` è il suo ingombro reale e niente
+   deve finirci sotto — meno che mai qualcosa da premere, perché il bersaglio del menu
+   (#menu-btn, `fixed`, z-index 31) si prenderebbe il click. Per questo qui dentro sta solo
+   ciò che serve subito: note d'uso e pulsante finale vivono in .dc-close, in fondo. */
+.dc-info {
+  display: flex; flex-direction: column; align-items: flex-start;
+  gap: clamp(1rem, 2.2vh, 1.8rem);
+  min-height: 100svh;
+  padding: clamp(2rem, 6vh, 4rem) var(--dc-pad-x) calc(var(--dc-mono) + 1.5rem) var(--dc-edge);
+}
+
+/* Consegna protetta: si vede chi è e cos'è — mai una fotografia. Senza immagini le due
+   colonne non hanno ragione di esistere, e mezzo schermo vuoto sembrerebbe un errore. */
+body.is-locked .dc { display: block; }
+body.is-locked .dc-stage { display: none; }
+body.is-locked .dc-info { max-width: 46rem; }
+
+/* La colonna delle immagini resta ferma mentre scorre quella dei testi: a scorrere è la
+   pagina intera, così non ci sono aree di scorrimento annidate (la rotellina sopra le foto
+   fa quello che ci si aspetta) e la gallery arriva sotto senza salti. */
+.dc-stage {
+  position: sticky; top: 0;
+  height: 100svh; padding: clamp(0.75rem, 1.6vw, 1.75rem);
+  overflow: hidden;
+}
+
+/* ===== Testi ========================================================================= */
+.dc-eyebrow, .dc-label {
+  margin: 0;
+  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
+}
+.dc-client {
+  margin: 0;
+  font-weight: 700; line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase;
+  font-size: clamp(2.4rem, 3.6vw, 4.6rem);
+  overflow-wrap: anywhere;
+}
+.dc-work {
+  margin: 0;
+  font-weight: 700; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase;
+  font-size: clamp(0.85rem, 1.05vw, 1.05rem); color: var(--muted);
+}
+.dc-intro {
+  margin: 0; max-width: 46ch;
+  font-size: clamp(0.9rem, 1.02vw, 1rem); line-height: 1.62; color: #c9c9c9;
+  white-space: pre-line;
+}
+.dc-expiry {
+  margin: 0;
+  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
+}
+.dc-expiry.is-soon { color: var(--accent); }
+.dc-hint { margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--muted); }
+.dc-error { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--accent); }
+.dc-notice {
+  padding: 0.9rem 1rem; border-left: 2px solid var(--accent);
+  background: #131313; font-size: 0.82rem; line-height: 1.55; color: #c9c9c9;
+}
+.dc-notes { display: flex; flex-direction: column; gap: 0.5rem; max-width: 52ch; }
+.dc-notes-body { font-size: 0.82rem; line-height: 1.6; color: var(--muted); white-space: pre-line; }
+
+/* La chiusura della pagina: note d'uso e richiesta di recensione, dopo le fotografie.
+   Il pulsante va a DESTRA, non sotto le note: a sinistra, in fondo alla pagina, c'è il
+   monogramma, e quel che gli finisce sotto non si può premere. */
+.dc-close {
+  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
+  gap: clamp(1.5rem, 4vh, 2.5rem);
+  padding: clamp(2.5rem, 7vh, 5rem) var(--dc-pad-x) clamp(2.5rem, 6vh, 4rem) var(--dc-edge);
+  border-top: 1px solid var(--line);
+}
+.dc-close .dc-btn { margin-left: auto; }
+
+/* ===== Pulsanti ====================================================================== */
+.dc-btn {
+  display: inline-block; align-self: flex-start;
+  font: inherit; font-size: 0.78rem; font-weight: 400;
+  letter-spacing: 0.14em; text-transform: uppercase;
+  padding: 0.85rem clamp(1.2rem, 2vw, 2rem);
+  border: 1px solid transparent; border-radius: 0; cursor: pointer;
+  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, opacity 240ms ease;
+}
+.dc-btn-solid { background: var(--fg); color: var(--bg); }
+.dc-btn-solid:hover, .dc-btn-solid:focus-visible { background: var(--accent); color: #fff; }
+.dc-btn-line { background: transparent; color: var(--fg); border-color: #3a3a3a; }
+.dc-btn-line:hover, .dc-btn-line:focus-visible { border-color: var(--fg); background: #151515; }
+.dc-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
+.dc-btn[disabled] { opacity: 0.5; cursor: default; }
+.dc-btn[disabled]:hover { background: var(--fg); color: var(--bg); }
+.dc-btn-line[disabled]:hover { background: transparent; color: var(--fg); }
+
+/* ===== Download ====================================================================== */
+.dc-downloads { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; }
+.dc-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
+.dc-pack-name {
+  margin: 0;
+  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
+}
+.dc-pack-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.dc-dl-note { margin: 0; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); }
+
+/* ===== Codice di accesso ============================================================= */
+.dc-gate { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 24rem; }
+.dc-gate-row { display: flex; gap: 0.5rem; align-items: stretch; }
+/* font-size 16px: sotto, iOS Safari zooma la pagina al focus e la sposta sotto le dita. */
+.dc-gate-input {
+  flex: 1 1 auto; min-width: 0;
+  font: inherit; font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
+  color: var(--fg); background: transparent;
+  border: 0; border-bottom: 1px solid #3a3a3a; border-radius: 0;
+  padding: 0.5rem 0;
+  transition: border-color 260ms ease;
+}
+.dc-gate-input:focus { outline: none; border-bottom-color: var(--fg); }
+.dc-gate .dc-btn { flex: 0 0 auto; }
+
+/* ===== Palcoscenico ================================================================== */
+/* Le fotografie non vengono MAI ritagliate: `contain` su fondo pieno. Due verticali
+   consecutivi vanno affiancati (lo decide stage.js, che conosce le proporzioni). */
+.dc-stage-box { position: relative; width: 100%; height: 100%; }
+.dc-set { position: absolute; inset: 0; display: flex; gap: clamp(0.5rem, 1vw, 1rem); }
+.dc-shot {
+  display: block; min-width: 0; height: 100%; object-fit: contain;
+  opacity: 0; transform: translate3d(0, 13%, 0) scale(0.985);
+  animation: dc-shot-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  will-change: transform, opacity;
+}
+.dc-shot--single { width: 100%; }
+.dc-shot--pair { width: 50%; }
+/* Lo staggered: la seconda foto della coppia entra 140ms dopo la prima. */
+.dc-shot--second { animation-delay: 0.14s; }
+.dc-set.is-out { pointer-events: none; }
+.dc-set.is-out .dc-shot {
+  opacity: 1; transform: none;
+  animation: dc-shot-out 0.52s cubic-bezier(0.7, 0, 0.84, 0) forwards;
+}
+.dc-set.is-out .dc-shot--second { animation-delay: 0.05s; }
+@keyframes dc-shot-in { to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
+@keyframes dc-shot-out { to { opacity: 0; transform: translate3d(0, -8%, 0) scale(1.018); } }
+
+/* ===== Gallery ======================================================================= */
+.dc-gallery {
+  padding: clamp(3rem, 9vh, 7rem) var(--dc-pad-x) clamp(3rem, 8vh, 6rem) var(--dc-edge);
+  display: flex; flex-direction: column; gap: 1.5rem;
+}
+.dc-grid { width: 100%; }
+.dc-row { display: flex; gap: 8px; margin-bottom: 8px; }
+.dc-cell {
+  display: block; flex: 0 0 auto; padding: 0; border: 0; border-radius: 0;
+  background: #141414; overflow: hidden; cursor: zoom-in;
+}
+.dc-cell img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.86; transition: opacity 420ms ease; }
+.dc-cell:hover img, .dc-cell:focus-visible img { opacity: 1; }
+.dc-cell:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
+
+/* ===== Lightbox ====================================================================== */
+.dc-lb {
+  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
+  margin: 0; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: hidden;
+}
+.dc-lb::backdrop { background: rgba(8, 8, 8, 0.96); }
+.dc-lb[open] {
+  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto;
+  align-items: center;
+}
+.dc-lb-stage {
+  grid-column: 1 / -1; grid-row: 1 / -1; margin: 0;
+  display: flex; align-items: center; justify-content: center;
+  padding: clamp(0.75rem, 4vw, 3.5rem);
+}
+.dc-lb-img {
+  max-width: 92vw; max-height: 82dvh; width: auto; height: auto; object-fit: contain;
+  opacity: 0; animation: dc-lb-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.dc-lb-btn {
+  position: relative; z-index: 2; display: grid; place-items: center;
+  border: 1px solid #2e2e2e; background: rgba(20, 20, 20, 0.7); color: var(--fg);
+  cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease;
+}
+.dc-lb-btn:hover { border-color: var(--fg); background: #1c1c1c; }
+.dc-lb-btn:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
+.dc-lb-nav {
+  grid-row: 1 / -1; align-self: center; margin: clamp(0.5rem, 2vw, 1.5rem);
+  width: clamp(2.5rem, 4vw, 3.25rem); height: clamp(2.5rem, 4vw, 3.25rem);
+  font-size: 1.4rem; line-height: 1;
+}
+.dc-lb-prev { grid-column: 1; }
+.dc-lb-next { grid-column: 3; }
+.dc-lb-close {
+  grid-column: 3; grid-row: 1; align-self: start; justify-self: end; z-index: 3;
+  width: 2.5rem; height: 2.5rem; margin: clamp(0.5rem, 2vw, 1.25rem); font-size: 0.9rem;
+}
+.dc-lb-bar {
+  grid-column: 1 / -1; grid-row: 2; z-index: 2;
+  display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2vw, 1.75rem);
+  padding: 0 1rem clamp(1rem, 3vh, 2rem);
+}
+.dc-lb-count { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--muted); }
+@keyframes dc-lb-in { to { opacity: 1; } }
+
+/* ===== Messaggio a tutta pagina ====================================================== */
+.dc-msg {
+  min-height: 100svh;
+  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
+  gap: 1.1rem;
+  padding: clamp(2rem, 6vh, 4rem) var(--dc-pad-x) calc(var(--dc-mono) + 1.5rem) var(--dc-edge);
+  max-width: 46rem;
+}
+.dc-msg h1 {
+  margin: 0;
+  font-weight: 700; line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase;
+  font-size: clamp(2rem, 3.2vw, 3.6rem);
+}
+.dc-msg-body { margin: 0; max-width: 42ch; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
+.dc-msg .dc-btn { margin-top: 0.75rem; }
+
+/* ===== Piede ========================================================================= */
+.dc-foot {
+  display: flex; flex-wrap: wrap; gap: 0.6rem clamp(1rem, 3vw, 2.5rem);
+  padding: 1.5rem var(--dc-pad-x) calc(var(--dc-mono) + 1rem) var(--dc-edge);
+  border-top: 1px solid var(--line);
+  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
+}
+.dc-foot a:hover, .dc-foot a:focus-visible { color: var(--fg); }
+/* Con il messaggio a tutta pagina il piede sarebbe una seconda schermata vuota. */
+body.is-message .dc-foot { display: none; }
+
+/* ===== Mobile ======================================================================== */
+@media (max-width: 860px) {
+  /* `align-items` torna a `stretch`: quello del desktop è `start`, che serve al `sticky`
+     della colonna destra, ma in una colonna flex significa "largo quanto il contenuto" —
+     e il palcoscenico, che di contenuto non ne ha finché il JS non monta la prima foto,
+     collasserebbe a due padding. */
+  .dc { display: flex; flex-direction: column; align-items: stretch; }
+  /* Le fotografie per prime: su un telefono sono ciò che si vuole vedere aprendo il link. */
+  .dc-stage { order: 1; position: static; height: 54svh; min-height: 17rem; padding: 0.75rem 1rem; }
+  .dc-info { order: 2; min-height: 0; padding: 1.75rem 1.25rem calc(var(--dc-mono) + 1.5rem); gap: 2rem; }
+  .dc-gallery { padding: 2.5rem 1.25rem 3rem; }
+  .dc-shot--pair { width: 100%; }
+  .dc-gate-row { flex-direction: column; align-items: stretch; }
+  .dc-gate .dc-btn { align-self: stretch; text-align: center; }
+  .dc-msg, .dc-foot { padding-left: 1.25rem; padding-right: 1.25rem; }
+  .dc-lb-img { max-width: 96vw; max-height: 74dvh; }
+  .dc-lb-nav { margin: 0.35rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dc-shot, .dc-set.is-out .dc-shot, .dc-lb-img { animation: none; opacity: 1; transform: none; }
+  .dc-btn, .dc-cell img, .dc-lb-btn, .dc-gate-input { transition: none; }
+}

package/dist/functions/delivery-public/assets/gallery.js

@@ -0,0 +1,243 @@
+/* La gallery della consegna: righe giustificate + lightbox.
+ *
+ * Righe giustificate (stile Flickr/Google Foto) e non colonne fisse: le foto seguono
+ * l'ordine in orizzontale, riga per riga, ognuna scalata alla stessa altezza fino a
+ * riempire la larghezza. Le proporzioni sono già nel manifest, quindi il calcolo si fa
+ * prima di scaricare qualsiasi miniatura — nessun salto di layout.
+ *
+ * Il download della singola foto passa da una CONVERSIONE in JPEG fatta col canvas. Le
+ * derivate sono WebP, e su iPhone «Salva nelle Foto» dallo share sheet con un WebP è
+ * inaffidabile; il JPEG si salva ovunque. Le immagini arrivano dalla stessa origine
+ * (le serve la Function), quindi il canvas non è contaminato e `toBlob` funziona.
+ */
+(function () {
+  "use strict";
+  var DC = window.DC;
+  var section = document.querySelector("[data-dc-gallery]");
+  var grid = document.querySelector("[data-dc-grid]");
+  if (!DC || !section || !grid || DC.data.state !== "ready") return;
+
+  var items = [];
+  (DC.data.packages || []).forEach(function (pkg) {
+    (pkg.images || []).forEach(function (image) { items.push(image); });
+  });
+  var pending = (DC.data.packages || []).filter(function (pkg) { return pkg.nextCursor != null; });
+  if (!items.length && !pending.length) return;
+  var more = document.createElement("button");
+  more.type = "button"; more.className = "dc-btn dc-btn-line";
+  more.textContent = "Mostra altre foto"; more.hidden = !pending.length;
+  section.appendChild(more);
+  more.addEventListener("click", async function () {
+    more.disabled = true; more.textContent = "Caricamento…";
+    try {
+      var pkg = pending[0];
+      var base = location.pathname.replace(/\/$/, "");
+      var response = await fetch(base + "/images/" + encodeURIComponent(pkg.id) + "?after=" + pkg.nextCursor, { credentials: "same-origin" });
+      var page = await response.json();
+      if (!response.ok || !page.ok) throw new Error(page.error || "Caricamento non riuscito");
+      items.push.apply(items, page.images);
+      pkg.nextCursor = page.nextCursor;
+      if (page.nextCursor == null) pending.shift();
+      layout(grid.clientWidth);
+      more.hidden = !pending.length;
+      more.textContent = "Mostra altre foto";
+    } catch (_) { more.textContent = "Riprova a caricare le foto"; }
+    finally { more.disabled = false; }
+  });
+  section.hidden = false;
+
+  var reduce = matchMedia("(prefers-reduced-motion: reduce)");
+  var GAP = 8;
+
+  /* Il calcolo parte dalla larghezza della griglia, quindi va rifatto quando quella cambia
+     — e SOLO allora: le righe cambiano l'altezza della griglia, non la sua larghezza, così
+     l'osservatore non si rincorre da solo. Serve anche al primo giro: se al momento del
+     montaggio la larghezza è ancora 0 (succede in una scheda mai dipinta, o dentro un
+     pannello di anteprima), senza questo la gallery resterebbe vuota per sempre. */
+  var lastWidth = -1;
+  var relayout = function () {
+    var width = grid.clientWidth;
+    if (width === lastWidth) return;
+    lastWidth = width;
+    layout(width);
+  };
+  relayout();
+  if (typeof ResizeObserver === "function") new ResizeObserver(relayout).observe(grid);
+  var resizeTimer;
+  addEventListener("resize", function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(relayout, 150);
+  });
+
+  function rowHeight() {
+    var w = innerWidth;
+    return w < 700 ? 150 : (w < 1100 ? 210 : 270);
+  }
+
+  function layout(width) {
+    if (!width) return;
+    var target = rowHeight();
+    var frag = document.createDocumentFragment();
+    var row = [], sum = 0;
+
+    var flush = function (last) {
+      if (!row.length) return;
+      var h = last ? Math.min(target, (width - (row.length - 1) * GAP) / sum)
+                   : (width - (row.length - 1) * GAP) / sum;
+      var node = document.createElement("div");
+      node.className = "dc-row";
+      row.forEach(function (entry) {
+        node.appendChild(cell(entry, h));
+      });
+      frag.appendChild(node);
+      row = []; sum = 0;
+    };
+
+    items.forEach(function (item, index) {
+      var ratio = (item.width || 3) / (item.height || 2);
+      row.push({ item: item, ratio: ratio, index: index });
+      sum += ratio;
+      if (sum * target + (row.length - 1) * GAP >= width) flush(false);
+    });
+    flush(true);
+
+    grid.textContent = "";
+    grid.appendChild(frag);
+  }
+
+  function cell(entry, height) {
+    var node = document.createElement("button");
+    node.type = "button";
+    node.className = "dc-cell";
+    node.style.width = Math.round(entry.ratio * height) + "px";
+    node.style.height = Math.round(height) + "px";
+    node.setAttribute("aria-label", "Apri la fotografia " + (entry.index + 1) + " di " + items.length);
+    var image = new Image();
+    image.className = "dc-thumb";
+    image.src = entry.item.thumb;
+    image.alt = "";
+    image.loading = "lazy";
+    image.decoding = "async";
+    node.appendChild(image);
+    node.addEventListener("click", function () { open(entry.index); });
+    return node;
+  }
+
+  /* ---- lightbox ---------------------------------------------------------------------- */
+  var dialog, view, counter, saver, at = 0;
+
+  function build() {
+    dialog = document.createElement("dialog");
+    dialog.className = "dc-lb";
+    dialog.innerHTML =
+      '<button type="button" class="dc-lb-btn dc-lb-close" aria-label="Chiudi">✕</button>' +
+      '<button type="button" class="dc-lb-btn dc-lb-nav dc-lb-prev" aria-label="Fotografia precedente">‹</button>' +
+      '<figure class="dc-lb-stage"><img class="dc-lb-img" alt=""></figure>' +
+      '<button type="button" class="dc-lb-btn dc-lb-nav dc-lb-next" aria-label="Fotografia successiva">›</button>' +
+      '<div class="dc-lb-bar"><span class="dc-lb-count" aria-live="polite"></span>' +
+      '<button type="button" class="dc-btn dc-btn-solid dc-lb-dl">Salva questa foto</button></div>';
+    document.body.appendChild(dialog);
+    view = dialog.querySelector(".dc-lb-img");
+    counter = dialog.querySelector(".dc-lb-count");
+    saver = dialog.querySelector(".dc-lb-dl");
+
+    dialog.querySelector(".dc-lb-close").addEventListener("click", function () { dialog.close(); });
+    dialog.querySelector(".dc-lb-prev").addEventListener("click", function () { go(-1); });
+    dialog.querySelector(".dc-lb-next").addEventListener("click", function () { go(1); });
+    saver.addEventListener("click", save);
+    // Click sullo sfondo (fuori dalla figura) = chiudi.
+    dialog.addEventListener("click", function (event) { if (event.target === dialog) dialog.close(); });
+    dialog.addEventListener("keydown", function (event) {
+      if (event.key === "ArrowLeft") { event.preventDefault(); go(-1); }
+      else if (event.key === "ArrowRight") { event.preventDefault(); go(1); }
+    });
+    var from = null;
+    dialog.addEventListener("touchstart", function (e) { from = e.touches[0].clientX; }, { passive: true });
+    dialog.addEventListener("touchend", function (e) {
+      if (from === null) return;
+      var dx = e.changedTouches[0].clientX - from; from = null;
+      if (Math.abs(dx) > 45) go(dx < 0 ? 1 : -1);
+    }, { passive: true });
+  }
+
+  function open(index) {
+    if (!dialog) build();
+    at = index;
+    paint();
+    if (typeof dialog.showModal === "function") dialog.showModal();
+    else dialog.setAttribute("open", "");
+  }
+  function go(step) {
+    if (items.length < 2) return;
+    at = (at + step + items.length) % items.length;
+    paint();
+  }
+  function paint() {
+    var item = items[at];
+    if (!reduce.matches) { view.style.animation = "none"; view.offsetWidth; view.style.animation = ""; }
+    view.src = item.display;
+    view.alt = item.name || "";
+    counter.textContent = (at + 1) + " / " + items.length;
+    prepare(at);
+    [items[at + 1], items[at - 1]].forEach(function (near) {
+      if (near) { var pre = new Image(); pre.src = near.display; }
+    });
+  }
+
+  /* Conversione in JPEG, tenuta in cache per foto: al click lo share sheet deve partire
+     nello stesso gesto dell'utente, altrimenti iOS lo blocca. */
+  var jpegs = {};
+  function prepare(index) {
+    if (!(index in jpegs)) jpegs[index] = toJpeg(items[index].display);
+    return jpegs[index];
+  }
+  function toJpeg(url) {
+    return new Promise(function (resolve) {
+      var image = new Image();
+      image.decoding = "async";
+      image.onload = function () {
+        try {
+          var canvas = document.createElement("canvas");
+          canvas.width = image.naturalWidth; canvas.height = image.naturalHeight;
+          var ctx = canvas.getContext("2d");
+          ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); // il JPEG non ha alpha
+          ctx.drawImage(image, 0, 0);
+          canvas.toBlob(function (blob) { resolve(blob); }, "image/jpeg", 0.92);
+        } catch (e) { resolve(null); }
+      };
+      image.onerror = function () { resolve(null); };
+      image.src = url;
+    });
+  }
+  function baseName(item) { return String(item.name || "foto").split("/").pop().replace(/\.[^.]+$/, ""); }
+  function push(blob, name) {
+    var url = URL.createObjectURL(blob);
+    var link = document.createElement("a");
+    link.href = url; link.download = name;
+    document.body.appendChild(link); link.click(); link.remove();
+    setTimeout(function () { URL.revokeObjectURL(url); }, 15000);
+  }
+
+  function save() {
+    var index = at, item = items[index], label = saver.textContent;
+    saver.disabled = true; saver.textContent = "Preparo…";
+    var done = function () { saver.disabled = false; saver.textContent = label; };
+    prepare(index).then(function (jpeg) {
+      if (jpeg) return { blob: jpeg, name: baseName(item) + ".jpg" };
+      return fetch(item.display, { credentials: "same-origin" })
+        .then(function (res) { return res.blob(); })
+        .then(function (blob) { return { blob: blob, name: baseName(item) + ".webp" }; });
+    }).then(function (out) {
+      var file = new File([out.blob], out.name, { type: out.blob.type });
+      var touch = matchMedia("(pointer: coarse)").matches;
+      if (touch && navigator.canShare && navigator.canShare({ files: [file] })) {
+        return navigator.share({ files: [file] }).then(function () { return true; }, function (error) {
+          return !!(error && error.name === "AbortError");   // annullato dall'utente: sta bene così
+        }).then(function (handled) { if (!handled) push(out.blob, out.name); });
+      }
+      push(out.blob, out.name);
+    }).catch(function () {
+      location.href = item.download;
+    }).then(done, done);
+  }
+})();

package/dist/functions/delivery-public/assets/stage.js

@@ -0,0 +1,107 @@
+/* Il palcoscenico: la colonna destra della pagina di consegna.
+ *
+ * Le fotografie si alternano da sole, una (o due) per volta. Le regole vengono dalla
+ * delivery di un consumer precedente, e sono tre:
+ *   1. mai un ritaglio — `object-fit: contain` su fondo pieno, la foto è il soggetto;
+ *   2. due VERTICALI consecutivi stanno affiancati, e il secondo entra 140ms dopo il primo
+ *      (è lo staggered: l'animazione la fa il CSS, qui si decide solo chi sta con chi);
+ *   3. mai una dissolvenza incrociata — il set entrante si monta solo QUANDO il precedente
+ *      è finito di uscire, altrimenti per mezzo secondo si vedono due foto sovrapposte.
+ *
+ * Le proporzioni si conoscono solo a immagine caricata, quindi si carica prima la prima e
+ * si mostra subito quella; le altre arrivano dopo e il raggruppamento si rifà.
+ */
+(function () {
+  "use strict";
+  var DC = window.DC;
+  var stage = document.querySelector("[data-dc-stage]");
+  if (!DC || !stage || DC.data.state !== "ready") return;
+  var urls = (DC.data.heroes || []).filter(Boolean);
+  if (!urls.length) return;
+
+  var box = document.createElement("div");
+  box.className = "dc-stage-box";
+  stage.appendChild(box);
+
+  var reduce = matchMedia("(prefers-reduced-motion: reduce)");
+  var narrow = matchMedia("(max-width: 860px)");
+  var loaded = [], groups = [], at = 0, timer = 0, swapping = 0;
+
+  load(urls[0]).then(function (first) {
+    if (!first) return;
+    loaded = [first];
+    rebuild();
+    // Le altre in coda, in ordine: la prima schermata non aspetta il download di otto foto.
+    var rest = urls.slice(1);
+    return rest.reduce(function (chain, url) {
+      return chain.then(function () {
+        return load(url).then(function (image) { if (image) loaded.push(image); });
+      });
+    }, Promise.resolve()).then(function () {
+      if (loaded.length > 1) { rebuild(); play(); }
+    });
+  });
+
+  narrow.addEventListener("change", rebuild);
+  reduce.addEventListener("change", play);
+  document.addEventListener("visibilitychange", function () { document.hidden ? stop() : play(); });
+
+  function load(src) {
+    return new Promise(function (resolve) {
+      var image = new Image();
+      image.decoding = "async";
+      image.onload = function () { resolve({ src: src, w: image.naturalWidth, h: image.naturalHeight }); };
+      image.onerror = function () { resolve(null); };
+      image.src = src;
+    });
+  }
+
+  function makeGroups() {
+    var out = [];
+    for (var i = 0; i < loaded.length; i += 1) {
+      var one = loaded[i], next = loaded[i + 1];
+      var pair = !narrow.matches && one.h > one.w && next && next.h > next.w;
+      if (pair) { out.push([one, next]); i += 1; }
+      else out.push([one]);
+    }
+    return out;
+  }
+
+  function rebuild() {
+    groups = makeGroups();
+    if (at >= groups.length) at = 0;
+    render();
+  }
+
+  function render() {
+    var group = groups[at];
+    if (!group) return;
+    var out = box.querySelector(".dc-set:not(.is-out)");
+    var set = document.createElement("div");
+    set.className = "dc-set";
+    group.forEach(function (item, index) {
+      var image = new Image();
+      image.src = item.src;
+      image.alt = "";
+      image.className = "dc-shot " + (group.length === 1 ? "dc-shot--single" : "dc-shot--pair") +
+        (index ? " dc-shot--second" : "");
+      set.appendChild(image);
+    });
+    if (!out) { box.appendChild(set); return; }
+    if (reduce.matches) { out.remove(); box.appendChild(set); return; }
+    out.classList.add("is-out");
+    clearTimeout(swapping);
+    swapping = setTimeout(function () { out.remove(); box.appendChild(set); }, 540);
+  }
+
+  function stop() { if (timer) { clearInterval(timer); timer = 0; } }
+  function play() {
+    stop();
+    if (groups.length < 2 || reduce.matches) return;
+    timer = setInterval(function () {
+      if (document.hidden) return;
+      at = (at + 1) % groups.length;
+      render();
+    }, 3000);
+  }
+})();