@studiotitta/studio-editori 0.1.0

package/dist/selain/Muokkaustila.js

@@ -0,0 +1,646 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* ==========================================================================
+   MUOKKAUSTILA SELAIMESSA
+   ==========================================================================
+   Kirjautunut muokkaaja näkee sivun alareunassa pienen palkin. Kun hän
+   painaa *Muokkaa*, sivun muokattavat kohdat muuttuvat kirjoitettaviksi
+   siinä paikassa, jossa ne ovat, ja oikeaan reunaan avautuu paneeli sille,
+   mikä ei näy sivulla: ryhmäkoko, tila, näkyvyys, hakukonetekstit.
+
+   Kolme sääntöä, jotka ohjaavat tätä tiedostoa:
+
+   1. **Tavallinen kävijä ei lataa tästä riviäkään.** Sivusto renderöi
+      komponentin vain kirjautuneelle muokkaajalle.
+   2. **Sivuston ulkoasu ei saa vaikuttaa editoriin eikä editori siihen.**
+      Palkki ja paneeli elävät Shadow DOMissa, ja korostustyylit lisätään
+      `adoptedStyleSheets`-rajapinnalla — ei yhtään inline-tyyliä, joten
+      tiukka Content-Security-Policy riittää sellaisenaan.
+   3. **Mitään ei menetetä vahingossa.** Tallentamattomista muutoksista
+      varoitetaan lähtiessä, ja *Peru* palauttaa alkuperäiset tekstit.
+   ========================================================================== */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { valitseKieli } from "./kieli.js";
+import { pienennaKuva } from "./kuva.js";
+import { Paneeli } from "./Paneeli.js";
+import { asetaArvo, kirjoitaKentanpolku, lueArvo, lueKentanpolku, vapaaTunnus, } from "./polku.js";
+const PALKIN_TYYLIT = `
+  :host { all: initial; }
+  .palkki {
+    position: fixed; inset: auto 1rem 1rem auto; z-index: 2147483000;
+    display: flex; align-items: center; gap: .75rem;
+    padding: .6rem .75rem .6rem 1rem; border-radius: .5rem;
+    background: #1d1f1e; color: #fff;
+    font: 500 .875rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
+    max-width: calc(100vw - 2rem);
+  }
+  .tila { opacity: .75; font-weight: 400; }
+  .tila[data-virhe="1"] { color: #ffb4a2; opacity: 1; }
+  button {
+    font: inherit; padding: .45rem .8rem; border-radius: .35rem;
+    border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit;
+    cursor: pointer;
+  }
+  button.ensisijainen { background: #fff; color: #1d1f1e; border-color: #fff; }
+  button:disabled { opacity: .5; cursor: default; }
+  button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+
+  /* Sivupaneeli */
+  .paneeli {
+    position: fixed; inset: 0 0 0 auto; z-index: 2147482999;
+    width: min(23rem, 100vw); overflow-y: auto;
+    padding: 1.25rem 1.25rem 6rem;
+    background: #fbfaf8; color: #1d1f1e;
+    border-left: 1px solid rgba(0,0,0,.12);
+    font: 400 .875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-shadow: -.5rem 0 1.5rem rgba(0,0,0,.08);
+  }
+  .paneeli h2 { margin: 0 0 .75rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
+  .paneeli section + section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.1); }
+  .kentta { margin-bottom: 1rem; }
+  .kentta label { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; font-weight: 600; }
+  .kieli { font-weight: 400; font-size: .75rem; padding: 0 .3rem; border-radius: .2rem; background: rgba(0,0,0,.08); text-transform: uppercase; }
+  .kentta input[type=text], .kentta input[type=number], .kentta input[type=date],
+  .kentta input[type=datetime-local], .kentta select, .kentta textarea {
+    width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25);
+    border-radius: .25rem; background: #fff; font: inherit; color: inherit;
+  }
+  .kentta textarea { resize: vertical; }
+  .kytkin { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
+  .kielivalinta { display: grid; gap: .35rem; }
+  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }
+  .ohje { margin: .25rem 0 0; font-size: .8125rem; opacity: .65; }
+  .laskuri { margin: .3rem 0 0; font-size: .8125rem; font-weight: 600; }
+  .virheet { padding: .75rem .9rem; border-radius: .3rem; background: #f6e8e3; color: #6d2b20; }
+  .virheet h2 { margin: 0 0 .4rem; opacity: 1; color: inherit; }
+  .virheet ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
+  .kuva img { display: block; width: 100%; height: auto; border-radius: .25rem; margin-bottom: .4rem; }
+  .kuva input[type=text] { width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25); border-radius: .25rem; font: inherit; }
+  /* Kuvan tekstikenttä on oma lohkonsa: label on .kentta-tasolla flex,
+     ja ilman tätä otsikko ja kenttä asettuisivat vierekkäin. */
+  .kentta label.alt, .kuva label.alt { display: block; font-weight: 600; margin-top: .5rem; }
+  .alt input { margin-top: .25rem; width: 100%; }
+  .huomio {
+    margin: .4rem 0 0; padding: .5rem .6rem; border-radius: .25rem;
+    background: #fdf3e7; color: #6b4a1f; font-size: .8125rem;
+  }
+  .huomio p { margin: 0 0 .4rem; }
+  .huomio button { color: inherit; border-color: rgba(107,74,31,.35); padding: .3rem .6rem; }
+  .lataus { display: inline-flex; margin: 0 0 .5rem; }
+  .lataus span {
+    padding: .45rem .8rem; border: 1px solid rgba(0,0,0,.25); border-radius: .35rem;
+    cursor: pointer; font-weight: 600;
+  }
+  .lataus input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
+  .virheviesti { margin: 0 0 .5rem; color: #8c3b2e; font-size: .8125rem; }
+  .tyhja { margin: 0; opacity: .6; }
+  .kohteet { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }
+  .kohteet button {
+    width: 100%; text-align: left; color: inherit; border-color: rgba(0,0,0,.15);
+    display: flex; justify-content: space-between; gap: .5rem; align-items: center;
+  }
+  .kohteet button.valittu { background: #1d1f1e; color: #fff; border-color: #1d1f1e; }
+  .merkki { font-size: .75rem; opacity: .7; white-space: nowrap; }
+  /* Taitos näyttää painikkeelta ja nuoli osoittaa sinne, minne sisältö
+     aukeaa: alas kiinni ollessa, ylös auki ollessa. */
+  .ryhma { margin: 0 0 1rem; padding: .75rem .8rem; border-radius: .3rem; background: rgba(0,0,0,.035); }
+  .ryhma h3 { margin: 0 0 .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
+  .ryhma .kentta:last-child { margin-bottom: 0; }
+  .lisatiedot { margin: .25rem 0 1rem; border-top: 1px solid rgba(0,0,0,.1); }
+  .lisatiedot summary {
+    cursor: pointer; font-weight: 600; padding: .7rem 0; list-style: none;
+    display: flex; align-items: center; gap: .5rem;
+  }
+  .lisatiedot summary::-webkit-details-marker { display: none; }
+  .lisatiedot summary::after {
+    content: "▾"; font-size: 1.1rem; line-height: 1; margin-left: auto;
+  }
+  .lisatiedot[open] summary::after { content: "▴"; }
+  .lisatiedot summary:hover { text-decoration: underline; }
+  .lisatiedot summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+  .kaannos { margin: 0 0 1rem; padding: .6rem .7rem; border-radius: .25rem; background: #eef1ee; }
+  .kaannos p { margin: 0 0 .5rem; }
+  /* Kenttien nimet omalle rivilleen: lause pysyy luettavana ja nimet erottuvat. */
+  .kaannos strong { display: block; margin-top: .15rem; }
+  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }
+  .napit { display: flex; gap: .5rem; margin-bottom: 1rem; }
+  .napit button { color: inherit; border-color: rgba(0,0,0,.25); }
+  .napit button.vaarallinen { color: #8c3b2e; border-color: rgba(140,59,46,.4); }
+`;
+const KOROSTUS = `
+  [data-editori-kentta] { border-radius: .15rem; }
+  [data-editori-muokattavana="1"] {
+    outline: 1px dashed rgba(0,0,0,.35); outline-offset: .25rem; cursor: text;
+  }
+  [data-editori-muokattavana="1"]:hover { outline-style: solid; }
+  [data-editori-muokattavana="1"]:focus { outline: 2px solid currentColor; outline-offset: .25rem; }
+  [data-editori-muokattavana="1"] > p:last-child { margin-bottom: 0; }
+  body[data-editori-paneeli="1"] { padding-right: min(23rem, 100vw); }
+`;
+/** Lisää tyylit ilman inline-tyylejä, jotta CSP:tä ei tarvitse löysätä. */
+function lisaaTyylit() {
+    if (typeof CSSStyleSheet === "undefined" || !("adoptedStyleSheets" in document))
+        return () => { };
+    const arkki = new CSSStyleSheet();
+    arkki.replaceSync(KOROSTUS);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, arkki];
+    return () => {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter((muu) => muu !== arkki);
+    };
+}
+/**
+ * Kentän teksti elementistä.
+ *
+ * Kappalelistalla luetaan `innerText`, joka säilyttää kappalejaon
+ * rivinvaihtoina. Tavallisella tekstillä `textContent` riittää eikä se ole
+ * riippuvainen siitä, miten selain sattuu taittamaan sisällön.
+ */
+function lueTeksti(elementti, lista) {
+    return (lista ? elementti.innerText : elementti.textContent) ?? "";
+}
+/** Sivulla kirjoitettu kappalelista takaisin listaksi. */
+function jaaKappaleiksi(teksti) {
+    return teksti
+        .split(/\n+/)
+        .map((kappale) => kappale.trim())
+        .filter((kappale) => kappale !== "");
+}
+/** Sivulla olevat muokattavat kohdat merkintöineen. */
+function merkinnat() {
+    const tulos = [];
+    for (const elementti of document.querySelectorAll("[data-editori-kentta]")) {
+        const polku = lueKentanpolku(elementti.getAttribute("data-editori-kentta") ?? "");
+        if (polku)
+            tulos.push({ elementti, polku });
+    }
+    return tulos;
+}
+function kentanKieli(elementti, kielet) {
+    const lahin = elementti.closest("[lang]");
+    return valitseKieli(lahin?.getAttribute("lang") ?? document.documentElement.lang, kielet);
+}
+function onKaannettava(maaritys) {
+    return Boolean(maaritys && "kaannettava" in maaritys && maaritys.kaannettava === true);
+}
+export function Muokkaustila() {
+    const [tila, setTila] = useState("lataa");
+    const [viesti, setViesti] = useState("");
+    const [virheet, setVirheet] = useState([]);
+    const [sisalto, setSisalto] = useState(null);
+    const [valittu, setValittu] = useState(undefined);
+    const alkuperaiset = useRef(new Map());
+    useEffect(() => {
+        let voimassa = true;
+        fetch("/api/editori/sisalto", { headers: { Accept: "application/json" } })
+            .then(async (vastaus) => {
+            if (!voimassa)
+                return;
+            /*
+              401 tarkoittaa, ettei istuntoa ole. Palkkia ei silloin näytetä
+              lainkaan: Draft Mode yksin ei tee kenestäkään muokkaajaa.
+            */
+            if (vastaus.status === 401) {
+                setTila("piilossa");
+                return;
+            }
+            if (!vastaus.ok)
+                throw new Error(String(vastaus.status));
+            setSisalto((await vastaus.json()));
+            setTila("valmis");
+        })
+            .catch(() => {
+            if (!voimassa)
+                return;
+            setTila("virhe");
+            setViesti("Sisältöä ei saatu haettua. Lataa sivu uudelleen.");
+        });
+        return () => {
+            voimassa = false;
+        };
+    }, []);
+    useEffect(() => lisaaTyylit(), []);
+    /* Sivu päätellään sivulla olevista merkinnöistä: sivuston ei tarvitse
+       kertoa erikseen, mitä sisältöä se näyttää. */
+    const sivunAvain = useMemo(() => {
+        if (typeof document === "undefined")
+            return undefined;
+        return merkinnat()[0]?.polku.sivu;
+    }, [tila]);
+    /*
+      Sivun kieli luetaan samasta paikasta kuin paikan päällä muokatessa:
+      ensimmäisen muokattavan kohdan lähimmästä lang-määreestä. Pelkkä
+      <html lang> kertoisi sivuston oletuskielen myös käännetyllä sivulla, ja
+      paneelissa tehty muutos menisi väärän kielen päälle.
+    */
+    const sivunKieli = useMemo(() => {
+        if (typeof document === "undefined" || !sisalto)
+            return "fi";
+        const ensimmainen = merkinnat()[0]?.elementti;
+        return ensimmainen
+            ? kentanKieli(ensimmainen, sisalto.kielet)
+            : valitseKieli(document.documentElement.lang, sisalto.kielet);
+    }, [sisalto, tila]);
+    const muokataan = tila === "muokkaa";
+    const tallentaa = tila === "tallentaa";
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        if (muokataan || tallentaa)
+            document.body.setAttribute("data-editori-paneeli", "1");
+        else
+            document.body.removeAttribute("data-editori-paneeli");
+    }, [muokataan, tallentaa]);
+    const onLista = useCallback((polku) => sisalto !== null && kentanMaaritys(sisalto, polku)?.tyyppi === "tekstilista", [sisalto]);
+    const paalle = useCallback(() => {
+        alkuperaiset.current = new Map();
+        for (const { elementti, polku } of merkinnat()) {
+            alkuperaiset.current.set(elementti, lueTeksti(elementti, onLista(polku)));
+            elementti.setAttribute("contenteditable", "plaintext-only");
+            elementti.setAttribute("data-editori-muokattavana", "1");
+            elementti.setAttribute("spellcheck", "true");
+        }
+        setTila("muokkaa");
+        setViesti("");
+        setVirheet([]);
+    }, [onLista]);
+    const pois = useCallback((palautaTekstit) => {
+        for (const { elementti } of merkinnat()) {
+            if (palautaTekstit) {
+                elementti.textContent = alkuperaiset.current.get(elementti) ?? elementti.textContent;
+            }
+            elementti.removeAttribute("contenteditable");
+            elementti.removeAttribute("data-editori-muokattavana");
+            elementti.removeAttribute("spellcheck");
+        }
+    }, []);
+    function sivullaMuuttunut() {
+        return merkinnat().some(({ elementti, polku }) => lueTeksti(elementti, onLista(polku)) !== alkuperaiset.current.get(elementti));
+    }
+    /* Tallentamattomat muutokset eivät saa kadota selaimen sulkemiseen. */
+    useEffect(() => {
+        if (tila !== "muokkaa")
+            return;
+        const varoita = (tapahtuma) => {
+            if (!sivullaMuuttunut() && !muutettu.current)
+                return;
+            tapahtuma.preventDefault();
+        };
+        window.addEventListener("beforeunload", varoita);
+        return () => window.removeEventListener("beforeunload", varoita);
+    }, [tila]);
+    /** Onko paneelissa tehty muutoksia, joita ei ole vielä tallennettu? */
+    const muutettu = useRef(false);
+    const muuta = useCallback((polku, arvo, kaannettava) => {
+        setSisalto((vanha) => {
+            if (!vanha)
+                return vanha;
+            const sivunData = vanha.sivut[polku.sivu] ?? {};
+            const kieli = kaannettava ? sivunKieli : undefined;
+            muutettu.current = true;
+            return {
+                ...vanha,
+                sivut: {
+                    ...vanha.sivut,
+                    [polku.sivu]: asetaArvo(sivunData, polku, arvo, kieli, tunnusKentta(vanha, polku)),
+                },
+            };
+        });
+    }, [sivunKieli]);
+    const lisaaKohde = useCallback((kentta, maaritys) => {
+        setSisalto((vanha) => {
+            if (!vanha || !sivunAvain)
+                return vanha;
+            const sivunData = vanha.sivut[sivunAvain] ?? {};
+            const lista = Array.isArray(sivunData[kentta]) ? [...sivunData[kentta]] : [];
+            const kaytossa = lista
+                .map((kohde) => kohde?.[maaritys.tunnus])
+                .filter((tunnus) => typeof tunnus === "string");
+            const tunnus = vapaaTunnus(kaytossa, "uusi");
+            const uusi = { [maaritys.tunnus]: tunnus };
+            /* Uusi kohde aloitetaan tyhjänä mutta oikean muotoisena, jotta
+               tarkistus osaa kertoa mitä siitä vielä puuttuu. */
+            for (const [avain, kenttä] of Object.entries(maaritys.kentat)) {
+                if (avain === maaritys.tunnus)
+                    continue;
+                if (onKaannettava(kenttä))
+                    uusi[avain] = {};
+                else if (kenttä.tyyppi === "kytkin")
+                    uusi[avain] = false;
+                else if (kenttä.tyyppi === "tekstilista")
+                    uusi[avain] = [];
+                else if (kenttä.tyyppi === "valinta")
+                    uusi[avain] = kenttä.vaihtoehdot[0]?.arvo;
+            }
+            muutettu.current = true;
+            setValittu(tunnus);
+            return {
+                ...vanha,
+                sivut: { ...vanha.sivut, [sivunAvain]: { ...sivunData, [kentta]: [...lista, uusi] } },
+            };
+        });
+    }, [sivunAvain]);
+    const poistaKohde = useCallback((kentta, tunnusKentanNimi, tunnus) => {
+        const yksikko = kohdelistanYksikko(sisalto, sivunAvain, kentta);
+        if (!window.confirm(`Poistetaanko ${yksikko} "${tunnus}" kokonaan? Sen voi palauttaa vain versiohistoriasta.`)) {
+            return;
+        }
+        setSisalto((vanha) => {
+            if (!vanha || !sivunAvain)
+                return vanha;
+            const sivunData = vanha.sivut[sivunAvain] ?? {};
+            const lista = Array.isArray(sivunData[kentta]) ? sivunData[kentta] : [];
+            muutettu.current = true;
+            setValittu(undefined);
+            return {
+                ...vanha,
+                sivut: {
+                    ...vanha.sivut,
+                    [sivunAvain]: {
+                        ...sivunData,
+                        [kentta]: lista.filter((kohde) => kohde?.[tunnusKentanNimi] !== tunnus),
+                    },
+                },
+            };
+        });
+    }, [sivunAvain]);
+    /**
+     * Lataa kuvan: selain pienentää sen ensin, palvelin käsittelee ja
+     * tallentaa. Kuva menee sivustolle heti, ja kenttä alkaa osoittaa siihen
+     * vasta kun muokkaaja painaa Tallenna.
+     */
+    const lataaKuva = useCallback(async (tiedosto, maaritys) => {
+        const pienennetty = await pienennaKuva(tiedosto);
+        const vastaus = await fetch("/api/editori/kuva", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                tiedosto: pienennetty.tavut,
+                kansio: maaritys.kansio ?? "yleiset",
+                ...(maaritys.suhde === undefined ? {} : { suhde: maaritys.suhde }),
+            }),
+        });
+        const tulos = await vastaus.json().catch(() => ({}));
+        if (!vastaus.ok || typeof tulos.src !== "string") {
+            throw new Error(typeof tulos.virhe === "string" ? tulos.virhe : "Kuvan lataus ei onnistunut.");
+        }
+        return {
+            src: tulos.src,
+            ehdotus: typeof tulos.ehdotus === "string" ? tulos.ehdotus : null,
+        };
+    }, []);
+    /**
+     * Kentät, joilta puuttuu käännös tälle sivulle: lähdekielellä on tekstiä,
+     * nykyisellä kielellä ei.
+     */
+    const kaannettavat = useMemo(() => {
+        if (!sisalto || !sivunAvain)
+            return [];
+        const malliSivu = sisalto.malli[sivunAvain];
+        if (!malliSivu)
+            return [];
+        const lahde = sisalto.kielet.find((kieli) => kieli !== sivunKieli);
+        if (!lahde)
+            return [];
+        const data = sisalto.sivut[sivunAvain] ?? {};
+        const loydot = [];
+        const tutki = (polku, kenttä) => {
+            if (!("kaannettava" in kenttä) || kenttä.kaannettava !== true)
+                return;
+            const arvo = lueArvo(data, polku, tunnusKentta(sisalto, polku));
+            if (typeof arvo !== "object" || arvo === null || Array.isArray(arvo))
+                return;
+            const kaannokset = arvo;
+            const nykyinen = kaannokset[sivunKieli];
+            const lahdeteksti = kaannokset[lahde];
+            const tyhja = nykyinen === undefined ||
+                nykyinen === "" ||
+                (Array.isArray(nykyinen) && nykyinen.length === 0);
+            const onLahde = (typeof lahdeteksti === "string" && lahdeteksti !== "") ||
+                (Array.isArray(lahdeteksti) && lahdeteksti.length > 0);
+            if (tyhja && onLahde) {
+                loydot.push({
+                    polku,
+                    arvo: lahdeteksti,
+                    nimi: kenttä.nimi ?? polku.alikentta ?? polku.kentta,
+                });
+            }
+        };
+        for (const [avain, kenttä] of Object.entries(malliSivu.kentat)) {
+            if (kenttä.tyyppi === "kohdelista") {
+                if (!valittu)
+                    continue;
+                for (const [alikentta, alikenttä] of Object.entries(kenttä.kentat)) {
+                    if (alikenttä.tyyppi === "ryhma") {
+                        for (const [ryhmanKentta, ryhmanMaaritys] of Object.entries(alikenttä.kentat)) {
+                            tutki({
+                                sivu: sivunAvain,
+                                kentta: avain,
+                                tunnus: valittu,
+                                alikentta: `${alikentta}.${ryhmanKentta}`,
+                            }, ryhmanMaaritys);
+                        }
+                        continue;
+                    }
+                    tutki({ sivu: sivunAvain, kentta: avain, tunnus: valittu, alikentta }, alikenttä);
+                }
+                continue;
+            }
+            tutki({ sivu: sivunAvain, kentta: avain }, kenttä);
+        }
+        return loydot;
+    }, [sisalto, sivunAvain, sivunKieli, valittu, tila]);
+    /**
+     * Täyttää puuttuvat käännökset ehdotuksina. Ehdotukset menevät kenttiin,
+     * eivät suoraan sivustolle: muokkaaja lukee ne ja painaa Tallenna.
+     */
+    const kaanna = useCallback(async (mihin) => {
+        const joukko = kaannettavat.filter(({ polku }) => mihin === "sivu" ? polku.tunnus === undefined : polku.tunnus !== undefined);
+        if (!sisalto || joukko.length === 0)
+            return "Kaikki on jo käännetty.";
+        const lahde = sisalto.kielet.find((kieli) => kieli !== sivunKieli);
+        if (!lahde)
+            return "Sivustolla on vain yksi kieli.";
+        const tekstit = {};
+        for (const { polku, arvo } of joukko)
+            tekstit[kirjoitaKentanpolku(polku)] = arvo;
+        const vastaus = await fetch("/api/editori/kaannos", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ lahdekieli: lahde, kohdekieli: sivunKieli, tekstit }),
+        });
+        const tulos = await vastaus.json().catch(() => ({}));
+        if (!vastaus.ok || typeof tulos.kaannokset !== "object" || tulos.kaannokset === null) {
+            return typeof tulos.virhe === "string" ? tulos.virhe : "Käännöstä ei saatu.";
+        }
+        let maara = 0;
+        for (const { polku } of joukko) {
+            const kaannos = tulos.kaannokset[kirjoitaKentanpolku(polku)];
+            if (kaannos === undefined)
+                continue;
+            muuta(polku, kaannos, true);
+            maara++;
+        }
+        return maara === 0
+            ? "Käännöstä ei saatu."
+            : `${maara} kohtaa käännetty. Lue ne läpi ennen tallennusta.`;
+    }, [sisalto, kaannettavat, sivunKieli, muuta]);
+    async function tallenna() {
+        if (!sisalto)
+            return;
+        setTila("tallentaa");
+        setViesti("");
+        setVirheet([]);
+        /* Sivulla tehdyt muutokset luetaan vasta tässä ja kirjoitetaan paneelin
+           muutosten päälle. Kentät, joita tämä sivu ei näytä, säilyvät ennallaan. */
+        const muutetut = {};
+        const pohja = (sivu) => muutetut[sivu] ?? { ...(sisalto.sivut[sivu] ?? {}) };
+        if (muutettu.current) {
+            for (const [sivu, data] of Object.entries(sisalto.sivut)) {
+                if (sivu === sivunAvain)
+                    muutetut[sivu] = { ...data };
+            }
+        }
+        for (const { elementti, polku } of merkinnat()) {
+            const maaritys = kentanMaaritys(sisalto, polku);
+            const lista = maaritys?.tyyppi === "tekstilista";
+            const teksti = lueTeksti(elementti, lista);
+            if (teksti === alkuperaiset.current.get(elementti))
+                continue;
+            const kieli = onKaannettava(maaritys) ? kentanKieli(elementti, sisalto.kielet) : undefined;
+            muutetut[polku.sivu] = asetaArvo(pohja(polku.sivu), polku, lista ? jaaKappaleiksi(teksti) : teksti, kieli, tunnusKentta(sisalto, polku));
+        }
+        /* Uusi kohde sai tunnuksen "uusi". Nyt kun sillä on nimi, tunnus
+           johdetaan siitä: se näkyy osoitteessa, eikä kukaan halua /uusi-2. */
+        for (const [sivu, data] of Object.entries(muutetut)) {
+            const malliSivu = sisalto.malli[sivu];
+            if (!malliSivu)
+                continue;
+            for (const [kentta, maaritys] of Object.entries(malliSivu.kentat)) {
+                if (maaritys.tyyppi !== "kohdelista")
+                    continue;
+                const lista = data[kentta];
+                if (!Array.isArray(lista))
+                    continue;
+                const kaytossa = lista
+                    .map((kohde) => kohde?.[maaritys.tunnus])
+                    .filter((tunnus) => typeof tunnus === "string");
+                data[kentta] = lista.map((kohde) => {
+                    const olio = kohde;
+                    const tunnus = olio[maaritys.tunnus];
+                    if (typeof tunnus !== "string" || !/^uusi(-\d+)?$/.test(tunnus))
+                        return kohde;
+                    const otsikko = olio[maaritys.otsikko];
+                    const teksti = typeof otsikko === "string"
+                        ? otsikko
+                        : typeof otsikko === "object" && otsikko !== null
+                            ? Object.values(otsikko).find((arvo) => typeof arvo === "string" && arvo !== "")
+                            : undefined;
+                    if (!teksti)
+                        return kohde;
+                    return {
+                        ...olio,
+                        [maaritys.tunnus]: vapaaTunnus(kaytossa.filter((muu) => muu !== tunnus), teksti),
+                    };
+                });
+            }
+        }
+        if (Object.keys(muutetut).length === 0) {
+            pois(false);
+            setTila("valmis");
+            setViesti("Ei muutoksia.");
+            return;
+        }
+        try {
+            const vastaus = await fetch("/api/editori/tallenna", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ perustuu: sisalto.versiot, sivut: muutetut }),
+            });
+            const tulos = await vastaus.json().catch(() => ({}));
+            if (!vastaus.ok) {
+                /* Muokkaustila jää päälle: muutokset ovat yhä sivulla ja paneelissa,
+                   ja juuri paneelissa näkyy, mikä kenttä pysäytti tallennuksen. */
+                setTila("muokkaa");
+                setViesti(typeof tulos.virhe === "string"
+                    ? tulos.virhe
+                    : "Tallennus ei onnistunut. Muutoksesi ovat yhä tässä.");
+                /* Kenttäkohtaiset virheet paneeliin: "Sisällössä on virheitä" ei
+                   yksin auta ketään löytämään sitä tyhjää kenttää. */
+                if (Array.isArray(tulos.virheet))
+                    setVirheet(tulos.virheet);
+                return;
+            }
+            setSisalto({
+                ...sisalto,
+                versio: tulos.versio,
+                /* Tallennuksen jälkeen haetaan uudet tiedostoversiot, jotta seuraava
+                   tallennus perustuu juuri kirjoitettuun eikä vanhaan. */
+                versiot: { ...sisalto.versiot, ...(tulos.versiot ?? {}) },
+                sivut: { ...sisalto.sivut, ...muutetut },
+            });
+            for (const { elementti, polku } of merkinnat()) {
+                alkuperaiset.current.set(elementti, lueTeksti(elementti, onLista(polku)));
+            }
+            muutettu.current = false;
+            pois(false);
+            setTila("tallennettu");
+            setViesti("Tallennettu. Sivusto rakennetaan uudelleen noin minuutissa.");
+        }
+        catch {
+            setTila("muokkaa");
+            setViesti("Verkkoyhteys katkesi. Muutoksesi ovat yhä tässä.");
+        }
+    }
+    function peru() {
+        const paneelissaMuutoksia = muutettu.current;
+        pois(true);
+        muutettu.current = false;
+        setTila("valmis");
+        setViesti("Muutokset peruttu.");
+        /* Paneelin muutokset perutaan hakemalla sisältö uudelleen: ne eivät ole
+           sivun tekstissä vaan editorin omassa muistissa. */
+        if (paneelissaMuutoksia)
+            location.reload();
+    }
+    if (tila === "piilossa")
+        return null;
+    const malli = sisalto && sivunAvain ? sisalto.malli[sivunAvain] : undefined;
+    const sivullaNakyvat = new Set(merkinnat().map(({ elementti }) => elementti.getAttribute("data-editori-kentta") ?? ""));
+    return (_jsxs(_Fragment, { children: [(muokataan || tallentaa) && sisalto && sivunAvain && malli ? (_jsx(Paneeli, { sivu: sivunAvain, malli: malli, data: sisalto.sivut[sivunAvain] ?? {}, kieli: sivunKieli, kielet: sisalto.kielet, sivullaNakyvat: sivullaNakyvat, valittu: valittu, virheet: virheet, muuta: muuta, lataaKuva: lataaKuva, kaanna: kaanna, kaannosKaytossa: sisalto.ominaisuudet?.kaannos ?? false, kaannettavia: {
+                    sivu: kaannettavat
+                        .filter(({ polku }) => polku.tunnus === undefined)
+                        .map(({ nimi }) => nimi),
+                    kohde: kaannettavat
+                        .filter(({ polku }) => polku.tunnus !== undefined)
+                        .map(({ nimi }) => nimi),
+                }, valitse: setValittu, lisaaKohde: lisaaKohde, poistaKohde: poistaKohde })) : null, _jsx("div", { className: "palkki", role: "region", "aria-label": "Sis\u00E4ll\u00F6n muokkaus", children: tila === "lataa" ? (_jsx("span", { className: "tila", children: "Editori avautuu\u2026" })) : muokataan || tallentaa ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tila", role: "status", "data-virhe": viesti ? "1" : "0", children: tallentaa ? "Tallennetaan…" : (viesti ?? "") !== "" ? viesti : "Muokkaat sivua" }), _jsx("button", { type: "button", onClick: peru, disabled: tallentaa, children: "Peru" }), _jsx("button", { type: "button", className: "ensisijainen", onClick: tallenna, disabled: tallentaa, children: "Tallenna" })] })) : (_jsxs(_Fragment, { children: [viesti ? (_jsx("span", { className: "tila", role: "status", "data-virhe": tila === "virhe" ? "1" : "0", children: viesti })) : null, tila === "tallennettu" ? (_jsx("button", { type: "button", onClick: () => location.reload(), children: "P\u00E4ivit\u00E4 sivu" })) : null, sisalto ? (_jsx("button", { type: "button", className: "ensisijainen", onClick: paalle, children: "Muokkaa" })) : (_jsx("button", { type: "button", onClick: () => location.reload(), children: "Lataa uudelleen" }))] })) })] }));
+}
+/** Mitä yhtä kohdetta tässä listassa kutsutaan, esimerkiksi "kurssi". */
+function kohdelistanYksikko(sisalto, sivu, kentta) {
+    if (!sisalto || !sivu)
+        return "kohde";
+    const maaritys = sisalto.malli[sivu]?.kentat[kentta];
+    return maaritys?.tyyppi === "kohdelista" ? (maaritys.yksikko ?? "kohde") : "kohde";
+}
+/** Minkä kentän arvo yksilöi kohteen tässä listassa. */
+function tunnusKentta(sisalto, polku) {
+    const kentta = sisalto.malli[polku.sivu]?.kentat[polku.kentta];
+    return kentta?.tyyppi === "kohdelista" ? kentta.tunnus : "tunnus";
+}
+/** Kentän määrittely mallista, myös listan sisältä. */
+function kentanMaaritys(sisalto, polku) {
+    const kentta = sisalto.malli[polku.sivu]?.kentat[polku.kentta];
+    if (!kentta)
+        return undefined;
+    if (polku.alikentta === undefined)
+        return kentta;
+    if (kentta.tyyppi !== "kohdelista")
+        return undefined;
+    const [ensimmainen, ryhmanKentta] = polku.alikentta.split(".");
+    const alikentta = kentta.kentat[ensimmainen];
+    if (ryhmanKentta === undefined)
+        return alikentta;
+    return alikentta?.tyyppi === "ryhma" ? alikentta.kentat[ryhmanKentta] : undefined;
+}
+export { PALKIN_TYYLIT };

package/dist/selain/PalkkiLataaja.d.ts

@@ -0,0 +1 @@
+export declare function PalkkiLataaja(): import("react").JSX.Element;

package/dist/selain/PalkkiLataaja.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/* ==========================================================================
+   PALKIN LATAAJA
+   ==========================================================================
+   Ohut väli, joka pitää editorin käyttöliittymän omana latauspalanaan.
+
+   Ilman tätä kääntäjä niputtaa editorin selainkoodin samaan tiedostoon
+   sivuston oman koodin kanssa, ja tavallinen kävijä lataisi sen turhaan.
+   `next/dynamic` pakottaa erillisen palan, joka haetaan vasta kun palkki
+   oikeasti näytetään — eli vain kirjautuneelle muokkaajalle.
+   ========================================================================== */
+import dynamic from "next/dynamic";
+const Palkki = dynamic(() => import("./EditorinPalkki.js").then((osa) => osa.EditorinPalkki), {
+    ssr: false,
+});
+export function PalkkiLataaja() {
+    return _jsx(Palkki, {});
+}