@studiotitta/studio-editori 0.1.0

package/dist/palvelin/varasto.js

@@ -0,0 +1,87 @@
+/* ==========================================================================
+   MIHIN SISÄLTÖ TALLENNETAAN
+   ==========================================================================
+   Tuotannossa sisältö on sivuston repossa GitHubissa: git on samalla
+   versiohistoria, ja tallennus käynnistää julkaisun.
+
+   Paikallisessa kehityksessä samaa ei kannata vaatia — kukaan ei halua
+   committia GitHubiin jokaisesta kokeilusta. Siksi kehityksessä sisältö
+   luetaan ja kirjoitetaan sivuston omiin tiedostoihin, jos GitHub-asetuksia
+   ei ole annettu.
+
+   Tiedostovarasto on **tarkoituksella estetty tuotannossa**: Vercelin
+   levy on väliaikainen, joten sinne tallennettu muutos katoaisi hiljaa.
+   ========================================================================== */
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { onSallittuKuvapolku, onSallittuPolku } from "../maarittely.js";
+import { lueTiedosto as lueGithubista, lueTiedostonTiedot, lueVersio, tallennaTiedostot, } from "./github/tiedostot.js";
+import { lueGithubAsetukset } from "./github/yhteys.js";
+function githubVarasto(asetukset) {
+    return {
+        nimi: `GitHub ${asetukset.repo}`,
+        lueVersio: () => lueVersio(asetukset),
+        lueTiedosto: (polku, versio) => lueGithubista(asetukset, polku, versio),
+        lueTiedostonVersio: async (polku, versio) => (await lueTiedostonTiedot(asetukset, polku, versio))?.versio ?? "",
+        tallenna: (tallennus) => tallennaTiedostot(asetukset, tallennus),
+    };
+}
+function paikallinenVarasto(juuri) {
+    const kokoPolku = (polku) => {
+        if (!onSallittuPolku(polku) && !onSallittuKuvapolku(polku)) {
+            throw new Error(`Polku "${polku}" ei ole sallittu.`);
+        }
+        return path.join(juuri, polku);
+    };
+    return {
+        nimi: `paikalliset tiedostot (${juuri})`,
+        async lueVersio() {
+            return "paikallinen";
+        },
+        async lueTiedosto(polku) {
+            try {
+                return await readFile(kokoPolku(polku), "utf8");
+            }
+            catch {
+                return undefined;
+            }
+        },
+        async lueTiedostonVersio() {
+            /* Kehityksessä muokkaajia on yksi, joten ristiriitoja ei synny. */
+            return "paikallinen";
+        },
+        async tallenna(tallennus) {
+            for (const tiedosto of tallennus.tiedostot) {
+                const kohde = kokoPolku(tiedosto.polku);
+                await mkdir(path.dirname(kohde), { recursive: true });
+                if (tiedosto.koodaus === "base64") {
+                    await writeFile(kohde, Buffer.from(tiedosto.sisalto, "base64"));
+                }
+                else {
+                    await writeFile(kohde, tiedosto.sisalto, "utf8");
+                }
+            }
+            return { versio: "paikallinen" };
+        },
+    };
+}
+let kerrottu = false;
+/**
+ * Valitsee varaston: GitHub, jos asetukset ovat, muuten kehityksessä
+ * paikalliset tiedostot. Tuotannossa puuttuvat asetukset ovat virhe.
+ */
+export function valitseVarasto(yliajot = {}) {
+    try {
+        return githubVarasto(lueGithubAsetukset(yliajot));
+    }
+    catch (virhe) {
+        if (process.env.NODE_ENV === "production")
+            throw virhe;
+        if (!kerrottu) {
+            kerrottu = true;
+            console.warn("[editori] GitHub-asetuksia ei ole, joten muutokset tallennetaan paikallisiin " +
+                "tiedostoihin. Tämä toimii vain kehityksessä.");
+        }
+        return paikallinenVarasto(process.cwd());
+    }
+}

package/dist/selain/EditorinPalkki.d.ts

@@ -0,0 +1 @@
+export declare function EditorinPalkki(): import("react").ReactPortal | null;

package/dist/selain/EditorinPalkki.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/* ==========================================================================
+   PALKIN KOTI: SHADOW DOM
+   ==========================================================================
+   Editorin käyttöliittymä elää omassa varjossaan, jotta sivuston tyylit
+   eivät vaikuta siihen eikä se sivustoon. Tämä on edellytys sille, että
+   sama editori toimii jokaisessa asiakassivustossa sen omasta designista
+   riippumatta.
+
+   Tyylit annetaan `adoptedStyleSheets`-rajapinnalla eikä <style>-elementillä,
+   jotta sivuston tiukka Content-Security-Policy riittää sellaisenaan.
+   ========================================================================== */
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Muokkaustila, PALKIN_TYYLIT } from "./Muokkaustila.js";
+export function EditorinPalkki() {
+    const [juuri, setJuuri] = useState(null);
+    useEffect(() => {
+        const isanta = document.createElement("div");
+        isanta.setAttribute("data-editori-palkki", "");
+        document.body.appendChild(isanta);
+        const varjo = isanta.attachShadow({ mode: "open" });
+        if (typeof CSSStyleSheet !== "undefined" && "adoptedStyleSheets" in varjo) {
+            const arkki = new CSSStyleSheet();
+            arkki.replaceSync(PALKIN_TYYLIT);
+            varjo.adoptedStyleSheets = [arkki];
+        }
+        setJuuri(varjo);
+        return () => isanta.remove();
+    }, []);
+    if (!juuri)
+        return null;
+    return createPortal(_jsx(Muokkaustila, {}), juuri);
+}

package/dist/selain/Muokkaustila.d.ts

@@ -0,0 +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";
+export declare function Muokkaustila(): import("react").JSX.Element | null;
+export { PALKIN_TYYLIT };