@cardinali-studio/adminkit 2.2.21 → 2.2.23

package/dist/api.d.ts

@@ -6,6 +6,12 @@ export declare class ApiError extends Error {
     details: unknown;
     constructor(message: string, code: string, status: number, details?: unknown);
 }
+export interface AssetAltText {
+    /** Vero significa che il sito deve emettere deliberatamente alt="". */
+    decorative: boolean;
+    /** Chiave "default" nei siti monolingui, codice lingua nei siti multilingui. */
+    texts: Record<string, string>;
+}
 export interface AssetFile {
     key: string;
     name: string;
@@ -14,9 +20,13 @@ export interface AssetFile {
     uploaded?: string;
     capturedAt?: string;
     type?: string;
+    alt?: AssetAltText;
     w?: number | null;
     h?: number | null;
 }
+/** Risolve il testo Media da copiare nel singolo utilizzo editoriale. Il campo della pagina
+ * resta un override: cambiare in seguito il default del file non riscrive contenuti esistenti. */
+export declare function assetAltText(file: Pick<AssetFile, "alt">, locale?: string): string;
 export interface AssetFolder {
     prefix: string;
     name: string;
@@ -57,11 +67,15 @@ export interface RepoPage {
         sha?: string;
     }>;
 }
-export type ContentPublishTarget = {
+export type ContentDocumentPublishTarget = {
     documentId: string;
     expectedDraftRevisionId: string | null;
     includeSiteAccess?: boolean;
 };
+export type ContentMediaPublishTarget = {
+    mediaOperationId: string;
+};
+export type ContentPublishTarget = ContentDocumentPublishTarget | ContentMediaPublishTarget;
 export type ContentPublishDocument = {
     documentId: string;
     kind: string;
@@ -203,6 +217,17 @@ export declare const api: {
         dependentDocuments?: number;
         remainingAhead?: number;
     }>;
+    contentPublishMedia: (mediaOperationId: string) => Promise<{
+        ok: true;
+        published: boolean;
+        releaseId?: string;
+        attemptId?: string;
+        message?: string;
+        verified?: boolean;
+        observedReleaseId?: string | null;
+        documents?: number;
+        remainingAhead?: number;
+    }>;
     publishState: () => Promise<{
         ok: true;
         configured: boolean;
@@ -257,6 +282,9 @@ export declare const api: {
             error: string;
         }[];
         warning?: string;
+        operationId?: string;
+        requiresPublication?: boolean;
+        completed?: number;
     }>;
     /** Riscrive i riferimenti, poi elimina gli originali le cui copie sono state verificate. */
     moveApplyRefs: (applyRefs: Record<string, string>) => Promise<{
@@ -274,7 +302,12 @@ export declare const api: {
         ok: true;
         operations: MediaOperationStatus[];
     }>;
-    resumeMediaOperation: (operationId: string, releaseId: string) => Promise<{
+    saveMediaAlt: (key: string, alt: AssetAltText) => Promise<{
+        ok: true;
+        key: string;
+        alt: AssetAltText;
+    }>;
+    resumeMediaOperation: (operationId: string, releaseId: string | null) => Promise<{
         ok: true;
         completed: number;
         failed: number;
@@ -313,6 +346,9 @@ export declare const api: {
         d1?: boolean;
         deferred?: boolean;
         operationId?: string;
+        requiresPublication?: boolean;
+        completed?: number;
+        failed?: number;
     }>;
     requests: () => Promise<{
         ok: true;

package/dist/api.js

@@ -34,6 +34,13 @@ const post = (url, data) => call(url, {
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(data),
 });
+/** Risolve il testo Media da copiare nel singolo utilizzo editoriale. Il campo della pagina
+ * resta un override: cambiare in seguito il default del file non riscrive contenuti esistenti. */
+export function assetAltText(file, locale = "default") {
+    if (file.alt?.decorative)
+        return "";
+    return file.alt?.texts[locale] ?? file.alt?.texts.default ?? "";
+}
 /** Builds the only D1 Save wire shape. The Worker recomputes these hashes too,
  * so retries are deterministic rather than client-trusted. */
 export async function contentSaveRequest(command) {
@@ -67,6 +74,7 @@ export const api = {
      * materialize, while the panel only displays the pending immutable inputs. */
     contentPublishState: () => call("/admin/api/content/publish"),
     contentPublish: (target) => post("/admin/api/content/publish", target),
+    contentPublishMedia: (mediaOperationId) => post("/admin/api/content/publish", { mediaOperationId }),
     // ---- pubblicazione
     /* Salvare scrive sulla bozza e non fa partire nessuna build; è questo che manda online. Due
      * gesti separati, quindi due chiamate: una chiede quanto c'è di non pubblicato, l'altra lo
@@ -99,6 +107,11 @@ export const api = {
     /** Riscrive i riferimenti, poi elimina gli originali le cui copie sono state verificate. */
     moveApplyRefs: (applyRefs) => post("/admin/api/assets/move", { applyRefs }),
     mediaOperations: () => call("/admin/api/assets/media"),
+    saveMediaAlt: (key, alt) => call("/admin/api/assets/media", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ key, alt }),
+    }),
     resumeMediaOperation: (operationId, releaseId) => post("/admin/api/assets/media", { action: "resume", operationId, releaseId }),
     cancelMediaOperation: (operationId) => post("/admin/api/assets/media", { action: "cancel", operationId }),
     usage: (target) => post("/admin/api/assets/usage", target),

package/dist/app/app.css

@@ -707,6 +707,14 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
   overflow: hidden; padding-inline: 2px; color: #8a8a91; text-align: center;
   font: 400 11px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap;
 }
+.pe-photo-alt {
+  align-self: center; display: inline-flex; align-items: center; gap: 5px; min-height: 24px;
+  padding: 3px 8px; border: 0; border-radius: 999px; background: var(--ak-inset);
+  color: var(--ak-ink-quiet); cursor: pointer; font: 500 10px/1 var(--ak-font);
+}
+.pe-photo-alt strong { color: #a66a13; font: 700 9px/1 var(--ak-font-mono); letter-spacing: .04em; }
+.pe-photo-alt.is-set strong { color: #28745a; }
+.pe-photo-alt:hover, .pe-photo-alt:focus-visible { background: var(--ak-hover); color: var(--ak-ink); outline: 0; }
 .pe-photo-actions {
   position: absolute; z-index: 3; top: 0; left: 50%; transform: translate(-50%, -18%);
   display: flex; align-items: center; padding: 5px; border: 1px solid var(--ak-line);
@@ -744,6 +752,13 @@ body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: v
   cursor: grabbing;
 }
 .pe-photo-overlay img { max-width: 100%; max-height: 100%; display: block; }
+.pe-alt-modal { width: min(620px, 100%); }
+.pe-alt-preview {
+  min-width: 0; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 14px; align-items: center;
+  padding: 10px; border-radius: 8px; background: var(--ak-inset);
+}
+.pe-alt-preview img { width: 92px; height: 72px; display: block; object-fit: contain; border-radius: 5px; background: var(--ak-bg); }
+.pe-alt-preview span { overflow: hidden; color: var(--ak-ink-quiet); font: 500 12px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap; }
 
 /* Il masonry verticale usa il flusso CSS a colonne: riempie una colonna dall'alto verso il
    basso prima di passare alla successiva. `.is-masonry` resta come alias visuale per markup

package/dist/app/next.css

@@ -707,6 +707,7 @@
   border-radius: 10px;
   box-shadow: var(--ak-lift-3);
 }
+:root[data-admin-interface="next"] .pe-photo-alt { border-radius: 999px; }
 /* Tutte le azioni primarie usano la coppia di colori del tema. Alcuni componenti storici
  * fissavano il testo a bianco: in dark l'accento diventa chiaro e richiede invece inchiostro
  * scuro, come il pulsante di pubblicazione. */

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

@@ -1,4 +1,4 @@
-import type { AssetFile } from "../../index.js";
+import { type AssetFile } from "../../index.js";
 import type { GalleryImage, PageSection, SectionType } from "../../index.js";
 export type GallerySection = PageSection;
 export type GallerySectionType = SectionType;

package/dist/app/routes/GallerySectionsEditor.js

@@ -31,10 +31,12 @@ import { useEffect, useRef, useState } from "react";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { assetAltText } from "../../index.js";
 import { GALLERY_BLOCK_ID, emptySection } from "../../index.js";
 import { normalizeSections, withGalleryBlock } from "../../normalize.js";
 import { ParagraphEditor } from "../ui/ParagraphEditor";
 import { Icon } from "../ui/icons";
+import { site } from "../site";
 function sectionId() {
     return `section-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
 }
@@ -58,8 +60,18 @@ function SortableSection({ section, index, onPatch, onDuplicate, onRemove, rende
     const chooseImage = async () => {
         const selected = await pickMediaFiles?.({ multiple: false });
         const file = selected?.[0];
-        if (file)
-            onPatch({ image: file.url, w: file.w ?? null, h: file.h ?? null });
+        if (file) {
+            const locale = site().languages?.default ?? "default";
+            onPatch({
+                image: file.url,
+                w: file.w ?? null,
+                h: file.h ?? null,
+                /* Il valore del Media è il default iniziale; questo campo resta modificabile e quindi
+                 * costituisce l'override del singolo utilizzo. Una decorativa produce deliberatamente
+                 * alt="", non il nome del file. */
+                alt: assetAltText(file, locale),
+            });
+        }
     };
     return (_jsxs("article", { ref: setNodeRef, className: ["gs-card", `is-${section.type}`, isDragging ? "is-dragging" : ""]
             .filter(Boolean).join(" "), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsxs("header", { className: "gs-card-head", children: [_jsx("button", { type: "button", className: "gs-drag", title: "Trascina per riordinare", "aria-label": `Riordina sezione ${labelOf(section.type)}`, ...attributes, ...listeners, children: _jsx(Icon.grip, {}) }), _jsx("span", { className: "gs-card-icon", children: _jsx(SectionIcon, { type: section.type }) }), _jsx("strong", { children: labelOf(section.type) }), _jsx("span", { className: "gs-position", children: index + 1 }), !isGallery && (_jsx("button", { type: "button", className: "gs-head-action", onClick: onDuplicate, children: "Duplica" })), (!isGallery || section.images.length > 0) && (_jsx("button", { type: "button", className: "gs-head-action is-danger", onClick: onRemove, children: "Elimina" }))] }), isGallery && (_jsx("div", { className: "gs-gallery", children: renderGallery?.(section.images, (images) => onPatch({ images })) })), section.type === "header" && (_jsxs("div", { className: "gs-fields", children: [_jsxs("label", { children: [_jsxs("span", { children: ["Occhiello ", _jsx("small", { children: "facoltativo" })] }), _jsx("input", { value: section.eyebrow, maxLength: 120, placeholder: "Es. Fotografia gastronomica", onChange: (event) => onPatch({ eyebrow: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Titolo" }), _jsx("input", { value: section.heading, maxLength: 200, placeholder: "Titolo della sezione", onChange: (event) => onPatch({ heading: event.target.value }) })] }), _jsxs("label", { children: [_jsxs("span", { children: ["Introduzione ", _jsx("small", { children: "facoltativa" })] }), _jsx("textarea", { rows: 4, value: section.lead, maxLength: 800, placeholder: "Una breve apertura sotto il titolo.", onChange: (event) => onPatch({ lead: event.target.value }) })] })] })), section.type === "text" && (_jsx("div", { className: "gs-fields", children: _jsxs("label", { children: [_jsx("span", { children: "Testo" }), _jsx(ParagraphEditor, { value: section.paragraphs, onChange: (paragraphs) => onPatch({ paragraphs }) }), _jsx("small", { children: "Seleziona una parola per metterla in grassetto, in corsivo o per collegarla." })] }) })), section.type === "image" && (_jsxs("div", { className: "gs-image-editor", children: [_jsx("button", { type: "button", className: "gs-image-preview", onClick: () => void chooseImage(), children: section.image ? _jsx("img", { src: section.image, alt: "" }) : (_jsxs("span", { children: [_jsx(Icon.media, {}), " Scegli un\u2019immagine"] })) }), _jsxs("div", { className: "gs-image-fields", children: [_jsxs("div", { className: "gs-image-actions", children: [_jsx("button", { type: "button", className: "btn-soft", onClick: () => void chooseImage(), children: section.image ? "Cambia immagine" : "Scegli immagine" }), section.image && (_jsx("button", { type: "button", className: "btn-soft is-quiet", onClick: () => onPatch({ image: "", w: null, h: null }), children: "Rimuovi" }))] }), _jsxs("label", { children: [_jsx("span", { children: "Testo alternativo" }), _jsx("input", { value: section.alt, maxLength: 300, placeholder: "Descrive l\u2019immagine a chi non pu\u00F2 vederla", onChange: (event) => onPatch({ alt: event.target.value }) })] }), _jsxs("label", { children: [_jsxs("span", { children: ["Didascalia ", _jsx("small", { children: "facoltativa" })] }), _jsx("input", { value: section.caption, maxLength: 300, onChange: (event) => onPatch({ caption: event.target.value }) })] }), _jsxs("div", { className: "gs-layout", children: [_jsx("span", { children: "Dimensione" }), _jsxs("div", { className: "seg", role: "group", "aria-label": "Dimensione dell\u2019immagine", children: [_jsx("button", { type: "button", className: "seg-btn" + (section.layout === "wide" ? " is-on" : ""), onClick: () => onPatch({ layout: "wide" }), children: "Larga" }), _jsx("button", { type: "button", className: "seg-btn" + (section.layout === "contained" ? " is-on" : ""), onClick: () => onPatch({ layout: "contained" }), children: "Contenuta" })] })] })] })] }))] }));

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

@@ -1,6 +1,9 @@
 import type { PickerOptions } from "../../form/MediaPicker.js";
+import type { GalleryImage } from "../../index.js";
 import type { AssetFile } from "../../index.js";
 import type { PageModel } from "../lib/pages";
+import { type GalleryLayout } from "../lib/gallery-layout";
+type CuratedItem = GalleryImage;
 export declare function PageHeader({ page, pages, onChange, seoActive, onSeoToggle, languages, activeLanguage, onLanguageChange, }: {
     page: PageModel;
     pages: PageModel[];
@@ -15,6 +18,12 @@ export declare function PageHeader({ page, pages, onChange, seoActive, onSeoTogg
     activeLanguage?: string;
     onLanguageChange?: (language: string) => void;
 }): import("react").JSX.Element;
+export declare function GalleryEditor({ value, onChange, pickMediaFiles, layout, }: {
+    value: CuratedItem[];
+    onChange: (items: CuratedItem[]) => void;
+    pickMediaFiles?: (o: PickerOptions) => Promise<AssetFile[] | null>;
+    layout?: GalleryLayout;
+}): import("react").JSX.Element;
 export declare function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, activeLanguage, defaultLanguage, }: {
     page: PageModel;
     onChange: (next: PageModel) => void;
@@ -30,3 +39,4 @@ export declare function PageEditor({ page, onChange, onRefresh, pristine, pickMe
     activeLanguage?: string;
     defaultLanguage?: string;
 }): import("react").JSX.Element;
+export {};

package/dist/app/routes/PageEditor.js

@@ -13,8 +13,8 @@ import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter,
 import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { ProseField, SchemaForm } from "../../form/index.js";
-import { api } from "../../index.js";
-import { pageType } from "../site.js";
+import { api, assetAltText } from "../../index.js";
+import { pageType, site } from "../site.js";
 import { normalizeGalleryLayout } from "../lib/gallery-layout";
 import { uniqueSlug } from "../lib/slug";
 import { proseStats } from "../lib/text";
@@ -101,7 +101,7 @@ function imageName(src) {
         return raw;
     }
 }
-function GalleryCard({ item, verticalMasonry = false, sortable = true, activeId, overId, activeIndex, overIndex, onReplace, onToggle, onRemove, }) {
+function GalleryCard({ item, verticalMasonry = false, sortable = true, activeId, overId, activeIndex, overIndex, onReplace, onEditAlt, onToggle, onRemove, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: item.src,
         disabled: !sortable,
@@ -119,9 +119,9 @@ function GalleryCard({ item, verticalMasonry = false, sortable = true, activeId,
             isDragging ? "is-dragging" : "",
             insertBefore ? "is-insert-before" : "",
             insertAfter ? "is-insert-after" : "",
-        ].filter(Boolean).join(" "), style: sortable ? { transform: CSS.Transform.toString(transform), transition } : undefined, children: [_jsxs("div", { className: "pe-photo-frame", style: frameStyle, ...(sortable ? attributes : {}), ...(sortable ? listeners : {}), children: [_jsx("img", { src: item.src, alt: imageName(item.src), draggable: false }), item.hidden && _jsx("span", { className: "pe-hidden-label", children: "Nascosta" })] }), _jsxs("div", { className: "pe-photo-actions", children: [_jsx("button", { type: "button", onClick: onReplace, title: "Cambia immagine", "aria-label": "Cambia immagine", children: _jsx(Icon.replace, {}) }), _jsx("button", { type: "button", onClick: onToggle, title: item.hidden ? "Rimetti online" : "Nascondi dalla gallery", "aria-label": item.hidden ? "Rimetti online" : "Nascondi dalla gallery", children: item.hidden ? _jsx(Icon.eye, {}) : _jsx(Icon.eyeOff, {}) }), _jsx("button", { type: "button", className: "is-danger", onClick: onRemove, title: "Rimuovi dalla gallery", "aria-label": "Rimuovi dalla gallery", children: _jsx(Icon.trash, {}) })] }), _jsx("figcaption", { title: imageName(item.src), children: imageName(item.src) })] }));
+        ].filter(Boolean).join(" "), style: sortable ? { transform: CSS.Transform.toString(transform), transition } : undefined, children: [_jsxs("div", { className: "pe-photo-frame", style: frameStyle, ...(sortable ? attributes : {}), ...(sortable ? listeners : {}), children: [_jsx("img", { src: item.src, alt: imageName(item.src), draggable: false }), item.hidden && _jsx("span", { className: "pe-hidden-label", children: "Nascosta" })] }), _jsxs("div", { className: "pe-photo-actions", children: [_jsx("button", { type: "button", onClick: onReplace, title: "Cambia immagine", "aria-label": "Cambia immagine", children: _jsx(Icon.replace, {}) }), _jsx("button", { type: "button", onClick: onToggle, title: item.hidden ? "Rimetti online" : "Nascondi dalla gallery", "aria-label": item.hidden ? "Rimetti online" : "Nascondi dalla gallery", children: item.hidden ? _jsx(Icon.eye, {}) : _jsx(Icon.eyeOff, {}) }), _jsx("button", { type: "button", className: "is-danger", onClick: onRemove, title: "Rimuovi dalla gallery", "aria-label": "Rimuovi dalla gallery", children: _jsx(Icon.trash, {}) })] }), _jsx("figcaption", { title: imageName(item.src), children: imageName(item.src) }), _jsxs("button", { type: "button", className: `pe-photo-alt${item.alt?.trim() ? " is-set" : ""}`, onClick: onEditAlt, "aria-label": `Modifica testo alternativo di ${imageName(item.src)}`, children: [_jsx("strong", { children: "ALT" }), _jsx("span", { children: item.alt?.trim() ? "Modifica" : "Vuoto" })] })] }));
 }
-function GalleryEditor({ value, onChange, pickMediaFiles, layout = "grid", }) {
+export function GalleryEditor({ value, onChange, pickMediaFiles, layout = "grid", }) {
     const list = Array.isArray(value) ? value : [];
     const masonry = layout !== "grid";
     const verticalMasonry = layout === "masonry-vertical";
@@ -129,6 +129,7 @@ function GalleryEditor({ value, onChange, pickMediaFiles, layout = "grid", }) {
     const hiddenItems = masonry ? list.filter((item) => item.hidden) : [];
     const [activeId, setActiveId] = useState(null);
     const [overId, setOverId] = useState(null);
+    const [editingAlt, setEditingAlt] = useState(null);
     const [addPositionOpen, setAddPositionOpen] = useState(false);
     const addPositionRef = useRef(null);
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
@@ -165,9 +166,15 @@ function GalleryEditor({ value, onChange, pickMediaFiles, layout = "grid", }) {
         if (!picked?.length)
             return;
         const have = new Set(list.map((item) => item.src));
+        const locale = site().languages?.default ?? "default";
         const additions = picked
             .filter((file) => !have.has(file.url))
-            .map((file) => ({ src: file.url, w: file.w ?? null, h: file.h ?? null }));
+            .map((file) => ({
+            src: file.url,
+            w: file.w ?? null,
+            h: file.h ?? null,
+            alt: assetAltText(file, locale),
+        }));
         if (additions.length)
             onChange(position === "start" ? [...additions, ...list] : [...list, ...additions]);
     };
@@ -180,8 +187,9 @@ function GalleryEditor({ value, onChange, pickMediaFiles, layout = "grid", }) {
             alert("Questa foto è già presente nella gallery.");
             return;
         }
+        const locale = site().languages?.default ?? "default";
         onChange(list.map((item, itemIndex) => itemIndex === index
-            ? { ...item, src: file.url, w: file.w ?? null, h: file.h ?? null }
+            ? { ...item, src: file.url, w: file.w ?? null, h: file.h ?? null, alt: assetAltText(file, locale) }
             : item));
     };
     const finishDrag = ({ active, over }) => {
@@ -208,7 +216,22 @@ function GalleryEditor({ value, onChange, pickMediaFiles, layout = "grid", }) {
     const remove = (src) => onChange(list.filter((item) => item.src !== src));
     return (_jsxs("section", { className: `pe-gallery${masonry ? ` is-${layout}` : ""}`, "aria-label": "Foto della gallery", children: [_jsxs("div", { className: "pe-gallery-bar", children: [_jsxs("div", { className: "pe-gallery-summary", children: [_jsxs("strong", { children: [list.length, " ", list.length === 1 ? "foto" : "foto"] }), _jsx("span", { children: list.length === 0
                                     ? "Scegli le immagini da mostrare nella pagina."
-                                    : `${visible} online${visible < list.length ? ` · ${list.length - visible} nascoste` : ""}` }), layout === "masonry-vertical" && list.length > 0 && (_jsx("span", { className: "pe-gallery-layout-note", children: "Masonry verticale \u00B7 3 colonne \u00B7 ordine dall\u2019alto verso il basso" })), layout === "masonry-horizontal" && list.length > 0 && (_jsx("span", { className: "pe-gallery-layout-note", children: "Masonry orizzontale \u00B7 6 colonne \u00B7 ordine da sinistra a destra" }))] }), list.length === 0 ? (_jsxs("button", { type: "button", className: "pe-add", onClick: () => void add("start"), children: ["Aggiungi foto ", _jsx(Icon.plus, {})] })) : (_jsxs("div", { className: "pe-add-group", ref: addPositionRef, children: [_jsxs("button", { type: "button", className: "pe-add", onClick: () => void add("start"), children: ["Aggiungi foto ", _jsx(Icon.plus, {})] }), _jsx("button", { type: "button", className: "pe-add-position", "aria-label": "Scegli dove aggiungere le foto", "aria-expanded": addPositionOpen, "aria-controls": "gallery-add-position", onClick: () => setAddPositionOpen((open) => !open), children: "\u2304" }), addPositionOpen && (_jsx("div", { className: "pe-add-menu", id: "gallery-add-position", children: _jsx("button", { type: "button", onClick: () => void add("end"), children: "Aggiungi in fondo" }) }))] }))] }), list.length === 0 ? (_jsxs("button", { type: "button", className: "pe-gallery-empty", onClick: () => void add("start"), children: [_jsx(Icon.gallery, {}), _jsx("strong", { children: "La gallery \u00E8 vuota" }), _jsx("span", { children: "Aggiungi le prime fotografie" })] })) : (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: ({ active }) => setActiveId(String(active.id)), onDragOver: ({ over }) => setOverId(over ? String(over.id) : null), onDragCancel: () => { setActiveId(null); setOverId(null); }, onDragEnd: finishDrag, children: [_jsx(SortableContext, { items: shownItems.map((item) => item.src), strategy: rectSortingStrategy, children: _jsx("div", { className: "pe-photo-grid", children: shownItems.map((item) => (_jsx(GalleryCard, { item: item, verticalMasonry: verticalMasonry, activeId: activeId, overId: overId, activeIndex: activeIndex, overIndex: overIndex, onReplace: () => void replace(itemIndex(item.src)), onToggle: () => toggle(item.src), onRemove: () => remove(item.src) }, item.src))) }) }), _jsx(DragOverlay, { children: activeItem && (_jsx("div", { className: "pe-photo-overlay", children: _jsx("img", { src: activeItem.src, alt: "" }) })) }), masonry && hiddenItems.length > 0 && (_jsxs("section", { className: "pe-hidden-gallery", "aria-label": "Foto nascoste", children: [_jsxs("div", { className: "pe-hidden-gallery-head", children: [_jsx("strong", { children: "Nascoste" }), _jsx("span", { children: "Non occupano spazio nella gallery pubblica." })] }), _jsx("div", { className: "pe-hidden-grid", children: hiddenItems.map((item) => (_jsx(GalleryCard, { item: item, sortable: false, activeId: activeId, overId: overId, activeIndex: activeIndex, overIndex: overIndex, onReplace: () => void replace(itemIndex(item.src)), onToggle: () => toggle(item.src), onRemove: () => remove(item.src) }, item.src))) })] }))] }))] }));
+                                    : `${visible} online${visible < list.length ? ` · ${list.length - visible} nascoste` : ""}` }), layout === "masonry-vertical" && list.length > 0 && (_jsx("span", { className: "pe-gallery-layout-note", children: "Masonry verticale \u00B7 3 colonne \u00B7 ordine dall\u2019alto verso il basso" })), layout === "masonry-horizontal" && list.length > 0 && (_jsx("span", { className: "pe-gallery-layout-note", children: "Masonry orizzontale \u00B7 6 colonne \u00B7 ordine da sinistra a destra" }))] }), list.length === 0 ? (_jsxs("button", { type: "button", className: "pe-add", onClick: () => void add("start"), children: ["Aggiungi foto ", _jsx(Icon.plus, {})] })) : (_jsxs("div", { className: "pe-add-group", ref: addPositionRef, children: [_jsxs("button", { type: "button", className: "pe-add", onClick: () => void add("start"), children: ["Aggiungi foto ", _jsx(Icon.plus, {})] }), _jsx("button", { type: "button", className: "pe-add-position", "aria-label": "Scegli dove aggiungere le foto", "aria-expanded": addPositionOpen, "aria-controls": "gallery-add-position", onClick: () => setAddPositionOpen((open) => !open), children: "\u2304" }), addPositionOpen && (_jsx("div", { className: "pe-add-menu", id: "gallery-add-position", children: _jsx("button", { type: "button", onClick: () => void add("end"), children: "Aggiungi in fondo" }) }))] }))] }), list.length === 0 ? (_jsxs("button", { type: "button", className: "pe-gallery-empty", onClick: () => void add("start"), children: [_jsx(Icon.gallery, {}), _jsx("strong", { children: "La gallery \u00E8 vuota" }), _jsx("span", { children: "Aggiungi le prime fotografie" })] })) : (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: ({ active }) => setActiveId(String(active.id)), onDragOver: ({ over }) => setOverId(over ? String(over.id) : null), onDragCancel: () => { setActiveId(null); setOverId(null); }, onDragEnd: finishDrag, children: [_jsx(SortableContext, { items: shownItems.map((item) => item.src), strategy: rectSortingStrategy, children: _jsx("div", { className: "pe-photo-grid", children: shownItems.map((item) => (_jsx(GalleryCard, { item: item, verticalMasonry: verticalMasonry, activeId: activeId, overId: overId, activeIndex: activeIndex, overIndex: overIndex, onReplace: () => void replace(itemIndex(item.src)), onEditAlt: () => setEditingAlt({ src: item.src, value: item.alt ?? "" }), onToggle: () => toggle(item.src), onRemove: () => remove(item.src) }, item.src))) }) }), _jsx(DragOverlay, { children: activeItem && (_jsx("div", { className: "pe-photo-overlay", children: _jsx("img", { src: activeItem.src, alt: "" }) })) }), masonry && hiddenItems.length > 0 && (_jsxs("section", { className: "pe-hidden-gallery", "aria-label": "Foto nascoste", children: [_jsxs("div", { className: "pe-hidden-gallery-head", children: [_jsx("strong", { children: "Nascoste" }), _jsx("span", { children: "Non occupano spazio nella gallery pubblica." })] }), _jsx("div", { className: "pe-hidden-grid", children: hiddenItems.map((item) => (_jsx(GalleryCard, { item: item, sortable: false, activeId: activeId, overId: overId, activeIndex: activeIndex, overIndex: overIndex, onReplace: () => void replace(itemIndex(item.src)), onEditAlt: () => setEditingAlt({ src: item.src, value: item.alt ?? "" }), onToggle: () => toggle(item.src), onRemove: () => remove(item.src) }, item.src))) })] }))] })), editingAlt && (_jsx("div", { className: "pe-modal", role: "presentation", onMouseDown: (event) => {
+                    if (event.target === event.currentTarget)
+                        setEditingAlt(null);
+                }, children: _jsxs("div", { className: "pe-modal-card pe-alt-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "pe-alt-dialog", children: [_jsxs("header", { children: [_jsx("h2", { id: "pe-alt-dialog", children: "Testo alternativo" }), _jsx("button", { type: "button", onClick: () => setEditingAlt(null), "aria-label": "Chiudi", children: "\u00D7" })] }), _jsxs("div", { className: "pe-modal-fields", children: [_jsxs("div", { className: "pe-alt-preview", children: [_jsx("img", { src: editingAlt.src, alt: "" }), _jsx("span", { children: imageName(editingAlt.src) })] }), _jsxs("label", { children: [_jsx("span", { children: "Descrizione dell\u2019immagine" }), _jsx("input", { autoFocus: true, value: editingAlt.value, maxLength: 300, placeholder: "Es. Chef che impiatta un dessert al cioccolato", onChange: (event) => setEditingAlt({ ...editingAlt, value: event.target.value }), onKeyDown: (event) => {
+                                                if (event.key !== "Enter")
+                                                    return;
+                                                onChange(list.map((item) => item.src === editingAlt.src
+                                                    ? { ...item, alt: editingAlt.value.trim() }
+                                                    : item));
+                                                setEditingAlt(null);
+                                            } }), _jsx("small", { children: "Descrivi ci\u00F2 che \u00E8 utile nel contesto della pagina. Lascialo vuoto soltanto se la foto \u00E8 decorativa." })] })] }), _jsxs("footer", { children: [_jsx("button", { type: "button", className: "ak-btn", onClick: () => setEditingAlt(null), children: "Annulla" }), _jsx("button", { type: "button", className: "ak-btn ak-btn-primary", onClick: () => {
+                                        onChange(list.map((item) => item.src === editingAlt.src
+                                            ? { ...item, alt: editingAlt.value.trim() }
+                                            : item));
+                                        setEditingAlt(null);
+                                    }, children: "Applica" })] })] }) }))] }));
 }
 export function PageEditor({ page, onChange, onRefresh, pristine, pickMedia, pickMediaFiles, activeLanguage, defaultLanguage, }) {
     const [bodyState, setBodyState] = useState("idle");

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

@@ -1,4 +1,4 @@
-import type { AssetFile } from "../../index.js";
+import { type AssetFile } from "../../index.js";
 import { normalizeWorks, type Work, type WorkCard, type WorkCardType, type WorkInfo } from "../../normalize.js";
 export type { WorkCardType, WorkInfo, WorkCard, Work };
 export { normalizeWorks };

package/dist/app/routes/PortfolioWorksEditor.js

@@ -31,6 +31,7 @@ import { useEffect, useRef, useState } from "react";
 import { DndContext, closestCenter } from "@dnd-kit/core";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { assetAltText } from "../../index.js";
 import { ParagraphEditor } from "../ui/ParagraphEditor";
 /* La casella immagine sta in `ui/`: la usano copertina e card qui, e il ritratto della pagina
    "chi sono". Vedi il commento in cima a quel file. */
@@ -41,6 +42,7 @@ import { OpenCard } from "../ui/OpenCard";
 import { useDragSensors } from "../ui/dnd";
 import { movedOpenIndex, removedOpenIndex } from "../lib/reorder";
 import { Icon } from "../ui/icons";
+import { site } from "../site.js";
 import { normalizeWorks, emptyWork, emptyCard, CARD_KINDS, } from "../../normalize.js";
 export { normalizeWorks };
 const str = (value) => (typeof value === "string" ? value : "");
@@ -69,7 +71,10 @@ function SortableCard({ id, card, index, onPatch, onRemove, pickMediaFiles }) {
     const chooseImage = async () => {
         const file = (await pickMediaFiles?.({ multiple: false }))?.[0];
         if (file)
-            onPatch({ image: file.url });
+            onPatch({
+                image: file.url,
+                alt: assetAltText(file, site().languages?.default ?? "default"),
+            });
     };
     return (_jsxs("article", { ref: setNodeRef, className: "pw-card" + (isDragging ? " is-dragging" : ""), style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsxs("header", { className: "pw-card-head", children: [_jsx("button", { type: "button", className: "pw-grip", "aria-label": `Riordina card ${index + 1}`, ...attributes, ...listeners, children: _jsx(Icon.grip, {}) }), _jsx("span", { className: "pw-card-kind", children: kind.label }), _jsx("div", { className: "seg", role: "group", "aria-label": "Tipo di card", children: CARD_KINDS.map((option) => (_jsx("button", { type: "button", className: "seg-btn" + (card.type === option.type ? " is-on" : ""), onClick: () => onPatch({ type: option.type }), title: option.hint, children: option.label }, option.type))) }), _jsx("button", { type: "button", className: "pw-icon-btn is-danger", "aria-label": "Elimina card", onClick: onRemove, children: _jsx(Icon.trash, {}) })] }), _jsxs("div", { className: "pw-card-body" + (wantsImage ? " is-split" : ""), children: [wantsImage && (_jsx(MediaSlot, { value: card.image, ratio: "wide", empty: "Scegli un\u2019immagine", onPick: () => void chooseImage(), onClear: () => onPatch({ image: "" }) })), _jsxs("div", { className: "pw-card-text", children: [wantsImage && (_jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Testo alternativo" }), _jsx("input", { className: "pw-field", value: card.alt, maxLength: 200, placeholder: "Descrive l\u2019immagine a chi non pu\u00F2 vederla", onChange: (event) => onPatch({ alt: event.target.value }) })] })), wantsText && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "pw-label", children: [_jsxs("span", { children: ["Occhiello ", _jsx("small", { children: "facoltativo" })] }), _jsx("input", { className: "pw-field", value: card.kicker, maxLength: 60, onChange: (event) => onPatch({ kicker: event.target.value }) })] }), _jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Titolo" }), _jsx("input", { className: "pw-field", value: card.heading, maxLength: 120, onChange: (event) => onPatch({ heading: event.target.value }) })] }), _jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Paragrafi" }), _jsx(ParagraphEditor, { className: "pw-field pw-textarea", rows: 5, value: card.body, placeholder: "Scrivi il testo della card.\nVai a capo per iniziare un paragrafo nuovo.", onChange: (body) => onPatch({ body }) })] })] }))] })] })] }));
 }
@@ -100,7 +105,10 @@ function SortableWork({ id, work, index, total, open, onToggle, onPatch, onDupli
     const chooseCover = async () => {
         const file = (await pickMediaFiles?.({ multiple: false }))?.[0];
         if (file)
-            onPatch({ cover: file.url });
+            onPatch({
+                cover: file.url,
+                coverAlt: assetAltText(file, site().languages?.default ?? "default"),
+            });
     };
     const pieces = [
         work.cards.length ? `${work.cards.length} ${work.cards.length === 1 ? "card" : "card"}` : "",
@@ -109,7 +117,7 @@ function SortableWork({ id, work, index, total, open, onToggle, onPatch, onDupli
     return (
     /* Il guscio (maniglia, miniatura, titolo, apri/chiudi) sta in `ui/OpenCard`: è lo stesso
        delle edizioni dei workshop, e tenerlo qui avrebbe voluto dire ricopiarlo là. */
-    _jsxs(OpenCard, { id: id, index: index, total: total, open: open, thumb: work.cover, title: work.title, empty: "Lavoro senza titolo", meta: pieces.join(" · "), kind: "questo lavoro", onToggle: onToggle, actions: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn-soft is-quiet", onClick: onDuplicate, children: "Duplica" }), _jsx("button", { type: "button", className: "btn-soft is-danger", onClick: onRemove, children: "Elimina" })] }), children: [_jsxs("div", { className: "pw-identity", children: [_jsx(MediaSlot, { value: work.cover, ratio: "cover", empty: "Scegli la copertina", onPick: () => void chooseCover(), onClear: () => onPatch({ cover: "" }) }), _jsxs("div", { className: "pw-identity-fields", children: [_jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Titolo" }), _jsx("input", { className: "pw-field pw-field-title", value: work.title, maxLength: 120, placeholder: "Il nome del lavoro", onChange: (event) => onPatch({ title: event.target.value }) })] }), _jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Descrizione" }), _jsx(ParagraphEditor, { className: "pw-field pw-textarea", rows: 7, value: work.description, placeholder: "Racconta il lavoro.\nVai a capo per iniziare un paragrafo nuovo.", onChange: (description) => onPatch({ description }) }), _jsx("small", { children: "Seleziona una parola per metterla in grassetto, in corsivo o per collegarla." })] })] })] }), _jsx(InfoList, { items: work.info, onChange: (info) => onPatch({ info }) }), _jsx(CardList, { items: work.cards, onChange: (cards) => onPatch({ cards }), pickMediaFiles: pickMediaFiles })] }));
+    _jsxs(OpenCard, { id: id, index: index, total: total, open: open, thumb: work.cover, title: work.title, empty: "Lavoro senza titolo", meta: pieces.join(" · "), kind: "questo lavoro", onToggle: onToggle, actions: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn-soft is-quiet", onClick: onDuplicate, children: "Duplica" }), _jsx("button", { type: "button", className: "btn-soft is-danger", onClick: onRemove, children: "Elimina" })] }), children: [_jsxs("div", { className: "pw-identity", children: [_jsx(MediaSlot, { value: work.cover, ratio: "cover", empty: "Scegli la copertina", onPick: () => void chooseCover(), onClear: () => onPatch({ cover: "" }) }), _jsxs("div", { className: "pw-identity-fields", children: [_jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Titolo" }), _jsx("input", { className: "pw-field pw-field-title", value: work.title, maxLength: 120, placeholder: "Il nome del lavoro", onChange: (event) => onPatch({ title: event.target.value }) })] }), _jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Testo alternativo della copertina" }), _jsx("input", { className: "pw-field", value: work.coverAlt, maxLength: 200, placeholder: "Descrive la copertina a chi non pu\u00F2 vederla", onChange: (event) => onPatch({ coverAlt: event.target.value }) })] }), _jsxs("label", { className: "pw-label", children: [_jsx("span", { children: "Descrizione" }), _jsx(ParagraphEditor, { className: "pw-field pw-textarea", rows: 7, value: work.description, placeholder: "Racconta il lavoro.\nVai a capo per iniziare un paragrafo nuovo.", onChange: (description) => onPatch({ description }) }), _jsx("small", { children: "Seleziona una parola per metterla in grassetto, in corsivo o per collegarla." })] })] })] }), _jsx(InfoList, { items: work.info, onChange: (info) => onPatch({ info }) }), _jsx(CardList, { items: work.cards, onChange: (cards) => onPatch({ cards }), pickMediaFiles: pickMediaFiles })] }));
 }
 /* ---- L'elenco ------------------------------------------------------------------------------ */
 export function PortfolioWorksEditor({ value, onChange, pickMediaFiles }) {

package/dist/form/fields/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* I widget.  Piccoli di proposito: il valore del sistema sta nello schema, non qui.
  * Nessuno di questi conosce il sito — etichette, opzioni e aiuti arrivano da `ui`. */
 import { useEffect, useState } from "react";
+import { assetAltText } from "../../api.js";
 import { registerField } from "../registry.js";
 import { ProseField } from "../prose/ProseField.js";
 function Wrap({ meta, error, children }) {
@@ -100,7 +101,7 @@ registerField("r2Curated", ({ meta, value, onChange, error, pickMediaFiles }) =>
                     const have = new Set(list.map((it) => it.src));
                     const add = picked
                         .filter((f) => !have.has(f.url))
-                        .map((f) => ({ src: f.url, w: f.w ?? null, h: f.h ?? null }));
+                        .map((f) => ({ src: f.url, w: f.w ?? null, h: f.h ?? null, alt: assetAltText(f) }));
                     if (add.length)
                         onChange([...list, ...add]);
                 }, children: "+ Aggiungi foto" })] }));

package/dist/form/media/Lightbox.js

@@ -23,14 +23,21 @@ export function Lightbox({ lib }) {
     const i = lib.viewing;
     const file = i === null ? undefined : lib.shown[i];
     const [info, setInfo] = useState(false);
+    const [altOpen, setAltOpen] = useState(false);
+    const [altDraft, setAltDraft] = useState({ decorative: false, texts: {} });
+    const [altSaved, setAltSaved] = useState(false);
     const [usage, setUsage] = useState(null);
     const [usageError, setUsageError] = useState(false);
+    const altLocales = lib.altLocales ?? ["default"];
+    const defaultAltLocale = lib.defaultAltLocale ?? "default";
     // Tastiera: Esc chiude, le frecce scorrono. Su un visore a schermo intero è il modo in cui
     // ci si aspetta di muoversi, e senza si è costretti a mirare due bottoni piccoli.
     useEffect(() => {
         if (i === null)
             return;
         const on = (e) => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+                return;
             if (e.key === "Escape")
                 lib.view(null);
             else if (e.key === "ArrowRight")
@@ -41,6 +48,10 @@ export function Lightbox({ lib }) {
         addEventListener("keydown", on);
         return () => removeEventListener("keydown", on);
     }, [i, lib]);
+    useEffect(() => {
+        setAltDraft(file?.alt ?? { decorative: false, texts: {} });
+        setAltSaved(false);
+    }, [file?.key]);
     // L'uso si richiede per la foto che si sta guardando, non una volta per tutte.
     useEffect(() => {
         setUsage(null);
@@ -62,9 +73,28 @@ export function Lightbox({ lib }) {
     if (i === null || !file)
         return null;
     const folder = lib.prefix.replace(/\/$/, "") || "tutte le foto";
+    const lightboxAlt = file.alt?.decorative
+        ? ""
+        : file.alt?.texts[defaultAltLocale] || file.name;
     return (_jsxs("div", { className: "lb", onClick: (e) => { if (e.target === e.currentTarget)
-            lib.view(null); }, children: [_jsxs("header", { className: "lb-top", children: [_jsxs("button", { className: "lb-btn", onClick: () => lib.view(null), children: ["\u2039 Torna a ", folder] }), _jsxs("div", { className: "lb-id", children: [_jsx("span", { className: "lb-name", children: file.name }), _jsxs("span", { className: "lb-count", children: [i + 1, " / ", lib.shown.length] })] }), _jsxs("div", { className: "lb-tools", children: [_jsx("a", { className: "lb-btn", href: file.url, download: file.name, title: "Scarica", children: _jsx(IcoDown, {}) }), _jsx("button", { className: "lb-btn" + (info ? " is-on" : ""), onClick: () => setInfo((v) => !v), title: "Informazioni", children: _jsx(IcoInfo, {}) }), lib.mode === "manage" && (_jsx("button", { className: "lb-btn", onClick: () => void lib.remove([file.key]), title: "Cestina", children: _jsx(IcoTrash, {}) }))] })] }), _jsxs("div", { className: "lb-stage", onClick: (e) => { if (e.target === e.currentTarget)
-                    lib.view(null); }, children: [_jsx("button", { className: "lb-nav lb-prev", disabled: i === 0, onClick: () => lib.step(-1), "aria-label": "Precedente", children: "\u2039" }), _jsx("img", { className: "lb-img", src: file.url, alt: file.name }), _jsx("button", { className: "lb-nav lb-next", disabled: i === lib.shown.length - 1, onClick: () => lib.step(1), "aria-label": "Successiva", children: "\u203A" })] }), info && (_jsx("aside", { className: "lb-info", children: _jsxs("dl", { children: [_jsx("dt", { children: "File" }), _jsx("dd", { children: file.name }), _jsx("dt", { children: "Cartella" }), _jsx("dd", { children: lib.prefix || "(radice)" }), _jsx("dt", { children: "Dimensioni" }), _jsx("dd", { children: file.w && file.h ? `${file.w} × ${file.h} px` : "—" }), _jsx("dt", { children: "Peso" }), _jsx("dd", { children: fmtSize(file.size) }), _jsx("dt", { children: "Scatto" }), _jsx("dd", { children: fmtDate(file.capturedAt) }), _jsx("dt", { children: "Caricata" }), _jsx("dd", { children: fmtDate(file.uploaded) }), _jsx("dt", { children: "Usata in" }), _jsx("dd", { children: usageError
+            lib.view(null); }, children: [_jsxs("header", { className: "lb-top", children: [_jsxs("button", { className: "lb-btn", onClick: () => lib.view(null), children: ["\u2039 Torna a ", folder] }), _jsxs("div", { className: "lb-id", children: [_jsx("span", { className: "lb-name", children: file.name }), _jsxs("span", { className: "lb-count", children: [i + 1, " / ", lib.shown.length] })] }), _jsxs("div", { className: "lb-tools", children: [_jsx("a", { className: "lb-btn", href: file.url, download: file.name, title: "Scarica", children: _jsx(IcoDown, {}) }), lib.mode === "manage" && (file.type ?? "").startsWith("image/") && (_jsx("button", { className: "lb-btn lb-alt-button" + (altOpen ? " is-on" : ""), onClick: () => { setAltOpen((value) => !value); setInfo(false); lib.clearError(); }, title: "Testo alternativo", children: "ALT" })), _jsx("button", { className: "lb-btn" + (info ? " is-on" : ""), onClick: () => { setInfo((v) => !v); setAltOpen(false); }, title: "Informazioni", children: _jsx(IcoInfo, {}) }), lib.mode === "manage" && (_jsx("button", { className: "lb-btn", onClick: () => void lib.remove([file.key]), title: "Cestina", children: _jsx(IcoTrash, {}) }))] })] }), _jsxs("div", { className: "lb-stage", onClick: (e) => { if (e.target === e.currentTarget)
+                    lib.view(null); }, children: [_jsx("button", { className: "lb-nav lb-prev", disabled: i === 0, onClick: () => lib.step(-1), "aria-label": "Precedente", children: "\u2039" }), _jsx("img", { className: "lb-img", src: file.url, alt: lightboxAlt }), _jsx("button", { className: "lb-nav lb-next", disabled: i === lib.shown.length - 1, onClick: () => lib.step(1), "aria-label": "Successiva", children: "\u203A" })] }), info && (_jsx("aside", { className: "lb-info", children: _jsxs("dl", { children: [_jsx("dt", { children: "File" }), _jsx("dd", { children: file.name }), _jsx("dt", { children: "Cartella" }), _jsx("dd", { children: lib.prefix || "(radice)" }), _jsx("dt", { children: "Dimensioni" }), _jsx("dd", { children: file.w && file.h ? `${file.w} × ${file.h} px` : "—" }), _jsx("dt", { children: "Peso" }), _jsx("dd", { children: fmtSize(file.size) }), _jsx("dt", { children: "Scatto" }), _jsx("dd", { children: fmtDate(file.capturedAt) }), _jsx("dt", { children: "Caricata" }), _jsx("dd", { children: fmtDate(file.uploaded) }), _jsx("dt", { children: "Usata in" }), _jsx("dd", { children: usageError
                                 ? "controllo non disponibile"
-                                : usage === null ? "…" : usage.length ? usage.join(", ") : "nessuna sorgente" })] }) }))] }));
+                                : usage === null ? "…" : usage.length ? usage.join(", ") : "nessuna sorgente" })] }) })), altOpen && lib.mode === "manage" && (_jsxs("aside", { className: "lb-alt", "aria-label": "Testo alternativo dell'immagine", children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("strong", { children: "Testo alternativo" }), _jsx("span", { children: "Predefinito per questo file" })] }), _jsx("button", { type: "button", onClick: () => setAltOpen(false), "aria-label": "Chiudi", children: "\u00D7" })] }), _jsxs("label", { className: "lb-alt-decorative", children: [_jsx("input", { type: "checkbox", checked: altDraft.decorative, disabled: lib.mutating, onChange: (event) => {
+                                    setAltSaved(false);
+                                    setAltDraft((current) => ({ ...current, decorative: event.target.checked }));
+                                } }), _jsxs("span", { children: [_jsx("strong", { children: "Immagine decorativa" }), _jsxs("small", { children: ["Non aggiunge informazioni: il sito user\u00E0 ", _jsx("code", { children: "alt=\"\"" }), "."] })] })] }), !altDraft.decorative && (_jsx("div", { className: "lb-alt-fields", children: altLocales.map((locale) => {
+                            const value = altDraft.texts[locale] ?? "";
+                            return (_jsxs("label", { children: [_jsxs("span", { children: [locale === "default" ? "Testo" : `Testo · ${locale.toUpperCase()}`, _jsxs("small", { children: [value.length, " caratteri"] })] }), _jsx("textarea", { rows: 3, value: value, disabled: lib.mutating, placeholder: "Descrivi il significato dell\u2019immagine nel contesto della pagina", onChange: (event) => {
+                                            setAltSaved(false);
+                                            setAltDraft((current) => ({
+                                                ...current,
+                                                texts: { ...current.texts, [locale]: event.target.value },
+                                            }));
+                                        } })] }, locale));
+                        }) })), _jsx("p", { className: "lb-alt-guidance", children: "Scrivi una frase breve e naturale. Evita \u201Cimmagine di\u201D, ripetizioni e liste di parole chiave. Lo stesso file pu\u00F2 essere sovrascritto dal singolo contenuto quando il contesto lo richiede." }), lib.error && _jsx("p", { className: "lb-alt-error", children: lib.error }), altSaved && _jsx("p", { className: "lb-alt-saved", role: "status", children: "Testo alternativo salvato." }), _jsx("footer", { children: _jsx("button", { type: "button", className: "ak-btn ak-btn-primary", disabled: lib.mutating, onClick: async () => {
+                                const saved = await lib.saveAlt(file.key, altDraft);
+                                if (saved)
+                                    setAltSaved(true);
+                            }, children: lib.operationState === "saving_alt" ? "Salvataggio…" : "Salva" }) })] }))] }));
 }

package/dist/form/media/MediaGrid.js

@@ -23,14 +23,14 @@ import { SORT_LABELS } from "./useMediaLibrary.js";
 import { DRAG_TYPE, DRAG_FOLDERS, readDragged, FolderMenu } from "./MediaFolders.js";
 import { Lightbox } from "./Lightbox.js";
 import { UploadDialog } from "./UploadDialog.js";
-import { summarizeMediaSelection } from "./media-model.js";
+import { mediaAltStatus, summarizeMediaSelection } from "./media-model.js";
 const JOURNAL_LABELS = {
     preparing: "Preparo le copie Media.",
-    ready: "Media pronta: pubblica per applicare la modifica.",
+    ready: "Modifica Media pronta per la pubblicazione.",
     blocked_in_use: "Operazione bloccata: una bozza o la versione online usa ancora la sorgente.",
     bound: "Pubblicazione con Media in corso.",
     finalizing: "Pubblicazione riuscita: completo la pulizia Media.",
-    completed_with_warning: "Pubblicato con Media da completare.",
+    completed_with_warning: "Modifica applicata con alcuni Media da completare.",
     failed: "Operazione Media interrotta prima della pubblicazione.",
 };
 /* Scaricare più file significa più download: il browser ne consente una raffica breve dallo
@@ -121,6 +121,7 @@ export function MediaGrid({ lib, notice, onPick, onCancel }) {
     const allOn = lib.allSelected;
     const locked = lib.busy || lib.mutating;
     const selection = summarizeMediaSelection(sel);
+    const altLocales = lib.altLocales ?? ["default"];
     /* `dragDepth` e non un booleano: `dragenter`/`dragleave` scattano anche passando da un figlio
        all'altro, quindi con un booleano la zona si spegne mentre ci si muove sopra. Si conta. */
     const [dragDepth, setDragDepth] = useState(0);
@@ -152,9 +153,11 @@ export function MediaGrid({ lib, notice, onPick, onCancel }) {
                 }, children: [dragDepth > 0 && (_jsx("div", { className: "mg-dropzone", children: manage
                             ? _jsxs("span", { children: ["Rilascia per caricare in ", _jsx("strong", { children: lib.prefix ? lib.labelOf(lib.prefix) : "Senza cartella" })] })
                             : _jsx("span", { children: "Rilascia le immagini \u2014 sceglierai la cartella prima del caricamento" }) })), _jsx("header", { className: "mg-bar", children: sel.size === 0 ? (_jsxs(_Fragment, { children: [(manage || lib.multiple) && (_jsxs("label", { className: "mg-all", children: [_jsx("input", { type: "checkbox", checked: false, disabled: locked || !lib.selectableIds.length, ref: (el) => { if (el)
-                                                el.indeterminate = false; }, onChange: () => lib.setAll(true) }), _jsx("span", { children: "Seleziona tutto" })] })), !manage && (_jsx("button", { className: "ak-btn ak-btn-quiet mg-upload", disabled: locked, onClick: () => lib.openUpload(), children: "Carica nuove foto" })), _jsx("span", { className: "ak-spacer" }), _jsxs("label", { className: "ak-hint", children: ["ordina per", " ", _jsx("select", { className: "mg-sort", value: lib.sortKey, disabled: locked, onChange: (e) => lib.setSort(e.target.value), children: Object.entries(SORT_LABELS).map(([k, l]) => _jsx("option", { value: k, children: l }, k)) }), _jsx("button", { className: "ak-icon", disabled: locked, onClick: lib.flipDir, title: "Inverti l'ordine", children: lib.sortDir === "asc" ? "↑" : "↓" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("label", { className: "mg-all", children: [_jsx("input", { type: "checkbox", checked: allOn, disabled: locked, ref: (el) => { if (el)
-                                                el.indeterminate = lib.someSelected; }, onChange: () => lib.setAll(!allOn) }), _jsx("span", { children: selection.label })] }), !allOn && lib.selectableIds.length > 0 && (_jsxs("button", { className: "mg-act is-link", disabled: locked, onClick: () => lib.setAll(true), children: ["Seleziona tutti gli elementi (", lib.selectableIds.length, ")"] })), manage && (_jsxs(_Fragment, { children: [lib.selectedFiles.length > 0 && (_jsxs("button", { className: "mg-act", disabled: locked, onClick: () => download(lib.shown.filter((f) => sel.has(f.key)).map((f) => ({ url: f.url, name: f.name }))), children: ["Scarica ", lib.selectedFiles.length, " file"] })), _jsx(MoveMenu, { lib: lib, keys: [...sel] }), _jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.remove([...sel]), children: "Elimina" })] })), _jsx("span", { className: "ak-spacer" }), _jsx("button", { className: "mg-act", disabled: locked, onClick: () => lib.setAll(false), children: "Deseleziona" })] })) }), notice && _jsx("p", { className: "mg-picker-notice", children: notice }), lib.error && _jsx("p", { className: "ak-error", onClick: lib.clearError, children: lib.error }), manage && lib.mediaOperations.length > 0 && (_jsx("section", { className: "mg-journal", "aria-live": "polite", "aria-label": "Stato operazioni Media", children: lib.mediaOperations.map((operation) => (_jsxs("div", { className: `mg-journal-row is-${operation.state}`, children: [_jsx("span", { className: "mg-journal-badge", children: operation.type === "move" ? "Spostamento" : "Eliminazione" }), _jsx("span", { children: JOURNAL_LABELS[operation.state] ?? "Operazione Media in attesa." }), operation.failedEntries > 0 && _jsxs("span", { className: "ak-hint", children: [operation.failedEntries, " file da riprovare"] }), _jsx("span", { className: "ak-spacer" }), operation.state === "completed_with_warning" && operation.releaseId && (_jsx("button", { className: "mg-act", disabled: locked, onClick: () => void lib.resumeMedia(operation), children: "Riprendi" })), ["preparing", "ready", "blocked_in_use", "failed"].includes(operation.state) && !operation.releaseId && (_jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.cancelMedia(operation), children: "Annulla" }))] }, operation.operationId))) })), lib.progress && (_jsxs("p", { className: "mg-progress", children: [lib.progress.verb, " ", lib.progress.done, "/", lib.progress.total, "\u2026 \u2014 non chiudere la pagina"] })), lib.pickUploadJob?.state === "running" && (_jsxs("p", { className: "mg-progress", children: ["Nuove immagini: preparo ", lib.pickUploadJob.conversionDone, "/", lib.pickUploadJob.total, ", carico ", lib.pickUploadJob.uploadDone, "/", lib.pickUploadJob.total, "\u2026"] })), lib.prefix !== "" && (manage || lib.subfolders.length > 0) && (_jsxs("section", { className: "mg-section", children: [_jsxs("div", { className: "mg-section-head", children: [_jsx("h2", { className: "mg-section-title", children: "Cartelle" }), manage && (_jsx("button", { className: "mg-act", disabled: locked, onClick: () => void lib.newFolder(lib.prefix), children: "+ Cartella" }))] }), lib.subfolders.length > 0 && (_jsx("div", { className: "mg", children: lib.subfolders.map((f) => (_jsx(FolderCell, { lib: lib, folder: f, manage: manage, onExternalDrop: () => setDragDepth(0) }, f.prefix))) }))] })), lib.prefix !== "" && (manage || lib.subfolders.length > 0) && lib.shown.length > 0 && (_jsx("h2", { className: "mg-section-title", children: "Foto" })), _jsx("div", { className: "mg", children: lib.shown.map((f, i) => {
+                                                el.indeterminate = false; }, onChange: () => lib.setAll(true) }), _jsx("span", { children: "Seleziona tutto" })] })), !manage && (_jsx("button", { className: "ak-btn ak-btn-quiet mg-upload", disabled: locked, onClick: () => lib.openUpload(), children: "Carica nuove foto" })), _jsx("span", { className: "ak-spacer" }), manage && (_jsxs("label", { className: "ak-hint", children: ["testo alt", " ", _jsxs("select", { className: "mg-sort", value: lib.altFilter, disabled: locked, onChange: (event) => lib.setAltFilter(event.target.value), children: [_jsx("option", { value: "all", children: "tutti" }), _jsx("option", { value: "missing", children: "da completare" }), _jsx("option", { value: "described", children: "completo" }), _jsx("option", { value: "decorative", children: "decorativo" })] })] })), _jsxs("label", { className: "ak-hint", children: ["ordina per", " ", _jsx("select", { className: "mg-sort", value: lib.sortKey, disabled: locked, onChange: (e) => lib.setSort(e.target.value), children: Object.entries(SORT_LABELS).map(([k, l]) => _jsx("option", { value: k, children: l }, k)) }), _jsx("button", { className: "ak-icon", disabled: locked, onClick: lib.flipDir, title: "Inverti l'ordine", children: lib.sortDir === "asc" ? "↑" : "↓" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("label", { className: "mg-all", children: [_jsx("input", { type: "checkbox", checked: allOn, disabled: locked, ref: (el) => { if (el)
+                                                el.indeterminate = lib.someSelected; }, onChange: () => lib.setAll(!allOn) }), _jsx("span", { children: selection.label })] }), !allOn && lib.selectableIds.length > 0 && (_jsxs("button", { className: "mg-act is-link", disabled: locked, onClick: () => lib.setAll(true), children: ["Seleziona tutti gli elementi (", lib.selectableIds.length, ")"] })), manage && (_jsxs(_Fragment, { children: [lib.selectedFiles.length > 0 && (_jsxs("button", { className: "mg-act", disabled: locked, onClick: () => download(lib.shown.filter((f) => sel.has(f.key)).map((f) => ({ url: f.url, name: f.name }))), children: ["Scarica ", lib.selectedFiles.length, " file"] })), _jsx(MoveMenu, { lib: lib, keys: [...sel] }), _jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.remove([...sel]), children: "Elimina" })] })), _jsx("span", { className: "ak-spacer" }), _jsx("button", { className: "mg-act", disabled: locked, onClick: () => lib.setAll(false), children: "Deseleziona" })] })) }), notice && _jsx("p", { className: "mg-picker-notice", children: notice }), lib.error && _jsx("p", { className: "ak-error", onClick: lib.clearError, children: lib.error }), manage && lib.mediaOperations.length > 0 && (_jsx("section", { className: "mg-journal", "aria-live": "polite", "aria-label": "Stato operazioni Media", children: lib.mediaOperations.map((operation) => (_jsxs("div", { className: `mg-journal-row is-${operation.state}`, children: [_jsx("span", { className: "mg-journal-badge", children: operation.type === "move" ? "Spostamento" : "Eliminazione" }), _jsx("span", { children: JOURNAL_LABELS[operation.state] ?? "Operazione Media in attesa." }), operation.failedEntries > 0 && _jsxs("span", { className: "ak-hint", children: [operation.failedEntries, " file da riprovare"] }), _jsx("span", { className: "ak-spacer" }), operation.state === "ready" && !operation.releaseId && (_jsx("button", { className: "mg-act", disabled: locked, onClick: () => void lib.publishMedia(operation), children: "Riprova pubblicazione" })), operation.state === "completed_with_warning" && (_jsx("button", { className: "mg-act", disabled: locked, onClick: () => void lib.resumeMedia(operation), children: "Riprendi" })), ["preparing", "ready", "blocked_in_use", "failed"].includes(operation.state) && !operation.releaseId && (_jsx("button", { className: "mg-act is-danger", disabled: locked, onClick: () => void lib.cancelMedia(operation), children: "Annulla" }))] }, operation.operationId))) })), lib.progress && (_jsxs("p", { className: "mg-progress", children: [lib.progress.verb, " ", lib.progress.done, "/", lib.progress.total, "\u2026 \u2014 non chiudere la pagina"] })), lib.pickUploadJob?.state === "running" && (_jsxs("p", { className: "mg-progress", children: ["Nuove immagini: preparo ", lib.pickUploadJob.conversionDone, "/", lib.pickUploadJob.total, ", carico ", lib.pickUploadJob.uploadDone, "/", lib.pickUploadJob.total, "\u2026"] })), lib.prefix !== "" && (manage || lib.subfolders.length > 0) && (_jsxs("section", { className: "mg-section", children: [_jsxs("div", { className: "mg-section-head", children: [_jsx("h2", { className: "mg-section-title", children: "Cartelle" }), manage && (_jsx("button", { className: "mg-act", disabled: locked, onClick: () => void lib.newFolder(lib.prefix), children: "+ Cartella" }))] }), lib.subfolders.length > 0 && (_jsx("div", { className: "mg", children: lib.subfolders.map((f) => (_jsx(FolderCell, { lib: lib, folder: f, manage: manage, onExternalDrop: () => setDragDepth(0) }, f.prefix))) }))] })), lib.prefix !== "" && (manage || lib.subfolders.length > 0) && lib.shown.length > 0 && (_jsx("h2", { className: "mg-section-title", children: "Foto" })), _jsx("div", { className: "mg", children: lib.shown.map((f, i) => {
                             const on = sel.has(f.key);
+                            const isImage = (f.type ?? "").startsWith("image/");
+                            const altStatus = isImage ? mediaAltStatus(f, altLocales) : null;
                             return (_jsxs("figure", { className: "mg-item" + (on ? " is-on" : ""), draggable: manage && !locked, onDragStart: (e) => {
                                     if (locked) {
                                         e.preventDefault();
@@ -173,7 +176,7 @@ export function MediaGrid({ lib, notice, onPick, onCancel }) {
                                             (manage ? lib.view(i) : lib.toggle(f.key)); }, children: [_jsx("img", { className: "mg-img", src: f.url, alt: "", loading: "lazy", 
                                                 /* Il rapporto è noto prima che l'immagine arrivi (lo dà l'elenco): la cella
                                                    riserva subito l'ingombro giusto e la griglia non salta mentre si carica. */
-                                                style: { aspectRatio: f.w && f.h ? `${f.w} / ${f.h}` : "3 / 2" } }), _jsx("button", { className: "mg-check", "aria-label": on ? "Deseleziona" : "Seleziona", disabled: locked, onClick: (e) => { e.stopPropagation(); lib.toggle(f.key); }, children: on ? "✓" : "" })] }), _jsx("figcaption", { className: "mg-cap", title: f.name, children: f.name })] }, f.key));
+                                                style: { aspectRatio: f.w && f.h ? `${f.w} / ${f.h}` : "3 / 2" } }), manage && altStatus && (_jsx("span", { className: `mg-alt-badge is-${altStatus}`, children: altStatus === "missing" ? "ALT da completare" : altStatus === "decorative" ? "Decorativa" : "ALT completo" })), _jsx("button", { className: "mg-check", "aria-label": on ? "Deseleziona" : "Seleziona", disabled: locked, onClick: (e) => { e.stopPropagation(); lib.toggle(f.key); }, children: on ? "✓" : "" })] }), _jsx("figcaption", { className: "mg-cap", title: f.name, children: f.name })] }, f.key));
                         }) }), !lib.busy && lib.shown.length === 0 && (_jsx("p", { className: "ak-hint", children: lib.prefix === "" && lib.folders.length
                             ? "Nessuna foto fuori dalle cartelle. Scegline una qui a fianco."
                             : "Nessun file qui." })), lib.mode === "pick" && (_jsxs("footer", { className: "mg-foot", children: [_jsxs("span", { className: "ak-hint", children: [sel.size, " selezionate"] }), _jsx("span", { className: "ak-spacer" }), _jsx("button", { className: "ak-btn ak-btn-quiet", disabled: locked, onClick: () => onCancel?.(), children: "Annulla" }), _jsxs("button", { className: "ak-btn ak-btn-primary", disabled: locked || !sel.size, onClick: () => onPick?.(lib.shown.filter((f) => sel.has(f.key))), children: ["Usa ", sel.size > 0 ? `(${sel.size})` : ""] })] }))] }), _jsx(Lightbox, { lib: lib }), _jsx(UploadDialog, { lib: lib })] }));

package/dist/form/media/media-model.d.ts

@@ -1,5 +1,7 @@
 import type { AssetFile, AssetFolder } from "../../api.js";
 export type MediaSelectionKind = "file" | "folder";
+export type MediaAltStatus = "missing" | "described" | "decorative";
+export declare function mediaAltStatus(file: Pick<AssetFile, "alt">, locales: readonly string[]): MediaAltStatus;
 export interface MediaSelectableItem {
     id: string;
     kind: MediaSelectionKind;