@cardinali-studio/adminkit 1.0.0 → 2.1.0-rc.0

package/dist/api.d.ts

@@ -44,6 +44,11 @@ export interface RepoPage {
     /** Lo `sha` del blob su GitHub: identifica la VERSIONE di questo file, non il suo contenuto. */
     sha: string;
     page: Record<string, unknown>;
+    /** Le sibling dichiarate dal sito, senza caricare il loro contenuto nell'elenco. */
+    translations?: Record<string, {
+        exists: boolean;
+        sha?: string;
+    }>;
 }
 export declare const api: {
     pages: () => Promise<{
@@ -51,11 +56,13 @@ export declare const api: {
         commit: string;
         pages: RepoPage[];
     }>;
-    pageBody: (slug: string) => Promise<{
+    pageBody: (slug: string, language?: string) => Promise<{
         ok: true;
         slug: string;
         body: string;
         page: Record<string, unknown>;
+        language?: string;
+        exists?: boolean;
     }>;
     savePages: (pages: unknown[]) => Promise<{
         ok: true;

package/dist/api.js

@@ -39,7 +39,7 @@ export const api = {
     pages: () => call("/admin/api/pages"),
     /* Il corpo markdown, che nell'elenco non c'è: sono testi lunghi e servono solo alla pagina
      * che si sta aprendo. `page` è il modello letto dallo stesso file. */
-    pageBody: (slug) => call(`/admin/api/pages/get?slug=${encodeURIComponent(slug)}`),
+    pageBody: (slug, language) => call(`/admin/api/pages/get?slug=${encodeURIComponent(slug)}${language ? `&lang=${encodeURIComponent(language)}` : ""}`),
     /* `shas` è la versione di ogni file DOPO il commit: senza, il salvataggio successivo
      * partirebbe da una versione che non esiste più e verrebbe rifiutato. */
     savePages: (pages) => post("/admin/api/pages", { pages }),

package/dist/app/App.js

@@ -108,6 +108,11 @@ export function App() {
         ? list.find((p) => p.slug === route[1])
         : undefined;
     const seoEditing = !!editing && route[2] === "seo";
+    const languages = site().languages;
+    const [pageLanguage, setPageLanguage] = useState(() => languages?.default ?? "");
+    /* Ogni pagina si apre nella sua lingua predefinita. La scelta resta locale alla pagina aperta:
+       non deve cambiare Home, Media o la pagina successiva nell'elenco. */
+    useEffect(() => { setPageLanguage(languages?.default ?? ""); }, [editing?.slug, languages?.default]);
     /* Le destinazioni interne del dialogo «Collegamento», dalle pagine già caricate: la barra di
        formattazione compare dentro widget annidati anche di tre livelli, e le riceve da un
        contesto invece che da una catena di prop (vedi adminkit form/prose/pages.ts). Le pagine
@@ -211,7 +216,7 @@ export function App() {
     });
     return (_jsx(ProsePages.Provider, { value: pageLinks, children: _jsxs("div", { className: "app" + (hasList(section) && !offModule ? "" : " is-two"), children: [_jsxs("nav", { className: "rail", children: [_jsxs("div", { className: "rail-brand", children: [_jsx("span", { className: "rail-brand-name", children: site().name }), _jsx("span", { className: "rail-brand-role", children: "pannello" })] }), _jsx("div", { className: "rail-nav", children: navGroups.map((g) => (_jsxs("div", { className: "rail-group", children: [g.title && _jsx("span", { className: "rail-group-title", children: g.title }), g.items.map((n) => (_jsxs("button", { className: "rail-item" + (section === n.id ? " is-on" : ""), onClick: () => go(`/${n.id}`), children: [_jsx(n.icon, {}), _jsx("span", { children: n.label }), "badge" in n && n.badge ? _jsx("span", { className: "rail-badge", children: n.badge }) : null] }, n.id)))] }, g.title ?? "top"))) }), _jsxs("div", { className: "rail-foot", children: [_jsxs("a", { className: "rail-item", href: "/", target: "_blank", rel: "noreferrer", children: [_jsx(Icon.out, {}), _jsx("span", { children: "Vedi il sito" })] }), _jsxs("button", { className: "rail-item", onClick: toggleTheme, children: [theme === "dark" ? _jsx(Icon.sun, {}) : _jsx(Icon.moon, {}), _jsx("span", { children: theme === "dark" ? "Tema chiaro" : "Tema scuro" })] }), _jsxs("button", { className: "rail-item" + (section === "settings" ? " is-on" : ""), onClick: () => go("/settings/site"), children: [_jsx(Icon.settings, {}), _jsx("span", { children: "Impostazioni" })] })] })] }), hasList(section) && !offModule && (_jsxs("div", { className: "col", children: [section === "pages" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: list && _jsx(NewPageButton, { pages: list, onCreate: (p) => pages.update([...list, p]) }) }), _jsx("div", { className: "col-body", children: pages.error ? _jsx("p", { className: "ak-error", children: pages.error })
                                         : !list ? _jsx("p", { className: "ak-hint", children: "Carico\u2026" })
-                                            : _jsx(PagesList, { pages: list, current: editing?.slug, onEdit: (slug) => go(`/pages/${slug}`), onChange: pages.update, onRenamed: (from, to) => {
+                                            : _jsx(PagesList, { pages: list, current: editing?.slug, onEdit: (slug) => go(`/pages/${slug}`), languages: languages, onChange: pages.update, onRenamed: (from, to) => {
                                                     if (editing?.slug === from)
                                                         go(`/pages/${to}${seoEditing ? "/seo" : ""}`);
                                                 } }) })] })), section === "media" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Cartelle" }) }), _jsx("div", { className: "col-body", children: _jsx(MediaFolders, { lib: media, trash: { active: view === "trash", open: () => go("/trash"), leave: () => go("/media") } }) })] })), section === "requests" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: pickedReq.size === 0 ? (_jsx("span", { className: "col-title", children: requests.rows ? `${requests.rows.length} richieste` : "Richieste" })) : (_jsxs("span", { className: "rq-bulk", children: [_jsxs("span", { className: "col-title", children: [pickedReq.size, " scelte"] }), _jsx("button", { className: "mg-act", onClick: () => { void requests.mark([...pickedReq], true); setPickedReq(new Set()); }, children: "Gestite" }), _jsx("button", { className: "mg-act is-danger", onClick: () => { void requests.remove([...pickedReq]); setPickedReq(new Set()); }, children: "Elimina" }), _jsx("button", { className: "mg-act", onClick: () => setPickedReq(new Set()), children: "\u00D7" })] })) }), _jsx("div", { className: "col-body", children: requests.error ? _jsx("p", { className: "ak-error", children: requests.error })
@@ -234,7 +239,7 @@ export function App() {
                                             : deliveries.rows.length === 0 ? _jsx("p", { className: "ak-hint", children: "Nessun transfer, per ora." })
                                                 : _jsx(DeliveriesList, { rows: deliveries.rows, current: activeDeliveryId || quickSelectedId, onOpen: (id) => { setQuickSelectedId(undefined); go(`/deliveries/${id}`); } }) }), _jsxs("div", { className: "dl-col-foot", children: [deliveries.rows && _jsx(DeliveriesTotal, { rows: deliveries.rows }), _jsxs("button", { className: "col-item" + (deliverySettingsOpen ? " is-on" : ""), onClick: () => { setQuickSelectedId(undefined); go("/deliveries/settings"); }, children: [_jsx(Icon.settings, {}), _jsx("span", { children: "Impostazioni" })] })] })] })), section === "bookings" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: bookings.rows ? `${bookings.rows.length} appuntamenti` : "Prenotazioni" }) }), _jsx("div", { className: "col-body", children: bookings.error ? _jsx("p", { className: "ak-error", children: bookings.error })
                                         : !bookings.rows ? _jsx("p", { className: "ak-hint", children: "Carico\u2026" })
-                                            : _jsx(BookingsList, { rows: bookings.rows, current: bookingSettingsOpen ? "settings" : openBooking?.id, onOpen: (id) => go(`/bookings/${id}`), onAgenda: () => go("/bookings"), onSettings: () => go("/bookings/settings") }) })] })), section === "home" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Sezioni" }) }), _jsx("div", { className: "col-body", children: _jsx("ul", { className: "col-list", children: homeGroups.map((g) => (_jsx("li", { children: _jsx("button", { className: "col-item" + (g === homeGroup ? " is-on" : ""), onClick: () => go(`/home/${groupSlug(g)}`), children: g || "Generale" }) }, g))) }) })] })), section === "settings" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Impostazioni" }) }), _jsx("div", { className: "col-body", children: _jsxs("ul", { className: "col-list settings-list", children: [_jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "site" ? " is-on" : ""), onClick: () => go("/settings/site"), children: [_jsx("strong", { children: "Sito" }), _jsx("span", { children: "Favicon, identit\u00E0 e accesso generale." })] }) }), _jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "seo" ? " is-on" : ""), onClick: () => go("/settings/seo"), children: [_jsx("strong", { children: "SEO" }), _jsx("span", { children: "Motori di ricerca e crawler AI." })] }) })] }) })] }))] })), _jsxs("main", { className: "pane", children: [_jsxs("header", { className: "pane-head", children: [editing ? (_jsx(PageHeader, { page: editing, pages: list ?? [], onChange: replace, seoActive: seoEditing, onSeoToggle: () => go(`/pages/${editing.slug}${seoEditing ? "" : "/seo"}`) })) : view === "media" ? (_jsxs("nav", { className: "pane-crumbs", "aria-label": "Percorso", children: [_jsx("button", { className: "pane-crumb" + (mediaCrumbs.length ? "" : " is-current"), onClick: () => media.go(""), children: "Senza cartella" }), mediaCrumbs.map((c, i) => (_jsxs("span", { className: "pane-crumb-part", children: [_jsx("span", { className: "pane-crumb-sep", "aria-hidden": "true", children: "\u203A" }), _jsx("button", { className: "pane-crumb" + (i === mediaCrumbs.length - 1 ? " is-current" : ""), onClick: () => media.go(c.prefix), children: c.label })] }, c.prefix)))] })) : (_jsx("h1", { className: "pane-title", children: heading })), view === "media" && _jsx("span", { className: "pane-count", children: media.shown.length }), _jsx("span", { className: "pane-spacer" }), view === "media" && (_jsx("button", { className: "ak-btn ak-btn-primary", onClick: () => media.setUploadOpen(true), children: "Carica immagini" })), saver?.notice && (_jsx("button", { className: "pane-notice", onClick: () => saver.setNotice(null), children: saver.notice })), section === "bookings" && bookings.notice && (_jsx("button", { className: "pane-notice", onClick: bookings.clearNotice, children: bookings.notice })), publish.notice && (_jsx("button", { className: "pane-notice", onClick: publish.clearNotice, children: publish.notice })), !publish.configured && publish.error && (_jsx("span", { className: "pane-notice", title: publish.error, children: publish.error })), saver && (_jsxs(_Fragment, { children: [saver.dirty && _jsx("span", { className: "pane-dot", title: "modifiche non salvate" }), _jsx("button", { className: "ak-btn", disabled: !saver.dirty || saver.saving, 
+                                            : _jsx(BookingsList, { rows: bookings.rows, current: bookingSettingsOpen ? "settings" : openBooking?.id, onOpen: (id) => go(`/bookings/${id}`), onAgenda: () => go("/bookings"), onSettings: () => go("/bookings/settings") }) })] })), section === "home" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Sezioni" }) }), _jsx("div", { className: "col-body", children: _jsx("ul", { className: "col-list", children: homeGroups.map((g) => (_jsx("li", { children: _jsx("button", { className: "col-item" + (g === homeGroup ? " is-on" : ""), onClick: () => go(`/home/${groupSlug(g)}`), children: g || "Generale" }) }, g))) }) })] })), section === "settings" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-head", children: _jsx("span", { className: "col-title", children: "Impostazioni" }) }), _jsx("div", { className: "col-body", children: _jsxs("ul", { className: "col-list settings-list", children: [_jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "site" ? " is-on" : ""), onClick: () => go("/settings/site"), children: [_jsx("strong", { children: "Sito" }), _jsx("span", { children: "Favicon, identit\u00E0 e accesso generale." })] }) }), _jsx("li", { children: _jsxs("button", { className: "col-item settings-list-item" + (settingsView === "seo" ? " is-on" : ""), onClick: () => go("/settings/seo"), children: [_jsx("strong", { children: "SEO" }), _jsx("span", { children: "Motori di ricerca e crawler AI." })] }) })] }) })] }))] })), _jsxs("main", { className: "pane", children: [_jsxs("header", { className: "pane-head", children: [editing ? (_jsx(PageHeader, { page: editing, pages: list ?? [], onChange: replace, seoActive: seoEditing, onSeoToggle: () => go(`/pages/${editing.slug}${seoEditing ? "" : "/seo"}`), languages: languages, activeLanguage: pageLanguage, onLanguageChange: setPageLanguage })) : view === "media" ? (_jsxs("nav", { className: "pane-crumbs", "aria-label": "Percorso", children: [_jsx("button", { className: "pane-crumb" + (mediaCrumbs.length ? "" : " is-current"), onClick: () => media.go(""), children: "Senza cartella" }), mediaCrumbs.map((c, i) => (_jsxs("span", { className: "pane-crumb-part", children: [_jsx("span", { className: "pane-crumb-sep", "aria-hidden": "true", children: "\u203A" }), _jsx("button", { className: "pane-crumb" + (i === mediaCrumbs.length - 1 ? " is-current" : ""), onClick: () => media.go(c.prefix), children: c.label })] }, c.prefix)))] })) : (_jsx("h1", { className: "pane-title", children: heading })), view === "media" && _jsx("span", { className: "pane-count", children: media.shown.length }), _jsx("span", { className: "pane-spacer" }), view === "media" && (_jsx("button", { className: "ak-btn ak-btn-primary", onClick: () => media.setUploadOpen(true), children: "Carica immagini" })), saver?.notice && (_jsx("button", { className: "pane-notice", onClick: () => saver.setNotice(null), children: saver.notice })), section === "bookings" && bookings.notice && (_jsx("button", { className: "pane-notice", onClick: bookings.clearNotice, children: bookings.notice })), publish.notice && (_jsx("button", { className: "pane-notice", onClick: publish.clearNotice, children: publish.notice })), !publish.configured && publish.error && (_jsx("span", { className: "pane-notice", title: publish.error, children: publish.error })), saver && (_jsxs(_Fragment, { children: [saver.dirty && _jsx("span", { className: "pane-dot", title: "modifiche non salvate" }), _jsx("button", { className: "ak-btn", disabled: !saver.dirty || saver.saving, 
                                             /* Dopo un salvataggio il conteggio delle modifiche in attesa è cambiato: senza
                                                rileggerlo, «Pubblica» comparirebbe solo al ricaricamento della pagina — cioè
                                                il pannello direbbe che non c'è niente da pubblicare subito dopo aver salvato
@@ -248,7 +253,7 @@ export function App() {
                                         _jsx(Overview, { deliveries: deliveries.rows, expiring: deliveries.expiring, requests: requests.rows, pending: requests.pending, features: settings.data?.features ?? null, bookings: bookings.rows, bookingsPending: bookings.pending, bookingsError: bookings.error, go: go })), section === "bookings" && (bookings.error ? (_jsxs("div", { className: "pane-empty", children: [_jsx("p", { className: "ak-error", children: bookings.error }), _jsx("button", { className: "ak-btn", onClick: () => void bookings.load(), children: "Riprova" })] })) : !bookings.rows || !bookings.settings ? _jsx("p", { className: "pane-empty ak-hint", children: "Carico\u2026" })
                                             : bookingSettingsOpen ? _jsx(BookingSettingsHub, { store: bookings })
                                                 : openBooking ? _jsx(BookingDetail, { row: openBooking, store: bookings })
-                                                    : _jsx(BookingAgenda, { store: bookings, onOpen: (id) => go(`/bookings/${id}`) })), section === "pages" && (pages.error ? (_jsxs("div", { className: "pane-empty", children: [_jsx("p", { className: "ak-error", children: pages.error }), _jsx("button", { className: "ak-btn", onClick: () => void pages.load(), children: "Riprova" })] })) : editing ? (seoEditing ? (_jsx(PageSeoEditor, { page: editing, onChange: replace, onRefresh: pages.refresh, pristine: pages.isPristine(editing.slug), pickMediaFiles: pickMediaFiles, siteSettings: settings.data })) : (_jsx(PageEditor, { page: editing, onChange: replace, onRefresh: pages.refresh, pristine: pages.isPristine(editing.slug), pickMedia: pickMedia, pickMediaFiles: pickMediaFiles }))) : (_jsx("p", { className: "pane-empty ak-hint", children: list ? "Scegli una pagina dall'elenco, o creane una nuova." : "Carico…" }))), section === "home" && (
+                                                    : _jsx(BookingAgenda, { store: bookings, onOpen: (id) => go(`/bookings/${id}`) })), section === "pages" && (pages.error ? (_jsxs("div", { className: "pane-empty", children: [_jsx("p", { className: "ak-error", children: pages.error }), _jsx("button", { className: "ak-btn", onClick: () => void pages.load(), children: "Riprova" })] })) : editing ? (seoEditing ? (_jsx(PageSeoEditor, { page: editing, onChange: replace, onRefresh: pages.refresh, pristine: pages.isPristine(editing.slug), pickMediaFiles: pickMediaFiles, siteSettings: settings.data, readOnly: !!languages && pageLanguage !== languages.default })) : (_jsx(PageEditor, { page: editing, onChange: replace, onRefresh: pages.refresh, pristine: pages.isPristine(editing.slug), pickMedia: pickMedia, pickMediaFiles: pickMediaFiles, activeLanguage: pageLanguage, defaultLanguage: languages?.default }))) : (_jsx("p", { className: "pane-empty ak-hint", children: list ? "Scegli una pagina dall'elenco, o creane una nuova." : "Carico…" }))), section === "home" && (
                                         /* Con un errore di caricamento c'era solo la riga rossa: nessun modo di riprovare
                                            se non ricaricando il pannello a mano. Le altre sezioni il bottone ce l'hanno. */
                                         home.error ? (_jsxs("div", { className: "pane-empty", children: [_jsx("p", { className: "ak-error", children: home.error }), _jsx("button", { className: "ak-btn", onClick: () => void home.load(), children: "Riprova" })] }))

package/dist/app/app.css

@@ -305,6 +305,13 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
 .pg-icon { color: var(--ak-ink-quiet); }
 .pg-off { color: var(--ak-danger); opacity: .7; }
 .pg-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pg-language {
+  flex: none; min-width: 22px; padding: 3px 4px; border: 1px solid var(--ak-line); border-radius: 3px;
+  color: var(--ak-ink-quiet); font: 700 8px/1 var(--ak-font); letter-spacing: .05em; text-align: center;
+}
+.pg-language.is-saved { border-color: color-mix(in srgb, #168666 40%, var(--ak-line)); color: #168666; }
+.pg-language.is-draft { border-color: color-mix(in srgb, var(--ak-accent) 44%, var(--ak-line)); color: var(--ak-accent); }
+.pg-language.is-inherited { opacity: .5; }
 
 /* ---- Azioni sulla riga: popover ancorato ------------------------------------------------ */
 .pa { position: relative; flex: none; }
@@ -348,6 +355,7 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
   font: 600 17px/1.2 var(--ak-font); white-space: nowrap; text-align: left;
 }
 .pe-title:hover { color: var(--ak-accent); }
+.pe-title:disabled { cursor: default; color: var(--ak-ink); }
 .pe-title:focus-visible,
 .pe-seo-button:focus-visible,
 .pe-status:focus-visible,
@@ -366,6 +374,25 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
   color: var(--ak-accent);
 }
 .pe-seo-button .ico { width: 14px; height: 14px; }
+.pe-seo-button:disabled,
+.pe-status:disabled,
+.pe-menu-toggle:has(input:disabled) { opacity: .46; cursor: not-allowed; }
+.pe-language {
+  flex: none; display: inline-flex; overflow: hidden; border: 1px solid var(--ak-line); border-radius: 4px;
+  background: var(--ak-bg);
+}
+.pe-language button {
+  min-width: 33px; min-height: 27px; border: 0; border-left: 1px solid var(--ak-line); padding: 0 8px;
+  background: transparent; color: var(--ak-ink-quiet); cursor: pointer; font: 700 10px/1 var(--ak-font); letter-spacing: .06em;
+}
+.pe-language button:first-child { border-left: 0; }
+.pe-language button:hover { color: var(--ak-ink); }
+.pe-language button.is-active { background: var(--ak-panel); color: var(--ak-accent); box-shadow: inset 0 -2px var(--ak-accent); }
+.pe-translation-note {
+  margin: 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--ak-accent) 36%, var(--ak-line));
+  border-radius: 6px; background: color-mix(in srgb, var(--ak-accent) 6%, var(--ak-panel)); color: var(--ak-ink-quiet);
+  font: 400 13px/1.45 var(--ak-font);
+}
 .pe-visibility { position: relative; flex: none; }
 .pe-status {
   display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 5px 2px;

package/dist/app/lib/pages.d.ts

@@ -4,6 +4,17 @@ export type PageModel = Record<string, unknown> & {
     /** Versione del file da cui questa pagina è stata letta. Torna al server nel salvataggio: se
      *  nel frattempo il file è cambiato, il server rifiuta invece di sovrascrivere. */
     _sha?: string;
+    /** Presenza/versione delle sibling dichiarate; il loro contenuto è caricato solo aprendole. */
+    translations?: Record<string, {
+        exists: boolean;
+        sha?: string;
+    }>;
+    /** Modelli delle lingue aperte nell'editor, da scrivere nello stesso commit della pagina base. */
+    _translations?: Record<string, {
+        page: Record<string, unknown>;
+        body?: string;
+        _sha?: string;
+    }>;
 };
 export declare function usePages(): {
     pages: PageModel[] | null;

package/dist/app/lib/pages.js

@@ -31,7 +31,7 @@ export function usePages() {
              * andava riconciliato con `modelFromRaw` — un passaggio in meno, e una grafia in meno da
              * far combaciare. L'ordine per peso lo dà già il server. */
             const list = (d.pages ?? []).map((p) => ({
-                ...p.page, slug: p.slug, url: p.url, _orig: p.slug, _sha: p.sha,
+                ...p.page, slug: p.slug, url: p.url, _orig: p.slug, _sha: p.sha, translations: p.translations,
             }));
             base.current = new Map(list.map((p) => [p.slug, p]));
             setPages(list);
@@ -91,6 +91,22 @@ export function usePages() {
                 const s = r.shas?.[p.slug];
                 if (s)
                     p._sha = s;
+                /* Le sibling hanno lo stesso ciclo di vita del file base: se non si aggiorna il loro
+                   SHA qui, la modifica EN appena salvata parte già da una versione che non esiste più
+                   e il Worker la rifiuta come conflitto al click successivo. */
+                for (const code of site().languages?.available ?? []) {
+                    if (code === site().languages?.default)
+                        continue;
+                    const translationSha = r.shas?.[`${p.slug}.${code}`];
+                    if (!translationSha)
+                        continue;
+                    p.translations = {
+                        ...(p.translations ?? {}),
+                        [code]: { exists: true, sha: translationSha },
+                    };
+                    if (p._translations?.[code])
+                        p._translations[code]._sha = translationSha;
+                }
             });
             // Da qui in poi il file contiene ciò che hanno queste pagine: tornano tutte "non toccate".
             base.current = new Map(pages.map((p) => [p.slug, p]));

package/dist/app/routes/PageActions.js

@@ -14,7 +14,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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";
@@ -33,7 +32,7 @@ import { Icon } from "../ui/icons";
  * 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 ?? [];
+    const tipi = Object.entries(site().pages).map(([value, page]) => ({ value, label: page.label }));
     /* 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");

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

@@ -1,13 +1,20 @@
 import type { AssetFile } from "../../index.js";
 import type { PageModel } from "../lib/pages";
-export declare function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, }: {
+export declare function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, languages, activeLanguage, onLanguageChange, }: {
     page: PageModel;
     pages: PageModel[];
     onChange: (next: PageModel) => void;
     seoActive: boolean;
     onSeoToggle: () => void;
+    /** Assente nei siti monolingui: il controllo non viene nemmeno disegnato. */
+    languages?: {
+        default: string;
+        available: readonly string[];
+    };
+    activeLanguage?: string;
+    onLanguageChange?: (language: string) => void;
 }): import("react").JSX.Element;
-export declare function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, }: {
+export declare function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, activeLanguage, defaultLanguage, }: {
     page: PageModel;
     onChange: (next: PageModel) => void;
     /** Sostituisce la pagina con quella letta dal repo, senza contare come modifica dell'utente. */
@@ -20,4 +27,7 @@ export declare function PageEditor({ page, onChange, onRefresh, pristine, pickMe
     pickMediaFiles?: (o: {
         multiple: boolean;
     }) => Promise<AssetFile[] | null>;
+    /** La lingua è scelta nella testata della pagina, non è un'impostazione globale del pannello. */
+    activeLanguage?: string;
+    defaultLanguage?: string;
 }): import("react").JSX.Element;

package/dist/app/routes/PageEditor.js

@@ -14,7 +14,7 @@ import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordi
 import { CSS } from "@dnd-kit/utilities";
 import { ProseField, SchemaForm } from "../../form/index.js";
 import { api } from "../../index.js";
-import { site } from "../site.js";
+import { pageType } from "../site.js";
 import { uniqueSlug } from "../lib/slug";
 import { proseStats } from "../lib/text";
 import { Icon } from "../ui/icons";
@@ -22,7 +22,7 @@ import { GallerySectionsEditor } from "./GallerySectionsEditor";
 import { PortfolioWorksEditor } from "./PortfolioWorksEditor";
 import { AboutEditor } from "./AboutEditor";
 import { WorkshopEditionsEditor } from "./WorkshopEditionsEditor";
-export function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, }) {
+export function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, languages, activeLanguage, onLanguageChange, }) {
     const [titleOpen, setTitleOpen] = useState(false);
     const [visibilityOpen, setVisibilityOpen] = useState(false);
     const [title, setTitle] = useState(String(page.title ?? ""));
@@ -69,12 +69,13 @@ export function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, }) {
         setTitleOpen(false);
     };
     const online = page.published !== false;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pe-head-main", children: [_jsx("button", { type: "button", className: "pe-title", title: "Modifica nome e indirizzo", onClick: () => {
+    const translationActive = !!languages && activeLanguage !== languages.default;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pe-head-main", children: [_jsx("button", { type: "button", className: "pe-title", title: "Modifica nome e indirizzo", disabled: translationActive, onClick: () => {
                             setTitle(String(page.title ?? ""));
                             setSlug(page.slug);
                             setVisibilityOpen(false);
                             setTitleOpen(true);
-                        }, children: String(page.title ?? page.slug) }), _jsxs("button", { type: "button", className: "pe-seo-button" + (seoActive ? " is-active" : ""), "aria-pressed": seoActive, onClick: onSeoToggle, children: [_jsx(Icon.search, {}), "SEO"] }), _jsxs("div", { className: "pe-visibility", ref: visibilityRef, children: [_jsxs("button", { type: "button", className: "pe-status" + (online ? " is-online" : " is-offline"), "aria-haspopup": "menu", "aria-expanded": visibilityOpen, onClick: () => setVisibilityOpen((open) => !open), children: [_jsx("span", { className: "pe-status-dot" }), online ? "Online" : "Offline", _jsx("span", { className: "pe-chevron", "aria-hidden": "true", children: "\u2304" })] }), visibilityOpen && (_jsxs("div", { className: "pe-status-menu", role: "menu", children: [_jsx("span", { className: "pe-status-label", children: "Visibilit\u00E0 della pagina" }), _jsxs("button", { type: "button", className: online ? "is-selected" : "", onClick: () => {
+                        }, children: String(page.title ?? page.slug) }), languages && (_jsx("div", { className: "pe-language", "aria-label": "Lingua del contenuto", children: languages.available.map((language) => (_jsx("button", { type: "button", className: activeLanguage === language ? "is-active" : "", "aria-pressed": activeLanguage === language, onClick: () => onLanguageChange?.(language), children: language.toUpperCase() }, language))) })), _jsxs("button", { type: "button", className: "pe-seo-button" + (seoActive ? " is-active" : ""), "aria-pressed": seoActive, disabled: translationActive, onClick: onSeoToggle, children: [_jsx(Icon.search, {}), "SEO"] }), _jsxs("div", { className: "pe-visibility", ref: visibilityRef, children: [_jsxs("button", { type: "button", className: "pe-status" + (online ? " is-online" : " is-offline"), "aria-haspopup": "menu", "aria-expanded": visibilityOpen, disabled: translationActive, onClick: () => setVisibilityOpen((open) => !open), children: [_jsx("span", { className: "pe-status-dot" }), online ? "Online" : "Offline", _jsx("span", { className: "pe-chevron", "aria-hidden": "true", children: "\u2304" })] }), visibilityOpen && (_jsxs("div", { className: "pe-status-menu", role: "menu", children: [_jsx("span", { className: "pe-status-label", children: "Visibilit\u00E0 della pagina" }), _jsxs("button", { type: "button", className: online ? "is-selected" : "", onClick: () => {
                                             if (!online)
                                                 onChange({ ...page, published: true });
                                             setVisibilityOpen(false);
@@ -82,7 +83,7 @@ export function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, }) {
                                             if (online)
                                                 onChange({ ...page, published: false });
                                             setVisibilityOpen(false);
-                                        }, children: [_jsx("span", { className: "pe-radio", children: _jsx("span", {}) }), _jsxs("span", { children: [_jsx("strong", { children: "Offline" }), _jsx("small", { children: "La pagina non \u00E8 visibile sul sito." })] })] })] }))] }), _jsxs("label", { className: "pe-menu-toggle", children: [_jsx("input", { type: "checkbox", checked: !!page.inMenu, onChange: (event) => onChange({ ...page, inMenu: event.target.checked }) }), _jsx("span", { children: "Aggiungi al menu" })] })] }), titleOpen && (_jsx("div", { className: "pe-modal", role: "presentation", onMouseDown: (event) => {
+                                        }, children: [_jsx("span", { className: "pe-radio", children: _jsx("span", {}) }), _jsxs("span", { children: [_jsx("strong", { children: "Offline" }), _jsx("small", { children: "La pagina non \u00E8 visibile sul sito." })] })] })] }))] }), _jsxs("label", { className: "pe-menu-toggle", children: [_jsx("input", { type: "checkbox", checked: !!page.inMenu, disabled: translationActive, onChange: (event) => onChange({ ...page, inMenu: event.target.checked }) }), _jsx("span", { children: "Aggiungi al menu" })] })] }), titleOpen && (_jsx("div", { className: "pe-modal", role: "presentation", onMouseDown: (event) => {
                     if (event.target === event.currentTarget)
                         setTitleOpen(false);
                 }, children: _jsxs("div", { className: "pe-modal-card", role: "dialog", "aria-modal": "true", "aria-labelledby": "pe-title-dialog", children: [_jsxs("header", { children: [_jsx("h2", { id: "pe-title-dialog", children: "Modifica pagina" }), _jsx("button", { type: "button", onClick: () => setTitleOpen(false), "aria-label": "Chiudi", children: "\u00D7" })] }), _jsxs("div", { className: "pe-modal-fields", children: [_jsxs("label", { children: [_jsx("span", { children: "Nome pagina" }), _jsx("input", { autoFocus: true, value: title, onChange: (event) => setTitle(event.target.value), onKeyDown: (event) => {
@@ -161,15 +162,51 @@ function GalleryEditor({ value, onChange, pickMediaFiles, }) {
                                     ? { ...candidate, hidden: candidate.hidden ? undefined : true }
                                     : candidate)), onRemove: () => onChange(list.filter((_, itemIndex) => itemIndex !== index)) }, item.src))) }) }), _jsx(DragOverlay, { children: activeItem && (_jsx("div", { className: "pe-photo-overlay", children: _jsx("img", { src: activeItem.src, alt: "" }) })) })] }))] }));
 }
-export function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, }) {
+export function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, activeLanguage, defaultLanguage, }) {
     const [bodyState, setBodyState] = useState("idle");
-    const showBody = site().hasBody(page.type);
+    const translationActive = !!defaultLanguage && !!activeLanguage && activeLanguage !== defaultLanguage;
+    const translationKey = translationActive ? `${page.slug}:${activeLanguage}` : "";
+    /* Aprire una lingua non è una modifica: finché non si cambia davvero un campo, il modello
+       composto resta qui e il pulsante Salva non si accende. */
+    const [openedTranslations, setOpenedTranslations] = useState({});
+    const translation = translationActive
+        ? page._translations?.[activeLanguage] ?? openedTranslations[translationKey]
+        : undefined;
+    const [translationState, setTranslationState] = useState("idle");
+    const definition = pageType(page.type);
+    const showBody = definition?.hasBody === true;
     const isGallery = page.type === "gallery";
     const isPortfolio = page.type === "portfolio";
+    /* Il Worker restituisce già il modello composto: l'editor può mostrarlo come una pagina
+       ordinaria. Aprirlo resta una lettura; il primo cambio lo sposta in `_translations`,
+       lasciando immutata la pagina predefinita e rendendo esplicita la futura scrittura. */
+    useEffect(() => {
+        if (!translationActive || translation || !activeLanguage)
+            return;
+        let alive = true;
+        setTranslationState("loading");
+        api.pageBody(page.slug, activeLanguage)
+            .then((data) => {
+            if (!alive)
+                return;
+            setTranslationState("idle");
+            setOpenedTranslations((current) => ({
+                ...current,
+                [translationKey]: {
+                    page: data.page,
+                    ...(showBody ? { body: data.body } : {}),
+                    _sha: page.translations?.[activeLanguage]?.sha,
+                },
+            }));
+        })
+            .catch(() => { if (alive)
+            setTranslationState("error"); });
+        return () => { alive = false; };
+    }, [translationActive, translation, activeLanguage, page.slug, page.translations, showBody, translationKey]);
     /* APRENDO UNA PAGINA SI RILEGGE DAL REPO, non dal manifest pubblicato. */
     const [loadedFor, setLoadedFor] = useState(null);
     useEffect(() => {
-        if (loadedFor === page.slug || !pristine)
+        if (translationActive || loadedFor === page.slug || !pristine)
             return;
         let alive = true;
         if (showBody)
@@ -195,7 +232,36 @@ export function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pic
             }
         });
         return () => { alive = false; };
-    }, [page.slug, showBody, pristine, loadedFor]);
+    }, [page.slug, showBody, pristine, loadedFor, translationActive]);
+    if (translationActive && translationState === "loading" && !translation) {
+        return _jsx("p", { className: "pane-empty ak-hint", children: "Carico la traduzione\u2026" });
+    }
+    if (translationActive && translationState === "error" && !translation) {
+        return _jsx("p", { className: "pe-load-error", children: "Non sono riuscito a caricare la traduzione. Riprova o torna alla lingua predefinita." });
+    }
+    const shownPage = translationActive && translation
+        ? { ...page, ...translation.page, ...(showBody ? { body: translation.body ?? "" } : {}) }
+        : page;
+    const changeShown = (next) => {
+        if (!translationActive || !activeLanguage) {
+            onChange(next);
+            return;
+        }
+        const { _translations: _ignoredTranslations, translations: _ignoredPresence, _orig: _ignoredOrig, _sha: _ignoredSha, url: _ignoredUrl, body, ...model } = next;
+        const update = {
+            page: model,
+            ...(showBody ? { body: typeof body === "string" ? body : "" } : {}),
+            _sha: translation?._sha ?? page.translations?.[activeLanguage]?.sha,
+        };
+        setOpenedTranslations((current) => ({ ...current, [translationKey]: update }));
+        onChange({
+            ...page,
+            _translations: {
+                ...(page._translations ?? {}),
+                [activeLanguage]: update,
+            },
+        });
+    };
     const commonOmissions = useMemo(() => [
         "title", "published", "inMenu",
         "seoTitle", "seoDescription", "ogTitle", "ogDescription", "ogImage",
@@ -205,29 +271,31 @@ export function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pic
        «Ritratto» e «Riconoscimenti» — campi di altri tipi di pagina, che compaiono perché il
        form disegna tutto ciò che lo schema dichiara e non sa quale tipo si stia modificando.
        Titolo, visibilità e SEO restano dove sono già: la barra in alto e la scheda SEO. */
-    if (isPortfolio) {
+    if (isPortfolio && !translationActive) {
         return (_jsxs("div", { className: "ed ed-portfolio", children: [bodyState === "error" && (_jsx("p", { className: "pe-load-error", children: "Non sono riuscito ad aggiornare i dati della pagina dal sito." })), _jsx(PortfolioWorksEditor, { value: page.works, onChange: (works) => onChange({ ...page, works }), pickMediaFiles: pickMediaFiles })] }));
     }
     /* Stessa ragione delle due qui sopra: la pagina "chi sono" ha un'anatomia sua — biografia,
        ritratto, riconoscimenti — e il form generico ci metteva accanto «Lavori», «Edizioni» e
        «Sezioni», cioè i campi delle altre tipologie. Il corpo markdown è la biografia, quindi la
        textarea in fondo non serve più: sta dentro l'editor, in cima, dov'è il suo posto. */
-    if (page.type === "about") {
+    if (page.type === "about" && !translationActive) {
         return (_jsx("div", { className: "ed ed-about", children: _jsx(AboutEditor, { page: page, onChange: onChange, bodyState: bodyState, pickMediaFiles: pickMediaFiles }) }));
     }
     /* La pagina workshop: l'introduzione e le edizioni, nell'ordine in cui escono sul sito —
        l'introduzione apre la colonna dei testi, sopra la prima locandina (WORKSHOP.md). Il corpo
        markdown è quell'introduzione, quindi non c'è nessuna textarea in fondo: sta in cima, dove
        la si legge. */
-    if (page.type === "workshop") {
+    if (page.type === "workshop" && !translationActive) {
         return (_jsxs("div", { className: "ed ed-workshop", children: [_jsxs("section", { className: "wsh-intro", "aria-label": "Introduzione", children: [_jsxs("header", { className: "pw-head", children: [_jsxs("div", { children: [_jsx("h3", { children: "Introduzione" }), _jsx("p", { children: "Il testo che apre la pagina, sopra la prima edizione." })] }), _jsx("span", { className: "ed-count", children: bodyState === "loading" ? "Carico…" : proseStats(String(page.body ?? "")) })] }), bodyState === "error" && (_jsx("p", { className: "ak-error", children: "Non sono riuscito a caricare il testo dal sito. Ricarica prima di modificarlo." })), _jsx(ProseField, { className: "pw-field ed-prose", value: typeof page.body === "string" ? page.body : "", placeholder: "Racconta i workshop.\nVai a capo per iniziare un paragrafo nuovo.", onChange: (body) => onChange({ ...page, body }) })] }), _jsx(WorkshopEditionsEditor, { value: page.workshops, onChange: (workshops) => onChange({ ...page, workshops }), pickMediaFiles: pickMediaFiles })] }));
     }
-    if (isGallery) {
+    if (isGallery && !translationActive) {
         /* Le foto si modificano DOVE stanno: dentro il loro blocco, che è anche dove vivono nei dati
            (`sections[].images`) e dove la griglia esce sul sito. Non c'è più un pannello staccato in
            fondo — c'era finché le foto stavano in un campo della pagina, e insieme a lui è sparito
            il caso in cui la stessa griglia si vedeva due volte. */
         return (_jsxs("div", { className: "ed ed-gallery", children: [bodyState === "error" && (_jsx("p", { className: "pe-load-error", children: "Non sono riuscito ad aggiornare i dati della pagina dal sito." })), _jsx(GallerySectionsEditor, { value: page.sections, onChange: (sections) => onChange({ ...page, sections }), renderGallery: (images, onImages) => (_jsx(GalleryEditor, { value: images, onChange: onImages, pickMediaFiles: pickMediaFiles })), pickMediaFiles: pickMediaFiles })] }));
     }
-    return (_jsxs("div", { className: "ed", children: [_jsx(SchemaForm, { shape: site().page, value: page, omit: commonOmissions, onChange: (next) => onChange({ ...next, slug: page.slug }), pickMedia: pickMedia, pickMediaFiles: pickMediaFiles }), showBody && (_jsxs("fieldset", { className: "ak-group", children: [_jsx("legend", { className: "ak-legend", children: "testo della pagina" }), bodyState === "loading" && _jsx("p", { className: "ak-hint", children: "Carico\u2026" }), bodyState === "error" && _jsx("p", { className: "ak-error", children: "Non sono riuscito a caricare il testo." }), _jsx("textarea", { className: "ak-input ak-textarea", rows: 12, value: typeof page.body === "string" ? page.body : "", onChange: (event) => onChange({ ...page, body: event.target.value }) })] }))] }));
+    return (_jsxs("div", { className: "ed", children: [translationActive && (_jsx("p", { className: "pe-translation-note", children: page.translations?.[activeLanguage]?.exists || page._translations?.[activeLanguage]
+                    ? `Stai modificando ${activeLanguage.toUpperCase()}. I campi non traducibili restano visibili e vengono copiati dalla lingua predefinita al salvataggio.`
+                    : `${activeLanguage.toUpperCase()} è uguale all’italiano finché non modifichi e salvi una traduzione.` })), _jsx(SchemaForm, { shape: definition?.shape ?? {}, value: shownPage, omit: commonOmissions, onChange: (next) => changeShown({ ...next, slug: page.slug }), pickMedia: pickMedia, pickMediaFiles: pickMediaFiles, translationReadOnly: translationActive }), showBody && (_jsxs("fieldset", { className: "ak-group", children: [_jsx("legend", { className: "ak-legend", children: "testo della pagina" }), bodyState === "loading" && _jsx("p", { className: "ak-hint", children: "Carico\u2026" }), bodyState === "error" && _jsx("p", { className: "ak-error", children: "Non sono riuscito a caricare il testo." }), _jsx("textarea", { className: "ak-input ak-textarea", rows: 12, value: typeof shownPage.body === "string" ? shownPage.body : "", onChange: (event) => changeShown({ ...shownPage, body: event.target.value }) })] }))] }));
 }

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

@@ -1,7 +1,7 @@
 import type { AssetFile } from "../../index.js";
 import type { PageModel } from "../lib/pages";
 import type { SiteSettings } from "../lib/settings";
-export declare function PageSeoEditor({ page, onChange, onRefresh, pristine, pickMediaFiles, siteSettings, }: {
+export declare function PageSeoEditor({ page, onChange, onRefresh, pristine, pickMediaFiles, siteSettings, readOnly, }: {
     page: PageModel;
     onChange: (next: PageModel) => void;
     onRefresh: (next: PageModel) => void;
@@ -10,4 +10,7 @@ export declare function PageSeoEditor({ page, onChange, onRefresh, pristine, pic
         multiple: boolean;
     }) => Promise<AssetFile[] | null>;
     siteSettings?: SiteSettings | null;
+    /** La vista SEO non carica un modello tradotto: in una lingua secondaria non deve mai
+        scrivere per sbaglio i metadati della pagina predefinita. */
+    readOnly?: boolean;
 }): import("react").JSX.Element;

package/dist/app/routes/PageSeoEditor.js

@@ -48,7 +48,7 @@ function FieldHelp({ children, }) {
 function Count({ value, recommended, max }) {
     return (_jsxs("span", { className: "seo-count" + (value.length > recommended ? " is-long" : ""), children: [value.length, "/", max, " caratteri"] }));
 }
-export function PageSeoEditor({ page, onChange, onRefresh, pristine, pickMediaFiles, siteSettings, }) {
+export function PageSeoEditor({ page, onChange, onRefresh, pristine, pickMediaFiles, siteSettings, readOnly = false, }) {
     const [loadedFor, setLoadedFor] = useState(null);
     const [loadError, setLoadError] = useState(false);
     /* Arrivando direttamente a /seo la pagina normale non viene montata, quindi la lettura dal
@@ -98,5 +98,5 @@ export function PageSeoEditor({ page, onChange, onRefresh, pristine, pickMediaFi
         if (selected?.[0])
             onChange({ ...page, ogImage: selected[0].url });
     };
-    return (_jsxs("section", { className: "seo-editor", children: [_jsxs("header", { className: "seo-intro", children: [_jsxs("div", { children: [_jsx("span", { className: "seo-kicker", children: "Impostazioni della pagina" }), _jsx("h2", { children: "Ottimizzazione SEO" }), _jsx("p", { children: "Controlla come questa pagina appare nei motori di ricerca e quando viene condivisa." })] }), _jsxs("span", { className: "seo-complete" + (complete ? " is-complete" : ""), children: [_jsx("span", { children: complete ? "✓" : "!" }), complete ? "SEO completa" : "Da completare"] })] }), loadError && (_jsx("p", { className: "pe-load-error", children: "Non sono riuscito ad aggiornare i dati SEO dal sito." })), _jsxs("section", { className: "seo-section", children: [_jsxs("div", { className: "seo-section-heading", children: [_jsx("span", { children: "Motori di ricerca" }), _jsxs("div", { children: [_jsx("h3", { children: "Anteprima del risultato" }), _jsx("p", { children: "Il contenuto si aggiorna mentre scrivi." })] })] }), _jsxs("div", { className: "seo-row seo-preview-row", children: [_jsx("span", { className: "seo-row-label", children: "Anteprima" }), _jsxs("div", { className: "seo-search-preview", "aria-label": "Anteprima del risultato di ricerca", children: [_jsx("span", { className: "seo-search-site", children: globalTitle }), _jsx("span", { className: "seo-search-url", children: pageUrl }), _jsx("strong", { children: searchTitle }), _jsx("p", { children: searchDescription })] }), _jsx(FieldHelp, { children: "\u00C8 una simulazione del risultato. Il motore di ricerca pu\u00F2 adattarne il testo." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Titolo SEO" }), _jsx("input", { value: seoTitle, maxLength: 120, placeholder: `${text(page.title)} — ${globalTitle}`, onChange: (event) => onChange({ ...page, seoTitle: event.target.value }) }), _jsx(Count, { value: seoTitle, recommended: 60, max: 120 })] }), _jsx(FieldHelp, { children: "Un titolo descrittivo e unico. Per una lettura completa nei risultati \u00E8 preferibile restare entro circa 60 caratteri." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Descrizione SEO" }), _jsx("textarea", { rows: 5, value: seoDescription, maxLength: 255, placeholder: "Descrivi il contenuto della pagina e il valore che offre.", onChange: (event) => onChange({ ...page, seoDescription: event.target.value }) }), _jsx(Count, { value: seoDescription, recommended: 160, max: 255 })] }), _jsx(FieldHelp, { children: "Riassumi la pagina con parole naturali e pertinenti. I primi 160 caratteri sono quelli che hanno pi\u00F9 probabilit\u00E0 di essere mostrati per intero." })] })] }), _jsxs("section", { className: "seo-section", children: [_jsxs("div", { className: "seo-section-heading", children: [_jsx("span", { children: "Open Graph" }), _jsxs("div", { children: [_jsx("h3", { children: "Anteprima della condivisione" }), _jsx("p", { children: "Usata da social, chat e applicazioni quando viene condiviso il link." })] })] }), _jsxs("div", { className: "seo-row seo-preview-row", children: [_jsx("span", { className: "seo-row-label", children: "Anteprima" }), _jsxs("article", { className: "seo-og-preview", "aria-label": "Anteprima Open Graph", children: [_jsx("div", { className: "seo-og-image", children: socialImage ? (_jsx("img", { src: socialImage, alt: "" })) : (_jsxs("span", { children: [_jsx(Icon.media, {}), " Nessuna immagine"] })) }), _jsxs("div", { className: "seo-og-copy", children: [_jsx("span", { children: site().publicBase.replace(/^https?:\/\//, "").toUpperCase() }), _jsx("strong", { children: socialTitle }), _jsx("p", { children: socialDescription })] })] }), _jsx(FieldHelp, { children: "L\u2019anteprima usa i campi Open Graph; quelli vuoti ereditano automaticamente i valori SEO." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Titolo Open Graph" }), _jsx("input", { value: ogTitle, maxLength: 120, placeholder: searchTitle, onChange: (event) => onChange({ ...page, ogTitle: event.target.value }) }), _jsx(Count, { value: ogTitle, recommended: 70, max: 120 })] }), _jsx(FieldHelp, { children: "Lascia vuoto per usare il titolo SEO. Puoi renderlo pi\u00F9 editoriale per la condivisione." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Descrizione Open Graph" }), _jsx("textarea", { rows: 4, value: ogDescription, maxLength: 300, placeholder: searchDescription, onChange: (event) => onChange({ ...page, ogDescription: event.target.value }) }), _jsx(Count, { value: ogDescription, recommended: 200, max: 300 })] }), _jsx(FieldHelp, { children: "Lascia vuoto per usare la descrizione SEO. Mantienila breve per evitare tagli nelle card." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("div", { className: "seo-field", children: [_jsx("span", { children: "Immagine Open Graph" }), _jsxs("div", { className: "seo-image-picker", children: [socialImage ? _jsx("img", { src: socialImage, alt: "" }) : _jsx("div", { children: _jsx(Icon.media, {}) }), _jsxs("div", { children: [_jsx("button", { type: "button", className: "ak-btn", onClick: () => void chooseImage(), children: explicitImage ? "Cambia immagine" : "Scegli immagine" }), explicitImage && (_jsx("button", { type: "button", className: "ak-btn ak-btn-quiet", onClick: () => onChange({ ...page, ogImage: "" }), children: "Usa automatica" })), _jsx("small", { children: explicitImage ? "Immagine personalizzata" : socialImage ? "Prima immagine pubblica della pagina" : "Nessun ripiego disponibile" })] })] })] }), _jsx(FieldHelp, { children: "Una foto orizzontale funziona meglio nelle condivisioni. Se non ne scegli una, viene usata la prima immagine pubblica della pagina." })] })] })] }));
+    return (_jsxs("section", { className: "seo-editor", children: [_jsxs("header", { className: "seo-intro", children: [_jsxs("div", { children: [_jsx("span", { className: "seo-kicker", children: "Impostazioni della pagina" }), _jsx("h2", { children: "Ottimizzazione SEO" }), _jsx("p", { children: "Controlla come questa pagina appare nei motori di ricerca e quando viene condivisa." })] }), _jsxs("span", { className: "seo-complete" + (complete ? " is-complete" : ""), children: [_jsx("span", { children: complete ? "✓" : "!" }), complete ? "SEO completa" : "Da completare"] })] }), loadError && (_jsx("p", { className: "pe-load-error", children: "Non sono riuscito ad aggiornare i dati SEO dal sito." })), readOnly && (_jsx("p", { className: "pe-translation-note", children: "I metadati SEO di questa lingua sono ereditati. Torna alla lingua predefinita per modificarli." })), _jsxs("section", { className: "seo-section", children: [_jsxs("div", { className: "seo-section-heading", children: [_jsx("span", { children: "Motori di ricerca" }), _jsxs("div", { children: [_jsx("h3", { children: "Anteprima del risultato" }), _jsx("p", { children: "Il contenuto si aggiorna mentre scrivi." })] })] }), _jsxs("div", { className: "seo-row seo-preview-row", children: [_jsx("span", { className: "seo-row-label", children: "Anteprima" }), _jsxs("div", { className: "seo-search-preview", "aria-label": "Anteprima del risultato di ricerca", children: [_jsx("span", { className: "seo-search-site", children: globalTitle }), _jsx("span", { className: "seo-search-url", children: pageUrl }), _jsx("strong", { children: searchTitle }), _jsx("p", { children: searchDescription })] }), _jsx(FieldHelp, { children: "\u00C8 una simulazione del risultato. Il motore di ricerca pu\u00F2 adattarne il testo." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Titolo SEO" }), _jsx("input", { value: seoTitle, maxLength: 120, disabled: readOnly, placeholder: `${text(page.title)} — ${globalTitle}`, onChange: (event) => onChange({ ...page, seoTitle: event.target.value }) }), _jsx(Count, { value: seoTitle, recommended: 60, max: 120 })] }), _jsx(FieldHelp, { children: "Un titolo descrittivo e unico. Per una lettura completa nei risultati \u00E8 preferibile restare entro circa 60 caratteri." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Descrizione SEO" }), _jsx("textarea", { rows: 5, value: seoDescription, maxLength: 255, disabled: readOnly, placeholder: "Descrivi il contenuto della pagina e il valore che offre.", onChange: (event) => onChange({ ...page, seoDescription: event.target.value }) }), _jsx(Count, { value: seoDescription, recommended: 160, max: 255 })] }), _jsx(FieldHelp, { children: "Riassumi la pagina con parole naturali e pertinenti. I primi 160 caratteri sono quelli che hanno pi\u00F9 probabilit\u00E0 di essere mostrati per intero." })] })] }), _jsxs("section", { className: "seo-section", children: [_jsxs("div", { className: "seo-section-heading", children: [_jsx("span", { children: "Open Graph" }), _jsxs("div", { children: [_jsx("h3", { children: "Anteprima della condivisione" }), _jsx("p", { children: "Usata da social, chat e applicazioni quando viene condiviso il link." })] })] }), _jsxs("div", { className: "seo-row seo-preview-row", children: [_jsx("span", { className: "seo-row-label", children: "Anteprima" }), _jsxs("article", { className: "seo-og-preview", "aria-label": "Anteprima Open Graph", children: [_jsx("div", { className: "seo-og-image", children: socialImage ? (_jsx("img", { src: socialImage, alt: "" })) : (_jsxs("span", { children: [_jsx(Icon.media, {}), " Nessuna immagine"] })) }), _jsxs("div", { className: "seo-og-copy", children: [_jsx("span", { children: site().publicBase.replace(/^https?:\/\//, "").toUpperCase() }), _jsx("strong", { children: socialTitle }), _jsx("p", { children: socialDescription })] })] }), _jsx(FieldHelp, { children: "L\u2019anteprima usa i campi Open Graph; quelli vuoti ereditano automaticamente i valori SEO." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Titolo Open Graph" }), _jsx("input", { value: ogTitle, maxLength: 120, disabled: readOnly, placeholder: searchTitle, onChange: (event) => onChange({ ...page, ogTitle: event.target.value }) }), _jsx(Count, { value: ogTitle, recommended: 70, max: 120 })] }), _jsx(FieldHelp, { children: "Lascia vuoto per usare il titolo SEO. Puoi renderlo pi\u00F9 editoriale per la condivisione." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("label", { className: "seo-field", children: [_jsx("span", { children: "Descrizione Open Graph" }), _jsx("textarea", { rows: 4, value: ogDescription, maxLength: 300, disabled: readOnly, placeholder: searchDescription, onChange: (event) => onChange({ ...page, ogDescription: event.target.value }) }), _jsx(Count, { value: ogDescription, recommended: 200, max: 300 })] }), _jsx(FieldHelp, { children: "Lascia vuoto per usare la descrizione SEO. Mantienila breve per evitare tagli nelle card." })] }), _jsxs("div", { className: "seo-row", children: [_jsxs("div", { className: "seo-field", children: [_jsx("span", { children: "Immagine Open Graph" }), _jsxs("div", { className: "seo-image-picker", children: [socialImage ? _jsx("img", { src: socialImage, alt: "" }) : _jsx("div", { children: _jsx(Icon.media, {}) }), _jsxs("div", { children: [_jsx("button", { type: "button", className: "ak-btn", disabled: readOnly, onClick: () => void chooseImage(), children: explicitImage ? "Cambia immagine" : "Scegli immagine" }), explicitImage && (_jsx("button", { type: "button", className: "ak-btn ak-btn-quiet", disabled: readOnly, onClick: () => onChange({ ...page, ogImage: "" }), children: "Usa automatica" })), _jsx("small", { children: explicitImage ? "Immagine personalizzata" : socialImage ? "Prima immagine pubblica della pagina" : "Nessun ripiego disponibile" })] })] })] }), _jsx(FieldHelp, { children: "Una foto orizzontale funziona meglio nelle condivisioni. Se non ne scegli una, viene usata la prima immagine pubblica della pagina." })] })] })] }));
 }

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

@@ -1,5 +1,5 @@
 import type { PageModel } from "../lib/pages";
-export declare function PagesList({ pages, current, onEdit, onChange, onRenamed, }: {
+export declare function PagesList({ pages, current, onEdit, onChange, onRenamed, languages, }: {
     pages: PageModel[];
     current?: string;
     onEdit: (slug: string) => void;
@@ -7,4 +7,8 @@ export declare function PagesList({ pages, current, onEdit, onChange, onRenamed,
     /** Una rinomina cambia l'indirizzo: se la pagina è quella aperta nell'editor, la rotta punta
      *  a uno slug che non esiste più e l'editor resterebbe vuoto. Lo sa solo chi tiene la rotta. */
     onRenamed?: (from: string, to: string) => void;
+    languages?: {
+        default: string;
+        available: readonly string[];
+    };
 }): import("react").JSX.Element;

package/dist/app/routes/PagesList.js

@@ -20,12 +20,18 @@ import { Icon } from "../ui/icons";
 const ICONS = {
     gallery: Icon.gallery, page: Icon.doc, contact: Icon.mail,
 };
-function Row({ p, pages, current, onEdit, onChange, onRemove, onDuplicate }) {
+function Row({ p, pages, current, onEdit, onChange, onRemove, onDuplicate, languages }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: p.slug });
     const TypeIcon = ICONS[String(p.type)] ?? Icon.doc;
-    return (_jsxs("li", { ref: setNodeRef, className: "pg-row" + (isDragging ? " is-dragging" : "") + (p.slug === current ? " is-on" : ""), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx("button", { className: "pg-handle", ...attributes, ...listeners, title: "Trascina per riordinare", children: _jsx(Icon.grip, {}) }), _jsxs("button", { className: "pg-open", onClick: () => onEdit(p.slug), children: [_jsx("span", { className: "pg-icon", children: _jsx(TypeIcon, {}) }), _jsx("span", { className: "pg-title", children: String(p.title ?? p.slug) }), p.published === false && (_jsx("span", { className: "pg-off", title: "nascosta: non va online", children: _jsx(Icon.eyeOff, {}) }))] }), _jsx(RowMenu, { page: p, pages: pages, onChange: (next) => onChange(p.slug, next), onRemove: onRemove, onDuplicate: onDuplicate })] }));
+    return (_jsxs("li", { ref: setNodeRef, className: "pg-row" + (isDragging ? " is-dragging" : "") + (p.slug === current ? " is-on" : ""), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx("button", { className: "pg-handle", ...attributes, ...listeners, title: "Trascina per riordinare", children: _jsx(Icon.grip, {}) }), _jsxs("button", { className: "pg-open", onClick: () => onEdit(p.slug), children: [_jsx("span", { className: "pg-icon", children: _jsx(TypeIcon, {}) }), _jsx("span", { className: "pg-title", children: String(p.title ?? p.slug) }), languages?.available.filter((language) => language !== languages.default).map((language) => {
+                        const saved = p.translations?.[language]?.exists;
+                        const draft = !!p._translations?.[language];
+                        return (_jsx("span", { className: "pg-language" + (saved ? " is-saved" : draft ? " is-draft" : " is-inherited"), title: saved ? `${language.toUpperCase()} tradotta` : draft
+                                ? `${language.toUpperCase()} modificata: salva per creare la traduzione`
+                                : `${language.toUpperCase()} uguale alla lingua predefinita`, children: language.toUpperCase() }, language));
+                    }), p.published === false && (_jsx("span", { className: "pg-off", title: "nascosta: non va online", children: _jsx(Icon.eyeOff, {}) }))] }), _jsx(RowMenu, { page: p, pages: pages, onChange: (next) => onChange(p.slug, next), onRemove: onRemove, onDuplicate: onDuplicate })] }));
 }
-function Group({ title, items, all, current, onEdit, onReorder, onChange, onRemove, onDuplicate, }) {
+function Group({ title, items, all, current, onEdit, onReorder, onChange, onRemove, onDuplicate, languages, }) {
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const onDragEnd = (e) => {
         const { active, over } = e;
@@ -33,9 +39,9 @@ function Group({ title, items, all, current, onEdit, onReorder, onChange, onRemo
             return;
         onReorder(items.findIndex((p) => p.slug === active.id), items.findIndex((p) => p.slug === over.id));
     };
-    return (_jsxs("section", { className: "pg-group", children: [_jsx("h2", { className: "pg-group-title", children: title }), items.length === 0 && _jsx("p", { className: "pg-empty", children: "nessuna" }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, children: _jsx(SortableContext, { items: items.map((p) => p.slug), strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "pg-list", children: items.map((p) => (_jsx(Row, { p: p, pages: all, current: current, onEdit: onEdit, onChange: onChange, onRemove: () => onRemove(p.slug), onDuplicate: () => onDuplicate(p.slug) }, p.slug))) }) }) })] }));
+    return (_jsxs("section", { className: "pg-group", children: [_jsx("h2", { className: "pg-group-title", children: title }), items.length === 0 && _jsx("p", { className: "pg-empty", children: "nessuna" }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, children: _jsx(SortableContext, { items: items.map((p) => p.slug), strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "pg-list", children: items.map((p) => (_jsx(Row, { p: p, pages: all, current: current, onEdit: onEdit, onChange: onChange, languages: languages, onRemove: () => onRemove(p.slug), onDuplicate: () => onDuplicate(p.slug) }, p.slug))) }) }) })] }));
 }
-export function PagesList({ pages, current, onEdit, onChange, onRenamed, }) {
+export function PagesList({ pages, current, onEdit, onChange, onRenamed, languages, }) {
     const inMenu = pages.filter((p) => !!p.inMenu);
     const notInMenu = pages.filter((p) => !p.inMenu);
     const reorder = (group, from, to) => {
@@ -71,6 +77,6 @@ export function PagesList({ pages, current, onEdit, onChange, onRenamed, }) {
         const i = pages.indexOf(src);
         onChange([...pages.slice(0, i + 1), copia, ...pages.slice(i + 1)]);
     };
-    const shared = { all: pages, current, onEdit, onChange: replace, onRemove: remove, onDuplicate: duplicate };
+    const shared = { all: pages, current, onEdit, onChange: replace, onRemove: remove, onDuplicate: duplicate, languages };
     return (_jsxs("div", { className: "pg", children: [_jsx(Group, { title: "Nel menu", items: inMenu, ...shared, onReorder: (f, t) => reorder(inMenu, f, t) }), _jsx(Group, { title: "Fuori dal menu", items: notInMenu, ...shared, onReorder: (f, t) => reorder(notInMenu, f, t) })] }));
 }