@studiotitta/studio-editori 0.1.4 → 0.1.6

package/dist/maarittely.d.ts

@@ -102,6 +102,14 @@ export interface TekstilistaKentta<K extends boolean = boolean> extends KentanPe
     /** Monirivinen kohta listassa. */
     monirivinen?: boolean;
     enintaan?: number;
+    /**
+     * Miten lista näkyy sivulla yhtenä tekstinä, esimerkiksi ", ".
+     *
+     * Kun sivusto näyttää listan pilkuilla eroteltuna ("Lounas, Materiaalit"),
+     * sen voi silti muokata paikallaan: editori jakaa tekstin takaisin listaksi
+     * tällä erottimella. Ilman tätä jokainen rivi on oma kohtansa.
+     */
+    erotin?: string;
 }
 /**
  * Kenttäryhmä, esimerkiksi hakukonetiedot.
@@ -110,9 +118,9 @@ export interface TekstilistaKentta<K extends boolean = boolean> extends KentanPe
  * Editorissa se näkyy omana lohkonaan, jotta sivun kentät eivät sekoitu
  * hakukoneteksteihin.
  */
-export interface RyhmaKentta extends KentanPerus {
+export interface RyhmaKentta<R extends Record<string, Kentta> = Record<string, Kentta>> extends KentanPerus {
     tyyppi: "ryhma";
-    kentat: Record<string, Kentta>;
+    kentat: R;
 }
 /**
  * Lista samanlaisia kohteita, esimerkiksi kurssit.
@@ -134,6 +142,14 @@ export interface KohdelistaKentta extends KentanPerus {
      * puhuttaisiin kohteista, mikä ei ole kenenkään sana omasta työstään.
      */
     yksikko?: string;
+    /**
+     * Kohteen oma osoite sivustolla, esimerkiksi "/kurssit/{tunnus}".
+     *
+     * Editori näyttää linkin, jolla kohteen sivun pääsee katsomaan. Uuden
+     * kohteen sivu syntyy vasta tallennuksen jälkeen, joten linkki kertoo
+     * myös, mistä työn tuloksen näkee.
+     */
+    osoite?: string;
     kentat: Record<string, Kentta>;
 }
 export type Kentta = TekstiKentta | TekstialueKentta | LukuKentta | ValintaKentta | KytkinKentta | AikaKentta | KuvaKentta | KielivalintaKentta | TekstilistaKentta | RyhmaKentta | KohdelistaKentta;
@@ -151,7 +167,7 @@ export declare function kielivalinta(asetukset?: Omit<KielivalintaKentta, "tyypp
 export declare function tekstilista<K extends boolean = false>(asetukset?: Omit<TekstilistaKentta<K>, "tyyppi" | "kaannettava"> & {
     kaannettava?: K;
 }): TekstilistaKentta<K>;
-export declare function ryhma(asetukset: Omit<RyhmaKentta, "tyyppi">): RyhmaKentta;
+export declare function ryhma<R extends Record<string, Kentta>>(asetukset: Omit<RyhmaKentta<R>, "tyyppi">): RyhmaKentta<R>;
 export declare function kohdelista(asetukset: Omit<KohdelistaKentta, "tyyppi">): KohdelistaKentta;
 export interface SivunMaarittely {
     /** Nimi, jonka muokkaaja näkee editorissa. Oletuksena sivun avain. */
@@ -193,7 +209,10 @@ export type KentanArvo<K extends Kentta> = K extends {
     tyyppi: "kohdelista";
 } ? Record<string, unknown>[] : K extends {
     tyyppi: "ryhma";
-} ? Record<string, unknown> : string;
+    kentat: infer R extends Record<string, Kentta>;
+} ? {
+    [A in keyof R]: KentanArvo<R[A]>;
+} : string;
 /** Kentän arvo sellaisena kuin se on tiedostossa. */
 type TallennettuArvo<K extends Kentta, L extends string> = K extends {
     kaannettava: true;

package/dist/palvelin/kuvat.js

@@ -125,6 +125,15 @@ export function kuvienReitti(yliajot) {
             console.error("[editori] Kuvan tallennus epäonnistui:", virhe);
             return json({ virhe: "Kuvaa ei saatu tallennettua." }, 502);
         }
-        return json({ src: kuvanOsoite(polku), ehdotus: await ehdotus });
+        /*
+          Esikatselu palautetaan kuvana, ei osoitteena: tiedosto on repossa, mutta
+          sivusto tarjoilee sen vasta seuraavan julkaisun jälkeen. Ilman tätä
+          muokkaaja näkee rikkinäisen kuvan eikä tiedä, menikö lataus läpi.
+        */
+        return json({
+            src: kuvanOsoite(polku),
+            esikatselu: `data:image/${tunnistaTyyppi(valmis) ?? "jpeg"};base64,${Buffer.from(valmis).toString("base64")}`,
+            ehdotus: await ehdotus,
+        });
     };
 }

package/dist/selain/Muokkaustila.d.ts

@@ -1,3 +1,3 @@
-declare const PALKIN_TYYLIT = "\n  :host { all: initial; }\n  .palkki {\n    position: fixed; inset: auto 1rem 1rem auto; z-index: 2147483000;\n    display: flex; align-items: center; gap: .75rem;\n    padding: .6rem .75rem .6rem 1rem; border-radius: .5rem;\n    background: #1d1f1e; color: #fff;\n    font: 500 .875rem/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);\n    max-width: calc(100vw - 2rem);\n  }\n  .tila { opacity: .75; font-weight: 400; }\n  .tila[data-virhe=\"1\"] { color: #ffb4a2; opacity: 1; }\n  button {\n    font: inherit; padding: .45rem .8rem; border-radius: .35rem;\n    border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit;\n    cursor: pointer;\n  }\n  button.ensisijainen { background: #fff; color: #1d1f1e; border-color: #fff; }\n  button:disabled { opacity: .5; cursor: default; }\n  button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n  /* Sivupaneeli */\n  .paneeli {\n    position: fixed; inset: 0 0 0 auto; z-index: 2147482999;\n    width: min(23rem, 100vw); overflow-y: auto;\n    padding: 1.25rem 1.25rem 6rem;\n    background: #fbfaf8; color: #1d1f1e;\n    border-left: 1px solid rgba(0,0,0,.12);\n    font: 400 .875rem/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: -.5rem 0 1.5rem rgba(0,0,0,.08);\n  }\n  .paneeli h2 { margin: 0 0 .75rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }\n  .paneeli section + section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .kentta { margin-bottom: 1rem; }\n  .kentta label { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; font-weight: 600; }\n  .kieli { font-weight: 400; font-size: .75rem; padding: 0 .3rem; border-radius: .2rem; background: rgba(0,0,0,.08); text-transform: uppercase; }\n  .kentta input[type=text], .kentta input[type=number], .kentta input[type=date],\n  .kentta input[type=datetime-local], .kentta select, .kentta textarea {\n    width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25);\n    border-radius: .25rem; background: #fff; font: inherit; color: inherit;\n  }\n  .kentta textarea { resize: vertical; }\n  .kytkin { display: flex; gap: .5rem; align-items: center; font-weight: 400; }\n  .kielivalinta { display: grid; gap: .35rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .ohje { margin: .25rem 0 0; font-size: .8125rem; opacity: .65; }\n  .laskuri { margin: .3rem 0 0; font-size: .8125rem; font-weight: 600; }\n  .virheet { padding: .75rem .9rem; border-radius: .3rem; background: #f6e8e3; color: #6d2b20; }\n  .virheet h2 { margin: 0 0 .4rem; opacity: 1; color: inherit; }\n  .virheet ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  .kuva img { display: block; width: 100%; height: auto; border-radius: .25rem; margin-bottom: .4rem; }\n  .kuva input[type=text] { width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25); border-radius: .25rem; font: inherit; }\n  /* Kuvan tekstikentt\u00E4 on oma lohkonsa: label on .kentta-tasolla flex,\n     ja ilman t\u00E4t\u00E4 otsikko ja kentt\u00E4 asettuisivat vierekk\u00E4in. */\n  .kentta label.alt, .kuva label.alt { display: block; font-weight: 600; margin-top: .5rem; }\n  .alt input { margin-top: .25rem; width: 100%; }\n  .huomio {\n    margin: .4rem 0 0; padding: .5rem .6rem; border-radius: .25rem;\n    background: #fdf3e7; color: #6b4a1f; font-size: .8125rem;\n  }\n  .huomio p { margin: 0 0 .4rem; }\n  .huomio button { color: inherit; border-color: rgba(107,74,31,.35); padding: .3rem .6rem; }\n  .lataus { display: inline-flex; margin: 0 0 .5rem; }\n  .lataus span {\n    padding: .45rem .8rem; border: 1px solid rgba(0,0,0,.25); border-radius: .35rem;\n    cursor: pointer; font-weight: 600;\n  }\n  .lataus input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }\n  .virheviesti { margin: 0 0 .5rem; color: #8c3b2e; font-size: .8125rem; }\n  .tyhja { margin: 0; opacity: .6; }\n  .kohteet { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }\n  .kohteet button {\n    width: 100%; text-align: left; color: inherit; border-color: rgba(0,0,0,.15);\n    display: flex; justify-content: space-between; gap: .5rem; align-items: center;\n  }\n  .kohteet button.valittu { background: #1d1f1e; color: #fff; border-color: #1d1f1e; }\n  .merkki { font-size: .75rem; opacity: .7; white-space: nowrap; }\n  /* Taitos n\u00E4ytt\u00E4\u00E4 painikkeelta ja nuoli osoittaa sinne, minne sis\u00E4lt\u00F6\n     aukeaa: alas kiinni ollessa, yl\u00F6s auki ollessa. */\n  .ryhma { margin: 0 0 1rem; padding: .75rem .8rem; border-radius: .3rem; background: rgba(0,0,0,.035); }\n  .ryhma h3 { margin: 0 0 .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }\n  .ryhma .kentta:last-child { margin-bottom: 0; }\n  .lisatiedot { margin: .25rem 0 1rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .lisatiedot summary {\n    cursor: pointer; font-weight: 600; padding: .7rem 0; list-style: none;\n    display: flex; align-items: center; gap: .5rem;\n  }\n  .lisatiedot summary::-webkit-details-marker { display: none; }\n  .lisatiedot summary::after {\n    content: \"\u25BE\"; font-size: 1.1rem; line-height: 1; margin-left: auto;\n  }\n  .lisatiedot[open] summary::after { content: \"\u25B4\"; }\n  .lisatiedot summary:hover { text-decoration: underline; }\n  .lisatiedot summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n  .kaannos { margin: 0 0 1rem; padding: .6rem .7rem; border-radius: .25rem; background: #eef1ee; }\n  .kaannos p { margin: 0 0 .5rem; }\n  /* Kenttien nimet omalle rivilleen: lause pysyy luettavana ja nimet erottuvat. */\n  .kaannos strong { display: block; margin-top: .15rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit { display: flex; gap: .5rem; margin-bottom: 1rem; }\n  .napit button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit button.vaarallinen { color: #8c3b2e; border-color: rgba(140,59,46,.4); }\n";
+declare const PALKIN_TYYLIT = "\n  :host { all: initial; }\n  .palkki {\n    position: fixed; inset: auto 1rem 1rem auto; z-index: 2147483000;\n    display: flex; align-items: center; gap: .75rem;\n    padding: .6rem .75rem .6rem 1rem; border-radius: .5rem;\n    background: #1d1f1e; color: #fff;\n    font: 500 .875rem/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);\n    max-width: calc(100vw - 2rem);\n  }\n  .tila { opacity: .75; font-weight: 400; }\n  .tila[data-virhe=\"1\"] { color: #ffb4a2; opacity: 1; }\n  button {\n    font: inherit; padding: .45rem .8rem; border-radius: .35rem;\n    border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit;\n    cursor: pointer;\n  }\n  button.ensisijainen { background: #fff; color: #1d1f1e; border-color: #fff; }\n  button:disabled { opacity: .5; cursor: default; }\n  button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n  /* Sivupaneeli */\n  .paneeli {\n    position: fixed; inset: 0 0 0 auto; z-index: 2147482999;\n    width: min(23rem, 100vw); overflow-y: auto;\n    padding: 1.25rem 1.25rem 6rem;\n    background: #fbfaf8; color: #1d1f1e;\n    border-left: 1px solid rgba(0,0,0,.12);\n    font: 400 .875rem/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: -.5rem 0 1.5rem rgba(0,0,0,.08);\n  }\n  .paneeli h2 { margin: 0 0 .75rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }\n  .paneeli section + section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .kentta { margin-bottom: 1rem; }\n  .kentta label { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; font-weight: 600; }\n  .kieli { font-weight: 400; font-size: .75rem; padding: 0 .3rem; border-radius: .2rem; background: rgba(0,0,0,.08); text-transform: uppercase; }\n  .kentta input[type=text], .kentta input[type=number], .kentta input[type=date],\n  .kentta input[type=datetime-local], .kentta select, .kentta textarea {\n    width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25);\n    border-radius: .25rem; background: #fff; font: inherit; color: inherit;\n  }\n  .kentta textarea { resize: vertical; }\n  .kytkin { display: flex; gap: .5rem; align-items: center; font-weight: 400; }\n  .kielivalinta { display: grid; gap: .35rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .ohje { margin: .25rem 0 0; font-size: .8125rem; opacity: .65; }\n  .laskuri { margin: .3rem 0 0; font-size: .8125rem; font-weight: 600; }\n  /* Pakollinen kentt\u00E4: punainen t\u00E4hti on tuttu merkki, eik\u00E4 se vie tilaa. */\n  .pakko { color: #b3261e; font-weight: 700; }\n  .piilossa {\n    position: absolute; width: 1px; height: 1px; overflow: hidden;\n    clip-path: inset(50%); white-space: nowrap;\n  }\n  .linkki {\n    background: none; border: 0; padding: 0; margin: 0; font: inherit;\n    color: inherit; text-decoration: underline; cursor: pointer;\n  }\n  .virheet { padding: .75rem .9rem; border-radius: .3rem; background: #f6e8e3; color: #6d2b20; }\n  .virheet h2 { margin: 0 0 .4rem; opacity: 1; color: inherit; }\n  .virheet ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  .kuva img { display: block; width: 100%; height: auto; border-radius: .25rem; margin-bottom: .4rem; }\n  .kuva input[type=text] { width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25); border-radius: .25rem; font: inherit; }\n  /* Kuvan tekstikentt\u00E4 on oma lohkonsa: label on .kentta-tasolla flex,\n     ja ilman t\u00E4t\u00E4 otsikko ja kentt\u00E4 asettuisivat vierekk\u00E4in. */\n  .kentta label.alt, .kuva label.alt { display: block; font-weight: 600; margin-top: .5rem; }\n  .alt input { margin-top: .25rem; width: 100%; }\n  .huomio {\n    margin: .4rem 0 0; padding: .5rem .6rem; border-radius: .25rem;\n    background: #fdf3e7; color: #6b4a1f; font-size: .8125rem;\n  }\n  .huomio p { margin: 0 0 .4rem; }\n  .huomio button { color: inherit; border-color: rgba(107,74,31,.35); padding: .3rem .6rem; }\n  .lataus { display: inline-flex; margin: 0 0 .5rem; }\n  .lataus span {\n    padding: .45rem .8rem; border: 1px solid rgba(0,0,0,.25); border-radius: .35rem;\n    cursor: pointer; font-weight: 600;\n  }\n  .lataus input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }\n  .virheviesti { margin: 0 0 .5rem; color: #8c3b2e; font-size: .8125rem; }\n  .tyhja { margin: 0; opacity: .6; }\n  .kohteet { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }\n  .kohteet button {\n    width: 100%; text-align: left; color: inherit; border-color: rgba(0,0,0,.15);\n    display: flex; justify-content: space-between; gap: .5rem; align-items: center;\n  }\n  .kohteet button.valittu { background: #1d1f1e; color: #fff; border-color: #1d1f1e; }\n  .merkki { font-size: .75rem; opacity: .7; white-space: nowrap; }\n  /* Taitos n\u00E4ytt\u00E4\u00E4 painikkeelta ja nuoli osoittaa sinne, minne sis\u00E4lt\u00F6\n     aukeaa: alas kiinni ollessa, yl\u00F6s auki ollessa. */\n  .ryhma { margin: 0 0 1rem; padding: .75rem .8rem; border-radius: .3rem; background: rgba(0,0,0,.035); }\n  .ryhma h3 { margin: 0 0 .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }\n  .ryhma .kentta:last-child { margin-bottom: 0; }\n  .lisatiedot { margin: .25rem 0 1rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .lisatiedot summary {\n    cursor: pointer; font-weight: 600; padding: .7rem 0; list-style: none;\n    display: flex; align-items: center; gap: .5rem;\n  }\n  .lisatiedot summary::-webkit-details-marker { display: none; }\n  .lisatiedot summary::after {\n    content: \"\u25BE\"; font-size: 1.1rem; line-height: 1; margin-left: auto;\n  }\n  .lisatiedot[open] summary::after { content: \"\u25B4\"; }\n  .lisatiedot summary:hover { text-decoration: underline; }\n  .lisatiedot summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n  .kaannos { margin: 0 0 1rem; padding: .6rem .7rem; border-radius: .25rem; background: #eef1ee; }\n  .kaannos p { margin: 0 0 .5rem; }\n  /* Kenttien nimet omalle rivilleen: lause pysyy luettavana ja nimet erottuvat. */\n  .kaannos strong { display: block; margin-top: .15rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit { display: flex; gap: .5rem; margin-bottom: 1rem; }\n  .napit button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit button.vaarallinen { color: #8c3b2e; border-color: rgba(140,59,46,.4); }\n";
 export declare function Muokkaustila(): import("react").JSX.Element | null;
 export { PALKIN_TYYLIT };

package/dist/selain/Muokkaustila.js

@@ -72,6 +72,16 @@ const PALKIN_TYYLIT = `
   .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; }
+  /* Pakollinen kenttä: punainen tähti on tuttu merkki, eikä se vie tilaa. */
+  .pakko { color: #b3261e; font-weight: 700; }
+  .piilossa {
+    position: absolute; width: 1px; height: 1px; overflow: hidden;
+    clip-path: inset(50%); white-space: nowrap;
+  }
+  .linkki {
+    background: none; border: 0; padding: 0; margin: 0; font: inherit;
+    color: inherit; text-decoration: underline; cursor: pointer;
+  }
   .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; }
@@ -159,12 +169,15 @@ function lisaaTyylit() {
 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 kirjoitettu lista takaisin listaksi.
+ *
+ * Oletuksena yksi rivi on yksi kohta. Jos sivusto näyttää listan yhtenä
+ * tekstinä (esim. "Lounas, Materiaalit"), erotin tulee sisältömallista.
+ */
+function jaaKappaleiksi(teksti, erotin) {
+    const osat = erotin ? teksti.split(erotin.trim()) : teksti.split(/\n+/);
+    return osat.map((osa) => osa.trim()).filter((osa) => osa !== "");
 }
 /** Sivulla olevat muokattavat kohdat merkintöineen. */
 function merkinnat() {
@@ -325,8 +338,10 @@ export function Muokkaustila() {
                     continue;
                 if (onKaannettava(kenttä))
                     uusi[avain] = {};
+                /* Uusi kohde syntyy piilotettuna, kun mallissa on piilottava
+                   kytkin: keskeneräinen kurssi ei kuulu kävijän silmien eteen. */
                 else if (kenttä.tyyppi === "kytkin")
-                    uusi[avain] = false;
+                    uusi[avain] = kenttä.piilottaa === true;
                 else if (kenttä.tyyppi === "tekstilista")
                     uusi[avain] = [];
                 else if (kenttä.tyyppi === "valinta")
@@ -386,6 +401,9 @@ export function Muokkaustila() {
         }
         return {
             src: tulos.src,
+            /* Esikatselu on itse kuva: tallennettu tiedosto näkyy osoitteessaan
+               vasta seuraavan julkaisun jälkeen. */
+            esikatselu: typeof tulos.esikatselu === "string" ? tulos.esikatselu : null,
             ehdotus: typeof tulos.ehdotus === "string" ? tulos.ehdotus : null,
         };
     }, []);
@@ -446,6 +464,13 @@ export function Muokkaustila() {
                 }
                 continue;
             }
+            /* Sivun oma ryhmä: kentät ovat ryhmän sisällä, eivät sivun juuressa. */
+            if (kenttä.tyyppi === "ryhma") {
+                for (const [ryhmanKentta, ryhmanMaaritys] of Object.entries(kenttä.kentat)) {
+                    tutki({ sivu: sivunAvain, kentta: avain, alikentta: ryhmanKentta }, ryhmanMaaritys);
+                }
+                continue;
+            }
             tutki({ sivu: sivunAvain, kentta: avain }, kenttä);
         }
         return loydot;
@@ -501,14 +526,38 @@ export function Muokkaustila() {
                     muutetut[sivu] = { ...data };
             }
         }
+        /* Sivulla kirjoitetut luvut tarkistetaan tässä: palvelimelle ei kannata
+           lähettää "kymmenen", kun virheen näkee jo selaimessa. */
+        const sivunVirheet = [];
         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;
+            let arvo = teksti;
+            if (lista && maaritys?.tyyppi === "tekstilista") {
+                arvo = jaaKappaleiksi(teksti, maaritys.erotin);
+            }
+            else if (maaritys?.tyyppi === "luku") {
+                const luku = Number(teksti.replace(",", ".").trim());
+                if (teksti.trim() === "" || !Number.isFinite(luku)) {
+                    sivunVirheet.push({
+                        kohde: maaritys.nimi ?? polku.alikentta ?? polku.kentta,
+                        viesti: "Kirjoita pelkkä numero.",
+                    });
+                    continue;
+                }
+                arvo = luku;
+            }
             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));
+            muutetut[polku.sivu] = asetaArvo(pohja(polku.sivu), polku, arvo, kieli, tunnusKentta(sisalto, polku));
+        }
+        if (sivunVirheet.length > 0) {
+            setTila("muokkaa");
+            setViesti("Tarkista sivulla merkityt kohdat. Muutoksesi ovat yhä tässä.");
+            setVirheet(sivunVirheet);
+            return;
         }
         /* Uusi kohde sai tunnuksen "uusi". Nyt kun sillä on nimi, tunnus
            johdetaan siitä: se näkyy osoitteessa, eikä kukaan halua /uusi-2. */
@@ -614,7 +663,7 @@ export function Muokkaustila() {
                     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" }))] })) })] }));
+                }, 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 && malli ? (_jsx("button", { type: "button", className: "ensisijainen", onClick: paalle, children: "Muokkaa" })) : sisalto ? (_jsx("span", { className: "tila", children: "T\u00E4ll\u00E4 sivulla ei ole muokattavaa sis\u00E4lt\u00F6\u00E4." })) : (_jsx("button", { type: "button", onClick: () => location.reload(), children: "Lataa uudelleen" }))] })) })] }));
 }
 /** Mitä yhtä kohdetta tässä listassa kutsutaan, esimerkiksi "kurssi". */
 function kohdelistanYksikko(sisalto, sivu, kentta) {
@@ -635,6 +684,10 @@ function kentanMaaritys(sisalto, polku) {
         return undefined;
     if (polku.alikentta === undefined)
         return kentta;
+    /* Ilman tunnusta alikenttä on sivun oman ryhmän kenttä. */
+    if (polku.tunnus === undefined) {
+        return kentta.tyyppi === "ryhma" ? kentta.kentat[polku.alikentta] : undefined;
+    }
     if (kentta.tyyppi !== "kohdelista")
         return undefined;
     const [ensimmainen, ryhmanKentta] = polku.alikentta.split(".");

package/dist/selain/Paneeli.d.ts

@@ -7,6 +7,7 @@ export interface PaneelinTiedot {
         tyyppi: "kuva";
     }>): Promise<{
         src: string;
+        esikatselu: string | null;
         ehdotus: string | null;
     }>;
     sivu: string;

package/dist/selain/Paneeli.js

@@ -85,15 +85,15 @@ function Kentta_({ polku, maaritys, tiedot, }) {
     const tunniste = `kentta-${polku.kentta}-${polku.tunnus ?? ""}-${(polku.alikentta ?? "").replace(".", "-")}`;
     const kaannettava = "kaannettava" in maaritys && maaritys.kaannettava === true;
     const arvo = nykyinenArvo(maaritys, lueArvo(tiedot.data, polku, tunnuksenNimi(tiedot, polku.kentta)), tiedot.kieli);
-    return (_jsxs("div", { className: "kentta", children: [_jsxs("label", { htmlFor: tunniste, children: [nimi, kaannettava ? _jsx("span", { className: "kieli", children: tiedot.kieli }) : null] }), _jsx(Sisalto, { maaritys: maaritys, arvo: arvo, tunniste: tunniste, kielet: tiedot.kielet, muuta: (uusi) => tiedot.muuta(polku, uusi, kaannettava), lataa: maaritys.tyyppi === "kuva"
+    return (_jsxs("div", { className: "kentta", children: [_jsxs("label", { htmlFor: tunniste, children: [nimi, maaritys.pakollinen ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "pakko", "aria-hidden": "true", title: "Pakollinen tieto", children: "*" }), _jsx("span", { className: "piilossa", children: " (pakollinen)" })] })) : null, kaannettava ? _jsx("span", { className: "kieli", children: tiedot.kieli }) : null] }), _jsx(Sisalto, { maaritys: maaritys, arvo: arvo, tunniste: tunniste, kielet: tiedot.kielet, muuta: (uusi) => tiedot.muuta(polku, uusi, kaannettava), lataa: maaritys.tyyppi === "kuva"
                     ? async (tiedosto) => {
-                        const { src, ehdotus } = await tiedot.lataaKuva(tiedosto, maaritys);
+                        const { src, ehdotus, esikatselu } = await tiedot.lataaKuva(tiedosto, maaritys);
                         const vanha = onOlio(arvo) ? arvo : {};
                         /* Tyhjä teksti täytetään ehdotuksella suoraan; olemassa
                            olevaa ei ylikirjoiteta, vaan ehdotus tarjotaan. */
                         const alt = typeof vanha.alt === "string" ? vanha.alt.trim() : "";
                         tiedot.muuta(polku, { ...vanha, src, ...(alt === "" && ehdotus ? { alt: ehdotus } : {}) }, false);
-                        return ehdotus;
+                        return { ehdotus, esikatselu };
                     }
                     : undefined }), _jsx(Vapaana, { polku: polku, maaritys: maaritys, arvo: arvo, tiedot: tiedot }), maaritys.ohje ? _jsx("p", { className: "ohje", children: maaritys.ohje }) : null] }));
 }
@@ -115,6 +115,75 @@ function Vapaana({ polku, maaritys, arvo, tiedot, }) {
     const vapaana = Math.max(0, yla - arvo);
     return (_jsx("p", { className: "laskuri", role: "status", children: vapaana === 0 ? "Täynnä" : `Vapaana ${vapaana} / ${yla} paikkaa` }));
 }
+/**
+ * Kohteen nimi listassa.
+ *
+ * Nykyinen kieli ensin, mutta kääntämätön kurssi näkyy sillä kielellä, jolla
+ * se on kirjoitettu — ei nimettömänä.
+ */
+/** Onko kohde vasta lisätty eikä sitä ole vielä tallennettu? */
+function uusi(tunnus) {
+    return /^uusi(-\d+)?$/.test(tunnus);
+}
+function kohteenOtsikko(maaritys, kohde, kieli) {
+    const arvo = kohde[maaritys.otsikko];
+    if (typeof arvo === "string")
+        return arvo === "" ? "(nimetön)" : arvo;
+    if (!onOlio(arvo))
+        return "(nimetön)";
+    const omalla = arvo[kieli];
+    if (typeof omalla === "string" && omalla !== "")
+        return omalla;
+    const joku = Object.values(arvo).find((muu) => typeof muu === "string" && muu !== "");
+    return joku ?? "(nimetön)";
+}
+/**
+ * Virheen kohde muokkaajan sanoin.
+ *
+ * Palvelin kertoo polun ("kurssit.lista.testi.dateLabel"), mutta muokkaaja
+ * tuntee kentät niiden nimillä. Nimi haetaan sisältömallista, ja listan
+ * sisällä mukaan tulee se, minkä kohteen kentästä on kyse — muuten viisi
+ * virhettä näyttää samalta.
+ */
+function virheenKohde(tiedot, kohde) {
+    const osat = kohde.split(".");
+    const kentta = osat[1];
+    const maaritys = kentta ? tiedot.malli.kentat[kentta] : undefined;
+    if (!maaritys)
+        return { nimi: osat.at(-1) ?? kohde, sivulla: false };
+    if (maaritys.tyyppi === "ryhma") {
+        const ryhmanKentta = osat[2];
+        const sisempi = ryhmanKentta ? maaritys.kentat[ryhmanKentta] : undefined;
+        return {
+            nimi: sisempi?.nimi ?? ryhmanKentta ?? maaritys.nimi ?? kentta,
+            sivulla: tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${kentta}.${ryhmanKentta}`),
+        };
+    }
+    if (maaritys.tyyppi !== "kohdelista") {
+        return {
+            nimi: maaritys.nimi ?? kentta,
+            sivulla: tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${kentta}`),
+        };
+    }
+    const tunnus = osat[2];
+    const alikentta = osat[3];
+    const alimaaritys = alikentta ? maaritys.kentat[alikentta] : undefined;
+    let nimi = alimaaritys?.nimi ?? alikentta ?? maaritys.nimi ?? kentta;
+    if (alimaaritys?.tyyppi === "ryhma" && osat[4]) {
+        const sisempi = alimaaritys.kentat[osat[4]];
+        nimi = `${alimaaritys.nimi ?? alikentta}: ${sisempi?.nimi ?? osat[4]}`;
+    }
+    const kohteet = Array.isArray(tiedot.data[kentta])
+        ? tiedot.data[kentta]
+        : [];
+    const osuma = kohteet.find((yksi) => yksi[maaritys.tunnus] === tunnus);
+    return {
+        nimi,
+        ...(osuma ? { kohteenNimi: kohteenOtsikko(maaritys, osuma, tiedot.kieli) } : {}),
+        ...(tunnus === undefined ? {} : { tunnus }),
+        sivulla: tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${kentta}[${tunnus}].${alikentta}`),
+    };
+}
 export function Paneeli(tiedot) {
     const kentat = Object.entries(tiedot.malli.kentat);
     const lista = kentat.find(([, maaritys]) => maaritys.tyyppi === "kohdelista");
@@ -122,10 +191,20 @@ export function Paneeli(tiedot) {
         /* Kielivalinta on turha, jos sivustolla on vain yksi kieli. */
         if (maaritys.tyyppi === "kielivalinta" && tiedot.kielet.length < 2)
             return false;
+        /* Ryhmä, jonka jokainen kenttä muokataan jo sivulla, ei kuulu paneeliin:
+           tyhjä otsikko näyttäisi siltä, että jotain puuttuu. */
+        if (maaritys.tyyppi === "ryhma") {
+            return Object.keys(maaritys.kentat).some((ryhmanKentta) => !tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${avain}.${ryhmanKentta}`));
+        }
         return !tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${avain}`);
     };
     const omat = kentat.filter(([avain, maaritys]) => maaritys.tyyppi !== "kohdelista" && nayta([avain, maaritys]));
-    return (_jsxs("aside", { className: "paneeli", "aria-label": "Sis\u00E4ll\u00F6n tiedot", children: [tiedot.virheet && tiedot.virheet.length > 0 ? (_jsxs("section", { className: "virheet", role: "alert", children: [_jsx("h2", { children: "Tallennus pys\u00E4htyi" }), _jsx("ul", { children: tiedot.virheet.slice(0, 6).map((virhe) => (_jsxs("li", { children: [_jsx("strong", { children: virhe.kohde.split(".").at(-1) }), " ", virhe.viesti] }, `${virhe.kohde}-${virhe.viesti}`))) })] })) : null, omat.length > 0 || tiedot.kaannettavia.sivu.length > 0 ? (_jsxs("section", { children: [_jsx("h2", { children: tiedot.malli.nimi }), omat.map(([avain, maaritys]) => (_jsx(Kentta_, { polku: { sivu: tiedot.sivu, kentta: avain }, maaritys: maaritys, tiedot: tiedot }, avain))), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "sivu" }) : null] })) : null, lista ? _jsx(Kohteet, { avain: lista[0], maaritys: lista[1], tiedot: tiedot }) : null] }));
+    return (_jsxs("aside", { className: "paneeli", "aria-label": "Sis\u00E4ll\u00F6n tiedot", children: [tiedot.virheet && tiedot.virheet.length > 0 ? (_jsxs("section", { className: "virheet", role: "alert", children: [_jsx("h2", { children: "Tallennus pys\u00E4htyi" }), _jsx("ul", { children: tiedot.virheet.slice(0, 6).map((virhe) => {
+                            const tiedot_ = virheenKohde(tiedot, virhe.kohde);
+                            return (_jsxs("li", { children: [_jsx("strong", { children: tiedot_.nimi }), " ", virhe.viesti, tiedot_.kohteenNimi ? (_jsx("button", { type: "button", className: "linkki", onClick: () => tiedot_.tunnus && tiedot.valitse(tiedot_.tunnus), children: tiedot_.kohteenNimi })) : null, tiedot_.sivulla ? _jsx("span", { className: "merkki", children: " Muokataan sivulla." }) : null] }, `${virhe.kohde}-${virhe.viesti}`));
+                        }) })] })) : null, omat.length > 0 || tiedot.kaannettavia.sivu.length > 0 ? (_jsxs("section", { children: [_jsx("h2", { children: tiedot.malli.nimi }), omat.map(([avain, maaritys]) => maaritys.tyyppi === "ryhma" ? (_jsxs("div", { className: "ryhma", children: [_jsx("h3", { children: maaritys.nimi ?? avain }), maaritys.ohje ? _jsx("p", { className: "ohje", children: maaritys.ohje }) : null, Object.entries(maaritys.kentat)
+                                .filter(([ryhmanKentta]) => !tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${avain}.${ryhmanKentta}`))
+                                .map(([ryhmanKentta, ryhmanMaaritys]) => (_jsx(Kentta_, { polku: { sivu: tiedot.sivu, kentta: avain, alikentta: ryhmanKentta }, maaritys: ryhmanMaaritys, tiedot: tiedot }, ryhmanKentta)))] }, avain)) : (_jsx(Kentta_, { polku: { sivu: tiedot.sivu, kentta: avain }, maaritys: maaritys, tiedot: tiedot }, avain))), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "sivu" }) : null] })) : null, lista ? _jsx(Kohteet, { avain: lista[0], maaritys: lista[1], tiedot: tiedot }) : null] }));
 }
 const KIELELLE = {
     fi: "suomeksi",
@@ -169,20 +248,7 @@ function Kohteet({ avain, maaritys, tiedot, }) {
     const kohteet = Array.isArray(tiedot.data[avain])
         ? tiedot.data[avain]
         : [];
-    const nimi = (kohde) => {
-        const arvo = kohde[maaritys.otsikko];
-        if (typeof arvo === "string")
-            return arvo === "" ? "(nimetön)" : arvo;
-        if (!onOlio(arvo))
-            return "(nimetön)";
-        /* Nykyinen kieli ensin, mutta kääntämätön kurssi näkyy listassa sillä
-           kielellä, jolla se on kirjoitettu — ei nimettömänä. */
-        const omalla = arvo[tiedot.kieli];
-        if (typeof omalla === "string" && omalla !== "")
-            return omalla;
-        const joku = Object.values(arvo).find((muu) => typeof muu === "string" && muu !== "");
-        return joku ?? "(nimetön)";
-    };
+    const nimi = (kohde) => kohteenOtsikko(maaritys, kohde, tiedot.kieli);
     /**
      * Merkinnät kohteen nimen perässä: piilotus, huomionarvoinen tila ja
      * täyttyminen. Näin listasta näkee tilanteen avaamatta jokaista kohdetta.
@@ -228,7 +294,7 @@ function Kohteet({ avain, maaritys, tiedot, }) {
                             const tunnus = String(kohde[maaritys.tunnus] ?? "");
                             const omatMerkinnat = merkinnat(kohde);
                             return (_jsx("li", { children: _jsxs("button", { type: "button", className: tunnus === valitunTunnus ? "valittu" : undefined, "aria-current": tunnus === valitunTunnus ? "true" : undefined, onClick: () => tiedot.valitse(tunnus), children: [_jsx("span", { children: nimi(kohde) }), omatMerkinnat.length > 0 ? (_jsx("span", { className: "merkki", children: omatMerkinnat.join(" · ") })) : null] }) }, tunnus));
-                        }) }), _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", onClick: () => tiedot.lisaaKohde(avain, maaritys), children: ["+ Lis\u00E4\u00E4 ", yksikko] }) }), valittu ? null : (_jsxs("p", { className: "ohje", children: ["Valitse ", yksikko, ", niin n\u00E4et sen tiedot."] }))] }), valittu && valitunTunnus ? (_jsxs("section", { children: [_jsx("h2", { children: nimi(valittu) }), ensisijaiset.map(kentta), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "kohde" }) : null, lisatiedot.length > 0 ? (_jsxs("details", { className: "lisatiedot", children: [_jsx("summary", { children: "Lis\u00E4tiedot" }), lisatiedot.map(kentta)] })) : null, _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", className: "vaarallinen", onClick: () => tiedot.poistaKohde(avain, maaritys.tunnus, valitunTunnus), children: ["Poista ", yksikko] }) })] })) : null] }));
+                        }) }), _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", onClick: () => tiedot.lisaaKohde(avain, maaritys), children: ["+ Lis\u00E4\u00E4 ", yksikko] }) }), valittu ? null : (_jsxs("p", { className: "ohje", children: ["Valitse ", yksikko, ", niin n\u00E4et sen tiedot."] }))] }), valittu && valitunTunnus ? (_jsxs("section", { children: [_jsx("h2", { children: nimi(valittu) }), maaritys.osoite ? (uusi(valitunTunnus) ? (_jsx("p", { className: "ohje", children: "Oma sivu syntyy, kun tallennat." })) : (_jsx("p", { className: "ohje", children: _jsx("a", { className: "linkki", href: maaritys.osoite.replace("{tunnus}", valitunTunnus), children: "Avaa sivu" }) }))) : null, ensisijaiset.map(kentta), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "kohde" }) : null, lisatiedot.length > 0 ? (_jsxs("details", { className: "lisatiedot", children: [_jsx("summary", { children: "Lis\u00E4tiedot" }), lisatiedot.map(kentta)] })) : null, _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", className: "vaarallinen", onClick: () => tiedot.poistaKohde(avain, maaritys.tunnus, valitunTunnus), children: ["Poista ", yksikko] }) })] })) : null] }));
 }
 /**
  * Kuvakenttä: nykyinen kuva, vaihto ja vaihtoehtoinen teksti.
@@ -242,6 +308,9 @@ function Kuvakentta({ maaritys, arvo, muuta, lataa, }) {
     /* Vasta vaihdettu kuva: vanha teksti kuvaa yhä vanhaa kuvaa. */
     const [vaihdettu, setVaihdettu] = useState(false);
     const [ehdotus, setEhdotus] = useState(null);
+    /* Juuri ladattu kuva näytetään sellaisenaan: tallennettu tiedosto ilmestyy
+       osoitteeseensa vasta, kun sivusto on rakennettu uudelleen. */
+    const [esikatselu, setEsikatselu] = useState(null);
     const kuva = onOlio(arvo) ? arvo : undefined;
     async function valitse(tiedosto) {
         if (!tiedosto)
@@ -251,9 +320,10 @@ function Kuvakentta({ maaritys, arvo, muuta, lataa, }) {
         setEhdotus(null);
         try {
             const nykyinenAlt = typeof kuva?.alt === "string" ? kuva.alt.trim() : "";
-            const uusiEhdotus = await lataa(tiedosto);
+            const { ehdotus: uusiEhdotus, esikatselu: uusiKuva } = await lataa(tiedosto);
             setTila("valmis");
             setVaihdettu(true);
+            setEsikatselu(uusiKuva);
             /* Jos kentässä oli jo teksti, ehdotusta tarjotaan mutta ei tyrkytetä. */
             if (uusiEhdotus && nykyinenAlt !== "")
                 setEhdotus(uusiEhdotus);
@@ -263,7 +333,7 @@ function Kuvakentta({ maaritys, arvo, muuta, lataa, }) {
             setVirhe(syy instanceof Error ? syy.message : "Kuvan lataus ei onnistunut.");
         }
     }
-    return (_jsxs("div", { className: "kuva", children: [typeof kuva?.src === "string" ? (_jsx("img", { src: kuva.src, alt: "" })) : (_jsx("p", { className: "tyhja", children: "Ei kuvaa." })), _jsxs("label", { className: "lataus", children: [_jsx("span", { children: tila === "lataa" ? "Käsitellään…" : "Vaihda kuva" }), _jsx("input", { type: "file", accept: "image/*", disabled: tila === "lataa", onChange: (tapahtuma) => valitse(tapahtuma.target.files?.[0]) })] }), tila === "virhe" ? _jsx("p", { className: "virheviesti", children: virhe }) : null, _jsxs("label", { className: "alt", children: ["Kuvan kuvaus", _jsx("input", { type: "text", placeholder: "Esimerkiksi: kynttil\u00E4 ikkunalaudalla", value: typeof kuva?.alt === "string" ? kuva.alt : "", onChange: (tapahtuma) => {
+    return (_jsxs("div", { className: "kuva", children: [esikatselu ?? (typeof kuva?.src === "string" ? kuva.src : null) ? (_jsxs(_Fragment, { children: [_jsx("img", { src: esikatselu ?? kuva?.src, alt: "" }), esikatselu ? (_jsx("p", { className: "ohje", children: "Uusi kuva. Se tulee sivulle, kun tallennat." })) : null] })) : (_jsx("p", { className: "tyhja", children: "Ei kuvaa." })), _jsxs("label", { className: "lataus", children: [_jsx("span", { children: tila === "lataa" ? "Käsitellään…" : "Vaihda kuva" }), _jsx("input", { type: "file", accept: "image/*", disabled: tila === "lataa", onChange: (tapahtuma) => valitse(tapahtuma.target.files?.[0]) })] }), tila === "virhe" ? _jsx("p", { className: "virheviesti", children: virhe }) : null, _jsxs("label", { className: "alt", children: ["Kuvan kuvaus", _jsx("input", { type: "text", placeholder: "Esimerkiksi: kynttil\u00E4 ikkunalaudalla", value: typeof kuva?.alt === "string" ? kuva.alt : "", onChange: (tapahtuma) => {
                             setVaihdettu(false);
                             muuta({ ...(kuva ?? {}), alt: tapahtuma.target.value });
                         } })] }), ehdotus ? (_jsxs("div", { className: "huomio", role: "status", children: [_jsxs("p", { children: ["Ehdotus: \u201C", ehdotus, "\u201D"] }), _jsx("button", { type: "button", onClick: () => {

package/dist/selain/polku.d.ts

@@ -3,7 +3,13 @@ export interface Kentanpolku {
     kentta: string;
     /** Kohteen tunnus, jos kenttä on listan sisällä. */
     tunnus?: string;
-    /** Kentän nimi kohteen sisällä. */
+    /**
+     * Kentän nimi ryhmän sisällä.
+     *
+     * Ilman tunnusta tämä on sivun oman ryhmän kenttä ("hero.otsikko" →
+     * kentta "hero", alikenttä "otsikko"). Tunnuksen kanssa se on kohteen
+     * kenttä, joka voi olla myös kohteen ryhmässä ("meta.title").
+     */
     alikentta?: string;
 }
 export declare function lueKentanpolku(polku: string): Kentanpolku | null;

package/dist/selain/polku.js

@@ -4,6 +4,7 @@
    Sivulla oleva merkintä kertoo, mitä kohtaa sisällöstä elementti näyttää:
 
      kurssit.otsikko                      sivun oma kenttä
+     etusivu.hero.otsikko                 kenttä sivun ryhmässä
      kurssit.lista[joogaretriitti].nimi   yhden kohteen kenttä listassa
 
    Hakasulkeissa on kohteen tunnus, ei järjestysnumero. Näin muokkaus osuu
@@ -13,23 +14,31 @@
    Tämä tiedosto on tarkoituksella pelkkää logiikkaa ilman selainta, jotta
    sen voi testata suoraan.
    ========================================================================== */
-/* Alikenttä voi olla ryhmän sisällä: "kurssit.lista[tunnus].meta.title". */
-const MUOTO = /^([a-zA-Z][a-zA-Z0-9]*)\.([a-zA-Z][a-zA-Z0-9]*)(?:\[([^\]]+)\]\.([a-zA-Z][a-zA-Z0-9]*(?:\.[a-zA-Z][a-zA-Z0-9]*)?))?$/;
+/* Kolme muotoa: sivun kenttä, sivun ryhmän kenttä ja kohteen kenttä
+   listassa. Kohteen kenttä voi olla vielä kohteen oman ryhmän sisällä:
+   "kurssit.lista[tunnus].meta.title". */
+const MUOTO = /^([a-zA-Z][a-zA-Z0-9]*)\.([a-zA-Z][a-zA-Z0-9]*)(?:\[([^\]]+)\]\.([a-zA-Z][a-zA-Z0-9]*(?:\.[a-zA-Z][a-zA-Z0-9]*)?)|\.([a-zA-Z][a-zA-Z0-9]*))?$/;
 export function lueKentanpolku(polku) {
     const osuma = MUOTO.exec(polku.trim());
     if (!osuma)
         return null;
-    const [, sivu, kentta, tunnus, alikentta] = osuma;
+    const [, sivu, kentta, tunnus, kohteenKentta, ryhmanKentta] = osuma;
     if (!sivu || !kentta)
         return null;
-    if (tunnus !== undefined && !alikentta)
-        return null;
-    return tunnus === undefined ? { sivu, kentta } : { sivu, kentta, tunnus, alikentta };
+    if (tunnus !== undefined) {
+        if (!kohteenKentta)
+            return null;
+        return { sivu, kentta, tunnus, alikentta: kohteenKentta };
+    }
+    return ryhmanKentta === undefined ? { sivu, kentta } : { sivu, kentta, alikentta: ryhmanKentta };
 }
 export function kirjoitaKentanpolku(polku) {
-    return polku.tunnus === undefined
+    if (polku.tunnus !== undefined) {
+        return `${polku.sivu}.${polku.kentta}[${polku.tunnus}].${polku.alikentta}`;
+    }
+    return polku.alikentta === undefined
         ? `${polku.sivu}.${polku.kentta}`
-        : `${polku.sivu}.${polku.kentta}[${polku.tunnus}].${polku.alikentta}`;
+        : `${polku.sivu}.${polku.kentta}.${polku.alikentta}`;
 }
 /* ---- Arvon asettaminen --------------------------------------------------- */
 function onOlio(arvo) {
@@ -49,7 +58,17 @@ export function asetaArvo(sivunData, polku, arvo, kieli, tunnusKentta = "tunnus"
         return { ...pohja, [kieli]: arvo };
     };
     if (polku.tunnus === undefined) {
-        return { ...sivunData, [polku.kentta]: yhdista(sivunData[polku.kentta]) };
+        if (polku.alikentta === undefined) {
+            return { ...sivunData, [polku.kentta]: yhdista(sivunData[polku.kentta]) };
+        }
+        /* Sivun ryhmä: muut ryhmän kentät säilyvät ennallaan. */
+        const ryhma = onOlio(sivunData[polku.kentta])
+            ? sivunData[polku.kentta]
+            : {};
+        return {
+            ...sivunData,
+            [polku.kentta]: { ...ryhma, [polku.alikentta]: yhdista(ryhma[polku.alikentta]) },
+        };
     }
     const lista = Array.isArray(sivunData[polku.kentta]) ? [...sivunData[polku.kentta]] : [];
     const sija = lista.findIndex((kohde) => onOlio(kohde) && kohde[tunnusKentta] === polku.tunnus);
@@ -73,8 +92,12 @@ export function asetaArvo(sivunData, polku, arvo, kieli, tunnusKentta = "tunnus"
 }
 /** Lukee yhden arvon sivun sisällöstä. */
 export function lueArvo(sivunData, polku, tunnusKentta = "tunnus") {
-    if (polku.tunnus === undefined)
-        return sivunData[polku.kentta];
+    if (polku.tunnus === undefined) {
+        const arvo = sivunData[polku.kentta];
+        if (polku.alikentta === undefined)
+            return arvo;
+        return onOlio(arvo) ? arvo[polku.alikentta] : undefined;
+    }
     const lista = sivunData[polku.kentta];
     if (!Array.isArray(lista))
         return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiotitta/studio-editori",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Studio Titan sisältöeditori asiakassivustoille: tekstit ja kuvat muokataan suoraan sivulla",
   "license": "UNLICENSED",
   "type": "module",